@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --primary:          #4F46E5;
  --primary-hover:    #4338CA;
  --primary-light:    #EEF2FF;
  --primary-border:   #C7D2FE;

  /* Module accents */
  --industrial:       #EA580C;
  --industrial-light: #FFF7ED;
  --industrial-border:#FED7AA;

  --studio:           #059669;
  --studio-light:     #ECFDF5;
  --studio-border:    #A7F3D0;

  --media:            #9333EA;
  --media-light:      #FAF5FF;
  --media-border:     #E9D5FF;

  --hr:               #7C3AED;
  --hr-light:         #F5F3FF;
  --hr-border:        #DDD6FE;

  --print3d:          #0891B2;
  --print3d-light:    #ECFEFF;
  --print3d-border:   #A5F3FC;

  /* Semantic */
  --success:          #16A34A;
  --success-light:    #F0FDF4;
  --warning:          #D97706;
  --warning-light:    #FFFBEB;
  --danger:           #DC2626;
  --danger-light:     #FEF2F2;
  --info:             #2563EB;
  --info-light:       #EFF6FF;

  /* Surfaces */
  --bg:               #F4F6F8;
  --bg-hover:         #ECEEF2;
  --surface:          #FFFFFF;
  --border:           #E5E7EB;
  --border-strong:    #D1D5DB;

  /* Typography */
  --text:             #111827;
  --text-secondary:   #6B7280;
  --text-muted:       #9CA3AF;

  /* Layout */
  --sidebar-width:    248px;
  --sidebar-bg:       #FAFBFC;
  --topbar-height:    52px;

  /* Elevation — minimal */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  --shadow-xl:  0 20px 25px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.04);

  /* Spacing scale (8px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radius */
  --r:    10px;
  --r-sm: 8px;
  --r-lg: 15px;
  --r-xl: 20px;
  --r-full: 9999px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
img { display: block; max-width: 100%; }

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════════ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════════ */
.app-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  min-width: 0;
}
.brand-logo {
  display: block;
  flex-shrink: 0;
}
.brand-logo--sidebar {
  width: 96px;
  height: 22px;
}
.brand-logo--auth {
  width: 118px;
  height: 28px;
}
.brand-logo--hero {
  width: 110px;
  height: 27px;
}

