/* Shift Manager — Gantt timeline + duty-wall. Shared so the timeline and the duty-wall agree.
   The timeline is a CSS grid: a fixed resource-label column + a proportional time lane. Day
   gridlines and the "now" line are one absolute overlay offset by the label column, so they line
   up across every row; shift bars are absolutely positioned within each row's lane by percent. */

.stl-rollup { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
              padding: .35rem .65rem; margin-bottom: .5rem; border: 1px solid var(--bs-border-color);
              border-radius: .4rem; background: var(--bs-secondary-bg); }
.stl-stat { display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.stl-stat b { font-weight: 700; font-size: 1.05rem; line-height: 1; }
.stl-stat .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
               color: var(--bs-secondary-color); }

.stl-scroll { overflow-x: auto; }
.stl-inner { position: relative; min-width: 48rem; }
.stl-label-col { width: 13rem; }

.stl-head, .stl-row { display: grid; grid-template-columns: 13rem 1fr; position: relative; z-index: 1; }
.stl-head { border-bottom: 2px solid var(--bs-border-color); }
.stl-head .stl-lane { height: 1.6rem; }
.stl-daylabel { position: absolute; top: 0; font-size: .72rem; font-weight: 600; padding-left: .25rem;
                color: var(--bs-secondary-color); white-space: nowrap; }

.stl-row { border-bottom: 1px solid var(--bs-border-color); }
/* Translucent (not the opaque --bs-tertiary-bg) so the hovered row doesn't paint over the
   gridline/15-min-marker overlay sitting behind it — the markers stay visible on hover. */
.stl-row:hover { background: rgba(128, 128, 128, .08); }
/* Deep-link landing highlight (?focus=team:ID) — one-shot, removed by JS after a few seconds. */
.stl-row.stl-focus { background: var(--bs-primary-bg-subtle); box-shadow: inset 3px 0 0 var(--bs-primary); }

/* Crew chip is a real button now (click → confirm-actual popover) — keep the chip look. */
button.stl-bar-crew { background: none; border: 0; padding: 0; font: inherit; color: inherit;
                      cursor: pointer; text-decoration: underline dotted; }
#stl-crew-pop { position: absolute; z-index: 1080; background: var(--bs-body-bg);
                border: 1px solid var(--bs-border-color); border-radius: .375rem;
                box-shadow: 0 .5rem 1rem rgba(0,0,0,.25); padding: .55rem; width: 240px; }
#stl-crew-pop label.small { display: flex; flex-direction: column; gap: .1rem; }

/* Paint-mode affordances: arming a palette chip tints every status strip (the paint target) and
   pauses lane shift-drawing, so the two interaction zones sharing a lane stop ambushing people.
   Dragging the strip UNARMED pulses the palette instead of silently doing nothing. */
.stl-paint-armed .stl-statusstrip { background: var(--bs-warning-bg-subtle); box-shadow: inset 0 0 0 1px var(--bs-warning); }
.stl-paint-armed .stl-drawable { cursor: default; }
#stl-palette.pulse { animation: stl-pal-pulse .45s ease-in-out 2; }
@keyframes stl-pal-pulse { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { #stl-palette.pulse { animation: none; outline: 2px solid var(--bs-warning); } }
.stl-rowlabel { padding: .2rem .45rem; overflow: hidden; line-height: 1.25;
                display: flex; flex-direction: column; justify-content: center; }
.stl-rowname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stl-rowname a { text-decoration: none; font-weight: 600; font-size: .83rem; }
.stl-rowsub { font-size: .66rem; color: var(--bs-secondary-color);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stl-lane { position: relative; height: 2.9rem; }

/* one overlay for gridlines + now-line, offset by the label column so % lines up with the lanes */
.stl-overlay { position: absolute; top: 0; bottom: 0; left: 13rem; right: 0; z-index: 0;
               pointer-events: none; }
.stl-gridline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--bs-border-color); }
.stl-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--bs-danger); }
.stl-now::after { content: "now"; position: absolute; top: 0; left: 2px; font-size: .6rem;
                  font-weight: 700; color: var(--bs-danger); }

