:root{
  --bg: #f7f7f7;
  --text: #111;
  --muted: #666;

  --card: #ffffff;
  --card-border: #d9d9d9;
  --card-hover: #cfd8dc;

  --sr-green: #16a34a;

  /* severity */
  --err-bg: rgba(220, 53, 69, 0.10);
  --err-border: rgba(220, 53, 69, 0.35);

  --warn-bg: rgba(255, 193, 7, 0.12);
  --warn-border: rgba(255, 193, 7, 0.40);

  --info-bg: rgba(13, 110, 253, 0.10);
  --info-border: rgba(13, 110, 253, 0.35);
}

* { box-sizing: border-box; }

*:focus {
  outline: none !important;
}

*:focus-visible {
  outline: none !important;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* =========================
   Layout
   ========================= */
.container {
  max-width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 18px 24px;
}

h1 {
  margin: 0 0 16px 0;
}

h2 {
  margin: 0 0 10px 0;
}

/* =========================
   Nav
   ========================= */
.navbar {
  background: white;
  border-bottom: 1px solid #e6e6e6;
  flex-shrink: 0;
}

[data-theme="dark"] .navbar {
  background: #1a1a1a;
  border-bottom-color: #333;
}

.navbar-inner {
  padding: 10px 24px;
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Branding */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 14px;
  text-decoration: none;
}

.brand-text {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.brand-accent {
  color: #00D470;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 4px);
  gap: 2px;
}

.dot {
  width: 4px;
  height: 4px;
  background-color: #ccc;
  border-radius: 1px;
}

.dot.accent {
  background-color: var(--sr-green);
}

.navbar a:not(.brand) {
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

.navbar a:not(.brand):hover {
  background: rgba(0,0,0,0.05);
}

[data-theme="dark"] .navbar a:not(.brand):hover {
  background: rgba(255,255,255,0.05);
}

.navbar a.active {
  background: rgba(22, 163, 74, 0.15);
  border: 1px solid rgba(22, 163, 74, 0.40);
  color: var(--sr-green) !important;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.15);
}

/* Rest of the file continues... */
/* =========================
   Controls / Buttons / Inputs
   ========================= */

/* Remove up/down arrows (spinners) from number inputs */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

button:focus {
  outline: none !important;
}

button:hover {
}

button:not(#generate-btn):hover {
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Generate Rota button — bright green (always) */
#generate-btn {
  background: #00D470 !important;
  color: white !important;
  border: none !important;
  font-weight: 700 !important;
}

#generate-btn:hover {
  background: #00D470 !important;
  border: none !important;
  color: white !important;
}

#generate-btn:disabled {
  background: #ccc !important;
  color: #666 !important;
}

input, select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: white;
  outline: none;
}

input:focus, select:focus {
  border-color: var(--sr-green);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}

/* Override blue focus for demand modal inputs */
#demandModal input:focus,
.page-dashboard #demandModal input:focus,
input.dash-demand-input:focus,
.dash-demand-input:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.20) !important;
  outline: none !important;
}

/* =========================
   Cards / Grid
   ========================= */
.card {
  background: var(--card);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--card-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* legacy-ish "hover chrome" */
.card:hover {
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hidden { display: none; }

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

/* Summary boxes used on Dashboard */
.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.summary > div {
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 10px;
}

/* =========================
   Tables
   ========================= */
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  vertical-align: top;
}

th:last-child, td:last-child {
  border-right: none;
}

th {
  background: #f5f5f5;
  font-size: 13px;
}

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

tr:hover td {
  background: rgba(0,0,0,0.02);
}

/* Rota table — fixed column widths, rows scale or lock based on employee count */
#rota {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#rota th:first-child,
#rota td:first-child {
  width: 140px;
}

/* Total Hours and Weekly Cost columns */
#rota th:nth-last-child(-n+2),
#rota td:nth-last-child(-n+2) {
  width: 80px;
  font-size: 11px;
  vertical-align: middle;
  text-align: center;
}

#rota td {
  height: auto;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  padding: 6px 4px;
}

#rota td:first-child {
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 10px;
  vertical-align: middle;
}

#rota th {
  text-align: center;
  padding: 8px 6px;
  font-size: 12px;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
}

#rota th:first-child {
  text-align: left;
  padding-left: 10px;
}

.rota-cell-empty {
  background: #fafafa;
}

/* Proactive day-off / unavailability shading — signals before a manager tries
   to assign someone who's off, rather than only via a confirm dialog after.
   Uses an absolutely-positioned ::after overlay (same technique as
   .rota-cell-ineligible/.rota-cell-orphan below) rather than a background-image
   on the <td> itself — a background-image there was found to be unreliable:
   killed outright for empty cells by .rota-cell-empty's later, equal-specificity
   `background: transparent !important`, and nearly fully occluded on non-empty
   cells by opaque inline backgrounds on .shift-view-inner/.role-seg children. */
.rota-cell-dayoff {
  position: relative;
}
.rota-cell-dayoff::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.06) 6px,
    transparent 6px,
    transparent 12px
  );
}
[data-theme="dark"] .rota-cell-dayoff::after {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.07),
    rgba(255,255,255,0.07) 6px,
    transparent 6px,
    transparent 12px
  );
}

/* Demand indicator row in rota table */
.rota-demand-row td {
  background: #f8f4e8 !important;
  font-size: 10px;
  font-weight: 600;
  color: #8a7540;
  text-align: center;
  padding: 3px 4px !important;
  border-bottom: 2px solid #e8e0c8 !important;
  cursor: help;
}

.rota-demand-label {
  text-align: left !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-left: 10px !important;
}

.rota-demand-cell {
  font-family: monospace;
  letter-spacing: -0.02em;
}

.rota-cell-inner {
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.rota-cell-inner br {
  display: block;
  content: "";
}

/* =========================
   Fieldsets / Forms
   ========================= */
fieldset {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}

legend {
  padding: 0 8px;
  color: #333;
  font-weight: 700;
  font-size: 13px;
}

label {
  display: block;
  margin: 8px 0;
}

input[type="checkbox"] {
  accent-color: #16a34a;
}

label input[type="checkbox"] {
  margin-right: 8px;
}

/* =========================
   Modal
   ========================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999;
}

.modal-content {
  width: 100%;
  max-width: 720px;
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  padding: 16px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* =========================
   Health & Violations Panel
   ========================= */

.health-group {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
}

.health-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid #e8e8e8;
}

.health-group-title--ok {
  background: #f0faf0;
  color: #1a7a1a;
}

.health-group-title--violated {
  background: #fdf8ee;
  color: #7a5a00;
}

.health-group-icon {
  font-size: 14px;
  line-height: 1;
}

.health-group-count {
  font-weight: 400;
  color: inherit;
  opacity: 0.75;
}

.health-group-body {
  padding: 4px 0;
}

.health-row {
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid #f4f4f4;
}

.health-row:last-child {
  border-bottom: none;
}

.health-row--ok {
  color: #1fa81f;
  font-weight: 500;
}

.health-row--violated {
  font-weight: 500;
  word-break: break-word;
}

/* Collapsible respected group */
.health-group--collapsible {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
}

.health-group-summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.health-group-summary::-webkit-details-marker {
  display: none;
}

.health-group-chevron {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.15s;
}

.health-group-chevron::after {
  content: "▶";
  color: inherit;
  opacity: 0.5;
}

details[open] > .health-group-summary .health-group-chevron::after {
  content: "▼";
}
.violation-block {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.violation-title {
  background: #fafafa;
  padding: 10px 12px;
  font-weight: 800;
  border-bottom: 1px solid #eeeeee;
}

.violation-body {
  padding: 10px 12px;
}

.violation-line {
  padding: 8px 10px;
  border-radius: 10px;
  margin: 8px 0;
  border: 1px solid #eee;
}

.violation-line.error {
  background: var(--err-bg);
  border-color: var(--err-border);
}

.violation-line.warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.violation-line.info {
  background: var(--info-bg);
  border-color: var(--info-border);
}

/* =========================
   Progress
   ========================= */
progress {
  width: 100%;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #dedede;
  background: #f4f4f4;
}

/* WebKit */
progress::-webkit-progress-bar {
  background: #f4f4f4;
  border-radius: 999px;
}
progress::-webkit-progress-value {
  background: var(--sr-green);
  border-radius: 999px;
}

/* Firefox */
progress::-moz-progress-bar {
  background: var(--sr-green);
  border-radius: 999px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .summary { grid-template-columns: 1fr 1fr; }
  .controls { flex-wrap: wrap; }
}

/* ============================================================
   Constraints page — redesigned to match app design language
   ============================================================ */

/* ── Top toolbar — mirrors .emp-toolbar exactly ── */
.constraints-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  margin-bottom: 14px;
}

.constraints-toolbar input {
  min-width: 220px;
  flex: 1;
}

.constraints-save-status {
  margin-left: auto;
  white-space: nowrap;
}

/* ── Section header ── */
.constraints-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

/* ── Help button ── */
.help-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 14px;
  padding: 0;
  flex-shrink: 0;
  color: var(--muted);
}

.help-btn:hover {
  border-color: var(--sr-green);
  color: var(--sr-green);
}

/* ── Category tabs ── */
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tab-btn {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.tab-btn:hover {
  background: #f5f5f5;
}

.tab-btn.active {
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.45);
  color: var(--sr-green);
}

/* ── Tab panels ── */
.tab-panels { margin-top: 2px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Constraints list ── */
.constraints-list {
  display: flex;
  flex-direction: column;
}

/* ── Constraint row — styled like a clean list item ── */
.constraint-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s;
}

.constraint-row:last-child {
  border-bottom: none;
}

.constraint-row:hover {
  background: #fafafa;
}

/* ── Toggle switch (replaces plain checkbox) ── */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  cursor: pointer;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.2s;
}

.toggle-slider::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.toggle input:checked + .toggle-slider {
  background: var(--sr-green);
}

.toggle input:checked + .toggle-slider::after {
  transform: translateX(16px);
}

/* ── Constraint content — prose + inline inputs ── */
.constraint-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.constraint-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* ── Inline param inputs — compact, styled to match app inputs ── */
.constraint-input {
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 13px;
  background: white;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.constraint-input:focus {
  border-color: var(--sr-green);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}

.constraint-input--num {
  width: 70px;
  text-align: center;
  -moz-appearance: textfield;
}

.constraint-input--num::-webkit-inner-spin-button,
.constraint-input--num::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.constraint-input--time { width: 100px; }
.constraint-input--text { width: 140px; }

/* ── Help modal — uses existing .modal + .modal-content ── */
.help-modal-body {
  padding: 4px 0 8px;
  line-height: 1.65;
  color: #444;
  font-size: 14px;
}

.help-modal-body p {
  margin: 0 0 10px;
}

.help-modal-body ul {
  margin: 0 0 10px;
  padding-left: 18px;
}

.help-modal-body li {
  margin-bottom: 4px;
}

/* =========================
   Employee Modal
   ========================= */

/* ========================================================================
   EMPLOYEE MODAL - Complete Redesign
   Compact, clean, proper light/dark mode support
   ======================================================================== */

.emp-modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
}

.emp-modal-title {
  margin: 0 0 16px 0;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
}

[data-theme="dark"] .emp-modal-title {
  color: rgba(255,255,255,0.90);
}

.emp-modal-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Wrapper for scrollable content - everything except buttons */
.emp-modal-form > *:not(.modal-actions) {
  flex-shrink: 0;
}

.emp-modal-form {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  margin-right: -4px;
}

/* Scrollbar styling */
.emp-modal-form::-webkit-scrollbar {
  width: 6px;
}

.emp-modal-form::-webkit-scrollbar-track {
  background: transparent;
}

.emp-modal-form::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 3px;
}

[data-theme="dark"] .emp-modal-form::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.20);
}

.emp-modal-form::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

[data-theme="dark"] .emp-modal-form::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.30);
}

/* Modal actions - keep at bottom */
.emp-modal-form .modal-actions {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding: 16px;
  margin: 16px -16px 0 -16px;
  border-top: 1px solid #e0e0e0;
  z-index: 10;
}

[data-theme="dark"] .emp-modal-form .modal-actions {
  background: #1a1a1a;
  border-top-color: rgba(255,255,255,0.10);
}

.emp-modal-form .modal-actions button {
  outline: none !important;
}

.emp-modal-form .modal-actions button:hover {
  border-color: transparent !important;
}

.emp-modal-form .modal-actions button:focus {
  outline: none !important;
}

/* Remove padding from modal-content when it contains emp-modal-content */
.emp-modal-content {
  padding: 16px;
}

.modal-content.emp-modal-content {
  padding: 16px;
}

/* Top row with name and hours */
.emp-modal-top {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.emp-modal-two-col,
.emp-modal-details {
  margin-bottom: 14px;
}

.emp-modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.emp-modal-field--grow {
  flex: 1;
  min-width: 180px;
}

.emp-modal-field-label {
  font-size: 11px;
  font-weight: 600;
  color: #666666;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .emp-modal-field-label {
  color: rgba(255,255,255,0.45);
}

/* Two column layout for roles and days off */
.emp-modal-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Fieldsets - cleaner design */
.emp-modal-fieldset {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 14px;
  background: #fafafa;
}

[data-theme="dark"] .emp-modal-fieldset {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
}

.emp-modal-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  color: #333333;
  padding: 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .emp-modal-fieldset legend {
  color: rgba(255,255,255,0.70);
}

/* Checkbox grid */
.emp-check-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.emp-check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 0;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.08s;
  color: #222222;
}

[data-theme="dark"] .emp-check-grid label {
  color: rgba(255,255,255,0.86);
}

.emp-check-grid label:hover {
  background: rgba(0,0,0,0.03);
}

[data-theme="dark"] .emp-check-grid label:hover {
  background: rgba(255,255,255,0.04);
}

.emp-check-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Details/summary sections */
.emp-modal-details {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}

[data-theme="dark"] .emp-modal-details {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
}