.sidebar-toggle {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sidebar-toggle:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-toggle svg { width: 16px; height: 16px; }

.sidebar-search {
  padding: 0 12px 12px;
  flex-shrink: 0;
}

.sidebar-search-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sidebar-search-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.sidebar-search-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.sidebar-search-btn span { flex: 1; text-align: left; }
.sidebar-search-btn kbd {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: inherit;
  color: var(--text-muted);
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 12px 16px;
}

.sidebar-group {
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-bottom: 1px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 400;
  border-radius: var(--r);
  text-decoration: none;
  transition: background .15s cubic-bezier(.22,1,.36,1), color .15s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.nav-link:hover:not(.soon) { background: rgba(0,0,0,.04); color: var(--text); }
.nav-link.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 10px -4px rgba(79,70,229,.45);
}
.nav-link.active.industrial { background: var(--industrial); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--industrial) 45%, transparent); }
.nav-link.active.studio     { background: var(--studio);     box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--studio) 45%, transparent); }
.nav-link.active.media      { background: var(--media);      box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--media) 45%, transparent); }
.nav-link.active.hr         { background: var(--hr);         box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--hr) 45%, transparent); }
.nav-link.active.print3d    { background: var(--print3d);    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--print3d) 45%, transparent); }
.nav-link.active.industrial,
.nav-link.active.studio,
.nav-link.active.media,
.nav-link.active.hr,
.nav-link.active.print3d {
  color: #fff;
}
.nav-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  stroke-width: 1.75;
}
.nav-link:hover svg { color: var(--text-secondary); }
.nav-link.active svg { color: #fff; }

.nav-link.sub {
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 400;
  gap: 9px;
  margin-bottom: 1px;
}
.nav-link.sub svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
}
.nav-link.sub:hover { background: rgba(0,0,0,.04); }
.nav-link.sub.active {
  font-weight: 600;
  color: #fff;
  background: var(--primary);
}
.nav-link.sub.active.industrial { background: var(--industrial); }
.nav-link.sub.active.studio     { background: var(--studio); }
.nav-link.sub.active.media      { background: var(--media); }
.nav-link.sub.active.hr         { background: var(--hr); }
.nav-link.sub.active.print3d    { background: var(--print3d); }
.nav-link.sub.active::before { display: none; }
.nav-link.sub.active svg { color: #fff; }
.nav-link.sub .nav-link-badge {
  background: none;
  min-width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nav-link.sub.active .nav-link-badge { color: rgba(255,255,255,.85); }

.nav-link.child {
  padding: 5px 10px 5px 28px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.nav-link.child:hover { color: var(--text-secondary); }
.nav-link.child.active {
  color: #fff;
  background: var(--primary);
  font-weight: 600;
}

.nav-children {
  margin: 2px 0 4px;
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--border);
}

.nav-link-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-link-badge {
  font-size: 11px;
  font-weight: 500;
  min-width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.nav-link.active .nav-link-badge { color: rgba(255,255,255,.85); }
.nav-link-badge.primary { color: var(--primary); font-weight: 600; }
.nav-link-badge.danger  { color: var(--danger); font-weight: 600; }

.nav-link.soon { opacity: .45; pointer-events: none; }
.nav-soon {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* ── Modules (Indus / Studio / RH) ────────────────────────────────── */
.sidebar-module {
  margin-bottom: 2px;
}
.sidebar-module.open {
  margin-bottom: 8px;
}

.sidebar-module-head {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: var(--r);
  transition: background .1s;
}
.sidebar-module-head:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.sidebar-module.industrial .sidebar-module-head:hover { background: color-mix(in srgb, var(--industrial) 10%, transparent); }
.sidebar-module.studio     .sidebar-module-head:hover { background: color-mix(in srgb, var(--studio) 10%, transparent); }
.sidebar-module.media      .sidebar-module-head:hover { background: color-mix(in srgb, var(--media) 10%, transparent); }
.sidebar-module.hr         .sidebar-module-head:hover { background: color-mix(in srgb, var(--hr) 10%, transparent); }
.sidebar-module.print3d    .sidebar-module-head:hover { background: color-mix(in srgb, var(--print3d) 10%, transparent); }
.sidebar-module.open .sidebar-module-head             { background: var(--primary-light); }
.sidebar-module.industrial.open .sidebar-module-head { background: var(--industrial-light); }
.sidebar-module.studio.open .sidebar-module-head     { background: var(--studio-light); }
.sidebar-module.media.open .sidebar-module-head      { background: var(--media-light); }
.sidebar-module.hr.open .sidebar-module-head         { background: var(--hr-light); }
.sidebar-module.print3d.open .sidebar-module-head    { background: var(--print3d-light); }

.sidebar-module-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px 7px 10px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r);
  text-decoration: none;
  transition: color .1s;
}
.sidebar-module-link:hover { color: var(--primary); }
.sidebar-module.industrial .sidebar-module-link:hover { color: var(--industrial); }
.sidebar-module.studio     .sidebar-module-link:hover { color: var(--studio); }
.sidebar-module.media      .sidebar-module-link:hover { color: var(--media); }
.sidebar-module.hr         .sidebar-module-link:hover { color: var(--hr); }
.sidebar-module.print3d    .sidebar-module-link:hover { color: var(--print3d); }
.sidebar-module.open .sidebar-module-link             { color: var(--primary); }
.sidebar-module.industrial.open .sidebar-module-link { color: var(--industrial); }
.sidebar-module.studio.open .sidebar-module-link     { color: var(--studio); }
.sidebar-module.media.open .sidebar-module-link      { color: var(--media); }
.sidebar-module.hr.open .sidebar-module-link         { color: var(--hr); }
.sidebar-module.print3d.open .sidebar-module-link    { color: var(--print3d); }
.sidebar-module.open .sidebar-module-link .nav-icon             { background: var(--primary); color: #fff; }
.sidebar-module.industrial.open .sidebar-module-link .nav-icon { background: var(--industrial); color: #fff; }
.sidebar-module.studio.open .sidebar-module-link .nav-icon     { background: var(--studio); color: #fff; }
.sidebar-module.media.open .sidebar-module-link .nav-icon      { background: var(--media); color: #fff; }
.sidebar-module.hr.open .sidebar-module-link .nav-icon         { background: var(--hr); color: #fff; }
.sidebar-module.print3d.open .sidebar-module-link .nav-icon    { background: var(--print3d); color: #fff; }
.sidebar-module-link svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  stroke-width: 1.75;
}

.sidebar-module-toggle {
  width: 28px;
  height: 28px;
  margin-right: 2px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .1s, color .1s, transform .18s ease;
}
.sidebar-module-toggle:hover { background: rgba(0,0,0,.05); color: var(--text-secondary); }
.sidebar-module-toggle svg { width: 14px; height: 14px; opacity: .7; }
.sidebar-module:not(.open) .sidebar-module-toggle svg { transform: rotate(-90deg); }

.sidebar-module-body {
  display: none;
  padding: 4px 0 6px 12px;
  margin: 2px 0 0 10px;
  border-left: 1px solid var(--border);
}
.sidebar-module.open .sidebar-module-body { display: block; }
.sidebar-module-back {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.sidebar-module-back:hover { background: rgba(0,0,0,.04); color: var(--text-secondary); }
.sidebar-module-back svg { width: 13px; height: 13px; }

.sidebar-section + .sidebar-section {
  margin-top: 4px;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 10px 10px 5px;
  opacity: .75;
}

.sidebar-section-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Bas de sidebar ───────────────────────────────────────────────── */
.sidebar-bottom {
  padding: 12px 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  margin-top: auto;
  background: var(--sidebar-bg);
}

.sidebar-bottom > .nav-link {
  margin-bottom: 4px;
}

.sidebar-bottom-children {
  margin: 0 0 8px 12px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  margin-top: 4px;
  border-radius: var(--r);
  transition: background .12s;
}
.sidebar-user-card:hover {
  background: rgba(0,0,0,.04);
}

.sidebar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; line-height: 1.3; }
.sidebar-user-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.sidebar-logout {
  width: 28px;
  height: 28px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.sidebar-logout:hover { background: var(--danger-light); color: var(--danger); }
.sidebar-logout svg { width: 15px; height: 15px; }

.app-layout.sidebar-collapsed .app-sidebar {
  transform: translateX(calc(-1 * var(--sidebar-width)));
}

/* ── Main Content ─────────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  transition: margin-left .22s cubic-bezier(.22,1,.36,1);
}

.app-layout.sidebar-collapsed .main-content {
  margin-left: 0;
}

/* ── Topbar ───────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-menu-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .12s, color .12s;
}
.topbar-menu-btn:hover { background: var(--bg-hover); color: var(--text); }
.topbar-menu-btn svg { width: 18px; height: 18px; }
.app-layout.sidebar-collapsed .topbar-menu-btn { display: flex; }

.topbar-msg-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.topbar-msg-btn:hover,
.topbar-msg-btn.active { background: var(--primary-light); color: var(--primary); }
.topbar-msg-btn svg { width: 17px; height: 17px; }
.topbar-msg-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--primary);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.topbar-notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--danger);
  color: #fff;
  border-radius: var(--r-full);
  border: 1.5px solid var(--bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
.topbar-notif-item--danger {
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}
.topbar-notif-item--warning {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}
.topbar-notif-item--primary {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.topbar-icon-btn { position: relative; }

.page-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--bg-hover);
  color: var(--text-muted);
  margin-left: 8px;
}

.breadcrumb-sep {
  font-size: 15px;
  color: var(--border-strong);
  line-height: 1;
  font-weight: 300;
}

.page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--text);
}

.topbar-greeting { line-height: 1.2; }
.topbar-greeting-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
.topbar-greeting-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.4px;
}

.topbar-page {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.topbar-crumb {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
}

.topbar-center {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.topbar-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(380px, 100%);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.topbar-search-pill:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.topbar-search-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-search-pill span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search-pill kbd {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: inherit;
  flex-shrink: 0;
}
.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.topbar-icon-btn--ai:hover {
  background: var(--hr-light);
  color: var(--hr);
}

.topbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 5px;
}

.topbar-icon-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .12s, color .12s;
}
.topbar-icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.topbar-icon-btn svg { width: 16px; height: 16px; }

.topbar-notif-wrap { position: relative; }

.topbar-notif-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}
.topbar-notif-backdrop[hidden] { display: none !important; }

.topbar-prefs-wrap { position: relative; }
.topbar-prefs-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  z-index: 60;
}
.topbar-prefs-panel[hidden] { display: none !important; }
.topbar-prefs-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 10px 0 4px;
}
.topbar-prefs-label:first-child { margin-top: 0; }
.topbar-prefs-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.topbar-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 60;
}
.topbar-notif-panel[hidden] { display: none !important; }
.topbar-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.topbar-notif-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar-notif-clear {
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.topbar-notif-clear:hover { background: var(--bg-hover); }
.topbar-notif-close {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.topbar-notif-close:hover { background: var(--bg-hover); color: var(--text); }
.topbar-notif-close svg { width: 14px; height: 14px; }
.topbar-notif-list {
  max-height: min(360px, calc(100vh - 120px));
  overflow-y: auto;
}
.topbar-notif-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.topbar-notif-row:last-child { border-bottom: none; }
.topbar-notif-item {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 12px 10px 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.topbar-notif-row:hover .topbar-notif-item { background: var(--bg-hover); }
.topbar-notif-dismiss {
  flex-shrink: 0;
  width: 36px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.topbar-notif-row:hover .topbar-notif-dismiss,
.topbar-notif-dismiss:focus-visible { opacity: 1; }
.topbar-notif-dismiss:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.topbar-notif-dismiss svg { width: 14px; height: 14px; }
.topbar-notif-item strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.topbar-notif-item span {
  font-size: 12px;
  color: var(--text-muted);
}

.topbar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity .12s, transform .12s;
}
.topbar-user-avatar:hover { opacity: .9; transform: scale(1.04); }

/* ── Content ──────────────────────────────────────────────────────── */
.content { padding: 24px 28px 32px; flex: 1; min-height: 0; animation: pageFadeIn .3s cubic-bezier(.22,1,.36,1) both; }
.content-flush {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  animation: pageFadeIn .3s cubic-bezier(.22,1,.36,1) both;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .content, .content-flush { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s cubic-bezier(.22,1,.36,1), border-color .16s cubic-bezier(.22,1,.36,1),
              color .16s cubic-bezier(.22,1,.36,1), transform .12s cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
  line-height: 1.3;
}
.btn:active { transform: scale(.97); }
.btn[hidden] { display: none !important; }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; color: currentColor; }

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary svg {
  color: currentColor;
  stroke: currentColor;
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

.btn-danger {
  background: var(--danger-light);
  color: var(--danger);
  border-color: #FECACA;
}
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-xs { padding: 3px 8px; font-size: 11.5px; }

/* ── Forms ────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 5px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--text);
  outline: none;
  transition: border-color .16s cubic-bezier(.22,1,.36,1), box-shadow .16s cubic-bezier(.22,1,.36,1);
  line-height: 1.4;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }

.form-select { cursor: pointer; }
.form-textarea { resize: vertical; min-height: 80px; }

.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Filter Bar ───────────────────────────────────────────────────── */
.filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filters-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters-right { display: flex; align-items: center; gap: 8px; }

.search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 10px;
  min-width: 210px;
  transition: border-color .12s;
}
.search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.search-box svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.search-box input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--text);
  width: 100%;
}
.search-box input::placeholder { color: var(--text-muted); }

.filter-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  outline: none;
  cursor: pointer;
  transition: border-color .12s;
}
.filter-select:focus { border-color: var(--primary); }

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 24px -14px rgba(30,27,75,.18);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.card-actions { display: flex; align-items: center; gap: 6px; }

.card-body { padding: 16px; }

/* ── Stat Cards ───────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}

.stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.stat-icon svg { width: 15px; height: 15px; }
.stat-icon.primary { background: var(--primary-light); color: var(--primary); border-color: var(--primary-border); }
.stat-icon.success { background: var(--success-light); color: var(--success); border-color: transparent; }
.stat-icon.warning { background: var(--warning-light); color: var(--warning); border-color: transparent; }
.stat-icon.danger  { background: var(--danger-light);  color: var(--danger);  border-color: transparent; }
.stat-icon.info    { background: var(--info-light);    color: var(--info);    border-color: transparent; }
.stat-icon.industrial { background: var(--industrial-light); color: var(--industrial); border-color: transparent; }
.stat-icon.studio     { background: var(--studio-light);     color: var(--studio);     border-color: transparent; }
.stat-icon.media      { background: var(--media-light);      color: var(--media);      border-color: transparent; }
.stat-icon.print3d    { background: var(--print3d-light);    color: var(--print3d);    border-color: transparent; }

.stat-trend {
  font-size: 11.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 2px;
}
.stat-trend.up   { color: var(--success); }
.stat-trend.down { color: var(--danger); }
.stat-trend.flat { color: var(--text-muted); }
.stat-trend svg  { width: 12px; height: 12px; }

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 3px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--bg-hover); }

td.td-strong { color: var(--text); font-weight: 500; }
td.td-mono   { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12.5px; color: var(--text-muted); }

.table-actions { display: flex; gap: 4px; }

/* ── Status labels (texte coloré, aucune pastille) ────────────────── */
.slabel {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.slabel.success { color: var(--success); }
.slabel.warning { color: var(--warning); }
.slabel.danger  { color: var(--danger);  }
.slabel.info    { color: var(--info);    }
.slabel.primary { color: var(--primary); }
.slabel.neutral { color: var(--text-muted); }
.slabel svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }

/* ── Progress Bar ─────────────────────────────────────────────────── */
.progress {
  height: 5px;
  background: var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--primary);
  transition: width .3s ease;
}
.progress-fill.success    { background: var(--success); }
.progress-fill.warning    { background: var(--warning); }
.progress-fill.danger     { background: var(--danger); }
.progress-fill.industrial { background: var(--industrial); }
.progress-fill.studio     { background: var(--studio); }
.progress-fill.media      { background: var(--media); }

/* ── Avatar ───────────────────────────────────────────────────────── */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  font-size: 11.5px;
  width: 30px;
  height: 30px;
}

.avatar-lg { width: 44px; height: 44px; font-size: 16px; }
.avatar-xl { width: 56px; height: 56px; font-size: 20px; border-radius: var(--r-lg); }

.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid #fff; margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* ── Alert ────────────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid;
}
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert.warning { background: var(--warning-light); color: #92400E; border-color: #FDE68A; }
.alert.danger  { background: var(--danger-light);  color: #991B1B; border-color: #FECACA; }
.alert.success { background: var(--success-light); color: #166534; border-color: #BBF7D0; }
.alert.info    { background: var(--info-light);    color: #1E40AF; border-color: #BFDBFE; }

/* ── Section header ───────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

/* ── Empty State ──────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state svg { width: 40px; height: 40px; opacity: .25; margin-bottom: 10px; }
.empty-state p { font-size: 13.5px; }

/* ── Divider ──────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ─────────────────────────────────────────────────────────────────────
   PAGE-SPECIFIC
───────────────────────────────────────────────────────────────────── */

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}

/* Stock level indicator */
.stock-level {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.stock-level span { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Equipment card grid */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.equip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  transition: border-color .13s, box-shadow .13s;
}
.equip-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.equip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.equip-icon {
  width: 42px;
  height: 42px;
  background: var(--industrial-light);
  color: var(--industrial);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
}
.equip-icon svg { width: 20px; height: 20px; }

.equip-name { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.equip-serial { font-size: 11.5px; color: var(--text-muted); }

.equip-meta {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.equip-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}
.equip-meta-row .label { color: var(--text-muted); }
.equip-meta-row .value { font-weight: 500; color: var(--text-secondary); }

/* Project cards */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
}
.project-card:hover { border-color: var(--primary-border); box-shadow: var(--shadow-md); }

.project-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}

.project-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.project-client { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }

.project-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.project-budget {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--studio);
}

/* Team cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.team-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
}

.team-avatar-wrap { margin: 0 auto 10px; }
.team-name { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.team-role { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.tech-tag {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
}

/* ── Env chips (filtre pilule style UnioraStudio) ─────────────────── */
.env-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.env-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .13s;
}
.env-chip:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong));
}
.env-chip.active {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}
.env-chip.active.industrial {
  border-color: color-mix(in srgb, var(--industrial) 50%, var(--border));
  background: color-mix(in srgb, var(--industrial) 10%, var(--surface));
  color: var(--industrial);
}
.env-chip__count {
  font-size: 10px;
  font-weight: 700;
  opacity: .7;
}

