/*
 * Planning Annualisé — Dark Glassmorphism
 * Typography: Outfit (geometric, modern)
 * Palette: Deep navy, cyan accents, frosted glass panels
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ═══════════════════════════════
   CSS Variables & Base Styles
   (in @layer base so Tailwind utilities can override)
   ═══════════════════════════════ */

@layer base {
  :root {
    --bg: #080c18;
    --glass: rgba(255,255,255,0.04);
    --glass-hover: rgba(255,255,255,0.07);
    --glass-strong: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.08);
    --glass-border-hover: rgba(255,255,255,0.15);
    --text: rgba(255,255,255,0.92);
    --text-secondary: rgba(255,255,255,0.55);
    --text-muted: rgba(255,255,255,0.35);
    --cyan: #06b6d4;
    --cyan-light: #22d3ee;
    --cyan-glow: rgba(6,182,212,0.3);
    --emerald: #10b981;
    --emerald-glow: rgba(16,185,129,0.3);
    --rose: #f43f5e;
    --rose-glow: rgba(244,63,94,0.3);
    --amber: #f59e0b;
    --amber-glow: rgba(245,158,11,0.3);
    --violet: #8b5cf6;
  }

  html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
  }

  /* Ambient light mesh */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 600px 400px at 15% 30%, rgba(6,182,212,0.07), transparent),
      radial-gradient(ellipse 500px 500px at 85% 15%, rgba(139,92,246,0.05), transparent),
      radial-gradient(ellipse 700px 300px at 50% 85%, rgba(6,182,212,0.03), transparent);
    pointer-events: none;
    z-index: 0;
  }

  body > * { position: relative; z-index: 1; }

  /* Checkbox/radio in dark theme */
  input[type="checkbox"], input[type="radio"] {
    accent-color: var(--cyan);
  }
}

/* ═══════════════════════════════
   Animations (outside layers — no cascade conflicts)
   ═══════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 15px var(--cyan-glow); }
  50% { box-shadow: 0 0 25px var(--cyan-glow), 0 0 50px rgba(6,182,212,0.1); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(1rem); }
}

/* ═══════════════════════════════
   Component Classes
   (in @layer components so Tailwind utilities can override)
   ═══════════════════════════════ */

