@layer base {
  :root {
    --bg:#f7f4ee; --surface:#fff; --surface-2:#fbf9f4; --surface-3:#f0ece3;
    --text:#1c1917; --text-2:#57534e; --muted:#a8a29e;
    --border:#e8e2d5; --border-strong:#d6cfbd;
    --accent:#c2410c; --accent-hover:#9a3412; --accent-soft:#ffedd5;
    --success:#15803d; --focus-ring:0 0 0 3px rgba(194,65,12,.12);
    --zone-am:#55739f; --zone-an:#b07d33; --zone-ae:#9c5656; --zone-be:#7c60a4;
    --zone-bm:#3f817b; --zone-cm:#4d7d96; --zone-off:#d2c8b2; --zone-off-text:#443f39;
    --zone-tr:#9c9587; --zone-tr-text:#fff; --zone-aocc-m:#bda44e; --zone-aocc-m-text:#1c1917;
    --zone-aocc-e:#85624a; --zone-al:#758d47;
  }
  .dark {
    --bg:#14110d; --surface:#1e1a14; --surface-2:#262119; --surface-3:#2e2a22;
    --text:#f5f1e8; --text-2:#d1ccc0; --muted:#8b8578;
    --border:#2e2a22; --border-strong:#47402f;
    --accent:#f97316; --accent-hover:#fb923c; --accent-soft:rgba(249,115,22,.14);
    --success:#4ade80; --focus-ring:0 0 0 3px rgba(249,115,22,.25);
    --zone-am:#6a8cc0; --zone-an:#c9a058; --zone-ae:#bd7a7a; --zone-be:#a487cc;
    --zone-bm:#5daba2; --zone-cm:#70a4b9; --zone-off:#443e31; --zone-off-text:#e3ddd0;
    --zone-tr:#7a7368; --zone-tr-text:#f5f1e8; --zone-aocc-m:#cfba6c; --zone-aocc-m-text:#14110d;
    --zone-aocc-e:#a37a5c; --zone-al:#96ae62;
  }
  * { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
  ::-webkit-scrollbar { width:8px; height:8px; }
  ::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:4px; }
  ::-webkit-scrollbar-thumb:hover { background:var(--muted); }
  html { scroll-behavior:smooth; }
  body { 
    background-color: var(--bg); 
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; 
    color: var(--text); 
    -webkit-font-smoothing: antialiased; 
    transition: background-color 0.2s, color 0.2s; 
  }
}