.emp-modal-summary {
  padding: 11px 12px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .emp-modal-summary {
  color: rgba(255,255,255,0.70);
}

.emp-modal-summary::-webkit-details-marker { display: none; }

.emp-modal-summary::before {
  content: "▶";
  font-size: 9px;
  color: #999999;
  transition: transform 0.12s;
}

[data-theme="dark"] .emp-modal-summary::before {
  color: rgba(255,255,255,0.40);
}

details[open] > .emp-modal-summary::before {
  transform: rotate(90deg);
}

details[open] > .emp-modal-summary {
  border-bottom: 1px solid #e0e0e0;
}

[data-theme="dark"] details[open] > .emp-modal-summary {
  border-bottom-color: rgba(255,255,255,0.10);
}

.emp-modal-details > *:not(summary) {
  padding: 12px;
}

/* Role caps grid */
.emp-caps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px !important;
}

.emp-cap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #222222;
}

[data-theme="dark"] .emp-cap-row {
  color: rgba(255,255,255,0.86);
}

.emp-cap-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.emp-cap-row input {
  width: 50px;
  padding: 4px 6px;
  text-align: center;
  font-size: 12px;
}

/* Wrapper for content inside details */
.emp-modal-details > *:not(summary) {
  padding: 12px;
}

/* Unavailable time blocks container */
#unavailabilityBox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}

#unavailabilityBox .grid {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 32px;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

#unavailabilityBox .grid select {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 6px;
}

#unavailabilityBox .grid input[type="time"] {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 6px;
}

#unavailabilityBox .grid button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.20);
  color: #dc2626;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.1s;
}

[data-theme="dark"] #unavailabilityBox .grid button {
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.25);
  color: #f87171;
}

#unavailabilityBox .grid button:hover {
  background: rgba(220,38,38,0.15);
  border-color: rgba(220,38,38,0.35);
}

[data-theme="dark"] #unavailabilityBox .grid button:hover {
  background: rgba(248,113,113,0.18);
  border-color: rgba(248,113,113,0.40);
}

/* Hide inner list boxes when empty so the add-button is vertically centred */
#breaksBox:empty,
#splitsBox:empty,
#unavailabilityBox:empty {
  display: none !important;
}

/* ========================================================================
   SHIFT MODAL - Breaks and Splits styling
   ======================================================================== */

/* Override inline styles on the wrapper divs */
.emp-modal-details > div[style] {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Breaks and Splits containers */
#rotaBreaksBox,
#rotaSplitsBox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* Break/Split row styling - compact grid */
#rotaBreaksBox > div,
#rotaSplitsBox > div {
  display: grid;
  grid-template-columns: 100px 100px auto 100px 32px;
  gap: 8px;
  align-items: center;
}

#rotaBreaksBox input[type="time"],
#rotaSplitsBox input[type="time"] {
  padding: 6px 8px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid #cfcfcf !important;
  color: #111111 !important;
}

[data-theme="dark"] #rotaBreaksBox input[type="time"],
[data-theme="dark"] #rotaSplitsBox input[type="time"] {
  background: #2a2a2a !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.90) !important;
}

#rotaBreaksBox select,
#rotaSplitsBox select {
  padding: 6px 8px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}

#rotaBreaksBox input[type="checkbox"],
#rotaSplitsBox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

#rotaBreaksBox label,
#rotaSplitsBox label {
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #666666 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

[data-theme="dark"] #rotaBreaksBox label,
[data-theme="dark"] #rotaSplitsBox label {
  color: rgba(255,255,255,0.60) !important;
}

/* Delete buttons in breaks/splits - same as employee modal */
#rotaBreaksBox button[type="button"]:not(#rotaAddBreakBtn),
#rotaSplitsBox button[type="button"]:not(#rotaAddSplitBtn) {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: rgba(220,38,38,0.08) !important;
  border: 1px solid rgba(220,38,38,0.20) !important;
  color: #dc2626 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.1s !important;
}

[data-theme="dark"] #rotaBreaksBox button[type="button"]:not(#rotaAddBreakBtn),
[data-theme="dark"] #rotaSplitsBox button[type="button"]:not(#rotaAddSplitBtn) {
  background: rgba(248,113,113,0.10) !important;
  border-color: rgba(248,113,113,0.25) !important;
  color: #f87171 !important;
}

#rotaBreaksBox button[type="button"]:not(#rotaAddBreakBtn):hover,
#rotaSplitsBox button[type="button"]:not(#rotaAddSplitBtn):hover {
  background: rgba(220,38,38,0.15) !important;
  border-color: rgba(220,38,38,0.35) !important;
}

[data-theme="dark"] #rotaBreaksBox button[type="button"]:not(#rotaAddBreakBtn):hover,
[data-theme="dark"] #rotaSplitsBox button[type="button"]:not(#rotaAddSplitBtn):hover {
  background: rgba(248,113,113,0.18) !important;
  border-color: rgba(248,113,113,0.40) !important;
}

/* Add Break / Add Split buttons - FORCE compact styling */
button#rotaAddBreakBtn,
button#rotaAddSplitBtn {
  display: block !important;
  margin: 0 auto !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1px dashed #d0d0d0 !important;
  background: #fafafa !important;
  color: #333333 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.1s !important;
  width: auto !important;
  max-width: fit-content !important;
}

[data-theme="dark"] button#rotaAddBreakBtn,
[data-theme="dark"] button#rotaAddSplitBtn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.70) !important;
}

button#rotaAddBreakBtn:hover,
button#rotaAddSplitBtn:hover {
  background: #f0f0f0 !important;
  border-color: #b0b0b0 !important;
  color: #111111 !important;
}

[data-theme="dark"] button#rotaAddBreakBtn:hover,
[data-theme="dark"] button#rotaAddSplitBtn:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.90) !important;
}

/* Save to library checkbox area - override inline styles */
.emp-modal-form > label[style] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 0 0 14px 0 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  background: #fafafa !important;
  font-size: 13px !important;
  color: #333333 !important;
}

[data-theme="dark"] .emp-modal-form > label[style] {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.02) !important;
  color: rgba(255,255,255,0.86) !important;
}

.emp-modal-form > label input[type="checkbox"] {
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* =========================
   Demand Page
   ========================= */

.demand-table-container {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  overflow: hidden;
}

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

.demand-table thead th {
  background: #f8f9fa;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 2px solid #e0e0e0;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.demand-table thead th:first-child {
  text-align: left;
  padding-left: 16px;
  background: white;
}

.demand-table thead th:nth-last-child(2),
.demand-table thead th:last-child {
  background: white;
}

.demand-table tbody td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

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

/* Input cells get shading */
.demand-input-cell {
  background: #f8f9fa;
  padding: 6px !important;
}

/* Label with icon */
.demand-table-label {
  text-align: left !important;
  font-weight: 700;
  color: #000;
  padding-left: 16px !important;
  background: white !important;
}

.demand-label-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demand-icon {
  flex-shrink: 0;
  opacity: 0.5;
  color: #666;
}

/* Enhanced inputs - remove arrows, center text */
.demand-input {
  width: 100%;
  max-width: 70px;
  margin: 0 auto;
  display: block;
  padding: 6px 8px;
  text-align: center;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: white;
  transition: all 0.15s;
  -moz-appearance: textfield;
}

.demand-input::-webkit-outer-spin-button,
.demand-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.demand-input:hover {
  border-color: #c0c0c0;
}

.demand-input:focus {
  outline: none;
  border-color: var(--sr-green);
  background: rgba(22, 163, 74, 0.02);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.08);
}

/* Enhanced totals */
.demand-table-total {
  font-weight: 700;
  background: white !important;
  font-size: 16px;
  border-left: 2px solid #e0e0e0;
  padding-left: 16px !important;
}

.demand-table-total strong {
  color: #1a1a1a;
}

/* Clear button styling */
.demand-clear-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  border: 1.5px solid #dc2626;
  background: #dc2626;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.demand-clear-btn:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* Shift card colour band */
.shift-card {
  padding: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.shift-card-band {
  width: 6px;
  flex-shrink: 0;
}

.shift-card-inner {
  flex: 1;
  padding: 12px 14px;
  min-width: 0;
}

/* =========================
   Employees Page
   ========================= */

.emp-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.emp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

.emp-search {
  min-width: 220px;
  flex: 1;
}

.staff-link-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  margin-top: 8px;
  background: white;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  flex-shrink: 0;
  font-size: 13px;
}

.staff-link-label {
  color: var(--text-40);
  font-weight: 500;
}

.staff-link-banner code {
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.page-dashboard .staff-link-banner {
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  color: var(--text-60);
}

.page-dashboard .staff-link-banner code {
  background: var(--sr-surface-2);
  color: var(--text-86);
}

/* ══════════════════════════════════════════════════════════
   CLOCK LOG PAGE
   ══════════════════════════════════════════════════════════ */

.clock-log-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  overflow-y: auto;
}

.clock-log-toolbar {
  display: flex;
  justify-content: flex-end;
}

.clock-log-section {
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.clock-log-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-86);
  margin: 0 0 12px 0;
}

.clock-log-current {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clock-current-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.3);
  color: #4ade80;
  font-size: 13px;
  font-weight: 600;
}

.clock-current-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

.clock-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.clock-log-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-40);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--sr-border);
}

.clock-log-table td {
  padding: 9px 10px;
  color: var(--text-86);
  border-bottom: 1px solid var(--sr-border);
}

.clock-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.clock-type-badge--in {
  background: rgba(34,197,94,0.14);
  color: #4ade80;
}

.clock-type-badge--out {
  background: rgba(220,53,69,0.14);
  color: #f87171;
}

/* ══════════════════════════════════════════════════════════
   TIMESHEETS PAGE
   ══════════════════════════════════════════════════════════ */

.timesheets-raw-log summary {
  cursor: pointer;
  list-style: none;
}

.timesheets-raw-log summary::-webkit-details-marker {
  display: none;
}

.timesheets-raw-log summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  color: var(--text-40);
}

.timesheets-raw-log[open] summary::before {
  content: "▾";
}

.timesheets-raw-log table {
  margin-top: 12px;
}

.timesheets-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
}

.timesheets-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: #fbbf24;
  font-size: 13px;
  font-weight: 600;
}

.timesheets-banner a {
  color: inherit;
  text-decoration: underline;
}

.timesheets-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.timesheets-week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timesheets-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timesheets-export-panel {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.timesheets-export-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-40);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.timesheets-export-panel select,
.timesheets-export-panel input[type="date"] {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface-2);
  color: var(--text-86);
  font-size: 13px;
}

.timesheets-export-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timesheets-export-btn-spacer {
  font-size: 12px;
  visibility: hidden;
}

.ts-row--discrepancy {
  background: var(--warn-bg);
}

.ts-status-badge--pending { background: rgba(148,163,184,0.16); color: #94a3b8; }
.ts-status-badge--approved { background: rgba(34,197,94,0.14); color: #4ade80; }
.ts-status-badge--needs_review { background: rgba(255,193,7,0.16); color: #fbbf24; }
.ts-status-badge--adjusted { background: rgba(96,165,250,0.16); color: #60a5fa; }

.ts-open {
  color: #fbbf24;
  font-style: italic;
}

.ts-actions-cell {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ts-actions-cell .ts-action-btn {
  padding: 4px 10px;
  font-size: 12px;
  height: 26px;
}

.ts-adjust-cell {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ts-adjust-cell input[type="datetime-local"] {
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface-2);
  color: var(--text-86);
  font-size: 12px;
}

.emp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  padding-right: 8px;
  align-content: start;
}

.emp-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: border-color 0.15s;
}

.emp-card:hover {
}

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

.emp-card-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.emp-card-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.emp-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.emp-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.emp-btn--edit:hover {
  border-color: var(--sr-green);
  color: var(--sr-green);
}

.emp-btn--delete {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.emp-btn--delete:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.emp-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.emp-card-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.emp-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
  white-space: nowrap;
  padding-top: 3px;
  min-width: 52px;
}

/* Chips */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(22,163,74,0.10);
  border: 1px solid rgba(22,163,74,0.25);
  color: var(--sr-green);
  white-space: nowrap;
}

.chip--day {
  background: rgba(100,100,100,0.07);
  border-color: rgba(100,100,100,0.18);
  color: #555;
}

.chip--warn {
  background: rgba(255,193,7,0.12);
  border-color: rgba(255,193,7,0.40);
  color: #92620a;
}

.chip--error {
  background: rgba(220,38,38,0.09);
  border-color: rgba(220,38,38,0.30);
  color: #b91c1c;
}

.chip--clickable {
  cursor: pointer;
  transition: filter 0.1s;
}
.chip--clickable:hover { filter: brightness(1.2); }
.chip-more {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.65;
  margin-left: 4px;
}
.chip-more-btn {
  font-size: 11px;
  border-style: dashed;
  opacity: 0.8;
  background: none;
  font-family: inherit;
}
.chip-more-btn:hover { opacity: 1; }
.role-popover {
  position: fixed;
  z-index: 1000;
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 10px;
  padding: 6px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  min-width: 160px;
  max-width: 260px;
}
.role-popover[hidden] { display: none; }
.role-popover-item {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text, #111);
}
.role-popover-item--clickable {
  cursor: pointer;
  border-radius: 6px;
  margin: 0 4px;
  width: calc(100% - 8px);
  box-sizing: border-box;
}
.role-popover-item--clickable:hover { background: var(--sr-surface-3, rgba(0,0,0,0.05)); }
.role-popover-item--active { font-weight: 700; }
.role-popover-item--clear {
  color: var(--sr-red);
  border-top: 1px solid var(--border, rgba(0,0,0,0.12));
  margin-top: 4px;
  padding-top: 8px;
  border-radius: 0 0 6px 6px;
}

/* Warning popover */
.warning-popover {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  width: max-content;
  background: #181818;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 14px 16px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  font-size: 13px;
  line-height: 1.5;
}
.warning-popover__title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 7px;
  padding-right: 20px;
}
.warning-popover__body {
  color: rgba(255,255,255,0.55);
  margin-bottom: 11px;
}
.warning-popover__fix {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding-top: 10px;
  color: rgba(255,255,255,0.75);
}
.warning-popover__fix strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}
.warning-popover__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
}
.warning-popover__close:hover { color: rgba(255,255,255,0.7); }

.warning-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}