/* ── Servers page ─────────────────────────────────────────────────── */
.servers-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.server-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.server-status-dot.online  { background: var(--success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent); }
.server-status-dot.maintenance { background: var(--warning); }
.server-status-dot.offline { background: var(--danger); }

.server-host { font-weight: 700; color: var(--text); font-size: 13px; }
.server-sub  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Request cards */
.request-list { display: flex; flex-direction: column; gap: 10px; }

.request-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  transition: border-color .13s;
}
.request-card:hover { border-color: var(--border-strong); }

.request-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.request-title { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.request-meta  { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Kanban */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}

.kanban-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  min-height: 200px;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--border);
}

.kanban-col-title { font-size: 13px; font-weight: 600; color: var(--text); }

.kanban-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--border);
  color: var(--text-secondary);
}

.task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 11px 12px;
  margin-bottom: 7px;
  transition: box-shadow .13s;
}
.task-card:last-child { margin-bottom: 0; }
.task-card:hover { box-shadow: var(--shadow-md); }

.task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.task-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-project {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.priority-urgent { background: linear-gradient(135deg, #F43F5E, #BE123C); }
.priority-high   { background: linear-gradient(135deg, var(--industrial), #FB923C); }
.priority-medium { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.priority-low    { background: linear-gradient(135deg, var(--success), #34D399); }

/* Client tags */
.client-projects { font-size: 12px; color: var(--text-muted); }

/* Settings */
.settings-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.settings-nav { display: flex; flex-direction: column; gap: 2px; }

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
  border-radius: var(--r);
  cursor: pointer;
  transition: all .13s;
}
.settings-nav-item:hover { background: var(--bg-hover); color: var(--text); }
.settings-nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 500; }
.settings-nav-item svg { width: 15px; height: 15px; opacity: .7; }
.settings-nav-item.active svg { opacity: 1; }

.settings-section { display: none; }
.settings-section.active { display: block; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ─────────────────────────────────────────────────────────────────────
   AUTH
───────────────────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-md);
}

.auth-header { margin-bottom: 28px; }

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}


.auth-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  letter-spacing: -0.3px;
}

.auth-subtitle { font-size: 13.5px; color: var(--text-muted); }

.auth-alert { margin-bottom: 16px; }
.auth-form-password { margin-bottom: 20px; }
.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 11px 16px;
  font-size: 14px;
}

.auth-demo {
  margin-top: 20px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.7;
}
.auth-demo strong { color: var(--text-secondary); font-weight: 600; }

/* ── Auth hero (page de connexion) ───────────────────────────────────── */
.auth-hero-page {
  min-height: 100vh;
  background: #EEF0FA;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-shell {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(30,27,75,.32), 0 10px 24px -10px rgba(30,27,75,.14);
  animation: authShellIn .5s cubic-bezier(.22,1,.36,1) both;
}

.auth-hero {
  position: relative;
  height: 200px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1E1B4B 0%, #4F46E5 100%);
  padding: 28px 28px 0;
  overflow: hidden;
}
.auth-hero__logo {
  position: relative;
  z-index: 2;
  animation: authLogoIn .5s .1s cubic-bezier(.34,1.4,.64,1) both;
}
.auth-hero__logo text { fill: #fff; }
.auth-hero__tag {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.68);
  animation: authFieldIn .45s .22s cubic-bezier(.22,1,.36,1) both;
}
.auth-hero__curve {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 56px;
  display: block;
}

.auth-panel {
  padding: 26px 28px 32px;
}
.auth-panel__title {
  font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.4px; margin-bottom: 22px;
  animation: authFieldIn .45s .2s cubic-bezier(.22,1,.36,1) both;
}
.auth-panel__sub   {
  font-size: 13.5px; color: var(--text-muted); margin-bottom: 24px;
  animation: authFieldIn .45s .26s cubic-bezier(.22,1,.36,1) both;
}

.auth-field { margin-bottom: 16px; animation: authFieldIn .45s cubic-bezier(.22,1,.36,1) both; }
.auth-field:nth-of-type(1) { animation-delay: .32s; }
.auth-field:nth-of-type(2) { animation-delay: .38s; }
.auth-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.auth-field-input-wrap { position: relative; }
.auth-field input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 14px;
  color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(79,70,229,.14);
}
.auth-field-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: color .15s ease, background-color .15s ease;
}
.auth-field-toggle:hover { color: var(--text-secondary); background: var(--bg-hover); }
.auth-field-toggle svg { width: 16px; height: 16px; }

