/* Asset service section (Map, and the map panels the Zones page shares). Builds on the clm-*
   map-page styles (customer-location-map.css). Global rather than scoped: the rules reach Mapbox's
   own chrome and portaled MudBlazor content. Colours come from the --st-* tokens only; the map's
   data colours (type, zone and area swatches) arrive inline from the data. */

/* ── Page shell ──────────────────────────────────────────────────────────── */
/* History is a list page on the same route; the map stays in the DOM (hidden) so it survives. */
.sam-page-hidden { display: none; }

/* Overlay column: floating bar on top, the panel below it. Survives the bar wrapping. */
.sam-overlay {
    position: absolute; top: 14px; left: 14px; right: 14px; bottom: 14px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    pointer-events: none; z-index: 10;
}
.sam-overlay .clm-filterbar { position: static; top: auto; left: auto; right: auto; pointer-events: auto; }
.sam-overlay-body { flex: 1; min-height: 0; align-self: stretch; display: flex; align-items: stretch; pointer-events: none; }
.sam-left-col { display: flex; flex-direction: column; min-height: 0; max-height: 100%; pointer-events: none; }

/* ── Floating bar: address search + what the map shows ─────────────────── */
/* A compact card at the top-left rather than a full-width strip, so the map's own corner
   controls (fullscreen, zoom) stay clear. */
.sam-overlay .clm-filterbar.sam-modebar {
    max-width: 100%; flex-wrap: nowrap; gap: 12px; padding: 8px;
    background: var(--st-white); backdrop-filter: none;
    border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
}
.sam-status-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-right: 4px; }
.sam-status-chips .mud-icon-root { margin-left: -2px; }

/* Address search: the Google place widget inside the StSearchField box (34px, outlined, 8px). The
   widget draws its own search glyph, so there is no icon of ours. */
.sam-addr-search {
    display: flex; align-items: center; flex: 0 0 280px; width: 280px; height: 34px;
    padding: 0 10px; box-sizing: border-box;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius);
    color: var(--st-muted);
    transition: border-color var(--st-duration-fast), box-shadow var(--st-duration-fast);
}
.sam-addr-search:hover { border-color: var(--st-border-hover); }
.sam-addr-search:focus-within { border-color: var(--st-primary); box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }
.sam-addr-search .addr-ac-wrap { display: flex; align-items: center; flex: 1; min-width: 0; margin: 0; padding-top: 0; }
.sam-addr-search .addr-ac-label { display: none; }
.sam-addr-search .addr-ac-input-container {
    flex: 1; min-width: 0; height: 22px; min-height: 0;
    background: transparent; border: none; border-radius: 0; box-shadow: none;
}
.sam-addr-search .addr-ac-input-container:hover,
.sam-addr-search .addr-ac-input-container:focus-within { border-color: transparent; box-shadow: none; }
/* The widget lays itself out at its own (taller) default size; pin the host and its input to
   the field's line height. */
.sam-addr-search .addr-ac-input-container gmp-place-autocomplete { height: 22px; min-height: 0; display: flex; align-items: center; }
.sam-addr-search .addr-ac-input-container gmp-place-autocomplete::part(input) {
    height: 22px !important; min-height: 0 !important; line-height: 22px !important;
    padding: 0 !important; font-size: 13px !important;
}
.sam-addr-search .addr-ac-input-container > .addr-ac-input { height: 20px; padding: 0; font-size: 13px; }
.sam-addr-search .addr-ac-input {
    border: none; background: transparent; outline: none;
    font-size: 13px; color: var(--st-text); width: 100%; font-family: inherit;
}

/* ── Map panel shell (Points here, the zone list on /zones) ────────────── */
/* A white card: header (title + count, scope line), the in-panel toolbar (search, one Filters
   button, chips), the scrolling list, then a pinned footer. */