/* Hour (thick) / half-hour (medium) / quarter-hour (thin) gridlines, drawn as a repeating
   gradient so there is no DOM node per line. --stl-hour-pct (set inline) is one hour as a % of the
   window width; the half / quarter periods are derived from it. The 15-min tier (fine) is dropped
   on wider windows so the lines never go sub-pixel. Layered top→bottom: hour over half over quarter,
   so a coincident boundary shows the thickest line. */
.stl-grid-coarse { background-image:
    repeating-linear-gradient(to right, var(--bs-border-color) 0, var(--bs-border-color) 1.5px, transparent 1.5px, transparent var(--stl-hour-pct)),
    repeating-linear-gradient(to right, rgba(128,128,128,.13) 0, rgba(128,128,128,.13) 1px, transparent 1px, transparent calc(var(--stl-hour-pct) / 2)); }
.stl-grid-fine { background-image:
    repeating-linear-gradient(to right, var(--bs-border-color) 0, var(--bs-border-color) 1.5px, transparent 1.5px, transparent var(--stl-hour-pct)),
    repeating-linear-gradient(to right, rgba(128,128,128,.13) 0, rgba(128,128,128,.13) 1px, transparent 1px, transparent calc(var(--stl-hour-pct) / 2)),
    repeating-linear-gradient(to right, rgba(128,128,128,.06) 0, rgba(128,128,128,.06) 1px, transparent 1px, transparent calc(var(--stl-hour-pct) / 4)); }
.stl-hourlabel { position: absolute; bottom: 0; transform: translateX(-50%); font-size: .56rem;
                 color: var(--bs-secondary-color); pointer-events: none; white-space: nowrap; }

.stl-bar { position: absolute; top: .22rem; bottom: 1.05rem; border-radius: .28rem; overflow: hidden;
           background: var(--bs-primary-bg-subtle); border: 1px solid var(--bs-primary-border-subtle);
           display: flex; align-items: center; padding: 0 .35rem; font-size: .7rem; white-space: nowrap;
           min-width: 1.4rem; }
.stl-bar.is-now { background: var(--bs-success-bg-subtle); border-color: var(--bs-success); font-weight: 600; }
/* The in-force shift carries the resource's duty colour so relief-due / overdue read at a glance. */
.stl-bar.is-now.duty-relief_due { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning); }
.stl-bar.is-now.duty-overdue { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger); }
.stl-bar.rest-short { border-color: var(--bs-warning); border-style: dashed; }
.stl-bar.clip-left { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dotted; }
.stl-bar.clip-right { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dotted; }
.stl-bar-crew { margin-left: auto; font-weight: 600; opacity: .8; }
.stl-status { font-size: .55rem; font-weight: 700; padding: 0 .3rem; border-radius: .25rem;
              margin-left: .3rem; line-height: 1.3; white-space: nowrap; }

/* drag-to-edit: body moves the shift, edge grips resize it */
.stl-bar { cursor: grab; }
.stl-bar.dragging { cursor: grabbing; opacity: .85; z-index: 3; }
.stl-grip { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
.stl-grip-l { left: 0; } .stl-grip-r { right: 0; }
.stl-bar:hover .stl-grip { background: rgba(128,128,128,.35); }   /* neutral: reads in both themes */
/* draw-a-shift: click-drag on a resource's own lane to schedule a shift for it */
.stl-lane.stl-drawable { cursor: crosshair; }

/* Planned-status track — an interactive band along the bottom of the lane, beneath the duty bars.
   The empty strip is the paint zone (arm a palette status, click-drag). Segments: faint = planned,
   solid = current (covers now). Status hues are fixed (contrast-computed fg) so they read in both
   themes. */
.stl-statusstrip { position: absolute; left: 0; right: 0; bottom: .12rem; height: .9rem; cursor: crosshair; }
.stl-seg { position: absolute; top: 0; bottom: 0; border-radius: 2px; display: flex; align-items: center;
           padding: 0 .3rem; font-size: .58rem; font-weight: 600; white-space: nowrap; overflow: hidden;
           cursor: grab; }
.stl-seg.planned { opacity: .5; }
/* "Current" segment ring — white inner + dark outer so it reads on ANY status hue, light or dark. */
.stl-seg.is-now { box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), inset 0 0 0 2px rgba(0,0,0,.45); }
.stl-seg.dragging { opacity: .85; z-index: 3; cursor: grabbing; }
.stl-seg-label { overflow: hidden; text-overflow: ellipsis; }
.stl-seg-grip { position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 2; }
.stl-seg-grip-l { left: 0; } .stl-seg-grip-r { right: 0; }
.stl-seg-del { position: absolute; top: -4px; right: 1px; width: 13px; height: 13px; padding: 0;
               line-height: 11px; text-align: center; font-size: 11px; font-weight: 700; border: none;
               border-radius: 50%; background: var(--bs-danger); color: #fff; opacity: 0; cursor: pointer;
               z-index: 4; }
