/* ═══════════════════════════════════════════════════════
   SUIVI HORAIRES — Feuille de style v4
   Dark mode (défaut) · Light mode via [data-theme="light"]
═══════════════════════════════════════════════════════ */

/* ─── VARIABLES DARK ─────────────────────────────── */
:root {
  --bg:         #07090c;
  --bg-deep:    #050608;
  --card:       #0d1117;
  --card-alt:   #111820;
  --card-hover: #141c26;
  --line:        rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.13);
  --line-accent: rgba(16,185,129,.25);
  --text:   #dde3ec;
  --muted:  #7c8899;
  --subtle: #3d4756;
  --accent:      #10b981;
  --accent-dim:  rgba(16,185,129,.12);
  --accent-glow: rgba(16,185,129,.06);
  --accent2:     #f43f5e;
  --warn:        #f59e0b;
  --warn-dim:    rgba(245,158,11,.12);
  --night:       #818cf8;
  --night-dim:   rgba(129,140,248,.12);
  --gold:        #fde68a;
  --blue:        #60a5fa;
  --blue-dim:    rgba(96,165,250,.12);
  --shadow:    0 8px 40px rgba(0,0,0,.55);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.4);
  --shadow-xs: 0 1px 4px  rgba(0,0,0,.3);
  --sidebar-w: 220px;
  --t: .17s ease;
}

/* ─── VARIABLES LIGHT ────────────────────────────── */
[data-theme="light"] {
  --bg:         #eceff4;
  --bg-deep:    #e2e7ee;
  --card:       #ffffff;
  --card-alt:   #f6f8fb;
  --card-hover: #f0f3f7;
  --line:        rgba(15,23,42,.08);
  --line-strong: rgba(15,23,42,.16);
  --line-accent: rgba(5,150,105,.3);
  --text:   #0f172a;
  --muted:  #5e7290;
  --subtle: #94a3b8;
  --accent:      #059669;
  --accent-dim:  rgba(5,150,105,.1);
  --accent-glow: rgba(5,150,105,.05);
  --accent2:     #e11d48;
  --warn:        #b45309;
  --warn-dim:    rgba(180,83,9,.1);
  --night:       #4f46e5;
  --night-dim:   rgba(79,70,229,.1);
  --gold:        #92400e;
  --blue:        #2563eb;
  --blue-dim:    rgba(37,99,235,.1);
  --shadow:    0 4px 24px rgba(15,23,42,.1), 0 1px 6px rgba(15,23,42,.06);
  --shadow-sm: 0 2px 8px  rgba(15,23,42,.07);
  --shadow-xs: 0 1px 3px  rgba(15,23,42,.05);
}

/* ─── RESET & BASE ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: system-ui,-apple-system,'Segoe UI',sans-serif; font-size: 15px; line-height: 1.5; transition: background var(--t), color var(--t); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── SIDEBAR NAVIGATION (desktop) ──────────────── */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0 1rem;
  z-index: 100;
  transition: background var(--t), border-color var(--t);
}
[data-theme="light"] .sidebar { box-shadow: 2px 0 12px rgba(15,23,42,.06); }

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.sidebar-logo-icon { font-size: 1.4rem; }
.sidebar-logo-text { font-size: .95rem; font-weight: 900; letter-spacing: -.02em; }

.sidebar-links { flex: 1; display: flex; flex-direction: column; gap: .15rem; padding: 0 .75rem; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .75rem;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  transition: background var(--t), color var(--t);
}
.sidebar-link:hover { background: var(--card-alt); color: var(--text); }
.sidebar-link.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }
.sidebar-link-icon { font-size: 1.05rem; width: 1.4rem; text-align: center; flex-shrink: 0; }

