/* Per-screen leftovers for rebuilt screens (IMPLEMENTATION_PLAN.md Phase 3).
   Kept small: anything two screens share belongs in components.css.
   Prefixes: .rs-* Roles & skills, .oh-* Opening hours, .rl-* Rules & limits. */

/* ---- Roles & skills --------------------------------------------------------- */

.rs-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-4);
}

@media (max-width: 720px) {
  .rs-columns {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.rs-col-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.rs-col-head h2 {
  margin: 0;
  margin-right: auto;
}

.rs-explainer {
  margin-bottom: var(--space-3);
  font-size: var(--font-sm);
}

.rs-group {
  margin-bottom: var(--space-4);
}

.rs-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
}

.rs-group-name {
  font-size: var(--font-sm);
  font-weight: 600;
}

.rs-group-name--none {
  color: var(--muted);
  font-weight: 500;
}

.rs-group-head .rs-menu-btn { margin-left: auto; }

.rs-group-empty {
  padding: var(--space-2) 0;
  text-align: left;
}

.rs-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0;
}

.rs-row--archived { opacity: 0.6; }

.rs-dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.rs-name {
  font-size: var(--font-sm);
  font-weight: 500;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-count {
  flex: 0 0 auto;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.6rem;
  font-size: var(--font-xs);
  font-weight: 500;
}

.rs-count:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.rs-menu-btn {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 0.4rem;
  font-size: var(--font-md);
  line-height: 1.4;
}

.rs-menu-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.rs-archived {
  margin-top: var(--space-3);
}

.rs-archived summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--font-sm);
  padding: var(--space-1) 0;
}

@media (max-width: 720px) {
  .rs-menu-btn,
  .rs-count {
    min-height: 36px;
  }
}

/* ---- Opening hours ----------------------------------------------------------- */

.oh-rows {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
}

.oh-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

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

.oh-day {
  width: 6.5rem;
  flex: 0 0 auto;
  font-size: var(--font-sm);
  font-weight: 500;
}

.oh-times {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.oh-times input[type="time"] {
  padding: 0.4rem 0.5rem;
  font-size: var(--font-sm);
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.oh-times input[type="time"]:disabled {
  opacity: 0.4;
  background: var(--bg);
}

.oh-dash { color: var(--muted); }

.oh-closed {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 0 auto;
  font-weight: 400;
  font-size: var(--font-sm);
  color: var(--muted);
}

.oh-closed input {
  width: auto;
  margin: 0;
}

@media (max-width: 720px) {
  .oh-row {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    min-height: var(--touch-target);
  }
  .oh-day { width: 100%; padding-top: var(--space-1); }
}

/* ---- Rules & limits ----------------------------------------------------------- */

.rl-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: var(--space-2);
}

.rl-rule--inactive .rl-rule-text { color: var(--muted); }
.rl-rule--inactive strong { font-weight: 500; }

.rl-rule-toggle {
  display: flex;
  align-items: center;
  margin: 0;
}

.rl-rule-toggle input {
  width: auto;
  margin: 0;
}

.rl-rule-text {
  font-size: var(--font-sm);
  margin-right: auto;
}

.rl-settings { margin-top: var(--space-5); }

.rl-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.rl-group legend {
  font-weight: 600;
  font-size: var(--font-md);
  padding: 0 var(--space-2);
}

.rl-note {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--font-xs);
}

.field .rl-note { margin-bottom: 0; }

/* One-time banner prompting review of the standing rules the Phase 4
   conversion proposed from old shift-preset coverage. */
.rl-review-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--accent, var(--border));
  border-radius: var(--radius);
  background: var(--accent-soft, var(--bg));
}

.rl-review-banner p {
  margin: 0;
  margin-right: auto;
  font-size: var(--font-sm);
}

.rl-proposed-badge { margin-left: var(--space-2); }

/* ---- Week presets ------------------------------------------------------------- */

.cardrow--static {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: 0;
}