.stl-seg:hover .stl-seg-del { opacity: .92; }
.stl-seg-preview { opacity: .6; border: 1px dashed var(--bs-emphasis-color); pointer-events: none; }

/* Status palette — coloured chips; click to arm one for painting. */
.stl-palette-chip { border: 1px solid var(--bs-border-color); border-radius: .3rem; padding: .12rem .5rem;
                    font-size: .68rem; font-weight: 600; opacity: .72; cursor: pointer; line-height: 1.2; }
.stl-palette-chip:hover { opacity: .9; }
.stl-palette-chip.armed { opacity: 1; outline: 2px solid var(--bs-body-color); outline-offset: 1px; }

/* Per-row "set status" dropdown (team rows) — compact so it doesn't dominate the label column. */
.stl-status-select { font-size: .62rem; padding: .05rem 1.2rem .05rem .3rem; height: auto;
                     margin-top: .15rem; max-width: 11.5rem; background-position: right .3rem center; }
.stl-draw-preview { background: var(--bs-success-bg-subtle); border: 1px dashed var(--bs-success);
                    pointer-events: none; }

.stl-del { position: absolute; top: -2px; right: 9px; width: 14px; height: 14px; padding: 0;
           line-height: 12px; text-align: center; font-size: 12px; font-weight: 700; border: none;
           border-radius: 50%; background: var(--bs-danger); color: #fff; opacity: 0; cursor: pointer;
           z-index: 4; }
.stl-bar:hover .stl-del { opacity: .92; }

.stl-empty { padding: 2.5rem; text-align: center; color: var(--bs-secondary-color); }

/* --- Incident crewing view --------------------------------------------------------------- */
.crew-sector { border-left: 2px solid var(--bs-border-color); padding-left: .6rem;
               margin: .4rem 0 .4rem .3rem; }

/* --- Scheduler grid (RimWorld-style) ----------------------------------------------------- */
.sg-scroll { overflow-x: auto; }
.sg { min-width: 100%; }
.sg-head, .sg-row { display: grid; grid-template-columns: 13rem repeat(var(--sg-cols), minmax(1.5rem, 1fr)); }
.sg-head { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg);
           border-bottom: 2px solid var(--bs-border-color); }
.sg-hcell { font-size: .6rem; text-align: center; border-left: 1px solid var(--bs-border-color);
            position: relative; padding-top: 1rem; color: var(--bs-secondary-color); height: 1.7rem; }
.sg-day-label { position: absolute; top: 0; left: 2px; white-space: nowrap; font-weight: 700;
                color: var(--bs-body-color); }
.sg-row { border-bottom: 1px solid var(--bs-border-color); }
.sg-row:hover { background: var(--bs-tertiary-bg); }
.sg-label { padding: .2rem .4rem; overflow: hidden; }
.sg-label a { text-decoration: none; font-weight: 600; font-size: .82rem; }
.sg-cell { height: 1.9rem; border-left: 1px solid var(--bs-border-color); cursor: crosshair;
           display: flex; align-items: center; justify-content: center; user-select: none; }