.auth-submit-btn {
  width: 100%;
  padding: 15px;
  margin-top: 6px;
  border: none;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(67,56,202,.4);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  animation: authFieldIn .45s .44s cubic-bezier(.22,1,.36,1) both;
}
.auth-submit-btn svg { width: 16px; height: 16px; }
.auth-submit-btn:hover  { background: var(--primary-hover); box-shadow: 0 8px 18px -6px rgba(67,56,202,.45); }
.auth-submit-btn:active { transform: scale(.98); box-shadow: 0 4px 10px -4px rgba(67,56,202,.35); }
.auth-submit-btn:disabled { opacity: .7; cursor: default; transform: none; }

.auth-panel__footer {
  margin-top: 22px; text-align: center;
  animation: authFieldIn .45s .5s cubic-bezier(.22,1,.36,1) both;
}
.auth-panel__footer a { color: var(--primary); font-weight: 600; }
.auth-panel__footer p { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

@keyframes authShellIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authFieldIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes authLogoIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-shell, .auth-hero, .auth-hero__logo, .auth-hero__tag, .auth-panel__title,
  .auth-panel__sub, .auth-field, .auth-submit-btn, .auth-panel__footer {
    animation: none !important;
  }
}

/* ── Cohérence avec la page de connexion ──────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  border-radius: 10px;
}
.stat-card,
.card {
  animation: pageFadeIn .35s cubic-bezier(.22,1,.36,1) both;
}
.request-card { transition: transform .15s cubic-bezier(.22,1,.36,1), border-color .15s ease; }
a.request-card:hover { transform: translateY(-1px); }

/* Icônes de sidebar en pastille colorée (repris de la maquette dashboard) */
.nav-icon {
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-icon svg { width: 14px; height: 14px; color: inherit; stroke-width: 2; }
.nav-icon.violet     { background: var(--primary-light);    color: var(--primary); }
.nav-icon.industrial { background: var(--industrial-light); color: var(--industrial); }
.nav-icon.studio     { background: var(--studio-light);     color: var(--studio); }
.nav-icon.media      { background: var(--media-light);      color: var(--media); }
.nav-icon.print3d    { background: var(--print3d-light);    color: var(--print3d); }
.sidebar-module-link .nav-icon {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.nav-link.active .nav-icon             { background: var(--primary); color: #fff; }
.nav-link.active.industrial .nav-icon { background: var(--industrial); color: #fff; }
.nav-link.active.studio     .nav-icon { background: var(--studio); color: #fff; }
.nav-link.active.media      .nav-icon { background: var(--media); color: #fff; }
.nav-link.active.hr         .nav-icon { background: var(--hr); color: #fff; }
.nav-link.active.print3d    .nav-icon { background: var(--print3d); color: #fff; }

/* Panneaux de type dashboard : badge d'icône dans les en-têtes (accent unique) */
span.title-badge {
  width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); flex-shrink: 0;
}
span.title-badge svg { width: 15px !important; height: 15px !important; color: var(--primary) !important; }

/* ─────────────────────────────────────────────────────────────────────
   UTILITIES
───────────────────────────────────────────────────────────────────── */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.gap-1          { gap: 4px; }
.gap-2          { gap: 8px; }
.gap-3          { gap: 12px; }
.gap-4          { gap: 16px; }
.mb-0           { margin-bottom: 0; }
.mb-2           { margin-bottom: 8px; }
.mb-3           { margin-bottom: 12px; }
.mb-4           { margin-bottom: 16px; }
.mb-6           { margin-bottom: 24px; }
.mt-1           { margin-top: 4px; }
.mt-2           { margin-top: 8px; }
.w-full         { width: 100%; }
.text-sm        { font-size: 12.5px; }
.text-xs        { font-size: 11.5px; }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary   { color: var(--primary); }
.text-success   { color: var(--success); }
.text-danger    { color: var(--danger); }
.text-warning   { color: var(--warning); }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.truncate       { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sr-only        { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   COMMAND PALETTE
═══════════════════════════════════════════════════════════════════ */
.cmd-palette[hidden] { display: none; }

.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(18vh, 140px);
}

.cmd-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(4px);
}

.cmd-palette-dialog {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.cmd-palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cmd-palette-input-wrap svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.cmd-palette-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  outline: none;
}
.cmd-palette-input-wrap input::placeholder { color: var(--text-muted); }
.cmd-esc {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: inherit;
}

.cmd-back,
.cmd-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--r);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.cmd-back:hover,
.cmd-send:hover { background: var(--bg-hover); color: var(--text); }
.cmd-back svg,
.cmd-send svg { width: 16px; height: 16px; }
.cmd-send {
  background: var(--primary);
  color: #fff;
}
.cmd-send:hover { background: var(--primary-hover, #4338CA); color: #fff; }

.cmd-palette.cmd-mode-ai .cmd-palette-dialog {
  width: min(620px, calc(100vw - 32px));
}
.cmd-palette.cmd-mode-ai #cmd-input-icon { color: var(--primary); }

.cmd-palette-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.cmd-palette-results.cmd-ai-thread {
  max-height: 420px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
}

.cmd-ai-welcome {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  padding: 4px 0 8px;
}

.cmd-ai-bubble {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.cmd-ai-bubble--user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cmd-ai-bubble--assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.cmd-ai-bubble--error {
  border-color: #FECACA;
  background: #FEF2F2;
  color: #B91C1C;
}

.cmd-ai-typing,
.assistant-typing,
.ky-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 4px 0;
}

/* ── SVG Spinners (loaders animés, distincts de Lucide) ─────────── */
.ky-spinner--ring {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: var(--primary);
}
.ky-spinner--dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  color: var(--primary);
}
.ky-spinner--dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: ky-dot-bounce 1.2s ease-in-out infinite;
}
.ky-spinner--dots span:nth-child(2) { animation-delay: 0.15s; }
.ky-spinner--dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ky-dot-bounce {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.88;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn.is-loading .ky-spinner--ring { color: currentColor; }

form.is-submitting {
  pointer-events: none;
}
form.is-submitting .form-loading-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.cmd-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 10px 4px;
}

.cmd-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: var(--r);
  color: var(--text-secondary);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.cmd-item:hover,
.cmd-item.active {
  background: var(--primary-light);
  color: var(--primary);
}
.cmd-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.cmd-item.active svg { opacity: 1; }

.cmd-group-label-ai {
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmd-item-ai-hero {
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  font-weight: 600;
  color: var(--primary);
}
.cmd-item-ai-hero svg,
.cmd-item-ai-hero.active svg { opacity: 1; color: var(--primary); }
.cmd-item-ai-hero:hover,
.cmd-item-ai-hero.active {
  background: var(--primary-light);
  color: var(--primary);
}

.cmd-item-ai-ask {
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  font-weight: 500;
}
.cmd-item-ai-ask span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cmd-ai-ask-prefix {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--primary);
}
.cmd-ai-ask-query {
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-item-ai-ask:hover,
.cmd-item-ai-ask.active {
  background: #E0E7FF;
  color: var(--text);
}
.cmd-item-ai-ask svg { color: var(--primary); opacity: 1; }

.cmd-item-ai-prompt {
  font-size: 13px;
}
.cmd-item-ai-prompt:hover,
.cmd-item-ai-prompt.active {
  background: #F5F3FF;
  color: #5B21B6;
}

.cmd-item-kbd {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: inherit;
  flex-shrink: 0;
}

.cmd-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   INBOX / MES TÂCHES
═══════════════════════════════════════════════════════════════════ */
.inbox-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.inbox-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbox-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: opacity .25s, transform .25s, border-color .13s, box-shadow .13s;
}
.inbox-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.inbox-card.late {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.inbox-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.inbox-card-icon svg { width: 18px; height: 18px; }

.inbox-card-body { flex: 1; min-width: 0; }

.inbox-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.inbox-card-type {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--primary);
}

.inbox-card-module {
  font-size: 11px;
  color: var(--text-muted);
  padding: 1px 6px;
  background: var(--bg);
  border-radius: var(--r-sm);
}

.inbox-card-late {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--danger);
}
.inbox-card-late svg { width: 12px; height: 12px; }

.inbox-card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}

.inbox-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.inbox-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.inbox-card-meta svg { width: 12px; height: 12px; }

.inbox-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.inbox-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
  color: var(--text-muted);
}
.inbox-empty svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .4; }
.inbox-empty p { margin-bottom: 16px; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   MESSENGER
═══════════════════════════════════════════════════════════════════ */
.messenger {
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--surface);
}

.messenger-list {
  width: 320px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--bg);
}

.messenger-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 12px;
}
.messenger-list-head--actions {
  justify-content: flex-end;
}