.cardrow-main {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.cardrow--static:hover { background: var(--bg); }
.cardrow-main:hover { cursor: pointer; }

.cardrow--static .rs-menu-btn {
  flex: 0 0 auto;
  align-self: center;
  margin-right: var(--space-2);
}

.wp-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-3) 0;
}

.wp-day-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-sm);
}

.wp-day-name {
  flex: 0 0 3rem;
  font-weight: 600;
}

.wp-day-hours {
  color: var(--muted);
  margin-right: var(--space-2);
}

.wp-day-closed { color: var(--muted); }

/* ---- Shift presets ------------------------------------------------------------ */

.ps-badge {
  display: inline-block;
  vertical-align: middle;
  padding: 0.075rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 500;
  white-space: nowrap;
}

.ps-head-actions {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.ps-canvas {
  margin-top: var(--space-3);
}

.ps-roles {
  margin-top: var(--space-3);
}

@media (max-width: 720px) {
  .screen-head {
    flex-wrap: wrap;
  }
  .ps-head-actions button {
    min-height: var(--touch-target);
  }
}

/* ---- Rota builder (rb-*) ------------------------------------------------------ */

.rb-start-label {
  margin-top: var(--space-4);
}

.rb-start-actions {
  margin-top: var(--space-4);
}

.rb-none {
  margin: 0;
  align-self: center;
}

.radio-row select {
  margin-left: auto;
  padding: 0.35rem 0.5rem;
  font-size: var(--font-sm);
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: 55%;
}

/* Top bar: day tabs with the actions cluster (Populate + ⋯) at the far
   right; when the row runs out of room the cluster wraps below the tabs.
   Negative margins bleed the row past main's gutter so its bottom divider
   runs edge-to-edge (Supabase-style attached panels); the padding restores
   the gutter for the content inside. */
.rb-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.rb-topbar .tabstrip {
  flex: 1 1 auto;
  min-width: min(100%, 420px);
}

.rb-tab-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* The screens' error banner precedes the topbar; keep it off the app chrome
   now that main has no top margin on full screens. */
body.screen-full main > section > .error {
  margin-top: var(--space-3);
}

/* Body: collapsible sidebar (open hours + preset palette) on the left, canvas
   filling the rest, attached panels split by a hairline. The body bleeds past
   main's gutter (like rb-topbar) and stretches to the viewport bottom via the
   body.screen-full flex chain in base.css, so the sidebar's right border runs
   from the topbar divider to the bottom edge. Collapsed, the sidebar shrinks
   to a slim rail holding just the panel-icon toggle. */
.rb-body {
  display: flex;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0 calc(-1 * var(--space-4));
}

.rb-sidebar {
  flex: 0 0 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--border);
}

.rb-sidebar--collapsed {
  flex-basis: auto;
}

.rb-sidebar--collapsed .rb-sidebar-body {
  display: none;
}

/* Just the collapse toggle now — pinned to the trailing edge of the column. */
.rb-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Icon-only ghost button (the Figma-style panel glyph). */
.rb-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--muted);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}

.rb-sidebar-toggle:hover {
  background: var(--bg);
  color: var(--text);
}

.rb-panel-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.rb-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Inside the flat sidebar panel the palette sheds its card chrome; a hairline
   above it splits the day controls (hours + zoom) from the presets. */
.rb-sidebar-body .tlc-palette {
  flex: none;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-3) 0 0;
}

/* Time-axis zoom stepper: label on the left, −/value/+ on the right. */
.rb-zoom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.rb-zoom-label {
  font-size: var(--font-sm);
  font-weight: 600;
}

.rb-zoom-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rb-zoom-btn {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.rb-zoom-btn:hover:not(:disabled) {
  background: var(--bg);
}

.rb-zoom-btn:disabled {
  opacity: 0.4;
}

.rb-zoom-value {
  min-width: 3.5ch;
  text-align: center;
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* The builder/editor timeline fills its whole region edge-to-edge rather than
   floating in an inset rounded card: no outer padding, and the scroll surface
   sheds its border + radius (chrome scoped here so the preset editor's canvas
   keeps its card look). Vertical fill is desktop-only — see below. */
/* Canvas + issues list share one column so the canvas keeps filling the height
   above the (natural-height) issues list. */
.rb-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rb-canvas {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.rb-issues {
  flex: none;
}

.rb-issues:empty {
  display: none;
}

.rb-issues-head {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-1) var(--space-1);
}

.rb-issues-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 9rem;
  overflow-y: auto;
}

.rb-issue {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-sm);
  text-align: left;
  cursor: pointer;
}

