/* =============================================================
   SUPA Growth OS — admin layout on top of supa.css tokens
   ============================================================= */

/* An author `display:` rule outranks the UA stylesheet's `[hidden]{display:none}`,
   so .login-wrap / #app would keep rendering while hidden. Restore the attribute. */
[hidden] { display: none !important; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--supa-yellow-20), transparent 70%),
    var(--supa-white);
}
.login-card { width: 100%; max-width: 340px; padding: 28px; border-radius: var(--r-xl); }
.login-mark {
  font-family: var(--font-display); font-weight: 900; font-size: 13px;
  letter-spacing: 0.14em; color: var(--supa-black);
  background: var(--supa-yellow); display: inline-block;
  padding: 4px 10px; border-radius: var(--r-sm); margin-bottom: 14px;
}
.login-err {
  margin-top: 12px; color: var(--supa-red); font-weight: 500;
}

/* ---------- shell ---------- */
#app { display: flex; min-height: 100dvh; }

.rail {
  width: 96px; flex: 0 0 96px;
  background: var(--supa-black);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 16px 8px; gap: 2px;
  position: sticky; top: 0; height: 100dvh;
}
.rail-mark {
  font-family: var(--font-display); font-weight: 900; font-size: 12px;
  letter-spacing: 0.12em; text-align: center; color: var(--supa-black);
  background: var(--supa-yellow); border-radius: var(--r-sm);
  padding: 6px 0; margin-bottom: 12px;
}
.rail-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--supa-black-40);
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  padding: 11px 4px; border-radius: var(--r-sm);
  transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.rail-btn:hover { background: rgba(255,255,255,0.07); color: var(--supa-white); }
.rail-btn.on { background: var(--supa-yellow); color: var(--supa-black); font-weight: 600; }
.rail-out { margin-top: auto; }

.main { flex: 1; min-width: 0; padding: 28px 32px 64px; }
.panel { max-width: 1240px; }