.sam-list-panel {
    width: 384px; max-height: 100%;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
    pointer-events: auto;
}
.sam-panel-head { flex-shrink: 0; padding: 14px 16px 0; }
/* The Points panel always reaches the bottom of the map, so its Filters popover has room. */
.sam-points-panel { flex: 1 1 auto; min-height: 0; }
.sam-panel-head__row { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.sam-panel-title { font-size: 15px; font-weight: 600; color: var(--st-text-strong); }
.sam-panel-head__row > .sam-panel-head__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sam-panel-scope {
    margin-top: 2px; font-size: 12px; color: var(--st-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sam-panel-toolbar {
    flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
    padding: 10px 16px 12px; border-bottom: 1px solid var(--st-border);
}
.sam-panel-toolbar__row { display: flex; align-items: center; gap: 8px; }
.sam-panel-toolbar .st-search { flex: 1 1 auto; width: auto; min-width: 0; }
.sam-panel-toolbar .st-filter-chips { margin-bottom: 0; }
/* The Filters button sits at the panel's right edge, so its panel opens leftwards. */
.sam-panel-toolbar .st-filter__panel { left: auto; right: 0; }
.sam-panel-hint {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 8px 10px; border-radius: var(--st-radius);
    background: var(--st-bg); border: 1px solid var(--st-border-light);
    font-size: 12px; line-height: 1.45; color: var(--st-muted);
}
.sam-panel-hint .mud-icon-root { margin-top: 1px; color: var(--st-subtle); flex-shrink: 0; }
.sam-panel-hint a { color: var(--st-primary); font-weight: 600; }

/* Inside the Filters panel: a value search for the long lists, and each value's swatch/backlog. */
.sam-filter-search {
    width: 100%; height: 30px; box-sizing: border-box; padding: 0 10px;
    border: 1px solid var(--st-border); border-radius: var(--st-radius);
    background: var(--st-white); color: var(--st-text);
    font-family: var(--st-font-body); font-size: 13px; outline: none;
}
.sam-filter-search::placeholder { color: var(--st-subtle); }
.sam-filter-search:focus { border-color: var(--st-primary); box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }
.sam-filter-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sam-filter-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-filter-counts { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sam-filter-empty { padding: 6px 8px; font-size: 12px; color: var(--st-subtle); }

.sam-list-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Points list: grouped by type ─────────────────────────────────────── */
/* The band stays put while its own section scrolls, so a row two hundred deep still says which
   type it belongs to. Styled as the table header band. */
.sam-group-head {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 12px 0 16px;
    position: sticky; top: 0; z-index: 2;
    background: var(--st-bg); border-bottom: 1px solid var(--st-border-light);
    user-select: none;
}
.sam-group-head:hover { background: var(--st-bg-alt); }
/* The header is the expand control, so it is a button spanning the band; the eye is a sibling. */
.sam-group-toggle {
    flex: 1; min-width: 0; height: 40px;
    display: flex; align-items: center; gap: 8px;
    padding: 0; border: none; background: none;
    font-family: inherit; text-align: left; cursor: pointer; color: inherit;
}
.sam-group-toggle:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; border-radius: var(--st-radius-sm); }
.sam-group-chevron { font-size: 18px; color: var(--st-subtle); flex-shrink: 0; margin-left: -4px; }
.sam-group-head.open .sam-group-chevron { color: var(--st-muted); }
/* A square rather than a dot: the rows below spend their dot on the status. */
.sam-group-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sam-group-name {
    min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--st-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sam-group-total { flex-shrink: 0; }
.sam-group-spacer { flex: 1; min-width: 4px; }
.sam-group-attn { flex-shrink: 0; }
.sam-group-check { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--st-primary); }
.sam-group-count {
    font-size: 11px; font-weight: 600; color: var(--st-muted);
    background: var(--st-bg-alt); border-radius: var(--st-radius-full); padding: 1px 8px;
}
.sam-group-count.selected { color: var(--st-white); background: var(--st-primary); }
/* The map-layer toggle stays out of the way until the header is hovered or focused. */
.sam-group-eye-tip { display: inline-flex; flex-shrink: 0; }
.sam-group-eye {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    border: none; background: none; border-radius: var(--st-radius-sm); cursor: pointer; color: var(--st-muted);
    opacity: 0; transition: opacity var(--st-duration-fast);
}
.sam-group-head:hover .sam-group-eye,
.sam-group-eye:focus-visible { opacity: 1; }
.sam-group-eye:hover { background: var(--st-border); color: var(--st-text); }
.sam-group-head.hidden .sam-group-eye { opacity: 1; }
.sam-group-head.hidden .sam-group-name,
.sam-group-head.hidden .sam-group-total { opacity: 0.55; }
.sam-eye-icon { font-size: 16px; }

/* One point: status dot, name over address, and how late it is on the right. ~52px like a
   table row, with a muted second line. */
.sam-row {
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 8px 16px; box-sizing: border-box;
    cursor: pointer;
}
.sam-points-list .sam-row { border-bottom: 1px solid var(--st-border-light); }
.sam-row:hover { background: var(--st-bg); }
.sam-row.selected { background: var(--st-primary-light); }
.sam-row.active { background: var(--st-primary-light); box-shadow: inset 3px 0 0 var(--st-primary); }
/* The row the map is pointing at: a left rule rather than a fill, so it stays distinguishable
   from the pointer's own hover and from the open drawer's selection. */
.sam-row.hovered { box-shadow: inset 3px 0 0 var(--st-primary); }
.sam-row.dragging { opacity: 0.4; }
.sam-row-check { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--st-primary); }
.sam-row-main { flex: 1; min-width: 0; }
.sam-row-name {
    font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--st-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sam-row-meta {
    margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--st-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sam-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--st-subtle); }
.sam-status-dot.overdue { background: var(--st-error); }
.sam-status-dot.due { background: var(--st-warning); }
.sam-status-dot.ok { background: var(--st-border-hover); }
.sam-status-dot.inactive { background: var(--st-border); }
/* An unresolved issue rings the dot rather than replacing it: the point is still due when it is due. */
.sam-status-dot.issue { box-shadow: 0 0 0 3px var(--st-caution); }
.sam-row-due { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sam-row-due-sub { font-size: 11px; color: var(--st-subtle); white-space: nowrap; }

/* Loading rows in the list's own shape. */
.sam-row.sam-row--skeleton { cursor: default; }
.sam-row.sam-row--skeleton:hover { background: transparent; }
.sam-skel-dot { width: 8px; height: 8px; flex-shrink: 0; }
.sam-skel-name { width: 55%; }
.sam-skel-badge { width: 72px; height: 20px; flex-shrink: 0; }
.sam-points-list .st-empty-state { padding-left: 16px; padding-right: 16px; }

/* Route mode: drag handle + stop number on each row, hint bar in the toolbar. */
.sam-route-handle { display: flex; align-items: center; flex-shrink: 0; color: var(--st-subtle); cursor: grab; margin-right: -6px; }
.sam-route-handle:active { cursor: grabbing; }
.sam-handle-icon { font-size: 16px; }
.sam-route-num {
    flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--st-primary-light); color: var(--st-primary); border-radius: var(--st-radius-full);
    font-size: 11px; font-weight: 700;
}
.sam-route-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: var(--st-radius); background: var(--st-bg);
}
.sam-route-icon { font-size: 16px; color: var(--st-primary); }
.sam-route-hint { flex: 1; font-size: 12px; color: var(--st-muted); }
/* Drop slot indicator inserted by asset-route-dnd.js (JS-created DOM, so a global stylesheet). */
.sam-route-ghost { height: 3px; margin: 2px 6px; border-radius: 2px; background: var(--st-primary); }

/* The panel's paging and pinned footer (the attention switch and the sentence it governs). */
.sam-points-panel .st-pager { padding: 8px 16px; flex-shrink: 0; }
.sam-points-foot {
    flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
    padding: 10px 16px 12px; border-top: 1px solid var(--st-border); background: var(--st-white);
}
.sam-foot-seg { display: flex; flex-wrap: nowrap; width: 100%; }
.sam-foot-seg .st-segment__btn {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.sam-list-count { font-size: 12px; line-height: 1.4; }
.sam-count-main { font-weight: 600; color: var(--st-text); }
.sam-count-hint { color: var(--st-muted); }

/* ── Manage menu (portaled, so global) ─────────────────────────────────── */
.sam-manage-switch { padding: 2px 12px 6px; }
.sam-manage-switch .mud-switch { margin: 0; }
.sam-manage-switch .mud-typography { font-size: 13px; }

/* ── Map control stack (right) ─────────────────────────────────────────── */
/* Grouped 30px icon buttons under the zoom control, each wrapped in a tooltip. The group tops are
   fixed so the stack lines up under Mapbox's own control. */
.sam-styletoggle-group {
    position: absolute; top: 98px; right: 10px; z-index: 2;
    display: flex; flex-direction: column;
    background: var(--st-white); border-radius: var(--st-radius); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}
.sam-styletoggle-group > .sam-tip { display: block; }
.sam-styletoggle {
    width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: var(--st-white); color: var(--st-muted); cursor: pointer;
    transition: background var(--st-duration-fast), color var(--st-duration-fast);
}
.sam-tip + .sam-tip .sam-styletoggle { border-top: 1px solid var(--st-border); }
.sam-styletoggle:hover { background: var(--st-bg-alt); color: var(--st-text); }
.sam-styletoggle.on { background: var(--st-primary); color: var(--st-white); }
.sam-styletoggle:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.sam-toggle-icon { font-size: 18px; }
/* Stack order: style (61px tall), cluster, zones, trails, edit tools. */
.sam-clustertoggle-group { top: 167px; }
.sam-zonetoggle-group { top: 206px; }
.sam-trailtoggle-group { top: 245px; }
.sam-edittoggle-group { top: 284px; }
/* Push the map zoom +/- controls below the floating bar (this page only). */
.clm-map-area.sam-map-area .mapboxgl-ctrl-top-right { margin-top: 84px; }

/* The trail's own controls, beside the pill that opened them: which day, and who was out on it. */
.sam-trail-pop {
    position: absolute; top: 245px; right: 52px; z-index: 3;
    width: 240px; max-height: calc(100% - 260px);
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
    overflow-y: auto;
}
.sam-trail-head { display: flex; flex-direction: column; gap: 8px; }
.sam-trail-title { font-size: 14px; font-weight: 600; color: var(--st-text); }
.sam-trail-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.sam-trail-note { font-size: 12px; color: var(--st-muted); }
.sam-trail-drivers { display: flex; flex-direction: column; gap: 2px; }
.sam-trail-driver {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 8px;
    border: none; border-radius: var(--st-radius); background: none;
    font-family: inherit; text-align: left; cursor: pointer;
}
.sam-trail-driver:hover { background: var(--st-bg); }
.sam-trail-driver.active { background: var(--st-primary-light); }
.sam-trail-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sam-trail-name {
    flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--st-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sam-trail-meta { flex-shrink: 0; font-size: 11px; color: var(--st-muted); }

/* ── Cards on the map (move, create, add hint, bulk bar, getting started) ── */
.sam-move-bar {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 13;
    display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
    padding: 8px 10px 8px 14px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
}
.sam-move-text { font-size: 13px; font-weight: 600; color: var(--st-text); }
/* Confirm card, positioned next to the dropped pin by samStartCardFollow. */
.sam-move-card {
    position: absolute; left: -9999px; top: 0; z-index: 13; width: 240px;
    padding: 14px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
}
/* Create card, anchored next to the draft pin (positioned by asset-map.js). */
.sam-create-card {
    position: absolute; left: -9999px; top: 0; z-index: 12; width: 300px;
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
}
.sam-card-title { font-size: 14px; font-weight: 600; color: var(--st-text-strong); }
.sam-card-hint { margin-top: 2px; font-size: 12px; color: var(--st-muted); }
.sam-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.sam-move-card .sam-card-actions { margin-top: 12px; }

/* Add mode: "click the map" hint at the bottom centre. */
.sam-map-hint {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius);
    box-shadow: var(--st-shadow-md);
    font-size: 13px; color: var(--st-text);
}
.sam-map-hint .mud-icon-root { color: var(--st-primary); }

/* Bulk action bar: floating bottom centre while points are selected. */
.sam-bulk-bar {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 12;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    max-width: calc(100% - 32px);
    padding: 10px 14px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
    font-size: 13px; color: var(--st-text);
}
.sam-bulk-count { font-weight: 600; white-space: nowrap; }
.sam-bulk-group { display: flex; align-items: center; gap: 6px; }
.sam-bulk-interval { width: 120px; }
.sam-bulk-select { width: 170px; }

/* Getting-started card (no points yet). */
.sam-onboard {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 11; width: 440px; max-width: 90%;
    padding: 22px 24px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-lg);
    box-shadow: var(--st-shadow-modal);
}
.sam-onboard-title { font-size: 17px; font-weight: 700; color: var(--st-text-strong); }
.sam-onboard-sub { font-size: 13px; color: var(--st-muted); margin: 4px 0 16px; }
.sam-onboard-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--st-border-light); }
.sam-onboard-step.locked { opacity: 0.55; }
.sam-onboard-num {
    width: 24px; height: 24px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--st-primary-light); color: var(--st-primary);
    font-size: 12px; font-weight: 700;
}
.sam-onboard-step.done .sam-onboard-num { background: var(--st-success-light); color: var(--st-success); }
.sam-onboard-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sam-onboard-body b { font-size: 14px; font-weight: 600; color: var(--st-text); }
.sam-onboard-body span { font-size: 13px; color: var(--st-muted); }
.sam-onboard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Detail drawer ─────────────────────────────────────────────────────── */
/* Stays on the page (it drives the map: fly-to, move mode, pin state) but reads as the app's
   side panel: an st-dialog title bar, st-form sections in a scrolling body, a pinned footer. */
.sam-drawer { display: flex; flex-direction: column; }
.sam-drawer-head { flex-shrink: 0; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--st-border); }
.sam-drawer-head .st-dialog-title__text { flex: 1; min-width: 0; }
.sam-drawer-head .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-drawer-tile.icon-tile { background: var(--st-bg-alt); }
.sam-drawer-swatch { width: 14px; height: 14px; border-radius: 4px; }
.sam-drawer-body {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 24px;
    padding: 20px;
}
.sam-drawer-foot {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    /* Keep Save clear of the global bug-report button (56px at 24px from the corner). */
    padding: 14px 88px 14px 20px; border-top: 1px solid var(--st-border); background: var(--st-white);
}
/* The destructive action is a quiet text button pushed left, as on the zone editor. */
.st-form .sam-btn-delete.mud-button-root { color: var(--st-error); }
.st-form .sam-btn-delete.mud-button-root:hover { background: var(--st-error-light); }
.sam-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sam-kv { font-size: 12px; margin-top: 4px; }
.sam-muted-line { font-size: 13px; color: var(--st-muted); }
/* "When": date picker + clock-time field side by side (replaces datetime-local). */
.sam-service-when { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; align-items: start; }
.sam-log-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 0; border-bottom: 1px solid var(--st-border-light);
}
.sam-log-row:last-child { border-bottom: none; }
.sam-log-body { flex: 1; min-width: 0; }
.sam-log-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--st-text); }
.sam-log-meta { margin-top: 4px; font-size: 12px; color: var(--st-muted); }
.sam-log-photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
.sam-log-photos a { color: var(--st-primary); }
.sam-log-resolve { margin-left: auto; align-self: center; flex-shrink: 0; }

/* Photo upload: the dashed drop zone the task/files upload dialog uses. */
.sam-dropzone {
    display: block; padding: 18px 16px; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--st-border-hover); border-radius: 10px; background: var(--st-white);
    transition: border-color var(--st-duration-fast), background var(--st-duration-fast);
}
.sam-dropzone:hover { border-color: var(--st-primary); background: var(--st-bg); }
.sam-dropzone-title { font-size: 13px; font-weight: 600; color: var(--st-text); margin-bottom: 2px; }
.sam-dropzone-sub { font-size: 12px; color: var(--st-subtle); }
.sam-staged-file {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: var(--st-bg);
    border: 1px solid var(--st-border); border-radius: var(--st-radius);
}
.sam-staged-file-main { flex: 1; min-width: 0; }
.sam-staged-file-name { font-size: 12px; font-weight: 500; color: var(--st-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-staged-file-size { font-size: 11px; color: var(--st-subtle); }

/* ── Manage side panels and dialogs (portaled, so global) ──────────────── */
/* Areas / Asset types side panels: a toolbar band, then one flush st-table. */
.mud-dialog-container:has(.st-side-panel-backdrop) .mud-dialog.sap-panel .mud-dialog-content { padding: 0; }
.sap-panel__toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 24px; border-bottom: 1px solid var(--st-border);
}
.sap-panel__toolbar .st-search { flex: 1 1 auto; width: auto; }
.sap-panel__hint { padding: 12px 24px 0; font-size: 12px; line-height: 1.45; color: var(--st-muted); }
.mud-dialog-container:has(.st-side-panel-backdrop) .mud-dialog.sap-panel .mud-dialog-content { overflow-x: hidden; }
.sap-panel__table { table-layout: auto; }
.sap-panel__table .st-table__secondary { white-space: normal; max-width: none; }
.sap-panel__table td:first-child { padding-left: 24px; }
.sap-panel__table td:last-child { padding-right: 16px; }
.sap-panel .st-empty-state { margin: 16px 24px; }
/* The zone band above its areas, like the table's header band. */
.sap-group-row td {
    height: 36px; padding-top: 0; padding-bottom: 0;
    background: var(--st-bg); border-bottom: 1px solid var(--st-border-light);
}
.st-table tbody tr.sap-group-row:hover td { background: var(--st-bg); }
.sap-group-row__head {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--st-muted);
}
.sap-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sap-swatch--sm { width: 8px; height: 8px; }
/* The row's colour: a native colour input shown as a rounded swatch. */
.sap-color-cell { width: 44px; padding-right: 0 !important; }
.sap-color {
    width: 24px; height: 24px; padding: 0; border: 1px solid var(--st-border); border-radius: var(--st-radius-sm);
    background: none; cursor: pointer; display: block;
}
.sap-color::-webkit-color-swatch-wrapper { padding: 2px; }
.sap-color::-webkit-color-swatch { border: none; border-radius: 3px; }
.sap-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sap-name__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sap-team-cell { width: 176px; min-width: 176px; }
.sap-row--inactive .st-table__primary,
.sap-row--inactive .st-table__secondary { opacity: 0.6; }
/* Instruction documents attached to a type: chips under the row's meta line. */
.sap-instr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sap-instr__chip { max-width: 240px; height: 24px; padding-left: 8px; gap: 5px; }
.sap-instr__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Small dialogs behind the panels. */
.sap-hint { font-size: 12px; line-height: 1.45; color: var(--st-muted); }
.sap-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sap-season { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.sap-search-full.st-search { width: 100%; }
/* Instruction picker rows. */
.sap-picker {
    display: flex; flex-direction: column; max-height: 360px; overflow-y: auto;
    border: 1px solid var(--st-border); border-radius: var(--st-radius);
}
.sap-picker__row {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
    padding: 8px 12px; border: none; border-bottom: 1px solid var(--st-border-light);
    background: var(--st-white); text-align: left; cursor: pointer; color: var(--st-text); font-family: inherit;
}
.sap-picker__row:last-child { border-bottom: none; }
.sap-picker__row:hover { background: var(--st-bg); }
.sap-picker__row--skeleton { cursor: default; }
.sap-picker__row--skeleton:hover { background: var(--st-white); }
.sap-picker__main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sap-picker__title { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sap-picker__folder { font-size: 12px; color: var(--st-muted); }
.sap-picker__add { color: var(--st-primary); }
.sap-picker__skel-icon { width: 16px; height: 16px; flex-shrink: 0; }
.sap-picker__skel-title { width: 50%; }
.sap-picker .st-empty-state { margin: 8px; }
.sam-dropzone-icon { display: block; margin: 0 auto 6px; font-size: 26px; color: var(--st-subtle); }
.sam-file-icon { color: var(--st-subtle); flex-shrink: 0; }