.messenger-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.messenger-search svg { width: 14px; height: 14px; color: var(--text-muted); }
.messenger-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  outline: none;
  color: var(--text);
}
.messenger-search input::placeholder { color: var(--text-muted); }

.msg-compose-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.msg-compose-item:hover { background: var(--surface); }
.msg-compose-item .msg-status-dot { margin-left: auto; }

.messenger-convos {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.msg-convo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
  position: relative;
}
.msg-convo:hover { background: var(--surface); }
.msg-convo.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.msg-convo.unread .msg-convo-name { font-weight: 600; color: var(--text); }

.msg-convo-avatar-wrap { position: relative; flex-shrink: 0; }
.msg-convo-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.msg-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  border: 2px solid var(--bg);
  background: var(--text-muted);
}
.msg-status-dot.online  { background: var(--success); }
.msg-status-dot.away    { background: var(--warning); }

.msg-convo-body { flex: 1; min-width: 0; }
.msg-convo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.msg-convo-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-convo-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.msg-convo-preview {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
.msg-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--primary);
  flex-shrink: 0;
}
.msg-convo-badge {
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.messenger-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
}

.messenger-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.messenger-chat-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.messenger-chat-user h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.msg-chat-status {
  font-size: 12px;
  color: var(--text-muted);
}
.msg-chat-status.online { color: var(--success); }
.msg-chat-status.away   { color: var(--warning); }

.messenger-chat-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.messenger-thread {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
}

.msg-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 8px;
}
.msg-date-sep span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: var(--r-full);
}

.msg-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 72%;
}
.msg-bubble-wrap.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.msg-bubble-wrap.theirs { align-self: flex-start; }

.msg-bubble-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.msg-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  line-height: 1.45;
}
.msg-bubble-wrap.theirs .msg-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.msg-bubble-wrap.mine .msg-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-bubble p { font-size: 13.5px; margin-bottom: 3px; }
.msg-bubble time {
  font-size: 10px;
  opacity: .65;
  display: block;
  text-align: right;
}

.messenger-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.messenger-compose-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.messenger-compose-btn:hover { background: var(--bg-hover); color: var(--text); }
.messenger-compose-btn svg { width: 18px; height: 18px; display: block; }

.messenger-input-wrap {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 10px 14px;
  transition: border-color .13s, box-shadow .13s;
}
.messenger-input-wrap:focus-within {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.messenger-input-wrap textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  resize: none;
  line-height: 1.4;
  max-height: 120px;
}
.messenger-send {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
.messenger-send:hover { background: var(--primary-hover); }
.messenger-send svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.messenger-compose-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.messenger-compose-ai {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hr);
  color: #fff;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.messenger-compose-ai:hover {
  background: color-mix(in srgb, var(--hr) 85%, #000);
  transform: translateY(-1px);
}
.messenger-compose-ai svg {
  width: 16px;
  height: 16px;
  display: block;
}

.messenger-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  gap: 8px;
  padding: 40px;
}
.messenger-empty svg { width: 48px; height: 48px; opacity: .25; }
.messenger-empty h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.messenger-empty p { font-size: 13.5px; }

