/*
 * Admin theme palette — shared across all admin pages.
 *
 * The default :root block holds the ORIGINAL dark values, so dark mode renders
 * exactly as before. The [data-theme="light"] block overrides each variable.
 *
 * Only colors that must flip between themes are variables here:
 *   --bg-page / --bg-panel  : page and panel/modal backgrounds (were dark gradients)
 *   --text                  : primary text (was #fff)
 *   --wa-*                  : the white-on-dark rgba(255,255,255,α) values,
 *                             named by alpha (wa-10 == alpha 0.10)
 *
 * Accent colors (blue/green/red/yellow) and black shadows/overlays stay literal
 * in the templates — they read fine on both backgrounds.
 *
 * The sidebar and mobile topbar intentionally stay dark in both themes.
 */

:root {
  --bg-page: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --bg-panel: linear-gradient(135deg, #1a1a2e, #16213e);
  --bg-panel-alt: linear-gradient(135deg, #1a1a2e, #0f3460);
  --bg-solid: #1a1a2e;
  --text: #fff;

  /* Accent foregrounds — original (dark) shades. Overridden darker for light. */
  --accent-blue:   #63b3ed;
  --accent-green:  #68d391;
  --accent-red:    #fc8181;
  --accent-yellow: #f6e05e;
  --accent-green-fill: rgba(104,211,145,0.55);

  --wa-025: rgba(255,255,255,0.025);
  --wa-03:  rgba(255,255,255,0.03);
  --wa-05:  rgba(255,255,255,0.05);
  --wa-07:  rgba(255,255,255,0.07);
  --wa-08:  rgba(255,255,255,0.08);
  --wa-10:  rgba(255,255,255,0.1);
  --wa-12:  rgba(255,255,255,0.12);
  --wa-15:  rgba(255,255,255,0.15);
  --wa-20:  rgba(255,255,255,0.2);
  --wa-25:  rgba(255,255,255,0.25);
  --wa-30:  rgba(255,255,255,0.3);
  --wa-35:  rgba(255,255,255,0.35);
  --wa-40:  rgba(255,255,255,0.4);
  --wa-45:  rgba(255,255,255,0.45);
  --wa-50:  rgba(255,255,255,0.5);
  --wa-60:  rgba(255,255,255,0.6);
  --wa-70:  rgba(255,255,255,0.7);
  --wa-80:  rgba(255,255,255,0.8);
  --wa-85:  rgba(255,255,255,0.85);
  --wa-90:  rgba(255,255,255,0.9);
}

:root[data-theme="light"] {
  --bg-page: linear-gradient(135deg, #eef2f8 0%, #e8eef7 50%, #dfe8f3 100%);
  --bg-panel: linear-gradient(135deg, #ffffff, #f1f5fb);
  --bg-panel-alt: linear-gradient(135deg, #ffffff, #eaf1fa);
  --bg-solid: #ffffff;
  --text: #182233;

  /* Darker, higher-contrast accents for the light background */
  --accent-blue:   #2b6cb0;
  --accent-green:  #2f855a;
  --accent-red:    #c53030;
  --accent-yellow: #b7791f;
  --accent-green-fill: rgba(47,133,90,0.5);

  /* low alpha -> subtle grey surfaces/borders on white */
  --wa-025: rgba(24,34,51,0.02);
  --wa-03:  rgba(24,34,51,0.028);
  --wa-05:  rgba(24,34,51,0.04);
  --wa-07:  rgba(24,34,51,0.05);
  --wa-08:  rgba(24,34,51,0.06);
  --wa-10:  rgba(24,34,51,0.09);
  --wa-12:  rgba(24,34,51,0.1);
  --wa-15:  rgba(24,34,51,0.12);
  --wa-20:  rgba(24,34,51,0.16);
  /* mid/high alpha -> readable dark text on white */
  --wa-25:  rgba(24,34,51,0.26);
  --wa-30:  rgba(24,34,51,0.32);
  --wa-35:  rgba(24,34,51,0.38);
  --wa-40:  rgba(24,34,51,0.46);
  --wa-45:  rgba(24,34,51,0.52);
  --wa-50:  rgba(24,34,51,0.58);
  --wa-60:  rgba(24,34,51,0.66);
  --wa-70:  rgba(24,34,51,0.74);
  --wa-80:  rgba(24,34,51,0.82);
  --wa-85:  rgba(24,34,51,0.86);
  --wa-90:  rgba(24,34,51,0.9);
}

/* Theme toggle button — lives in the (always-dark) sidebar footer */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: all 0.2s;
}
.theme-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* =========================================================
   Boutons admin — definitions partagees.

   Chaque page charge admin.css AVANT son propre <style>, donc une page
   qui a besoin d'une taille differente peut encore surcharger ces
   regles localement. C'est le cas de payouts, portal, subscription et
   onboarding, dont les boutons sont volontairement plus petits ou plus
   grands.
   ========================================================= */

.btn-sm {
  background: linear-gradient(135deg, var(--accent-blue), #3182ce);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(49,130,206,0.4);
}
.btn-cancel {
  background: var(--wa-10);
  color: var(--wa-70);
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-cancel:hover {
  background: var(--wa-20);
  color: var(--text);
}
.btn-back {
  color: var(--wa-60);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--wa-15);
  transition: all 0.2s;
}
.btn-back:hover {
  color: var(--text);
  background: var(--wa-08);
}
.btn-ghost {
  background: var(--wa-10);
  color: var(--wa-70);
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s;
}
.btn-ghost:hover {
  background: var(--wa-20);
  color: var(--text);
}
.btn-xs {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-xs-blue {
  background: rgba(99,179,237,0.2);
  color: var(--accent-blue);
}
.btn-xs-blue:hover {
  background: rgba(99,179,237,0.35);
}
.btn-xs-orange {
  background: rgba(246,224,94,0.2);
  color: var(--accent-yellow);
}
.btn-xs-orange:hover {
  background: rgba(246,224,94,0.35);
}
.btn-xs-red {
  background: rgba(252,129,129,0.2);
  color: var(--accent-red);
}
.btn-xs-red:hover {
  background: rgba(252,129,129,0.35);
}
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon svg {
  width: 18px;
  height: 18px;
}
.btn-icon-blue svg {
  stroke: var(--accent-blue);
}
.btn-icon-blue:hover {
  background: rgba(99,179,237,0.2);
}
.btn-icon-red svg {
  stroke: var(--accent-red);
}
.btn-icon-red:hover {
  background: rgba(252,129,129,0.2);
}

/* Un lien stylise en bouton ne doit pas garder le souligne des liens. */
a.btn-sm, a.btn-back, a.btn-ghost, a.btn-xs, a.btn-xs-blue, a.btn-xs-orange, a.btn-xs-red {
  text-decoration: none;
}

/* =========================================================
   Modales admin — definitions partagees.

   Les pages qui portent deja leur propre copie continuent de la
   surcharger : admin.css est charge avant leur <style>. Rien ne change
   pour elles, mais une nouvelle page n'a plus a dupliquer ce bloc.
   ========================================================= */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--wa-15);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal-title { font-size: 18px; font-weight: 700; }
.modal-close {
  background: var(--wa-10);
  border: none;
  color: var(--wa-60);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { background: var(--wa-20); color: var(--text); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Sur mobile, le navigateur transforme les numeros de telephone (et parfois
   les dates ou montants) en liens, colores en bleu ou violet et illisibles
   sur fond sombre. Ils restent cliquables, mais gardent l'apparence du texte
   qui les entoure. */
a[href^="tel:"],
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}