/* ═══════════════════════════════════════════════════════════
   VIVAL — Charte officielle
   RAL 6011 Reseda Green  CMJN 59.34.67.21  #587246
   RAL 7044 Silk Grey                        #9DA4A9
   RAL 3012 Beige Red     CMJN 19.52.54.7   #C07269
═══════════════════════════════════════════════════════════ */
:root {
  /* ── RAL 6011 Reseda Green palette ── */
  --ral6011:        #587246;
  --ral6011-dark:   #435937;
  --ral6011-deeper: #2f3f27;
  --ral6011-mid:    #6d8d57;
  --ral6011-light:  #edf2e8;
  --ral6011-pale:   #f4f7f1;
  --ral6011-glow:   rgba(88,114,70,.18);

  /* ── RAL 7044 Silk Grey palette ── */
  --ral7044:        #9DA4A9;
  --ral7044-dark:   #7a8286;
  --ral7044-deeper: #565c60;
  --ral7044-light:  #eef0f1;
  --ral7044-pale:   #f6f7f8;
  --ral7044-border: #d5d9db;

  /* ── RAL 3012 Beige Red — accent terracotta ── */
  --ral3012:        #C07269;
  --ral3012-dark:   #9a5553;
  --ral3012-light:  #f5eae9;
  --ral3012-pale:   #faf4f3;
  --ral3012-glow:   rgba(192,114,105,.18);

  /* ── Semantic aliases ── */
  --green:          var(--ral6011);
  --green-dark:     var(--ral6011-dark);
  --green-deeper:   var(--ral6011-deeper);
  --green-light:    var(--ral6011-light);
  --green-pale:     var(--ral6011-pale);

  --grey:           var(--ral7044);
  --grey-dark:      var(--ral7044-dark);
  --grey-deeper:    var(--ral7044-deeper);
  --grey-light:     var(--ral7044-light);
  --grey-pale:      var(--ral7044-pale);

  /* accent terracotta — utilisable via var(--accent) */
  --accent:         var(--ral3012);
  --accent-dark:    var(--ral3012-dark);
  --accent-light:   var(--ral3012-light);
  --accent-pale:    var(--ral3012-pale);

  /* ── Status colors ── */
  --red:            #c0392b;
  --red-mid:        #e74c3c;
  --red-light:      #fdf2f1;

  --orange:         #d35400;
  --orange-mid:     #e67e22;
  --orange-light:   #fef5ec;

  --blue:           #2471a3;
  --blue-light:     #eaf4fb;

  --yellow:         #b7950b;
  --yellow-light:   #fdfbe6;

  /* ── Neutrals (warm grey tones) ── */
  --text:           #1e2422;
  --text-2:         #2d3430;
  --text-muted:     #5c6660;
  --text-faint:     #8e9994;

  --border:         #dde1df;
  --border-2:       #c8ceca;

  --bg:             #f0f2f0;
  --bg-2:           #f8f9f8;
  --white:          #ffffff;

  /* ── Layout ── */
  --sidebar-w:      264px;

  /* ── Shadows (warm-tinted) ── */
  --shadow-xs:  0 1px 3px rgba(30,36,34,.05), 0 1px 2px rgba(30,36,34,.04);
  --shadow-sm:  0 2px 8px rgba(30,36,34,.07), 0 1px 3px rgba(30,36,34,.04);
  --shadow:     0 4px 16px rgba(30,36,34,.09), 0 2px 6px rgba(30,36,34,.05);
  --shadow-lg:  0 12px 36px rgba(30,36,34,.12), 0 4px 12px rgba(30,36,34,.06);
  --shadow-xl:  0 24px 60px rgba(30,36,34,.15);

  /* ── Radius ── */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  --transition: all .2s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════
   MODE SOMBRE — redéfinit les neutres + teintes claires des badges
   (la sidebar reste en vert de marque dans les deux thèmes)
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --text:           #e7eae6;
  --text-2:         #cdd2cd;
  --text-muted:     #8f9891;
  --text-faint:     #636b64;

  --border:         #2b2f2c;
  --border-2:       #383d39;

  --bg:             #141613;
  --bg-2:           #1b1e1a;
  --white:          #20241f;

  --ral6011-light:  rgba(109,141,87,.16);
  --ral6011-pale:   rgba(109,141,87,.09);
  --ral7044-light:  rgba(157,164,169,.14);
  --ral7044-pale:   rgba(157,164,169,.08);
  --ral3012-light:  rgba(192,114,105,.16);
  --ral3012-pale:   rgba(192,114,105,.09);

  --red-light:      rgba(231,76,60,.15);
  --orange-light:   rgba(230,126,34,.15);
  --blue-light:     rgba(36,113,163,.18);
  --yellow-light:   rgba(183,149,11,.15);

  --shadow-xs:  0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow:     0 4px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:  0 12px 36px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
  --shadow-xl:  0 24px 60px rgba(0,0,0,.55);
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-2); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color-scheme: dark; }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.6); }

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
input,select,textarea,button { font-family:inherit; font-size:inherit; }
ul { list-style:none; }
.hidden { display:none !important; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--ral7044); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--ral7044-dark); }

/* ═══════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════ */
#login-screen, #maintenance-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--ral6011-deeper);
}

/* Textured background using RAL colors — respire lentement */
#login-screen::before, #maintenance-screen::before {
  content: '';
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(88,114,70,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(157,164,169,.25) 0%, transparent 55%),
    linear-gradient(160deg, #2f3f27 0%, #1a2415 100%);
  animation: bg-breathe 16s ease-in-out infinite alternate;
}
@keyframes bg-breathe {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.08) translate(-1.5%,1.5%); }
}