button.msg-convo {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

/* ── Messenger dock (global widget) ───────────────────────────────── */
.msg-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 411;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.msg-dock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 405;
  background: rgba(15, 23, 42, 0.12);
  border: none;
  padding: 0;
  cursor: default;
}
.msg-dock-backdrop[hidden] { display: none !important; }

.msg-panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 100px));
  display: none;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.msg-panel.is-open { display: flex; }

.msg-panel-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.msg-panel-view[hidden] { display: none !important; }

.msg-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.msg-panel-head h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.msg-panel-head--chat {
  gap: 10px;
  padding: 12px 14px;
}
.msg-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.msg-panel-expand,
.msg-panel-close,
.msg-panel-back {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.msg-panel-expand:hover,
.msg-panel-close:hover,
.msg-panel-back:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.msg-panel-expand svg,
.msg-panel-close svg,
.msg-panel-back svg { width: 16px; height: 16px; }

.msg-panel-chat-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.msg-panel-chat-user h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.msg-panel .messenger-search {
  margin: 10px 12px;
  border-radius: var(--r-full);
  border: none;
  background: var(--bg-hover);
}
.msg-panel .messenger-convos {
  padding: 4px 8px 10px;
}
.msg-panel .messenger-thread {
  padding: 16px;
  flex: 1;
}
.msg-panel .messenger-compose {
  padding: 12px 12px;
}
.msg-panel .messenger-input-wrap {
  max-width: none;
}
.msg-panel .msg-bubble-wrap { max-width: 85%; }

.msg-dock-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.msg-dock-fab {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--r-full);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background .12s, box-shadow .12s;
  position: relative;
}
.msg-dock-fab:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-lg);
}
.msg-dock-fab svg { width: 22px; height: 22px; }

.msg-dock-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE TABS (générique)
═══════════════════════════════════════════════════════════════════ */
.page-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.page-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.page-tab:hover { background: var(--bg-hover); color: var(--text); }
.page-tab.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.page-tab svg { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════════ */
.toast-root {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  background: var(--text);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast--success { background: var(--studio); }
.toast--info { background: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   RH
═══════════════════════════════════════════════════════════════════ */
.hr-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.hr-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.hr-tab:hover { background: var(--bg-hover); color: var(--text); }
.hr-tab.active { background: var(--hr-light); color: var(--hr); font-weight: 600; }
.hr-tab svg { width: 15px; height: 15px; }
.hr-tab-badge {
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card-body-flush { padding: 0; }
.hr-leave-row, .hr-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.hr-leave-row:last-child, .hr-balance-row:last-child { border-bottom: none; }

.hr-balance-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border-radius: var(--r-full);
  max-width: 120px;
}
.hr-balance-bar {
  height: 100%;
  background: var(--hr);
  border-radius: var(--r-full);
}

.hr-actions { display: flex; gap: 6px; }
.hr-recruit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.hr-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-skill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--text-secondary);
}

.stat-icon.hr-stat { background: var(--hr-light); color: var(--hr); }

.hr-espace-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-muted);
}
.hr-espace-empty svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .35; }
.hr-espace-empty h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.hr-espace-empty p { margin-bottom: 12px; font-size: 14px; }
.hr-demo-accounts {
  list-style: none;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.hr-my-leave {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.hr-my-leave:last-child { border-bottom: none; }
.hr-my-leave-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hr-my-leave-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.hr-my-leave-dates {
  font-size: 12.5px;
  color: var(--text-secondary);
}
.hr-my-leave-reason {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.equipe-pole-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}

/* ═══════════════════════════════════════════════════════════════════
   ORGANIGRAMME
═══════════════════════════════════════════════════════════════════ */
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-bottom: 24px;
}

.org-level-root {
  display: flex;
  justify-content: center;
}

.org-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  min-width: 200px;
}
.org-node-root {
  padding: 14px 16px;
  border-color: var(--border-strong);
  background: var(--surface);
}
.org-node-lead {
  border-style: dashed;
  min-width: 0;
  flex: 1;
}
.org-node-member {
  min-width: 0;
  width: 100%;
}