/* Coverage warning chips */
.cw-warning-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Uncovered roles section */
.cw-uncovered-section {
  margin: 16px 0 8px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.cw-uncovered-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #555;
  background: rgba(0,0,0,0.02);
  list-style: none;
}

.cw-uncovered-summary::-webkit-details-marker { display: none; }

.cw-uncovered-count {
  display: inline-block;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}

.cw-uncovered-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 14px;
}

.cw-uncovered-tile {
  font-size: 12px;
  color: #888;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 4px 10px;
}

/* =====================================================
   Coverage modal — redesigned to match employee modal
   ===================================================== */

/* Utility */
.cw-hidden { display: none !important; }

/* Section container */
.cw-section {
  margin-bottom: 4px;
}

/* Section label — ALL CAPS grey header matching fieldset legend style */
.cw-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #666666;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
[data-theme="dark"] .cw-section-label {
  color: rgba(255,255,255,0.45);
}

/* Divider between sections */
.cw-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 16px 0;
}
[data-theme="dark"] .cw-divider {
  border-top-color: rgba(255,255,255,0.10);
}

/* Window entry card */
.cw-window-entry {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fafafa;
}
[data-theme="dark"] .cw-window-entry {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
}

/* Time row inside entry card */
.cw-entry-time-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

/* Label + input column */
.cw-time-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Small grey label above inputs */
.cw-field-label {
  font-size: 11px;
  font-weight: 600;
  color: #666666;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .cw-field-label {
  color: rgba(255,255,255,0.45);
}

/* "to" separator between Start and End */
.cw-time-to {
  flex-shrink: 0;
  padding-bottom: 8px;
  font-size: 13px;
  opacity: 0.5;
  align-self: flex-end;
}

/* Remove entry button */
.cw-entry-remove {
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
  margin-left: auto;
  background: none;
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.cw-entry-remove:hover {
  color: #dc2626;
  background: rgba(220,38,38,0.07);
  border-color: rgba(220,38,38,0.25);
}
[data-theme="dark"] .cw-entry-remove:hover {
  color: #f87171;
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.30);
}

/* Staffing subsection within entry card */
.cw-entry-staffing {
  border-top: 1px solid #e8e8e8;
  padding-top: 12px;
}
[data-theme="dark"] .cw-entry-staffing {
  border-top-color: rgba(255,255,255,0.08);
}

/* Small label for staffing subsection */
.cw-entry-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #666666;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
[data-theme="dark"] .cw-entry-section-label {
  color: rgba(255,255,255,0.40);
}

/* Radio button row */
.cw-radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 3px 0;
  color: #222222;
  user-select: none;
}
[data-theme="dark"] .cw-radio-row {
  color: rgba(255,255,255,0.86);
}
.cw-radio-row input[type="radio"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #16a34a;
}
.cw-radio-row--mt {
  margin-top: 8px;
}

/* Indented content shown when radio is selected */
.cw-fixed-ctrl,
.cw-ratio-ctrl {
  padding: 8px 0 4px 23px;
}

/* Field row: label on top, control(s) below */
.cw-field-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cw-field-row--mt {
  margin-top: 12px;
}

/* Inline input + trailing text */
.cw-inline-with-hint {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cw-inline-hint {
  font-size: 13px;
  opacity: 0.65;
}

/* Small grey help text below a field */
.cw-help-text {
  font-size: 11px;
  color: #888888;
  margin-top: 2px;
}
[data-theme="dark"] .cw-help-text {
  color: rgba(255,255,255,0.40);
}

/* "Need 1 extra for every X [metric]" row */
.cw-scaling-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
}
.cw-scaling-row input[type="number"] {
  width: 65px;
}
.cw-scaling-row select {
  width: auto;
}

/* Add time window button — secondary style */
.cw-add-row-btn {
  margin-top: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  color: #555555;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cw-add-row-btn:hover {
  background: #f0f0f0;
  border-color: #b0b0b0;
  color: #111111;
}
[data-theme="dark"] .cw-add-row-btn {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.60);
  background: transparent;
}
[data-theme="dark"] .cw-add-row-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.86);
}

/* Active days — 4-column checkbox grid */
.cw-days-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.cw-day-check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  user-select: none;
  color: #222222;
  transition: background 0.08s;
}
[data-theme="dark"] .cw-day-check-label {
  color: rgba(255,255,255,0.86);
}
.cw-day-check-label:hover {
  background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .cw-day-check-label:hover {
  background: rgba(255,255,255,0.05);
}
.cw-day-check-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #16a34a;
}

/* "All days" convenience row */
.cw-all-days-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  user-select: none;
  color: #333333;
  transition: background 0.08s;
}
[data-theme="dark"] .cw-all-days-label {
  color: rgba(255,255,255,0.70);
}
.cw-all-days-label:hover {
  background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .cw-all-days-label:hover {
  background: rgba(255,255,255,0.05);
}
.cw-all-days-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #16a34a;
}

/* Inline validation message */
.cw-validation-msg {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.25);
  color: #dc2626;
}
[data-theme="dark"] .cw-validation-msg {
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.30);
  color: #f87171;
}

/* Clear role button — destructive action */
#clearRoleBtn {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
#clearRoleBtn:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}
[data-theme="dark"] #clearRoleBtn {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
[data-theme="dark"] #clearRoleBtn:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}

/* Mode toggle: "Same schedule every day" / "Different per day" */
.cw-mode-toggle {
  display: flex;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
[data-theme="dark"] .cw-mode-toggle {
  border-color: rgba(255,255,255,0.15);
}
.cw-mode-btn {
  flex: 1;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #666666;
  transition: background 0.12s, color 0.12s;
  border-radius: 0;
}
[data-theme="dark"] .cw-mode-btn {
  color: rgba(255,255,255,0.45);
}
.cw-mode-btn:hover:not(.cw-mode-btn--active) {
  background: rgba(0,0,0,0.04);
  color: #333333;
  border-color: transparent !important;
}
[data-theme="dark"] .cw-mode-btn:hover:not(.cw-mode-btn--active) {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.70);
}
.cw-mode-btn--active {
  background: #16a34a;
  color: #ffffff;
}
.cw-mode-btn--active:hover {
  background: #15803d !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Per-day sections */
.cw-day-section {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
[data-theme="dark"] .cw-day-section {
  border-color: rgba(255,255,255,0.10);
}
.cw-day-section-header {
  padding: 9px 14px;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid #e8e8e8;
}
[data-theme="dark"] .cw-day-section-header {
  background: rgba(255,255,255,0.03);
  border-bottom-color: rgba(255,255,255,0.08);
}
.cw-day-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555555;
}
[data-theme="dark"] .cw-day-section-title {
  color: rgba(255,255,255,0.50);
}
.cw-day-section-body {
  padding: 12px 12px 10px;
}
/* Flatten nested window entry cards inside day sections */
.cw-day-section-body .cw-window-entry {
  background: transparent;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="dark"] .cw-day-section-body .cw-window-entry {
  border-color: rgba(255,255,255,0.08);
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}

.status-badge--contracted {
  background: rgba(31,168,31,0.12);
  border: 1px solid rgba(31,168,31,0.30);
  color: #1a7a1a;
}

.status-badge--zerohours {
  background: rgba(120,120,120,0.10);
  border: 1px solid rgba(120,120,120,0.25);
  color: #666;
}

/* Inset to match .emp-grid's own 24px horizontal padding (set under
   .page-dashboard below) so the box's left/right edges line up exactly
   with the employee cards' left/right edges, not the page's outer edge. */
.page-dashboard .staff-access-details {
  margin: 0 24px;
  flex-shrink: 0;
}

/* .emp-grid normally carries its own 16px top padding (breathing room from
   the toolbar above it). When Staff Access sits between them instead, that
   extra padding is redundant on top of the .emp-page flex gap and makes the
   gap below Staff Access bigger than the gap above it — drop it here
   specifically, rather than with a margin hack (a negative margin here
   previously confused the grid's own scroll-container sizing, leaving the
   scrollbar thumb not flush with the top). */
.page-dashboard .staff-access-details + .emp-grid {
  padding-top: 0 !important;
}

.staff-access-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.staff-access-grid .staff-link-banner {
  margin-top: 0;
  justify-content: center;
}

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

/* Responsive: stack if needed */
@media (max-width: 900px){
  .constraint-row{ 
    flex-direction: column; 
    align-items: flex-start;
  }
  .constraint-content{ 
    width: 100%;
  }
}

/* Rota drag + drop */
.rota-cell {
  cursor: grab;
  user-select: none;
}

.rota-cell.dragging {
  opacity: 0.5;
}

/* Held Alt/Ctrl while dragging = duplicate instead of move/swap */
.rota-cell.drop-target-copy {
  outline: 2px dashed var(--sr-green-mid);
  outline-offset: -2px;
}

/* Drop zone states — only the "+" button is highlighted, not the whole cell */
.rota-cell.drop-eligible .seg-add-btn {
  background: var(--sr-green-pale) !important;
  border-color: var(--sr-green-mid) !important;
  border-style: solid !important;
  opacity: 0.9;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.rota-cell.drop-ineligible .seg-add-btn {
  background: var(--sr-amber-pale) !important;
  border-color: var(--sr-amber-pale) !important;
  border-style: solid !important;
  opacity: 0.7;
  transition: background 0.12s ease, opacity 0.12s ease;
}
[data-theme="dark"] .rota-cell.drop-ineligible .seg-add-btn {
  background: var(--sr-red-pale) !important;
  border-color: var(--sr-red-pale) !important;
}
.rota-cell.drop-eligible.drop-target .seg-add-btn {
  background: var(--sr-green-mid) !important;
  opacity: 1;
}
.rota-cell.drop-ineligible.drop-target .seg-add-btn {
  background: var(--sr-amber-pale) !important;
  opacity: 1;
}

/* =========================
   Dashboard SaaS Layout
   ========================= */

.dash-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  height: 100%;
}

/* Command bar */
.dash-command {
  margin-bottom: 0;
  padding: 10px 16px !important;
}

.dash-command-row {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  width: 100%;
}

.dash-command-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 12px;
}

.dash-command-divider {
  width: 1px;
  height: 28px;
  background: var(--card-border);
  margin: 0 4px;
}

.dash-command-generation,
.dash-command-settings,
.dash-command-config,
.dash-command-utilities {
  flex: 0 1 auto;
}

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

.dash-command-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-left: 12px;
}

.dash-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.dash-number {
  width: 80px;
  padding: 6px 8px !important;
}

/* Hide spinner arrows on number input */
.dash-number::-webkit-outer-spin-button,
.dash-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dash-select {
  width: 210px;
  padding: 6px 8px !important;
}

.dash-progress {
  margin-top: 6px;
  display: none;
  align-items: center;
  gap: 10px;
}

.dash-progress.active {
  display: flex;
}

.dash-progress progress {
  flex: 1;
  height: 10px;
}

#progressText {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 60px;
  display: none;
}

/* 2-panel layout: combined health/violations | rota */
.dash-layout {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  grid-template-rows: 1fr;
  gap: 16px;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dash-panel {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  order: 2;
}

.dash-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ededed;
}

.dash-panel-header h2 {
  margin: 0;
}

.dash-panel-body {
  padding-top: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.dash-scroll {
  overflow: auto;
  height: 100%;
}

/* Center panel rota handling — constrained by grid row, scrolls internally */
.dash-panel-center {
  overflow: hidden;
  min-height: 0;
  order: 1;
}

.dash-rota-header {
  align-items: center;
}

.dash-rota-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-rota-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-rota-body {
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-rota-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Fixed header container (DEMAND row + column headers) */
#rota-header {
  flex-shrink: 0;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Make scrollbar on header transparent */
#rota-header::-webkit-scrollbar {
  background: transparent;
}

#rota-header::-webkit-scrollbar-track {
  background: transparent;
}

#rota-header::-webkit-scrollbar-thumb {
  background: transparent;
}

#rota-header table {
  table-layout: fixed;
  border-radius: 0;
  border: none;
}

/* Match column widths between header and body tables */
#rota-header th:first-child,
#rota-header td:first-child {
  width: 140px;
}

/* Total Hours and Weekly Cost columns */
#rota-header th:nth-last-child(-n+2),
#rota-header td:nth-last-child(-n+2) {
  width: 80px;
  text-align: center;
}

/* Scrollable employee rows container */
#rota-employees-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable; /* Reserve space for scrollbar, prevent layout shift */
  display: flex;
  flex-direction: column;
  padding-right: 4px; /* Additional padding to prevent touching scrollbar */
}

/* Rota wrapper inside scrollable container */
#rota {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-right: 12px; /* Prevent last column from touching scrollbar */
}

#rota table {
  table-layout: fixed;
  border-radius: 0;
  border: none;
  flex-shrink: 0;
}

/* Dark scrollbar styling for rota table */
#rota-employees-container::-webkit-scrollbar {
  width: 12px;
}

#rota-employees-container::-webkit-scrollbar-track {
  background: var(--sr-surface-3);
  border-radius: 6px;
}

#rota-employees-container::-webkit-scrollbar-thumb {
  background: var(--sr-border-strong);
  border-radius: 6px;
  border: 2px solid var(--sr-surface-3);
}

#rota-employees-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-40);
}

/* Minimum row height — rows expand automatically when role view has multiple pills */
#rota-employees-container #rota table tbody tr {
  height: auto;
  min-height: 62px;
}

.dash-command button {
  padding: 6px 12px;
  font-size: 13px;
}

/* Make primary button stand out slightly */
button.primary {
  border-color: transparent;
}

button.primary:hover {
  border-color: transparent !important;
}

button.primary:active {
  border-color: transparent !important;
}

button.primary:focus {
  outline: none !important;
  border-color: transparent;
}

/* Compact summary strip — always visible, fixed height to prevent layout shift */
#summary.card {
  padding: 8px 14px;
}

.dash-summary-bar {
  min-height: 38px;
  display: flex;
  align-items: center;
}

/* Responsive fallback */
@media (max-width: 1100px) {
  .dash-layout {
    grid-template-columns: 1fr;
    flex: none;
    height: auto;
  }

  .container {
    overflow-y: auto;
  }
}

/* =========================
   Week Navigation & View Toggle
   ========================= */

