/* The back-office pages: Settings, Team and Hours, Leads, Products and On the trucks (docs/UI-CLEAN.md O26-O29).
   Colours are tokens only; a hover effect is for a mouse only; the type scale is 11 12 13 15 16 20 24 28. */

.adv-row { display: flex; align-items: center; gap: 12px; }
.adv-row .sub, .set-sec .sub { color: var(--ink-3); font-size: var(--fs-sec); }


/* the alerts, in groups: a name on the left and one 3-way switch at the right (real radios underneath) */
.prefs-panel { display: grid; gap: 0; padding: 4px 18px; }
.pref-group { padding: 14px 0; display: grid; gap: 4px; }
.pref-group + .pref-group { border-top: 1px solid var(--hair); }
.pref-group > .h3 { margin-bottom: 4px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.pref-name { min-width: 0; }
.seg-radio { flex: none; }
.seg-radio label { position: relative; display: block; }
.seg-radio label + label { border-left: 1px solid var(--hair); }
.seg-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-radio span { display: block; line-height: 26px; padding: 0 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.seg-radio input:checked + span { background: var(--sel); color: var(--ink); }
.seg-radio:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.pref-quiet { grid-template-columns: repeat(2, minmax(0, 220px)); margin-bottom: 4px; }
@media (max-width: 900px) {
  .pref-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 0; }
  .seg-radio span { line-height: 38px; }
  .prefs-panel { padding: 4px 14px; }
}

/* ---------- a section head with an action at the right (Hours, Office) ---------- */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.sec-head > h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.1px; }

/* ---------- row menus ("...") ---------- */
.menu-dots { width: 32px; padding: 0; justify-content: center; }
.menu hr.menu-sep { width: calc(100% - 8px); margin: 4px; border: 0; border-top: 1px solid var(--hair); }
.menu [role="menuitem"].danger { color: var(--red-text); }

/* ---------- Team ---------- */
.t td.signs-in { max-width: 320px; }
.signs-in .login-line { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 4px; }
.signs-in .login-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-weight: 600; }
.signs-in .login-meta { grid-column: 1 / -1; }
.lic-missing { color: var(--amber-text); font-weight: 600; }
.removing { display: grid; gap: 6px; justify-items: end; white-space: normal; width: 260px; text-align: right; }
.invite-form { margin-top: 12px; }
.invite-form .input { max-width: 280px; }

/* ---------- Hours: equal day columns ---------- */
.hours-t { table-layout: fixed; }
.hours-t th:first-child { width: 190px; }
.hours-t th:last-child { width: 96px; }
.hours-t td.num, .hours-t th.num { text-align: center; }
.hours-t th:last-child, .hours-t td:last-child { text-align: right; }
/* a day's cell wraps "No clock-out" in its own column instead of printing over the next day, and a narrow page (the
   assistant open) scrolls the table sideways rather than crushing seven days into 15px columns */
.hours-t .hours-cell { width: 100%; min-width: 0; white-space: normal; overflow-wrap: normal; word-break: keep-all; line-height: 1.25; padding: 6px 2px; }
/* (its wrapper scrolls: on a computer table wrappers clip to keep headers sticky, and this table is a few rows; in a
   scrolling wrapper a sticky header sat 60px down, on top of the first tech's row, so it stays put here) */
@media (min-width: 901px) { .hours-t { min-width: 800px; } .table-wrap:has(> .hours-t) { overflow-x: auto; } .table-wrap:has(> .hours-t) .t th { position: static; } }
.hours-t td { vertical-align: middle; }
.day-shifts { margin-top: 10px; }
.day-shifts > .strong { margin-bottom: 8px; }
.add-shift { margin-top: 8px; }
@media (max-width: 900px) { .hours-t { table-layout: auto; } .hours-t th:first-child { width: auto; } }

/* ---------- Products and On the trucks ---------- */
.restock { margin-bottom: 16px; }
.restock-head { justify-content: space-between; margin-bottom: 6px; }
.restock-done { margin-top: 6px; }
.prod-form { margin-bottom: 14px; }
.prod-check { height: 34px; }
.prod-label-h { margin-top: 18px; }
.prod-label-p { margin-bottom: 10px; }
.label-rows-2, .prod-rei { margin-top: 14px; }
.prod-problem { margin-top: 10px; }
.prod-act { margin-top: 12px; }
.trucks { margin-top: 32px; }
.trucks .sec-head { margin-bottom: 10px; }
.truck-msg { margin: 0 0 8px; }
.truck-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.truck-form { gap: 8px; align-items: flex-end; justify-content: flex-end; }
.truck-act { gap: 4px; justify-content: flex-end; }
.trucks .menu { z-index: 30; }