@layer components {
  /* Animations */
  .animate-fade-in { animation: fadeIn 0.4s ease-out; }
  .animate-slide-in { animation: slideIn 0.5s ease-out; }
  .animate-stagger > * { animation: fadeIn 0.4s ease-out backwards; }
  .animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
  .animate-stagger > *:nth-child(2) { animation-delay: 80ms; }
  .animate-stagger > *:nth-child(3) { animation-delay: 160ms; }
  .animate-stagger > *:nth-child(4) { animation-delay: 240ms; }
  .animate-stagger > *:nth-child(5) { animation-delay: 320ms; }
  .animate-stagger > *:nth-child(6) { animation-delay: 400ms; }

  /* Toast Notifications */
  .toast-container {
    position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 100;
    display: flex; flex-direction: column-reverse; gap: 0.5rem;
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: toastIn 0.3s ease-out;
    max-width: 24rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  .toast.toast-hiding { animation: toastOut 0.3s ease-in forwards; }
  .toast-success {
    background: rgba(16,185,129,0.15);
    border-color: rgba(16,185,129,0.3);
    color: #6ee7b7;
  }
  .toast-error {
    background: rgba(244,63,94,0.15);
    border-color: rgba(244,63,94,0.3);
    color: #fda4af;
  }

  /* Tooltips */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 0.5rem); left: 50%;
    transform: translateX(-50%);
    background: rgba(15,20,35,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--cyan-light);
    font-size: 0.75rem; font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(6,182,212,0.2);
    white-space: nowrap;
    pointer-events: none; opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 60;
  }
  [data-tip]::before {
    content: "";
    position: absolute; bottom: calc(100% + 0.125rem); left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(15,20,35,0.95);
    pointer-events: none; opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 60;
  }
  [data-tip]:hover::after, [data-tip]:hover::before { opacity: 1; }
  .nav-badge[data-tip]::after { bottom: auto; top: calc(100% + 0.5rem); }
  .nav-badge[data-tip]::before {
    bottom: auto; top: calc(100% + 0.125rem);
    border-top-color: transparent;
    border-bottom-color: rgba(15,20,35,0.95);
  }

  /* Navigation */
  .nav-clean {
    background: rgba(8,12,24,0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 30px rgba(0,0,0,0.4);
  }
  .nav-link-clean {
    color: rgba(255,255,255,0.5);
    font-weight: 500; font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex; align-items: center;
    border: 1px solid transparent;
  }
  .nav-link-clean:hover {
    color: var(--text);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
  }
  .nav-link-clean.active {
    color: var(--cyan-light);
    background: rgba(6,182,212,0.1);
    border-color: rgba(6,182,212,0.2);
    font-weight: 600;
  }

  .nav-dropdown-menu {
    position: absolute; right: 0; top: 100%;
    margin-top: 0.5rem;
    min-width: 13rem;
    background: rgba(15,20,35,0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    padding: 0.375rem;
    z-index: 50;
  }
  .nav-dropdown-item {
    display: block; width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem; font-weight: 500;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
  }
  .nav-dropdown-item:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
  }
  .nav-dropdown-item.active {
    background: rgba(6,182,212,0.1);
    color: var(--cyan-light);
    font-weight: 600;
  }

  .nav-badge {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
    text-decoration: none;
  }
  .nav-badge:hover { background: rgba(255,255,255,0.06); }
  .nav-badge-count {
    position: absolute; top: -2px; right: -2px;
    background: var(--rose);
    color: white;
    font-size: 0.65rem; font-weight: 700;
    min-width: 1.1rem; height: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    padding: 0 0.25rem;
    line-height: 1;
    border: 2px solid var(--bg);
    box-shadow: 0 0 8px var(--rose-glow);
  }

  /* Cards */
  .card-clean {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.25s ease;
  }
  .card-clean:hover {
    background: var(--glass-hover);
    border-color: var(--glass-border-hover);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  }
  .card-clean-no-hover {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
  }
  .stat-card-clean {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.25s ease;
  }
  .stat-card-clean:hover {
    border-color: rgba(6,182,212,0.3);
    box-shadow: 0 0 20px rgba(6,182,212,0.1);
  }

  /* Buttons */
  .btn-primary-clean, .btn-secondary-clean, .btn-success-clean,
  .btn-danger-clean, .btn-warning-clean {
    font-family: 'Outfit', sans-serif;
    font-weight: 600; font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.625rem;
    border: none; cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex; align-items: center; gap: 0.5rem;
    text-decoration: none;
    line-height: 1.2;
  }

  .btn-primary-clean {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    box-shadow: 0 2px 10px rgba(6,182,212,0.25);
  }
  .btn-primary-clean:hover {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    box-shadow: 0 4px 20px rgba(6,182,212,0.4);
    transform: translateY(-1px);
  }

  .btn-secondary-clean {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .btn-secondary-clean:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-1px);
  }

  .btn-success-clean {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 10px rgba(16,185,129,0.25);
  }
  .btn-success-clean:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 4px 20px rgba(16,185,129,0.4);
    transform: translateY(-1px);
  }

  .btn-danger-clean {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: white;
    box-shadow: 0 2px 10px rgba(244,63,94,0.25);
  }
  .btn-danger-clean:hover {
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    box-shadow: 0 4px 20px rgba(244,63,94,0.4);
    transform: translateY(-1px);
  }

  .btn-warning-clean {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 2px 10px rgba(245,158,11,0.25);
  }
  .btn-warning-clean:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 20px rgba(245,158,11,0.4);
    transform: translateY(-1px);
  }

  /* Small button variant */
  .btn-sm {
    font-size: 0.8125rem !important;
    padding: 0.4rem 0.875rem !important;
    border-radius: 0.5rem !important;
  }

  /* Ghost/link button for tertiary actions */
  .btn-ghost {
    font-family: 'Outfit', sans-serif;
    font-weight: 500; font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: none; cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex; align-items: center; gap: 0.375rem;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    background: transparent;
  }
  .btn-ghost:hover {
    color: var(--text);
    background: rgba(255,255,255,0.06);
  }

  /* Badges */
  .badge-clean {
    display: inline-flex; align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem; font-weight: 600;
    line-height: 1;
    border: 1px solid;
  }
  .badge-blue { background: rgba(6,182,212,0.15); color: #67e8f9; border-color: rgba(6,182,212,0.25); }
  .badge-green { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.25); }
  .badge-yellow { background: rgba(245,158,11,0.15); color: #fcd34d; border-color: rgba(245,158,11,0.25); }
  .badge-red { background: rgba(244,63,94,0.15); color: #fda4af; border-color: rgba(244,63,94,0.25); }
  .badge-gray { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); }
  .badge-orange { background: rgba(249,115,22,0.15); color: #fdba74; border-color: rgba(249,115,22,0.25); }
  .badge-purple { background: rgba(139,92,246,0.15); color: #c4b5fd; border-color: rgba(139,92,246,0.25); }

  /* Calendar */
  .calendar-clean {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    overflow: hidden;
  }
  .calendar-header-clean {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    padding: 0.875rem;
    text-align: center;
    font-weight: 600; font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .calendar-day-clean {
    min-height: 80px; padding: 0.5rem;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.15s ease;
    background: transparent;
    cursor: pointer; position: relative;
  }
  .calendar-day-clean:hover { background: rgba(255,255,255,0.04); }
  .calendar-day-clean.today { background: rgba(6,182,212,0.1); border-color: rgba(6,182,212,0.3); }
  .calendar-day-clean.other-month { opacity: 0.3; }
  .calendar-day-clean.holiday { background: rgba(244,63,94,0.08); }
  .calendar-day-clean.leave { background: rgba(245,158,11,0.08); }

  .calendar-day {
    min-height: 80px; padding: 0.5rem;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.15s ease;
    background: transparent;
    cursor: pointer; position: relative;
  }
  .calendar-day:hover { background: rgba(6,182,212,0.06); }
  .calendar-day-empty { background: rgba(255,255,255,0.01); cursor: default; }
  .calendar-day-today { background: rgba(6,182,212,0.1); border-color: rgba(6,182,212,0.3); }
  .calendar-day-holiday { background: rgba(244,63,94,0.08); border-color: rgba(244,63,94,0.2); }
  .calendar-day-weekend { background: rgba(255,255,255,0.02); }
  .calendar-day-has-shifts { border-left: 3px solid var(--cyan); }
  .calendar-day-number { display: block; font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.7); }
  .calendar-day-leave { background: rgba(245,158,11,0.08); }
  .tooltip-calendar { pointer-events: none; }
  .calendar-day-active {
    background: rgba(6,182,212,0.15) !important;
    border-color: rgba(6,182,212,0.3) !important;
    box-shadow: 0 0 15px rgba(6,182,212,0.15);
  }

  /* Timeline bars */
  .timeline-bar { transition: all 0.15s ease; overflow: hidden; border-radius: 0.375rem; }
  .timeline-bar:hover { z-index: 10; overflow: visible; filter: brightness(1.15); }

  /* Shift bars — dark cyan */
  .tl-shift {
    background: rgba(6,182,212,0.6);
    border: none;
    transition: all 0.15s ease;
  }
  .tl-shift:hover { background: rgba(6,182,212,0.75); }

  /* Overtime récupérée — dark orange */
  .tl-ot-recup {
    background: rgba(249,115,22,0.6);
    border: none;
    transition: all 0.15s ease;
  }
  .tl-ot-recup:hover { background: rgba(249,115,22,0.75); }

  /* Overtime payée — dark emerald */
  .tl-ot-payee {
    background: rgba(16,185,129,0.6);
    border: none;
    transition: all 0.15s ease;
  }
  .tl-ot-payee:hover { background: rgba(16,185,129,0.75); }

  /* Leave bars — dark amber */
  .tl-leave {
    background: rgba(245,158,11,0.55);
    border: none;
    transition: all 0.15s ease;
  }
  .tl-leave:hover { background: rgba(245,158,11,0.7); }

  /* Timeline axis track */
  .tl-axis {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.5rem;
  }

  /* Timeline grid line */
  .tl-grid-line {
    background: rgba(255,255,255,0.05);
  }

  /* Timeline hour mark text */
  .tl-hour-mark {
    color: rgba(255,255,255,0.4);
    font-variant-numeric: tabular-nums;
  }

  details[open] .details-open-rotate { transform: rotate(180deg); }

  /* Forms */
  .input-clean {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-family: 'Outfit', sans-serif;
    transition: all 0.2s ease;
    background: rgba(255,255,255,0.04);
    color: var(--text);
  }
  .input-clean:focus {
    outline: none;
    border-color: rgba(6,182,212,0.5);
    box-shadow: 0 0 0 3px rgba(6,182,212,0.1), 0 0 15px rgba(6,182,212,0.08);
    background: rgba(255,255,255,0.06);
  }
  .input-clean::placeholder { color: rgba(255,255,255,0.3); }

  .label-clean {
    display: block;
    font-size: 0.875rem; font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.375rem;
  }

  /* Select styling (fallback for non-enhanced selects) */
  select.input-clean {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
  }
  select.input-clean option {
    background: #0f1525;
    color: var(--text);
  }

  /* Custom Select (cs-*) */
  .cs-wrapper {
    position: relative;
  }

  .cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-family: 'Outfit', sans-serif;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    min-height: 2.75rem;
  }
  .cs-trigger:hover {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
  }
  .cs-trigger:focus {
    outline: none;
    border-color: rgba(6,182,212,0.5);
    box-shadow: 0 0 0 3px rgba(6,182,212,0.1), 0 0 15px rgba(6,182,212,0.08);
    background: rgba(255,255,255,0.06);
  }
  .cs-trigger-open {
    border-color: rgba(6,182,212,0.5);
    box-shadow: 0 0 0 3px rgba(6,182,212,0.1), 0 0 15px rgba(6,182,212,0.08);
    background: rgba(255,255,255,0.06);
  }
  .cs-trigger-open .cs-chevron {
    transform: rotate(180deg);
  }

  .cs-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .cs-trigger-placeholder {
    color: rgba(255,255,255,0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  .cs-chevron {
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
  }

  /* Dropdown panel */
  .cs-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    background: rgba(12,16,30,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255,255,255,0.04),
      inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .cs-panel-open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .cs-panel-above {
    top: auto;
    bottom: calc(100% + 4px);
    transform: translateY(4px) scale(0.98);
  }
  .cs-panel-above.cs-panel-open {
    transform: translateY(0) scale(1);
  }

  /* Search */
  .cs-search-wrap {
    padding: 0.5rem 0.5rem 0;
  }
  .cs-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-family: 'Outfit', sans-serif;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s ease;
  }
  .cs-search:focus {
    border-color: rgba(6,182,212,0.4);
  }
  .cs-search::placeholder {
    color: rgba(255,255,255,0.25);
  }

  /* Options list */
  .cs-options {
    max-height: 220px;
    overflow-y: auto;
    padding: 0.375rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  .cs-options::-webkit-scrollbar {
    width: 4px;
  }
  .cs-options::-webkit-scrollbar-track {
    background: transparent;
  }
  .cs-options::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
  }

  /* Option items */
  .cs-option {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    position: relative;
  }
  .cs-option:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
  }
  .cs-option-focused {
    background: rgba(255,255,255,0.06);
    color: var(--text);
  }
  .cs-option-active {
    color: var(--cyan-light);
    font-weight: 500;
  }
  .cs-option-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--cyan);
    border-radius: 0 2px 2px 0;
  }
  .cs-option-placeholder {
    color: rgba(255,255,255,0.3);
    font-style: italic;
  }
  .cs-option-disabled {
    color: rgba(255,255,255,0.2);
    cursor: not-allowed;
  }

  /* No results */
  .cs-no-results {
    padding: 1rem;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.8125rem;
  }

  /* Tables */
  .table-clean { width: 100%; border-collapse: collapse; }
  .table-clean th {
    background: rgba(255,255,255,0.03);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.8125rem; font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .table-clean td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.8);
  }
  .table-clean td form, .flex form { display: inline; }
  .table-clean tr:hover td { background: rgba(255,255,255,0.03); }

  /* Utilities */
  .glass {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
  }
  .glass-strong {
    background: var(--glass-strong);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border-hover);
    border-radius: 1rem;
  }

  .tooltip-clean {
    position: absolute; z-index: 50;
    background: rgba(15,20,35,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    font-size: 0.8125rem;
    min-width: 200px;
    color: var(--text);
  }

  .divider-clean { height: 1px; background: rgba(255,255,255,0.06); margin: 1.5rem 0; }
  .text-muted { color: rgba(255,255,255,0.4) !important; }
  .text-primary { color: var(--cyan) !important; }

  /* Template Grid */
  .template-grid { display: grid; grid-template-columns: 80px repeat(7, 1fr); gap: 2px; }
  .template-grid-header {
    background: rgba(255,255,255,0.04);
    padding: 0.5rem; text-align: center;
    font-weight: 600; font-size: 0.8125rem;
    color: rgba(255,255,255,0.6);
    border-radius: 0.25rem;
  }
  .template-grid-cell {
    min-height: 60px; padding: 0.25rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 0.25rem;
  }
  .template-slot-tag {
    background: rgba(6,182,212,0.15);
    color: #67e8f9;
    border: 1px solid rgba(6,182,212,0.2);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem; font-weight: 500;
    margin-bottom: 0.125rem; display: block;
  }

  /* Shift Resize */
  .shift-handle { opacity: 0; transition: opacity 0.15s ease; }
  .group:hover .shift-handle { opacity: 1; }
  .shift-handle:hover { opacity: 1; background: rgba(6,182,212,0.5); }
  .shift-dragging { opacity: 0.7; z-index: 10; }
  .shift-time-tooltip {
    position: absolute; top: -1.75rem; left: 50%; transform: translateX(-50%);
    background: rgba(15,20,35,0.95);
    color: var(--cyan-light);
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(6,182,212,0.2);
    white-space: nowrap;
    pointer-events: none; z-index: 20;
  }

  /* Flatpickr Dark Glassmorphism */
  .flatpickr-calendar.flatpickr-calendar {
    background: rgba(15,20,35,0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    font-family: 'Outfit', sans-serif;
    min-width: 320px;
  }
  .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
  .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }

  .flatpickr-calendar .flatpickr-months { background: transparent; padding: 0.5rem 0.25rem; }
  .flatpickr-calendar .flatpickr-months .flatpickr-month { background: transparent; color: var(--text); height: 36px; }
  .flatpickr-calendar .flatpickr-current-month { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
  .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-calendar .flatpickr-current-month input.cur-year { background: transparent; color: var(--text); font-weight: 600; font-family: 'Outfit', sans-serif; }
  .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #0f1525; color: var(--text); }

  .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
  .flatpickr-calendar .flatpickr-months .flatpickr-next-month { fill: rgba(255,255,255,0.5); padding: 0.5rem; border-radius: 0.375rem; transition: all 0.15s ease; }
  .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
  .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover { fill: var(--cyan-light); background: rgba(6,182,212,0.1); }
  .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
  .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg { fill: inherit; }

  .flatpickr-calendar span.flatpickr-weekday { color: rgba(255,255,255,0.4); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }

  .flatpickr-calendar .flatpickr-day {
    color: rgba(255,255,255,0.75);
    border-radius: 0.375rem;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 0.875rem;
    max-width: 34px; height: 34px; line-height: 34px;
    transition: all 0.15s ease;
  }
  .flatpickr-calendar .flatpickr-day:hover { background: rgba(6,182,212,0.15); border-color: rgba(6,182,212,0.3); }
  .flatpickr-calendar .flatpickr-day.today { border-color: rgba(6,182,212,0.4); background: transparent; }
  .flatpickr-calendar .flatpickr-day.today:hover { background: rgba(6,182,212,0.15); }
  .flatpickr-calendar .flatpickr-day.selected,
  .flatpickr-calendar .flatpickr-day.selected:hover {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white; border-color: transparent;
    box-shadow: 0 0 10px rgba(6,182,212,0.3); font-weight: 600;
  }
  .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
  .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
  .flatpickr-calendar .flatpickr-day.prevMonthDay,
  .flatpickr-calendar .flatpickr-day.nextMonthDay { color: rgba(255,255,255,0.15); }
  .flatpickr-calendar .flatpickr-innerContainer { border-bottom: none; }
  .flatpickr-calendar .flatpickr-rContainer { padding: 0 0.5rem 0.5rem; }

  .flatpickr-calendar.hasTime .flatpickr-time { background: transparent; border-top: 1px solid rgba(255,255,255,0.08); max-height: 44px; }
  .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { border-top: none; }
  .flatpickr-calendar.hasTime .flatpickr-time input,
  .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm { color: var(--text); background: transparent; font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 500; }
  .flatpickr-calendar.hasTime .flatpickr-time input:hover,
  .flatpickr-calendar.hasTime .flatpickr-time input:focus,
  .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm:hover { background: rgba(255,255,255,0.06); }
  .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-time-separator { color: rgba(255,255,255,0.4); }
  .flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: rgba(255,255,255,0.5); }
  .flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: rgba(255,255,255,0.5); }
  .flatpickr-input.input-clean { cursor: pointer; }
}

/* ═══════════════════════════════
   Scrollbar & Selection (outside layers — pseudo-elements)
   ═══════════════════════════════ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

::selection {
  background: rgba(6,182,212,0.3);
  color: white;
}

/* ═══════════════════════════════
   Responsive
   ═══════════════════════════════ */

@media (max-width: 768px) { .template-grid { grid-template-columns: 1fr; } }