/* ─── SIDEBAR — SECTION FICHIERS ─────────────────── */
.sidebar-files {
  padding: .75rem 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: .25rem;
}
.sf-connected, .sf-disconnected { display: flex; flex-direction: column; gap: .4rem; }
.sf-row { display: flex; align-items: center; gap: .5rem; }
.sf-icon { font-size: .95rem; flex-shrink: 0; }
.sf-text { display: flex; flex-direction: column; min-width: 0; }
.sf-label { font-size: .78rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-sub   { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-divider { height: 1px; background: var(--line); margin: .15rem 0; }
.sf-btn {
  display: block; width: 100%; text-align: center;
  padding: .32rem .6rem; border-radius: 8px;
  font-size: .76rem; font-weight: 700; cursor: pointer;
  border: none; transition: filter var(--t), background var(--t);
}
.sf-btn-primary { background: var(--accent); color: #fff; }
.sf-btn-primary:hover { filter: brightness(1.1); }
.sf-btn-outline { background: var(--card-alt); border: 1px solid var(--line-strong); color: var(--text); }
.sf-btn-outline:hover { background: var(--card-hover); }

.sidebar-footer {
  padding: 1rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ─── BOTTOM NAVIGATION (mobile) ────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--card);
  border-top: 1px solid var(--line);
  z-index: 100;
  align-items: stretch;
}
[data-theme="light"] .bottom-nav { box-shadow: 0 -2px 12px rgba(15,23,42,.06); }

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  transition: color var(--t);
  padding: .3rem 0;
}
.bottom-nav-item:hover { color: var(--text); }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-icon { font-size: 1.15rem; }

/* ─── LAYOUT ─────────────────────────────────────── */
.page-wrap {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 2rem;
}
.page-content {
  max-width: 960px;
  margin: 0 auto;
}

/* ─── PAGE HEADER ────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-title { font-size: 1.6rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
.page-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ─── BOUTONS ────────────────────────────────────── */
.btn,.btn-g,.btn-danger,.btn-night { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 10px; font-weight: 700; font-size: .86rem; border: none; transition: filter var(--t), background var(--t), box-shadow var(--t); white-space: nowrap; }
.btn { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(16,185,129,.28); }
.btn:hover { filter: brightness(1.1); }
[data-theme="light"] .btn { color: #fff; }
.btn-g { border: 1px solid var(--line-strong); color: var(--text); background: var(--card-alt); }
.btn-g:hover { background: var(--card-hover); border-color: var(--muted); }
.btn-danger { background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.25); color: #fda4af; }
.btn-danger:hover { background: rgba(244,63,94,.2); }
[data-theme="light"] .btn-danger { color: var(--accent2); }
.btn-night { background: var(--night-dim); border: 1px solid rgba(129,140,248,.25); color: var(--night); }
.btn-night:hover { background: rgba(129,140,248,.22); }
.btn-sm { padding: .28rem .6rem; font-size: .78rem; border-radius: 8px; }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 8px; }

/* ─── CARDS ──────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; margin-bottom: 1rem; transition: background var(--t), border-color var(--t); }
[data-theme="light"] .card { border-color: transparent; box-shadow: var(--shadow-sm); }
.section-title { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1rem; }

/* ─── KPI ────────────────────────────────────────── */
.kpi-bar { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
.kpi { background: var(--card-alt); border: 1px solid var(--line); border-radius: 12px; padding: .65rem .9rem; }
[data-theme="light"] .kpi { background: var(--bg-deep); box-shadow: var(--shadow-xs); }
.kv { font-size: 1.3rem; font-weight: 900; display: block; letter-spacing: -.01em; }
.kt { font-size: .7rem; color: var(--muted); display: block; margin-top: .08rem; }
.kv.ok   { color: var(--accent); }
.kv.warn { color: var(--warn); }
.kv.bad  { color: var(--accent2); }

.kpi-progress { grid-column: span 2; }
.progress-bar { height: 6px; background: var(--line-strong); border-radius: 3px; margin: .35rem 0 .2rem; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.progress-fill.ok   { background: var(--accent); }
.progress-fill.warn { background: var(--warn); }
.progress-fill.bad  { background: var(--accent2); }
.progress-label { font-size: .72rem; color: var(--muted); }

/* ─── FLASH ──────────────────────────────────────── */
.flash { padding: .7rem 1.2rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 700; font-size: .87rem; animation: fadeIn .2s ease; position: fixed; top: 1rem; right: 1rem; z-index: 9999; max-width: 340px; box-shadow: var(--shadow-sm); }
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.flash.ok    { background: var(--accent-dim); border: 1px solid var(--line-accent); color: #6ee7b7; }
.flash.error { background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.28); color: #fda4af; }
[data-theme="light"] .flash.ok    { color: #065f46; }
[data-theme="light"] .flash.error { color: #be123c; }

/* ─── FILTRE ─────────────────────────────────────── */
.filter-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-bar input, .filter-bar select { background: var(--card-alt); border: 1px solid var(--line-strong); border-radius: 8px; padding: .4rem .7rem; color: var(--text); font-size: .85rem; transition: border-color var(--t); }
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--accent); }
.filter-bar input { flex: 1; min-width: 160px; }
[data-theme="light"] .filter-bar input, [data-theme="light"] .filter-bar select { background: #fff; }
.filter-active { border-color: var(--accent) !important; }

/* ─── FORMULAIRE ─────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .6rem; }
.fg { display: flex; flex-direction: column; gap: .26rem; }
.fg label { font-size: .74rem; color: var(--muted); font-weight: 700; letter-spacing: .02em; }
.min-hint { font-weight: 400; color: var(--accent); font-size: .72rem; margin-left: .3rem; }
.fg-hint { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.params-group { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.params-group-title { font-size: .7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .65rem; }
.fg input,.fg textarea,.fg select { background: var(--card-alt); border: 1px solid var(--line-strong); border-radius: 8px; padding: .45rem .65rem; color: var(--text); font-size: .88rem; width: 100%; transition: border-color var(--t), box-shadow var(--t); }
.fg input:focus,.fg textarea:focus,.fg select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
[data-theme="light"] .fg input,[data-theme="light"] .fg textarea,[data-theme="light"] .fg select { background: #fff; border-color: var(--line-strong); }
.check-row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; }
.check-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }

/* Type chips dans le formulaire */
.type-select { display: flex; gap: .35rem; flex-wrap: wrap; }
.type-chip { padding: .3rem .75rem; border-radius: 8px; font-size: .8rem; font-weight: 700; cursor: pointer; border: 2px solid transparent; transition: all var(--t); }
.type-chip:hover { filter: brightness(1.1); }
.type-chip.selected { border-color: var(--text); }
.type-work    { background: rgba(16,185,129,.15); color: #6ee7b7; }
.type-cp      { background: rgba(96,165,250,.15);  color: #93c5fd; }
.type-sick    { background: rgba(244,63,94,.15);   color: #fda4af; }
.type-rtt     { background: rgba(129,140,248,.15); color: #c4b5fd; }
.type-holiday { background: rgba(245,158,11,.15);  color: #fde68a; }
.type-other   { background: rgba(124,136,153,.15); color: var(--muted); }
[data-theme="light"] .type-work    { color: #065f46; }
[data-theme="light"] .type-cp      { color: #1d4ed8; }
[data-theme="light"] .type-sick    { color: #be123c; }
[data-theme="light"] .type-rtt     { color: #4f46e5; }
[data-theme="light"] .type-holiday { color: #92400e; }

.recur-days { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.recur-day { padding: .25rem .5rem; border-radius: 6px; font-size: .78rem; font-weight: 700; cursor: pointer; border: 1px solid var(--line-strong); background: var(--card-alt); color: var(--muted); transition: all var(--t); }
.recur-day.on { background: var(--accent-dim); border-color: var(--line-accent); color: var(--accent); }

/* ─── TABLEAU ────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { text-align: left; padding: .42rem .6rem; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.shift-row { transition: background var(--t); }
tr.shift-row:hover td { background: var(--card-hover); }
[data-theme="light"] tbody tr.shift-row:nth-child(even) td { background: rgba(15,23,42,.02); }
tr.cur-week td { background: var(--accent-glow); }

tr.week-sep td { padding: .3rem .6rem; background: rgba(16,185,129,.07); border-top: 1px solid var(--line-accent); border-bottom: 1px solid rgba(16,185,129,.1); }
[data-theme="light"] tr.week-sep td { background: rgba(5,150,105,.06); }
.ws-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
.ws-label { font-size: .68rem; font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.ws-stats { display: flex; gap: .8rem; font-size: .77rem; color: var(--muted); flex-wrap: wrap; align-items: center; }
.ws-stats b { color: var(--text); font-weight: 700; }
.ws-ot { color: var(--warn) !important; font-weight: 800; }
.ws-bonus { color: var(--gold) !important; font-weight: 800; }

/* ─── COULEURS DELTA ─────────────────────────────── */
.pos  { color: var(--warn);   font-weight: 700; }
.neg  { color: var(--accent); font-weight: 700; }
.zero { color: var(--muted); }

/* ─── TAGS ───────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; padding: .07rem .36rem; border-radius: 5px; font-size: .7rem; font-weight: 800; letter-spacing: .01em; margin: .04rem; }
.tag-red    { background: rgba(244,63,94,.12);  border: 1px solid rgba(244,63,94,.28);  color: #fda4af; }
.tag-warn   { background: var(--warn-dim);       border: 1px solid rgba(245,158,11,.28); color: #fde68a; }
.tag-blue   { background: var(--blue-dim);       border: 1px solid rgba(96,165,250,.28); color: #93c5fd; }
.tag-green  { background: var(--accent-dim);     border: 1px solid var(--line-accent);   color: #6ee7b7; }
.tag-night  { background: var(--night-dim);      border: 1px solid rgba(129,140,248,.28);color: #c4b5fd; }
.tag-muted  { background: rgba(124,136,153,.1);  border: 1px solid var(--line);          color: var(--muted); }
.tag-gold   { background: rgba(234,179,8,.12);   border: 1px solid rgba(234,179,8,.3);   color: #fde68a; }
[data-theme="light"] .tag-gold { color: #92400e; }
[data-theme="light"] .tag-red    { color: #be123c; }
[data-theme="light"] .tag-warn   { color: #92400e; }
[data-theme="light"] .tag-blue   { color: #1d4ed8; }
[data-theme="light"] .tag-green  { color: #065f46; }
[data-theme="light"] .tag-night  { color: #4f46e5; }

/* ─── NAVIGATION MOIS ────────────────────────────── */
.month-nav { display: flex; align-items: center; gap: .5rem; }
.month-nav .cur { font-weight: 900; font-size: 1rem; padding: 0 .35rem; letter-spacing: -.01em; }
.sum-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: .84rem; }

/* ─── LIEUX ──────────────────────────────────────── */
.loc-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.loc-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 8px; background: var(--card-alt); border: 1px solid var(--line); font-size: .81rem; transition: background var(--t); }
.loc-chip:hover { background: var(--card-hover); }
.loc-del { background: none; border: none; color: var(--subtle); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; transition: color var(--t); }
.loc-del:hover { color: var(--accent2); }

/* ─── APERÇU LIVE ────────────────────────────────── */
#delta-preview { font-size: .84rem; min-height: 1.5em; color: var(--muted); }

/* ─── CALENDRIER ─────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-head { text-align: center; font-size: .7rem; font-weight: 800; color: var(--muted); padding: .3rem 0; text-transform: uppercase; letter-spacing: .06em; }
.cal-cell { min-height: 72px; background: var(--card-alt); border: 1px solid var(--line); border-radius: 8px; padding: .35rem .4rem; cursor: pointer; transition: background var(--t), border-color var(--t); position: relative; overflow: hidden; }
.cal-cell:hover { background: var(--card-hover); border-color: var(--muted); }
.cal-cell.other-month { opacity: .35; }
.cal-cell.today { border-color: var(--accent); }
.cal-cell.today .cal-day { color: var(--accent); }
.cal-cell.is-holiday { background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.3); }
.cal-holiday-label { font-size: .62rem; color: #fca5a5; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
[data-theme="light"] .cal-cell.is-holiday { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.25); }
[data-theme="light"] .cal-holiday-label { color: #dc2626; }
[data-theme="light"] .cal-cell { background: #fff; box-shadow: var(--shadow-xs); }
.cal-day { font-size: .78rem; font-weight: 800; color: var(--muted); margin-bottom: .2rem; }
.cal-shift { font-size: .7rem; padding: .12rem .3rem; border-radius: 4px; margin-top: .15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-shift.work    { background: rgba(16,185,129,.18); color: #6ee7b7; }
.cal-shift.cp      { background: rgba(96,165,250,.18);  color: #93c5fd; }
.cal-shift.sick    { background: rgba(244,63,94,.18);   color: #fda4af; }
.cal-shift.rtt     { background: rgba(129,140,248,.18); color: #c4b5fd; }
.cal-shift.holiday { background: rgba(245,158,11,.18);  color: #fde68a; }
.cal-shift.other   { background: rgba(124,136,153,.18); color: var(--muted); }
[data-theme="light"] .cal-shift.work    { background: rgba(5,150,105,.15);  color: #065f46; }
[data-theme="light"] .cal-shift.cp      { background: rgba(37,99,235,.12);  color: #1d4ed8; }
[data-theme="light"] .cal-shift.sick    { background: rgba(225,29,72,.12);  color: #be123c; }
[data-theme="light"] .cal-shift.rtt     { background: rgba(79,70,229,.12);  color: #4f46e5; }
[data-theme="light"] .cal-shift.holiday { background: rgba(180,83,9,.12);   color: #92400e; }
.cal-shift.planned { opacity: .65; border: 1px dashed currentColor; }
.cal-legend { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.cal-legend-item { display: flex; align-items: center; gap: .35rem; font-size: .77rem; color: var(--muted); }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ─── GRAPHIQUES ─────────────────────────────────── */
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; }
.chart-wrap text { font-family: system-ui, sans-serif; }
.chart-empty { text-align: center; color: var(--muted); padding: 2rem 0; font-size: .88rem; }
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .charts-grid { grid-template-columns: 1fr; } }

/* ─── STATS ──────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: .5rem; margin-bottom: 1rem; }
.stat-box { background: var(--card-alt); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; text-align: center; }
[data-theme="light"] .stat-box { background: var(--bg-deep); box-shadow: var(--shadow-xs); }
.stat-val { font-size: 1.25rem; font-weight: 900; color: var(--accent); display: block; }
.stat-lbl { font-size: .71rem; color: var(--muted); margin-top: .1rem; display: block; }

.loc-stats-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.loc-stats-table th { text-align: left; padding: .35rem .5rem; font-size: .7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line-strong); }
.loc-stats-table td { padding: .42rem .5rem; border-bottom: 1px solid var(--line); }
.loc-stats-table tr:last-child td { border-bottom: none; }
.loc-bar { height: 5px; background: var(--accent-dim); border-radius: 3px; margin-top: .2rem; }
.loc-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }

/* ─── ANNUEL ─────────────────────────────────────── */
.annual-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.annual-table th { text-align: left; padding: .4rem .6rem; font-size: .7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.annual-table td { padding: .48rem .6rem; border-bottom: 1px solid var(--line); }
.annual-table tr:last-child td { border-bottom: none; }
.annual-table tr.annual-cur td { background: var(--accent-glow); }
.annual-table tfoot td { border-top: 2px solid var(--line-strong); font-weight: 800; background: var(--card-alt); }
.annual-table tr.clickable { cursor: pointer; }
.annual-table tr.clickable:hover td { background: var(--card-hover); }
.year-nav { display: flex; align-items: center; gap: .5rem; }
.year-nav .cur { font-weight: 900; font-size: .95rem; padding: 0 .35rem; }

/* ─── MODALS ─────────────────────────────────────── */
#payslip-modal, #import-modal {
  position: fixed; inset: 0; z-index: 500;
  display: none; align-items: center; justify-content: center;
  overflow-y: auto; padding: 1.5rem;
}
#payslip-modal::before, #import-modal::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(4,6,9,.88); backdrop-filter: blur(4px);
}
[data-theme="light"] #payslip-modal::before,
[data-theme="light"] #import-modal::before { background: rgba(15,23,42,.55); backdrop-filter: blur(6px); }
.modal-card { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line-strong); border-radius: 20px; padding: 1.5rem; max-width: 560px; width: 100%; box-shadow: var(--shadow); }
[data-theme="light"] .modal-card { border-color: transparent; box-shadow: 0 20px 60px rgba(15,23,42,.15); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.modal-header h3 { font-size: 1rem; font-weight: 900; letter-spacing: -.01em; }
.modal-lg { max-width: 720px; }
.modal-backdrop { position: absolute; inset: 0; }

/* ─── WELCOME ────────────────────────────────────── */
#welcome-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; }
#welcome-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(4,6,9,.92); backdrop-filter: blur(4px); }
[data-theme="light"] #welcome-overlay::before { background: rgba(15,23,42,.6); }
.welcome-card { position: relative; background: var(--card); border: 1px solid var(--line-strong); border-radius: 22px; padding: 2.2rem; max-width: 440px; width: 100%; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1.1rem; }
[data-theme="light"] .welcome-card { border-color: transparent; box-shadow: 0 20px 60px rgba(15,23,42,.18); }
.welcome-card h2 { font-size: 1.55rem; font-weight: 900; letter-spacing: -.02em; }
.welcome-card .subtitle { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.wc-buttons { display: flex; flex-direction: column; gap: .55rem; }
.wc-buttons .btn, .wc-buttons .btn-g { justify-content: center; padding: .65rem 1rem; border-radius: 12px; font-size: .9rem; }
.wc-notice { background: var(--warn-dim); border: 1px solid rgba(245,158,11,.25); border-radius: 10px; padding: .65rem 1rem; font-size: .79rem; color: var(--warn); line-height: 1.55; }

/* ─── SAVE STATUS ────────────────────────────────── */
.save-status { font-size: .74rem; letter-spacing: .01em; }
.si-ok    { color: var(--accent); }
.si-warn  { color: var(--warn); }
.si-err   { color: var(--accent2); }
.si-muted { color: var(--muted); }
.si-sets  { color: var(--night); }

/* ─── PARAMÈTRES (page) ──────────────────────────── */
.settings-section { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.rate-history-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.rate-history-item { display: flex; align-items: center; gap: .5rem; font-size: .84rem; background: var(--card-alt); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .7rem; }
.rate-history-item .rh-date { color: var(--muted); min-width: 100px; }
.rate-history-item .rh-rate { font-weight: 700; color: var(--accent); }

/* ─── FICHE DE PAIE ──────────────────────────────── */
.ps-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: .5rem; }
.ps-table th { text-align: left; padding: .36rem .5rem; font-size: .69rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--line-strong); }
.ps-table td { padding: .42rem .5rem; border-bottom: 1px solid var(--line); }
.ps-table tr:last-child td { border-bottom: none; }
.ps-table tfoot td { border-top: 2px solid var(--line-strong); border-bottom: none; font-weight: 900; font-size: .98rem; padding-top: .65rem; }
.ps-amount { text-align: right; font-weight: 700; color: var(--gold); }
[data-theme="light"] .ps-amount { color: var(--warn); }
.ps-bonus td:first-child { color: var(--warn); }
.ps-total .ps-amount { font-size: 1.1rem; color: var(--accent); }
.ps-net-line { margin-top: .75rem; padding: .65rem .75rem; background: var(--night-dim); border: 1px solid rgba(129,140,248,.25); border-radius: 10px; font-size: .88rem; display: flex; align-items: center; justify-content: space-between; }
.ps-net-val { font-weight: 900; font-size: 1.1rem; color: var(--night); }
.ps-section-title { font-size: .69rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin: 1rem 0 .5rem; }
.ps-net-input-row { display: flex; align-items: center; gap: .6rem; background: var(--card-alt); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .75rem; margin-top: .75rem; flex-wrap: wrap; }
.ps-net-input-row label { font-size: .82rem; color: var(--muted); flex: 1; min-width: 140px; }
.ps-net-input-row input { width: 100px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; padding: .3rem .5rem; color: var(--text); font-size: .88rem; text-align: right; }

/* ─── IMPORT CSV ─────────────────────────────────── */
.csv-preview { overflow-x: auto; max-height: 280px; font-size: .78rem; border: 1px solid var(--line); border-radius: 8px; margin-top: .75rem; }
.csv-preview table { width: max-content; }
.csv-preview th, .csv-preview td { padding: .28rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.csv-preview th { background: var(--card-alt); color: var(--muted); font-weight: 700; }
.csv-row-ok  { background: rgba(16,185,129,.06); }
.csv-row-err { background: rgba(244,63,94,.08); }

/* ─── SCAN OCR ───────────────────────────────────── */
#scan-modal { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; overflow-y: auto; padding: 1.5rem; }
#scan-modal::before { content: ''; position: absolute; inset: 0; background: rgba(4,6,9,.88); backdrop-filter: blur(4px); }
[data-theme="light"] #scan-modal::before { background: rgba(15,23,42,.55); backdrop-filter: blur(6px); }
.scan-canvas-wrap { max-width: 100%; margin: .5rem 0; text-align: center; }
.scan-canvas-wrap canvas { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.scan-spinner { text-align: center; padding: 1rem; color: var(--muted); font-size: .88rem; }
.scan-result-table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-top: .75rem; }
.scan-result-table th { text-align: left; padding: .35rem .5rem; font-size: .7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line-strong); }
.scan-result-table td { padding: .38rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.scan-result-table tr:last-child td { border-bottom: none; }
.scan-result-table input[type="text"], .scan-result-table input[type="date"] { background: var(--card-alt); border: 1px solid var(--line-strong); border-radius: 6px; padding: .22rem .4rem; color: var(--text); font-size: .82rem; width: 100%; }
.scan-result-table input[type="text"]:focus, .scan-result-table input[type="date"]:focus { outline: none; border-color: var(--accent); }

/* ─── WIDGET PERMANENT ───────────────────────────── */
#global-widget { display: flex; gap: .75rem; flex-wrap: wrap; align-items: stretch; }
.widget-item { background: var(--card-alt); border: 1px solid var(--line); border-radius: 12px; padding: .65rem 1rem; flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: .15rem; }
[data-theme="light"] .widget-item { box-shadow: var(--shadow-xs); }
.widget-item .wi-label { font-size: .68rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.widget-item .wi-val { font-size: 1rem; font-weight: 900; color: var(--text); }

/* ─── SIMULATION ─────────────────────────────────── */
.sim-bar-wrap { height: 8px; background: var(--line-strong); border-radius: 4px; overflow: hidden; margin-bottom: .25rem; }
.sim-bar-confirmed { height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }

/* ─── WEEK VIEW ──────────────────────────────────── */
.week-view { display: grid; grid-template-columns: repeat(8, 1fr); gap: .4rem; }
.week-day-col { background: var(--card-alt); border: 1px solid var(--line); border-radius: 10px; padding: .5rem; min-height: 100px; }
.week-day-col.today { border-color: var(--accent); }
.week-day-col.rest-day { opacity: .5; }
.week-day-label { font-size: .68rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .15rem; }
.week-day-date { font-size: 1.05rem; font-weight: 900; margin-bottom: .35rem; }
.week-shift-card { background: var(--card); border-radius: 7px; padding: .3rem .45rem; margin-bottom: .25rem; font-size: .75rem; border-left: 3px solid var(--accent); cursor: pointer; transition: opacity var(--t); }
.week-shift-card:hover { opacity: .85; }
.week-shift-card.planned { border-left-style: dashed; opacity: .75; }

/* ─── CHARTS ─────────────────────────────────────── */
.chart-legend { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .35rem; }
.chart-legend-item { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--muted); }
.chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ─── PLANNED SHIFTS ─────────────────────────────── */
.shift-row.planned { opacity: .78; }
.shift-row.planned td:first-child { border-left: 3px dashed var(--muted); }
.tag-planned { background: rgba(129,140,248,.15); color: var(--night); border: 1px dashed var(--night); border-radius: 99px; padding: .1rem .45rem; font-size: .7rem; }

/* ─── FREE TAGS ──────────────────────────────────── */
.tag-free { background: var(--card-alt); color: var(--text); border: 1px solid var(--line-strong); padding: .1rem .45rem; border-radius: 99px; font-size: .7rem; white-space: nowrap; }
.tag-free[onclick]:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); cursor: pointer; }

/* ─── MISC ───────────────────────────────────────── */
.row-actions { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend { font-size: .73rem; color: var(--muted); margin-bottom: .75rem; padding: 0 .3rem; line-height: 1.6; }
.divider { height: 1px; background: var(--line); margin: 1rem 0; }
.text-muted { color: var(--muted); }
.kbd { display: inline-block; background: var(--card-alt); border: 1px solid var(--line-strong); border-radius: 4px; padding: .05rem .35rem; font-size: .73rem; font-family: monospace; color: var(--muted); }

/* ─── TABS (in-page) ─────────────────────────────── */
.tab-bar { display: flex; gap: .3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab-bar::-webkit-scrollbar { height: 2px; }
.tab { background: none; border: none; padding: .55rem .9rem; font-size: .85rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t), border-color var(--t); white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── DASHBOARD HERO CARD ────────────────────────── */
.next-shift-card { background: linear-gradient(135deg, var(--accent-dim), transparent); border: 1px solid var(--line-accent); border-radius: 20px; padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.next-shift-countdown { font-size: 2.2rem; font-weight: 900; color: var(--accent); letter-spacing: -.04em; }
.next-shift-info { flex: 1; min-width: 160px; }
.next-shift-label { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: .3rem; }
.next-shift-loc { font-size: 1.1rem; font-weight: 700; }
.next-shift-time { font-size: .88rem; color: var(--muted); margin-top: .2rem; }

/* ─── PRINT ──────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; font-size: 13px; }
  .sidebar, .bottom-nav, #welcome-overlay, #payslip-modal, #import-modal, #scan-modal,
  .page-header .page-actions, .row-actions, .btn, .btn-g, .btn-danger, #flash { display: none !important; }
  .page-wrap { margin-left: 0 !important; padding: 0 !important; }
  .card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; border-radius: 0; }
  table { font-size: 11px; }
  th, td { padding: .25rem .35rem; }
  tr.week-sep td { background: #f0f0f0 !important; }
}

/* ─── CALENDRIER — HINT AJOUT ────────────────────── */
.cal-cell .cal-add-hint { display:none; position:absolute; bottom:4px; right:6px; font-size:.85rem; color:var(--accent); opacity:.5; }
.cal-cell:hover .cal-add-hint { display:block; }

/* ─── MÉTÉO ──────────────────────────────────────── */
.weather-main { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; }
.weather-emoji { font-size:2.5rem; }
.weather-temp { font-size:1.8rem; font-weight:900; }
.weather-desc { color:var(--muted); font-size:.88rem; }
.weather-hours { display:flex; gap:.5rem; flex-wrap:wrap; overflow-x:auto; }
.weather-hour { background:var(--card-alt); border:1px solid var(--line); border-radius:8px; padding:.3rem .5rem; font-size:.75rem; text-align:center; min-width:52px; }

/* ─── BANNIÈRE LECTURE SEULE ─────────────────────── */
.share-banner { background:var(--night-dim); border:1px solid rgba(129,140,248,.3); border-radius:10px; padding:.6rem 1rem; color:var(--night); font-weight:700; font-size:.86rem; margin-bottom:.75rem; text-align:center; }
body.readonly .edit-only { display:none !important; }

/* ─── PROFILS ────────────────────────────────────── */
.profile-selector { padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--line); }
.profile-pill { display:flex; align-items:center; gap:.5rem; cursor:pointer; padding:.3rem .4rem; border-radius:8px; transition:background var(--t); }
.profile-pill:hover { background:var(--card-alt); }
.profile-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.profile-name { font-size:.85rem; font-weight:700; flex:1; }
.profile-menu { background:var(--card); border:1px solid var(--line-strong); border-radius:10px; margin-top:.3rem; overflow:hidden; box-shadow:var(--shadow-sm); }
.profile-menu-item { padding:.5rem .75rem; font-size:.84rem; cursor:pointer; display:flex; align-items:center; gap:.5rem; }
.profile-menu-item:hover { background:var(--card-alt); }
.profile-menu-sep { height:1px; background:var(--line); }

/* Modal profil */
#create-profile-modal { position:fixed; inset:0; z-index:600; display:none; align-items:center; justify-content:center; padding:1.5rem; }
#create-profile-modal::before { content:''; position:absolute; inset:0; background:rgba(4,6,9,.88); backdrop-filter:blur(4px); }
[data-theme="light"] #create-profile-modal::before { background:rgba(15,23,42,.55); backdrop-filter:blur(6px); }
#create-profile-modal .modal-card { position:relative; z-index:1; }
#create-profile-modal h3 { font-size:1rem; font-weight:900; margin-bottom:1rem; }
#create-profile-modal input[type="text"] { width:100%; background:var(--card-alt); border:1px solid var(--line-strong); border-radius:8px; padding:.45rem .65rem; color:var(--text); font-size:.88rem; margin-bottom:.75rem; }
#create-profile-modal input[type="text"]:focus { outline:none; border-color:var(--accent); }
#profile-color-picker { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
.profile-color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:border-color var(--t); flex-shrink:0; }
.profile-color-swatch.selected { border-color:var(--text); }
#create-profile-modal .modal-actions { display:flex; gap:.5rem; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 767px) {
  .sidebar { display: none; }
  .bottom-nav { display: flex; }
  .page-wrap { margin-left: 0; padding: 1rem 1rem 80px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .kpi-bar { grid-template-columns: repeat(2,1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .cal-cell { min-height: 54px; }
  .cal-shift { display: none; }
  .cal-cell.has-shift .cal-day::after { content: ' ●'; color: var(--accent); font-size: .65rem; }
  .week-view { grid-template-columns: repeat(2, 1fr); }
  .page-title { font-size: 1.3rem; }
  .flash { top: auto; bottom: 72px; left: 1rem; right: 1rem; max-width: none; }
}

@media (max-width: 480px) {
  .page-wrap { padding: .75rem .75rem 80px; }
}