.dash-rota-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 6px;
  margin-top: -8px;
}

.dash-rota-nav-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-nav-arrow {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: white;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-weight: 700;
  color: #555;
  transition: border-color 0.12s, background 0.12s;
}

.dash-nav-arrow:hover {
  border-color: var(--sr-green);
  color: var(--sr-green);
}

.dash-week-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 160px;
  text-align: center;
  user-select: none;
}

.dash-nav-today {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  transition: border-color 0.12s, color 0.12s;
}

.dash-nav-today:hover {
  border-color: var(--sr-green);
  color: var(--sr-green);
}

.dash-nav-today.dash-nav-today--current {
  opacity: 0.4;
  cursor: default;
}

/* Past week warning banner */
.dash-past-week-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,193,7,0.10);
  border: 1px solid rgba(255,193,7,0.30);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #8a6d00;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.dash-past-week-icon {
  font-size: 14px;
  line-height: 1;
}

/* Demand modal inputs */
/* ── Demand modal table ── */
.dash-demand-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}

.dash-demand-table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-40);
  padding: 6px 8px 8px;
  text-align: center;
  border-bottom: 1px solid var(--sr-border);
}

.dash-demand-label-col {
  text-align: left !important;
  width: 130px;
}

.dash-demand-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-60);
  padding: 10px 8px;
  white-space: nowrap;
}

.dash-demand-cell {
  text-align: center;
  padding: 6px 4px;
}

.dash-demand-input {
  width: 64px;
  padding: 6px 4px;
  text-align: center;
  border: 1px solid var(--sr-border-strong);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: var(--sr-surface-2);
  color: var(--text-86);
  -moz-appearance: textfield;
  transition: border-color 0.15s;
}

.dash-demand-input::-webkit-outer-spin-button,
.dash-demand-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dash-demand-input:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.20) !important;
  outline: none !important;
}





/* =========================
   Navbar spacer + theme toggle
   ========================= */

.navbar-spacer {
  flex: 1;
}

.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 16px;
  transition: border-color 0.15s, background 0.15s;
}

.theme-toggle-btn:hover {
}

/* Show/hide sun/moon based on current theme */
/* Theme toggle button */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--sr-border-strong);
  background: transparent;
  color: var(--text-40);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 10px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle-btn:hover {
  color: var(--text-86);
  border-color: var(--sr-border-strong);
  background: var(--sr-surface-3);
}

/* Show sun in dark mode (click to go light), moon in light mode (click to go dark) */
[data-theme="dark"]  .theme-icon--light { display: none; }
[data-theme="light"] .theme-icon--dark  { display: none; }

/* =========================
   Rota fullscreen mode — hide all chrome, rota grid fills viewport
   ========================= */
body.rota-fullscreen .topnav,
body.rota-fullscreen .cmdbar {
  display: none !important;
}
body.rota-fullscreen .workspace {
  height: calc(100vh - 52px) !important;
}
body.rota-fullscreen .dash-rota-scroll {
  height: calc(100vh - 52px) !important;
}

/* =========================
   Clear Rota button (dashboard)
   ========================= */
.dash-clear-btn {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
.dash-clear-btn:hover:not(:disabled) {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* =========================
   Cell edit popover (click-to-edit)
   ========================= */
/* ========================================================================
   CELL POPOVER - Complete Redesign
   Clean, minimal, tight spacing, proper light/dark mode support
   ======================================================================== */

/* Light mode (default) */
.cell-popover {
  position: fixed;
  z-index: 10000;
  width: 280px;
  max-height: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  font-size: 13px;
  animation: popoverIn 0.1s ease-out;
}

/* Dark mode popover */
[data-theme="dark"] .cell-popover {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
}

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-2px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.cell-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e8e8e8;
}

[data-theme="dark"] .cell-popover-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cell-popover-title {
  font-weight: 700;
  font-size: 14px;
  color: #111111;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .cell-popover-title {
  color: rgba(255,255,255,0.90);
}

.cell-popover-close {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.1s;
}

.cell-popover-close:hover {
  background: rgba(0,0,0,0.05);
  color: #333333;
}

[data-theme="dark"] .cell-popover-close {
  color: rgba(255,255,255,0.40);
}

[data-theme="dark"] .cell-popover-close:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.80);
}

/* Qualification Warning */
.popover-qualification-warning {
  margin: 10px 10px 6px;
  padding: 8px 10px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.20);
  border-radius: 6px;
  font-size: 11px;
  color: #92400e;
  line-height: 1.4;
}

[data-theme="dark"] .popover-qualification-warning {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.25);
  color: #fbbf24;
}

/* Shifts Container */
.cell-popover-shifts {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 6px;
}

/* Create New Shift Button */
.popover-shift-item--create {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 8px);
  text-align: left;
  padding: 8px 10px;
  margin: 4px 4px 8px;
  border: 1px dashed #d0d0d0;
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #333333;
  border-radius: 6px;
  transition: all 0.1s;
}

.popover-shift-item--create:hover {
  background: #f0f0f0;
  border-color: #b0b0b0;
  color: #111111;
}

[data-theme="dark"] .popover-shift-item--create {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.70);
}

[data-theme="dark"] .popover-shift-item--create:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.90);
}

/* Shift Items */
.popover-shift-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  margin: 1px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #222222;
  border-radius: 6px;
  transition: background 0.08s;
}

.popover-shift-item:hover:not(:disabled) {
  background: rgba(0,0,0,0.04);
}

[data-theme="dark"] .popover-shift-item {
  color: rgba(255,255,255,0.86);
}

[data-theme="dark"] .popover-shift-item:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
}

/* Active shift - subtle indicator */
.popover-shift-item--active {
  font-weight: 600;
}

.popover-shift-item--active .popover-shift-check {
  opacity: 1;
}

.popover-shift-item:not(.popover-shift-item--active) .popover-shift-check {
  opacity: 0;
}

/* Disabled shifts */
.popover-shift-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.popover-shift-item:disabled:hover {
  background: transparent;
}

.popover-shift-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popover-shift-time {
  font-size: 11px;
  color: #888888;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}

[data-theme="dark"] .popover-shift-time {
  color: rgba(255,255,255,0.45);
}

.popover-shift-check {
  color: #16a34a;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

[data-theme="dark"] .popover-shift-check {
  color: #22c55e;
}

/* Delete Button */
.cell-popover-delete {
  display: block;
  width: calc(100% - 12px);
  margin: 4px 6px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(220,38,38,0.25);
  border-radius: 6px;
  background: rgba(220,38,38,0.05);
  color: #dc2626;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s;
}

.cell-popover-delete:hover {
  background: rgba(220,38,38,0.10);
  border-color: rgba(220,38,38,0.40);
}

[data-theme="dark"] .cell-popover-delete {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.25);
  color: #f87171;
}

[data-theme="dark"] .cell-popover-delete:hover {
  background: rgba(248,113,113,0.14);
  border-color: rgba(248,113,113,0.40);
}

/* Active cell highlight */
.rota-cell-active {
  outline: 2px solid #16a34a !important;
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

/* Empty cell "+" placeholder */
.rota-cell-placeholder {
  font-size: 22px;
  font-weight: 300;
  color: #ccc;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 36px;
}

.rota-cell-empty {
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
}

.rota-cell-empty .rota-cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 36px;
}

.rota-cell-empty:hover {
}

.rota-cell-empty:hover .rota-cell-placeholder {
  color: var(--sr-green);
}



/* =========================
   Ineligible assignment indicators
   ========================= */

/* Cell warning badge */
.rota-cell-ineligible {
  position: relative;
  outline: 2px solid #e6b800 !important;
  outline-offset: -2px;
  border-radius: 6px;
}

/* Bold stripe across the bottom of the cell */
.rota-cell-ineligible::after {
  content: "⚠ INELIGIBLE";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(230, 184, 0, 0.88);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 2px 0;
  border-radius: 0 0 4px 4px;
  pointer-events: none;
  z-index: 3;
}

.rota-ineligible-badge {
  display: none; /* replaced by ::after stripe */
}

/* Orphaned shift (definition deleted) — mirrors ineligible pattern */
.rota-cell-orphan {
  position: relative;
  outline: 2px solid #dc3545 !important;
  outline-offset: -2px;
  border-radius: 6px;
}

.rota-cell-orphan .rota-cell-inner {
  color: var(--text);
}

.rota-cell-orphan::after {
  content: "DELETED";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(220, 53, 69, 0.88);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 2px 0;
  border-radius: 0 0 4px 4px;
  pointer-events: none;
  z-index: 3;
}

.rota-orphan-badge {
  display: none;
}

/* Deleted employee row (employee removed from DB but still in saved rota) */
.rota-emp-deleted {
  opacity: 0.6;
  border-left: 3px solid #dc3545;
}

.rota-deleted-badge {
  color: #dc3545;
  font-size: 11px;
  margin-left: 4px;
}

/* Popover — ineligible shift items */
.popover-shift-item--ineligible {
  opacity: 0.55;
}

.popover-shift-item--ineligible:hover:not(:disabled) {
  opacity: 0.85;
}

.popover-ineligible-icon {
  color: #dc3545;
  font-size: 11px;
  margin-right: 2px;
}

.popover-ineligible-reason {
  font-size: 10px;
  color: #b0b0b0;
  padding: 0 12px 4px 30px;
  line-height: 1.3;
}

/* Popover divider between eligible/ineligible */
.popover-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 6px 10px;
  position: relative;
}

.popover-divider-label {
  position: absolute;
  top: -7px;
  left: 8px;
  background: var(--card, #fff);
  padding: 0 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #bbb;
}


/* ============================================================
   Requested Days Off Modal — cell-highlight redesign
   ============================================================ */

/* Modal content wrapper: fixed height so it doesn't grow forever */
.days-off-modal-content {
  display: flex;
  flex-direction: column;
  height: 90vh;
  max-height: 90vh;
  min-width: 640px;
  box-sizing: border-box;
}

/* Sticky header (day labels) */
.days-off-header {
  display: flex;
  align-items: center;
  padding: 0 0 12px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--sr-border);
  flex-shrink: 0;
}

/* Scrollable body — grows to fill remaining modal height */
.days-off-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

/* Shared layout: name col + 7 day cols */
.days-off-name-col {
  width: 160px;
  min-width: 100px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 0 16px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-86);
}

.days-off-day-cols {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  flex: 1;
  min-width: 0;
  gap: 8px;
  padding-right: 12px; /* Prevent last column from touching scrollbar */
}

/* Dark scrollbar styling for days off modal */
.days-off-body::-webkit-scrollbar {
  width: 12px;
}

.days-off-body::-webkit-scrollbar-track {
  background: var(--sr-surface-3);
  border-radius: 6px;
}

.days-off-body::-webkit-scrollbar-thumb {
  background: var(--sr-border-strong);
  border-radius: 6px;
  border: 2px solid var(--sr-surface-3);
}

.days-off-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-40);
}

/* Day-label header cells */
.days-off-day-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-40);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 0;
  line-height: 1.4;
}

.days-off-date-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-86);
  letter-spacing: 0;
  text-transform: none;
}

/* Employee row */
.days-off-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  min-height: 0;
  border-bottom: 1px solid var(--sr-border);
}

.days-off-row:last-child {
  border-bottom: none;
}

/* Clickable day cells — ON state (default) */
.days-off-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 0;
  border-radius: 8px;
  cursor: pointer;
  background: var(--sr-surface-2);
  border: 2px solid var(--sr-green);
  transition: all 0.15s ease;
  user-select: none;
}

.days-off-cell:hover {
  background: var(--sr-green-pale);
  border-color: var(--sr-green-mid);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15);
}

.days-off-cell:active {
  transform: scale(0.96);
}

.days-off-cell-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sr-green);
  text-transform: uppercase;
  pointer-events: none;
}