/* RAL 7044 decorative shape — dérive douce */
#login-screen::after, #maintenance-screen::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(157,164,169,.12) 0%, transparent 70%);
  top: -100px; right: -150px;
  pointer-events: none;
  animation: blob-drift 22s ease-in-out infinite alternate;
}
@keyframes blob-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-70px,60px) scale(1.15); }
}

/* ── Produits flottants (ambiance épicerie) ── */
.login-bg {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.login-bg i {
  position: absolute; bottom: -70px;
  font-size: var(--s, 26px);
  color: #fff; opacity: 0; --o: .09;
  animation: float-up var(--d, 18s) linear var(--delay, 0s) infinite;
}
.login-bg i.far { --o: .05; filter: blur(1.5px); }
@keyframes float-up {
  0%   { transform: translateY(0) translateX(0) rotate(-10deg); opacity: 0; }
  8%   { opacity: var(--o); }
  50%  { transform: translateY(-55vh) translateX(-18px) rotate(4deg); }
  92%  { opacity: var(--o); }
  100% { transform: translateY(-112vh) translateX(22px) rotate(12deg); opacity: 0; }
}

.login-card {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px);
  border-radius: var(--radius-xl);
  padding: 62px 48px 52px;
  width: 430px;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.15);
  position: relative;
  z-index: 1;
  animation: card-in .55s cubic-bezier(.34,1.5,.64,1);
}
@keyframes card-in {
  from { opacity:0; transform: translateY(32px) scale(.94); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
/* La carte maintenance garde son liseré simple (pas d'auvent) */
#maintenance-screen .login-card { padding-top: 52px; border-top: 4px solid var(--ral3012); }

/* ── Auvent de devanture (store banne rayé + festons) ── */
.login-awning {
  position: absolute; top: 0; left: 0; right: 0; height: 20px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: repeating-linear-gradient(90deg, var(--ral6011) 0 30px, #f6f2ea 30px 60px);
  transform-origin: top;
  animation: awning-drop .7s .25s cubic-bezier(.34,1.56,.64,1) backwards;
}
.login-awning::after {
  content: '';
  position: absolute; top: 100%; left: 0; right: 0; height: 11px;
  background-image:
    radial-gradient(circle at 15px -3px, var(--ral6011) 12px, transparent 12.5px),
    radial-gradient(circle at 45px -3px, #f6f2ea 12px, transparent 12.5px);
  background-size: 60px 13px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 2px 2px rgba(30,36,34,.15));
}
@keyframes awning-drop {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Entrées en cascade ── */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
#login-screen .login-logo               { animation: rise .55s .15s cubic-bezier(.4,0,.2,1) backwards; }
#login-screen .form-group:nth-of-type(1){ animation: rise .55s .3s  cubic-bezier(.4,0,.2,1) backwards; }
#login-screen .form-group:nth-of-type(2){ animation: rise .55s .42s cubic-bezier(.4,0,.2,1) backwards; }
#login-screen form .btn-primary         { animation: rise .55s .54s cubic-bezier(.4,0,.2,1) backwards; }
#login-screen .login-hint               { animation: rise .55s .68s cubic-bezier(.4,0,.2,1) backwards; }

/* Reflet lumineux périodique sur le bouton Connexion */
#login-screen .btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  animation: btn-shine 3.6s ease-in-out 1.4s infinite;
}
@keyframes btn-shine {
  0%        { left: -60%; }
  55%, 100% { left: 130%; }
}

/* Icône du label qui réagit au focus du champ */
#login-screen .form-group label i { display: inline-block; transition: var(--transition); }
#login-screen .form-group:focus-within label i { color: var(--ral3012); transform: scale(1.2); }

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  .login-bg { display: none; }
  .login-awning,
  #login-screen::before, #login-screen::after,
  #maintenance-screen::before, #maintenance-screen::after,
  #login-screen .btn-primary::after { animation: none !important; }
}

.login-logo { text-align:center; margin-bottom:36px; }
.login-logo img.logo-full {
  width: 170px;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(47,63,39,.45));
}
.login-logo p { color:var(--text-muted); font-size:13px; margin-top:6px; }
.login-logo p i { color:var(--ral6011); margin-right:5px; }

/* Small logo badge in sidebar */
.logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-badge img { width:38px; height:38px; border-radius:10px; }
.logo-badge.small img { width:36px; height:36px; }

.login-error {
  background: var(--red-light);
  color: var(--red);
  border: 1px solid #f5c6c2;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
  display: flex; align-items: center; gap: 9px;
}
.login-hint { text-align:center; font-size:11px; color:var(--text-faint); margin-top:18px; }

/* Onglets Personnel / Client sur l'écran de connexion */
.login-tabs {
  display: flex;
  gap: 6px;
  margin: -8px 0 18px;
  padding: 4px;
  background: var(--bg-2, #f0eee8);
  border-radius: 10px;
}
.login-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 10px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.login-tab i { margin-right: 6px; }
.login-tab.on {
  background: var(--paper, #fff);
  color: var(--ink, #1f1c18);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.login-tab:hover:not(.on) { color: var(--ink, #1f1c18); }

/* ═══════════════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════════════ */
#app { display:flex; min-height:100vh; }

/* ─── SIDEBAR ─────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  position: fixed;
  top:0; left:0; bottom:0;
  z-index: 200;
  transition: width .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  /* RAL 6011 — couleur officielle Vival */
  background: linear-gradient(180deg, #4e6840 0%, #3d5232 60%, #2f3f27 100%);
  border-right: 1px solid rgba(255,255,255,.07);
}
#sidebar.collapsed { width: 68px; }

/* subtle noise texture */
#sidebar::after {
  content:'';
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events:none;
  opacity:.6;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative; z-index:1;
}
.sidebar-logo-full {
  height: 34px;
  width: auto;
  white-space: nowrap;
  transition: opacity .2s, transform .2s;
  opacity: .92;
}
#sidebar.collapsed .sidebar-logo-full { opacity:0; transform:translateX(-10px); pointer-events:none; }
#sidebar.collapsed .user-info,
#sidebar.collapsed .nav-item span,
#sidebar.collapsed .nav-badge,
#sidebar.collapsed .sidebar-footer span,
#sidebar.collapsed .nav-section-label { opacity:0; pointer-events:none; }

.sidebar-toggle {
  background: rgba(157,164,169,.12);
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  padding: 7px;
  border-radius: 7px;
  margin-left: auto;
  font-size: 13px;
  transition: var(--transition);
  flex-shrink:0;
  position:relative; z-index:1;
}
.sidebar-toggle:hover { background:rgba(157,164,169,.22); color:#fff; }

.user-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 6px;
  position:relative; z-index:1;
}
.user-avatar {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--ral6011), var(--ral6011-dark));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.user-info { display:flex; flex-direction:column; overflow:hidden; white-space:nowrap; }
.user-info > span:first-child { color:#fff; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.role-badge {
  font-size: 10px;
  background: rgba(88,114,70,.35);
  color: #a8c990;
  padding: 2px 9px;
  border-radius: 20px;
  margin-top: 3px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 600;
  border: 1px solid rgba(168,201,144,.2);
}

.nav-section-label {
  font-size: 10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color: rgba(157,164,169,.45); padding: 10px 18px 5px;
  white-space:nowrap; transition:opacity .2s; position:relative; z-index:1;
}

.nav-menu { flex:1; padding:4px 10px 10px; overflow-y:auto; position:relative; z-index:1; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  white-space: nowrap;
  color: rgba(255,255,255,.58);
  font-size: 13.5px; font-weight:500;
  transition: var(--transition);
  position:relative;
}
.nav-item:hover { color:rgba(255,255,255,.88); background:rgba(157,164,169,.1); }
.nav-item.active {
  background: linear-gradient(135deg, var(--ral6011) 0%, var(--ral6011-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(88,114,70,.45);
}
.nav-item.active::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius-sm);
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
}
.nav-item i { width:20px; text-align:center; font-size:14px; flex-shrink:0; transition:transform .2s; }
.nav-item:hover i, .nav-item.active i { transform:scale(1.1); }

.nav-badge {
  margin-left:auto;
  background: var(--ral3012);
  color:#fff; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:20px; min-width:20px; text-align:center;
  box-shadow: 0 2px 6px rgba(192,57,43,.4);
  animation: pulse-badge 2.5s infinite;
}
@keyframes pulse-badge {
  0%,100% { box-shadow:0 2px 6px var(--ral3012-glow); }
  50%      { box-shadow:0 2px 12px rgba(192,114,105,.7); }
}
.nav-badge.zero { display:none !important; }

.sidebar-footer { padding:10px 10px; border-top:1px solid rgba(255,255,255,.07); position:relative; z-index:1; }
.btn-logout {
  display:flex; align-items:center; gap:11px;
  width:100%; padding:10px 12px;
  background:none; border:none;
  color:rgba(255,255,255,.45); cursor:pointer;
  border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:500;
  white-space:nowrap; transition:var(--transition);
}
.btn-logout:hover { background:rgba(192,57,43,.15); color:#f5a9a3; }
.btn-logout i { width:20px; text-align:center; }

/* ─── MAIN CONTENT ────────────────────────────────────────── */
#main-content {
  margin-left: var(--sidebar-w);
  flex:1; min-height:100vh;
  transition: margin-left .28s cubic-bezier(.4,0,.2,1);
  background: var(--bg);
}
#sidebar.collapsed ~ #main-content { margin-left:68px; }

/* Barre supérieure + fond du menu coulissant — masqués sur desktop */
#mobile-topbar { display:none; }
#nav-backdrop { display:none; }

.page { display:none; padding:32px; animation:page-in .25s ease; }
.page.active { display:block; }
@keyframes page-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ─── PAGE HEADER ─────────────────────────────────────────── */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:28px; gap:16px; flex-wrap:wrap;
}
.page-header h2 {
  font-size:24px; font-weight:800; letter-spacing:-.4px;
  color:var(--text);
  display:flex; align-items:center; gap:12px;
}
.page-header h2 i {
  width:42px; height:42px;
  background: linear-gradient(135deg, var(--ral6011-light), #d4e3cb);
  color: var(--ral6011);
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
  border: 1px solid rgba(88,114,70,.15);
}
.page-header p { color:var(--text-muted); font-size:13px; margin-top:4px; }

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.card-title {
  font-size:15px; font-weight:700; margin-bottom:18px;
  display:flex; align-items:center; gap:9px; color:var(--text);
}
.card-title i {
  width:28px; height:28px;
  background: linear-gradient(135deg, var(--ral6011-light), #d4e3cb);
  color:var(--ral6011);
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  border:1px solid rgba(88,114,70,.12);
}

/* ─── STAT CARDS ──────────────────────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:16px; margin-bottom:28px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  display:flex; align-items:center; gap:16px;
  transition:var(--transition); position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; border-radius:0 0 var(--radius-lg) var(--radius-lg);
  opacity:0; transition:opacity .2s;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.stat-card:hover::after { opacity:1; }
.stat-card.green::after  { background:var(--ral6011); }
.stat-card.grey::after   { background:var(--ral7044); }
.stat-card.blue::after   { background:var(--blue); }
.stat-card.yellow::after { background:var(--yellow); }
.stat-card.red::after    { background:var(--red); }
.stat-card.orange::after { background:var(--orange); }

.stat-icon {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; flex-shrink:0;
}
/* RAL 6011 green icons */
.stat-icon.green  { background:linear-gradient(135deg, var(--ral6011-light), #c8ddbf); color:var(--ral6011-dark); }
/* RAL 7044 grey icons */
.stat-icon.grey   { background:linear-gradient(135deg, var(--ral7044-light), #c8cdd0); color:var(--ral7044-deeper); }
.stat-icon.yellow { background:linear-gradient(135deg, #fef8d4, #fdf0a0); color:#856808; }
.stat-icon.red    { background:linear-gradient(135deg, #fbe9e7, #f8d0cb); color:var(--red); }
.stat-icon.blue   { background:linear-gradient(135deg, #ddeef8, #bbd9f2); color:var(--blue); }
.stat-icon.orange { background:linear-gradient(135deg, #fdebd0, #fad5a0); color:var(--orange); }

.stat-number { font-size:28px; font-weight:800; line-height:1; letter-spacing:-.5px; }
.stat-label  { font-size:12px; color:var(--text-muted); margin-top:4px; font-weight:500; }

/* ═══════════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; border-radius:var(--radius-sm); }
table { width:100%; border-collapse:collapse; }
thead th {
  background: var(--ral7044-pale);
  padding:11px 16px;
  text-align:left; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.8px;
  color:var(--ral7044-darker,var(--text-muted));
  border-bottom:2px solid var(--ral7044-border);
  white-space:nowrap;
}
tbody td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13.5px; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background .1s; }
tbody tr:hover { background:var(--ral6011-pale); }

/* ═══════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════ */
.form-group { margin-bottom:18px; }
.form-group label {
  display:block; font-weight:700; font-size:11.5px;
  color:var(--ral7044-deeper); margin-bottom:7px;
  text-transform:uppercase; letter-spacing:.5px;
}
.form-group label i { margin-right:5px; color:var(--ral6011); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row.three { grid-template-columns:1fr 1fr 1fr; }

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=time],input[type=number],input[type=password],
select,textarea {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--white); color:var(--text);
  transition:var(--transition); font-size:13.5px;
}
input:hover,select:hover,textarea:hover { border-color:var(--ral7044); }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--ral6011);
  box-shadow:0 0 0 3px rgba(88,114,70,.12);
}
textarea { resize:vertical; min-height:85px; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border:none; border-radius:var(--radius-sm);
  cursor:pointer; font-weight:600; font-size:13px;
  transition:var(--transition); white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn:active { transform:scale(.97); }

/* RAL 6011 primary */
.btn-primary {
  background: linear-gradient(135deg, var(--ral6011) 0%, var(--ral6011-dark) 100%);
  color:#fff;
  box-shadow: 0 2px 8px rgba(88,114,70,.4);
}
.btn-primary:hover { box-shadow:0 4px 16px rgba(88,114,70,.5); transform:translateY(-1px); }

/* RAL 7044 secondary */
.btn-secondary {
  background: var(--white);
  color: var(--text-2);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { border-color:var(--ral7044); background:var(--ral7044-pale); }

.btn-danger  { background:linear-gradient(135deg, var(--red-mid), var(--red)); color:#fff; box-shadow:0 2px 8px rgba(192,57,43,.3); }
.btn-danger:hover  { box-shadow:0 4px 14px rgba(192,57,43,.45); transform:translateY(-1px); }
.btn-sm   { padding:6px 12px; font-size:12px; border-radius:7px; }
.btn-full { width:100%; justify-content:center; }
.btn-icon { padding:7px 9px; }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ═══════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.2px;
}
/* RAL 6011 green badge */
.badge-green  { background:var(--ral6011-light); color:var(--ral6011-dark); border:1px solid #c8ddbf; }
/* RAL 7044 grey badge */
.badge-gray     { background:var(--ral7044-light); color:var(--ral7044-deeper); border:1px solid var(--ral7044-border); }
.badge-red      { background:var(--red-light); color:var(--red); border:1px solid #f5c6c2; }
.badge-blue     { background:var(--blue-light); color:var(--blue); border:1px solid #bbd9f2; }
.badge-yellow   { background:var(--yellow-light); color:var(--yellow); border:1px solid #f5e98a; }

/* ═══════════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════════ */
.tabs {
  display:flex; gap:4px; margin-bottom:24px;
  background:var(--ral7044-light); padding:5px;
  border-radius:var(--radius); width:fit-content; flex-wrap:wrap;
  border:1px solid var(--ral7044-border);
}
.tab-btn {
  padding:8px 16px; background:transparent; border:none;
  border-radius:var(--radius-sm); cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text-muted);
  transition:var(--transition); display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.tab-btn:hover { color:var(--text); background:rgba(255,255,255,.7); }
.tab-btn.active { background:var(--white); color:var(--ral6011); box-shadow:var(--shadow-xs); }
/* Second niveau d'onglets (sous-catégories) — plus discret */
.tabs.tabs-sub {
  background:transparent; border:none; padding:0;
  margin:-12px 0 20px; gap:6px;
}
.tabs.tabs-sub .tab-btn {
  padding:6px 13px; font-size:12.5px; border:1px solid var(--ral7044-border);
}
.tabs.tabs-sub .tab-btn.active {
  background:var(--ral6011); color:var(--white); border-color:var(--ral6011);
}

/* ═══════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(30,36,34,.65);
  backdrop-filter:blur(5px);
  z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:overlay-in .2s ease;
}
@keyframes overlay-in { from{opacity:0} to{opacity:1} }

.modal-box {
  background:var(--white); border-radius:var(--radius-xl);
  width:100%; max-width:580px; max-height:90vh;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-xl); border:1px solid var(--border);
  animation:modal-in .28s cubic-bezier(.34,1.2,.64,1);
}
.modal-box.modal-lg { max-width:800px; }
.modal-box.modal-xl { max-width:920px; }

/* Formulaires documents RH (certificat / solde de tout compte) */
.hr-doc-form fieldset {
  border: 1px solid var(--border);
  margin: 0 0 16px;
  padding: 14px 16px 16px;
  border-radius: var(--radius-sm, 8px);
}
.hr-doc-form legend {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  padding: 0 8px;
  font-weight: 700;
}
.hr-doc-form .hint {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.hr-jobs, .hr-lines { display: flex; flex-direction: column; gap: 8px; }
.hr-job {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 36px;
  gap: 8px;
  align-items: end;
}
.hr-line {
  display: grid;
  grid-template-columns: 1fr 140px 36px;
  gap: 8px;
  align-items: center;
}
.hr-job .form-group, .hr-line .form-group { margin: 0; }
@media (max-width: 640px) {
  .hr-job, .hr-line { grid-template-columns: 1fr; }
}
@keyframes modal-in { from{opacity:0;transform:scale(.93) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.modal-header h3 { font-size:16px; font-weight:700; letter-spacing:-.2px; }
.modal-close {
  background:var(--ral7044-pale); border:none; cursor:pointer;
  color:var(--text-muted); width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:var(--transition);
}
.modal-close:hover { background:var(--red-light); color:var(--red); }
.modal-body { padding:24px; overflow-y:auto; flex:1; }
.modal-footer {
  padding:16px 24px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  background:var(--ral7044-pale);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
}

/* ─── ALERTS ──────────────────────────────────────────────── */
.alert {
  padding:13px 16px; border-radius:var(--radius-sm);
  margin-bottom:10px; display:flex; align-items:flex-start; gap:11px;
  font-size:13px; border:1px solid transparent;
}
.alert i { margin-top:1px; flex-shrink:0; }
.alert-warning { background:var(--orange-light); color:#7d3600; border-color:#fad5a0; }
.alert-danger  { background:var(--red-light); color:#8b1c1c; border-color:#f5c6c2; }
.alert-success { background:var(--ral6011-light); color:var(--ral6011-deeper); border-color:#c8ddbf; }
/* ─── TOAST ───────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast {
  background:var(--text);
  color:#fff; padding:13px 18px; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); font-size:13px; font-weight:500;
  display:flex; align-items:center; gap:10px;
  animation:toast-in .35s cubic-bezier(.34,1.4,.64,1);
  max-width:340px; border:1px solid rgba(255,255,255,.1);
}
.toast.success { background:linear-gradient(135deg, var(--ral6011), var(--ral6011-dark)); }
.toast.error   { background:linear-gradient(135deg, var(--red-mid), var(--red)); }
.toast.warning { background:linear-gradient(135deg, var(--orange-mid), var(--orange)); }
@keyframes toast-in { from{opacity:0;transform:translateX(60px) scale(.9)} to{opacity:1;transform:translateX(0) scale(1)} }

/* ─── EMPTY STATE ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:64px 20px; color:var(--text-faint); }
.empty-state i { font-size:52px; margin-bottom:14px; display:block; opacity:.2; color:var(--ral7044); }
.empty-state p { font-size:14px; color:var(--text-muted); }

/* ─── SIGNATURE PAD ───────────────────────────────────────── */
canvas#sig-canvas { display:block; background:transparent; cursor:crosshair; touch-action:none; }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:900px) {
  /* Barre supérieure fixe avec bouton menu */
  #mobile-topbar {
    display:flex; align-items:center; gap:12px; position:fixed; top:0; left:0; right:0;
    height:56px; padding:0 14px; z-index:1100;
    background:var(--ral6011-deeper,#2f3f27); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18);
  }
  #mobile-topbar .mt-burger { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:6px 8px; line-height:1; }
  #mobile-topbar .mt-title { font-weight:800; font-size:16px; letter-spacing:.5px; }

  /* Barre latérale = tiroir coulissant hors écran par défaut */
  #sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:1200;
    width:min(84vw,300px);
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  body.nav-open #sidebar { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.45); }
  /* Libellés toujours visibles dans le tiroir */
  #sidebar .sidebar-logo-full,#sidebar .user-info,#sidebar .nav-item span,
  #sidebar .nav-badge,#sidebar .sidebar-footer span,
  #sidebar .nav-section-label { opacity:1 !important; pointer-events:auto !important; }

  #main-content { margin-left:0 !important; padding-top:56px; }

  #nav-backdrop {
    display:block; position:fixed; inset:0; z-index:1150;
    background:rgba(0,0,0,.45); transition:opacity .25s;
  }
  body:not(.nav-open) #nav-backdrop { opacity:0; pointer-events:none; }

  .form-row,.form-row.three { grid-template-columns:1fr; }
  .page { padding:16px; }
}
@media (max-width:600px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .page-header h2 { font-size:20px; }
}
/* ═══════════════════════════════════════════════════════════
   CHAT — suggestions @mentions (le layout est dans l'addendum)
═══════════════════════════════════════════════════════════ */
.chat-main { position:relative; }
.chat-suggest {
  position:absolute; left:14px; right:14px; bottom:60px; z-index:30;
  background:var(--white); border:1px solid var(--ral7044-border); border-radius:12px;
  box-shadow:var(--shadow-md); max-height:220px; overflow-y:auto;
}
.chat-suggest-item {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:9px 13px; background:none; border:none; cursor:pointer; font-size:13.5px; color:var(--text);
}
.chat-suggest-item:hover { background:var(--ral7044-light); }
.chat-suggest-item i { color:var(--green); width:16px; text-align:center; }
.chat-mention { color:var(--ral6011-dark); font-weight:700; }
.chat-bubble-mention { box-shadow:inset 3px 0 0 var(--green); }

/* ═══════════════════════════════════════════════════════════
   PERMISSIONS MATRIX
═══════════════════════════════════════════════════════════ */
.perm-matrix { width:100%; border-collapse:collapse; font-size:13px; }
.perm-matrix th {
  padding:10px 14px; background:var(--ral7044-pale);
  border-bottom:2px solid var(--ral7044-border);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--ral7044-deeper); white-space:nowrap; position:sticky; top:0; z-index:2;
}
.perm-matrix td { padding:7px 14px; border-bottom:1px solid var(--border); }
.perm-module-row td {
  padding:10px 14px 6px;
  background:var(--bg);
  border-top:2px solid var(--border);
}
.perm-name { min-width:220px; }
.perm-name span { font-weight:500; }
.role-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ═══════════════════════════════════════════════════════════
   ZONES MAGASIN
═══════════════════════════════════════════════════════════ */
.zones-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.zone-card {
  background:var(--bg-2);
  border-radius:var(--radius);
  padding:16px;
  border:1.5px solid var(--border);
  transition:var(--transition);
}
.zone-card:hover { box-shadow:var(--shadow); }

@media print {
  #sidebar,.btn,.btn-group { display:none !important; }
  #main-content { margin-left:0 !important; }
  .page { padding:0; }
  .card { box-shadow:none; border:1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════════
   ADDENDUM — composants de la refonte (réutilise les tokens)
═══════════════════════════════════════════════════════════ */
.form-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--green);margin:4px 0 10px;display:flex;align-items:center;gap:8px}
.mini-label{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-muted)}
label.chk{display:inline-flex;align-items:center;gap:8px;font-weight:400;text-transform:none;cursor:pointer;font-size:13px}
label.chk input{width:auto;margin:0}

.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:900px){.dash-cols{grid-template-columns:1fr}}
.list-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.list-row:last-child{border-bottom:0}

/* Dossiers de la base documentaire */
.doc-folders{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.doc-folder-tile{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--ral7044-border);background:var(--white);cursor:pointer;font-size:13px;font-weight:600;
  color:var(--text-2);transition:var(--transition)}
.doc-folder-tile i{color:var(--fc,#587246)}
.doc-folder-tile .dft-count{font-size:11px;background:var(--ral7044-light);padding:1px 8px;border-radius:10px;color:var(--text-muted)}
.doc-folder-tile:hover{border-color:var(--fc,#587246)}
.doc-folder-tile.active{background:var(--fc,#587246);border-color:var(--fc,#587246);color:#fff}
.doc-folder-tile.active i,.doc-folder-tile.active .dft-count{color:#fff}
.doc-folder-tile.active .dft-count{background:rgba(255,255,255,.25)}

/* Notes */
.notes-list{display:flex;flex-direction:column;gap:12px}
.note-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-xs)}
.note-card.urgent{border-left:4px solid var(--accent)}
.note-card.unread{background:var(--ral6011-pale)}
.note-card.scheduled{opacity:.8;border-style:dashed}

/* Checklist HACCP */
.haccp-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.haccp-item:last-child{border-bottom:0}
.haccp-radios{display:flex;gap:10px;flex-shrink:0}
.haccp-radios label{display:flex;align-items:center;gap:5px;cursor:pointer;font-weight:400;text-transform:none;font-size:11px}
.haccp-radios input{width:auto;margin:0}

/* Planning */
.plan-table th,.plan-table td{text-align:center;vertical-align:middle}
.plan-emp{text-align:left!important;min-width:150px}
.plan-cell{min-width:90px;height:56px;padding:4px!important}
.shift-block{background:var(--green-light);color:var(--green-dark);border:1px solid var(--green);border-radius:6px;padding:4px 6px;font-size:12px;font-weight:600;cursor:pointer;margin-bottom:3px}
.shift-block.validated{background:var(--green);color:#fff}
.shift-add{width:26px;height:26px;border-radius:50%;border:1px dashed var(--border-2);background:transparent;color:var(--text-faint);cursor:pointer}
.shift-add:hover{border-color:var(--green);color:var(--green)}

/* Quicklinks */
.quicklinks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.quicklink-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px 14px;box-shadow:var(--shadow-xs);transition:var(--transition)}
.quicklink-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.ql-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.ql-del{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--red-light);color:var(--red);cursor:pointer;font-size:11px}

/* Chat */
.chat-layout{display:grid;grid-template-columns:200px 1fr;gap:16px;height:calc(100vh - 200px);min-height:420px}
@media(max-width:760px){.chat-layout{grid-template-columns:1fr}}
.chat-channels{display:flex;flex-direction:column;gap:6px}
.chat-channel{text-align:left;padding:10px 12px;border-radius:var(--radius-sm);border:0;background:var(--bg-2);cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2)}
.chat-channel.active{background:var(--green);color:#fff}
.chat-main{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{display:flex}
.chat-msg.mine{justify-content:flex-end}
.chat-bubble{max-width:70%;background:var(--bg-2);border-radius:12px;padding:8px 12px;font-size:13px}
.chat-msg.mine .chat-bubble{background:var(--green-light)}
.chat-author{font-size:11px;font-weight:700;color:var(--green)}
.chat-time{font-size:10px;color:var(--text-faint);margin-top:2px;text-align:right}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.chat-input input{flex:1}

/* Inputs sans attribut type explicite (ex: <input>) — même style que les autres */
.modal-body input:not([type]),
.form-group input:not([type]),
input:not([type]):not(.ac-store) {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--white); color:var(--text);
  font-size:13.5px; transition:var(--transition);
}
.modal-body input:not([type]):focus,
.form-group input:not([type]):focus {
  outline:none; border-color:var(--ral6011);
  box-shadow:0 0 0 3px rgba(88,114,70,.12);
}

/* Bandeau d'alerte maintenance (admin) */
#maintenance-banner{display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:10px 32px}
#maintenance-banner button{margin-left:auto;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;cursor:pointer}
#maintenance-banner button:hover{background:rgba(255,255,255,.28)}

/* Identité visuelle par magasin */
.store-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.store-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sidebar-store-chip{margin:8px 16px 0;font-size:10px;display:flex;flex-wrap:wrap;gap:6px}
.sidebar-store-chip .store-chip{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.store-color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--bg-2);border-radius:var(--radius-sm);margin-bottom:10px}

/* Recherche globale (sidebar + résultats) */
.sidebar-search-btn{display:flex;align-items:center;gap:9px;margin:10px 14px 0;padding:8px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:rgba(255,255,255,.6);font-size:12.5px;cursor:pointer;text-align:left}
.sidebar-search-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.sidebar-search-btn span{flex:1}
.sidebar-search-btn kbd{font-size:9.5px;background:rgba(255,255,255,.12);padding:2px 5px;border-radius:4px;font-family:inherit}
#gs-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px}
#gs-input:focus{outline:none;border-color:var(--ral6011);box-shadow:0 0 0 3px rgba(88,114,70,.12)}
.gs-section{margin-bottom:14px}
.gs-section-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-faint);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.gs-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer}
.gs-item:hover{background:var(--bg-2)}
.gs-item span{font-size:11.5px;color:var(--text-muted);white-space:nowrap}

/* Calendrier des congés */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-head{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);text-align:center;padding:4px 0}
.cal-cell{min-height:78px;background:var(--bg-2);border-radius:8px;padding:6px;border:1px solid var(--border)}
.cal-cell.empty{background:transparent;border:none}
.cal-cell.today{border-color:var(--ral6011);box-shadow:0 0 0 1px var(--ral6011)}
.cal-daynum{font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:4px}
.cal-leave-chip{font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-leave-chip.approved{background:var(--ral6011-light);color:var(--ral6011-dark)}
.cal-leave-chip.pending{background:var(--yellow-light);color:var(--yellow)}
.cal-more{font-size:10px;color:var(--text-faint)}
.cal-legend{display:flex;gap:18px;margin-top:14px;font-size:11px;color:var(--text-muted)}
.cal-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle}
.cal-dot.approved{background:var(--ral6011-light);border:1px solid var(--ral6011)}
.cal-dot.pending{background:var(--yellow-light);border:1px solid var(--yellow)}

/* Historique par fiche */
.hist-list{display:flex;flex-direction:column;gap:10px}
.hist-entry{background:var(--bg-2);border-radius:var(--radius-sm);padding:10px 14px;border:1px solid var(--border)}
.hist-head{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-bottom:4px}
.hist-action{font-size:12.5px;font-weight:600;color:var(--text-2)}
.hist-diff{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.hist-diff-row{font-size:11.5px;color:var(--text-muted)}
.hist-old{color:var(--red);text-decoration:line-through;opacity:.8}
.hist-new{color:var(--green-dark);font-weight:600}

/* Bandeau "nouvelle version" (PWA) */
.update-banner{position:fixed;bottom:20px;right:20px;z-index:500;display:flex;align-items:center;gap:12px;background:var(--ral6011-deeper);color:#fff;padding:12px 16px;border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:13px;font-weight:600}
.update-banner button{background:var(--green);border:none;color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;cursor:pointer}
.update-banner button:hover{background:var(--ral6011-mid)}

/* Échanges de créneaux */
.shift-swap-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;border-radius:50%;border:none;background:rgba(255,255,255,.6);color:var(--ral6011-dark);font-size:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.shift-block{position:relative}
.swap-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.swap-row:last-child{border-bottom:0}

/* Scanner code-barres (overlay indépendant, au-dessus des modales) */
.scanner-overlay{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:20px}
.scanner-box{background:#000;border-radius:var(--radius);overflow:hidden;width:100%;max-width:480px;box-shadow:var(--shadow-xl)}
.scanner-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#fff;font-size:13px;font-weight:600;background:rgba(255,255,255,.06)}
.scanner-header button{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:.7}
.scanner-header button:hover{opacity:1}
#scan-video{width:100%;display:block;max-height:60vh;background:#000}
#scanner-status{padding:10px 16px;color:rgba(255,255,255,.85);font-size:12px;text-align:center;background:rgba(255,255,255,.04)}

/* Visite guidée */
.tour-overlay{position:fixed;inset:0;z-index:1200;pointer-events:none}
.tour-spotlight{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(20,22,19,.72);transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;pointer-events:none}
.tour-box{position:fixed;width:320px;background:var(--white);color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow-xl);padding:16px 18px;pointer-events:auto;transition:top .25s ease,left .25s ease;z-index:1201}
.tour-progress{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green);margin-bottom:6px}
.tour-title{font-size:14.5px;font-weight:700;margin-bottom:6px}
.tour-text{font-size:12.5px;color:var(--text-muted);line-height:1.5}
.tour-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.tour-skip{background:none;border:none;color:var(--text-faint);font-size:12px;cursor:pointer}
.tour-skip:hover{color:var(--text-muted)}
.tour-next{background:var(--green);color:#fff;border:none;font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:20px;cursor:pointer}
.tour-next:hover{background:var(--green-dark)}

/* Aide */
.help-cta{background:var(--ral6011-light,#eef3ea);border:1px solid var(--ral7044-border);border-radius:12px;padding:14px 16px}
.help-cta-head{font-weight:800;font-size:14px;color:var(--ral6011-dark,#3d6b2e);margin-bottom:6px}
.help-cta-head i{margin-right:6px}
.help-steps{margin:0 0 12px;padding-left:20px}
.help-steps li{font-size:12.5px;color:var(--text-2);margin-bottom:7px;line-height:1.5}
.help-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.help-row:last-of-type{border-bottom:0}
.help-row i{width:28px;color:var(--green);font-size:15px;margin-top:2px}
.help-row strong{font-size:13px}
.help-row p{font-size:12px;color:var(--text-muted);margin-top:2px}
.help-shortcut{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}
.help-shortcut kbd{background:var(--bg-2);border:1px solid var(--border-2);padding:2px 8px;border-radius:5px;font-family:inherit;font-size:11px;font-weight:700}

/* ═══ Trombinoscope — cartes employé enrichies ═══ */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.emp-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.emp-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(30,36,34,.14);border-color:transparent}
.emp-card-band{height:60px;position:relative;background:var(--rc)}
.emp-card-band::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 60%)}
.emp-card-status{position:absolute;top:10px;right:10px;z-index:2}
.emp-card-av{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:25px;font-weight:800;color:#fff;background:var(--rc);border:3px solid var(--white);
  box-shadow:0 3px 8px rgba(30,36,34,.18);position:absolute;left:16px;bottom:-30px}
.emp-card-body{padding:38px 16px 16px;flex:1;display:flex;flex-direction:column}
.emp-card-name{font-weight:700;font-size:15px;line-height:1.2;color:var(--text)}
.emp-card-role{display:inline-block;align-self:flex-start;margin-top:5px;font-size:10px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;padding:3px 10px;border-radius:20px;color:#fff;background:var(--rc)}
.emp-card-post{font-size:12px;color:var(--text-muted);margin-top:7px}

.emp-card-meta{margin-top:12px;padding-top:11px;border-top:1px dashed var(--border);
  display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--text-muted)}
.emp-card-meta div{display:flex;align-items:center;gap:9px;min-width:0}
.emp-card-meta i{width:15px;text-align:center;color:var(--rc);flex-shrink:0;opacity:.85}
.emp-card-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-card-code{font-family:'Consolas',monospace;letter-spacing:.5px}

/* ═══ Grille de prix — cellules éditables façon tableur ═══ */
.price-table td{padding:3px 5px;vertical-align:middle}
.price-table th{white-space:nowrap}
.price-table input{width:100%;border:1px solid transparent;background:transparent;border-radius:6px;
  padding:7px 9px;font-size:13px;color:var(--text);transition:border-color .12s,background .12s}
.price-table input::placeholder{color:var(--text-faint)}
.price-table input:hover{border-color:var(--border)}
.price-table input:focus{border-color:var(--green);background:var(--white);outline:none;box-shadow:0 0 0 3px var(--green-pale)}
.price-table input[readonly]{cursor:default}
.price-table input[readonly]:hover{border-color:transparent}
.price-table tbody tr:hover td{background:var(--bg-2)}
.pl-origin-ini{flex:0 0 auto;min-width:28px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--green);background:var(--green-pale,rgba(88,114,70,.12));border-radius:6px;padding:4px 6px}
.pl-origin-ini.pl-origin-empty{color:var(--text-faint);background:var(--bg-2);font-weight:500}
/* Sélecteur d'unité à pastilles colorées */
.unit-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;cursor:pointer;
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:16px;background:var(--bg-2);color:var(--text-muted);
  transition:filter .1s,box-shadow .1s;white-space:nowrap}
.unit-chip:hover{filter:brightness(.97)}
.unit-chip:disabled{cursor:default}
.unit-chip.unit-empty{color:var(--text-faint);background:var(--bg-2)}
.unit-menu{position:absolute;z-index:1500;background:var(--white);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 10px 28px rgba(30,36,34,.20);padding:8px;display:flex;flex-direction:column;gap:6px;min-width:130px;max-height:280px;overflow:auto}
.unit-menu .unit-chip{justify-content:flex-start}