/* ---------- page furniture ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head p { max-width: 62ch; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat {
  background: var(--supa-white-pure); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: 16px 18px;
}
.stat.accent { background: var(--supa-yellow); box-shadow: var(--shadow-yellow); }
.stat-k { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--supa-black-60); }
.stat.accent .stat-k { color: var(--supa-black-80); }
.stat-v { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; margin-top: 4px; }
.stat-sub { font-size: 12px; color: var(--supa-black-60); margin-top: 2px; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; background: var(--supa-white-pure); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: left; white-space: nowrap; }
table.tbl th {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--supa-black-60); border-bottom: 1.5px solid var(--supa-black-20);
  position: sticky; top: 0; background: var(--supa-white-pure); z-index: 1;
}
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--supa-black); }
table.tbl tbody tr { border-bottom: 1px solid var(--supa-black-20); }
table.tbl tbody tr:last-child { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--supa-yellow-20); }
table.tbl tbody tr.clickable { cursor: pointer; }
/* the actions cell must stay one line — wrapping triples the row height */
.cell-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr.total-row { background: var(--supa-white); font-weight: 600; }
table.tbl tr.total-row:hover { background: var(--supa-white); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.muted { color: var(--supa-black-60); }
.good { color: var(--supa-green); font-weight: 600; }
.bad { color: var(--supa-red); font-weight: 600; }

/* ---------- notices ---------- */
.notice {
  border-radius: var(--r-md); padding: 12px 16px; font-size: 13px; line-height: 1.45;
  border-left: 4px solid;
}
.notice-warn  { background: #FFF4E0; border-color: var(--supa-orange); }
.notice-alarm { background: #FDE7EA; border-color: var(--supa-red); }
.notice-info  { background: var(--supa-yellow-20); border-color: var(--supa-yellow); }
.notice-ok    { background: #E4F7F0; border-color: var(--supa-green); }
.notice b { font-weight: 600; }

/* ---------- map ---------- */
/* Leaflet gives its own panes z-index 400 and its controls 800. Without a
   stacking context here those compete directly with the modal scrim and the
   map paints straight over any dialog. `position:relative` + `z-index:0`
   traps them inside this box. */
.map-box {
  position: relative; z-index: 0; isolation: isolate;
  height: calc(100dvh - 230px); min-height: 420px;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card); background: var(--supa-black-20);
}
/* The map wants the whole width; the reading-width cap is for text panels. */
.panel[data-panel="locations"] { max-width: none; }
.map-box.placing { cursor: crosshair; box-shadow: 0 0 0 3px var(--supa-yellow), var(--shadow-card); }
.map-box.placing .leaflet-container { cursor: crosshair; }
/* Leaflet's own chrome, restyled to the brand rather than left default-blue */
.leaflet-container { font-family: var(--font-body); background: #E8E8E8; }
.leaflet-popup-content-wrapper { border-radius: var(--r-md); box-shadow: var(--shadow-elev); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-bar a {
  color: var(--supa-black); font-family: var(--font-display); font-weight: 700;
}
.leaflet-bar a:hover { background: var(--supa-yellow-40); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.8); }

/* supa.css puts the scrim at z-index 50 and the toast at 90 — both below
   Leaflet's control pane (800). Lift them so a dialog opened from the map is
   actually on top of it. */
.modal-scrim { z-index: 1000; }
.toast { z-index: 1100; }

/* ---------- schedule ---------- */
.week-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
  align-items: start;
}
.day-col {
  background: var(--supa-white-pure); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden; min-height: 160px;
}
.day-col.today { box-shadow: 0 0 0 2px var(--supa-yellow), var(--shadow-card); }
.day-head {
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--supa-black-20);
}
.day-name { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--supa-black-60); }
.day-num { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.day-count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: var(--supa-black); color: var(--supa-yellow);
  border-radius: var(--r-pill); padding: 1px 7px;
}
.day-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.day-add {
  border: 1.5px dashed var(--supa-black-20); background: transparent; cursor: pointer;
  border-radius: var(--r-sm); padding: 7px; font-size: 16px; color: var(--supa-black-40);
  transition: all var(--dur-fast) ease-out;
}
.day-add:hover { border-color: var(--supa-black); color: var(--supa-black); background: var(--supa-yellow-20); }

.shift-card {
  position: relative; cursor: pointer;
  border-radius: var(--r-sm); padding: 9px 10px;
  background: var(--supa-yellow-20); border-left: 4px solid var(--supa-yellow);
  transition: transform var(--dur-snap) ease-out, box-shadow var(--dur-snap) ease-out;
}
.shift-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.shift-card.status-confirmed { background: var(--supa-yellow-40); border-left-color: var(--supa-black); }
.shift-card.status-done { background: #E4F7F0; border-left-color: var(--supa-green); }
.shift-card.status-cancelled { background: var(--supa-white); border-left-color: var(--supa-black-40); opacity: .55; }
.shift-card.status-cancelled .shift-where { text-decoration: line-through; }
.shift-time { font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.shift-where { font-size: 12px; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.shift-meta { font-size: 11px; color: var(--supa-black-60); line-height: 1.35; }
.shift-meta.bad { color: var(--supa-red); font-weight: 500; }
.shift-actions { display: flex; gap: 4px; margin-top: 7px; }
.shift-actions .btn { padding: 4px 9px; font-size: 11px; }

.chip.chip-done { background: var(--supa-green); color: var(--supa-white-pure); }
.chip.chip-cancelled { background: var(--supa-black-20); color: var(--supa-black-60); }

@media (max-width: 1100px) {
  .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- misc ---------- */
.seg { display: inline-flex; background: var(--supa-black-20); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; cursor: pointer; font-family: var(--font-body);
  font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: var(--r-pill);
  color: var(--supa-black-80);
}
.seg button.on { background: var(--supa-white-pure); color: var(--supa-black); font-weight: 600; box-shadow: var(--shadow-card); }
.empty { padding: 40px 20px; text-align: center; color: var(--supa-black-60); font-size: 14px; }
.bar { height: 6px; border-radius: 3px; background: var(--supa-black-20); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--supa-black); }
.funnel { display: flex; gap: 2px; align-items: stretch; height: 34px; border-radius: var(--r-sm); overflow: hidden; }
.funnel > div { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--supa-black); min-width: 2px; }
.modal { text-align: left; max-width: 520px; }
.modal h3 { margin-bottom: 4px; }
.modal .field { margin-top: 12px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
label.inline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
label.inline input[type=checkbox] { width: auto; }
.copy-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: var(--supa-white); border: 1.5px solid var(--supa-black-20);
  border-radius: var(--r-sm); padding: 10px 12px; word-break: break-all; line-height: 1.5;
}

@media (max-width: 720px) {
  .rail { width: 68px; flex-basis: 68px; }
  .main { padding: 20px 16px 56px; }
}

/* ---------- map: layer overlay & site styling ---------- */
.map-shell { position: relative; }
.layers {
  position: absolute; top: 12px; right: 12px; z-index: 500;   /* above tiles, below the modal */
  width: 218px; max-height: calc(100% - 24px); overflow-y: auto;
  background: var(--supa-white-pure); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 12px 12px 10px;
  font-size: 12.5px;
}
/* the header doubles as the collapse toggle */
.layers-hd {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--supa-black-60); padding: 2px 2px 8px; border-radius: 6px;
}
.layers-hd:hover { color: var(--supa-black); }
.layers-hd:focus-visible { outline: 2px solid var(--supa-black); outline-offset: 2px; }
.layers-caret { font-size: 11px; line-height: 1; }
.layers.collapsed { width: auto; }
.layers.collapsed .layers-hd { padding-bottom: 2px; }
.layers.collapsed .layers-body { display: none; }
.layers-grp {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--supa-black-40); margin: 9px 0 3px;
}
.layers-sep { height: 1px; background: var(--supa-black-20); margin: 9px 0; }
.layer-row {
  display: flex; align-items: center; gap: 7px; padding: 3px 0; cursor: pointer; line-height: 1.3;
}
.layer-row:hover { color: var(--supa-black); }
.layer-row input[type=checkbox] { width: auto; margin: 0; flex: none; accent-color: var(--supa-black); }
.layer-row .cnt {
  font-size: 11px; color: var(--supa-black-60); font-variant-numeric: tabular-nums; flex: none;
}
.sw {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 1px solid rgba(43, 42, 38, .3);
}
.zone-sw { background: var(--supa-yellow); border-style: dashed; border-color: var(--supa-black-60); }
.kind-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; border: 1px solid rgba(43, 42, 38, .3); vertical-align: baseline;
}