.sg-cell.sg-day, .sg-hcell.sg-day { border-left: 2px solid var(--bs-secondary); }
.sg-cell.sg-now, .sg-hcell.sg-now { box-shadow: inset 2px 0 0 0 var(--bs-danger); }
.sg-cell.covered { background: var(--bs-primary-bg-subtle); }
.sg-cell.sg-sel { background: var(--bs-success); opacity: .55; }
.sg-crew { font-size: .6rem; font-weight: 600; color: var(--bs-primary-text-emphasis); }
/* Narrow screens: shrink the node/resource label column so more time cells fit (the grid scrolls). */
@media (max-width: 576px) {
    .sg-head, .sg-row { grid-template-columns: 7rem repeat(var(--sg-cols), minmax(1.4rem, 1fr)); }
}

/* --- Coverage grid (structure × time gap board) — reuses the .sg-* layout above ----------- */
.sg-cell.gap { background: var(--bs-danger-bg-subtle); }                  /* unmet requirement */
.sg-cell.organic { background: var(--bs-success-bg-subtle); }             /* real coverage, no slot */
.sg-cell.stale { background: var(--bs-warning-bg-subtle);                 /* plan says covered; reality gone */
                 border: 1px dashed var(--bs-warning); }
.sg-team { font-size: .52rem; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; max-width: 100%; padding: 0 2px; color: var(--bs-primary-text-emphasis); }
.sg-label.sg-indent { padding-left: 1.4rem; }                            /* sectors under a division */
.sg-label.sg-indent a { font-weight: 500; }
.sg-cov { background: var(--bs-secondary-bg); border-bottom: 2px solid var(--bs-border-color); }
.sg-cov .sg-label { font-weight: 700; font-size: .72rem; padding-top: .35rem; }
.sg-cov .sg-cell { height: 1.2rem; cursor: default; font-size: .5rem; font-weight: 700;
                   color: var(--bs-secondary-color); }
/* Palette selection tints by the armed tool (success=requirement, danger=erase). */
.cg-grid.tool-erase .sg-cell.sg-sel { background: var(--bs-danger); }

/* --- Command board (spatial drag-and-drop) ----------------------------------------------- */
.cb-wrap { display: grid; grid-template-columns: 16rem 1fr; gap: .8rem; align-items: start; }
@media (max-width: 768px) { .cb-wrap { grid-template-columns: 1fr; } .cb-pool { position: static; } }
.cb-structure { display: flex; flex-direction: column; gap: .7rem; }
.cb-div { border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem;
          background: var(--bs-body-bg); }
.cb-zone { border: 1px dashed var(--bs-border-color); border-radius: .5rem; padding: .35rem;
           margin-bottom: .4rem; transition: background .1s, border-color .1s; }
.cb-zone:last-child { margin-bottom: 0; }
.cb-zone.cb-empty { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.cb-zone.cb-over { border-color: var(--bs-primary); border-style: solid; background: var(--bs-primary-bg-subtle); }
/* Divisions / event-level are containers, not gap drop-targets — borderless, with a header rule
   (the parent .cb-div is the frame); only sectors keep the dashed drop-zone look. */
.cb-zone-division, .cb-zone-event { border: none; padding-left: 0; padding-right: 0; }
.cb-zone-division > .cb-zone-head, .cb-zone-event > .cb-zone-head {
    border-bottom: 1px solid var(--bs-border-color); padding-bottom: .25rem; }
.cb-zone-division.cb-over, .cb-zone-event.cb-over { border: 1px solid var(--bs-primary); }
.cb-zone-head { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700;
                margin-bottom: .3rem; }
.cb-zone-label { text-transform: uppercase; letter-spacing: .02em; }
.cb-zone-sub-label { font-weight: 400; color: var(--bs-secondary-color); }
.cb-zone-count { margin-left: auto; background: var(--bs-secondary-bg); border-radius: 1rem;
                 padding: 0 .45rem; font-size: .66rem; }
.cb-zone-body { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.2rem; }
.cb-pool { position: sticky; top: .5rem; border: 1px solid var(--bs-border-color);
           background: var(--bs-secondary-bg); border-radius: .6rem; padding: .5rem; }
.cb-card { border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-secondary);
           border-radius: .5rem; padding: .3rem .45rem; background: var(--bs-body-bg); cursor: grab;
           min-width: 9rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cb-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); border-color: var(--bs-primary); }
