/* ==========================================================================
   Thèmes de test pour la page /staff — chargés UNIQUEMENT par staff-b.html
   et staff-c.html (copies de test). staff.html n'utilise pas ce fichier.
   Les variables sont en !important pour passer par-dessus celles que
   staff.js pose en ligne sur <html> (mode / cartes / accent).
   ========================================================================== */

/* ---------- B · Pastel doux ---------- */
body.theme-b {
  --t-font: 'Nunito', -apple-system, sans-serif;
  --t-base: #f6dbe6;
  --t-bg:
    radial-gradient(90% 45% at 0% 0%, #dcc9f4 0%, transparent 60%),
    radial-gradient(90% 55% at 100% 40%, #f7b9cf 0%, transparent 60%),
    radial-gradient(90% 55% at 0% 100%, #f3a3c0 0%, transparent 60%),
    #f6dbe6;
  --t-card: rgba(255, 250, 252, 0.64);
  --t-card-strong: rgba(255, 255, 255, 0.9);
  --t-line: rgba(255, 255, 255, 0.8);
  --t-sep: rgba(122, 101, 114, 0.14);
  --t-text: #2b1f2a;
  --t-muted: #7a6572;
  --t-accent: #d0356b;
  --t-grad: linear-gradient(135deg, #f08db1, #b99af0);
  --t-cta: linear-gradient(90deg, #f7c6d9, #e3c9f5);
  --t-cta-text: #3a2233;
  --t-cta-border: #fff;
  --t-shadow: 0 10px 30px -18px rgba(150, 60, 100, 0.5);
  --t-work: linear-gradient(90deg, #f08db1, #b99af0);
  --t-work-dot: #e58ac0;
  --t-planned: rgba(208, 53, 107, 0.10);
  --t-radius: 24px;
  --t-nav-bg: rgba(255, 248, 251, 0.72);
  --t-theme-color: #e8cdea;
}

/* ---------- C · Ciel clair ---------- */
body.theme-c {
  --t-font: 'Manrope', -apple-system, sans-serif;
  --t-base: #f5f6f6;
  --t-bg:
    radial-gradient(60% 16% at 25% 8%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(50% 12% at 85% 18%, rgba(255, 255, 255, 0.8), transparent 70%),
    linear-gradient(180deg, #a9c9dc 0%, #cfe0ea 30%, #eef2f3 55%, #f5f6f6 100%);
  --t-card: rgba(255, 255, 255, 0.74);
  --t-card-strong: #ffffff;
  --t-line: rgba(255, 255, 255, 0.95);
  --t-sep: rgba(18, 20, 22, 0.08);
  --t-text: #121416;
  --t-muted: #6c7479;
  --t-accent: #121416;
  --t-grad: #121416;
  --t-cta: #121416;
  --t-cta-text: #ffffff;
  --t-cta-border: #121416;
  --t-shadow: 0 8px 24px -16px rgba(40, 70, 90, 0.4);
  --t-work: #121416;
  --t-work-dot: #121416;
  --t-planned: rgba(18, 20, 22, 0.07);
  --t-radius: 22px;
  --t-nav-bg: rgba(255, 255, 255, 0.9);
  --t-theme-color: #a9c9dc;
}

/* ---------- Palette commune : on écrase celle de staff.css ---------- */
body[class*="theme-"],
body[class*="theme-"].dark {
  --bg: transparent !important;
  --card: var(--t-card) !important;
  --accent: var(--t-accent) !important;
  --text: var(--t-text) !important;
  --muted: var(--t-muted) !important;
  --line: var(--t-sep) !important;
  --input-bg: rgba(255, 255, 255, 0.7) !important;
  --input-border: var(--t-line) !important;
  --sub-card: rgba(255, 255, 255, 0.55) !important;
  --btn-soft: rgba(255, 255, 255, 0.6) !important;
  --track: rgba(255, 255, 255, 0.6) !important;
  --chip-bg: rgba(255, 255, 255, 0.75) !important;
  --planned-mark: var(--t-accent) !important;
  --today-bg: var(--t-card-strong) !important;
  --today-border: var(--t-accent) !important;
  font-family: var(--t-font);
  background: transparent;
  color: var(--t-text);
}
html:has(body[class*="theme-"]) { background: var(--t-base, #f5f6f6); }
body[class*="theme-"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--t-bg);
}
body[class*="theme-"] button,
body[class*="theme-"] input,
body[class*="theme-"] select { font-family: inherit; }

/* Bandeau « version test » */
.t-testflag {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 12px; z-index: 60;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75); color: var(--t-muted);
  border: 1px solid var(--t-line); backdrop-filter: blur(10px);
}

/* ---------- Cartes en verre ---------- */
body[class*="theme-"] .card {
  background: var(--t-card);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  padding: 18px;
}
body[class*="theme-"] .card h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
body[class*="theme-"] .big-count { font-size: 26px; letter-spacing: -0.02em; color: var(--t-text); }
body.theme-b .big-count {
  background: var(--t-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- En-tête (Bonjour + date) ---------- */
.t-header {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 2px 16px;
}
.t-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #fff;
  background: var(--t-grad);
  box-shadow: var(--t-shadow);
}
.t-date { font-size: 12.5px; color: var(--t-muted); font-weight: 600; text-transform: capitalize; }
.t-hello { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Connexion ---------- */
body[class*="theme-"] #login-view { align-items: stretch; padding: 0; }
body[class*="theme-"] .login-card {
  background: transparent; box-shadow: none; border-radius: 0;
  max-width: 440px; margin: 0 auto; text-align: left;
  min-height: 100vh; min-height: 100dvh;
  padding: calc(48px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.t-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; }
.t-brand i {
  width: 24px; height: 24px; border-radius: 50%; display: inline-block;
  background: linear-gradient(135deg, #fff, #d8b8f5);
}
body.theme-c .t-brand i {
  border-radius: 7px; background: #121416; color: #fff; font-style: normal;
  font-size: 13px; display: grid; place-items: center;
}
body.theme-b .t-brand { color: #fff; }
.t-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 0; }
.t-hero-kicker { font-size: 14px; color: var(--t-muted); font-weight: 600; margin-bottom: 6px; }
.t-hero h1 {
  font-size: 40px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; margin: 0;
}
body.theme-b .t-hero h1 { color: #fff; text-shadow: 0 2px 20px rgba(208, 53, 107, 0.15); }
body.theme-b .t-hero h1 .t-blur { display: block; filter: blur(4px); opacity: 0.85; }
body.theme-c .t-hero h1 { font-weight: 600; font-size: 36px; }
.t-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.t-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--t-line);
}
body[class*="theme-"] .login-card form {
  background: var(--t-card); border: 1px solid var(--t-line);
  border-radius: var(--t-radius); padding: 18px; box-shadow: var(--t-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
body[class*="theme-"] .login-card input[type="text"],
body[class*="theme-"] .login-card input[type="password"] {
  border-radius: 16px; padding: 14px 16px; border: 1px solid var(--t-line);
  background: rgba(255, 255, 255, 0.8);
}
body[class*="theme-"] .login-remember { color: var(--t-muted); font-size: 13.5px; }
body[class*="theme-"] .login-card button {
  height: 52px; border-radius: 999px; padding: 0;
  background: var(--t-cta); color: var(--t-cta-text);
  border: 1px solid var(--t-cta-border);
  font-size: 16px; font-weight: 800;
}

/* ---------- Boutons divers ---------- */
body[class*="theme-"] #notif-btn,
body[class*="theme-"] .hours-dates button {
  border-radius: 999px; background: var(--t-cta); color: var(--t-cta-text);
  border: 1px solid var(--t-cta-border);
}
body[class*="theme-"] #logout-btn {
  border-radius: 999px; height: 50px; background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--t-line); color: #d23b40;
}
body[class*="theme-"] .hours-select,
body[class*="theme-"] .hours-dates input {
  border-radius: 14px; border: 1px solid var(--t-line); background: rgba(255, 255, 255, 0.75);
}
body[class*="theme-"] #sched-prev, body[class*="theme-"] #sched-next,
body[class*="theme-"] #hours-nav-prev, body[class*="theme-"] #hours-nav-next {
  border-radius: 50%; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--t-line);
}
body[class*="theme-"] .disp-view-switch { background: rgba(255, 255, 255, 0.55); border-color: var(--t-line); }
body[class*="theme-"] .disp-view-btn.active,
body[class*="theme-"] .hours-nav-reset.is-now,
body[class*="theme-"] .sched-today-badge { background: var(--t-grad); color: #fff; border-color: transparent; }
body[class*="theme-"] .disp-edit-btn { border-radius: 999px; }

/* L'apparence (mode sombre, couleur des cartes) est fixée par le thème. */
body[class*="theme-"] .card:has(#mode-clair) { display: none; }

/* ---------- Horaire ---------- */
body[class*="theme-"] .sched-day {
  background: rgba(255, 255, 255, 0.5); border: 1px solid var(--t-line);
  border-radius: 18px; padding: 12px 14px;
}
body[class*="theme-"] .sched-day--today {
  background: var(--t-card-strong);
  box-shadow: inset 4px 0 0 var(--t-accent), var(--t-shadow);
}
body[class*="theme-"] .sched-shift { color: var(--t-text); font-size: 15px; }
body[class*="theme-"] .sched-bar { background: var(--t-work); }
body[class*="theme-"] .sched-bar-pause { background: rgba(255, 255, 255, 0.85); }
body[class*="theme-"] .sched-week-total { color: var(--t-accent); }
body[class*="theme-"] .hours-total-row strong { color: var(--t-text); font-size: 20px; }

/* ---------- Ma journée ---------- */
body[class*="theme-"] .myday-track {
  height: 30px; border-radius: 12px; border: 1px solid var(--t-line);
  background: rgba(255, 255, 255, 0.55);
}
body[class*="theme-"] .myday-seg--planned { background: var(--t-planned); }
body[class*="theme-"] .myday-seg--work { background: var(--t-work); }
body[class*="theme-"] .myday-dot--work { background: var(--t-work-dot); }
body[class*="theme-"] .myday-now { width: 2.5px; background: var(--t-accent); opacity: 0.9; border-radius: 2px; }

/* ---------- Ordre de départ / personnel ---------- */
body[class*="theme-"] .cutrank-bank { background: rgba(255, 255, 255, 0.55); border-color: var(--t-line); border-radius: 14px; }
body[class*="theme-"] .team-row { border-bottom-color: var(--t-sep); }
body[class*="theme-"] .cutrank-help { background: rgba(255, 255, 255, 0.7); border-color: var(--t-line); }

/* ---------- Répartition ---------- */
body[class*="theme-"] .disp-room {
  border-width: 1.5px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.55) !important;
}
body[class*="theme-"] .disp-unassigned { border-color: rgba(122, 101, 114, 0.25); border-radius: 16px; }
body[class*="theme-"] .disp-kid { border-radius: 9px; }
body[class*="theme-"] .disp-name { background: rgba(255, 255, 255, 0.75); border-color: var(--t-line); }
body[class*="theme-"] #donut-detail { background: rgba(255, 255, 255, 0.55); border-color: var(--t-line); border-radius: 16px; }

/* ---------- Barre d'onglets ---------- */
body[class*="theme-"] #tab-bar .tab-icon svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block;
}

/* B : pilule flottante, onglet actif = pastille blanche icône + texte */
body.theme-b #app-view { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
body.theme-b #tab-bar {
  left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: 420px; margin: 0 auto;
  padding: 6px; gap: 4px; justify-content: space-between;
  border-radius: 999px; border: 1px solid var(--t-line);
  background: var(--t-nav-bg); box-shadow: 0 14px 34px -14px rgba(150, 60, 100, 0.55);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body.theme-b #tab-bar .tab-btn {
  flex: 0 1 auto; flex-direction: row; gap: 7px;
  padding: 11px 16px; border-radius: 999px;
  font-size: 0; color: var(--t-muted);
  transition: background .2s, font-size .2s;
}
body.theme-b #tab-bar .tab-btn.active {
  flex: 1 1 auto; justify-content: center;
  background: #fff; color: var(--t-text); font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 14px -8px rgba(150, 60, 100, 0.5);
}
body.theme-b #tab-bar .tab-btn.active svg { color: var(--t-accent); }

/* C : barre pleine largeur blanche, onglet actif en noir */
body.theme-c #tab-bar {
  background: var(--t-nav-bg); border-top: 1px solid rgba(18, 20, 22, 0.06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding-top: 10px;
}
body.theme-c #tab-bar .tab-btn { gap: 4px; font-size: 11.5px; color: #8b9398; }
body.theme-c #tab-bar .tab-btn.active { color: #121416; font-weight: 800; }
body.theme-c #tab-bar .tab-btn.active svg { stroke-width: 2.4; }
body.theme-c #tab-bar .tab-btn.active .tab-icon {
  background: #121416; color: #fff; border-radius: 999px; padding: 4px 14px; margin-bottom: 2px;
}