:root{
      --bg:#fafbfc;
      --panel:#f5f6f7;
      --panel-elevated:#ffffff;
      --muted:#8b95a5;
      /* Light theme: switch UI accent to #C1563F */
      --accent:#C1563F;
      --accent-hover:#A64F3B;
      --confirmed:#10b981; /* nice green for confirmed states in light mode */
      --card-border:#e5e7eb;
      --text-primary:#111827;
      --text-secondary:#6b7280;

      --slot-height:24px;
      --time-col:70px;
      --staff-col-width:55px;
      --slot-bg-empty:#f9fafb;
      --slot-radius:0px;
      --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --tab-track-padding:5px;
      --grid-gap:0px;
      --grid-border-color:#000000;

      --warning-critical:#fef2f2;
      --warning-end-day:#fff7ed;
      
      --shadow-subtle:0 1px 2px 0 rgba(0, 0, 0, 0.03);
      --shadow-soft:0 1px 3px 0 rgba(0, 0, 0, 0.05);
      --shadow-medium:0 2px 4px 0 rgba(0, 0, 0, 0.06);
    }

    /* Muted Theme - Warm pastels with reduced blue light (orange accents) */
    body.muted-theme{
      --bg:#f4f1ec;
      --panel:#f9f6f1;
      --panel-elevated:#fefbf3;
      --accent:#d97706;       /* orange accent for muted */
      --accent-hover:#b45309; /* darker orange */
      --confirmed:#d97706;    /* use accent color for confirmed in muted theme */
      --muted:#a89580;
      --card-bg:#fefbf3;
      --card-border:#e6dfd5;
      --text-primary:#574838;
      --text-secondary:#8a7968;
      --slot-bg-empty:#f7f3ed;
      --warning-critical:#fef5ed;
      --warning-end-day:#fef8f0;
    }
    
    /* Pastel shift colors for muted theme - more intense */
    body.muted-theme .pill-selected.filled[data-shift-id="reception"]{
      background:#f77c7c !important; /* Medium coral pink */
      --fill-color:#f77c7c;
    }
    body.muted-theme .pill-selected.filled[data-shift-id="dispensary1"]{
      background:#f36464 !important; /* Medium deeper pink */
      --fill-color:#f36464;
    }
    body.muted-theme .pill-selected.filled[data-shift-id="dispensary2"]{
      background:#f36464 !important; /* Same as D1 */
      --fill-color:#f36464;
    }
    body.muted-theme .pill-selected.filled[data-shift-id="admin"]{
      background:#f9c574 !important; /* Medium peach */
      --fill-color:#f9c574;
    }
    /* Muted: differentiate upstairs shades */
    /* Increase contrast: lightest lighter, darkest darker */
    body.muted-theme .pill-selected.filled[data-shift-id="cpd"]{ background:#92d392 !important; --fill-color:#92d392; }
    body.muted-theme .pill-selected.filled[data-shift-id="meeting"]{ background:#82c882 !important; --fill-color:#82c882; }
    body.muted-theme .pill-selected.filled[data-shift-id="away"]{ background:#6ab08f !important; --fill-color:#6ab08f; }
    body.muted-theme .pill-selected.filled[data-shift-id="marketing"]{ background:#4e9a92 !important; --fill-color:#4e9a92; }
    body.muted-theme .pill-selected.filled[data-shift-id="annual"],
    body.muted-theme .pill-selected.filled[data-shift-id="absent"]{
      background:#92c0e8 !important; /* Medium blue */
      --fill-color:#92c0e8;
    }
    body.muted-theme .pill-selected.filled[data-shift-id="lunch"]{
      background:#d6d3d1 !important; /* Darker warm taupe */
      --fill-color:#d6d3d1;
    }
    body.muted-theme .pill-selected.filled[data-shift-id="blank"]{
      background:#f77c7c !important; /* Same as reception */
      --fill-color:#f77c7c;
    }
    body.muted-theme .pill-selected.filled[data-shift-id="other"]{
      background:#fde047 !important; /* Medium yellow */
      --fill-color:#fde047;
    }

    /* Muted theme: Orange week selector buttons - flat style */
    body.muted-theme .week-selector button{
      background:var(--accent);
      color:#fff;
      border:none;
      box-shadow:none;
      transform:none;
    }
    body.muted-theme .week-selector button:hover{
      background:var(--accent-hover);
      color:#fff;
      border:none;
      box-shadow:none;
    }
    body.muted-theme .week-selector button:active{
      background:#92400e; /* pressed state */
      box-shadow:none;
      border:none;
      transform:none;
    }

    /* Muted theme: Orange active day indicator */
    body.muted-theme .active-indicator{
      background:var(--accent);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.15);
    }

    /* Muted theme: White text for selected day tab only */
    body.muted-theme .tab[aria-selected="true"]{
      color:#fff;
    }

    /* Dark Theme */
    body.dark-theme{
      --bg:#0f172a;
      --panel:#111827;
      --panel-elevated:#1f2937;
      --accent:#0f766e;        /* deep turquoise accent */
      --accent-hover:#115e59;  /* deeper turquoise */
      --confirmed:#0f766e;     /* use accent color for confirmed in dark theme */
      --muted:#94a3b8;
      --card-border:#334155;
      --text-primary:#e5e7eb;
      --text-secondary:#9ca3af;
      --slot-bg-empty:#0b1220;
      --warning-critical:#291215; /* subtle dark red */
      --warning-end-day:#1d1308;  /* subtle dark orange */
      --grid-border-color:#000000; /* match light mode black borders */
    }
    body.dark-theme .active-indicator{ background: var(--accent); }
    /* Dark theme: match other buttons (use accent) */
    body.dark-theme .week-selector button{ background: var(--accent); color:#ffffff; border:none; }
    body.dark-theme .week-selector button:hover{ background: var(--accent-hover); color:#ffffff; }
    body.dark-theme .week-selector button:active{ background:#0b4f4b; }

    /* Centered modal for export options */
    .modal-overlay{
      position:fixed; inset:0; display:none; align-items:center; justify-content:center;
      background: rgba(0,0,0,0.35);
      z-index: 20000; /* ensure above all panels/popups */
    }
    .modal{
      background: var(--panel-elevated);
      border:1px solid var(--card-border);
      border-radius:12px;
      box-shadow: var(--shadow-medium);
      width: min(520px, 90vw);
      padding:20px;
      color: var(--text-primary);
    }
    .modal h3{ margin:0 0 12px 0; font-size:16px; font-weight:700; }
    .modal .modal-actions{ display:flex; flex-direction:column; gap:8px; }
    .modal .menu-item{
      padding:12px 14px; border:1px solid var(--card-border); border-radius:8px; background: var(--panel);
      cursor:pointer; text-align:left; color: var(--text-primary); font-weight:600; font-size:14px;
    }
    .modal .menu-item:hover{ background: var(--panel-elevated); border-color: var(--accent); }
    .modal .close-row{ display:flex; justify-content:flex-end; margin-top:12px; }
    .modal .close-btn{ background: var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; font-weight:600; }

    /* Dark theme: darker shift colors appropriate for dark backgrounds */
    body.dark-theme .pill-selected.filled[data-shift-id="reception"]{ background:#7f1d1d !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="dispensary1"]{ background:#6b1515 !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="dispensary2"]{ background:#6b1515 !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="admin"]{ background:#b45309 !important; }
    /* Increase contrast within upstairs family */
    body.dark-theme .pill-selected.filled[data-shift-id="cpd"]{ background:#047857 !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="meeting"]{ background:#15803d !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="away"]{ background:#0f766e !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="marketing"]{ background:#0e7490 !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="annual"]{ background:#1d4ed8 !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="absent"]{ background:#1e40af !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="lunch"]{ background:#334155 !important; color:#cbd5e1 !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="blank"]{ background:#7f1d1d !important; }
    body.dark-theme .pill-selected.filled[data-shift-id="other"]{ background:#a16207 !important; }

    /* Dark theme: template slot colors */
    body.dark-theme .template-slot.filled[data-shift-id="reception"] { background:#7f1d1d !important; }
    body.dark-theme .template-slot.filled[data-shift-id="dispensary1"] { background:#6b1515 !important; }
    body.dark-theme .template-slot.filled[data-shift-id="dispensary2"] { background:#6b1515 !important; }
    body.dark-theme .template-slot.filled[data-shift-id="admin"] { background:#b45309 !important; }
    body.dark-theme .template-slot.filled[data-shift-id="cpd"] { background:#047857 !important; }
    body.dark-theme .template-slot.filled[data-shift-id="meeting"] { background:#15803d !important; }
    body.dark-theme .template-slot.filled[data-shift-id="away"] { background:#0f766e !important; }
    body.dark-theme .template-slot.filled[data-shift-id="marketing"] { background:#0e7490 !important; }
    body.dark-theme .template-slot.filled[data-shift-id="annual"] { background:#1d4ed8 !important; }
    body.dark-theme .template-slot.filled[data-shift-id="absent"] { background:#1e40af !important; }
    body.dark-theme .template-slot.filled[data-shift-id="lunch"] { background:#334155 !important; color:#cbd5e1 !important; }
    body.dark-theme .template-slot.filled[data-shift-id="blank"] { background:#7f1d1d !important; }
    body.dark-theme .template-slot.filled[data-shift-id="other"] { background:#a16207 !important; }

    /* Light theme: default template slot colors */
    .template-slot.filled[data-shift-id="reception"] { background:#dc2626; }
    .template-slot.filled[data-shift-id="dispensary1"] { background:#b91c1c; }
    .template-slot.filled[data-shift-id="dispensary2"] { background:#b91c1c; }
    .template-slot.filled[data-shift-id="admin"] { background:#f97316; }
    .template-slot.filled[data-shift-id="cpd"] { background:#059669; }
    .template-slot.filled[data-shift-id="meeting"] { background:#16a34a; }
    .template-slot.filled[data-shift-id="away"] { background:#0d9488; }
    .template-slot.filled[data-shift-id="marketing"] { background:#0891b2; }
    .template-slot.filled[data-shift-id="annual"] { background:#3b82f6; }
    .template-slot.filled[data-shift-id="absent"] { background:#2563eb; }
    .template-slot.filled[data-shift-id="lunch"] { background:#f3f4f6; color:#1f2937; font-weight:800; }
    .template-slot.filled[data-shift-id="blank"] { background:#dc2626; }
    .template-slot.filled[data-shift-id="other"] { background:#eab308; }

    /* Dark theme: dashed outlines — turquoise for imbalance, blue for double-booked */
    body.dark-theme .time-cell.warning-advisory::after,
    body.dark-theme .legend-time-cell.warning-advisory::after { border-color:#0f766e; }
    body.dark-theme .time-cell.dispensary-overcap::after,
    body.dark-theme .legend-time-cell.dispensary-overcap::after { border-color:#3b82f6; }

    html,body{
      height:100%;
      margin:0;
      background:var(--bg);
      font-family:var(--font-sans);
      color:var(--text-primary);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      font-size:14px;
    }

    /* Universal sleek scrollbar styles */
    *{
      scrollbar-width:thin;
      scrollbar-color:var(--card-border) transparent;
    }

    *::-webkit-scrollbar{
      width:6px;
      height:6px;
    }

    *::-webkit-scrollbar-track{
      background:transparent;
    }

    *::-webkit-scrollbar-thumb{
      background:var(--card-border);
      border-radius:3px;
    }

    *::-webkit-scrollbar-thumb:hover{
      background:var(--muted);
    }

    *::-webkit-scrollbar-corner{
      background:transparent;
    }

    .app-container{
      display:flex;
      height:100vh;
      overflow:hidden;
      position:relative;
    }


.left-sidebar{
  width:180px;
  margin:20px 0 20px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  height:calc(100vh - 40px);
  padding-bottom:16px; /* allow room to fully show rounded card corners when scrolled */
  /* Hide scrollbar while preserving scroll functionality */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
}
.left-sidebar::-webkit-scrollbar{ width:0; height:0; } /* Chrome/Safari */

    .controls-panel{
      background:var(--panel-elevated);
      border-radius:12px;
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:10px;
      box-shadow:var(--shadow-soft);
      border:1px solid var(--card-border);
    }
    /* Make the Key panel scroll within itself, preserving rounded corners */
    .controls-panel.key-panel{
      max-height: calc(100vh - 220px);
      overflow:auto;
      background-clip: padding-box; /* keep borders clean while scrolling */
    }
    /* Main controls panel uses default sizing (no internal scrolling) */

    /* Collapsible Side Panels */
    .side-panel{
      position:fixed;
      top:0;
      bottom:0;
      width:350px;
      background:var(--panel-elevated);
      box-shadow:var(--shadow-soft);
      transition:transform 0.3s ease;
      z-index:1000;
      display:flex;
      flex-direction:column;
    }
    .side-panel.right-panel{
      right:0;
      transform:translateX(100%);
      border-left:1px solid var(--card-border);
    }
    .side-panel.right-panel.open{
      transform:translateX(0);
    }
    .side-panel.left-panel{
      left:0;
      transform:translateX(-100%);
      border-right:1px solid var(--card-border);
    }
    .side-panel.left-panel.open{
      transform:translateX(0);
    }
    .panel-tab{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:32px;
      height:120px;
      background:#7DA0B6; /* match control buttons across themes */
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      color:white;
      box-shadow:var(--shadow-soft);
      z-index:999;
      writing-mode:vertical-rl;
      text-orientation:mixed;
      font-size:13px;
      font-weight:600;
      letter-spacing:1px;
    }
    /* Muted/Dark: panel tabs follow theme accent */
    body.muted-theme .panel-tab{ background:var(--accent); }
    body.dark-theme .panel-tab{ background:var(--accent); }
    .right-panel .panel-tab{
      left:-32px;
      border-radius:8px 0 0 8px;
    }
    .left-panel .panel-tab{
      right:-32px;
      border-radius:0 8px 8px 0;
    }

    /* Position right panel tabs vertically with larger spacing */
    /* Higher z-index for top tabs so they stay visible */
    #templatesPanel .panel-tab{ top:calc(50% - 240px); z-index:1003; }
    #staffSettingsPanel .panel-tab{ top:calc(50% - 80px); z-index:1002; }
    #keyDatesPanel .panel-tab{ top:calc(50% + 80px); z-index:1001; }
    #notesPanel .panel-tab{ top:calc(50% + 240px); z-index:1000; }
    /* Position left panel tab (controls) */
    #controlsPanel .panel-tab{ top:50%; transform:translateY(-50%); z-index:1000; }

    /* Key Dates tab glow when current week has key dates */
    #keyDatesPanel .panel-tab.key-dates-glow{
      box-shadow:
        0 0 0 2px rgba(16,185,129,0.35),
        0 0 16px rgba(16,185,129,0.55),
        0 6px 18px rgba(16,185,129,0.25);
      filter: drop-shadow(0 3px 8px rgba(16,185,129,0.3));
    }

    
    /* Muted theme: slightly softer, more diffuse */
    body.muted-theme #keyDatesPanel .panel-tab.key-dates-glow{
      box-shadow:
        0 0 0 2px rgba(34,197,94,0.28),
        0 0 20px rgba(34,197,94,0.45),
        0 8px 20px rgba(34,197,94,0.22);
      filter: drop-shadow(0 3px 8px rgba(34,197,94,0.25));
    }
    /* Dark theme: stronger inner + outer glow for contrast */
    body.dark-theme #keyDatesPanel .panel-tab.key-dates-glow{
      box-shadow:
        inset 0 0 8px rgba(74,222,128,0.4),
        0 0 0 2px rgba(74,222,128,0.45),
        0 0 24px rgba(74,222,128,0.7),
        0 10px 28px rgba(74,222,128,0.25);
      filter: drop-shadow(0 4px 10px rgba(74,222,128,0.35));
    }
    /* Make controls panel narrower to match sidebar */
    #controlsPanel{ width:180px; }

    .panel-header{
      padding:20px;
      border-bottom:1px solid var(--card-border);
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .panel-header h3{
      margin:0;
      font-size:16px;
      font-weight:600;
      color:var(--text-primary);
    }
    /* Titles use Verdana */
    .panel-header h3,
    .left-sidebar .sidebar-title,
    .coverage-overlay-header h3,
    .templates-footer .save-current-btn,
    .sidebar-title,
    h1, h2, h3 {
      font-family: Verdana, Geneva, sans-serif !important;
      letter-spacing: 0.2px;
    }
    .panel-content{
      flex:1;
      overflow-y:auto;
      padding:20px;
    }    .left-sidebar .sidebar-title{
      font-size:14px;
      font-weight:600;
      color:var(--text-primary);
      margin-bottom:8px;
      text-align:center;
    }

    .wrap{
      flex:1;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    
.header-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  padding:12px 16px;
  margin:20px 20px 0 20px;
  background:var(--panel-elevated);
  border:1px solid var(--card-border);
  border-radius:0;
  box-shadow:none;
  min-height:64px;
  box-sizing:border-box;
}
@media (max-width: 1200px){
  .header-row{
    grid-template-columns:1fr;
    row-gap:10px;
    min-height:auto;
    padding:16px;
  }
  .date-center{
    order:1;
    justify-self:center;
    transform:none !important;
  }
  .week-selector{ order:2; justify-self:center; }
  .tabs-track{ order:3; justify-self:center; }
}
    .controls-top{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .muted{
      color:var(--muted);
      font-size:13px;
    }

    .layout{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:20px;
      padding:20px 20px 20px 20px;
      overflow:auto;
      margin-bottom:0;
    }
    
    /* Saturday Manager two-panel layout (compact, sits over background) */
    .saturday-manager{
      display:grid;
      grid-template-columns:auto auto;
      gap:12px;
      height:auto;
      width:fit-content;
      align-items:center; /* vertically center panels relative to each other */
      justify-content:center;
    }
    #saturdayManager{
      flex:0 0 auto;
      margin:80px auto 40px auto; /* slightly higher than before */
      display:none;
      width:auto;
      max-width:fit-content;
      /* center the two columns within the card */
      display:flex;
      align-items:center;
      justify-content:center;
      align-self:center;
      position:relative;
      overflow:visible !important;
    }

    .saturday-nav-btn{
      width:36px;
      min-width:36px;
      height:200px;
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      background:#7DA0B6;
      border:1px solid transparent;
      border-radius:6px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      color:#ffffff;
      font-size:20px;
      font-weight:500;
      user-select:none;
      flex-shrink:0;
      margin:0;
      z-index:10;
    }

    .saturday-nav-btn.prev{
      left:-50px;
    }

    .saturday-nav-btn.next{
      right:-50px;
    }

    .saturday-nav-btn:active{
      opacity:0.8;
    }

    body.muted-theme .saturday-nav-btn{
      background:#d97706;
      color:#ffffff;
    }

    body.muted-theme .saturday-nav-btn:active{
      opacity:0.8;
    }

    body.dark-theme .saturday-nav-btn{
      background:#0f766e;
      color:#ffffff;
    }

    body.dark-theme .saturday-nav-btn:active{
      opacity:0.8;
    }
    .saturday-list{
      background:var(--panel-elevated);
      border:1px solid var(--card-border);
      border-radius:12px;
      padding:12px;
      box-shadow:var(--shadow-soft);
      overflow:auto;
      min-height:480px; /* make left list panel taller */
      width:220px;
      display:flex;
      align-items:stretch; /* allow inner to fill and scroll */
      justify-content:flex-start; /* start at top so scrolling feels natural */
      text-align:center;
      max-height:60vh; /* do not exceed original panel height; scroll within */
      -webkit-overflow-scrolling: touch;
    }
    /* Saturday list content container */
    .saturday-list-inner{ width:100%; display:flex; flex-direction:column; gap:6px; }
    .saturday-item{
      padding:10px 12px;
      border:1px solid var(--card-border);
      border-radius:8px;
      background:var(--panel);
      color:var(--text-primary);
      font-weight:600;
      cursor:pointer;
      text-align:center;
      transition:background 0.15s ease, border-color 0.15s ease;
      user-select:none;
      position:relative;
    }
    .saturday-item:hover{ background:var(--panel-elevated); }
    .saturday-item.active{ 
      border-color:var(--accent); 
      box-shadow:0 0 0 2px rgba(193,86,63,0.15);
      background:rgba(193,86,63,0.10);
    }
    /* Light theme only: use subtle light blue for hover/active */
    body:not(.muted-theme):not(.dark-theme) .saturday-item:hover{
      background: rgba(125,160,182,0.08); /* soft light blue */
    }
    body:not(.muted-theme):not(.dark-theme) .saturday-item.active{
      border-color:#7DA0B6;
      box-shadow:0 0 0 2px rgba(125,160,182,0.25);
      background: rgba(125,160,182,0.12);
    }
    .saturday-item .sat-dot{
      position:absolute;
      right:8px;
      top:50%;
      transform:translateY(-50%);
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 1px rgba(0,0,0,0.08);
      display:none;
    }
    .saturday-item.has-data .sat-dot{ display:inline-block; }
    /* Light theme: match control panel button color */
    body:not(.muted-theme):not(.dark-theme) .saturday-item .sat-dot{ background:#7DA0B6; }
    .mismatch-indicator{ color:var(--accent); font-size:14px; vertical-align:middle; margin-left:6px; }
    .saturday-list{ scroll-behavior:smooth; }
    .saturday-detail{
      background:var(--panel-elevated);
      border:1px solid var(--card-border);
      border-radius:12px;
      padding:16px;
      box-shadow:var(--shadow-soft);
      overflow:auto;
      min-height:320px;
      width:max-content;
      text-align:center;
    }
    .saturday-detail h3{
      margin:0 0 12px 0;
      font-size:16px;
      font-weight:600;
      color:var(--text-primary);
      text-align:center;
    }
    .saturday-detail h4{
      margin:12px 0 8px 0;
      font-size:13px;
      font-weight:600;
      color:var(--text-secondary);
      text-align:center;
    }
    .saturday-detail input[type="text"]{
      width:220px;
      padding:8px 10px;
      margin:0 auto 8px auto;
      border:1px solid var(--card-border);
      border-radius:8px;
      background:var(--panel);
      color:var(--text-primary);
      outline:none;
      display:block;
      text-align:center;
    }
    .saturday-detail input[type="text"]::placeholder{ color:var(--text-secondary); }
    .scheduled-staff, .actual-staff{ display:flex; flex-direction:column; }
    .card{
      background:var(--panel-elevated);
      border-radius:0;
      padding:32px;
      border:1px solid var(--card-border);
      box-shadow:var(--shadow-soft);
      overflow:auto;
    }
    .left-card{
      padding:20px;
      flex:1;
      overflow:auto;
      display:flex;
      flex-direction:column;
    }

    .week-selector{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px;
      border-radius:12px;
      background:var(--panel);
      border:1px solid var(--card-border);
      color:var(--text-secondary);
      transition:border 0.2s ease;
    }
    .week-selector.week-confirmed{
      border: 2px solid var(--confirmed) !important;
    }
    .week-selector.week-open{
      border: 2px solid var(--muted) !important;
      opacity: 0.6;
    }
    .week-selector button{
      background:var(--accent);
      border:none;
      width:34px; height:34px;
      border-radius:8px;
      cursor:pointer;
      color:#fff;
      font-size:14px;
      font-weight:700;
      transition:all 0.15s ease;
      display:flex; align-items:center; justify-content:center;
    }
    .week-selector button:hover{ background:var(--accent-hover); color:#fff; }
    /* Light theme: week selector matches control button color */
    body:not(.muted-theme):not(.dark-theme) .week-selector button{
      background:#7DA0B6;
      color:#fff;
      border:1px solid #7DA0B6;
    }
    body:not(.muted-theme):not(.dark-theme) .week-selector button:hover{
      background:#6b8fa8;
      color:#fff;
      border-color:#6b8fa8;
    }
    .week-selector .range{
      padding:0 10px;
      background:transparent;
      border-radius:8px;
      font-size:18px; /* bigger week range */
      font-weight:800;
      color:var(--text-primary);
      letter-spacing:-0.2px;
      white-space:nowrap;
      min-width:180px;
      text-align:center;
    }

    .tabs-track{
      position:relative;
      display:block;
      background:var(--panel);
      border-radius:8px;
      padding:var(--tab-track-padding);
      box-sizing:border-box;
      overflow:hidden;
      border:1px solid var(--card-border);
      height:38px;
      display:flex;
      align-items:center;
    }
    .tabs{
      display:flex;
      gap:4px;
      width:100%;
      position:relative;
      z-index:2;
      height:100%;
    }
    .tab{
      flex:1 1 0;
      background:transparent;
      border:0;
      padding:0 6px;
      border-radius:6px;
      color:var(--muted);
      font-weight:600;
      font-size:13px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      text-align:center;
      min-width:48px;
      font-size:13px;
      transition:all 0.2s ease;
      position:relative;
    }
    .day-badge{
      position:absolute;
      top:4px;
      right:6px;
      min-width:16px;
      height:16px;
      padding:0 4px;
      border-radius:10px;
      background:var(--panel-elevated);
      color:var(--text-secondary);
      border:1px solid var(--card-border);
      font-size:10px;
      line-height:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
    }
    /* Inline day staff count next to month */
    .day-count-inline{
      font-size:11px;
      color:var(--muted);
      margin-left:6px;
    }
    .tab[aria-selected="true"]{
      color:var(--text-primary);
    }
    .active-indicator{
      position:absolute;
      top:calc(var(--tab-track-padding) + 2px);
      bottom:calc(var(--tab-track-padding) + 2px);
      left:var(--tab-indicator-left, 0px);
      width:var(--tab-indicator-width, 0px);
      background:white;
      border-radius:6px;
      transition:left 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1);
      z-index:1;
      pointer-events:none;
    }
    /* Subtle '+ Day' button in Staff Management */
    .quick-add-to-day-btn{
      background:transparent;
      border:1px solid var(--card-border);
      color:var(--muted);
      border-radius:6px;
      padding:4px 8px;
      cursor:pointer;
      font-weight:600;
      font-size:12px;
    }
    .quick-add-to-day-btn:hover{
      background:var(--panel);
      color:var(--text-primary);
      border-color:var(--card-border);
    }
    .tab .tab-label{ display:inline-block; padding:0 2px; }
    /* Light theme: day tab styling with button color */
    body:not(.muted-theme):not(.dark-theme) .active-indicator{ background:#7DA0B6; box-shadow:none; }
    body:not(.muted-theme):not(.dark-theme) .tabs-track{ border:1px solid #7DA0B6; }
    body:not(.muted-theme):not(.dark-theme) .tab[aria-selected="true"]{ color:#ffffff; }
    body:not(.muted-theme):not(.dark-theme) .tab[aria-selected="true"]:hover{ color:#ffffff; }
    body:not(.muted-theme):not(.dark-theme) .tab:hover{ color:#7DA0B6; }

    /* Light theme: enlarge time cell font for better readability */
    body:not(.muted-theme):not(.dark-theme) .time-cell{
      font-size:15px !important;
    }

    .date-center{
      display:inline-flex;
      gap:6px;
      justify-content:center;
      align-items:baseline;
      color:var(--text-primary);
      font-weight:700;
      font-size:14px;
      position:relative;
      /* Keep beneath side panels/tabs (z-index ~1000) but above grid */
      z-index:900;
      cursor:pointer;
      padding:4px 8px; /* slimmer overall width */
      background:var(--panel-elevated);
      border-radius:10px;
      transition:background 0.2s, border-radius 0.2s;
      letter-spacing:0.1px;
      white-space:nowrap; /* keep compact width */
      /* Prevent grid stretching; keep only as wide as content */
      justify-self:center;
      width:auto;
      max-width:max-content;
    }
    .date-center:hover{
      background:var(--panel);
    }
    .date-number{
      font-size:20px;
      line-height:1;
      font-weight:800;
    }
    .date-month{
      font-size:20px;
      line-height:1;
      font-weight:800;
    }
    
    .date-picker-popup{
      position:absolute;
      top:100%;
      left:50%;
      transform:translateX(-50%);
      margin-top:8px;
      background:var(--panel);
      border:1px solid var(--card-border);
      border-radius:10px;
      padding:16px;
      box-shadow:var(--shadow-lg);
      z-index:12050;
      display:none;
      min-width:280px;
    }
    .date-picker-popup.open{display:block;}
    
    .calendar-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:12px;
    }
    .calendar-header button{
      background:transparent;
      border:none;
      cursor:pointer;
      font-size:18px;
      padding:4px 8px;
      color:var(--text-secondary);
      border-radius:6px;
      transition:all 0.2s;
    }
    .calendar-header button:hover{
      background:#dce3ea;
      color:var(--text-primary);
    }
    .calendar-month-year{
      font-weight:600;
      font-size:14px;
      color:var(--text-primary);
    }
    .calendar-grid{
      display:grid;
      grid-template-columns:repeat(7, 1fr);
      gap:4px;
    }
    .calendar-day-header{
      text-align:center;
      font-size:11px;
      font-weight:600;
      color:var(--muted);
      padding:4px;
    }
    .calendar-day{
      text-align:center;
      padding:8px 4px;
      font-size:13px;
      border-radius:6px;
      cursor:pointer;
      transition:all 0.15s;
      color:var(--text-primary);
      position:relative;
    }
    .calendar-day:hover{
      background:#dce3ea;
    }
    .calendar-day.other-month{
      color:var(--muted);
      opacity:0.4;
    }
    .calendar-day.today{
      background:var(--accent);
      color:#fff;
      font-weight:600;
    }
    .calendar-day.selected{
      background:#dce3ea;
      font-weight:600;
    }
    .calendar-day.has-confirmed::after{
      content:'';
      position:absolute;
      bottom:-6px;
      left:50%;
      transform:translateX(-50%);
      width:6px;
      height:6px;
      border-radius:50%;
      background:var(--confirmed);
    }

    .rota-wrap{
      overflow-x:auto;
      overflow-y:auto;
      border-radius:0;
      height:100%;
      position:relative;
      display:flex;
      justify-content:safe center;
      align-items:flex-start;
      background:var(--panel-elevated);
      border:none;          /* no inner frame; outer card handles border */
      padding:32px;         /* wider grey area around rota grid */
      box-shadow:none;
      gap:12px;
    }

    .day-nav-btn{
      width:36px;
      min-width:36px;
      height:40%;
      position:sticky;
      top:30%;
      background:#7DA0B6;
      border:1px solid transparent;
      border-radius:6px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      color:#ffffff;
      font-size:20px;
      font-weight:500;
      user-select:none;
      flex-shrink:0;
      margin:0;
      transform-origin:center center;
    }

    .day-nav-btn:active{
      opacity:0.8;
    }

    .zoom-controls{
      position:absolute;
      top:24px;
      right:24px;
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:5.4px;
      background:var(--panel-elevated);
      border:1px solid var(--card-border);
      border-radius:7.2px;
      padding:7.2px;
      z-index:100;
      box-shadow:var(--shadow-soft);
      width:fit-content;
      transform:scale(0.9);
      transform-origin:top right;
    }

    /* Override when zoom controls are inside left controls panel */
    #controlsPanel .zoom-controls,
    .controls-panel .zoom-controls{
      position:static;
      top:auto; right:auto;
      transform:none;
      width:100%;
      background:transparent;
      border:none;
      padding:0;
      box-shadow:none;
    }
    #controlsPanel .zoom-row,
    .controls-panel .zoom-row{ justify-content:space-between; }
    #controlsPanel .zoom-btn,
    .controls-panel .zoom-btn{ width:32px; height:32px; }
    #controlsPanel .day-nav-controls,
    .controls-panel .day-nav-controls{ justify-content:space-between; }
    #controlsPanel .day-nav-small-btn,
    .controls-panel .day-nav-small-btn{ flex:0 0 48%; height:32px; }

    .zoom-controls.saturday-zoom{
      top:24px;
      right:24px;
    }

    .zoom-row{
      display:flex;
      align-items:center;
      gap:5.4px;
    }

    .day-nav-controls{
      display:flex;
      gap:5.4px;
    }

    .day-nav-small-btn{
      background:#7DA0B6;
      color:#fff;
      border:none;
      border-radius:5.4px;
      flex:1;
      height:25.2px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:14.4px;
      font-weight:600;
      transition:all 0.15s ease;
      user-select:none;
    }

    body.muted-theme .day-nav-small-btn{
      background:#d97706;
    }

    body.dark-theme .day-nav-small-btn{
      background:#0f766e;
    }

    .day-nav-small-btn:hover{
      opacity:0.85;
      transform:scale(1.05);
    }

    body.muted-theme .day-nav-small-btn:hover{
      background:#b45309;
      opacity:1;
    }

    body.dark-theme .day-nav-small-btn:hover{
      background:#115e59;
      opacity:1;
    }

    .day-nav-small-btn:active{
      transform:scale(0.95);
    }

    

    .zoom-btn{
      background:#7DA0B6 !important;
      color:#fff;
      border:none;
      border-radius:5.4px;
      width:25.2px;
      height:25.2px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:14.4px;
      font-weight:600;
      transition:all 0.15s ease;
      user-select:none;
    }

    body.muted-theme .zoom-btn{
      background:#d97706 !important;
    }

    body.dark-theme .zoom-btn{
      background:#0f766e !important;
    }

    .zoom-btn:hover{
      opacity:0.85;
      transform:scale(1.05);
    }

    body.muted-theme .zoom-btn:hover{
      background:#b45309 !important;
      opacity:1;
    }

    body.dark-theme .zoom-btn:hover{
      background:#115e59 !important;
      opacity:1;
    }

    .zoom-btn:active{
      transform:scale(0.95);
    }

    .zoom-level{
      font-size:10.8px;
      font-weight:600;
      color:var(--text-primary);
      min-width:37.8px;
      text-align:center;
    }

    body.muted-theme .day-nav-btn{
      background:#d97706;
      color:#ffffff;
    }

    body.muted-theme .day-nav-btn:active{
      opacity:0.8;
    }

    body.dark-theme .day-nav-btn{
      background:#0f766e;
      color:#ffffff;
    }

    body.dark-theme .day-nav-btn:active{
      opacity:0.8;
    }

    .rota-container{
      display:inline-block;
      position:relative;
      min-width:max-content;
      margin:0;
      padding:0 12px; /* widen space around rota grid */
    }
    
    .rota-grid{
      display:grid;
      row-gap:var(--grid-gap);
      column-gap:0;
      align-items:start;
      grid-auto-rows: var(--slot-height);
      position:relative;
      border:none;
      border-radius:10px;
      padding:18px;           /* 18px padding on all sides of the grid */
      background:transparent;
      box-shadow:none;
    }

    /* (cursor behaviour inside rota grid uses element defaults now) */

    body.muted-theme .rota-grid{}
    body.dark-theme .rota-grid{}

    /* Light mode and dark mode: make empty/blank cells completely transparent */
    body:not(.muted-theme) .pill-selected:not(.filled){
      background:transparent !important;
      border:none !important;
      box-shadow:none !important;
    }

    /* Shift type text size across all themes */
    .pill-selected .abbr{
      font-size:19px !important;
      font-weight:700 !important;
    }

    .time-cell{
      font-size:13px !important;
      font-weight:700 !important;
    }

    .head-cell{
      font-size:17px !important;
      font-weight:700 !important;
    }

    .time-highlight-bar{
      position:absolute;
      left:30px;
      right:30px;
      height:var(--slot-height); /* taller bar matching row height */
      background:rgba(11, 118, 255, 0.06); /* More transparent */
      border-top:1px solid rgba(11, 118, 255, 0.2);
      border-bottom:1px solid rgba(11, 118, 255, 0.2);
      pointer-events:none;
      z-index:100;
      display:none;
      transition:opacity 0.2s ease;
    }

    /* Shift type filtering */
    .shift-filter-active .pill-selected.filled:not(.filter-highlight) {
      opacity:0.25;
      filter:grayscale(80%) brightness(0.8);
      transition:opacity 0.3s ease, filter 0.3s ease;
      pointer-events:none;
      cursor:default;
    }

    .shift-filter-active .pill-selected.filter-highlight {
      opacity:1;
      filter:none;
      transition:opacity 0.3s ease, filter 0.3s ease;
      z-index:60 !important;
      position:relative;
      pointer-events:auto;
      cursor:pointer;
    }
    
    /* Ensure highlighted slots appear above everything */
    .shift-filter-active .slot:has(.filter-highlight) {
      z-index:60;
    }

    /* Apply muted theme to template panel shift colors */
    /* Template panel muted theme colors using data-shift-id */
    body.muted-theme .template-slot.filled[data-shift-id="reception"] {
      background:#f77c7c !important;
    }
    body.muted-theme .template-slot.filled[data-shift-id="dispensary1"] {
      background:#f36464 !important;
    }
    body.muted-theme .template-slot.filled[data-shift-id="dispensary2"] {
      background:#f36464 !important;
    }
    body.muted-theme .template-slot.filled[data-shift-id="admin"] {
      background:#f9c574 !important;
    }
    body.muted-theme .template-slot.filled[data-shift-id="cpd"] { background:#92d392 !important; }
    body.muted-theme .template-slot.filled[data-shift-id="meeting"] { background:#82c882 !important; }
    body.muted-theme .template-slot.filled[data-shift-id="away"] { background:#6ab08f !important; }
    body.muted-theme .template-slot.filled[data-shift-id="marketing"] { background:#4e9a92 !important; }
    body.muted-theme .template-slot.filled[data-shift-id="annual"],
    body.muted-theme .template-slot.filled[data-shift-id="absent"] {
      background:#92c0e8 !important;
    }
    body.muted-theme .template-slot.filled[data-shift-id="lunch"] {
      background:#d6d3d1 !important;
      color:#1f2937 !important;
      font-weight:800 !important;
    }
    body.muted-theme .template-slot.filled[data-shift-id="blank"] {
      background:#f77c7c !important;
    }
    body.muted-theme .template-slot.filled[data-shift-id="other"] {
      background:#fde047 !important;
    }

    .shift-filter-active .pill-selected:not(.filled) {
      opacity:0.15;
      transition:opacity 0.3s ease;
      pointer-events:none;
      cursor:default;
    }

    /* Key date banner animation */
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    /* Key date indicator on tabs - removed visual indicator, only using tooltip */

    .head-cell{
      background:var(--panel-elevated);
      border-radius:0;
      padding:4px 6px;
      border-left:1px solid var(--grid-border-color);
      border-right:none;
      border-top:1px solid var(--grid-border-color);
      border-bottom:1px solid #000000;
      text-align:center;
      font-weight:600;
      display:flex;
      align-items:center;
      justify-content:center;
      position:-webkit-sticky;
      position:sticky;
      top:0;
      z-index:30;
      box-shadow:none;
      font-size:13px;
      height: var(--slot-height);
      color:var(--text-primary);
      transition:all 0.2s ease;
      box-sizing:border-box;
      position:relative;
    }

    /* Last header column (marked via JS) gets right border to close grid */
    .head-cell.last-column{
      border-right:1px solid var(--grid-border-color);
    }

    /* Hide borders on placeholder columns (empty columns with opacity 0.3) */
    .head-cell[style*="opacity: 0.3"]{
      border-left:transparent !important;
      border-right:transparent !important;
      border-top:transparent !important;
      border-bottom:transparent !important;
    }

    /* Hide borders on placeholder slot cells (empty slot cells with opacity 0.3) */
    .slot[style*="opacity: 0.3"]{
      border-left:transparent !important;
      border-right:transparent !important;
      border-top:transparent !important;
      border-bottom:transparent !important;
    }

    /* Add gap between time column and first shift column */
    .rota-grid > .head-cell:first-child{
      margin-right:var(--grid-gap);
    }
    .rota-grid > .time-cell{
      margin-right:var(--grid-gap);
    }
    .head-cell.is-stuck{
      background:var(--panel-elevated);
      box-shadow:none;
      top:0;
    }
    .head-cell.is-stuck:first-child{ opacity:1; }
    /* Ensure the first header (Time) retains flat borders */
    .head-cell.is-stuck:first-child{
      border-radius:0 !important;
      border-left:1px solid var(--grid-border-color) !important;
      border-right:1px solid var(--grid-border-color) !important;
      border-top:1px solid var(--grid-border-color) !important;
      border-bottom:1px solid #000000 !important;
      margin-left:0 !important;
    }
    /* Make the first (Time) header behave like a normal cell (not sticky) */
    .head-cell:first-child{
      position:static !important;
      top:auto !important;
      transition:all 0.2s ease !important;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      /* Ensure the day header shares the same right-hand border as time cells */
      border-right:1px solid var(--grid-border-color);
    }
    /* First initials header shares that border, so drop its left border to avoid doubling */
    .rota-grid > .head-cell:nth-child(2){
      border-left:none;
    }
    .head-delete{
      position:absolute !important;
    }
    /* Header hover: removed */

    /* Small day-status ring next to day label (red outline = open, green filled = confirmed) */
    .day-status-toggle{
      margin-left:6px;
      width:10px;
      height:10px;
      border-radius:999px;
      border:1.5px solid var(--muted);
      background:transparent;
      padding:0;
      cursor:pointer;
      opacity:0.6;
    }
    .day-status-toggle.confirmed{
      border-color:var(--confirmed);
      background:var(--confirmed);
      opacity:1;
    }
    .head-name{
      text-align:center;
      font-weight:600;
      font-size:19px !important;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      flex:1;
    }
    .head-delete{
      position:absolute;
      right:4px;
      top:50%;
      transform:translateY(-50%);
      background:transparent;
      border:0;
      cursor:pointer;
      color:var(--muted);
      font-size:14px;
      padding:2px 4px;
      border-radius:3px;
      opacity:0;
      transition:opacity 0.2s;
      line-height:1;
    }
    .head-cell:hover .head-delete{
      opacity:1;
    }
    .head-delete:hover{
      background:rgba(239, 68, 68, 0.1);
      color:#ef4444;
    }

    .time-cell{
      height:calc(var(--slot-height) + 1px);
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--panel-elevated);
      border-radius:0;
      border-left:1px solid #000000;
      border-right:1px solid #000000;
      border-top:1px solid #000000;
      border-bottom:none;
      font-weight:600;
      color:var(--text-primary);
      box-sizing:border-box;
      padding:0 4px;
      font-size:11px;
      box-shadow:none;
      margin-bottom:-1px;
      transform:translateZ(0);
      backface-visibility:hidden;
    }

    /* First time row: no top border, header provides separator */
    .time-cell.first-row{
      border-top:none;
    }

    .time-cell.warning-critical{
      background:var(--warning-critical);
    }
    
    /* Soft coverage warning: enough downstairs total but split is suboptimal */
    .time-cell.warning-advisory{
      position: relative;
      background: transparent;
    }
    .time-cell.warning-advisory::after,
    .legend-time-cell.warning-advisory::after{
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(239, 68, 68, 0.12); /* soft translucent red */
      border-radius: 0;
      pointer-events: none;
    }
    
    .time-cell.warning-end-day{
      background:var(--warning-end-day);
    }

    .time-cell.end-of-day{
      background:transparent;
      border-bottom:1px solid #000000;
    }

    body.dark-theme .time-cell.end-of-day{
    }

    /* Legend (Key) styles */
    .legend{
      margin-top:8px;
      padding-top:8px;
      border-top:1px solid var(--card-border);
    }
    .legend-title{
      font-size:11px;
      color:var(--muted);
      font-weight:600;
      margin-bottom:6px;
      text-transform:uppercase;
      letter-spacing:0.02em;
    }
    .legend-grid{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:6px 10px;
      align-items:center;
    }
    .legend-time-cell{
      display:flex;
      align-items:center;
      justify-content:center;
      width:var(--time-col);
      height:var(--slot-height);
      font-size:11px;
      font-weight:600;
      color:var(--text-primary);
      background:var(--panel-elevated);
      border:1px solid var(--card-border);
      border-radius:3px;
      position:relative; /* needed for dashed overlays */
      box-shadow:var(--shadow-soft);
      padding:0 4px;
      box-sizing:border-box;
    }
    .legend-desc{
      font-size:12px;
      color:var(--text-secondary);
    }

    .key-carousel-container{
      position:relative;
      margin-bottom:12px;
    }

    .key-carousel-wrapper{
      overflow:hidden;
      position:relative;
    }

    .key-carousel{
      display:flex;
      transition:transform 0.3s ease;
      gap:12px;
    }

    .key-page{
      min-width:100%;
      flex-shrink:0;
    }

    .shift-key-grid{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .shift-key-item{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .shift-key-circle{
      width:20px;
      height:20px;
      border-radius:50%;
      flex-shrink:0;
      border:1px solid rgba(0,0,0,0.1);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:10px;
      font-weight:700;
      color:#fff;
      text-shadow:0 0 2px rgba(0,0,0,0.3);
    }

    .shift-key-label{
      font-size:12px;
      color:var(--text-secondary);
      font-weight:500;
      line-height:1.2;
      flex:1;
    }

    .key-nav-btn{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      background:var(--panel-elevated);
      border:1px solid var(--card-border);
      border-radius:50%;
      width:24px;
      height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:12px;
      color:var(--text-secondary);
      transition:all 0.15s ease;
      z-index:10;
      box-shadow:var(--shadow-soft);
    }

    .key-nav-btn:hover{
      background:var(--card-border);
      color:var(--text-primary);
    }

    .key-nav-btn:active{
      transform:translateY(-50%) scale(0.95);
    }

    .key-nav-btn.prev{
      left:-8px;
    }

    .key-nav-btn.next{
      right:-8px;
    }

    .key-nav-btn:disabled{
      opacity:0.3;
      cursor:not-allowed;
      pointer-events:none;
    }

    .key-indicators{
      display:flex;
      justify-content:center;
      gap:4px;
      margin-top:8px;
    }

    .key-indicator{
      width:6px;
      height:6px;
      border-radius:50%;
      background:var(--card-border);
      transition:all 0.2s ease;
    }

    .key-indicator.active{
      background:var(--accent);
      width:12px;
      border-radius:3px;
    }

    /* Coverage warning tooltips */
    .time-cell[data-tooltip]{
      position:relative;
    }

    .time-cell[data-tooltip]::before{
      content:attr(data-tooltip);
      position:absolute;
      bottom:calc(100% + 8px);
      left:50%;
      transform:translateX(-50%);
      background:var(--panel-elevated);
      color:var(--text-primary);
      border:1px solid var(--card-border);
      border-radius:6px;
      padding:6px 10px;
      font-size:11px;
      font-weight:500;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition:opacity 0.2s ease;
      z-index:1000;
      box-shadow:var(--shadow-soft);
    }

    .time-cell[data-tooltip]:hover::before{
      opacity:1;
    }

    /* Make text unselectable in time cells and initials cells */
    .time-cell,
    .head-cell{
      user-select:none;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      cursor:default;
    }

    /* Dispensary cap hint: subtle translucent overlay when >1 D1 or >1 D2 */
    .time-cell.dispensary-overcap{
      position: relative;
      background: transparent;
    }
    .time-cell.dispensary-overcap::after,
    .legend-time-cell.dispensary-overcap::after{
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(59, 130, 246, 0.14); /* soft translucent blue */
      border-radius: 0;
      pointer-events: none;
    }
    /* Muted theme: double-booked overlay matches Admin colour */
    body.muted-theme .time-cell.dispensary-overcap::after,
    body.muted-theme .legend-time-cell.dispensary-overcap::after{
      background: rgba(249, 197, 116, 0.18); /* admin muted colour */
    }
    /* Light theme: make double-booked overlay match global button color */
    body:not(.muted-theme):not(.dark-theme) .time-cell.dispensary-overcap::after,
    body:not(.muted-theme):not(.dark-theme) .legend-time-cell.dispensary-overcap::after{
      background: rgba(125, 160, 182, 0.22);
    }

    /* Legend critical sample */
    .legend-time-cell.warning-critical{
      background: var(--warning-critical);
      border-color: #ef4444;
    }

    .slot{
      height:calc(var(--slot-height) + 1px);
      display:flex;
      align-items:center;
      padding:0;
      border-radius:0;
      background:transparent;
      box-sizing:border-box;
      position:relative;
      border-left:1px solid var(--grid-border-color) !important;
      border-right:none !important;
      border-top:none !important;
      border-bottom:none !important;
      outline:none !important;
      overflow:visible;
      margin-bottom:-1px;
      transform:translateZ(0);
      backface-visibility:hidden;
    }

    /* First staff column shares borders with time column (avoid doubles) */
    .slot.first-column{
      border-left:none !important;
      border-top:none !important;
    }

    /* Add right border to last slot in each row */
    .slot:last-of-type {
      border-right:1px solid var(--grid-border-color) !important;
    }

    /* Add right border to all slots in the last column */
    .slot.last-column {
      border-right:1px solid var(--grid-border-color) !important;
    }

    /* Shift block boundaries - only use top borders to avoid doubling */
    .slot.shift-start {
      border-top:1px solid var(--grid-border-color) !important;
    }

    /* No bottom borders on shift-end - the next shift-start will provide the border */
    .slot.shift-end {
      border-bottom:none !important;
    }

    /* First row (08:00) - no top borders, header provides the separator */
    .slot.first-row.shift-start {
      border-top:none !important;
    }

    /* Add top border to empty slots with filled slots above */
    .slot.has-filled-above {
      border-top:1px solid var(--grid-border-color) !important;
    }

    /* End-of-day strip styling */
    .end-day-strip{
      position: relative;
      height:calc(var(--slot-height) + 1px);
      background: var(--slot-bg-empty);
      border-radius: 0;
      border-top: 1px solid var(--grid-border-color);
      border-bottom: 1px solid var(--grid-border-color);
      /* Share the vertical border with the 18:00 time cell to avoid doubling */
      border-left: 0;
      border-right: 1px solid var(--grid-border-color);
      box-sizing: border-box;
      pointer-events: none;
      margin-bottom:-1px;
      transform:translateZ(0);
      backface-visibility:hidden;
    }
    .end-day-strip::after{
      content: 'end';
      position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      text-transform: lowercase;
      letter-spacing: 0.3px;
      pointer-events: none;
    }
    body.dark-theme .end-day-strip{
      border-top: 1px solid var(--grid-border-color) !important;
      border-bottom: 1px solid var(--grid-border-color) !important;
      border-left: 1px solid var(--grid-border-color) !important;
      border-right: 1px solid var(--grid-border-color) !important;
    }

    .slot *{
      outline:none !important;
    }

    /* Remove outlines from grid elements */
    #grid * {
      outline: none !important;
    }

    .slot {
      outline: none !important;
      box-shadow: none !important;
    }

    .pill-selected{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      height:100%;
      padding:0;
      box-sizing:border-box;
      background:var(--slot-bg-empty);
      border-radius:0;
      border:none;
      font-weight:500;
      color:var(--muted);
      cursor:default;
      box-shadow:none;
      position:relative;
      z-index:5;
    }
    .pill-selected .abbr{
      font-size:13px;
      line-height:1;
      font-weight:600;
      letter-spacing:-0.1px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:text;
      text-align:center;
      pointer-events:auto;
      padding:4px;
    }

    .pill-selected .abbr:focus{
      outline:none !important;
      display:flex;
      align-items:center;
      justify-content:center;
      border:none !important;
      box-shadow:none !important;
    }

    .pill-selected:focus{
      outline:none !important;
      border:none !important;
    }

    /* Cell selection highlighting - subtle background tint */
    .pill-selected.cell-selected {
      position: relative;
      filter: brightness(0.95);
      border-radius: 0 !important; /* fill full square, no rounded pill */
    }

    /* Extra highlight for selected unused (empty) cells - base (muted/dark) */
    .pill-selected.cell-selected:not(.filled){
      box-shadow: inset 0 0 0 2px rgba(193, 86, 63, 0.55);
      border-radius: 0;
    }

    /* Light and dark theme: make empty selection very obvious */
    body:not(.muted-theme) .pill-selected.cell-selected:not(.filled){
      background: rgba(193, 86, 63, 0.08);
      box-shadow: inset 0 0 0 2px rgba(193, 86, 63, 0.85);
      filter: none;
    }

    /* Slot-level highlight so empty cells are clearly visible while dragging */
    .slot.cell-selected-slot{
      position: relative;
      box-shadow: inset 0 0 0 2px rgba(193, 86, 63, 0.55);
      border-radius: 0;
    }

    /* Light and dark theme: stronger, brighter highlight for empty selection */
    body:not(.muted-theme) .slot.cell-selected-slot{
      background: rgba(193, 86, 63, 0.1);
      box-shadow: inset 0 0 0 2px rgba(193, 86, 63, 0.9);
    }

    /* Dark theme: use turquoise accent for selection highlights */
    body.dark-theme .pill-selected.cell-selected:not(.filled){
      background: rgba(15, 118, 110, 0.15);
      box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.85);
    }
    body.dark-theme .slot.cell-selected-slot{
      background: rgba(15, 118, 110, 0.15);
      box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.9);
    }
    body.dark-theme #selectionOverlay {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.35);
    }

    /* Selection overlay border */
    #selectionOverlay {
      position: absolute;
      border: 3px solid var(--accent);
      pointer-events: none;
      z-index: 1000;
      border-radius: 12px;
      box-shadow: 0 0 0 1px rgba(193, 86, 63, 0.35);
    }

    /* Cell hover effects - only when highlight bar is OFF */
    body:not(.highlight-bar-on) .pill-selected:hover {
      position: relative;
    }

    /* Hover effect for filled cells - darken */
    body:not(.highlight-bar-on) .pill-selected.filled:hover {
      filter: brightness(0.85);
    }

    /* Hover effect for empty cells - show subtle background */
    body:not(.highlight-bar-on) .slot:has(.pill-selected:not(.filled)):hover .pill-selected,
    body:not(.highlight-bar-on) .pill-selected:not(.filled):hover {
      background: rgba(193, 86, 63, 0.12) !important;
    }

    /* Dark theme: use turquoise for empty cell hover */
    body.dark-theme:not(.highlight-bar-on) .slot:has(.pill-selected:not(.filled)):hover .pill-selected,
    body.dark-theme:not(.highlight-bar-on) .pill-selected:not(.filled):hover {
      background: rgba(15, 118, 110, 0.15) !important;
    }

    /* Muted theme: use orange for empty cell hover */
    body.muted-theme:not(.highlight-bar-on) .slot:has(.pill-selected:not(.filled)):hover .pill-selected,
    body.muted-theme:not(.highlight-bar-on) .pill-selected:not(.filled):hover {
      background: rgba(217, 119, 6, 0.12) !important;
    }

    .pill-selected.filled{
      color:#fff;
      cursor:default;
      box-shadow:none;
    }

    /* Special styling for lunch shifts */
    .pill-selected.filled[data-shift-id="lunch"] {
      background:#e5e7eb !important;
      color:#1f2937 !important;
      font-weight:800 !important;
      box-shadow: none !important;
    }

    /* Lunch follows standard border rules */

    .pill-options{
      position:fixed;
      min-width:200px;
      background:var(--panel-elevated);
      border-radius:10px;
      box-shadow:var(--shadow-medium);
      border:1px solid var(--card-border);
      z-index:9999;
      padding:6px;
      max-height:600px;
      overflow-y:auto;
      overflow-x:hidden;
    }
    .pill-option{
      padding:12px 14px;
      border-radius:7px;
      cursor:pointer;
      font-weight:500;
      color:var(--text-primary);
      font-size:13px;
      background:transparent;
      transition:all 0.15s ease;
      border:1px solid transparent;
      margin:2px 0;
      display:flex;
      align-items:center;
      gap:8px;
      text-align:left;
      line-height:1.5;
      min-height:20px;
    }
    .pill-option:hover{
      background:var(--bg);
      border-color:var(--card-border);
    }
    .pill-option:active{
      transform:scale(0.98);
    }
    .pill-option:first-child{
      margin-top:0;
    }
    .pill-option:last-child{
      margin-bottom:0;
    }
    .pill-swatch{
      width:10px;height:10px;border-radius:50%;
      border:1px solid rgba(0,0,0,0.15);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
      flex:0 0 auto;
    }
    .pill-option.delete{
      color:#dc2626 !important;
      font-weight:700;
      border:1px solid rgba(220,38,38,0.35);
      background:rgba(220,38,38,0.08);
      justify-content:center;
    }
    .pill-option.delete:hover{
      background:rgba(220,38,38,0.15);
      border-color:rgba(220,38,38,0.5);
    }

    .control-card{
      display:flex;
      flex-direction:column;
      align-items:center;
      background:var(--panel);
      border-radius:8px;
      padding:8px;
      box-shadow:var(--shadow-sm);
      border:1px solid var(--card-border);
      transition:all 0.2s ease;
      width:100%;
      box-sizing:border-box;
    }
    .default-pill-selector{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:4px;
      max-width:140px;
      width:100%;
    }
    .control-card:focus-within{
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(37, 99, 235, 0.08), var(--shadow-soft);
    }
    /* Light theme only: soften focus color to light blue for control cards */
    body:not(.muted-theme):not(.dark-theme) .control-card:focus-within{
      border-color:#7DA0B6;
      box-shadow:0 0 0 3px rgba(125,160,182,0.25), var(--shadow-soft);
    }
    .control-card input{
      border:0;
      outline:none;
      flex:1;
      padding:8px;
      font-weight:500;
      font-size:14px;
      color:var(--text-primary);
      background:transparent;
    }
    .add-btn{
      border:0;
      background:var(--accent);
      color:#fff;
      width:40px;
      height:40px;
      border-radius:8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:600;
      cursor:pointer;
      box-shadow:var(--shadow-soft);
      font-size:18px;
      transition:all 0.2s ease;
    }
    .add-btn:hover{
      background:var(--accent-hover);
      box-shadow:var(--shadow-soft);
    }
    .add-btn:active{
      transform:scale(0.95);
    }

    /* Segmented control (pill selector) */
    .segmented{
      position:relative;
      display:flex;
      border:1px solid var(--card-border);
      border-radius:10px;
      background:var(--panel-elevated);
      box-shadow:var(--shadow-subtle);
      padding:2px;              /* inset buttons to avoid clipping */
      gap:2px;                  /* small gap for visual separation */
      overflow:hidden;
    }
    /* Sliding highlight (thumb) */
    .segmented-thumb{
      position:absolute;
      top:4px;                       /* smaller, inset pill */
      left:4px;
      height:calc(100% - 8px);
      width:0;
      background:var(--accent);
      border-radius:7px;
      transition:left 220ms cubic-bezier(0.4, 0, 0.2, 1), width 220ms cubic-bezier(0.4, 0, 0.2, 1), background-color 220ms ease;
      z-index:0;
    }
    /* Light theme: match segmented thumb to global button color */
    body:not(.muted-theme):not(.dark-theme) .segmented-thumb{ background:#7DA0B6; }
    .segmented-btn{
      flex:1 1 0;
      min-width:0;             /* prevent overflow cutting last segment */
      border:0;
      background:transparent;
      padding:8px 10px;
      font-weight:600;
      font-size:13px;
      color:var(--text-secondary);
      cursor:pointer;
      transition:background 0.15s ease, color 0.15s ease;
      border-radius:8px;       /* rounded pills inside the group */
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      z-index:1;               /* above the sliding thumb */
    }
    .segmented-btn[aria-pressed="true"]{ color:#fff; }
    .segmented-btn:not([aria-pressed="true"]):hover{
      background:var(--panel);
      color:var(--text-primary);
    }

    .btn{
      padding:9px 14px;
      border-radius:8px;
      border:1px solid var(--card-border);
      cursor:pointer;
      font-weight:500;
      background:var(--panel-elevated);
      color:var(--text-secondary);
      box-shadow:var(--shadow-subtle);
      font-size:13px;
      transition:all 0.2s ease;
    }
    .btn:hover{
      background:var(--panel-elevated);
      color:var(--accent);
      border-color:var(--accent);
      box-shadow:var(--shadow-soft);
    }
    .btn:active{
      transform:scale(0.98);
    }
    /* Light theme: use light blue for button focus ring/border (e.g., Today) */
    body:not(.muted-theme):not(.dark-theme) .btn:focus,
    body:not(.muted-theme):not(.dark-theme) .btn:focus-visible{
      outline:none;
      border-color:#7DA0B6 !important;
      box-shadow:0 0 0 3px rgba(125,160,182,0.25), var(--shadow-soft);
      color:#7DA0B6;
    }
    .btn.primary{
      background:#7DA0B6; /* global button color */
      color:#fff;
      border-color:#7DA0B6;
      font-weight:600;
    }
    .btn.primary:hover{
      background:#6b8fa8;
      box-shadow:var(--shadow-soft);
    }
    /* Light theme: ensure control panel button hover uses light blue, not orange */
    body:not(.muted-theme):not(.dark-theme) .controls-panel .btn:hover{
      color:#7DA0B6 !important;
      border-color:#7DA0B6 !important;
      background:var(--panel-elevated);
    }
    body:not(.muted-theme):not(.dark-theme) .controls-panel .btn:active{
      color:#6b8fa8 !important;
      border-color:#6b8fa8 !important;
    }
    /* Dark theme: buttons match day pill/accent */
    body.dark-theme .btn.primary{ background:var(--accent); border-color:var(--accent); }
    body.dark-theme .btn.primary:hover{ background:var(--accent-hover); }
    /* Muted theme: buttons should match week selector (accent) */
    body.muted-theme .btn.primary{
      background:var(--accent);
      border-color:var(--accent);
    }
    body.muted-theme .btn.primary:hover{
      background:var(--accent-hover);
    }
    /* Ensure template primary buttons use the same global button color */
    .template-btn.primary{ background:#7DA0B6; border-color:#7DA0B6; color:#fff; }
    .template-btn.primary:hover{ background:#6b8fa8; }
    /* Dark theme overrides for template buttons */
    body.dark-theme .template-btn.primary{ background:var(--accent); border-color:var(--accent); }
    body.dark-theme .template-btn.primary:hover{ background:var(--accent-hover); }
    /* Muted theme overrides for template buttons */
    body.muted-theme .template-btn.primary{ background:var(--accent); border-color:var(--accent); }
    body.muted-theme .template-btn.primary:hover{ background:var(--accent-hover); }
    .btn.danger{
      background:var(--panel-elevated);
      color:#dc2626;
      border-color:#fecaca;
      font-weight:500;
    }
    .btn.danger:hover{
      background:#fef2f2;
      color:#b91c1c;
      border-color:#fca5a5;
    }

    .templates-panel{
      position:fixed;
      right:0;
      top:0;
      bottom:0;
      width:420px;
      background:var(--panel-elevated);
      box-shadow:var(--shadow-medium);
      transform:translateX(100%);
      transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index:1000;
      display:flex;
      flex-direction:column;
      border-left:1px solid var(--card-border);
    }
    .templates-panel.open{
      transform:translateX(0);
    }
    .templates-header{
      padding:18px 20px;
      border-bottom:1px solid var(--card-border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:var(--bg);
    }
    .templates-header h2{
      margin:0;
      font-size:17px;
      font-weight:600;
      color:var(--text-primary);
    }
    .close-panel{
      background:transparent;
      border:0;
      font-size:22px;
      cursor:pointer;
      color:var(--muted);
      padding:6px 9px;
      border-radius:6px;
      line-height:1;
      transition:all 0.2s;
    }
    .close-panel:hover{
      background:var(--panel);
      color:var(--text-primary);
    }
    .templates-content{
      flex:1;
      overflow-y:auto;
      padding:18px 20px;
    }
    .template-day-block{
      margin-bottom:14px;
      background:var(--panel);
      border-radius:8px;
      padding:14px;
      border:1px solid var(--card-border);
      overflow:visible;
      box-shadow:var(--shadow-subtle);
    }
    .template-day-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:12px;
    }
    .template-day-name{
      font-weight:600;
      font-size:13px;
      color:var(--text-primary);
    }
    .template-actions{
      display:flex;
      gap:6px;
    }
    .template-btn{
      padding:5px 9px;
      border-radius:6px;
      border:1px solid var(--card-border);
      cursor:pointer;
      font-weight:500;
      font-size:11px;
      background:var(--panel-elevated);
      color:var(--text-secondary);
      box-shadow:var(--shadow-subtle);
      transition:all 0.2s;
    }
    .template-btn:hover{
      background:var(--panel-elevated);
      color:var(--text-primary);
      border-color:var(--accent);
    }
    .template-btn.primary{
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
      font-weight:600;
    }
    .template-btn.primary:hover{
      background:var(--accent-hover);
    }
    .template-btn.danger{
      color:#dc2626;
      border-color:#fecaca;
    }
    .template-btn.danger:hover{
      background:#fef2f2;
      color:#b91c1c;
      border-color:#fca5a5;
    }
    .template-preview{
      font-size:11px;
      color:var(--muted);
      line-height:1.6;
      overflow-x:visible;
      margin-top:8px;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .template-empty{
      font-size:11px;
      color:var(--muted);
      font-style:italic;
      padding:8px;
    }
    .template-grid{
      display:grid;
      gap:0px;
      align-items:start;
      grid-auto-rows:18px;
      font-size:10px;
      min-width:max-content;
      border-left:1px solid var(--grid-border-color);
      border-top:1px solid var(--grid-border-color);
    }
    .template-time-cell{
      background:var(--panel-elevated);
      border-radius:0;
      border-right:1px solid var(--grid-border-color);
      border-bottom:1px solid var(--grid-border-color);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      color:var(--text-primary);
      font-size:8px;
      padding:0 2px;
    }
    .template-head-cell{
      background:var(--panel-elevated);
      border-right:1px solid var(--grid-border-color);
      border-bottom:1px solid var(--grid-border-color);
      border-radius:0;
      padding:3px 2px;
      text-align:center;
      font-weight:800;
      font-size:9px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color:var(--text-primary);
      position:relative;
    }
    .template-head-cell::after{
      content:'';
      position:absolute;
      bottom:-2px;
      left:0;
      right:0;
      height:2px;
      background:#000000;
      z-index:10;
    }
    .template-slot{
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:0;
      min-height:18px;
      border-right:1px solid var(--grid-border-color);
      border-bottom:1px solid var(--grid-border-color);
    }
    .template-slot.filled{
      color:#fff;
      box-shadow:none;
    }
    .template-slot.empty{
      background:var(--slot-bg-empty);
    }

    .templates-footer{
      padding:20px 24px;
      border-top:1px solid var(--card-border);
      background:var(--bg);
    }
    .save-current-btn{
      width:100%;
      padding:12px;
      border-radius:8px;
      border:0;
      background:#7DA0B6;
      color:#fff;
      font-weight:600;
      font-size:14px;
      cursor:pointer;
      box-shadow:var(--shadow-md);
      transition:all 0.2s;
    }
    .save-current-btn:hover{ background:#6b8fa8; box-shadow:var(--shadow-lg); }
    /* Dark theme: Save buttons follow accent */
    body.dark-theme .save-current-btn{ background:var(--accent); }
    body.dark-theme .save-current-btn:hover{ background:var(--accent-hover); }
    /* Muted theme: Save buttons follow accent */
    body.muted-theme .save-current-btn{ background:var(--accent); }
    body.muted-theme .save-current-btn:hover{ background:var(--accent-hover); }

    .time-footer{height:var(--slot-height);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600;margin-top:2px;font-size:11px;}

    .empty-state{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:80px 20px;
      color:var(--muted);
      text-align:center;
    }
    .empty-state-icon{
      font-size:56px;
      margin-bottom:20px;
      opacity:0.4;
    }
    .empty-state-text{
      font-size:15px;
      font-weight:600;
      margin-bottom:10px;
      color:var(--text-primary);
    }
    .empty-state-hint{
      font-size:13px;
      opacity:0.7;
      color:var(--text-secondary);
    }
    
    .coverage-summary{
      display:none;
    }
    .coverage-summary-item{
      margin:4px 0;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .coverage-icon{
      width:12px;
      height:12px;
      border-radius:2px;
    }

    /* Form Elements */
    input[type="text"],
    input[type="number"],
    select {
      font-family:var(--font-sans);
      transition:all 0.2s;
    }
    
    input[type="text"]:focus,
    input[type="number"]:focus {
      outline:none;
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(37, 99, 235, 0.08);
    }
    /* Light theme only: soften input focus color (e.g., RB field) */
    body:not(.muted-theme):not(.dark-theme) input[type="text"]:focus,
    body:not(.muted-theme):not(.dark-theme) input[type="number"]:focus{
      border-color:#7DA0B6;
      box-shadow:0 0 0 3px rgba(125,160,182,0.25);
    }
    
    select {
      outline:none;
    }
    
    select:focus {
      outline:none;
      border-color:var(--accent);
    }
    
    select:hover {
      border-color:var(--accent);
    }
    
    /* Custom select dropdown styling */
    .custom-select-trigger:hover {
      border-color:var(--accent);
    }
    .custom-select-options .custom-option{
      padding:8px 10px;
      border-radius:6px;
      color:var(--text-primary);
      background:var(--panel-elevated);
      border:1px solid transparent;
    }
    
    .custom-option:hover {
      background:var(--panel);
      border-color:var(--card-border);
    }
    
    .custom-option:active {
      transform:scale(0.98);
    }

    /* Dark mode – Staff Settings panel: improve input/dropdown contrast */
    body.dark-theme #staffSettingsPanel input[type="text"],
    body.dark-theme #staffSettingsPanel input[type="number"],
    body.dark-theme #staffSettingsPanel .custom-select-trigger,
    body.dark-theme #staffSettingsPanel .custom-select-options {
      background: var(--panel-elevated) !important;
      color: var(--text-primary) !important;
      border: 1px solid var(--card-border) !important;
    }
    body.dark-theme #staffSettingsPanel ::placeholder{
      color: rgba(229, 231, 235, 0.6);
    }
    body.dark-theme #staffSettingsPanel .custom-select-options .custom-option:hover{
      background: var(--panel) !important;
      border-color: var(--card-border) !important;
    }
    /* Dark mode: make empty checkboxes darker and styled */
    body.dark-theme #staffSettingsPanel input[type="checkbox"]{
      -webkit-appearance: none;
      appearance: none;
      width:16px; height:16px;
      border-radius:4px;
      border:1px solid #334155; /* slate-600 */
      background:#0f172a;       /* dark background */
      cursor:pointer;
      position:relative;
      outline:none;
      box-shadow:none;
    }
    body.dark-theme #staffSettingsPanel input[type="checkbox"]:hover{
      border-color:#475569; /* slate-500 */
      background:#111827;   /* slightly lighter */
    }
    body.dark-theme #staffSettingsPanel input[type="checkbox"]:checked{
      background:var(--accent);
      border-color:var(--accent);
    }
    body.dark-theme #staffSettingsPanel input[type="checkbox"]:checked::after{
      content:'✓';
      position:absolute; top:-2px; left:2px;
      font-size:12px; line-height:1; color:#fff;
    }
    body.dark-theme #staffSettingsPanel input[type="range"]{
      background: var(--panel);
      border-color: var(--card-border);
    }
    body.dark-theme #staffSettingsPanel input[type="range"]::-webkit-slider-thumb{
      background: var(--accent);
      border-color: var(--card-border);
    }
    
    input[type="checkbox"] {
      width:16px;
      height:16px;
      cursor:pointer;
      accent-color:var(--accent);
    }
    
    /* Custom Range Slider Styling */
    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      background: var(--panel);
      border-radius: 3px;
      outline: none;
      border: 1px solid var(--card-border);
      transition: all 0.2s;
    }
    
    input[type="range"]:hover {
      border-color: var(--accent);
    }
    
    input[type="range"]:focus {
      border-color: var(--accent);
    }
    
    /* Webkit (Chrome, Safari, Edge) */
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      background: var(--accent);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      transition: all 0.2s;
    }
    
    input[type="range"]::-webkit-slider-thumb:hover {
      background: var(--accent-hover);
      transform: scale(1.1);
      box-shadow: var(--shadow-medium);
    }
    
    input[type="range"]::-webkit-slider-thumb:active {
      transform: scale(0.95);
    }
    
    /* Firefox */
    input[type="range"]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      background: var(--accent);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      transition: all 0.2s;
    }
    
    input[type="range"]::-moz-range-thumb:hover {
      background: var(--accent-hover);
      transform: scale(1.1);
      box-shadow: var(--shadow-medium);
    }
    
    input[type="range"]::-moz-range-thumb:active {
      transform: scale(0.95);
    }
    
    input[type="range"]::-moz-range-track {
      background: var(--panel);
      border: 1px solid var(--card-border);
      border-radius: 3px;
      height: 6px;
    }

    @media (max-width:900px){
      .layout{grid-template-columns:1fr}
      .tabs{overflow:auto}
      .control-card{width:200px}

      /* Hide left sidebar on small screens */
      .left-sidebar {
        display:none;
      }

      /* Show controls panel and tab on small screens */
      #controlsPanel {
        display:flex;
      }
    }

    /* Hide controls pullout panel and tab by default on larger screens */
    @media (min-width:901px){
      #controlsPanel { display:none !important; }
    }

    /* Toast Notification */
    .toast-notification {
      position: fixed;
      bottom: 32px;
      right: 32px;
      background: #111;
      color: #fff;
      padding: 16px 28px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      box-shadow: 0 6px 24px rgba(0,0,0,0.18);
      z-index: 10000;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.3s, transform 0.3s;
      pointer-events: none;
      letter-spacing: 0.01em;
      max-width: 90vw;
      min-width: 180px;
      text-align: center;
    }

    .toast-notification.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* Coverage Report Overlay */
    .coverage-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      /* Allow scrolling the rota behind the overlay */
      pointer-events: none;
    }

    /* Passphrase overlay: block background interaction and polish layout */
    #pinOverlay{ pointer-events:auto; z-index:20050; }
    #pinOverlay .coverage-overlay-content{
      max-width: 420px;
      width: auto;
      border: 1px solid var(--card-border);
      background: var(--panel-elevated);
    }
    /* Fade the big date while passphrase is open */
    body.pin-open .date-center{ opacity:0.35; transition: opacity 0.15s ease; }

    .coverage-overlay-content {
      background: var(--panel);
      border-radius: 12px;
      max-width: 800px;
      max-height: 90vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      /* Enable interaction within the panel while background passes events */
      pointer-events: auto;
    }

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

    .coverage-overlay-header h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .coverage-overlay-close {
      background: none;
      border: none;
      font-size: 24px;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.2s;
    }

    .coverage-overlay-close:hover {
      background: var(--slot-bg-empty);
      color: var(--text-primary);
    }

    .coverage-overlay-body {
      padding: 20px 24px;
      overflow-y: auto;
      flex: 1;
    }

    .coverage-slot {
      background: var(--slot-bg-empty);
      border: 1px solid var(--card-border);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
    }

    .coverage-slot:last-child {
      margin-bottom: 0;
    }

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

    .coverage-slot-header strong {
      font-size: 16px;
      color: var(--text-primary);
    }

    .coverage-missing {
      font-size: 13px;
      color: var(--warning-critical);
      font-weight: 600;
    }

    /* ========== OTHER TAB: ADMIN vs DOWNSTAIRS CHART ========== */
    :root{
      --bar-downstairs:#ef4444;
      --bar-admin:#f59e0b;
      --bar-away:#69b9ab; /* away from phones portion */
    }
    body.muted-theme{
      --bar-downstairs:#f77c7c;
      --bar-admin:#f9c574;
      --bar-away:#6ab08f;
    }
    body.dark-theme{
      --bar-downstairs:#991b1b;
      --bar-admin:#d97706;
      /* Softer, pastel-like teal for Away (chart only) */
      --bar-away: rgba(42,161,152,0.55);
    }
    .other-chart{
      display:flex;
      flex-direction:column;
      gap:10px;
      width:100%;
    }
    .other-row{
      display:flex;
      align-items:center;
      gap:6px;
      width:100%;
    }
    .other-pct{
      width:60px;
      text-align:center;
      font-weight:800;
      color:var(--text-primary);
      flex-shrink:0;
    }
    .other-note{ font-size:11px; color:var(--muted); margin-top:6px; text-align:left; }
    .other-bar{
      position:relative;
      height:20px;
      flex:1 1 auto;
      background:var(--slot-bg-empty);
      border:1px solid var(--card-border);
      border-radius:10px;
      overflow:hidden;
    }
    .other-down{position:absolute;left:0;top:0;bottom:0;background:var(--bar-downstairs);} 
    .other-admin{position:absolute;right:0;top:0;bottom:0;background:var(--bar-admin);} 
    /* Away-from-phones colored overlay (rightmost part of admin) */
    .other-away{ position:absolute; top:0; bottom:0; width:0; background:var(--bar-away); pointer-events:none; }
    .other-inbar{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:800;
      color:#fff;
      text-shadow:0 1px 1px rgba(0,0,0,0.35);
      pointer-events:none;
    }
    .other-text{ display:none; }

    .coverage-slot-details {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .coverage-category {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .coverage-category strong {
      display: inline-block;
      margin-bottom: 6px;
      color: var(--text-primary);
    }

    .staff-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      margin-right: 6px;
      margin-bottom: 4px;
    }

    .staff-badge.downstairs {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .staff-badge.upstairs {
      background: rgba(245, 158, 11, 0.15);
      color: #f59e0b;
      border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .staff-badge.unavailable {
      background: rgba(139, 92, 246, 0.15);
      color: #8b5cf6;
      border: 1px solid rgba(139, 92, 246, 0.3);
    }

    .staff-badge.off-duty {
      background: rgba(148, 163, 184, 0.15);
      color: #64748b;
      border: 1px solid rgba(148, 163, 184, 0.3);
    }

    /* Export snapshot overlay - light mode with shared borders */
    .export-snap-overlay {
      overflow: visible !important;
    }

    /* Hide tooltips during export */
    .export-snap-overlay [data-tooltip]::before,
    .export-snap-overlay [data-tooltip]::after,
    .export-snap-overlay [title]::before,
    .export-snap-overlay [title]::after {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    .export-flat-mode [data-tooltip]::before,
    .export-flat-mode [data-tooltip]::after,
    .export-flat-mode [title]::before,
    .export-flat-mode [title]::after {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    /* Export flat mode - ensures solid, uniform colors with no gradients or effects */
    .export-flat-mode .pill-selected {
      background-image: none !important;
      filter: none !important;
      opacity: 1 !important;
    }

    .export-flat-mode .pill-selected.cell-selected {
      filter: none !important;
    }

    .export-flat-mode .time-cell,
    .export-flat-mode .head-cell {
      background: #ffffff !important;
      background-image: none !important;
      box-shadow: none !important;
      filter: none !important;
    }

    /* Hide all scrollbars globally but keep scrolling */
    html, body, * {
      -ms-overflow-style: none;   /* IE and old Edge */
      scrollbar-width: none;      /* Firefox */
    }
    *::-webkit-scrollbar {
      width: 0 !important;        /* Chrome, Safari, Opera */
      height: 0 !important;
      background: transparent !important;
    }

    /* Staff View Mode - Hide admin controls */
    body.staff-view .left-sidebar,
    body.staff-view .right-sidebar,
    body.staff-view .mobile-controls-toggle,
    body.staff-view #editModeBtn,
    body.staff-view #editModeBtnMobile,
    body.staff-view #saveWeekBtn,
    body.staff-view #saveWeekBtnMobile,
    body.staff-view #clearDayBtn,
    body.staff-view #clearDayBtnMobile,
    body.staff-view #autofillGapsBtn,
    body.staff-view #autofillGapsBtnMobile,
    body.staff-view #loadJsonBtn,
    body.staff-view #loadJsonBtnMobile,
    body.staff-view #saveJsonBtn,
    body.staff-view #saveJsonBtnMobile,
    body.staff-view #loadCloudBtn,
    body.staff-view #loadCloudBtnMobile,
    body.staff-view #saveCloudBtn,
    body.staff-view #saveCloudBtnMobile,
    body.staff-view .save-indicator,
    body.staff-view .tab-bar,
    body.staff-view .mobile-controls-panel {
      display: none !important;
    }

    /* Staff view - center the rota grid */
    body.staff-view .app-container {
      display: flex;
      justify-content: center;
      padding: 20px;
    }

    body.staff-view .main-area {
      max-width: 1400px;
      width: 100%;
    }

    /* Password Modal */
    .password-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
    }

    .password-modal-content {
      background: var(--panel);
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      min-width: 300px;
      max-width: 400px;
    }

    .password-modal-content h3 {
      margin: 0 0 20px 0;
      color: var(--text-primary);
      font-size: 18px;
    }

    .password-modal-content input[type="password"] {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--grid-border-color);
      border-radius: 6px;
      font-size: 14px;
      margin-bottom: 20px;
      background: var(--slot-bg-empty);
      color: var(--text-primary);
      box-sizing: border-box;
    }

    .password-modal-content input[type="password"]:focus {
      outline: none;
      border-color: #3b82f6;
    }

    .password-modal-buttons {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

    .password-modal-buttons .btn {
      padding: 10px 20px;
      min-width: 80px;
    }