.cb-card:active { cursor: grabbing; }
.cb-card.cb-dragging { opacity: .45; }
.cb-card-top { display: flex; align-items: center; gap: .35rem; justify-content: space-between; }
.cb-card-name { font-weight: 700; font-size: .78rem; }
.cb-card-sub { font-size: .64rem; color: var(--bs-secondary-color); display: flex; align-items: center;
               gap: .25rem; margin-top: .1rem; }
.cb-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.cb-dot-on { background: var(--bs-success); }
.cb-dot-next { background: var(--bs-warning); }
.cb-dot-off { background: var(--bs-secondary); }
.cb-drop-hint { font-size: .64rem; color: var(--bs-secondary-color); font-style: italic; padding: .3rem; }
/* Statewide overview — a shared pool on top, then a responsive wall of incident panels. */
.cb-pool-top .cb-zone-body { flex-direction: row; }
.cb-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .8rem;
               align-items: start; }
.cb-panel { border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem;
            background: var(--bs-secondary-bg); }
.cb-panel-head { display: flex; flex-direction: column; margin-bottom: .4rem; }
.cb-panel-title { font-weight: 700; font-size: .85rem; }
.cb-panel-loc { font-size: .66rem; color: var(--bs-secondary-color); }

/* --- Crewing index — visual coverage tiles ----------------------------------------------- */
.ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.ci-tile { border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-success);
           border-radius: .5rem; background: var(--bs-body-bg); overflow: hidden;
           transition: border-color .1s, box-shadow .1s; }
.ci-tile:hover { border-color: var(--bs-primary); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.ci-tile-gap { border-left-color: var(--bs-danger); }
.ci-tile-main { display: block; padding: .5rem .6rem; color: inherit; text-decoration: none; }
.ci-tile-main:hover { background: var(--bs-tertiary-bg); }
.ci-tile-head { display: flex; justify-content: space-between; align-items: start; gap: .4rem; }
.ci-tile-title { font-weight: 700; font-size: .85rem; color: var(--bs-body-color); }
.ci-tile-loc { font-size: .68rem; color: var(--bs-secondary-color); margin-bottom: .35rem; }
.ci-cov { height: .5rem; border-radius: 1rem; background: var(--bs-danger-bg-subtle); overflow: hidden; }
.ci-cov-empty { background: var(--bs-secondary-bg); }
.ci-cov-fill { height: 100%; background: var(--bs-success); border-radius: 1rem; }
.ci-tile-meta { font-size: .64rem; color: var(--bs-secondary-color); margin-top: .3rem; }
.ci-tile-actions { display: flex; border-top: 1px solid var(--bs-border-color); }
.ci-act { flex: 1; text-align: center; padding: .3rem; font-size: .68rem; text-decoration: none;
          color: var(--bs-secondary-color); }
.ci-act + .ci-act { border-left: 1px solid var(--bs-border-color); }
.ci-act:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }

/* --- Status wall (glanceable, room/COP) -------------------------------------------------- */
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.sw-tile { border: 1px solid var(--bs-border-color); border-top: 4px solid var(--bs-secondary);
           border-radius: .5rem; background: var(--bs-body-bg); padding: .5rem .6rem;
           box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: border-color .1s; }
.sw-tile:hover { border-color: var(--bs-primary); }
.sw-tile-head { display: flex; align-items: center; gap: .4rem; }
.sw-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sw-name { font-weight: 700; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-status { text-align: center; font-weight: 700; font-size: .7rem; border-radius: .3rem;
             padding: .12rem .3rem; margin: .35rem 0; }
.sw-duty { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sw-crew { font-size: .66rem; color: var(--bs-secondary-color); }
.sw-loc { display: block; margin-top: .35rem; font-size: .66rem; color: var(--bs-secondary-color);
          text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-loc:hover { color: var(--bs-primary-text-emphasis); }