@layer components {
  .zone-am { background-color: var(--zone-am); color: white; }
  .zone-an { background-color: var(--zone-an); color: white; }
  .zone-ae { background-color: var(--zone-ae); color: white; }
  .zone-be { background-color: var(--zone-be); color: white; }
  .zone-bm { background-color: var(--zone-bm); color: white; }
  .zone-cm { background-color: var(--zone-cm); color: white; }
  .off { background-color: var(--zone-off); color: var(--zone-off-text); }
  .tr { background-color: var(--zone-tr); color: var(--zone-tr-text); }
  .aocc-m { background-color: var(--zone-aocc-m); color: var(--zone-aocc-m-text); }
  .aocc-e { background-color: var(--zone-aocc-e); color: white; }
  .al { background-color: var(--zone-al); color: white; }

  .shift-mini { 
    display: inline-block; 
    height: 9px; 
    width: 9px; 
    border-radius: 2px; 
    transition: transform 0.15s; 
  }
  .shift-mini:hover { transform: scale(1.35); }
  @media (max-width: 768px) {
    .shift-mini { height: 8px; width: 8px; }
  }

  .shift-badge { 
    display: inline-block; 
    border-radius: 3px; 
    padding: 3px 10px; 
    font-size: 0.68rem; 
    font-weight: bold; 
    letter-spacing: 0.02em; 
  }
  .cell-shift { 
    display: inline-block; 
    min-width: 54px; 
    border-radius: 3px; 
    padding: 3px 8px; 
    text-align: center; 
    font-size: 0.68rem; 
    font-weight: bold; 
    letter-spacing: 0.02em; 
  }

  .tab-btn { 
    position: relative; 
    display: flex; 
    flex: 1; 
    cursor: pointer; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    border-right: 1px solid var(--border); 
    padding: 13px 12px; 
    font-size: 0.85rem; 
    font-weight: 600; 
    color: var(--text-2); 
    transition: all 0.15s; 
  }
  .tab-btn:last-child { border-right: 0; }
  .tab-btn:hover { background-color: var(--surface-2); color: var(--text); }
  .tab-btn.active { background-color: var(--accent); color: white; }
  .tab-btn > span { font-size: 0.95rem; opacity: 0.6; }
  .tab-btn.active > span { opacity: 1; }
  @media (max-width: 768px) {
    .tab-btn { min-height: 42px; padding: 10px 6px; font-size: 0.78rem; }
  }

  .nav-btn { 
    display: flex; 
    height: 32px; 
    width: 32px; 
    cursor: pointer; 
    align-items: center; 
    justify-content: center; 
    border-radius: 6px; 
    border: 1px solid var(--border-strong); 
    background: transparent; 
    font-size: 0.85rem; 
    font-weight: 600; 
    color: var(--text-2); 
    transition: all 0.15s; 
  }
  .nav-btn:hover { border-color: var(--accent); background-color: var(--accent); color: white; }

  .sort-btn { 
    cursor: pointer; 
    white-space: nowrap; 
    border-radius: 4px; 
    border: 1px solid var(--border-strong); 
    background: var(--surface); 
    padding: 7px 14px; 
    font-size: 0.75rem; 
    font-weight: 600; 
    color: var(--text-2); 
    transition: all 0.15s; 
  }
  .sort-btn:hover { border-color: var(--accent); color: var(--accent); }
  .sort-btn.active { border-color: var(--accent); background-color: var(--accent); color: white; }

  .field { 
    border-radius: 6px; 
    border: 1px solid var(--border-strong); 
    background: var(--surface); 
    padding: 8px 12px; 
    font-size: 0.82rem; 
    color: var(--text); 
    outline: none; 
    transition: all 0.15s; 
  }
  .field::placeholder { color: var(--muted); }
  .field:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }

  .day-cell { 
    position: relative; 
    min-height: 112px; 
    cursor: pointer; 
    border-bottom: 1px solid var(--border); 
    border-right: 1px solid var(--border); 
    background: var(--surface); 
    padding: 10px; 
    transition: background-color 0.15s; 
  }
  .day-cell:hover { background-color: var(--surface-2); }
  .day-cell.empty { pointer-events: none; cursor: default; background-color: var(--surface-2); }
  .day-cell.dimmed { pointer-events: none; background-color: var(--surface-2); opacity: 0.35; }
  .day-cell.selected { background-color: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
  .day-cell.today .day-num { font-weight: bold; color: var(--accent); }
  .day-cell.today::before { 
    position: absolute; 
    right: 8px; 
    top: 8px; 
    height: 6px; 
    width: 6px; 
    border-radius: 50%; 
    background-color: var(--accent); 
    content: ""; 
  }
  .day-num { 
    margin-bottom: 8px; 
    font-family: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif; 
    font-size: 1.05rem; 
    font-weight: bold; 
    color: var(--text); 
  }
  @media (max-width: 768px) {
    .day-cell { min-height: 80px; padding: 6px; }
    .day-num { margin-bottom: 5px; font-size: 0.9rem; }
  }

  .shift-checkbox { 
    display: flex; 
    cursor: pointer; 
    align-items: center; 
    gap: 6px; 
    border-radius: 9999px; 
    border: 1px solid var(--border-strong); 
    background: var(--surface); 
    padding: 5px 10px; 
    font-size: 0.76rem; 
    font-weight: 500; 
    color: var(--text-2); 
    transition: all 0.15s; 
  }
  .shift-checkbox:hover { border-color: var(--accent); color: var(--accent); }
  .shift-checkbox:has(input:checked) { border-color: var(--accent); background-color: var(--accent-soft); font-weight: 600; color: var(--accent); }
  .shift-checkbox input { margin: 0; cursor: pointer; accent-color: var(--accent); }

  .roster-table { 
    width: 100%; 
    border-separate; 
    border-spacing: 0; 
    font-size: 0.8rem; 
  }
  .roster-table th, .roster-table td { 
    min-width: 56px; 
    white-space: nowrap; 
    border-bottom: 1px solid var(--border); 
    border-right: 1px solid var(--border); 
    padding: 9px 6px; 
    text-align: center; 
    font-size: 0.74rem; 
    transition: background-color 0.15s; 
  }
  .roster-table th:last-child, .roster-table td:last-child { border-right: 0; }
  .roster-table th { 
    position: sticky; 
    top: 0; 
    z-index: 2; 
    background-color: var(--surface-3); 
    font-size: 0.66rem; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 0.08em; 
    color: var(--text-2); 
  }
  .roster-table th:first-child, .roster-table td:first-child { 
    position: sticky; 
    left: 0; 
    z-index: 3; 
    min-width: 155px; 
    background-color: var(--surface-3); 
    padding-left: 16px; 
    text-align: left; 
    font-weight: 600; 
  }
  .roster-table td:first-child { 
    background-color: var(--surface); 
    font-size: 0.8rem; 
    font-weight: 500; 
    color: var(--text); 
  }
  .roster-table tbody tr:hover td { background-color: var(--surface-2); }
  @media (max-width: 768px) {
    .roster-table th:first-child, .roster-table td:first-child { min-width: 120px; }
  }
}