.rb-issue:hover:not(:disabled) {
  background: var(--bg);
}

.rb-issue:disabled {
  cursor: default;
}

.rb-issue-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.rb-issue-dot--error {
  background: var(--danger);
}

.rb-issue-dot--warn {
  background: var(--warn);
}

.rb-issue-text {
  min-width: 0;
}

.rb-canvas .tlc-scroll {
  border: none;
  border-radius: 0;
}

@media (min-width: 721px) {
  .rb-canvas {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .rb-canvas .tlc {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }
  .rb-canvas .tlc-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .rb-canvas .tlc-scroll {
    flex: 1 1 auto;
    min-height: 0;
  }
}

.rb-hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Each row: label leading, control trailing (same shape as the zoom stepper). */
.rb-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
}

.rb-hours-label {
  font-size: var(--font-sm);
  font-weight: 600;
}

.rb-hours-row input[type="time"] {
  flex: none;
  padding: 0.4rem 0.5rem;
  font-size: var(--font-sm);
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.rb-hours-row input[type="time"]:disabled {
  opacity: 0.4;
  background: var(--bg);
}

.rb-hours-row input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Opens the Populate settings sheet — a plain menu button (border + caret) so
   it reads as "configure, then populate" rather than a one-tap regenerate. */
.rb-populate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.rb-populate:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
}
.rb-populate-caret {
  width: 0.9em;
  height: 0.9em;
  flex: none;
  opacity: 0.7;
}
.rb-populate--busy .rb-populate-caret {
  animation: rb-caret-pulse 1s ease-in-out infinite;
}
@keyframes rb-caret-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.25; }
}

/* The commit button inside the Populate sheet: a sparkle + violet→blue
   gradient so the "do it" action reads as generative. */
.rb-populate-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  background: linear-gradient(135deg, #7c3aed, var(--accent));
}
.rb-populate-action:hover:not(:disabled) {
  background: linear-gradient(135deg, #6d28d9, var(--accent-hover));
}
.rb-populate-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.rb-overflow {
  min-width: 2.4rem;
  padding: 0.4rem 0.7rem;
  font-size: var(--font-lg);
  line-height: 1;
}

@media (max-width: 720px) {
  /* Actions drop to their own full-width row under the (scrolling) tabs. */
  .rb-topbar .tabstrip {
    min-width: 0;
  }
  .rb-tab-actions {
    flex: 1 1 100%;
  }
  .rb-tab-actions button,
  .rb-hours-row input[type="time"] {
    min-height: var(--touch-target);
  }
  .rb-populate {
    flex: 1 1 auto;
  }

  /* The sidebar decomposes into the stacked layout: hours row above the
     canvas, preset palette docked below it (canvas.css already turns the
     palette into a horizontal scroll row at this width). Collapsing is
     desktop-only, so the head row hides and a collapsed body still shows.
     The full-bleed treatment is desktop-only too: the shell rows tuck back
     inside main's gutter (the topbar keeps its divider, now content-wide). */
  .rb-topbar {
    margin-inline: 0;
    padding-inline: 0;
  }
  .rb-body {
    flex-direction: column;
    align-items: stretch;
    margin-inline: 0;
  }
  .rb-sidebar,
  .rb-sidebar-body,
  .rb-sidebar--collapsed .rb-sidebar-body {
    display: contents;
  }
  .rb-sidebar-head {
    display: none;
  }
  .rb-canvas {
    order: 1;
    padding: 0;
  }
  .rb-sidebar .tlc-palette {
    order: 2;
  }
  /* Zoom drops just above the presets, below the canvas; buttons grow to a
     comfortable tap size. */
  .rb-zoom {
    order: 2;
  }
  .rb-zoom-btn {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }
  /* Hours becomes a wrapping band above the canvas; each label/control pair
     stays a compact inline unit rather than a full-width row. */
  .rb-hours {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) 0;
  }
  .rb-hours-row {
    justify-content: flex-start;
  }
}

/* ---- Solved rota view (rd-*) --------------------------------------------------
   The shell reuses the builder's rb-* layout; rd-* keeps only what's unique to
   the solved view: the swap sheet's time row and the summary matrix. */

/* "Shift Presets": flips the solved canvas from staff rows into the placement
   layout. Its own hairline section, sitting where the palette it reveals
   appears; while staff rows are up the palette hides (nothing to drop onto). */
.rb-showpresets {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

/* The "Shift Presets" row already labels the palette, so on the rota screen the
   palette drops its own title and the hairline that split it from the row. */
#screen-rota .rb-sidebar-body .tlc-palette {
  border-top: none;
  padding-top: 0;
}
#screen-rota .rb-sidebar-body .tlc-palette-title { display: none; }

/* Eye button toggling preset visibility: an icon-only tap target that dims to
   the muted colour once presets are hidden (the eye picks up the slash). */
.rb-eye-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.rb-eye-toggle:hover:not(:disabled) { background: var(--bg); }
.rb-eye-toggle--off { color: var(--muted); }
.rb-eye-toggle:disabled { opacity: 0.4; cursor: default; }
.rb-eye-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.rb-sidebar--nopresets .tlc-palette { display: none; }

/* Compact is always the vertical placement layout — nothing to switch. */
@media (max-width: 720px) {
  .rb-showpresets { display: none; }
}

.rd-times {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.rd-times input[type="time"] {
  padding: 0.4rem 0.5rem;
  font-size: var(--font-sm);
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* Summary matrix — the one place that keeps horizontal scroll (a true grid). */
.rd-sum-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* On the Summary tab the matrix is the rb-body's only child; inset it from
   the full-bleed body's edges and keep its natural height (the body's
   stretch alignment would otherwise drag the bordered box to the bottom). */
.rb-body > .rd-sum-wrap {
  flex: 1 1 auto;
  min-width: 0;
  align-self: flex-start;
  margin: var(--space-4);
}

@media (max-width: 720px) {
  .rb-body > .rd-sum-wrap {
    margin: var(--space-3) 0 0;
  }
}

.rd-sum-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
}

.rd-sum-table th,
.rd-sum-table td {
  padding: 0.45rem 0.7rem;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

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

.rd-sum-table thead th {
  background: var(--surface);
  font-weight: 600;
}

.rd-sum-name {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
  font-weight: 500;
}

.rd-sum-tag {
  margin-left: 0.375rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 500;
}

.rd-sum-cell {
  color: var(--text);
}

.rd-sum-off {
  background: var(--bg);
}

.rd-sum-hol {
  color: var(--warn);
  font-weight: 600;
}

.rd-sum-under {
  color: var(--danger);
  font-weight: 600;
}

/* ---- Person-swap sheet (tap a staff-row name) ------------------------------ */

.rd-swap-context {
  margin: 0 0 var(--space-3);
}

.rd-swap-after {
  font-weight: 600;
}

.rd-swap-after--under {
  color: var(--danger);
}

.rd-swap-after--over {
  color: var(--ok);
}

.rd-swap-section + .rd-swap-section {
  margin-top: var(--space-3);
}

.rd-swap-heading {
  margin: 0 0 var(--space-2);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.rd-swap-cand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-family: inherit;
  font-size: var(--font-sm);
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.rd-swap-cand + .rd-swap-cand {
  margin-top: 2px;
}

.rd-swap-cand:hover,
.rd-swap-cand:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  outline: none;
}

.rd-swap-cand-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-swap-cand-hours {
  flex: none;
  color: var(--muted);
  font-size: var(--font-xs);
}

/* ---- Staff list + detail tabs (st-*, sd tabs) ------------------------------- */

.st-filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.st-filters select {
  padding: 0.4rem 0.6rem;
  font-size: var(--font-sm);
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.st-active-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-weight: 400;
  font-size: var(--font-sm);
}

.st-active-toggle input {
  width: auto;
  margin: 0;
}

.cardrow--muted {
  opacity: 0.65;
}

/* Detail tabs: the two legacy columns become one-at-a-time tab panels. */
#sd-tabs {
  margin-bottom: var(--space-4);
}

.sd-layout[data-tab] {
  grid-template-columns: 1fr;
}

.sd-layout[data-tab="profile"] .sd-col--availability,
.sd-layout[data-tab="availability"] .sd-col--profile {
  display: none;
}

/* ---- Requests (rq-*) --------------------------------------------------------- */

.rq-flash {
  background: var(--ok-soft);
  border: 1px solid var(--ok);
  color: var(--ok);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  margin-bottom: var(--space-3);
}

#screen-requests-v2 .tabstrip {
  margin-bottom: var(--space-3);
}

.rq-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-3);
}

.rq-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.rq-row-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rq-row-when {
  color: var(--muted);
  font-size: var(--font-sm);
}

.rq-row-meta {
  color: var(--muted);
  font-size: var(--font-sm);
  margin-top: var(--space-1);
}

.rq-row-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rq-typechip {
  padding: 0.075rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--on-accent);
}

.rq-typechip--holiday { background: var(--warn); }
.rq-typechip--amendment { background: var(--accent); }

.rq-statuschip {
  padding: 0.075rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  text-transform: capitalize;
}

.rq-statuschip--approved { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.rq-statuschip--declined { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }

.rq-conflict {
  margin-top: var(--space-2);
  padding: 0.4rem 0.6rem;
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.rq-diff {
  display: none;
  margin-top: var(--space-2);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}

.rq-diff.open { display: block; }

.rq-diff-row {
  display: grid;
  grid-template-columns: 3rem 1fr 1fr;
  gap: var(--space-2);
  padding: 0.15rem 0.375rem;
  font-size: var(--font-sm);
}

.rq-diff-head { font-weight: 600; }
.rq-diff-row--changed { background: var(--warn-soft); border-radius: var(--radius-sm); }
.rq-diff-wd { color: var(--muted); }
.rq-diff-current,
.rq-diff-proposed { white-space: pre-wrap; }

@media (max-width: 720px) {
  .rq-row-actions button {
    min-height: var(--touch-target);
  }
}

/* ---- Rotas list + landing (rl-*) -------------------------------------------- */

.rl-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.rl-hero:hover { background: var(--accent-hover); }

.rl-hero--resume {
  background: var(--warn);
}
.rl-hero--resume:hover { background: color-mix(in srgb, var(--warn) 85%, black); }

.rl-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.rl-hero-kicker {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.rl-hero-title {
  font-size: var(--font-lg);
  font-weight: 600;
}

.rl-hero-sub {
  font-size: var(--font-sm);
  opacity: 0.9;
}

.rl-hero-arrow {
  font-size: var(--font-xl);
  flex: 0 0 auto;
}

.rl-section {
  font-size: var(--font-lg);
  margin: var(--space-5) 0 var(--space-2);
}

.rl-inprogress {
  padding: 0.075rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: var(--font-xs);
  font-weight: 600;
  flex: 0 0 auto;
}

.rl-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rl-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-sm);
}

.rl-table th,
.rl-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.rl-table thead th {
  background: var(--surface);
  font-weight: 600;
  color: var(--muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

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

.rl-row { cursor: pointer; }
.rl-row:hover td { background: var(--bg); }

.rl-week { font-weight: 500; }

.rl-under { color: var(--danger); font-weight: 600; }

/* Desktop shows the table, compact shows the cards. */
.rl-cards { display: none; }

@media (max-width: 720px) {
  .rl-table-wrap { display: none; }
  .rl-cards { display: flex; }
  .rl-hero { padding: var(--space-4); }
}