.org-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.org-avatar.sm {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.org-node-info {
  min-width: 0;
  line-height: 1.3;
}
.org-node-info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-node-info span {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

.org-connector {
  background: var(--border-strong);
  flex-shrink: 0;
}
.org-connector-down {
  width: 2px;
  height: 28px;
}
.org-connector-branch {
  width: 2px;
  height: 20px;
  margin: 0 auto;
}

.org-branches {
  display: grid;
  grid-template-columns: repeat(var(--branch-count, 2), 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  position: relative;
  padding-top: 24px;
}
.org-branches::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(50% / var(--branch-count, 2));
  right: calc(50% / var(--branch-count, 2));
  height: 2px;
  background: var(--border-strong);
  pointer-events: none;
}
.org-branches::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 22px;
  background: var(--border-strong);
  pointer-events: none;
}

@media (max-width: 900px) {
  .org-branches {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  .org-branches::before,
  .org-branches::after { display: none; }
}

.org-branch {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 16px;
  position: relative;
  z-index: 1;
}

.org-branch-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
.org-branch-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.org-branch-title svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.org-branch-title svg { color: var(--text-secondary); }
.org-branch-title h2 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.org-branch-industrial .org-branch-title h2 { color: var(--industrial); }
.org-branch-studio .org-branch-title h2     { color: var(--studio); }
.org-branch-media .org-branch-title h2      { color: var(--media); }
.org-branch-industrial .org-dept-label { color: var(--industrial); }
.org-branch-studio .org-dept-label     { color: var(--studio); }
.org-branch-media .org-dept-label      { color: var(--media); }

.org-departments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.org-dept-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.org-dept-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.org-support {
  width: 100%;
  max-width: 1100px;
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
}
.org-support-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.org-support-label svg { width: 14px; height: 14px; }
.org-support-members {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.org-support-members .org-node {
  min-width: 220px;
  flex: 0 1 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   ASSISTANT IA
═══════════════════════════════════════════════════════════════════ */
.assistant-backdrop {
  position: fixed;
  inset: 0;
  z-index: 415;
  background: rgba(15, 23, 42, 0.12);
  border: none;
  padding: 0;
  cursor: default;
}
.assistant-backdrop[hidden] { display: none !important; }

.assistant-root {
  position: fixed;
  bottom: 24px;
  right: 88px;
  z-index: 420;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.assistant-root > * { pointer-events: auto; }

.assistant-panel {
  width: min(380px, calc(100vw - 32px));
  height: min(500px, calc(100vh - 120px));
  display: none;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.assistant-panel.is-open { display: flex; }

.assistant-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.assistant-head-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-lg);
  background: var(--hr);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.assistant-head-icon svg { width: 16px; height: 16px; display: block; }
.assistant-head-text { flex: 1; min-width: 0; }
.assistant-head-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.assistant-head-text span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.assistant-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.assistant-close:hover { background: var(--bg-hover); color: var(--text); }
.assistant-close svg { width: 16px; height: 16px; display: block; }

.assistant-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assistant-empty {
  margin: auto;
  text-align: center;
  max-width: 260px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.assistant-bubble {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.assistant-bubble--user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.assistant-bubble--assistant {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.assistant-bubble--error {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: var(--danger-light);
}
.assistant-typing {
  padding: 4px 2px;
}
.assistant-send.is-loading .ky-spinner--ring {
  color: #fff;
}

.assistant-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.assistant-compose textarea {
  flex: 1;
  min-height: 40px;
  max-height: 100px;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.assistant-compose textarea:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.assistant-send {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background .12s;
}
.assistant-send:hover { background: var(--primary-hover); }
.assistant-send svg { width: 16px; height: 16px; display: block; }

.assistant-fab {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: var(--r-full);
  background: var(--hr);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--hr) 40%, transparent);
  transition: transform .15s, box-shadow .15s;
}
.assistant-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--hr) 50%, transparent);
}
.assistant-fab svg { width: 22px; height: 22px; display: block; }

body.page-messages .assistant-fab,
body.messenger-open .assistant-fab {
  display: none !important;
}

body.page-messages .assistant-root {
  right: 24px;
  z-index: 420;
}

body.assistant-open .msg-dock-backdrop,
body.assistant-open .msg-panel.is-open {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════════════ */
.dash {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(30,27,75,.04), 0 16px 30px -18px rgba(30,27,75,.18);
  overflow: hidden;
}
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.dash-card-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.dash-card-title svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  opacity: 1;
}
.dash-card-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .12s;
}
.dash-card-action svg { width: 13px; height: 13px; }
.dash-card-action:hover { color: var(--primary); }

.dash-card--revenue {
  background: var(--surface);
}
.dash-revenue-body {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 14px 16px;
}
.dash-revenue-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.dash-card-head--inline {
  padding: 0;
  margin-bottom: 16px;
  border-bottom: none;
}
.dash-revenue-num {
  display: block;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash-revenue-num small {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
}
.dash-revenue-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.dash-revenue-chart {
  flex: 1;
  min-width: 0;
  height: 80px;
}
.dash-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
}
.dash-pill--up {
  color: var(--text-secondary);
}
.dash-pill svg { width: 12px; height: 12px; display: none; }

/* Hero band — même dégradé que la page de connexion */
.dash-hero-band {
  position: relative;
  background: linear-gradient(135deg, #1E1B4B 0%, #4F46E5 100%);
  border-radius: var(--r-xl);
  padding: 34px 36px;
  color: #fff;
  margin-bottom: 20px;
  overflow: hidden;
}
.btn-hero-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--primary);
  border: none;
  padding: 10px 18px;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s cubic-bezier(.22,1,.36,1);
}
.btn-hero-white:hover { transform: translateY(-1px); }
.btn-hero-white svg { width: 15px; height: 15px; }

/* Metrics row — cartes séparées sous le bandeau */
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.dash-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 24px -18px rgba(30,27,75,.22);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color .15s, transform .15s;
}
.dash-metric:hover {
  border-color: var(--primary-border);
  transform: translateY(-1px);
}
.dash-metric-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary-light);
  color: var(--primary);
}
.dash-metric-icon svg { width: 16px; height: 16px; }
.dash-metric-icon.industrial { background: var(--industrial-light); color: var(--industrial); }
.dash-metric-icon.studio     { background: var(--studio-light);     color: var(--studio); }
.dash-metric-icon.media      { background: var(--media-light);      color: var(--media); }
.dash-metric-icon.hr         { background: var(--hr-light);         color: var(--hr); }
.dash-metric-icon.print3d    { background: var(--print3d-light);    color: var(--print3d); }
.dash-metric-icon.danger     { background: var(--danger-light);     color: var(--danger); }
.dash-metric-icon.success    { background: var(--success-light);    color: var(--success); }
.dash-metric-icon.warning    { background: var(--warning-light);    color: var(--warning); }
.dash-metric-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-metric-val {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dash-metric-lbl {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.dash-metric-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ── Board panels ─────────────────────────────────────────────────── */
.dash-list-empty {
  display: block;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.topbar-notif-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.page-toolbar-left,
.page-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.page-toolbar--end { justify-content: flex-end; }
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-select--xs {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 110px;
}
.table-inline-form { margin: 0; }
.dash-board .dash-card {
  display: flex;
  flex-direction: column;
}
.dash-board .dash-card-head {
  margin: 0;
}
.dash-card--primary .dash-card-title svg   { color: var(--primary); }
.dash-card--industrial .dash-card-title svg { color: var(--industrial); }
.dash-card--danger .dash-card-title svg    { color: var(--danger); }
.dash-card--studio .dash-card-title svg    { color: var(--studio); }

.dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.dash-hero-sub {
  font-size: 13.5px;
  color: rgba(255,255,255,.78);
  margin: 0;
}
.dash-hero-sub strong { color: #fff; }
.dash-hero-late { color: #FFD9DE; font-weight: 700; }

.dash-card--pilotage { padding-bottom: 4px; }
.dash-pilotage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 4px 20px 18px;
}
.dash-pilotage-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.dash-pilotage-kpi:hover {
  border-color: color-mix(in srgb, var(--industrial) 30%, var(--border));
  background: color-mix(in srgb, var(--industrial) 5%, var(--surface));
}
.dash-pilotage-kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-pilotage-kpi__val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.dash-pilotage-kpi__lbl {
  font-size: 12px;
  color: var(--text-muted);
}
.dash-pilotage-kpi__risk {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
}
.dash-pilotage-kpi__risk svg { width: 12px; height: 12px; }
.dash-pilotage-kpi__risk--danger  { color: var(--danger); }
.dash-pilotage-kpi__risk--warning { color: var(--warning); }
.dash-pilotage-risks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0 20px 18px;
  margin: 0;
}
.dash-pilotage-risk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  border: none;
}
.dash-pilotage-risk svg { width: 13px; height: 13px; }
.dash-pilotage-risk--danger { color: var(--danger); }
.dash-pilotage-risk--warning { color: var(--warning); }

.dash-card--pulse .dash-pulse-body {
  display: flex;
  gap: 32px;
  padding: 22px 22px 24px;
  flex-wrap: wrap;
}
.dash-pulse-block {
  flex: 1;
  min-width: 220px;
}
.dash-pulse-chart {
  height: 100px;
  margin-top: 8px;
}
.dash-pulse-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-pulse-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.dash-pulse-more {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.dash-pulse-label {
  width: 88px;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.dash-pulse-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--bg-hover);
  border-radius: var(--r-full);
  overflow: hidden;
}
.dash-pulse-bar {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-full);
}
.dash-pulse-val {
  width: 24px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dash-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.dash-card--wide {
  grid-column: 1 / -1;
}

.dash-card--calendar .dash-cal-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  border-top: 1px solid var(--border);
}
.dash-card--calendar .dash-cal-body.is-collapsed {
  grid-template-columns: 1fr;
}
.dash-cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-cal-month {
  font-size: 13px;
  font-weight: 600;
  min-width: 120px;
  text-align: center;
  color: var(--text);
}
.dash-cal-grid-wrap {
  padding: 12px 14px 14px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.dash-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.dash-cal-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.dash-cal-cell {
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 5px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dash-cal-cell--clickable {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.dash-cal-cell--clickable:hover {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 1px var(--primary-border);
}
.dash-cal-event--meeting {
  color: var(--primary);
}
.dash-cal-event--meeting i { width: 11px; height: 11px; vertical-align: -1px; }
.dash-cal-day-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dash-cal-day-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.dash-cal-day-item:last-child { border-bottom: none; }
.dash-cal-day-item i { width: 15px; height: 15px; color: var(--primary); margin-top: 1px; flex-shrink: 0; }
.dash-cal-day-item .dash-cal-event-dot { margin-top: 5px; flex-shrink: 0; }
.dash-cal-day-item strong { display: block; font-size: 12.5px; }
.dash-cal-day-item span { display: block; color: var(--text-muted); font-size: 11.5px; }
.dash-cal-cell--empty {
  background: transparent;
  border-color: transparent;
}
.dash-cal-cell.is-weekend {
  background: var(--bg);
}
.dash-cal-cell.is-today {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.15);
}
.dash-cal-cell.is-today .dash-cal-day {
  background: var(--primary);
  color: #fff;
}
.dash-cal-day {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--r-full);
  color: var(--text-secondary);
}
.dash-cal-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}
.dash-cal-event {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}
.dash-cal-event--approved.leave-conge       { background: rgba(37, 99, 235, 0.12); color: #1D4ED8; }
.dash-cal-event--approved.leave-maladie     { background: rgba(234, 88, 12, 0.12); color: #C2410C; }
.dash-cal-event--approved.leave-teletravail  { background: rgba(124, 58, 237, 0.12); color: #6D28D9; }
.dash-cal-event--approved.leave-formation   { background: rgba(5, 150, 105, 0.12); color: #047857; }
.dash-cal-event--approved.leave-absent,
.dash-cal-event--approved.leave-autre      { background: rgba(100, 116, 139, 0.12); color: #475569; }
.dash-cal-event--pending {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
  border-color: var(--warning);
}
.dash-cal-event-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.dash-cal-more {
  font-size: 10px;
  color: var(--text-muted);
  padding-left: 4px;
}
.dash-cal-sidebar {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.dash-cal-legend-title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.dash-cal-legend-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.dash-cal-legend-items span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-cal-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  font-style: normal;
}
.dash-cal-legend-swatch.approved { background: var(--success-light); border: 1px solid var(--success); }
.dash-cal-legend-swatch.pending  { background: var(--warning-light); border: 1px solid var(--warning); }
.dash-cal-legend-types {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.dash-cal-type {
  font-size: 11px;
  font-weight: 600;
}
.dash-cal-type.leave-conge      { color: #1D4ED8; }
.dash-cal-type.leave-maladie    { color: #C2410C; }
.dash-cal-type.leave-teletravail { color: #6D28D9; }
.dash-cal-type.leave-formation  { color: #047857; }
.dash-cal-type.leave-absent     { color: #475569; }
.dash-cal-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.dash-cal-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}
.dash-cal-list-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.dash-cal-list-text strong {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
}
.dash-cal-list-text span {
  font-size: 11px;
  color: var(--text-muted);
}
.dash-cal-link {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
@media (max-width: 960px) {
  .dash-card--calendar .dash-cal-body {
    grid-template-columns: 1fr;
  }
  .dash-cal-grid-wrap {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .dash-cal-cell {
    min-height: 56px;
  }
}

@media (min-width: 1100px) {
  .dash-card--wide {
    grid-column: span 2;
  }
  .dash-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dash-list {
  list-style: none;
  padding: 0;
  flex: 1;
}
.dash-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.dash-list > li:first-child .dash-list-item { border-top: none; }
.dash-list-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
}
.dash-list-row .dash-list-item { flex: 1; border-top: none; }
.dash-inbox-quick {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-top: none;
}
.dash-list-item:hover { background: var(--bg-hover); }
.dash-list-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.dash-list-text strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-list-text span {
  font-size: 11.5px;
  color: var(--text-muted);
}
.dash-list-ref {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 3px 6px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.dash-list-qty {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.dash-list-qty small {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
}
.dash-list-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.dash-list-dot--danger  { background: var(--danger); }
.dash-list-dot--warning { background: var(--warning); }
.dash-list-qty--danger  { color: var(--danger); }
.dash-list-qty--warning { color: var(--warning); }

@media (max-width: 1280px) {
  .dash-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: 1fr;
    height: auto;
    padding: 14px 20px;
    gap: 12px;
  }
  .topbar-center { order: 3; grid-column: 1; }
  .topbar-search-pill { width: 100%; }
  .topbar-left { order: 1; }
  .topbar-right { order: 2; }
  .content { padding: 20px; }
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .dash-pilotage-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-board { grid-template-columns: 1fr; }
  .dash-revenue-body { flex-direction: column; gap: 12px; }
  .dash-revenue-chart { height: 64px; }
}

/* ── Modal (demandes IT, etc.) ───────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none !important; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.modal-dialog {
  position: relative;
  width: 100%;
  z-index: 1;
  max-height: 90vh;
  overflow-y: auto;
}
body.modal-open { overflow: hidden; }

.modal-dialog .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-form-body {
  padding: 16px 20px;
}
.modal-form-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── Assistant de création ───────────────────────────────────────── */
.create-assistant-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--border);
}
.create-assistant-tab {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.create-assistant-tab.active {
  background: var(--primary-light);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--primary);
}
.create-assistant-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Code-barres ─────────────────────────────────────────────────── */
.barcode-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--r);
  margin-top: 8px;
}
.barcode-preview .barcode-svg {
  max-width: 100%;
  height: 40px;
}
.barcode-number {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.barcode-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
}
.barcode-cell .barcode-mini {
  height: 22px;
  max-width: 90px;
}
.barcode-cell .barcode-number {
  font-size: 10px;
  letter-spacing: 0.04em;
}
.barcode-scan-input.scan-ok { border-color: var(--success); }
.barcode-scan-input.scan-err { border-color: var(--danger); }

/* ── Panneau admin ─────────────────────────────────────────────────── */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.admin-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.admin-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-card-icon.primary { background: var(--primary-soft); color: var(--primary); }
.admin-card-icon.studio  { background: var(--studio-soft); color: var(--studio); }
.admin-card-icon.hr      { background: var(--hr-soft); color: var(--hr); }
.admin-card-icon.indus   { background: var(--indus-soft); color: var(--indus); }
.admin-card-icon.success { background: var(--success-soft); color: var(--success); }
.admin-card-icon.neutral { background: var(--surface-2); color: var(--text-muted); }
.admin-card-body { flex: 1; min-width: 0; }
.admin-card-body h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.admin-card-body p  { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.admin-card-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.admin-card-badge.danger  { background: var(--danger-soft); color: var(--danger); }

/* ── Dossiers 360 (client / affaire) ─────────────────────────────── */
.dossier-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  flex-wrap: wrap;
}
.dossier-hero__main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.dossier-hero__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.dossier-hero__ref {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.dossier-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.dossier-hero__meta a { color: var(--primary); }
.dossier-hero__status { display: flex; align-items: center; }

.dossier-timeline { display: flex; flex-direction: column; gap: 10px; }
.dossier-timeline__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  border: 1px solid var(--border);
}
.dossier-timeline__date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.dossier-timeline__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dossier-timeline__type {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-muted);
}
.dossier-timeline__type--quote { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: var(--warning); }
.dossier-timeline__type--affaire { background: color-mix(in srgb, var(--industrial) 12%, var(--surface)); color: var(--industrial); }
.dossier-timeline__type--of { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.dossier-timeline__type--invoice { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.dossier-timeline__type--nc { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.dossier-timeline__ref {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.admin-card-badge.neutral { background: var(--surface-2); color: var(--text-muted); }
.admin-card-arrow { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }