/* Fieldwork on top of the AWP admin design system. Only what the system does not
   already do: the dispatch grid, the signature pad, the field app's tab bar, print. */

/* ---- dispatch grid ---- */
.schedule { display: grid; grid-template-columns: 150px repeat(7, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); gap: 1px; min-width: 1150px; }
.schedule > div { background: var(--surface); padding: 8px; min-height: 64px; }
.schedule .hd { font-weight: 600; font-size: var(--fs-sm); position: sticky; top: 0; }
.schedule .hd.today { color: var(--brand); }
.schedule .who { font-weight: 600; font-size: var(--fs-sm); }
.schedule .who .sub { display: block; font-weight: 400; }
.schedule .cell { position: relative; }
.schedule .cell.today { background: var(--brand-wash); }
.schedule .cell .add { position: absolute; right: 6px; bottom: 4px; opacity: 0; font-size: 1rem; color: var(--muted); }
.schedule .cell:hover .add { opacity: 1; }
.slot { display: block; border-left: 3px solid var(--brand); background: var(--sunken); border-radius: var(--r-sm); padding: 5px 7px; margin-bottom: 6px; font-size: var(--fs-xs); color: var(--ink); text-decoration: none; line-height: 1.3; }
.slot:hover { background: var(--brand-wash); }
.slot b { display: block; font-size: var(--fs-sm); }
.slot.st-completed { border-color: var(--ok); opacity: .75; }
.slot.st-in_progress, .slot.st-en_route { border-color: var(--warn); }
.slot.st-new, .slot.st-requested { border-color: var(--faint); border-left-style: dashed; }
.slot.pr-urgent { border-color: var(--danger); }
.scroll-x { overflow-x: auto; }

/* ---- board ---- */
.board-card .num { display: block; font-size: var(--fs-xs); color: var(--muted); }
.board-card { cursor: grab; }
.board-card a { color: inherit; text-decoration: none; }

/* ---- signature ---- */
.sigpad { border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface); touch-action: none; width: 100%; height: 160px; display: block; }

/* ---- rating ---- */
.stars { display: inline-flex; gap: 2px; color: var(--warn); font-size: 1.1rem; }
.stars.pick label { cursor: pointer; color: var(--faint); font-size: 1.6rem; }
.stars.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars.pick input:checked ~ label, .stars.pick label:hover, .stars.pick label:hover ~ label { color: var(--warn); }
.stars.pick { flex-direction: row-reverse; justify-content: flex-end; }

/* ---- photos ---- */
.photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.photos a { display: block; width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.photos img { width: 100%; height: 100%; object-fit: cover; }

/* ---- field app ---- */
body.pwa { background: var(--bg); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.pwa-top { position: sticky; top: 0; z-index: 5; }
.pwa-main { padding: var(--sp-4); max-width: 720px; margin: 0 auto; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: var(--fs-xs); color: var(--muted); text-decoration: none; }
.tabbar a i { font-size: 1.35rem; }
.tabbar a[aria-current="page"] { color: var(--brand); }
.visit { display: block; color: inherit; text-decoration: none; }
.visit .card { margin-bottom: var(--sp-3); }
.visit .time { font-weight: 700; font-size: var(--fs-lg); }
.visit.st-completed .card { opacity: .7; }
.actbar { display: flex; gap: 8px; flex-wrap: wrap; }
.actbar .btn { flex: 1; min-width: 120px; }
.actbar .btn-lg { padding-top: 12px; padding-bottom: 12px; }
.pwa .cols-2, .pwa .cols-3 { grid-template-columns: 1fr; }
.pwa h2 { font-size: 1.25rem; }

/* ---- print ---- */
.doc { max-width: 820px; margin: 0 auto; }
.doc .doc-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.doc h1 { font-size: 1.6rem; margin: 0; }
@media print {
    body { background: #fff; }
    .doc .card { border: 0; box-shadow: none; padding: 0; }
    .topbar, .side, .tabbar, .no-print { display: none !important; }
    .main { padding: 0; margin: 0; }
}

/* ---- TomSelect ---- */
.ts-wrapper.single .ts-control > .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-dropdown .option .sub { display: block; font-size: var(--fs-xs); }
.ts-dropdown .no-results a { color: var(--brand); }

/* ---- guides ---- */
.guide-body h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-lg); }
.guide-body h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-md); }
.guide-body p, .guide-body ul, .guide-body ol, .guide-body .scroll, .guide-body pre { margin: 0 0 var(--sp-3); }
.guide-body ul, .guide-body ol { padding-left: 1.3em; }
.guide-body li { margin-bottom: 4px; }
.guide-body .callout { margin: var(--sp-4) 0; }
.guide-body pre { background: var(--sunken); border-radius: var(--r-sm); padding: var(--sp-3); overflow-x: auto; font-size: var(--fs-sm); }
#guide-drawer .body { line-height: 1.55; }


/* ---- layout at laptop widths ----
   A grid track's minimum is its content's by default, so a table in one column
   of .split (already in a .scroll wrapper) sized the whole grid past the screen
   at around 1100px. Zero minimums on the tracks, and on the .stack grids inside
   them, let the .scroll wrapper do its job instead.
   Only above the design system's own breakpoint: below it the split is one
   column, and a rule here without the query overrode that and squeezed both
   columns side by side on a phone. */
@media (min-width: 861px) {
  .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.split > *, .split > .stack > * { min-width: 0; }

/* ---- the day's driving, in a schedule cell ----
   A cell already carries its jobs; this is the one line under them that says how
   far the day is, and shows the shorter way round when there is a real one. */
.schedule .cell > .sub { display:block; margin-top:6px; font-size:.72rem; opacity:.75; }
.schedule .cell > .sub .warn-text { color: var(--warn); font-weight:600; }