/* Absence states — border color per leave type, matching .cp-badge--* colors */
.days-off-cell--sick        { border-color: var(--sr-amber); }
.days-off-cell--annual      { border-color: #2563EB; }
.days-off-cell--bereavement { border-color: #7C3AED; }
.days-off-cell--training    { border-color: #0F766E; }
.days-off-cell--other       { border-color: var(--text-40); }
[data-theme="dark"] .days-off-cell--annual      { border-color: #93C5FD; }
[data-theme="dark"] .days-off-cell--bereavement { border-color: #C4B5FD; }
[data-theme="dark"] .days-off-cell--training    { border-color: #5EEAD4; }

.days-off-cell .cp-badge { pointer-events: none; }

.days-off-cell--off:hover {
  background: var(--sr-red-pale);
  border-color: var(--sr-red);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.15);
}

.days-off-cell--off .days-off-cell-label {
  color: var(--sr-red);
}


/* ============================================================
   Modal week navigator (shared by Demand and Days Off modals)
   ============================================================ */

.modal-week-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sr-border);
  flex-shrink: 0;
}

/* Centre group: arrows + label + context badge */
.modal-week-nav-center {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.modal-week-arrow {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-60);
  transition: all 0.12s;
  flex-shrink: 0;
  padding: 0;
}
.modal-week-arrow:hover { color: var(--text-86); background: var(--sr-surface-4); }

.modal-week-label {
  font-size: 14px;
  font-weight: 700;
  min-width: 150px;
  text-align: center;
  color: var(--text-86);
  user-select: none;
}

.modal-week-context {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--sr-surface-3);
  color: var(--text-60);
  white-space: nowrap;
  display: none;
}
.modal-week-context:not(:empty) { display: inline-block; }

.modal-week-context--current {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.modal-week-context--rota {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}
.modal-week-context--both {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
}

[data-theme="dark"] .modal-week-context--current { background: rgba(22,163,74,0.2); color: #4ade80; }
[data-theme="dark"] .modal-week-context--rota     { background: rgba(59,130,246,0.2); color: #93c5fd; }
[data-theme="dark"] .modal-week-context--both     { background: rgba(234,88,12,0.2); color: #fb923c; }

.modal-week-jump-btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.modal-week-jump-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  color: var(--text-60);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  white-space: nowrap;
}
.modal-week-jump-btn:hover { color: var(--text-86); background: var(--sr-surface-4); }
.modal-week-jump-btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }

/* ============================================================
   Export dropdown
   ============================================================ */

.export-dropdown {
  position: relative;
  display: inline-block;
}

.export-btn {
  /* inherits base button styles */
}

.export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card, #1e1e1e);
  border: 1px solid var(--card-border, #333);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  min-width: 170px;
  z-index: 200;
  overflow: hidden;
  padding: 4px;
}

.export-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text, #eee);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.export-menu-item:hover {
  background: var(--card-border, #2a2a2a);
}

/* HARD FIX override — keep at bottom */
.modal.hidden { display:none !important; }
.hidden { display:none !important; }

/* ============================================================
   FASTSTAFF REDESIGN — New design tokens + layout
   All existing rules above are preserved unchanged.
   ============================================================ */

/* New design tokens — light mode defaults */
:root {
  --sr-bg:           #f5f3f0;
  --sr-surface:      #ffffff;
  --sr-surface-2:    #f0ede9;
  --sr-surface-3:    #e8e4df;
  --sr-surface-4:    #e0dbd5;
  --sr-border:       rgba(0,0,0,0.07);
  --sr-border-strong:rgba(0,0,0,0.13);
  --sr-green:        #16A34A;
  --sr-green-dark:   #15803D;
  --sr-green-pale:   rgba(22,163,74,0.10);
  --sr-green-mid:    rgba(22,163,74,0.18);
  --sr-red:          #DC2626;
  --sr-red-pale:     rgba(220,38,38,0.08);
  --sr-amber:        #B45309;
  --sr-amber-pale:   rgba(180,83,9,0.08);
  --text-86:         rgba(0,0,0,0.88);
  --text-60:         rgba(0,0,0,0.65);
  --text-40:         rgba(0,0,0,0.52);
  --text-20:         rgba(0,0,0,0.28);
  --text-08:         rgba(0,0,0,0.09);

  /* Toolbar button tokens — light mode */
  --btn-bg:          #ffffff;
  --btn-border:      rgba(0,0,0,0.13);
  --btn-shadow:      0 1px 2px rgba(0,0,0,0.06);

  /* Per-shift-type pill colours — light mode */
  --sp-bfoh-bg:  rgba(22,163,74,0.18);
  --sp-bfoh-fg:  #14532d;
  --sp-bkit-bg:  rgba(13,148,136,0.18);
  --sp-bkit-fg:  #134e4a;
  --sp-hk-bg:    rgba(99,102,241,0.18);
  --sp-hk-fg:    #312e81;
  --sp-efoh-bg:  rgba(234,88,12,0.18);
  --sp-efoh-fg:  #7c2d12;
  --sp-ekit-bg:  rgba(180,83,9,0.18);
  --sp-ekit-fg:  #78350f;
  --sp-rec-bg:   rgba(147,51,234,0.18);
  --sp-rec-fg:   #581c87;
}

/* Dark mode overrides */
[data-theme="dark"] {
  --sr-bg:           #0e0e0e;
  --sr-surface:      #161616;
  --sr-surface-2:    #1c1c1c;
  --sr-surface-3:    #242424;
  --sr-surface-4:    #2a2a2a;
  --sr-border:       rgba(255,255,255,0.06);
  --sr-border-strong:rgba(255,255,255,0.11);
  --sr-green:        #22C55E;
  --sr-green-dark:   #16A34A;
  --sr-green-pale:   rgba(34,197,94,0.09);
  --sr-green-mid:    rgba(34,197,94,0.16);
  --sr-red:          #F87171;
  --sr-red-pale:     rgba(248,113,113,0.09);
  --sr-amber:        #FBBF24;
  --sr-amber-pale:   rgba(251,191,36,0.09);
  --text-86:         rgba(255,255,255,0.86);
  --text-60:         rgba(255,255,255,0.58);
  --text-40:         rgba(255,255,255,0.38);
  --text-20:         rgba(255,255,255,0.20);
  --text-08:         rgba(255,255,255,0.08);

  /* Toolbar button tokens — dark mode */
  --btn-bg:          var(--sr-surface-3);
  --btn-border:      rgba(255,255,255,0.11);
  --btn-shadow:      none;

  /* Per-shift-type pill colours — dark mode */
  --sp-bfoh-bg:  rgba(34,197,94,0.14);
  --sp-bfoh-fg:  #4ade80;
  --sp-bkit-bg:  rgba(16,185,129,0.14);
  --sp-bkit-fg:  #34d399;
  --sp-hk-bg:    rgba(99,102,241,0.14);
  --sp-hk-fg:    #a5b4fc;
  --sp-efoh-bg:  rgba(249,115,22,0.14);
  --sp-efoh-fg:  #fb923c;
  --sp-ekit-bg:  rgba(234,179,8,0.14);
  --sp-ekit-fg:  #fbbf24;
  --sp-rec-bg:   rgba(168,85,247,0.14);
  --sp-rec-fg:   #c084fc;
}

/* ── Override html/body for new chrome ── */
html, body {
  background: var(--sr-bg) !important;
  color: var(--text-86) !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 17px;
}

/* ── dash-page: new full-height column layout ── */
.dash-page {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
  gap: 0 !important;
  max-width: 100% !important;
  background: var(--sr-bg);
}

/* ══════════════════════════════════════
   TOP NAV
══════════════════════════════════════ */
.topnav {
  height: 46px;
  flex-shrink: 0;
  background: var(--sr-surface);
  border-bottom: 1px solid var(--sr-border);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 0;
  z-index: 30;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-wm {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.logo-s { font-size: 18px; font-weight: 900; color: var(--text-86); letter-spacing: -0.3px; }
.logo-r { font-size: 18px; font-weight: 900; color: var(--sr-green); letter-spacing: -0.3px; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.lg { width: 6px; height: 6px; border-radius: 1.5px; background: var(--text-20); }
.lg.g { background: var(--sr-green); }

.nav-tabs {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-tab {
  height: 100%;
  padding: 0 13px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-40);
  cursor: pointer;
  border: none !important;
  background: none !important;
  font-family: inherit;
  border-bottom: 2px solid transparent !important;
  transition: all 0.12s;
  border-radius: 0;
}
.nav-tab:hover { color: var(--text-60); background: none !important; border-color: transparent !important; }
.nav-tab.active { color: var(--sr-green); border-bottom-color: var(--sr-green) !important; font-weight: 600; background: none !important; }

/* Lock nav tabs while generation is running */
body[data-generating="true"] .nav-tab:not(.active) {
  pointer-events: none;
  opacity: 0.4;
}

/* ── User avatar + dropdown ── */
.user-menu-wrap {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.user-avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4B6EE8;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
.user-avatar-btn:hover { opacity: 0.85; }

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  overflow: hidden;
}

[data-theme="dark"] .user-menu-dropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,0.40);
}

.user-menu-email {
  padding: 11px 14px 9px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  background: none;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  text-align: left;
}
.user-menu-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .user-menu-item:hover { background: rgba(255,255,255,0.06); }
.user-menu-dropdown form { margin: 0; }

/* Inside dashboard nav-right, separate avatar from stat chips */
.nav-right .user-menu-wrap {
  padding-left: 10px;
  border-left: 1px solid var(--sr-border);
  margin-left: 0;
}

/* Nav right — stats strip */
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border-left: 1px solid var(--sr-border);
  font-size: 15px;
  color: var(--text-40);
}
.nav-stat strong { font-weight: 700; color: var(--text-60); }

.nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sr-green);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   COMMAND BAR
══════════════════════════════════════ */
.cmdbar {
  height: 60px;
  flex-shrink: 0;
  background: var(--sr-surface);
  border-bottom: 1px solid var(--sr-border);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 5px;
}

.btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
}

button.btn-generate {
  background: var(--sr-green);
  color: #0a0a0a;
  font-weight: 800;
  font-size: 15px;
  padding: 0 14px;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.4);
  transition: all 0.15s, box-shadow 0.3s;
}
button.btn-generate:hover {
  background: var(--sr-green);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.15);
}

.btn-sec {
  background: var(--sr-surface-3);
  border-color: var(--sr-border-strong);
  color: var(--text-60);
}
.btn-sec:hover { color: var(--text-86); background: var(--sr-surface-4); border-color: var(--sr-border-strong); }

.btn-ghost {
  background: transparent;
  border-color: var(--sr-border);
  color: var(--text-40);
}
.btn-ghost:hover { color: var(--text-60); background: var(--sr-surface-3); border-color: var(--sr-border-strong); }

.cmdbar button:disabled { opacity: 0.5; cursor: not-allowed; }

button.btn-destructive {
  background: #dc2626;
  border: 1px solid #dc2626;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
button.btn-destructive:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
button.btn-destructive:disabled {
  opacity: 0.5;
}

/* Clear All buttons (toolbar) */
#clearAllBtn {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
#clearAllBtn:hover:not(:disabled) {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}

/* Ambient optimizer dot */
.ambient-active { position: relative; }
.ambient-dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sr-green);
  position: absolute;
  top: 5px;
  right: 7px;
  pointer-events: none;
}
.ambient-active .ambient-dot { display: block; animation: ambient-pulse 2s ease-in-out infinite; }

@keyframes ambient-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.82); }
}

.cmd-sep {
  width: 1px;
  height: 18px;
  background: var(--sr-border);
  margin: 0 3px;
  flex-shrink: 0;
}

.cmd-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

#status {
  font-size: 15px;
  color: var(--text-40);
}


/* ══════════════════════════════════════
   ROTA HEADER
══════════════════════════════════════ */
.rota-header {
  height: 52px;
  flex-shrink: 0;
  background: var(--sr-surface-2);
  border-bottom: 1px solid var(--sr-border);
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.rota-title-block {
  flex: 1;
  display: flex;
  align-items: center;
}
.rota-hint { font-size: 11px; color: var(--text-40); letter-spacing: 0.01em; }

.page-help-btn {
  width: 40px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.55;
  justify-content: center;
  align-items: center;
}
.page-help-btn:hover { opacity: 1; }

.page-help-tooltip {
  position: absolute;
  z-index: 1200;
  max-width: 300px;
  background: #1e1e1e;
  color: rgba(255,255,255,0.85);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  pointer-events: none;
}

.app-tooltip {
  position: fixed;
  z-index: 1300;
  max-width: 260px;
  background: #1e1e1e;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: normal;
}
.app-tooltip.visible {
  opacity: 1;
}

/* Week nav — centred in the flex row */
.week-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.week-arrow {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-60);
  font-size: 18px;
  transition: all 0.12s;
  user-select: none;
}
.week-arrow:hover { color: var(--text-86); background: var(--sr-surface-4); }
.week-label {
  font-size: 16px;
  font-weight: 700;
  min-width: 160px;
  text-align: center;
  color: var(--text-86);
  user-select: none;
}
.today-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  color: var(--text-60);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.today-btn:hover { color: var(--text-86); background: var(--sr-surface-4); }
.today-btn.dash-nav-today--current { opacity: 0.5; cursor: default; }

.rota-header-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

/* Icon buttons in rota-header */
.icon-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--text-60);
  font-family: inherit;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon-btn:hover { color: var(--text-86); background: var(--sr-surface-4); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.icon-btn-export:hover { background: var(--sr-surface-2); }

/* Violations toggle */
.violations-toggle {
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--sr-border);
  background: var(--sr-surface-3);
  color: var(--text-60);
  font-family: inherit;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
}
.violations-toggle:hover { color: var(--text-86); background: var(--sr-surface-4); }
.violations-toggle.has-errors {
  border-color: rgba(248,113,113,0.3);
  background: var(--sr-red-pale);
  color: var(--sr-red);
}
.violations-toggle.all-clear {
  border-color: var(--sr-green-mid);
  background: var(--sr-green-pale);
  color: var(--sr-green);
}

/* ══════════════════════════════════════
   WORKSPACE — rota area + drawer
══════════════════════════════════════ */
.workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.rota-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  transition: margin-right 0.25s cubic-bezier(0.4,0,0.2,1);
}

.rota-area.panel-open { margin-right: 0; }

/* Past week banner inside rota-area */
.rota-area .dash-past-week-banner {
  flex-shrink: 0;
  margin: 8px 18px 0;
  border-radius: 8px;
}

/* Rota scroll area — override old .dash-rota-scroll */
.dash-rota-scroll {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 18px 18px !important;
  margin-top: 8px;
}

/* Override rota table styles for dark theme */
#rota-header table,
#rota table {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

#rota-header th {
  background: var(--sr-bg) !important;
  color: var(--text-20) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid var(--sr-border) !important;
  border-right: none !important;
  padding: 10px 3px 8px !important;
  position: sticky;
  top: 0;
  z-index: 5;
}

#rota table td {
  border-bottom: 1px solid var(--sr-border) !important;
  border-right: none !important;
  padding: 3px 2px !important;
  vertical-align: middle !important;
}

#rota table tr:hover td { background: rgba(255,255,255,0.015) !important; }

/* Employee name cell */
#rota td:first-child {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-60) !important;
  padding: 6px 6px !important;
  text-align: left !important;
}

/* Hours / cost cells */
.rota-total-hours,
.rota-total-cost {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-40) !important;
  text-align: center !important;
}

/* Demand row in dark theme */
.rota-demand-row td {
  background: rgba(251,191,36,0.045) !important;
  border-bottom: 1.5px solid rgba(251,191,36,0.10) !important;
  color: rgba(251,191,36,0.48) !important;
}
.rota-demand-label {
  color: rgba(251,191,36,0.4) !important;
  font-size: 13px !important;
}

