:root {
      --bg: #f2f6f8;
      --panel: #ffffff;
      --panel-soft: #f8fbfc;
      --field: #ffffff;
      --aside: #e9f0f3;
      --ink: #17212b;
      --muted: #5f6f7b;
      --line: #cedce2;
      --line-strong: #9eafb9;
      --accent: #0f766e;
      --accent-2: #9a5b34;
      --accent-3: #385f9b;
      --danger: #b24040;
      --warning: #9b6b18;
      --success: #287447;
      --focus-ring: #075fbe;
      --shadow: 0 8px 28px rgba(24, 38, 45, .08);
      --radius: 8px;
      --section-gap: 12px;
      --child-gap: 8px;
      --section-padding: 10px;
      --calendar-row-width: 92px;
      --calendar-day-width: clamp(110px, calc((100vw - 150px) / 7), 180px);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.dark {
      --bg: #121615;
      --panel: #1b2221;
      --panel-soft: #222a28;
      --field: #111816;
      --aside: #171d1c;
      --ink: #eef4f1;
      --muted: #a6b3ae;
      --line: #33403c;
      --line-strong: #52625d;
      --accent: #4fb6aa;
      --accent-2: #d28a5b;
      --accent-3: #7fa7e4;
      --danger: #ff8b8b;
      --warning: #e8bd6c;
      --success: #73d79a;
      --focus-ring: #8bd7ff;
      --shadow: 0 8px 28px rgba(0, 0, 0, .28);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background: var(--bg);
    }

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 10px;
      left: 10px;
      padding: 8px 12px;
      border-radius: 6px;
      color: #fff;
      background: var(--accent);
      transform: translateY(-160%);
      transition: transform .15s ease;
    }

    .skip-link:focus-visible {
      transform: translateY(0);
    }

    :focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
    }

    main:focus {
      outline: 3px solid var(--focus-ring);
      outline-offset: -3px;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      border: 1px solid var(--line-strong);
      background: var(--panel);
      color: var(--ink);
      min-height: 36px;
      border-radius: 6px;
      padding: 0 12px;
      cursor: pointer;
    }

    button:hover {
      border-color: var(--accent);
    }

    button.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .subsection-add-button {
      display: block;
      width: min(100%, 320px);
      margin-inline: auto;
    }

    button.subtle {
      background: transparent;
    }

    button.danger {
      color: var(--danger);
    }

    button.icon {
      width: 36px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      font-weight: 700;
    }

    .icon-edit-flipped {
      transform: scaleX(-1);
    }

    input,
    select,
    textarea {
      border: 1px solid var(--line-strong);
      background: var(--field);
      color: var(--ink);
      border-radius: 6px;
      min-height: 36px;
      padding: 7px 9px;
      width: 100%;
    }

    .coverage-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
    }

    .coverage-toggle input[type="checkbox"] {
      width: auto;
      min-height: 0;
      padding: 0;
      accent-color: var(--accent);
    }

    .team-marker {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 24px;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
    }

    .schedule-team-marker {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 24px;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
    }

    .schedule-team-marker.empty {
      background: transparent;
      border: 1px solid transparent;
    }

    /* Viewer assignments use compact team badges aligned with the employee text. */
    body:not(.admin-mode) .mobile-assignment .schedule-team-marker,
    body:not(.admin-mode) .assignment-text .schedule-team-marker {
      width: 16px;
      height: 16px;
      flex-basis: 16px;
      border-radius: 3px;
      font-size: 9px;
    }

    .unavailability-calendar-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .unavailability-month-label {
      min-width: 150px;
      text-align: center;
      font-weight: 800;
    }

    .unavailability-team-key {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }

    .unavailability-team-key-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 24px;
      padding: 3px 6px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: var(--panel-soft);
      color: var(--ink);
      font-size: 11px;
      font-weight: 700;
    }

    button.unavailability-team-key-item {
      cursor: pointer;
    }

    .unavailability-team-key-item[aria-pressed="true"] {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft));
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .unavailability-count {
      display: inline-grid;
      place-items: center;
      min-width: 20px;
      min-height: 20px;
      margin-right: 7px;
      padding: 0 5px;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
      border-radius: 4px;
      background: color-mix(in srgb, var(--accent) 12%, var(--panel));
      color: var(--accent);
      font-size: .72rem;
      line-height: 1;
      vertical-align: middle;
    }

    .unavailability-team-key-item .team-marker {
      width: 16px;
      height: 16px;
      flex-basis: 16px;
      border-radius: 3px;
      font-size: 9px;
    }

    .unavailability-month-grid {
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden;
    }

    .unavailability-weekdays,
    .unavailability-week-days,
    .unavailability-range-layer {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .unavailability-weekday {
      padding: 6px 4px;
      background: var(--panel-soft);
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      text-align: center;
      font-size: 11px;
      font-weight: 800;
    }

    .unavailability-day {
      min-height: 104px;
      padding: 5px;
      border-right: 1px solid var(--line);
      background: var(--panel);
    }

    .unavailability-week {
      position: relative;
      border-bottom: 1px solid var(--line);
    }

    .unavailability-week:last-child {
      border-bottom: 0;
    }

    .unavailability-week-days {
      min-height: calc(104px + var(--range-height));
    }

    .unavailability-week-days .unavailability-day:nth-child(7n) {
      border-right: 0;
    }

    .unavailability-day.empty {
      background: var(--panel-soft);
    }

    .unavailability-day-number {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .unavailability-day.today {
      background: color-mix(in srgb, var(--accent) 7%, var(--panel));
      box-shadow: inset 0 0 0 2px var(--accent);
    }

    .unavailability-day.today .unavailability-day-number {
      color: var(--accent);
    }

    .unavailability-range-layer {
      position: absolute;
      right: 0;
      bottom: 5px;
      left: 0;
      grid-template-rows: repeat(var(--range-lanes), 18px);
      gap: 2px 0;
      pointer-events: none;
    }

    .unavailability-range-bar {
      min-width: 0;
      margin-inline: 1px;
    }

    .unavailability-range-fill {
      min-width: 0;
      height: 100%;
      margin-right: var(--range-end);
      margin-left: var(--range-start);
      padding: 1px 5px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--range-color) 72%, #000);
      border-radius: 999px;
      background: color-mix(in srgb, var(--range-color) 78%, #000);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      line-height: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: auto;
    }

    .unavailability-entry {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      padding: 3px 4px;
      border-radius: 4px;
      background: var(--panel-soft);
      font-size: 11px;
      line-height: 1.2;
    }

    .unavailability-entry .team-marker {
      width: 16px;
      height: 16px;
      flex-basis: 16px;
      border-radius: 3px;
      font-size: 9px;
    }

    .unavailability-entry-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }

    @media (max-width: 620px) {
      .unavailability-calendar-controls {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
      }

      .unavailability-calendar-controls [data-unavailability-month-today] {
        grid-column: 1 / -1;
        justify-self: center;
      }

      .unavailability-day {
        min-height: 74px;
        padding: 3px;
      }

      .unavailability-week-days {
        min-height: calc(74px + var(--range-height));
      }

      .unavailability-range-layer {
        bottom: 3px;
        grid-template-rows: repeat(var(--range-lanes), 16px);
      }

      .unavailability-range-bar {
        margin-inline: 0;
      }

      .unavailability-range-fill {
        padding-inline: 3px;
        font-size: 8px;
        line-height: 12px;
      }

      .unavailability-weekday {
        padding: 5px 2px;
        font-size: 9px;
      }

      .unavailability-entry {
        padding: 2px;
        font-size: 9px;
      }

      .unavailability-entry .team-marker {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
        font-size: 8px;
      }
    }

    .employee-team-group {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 8px;
      align-items: stretch;
    }

    .employee-team-group > h3 {
      grid-column: 1 / -1;
      margin: 4px 0 0;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    textarea {
      min-height: 72px;
      resize: vertical;
    }

    label {
      display: grid;
      gap: 5px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
    }

    .shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
    }

    .shell.sidebar-collapsed {
      grid-template-columns: 0 minmax(0, 1fr);
    }

    .shell.sidebar-collapsed aside {
      min-width: 0;
      padding: 0;
      border: 0;
      overflow: hidden;
    }

    .shell.sidebar-collapsed main { grid-column: 2; }

    .setup-group { display: grid; gap: 0; }
    #setupBody { display: grid; gap: 0; }
    .setup-people { display: grid; gap: var(--child-gap); }
    #setupBody .panel-header { display: none !important; }
    .audit-history-list { display: grid; gap: 8px; }
    .audit-entry { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
    .audit-entry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .audit-entry-top strong { min-width: 0; }
    .audit-entry time { color: var(--muted); font-size: .84rem; white-space: nowrap; }
    .audit-entry-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .88rem; }
    .backup-entry-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
    .backup-entry-actions button { min-height: 30px; padding-inline: 8px; font-size: .76rem; }
    .audit-change-list { border-top: 1px solid var(--line); padding-top: 8px; }
    .audit-change-list summary { cursor: pointer; color: var(--accent); font-size: .88rem; }
    .audit-change-list[disabled] summary { color: var(--muted); cursor: default; list-style: none; }
    .audit-change-list[disabled] summary::-webkit-details-marker { display: none; }
    .audit-change-list ul { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
    .audit-change-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--text); font-size: .88rem; }
    .audit-change-type { min-width: 74px; color: var(--muted); font-size: .75rem; text-transform: capitalize; }
    .audit-history-empty { padding: 12px 0; color: var(--muted); }
    .operational-dashboard { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
    .operational-dashboard .add-subsection-header { margin: 0; border: 0; border-radius: 0; }
    .operational-dashboard .add-subsection-header p { margin: 3px 0 0; font-size: .82rem; }
    .operational-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
    .operational-metric { display: grid; gap: 2px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
    .operational-metric strong { font-size: 1.05rem; }
    .operational-metric span { color: var(--muted); font-size: .78rem; }
    .operational-grid { display: grid; grid-template-columns: minmax(360px, 1.4fr) minmax(260px, 1fr); gap: 12px; margin-top: 12px; }
    .operational-panel { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
    .operational-panel h4 { margin: 0 0 8px; font-size: .92rem; }
    .operational-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
    .operational-groups { display: grid; gap: 10px; margin-top: 12px; }
    .operational-group { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
    .operational-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 65%, var(--panel)); }
    .operational-group > summary::-webkit-details-marker { display: none; }
    .operational-group > summary:hover { background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 78%, var(--panel)); }
    .operational-group > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -3px; }
    .operational-group-heading { display: grid; min-width: 0; gap: 2px; }
    .operational-group-heading strong { font-size: .94rem; }
    .operational-group-heading small { overflow-wrap: anywhere; color: var(--muted); font-size: .73rem; font-weight: 500; }
    .operational-group-count { padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: .68rem; font-weight: 700; white-space: nowrap; }
    .operational-group-caret { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .16s ease; }
    .operational-group:not([open]) .operational-group-caret { transform: rotate(-45deg) translate(-1px, 1px); }
    .operational-group-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; border-top: 1px solid var(--line); background: var(--panel-soft); }
    .operational-group-content .operational-panel { margin: 0; }
    .operational-panel-wide { grid-column: 1 / -1; }
    .operational-readiness { border-color: color-mix(in srgb, var(--good) 60%, var(--line)); }
    .operational-readiness.needs-attention { border-color: color-mix(in srgb, var(--warning) 65%, var(--line)); }
    .operational-readiness.critical { border-color: color-mix(in srgb, var(--danger) 65%, var(--line)); }
    .operational-readiness-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
    .operational-readiness-heading strong { font-size: 2rem; line-height: 1; }
    .operational-readiness-heading span { color: var(--muted); font-weight: 700; }
    .operational-risk-list, .operational-pattern-list { display: grid; gap: 5px; }
    .operational-risk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 9%, transparent); font-size: .77rem; }
    .operational-risk-row.critical { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }
    .operational-risk-row > div { display: grid; gap: 1px; }
    .operational-risk-row span { color: var(--muted); }
    .operational-pattern-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .operational-pattern-columns > div > strong { display: block; margin-bottom: 5px; font-size: .78rem; }
    .operational-pattern { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
    .operational-pattern strong { color: var(--ink); text-align: right; }
    .operational-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
    .operational-kpi-grid > div { display: grid; gap: 2px; padding: 7px; border: 1px solid var(--line); border-radius: 4px; text-align: center; }
    .operational-kpi-grid span { color: var(--muted); font-size: .68rem; }
    .operational-trend-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
    .operational-trend { display: grid; grid-template-columns: repeat(var(--operational-days), minmax(38px, 1fr)); gap: 5px; min-width: 560px; align-items: end; }
    .operational-day { display: grid; gap: 5px; text-align: center; }
    .operational-day-label { color: var(--muted); font-size: .72rem; }
    .operational-meter { position: relative; height: 48px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
    .operational-meter-fill { position: absolute; inset-inline: 0; bottom: 0; background: var(--good); }
    .operational-meter-fill.needs-attention { background: var(--warning); }
    .operational-day-value { font-size: .72rem; font-weight: 700; }
    .operational-shortfalls { display: grid; gap: 7px; }
    .operational-shortfall { display: grid; gap: 2px; padding: 8px; border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
    .operational-shortfall strong { font-size: .84rem; }
    .operational-shortfall span { color: var(--muted); font-size: .78rem; }
    .operational-unavailability { display: grid; grid-template-columns: repeat(var(--operational-days), minmax(20px, 1fr)); gap: 5px; align-items: end; min-width: 280px; height: 88px; }
    .operational-unavailability-day { display: grid; gap: 4px; align-items: end; height: 100%; text-align: center; }
    .operational-unavailability-bar { min-height: 2px; background: var(--danger); border-radius: 2px 2px 0 0; }
    .operational-unavailability-day span { color: var(--muted); font-size: .68rem; }
    .operational-role-note { margin: -2px 0 9px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
    .operational-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
    .operational-role { display: grid; gap: 7px; min-width: 0; padding: 9px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 38%, var(--panel)); }
    .operational-role > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .operational-role > div:first-child strong { min-width: 0; overflow-wrap: anywhere; }
    .operational-role > div:first-child span { color: var(--muted); font-size: .72rem; text-align: right; }
    .operational-role-values { display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: .75rem; }
    .operational-role-values span { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
    .operational-role-values b { color: var(--ink); }
    .operational-role.needs-attention { border-color: color-mix(in srgb, var(--warning) 58%, var(--line)); }
    .operational-role.needs-attention .operational-role-gap { border-color: color-mix(in srgb, var(--warning) 60%, var(--line)); background: color-mix(in srgb, var(--warning) 16%, var(--panel)); }
    .operational-role.needs-attention .operational-role-gap b { color: var(--warning); }
    .operational-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 8px; }
    .operational-team { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 38%, var(--panel)); }
    .operational-team.needs-attention { border-color: color-mix(in srgb, var(--warning) 58%, var(--line)); }
    .operational-team-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
    .operational-team-title > div { display: grid; min-width: 0; gap: 1px; }
    .operational-team-title strong { overflow-wrap: anywhere; }
    .operational-team-title span:not(.team-marker) { color: var(--muted); font-size: .72rem; }
    .operational-team-values { display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: .75rem; }
    .operational-team-values span { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
    .operational-team-values b { color: var(--ink); }
    .operational-risk { display: grid; gap: 2px; padding: 7px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--panel)); font-size: .75rem; }
    .operational-risk strong { color: var(--warning); }
    .operational-risk span { color: var(--muted); line-height: 1.35; }
    .conflict-dialog { max-width: 680px; }
    .conflict-summary { display: grid; gap: 10px; }
    .conflict-summary > p { margin: 0; }
    .conflict-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .conflict-side { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
    .conflict-side h3 { margin: 0 0 7px; font-size: .9rem; }
    .conflict-side ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .84rem; }
    .conflict-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
    .conflict-actions button { flex: 1 1 180px; }
    .backup-preview-intro { margin: 0 0 12px; }
    .backup-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .backup-preview-grid > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); }
    .backup-preview-grid > div > span { grid-column: 1 / -1; color: var(--muted); font-size: .76rem; font-weight: 700; }
    .backup-preview-grid strong { font-size: .88rem; }
    .backup-preview-grid small { color: var(--muted); font-size: .7rem; font-weight: 600; }
    .backup-preview-details { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
    .backup-preview-details ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--muted); font-size: .82rem; }
    .print-date { display: none; }

    .admin-view-tabs {
      display: flex;
      gap: 0;
      overflow-x: auto;
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
      scrollbar-width: thin;
    }

    .admin-view-tabs button {
      flex: 1 0 auto;
      min-width: 104px;
      min-height: 40px;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .admin-view-tabs button:last-child { border-right: 0; }

    .admin-view-tabs button[aria-selected="true"] {
      background: var(--panel);
      color: var(--section-accent);
      box-shadow: inset 0 -3px 0 var(--section-accent);
    }

    .workspace-tabs {
      width: 100%;
      max-width: none;
      border: 0;
      border-radius: 0;
    }

    /* The workspace tabs are part of the page header, not a separate section. */
    .schedule-toolbar:has(+ .workspace-tabs) {
      margin-bottom: calc(-1 * var(--section-gap));
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .schedule-toolbar + .workspace-tabs {
      margin-top: 0;
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
      overflow: hidden;
    }

    .workspace-tabs button {
      min-width: 120px;
    }

    .workspace-view {
      display: grid;
      gap: var(--section-gap);
      min-width: 0;
    }

    .workspace-view.hidden { display: none; }

    .management-insight { --section-accent: #0f766e; --section-tint: #d9f5ed; }
    body.dark .management-insight { --section-accent: #6ccdbd; --section-tint: rgba(15, 118, 110, .22); }

    .admin-view-hidden { display: none !important; }

    /* Shared visual contract for nested sections. */
    .child-section-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel-soft);
    }

    .setup-add-form,
    .add-subsection {
      display: grid;
      gap: 0;
      margin: var(--child-gap) 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel-soft);
    }

    .setup-add-form + .setup-add-form {
      margin-top: var(--child-gap);
    }

    #peopleBody > .add-subsection {
      margin-bottom: 0;
    }

    .add-subsection-body {
      display: grid;
      gap: var(--child-gap);
      min-width: 0;
      padding: var(--section-padding);
    }

    .setup-add-form label:not(.coverage-toggle),
    #addEmployeeBody > label {
      gap: 8px;
    }

    #setupSection,
    #employeesSection,
    #shiftSetupSection,
    #teamsSection,
    #unavailabilityManagementSection,
    #roleManagementSection,
    #accountManagementSection,
    #backupManagementSection,
    #auditHistorySection,
    #managementDateRangeSection,
    #operationalDashboardSection,
    #weeklyPersonnelStatusSection,
    #shiftSwapRequestsSection {
      border-top: 3px solid var(--section-accent);
    }

    #employeesSection .panel-header,
    #shiftSetupSection .panel-header,
    #teamsSection .panel-header,
    #unavailabilityManagementSection .panel-header,
    #roleManagementSection .panel-header,
    #accountManagementSection .panel-header,
    #backupManagementSection .panel-header,
    #auditHistorySection .panel-header,
    #managementDateRangeSection .panel-header,
    #operationalDashboardSection .panel-header,
    #weeklyPersonnelStatusSection .panel-header,
    #shiftSwapRequestsSection .panel-header {
      background: var(--section-tint);
    }

    #myShiftsSection,
    #myUnavailabilitySection,
    #notificationsSection,
    #scheduleSection,
    #coverageSection {
      border-top: 3px solid var(--section-accent);
    }

    #myShiftsSection .panel-header,
    #myUnavailabilitySection .panel-header,
    #notificationsSection .panel-header,
    #scheduleSection .panel-header,
    #coverageSection .panel-header {
      background: var(--section-tint);
    }

    /* Each primary section owns an accent; its nested controls inherit that same family. */
    #setupSection { --section-accent: #c2410c; --section-tint: #ffedd5; --accent: #c2410c; overflow: hidden; }
    #employeesSection,
    #shiftSetupSection,
    #teamsSection,
    #roleManagementSection,
    #accountManagementSection,
    #backupManagementSection,
    #auditHistorySection { --section-accent: #c2410c; --section-tint: #ffedd5; --accent: #c2410c; }
    #managementDateRangeSection { --section-accent: #a21caf; --section-tint: #fae8ff; --accent: #a21caf; }
    #operationalDashboardSection { --section-accent: #1d4ed8; --section-tint: #dbeafe; --accent: #1d4ed8; }
    #weeklyPersonnelStatusSection { --section-accent: #047857; --section-tint: #d1fae5; --accent: #047857; }
    #myShiftsSection { --section-accent: #2563eb; --section-tint: #dbeafe; --accent: #2563eb; }
    #notificationsSection { --section-accent: #9a3412; --section-tint: #ffedd5; --accent: #9a3412; }
    #myUnavailabilitySection,
    #unavailabilityManagementSection { --section-accent: #be123c; --section-tint: #ffe0e7; --accent: #be123c; }
    #shiftSwapRequestsSection { --section-accent: #7c3aed; --section-tint: #ede9fe; --accent: #7c3aed; }
    #scheduleSection,
    #adminActions { --section-accent: #0369a1; --section-tint: #e0f2fe; --accent: #0369a1; }
    #coverageSection { --section-accent: #b45309; --section-tint: #fff0c7; --accent: #b45309; }

    .management-date-range-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: center;
      gap: 10px;
    }

    .management-date-range-controls .schedule-view-controls { justify-content: center; align-self: flex-end; }
    .management-date-form { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) auto; align-items: end; align-self: flex-end; gap: 10px; flex: 1 1 560px; max-width: 680px; }
    .management-date-form label { display: grid; gap: 5px; color: var(--muted); font-size: .78rem; font-weight: 700; }
    .management-date-form .muted { grid-column: 1 / -1; margin: -2px 0 0; }
    .management-date-form .muted:empty { display: none; }

    @media (max-width: 640px) {
      .management-date-form { grid-template-columns: 1fr; width: 100%; max-width: none; }
      .management-date-form button { width: 100%; }
    }

    #setupSection > .toolbar {
      margin: 0;
      padding: 12px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      box-shadow: none;
      background: var(--section-tint);
    }

    .section-deployer {
      cursor: pointer;
    }

    .section-deployer .caret-toggle {
      pointer-events: none;
    }

    .section-deployer:hover {
      background: color-mix(in srgb, var(--section-tint) 82%, var(--panel));
    }

    .section-deployer:focus-visible {
      outline: 2px solid var(--section-accent);
      outline-offset: -2px;
    }

    .admin-actions {
      margin: 0;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: color-mix(in srgb, var(--section-tint) 72%, var(--section-accent));
      padding: 10px var(--section-padding);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .admin-actions-copy { display: grid; gap: 2px; }

    body.dark #adminActions {
      background: rgba(3, 105, 161, .38);
    }

    .auto-fill-actions {
      display: flex;
      align-items: stretch;
      gap: 6px;
    }

    .auto-fill-actions #autoFill { flex: 1 1 auto; }

    #autoFillHelp {
      flex: 0 0 36px;
      width: 36px;
      min-width: 36px;
      padding: 0;
      font-weight: 800;
      font-size: 14px;
    }

    .backup-menu {
      position: relative;
    }

    .backup-menu-panel {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 9;
      display: grid;
      gap: 5px;
      min-width: 170px;
      padding: 6px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .backup-menu-panel button {
      width: 100%;
      text-align: left;
    }

    body.dark #setupSection { --section-accent: #fdba74; --section-tint: rgba(194, 65, 12, .24); --accent: #fdba74; }
    body.dark #employeesSection,
    body.dark #shiftSetupSection,
    body.dark #teamsSection,
    body.dark #roleManagementSection,
    body.dark #accountManagementSection,
    body.dark #backupManagementSection,
    body.dark #auditHistorySection { --section-accent: #fdba74; --section-tint: rgba(194, 65, 12, .24); --accent: #fdba74; }
    body.dark #managementDateRangeSection { --section-accent: #f0abfc; --section-tint: rgba(162, 28, 175, .24); --accent: #f0abfc; }
    body.dark #operationalDashboardSection { --section-accent: #93c5fd; --section-tint: rgba(29, 78, 216, .24); --accent: #93c5fd; }
    body.dark #weeklyPersonnelStatusSection { --section-accent: #6ee7b7; --section-tint: rgba(4, 120, 87, .24); --accent: #6ee7b7; }
    body.dark #myShiftsSection { --section-accent: #7fb3e6; --section-tint: rgba(37, 99, 235, .24); --accent: #7fb3e6; }
    body.dark #notificationsSection { --section-accent: #fdba74; --section-tint: rgba(154, 52, 18, .24); --accent: #fdba74; }

    .notification-list { display: grid; gap: 8px; }
    .notification-card { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--section-tint) 38%, var(--panel)); }
    .notification-card > div { min-width: 0; display: grid; gap: 4px; }
    .notification-card strong { overflow-wrap: anywhere; }
    .notification-card p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.4; }
    .notification-card time { color: var(--muted); font-size: .75rem; }
    body.dark #myUnavailabilitySection,
    body.dark #unavailabilityManagementSection { --section-accent: #f19aab; --section-tint: rgba(190, 24, 93, .22); --accent: #f19aab; }
    body.dark #shiftSwapRequestsSection { --section-accent: #c4b5fd; --section-tint: rgba(124, 58, 237, .24); --accent: #c4b5fd; }
    body.dark #scheduleSection,
    body.dark #adminActions { --section-accent: #7dd3fc; --section-tint: rgba(3, 105, 161, .24); --accent: #7dd3fc; }
    body.dark #coverageSection { --section-accent: #f0c36b; --section-tint: rgba(180, 83, 9, .24); --accent: #f0c36b; }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 20px;
      background: var(--bg);
    }

    .auth-gate.hidden { display: none; }
    body:not(.authenticated) #appShell,
    body:not(.authenticated) #loadDataFile { display: none; }
    .auth-dialog { width: min(420px, 100%); padding: 24px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); display: grid; gap: 14px; }
    .auth-dialog h2 { font-size: 24px; }

    aside {
      border-right: 1px solid var(--line);
      background: var(--aside);
      padding: 18px;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: var(--section-gap);
      min-height: 100vh;
    }

    main {
      min-width: 0;
      padding: 18px;
      display: grid;
      gap: var(--section-gap);
      align-content: start;
    }

    body.admin-mode .schedule-toolbar { order: 0; }
    body.admin-mode #scheduleSection { order: 1; }
    body.admin-mode #unavailabilityManagementSection { order: 3; }
    body.admin-mode #setupSection { order: 4; }

    .brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--child-gap);
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    h1 {
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    h2 {
      font-size: 17px;
      line-height: 1.2;
    }

    h3 {
      font-size: 14px;
      line-height: 1.2;
    }

    .muted {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .toolbar,
    .controls,
    .row,
    .employee-actions,
    .stats {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .toolbar {
      justify-content: space-between;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      padding: var(--section-padding);
    }

    .card-summary {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .card-summary-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
    }

    .shift-flag-row {
      padding-top: 7px;
    }

    .card-details {
      display: grid;
      gap: 8px;
      margin-top: 8px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

    .card-summary .entry-note {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .schedule-toolbar {
      display: grid;
      grid-template-columns: minmax(290px, 1fr) auto minmax(290px, 1fr);
      align-items: start;
      gap: var(--child-gap);
    }

    .week-controls {
      display: grid;
      justify-items: start;
      gap: 8px;
    }

    .account-control {
      justify-self: center;
    }

    .schedule-toolbar .account-control { grid-column: 2; }
    .schedule-toolbar .schedule-actions {
      grid-column: 3;
      grid-row: 1;
      align-self: start;
    }

    .welcome-user {
      align-self: center;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
    }

    .last-login {
      grid-column: 2;
      align-self: center;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    /* Keep Viewer header content anchored at the top of the card. */
    body:not(.admin-mode) .schedule-toolbar {
      align-content: start;
    }

    body:not(.admin-mode) .schedule-toolbar .welcome-user,
    body:not(.admin-mode) .schedule-toolbar .last-login,
    body:not(.admin-mode) .schedule-toolbar .schedule-actions {
      align-self: start;
    }

    .add-subsection-header,
    .account-subsection-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
    }

    /* Nested cards deliberately inherit the accent family of their nearest parent panel. */
    .panel .add-subsection,
    .panel .setup-add-form,
    .panel .child-section-card,
    .panel .account-management-card,
    .panel .operational-dashboard,
    .panel .operational-panel {
      border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 36%, var(--panel));
    }

    .panel .add-subsection-header,
    .panel .account-subsection-header {
      border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--line));
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 74%, var(--panel));
    }

    .panel .operational-metric {
      border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 44%, var(--panel));
    }

    .account-management-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--child-gap);
      align-items: stretch;
    }

    .account-management-card {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: var(--child-gap);
      padding: var(--section-padding);
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--panel-soft);
      height: 100%;
      box-sizing: border-box;
    }

    .account-management-card.danger-card {
      border-color: color-mix(in srgb, var(--danger) 55%, var(--line-strong));
    }

    .account-subsection-body {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    #backupManagementBody .account-management-card,
    #accountManagementBody .account-management-card {
      display: flex;
      flex-direction: column;
    }

    #backupManagementBody .account-subsection-body,
    #accountManagementBody .account-subsection-body {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
    }

    #backupManagementBody .subsection-add-button,
    #accountManagementBody .subsection-add-button {
      margin-top: auto;
    }

    .add-subsection-header h3,
    .account-subsection-header h3 {
      margin: 0;
    }

    .subsection-header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }

    .field-help-button {
      font-weight: 800;
      font-size: 14px;
    }

    .field-help-dialog {
      width: min(560px, calc(100vw - 32px));
      max-height: min(720px, calc(100vh - 32px));
      padding: 0;
      overflow: auto;
      color: var(--ink);
      background: var(--panel);
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .field-help-dialog::backdrop { background: rgba(0, 0, 0, .48); }

    .field-help-dialog-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--child-gap);
      padding: 12px 14px;
      border-bottom: 2px solid var(--line-strong);
      background: var(--panel-soft);
    }

    .field-help-dialog-header h2 { margin: 0; font-size: 18px; }
    .field-help-dialog-body { display: grid; gap: 16px; padding: 18px 16px 16px; }
    .field-help-dialog-body p { margin: 0; color: var(--muted); }
    .field-help-dialog-body dl { display: grid; gap: 8px; margin: 0; }
    .field-help-dialog-body dl > div { display: grid; gap: 5px; }
    .field-help-dialog-body dt { padding-bottom: 5px; border-bottom: 1px solid var(--line); font-weight: 800; }
    .field-help-dialog-body dd { margin: 0; color: var(--muted); line-height: 1.4; }

    .schedule-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .account-menu {
      position: relative;
    }

    .account-menu-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 8;
      width: min(300px, calc(100vw - 32px));
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .account-menu-panel form {
      display: grid;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

    .account-menu-panel button:not(.icon) {
      width: 100%;
    }

    .account-menu-message {
      min-height: 18px;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .schedule-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .schedule-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .schedule-controls-subsection {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin: var(--section-padding);
      padding: var(--section-padding);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel-soft);
    }

    body.admin-mode #scheduleSection .schedule-controls-subsection {
      margin: 0;
      border-top: 0;
      border-radius: 0 0 var(--radius) var(--radius);
    }

    body.admin-mode #scheduleBody {
      gap: 0;
    }

    body.admin-mode #scheduleBody > .panel-body {
      padding-top: 6px;
    }

    @media (min-width: 761px) {
      body:not(.admin-mode) #scheduleSection .schedule-controls-subsection {
        padding: 8px 10px;
        gap: 8px;
      }

      body:not(.admin-mode) #scheduleSection > #scheduleBody > .panel-body {
        padding: 8px;
      }

      body:not(.admin-mode) #scheduleSection .shift-head {
        min-height: 98px;
        padding: 8px 6px;
      }

      body:not(.admin-mode) #scheduleSection .cell {
        min-height: 98px;
        padding: 6px;
        gap: 3px;
      }
    }

    .schedule-view-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .theme-toggle {
      font-size: 19px;
      line-height: 1;
    }

    .mode-toggle {
      min-width: 92px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 700;
    }

    .mode-toggle[aria-pressed="true"] {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
    }

    .caret-toggle {
      font-size: 13px;
      line-height: 1;
    }

    body:not(.dark) .theme-toggle { filter: grayscale(1) brightness(.42); }

    .controls {
      flex: 1;
      justify-content: flex-end;
    }

    .segmented {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      border: 1px solid var(--line-strong);
      background: var(--panel-soft);
      border-radius: 6px;
      padding: 2px;
    }

    .segmented button {
      border: 0;
      min-height: 30px;
      background: transparent;
      padding: 0 10px;
    }

    .segmented button.active {
      background: var(--accent);
      color: #fff;
    }

    .week-nav {
      display: grid;
      grid-template-columns: 36px minmax(180px, 1fr) 36px;
      align-items: center;
      gap: 8px;
      min-width: 290px;
    }

    .week-label {
      text-align: center;
      font-weight: 800;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

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

    .panel-body {
      padding: var(--section-padding);
    }

    body.admin-mode #scheduleBody > #detailsBody {
      padding: 0 var(--section-padding);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 92px;
      gap: 8px;
    }

    .form-grid.wide {
      grid-template-columns: 1fr 1fr;
    }

    .team-shift-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .rotation-heading {
      margin: 2px 0 0;
      font-size: 13px;
    }

    .rotation-shift-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 8px;
    }

    .rotation-shift {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 6px;
      align-items: end;
    }

    @media (max-width: 760px) {
      .setup-add-form,
      .add-subsection { margin: 12px 0; }

      .team-shift-grid { grid-template-columns: 1fr; }
    }

    .employee-list {
      min-height: 0;
      overflow: visible;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
      gap: 8px;
      align-content: start;
      align-items: stretch;
      padding: 0;
    }

    .employee {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 7px;
      padding: 9px;
      display: grid;
      gap: 7px;
      align-content: start;
      height: 100%;
      box-sizing: border-box;
    }

    #employeesSection .panel-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      align-items: start;
    }

    #employeesSection .panel-header > div:first-child {
      min-width: 0;
    }

    #employeesSection .panel-header .controls {
      display: flex;
      flex: 0 0 36px;
      width: 36px;
      min-width: 36px;
      justify-content: end;
    }

    .employee.active {
      border-color: var(--accent);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    .employee-top {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 10px;
    }

    .employee-top > div:first-child {
      display: grid;
      flex: 1 1 auto;
      min-width: 0;
      gap: 7px;
    }

    .employee-top .employee-name {
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
    }

    .employee-name {
      font-weight: 800;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .mini-grid {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 7px;
    }

    .mini-grid > label,
    .employee {
      min-width: 0;
    }

    .day-checks {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
    }

    .day-checks label {
      display: grid;
      place-items: center;
      min-height: 28px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: var(--panel-soft);
      color: var(--muted);
      font-size: 11px;
      cursor: pointer;
    }

    .day-checks input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .day-checks label:has(input:checked) {
      background: rgba(37, 111, 109, .1);
      border-color: rgba(37, 111, 109, .45);
      color: var(--accent);
    }

    .shift-manager {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 10px;
      align-content: start;
      align-items: stretch;
    }

    .shift-card {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 7px;
      padding: 10px;
      display: grid;
      gap: 8px;
      align-content: start;
      height: 100%;
      box-sizing: border-box;
    }

    .shift-card[draggable="true"] { cursor: grab; }
    .shift-card.dragging { opacity: .45; }
    .shift-card.drag-over { outline: 2px solid var(--accent); outline-offset: 2px; }
    .editing-locked { opacity: .62; }

    .color-palette {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .color-swatch {
      width: 24px;
      min-height: 24px;
      padding: 0;
      border-radius: 4px;
      background: var(--swatch-color);
      border: 1px solid rgba(0, 0, 0, .2);
    }

    .color-swatch.selected {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    .tag.shift-color-label {
      color: var(--shift-color);
      border-color: var(--shift-color);
    }
    .shift-head.shift-colored { background: var(--shift-tint); }

    .my-shift-color {
      width: 10px;
      height: 10px;
      flex: 0 0 auto;
      background: var(--shift-color);
      border-radius: 2px;
      display: inline-block;
      margin-right: 7px;
    }

    .shift-card.add {
      background: var(--panel-soft);
      border-style: dashed;
    }

    .shift-fields {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 80px;
      gap: 8px;
    }

    .tag-row {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }

    .unavailability-card .employee-top > div:first-child {
      min-width: 0;
    }

    .tag {
      font-size: 11px;
      font-weight: 800;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 2px 7px;
      background: var(--panel-soft);
      line-height: 1.5;
    }

    .tag.role {
      border-color: rgba(37, 111, 109, .35);
      color: var(--accent);
    }

    .tag.must-fill-tag {
      color: #b91c1c;
      border-color: rgba(185, 28, 28, .45);
      background: rgba(185, 28, 28, .10);
    }

    body.dark .tag.must-fill-tag {
      color: #fca5a5;
      border-color: rgba(252, 165, 165, .5);
      background: rgba(185, 28, 28, .22);
    }

    .calendar-wrap {
      overflow: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .calendar {
      display: grid;
      grid-template-columns: var(--calendar-row-width) repeat(7, minmax(var(--calendar-day-width), 1fr));
    }

    .calendar.mobile-calendar-host {
      display: block;
    }

    .mobile-calendar {
      display: grid;
      gap: var(--child-gap);
      padding: 10px;
    }

    .mobile-day {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: var(--panel);
    }

    .mobile-day.today {
      border-color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .mobile-day.today .mobile-day-header {
      box-shadow: inset 0 3px 0 var(--accent);
      background: color-mix(in srgb, var(--accent) 7%, var(--panel-soft));
    }

    .mobile-day-header {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }

    .mobile-day-header {
      cursor: pointer;
    }

    .mobile-day-header[aria-expanded="false"] {
      border-bottom-color: transparent;
    }

    .mobile-day-header:focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: -3px;
    }

    .mobile-day-meta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .mobile-day-caret {
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 4px;
      font-size: 10px;
      color: var(--muted);
    }

    .mobile-day-title {
      font-size: 14px;
      font-weight: 900;
    }

    .mobile-day-date {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }

    .mobile-day-shifts {
      display: grid;
    }

    .mobile-shift-card {
      border-top: 1px solid var(--line);
      background: var(--shift-tint, var(--panel));
      padding: 10px 12px;
      display: grid;
      gap: 8px;
    }

    .mobile-shift-card:first-child {
      border-top: 0;
    }

    .mobile-shift-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .mobile-shift-title {
      font-size: 13px;
      font-weight: 900;
      line-height: 1.25;
    }

    .mobile-shift-time {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-align: right;
      white-space: nowrap;
    }

    .mobile-shift-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      justify-content: center;
    }

    .mobile-shift-assignments {
      display: grid;
      gap: 3px;
    }

    .mobile-slot-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .mobile-slot-row select {
      flex: 1;
      min-width: 0;
      min-height: 36px;
    }

    .mobile-slot-row.needs-attention select {
      background: rgba(226, 189, 89, .25);
    }

    .mobile-assignment {
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(255, 255, 255, .55);
      min-height: 34px;
      padding: 7px 9px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    body.dark .mobile-assignment {
      background: rgba(17, 24, 22, .42);
    }

    .mobile-assignment.unassigned {
      color: var(--muted);
      font-weight: 500;
    }

    .corner,
    .day-head,
    .shift-head,
    .cell {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .corner,
    .day-head {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--panel-soft);
    }

    .corner {
      left: 0;
      z-index: 3;
      min-height: 58px;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
    }

    .day-head {
      min-height: 58px;
      padding: 9px;
      display: grid;
      gap: 2px;
      align-content: center;
      text-align: center;
    }

    .day-head.today {
      background: color-mix(in srgb, var(--accent) 7%, var(--panel-soft));
      box-shadow: inset 0 3px 0 var(--accent), inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
    }

    .day-name {
      font-size: 13px;
      font-weight: 900;
    }

    .day-date {
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
    }

    .schedule-status {
      display: flex;
      grid-column: 1 / -1;
      grid-row: 2;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 20px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .schedule-status.error { color: var(--danger); }
    .schedule-status.saving { color: var(--warning); }

    .schedule-status button {
      min-height: 28px;
      padding-inline: 8px;
      font-size: 11px;
    }

    .shift-head {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--panel-soft);
      min-height: 112px;
      padding: 10px 8px;
      display: grid;
      align-content: start;
      gap: 5px;
    }

    .shift-title {
      font-weight: 900;
      font-size: 13px;
    }

    .shift-time {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .shift-head .tag {
      align-self: center;
      font-size: 9px;
      font-weight: 500;
      line-height: 1.25;
      padding: 1px 5px;
      border-radius: 0;
    }

    .cell {
      min-height: 112px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 3px;
      background: var(--panel);
    }

    .cell.today {
      background: color-mix(in srgb, var(--accent) 4%, var(--panel));
      box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
    }

    .cell.off {
      background: var(--panel-soft);
      color: var(--muted);
      justify-content: center;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
    }

    .cell.off.today {
      background: color-mix(in srgb, var(--accent) 4%, var(--panel-soft));
    }

    .slot {
      display: grid;
      gap: 3px;
      padding: 2px 3px;
      border: 1px solid transparent;
      border-radius: 4px;
    }

    .slot select {
      min-height: 32px;
      padding: 5px 7px;
      font-size: 13px;
    }

    .slot.has-warning {
      background: #fff4cf;
      border-color: #d6ad4a;
    }

    body.dark .slot.has-warning {
      background: rgba(214, 173, 74, .18);
      border-color: rgba(232, 189, 108, .55);
    }

    .assignment-text {
      min-height: 32px;
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-wrap: anywhere;
      font-size: 13px;
      font-weight: 700;
    }

    .assignment-text.unassigned {
      color: var(--muted);
      font-weight: 500;
    }

    .mobile-assignment > span:last-child,
    .assignment-text > span:last-child {
      min-width: 0;
    }

    .slot-assignment-row {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .slot-assignment-row select {
      min-width: 0;
      flex: 1;
    }

    .remove-slot {
      width: 32px;
      min-width: 32px;
      min-height: 32px;
      border-radius: 4px;
      padding: 0;
      color: var(--danger);
    }

    .add-slot {
      min-height: 30px;
      font-size: 12px;
      border-style: dashed;
      color: var(--accent);
    }

    .cell > .add-slot {
      margin-top: auto;
      width: 100%;
    }

    .notice-list {
      display: grid;
      gap: 8px;
    }

    .warning-group {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 6px;
    }

    .warning-group summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      padding: 9px 10px;
      font-size: 13px;
      font-weight: 800;
    }

    .warning-group .notice-list {
      padding: 0 10px 10px;
    }

    .notice {
      border-left: 4px solid var(--warning);
      background: #fff8e9;
      padding: 9px 10px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1.35;
    }

    .notice.ok {
      border-left-color: var(--success);
      background: #edf8f1;
    }

    body.dark .notice {
      background: rgba(232, 189, 108, .12);
    }

    body.dark .notice.ok {
      background: rgba(115, 215, 154, .12);
    }

    .stats {
      align-items: stretch;
    }

    .stat {
      min-width: 120px;
      flex: 1;
      position: relative;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
    }

    .stat strong {
      display: block;
      font-size: 20px;
      line-height: 1.1;
    }

    .stat span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .stat button {
      position: absolute;
      top: 50%;
      right: 8px;
      margin: 0;
      transform: translateY(-50%);
    }

    .coverage-disclosure {
      cursor: pointer;
    }

    .coverage-disclosure .caret-toggle {
      pointer-events: none;
    }

    .coverage-disclosure:focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: 2px;
    }

    .stat.needs-attention {
      background: #fff4cf;
      border-color: #d6ad4a;
    }

    .stat.all-clear {
      background: #e4f3e9;
      border-color: #74ad82;
    }

    body.dark .stat.needs-attention {
      background: rgba(214, 173, 74, .18);
      border-color: rgba(232, 189, 108, .55);
    }

    body.dark .stat.all-clear {
      background: rgba(115, 215, 154, .14);
      border-color: rgba(115, 215, 154, .5);
    }

    .availability-chart {
      margin: 0;
      padding: 0;
      min-width: 0;
      max-width: 100%;
      border: 0;
      background: transparent;
    }

    .availability-chart-filter {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 8px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .availability-role-options {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      gap: 5px;
    }

    .availability-role-option {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 26px;
      padding: 2px 7px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: var(--panel);
      color: var(--ink);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .availability-role-option:has(input:checked) {
      border-color: var(--accent);
      background: rgba(37, 111, 109, .12);
      color: var(--accent);
    }

    .availability-role-option input {
      margin: 0;
      width: 14px;
      min-width: 14px;
      height: 14px;
      min-height: 14px;
      accent-color: var(--accent);
    }

    .availability-calendar-scroll {
      margin-top: 10px;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch;
    }

    .availability-week-calendar {
      width: max(100%, 700px);
      min-width: 700px;
      box-sizing: border-box;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 7px;
    }

    #weeklyPersonnelStatusSection,
    #weeklyPersonnelStatusBody,
    #availabilityChart {
      min-width: 0;
      max-width: 100%;
    }

    #weeklyPersonnelStatusSection,
    #weeklyPersonnelStatusBody {
      overflow: hidden;
    }

    #weeklyPersonnelStatusSection .panel-header > div:first-child {
      min-width: 0;
    }

    .weekly-personnel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    .weekly-personnel-controls .segmented {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .availability-week-header-row,
    .availability-week-days,
    .availability-range-layer {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .availability-weekday {
      display: grid;
      gap: 2px;
      padding: 6px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-align: center;
    }

    .availability-week-date {
      font-size: 10px;
      font-weight: 700;
    }

    .availability-weekday:last-child {
      border-right: 0;
    }

    .availability-week-surface {
      position: relative;
    }

    .availability-week-days {
      min-height: calc(72px + var(--availability-lane-height));
    }

    .availability-week-day {
      padding: 6px;
      border-right: 1px solid var(--line);
      background: var(--panel);
    }

    .availability-week-day:last-child {
      border-right: 0;
    }

    .availability-week-day.today {
      background: color-mix(in srgb, var(--accent) 7%, var(--panel));
      box-shadow: inset 0 0 0 2px var(--accent);
    }

    .availability-range-layer {
      position: absolute;
      right: 0;
      bottom: 5px;
      left: 0;
      grid-template-rows: repeat(var(--availability-lanes), 18px);
      gap: 2px 0;
      pointer-events: none;
    }

    .availability-range-bar {
      min-width: 0;
      margin-inline: 1px;
    }

    .availability-range-fill {
      min-width: 0;
      height: 100%;
      margin-right: var(--range-end);
      margin-left: var(--range-start);
      padding: 1px 6px;
      overflow: hidden;
      border: 1px solid var(--team-color);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      line-height: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: auto;
    }

    .availability-range-bar.scheduled {
      color: #fff;
    }

    .availability-range-bar.scheduled .availability-range-fill {
      background: color-mix(in srgb, var(--team-color) 78%, #000);
    }

    .availability-range-bar.available {
      color: var(--ink);
    }

    .availability-range-bar.available .availability-range-fill {
      background: color-mix(in srgb, var(--team-color) 18%, var(--panel));
    }

    .availability-range-bar.unavailable {
      color: #fff;
    }

    .availability-range-bar.unavailable .availability-range-fill {
      border-color: #fecaca;
      background: repeating-linear-gradient(135deg, #b91c1c 0 6px, #ef4444 6px 12px);
      box-shadow: inset 0 0 0 1px #7f1d1d;
    }

    .availability-week-day-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 4px;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }

    .availability-week-day-header strong {
      color: var(--accent);
      font-size: 10px;
      text-align: right;
    }

    .availability-calendar-group {
      display: grid;
      gap: 3px;
      margin-top: 7px;
    }

    .availability-calendar-group > span {
      color: var(--accent);
      font-size: 10px;
      font-weight: 800;
    }

    .availability-calendar-group.scheduled > span {
      color: var(--muted);
    }

    .availability-calendar-people {
      display: grid;
      gap: 3px;
    }

    .availability-calendar-person {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
    }

    .availability-calendar-person > span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .availability-calendar-person .schedule-team-marker {
      width: 14px;
      height: 14px;
      flex-basis: 14px;
      border-radius: 3px;
      font-size: 8px;
    }

    .availability-calendar-person.scheduled {
      color: var(--muted);
    }

    .availability-chart-scroll {
      overflow-x: auto;
      padding-top: 10px;
    }

    .availability-chart-grid {
      display: grid;
      grid-template-columns: 32px minmax(440px, 1fr);
      gap: 6px;
      min-width: 478px;
    }

    .availability-y-axis {
      height: 145px;
      display: flex;
      flex-direction: column;
      align-items: end;
      justify-content: space-between;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .availability-bars {
      height: 145px;
      display: grid;
      grid-template-columns: repeat(var(--availability-days), minmax(0, 1fr));
      align-items: end;
      gap: 6px;
      padding: 0 4px;
      border-left: 1px solid var(--line-strong);
      border-bottom: 1px solid var(--line-strong);
    }

    .availability-bar-column {
      position: relative;
      height: 100%;
      min-width: 0;
    }

    .availability-bar {
      position: absolute;
      right: 12%;
      bottom: 0;
      left: 12%;
      height: var(--bar-height);
      min-height: 0;
      border: 1px solid #0f766e;
      border-radius: 3px 3px 0 0;
      background: #3c9a8d;
    }

    .availability-value {
      position: absolute;
      bottom: calc(var(--bar-height) + 4px);
      left: 0;
      width: 100%;
      color: var(--ink);
      font-size: 11px;
      font-weight: 800;
      text-align: center;
    }

    .availability-x-spacer { min-height: 1px; }

    .availability-x-axis {
      display: grid;
      grid-template-columns: repeat(var(--availability-days), minmax(0, 1fr));
      gap: 6px;
      padding: 5px 4px 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      text-align: center;
    }

    .availability-x-axis span { min-width: 0; }

    .availability-bar-column {
      cursor: pointer;
    }

    .availability-bar-column.selected .availability-bar {
      background: var(--accent-2);
      border-color: var(--accent-2);
    }

    .availability-detail {
      display: grid;
      gap: 6px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

    .availability-detail h4 {
      margin: 0;
      font-size: 13px;
    }

    .availability-employee-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .availability-employee-list .tag {
      font-size: 11px;
    }

    .availability-employee {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .availability-employee .schedule-team-marker {
      width: 14px;
      height: 14px;
      flex-basis: 14px;
      border-radius: 3px;
      font-size: 8px;
    }

    .my-shifts-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      align-items: stretch;
    }

    .my-shifts-actions {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-bottom: 0;
    }

    .live-calendar-link {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 6px;
      align-items: center;
      margin-top: 8px;
    }

    .live-calendar-link input {
      min-width: 0;
      font-size: 12px;
    }

    .my-shift-day {
      display: grid;
      align-content: start;
      gap: 5px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel-soft);
      padding: 9px;
    }

    .my-shift-day-date {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      border-bottom: 1px solid var(--line);
      padding-bottom: 5px;
    }

    .my-shift-entry {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 26px;
      font-size: 13px;
    }

    .my-shift-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 800;
    }

    .my-shift-time {
      margin-left: auto;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .time-away {
      display: grid;
      gap: 8px;
      margin: var(--child-gap) 0 0;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel-soft);
    }

    .time-away h3 {
      margin: 0;
      font-size: 14px;
    }

    .time-away.add-subsection { gap: 0; }

    .time-away > [data-unavailability-disclosure-body] {
      display: grid;
      gap: 8px;
      padding: var(--section-padding);
    }

    .unavailability-schedule-embedded > [data-unavailability-month-content] {
      padding: var(--section-padding);
    }

    #myUnavailabilityBody > .time-away:first-child {
      margin-top: 0;
    }

    #myUnavailabilityBody > .time-away.add-subsection:first-child {
      gap: 0;
      width: 100%;
      box-sizing: border-box;
      margin: 0 0 var(--child-gap);
      padding: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }

    #myUnavailabilityBody > .unavailability-schedule-embedded:first-child,
    #unavailabilityManagementBody > .unavailability-schedule-embedded:first-child {
      margin-top: 0;
    }

    #myUnavailabilityBody > .time-away.add-subsection,
    #unavailabilityManagementBody > .setup-add-form {
      width: 100%;
      box-sizing: border-box;
      margin: var(--child-gap) 0;
      border-radius: var(--radius);
    }

    @media (max-width: 760px) {
      #myUnavailabilityBody > .time-away.add-subsection:first-child {
        width: 100%;
        margin: 0 0 var(--child-gap);
      }
    }

    .time-away-form {
      display: grid;
      grid-template-columns: minmax(110px, .55fr) minmax(0, 1fr) minmax(0, 1fr) auto;
      align-items: end;
      gap: 8px;
    }

    .unavailability-records {
      display: grid;
      gap: 8px;
    }

    .time-away-form label {
      display: grid;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .time-away-date-time {
      display: grid;
      grid-template-columns: minmax(132px, 1fr) minmax(108px, .8fr);
      gap: 5px;
    }

    .military-time-input {
      min-width: 0;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .time-away-form button {
      white-space: nowrap;
    }

    .time-away-entry {
      display: flex;
      align-items: center;
      gap: 8px;
      border-top: 1px solid var(--line);
      padding-top: 6px;
      font-size: 13px;
    }

    .time-away-entry span {
      color: var(--muted);
      font-size: 12px;
    }

    .time-away-entry .icon {
      margin-left: auto;
    }

    .unavailability-form {
      display: grid;
      grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr) auto;
      align-items: end;
      gap: 8px;
    }

    .unavailability-form label {
      display: grid;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .unavailability-form .unavailability-note {
      grid-column: span 2;
    }

    .unavailability-form textarea {
      min-height: 38px;
      resize: vertical;
    }

    .unavailability-form > .subsection-add-button {
      grid-column: 1 / -1;
      justify-self: center;
    }

    .unavailability-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 8px;
      align-content: start;
      align-items: stretch;
    }

    .unavailability-card {
      align-content: start;
      height: 100%;
    }

    .unavailability-card .unavailability-person-name {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .unavailability-card .entry-note {
      min-height: 40px;
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .unavailability-card.is-editing {
      border-color: var(--accent);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    body.dark input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1) brightness(1.5);
    }

    .drawer {
      display: grid;
      gap: var(--child-gap);
    }

    .hidden {
      display: none !important;
    }

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

      .shell.sidebar-collapsed {
        grid-template-columns: 1fr;
      }

      .shell.sidebar-collapsed main {
        grid-column: auto;
      }

      aside {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .employee-list { max-height: none; }

      .toolbar {
        align-items: stretch;
      }

      .controls,
      .toolbar {
        display: grid;
      }

      .week-nav {
        min-width: 0;
      }

      .schedule-toolbar {
        grid-template-columns: 1fr auto;
      }

      .account-control {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      .schedule-toolbar .account-control { grid-column: 1 / -1; }
      .schedule-toolbar .schedule-actions { grid-column: 2; grid-row: 1; align-self: start; }
      .last-login { grid-column: 1; }

      .schedule-controls-subsection { grid-template-columns: minmax(0, 1fr) auto; }

      #myShiftsSection > .panel-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 36px;
        align-items: center;
      }

      #myShiftsSection > .panel-header > .controls {
        display: flex;
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px;
        justify-content: end;
      }

      #myShiftsSection > .panel-header > .controls button {
        width: 36px;
      }
    }

    @media (max-width: 760px) {
      button.icon.caret-toggle {
        width: 36px !important;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        justify-self: end;
        font-size: 13px;
      }

      #setupSection > .toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 36px;
        align-items: center;
      }

      #setupSection > .toolbar > .controls {
        display: flex;
        width: 36px;
        min-width: 36px;
        justify-content: end;
      }

      .availability-chart {
        margin-top: 8px;
        padding: 8px;
      }

      .availability-chart-scroll {
        overflow: visible;
        padding-top: 8px;
      }

      .availability-chart-grid {
        grid-template-columns: 28px minmax(0, 1fr);
        min-width: 0;
        gap: 5px;
      }

      .availability-y-axis,
      .availability-bars {
        height: 145px;
      }

      .availability-y-axis {
        font-size: 9px;
      }

      .availability-bars,
      .availability-x-axis {
        gap: 3px;
        padding-inline: 2px;
      }

      .availability-value {
        font-size: 10px;
      }

      .availability-x-axis {
        font-size: 9px;
        line-height: 1.2;
      }

      main {
        padding: var(--section-padding);
        gap: var(--section-gap);
      }

      .toolbar,
      .panel-header {
        align-items: stretch;
      }

      .toolbar > .controls,
      .panel-header > .controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .toolbar > .controls button,
      .panel-header > .controls button {
        width: 100%;
      }

      .schedule-toolbar {
        grid-template-columns: 1fr;
      }

      .schedule-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .schedule-actions button { width: 100%; }

      body:not(.admin-mode) .schedule-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }

      body:not(.admin-mode) .schedule-toolbar .welcome-user {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body:not(.admin-mode) .schedule-toolbar .last-login {
        display: none;
      }

      body:not(.admin-mode) .schedule-toolbar .schedule-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        width: auto;
        justify-self: end;
        align-items: center;
        gap: 6px;
      }

      body:not(.admin-mode) .schedule-toolbar .schedule-actions > button,
      body:not(.admin-mode) .schedule-toolbar .schedule-actions > .account-menu > button {
        width: 36px;
      }

      body:not(.admin-mode) .schedule-toolbar .schedule-actions > .mode-toggle {
        width: auto;
        min-width: 92px;
      }

      /* Keep identity details left and header controls right on mobile. */
      .schedule-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }

      .schedule-toolbar .welcome-user {
        grid-column: 1;
        grid-row: 1;
      }

      .schedule-toolbar .last-login,
      body:not(.admin-mode) .schedule-toolbar .last-login {
        display: block;
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        text-align: left;
      }

      /* Shared-save feedback is always a full-width line below the header controls. */
      .schedule-toolbar .schedule-status {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: stretch;
        flex-wrap: wrap;
        text-align: center;
      }

      .time-away-form {
        grid-template-columns: 1fr;
      }

      .unavailability-form {
        grid-template-columns: 1fr;
      }

      .unavailability-form .unavailability-note {
        grid-column: auto;
      }

      .schedule-controls-subsection {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .schedule-date-nav,
      .schedule-view-controls,
      .schedule-view-controls > button,
      .schedule-view-controls > .segmented,
      .schedule-view-controls > .segmented button {
        width: 100%;
      }

      .schedule-view-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .schedule-view-controls > .segmented {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .admin-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .admin-actions .controls {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        justify-content: stretch;
      }

      .admin-actions .auto-fill-actions {
        width: 100%;
      }

      .account-control {
        grid-column: auto;
        grid-row: auto;
      }

      .schedule-toolbar .account-control,
      .schedule-toolbar .schedule-actions { grid-column: auto; }
      .last-login { grid-column: auto; }

      /* Use one compact mobile control layout in both Viewer and Admin modes. */
      .schedule-toolbar .schedule-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        width: auto;
        justify-self: end;
        align-items: center;
        gap: 6px;
      }

      .schedule-toolbar .schedule-actions > button,
      .schedule-toolbar .schedule-actions > .account-menu > button {
        width: 36px;
      }

      .schedule-toolbar .schedule-actions > .mode-toggle {
        width: auto;
        min-width: 92px;
      }

      .week-nav {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
      }

      .panel-body {
        padding: 8px;
      }

      .calendar-wrap {
        border-radius: 6px;
      }

      .calendar {
        --calendar-row-width: 78px;
        --calendar-day-width: 96px;
      }

      .corner,
      .day-head {
        min-height: 52px;
        padding: 6px 4px;
      }

      .day-name { font-size: 12px; }
      .day-date { font-size: 11px; }

      .shift-head {
        min-height: 96px;
        padding: 7px 5px;
      }

      .shift-title { font-size: 12px; }
      .shift-time { font-size: 10px; }

      .cell {
        min-height: 96px;
        padding: 6px;
        gap: 3px;
      }

      .slot select {
        font-size: 12px;
        min-height: 34px;
      }

      .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stat { min-width: 0; }
      .operational-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .operational-grid { grid-template-columns: 1fr; }

      body:not(.admin-mode) .calendar {
        --calendar-row-width: 94px;
        --calendar-day-width: 128px;
      }

      body:not(.admin-mode) .calendar-wrap {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 94px;
      }

      body:not(.admin-mode) .day-head,
      body:not(.admin-mode) .cell {
        scroll-snap-align: start;
      }

      body:not(.admin-mode) .assignment-text {
        min-height: 42px;
        padding: 3px 1px;
        font-size: 12px;
        line-height: 1.3;
      }

      body:not(.admin-mode) .my-shifts-list,
      body:not(.admin-mode) .unavailability-list {
        grid-template-columns: 1fr;
      }

      body:not(.admin-mode) .calendar-wrap {
        overflow: visible;
      }

      .calendar.mobile-calendar-host {
        min-width: 0;
      }
    }

    @media (max-width: 620px) {
      .operational-analytics-grid { grid-template-columns: 1fr; }
      .operational-group > summary { grid-template-columns: minmax(0, 1fr) 16px; }
      .operational-group-count { display: none; }
      .operational-group-content { grid-template-columns: 1fr; padding: 8px; }
      .operational-panel-wide { grid-column: auto; }
      .operational-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .operational-pattern-columns { grid-template-columns: 1fr; }
      .workspace-tabs button {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 8px;
      }
    }

    @media (max-width: 480px) {
      main { padding: 8px; }

      h1 { font-size: 20px; }
      h2 { font-size: 16px; }

      .toolbar,
      .panel-header {
        padding: 10px;
      }

      .toolbar > .controls,
      .panel-header > .controls {
        grid-template-columns: 1fr;
      }

      .schedule-actions { grid-template-columns: 1fr; }

      body:not(.admin-mode) main {
        padding-right: max(8px, env(safe-area-inset-right));
        padding-left: max(8px, env(safe-area-inset-left));
      }

      body:not(.admin-mode) .schedule-toolbar .last-login {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        text-align: left;
      }

      .schedule-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
      }

      .schedule-toolbar .welcome-user {
        grid-column: 1;
        grid-row: 1;
      }

      .schedule-toolbar .last-login,
      body:not(.admin-mode) .schedule-toolbar .last-login {
        grid-column: 1;
        grid-row: 2;
      }

      .schedule-toolbar .schedule-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
      }

      .schedule-toolbar .schedule-status {
        grid-column: 1 / -1;
        grid-row: 3;
      }

      body:not(.admin-mode) .schedule-header {
        gap: 8px;
      }

      .week-nav {
        min-width: 0;
      }

      body:not(.admin-mode) .calendar {
        --calendar-row-width: 88px;
        --calendar-day-width: 124px;
      }

      .mobile-calendar {
        gap: 10px;
        padding: 8px;
      }

      .mobile-day-header,
      .mobile-shift-card {
        padding-inline: 10px;
      }

      .mobile-day-title,
      .mobile-shift-title {
        font-size: 12px;
      }

      .mobile-assignment {
        min-height: 32px;
        padding: 6px 8px;
        font-size: 12px;
      }

      body:not(.admin-mode) .shift-head {
        min-height: 104px;
      }

      .calendar {
        --calendar-row-width: 72px;
        --calendar-day-width: 92px;
      }

      .day-checks { gap: 3px; }
      .day-checks label { min-height: 26px; font-size: 10px; }
      .form-grid,
      .form-grid.wide,
      .mini-grid { grid-template-columns: 1fr; }
      .stats { grid-template-columns: 1fr; }
      .operational-summary { grid-template-columns: 1fr; }
      .backup-preview-grid { grid-template-columns: 1fr; }
    }

    @media print {
      @page {
        size: landscape;
        margin: .2in;
      }

      body {
        background: #fff;
      }

      aside,
      .toolbar,
      .setup-group,
      .panel.details,
      #myShiftsSection,
      #myUnavailabilitySection,
      #unavailabilityManagementSection,
      .add-slot,
      .remove-slot {
        display: none !important;
      }

      main {
        padding: 0;
      }

      .panel,
      .calendar-wrap {
        border: 0;
        box-shadow: none;
      }

      .calendar {
        min-width: 0;
        width: 100%;
        grid-template-columns: 54px repeat(14, minmax(0, 1fr)) !important;
        font-size: 7px;
      }

      .corner,
      .day-head,
      .shift-head,
      .cell {
        border-color: #999;
      }

      .corner,
      .day-head {
        min-height: 32px;
        padding: 3px;
        font-size: 8px;
      }

      .shift-head {
        min-height: 38px;
        padding: 4px;
        font-size: 7px;
      }

      .shift-title { font-size: 8px; }
      .shift-time { font-size: 7px; }

      .cell {
        min-height: 38px;
        padding: 3px;
        gap: 2px;
      }

      .cell.off { font-size: 6px; }
      .slot { gap: 1px; }
      .remove-slot { display: none; }

      .slot select {
        min-height: 14px;
        padding: 0;
        font-size: 6px;
        line-height: 1.1;
        white-space: normal;
        color: #000;
        font-weight: 700;
      }

      .assignment-text {
        min-height: 14px;
        color: #000;
        font-size: 6px;
        font-weight: 700;
      }

      select {
        border: 0;
        appearance: none;
        padding-left: 0;
      }

      .shift-seat-count,
      .shift-periodicity {
        display: none !important;
      }

      .schedule-controls-subsection,
      #adminActions { display: none !important; }
      .schedule-status { display: none !important; }
      .print-date { display: inline-flex; font-weight: 700; color: #000; }

    }