/* kind picker in the add modal */
.kind-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kind-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--supa-white); border: 1.5px solid var(--supa-black-20);
  border-radius: var(--r-pill); padding: 7px 13px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--supa-black);
  transition: border-color var(--dur-fast) ease-out, background var(--dur-fast) ease-out;
}
.kind-btn:hover { border-color: var(--supa-black); background: var(--supa-yellow-20); }
.kind-btn .qr-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .05em;
  background: var(--supa-black); color: var(--supa-yellow);
  border-radius: 9px; padding: 1px 6px;
}

@media (max-width: 900px) {
  .layers { position: static; width: auto; max-height: none; margin-top: 10px; box-shadow: var(--shadow-card); }
}

/* ---------- map: city jump control ---------- */
/* Sits under Leaflet's zoom control, top-left, where view controls belong. */
.map-jump {
  position: absolute; top: 86px; left: 12px; z-index: 500;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--supa-white-pure); border-radius: var(--r-sm);
  box-shadow: var(--shadow-elev); padding: 4px;
}
.jump-btn {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--supa-black); text-align: left;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap;
  transition: background var(--dur-fast) ease-out;
}
.jump-btn:hover:not(:disabled) { background: var(--supa-yellow); font-weight: 600; }
.jump-btn:disabled { color: var(--supa-black-40); cursor: default; }
.jump-btn:focus-visible { outline: 2px solid var(--supa-black); outline-offset: -2px; }

/* ---------- map: right-click menu ---------- */
.ctx-menu {
  position: absolute; z-index: 600;      /* over Leaflet's panes, under the modal (1000) */
  min-width: 210px; max-height: 70%; overflow-y: auto;
  background: var(--supa-white-pure); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 6px;
  font-size: 13px;
}
.ctx-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 5px 9px 7px; border-bottom: 1px solid var(--supa-black-20); margin-bottom: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--supa-black-60);
}
.ctx-coord { font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--supa-black-40); }
.ctx-grp {
  font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--supa-black-40); padding: 6px 9px 2px;
}
.ctx-sep { height: 1px; background: var(--supa-black-20); margin: 5px 0; }
.ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 13px; color: var(--supa-black);
  padding: 6px 9px; border-radius: 7px;
  transition: background var(--dur-snap) ease-out;
}
.ctx-item:hover { background: var(--supa-yellow-20); }
.ctx-item:focus-visible { outline: 2px solid var(--supa-black); outline-offset: -2px; }
.ctx-item .sw-none { background: transparent; border-color: transparent; }

/* ---------- map: draggable site pins ---------- */
/* divIcon markers, styled to match the circleMarkers they replaced. Leaflet
   only supports dragging on L.Marker, which is why these are not circles. */
.pin-wrap { background: transparent; border: 0; }
.pin {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; border-style: solid; box-sizing: border-box;
  transition: transform var(--dur-snap) ease-out;
}
.leaflet-marker-draggable { cursor: grab; }
.leaflet-marker-draggable:active { cursor: grabbing; }
.leaflet-marker-draggable:hover .pin { transform: scale(1.18); }
.leaflet-marker-dragging .pin { transform: scale(1.25); box-shadow: 0 4px 12px rgba(0,0,0,.35); }

/* action button inside the toast (e.g. Undo after a drag) */
.toast-action {
  margin-left: 12px; border: 0; cursor: pointer;
  background: var(--supa-yellow); color: var(--supa-black);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: var(--r-pill);
}
.toast-action:hover { background: #f6d520; }