/* Shift cell content */
.rota-cell-inner {
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* Empty cell */
.rota-cell-empty {
  background: transparent !important;
}
.rota-cell-placeholder {
  font-size: 16px !important;
  font-weight: 200 !important;
  color: var(--text-08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  border: 1px dashed var(--text-08) !important;
  border-radius: 5px !important;
}
.rota-cell-empty:hover .rota-cell-placeholder {
  border-color: rgba(34,197,94,0.25) !important;
  color: rgba(34,197,94,0.35) !important;
  background: rgba(34,197,94,0.04) !important;
}

/* Empty cells: JS sets explicit px height on .rota-cell-inner; flex distributes it */
.rota-cell-empty .rota-cell-inner {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.rota-cell-empty .seg-list {
  flex: 1;
  min-height: 0;
}
.rota-cell-empty .seg-list > .seg-add-btn {
  flex: 1;
  min-height: 42px;
  height: auto;
}
.rota-cell-empty .rota-cell-inner > .seg-add-btn {
  flex: 1;
  min-height: 52px;
  height: auto;
}

/* Shift pill style — wraps the existing coloured cell */
.rota-cell:not(.rota-cell-empty) .rota-cell-inner {
  border-radius: 5px;
  padding: 4px 3px;
  height: auto;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.rota-cell:not(.rota-cell-empty) .seg-list {
  flex: 1;
}
.rota-cell:not(.rota-cell-empty) .seg-add-btn {
  flex: 1;
  height: auto;
}

/* ══════════════════════════════════════
   VIOLATIONS DRAWER
══════════════════════════════════════ */
.violations-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  min-width: 200px;
  max-width: 600px;
  background: var(--sr-surface);
  border-left: 1px solid var(--sr-border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index: 20;
  overflow: hidden;
}
.violations-drawer.open { transform: translateX(0); }
.violations-drawer.resizing { transition: none; }

.vd-resize-handle {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: ew-resize;
  z-index: 10;
}
.vd-resize-handle:hover,
.vd-resize-handle:active {
  background: var(--sr-green);
  opacity: 0.35;
}

.vd-head {
  padding: 13px 15px 10px;
  border-bottom: 1px solid var(--sr-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vd-title { font-size: 15px; font-weight: 800; color: var(--text-86); }
.vd-close {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: var(--sr-surface-3);
  border: 1px solid var(--sr-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-40);
  transition: all 0.12s;
}
.vd-close:hover { color: var(--text-86); }

.vd-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.vd-section {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--sr-border);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.1s;
}
.vd-section:hover { background: rgba(255,255,255,0.02); }

.vd-sec-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.icon-ok   { background: var(--sr-green-pale); color: var(--sr-green); }
.icon-err  { background: var(--sr-red-pale);   color: var(--sr-red);   }
.icon-warn { background: var(--sr-amber-pale); color: var(--sr-amber); }

.vd-sec-label { flex: 1; color: var(--text-60); }
.vd-count-ok  { color: var(--sr-green);  font-size: 13px; font-weight: 800; }
.vd-count-err { color: var(--sr-red);    font-size: 13px; font-weight: 800; }

.vd-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 15px;
  font-size: 13px;
  color: var(--text-40);
  line-height: 1.45;
  border-bottom: 1px solid rgba(255,255,255,0.025);
  transition: background 0.1s;
  cursor: default;
}
.vd-item:hover { background: rgba(255,255,255,0.02); }

.violation-fix {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-30, rgba(255,255,255,0.3));
}
[data-theme="light"] .violation-fix { color: rgba(0,0,0,0.38); }

.coverage-stat {
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  letter-spacing: 0.01em;
}
.coverage-stat-ok  { color: var(--sr-green); }
.coverage-stat-err { color: var(--sr-red); }
[data-theme="light"] .coverage-stat { border-bottom-color: rgba(0,0,0,0.06); }

.cost-item { justify-content: space-between; font-size: 12px; }
.cost-item span:first-child { color: var(--text-50, rgba(255,255,255,0.5)); }
.cost-item span:last-child  { font-variant-numeric: tabular-nums; color: var(--text-70, rgba(255,255,255,0.7)); }
[data-theme="light"] .cost-item span:first-child { color: rgba(0,0,0,0.5); }
[data-theme="light"] .cost-item span:last-child  { color: rgba(0,0,0,0.75); }
.cost-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 15px; }
[data-theme="light"] .cost-divider { background: rgba(0,0,0,0.06); }

.vd-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.dot-ok   { background: var(--sr-green); }
.dot-err  { background: var(--sr-red); }
.dot-warn { background: var(--sr-amber); }
.dot-info { background: var(--text-40); }

/* ── Categorised violations panel (Amendment #2) ── */
.vd-category {
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 2px;
}
.vd-category summary { list-style: none; }
.vd-category summary::-webkit-details-marker { display: none; }
.vd-cat-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 15px 5px 10px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-60);
  border-radius: 4px;
}
.vd-cat-summary:hover { background: rgba(255,255,255,0.04); }
.vd-cat-label { flex: 1; }
.vd-cat-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}
.badge-err  { background: rgba(185,28,28,0.22);  color: var(--sr-red); }
.badge-warn { background: rgba(180,83,9,0.22);   color: var(--sr-amber); }
.badge-ok   { background: rgba(22,163,74,0.15);  color: var(--sr-green); }
.badge-info { background: rgba(255,255,255,0.08); color: var(--text-40); }
/* Light theme overrides */
[data-theme="light"] .vd-category { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .vd-cat-summary:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .badge-err  { background: rgba(185,28,28,0.12); }
[data-theme="light"] .badge-warn { background: rgba(180,83,9,0.12); }
[data-theme="light"] .badge-ok   { background: rgba(22,163,74,0.10); }
[data-theme="light"] .badge-info { background: rgba(0,0,0,0.06); color: var(--text-40); }

.vd-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  background: var(--sr-green-pale);
  border-top: 1px solid var(--sr-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--sr-green);
  cursor: pointer;
  flex-shrink: 0;
}
.vd-footer:hover { background: var(--sr-green-mid); }

/* Scrollbar — thin */
.violations-drawer ::-webkit-scrollbar,
.vd-scroll::-webkit-scrollbar { width: 3px; }
.violations-drawer ::-webkit-scrollbar-track,
.vd-scroll::-webkit-scrollbar-track { background: transparent; }
.violations-drawer ::-webkit-scrollbar-thumb,
.vd-scroll::-webkit-scrollbar-thumb { background: var(--sr-border-strong); border-radius: 2px; }

/* ══════════════════════════════════════
   Export dropdown — dark theme override
══════════════════════════════════════ */
.rota-header .export-menu {
  background: var(--sr-surface-2);
  border-color: var(--sr-border-strong);
}
.rota-header .export-menu-item {
  color: var(--text-60);
}
.rota-header .export-menu-item:hover {
  background: var(--sr-surface-3);
  color: var(--text-86);
}

/* ══════════════════════════════════════
   Modals — keep light theme but ensure z-index
   (the existing .modal styles handle these)
══════════════════════════════════════ */

/* Override card hover glow on dark bg */
.dash-page .card:hover { border-color: var(--sr-border-strong); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* DM Sans font import */

/* ── nav-stat-good: green colouring when 0 violations ── */
.nav-stat-good strong {
  color: var(--sr-green) !important;
}

/* ── page-dashboard: suppress base navbar + container on dashboard page ── */
.page-dashboard .navbar {
  display: none !important;
}

.page-dashboard .container {
  padding: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure body is also full-height with no overflow when on dashboard */
body.page-dashboard {
  overflow: hidden !important;
  height: 100vh !important;
}

/* ══════════════════════════════════════
   SHIFT PILL — inner pill styling
   .shift-pill-inner lives inside .rota-cell-inner
══════════════════════════════════════ */
.shift-pill-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 5px 4px;
  min-height: 38px;
  width: 100%;
  gap: 2px;
  position: relative;
}

.shift-pill-name {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.shift-pill-time {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  opacity: 0.82;
  white-space: nowrap;
}

/* Hover brightens the pill */
.rota-cell:not(.rota-cell-empty):hover .shift-pill-inner {
  filter: brightness(1.15);
}

/* Ineligible stripe — dark theme version (overrides light theme ::after) */
.rota-cell-ineligible {
  position: relative;
  outline: 2px solid rgba(251,191,36,0.5) !important;
  outline-offset: -2px;
  border-radius: 4px;
}

.rota-cell-ineligible::after {
  content: "⚠ INELIGIBLE";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(251,191,36,0.82);
  color: #000;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 2px 0;
  border-radius: 0 0 4px 4px;
  pointer-events: none;
  z-index: 3;
}

/* Rows expand to fit content — role view can have multiple pills per cell */
#rota-employees-container #rota table tbody tr {
  /* overflow on <tr> is ignored by browsers — intentionally empty */
}

#rota-employees-container #rota table tbody td {
  overflow: visible;
  vertical-align: top;
}

/* ── Pill fixed height ── */
.shift-pill-inner {
  height: 54px;
  min-height: 54px;
  max-height: 54px;
}

.shift-pill-name {
  font-size: 14px;
}
.shift-pill-time {
  font-size: 12px;
}

/* ══════════════════════════════════════
   ROW HEIGHT CAP — removed, dynamic scaling handles this
══════════════════════════════════════ */

/* ══════════════════════════════════════
   SCALE — make 100% zoom look like 120%
   zoom scales everything: px values, borders,
   layout — equivalent to browser zoom
══════════════════════════════════════ */
body.page-dashboard .container {
  padding: 0;
}

/* ══════════════════════════════════════
   INELIGIBLE STRIPE FIX
   Clip the ::after to the pill shape, not the full td
══════════════════════════════════════ */

/* Remove stripe from td level */
.rota-cell-ineligible::after {
  display: none !important;
}

/* Put the stripe on the pill inner instead */
.rota-cell-ineligible .shift-pill-inner {
  overflow: hidden;
  position: relative;
}

.rota-cell-ineligible .shift-pill-inner::after {
  content: "⚠ INELIGIBLE";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(251,191,36,0.88);
  color: #000;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 2px 0;
  pointer-events: none;
}

/* Amber outline on the pill, not the td */
.rota-cell-ineligible {
  outline: none !important;
}

.rota-cell-ineligible .shift-pill-inner {
  outline: 1.5px solid rgba(251,191,36,0.5);
  border-radius: 6px;
}

/* ══════════════════════════════════════
   INELIGIBLE — inline label, no ::after
══════════════════════════════════════ */

/* Kill all ::after approaches */
.rota-cell-ineligible::after,
.rota-cell-ineligible .shift-pill-inner::after {
  display: none !important;
  content: none !important;
}

.shift-pill-ineligible-label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  background: rgba(251,191,36,0.9);
  border-radius: 0 0 5px 5px;
  padding: 2px 0;
  margin: 2px -4px -5px -4px;
}

/* ══════════════════════════════════════
   INELIGIBLE LABEL — grid layout fix
══════════════════════════════════════ */
.rota-cell-ineligible .shift-pill-inner {
  display: grid !important;
  grid-template-rows: 1fr auto;
  padding-bottom: 0 !important;
  overflow: hidden;
  border-radius: 6px;
}

.rota-cell-ineligible .shift-pill-name,
.rota-cell-ineligible .shift-pill-time {
  /* stay in normal flow, vertically centred in the top row */
}

.shift-pill-ineligible-label {
  grid-row: 2;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  background: rgba(251,191,36,0.9);
  padding: 2px 0;
  margin: 0 !important;
  border-radius: 0 0 5px 5px;
}

/* ══════════════════════════════════════
   INELIGIBLE — corner dot badge
══════════════════════════════════════ */

/* Kill all previous ineligible stripe/label attempts */
.rota-cell-ineligible::after,
.rota-cell-ineligible .shift-pill-inner::after,
.shift-pill-ineligible-label { display: none !important; content: none !important; }

/* Reset pill to normal flex for ineligible cells */
.rota-cell-ineligible .shift-pill-inner {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 5px !important;
  overflow: visible !important;
  outline: 1.5px solid rgba(251,191,36,0.45);
  border-radius: 6px;
}

/* Remove td-level outline */
.rota-cell-ineligible { outline: none !important; }

/* The dot */
.shift-pill-ineligible-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 1.5px var(--sr-bg, #0e0e0e);
  pointer-events: none;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   EMPLOYEE AVATAR CELL
══════════════════════════════════════ */
.td-emp {
  text-align: left !important;
  padding: 4px 6px !important;
  min-width: 140px;
}

.emp-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.emp-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.emp-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.emp-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-60, rgba(255,255,255,0.58));
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-role {
  font-size: 13px;
  color: var(--text-20, rgba(255,255,255,0.20));
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Employee cell hover (clickable to edit) ── */
.td-emp:hover .emp-name {
  color: var(--sr-green) !important;
}
.td-emp:hover .emp-av {
  outline: 2px solid var(--sr-green);
  outline-offset: 1px;
}

/* ══════════════════════════════════════
   EMPLOYEE COLUMN — wide enough for name + role pill
══════════════════════════════════════ */
#rota th:first-child,
#rota td:first-child,
#rota-header th:first-child,
#rota-header td:first-child,
.td-emp {
  width: 190px !important;
  min-width: 190px !important;
}

/* Never truncate the role subtitle */
.emp-role {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* ══════════════════════════════════════
   EMPLOYEES PAGE — dark theme overrides
══════════════════════════════════════ */
.page-dashboard .emp-page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--sr-bg);
}

/* Employees page specifically (identified via the Staff Access box, which
   only exists here — other pages sharing .emp-page/.emp-grid, e.g. Demand,
   Coverage, keep the pinned-toolbar/internally-scrolling-grid behavior
   above untouched): scroll the whole page as one unit — toolbar, Staff
   Access, and cards all move together — instead of pinning the toolbar and
   only scrolling the card grid underneath it. */
.page-dashboard .emp-page:has(.staff-access-details) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.page-dashboard .emp-page:has(.staff-access-details) .emp-grid {
  flex: none !important;
  overflow: visible !important;
  padding-right: 24px !important;
}

/* Match the toolbar's horizontal inset to Staff Access/the card grid (24px)
   instead of the base 18px, so the "+ Add Employee" row lines up with
   everything below it. Scoped the same way — other pages sharing
   .emp-toolbar keep their existing 18px. */
.page-dashboard .emp-page:has(.staff-access-details) .emp-toolbar {
  padding: 0 24px !important;
}

/* Toolbar — flush like cmdbar, no card styling */
.page-dashboard .emp-toolbar {
  background: var(--sr-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--sr-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 18px !important;
  height: 60px !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

/* Description text — compact */
.page-dashboard .emp-page > .muted {
  padding: 6px 24px 6px !important;
  flex-shrink: 0;
}

/* Grid — padded */
.page-dashboard .emp-grid {
  flex: 1;
  min-height: 0;
  padding: 16px 24px 24px !important;
  gap: 10px !important;
}

.page-dashboard .emp-search {
  background: var(--sr-surface-2) !important;
  border: 1px solid var(--sr-border-strong) !important;
  color: var(--text-86) !important;
  border-radius: 7px !important;
  font-size: 14px;
  width: 240px !important;
  flex: 0 0 auto !important;
}

.page-dashboard .emp-search::placeholder {
  color: var(--text-40) !important;
}

.page-dashboard .emp-card {
  background: var(--sr-surface) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 12px !important;
  color: var(--text-86) !important;
}

.page-dashboard .emp-card:hover {
  border-color: var(--sr-border-strong) !important;
}

.page-dashboard .muted {
  color: var(--text-40) !important;
}

/* ── Employee card internals — dark theme ── */
.page-dashboard .emp-card-header {
  background: transparent !important;
}
.page-dashboard .emp-card-name {
  color: var(--text-86) !important;
}
.page-dashboard .emp-card-label {
  color: var(--text-40) !important;
}
.page-dashboard .emp-card-body {
  background: transparent !important;
  border-top-color: var(--sr-border) !important;
}
.page-dashboard .chip {
  background: var(--sr-surface-3) !important;
  border: 1px solid var(--sr-border-strong) !important;
  color: var(--text-60) !important;
}
.page-dashboard .chip--day {
  background: var(--sr-surface-4) !important;
  color: var(--text-40) !important;
}
.page-dashboard .chip--warn {
  background: var(--sr-amber-pale) !important;
  border-color: rgba(251,191,36,0.35) !important;
  color: var(--sr-amber) !important;
}
.page-dashboard .chip--error {
  background: var(--sr-red-pale) !important;
  border-color: rgba(220,38,38,0.30) !important;
  color: var(--sr-red) !important;
}
.page-dashboard .cw-warning-chips {
  border-top-color: var(--sr-border) !important;
}
.page-dashboard .cw-uncovered-section {
  border-color: var(--sr-border) !important;
}
.page-dashboard .cw-uncovered-summary {
  color: var(--text-60) !important;
  background: var(--sr-surface-3) !important;
}
.page-dashboard .cw-uncovered-count {
  background: var(--sr-surface-4) !important;
  color: var(--text-40) !important;
}
.page-dashboard .cw-uncovered-tile {
  color: var(--text-40) !important;
  background: var(--sr-surface-3) !important;
  border-color: var(--sr-border) !important;
}

/* Edit — green like all-clear */
.page-dashboard .emp-btn--edit {
  background: var(--sr-green-pale) !important;
  border: 1px solid var(--sr-green-mid) !important;
  color: var(--sr-green) !important;
}
.page-dashboard .emp-btn--edit:hover {
  background: var(--sr-green-mid) !important;
}

.page-dashboard .emp-btn--delete {
  background: #dc2626 !important;
  border: 1px solid #dc2626 !important;
  color: #fff !important;
}
.page-dashboard .emp-btn--delete:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}
.page-dashboard .status-badge--contracted {
  background: var(--sr-green-pale) !important;
  border-color: var(--sr-green-mid) !important;
  color: var(--sr-green) !important;
}
.page-dashboard .status-badge--zerohours {
  background: var(--sr-amber-pale) !important;
  border-color: rgba(251,191,36,0.2) !important;
  color: var(--sr-amber) !important;
}
}
.page-dashboard .status-badge--zerohours {
  background: var(--sr-amber-pale) !important;
  border-color: rgba(251,191,36,0.2) !important;
  color: var(--sr-amber) !important;
}
/* Modal dark theme */
.page-dashboard .modal-content {
  background: var(--sr-surface) !important;
  border: 1px solid var(--sr-border-strong) !important;
  color: var(--text-86) !important;
}
.page-dashboard .modal-content input,
.page-dashboard .modal-content select {
  background: var(--sr-surface-2) !important;
  border: 1px solid var(--sr-border-strong) !important;
  color: var(--text-86) !important;
  border-radius: 7px !important;
}
.page-dashboard .modal-content label {
  color: var(--text-60) !important;
}
/* ── Demand modal — explicit colour overrides so th/td are visible in both themes ── */
/* ── Demand modal — Light mode (default) ── */
#demandModal .modal-content {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  color: #111111 !important;
}
#demandModal h2 {
  color: #111111 !important;
}
#demandModal .muted {
  color: #666666 !important;
}
#demandModal .dash-demand-table {
  background: transparent !important;
  border: none !important;
  border-collapse: collapse !important;
}
#demandModal .dash-demand-table thead th {
  color: #555555 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  padding: 8px 6px !important;
}
#demandModal .dash-demand-table tbody td {
  background: transparent !important;
  border: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 6px !important;
}
#demandModal .dash-demand-table td {
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
}
#demandModal .dash-demand-row-label {
  color: #222222 !important;
  background: transparent !important;
  padding-right: 16px !important;
}
#demandModal .dash-demand-input,
#demandModal input.dash-demand-input {
  background: #ffffff !important;
  border: 1px solid #cfcfcf !important;
  color: #111111 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  width: 80px !important;
  text-align: center !important;
  outline: none !important;
  box-shadow: none !important;
}
#demandModal .dash-demand-input:focus,
#demandModal input.dash-demand-input:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15) !important;
  outline: none !important;
}
#demandModal .dash-demand-input:hover,
#demandModal input.dash-demand-input:hover {
  border-color: #999999 !important;
}

/* ── Demand modal — Dark mode ── */
[data-theme="dark"] #demandModal .modal-content {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.86) !important;
}
[data-theme="dark"] #demandModal h2 {
  color: rgba(255,255,255,0.86) !important;
}
[data-theme="dark"] #demandModal .muted {
  color: rgba(255,255,255,0.50) !important;
}
[data-theme="dark"] #demandModal .dash-demand-table thead th {
  color: rgba(255,255,255,0.60) !important;
}
[data-theme="dark"] #demandModal .dash-demand-row-label {
  color: rgba(255,255,255,0.86) !important;
}
[data-theme="dark"] #demandModal .dash-demand-input,
[data-theme="dark"] #demandModal input.dash-demand-input {
  background: #2a2a2a !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.90) !important;
}
[data-theme="dark"] #demandModal .dash-demand-input:focus,
[data-theme="dark"] #demandModal input.dash-demand-input:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.20) !important;
}
[data-theme="dark"] #demandModal .dash-demand-input:hover,
[data-theme="dark"] #demandModal input.dash-demand-input:hover {
  border-color: rgba(255,255,255,0.25) !important;
}

/* ══════════════════════════════════════
   SHIFTS PAGE — dark theme overrides
══════════════════════════════════════ */
.page-dashboard .shift-card {
  background: var(--sr-surface) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.page-dashboard .shift-card:hover {
  border-color: var(--sr-border-strong) !important;
}

.page-dashboard .shift-card-inner {
  background: transparent !important;
}

.page-dashboard .shift-card-band {
  opacity: 0.85;
}

/* ══════════════════════════════════════
   CONSTRAINTS PAGE — full redesign
══════════════════════════════════════ */
.constraints-page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Tab bar — underline style matching nav ── */
#tabsBar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--sr-border);
  flex-shrink: 0;
  background: var(--sr-surface-2);
  flex-wrap: nowrap;
}

.c-tab {
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-40);
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  flex-shrink: 0;
  white-space: nowrap;
}

.c-tab:hover { color: var(--text-60); }

.c-tab.active {
  color: var(--sr-green) !important;
  border-bottom-color: var(--sr-green) !important;
  font-weight: 700;
}

/* ── Tab panels ── */
#tabsPanels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

.c-panel { display: none; }
.c-panel.active { display: block; }

/* ── Section groups (legacy, kept for safety) ── */
.c-section {
  margin-bottom: 0;
}

.c-section-label {
  display: none;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--sr-border);
}

.c-section-label--hard { color: var(--sr-red); }
.c-section-label--soft { color: var(--sr-amber); }

.c-section-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.c-section-dot--hard { background: var(--sr-red); }
.c-section-dot--soft { background: var(--sr-amber); }

/* ── Constraint rows ── */
.c-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
  cursor: default;
}

.c-row:hover {
  background: var(--sr-surface);
  border-color: var(--sr-border);
}

.c-row--disabled .c-text,
.c-row--disabled .c-input {
  opacity: 1;
}

/* Row text */
.c-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.c-text {
  font-size: 14px;
  color: var(--text-60);
  line-height: 1.4;
}

/* ── Compact pill inputs ── */
.c-input {
  background: var(--sr-surface-3) !important;
  border: 1px solid var(--sr-border-strong) !important;
  color: var(--text-86) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  transition: border-color 0.12s;
}

.c-input:focus {
  border-color: var(--sr-green) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--sr-green-pale) !important;
}

.c-input--num  { width: 60px; text-align: center; }
.c-input--time { width: 100px; }
.c-input--text { width: 140px; }

/* ── Toggle switch ── */
.c-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.c-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.c-toggle-track {
  width: 36px;
  height: 21px;
  border-radius: 11px;
  background: var(--sr-surface-4);
  border: 1px solid var(--sr-border-strong);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  flex-shrink: 0;
}

.c-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-40);
  transition: all 0.15s;
}

.c-toggle input:checked + .c-toggle-track {
  background: var(--sr-green-pale);
  border-color: var(--sr-green-mid);
}

.c-toggle input:checked + .c-toggle-track::after {
  background: var(--sr-green);
  transform: translateX(15px);
}

/* ── Help modal ── */
.page-dashboard #helpModal .modal-content {
  background: var(--sr-surface) !important;
  border: 1px solid var(--sr-border-strong) !important;
  color: var(--text-86) !important;
}

.page-dashboard #helpModal p,
.page-dashboard #helpModal li {
  color: var(--text-60) !important;
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   LIGHT MODE — Dashboard readability overrides
   These correct elements that use --text-08/20/40 tokens
   which are too faint on the warm off-white background.
   ============================================================ */

[data-theme="light"] #rota-header th {
  color: rgba(0,0,0,0.50) !important;
}

[data-theme="light"] .rota-hint {
  color: rgba(0,0,0,0.42) !important;
}

[data-theme="light"] .rota-cell-placeholder {
  color: rgba(0,0,0,0.25) !important;
  border-color: rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .rota-cell-empty:hover .rota-cell-placeholder {
  border-color: rgba(22,163,74,0.45) !important;
  color: rgba(22,163,74,0.60) !important;
  background: rgba(22,163,74,0.06) !important;
}

[data-theme="light"] .emp-role {
  color: rgba(0,0,0,0.48) !important;
}

[data-theme="light"] .page-dashboard .muted {
  color: rgba(0,0,0,0.52) !important;
}

[data-theme="light"] .nav-stat span {
  color: rgba(0,0,0,0.52) !important;
}

[data-theme="light"] .nav-stat strong {
  color: rgba(0,0,0,0.70) !important;
}


[data-theme="light"] #rota th {
  color: rgba(0,0,0,0.60) !important;
}
/* ========================================================================
   Global outline removal - no colored focus rings anywhere
   ======================================================================== */

/* Kill ALL browser default focus outlines globally */
*:focus,
*:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
button:focus,
button:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
}

/* Remove blue box-shadow from ALL inputs globally */
input:focus,
select:focus {
  box-shadow: none !important;
}

/* Demand modal inputs - NO outline, NO box-shadow */
#demandModal input,
#demandModal .dash-demand-input,
.page-dashboard #demandModal input,
.page-dashboard #demandModal .dash-demand-input,
.dash-demand-table input,
input[data-field][data-day] {
  outline: none !important;
  box-shadow: none !important;
}

#demandModal input:focus,
#demandModal .dash-demand-input:focus,
.page-dashboard #demandModal input:focus,
.page-dashboard #demandModal .dash-demand-input:focus,
.dash-demand-table input:focus,
input[data-field][data-day]:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Buttons - NO outline ever */
#demandModal button,
.page-dashboard #demandModal button,
#demandSaveBtn,
#demandCancelBtn,
button.primary {
  outline: none !important;
}

#demandModal button:focus,
.page-dashboard #demandModal button:focus,
#demandSaveBtn:focus,
#demandCancelBtn:focus,
button.primary:focus {
  outline: none !important;
  box-shadow: none !important;
}

#demandModal button:hover,
.page-dashboard #demandModal button:hover,
#demandSaveBtn:hover,
#demandCancelBtn:hover,
button.primary:hover {
  border-color: transparent !important;
}

#demandModal button:active,
.page-dashboard #demandModal button:active,
#demandSaveBtn:active,
#demandCancelBtn:active,
button.primary:active {
  border-color: transparent !important;
}
/* ============================================================
   MODAL BUTTON FIXES — Comprehensive styling for all modals
   Added to ensure consistency across all modal buttons
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   MODAL ACTION BUTTONS — Cancel & Save
   ══════════════════════════════════════════════════════════ */

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sr-border);
}

/* Cancel buttons — light style */
.modal-actions button:not(.primary) {
  background: transparent !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--text-60) !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.modal-actions button:not(.primary):hover {
  background: var(--sr-surface) !important;
  border-color: var(--sr-border-strong) !important;
  color: var(--text-86) !important;
}

/* Save buttons — primary style */
.modal-actions button.primary {
  background: var(--sr-green) !important;
  border: none !important;
  color: white !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.modal-actions button.primary:hover {
  background: var(--sr-green-mid) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.modal-actions button.primary:active {
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   DARK THEME COMPATIBILITY
   ══════════════════════════════════════════════════════════ */

[data-theme="dark"] .modal-actions button:not(.primary) {
  background: transparent !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.60) !important;
}

[data-theme="dark"] .modal-actions button:not(.primary):hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.86) !important;
}

[data-theme="dark"] .modal-actions button.primary {
  background: #16a34a !important;
}

[data-theme="dark"] .modal-actions button.primary:hover {
  background: #15803d !important;
}
/* GLOBAL DARK SCROLLBAR 
   Matches the 'Rota Table' fix to ensure consistency 
*/
[data-theme="dark"]::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
}

[data-theme="dark"]::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--sr-surface-3);
}

[data-theme="dark"]::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--sr-border-strong);
  border-radius: 6px;
  border: 3px solid var(--sr-surface-3); /* Creates the "floating" effect */
}

[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-40);
}

/* Ensure Firefox also respects the dark scheme */
[data-theme="dark"] {
  scrollbar-color: var(--sr-border-strong) var(--sr-surface-3);
  color-scheme: dark;
}

/* ============================================================
   Phase 6 — Coverage-window / segment rota view
   ============================================================ */

/* ── View toggle (Role / Shift segmented control) ── */
.view-toggle {
  display: flex;
  background: var(--sr-surface-2);
  border: 1px solid var(--sr-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  margin-left: 10px;
}
.view-toggle__opt {
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-60);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.view-toggle__opt:focus {
  outline: none;
}
.view-toggle__opt:hover:not(.view-btn--active) {
  background: var(--sr-surface-3);
  color: var(--text-86);
  border-color: transparent;
}
.view-toggle__opt.view-btn--active {
  background: var(--sr-green);
  color: #0a0a0a;
  border-color: transparent;
  font-weight: 800;
}

/* ── Segment list (role view) ── */
.seg-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  width: 100%;
}

.role-seg {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 11px;
  min-height: 42px;
  position: relative;
  text-align: center;
  cursor: grab;
}

.role-seg.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.role-seg-role {
  min-width: 0;
  font-weight: 600;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal !important;
}

.role-seg-time {
  font-size: 10px;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seg-del {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  font-size: 10px;
  padding: 0 2px;
  line-height: 1;
  transition: opacity 0.1s;
  border-radius: 3px;
}
.role-seg:hover .seg-del {
  opacity: 0.55;
}
.seg-del:hover {
  opacity: 1 !important;
}

/* ── Add-segment button ── */
.seg-add-btn {
  background: none;
  border: 1px dashed var(--sr-border-strong);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-40);
  font-size: 16px;
  line-height: 1;
  padding: 6px 0;
  width: 100%;
  text-align: center;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  opacity: 0.3;
  outline: none;
}
.seg-add-btn:hover {
  opacity: 1;
}
/* Shift view: add button matches shift-view-inner height */
.rota-cell-inner > .seg-add-btn {
  min-height: 52px;
  height: 52px;
  font-size: 20px;
}
#rota[data-view="shift"] .seg-add-btn {
  flex: 0 0 52px;
  min-height: 52px;
  height: 52px;
  font-size: 20px;
}

/* ── Shift view cell ── */
.shift-view-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: 8px;
  margin: 4px;
  min-height: 52px;
  box-sizing: border-box;
  min-width: 0;
  overflow: visible;
}

.shift-view-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  word-break: break-word;
  min-width: 0;
}

.shift-view-time span {
  display: block;
  word-break: break-word;
  white-space: normal;
}

.seg-del-day {
  position: absolute;
  top: 4px;
  right: 5px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  font-size: 10px;
  padding: 0;
  transition: opacity 0.1s;
}
.shift-view-inner:hover .seg-del-day {
  opacity: 0.55;
}
.seg-del-day:hover {
  opacity: 1 !important;
}

/* ── Popover role group (segment picker) ── */
.popover-role-group {
  margin-bottom: 6px;
}

.popover-role-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-40);
  padding: 6px 10px 3px;
}

/* ── Segment edit popover ── */
.popover-delete-item {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 6px;
  color: #f87171;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
}
.popover-delete-item:hover {
  background: rgba(248,113,113,0.18);
}
.popover-divider {
  border: none;
  border-top: 1px solid var(--sr-border);
  margin: 6px 0;
}
.popover-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-40);
  padding: 2px 2px 4px;
}

/* ── Two-step add / edit time inputs ── */
.popover-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-40);
  padding: 0 0 6px;
  display: block;
  letter-spacing: -0.01em;
}
.popover-back-btn:hover { color: var(--text-86); }

.popover-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.popover-time-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-40);
  flex-shrink: 0;
  min-width: 34px;
}
.popover-time-input {
  flex: 1;
  font-size: 13px;
  font-family: inherit;
  padding: 5px 8px;
  border: 1px solid var(--sr-border-strong);
  border-radius: 6px;
  background: var(--sr-surface);
  color: var(--text-86);
  min-width: 0;
}
.popover-time-input:focus {
  border-color: var(--sr-green);
  outline: none;
}
[data-theme="dark"] .popover-time-input {
  background: var(--sr-surface-4);
  border-color: var(--sr-border-strong);
  color: var(--text-86);
}
.popover-role-display {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-86);
  flex: 1;
}
.popover-time-err {
  font-size: 11px;
  color: var(--sr-red);
  padding: 2px 0 0;
}
.popover-time-err.hidden { display: none; }

.popover-time-warn {
  font-size: 11px;
  color: var(--sr-amber);
  padding: 2px 0 0;
}
.popover-time-warn.hidden { display: none; }

.popover-confirm-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--sr-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.1s;
}
.popover-confirm-btn:hover { opacity: 0.88; }

.popover-custom-btn {
  color: var(--text-40);
  justify-content: flex-start;
}
.popover-custom-btn:hover { color: var(--text-86); }

/* Multi-role custom shift builder */
.popover-custom-row {
  padding: 4px 0 6px;
  border-bottom: 1px dashed var(--sr-border);
  margin-bottom: 6px;
}
.popover-custom-row:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.popover-row-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--sr-red);
  padding: 2px 0 0;
  display: block;
}
.popover-row-remove:hover { opacity: 0.8; }

/* ── App-level confirm / alert dialog ── */
.app-dialog-box {
  max-width: 420px;
  padding: 24px 24px 20px;
}
.app-dialog-msg {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text-86);
}
[data-theme="dark"] #appDialog .modal-content {
  background: #1e1e1e;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86);
}
[data-theme="dark"] #appDialog .app-dialog-msg {
  color: rgba(255,255,255,0.86);
}
.modal-actions button.primary.danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
.modal-actions button.primary.danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
}
[data-theme="dark"] .modal-actions button.primary.danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
[data-theme="dark"] .modal-actions button.primary.danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* ══════════════════════════════════════════════════════════
   PHASE 5 — ONBOARDING EMPTY STATE
   Shown on the dashboard when the user has no employees or
   no coverage windows (first-time setup not yet complete).
   ══════════════════════════════════════════════════════════ */

.onboarding-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 24px;
  overflow-y: auto;
}

.onboarding-inner {
  max-width: 520px;
  width: 100%;
}

.onboarding-welcome {
  text-align: center;
  margin-bottom: 28px;
}

.onboarding-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.onboarding-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}

.onboarding-step.onb-step--done {
  border-color: var(--sr-green);
  background: rgba(22, 163, 74, 0.04);
}

.onboarding-step.onb-step--disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Circular step number / checkmark badge */
.onb-step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card-border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.onb-step--done .onb-step-number {
  background: var(--sr-green);
  color: #fff;
}

/* Show number for pending, checkmark for done */
.onb-check { display: none; }
.onb-step--done .onb-num   { display: none; }
.onb-step--done .onb-check { display: inline; }

.onb-step-body {
  flex: 1;
  min-width: 0;
}

.onb-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.3;
}

.onb-step-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

/* Action button (link or button) on each step row */
.onb-step-btn {
  flex-shrink: 0;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

/* Footer with skip link */
.onboarding-footer {
  margin-top: 20px;
  text-align: center;
}

.onboarding-skip-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.onboarding-skip-btn:hover {
  color: var(--text);
}

/* Dark mode */
[data-theme="dark"] .onboarding-step {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

[data-theme="dark"] .onboarding-step.onb-step--done {
  background: rgba(22, 163, 74, 0.08);
  border-color: var(--sr-green);
}

[data-theme="dark"] .onb-step-number {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
}

[data-theme="dark"] .onboarding-title,
[data-theme="dark"] .onb-step-title {
  color: rgba(255,255,255,0.90);
}

[data-theme="dark"] .onboarding-subtitle,
[data-theme="dark"] .onb-step-desc {
  color: rgba(255,255,255,0.50);
}

[data-theme="dark"] .onboarding-skip-btn {
  color: rgba(255,255,255,0.35);
}

[data-theme="dark"] .onboarding-skip-btn:hover {
  color: rgba(255,255,255,0.70);
}

/* ══════════════════════════════════════════════════════════
   PHASE 6 — WEEK COMPARISON BADGE
   Shown in the week-nav area when viewing a past week.
   Compares the viewed week's violation count vs the previous week.
   ══════════════════════════════════════════════════════════ */

.week-comparison-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: opacity 0.2s;
}

.week-comparison-badge.badge--better {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

.week-comparison-badge.badge--worse {
  background: rgba(220, 53, 69, 0.10);
  color: #dc3545;
}

.week-comparison-badge.badge--same {
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
}

[data-theme="dark"] .week-comparison-badge.badge--better {
  background: rgba(22, 163, 74, 0.18);
  color: #4ade80;
}

[data-theme="dark"] .week-comparison-badge.badge--worse {
  background: rgba(220, 53, 69, 0.18);
  color: #f87171;
}

[data-theme="dark"] .week-comparison-badge.badge--same {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255,255,255,0.45);
}

/* ══════════════════════════════════════════════════════════
   ROTA STATUS BADGE (Draft / Published)
   ══════════════════════════════════════════════════════════ */

.rota-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.rota-status-badge.status--draft {
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
}

.rota-status-badge.status--published {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

[data-theme="dark"] .rota-status-badge.status--draft {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255,255,255,0.45);
}

[data-theme="dark"] .rota-status-badge.status--published {
  background: rgba(22, 163, 74, 0.18);
  color: #4ade80;
}

/* ── Absences / Handle Changes Panel (cp-*) ──────────────────── */
#changesPanel .cp-panel { max-width: 480px; padding: 20px; }

.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cp-title { font-weight: 700; font-size: 15px; color: var(--text-86); }
.cp-close-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-40); font-size: 20px; line-height: 1; padding: 2px 4px;
  border-radius: 4px;
}
.cp-close-btn:hover { color: var(--text-86); background: var(--sr-surface-3); }

/* List */
.cp-list { margin-bottom: 4px; min-height: 32px; }
.cp-empty { font-size: 12px; color: var(--text-40); padding: 4px 0; }
.cp-row-item {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.cp-row-item:last-child { border-bottom: none; }
.cp-row-info { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; flex-wrap: wrap; }
.cp-row-name { font-size: 13px; font-weight: 600; color: var(--text-86); }
.cp-row-day  { font-size: 12px; color: var(--text-40); }
.cp-row-note { font-size: 12px; color: var(--text-40); font-style: italic; }
.cp-remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-40); font-size: 17px; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.cp-remove-btn:hover { color: var(--sr-red); }

/* Leave type badges */
.cp-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.cp-badge--sick        { background: var(--sr-amber-pale); color: var(--sr-amber); }
.cp-badge--annual      { background: rgba(59,130,246,0.10); color: #2563EB; }
.cp-badge--bereavement { background: rgba(147,51,234,0.10); color: #7C3AED; }
.cp-badge--training    { background: rgba(13,148,136,0.12); color: #0F766E; }
.cp-badge--other       { background: var(--sr-surface-3); color: var(--text-40); }
[data-theme="dark"] .cp-badge--annual      { background: rgba(59,130,246,0.12); color: #93C5FD; }
[data-theme="dark"] .cp-badge--bereavement { background: rgba(147,51,234,0.12); color: #C4B5FD; }
[data-theme="dark"] .cp-badge--training    { background: rgba(13,148,136,0.12); color: #5EEAD4; }

/* Form */
.cp-form {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-bottom: 12px;
}
.cp-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-40);
  margin-bottom: 10px;
}
.cp-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.cp-label { font-size: 11px; color: var(--text-40); }
.cp-optional { font-weight: 400; }
.cp-input {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; background: var(--surface);
  box-sizing: border-box; color: var(--text-86);
}
.cp-input:focus { outline: 2px solid var(--sr-green); outline-offset: -1px; border-color: transparent; }
.cp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-add-btn { width: 100%; margin-top: 2px; }

/* Footer */
.cp-status {
  font-size: 12px; color: var(--text-60);
  min-height: 16px; margin-bottom: 6px; line-height: 1.4;
}
.cp-footer { border-top: 1px solid var(--border); padding-top: 12px; }
.cp-help {
  font-size: 11px; color: var(--text-40);
  margin: 0 0 10px; line-height: 1.45;
}

/* =========================
   Unfixable Violations Modal
   ========================= */
.unfixable-list {
  border: 1px solid var(--sr-border-strong);
  border-radius: 10px;
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
}
.uf-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--sr-border);
  font-size: 13px;
  line-height: 1.45;
}
.uf-item:last-child { border-bottom: none; }
.uf-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.uf-dot-err  { background: var(--sr-red); }
.uf-dot-warn { background: var(--sr-amber); }
.uf-body { display: flex; flex-direction: column; gap: 3px; }
.uf-msg  { color: var(--text-60); font-size: 13px; }
.uf-fix  { color: var(--text-40); font-size: 11px; font-style: italic; line-height: 1.4; }
.uf-subtitle { margin: 0 0 16px; font-size: 13px; color: var(--text-40); }
.uf-group { margin-bottom: 6px; }
.uf-group:last-child { margin-bottom: 0; }
.uf-group-header {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px 4px 0 0;
}
.uf-group-err  { background: color-mix(in srgb, var(--sr-red) 12%, transparent); color: var(--sr-red); }
.uf-group-warn { background: color-mix(in srgb, var(--sr-amber) 12%, transparent); color: var(--sr-amber); }
.uf-hint {
  padding: 7px 14px 9px;
  font-size: 11px;
  color: var(--text-40);
  font-style: italic;
  line-height: 1.4;
  border-top: 1px solid var(--sr-border);
  background: color-mix(in srgb, var(--sr-surface-2, #f7f7f7) 60%, transparent);
}

/* Dark mode — mirrors the pattern used by #demandModal and #appDialog */
[data-theme="dark"] #unfixableModal .modal-content {
  background: var(--sr-surface-2);
  border-color: var(--sr-border-strong);
  color: var(--text-86);
}
[data-theme="dark"] #unfixableModal h2 { color: var(--text-86); }