:root {
    --color-bg: #f7f7f5;
    --color-surface: #ffffff;
    --color-border: #d6d3d1;
    --color-text: #1c1917;
    --color-muted: #78716c;
    --color-accent: #0f766e;
    --color-accent-text: #ffffff;
    --color-danger: #b91c1c;
    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
}

* { box-sizing: border-box; }

/* iOS Safari zooms the viewport when a form control's effective
   font-size is below 16px. Forcing the floor on every input/select/
   textarea kills that zoom-on-focus behavior across the whole app —
   the visual density goes up a touch (the original task-row inputs
   ran 12-13px) but every existing layout now sees a 16px form font
   on touch devices. Scoped to coarse pointers so desktop keeps its
   existing density. !important is necessary because many controls
   already declare a smaller font-size at higher specificity. */
@media (hover: none) and (pointer: coarse) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Vendor settings: compact service/category checkbox rows. */
.vendor-link-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    font-size: 12px;
    line-height: 1.2;
}
.vendor-link-check input[type="checkbox"] {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
}
.vendor-settings-panel { margin-bottom: 14px; }
.vendor-link-dropdown {
    position: relative;
    min-width: 180px;
    max-width: 280px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.vendor-link-dropdown summary {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 26px 6px 9px;
    cursor: pointer;
    font-size: 13px;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vendor-link-dropdown summary::-webkit-details-marker { display: none; }
.vendor-link-dropdown summary::after {
    content: "v";
    position: absolute;
    right: 9px;
    top: 7px;
    font-size: 11px;
    color: var(--color-muted);
}
.vendor-link-dropdown[open] summary::after { content: "^"; }
.vendor-link-dropdown summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vendor-link-menu {
    display: grid;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border-top: 1px solid var(--color-border);
}
.vendor-link-menu .vendor-link-check {
    width: 100%;
    margin: 0;
    padding: 5px 4px;
    border-radius: 4px;
    cursor: pointer;
}
.vendor-link-menu .vendor-link-check:hover { background: #f5f5f4; }
.vendor-link-menu .vendor-link-check span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vendor-link-empty {
    padding: 5px 4px;
    color: var(--color-muted);
    font-size: 12px;
}
.vendor-settings-dialog {
    width: min(94vw, 720px);
}
.vendor-settings-dialog .settings-table {
    margin-top: 4px;
}
.vendor-dialog-add-row {
    margin-top: 10px;
}

.vendor-info-dropdown {
    position: relative;
    min-width: 190px;
}
.vendor-info-dropdown summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-accent);
    list-style: none;
}
.vendor-info-dropdown summary::-webkit-details-marker { display: none; }
.vendor-info-dropdown summary::after {
    content: "v";
    margin-left: 6px;
    color: var(--color-muted);
    font-size: 12px;
}
.vendor-info-dropdown[open] summary::after { content: "^"; }
.vendor-info-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: min(320px, calc(100vw - 48px));
    min-width: 0;
    padding: 12px;
    margin-top: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.vendor-info-panel label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.vendor-info-panel label > span {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0;
}
.vendor-info-panel input[readonly] {
    background: #f5f5f4;
    color: var(--color-muted);
}
.vendor-info-panel .vendor-info-full {
    grid-column: 1 / -1;
}
.vendor-info-consent {
    flex-direction: row !important;
    align-items: center;
}
.vendor-info-consent input {
    width: auto;
}
.vendor-info-consent span {
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
}
.vendor-info-actions {
    display: flex;
    justify-content: flex-end;
}
.vendor-invite-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f5f5f4;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.vendor-invite-status.is-waiting {
    background: #fef3c7;
    color: #92400e;
}
.vendor-invite-status.is-accepted {
    background: #dcfce7;
    color: #166534;
}
.vendor-invite-status.is-rejected {
    background: #fee2e2;
    color: #991b1b;
}
.vendor-invite-status.is-not-invited {
    background: #f5f5f4;
    color: var(--color-muted);
}
.client-invitations {
    margin-bottom: 18px;
}
.client-invitations-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
}
.client-invitations-head h3 {
    margin: 0;
}
.client-invitations-head h3 span,
.client-invitation-history summary span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f5f5f4;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}
.client-invitation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    margin: 8px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.client-invitation-history .client-invitation-row {
    box-shadow: none;
    background: #fafafa;
}
.client-invitation-main {
    min-width: 0;
}
.client-invitation-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.client-invitation-title strong {
    min-width: 0;
    overflow-wrap: anywhere;
}
.client-invitation-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 12px;
}
.client-invitation-meta span::before {
    content: "";
}
.client-invitation-meta time {
    color: var(--color-muted);
}
.client-invitation-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.client-invitation-actions .btn-primary,
.client-invitation-actions .btn-secondary {
    white-space: nowrap;
}
.client-invitation-reject {
    color: #7f1d1d;
}
.client-invitation-history {
    margin-top: 16px;
}
.client-invitation-history summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    list-style: none;
}
.client-invitation-history summary::-webkit-details-marker { display: none; }
.client-invitation-history summary::after {
    content: "v";
    margin-left: 8px;
    color: var(--color-muted);
    font-size: 12px;
}
.client-invitation-history[open] summary::after {
    content: "^";
}
.client-invitation-history-list {
    display: grid;
    gap: 6px;
}

@media (max-width: 640px) {
    .client-invitation-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        align-items: stretch;
    }
    .client-invitation-title {
        align-items: flex-start;
        justify-content: space-between;
    }
    .client-invitation-title .vendor-invite-status {
        flex: 0 0 auto;
        margin-top: 1px;
    }
    .client-invitation-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        justify-content: stretch;
    }
    .client-invitation-actions .btn-primary,
    .client-invitation-actions .btn-secondary {
        width: 100%;
        min-width: 0;
    }
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100dvh;
    /* Prevent the page from sliding left/right on mobile when something
       (a wide row, a long form input, etc.) accidentally overflows the
       viewport. `overflow-x: clip` does this WITHOUT turning the body
       into a scroll-containing-block, which `overflow-x: hidden` does
       as a side-effect and which breaks position:sticky for descendants
       on iOS Safari (the create-task strip / topbar would silently stop
       sticking on scroll). Widely supported since Safari 16. */
    overflow-x: clip;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.topbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0;
}

#user-switcher,
#organization-switcher {
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    min-width: 140px;
}

/* Inline page navigation in the header */
.page-nav {
    display: inline-flex;
    gap: 4px;
    margin-left: 14px;
    flex-wrap: wrap;
    /* Mobile override below switches to single-line horizontal scroll. */
}
.page-nav-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--color-muted);
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}
.page-nav-btn:hover { background: var(--color-bg); color: var(--color-text); }
.page-nav-btn.is-active {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-accent);
    font-weight: 600;
}
.page-nav-btn.is-disabled { pointer-events: none; opacity: 0.45; }
/* The .page-nav-btn display:inline-flex above wins specificity over the
   user-agent [hidden] rule, so explicitly suppress hidden links here. */
.page-nav-btn[hidden] { display: none; }

.main {
    padding: 14px;
    max-width: 960px;
    margin: 0 auto;
}

body:has(#page-data:not([hidden])) .main {
    max-width: 1320px;
}

/* Tasks page: hold the task list and its sticky controls at a single
   mobile-style width on desktop (~440 px). Wider screens get extra space
   around the column rather than a stretched row. The schedule pill
   anchored to the right edge stays where it is via position:fixed. */
#page-tasks #task-filters,
#page-tasks .task-create-strip,
#page-tasks #task-list,
#page-tasks .task-list-footer {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

/* Admin desktop view: stretch the filter/sort bar wider than the task
   rows so admin filters have more horizontal room to breathe. The
   #task-list (rows) keeps its 520-px cap. Mobile keeps the unified
   width since horizontal space is already scarce. */
@media (min-width: 721px) {
    body.is-admin #page-tasks #task-filters,
    body.is-admin #page-tasks .task-create-strip {
        max-width: 900px;
    }
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 12px;
}

.toolbar-title { margin: 0; font-size: 18px; }

.btn-primary, .btn-secondary, .btn-danger {
    font: inherit;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
}
.btn-primary:hover { filter: brightness(0.95); }
.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    font-weight: 600;
}
.btn-danger:hover { filter: brightness(0.95); }
.btn-secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Task list */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-row-inline-flash {
    margin: -2px 0 4px;
    padding: 8px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    line-height: 1.35;
    box-shadow: var(--shadow-sm);
}
.task-row-inline-flash.error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.task-row-inline-flash.warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #78350f;
}

/* Sync confirmation footer beneath the task list. The button explicitly
 * pushes any pending offline mutations and refreshes the cache; the
 * status span shows "Sync Complete" / "Sync Failed" briefly after each
 * tap. The whole strip stays within the centered task-list column so it
 * sits visually under the rows. */
.task-list-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 24px;
}
.task-list-footer .btn-secondary { font-size: 13px; }
.task-sync-status {
    font-size: 12px;
    min-height: 18px;
    flex: 1;
}
.task-sync-status.is-ok  { color: #2a7a2a; }
.task-sync-status.is-err { color: #b04040; }

.task-row {
    display: grid;
    /* loc | name | short-desc | assignee | DDB(+S inline) | status
       Tracks sum to ~344 px content; the 440-px container leaves a small
       trailing margin on the right so the row reads as left-packed
       without artificially stretching via a 1fr spacer. */
    grid-template-columns: 44px 56px 80px 56px 48px 60px;
    gap: 6px;
    align-items: center;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
}
.task-row:has(.col-del) { grid-template-columns: 44px 56px 80px 56px 48px 60px 28px; }
/* Tighten the right-side cluster: assignee → DDB(+S) → status, each
   separated by 3 px instead of the 6 px column-gap. Each cell shifts
   3 px left, cancelling half the gap before it. */
.task-row .col-ddb    { margin-left: -3px; display: flex; align-items: center; gap: 4px; }
.task-row .col-status { margin-left: -3px; }

.task-row .col-sched { text-align: center; }
.task-row .sched-badge {
    display: inline-block;
    background: #ecfeff;
    color: #155e75;
    border: 1px solid #a5f3fc;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px;
    line-height: 14px;
}
.task-row .col-del {
    padding: 2px 6px;
    font-weight: bold;
    color: var(--color-danger);
    border-color: transparent;
}
.task-row .col-del:hover { background: #fef2f2; border-color: #fecaca; }

.task-row .col-loc       { color: var(--color-muted); font-weight: 500; }
.task-row .col-loc-btn {
    background: none;
    border: 1px dashed transparent;
    border-radius: 4px;
    padding: 2px 6px;
    text-align: left;
    font: inherit;
    color: var(--color-muted);
    font-weight: 500;
    cursor: pointer;
    width: 100%;
}
.task-row .col-loc-btn:hover {
    border-color: var(--color-border);
    background: #fafaf9;
    color: var(--color-text);
}
.task-row .col-name      {
    font-weight: 600;
    /* Tighter column width — clip long names (e.g. when abbreviation is
       missing and the full task_name falls through) instead of overflowing. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Admin-only inline name picker: a transparent button + hidden <select>
   that swaps in on double-tap, same pattern as col-short-desc. */
.task-row .col-name-wrap    { min-width: 0; display: block; }
.task-row .col-name-display {
    font: inherit;
    font-weight: 600;
    color: var(--color-text);
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 4px;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
.task-row .col-name-display:hover { border-color: var(--color-border, #d4d4d8); }
.task-row div.col-name.is-open-event-highlight {
    border-radius: 4px;
    box-sizing: border-box;
    padding: 2px 4px;
}
.task-row .col-name.is-open-event-highlight,
.task-row .col-name-display.is-open-event-highlight {
    border: 1px solid #f59e0b;
    background: #fef3c7;
    color: #78350f;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}
.task-row .col-name-input {
    font: inherit;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
}
.task-row .col-short-desc-wrap { min-width: 0; display: block; }
.task-row .col-short-desc {
    font: inherit;
    font-size: 13px;
    color: var(--color-text);
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 4px;
    padding: 4px 6px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    /* Cap the visible text so a long description never reflows the
       row's grid columns — overflow gets clipped with an ellipsis. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.task-row button.col-short-desc-display {
    cursor: pointer;
    color: var(--color-muted);
}
.task-row button.col-short-desc-display:hover {
    border-color: var(--color-border);
    background: #fafaf9;
    color: var(--color-text);
}
.task-row .col-short-desc-input { white-space: normal; }
.task-row .col-short-desc-input:hover  { border-color: var(--color-border); background: #fafaf9; }
.task-row .col-short-desc-input:focus  { outline: none; border-color: var(--color-accent); background: var(--color-surface); }
.task-row .col-short-desc-input::placeholder { color: var(--color-muted); }
.task-row .col-assignee {
    font: inherit;
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    min-width: 0;
}
.task-row .col-ddb       { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-muted); }
/* Left-align so the status pill sits flush against the DDB number on its
   right edge — text-align: right pushed the pill across the 78 px column
   track, leaving ~57 px of empty space between the pill and the DDB. */
.task-row .col-status    { text-align: left; }
.task-row .col-ddb .ddb-display.sm { width: 100%; min-width: 0; }

/* Task list row: approved two-row operator box based on prototype #25.
   Scoped to task-list rows so schedule/detail rows keep their existing
   markup assumptions and behavior. */
.task-row.task-list-row {
    --task-ddb-spacer: 34px;
    --task-ddb-origin-spacer: 47px;
    --task-action-spacer: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    padding: 0;
    border-color: #a5b4fc;
    overflow: hidden;
}
.task-row.task-list-row:has(.col-del) { grid-template-columns: minmax(0, 1fr); }
.task-list-row .task-row-top,
.task-list-row .task-row-bottom {
    display: grid;
    align-items: center;
    min-width: 0;
}
.task-list-row .task-row-top {
    grid-template-columns: minmax(72px, 88px) minmax(0, 1fr) max-content;
    gap: 14px;
    padding: 10px 12px 9px;
    box-shadow: inset 0 3px 0 #8b5cf6;
}
.task-row.task-list-row:has(.col-del) .task-row-top {
    grid-template-columns: minmax(72px, 88px) minmax(0, 1fr) max-content var(--task-ddb-spacer);
}
.task-row.task-list-row:has(.col-del):has(.task-status-origin-letter) .task-row-top {
    grid-template-columns: minmax(72px, 88px) minmax(0, 1fr) max-content var(--task-ddb-origin-spacer);
}
.task-list-row .task-row-bottom {
    grid-template-columns: minmax(0, 1fr) 70px max-content;
    gap: 6px;
    padding: 8px 12px 10px;
    background: #fbfcfe;
    border-top: 2px solid #bae6fd;
}
.task-list-row .task-row-bottom:has(.col-del) {
    grid-template-columns: minmax(0, 1fr) 70px max-content var(--task-action-spacer) auto;
}
.task-list-row .col-loc-btn {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 2px 10px 2px 0;
    border: 0;
    border-right: 1px solid #edf1f5;
    border-radius: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-list-row .col-loc-btn:hover {
    border-right-color: var(--color-border);
    background: transparent;
}
.task-list-row .col-name,
.task-list-row .col-name-wrap,
.task-list-row .col-short-desc-wrap { min-width: 0; }
.task-list-row .col-name,
.task-list-row .col-name-display {
    font-size: 15px;
    font-weight: 900;
    color: #111827;
}
.task-list-row .col-ddb {
    justify-self: end;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    margin-left: 0;
    color: #344054;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.task-list-row .ddb-inline-label {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.task-list-row .col-ddb .ddb-display.sm {
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #344054;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
}
.task-list-row .col-ddb .ddb-display.sm:hover {
    color: var(--color-accent);
    text-decoration: underline;
}
.task-list-row .col-client {
    justify-self: end;
    width: 124px;
    max-width: 28vw;
    min-width: 0;
    overflow: hidden;
    color: #344054;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-list-row .ddb-readonly,
.task-list-row .ddb-fx-display {
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #344054;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
}
.task-list-row .ddb-fx-display { display: inline-block; }
.task-list-row .col-assignee {
    justify-self: start;
    width: 70px;
    min-width: 70px;
    padding: 5px 9px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-list-row .task-row-action-cluster {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.task-list-row .sched-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
.task-list-row .col-status {
    margin-left: 0;
    text-align: left;
}
.task-row.task-list-row .col-status .status-pill {
    min-width: 31px;
    height: 31px;
    padding: 0 9px;
    font-size: 15px;
    border-radius: 999px;
}
.task-row.task-list-row .col-status .status-pill.status-empty { padding: 0 9px; }
.task-list-row .task-status-origin-letter {
    color: #111;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}
.task-list-row .col-del {
    grid-column: 5;
    justify-self: end;
    align-self: center;
    width: 24px;
    height: 24px;
    padding: 0;
}
.service-task-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid #a5b4fc;
    background: #eef2ff;
}
.vendor-send-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    margin: 0;
    border-top: 1px solid #a5b4fc;
    background: #eef2ff;
}
.service-task-tab {
    min-width: 0;
    padding: 7px 4px;
    border: 0;
    border-right: 1px solid #c7d2fe;
    border-radius: 0;
    background: #f8fafc;
    color: #1f2937;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.service-task-tab:last-child { border-right: 0; }
.vendor-send-status-tab {
    cursor: default;
}
.service-task-tab:hover,
.service-task-tab:focus-visible {
    background: #eef2ff;
    color: #111827;
}
.service-task-tab:disabled {
    cursor: wait;
    opacity: 0.65;
}

/* Flat saturated pill with white abbreviation. Same shape on the row
   and inside the picker popover; per-status background colors come from
   the .status-{key} modifier classes below. Empty state at ~line 917. */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 7px 14px;
    border-radius: 999px;
    /* Buttons default to a system font; inherit family from the row, but
       keep the explicit size + weight so the letter renders as 800. */
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    background: #1f2937;
    color: #fff;
    border: none;
}
.status-Assigned  { background: #2563eb; color: #fff; }
.status-Confirmed { background: #06b6d4; color: #fff; }
.status-GoAhead   { background: #f59e0b; color: #fff; }
.status-Send      { background: #111827; color: #fff; }
.status-Next      { background: #8b5cf6; color: #fff; }
.status-X         { background: #10b981; color: #fff; }
.status-Failed    { background: #ef4444; color: #fff; }
.status-NA        { background: #78716c; color: #fff; }
.status-Rejected  { background: #b91c1c; color: #fff; }
.status-R         { background: #db2777; color: #fff; }

.empty-state {
    margin-top: 30px;
    text-align: center;
    color: var(--color-muted);
}

/* Banner shown above the task list when the most recent fetch failed
   and the user is looking at the last-known cached snapshot. Yellow
   tint distinguishes it from a normal empty-state without grabbing
   the user's attention the way a red error would. */
.empty-state.stale-banner {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #78350f;
    border-radius: 6px;
    font-size: 13px;
}

/* Phase 5: "Update available" pill in the topbar. Visible only when
   a new SW (post-deploy) has installed alongside the active one.
   Click to skipWaiting + reload. Styled like a subtle CTA (teal
   tint matches theme, not red — this is an upgrade, not an error). */
.sw-update-banner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #0f766e;
    color: #fff;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.sw-update-banner:hover { background: #134e4a; }
.sw-update-banner[disabled] { opacity: 0.7; cursor: default; }

/* Phase 3: per-row badge when one or more offline mutations are
   waiting to sync against this task. Sits flush with the task name
   so it's noticed without crowding the row. */
.pending-sync-badge {
    display: inline-block;
    margin-right: 4px;
    font-size: 11px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 0 4px;
    line-height: 14px;
    vertical-align: 1px;
}
.task-row.is-pending-sync { background: #fffbeb; }

/* "Order frozen while editing" pill — surfaces when an inline edit
   has captured the row layout and at least one task is now stale or
   newly-matching. Click the Refresh order button to drop the snapshot
   and re-apply the live filter/sort/group. Amber tint to flag "stale
   state" without screaming error. */
.task-list-refresh-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0;
    padding: 6px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    color: #92400e;
    font-size: 12px;
}
.task-list-refresh-pill button {
    font-size: 12px;
    padding: 4px 10px;
    white-space: nowrap;
}
.task-list-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 18px;
    color: var(--color-muted);
    font-size: .92rem;
}

/* Row that's still pinned in the frozen layout but no longer matches
   the active filter. Desaturate + italicise so the user reads it as
   "out of scope, pending refresh." Pickers / inputs inside keep
   working — the user can still finish editing. */
.task-row.is-stale {
    opacity: 0.55;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.025) 8px,
        rgba(0, 0, 0, 0.025) 16px
    );
}
.task-row.is-stale .col-name,
.task-row.is-stale .col-name-display { font-style: italic; }

/* Toast stack for queued mutations the server rejected on replay
   (4xx). Floats top-right, auto-dismisses after 30s, manual dismiss
   via the × button. */
.sync-error-toasts {
    position: fixed;
    top: 70px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 200;
    max-width: min(380px, calc(100vw - 32px));
}
.sync-error-toast {
    background: #fef2f2;
    border: 1px solid #ef4444;
    color: #7f1d1d;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.sync-error-msg { flex: 1; word-break: break-word; }
.sync-error-dismiss {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}
.sync-error-dismiss:hover { color: #dc2626; }

/* User-switcher is admin-only. While impersonating (admin acting-as
   someone else), keep it visible too so the admin can hop again
   without first clicking "Return to Admin". Everyone else sees only
   their own identity, set by signing in. */
#user-switcher,
label[for="user-switcher"],
#organization-switcher,
label[for="organization-switcher"] { display: none; }
body.is-admin #user-switcher,
body.is-admin label[for="user-switcher"],
body.is-impersonating #user-switcher,
body.is-impersonating label[for="user-switcher"] { display: inline-block; }
body.is-platform-admin #organization-switcher,
body.is-platform-admin label[for="organization-switcher"],
body.is-platform-impersonating #organization-switcher,
body.is-platform-impersonating label[for="organization-switcher"] { display: inline-block; }
#organization-switcher[hidden],
.login-form[hidden] { display: none !important; }

/* Local-login form rendered inside the empty state on first load. */
.auth-stack {
    display: grid;
    gap: 12px;
    justify-content: center;
}
.login-form {
    margin: 0 auto;
    max-width: 360px;
    padding: 18px 20px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    text-align: left;
    color: var(--color-text);
}
.login-form h2 { margin: 0 0 10px; font-size: 18px; }
.login-form .field { display: block; margin-bottom: 10px; }
.login-form .field span { display: block; font-size: 12px; margin-bottom: 4px; color: var(--color-muted); }
.login-form .field input,
.login-form .field select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--color-surface);
}
.login-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.login-msg { font-size: 12px; color: var(--color-muted); }
.login-msg.err { color: var(--color-danger); }
.vendor-invite-account-choice p {
    margin: 6px 0;
    color: var(--color-muted);
    font-size: 13px;
}
.vendor-invite-account-current {
    color: var(--color-text) !important;
    font-weight: 700;
}
.vendor-invite-account-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Dialog */
.dialog {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 18px;
    width: min(90vw, 420px);
    /* Cap height + scroll inside the dialog instead of letting it grow
     * past the viewport. Without this, expanding a section inside the
     * loc-picker accordion (Lease → Sites) re-centered the whole
     * <dialog> vertically, which the user perceived as the page
     * "scrolling back to the top." Keeping the dialog frame pinned
     * means only the inner content shifts. */
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-md);
}
.dialog::backdrop {
    background: rgba(0, 0, 0, 0.3);
}
.dialog h2 { margin: 0 0 12px; font-size: 18px; }

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.field span { font-size: 13px; color: var(--color-muted); }
.field input, .field select, .field textarea {
    font: inherit;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.field textarea { resize: vertical; }

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.create-task-dialog {
    width: min(96vw, 880px);
}
/* Blue "insert here" bar shown in the task list while the New Task dialog
   is open (#5). It snaps to task-row boundaries instead of floating over
   row content, so the visible cue always represents an insertion slot. */
.ct-insert-bar {
    position: fixed;
    height: 4px;
    background: #2563eb;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35), 0 1px 4px rgba(37, 99, 235, 0.5);
    pointer-events: none;
    z-index: 1;
}
.ct-insert-bar[hidden] { display: none; }
.create-task-dialog h2 { margin-bottom: 12px; }
/* Single horizontal row styled like a task-list row: a white card with
   a border, radius and subtle shadow, holding the create controls in
   labelled columns (Location · Task Name · Short Description · Assignee
   · Class). align-items:start so an expanded Locations picker grows
   downward without stretching its neighbours. */
.ct-box {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.85fr)   /* Location */
        minmax(180px, 1.05fr)   /* Task Name */
        minmax(150px, 1fr)      /* Short Description */
        minmax(100px, 0.5fr)    /* Assignee */
        minmax(90px, 0.5fr)     /* DDB */
        minmax(140px, 0.8fr);   /* Class */
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.ct-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ct-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    white-space: nowrap;
}
.ct-label em {
    font-style: normal;
    color: var(--color-danger);
    margin-left: 2px;
}
.ct-col-required .ct-label { color: var(--color-text); }
.create-task-dialog .loc-picker {
    max-width: none;
    max-height: 230px;
}
/* Location field: on desktop the picker shows inline (the trigger is
   hidden and the panel is a plain static wrapper). Mobile flips this in
   the media query below — trigger visible, panel a floating dropdown. */
.ct-loc-picker { position: relative; min-width: 0; }
.create-task-dialog .ct-loc-trigger { display: none; }
.ct-loc-panel { display: block; }
.ct-col input[type="text"],
.create-task-dialog #ct-class {
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    width: 100%;
    min-width: 0;
}
.ct-col input[type="text"]:focus,
.create-task-dialog #ct-class:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.create-task-assignee {
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
}
/* DDB field in the create box: the picker's display button fills the
   column and left-aligns like the Assignee trigger / text inputs. */
.create-task-dialog .ddb-display {
    width: 100%;
    min-height: 38px;
    min-width: 0;
    text-align: left;
}
/* Actions live inside the .ct-box grid so the mobile layout can sit them
   on the same row as Class. On desktop they span the full width below
   the field row, divided by a hairline — matching the prior look. */
.ct-actions {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 620px) {
    .create-task-dialog {
        width: calc(100vw - 16px);
        padding: 12px;
    }
    /* Mobile layout per request: the four inputs (Location, Task Name,
       Short Description, Assignee) share the top row; Class + Cancel +
       Create share the second row. Tighter gaps / labels so four
       columns fit a phone without horizontal scroll. */
    .ct-box {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px 6px;
        padding: 10px 8px;
    }
    /* Narrow columns: let labels wrap instead of bleeding into the next
       column. */
    .ct-label {
        font-size: 10px;
        letter-spacing: 0.02em;
        white-space: normal;
        line-height: 1.2;
        /* Reserve two lines so single- and two-line labels keep their
           controls on the same baseline across the row. */
        min-height: 2.4em;
        display: flex;
        align-items: flex-end;
    }
    .ct-col input[type="text"],
    .create-task-dialog #ct-class { padding: 7px 6px; }
    .create-task-assignee { padding: 4px 6px; }
    /* Location: hide the inline accordion, show the compact trigger, and
       open the picker as a floating dropdown panel (positioned to the
       viewport by JS) — so it behaves like the Class select. */
    .create-task-dialog .ct-loc-trigger { display: flex; }
    .ct-loc-panel {
        display: none;
        z-index: 80;
        width: min(300px, calc(100vw - 24px));
        max-height: 50vh;
        overflow: auto;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        padding: 6px;
    }
    .ct-loc-panel.is-open { display: block; }
    .ct-loc-panel .loc-picker {
        border: none;
        padding: 0;
        max-height: none;
        max-width: none;
    }
    /* Task Name dropdown: break out of the narrow column to a usable
       width (positioned to the viewport by JS, same as Location). */
    .ct-tn-panel {
        right: auto;
        width: min(300px, calc(100vw - 24px));
    }
    /* DDB + Class share row 2 (one column each); the action buttons drop
       to a full-width row 3 below them. */
    .ct-col-ddb   { grid-column: 1 / 2; }
    .ct-col-class { grid-column: 2 / 3; }
    .ct-actions {
        grid-column: 1 / -1;
        align-self: end;
        margin-top: 4px;
        padding-top: 0;
        border-top: none;
    }
    /* The DDB picker button matches the Class control's compact height. */
    .create-task-dialog .ddb-display { padding: 7px 6px; min-height: 0; }
    .ct-actions button {
        flex: 1 1 0;
        white-space: nowrap;
    }
}

/* Settings */
.subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 14px;
    overflow-x: auto;
}
.subtab {
    font: inherit;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--color-muted);
    white-space: nowrap;
}
.subtab[aria-selected="true"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
@media (min-width: 721px) {
    #page-settings .subtab-app-admin-start {
        margin-left: auto;
    }
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    overflow: hidden;
}
.settings-table th, .settings-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    vertical-align: middle;
}
.settings-table th {
    background: #fafaf9;
    font-weight: 600;
    color: var(--color-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0;
}
.settings-table tbody tr:last-child td { border-bottom: 0; }
.settings-table input, .settings-table select {
    font: inherit;
    padding: 5px 7px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    width: 100%;
    background: var(--color-surface);
}
.settings-table .col-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
.settings-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}
.settings-section-head h2 {
    margin: 0;
    font-size: 18px;
}
.settings-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.settings-add-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.2fr) minmax(110px, .7fr) minmax(130px, .8fr) minmax(130px, .8fr) minmax(140px, .8fr) auto auto auto;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}
.settings-add-row input {
    font: inherit;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.settings-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
}
.settings-add-row .settings-inline-check input {
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
}
.settings-org-msg {
    min-height: 18px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-muted);
}
.settings-org-msg.err { color: var(--color-danger); }
.settings-profile-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
    max-width: 760px;
}
.settings-profile-field input {
    width: 100%;
}
.settings-profile-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}
.settings-profile-status {
    min-height: 18px;
    font-size: 13px;
    color: var(--color-muted);
}
.edition-account-panel,
.org-account-viewer,
.edition-editor {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 12px;
    margin: 12px 0;
}
.edition-account-panel {
    display: grid;
    grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.edition-account-panel h3,
.org-account-viewer h3 {
    margin: 0 0 4px;
    font-size: 15px;
}
.edition-account-viewer,
.org-account-viewer {
    display: grid;
    grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.org-account-viewer {
    grid-template-columns: minmax(180px, .35fr) minmax(220px, .35fr) minmax(0, 1fr);
}
.edition-account-assign {
    display: flex;
    gap: 8px;
    align-items: center;
}
.edition-account-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 10px;
    margin: 0;
    font-size: 13px;
}
.edition-account-meta dt {
    color: var(--color-muted);
    font-weight: 600;
}
.edition-account-meta dd { margin: 0; }
.edition-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}
.edition-editor-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}
.edition-editor-fields {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(120px, .5fr) minmax(180px, 1.2fr) auto;
    gap: 8px;
    align-items: center;
}
.edition-editor-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.edition-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.edition-page-option {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px;
    margin: 0;
    min-width: 0;
}
.edition-page-check,
.edition-subpage-list label {
    display: flex;
    align-items: center;
    gap: 7px;
}
.edition-page-check {
    font-weight: 700;
}
.edition-subpage-list {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding-left: 6px;
    font-size: 13px;
}
.edition-page-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
}
.data-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.data-control-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 96px;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.data-control-section h2 {
    margin: 0 0 4px;
    font-size: 16px;
}
.data-control-section p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
}
.data-equipment-settings {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
}
.data-site-settings {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
}
.data-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.data-section-head h2 {
    margin: 0 0 4px;
    font-size: 17px;
}
.data-section-head p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
}
.equipment-group-add {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(110px, 0.55fr) minmax(180px, 1.2fr) auto;
    gap: 8px;
    align-items: center;
    flex: 1 1 480px;
    max-width: 680px;
}
.site-group-add {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(140px, 0.7fr) minmax(180px, 1.2fr) auto;
    gap: 8px;
    align-items: center;
}
.equipment-group-add input,
.equipment-group-add select,
.site-group-add input,
.site-group-add select,
.site-group-fields input,
.site-group-fields select,
.site-field-add input,
.site-field-add select,
.site-field-row input,
.site-field-row select,
.site-location-toolbar select,
.site-info-value-input,
.equipment-group-fields input,
.equipment-group-fields select,
.equipment-root-add input,
.equipment-node-row input,
.equipment-inline-add input {
    min-width: 0;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
}
.site-group-list {
    display: grid;
    gap: 8px;
}
.site-group {
    display: grid;
    gap: 10px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.site-group-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.site-group-fields {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(140px, 0.55fr) minmax(180px, 1fr);
    gap: 8px;
    min-width: 0;
}
.site-group-fields [data-site-group-field="name"] {
    font-weight: 700;
}
.site-group-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.site-settings-panel {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
}
.site-settings-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 400;
}
.site-settings-panel > summary::-webkit-details-marker {
    display: none;
}
.site-settings-panel > summary::after {
    content: "▸";
    color: var(--color-muted);
    font-size: 14px;
}
.site-settings-panel[open] > summary {
    border-bottom: 1px solid var(--color-border);
}
.site-settings-panel[open] > summary::after {
    content: "▾";
}
.site-settings-panel-body {
    display: grid;
    gap: 10px;
    padding: 10px;
}
.site-group > .site-settings-panel {
    margin-left: 24px;
    width: calc(100% - 24px);
    max-width: 1080px;
}
.site-location-toolbar,
.site-field-toolbar,
.site-field-import-actions {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.site-location-toolbar label {
    display: grid;
    gap: 4px;
    min-width: min(220px, 100%);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}
.site-location-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.site-location-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px;
    max-height: 360px;
    overflow: auto;
}
.site-location-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.site-location-check[hidden] {
    display: none;
}
.site-location-check input {
    margin-top: 2px;
}
.site-location-check span {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.site-location-check strong,
.site-location-check small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-location-check small {
    color: var(--color-muted);
    font-size: 11px;
}
.site-field-add {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.7fr) minmax(150px, 0.8fr) auto;
    gap: 8px;
    align-items: center;
    flex: 1 1 420px;
}
.site-field-list {
    display: grid;
    gap: 6px;
}
.site-field-row {
    display: grid;
    grid-template-columns: 32px minmax(140px, 1fr) minmax(120px, 0.7fr) minmax(150px, 0.8fr) auto auto auto;
    gap: 8px;
    align-items: center;
}
.site-field-calculation {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(64px, 0.3fr) minmax(150px, 1fr);
    gap: 8px;
    min-width: 0;
}
.site-field-order-actions {
    display: flex;
    gap: 4px;
}
.site-field-move-handle,
.site-field-order-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
}
.site-field-move-handle {
    cursor: grab;
}
.site-field-move-handle:active {
    cursor: grabbing;
}
.site-field-row.is-dragging {
    opacity: 0.55;
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}
.site-info-section {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.site-log-section {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.site-location-details {
    display: grid;
    gap: 10px;
    padding: 4px 0 10px;
}
.site-location-details .site-info-section,
.site-location-details .site-log-section {
    margin-top: 0;
}
.site-info-group-list,
.site-log-group-list {
    display: grid;
    gap: 10px;
}
.site-info-group,
.site-log-group {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.site-info-group-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.site-info-group-head h3 {
    margin: 0 0 3px;
    font-size: 15px;
}
.site-info-group-head p,
.site-info-group-head span {
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
}
.site-info-table-wrap {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.site-log-group > .site-info-table-wrap,
.site-details-lazy .site-log-group > .site-info-table-wrap,
.site-log-site > .site-info-table-wrap {
    max-height: min(70vh, 620px);
}
.site-info-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.site-info-table th,
.site-info-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}
.site-info-table th:last-child,
.site-info-table td:last-child {
    border-right: 0;
}
.site-info-table tr:last-child th,
.site-info-table tr:last-child td {
    border-bottom: 0;
}
.site-info-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.site-info-table tbody th {
    min-width: 150px;
    background: #fcfcfd;
    font-weight: 700;
}
.site-log-table thead th {
    z-index: 3;
}
.site-log-table thead th:first-child,
.site-log-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--color-border);
}
.site-log-table thead th:first-child {
    z-index: 4;
}
.site-log-table.has-reference-column .site-log-field-column {
    min-width: 190px;
    width: 190px;
    max-width: 190px;
}
.site-log-table.has-reference-column .site-log-reference-column {
    position: sticky;
    left: 190px;
    z-index: 2;
    min-width: 150px;
    width: 150px;
    max-width: 150px;
    background: #fcfcfd;
    box-shadow: 1px 0 0 var(--color-border);
}
.site-log-table.has-reference-column thead .site-log-reference-column {
    z-index: 4;
    background: #f8fafc;
}
.site-log-reference-cell {
    padding: 5px 7px;
}
.site-log-reference-input {
    background: #f3f4f6;
}
.site-log-reference-empty {
    display: block;
    min-height: 30px;
}
.site-info-table td {
    min-width: 150px;
}
.site-info-value-input {
    min-width: 132px;
}
.site-info-value-input[readonly] {
    background: #f3f4f6;
    color: var(--color-text);
    cursor: default;
}
.site-log-site-list {
    display: grid;
    gap: 8px;
}
.site-log-site {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
}
.site-log-site > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 9px 10px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}
.site-log-site > summary::-webkit-details-marker {
    display: none;
}
.site-log-site > summary::after {
    content: "▸";
    color: var(--color-muted);
}
.site-log-site[open] > summary {
    border-bottom: 1px solid var(--color-border);
}
.site-log-site[open] > summary::after {
    content: "▾";
}
.site-log-site > summary small {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}
.site-log-site > .empty-state,
.site-log-site > .site-info-table-wrap {
    margin: 10px;
}
.site-log-import-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1.1fr);
    gap: 12px;
    align-items: start;
}
.site-log-import-picker {
    display: grid;
    gap: 8px;
}
.site-log-import-picker label {
    display: grid;
    gap: 4px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}
.site-log-site-picker {
    display: grid;
    gap: 6px;
    max-height: 360px;
    overflow: auto;
    padding-right: 2px;
}
.site-log-import-field,
.site-log-import-lease {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.site-log-import-field[hidden],
.site-log-import-lease[hidden] {
    display: none;
}
.site-log-import-field > summary,
.site-log-import-lease > summary {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}
.site-log-import-children {
    display: grid;
    gap: 5px;
    padding: 0 8px 8px;
}
.site-log-site-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.site-log-site-choice[hidden] {
    display: none;
}
.site-log-site-choice:hover,
.site-log-site-choice.is-selected {
    border-color: var(--color-primary);
    background: #ecfeff;
}
.site-log-site-choice span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-log-site-choice small {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: 11px;
}
.site-log-import-actions {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.equipment-group-list {
    display: grid;
    gap: 10px;
}
.equipment-group {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.equipment-group-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.equipment-group-fields {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(110px, 0.45fr) minmax(180px, 1fr);
    gap: 8px;
    min-width: 0;
}
.equipment-group-fields [data-group-field="name"] {
    font-weight: 700;
}
.equipment-group-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.equipment-group-actions .btn-secondary,
.site-group-actions .btn-secondary,
.equipment-section-actions .btn-secondary,
.equipment-node-row .btn-secondary,
.equipment-inline-add .btn-secondary {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
}
.equipment-danger {
    color: var(--color-danger);
    border-color: #fecaca;
}
.equipment-danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}
.equipment-root-add {
    display: grid;
    grid-template-columns: max-content minmax(180px, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
}
.equipment-group-settings {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
    padding: 10px;
}
.equipment-settings-section {
    display: grid;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
    padding: 10px;
}
.equipment-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.equipment-section-head h3 {
    margin: 0;
}
.equipment-settings-section .equipment-section-head h3 {
    margin: 0;
}
.equipment-section-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.equipment-settings-panel.equipment-settings-section {
    display: block;
    overflow: hidden;
    padding: 0;
}
.equipment-settings-panel > summary.equipment-settings-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}
.equipment-settings-panel > summary.equipment-settings-summary::-webkit-details-marker {
    display: none;
}
.equipment-settings-panel > summary.equipment-settings-summary::after {
    content: "▸";
    color: var(--color-muted);
    font-size: 14px;
}
.equipment-settings-panel[open] > summary.equipment-settings-summary {
    border-bottom: 1px solid var(--color-border);
}
.equipment-settings-panel[open] > summary.equipment-settings-summary::after {
    content: "▾";
}
.equipment-settings-panel > summary.equipment-settings-summary h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
}
.equipment-settings-panel-body {
    display: grid;
    gap: 10px;
    padding: 10px;
}
.equipment-group > .equipment-settings-panel {
    margin-left: 24px;
    width: calc(100% - 24px);
    max-width: 1080px;
}
.equipment-import-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.equipment-import-label input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.equipment-import-label.is-busy {
    opacity: 0.65;
    pointer-events: none;
}
.equipment-import-status {
    min-width: 120px;
    max-width: 320px;
    align-self: center;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-muted);
}
.equipment-import-status[data-kind="success"] {
    color: #047857;
}
.equipment-import-status[data-kind="error"] {
    color: var(--color-danger);
}
.equipment-group-settings h3,
.equipment-settings-section h3 {
    margin: 0 0 8px;
    font-size: 14px;
}
.equipment-settings-grid {
    display: grid;
    gap: 10px;
}
.equipment-settings-dropdown {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.equipment-settings-dropdown summary {
    cursor: pointer;
    padding: 9px 10px;
    font-weight: 400;
}
.equipment-settings-pair {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 10px;
}
.equipment-location-list {
    display: grid;
    gap: 2px;
    padding: 0 10px 10px;
}
.equipment-location-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 70px 44px;
    gap: 8px;
    align-items: center;
    min-height: 34px;
    padding-left: calc(var(--depth, 0) * 16px);
}
.equipment-location-row.is-location-heading {
    grid-template-columns: 1fr;
    min-height: 30px;
}
.equipment-location-heading {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
    font-weight: 700;
}
.equipment-location-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.equipment-location-row label span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-location-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.equipment-check-list {
    display: grid;
    gap: 7px;
    padding: 0 10px 10px;
}
.equipment-check-list label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
}
.equipment-check-list input[type="checkbox"],
.equipment-check-list input[type="radio"] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.equipment-tracking-list {
    display: grid;
    gap: 4px;
    padding: 0 10px 10px;
}
.equipment-tracking-heading,
.equipment-tracking-option-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 72px 64px;
    gap: 8px;
    align-items: center;
}
.equipment-tracking-heading {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-tracking-heading span:not(:first-child) {
    text-align: center;
}
.equipment-tracking-option-name,
.equipment-tracking-placement {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    min-width: 0;
}
.equipment-tracking-option-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-tracking-placement {
    justify-content: center;
    color: var(--color-muted);
    font-size: 12px;
}
.equipment-tracking-list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.equipment-location-row select,
.equipment-node-row select,
.equipment-inline-add select,
.equipment-service-add select {
    min-width: 0;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
}
.equipment-location-count {
    color: var(--color-muted);
    font-size: 12px;
    text-align: right;
}
.equipment-settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}
.equipment-kind-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f5f5f4;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.equipment-tree {
    display: grid;
    gap: 8px;
}
.equipment-service-add {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
    gap: 8px;
    align-items: center;
}
.equipment-service-add input {
    min-width: 0;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
}
.equipment-service-interval-field {
    position: relative;
    min-width: 0;
}
.equipment-service-interval-field input {
    padding-right: 60px;
}
.equipment-service-interval-unit {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 52px;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-service-interval-unit[hidden] { display: none; }
.equipment-service-list {
    display: grid;
    gap: 10px;
}
.equipment-service-area {
    display: grid;
    gap: 6px;
}
.equipment-service-area h4 {
    margin: 0;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-service-table-wrap {
    overflow-x: auto;
}
.equipment-service-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    background: var(--color-surface);
}
.equipment-service-table th,
.equipment-service-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}
.equipment-service-table th {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-node {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding-left: 10px;
    border-left: 2px solid #e7e5e4;
}
.equipment-node-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}
.equipment-node-row > input[data-item-field="name"] {
    flex: 1 1 170px;
    max-width: 280px;
}
.equipment-node-row > input[data-item-field="abbreviation"] {
    flex: 0 0 78px;
    max-width: 86px;
}
.equipment-move-btn,
.equipment-node-toggle {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: grab;
    font: inherit;
    line-height: 1;
}
.equipment-grip {
    display: inline-block;
    width: 14px;
    height: 18px;
    background-image: radial-gradient(currentColor 1.6px, transparent 1.8px);
    background-size: 7px 6px;
    background-position: 0 0;
    opacity: 0.85;
}
.equipment-node-toggle {
    cursor: pointer;
    font-size: 15px;
}
.equipment-node-toggle:disabled {
    cursor: default;
    opacity: 0.35;
}
.equipment-move-btn:active {
    cursor: grabbing;
}
.equipment-node.is-dragging {
    opacity: 0.55;
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}
.equipment-child-adds {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 18px;
}
.equipment-inline-add {
    display: flex;
    gap: 6px;
    align-items: center;
    max-width: 520px;
    min-width: 0;
    margin-left: 78px;
    padding: 8px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
}
.equipment-inline-add input {
    flex: 1 1 180px;
}
.equipment-inline-add[hidden] {
    display: none;
}
.equipment-default-fields {
    margin-left: 78px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
}
.equipment-node-row > .equipment-default-fields {
    flex: 0 0 auto;
    margin-left: 0;
}
.equipment-node-row > .equipment-default-fields[open] {
    flex: 1 1 100%;
    margin-left: 78px;
}
.equipment-default-fields[hidden] {
    display: none;
}
.equipment-default-fields summary {
    cursor: pointer;
    padding: 8px 10px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-default-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    padding: 0 10px 10px;
}
.equipment-default-field {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}
.equipment-default-field.is-wide {
    grid-column: span 2;
}
.equipment-default-field input,
.equipment-default-field textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
    color: var(--color-text);
}
.equipment-default-field textarea {
    resize: vertical;
}
.equipment-header-only {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-muted);
    font-size: 12px;
    white-space: nowrap;
}
.equipment-header-only input {
    width: 16px;
    height: 16px;
}
.equipment-node-spacer {
    flex: 1 1 220px;
    min-width: 0;
}
.equipment-node-children {
    display: grid;
    gap: 8px;
    margin-left: 18px;
}
.equipment-node-children[hidden] {
    display: none;
}
.equipment-detail-row > td {
    padding-top: 0;
    background: #fafafa;
}
.equipment-detail-stack {
    display: grid;
    gap: 8px;
}
.equipment-row-dropdown {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.equipment-row-dropdown summary {
    cursor: pointer;
    padding: 8px 10px;
    font-weight: 700;
}
.equipment-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px;
}
.equipment-info-stack {
    display: grid;
    gap: 12px;
}
.equipment-info-grid div {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
}
.equipment-info-grid dt {
    margin: 0 0 3px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-info-grid dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
}
.equipment-row-tracking {
    display: grid;
    gap: 3px;
    min-width: 96px;
    color: var(--color-muted);
    font-size: 11px;
}
.equipment-row-tracking input {
    min-width: 88px;
}
.equipment-row-tracking.is-derived input {
    background: #f5f5f4;
    color: var(--color-muted);
}
#settings-equipment .settings-table {
    overflow: visible;
}
.equipment-location-picker {
    position: relative;
    min-width: 220px;
    max-width: 320px;
}
.equipment-location-picker > summary {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-location-picker[open] > summary {
    border-color: var(--color-accent);
}
.equipment-location-picker-menu {
    position: absolute;
    z-index: 35;
    top: calc(100% + 4px);
    left: 0;
    width: min(420px, 80vw);
    max-height: 320px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    background: var(--color-surface);
}
.equipment-location-branch {
    border: 1px solid #edeae7;
    border-radius: var(--radius);
    background: #fafafa;
}
.equipment-location-branch + .equipment-location-branch {
    margin-top: 6px;
}
.equipment-location-branch summary {
    padding: 7px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}
.equipment-location-branch-body,
.equipment-location-site-list {
    display: grid;
    gap: 5px;
    padding: 0 7px 7px 14px;
}
.equipment-location-lease {
    background: var(--color-surface);
}
.equipment-location-site-option {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 6px 7px;
    border-radius: var(--radius);
    cursor: pointer;
}
.equipment-location-site-option:hover {
    background: #f5f5f4;
}
.equipment-location-site-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-component-value.is-derived input {
    background: #f5f5f4;
    color: var(--color-muted);
}
.equipment-row-tracking-main {
    min-width: 76px;
}
.equipment-row-tracking-main input {
    min-width: 74px;
    width: 86px;
}
.equipment-template-tree {
    display: grid;
    gap: 8px;
    padding: 0 10px 10px;
}
.equipment-component-log-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 10px 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
}
.equipment-component-log-tools h4 {
    margin: 0;
    font-size: 13px;
}
.equipment-component-log-tools p {
    margin: 2px 0 0;
    color: var(--color-muted);
    font-size: 12px;
}
.equipment-component-log-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.equipment-component-unit {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.equipment-component-unit.is-header-only {
    background: #fafafa;
}
.equipment-component-unit summary {
    cursor: pointer;
    list-style-position: inside;
}
.equipment-component-unit.is-static {
    border-style: dashed;
}
.equipment-component-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
}
.equipment-component-summary .equipment-component-name-cell {
    flex: 0 1 360px;
    min-height: 42px;
    padding-left: calc(8px + (var(--depth, 0) * 18px));
}
.equipment-component-main-fields {
    display: grid;
    grid-template-columns: repeat(var(--main-cols, 1), minmax(86px, 104px));
    gap: 6px;
    align-items: center;
    justify-content: start;
    min-width: 0;
}
.equipment-component-main-fields .equipment-component-value {
    display: grid;
    gap: 2px;
    min-height: 34px;
    padding: 3px 0;
    border-left: 0;
    color: var(--color-muted);
    font-size: 10px;
}
.equipment-component-main-fields .equipment-component-value input {
    max-width: 104px;
}
.equipment-component-meta {
    margin-right: 10px;
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}
.equipment-component-track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--color-border);
    background: #fff;
}
.equipment-component-name-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--color-border);
    background: #fff;
    font-size: 12px;
}
.equipment-component-name-detail span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-component-name-detail strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
}
.equipment-component-track-grid .equipment-component-value {
    display: grid;
    gap: 3px;
    justify-content: stretch;
    min-height: 0;
    padding: 0;
    border-left: 0;
    color: var(--color-muted);
    font-size: 11px;
}
.equipment-component-track-grid .equipment-component-value input {
    width: 100%;
    max-width: none;
}
.equipment-component-children {
    display: grid;
    gap: 6px;
    padding: 0 8px 8px 18px;
}
.equipment-component-log {
    display: grid;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var(--color-border);
    background: #fafafa;
}
.equipment-component-log h4 {
    margin: 0;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-component-log-list {
    display: grid;
    gap: 4px;
}
.equipment-component-log-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) minmax(120px, 1fr) minmax(90px, 0.7fr) minmax(130px, 0.8fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 12px;
}
.equipment-component-log-row span,
.equipment-component-log-row time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-log-note-btn {
    padding: 4px 8px;
    min-height: 0;
    font-size: 11px;
}
.equipment-miles-log {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--color-border);
}
.equipment-miles-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.equipment-miles-log-head h4 {
    margin: 0;
    font-size: 13px;
}
.equipment-references-btn {
    padding: 5px 9px;
}
.equipment-references-dialog {
    width: min(720px, 92vw);
}
.equipment-references-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.equipment-references-head h2 {
    margin: 0;
}
.equipment-references-dialog pre {
    max-height: 60vh;
    overflow: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.equipment-miles-log-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.equipment-miles-log-actions .btn-secondary {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
}
.equipment-miles-log-table-wrap {
    overflow-x: auto;
}
.equipment-miles-log-table {
    width: 100%;
    max-width: 420px;
    border-collapse: collapse;
    background: var(--color-surface);
}
.equipment-miles-log-table th,
.equipment-miles-log-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.equipment-miles-log-table th {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-component-table {
    display: grid;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.equipment-component-header,
.equipment-component-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) repeat(var(--tracking-cols), minmax(96px, 0.65fr));
    align-items: center;
    min-width: var(--component-min-width, 240px);
}
.equipment-component-table.has-no-tracking .equipment-component-row {
    grid-template-columns: minmax(240px, 1fr);
    min-width: 0;
}
.equipment-component-header {
    border-bottom: 1px solid var(--color-border);
    background: #f5f5f4;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.equipment-component-header span,
.equipment-component-value,
.equipment-component-name-cell {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
}
.equipment-component-header span + span,
.equipment-component-value {
    border-left: 1px solid var(--color-border);
}
.equipment-component-row + .equipment-component-row {
    border-top: 1px solid #edeae7;
}
.equipment-component-row.is-header-only {
    background: #fafafa;
}
.equipment-component-name-cell {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: calc(8px + (var(--depth, 0) * 18px));
}
.equipment-template-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: min(320px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-template-abbreviation {
    display: inline-flex;
    align-items: center;
    min-width: min(120px, 100%);
    max-width: 280px;
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: clamp(12px, calc(16px - (var(--depth, 0) * 1.2px)), 16px);
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-template-name em {
    display: inline-block;
    margin-left: 0;
    color: var(--color-muted);
    font-size: 11px;
    font-style: normal;
}
.equipment-component-value {
    display: flex;
    align-items: center;
    justify-content: center;
}
.equipment-component-value input {
    min-width: 0;
    width: 100%;
    max-width: 90px;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    font-size: 11px;
}
.equipment-component-value.is-empty {
    color: var(--color-muted);
    font-size: 12px;
}
.equipment-template-tree {
    padding: 0 10px 10px;
}
.equipment-component-table {
    display: block;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.equipment-component-toolbar {
    position: sticky;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: fit-content;
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
    background: #fafafa;
}
.equipment-component-toolbar-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.equipment-component-toolbar .btn-secondary {
    padding: 5px 9px;
    font-size: 12px;
}
.equipment-component-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}
.equipment-component-filter select {
    min-width: 150px;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 500;
}
.equipment-component-table .equipment-component-header,
.equipment-component-table .equipment-component-row {
    display: grid;
    grid-template-columns: minmax(300px, 1.45fr) repeat(var(--tracking-cols), minmax(92px, 0.42fr));
    align-items: stretch;
    min-width: var(--component-min-width, 300px);
}
.equipment-component-table.has-no-tracking .equipment-component-header,
.equipment-component-table.has-no-tracking .equipment-component-row {
    grid-template-columns: minmax(300px, 1fr);
    min-width: var(--component-min-width, 300px);
}
.equipment-component-table .equipment-component-header {
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom: 1px solid var(--color-border);
    background: #f5f5f4;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-component-table .equipment-component-header span,
.equipment-component-table .equipment-component-name-cell,
.equipment-component-table .equipment-component-value,
.equipment-component-row-state {
    min-width: 0;
    min-height: 38px;
    padding: 6px 8px;
}
.equipment-component-table .equipment-component-header span + span,
.equipment-component-table .equipment-component-value,
.equipment-component-row-state {
    border-left: 1px solid var(--color-border);
}
.equipment-component-table .equipment-component-header span:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #f5f5f4;
    box-shadow: 1px 0 0 var(--color-border);
}
.equipment-component-body {
    min-width: fit-content;
}
.equipment-component-table .equipment-component-unit {
    --equipment-component-row-bg: var(--color-surface);
    display: block;
    border: 0;
    border-radius: 0;
    background: var(--equipment-component-row-bg);
}
.equipment-component-table .equipment-component-unit + .equipment-component-unit {
    border-top: 1px solid #edeae7;
}
.equipment-component-table .equipment-component-unit:nth-child(even) > summary,
.equipment-component-table .equipment-component-unit:nth-child(even) > .equipment-component-row {
    --equipment-component-row-bg: #fcfcfb;
    background: var(--equipment-component-row-bg);
}
.equipment-component-table .equipment-component-unit.is-header-only > summary,
.equipment-component-table .equipment-component-unit.is-header-only > .equipment-component-row {
    --equipment-component-row-bg: #f7f7f5;
    background: var(--equipment-component-row-bg);
}
.equipment-component-table .equipment-component-unit[hidden] {
    display: none;
}
.equipment-component-table .equipment-component-unit summary {
    display: block;
    padding: 0;
    cursor: pointer;
    list-style: none;
}
.equipment-component-table .equipment-component-unit summary::-webkit-details-marker {
    display: none;
}
.equipment-component-table .equipment-component-unit.is-static summary {
    cursor: default;
}
.equipment-component-table .equipment-component-summary {
    gap: 0;
    padding-right: 0;
    flex-wrap: nowrap;
}
.equipment-component-table .equipment-component-name-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: calc(8px + (var(--depth, 0) * 22px));
    border-left: 4px solid #d6d3d1;
    background: var(--equipment-component-row-bg, var(--color-surface));
    box-shadow: 1px 0 0 var(--color-border);
}
.equipment-component-depth-0 > summary .equipment-component-name-cell,
.equipment-component-depth-0 > .equipment-component-row .equipment-component-name-cell {
    border-left-color: #0f766e;
}
.equipment-component-depth-1 > summary .equipment-component-name-cell,
.equipment-component-depth-1 > .equipment-component-row .equipment-component-name-cell {
    border-left-color: #2563eb;
}
.equipment-component-depth-2 > summary .equipment-component-name-cell,
.equipment-component-depth-2 > .equipment-component-row .equipment-component-name-cell {
    border-left-color: #7c3aed;
}
.equipment-component-depth-3 > summary .equipment-component-name-cell,
.equipment-component-depth-3 > .equipment-component-row .equipment-component-name-cell {
    border-left-color: #a16207;
}
.equipment-component-expander {
    flex: 0 0 16px;
    width: 16px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1;
    text-align: center;
    transition: transform 120ms ease;
}
.equipment-component-unit[open] > summary .equipment-component-expander {
    transform: rotate(90deg);
}
.equipment-component-table .equipment-template-name {
    display: grid;
    gap: 1px;
    min-width: 0;
    max-width: none;
}
.equipment-component-table .equipment-template-abbreviation {
    min-width: 96px;
    max-width: 220px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-component-depth-0 > summary .equipment-template-abbreviation,
.equipment-component-depth-0 > .equipment-component-row .equipment-template-abbreviation {
    font-size: 17px;
}
.equipment-component-depth-1 > summary .equipment-template-abbreviation,
.equipment-component-depth-1 > .equipment-component-row .equipment-template-abbreviation {
    font-size: 15px;
}
.equipment-component-depth-2 > summary .equipment-template-abbreviation,
.equipment-component-depth-2 > .equipment-component-row .equipment-template-abbreviation {
    font-size: 13px;
}
.equipment-component-depth-3 > summary .equipment-template-abbreviation,
.equipment-component-depth-3 > .equipment-component-row .equipment-template-abbreviation {
    font-size: 12px;
}
.equipment-component-table .equipment-template-name em {
    margin-left: 0;
    color: var(--color-muted);
    font-size: 10px;
    font-style: normal;
}
.equipment-component-table .equipment-component-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.equipment-component-table .equipment-component-value input {
    width: 100%;
    max-width: 86px;
    padding: 4px 6px;
    text-align: right;
    font-size: 12px;
}
.equipment-component-table .equipment-component-value.is-long-text input {
    max-width: 100%;
    text-align: left;
}
.equipment-component-table .equipment-component-value.has-alerts {
    gap: 5px;
}
.equipment-component-table .equipment-component-value.has-alerts input {
    max-width: 72px;
}
.equipment-component-alerts {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.equipment-component-alert-label {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: var(--radius);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.equipment-component-alert-label.is-replace {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}
.equipment-component-alert-label.is-inspect {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
}
.equipment-service-tree {
    padding-top: 0;
}
.equipment-service-table .equipment-component-header,
.equipment-service-table .equipment-component-row {
    grid-template-columns:
        minmax(240px, 1.25fr)
        minmax(120px, 0.45fr)
        minmax(190px, 0.8fr);
    min-width: var(--component-min-width, 620px);
}
.equipment-service-table .equipment-component-value {
    justify-content: flex-start;
    color: var(--color-text);
    font-size: 12px;
}
.equipment-service-table .equipment-service-text-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-service-schedule-group + .equipment-service-schedule-group {
    margin-top: 10px;
    border-top: 1px solid var(--color-border);
}
.equipment-service-schedule-heading {
    margin: 0;
    padding: 12px 12px;
    background: #eef2ff;
    color: #1f2937;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}
.equipment-service-area-list {
    display: grid;
    gap: 0;
}
.equipment-service-area-group {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}
.equipment-service-area-group > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 40px;
    padding: 10px 12px;
    cursor: pointer;
    background: #f8fafc;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 900;
    list-style: none;
}
.equipment-service-area-group > summary::-webkit-details-marker {
    display: none;
}
.equipment-service-area-group[open] > summary .equipment-component-expander {
    transform: rotate(90deg);
}
.equipment-service-area-group > summary small {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}
.equipment-service-area-body {
    display: grid;
    gap: 0;
}
.equipment-service-row .equipment-template-abbreviation {
    min-width: 78px;
    max-width: 180px;
    font-size: 13px;
}
.equipment-service-row .equipment-template-name em {
    font-size: 9px;
}
.equipment-service-current-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 6px;
    align-content: center;
}
.equipment-service-current-value .equipment-service-current-label {
    min-width: 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.equipment-service-current-value strong {
    grid-column: 1;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 800;
}
.equipment-service-current-value .equipment-component-alert-label {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}
.equipment-service-log-rowset {
    grid-template-columns: minmax(0, 1fr);
}
.equipment-service-log-row {
    grid-template-columns: minmax(90px, 0.8fr) minmax(120px, 1fr) minmax(130px, 0.8fr) minmax(160px, 1.5fr);
}
.equipment-component-save-state {
    min-width: 34px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
}
.equipment-component-save-state.is-success {
    color: var(--color-accent);
}
.equipment-component-save-state.is-error {
    color: var(--color-danger);
}
.equipment-component-row-state {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--color-muted);
    font-size: 11px;
}
.equipment-component-row-state [data-equipment-component-save-state] {
    min-width: 0;
    color: var(--color-muted);
    font-weight: 800;
}
.equipment-component-row-state [data-equipment-component-save-state].is-success {
    color: var(--color-accent);
}
.equipment-component-row-state [data-equipment-component-save-state].is-error {
    color: var(--color-danger);
}
.equipment-component-detail-hint,
.equipment-component-log-count {
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
    font-weight: 700;
}
.equipment-component-detail-panel {
    display: grid;
    gap: 8px;
    padding: 8px 8px 10px 30px;
    border-top: 1px solid #edeae7;
    background: #fff;
}
.equipment-component-name-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-top: 0;
    background: transparent;
}
.equipment-component-readonly-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    max-width: 420px;
}
.equipment-component-readonly-fields label {
    display: grid;
    gap: 3px;
    margin: 0;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-component-readonly-fields input {
    min-width: 0;
    height: 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #f7f7f5;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
}
.equipment-component-subtable {
    display: grid;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.equipment-component-subtable-header,
.equipment-component-track-grid {
    display: grid;
    grid-template-columns: repeat(var(--sub-cols), minmax(118px, 1fr));
    min-width: var(--subtable-min-width, 118px);
}
.equipment-component-subtable-header {
    border-bottom: 1px solid var(--color-border);
    background: #f7f7f5;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-component-subtable-header span {
    min-width: 0;
    padding: 6px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-component-track-grid {
    gap: 0;
    padding: 0;
    border-top: 0;
}
.equipment-component-track-grid .equipment-component-value {
    min-width: 0;
    border-left: 0;
    border-right: 1px solid var(--color-border);
}
.equipment-component-track-grid .equipment-component-value:last-child {
    border-right: 0;
}
.equipment-component-track-grid .equipment-component-value input {
    max-width: 96px;
}
.equipment-component-track-grid .equipment-component-value.is-long-text input {
    max-width: none;
}
.equipment-component-children {
    display: grid;
    gap: 0;
    padding: 0;
    border: 1px solid #edeae7;
    border-radius: var(--radius);
    overflow: hidden;
}
.equipment-component-log-rowset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.equipment-component-log {
    display: block;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
}
.equipment-component-log > summary {
    padding: 9px 11px;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}
.equipment-component-log-list {
    padding: 0 8px 8px;
}
.equipment-component-log-actions-row {
    padding: 0 8px 8px;
}
.equipment-log-record-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 6px;
    align-items: end;
    padding: 0 8px 8px;
}
.equipment-log-record-form[hidden] {
    display: none;
}
.equipment-log-record-form label {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}
.equipment-log-record-form input,
.equipment-log-record-form select {
    width: 100%;
    min-width: 0;
    font: inherit;
}
.equipment-log-form-wide {
    grid-column: span 2;
}
@media (max-width: 720px) {
    .equipment-group-add,
    .site-group-add,
    .site-group,
    .site-group-header,
    .site-group-fields,
    .site-field-add,
    .site-field-row,
    .site-log-import-layout,
    .equipment-group-header,
    .equipment-group-fields,
    .equipment-root-add,
    .equipment-service-add,
    .equipment-node-row,
    .equipment-inline-add {
        grid-template-columns: 1fr;
    }
    .equipment-group-actions {
        justify-content: flex-start;
    }
    .site-group-actions,
    .site-location-toolbar,
    .site-field-toolbar,
    .site-field-import-actions {
        justify-content: flex-start;
    }
    .site-info-table th,
    .site-info-table td {
        min-width: 128px;
    }
    .site-field-calculation {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
    .equipment-kind-pill {
        justify-content: flex-start;
        min-width: 0;
    }
    .equipment-child-adds,
    .equipment-node-children,
    .equipment-default-fields,
    .equipment-inline-add {
        margin-left: 8px;
    }
    .equipment-node-row > .equipment-default-fields,
    .equipment-node-row > .equipment-default-fields[open] {
        margin-left: 8px;
    }
    .equipment-default-grid {
        grid-template-columns: 1fr;
    }
    .equipment-default-field.is-wide {
        grid-column: auto;
    }
    .equipment-location-row {
        grid-template-columns: minmax(0, 1fr) 64px;
        padding-left: calc(var(--depth, 0) * 10px);
    }
    .equipment-location-count {
        display: none;
    }
    .equipment-settings-pair {
        grid-template-columns: 1fr;
    }
    .site-group > .site-settings-panel,
    .equipment-group > .equipment-settings-panel {
        margin-left: 10px;
        width: calc(100% - 10px);
        max-width: none;
    }
    .equipment-node-row > input[data-item-field="name"] {
        grid-column: auto;
    }
    .equipment-component-table .equipment-component-header,
    .equipment-component-table .equipment-component-row {
        grid-template-columns: minmax(230px, 1.2fr) repeat(var(--tracking-cols), minmax(92px, 0.55fr));
        min-width: var(--component-min-width, 316px);
    }
    .equipment-service-table .equipment-component-header,
    .equipment-service-table .equipment-component-row {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(92px, 0.45fr)
            minmax(150px, 0.85fr);
        min-width: var(--component-min-width, 422px);
    }
    .equipment-component-table.has-no-tracking .equipment-component-header,
    .equipment-component-table.has-no-tracking .equipment-component-row {
        grid-template-columns: minmax(230px, 1fr);
        min-width: var(--component-min-width, 230px);
    }
    .equipment-component-table .equipment-component-name-cell {
        padding-left: calc(8px + (var(--depth, 0) * 12px));
    }
    .equipment-component-detail-panel {
        padding-left: 12px;
    }
    .equipment-component-children {
        padding-left: 0;
    }
    .equipment-component-subtable-header,
    .equipment-component-track-grid {
        grid-template-columns: repeat(var(--sub-cols), minmax(106px, 1fr));
    }
    .equipment-component-log-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .equipment-component-log-rowset {
        grid-template-columns: 1fr;
    }
}
.org-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
}
.org-status.is-active { background: #dcfce7; color: #166534; }
.org-status.is-inactive { background: #f5f5f4; color: var(--color-muted); }
.platform-context-note {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
}
.org-onboarding-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 170px;
}
.org-onboarding-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.25;
}
.org-onboarding-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 2px 5px;
    border-radius: var(--radius);
    font-size: 10px;
    font-weight: 700;
}
.org-onboarding-list small {
    color: var(--color-muted);
    font-size: 11px;
}
.org-onboarding-list .is-ok span { background: #dcfce7; color: #166534; }
.org-onboarding-list .is-missing span { background: #fee2e2; color: #991b1b; }
.org-actions {
    display: grid;
    gap: 6px;
}
.org-password-reset {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 6px;
}
.org-password-reset input {
    min-width: 0;
    width: 100%;
}
.platform-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 10px 0 12px;
}
.platform-status-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 10px 12px;
}
.platform-status-item span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
}
.platform-status-item strong {
    display: block;
    margin-top: 3px;
    font-size: 18px;
}
.platform-warning-list {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
}
.platform-warning-list.is-clear {
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    background: #f0fdf4;
    color: #166534;
    padding: 10px 12px;
}
.platform-warning {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    background: var(--color-surface);
}
.platform-warning strong { font-size: 12px; }
.platform-warning.is-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.platform-warning.is-warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.platform-warning.is-info { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.platform-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr);
    gap: 16px;
}
.platform-dashboard-grid h3 {
    margin: 0 0 8px;
    font-size: 15px;
}
@media (max-width: 760px) {
    .settings-section-head { display: block; }
    .settings-add-row { grid-template-columns: 1fr; }
    .settings-profile-form { grid-template-columns: 1fr; }
    .platform-dashboard-grid { grid-template-columns: 1fr; }
    .settings-head-actions { justify-content: flex-start; margin-top: 8px; }
    .edition-account-panel,
    .edition-account-viewer,
    .org-account-viewer,
    .edition-editor-head,
    .edition-editor-fields {
        grid-template-columns: 1fr;
    }
    .edition-account-assign,
    .edition-editor-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .platform-warning { display: block; }
    .org-password-reset { grid-template-columns: 1fr; }
}

/* Alerts section (Settings → Team → Alerts). Stack of checkbox rows;
 * each row shows the alert's name in bold + the message in muted text
 * underneath so admins know exactly what the user will see. */
.settings-alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.alert-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}
.alert-toggle input[type="checkbox"] {
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    margin: 0;
}
.alert-toggle-name    { font-weight: 600; }
.alert-toggle-message { color: var(--color-muted); }

/* An alert plus its (optional) day-threshold field, stacked. The
 * .settings-alerts container lays these out in a column; the threshold
 * sits under the toggle, indented to line up past the checkbox. */
.alert-item { display: flex; flex-direction: column; gap: 6px; }
.alert-threshold { display: flex; align-items: center; gap: 8px; padding-left: 40px; }
.alert-threshold input[type="number"] { width: 72px; }

/* Admin snooze config block under a snoozeable alert. */
.alert-snooze { display: flex; flex-direction: column; gap: 4px; padding-left: 40px; }
.alert-snooze-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.alert-snooze-days { display: flex; align-items: center; gap: 8px; padding-left: 26px; }
.alert-snooze-days input[type="number"] { width: 72px; }

/* Help page — admin-managed text rendered verbatim with line breaks. */
.help-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
    max-width: 760px;
    padding: 4px 2px;
}

/* Read-only access (View grant without Edit): the row's value editors are
 * rendered as plain text/spans, but show a subtle muted treatment so it's
 * clear they aren't interactive. */
.task-row.is-readonly .status-pill,
.task-row.is-readonly .ddb-readonly,
.task-row.is-readonly .col-assignee { cursor: default; }
.task-row .ddb-readonly { font-size: 13px; color: var(--color-text); }

/* Detail panel read-only: disable the field editors (description, dates,
 * priority, hours, class) for viewers without edit access. Comments and
 * file downloads (outside .detail-grid) stay fully usable. */
.detail-readonly-note {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    color: #78350f;
    border-radius: var(--radius);
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 13px;
}
.task-detail.is-readonly .detail-grid input,
.task-detail.is-readonly .detail-grid textarea,
.task-detail.is-readonly .detail-grid select,
.task-detail.is-readonly .detail-grid button {
    pointer-events: none;
    opacity: 0.6;
}

/* Task-row alert tab. Tiny yellow ribbon in the upper-left of the row.
 * Position absolute against the row's relative container so it overlays
 * the location column edge. Click → opens the popover below. */
.task-row { position: relative; }
.alert-tab {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    background: #fde68a;            /* yellow-300 */
    color: #78350f;                  /* amber-900 */
    border: 1px solid #f59e0b;       /* amber-500 */
    border-radius: 2px;
    padding: 1px 3px;
    cursor: pointer;
    z-index: 2;
}
.alert-tab:hover  { background: #fcd34d; }
.alert-tab:focus  { outline: 2px solid #b45309; outline-offset: 1px; }
/* Transient "just created" tab — small blue square with an N. Same
   upper-left anchor as the alert tab; when a row has both, this one
   tucks just below so neither is hidden. Non-interactive (it's only a
   cue), so no hover/cursor styling. */
.new-task-tab {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    background: #2563eb;             /* blue-600 */
    color: #fff;
    border: 1px solid #1d4ed8;       /* blue-700 */
    border-radius: 2px;
    padding: 1px 3px;
    z-index: 2;
    pointer-events: none;
}
.new-task-tab-stacked { top: 14px; }
.task-row-form-indicator {
    position: absolute;
    left: 5px;
    bottom: 5px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.task-row-form-indicator:hover { filter: brightness(0.97); }
.task-row-form-indicator:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.task-row-form-indicator[disabled] {
    cursor: wait;
    opacity: 0.7;
}
.task-row.task-list-row.has-task-forms .task-row-bottom { padding-left: 36px; }
.task-row.has-task-forms:not(.task-list-row) { padding-left: 38px; }
.task-form-mini-icon {
    position: relative;
    display: inline-block;
    width: 11px;
    height: 14px;
    border: 1.7px solid currentColor;
    border-radius: 2px;
    background: currentColor;
    box-sizing: border-box;
}
.task-form-mini-icon::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 3px;
    height: 1.5px;
    background: #fff;
    box-shadow: 0 3px 0 #fff, 0 6px 0 #fff;
}
.task-form-mini-icon::after {
    content: "";
    position: absolute;
    top: -1.7px;
    right: -1.7px;
    width: 5px;
    height: 5px;
    border-left: 1.7px solid #fff;
    border-bottom: 1.7px solid #fff;
    background: #eff6ff;
}
.task-row-form-indicator.is-complete {
    border-color: #15803d;
    background: #16a34a;
    color: #fff;
}
.task-row-form-indicator.is-complete .task-form-mini-icon::after { background: #16a34a; }
.task-row-form-indicator.is-complete::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(40deg);
}
.alert-popover {
    position: absolute;
    top: 16px;
    left: 1px;
    z-index: 10;
    min-width: 220px;
    max-width: 320px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: #78350f;
    font-size: 13px;
}
.alert-popover ul { margin: 0; padding-left: 16px; }
.alert-popover li + li { margin-top: 4px; }
.alert-snooze-btn {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 7px;
    background: #fff;
    color: #78350f;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    cursor: pointer;
}
.alert-snooze-btn:hover:not(:disabled) { background: #fef3c7; }
.alert-snooze-btn:disabled { opacity: .6; cursor: default; }

/* Production page (Measurement → Production).
 *
 * Pivot table: leases down the left (sticky/frozen), dates across the
 * top with the most recent column nearest the left edge so older days
 * scroll off to the right. The wrapping div owns the horizontal scroll
 * so the sticky lease column anchors against the viewport edge instead
 * of the table cell.
 */
.prod-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 4px 10px;
}
.prod-toolbar .seg-btn { font-size: 12px; padding: 4px 10px; }
.prod-groupby { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-muted); }
.prod-range   { font-size: 12px; color: var(--color-muted); margin-left: auto; }
.chemical-toolbar {
    align-items: end;
}
.chemical-month-picker {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--color-muted);
    font-size: 12px;
}
.chemical-month-picker input {
    min-height: 32px;
}
.chemical-total {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--color-surface);
    font-size: 12px;
    font-weight: 700;
}
.chemical-recon-list {
    display: grid;
    gap: 14px;
}
.chemical-area-section {
    display: grid;
    gap: 8px;
}
.chemical-area-section h3 {
    margin: 4px 0 0;
    font-size: 16px;
}
.chemical-tank-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}
.chemical-tank-row summary {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) minmax(86px, 0.55fr) minmax(110px, 0.9fr) repeat(3, minmax(86px, 0.65fr)) minmax(120px, auto);
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    cursor: pointer;
    font-size: 13px;
}
.chemical-tank-title {
    font-weight: 700;
}
.chemical-status {
    justify-self: end;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
}
.chemical-status.is-balanced { color: #166534; background: #dcfce7; }
.chemical-status.is-missing { color: #92400e; background: #fffbeb; }
.chemical-status.is-variance { color: #991b1b; background: #fee2e2; }
.chemical-reading-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 8px;
    padding: 0 10px 10px;
}
.chemical-reading-grid div {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 7px 8px;
    background: #fbfcfe;
}
.chemical-reading-grid span {
    display: block;
    color: var(--color-muted);
    font-size: 11px;
}
.chemical-reading-grid strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.chemical-well-table-wrap {
    margin: 0 10px 10px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.chemical-well-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    font-size: 12px;
}
.chemical-well-table th,
.chemical-well-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 7px 8px;
    text-align: left;
    vertical-align: top;
}
.chemical-well-table th {
    background: var(--color-bg);
    color: var(--color-muted);
    font-weight: 700;
}
.chemical-setup-panel {
    display: grid;
    gap: 10px;
    margin: 0 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px;
    background: #fbfcfe;
}
.chemical-setup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.chemical-setup-head h3 {
    margin: 0;
    font-size: 15px;
}
.chemical-setup-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.chemical-setup-area-list {
    display: grid;
    gap: 10px;
}
.chemical-setup-area {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    overflow: hidden;
}
.chemical-setup-area summary {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}
.chemical-setup-area-meta {
    display: grid;
    grid-template-columns: minmax(180px, 320px) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    padding: 0 10px 10px;
}
.chemical-setup-area-meta label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--color-muted);
    font-size: 12px;
}
.chemical-setup-area-meta span {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.chemical-setup-tanks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 10px 10px;
}
.chemical-setup-tank {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 118px minmax(120px, 1fr) 104px 30px;
    gap: 8px;
    align-items: end;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px;
    background: #fbfcfe;
}
.chemical-setup-tank label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--color-muted);
    font-size: 12px;
}
.chemical-setup-tank .btn-outline {
    min-width: 0;
    height: 30px;
    padding: 0;
}
.chemical-setup-source-actions {
    padding: 0 10px 10px;
}
.chemical-setup-table-wrap {
    margin: 0 10px 10px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.chemical-setup-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 12px;
}
.chemical-setup-table th,
.chemical-setup-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 6px 7px;
    text-align: left;
    vertical-align: middle;
}
.chemical-setup-table th {
    background: var(--color-bg);
    color: var(--color-muted);
    font-weight: 700;
}
.chemical-setup-table th:first-child,
.chemical-setup-table td:first-child {
    width: 52px;
    text-align: center;
}
.chemical-setup-table tr:not(.is-selected) td {
    color: var(--color-muted);
    background: #f8fafc;
}
.chemical-setup-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
.chemical-setup-treatment-list {
    display: grid;
    gap: 5px;
}
.chemical-setup-treatment-line {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 72px minmax(92px, max-content) 34px;
    gap: 5px;
    align-items: center;
}
.chemical-setup-not-circulate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: var(--color-text);
    font-size: 11px;
    font-weight: 700;
}
.chemical-setup-not-circulate input[type="checkbox"] {
    width: 16px;
    height: 16px;
}
.chemical-setup-treatment-line .btn-outline {
    min-width: 0;
    padding: 5px 0;
}
.chemical-setup-add-treatment {
    margin-top: 6px;
    padding: 5px 8px;
    font-size: 12px;
}
.chemical-setup-site-cell {
    display: grid;
    grid-template-columns: minmax(140px, 0.85fr) minmax(150px, 1fr);
    gap: 7px;
    align-items: center;
}
.chemical-setup-site-title {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}
.chemical-setup-site-type {
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 1px 5px;
    color: var(--color-muted);
    background: var(--color-bg);
    font-size: 10px;
    font-weight: 700;
}

.chemical-change-log {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    overflow: hidden;
}
.chemical-change-log summary {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}
.chemical-change-log-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--color-border);
}
.chemical-change-log-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 12px;
}
.chemical-change-log-table th,
.chemical-change-log-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 6px 7px;
    text-align: left;
    vertical-align: top;
}
.chemical-change-log-table th {
    background: var(--color-bg);
    color: var(--color-muted);
    font-weight: 700;
}

.chemical-no-rotator {
    color: var(--color-muted);
    font-size: 12px;
}
.chemical-setup-tank input,
.chemical-setup-tank select,
.chemical-setup-area-meta input,
.chemical-setup-table input:not([type="checkbox"]),
.chemical-setup-table select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 6px 7px;
    background: var(--color-surface);
    font: inherit;
    font-size: 12px;
}
.prod-grid-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.prod-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.prod-grid th, .prod-grid td {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 6px 10px;
    font-size: 13px;
    background: var(--color-surface);
}
.prod-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg);
    font-weight: 600;
    text-align: left;
}
.prod-grid td.prod-col-date, .prod-grid th.prod-col-date { text-align: right; min-width: 80px; white-space: nowrap; }
.prod-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface);
    border-right: 2px solid var(--color-border);
    min-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.prod-grid thead th.sticky-col { z-index: 3; background: var(--color-bg); }
.prod-grid .prod-field-row td { background: var(--color-bg); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.prod-grid .prod-field-row td.sticky-col { background: var(--color-bg); }
.prod-grid .prod-field-total-row td { background: #f4f7fa; font-weight: 600; }
.prod-grid .prod-field-total-row td.sticky-col { background: #f4f7fa; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.prod-grid .prod-grand-row td { background: var(--color-bg); font-weight: 700; border-top: 2px solid var(--color-border); }

.core-metrics-grid .core-metric-name-cell {
    min-width: 180px;
    max-width: 260px;
}
.core-metric-name {
    font-weight: 600;
}
.core-metric-cell {
    width: 88px;
    min-width: 88px;
}
.core-metric-input {
    width: 74px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.core-metric-input:focus {
    background: var(--color-surface);
    border-color: var(--color-accent);
    outline: none;
}
.core-metric-input.is-saving {
    background: #fffbeb;
}
.core-metric-input.is-saved {
    background: #ecfdf5;
}
.core-metrics-empty {
    margin: 12px;
}

/* Events tab — per-lease three-row block (Production, DDB, optional
   Events). Top of each block (the Production row) carries the lease
   abbreviation + a caret button that toggles the Events row. */
.events-grid .events-lease-cell { font-weight: 600; }
.events-grid .events-lease-cell-sub { font-weight: 400; color: var(--color-muted); font-size: 11px; }
.events-grid .events-sub-label { font-style: normal; padding-left: 20px; }
.events-toggle {
    background: transparent;
    border: 0;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0 4px 0 0;
    font-size: 14px;
    line-height: 1;
}
.events-toggle:hover { color: var(--color-accent); }
.events-lease-abbr { vertical-align: baseline; }
.events-lease-count { font-size: 11px; color: var(--color-muted); margin-left: 4px; }
/* Production row keeps the default cell background; DDB row gets a
   faint tint and Events row gets a slightly darker tint so the three
   rows read as a unit — repeated grouping where two of three rows
   share a label cell. */
.events-grid .events-row-ddb td       { background: #fafbfc; }
.events-grid .events-row-events td    { background: #f4f7fa; }
.events-grid .events-row-events td.sticky-col { color: var(--color-muted); font-size: 11px; }
.events-grid .events-cell-with-events { padding: 2px 4px; }
.events-cell-badge {
    display: inline-block;
    padding: 1px 6px;
    margin: 1px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
    /* Now rendered as a <button> so it can be clicked to open the
       task-detail modal. Strip the default button chrome (background
       set by the per-status rules below, font inherited from the
       grid) and show a pointer cursor on hover. */
    font-family: inherit;
    cursor: pointer;
    appearance: none;
}
.events-cell-badge:hover {
    filter: brightness(0.96);
    text-decoration: underline;
}
.events-cell-badge:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.events-status-X    { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.events-status-Next { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
/* Production cell on a day that had at least one event fire — amber
   tint with a left rule so it pops against the otherwise plain
   production row. Tooltip on the cell names the task(s). */
.events-grid .events-row-production td.events-prod-highlight {
    background: #fef3c7;
    box-shadow: inset 2px 0 0 #f59e0b;
    font-weight: 600;
}

/* Tracked button + modal — sits in its own row beneath the toolbar so
   it doesn't crowd the date-range presets. */
.events-actions { margin: 6px 0; }
.tracked-dialog { width: min(860px, 95vw); min-width: 520px; max-width: 95vw; }
.tracked-table-wrap { max-width: 100%; overflow: auto; }
.tracked-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.tracked-table th, .tracked-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.tracked-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.tracked-row-actions, .tracked-row-ddb, .tracked-row-well-test { white-space: nowrap; }
.tracked-row-actions { text-align: right; }
.tracked-row-actions button, .tracked-row-well-test button { font-size: 12px; padding: 4px 10px; }

/* Future-task panel hanging beneath each tracked row. The chevron in
   the leading cell toggles a sub-row whose only cell hosts the panel
   spanning the whole table width. */
.future-toggle {
    background: transparent;
    border: 0;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
}
.future-toggle:hover { color: var(--color-accent); }
.future-sub-cell { background: #fafbfc; padding: 8px 12px; }
.future-panel { display: flex; flex-direction: column; gap: 8px; }
.future-empty { color: var(--color-muted); font-size: 12px; }
.future-list { display: flex; flex-direction: column; gap: 4px; }
.future-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: grab;
}
.future-item:active { cursor: grabbing; }
.future-item-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; flex: 1 1 auto; }
.future-item-meta { color: var(--color-muted); }
.future-item-desc { color: var(--color-text); font-style: italic; }
.future-item-actions { display: flex; align-items: center; gap: 6px; }
.future-item-ddb-fixed { font-size: 12px; color: var(--color-muted); white-space: nowrap; }

/* Leading order badge — the 1-based position. Also doubles as a
   visual drag-handle hint (cursor: grab on the row + a subtle
   "≡"-style appearance here). */
.future-item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    user-select: none;
}

/* Edit button (small, secondary) sits left of add/added so the layout
   reads "fix me → add me" in left-to-right order. */
.btn-future-edit { font-size: 12px; padding: 4px 8px; }

/* Drag state visuals — reuses the same pattern task-list / schedule
   already use for reorder drag (HTML5 + long-press). */
.future-item.dragging { opacity: 0.5; }
.future-item.drop-target-above { box-shadow: 0 -2px 0 var(--color-accent) inset; }
.future-item.drop-target-below { box-shadow: 0  2px 0 var(--color-accent) inset; }
.future-item.drop-over         { box-shadow: 0 0 0 2px var(--color-accent); }
.future-item.long-press-active { background: #eff6ff; }
.future-form-heading { font-weight: 600; font-size: 13px; color: var(--color-text); margin-bottom: 2px; }

/* Promote buttons: red until clicked, green after. Match the small
   secondary-button footprint already used in the table actions cell. */
.btn-future-add,
.btn-future-added {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
}
.btn-future-add        { background: #dc2626; border-color: #b91c1c; color: #fff; }
.btn-future-add:hover  { background: #b91c1c; }
.btn-future-added      { background: #16a34a; border-color: #15803d; color: #fff; cursor: default; }
.btn-future-added[disabled] { opacity: 1; }

.future-actions { display: flex; gap: 6px; }
.future-form-host { margin-top: 6px; }
.future-form {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.future-form-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Default fields (Short desc + Location) hug their content. Only
   fields living inside a row need the 200px flex-basis so the three
   columns size evenly; applying that basis to a standalone field
   inside the column-flex `.future-form` was forcing the field to a
   200 px tall block, which showed up as a big empty gap below the
   short-description input. */
.future-form-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.future-form-row > .future-form-field { flex: 1 1 200px; }
.future-form-field > span { color: var(--color-muted); }
.future-form-field > span em { font-style: normal; opacity: 0.7; }
.future-form-loc {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    max-height: 220px;
    overflow: auto;
    padding: 2px;
    background: var(--color-bg);
}

/* Focused lease+sites picker for the future-candidate form. Header
   names the lease so the user sees the scope; below it, a radio
   per site with the lease itself as the default-checked first row. */
.lease-site-pick-head {
    padding: 2px 6px;
    font-size: 12px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2px;
}
.lease-site-pick-head em { font-style: normal; color: var(--color-muted); }
.lease-site-pick-list { display: flex; flex-direction: column; gap: 2px; }
.lease-site-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
.lease-site-pick:hover { background: var(--color-bg); }
.lease-site-pick em { font-style: normal; color: var(--color-muted); }
.lease-site-pick .muted { color: var(--color-muted); font-size: 11px; }
.lease-site-pick-lease {
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.lease-site-pick-lease:hover { background: #fef3c7; }
.future-form-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* Event-detail dialog: full task detail panel in a modal, opened by
   clicking a badge on the Events grid. Wider than the small dialogs
   since renderTaskDetail lays out a multi-column info grid. */
.event-detail-dialog {
    min-width: min(960px, 92vw);
    max-width: 96vw;
    max-height: 92vh;
}
.event-detail-dialog form { display: flex; flex-direction: column; max-height: 88vh; }
.event-detail-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}
.event-detail-dialog [data-detail-host] { overflow: auto; flex: 1 1 auto; }

/* "Task box" summary at the top of the event-detail dialog — mirrors
   what the user would see on a Tasks-page row, so the dialog is
   self-sufficient (no need to flip to /tasks to see scheduled date,
   short desc, etc.). */
.event-task-box-host { margin-bottom: 12px; flex: 0 0 auto; }
.event-task-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--color-bg);
}
.event-task-box-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 8px;
}
.event-task-box-name { color: var(--color-text); }
.event-task-box-name em { color: var(--color-muted); font-style: normal; }
.event-task-box-fields {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    font-size: 12px;
    margin: 0;
}
.event-task-box-fields dt { color: var(--color-muted); text-align: right; }
.event-task-box-fields dd { margin: 0; color: var(--color-text); }
.event-box-flag {
    display: inline-block;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
    color: #166534;
    line-height: 14px;
}
.event-box-flag-track { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.event-box-flag-tracked-open   { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.event-box-flag-tracked-closed { border-color: #e5e7eb; background: #f3f4f6; color: var(--color-muted); }
.event-box-fx {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
    color: #166534;
}
.prod-grid .prod-grand-row td.sticky-col { background: var(--color-bg); }

/* ---------------------------------------------------------------------
   Reports — toolbar + Hours pivot table
   --------------------------------------------------------------------- */
.reports-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 8px 12px 12px;
}
.reports-toolbar-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-muted); }
.reports-toolbar-field select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.reports-toolbar-field input[type="date"] { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font: inherit; }
.reports-toolbar-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Custom-range pair reads as a single bordered field: both <input
   type=date>s sit inside one rounded shell, separated by an arrow, with
   no per-input "From"/"To" headers. */
.reports-custom-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.reports-custom-range-input {
    border: 0;
    padding: 2px 4px;
    background: transparent;
    font: inherit;
    color: var(--color-text);
    /* iOS keeps date inputs at the OS-controlled minimum width — that's
       fine here; we just want them to sit cleanly inside the shared
       border without their own background or border. */
}
.reports-custom-range-input:focus { outline: none; }
.reports-custom-range-sep { color: var(--color-muted); font-size: 14px; line-height: 1; }
.reports-week-total { font-size: 13px; color: var(--color-muted); margin-left: auto; }

.hours-grid-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    margin: 0 12px 16px;
}
.hours-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.hours-grid th, .hours-grid td {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 6px 10px;
    font-size: 13px;
    background: var(--color-surface);
}
.hours-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--color-bg); font-weight: 600; text-align: left; }
.hours-grid td.hours-col-date, .hours-grid th.hours-col-date { text-align: right; min-width: 80px; white-space: nowrap; }
.hours-grid td.hours-col-total, .hours-grid th.hours-col-total { text-align: right; min-width: 90px; white-space: nowrap; background: #f4f7fa; }
.hours-grid .sticky-col {
    position: sticky; left: 0; z-index: 1; background: var(--color-surface);
    border-right: 2px solid var(--color-border);
    min-width: 220px; max-width: 320px;
}
.hours-grid thead th.sticky-col { z-index: 3; background: var(--color-bg); }
.hours-vendor-row td { background: #fbfbfd; }
.hours-vendor-row td.sticky-col { background: #fbfbfd; font-weight: 600; }
.hours-vendor-toggle { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: inherit; text-align: left; }
.hours-task-row td { background: var(--color-surface); font-size: 12px; }
.hours-task-row .hours-task-name { font-weight: 600; }
.hours-task-row .hours-task-meta { font-size: 11px; color: var(--color-muted); }
.hours-grand-row td { background: var(--color-bg); font-weight: 700; border-top: 2px solid var(--color-border); }
.hours-grand-row td.sticky-col { background: var(--color-bg); }
.recurring-report-grid td.recurring-status-cell,
.recurring-report-grid th.recurring-month-col {
    text-align: center;
    min-width: 92px;
}
.recurring-report-grid .sticky-col-right {
    position: sticky;
    right: 0;
    z-index: 1;
    min-width: 240px;
    max-width: 340px;
    background: var(--color-surface);
    border-left: 2px solid var(--color-border);
}
.recurring-report-grid thead th.sticky-col-right {
    z-index: 3;
    background: var(--color-bg);
    text-align: left;
}
.recurring-task-row td.sticky-col-right { background: #fbfbfd; }
.recurring-task-name { font-weight: 600; }
.recurring-task-meta {
    color: var(--color-muted);
    font-size: 11px;
    margin-top: 2px;
    white-space: normal;
}
.recurring-status-stack {
    display: inline-flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 120px;
}
.recurring-status-pill {
    font-size: 11px;
    min-width: 0;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.2;
}
.recurring-cell-empty { color: var(--color-muted); }

.btn-icon {
    background: none;
    border: 1px solid transparent;
    padding: 4px 8px;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    color: var(--color-muted);
}
.btn-icon:hover { background: #f5f5f4; color: var(--color-text); border-color: var(--color-border); }
.btn-icon.danger:hover { color: var(--color-danger); }

.add-row {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.add-row input, .add-row select {
    font: inherit;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

/* Location tree (legacy classes — kept for any other usage) */
.loc-tree { list-style: none; padding-left: 0; margin: 0; }
.loc-tree ul { list-style: none; padding-left: 22px; margin: 0; border-left: 1px dashed var(--color-border); }
.loc-tree li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.loc-tree .loc-level {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0;
    background: #f5f5f4;
    color: var(--color-muted);
    padding: 1px 6px;
    border-radius: 999px;
}
.loc-tree .loc-name { font-weight: 500; }
.loc-tree .loc-abbr { color: var(--color-muted); font-size: 13px; }
.loc-tree .loc-actions { margin-left: auto; }

/* Inline CSV import error log — surfaced under the Import Tasks
   section so the admin can read row-level rejection reasons without
   opening DevTools. Closed by default for long lists; an <ol> keeps
   row numbers + messages stacked. */
.import-error-log {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    border-radius: var(--radius);
    font-size: 12px;
}
.import-error-log summary { cursor: pointer; color: #991b1b; }
.import-error-list { margin: 8px 0 0 20px; padding: 0; }
.import-error-list li { margin-bottom: 4px; line-height: 1.35; color: #7f1d1d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }

/* Hierarchical editor (Field/Lease/Site, parent/child/grandchild) */
.hier-row {
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    padding: 12px;
    border-radius: var(--radius);
    background: var(--color-surface);
}
.hier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
    flex-wrap: wrap;
}
.hier-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-settings-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
}
.task-settings-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 3px;
    width: fit-content;
    background: var(--color-surface);
}
.task-settings-switcher button {
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: 7px 11px;
}
.task-settings-switcher button.is-active {
    background: var(--color-accent);
    color: #fff;
}
.task-settings-search {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: var(--color-muted);
}
.task-settings-search input {
    width: 100%;
    font: inherit;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.settings-help {
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 12px;
}
.settings-help summary {
    cursor: pointer;
    color: var(--color-text);
    font-weight: 600;
}
.settings-help p { margin: 6px 0 0; line-height: 1.4; }
.task-import-grid {
    display: grid;
    gap: 12px;
}
.task-import-card { margin-bottom: 0; }
.hier-list { margin-top: 4px; }
.hier-item {
    padding: 8px;
    border: 1px solid var(--color-border);
    margin: 6px 0;
    border-radius: var(--radius);
    background: var(--color-surface);
}
.hier-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.hier-item-row input[type="text"],
.hier-item-row select {
    font: inherit;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    flex: 1;
    min-width: 120px;
}
.hier-item-row .btn-outline {
    height: 32px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}
.hier-item-row .btn-outline:hover { border-color: var(--color-accent); }
.hier-item-row .btn-danger-outline { color: #b91c1c; border-color: #fecaca; }
.hier-item-row .btn-danger-outline:hover { background: #fef2f2; border-color: #f87171; }
.row-actions-menu {
    position: relative;
    flex: 0 0 auto;
}
.row-actions-menu > summary {
    list-style: none;
    height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text);
    background: var(--color-surface);
    white-space: nowrap;
}
.row-actions-menu > summary::-webkit-details-marker { display: none; }
.row-actions-menu[open] > summary { border-color: var(--color-accent); }
.row-actions-menu > button,
.row-actions-menu > .btn-outline {
    display: block;
    margin-top: 4px;
    width: 100%;
}
.hier-toggle {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.loc-level-pill {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0;
    background: #f5f5f4;
    color: var(--color-muted);
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.hier-children {
    margin-left: 1.25rem;
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid #f0f0f0;
}
.hier-item.is-collapsed > .hier-children { display: none; }
.hier-item.draft {
    border-style: dashed;
    background: #fffbeb;
}
.hier-item.draft .hier-toggle[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.site-type-assignment {
    min-width: 190px;
    max-width: 260px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}
.site-type-assignment summary {
    cursor: pointer;
    padding: 6px 9px;
    font-size: 12px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-type-assignment select {
    width: calc(100% - 12px);
    margin: 0 6px 6px;
    min-width: 0;
}
.site-type-add {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.site-type-add input,
.site-type-add select {
    font: inherit;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.site-type-groups {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.site-type-category h4 {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--color-muted);
}
.site-type-list {
    display: grid;
    gap: 6px;
}
.site-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 13px;
}

/* Task Name detail panel inside the second-level expand */
.tn-detail {
    background: #fafaf9;
    padding: 8px 10px;
    border-radius: var(--radius);
}
.tn-detail-section {
    border-top: 1px solid var(--color-border);
    padding: 10px 0;
}
.tn-detail-section:first-child { border-top: 0; padding-top: 0; }
.tn-detail-section h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--color-text);
}
.tn-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 8px;
    align-items: end;
}
.tn-detail-grid label,
.tn-check-row label,
.tn-status-grid label,
.tn-forms-block {
    font-size: 12px;
    color: var(--color-muted);
}
.tn-detail-grid label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.tn-detail-grid input,
.tn-detail-grid select,
.tn-detail input,
.tn-detail select {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.tn-detail-wide { grid-column: span 2; }
.tn-check-row,
.tn-status-grid > div,
.tn-form-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    align-items: center;
}
.tn-status-grid {
    display: grid;
    gap: 6px;
    margin: 10px 0;
}
.tn-status-grid strong,
.tn-files-heading {
    font-size: 12px;
    color: var(--color-muted);
}
.tn-forms-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 10px;
    background: var(--color-surface);
}
.tn-forms-block > summary {
    cursor: pointer;
    padding: 8px 10px;
    color: var(--color-text);
}
.tn-form-options {
    border-top: 1px solid var(--color-border);
    padding: 8px 10px;
}
.tn-detail-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}
@media (max-width: 720px) {
    .task-settings-shell { grid-template-columns: 1fr; }
    .task-settings-switcher { width: 100%; }
    .task-settings-switcher button { flex: 1 1 0; }
    #settings-task-names .hier-children {
        margin-left: 0;
        padding-left: 8px;
    }
    .hier-item-row { flex-wrap: wrap; }
    .hier-item-row input[type="text"] { min-width: 0; width: 100%; }
    #settings-task-names .tn-cat-row,
    #settings-task-names .tn-task-row {
        display: grid;
        grid-template-columns: 32px auto minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }
    #settings-task-names .tn-cat-name-input,
    #settings-task-names .tn-name-input {
        grid-column: 1 / -1;
        width: 100%;
    }
    #settings-task-names .tn-abbr-input {
        grid-column: 1 / span 2;
        width: 100%;
    }
    #settings-task-names .tn-cat-row [data-action="add-tn"] {
        grid-column: 1 / span 2;
    }
    #settings-task-names .row-actions-menu {
        justify-self: end;
        grid-column: 3;
    }
    .tn-detail-grid { grid-template-columns: 1fr; }
    .tn-detail-wide { grid-column: auto; }
    .tn-detail-actions .btn-primary { width: 100%; }
    .site-type-add { grid-template-columns: 1fr; }
    .site-type-assignment { max-width: none; width: 100%; }
    /* Block iOS Safari's auto-zoom on input focus. iOS zooms whenever the
       focused field's computed font-size is below 16 px; bumping all form
       controls on mobile sidesteps it without changing desktop styling. */
    input, textarea, select { font-size: 16px; }

    /* Mobile topbar layout. Goal: the page nav gets the FULL topbar
       width on its own row so as many buttons as possible are
       visible before the horizontal-scroll swipe is needed.
       Mechanism: `display: contents` on .topbar-left removes that
       wrapper from the flex layout, so its children (brand + page-
       nav) participate directly in .topbar's flex container alongside
       .topbar-right. .topbar then flex-wraps, and the page-nav gets
       `order: 99` to push it to row 2; on row 1 we end up with the
       brand, the admin's user-switcher (compact), and the top-right-
       corner Sign-out / Return-to-Admin buttons. The --topbar-h JS
       hook keeps the sticky create-strip pinned flush against
       whatever height the wrapped topbar lands at. */
    .topbar {
        padding: 6px 10px;
        flex-wrap: wrap;
        column-gap: 8px;
        row-gap: 4px;
    }
    .topbar-left { display: contents; }
    .topbar > strong { font-size: 14px; flex: 0 0 auto; }
    .topbar-right {
        gap: 4px;
        flex: 1 1 auto;
        justify-content: flex-end;
        min-width: 0;
        /* Reserve horizontal space at the right edge for the
           absolute-positioned Sign-out (and Return-to-Admin when
           visible). Without this, a wide user-switcher would slide
           under the corner buttons. */
        padding-right: 64px;
    }
    body.is-admin .topbar-right,
    body.is-impersonating .topbar-right,
    body.is-platform-admin .topbar-right,
    body.is-platform-impersonating .topbar-right {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        column-gap: 4px;
        flex: 1 1 0;
        padding-right: 64px;
    }
    .page-nav {
        flex: 1 1 100%;
        order: 99;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        min-width: 0;
        margin-left: 0;
    }
    .page-nav::-webkit-scrollbar { height: 4px; }
    /* Compact admin switchers so they share row 1 cleanly with the
       brand and the corner buttons. */
    body.is-admin #user-switcher,
    body.is-impersonating #user-switcher,
    body.is-platform-admin #organization-switcher,
    body.is-platform-impersonating #organization-switcher {
        width: 100%;
        min-width: 0;
        font-size: 12px;
        max-width: none;
        padding: 2px 6px;
    }
    body.is-admin #current-org-badge,
    body.is-impersonating #current-org-badge,
    body.is-platform-admin #current-org-badge,
    body.is-platform-impersonating #current-org-badge {
        grid-column: 1;
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 26px;
        padding: 2px 6px;
        font-size: 12px;
    }
    body.is-platform-admin #organization-switcher,
    body.is-platform-impersonating #organization-switcher {
        grid-column: 2;
    }
    body.is-admin #user-switcher,
    body.is-impersonating #user-switcher {
        grid-column: 3;
    }
    body.is-admin #organization-switcher[hidden],
    body.is-impersonating #organization-switcher[hidden],
    body.is-platform-admin #organization-switcher[hidden],
    body.is-platform-impersonating #organization-switcher[hidden] {
        grid-column: 2;
        display: block !important;
        visibility: hidden;
        pointer-events: none;
    }
    /* Sign-out: small, anchored to the top-right corner of the
       topbar. Out of the flex flow so row 1 has room for the
       user-switcher; the topbar is position:sticky which establishes
       the positioning context. */
    #logout-btn {
        position: absolute;
        top: 4px;
        right: 8px;
        padding: 2px 8px;
        font-size: 11px;
        line-height: 1.3;
        z-index: 11;
    }
    /* Return-to-Admin shares the corner stack when an admin is acting
       as another user. Sits left of Sign out. */
    #return-to-admin-btn {
        position: absolute;
        top: 4px;
        right: 70px;
        padding: 2px 8px;
        font-size: 11px;
        line-height: 1.3;
        z-index: 11;
    }
}

.flash {
    padding: 8px 10px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    font-size: 13px;
}
.flash.error   { background: #fee2e2; color: #991b1b; }
.flash.warning { background: #fef3c7; color: #78350f; border: 1px solid #f59e0b; }
.flash.success { background: #d1fae5; color: #065f46; }

/* Network indicators */
.net-indicator, .queue-indicator {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-right: 6px;
}
/* Author-level `display: inline-block` above outranks the UA stylesheet's
   `[hidden] { display: none }`, so without this rule the offline + queue
   badges stayed permanently visible no matter what `el.hidden = true` did
   in app.js — the source of the "shows offline when online" report. */
.net-indicator[hidden], .queue-indicator[hidden] { display: none; }
.net-indicator   { background: #fee2e2; color: #991b1b; }
.queue-indicator { background: #fef3c7; color: #92400e; }


/* Forms */
.form-fields-editor {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px;
    background: var(--color-surface);
    margin-bottom: 8px;
}
.form-field-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.form-field-row input, .form-field-row select { font-size: 12px; padding: 4px 6px; }

/* Submission card */
.sub-card {
    background: #fafaf9;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px 10px;
    margin-bottom: 4px;
    font-size: 13px;
}
.sub-card .meta { font-size: 11px; color: var(--color-muted); }
.sub-card dl { display: grid; grid-template-columns: 140px 1fr; gap: 2px 8px; margin: 4px 0 0; }
.sub-card dt { color: var(--color-muted); font-size: 12px; }
.sub-card dd { margin: 0; font-size: 13px; }

/* Nav badge for pending approvals */
.current-org-badge {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drag affordance is the whole task row: press/hold or drag the row. */
.task-row.drop-target-above { box-shadow: inset 0 2px 0 var(--color-accent); }
.task-row.drop-target-below { box-shadow: inset 0 -2px 0 var(--color-accent); }
.task-row.dragging { opacity: 0.4; }
@media (max-width: 480px) {
    /* No .task-row override on mobile any more: the previous 4-col wrap
       template only matched non-admin rows (the more-specific
       `.task-row:has(.col-del)` rule kept admin on the desktop layout),
       so admins and users saw different row sizes on the same phone.
       Both share the desktop 6-col template now; body has overflow-x:
       hidden so any tail clip is contained. */

    /* Drop the right-edge Schedule pill below the page header and create
       strip on mobile. The 200 px desktop top covers the topbar + filter
       row on a tall screen; on a phone it lands inside the controls and
       blocks the "+" button. */
    .schedule-bar-btn { top: 60vh; }
}

/* Files (task & task-name) */
.files-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafaf9;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
}
.file-row .name { flex: 1; cursor: pointer; color: var(--color-accent); text-decoration: underline; }
.file-row .meta { color: var(--color-muted); font-size: 11px; }
.upload-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }

/* Reports */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.reports-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}
.reports-card h3 { margin: 0 0 10px; font-size: 14px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0; }
.reports-card .bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.reports-card .bar-row .label { width: 130px; font-size: 13px; }
.reports-card .bar-row .bar { flex: 1; height: 12px; background: #ecfeff; border-radius: 4px; position: relative; overflow: hidden; }
.reports-card .bar-row .bar > span { display: block; height: 100%; background: var(--color-accent); }
.reports-card .bar-row .count { width: 36px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--color-muted); }

/* Task filter bar: lives in normal flow (scrolls away on scroll). The
   create strip below it is the only sticky control now — that keeps
   the "+" button visible while letting the filter rows reclaim screen
   space once the user starts paging through the list. */
.task-filters {
    overflow-x: auto;
    white-space: nowrap;
    padding-top: 8px;
}
.task-filters .row {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}
.task-filters select, .task-filters input {
    font: inherit;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 13px;
}
.task-filters .filter-search { min-width: 160px; }
.task-filters .save-btn { font-size: 12px; }

/* Advanced disclosure — desktop shows the whole bar inline (the toggle
 * button hides on desktop, the panel renders as an inline-flex span that
 * blends with the rest of the row). Mobile hides the panel until the
 * user taps Advanced; the open state drops to a wrap-friendly flex grid
 * underneath the always-visible Saved / Day / Advanced row. */
.tf-advanced {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}
.tf-advanced-toggle { display: none; }
@media (max-width: 720px) {
    .tf-advanced-toggle { display: inline-block; }
    .tf-advanced {
        display: none;
        flex-wrap: wrap;
        width: 100%;
        padding: 8px 4px 0;
        margin-top: 4px;
        border-top: 1px solid var(--color-border);
    }
    .tf-advanced[data-open="1"] { display: flex; }
    /* Allow the toolbar to wrap on mobile so the Advanced panel can drop
     * onto its own line beneath the always-visible chips. The desktop
     * single-line layout (overflow-x scroll) stays untouched. */
    .task-filters .row { flex-wrap: wrap; white-space: normal; }
    .task-filters { overflow-x: visible; }
}

/* Three-column grid keeps "+" centered: [DDB sum] [+] [empty spacer].
   Schedule pill lives outside the strip — see .schedule-bar-btn below.
   position:sticky pins the strip to top:56px once the user scrolls
   past it, so the "+" stays reachable on long task lists; before any
   scroll it sits in its natural position below the filter bar. */
.task-create-strip {
    position: sticky;
    /* --topbar-h is set + kept-in-sync by app.js's syncTopbarHeight()
       so the strip pins flush against the bottom edge of the
       (variable-height) topbar. 56px fallback covers the first paint
       before the JS lands. */
    top: var(--topbar-h, 56px);
    z-index: 5;
    background: var(--color-bg);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    padding: 8px 0 10px;
    gap: 14px;
    margin-bottom: 8px;
}
.task-ddb-sum {
    align-self: center;
    justify-self: start;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    padding: 6px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.task-create-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
/* Sync cluster sits in the right grid column, mirroring the DDB pill on
   the left so the create "+" stays centered. Frozen with the strip via
   the strip's position:sticky. */
.task-sync-actions {
    justify-self: end;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}
.task-sync-actions .btn-secondary { font-size: 13px; white-space: nowrap; }
.task-sync-actions .task-sync-status {
    font-size: 11px;
    min-height: 0;
    text-align: right;
    max-width: 160px;
}
.task-sync-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: #b04040;
    font-size: 11px;
    font-weight: 800;
    text-decoration: underline;
}
.task-sync-clear:disabled {
    opacity: 0.6;
    cursor: wait;
}
#create-task-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Vertical pill anchored to the RIGHT edge of the viewport. Always
   vertical regardless of screen width. writing-mode: vertical-rl makes
   the text flow top-to-bottom (each character rotated 90° CW); the
   180° rotate flips that so "Schedule" reads bottom-to-top, which
   matches the visual order users expect when scanning the right edge
   of the viewport. Display + min-height + width are pinned so a
   parent flex/grid layout can't shrink it horizontal. */
.schedule-bar-btn {
    position: fixed;
    right: 0;
    top: 200px;
    z-index: 8;
    display: inline-block;
    width: auto;
    padding: 14px 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: 0;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    min-height: 110px;
    line-height: 1;
    white-space: nowrap;
}
.schedule-bar-btn:hover { filter: brightness(1.05); }
.task-create-strip-spacer { display: block; }
/* Hide the left-edge schedule pill on pages other than the tasks page. */
body:not(:has(#page-tasks:not([hidden]))) .schedule-bar-btn { display: none; }

/* Task expand panel */
.task-row.expandable { cursor: pointer; }
.task-detail {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 14px;
    margin: -8px 0 8px; /* tuck under the row */
    box-shadow: var(--shadow-sm);
}
.task-detail .detail-grid {
    /* Row 1: Description spans the full width.
       Row 2: Due Date | Scheduled Date | Series/Split button (cols 3-4).
       Row 3: a single .prio-row spanning all columns — Priority / Expected /
       Actual / Class flex tightly together so they all fit inside the
       section width without overflowing on narrow panels. */
    display: grid;
    grid-template-columns: min-content min-content min-content auto;
    justify-content: start;
    gap: 8px 10px;
    margin-bottom: 12px;
    max-width: 100%;
    min-width: 0;
}
.task-detail .detail-grid .desc-cell { grid-row: 1; grid-column: 1 / -1; min-width: 0; max-width: 100%; }
.task-detail .detail-grid .desc-cell textarea {
    /* No min-width — let the textarea shrink with the panel. The
       border-box + max-width:100% combo keeps the textarea (and its
       border) inside the panel's right edge no matter how narrow. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.task-detail .detail-grid label:has([data-field="due_date"])       { grid-row: 2; grid-column: 1; }
.task-detail .detail-grid label:has([data-field="scheduled_date"]) { grid-row: 2; grid-column: 2; }
.task-detail .detail-grid .prio-row {
    grid-row: 3;
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
.task-detail .detail-grid label.class-cell { max-width: 160px; min-width: 0; flex: 1 1 auto; }
.task-detail .detail-grid label.class-cell select.class-select {
    /* Class names can be long ("Well Service") — let the select expand
       within the prio-row's leftover space rather than capping at the
       Priority/Time dropdown widths. */
    width: 100%;
    max-width: 160px;
    padding: 6px 6px;
}
.task-detail .detail-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--color-muted); }

/* Settings > Task > Recurring add-row — vertical label/control pairs
   so each field announces what it's for next to its dropdown. */
.rec-rule-list {
    display: grid;
    gap: 12px;
}
.rec-category-block {
    display: grid;
    gap: 8px;
}
.rec-category-block h4 {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0;
}
.rec-rule-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 10px;
    display: grid;
    gap: 10px;
}
.rec-rule-head {
    display: grid;
    grid-template-columns: 32px minmax(160px, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.rec-rule-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.rec-rule-title strong {
    min-width: 0;
    overflow-wrap: anywhere;
}
.rec-rule-title span,
.rec-rule-meta span {
    color: var(--color-muted);
    font-size: 12px;
}
.rec-rule-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.rec-rule-fields,
.rec-create-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 8px;
    align-items: end;
}
.rec-rule-fields label,
.rec-rule-config,
.rec-rule-location-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 11px;
    color: var(--color-muted);
}
.rec-rule-fields input,
.rec-rule-fields select,
.rec-create-card input,
.rec-create-card select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.rec-rule-fields input[type="checkbox"],
.rec-create-card input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
}
.rec-rule-config [data-rec-config-host] {
    min-height: 31px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rec-rule-config [data-rec-config-host] label,
.rec-create-card [data-rec-config-host] label,
.rec-rule-fields .check-grid label,
.rec-create-card .check-grid label {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text);
}
.rec-rule-check {
    flex-direction: row !important;
    align-items: center;
    min-height: 31px;
}
.rec-rule-check input {
    width: 16px;
    min-width: 16px;
}
.rec-location-field,
.rec-rule-location-field {
    grid-column: span 2;
    min-width: 0;
}
.rec-location-dropdown {
    width: 100%;
    min-width: 0;
}
.rec-location-dropdown > summary {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}
.rec-location-dropdown > summary span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rec-location-dropdown > summary::-webkit-details-marker { display: none; }
.rec-location-dropdown .rec-loc-picker {
    margin-top: 6px;
    max-height: 240px;
}
.rec-rule-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rec-rule-detail {
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}
.rec-create-card {
    margin-top: 12px;
    padding: 10px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: #fbfcfe;
}
.rec-create-card .ct-tn-picker {
    min-width: 0;
}
.rec-create-card #add-rec {
    align-self: end;
}
.rec-add-field {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--color-muted);
}
.rec-add-field > span { font-size: 11px; line-height: 1.1; }
.rec-add-field > select { font-size: 13px; color: var(--color-text); }
@media (max-width: 900px) {
    .rec-rule-head { grid-template-columns: 32px minmax(0, 1fr); }
    .rec-rule-meta {
        grid-column: 2;
        justify-content: flex-start;
    }
    .rec-rule-fields,
    .rec-create-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .rec-rule-fields,
    .rec-create-card {
        grid-template-columns: 1fr;
    }
    .rec-location-field,
    .rec-rule-location-field {
        grid-column: auto;
    }
    .rec-rule-actions {
        justify-content: stretch;
    }
    .rec-rule-actions > button,
    .rec-rule-actions > details {
        flex: 1 1 100%;
    }
    .rec-rule-actions .row-actions-menu > summary,
    .rec-rule-actions .row-actions-menu > button {
        text-align: center;
    }
}
.task-detail .detail-grid label.prio-cell { max-width: 60px; }
.task-detail .detail-grid label.prio-cell select { width: 50px; padding: 6px 4px; }
/* Expected / Actual: ~2-digit-wide whole-number dropdown */
.task-detail .detail-grid label.time-cell { max-width: 70px; }
.task-detail .detail-grid label.time-cell select.time-select { width: 56px; padding: 6px 4px; }
/* Date input + inline clear button */
.date-with-clear { display: inline-flex; align-items: center; gap: 4px; }
/* Sized for "MM/DD/YYYY" + native picker arrow */
.date-with-clear input[type="date"] { flex: 0 0 auto; width: 116px; padding: 6px 4px; }
/* Lock indicator sits to the RIGHT of the field label (per spec) */
.date-cell { display: flex; flex-direction: column; gap: 3px; max-width: 170px; }
/* Multi-date scheduled cell is wider than the single-date cells. */
.date-cell-multi { max-width: 260px; }
.date-cell-label { display: inline-flex; align-items: center; gap: 4px; }
.sched-multi { display: flex; flex-direction: column; gap: 6px; }
.sched-multi-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sched-multi-empty { font-size: 12px; color: var(--color-muted); }
.sched-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2px 6px 2px 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.sched-chip-date { font-weight: 500; }
.sched-chip-hours {
    width: 52px;
    padding: 1px 4px;
    font: inherit;
    font-size: 11px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface, #fff);
}
.sched-chip-hours::-webkit-outer-spin-button,
.sched-chip-hours::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sched-chip-x {
    background: transparent; border: 0; cursor: pointer;
    color: var(--color-muted); font-size: 14px; line-height: 1;
    padding: 0 2px;
}
.sched-chip-x:hover { color: var(--color-danger); }
.sched-multi-add { display: inline-flex; align-items: center; gap: 4px; }
.sched-multi-add input[type="date"] { width: 116px; padding: 6px 4px; }
.sched-multi-add .btn-secondary { font-size: 12px; padding: 5px 10px; }
.btn-clear-date {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    border-radius: 50%;
    width: 22px; height: 22px;
    line-height: 1; font-size: 14px;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
.btn-clear-date:hover { background: var(--color-bg); color: var(--color-text); }
/* Multi-select filter buttons + popover */
.filter-multi-btn {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.filter-multi-btn:hover { border-color: var(--color-accent); }
.filter-multi-btn.has-selection {
    border-color: var(--color-accent);
    color: var(--color-text);
    font-weight: 500;
}
.filter-multi-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.filter-multi-btn .caret { font-size: 10px; color: var(--color-muted); }
.filter-multi-popover {
    z-index: 100;
    min-width: 220px;
    max-height: 360px;
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 8px;
}
.filter-multi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px 6px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
}
/* AND/OR combinator radio that appears in the popover head when at least
   one other dimension is also active. Sits between the title and the
   Clear button without forcing the head to wrap. */
.filter-multi-combinator {
    display: inline-flex;
    gap: 8px;
    font-size: 12px;
    color: var(--color-muted);
    margin: 0 8px;
}
.filter-multi-combinator label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    user-select: none;
}
.filter-multi-combinator input { margin: 0; }
.filter-multi-body { display: flex; flex-direction: column; gap: 2px; }
.filter-multi-body label {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
.filter-multi-body label:hover { background: var(--color-bg); }
.filter-empty { color: var(--color-muted); font-size: 12px; padding: 6px; }
.filter-multi-hint { font-size: 11px; color: var(--color-muted); margin-left: auto; }

/* Saved-filter popover: rows with a hidden Remove button revealed on
 * long-press. The pick button takes the full width so a quick tap
 * applies the filter; pressing-and-holding the row arms the Remove
 * button. */
.saved-filter-popover .filter-multi-body { gap: 4px; }
.saved-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    /* Suppress the iOS long-press selection / callout so our long-press
     * gesture (550ms) reveals the Remove button instead of the OS
     * showing a copy/define menu. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.saved-filter-row.is-current { background: rgba(15,118,110,0.08); }
.saved-filter-row.is-remove-armed { background: rgba(176,64,64,0.08); }
.saved-filter-pick {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.saved-filter-pick:hover { background: var(--color-bg); }
.saved-filter-name { flex: 1; }
.saved-filter-scope {
    font-size: 11px;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    padding: 1px 6px;
    border-radius: 10px;
}
.saved-filter-remove {
    background: var(--color-danger, #b04040);
    color: white;
    border: 0;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    flex: 0 0 auto;
    margin-right: 4px;
}
.saved-filter-clear {
    background: transparent;
    border: 0;
    text-align: left;
    padding: 4px 6px;
    color: var(--color-muted);
    font-size: 12px;
    font-style: italic;
    cursor: pointer;
    border-radius: 4px;
}
.saved-filter-clear:hover { background: var(--color-bg); }

/* File pick (auto-uploads on change, auto-opens in webview) */
.file-pick-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.file-pick-hint { font-size: 12px; color: var(--color-muted); }
.detail-comments-block { margin-top: 14px; }
.detail-files-block { margin-top: 14px; }

/* Auto-save inline status text */
.autosave-hint { font-size: 12px; min-height: 18px; padding: 0 6px; }
.autosave-hint.autosave-ok  { color: #2a7a2a; }
.autosave-hint.autosave-err { color: #b04040; }

/* Lock indicator for due-date when user lacks permission */
.due-lock-note { margin-left: 4px; cursor: help; opacity: 0.6; }
.task-detail input[disabled] { background: #f4f4f5; color: var(--color-muted); cursor: not-allowed; }

/* Empty-status pill (new tasks start blank). Padding shrinks 1 px on
   each side to absorb the dashed border, so the empty pill matches the
   height of a filled one. */
.status-pill.status-empty {
    background: #fff;
    color: var(--color-muted);
    border: 1px dashed var(--color-border);
    padding: 6px 13px;
}

/* Group-by section header in the task list */
.task-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 8px;
    padding: 6px 8px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
}
.task-group-head:first-child { margin-top: 4px; }
.task-group-head small { font-weight: normal; opacity: 0.7; margin-left: 4px; }

/* Leading expand/collapse toggle for a primary group. The caret rotates to
   point right when the group is collapsed. */
.task-group-toggle {
    flex: 0 0 auto;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 40px;
    line-height: 1;
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 4px;
    transition: transform 0.12s ease, background 0.12s ease;
}
.task-group-toggle:hover { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
.task-group-head.is-collapsed .task-group-toggle { transform: rotate(-90deg); }

/* Secondary group-by — sub-header sits under the primary group head and
   above the rows for that sub-bucket. Smaller + indented so the hierarchy
   reads top-down. */
.task-group-subhead {
    margin: 8px 0 4px 16px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
    border-bottom: 1px dashed var(--color-border);
}
.task-group-subhead small { font-weight: normal; opacity: 0.7; margin-left: 4px; }

/* Group-header label button — looks like plain header text but is
 * clickable. Hovering hints at the create-in-group affordance with a
 * subtle accent underline. */
.task-group-label {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
}
.task-group-label:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Task-detail footer button cluster — the DDB + Info toggles live
   side-by-side so they read as a row of secondary actions instead of
   stacked h4 headers. */
.detail-foot-buttons { display: flex; gap: 8px; margin: 12px 0 6px; }
.detail-foot-buttons .btn-outline { font-size: 13px; padding: 4px 10px; }

/* DDB allocation dialog */
.ddb-dialog { display: flex; flex-direction: column; gap: 12px; }
.ddb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ddb-head-lease em { font-style: normal; color: var(--color-muted); margin-left: 6px; }
.ddb-head-metrics { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ddb-head-expected,
.ddb-head-total { font-size: 14px; white-space: nowrap; }
.ddb-prod-row {
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
    padding: 6px 8px; background: var(--color-bg); border-radius: var(--radius);
    font-size: 12px;
}
.ddb-prod-label { color: var(--color-muted); margin-right: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.ddb-prod-cell { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ddb-prod-date { color: var(--color-muted); font-size: 10px; }
.ddb-prod-val { font-weight: 600; font-size: 12px; }
.ddb-help { font-size: 12px; margin: 0; }
.create-ddb-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 10px;
}
.create-ddb-location-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.create-ddb-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fafafa;
    font-size: 12px;
}
.create-ddb-location-label {
    font-weight: 800;
    color: var(--color-text);
}
.create-ddb-location-max {
    color: var(--color-muted);
    white-space: nowrap;
}
.create-ddb-apply { margin: 0; }
.create-ddb-apply input[data-create-ddb-value] {
    width: 78px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.create-ddb-non {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-muted);
}
@media (max-width: 620px) {
    .create-ddb-entry {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .create-ddb-apply input[data-create-ddb-value] {
        width: 100%;
        max-width: 110px;
    }
}
.ddb-task-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ddb-task-table th, .ddb-task-table td {
    text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border); vertical-align: middle;
}
.ddb-task-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.ddb-task-table .ddb-col-cap { text-align: right; white-space: nowrap; color: var(--color-muted); width: 70px; }
.ddb-task-table .ddb-col-input { width: 110px; text-align: right; }
.ddb-task-table .ddb-col-desc { color: var(--color-muted); }
.ddb-task-table .ddb-col-site {
    white-space: nowrap;
    color: var(--color-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ddb-task-table input[data-ddb-input] { width: 100%; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 4px; font: inherit; text-align: right; }
/* X-retention rows: marked X (completed) but still listed during the
   x_retention_days window. Muted text + strikethrough on the task
   name so the row reads as "done, just waiting to age out." */
.ddb-task-table tr.is-fixed > td { background: #f0fdf4; color: var(--color-muted); }
.ddb-task-table tr.is-fixed > td:first-child { text-decoration: line-through; }
.ddb-row-fixed-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
    color: #166534;
    border-radius: 4px;
    text-decoration: none;
    vertical-align: middle;
}
.ddb-sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 4px 8px; }
.ddb-diff.is-ok  { color: #2a7a2a; }
.ddb-diff.is-err { color: #b04040; }

/* Task-detail Well Test review */
.dialog.dialog-wide.well-test-review-dialog {
    width: min(96vw, 1100px);
}
.well-test-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.well-test-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.well-test-head h2 {
    margin: 0;
}
.well-test-context {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.well-test-context em {
    font-style: normal;
    margin-left: 6px;
}
.well-test-context-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-muted);
    font-size: 12px;
}
.well-test-toolbar {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}
.well-test-toolbar label {
    display: grid;
    gap: 4px;
    min-width: min(100%, 300px);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.well-test-toolbar select {
    width: 100%;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
}
.well-test-site-summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 13px;
}
.well-test-site-summary span {
    color: var(--color-muted);
}
.well-test-review-wrap {
    max-height: min(62vh, 620px);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.well-test-review-table {
    min-width: max-content;
}
.well-test-review-table thead th {
    top: 0;
    z-index: 5;
}
.well-test-review-table thead .site-log-field-column {
    z-index: 7;
}
.well-test-review-table thead .site-log-reference-column {
    z-index: 6;
}
.well-test-review-table .site-info-value-input {
    min-width: 132px;
}
.well-test-empty-note {
    margin-top: 8px;
}
@media (max-width: 620px) {
    .dialog.dialog-wide.well-test-review-dialog {
        width: 96vw;
    }
    .well-test-context,
    .well-test-site-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Tertiary group-by — sits under the secondary sub-header and indents
   one more level so a three-level group like Category → Class → Status
   reads as nested without losing track of where the rows belong. */
.task-group-subsubhead {
    margin: 6px 0 3px 32px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted);
    border-bottom: 1px dotted var(--color-border);
}
.task-group-subsubhead small { font-weight: normal; opacity: 0.7; margin-left: 4px; }

/* "DDB N.NN" sum badge appended to the group / subgroup / sub-sub-
   group headings. Same visual weight as the (count) badge next to
   it but a touch louder so the eye finds the per-group total
   without reading the rows. */
.task-group-head .task-group-ddb,
.task-group-subhead .task-group-ddb,
.task-group-subsubhead .task-group-ddb {
    font-weight: 600;
    opacity: 0.85;
    margin-left: 6px;
    color: var(--color-accent);
    text-transform: none;
    letter-spacing: 0;
}

/* Create-Task picker — single-control replacement for the old Category +
   Task Name pair. Top-level button toggles a panel containing a
   single-open accordion: category rows expand to reveal their task names.
   Picking a task name fills the hidden input and closes the panel. */
.ct-tn-picker { position: relative; }
.ct-tn-trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.ct-tn-trigger { padding: 8px 10px; }
.ct-tn-trigger:hover { border-color: var(--color-text); }
.ct-tn-trigger[aria-expanded="true"] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.ct-tn-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-tn-trigger-label.is-placeholder { color: var(--color-muted); }
.ct-tn-trigger-chev { color: var(--color-muted); font-size: 11px; margin-left: 6px; }
.ct-tn-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 80;
    max-height: 320px;
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.ct-tn-loading,
.ct-tn-empty,
.ct-tn-error {
    padding: 10px 8px;
    color: var(--color-muted);
    font-size: 12px;
    font-style: italic;
}
.ct-tn-error { color: #b04040; font-style: normal; }
.ct-tn-cat-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}
.ct-tn-cat-row:hover { background: #fafaf9; }
.ct-tn-cat-row[aria-expanded="true"] { background: #f5f3ff; color: #5b21b6; }
.ct-tn-chev {
    color: var(--color-muted);
    font-size: 9px;
    transition: transform 120ms ease;
}
.ct-tn-cat-row[aria-expanded="true"] .ct-tn-chev { transform: rotate(90deg); }
.ct-tn-leaf-list {
    margin: 0 0 4px 12px;
    padding-left: 4px;
    border-left: 1px solid var(--color-border);
}
.ct-tn-leaf {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--color-text);
    text-align: left;
}
.ct-tn-leaf:hover { background: #f5f3ff; }
.ct-tn-leaf-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #8b5cf6;
    flex-shrink: 0;
}
.ct-tn-leaf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tn-leaf-abbr {
    color: var(--color-muted);
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Status popover (replaces the modal) */
.status-popover {
    z-index: 100;
    min-width: 200px;
    max-height: 80vh;
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.status-popover .status-popover-head {
    display: flex; align-items: baseline; gap: 6px;
    padding: 4px 8px 6px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-muted);
}
.status-popover .status-popover-head strong { color: var(--color-text); }
.status-popover .status-popover-head em { font-style: normal; font-size: 11px; color: var(--color-muted); text-transform: none; letter-spacing: 0; }
.status-popover .status-popover-foot {
    margin-top: 4px;
    padding: 0 8px;
    text-align: right;
    font-size: 12px;
    min-height: 16px;
}
.status-popover [data-status-msg].ok  { color: #2a7a2a; }
.status-popover [data-status-msg].err { color: #b04040; }

/* Picker rows — colored swatch + label + abbr on the right. */
.status-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--color-text);
    text-align: left;
}
/* :hover only on devices that can actually hover. On iOS Safari a tap on
   a row with :hover styling is first interpreted as a "hover" (no click
   fires) and only the second tap commits — which read as "have to select
   twice to save" for status changes. Gating on `hover: hover` keeps the
   desktop hover affordance without poisoning touch. */
@media (hover: hover) {
    .status-picker-row:hover { background: #fafaf9; }
}
.status-picker-row[aria-selected="true"] { background: #eef2ff; }
.status-picker-swatch {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
    flex-shrink: 0;
}
.status-picker-row[data-status-pick="Assigned"]  .status-picker-swatch { background: #2563eb; }
.status-picker-row[data-status-pick="Confirmed"] .status-picker-swatch { background: #06b6d4; }
.status-picker-row[data-status-pick="GoAhead"]   .status-picker-swatch { background: #f59e0b; }
.status-picker-row[data-status-pick="Send"]      .status-picker-swatch { background: #111827; }
.status-picker-row[data-status-pick="Next"]      .status-picker-swatch { background: #8b5cf6; }
.status-picker-row[data-status-pick="X"]         .status-picker-swatch { background: #10b981; }
.status-picker-row[data-status-pick="Failed"]    .status-picker-swatch { background: #ef4444; }
.status-picker-row[data-status-pick="NA"]        .status-picker-swatch { background: #78716c; }
.status-picker-row[data-status-pick="Rejected"]  .status-picker-swatch { background: #b91c1c; }
.status-picker-name { flex: 1; font-size: 13px; }
.status-picker-abbr {
    color: var(--color-muted);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.status-picker-row.is-clear {
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
    padding-top: 9px;
}
.status-picker-row.is-clear .status-picker-swatch {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Cap the popover width so a long task-name doesn't push it off-screen.
   Wider than the base 200 px so the cascading panel below Next has room. */
.status-popover { max-width: 360px; }

/* Chevron on the Next row — points right by default, rotates 90° down
   when its accordion panel is expanded. Mirrors the cart.php arrow. */
.status-picker-chev {
    color: var(--color-muted);
    font-size: 9px;
    margin-left: 4px;
    line-height: 1;
    transition: transform 120ms ease;
    flex-shrink: 0;
}
.status-picker-row[aria-expanded="true"] .status-picker-chev,
.status-picker-cat-row[aria-expanded="true"] .status-picker-chev {
    transform: rotate(90deg);
}

/* Inline category panel that appears below the Next row when expanded.
   Indented and bordered to match the accordion pattern from cart.php. */
.status-picker-next-panel {
    margin: 2px 0 6px 26px;
    padding-left: 6px;
    border-left: 2px solid #ede9fe;
}
.status-picker-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--color-text);
    text-align: left;
}
@media (hover: hover) {
    .status-picker-cat-row:hover { background: #fafaf9; }
}
.status-picker-cat-row[aria-expanded="true"] { background: #f5f3ff; color: #5b21b6; }
.status-picker-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Task-name list — third / leaf level. Indented further with a fainter
   left rail so it nests visually under its category. */
.status-picker-task-list {
    margin: 0 0 4px 12px;
    padding-left: 4px;
    border-left: 1px solid var(--color-border);
}
.status-picker-task-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--color-text);
    text-align: left;
}
@media (hover: hover) {
    .status-picker-task-row:hover { background: #f5f3ff; }
    .status-picker-task-row.is-sequential:hover { background: #cffafe; }
}
.status-picker-task-row.is-sequential { background: #ecfeff; }
/* Selected (multi-select). The pill highlights and the leading dot grows
   into a ringed marker so you can scan the picked rows at a glance. */
.status-picker-task-row[aria-pressed="true"] {
    background: #ede9fe;
}
.status-picker-task-row[aria-pressed="true"] .status-picker-task-dot {
    width: 8px; height: 8px;
    box-shadow: 0 0 0 2px rgba(139,92,246,0.30);
}
.status-picker-task-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #8b5cf6;
    flex-shrink: 0;
    transition: width 0.08s ease, height 0.08s ease, box-shadow 0.08s ease;
}
.status-picker-task-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-picker-task-abbr {
    color: var(--color-muted);
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    flex-shrink: 0;
}

.status-picker-loading,
.status-picker-empty,
.status-picker-error {
    padding: 6px 8px;
    font-size: 11px;
    color: var(--color-muted);
    font-style: italic;
}
.status-picker-error { color: #b04040; font-style: normal; }

/* Inline location picker that sits between the Next category list
   and the Create footer. Pre-checked with the source task's
   locations; the user can adjust before spawning. Compact to keep
   the popover footprint reasonable; the loc-picker itself already
   scrolls when it has more children than fit. */
.status-picker-next-locs {
    margin: 6px 0 0;
    padding: 6px 8px;
    border-top: 1px solid var(--color-border);
    font-size: 12px;
}
.status-picker-next-locs > strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-picker-next-locs .loc-picker {
    max-height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Footer of the Next accordion — selection summary + commit button.
   Pinned below the categories list. The summary shows the live DDB
   split (parent.ddb_value / count) so the user sees the math before
   clicking Create. */
.status-picker-next-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 8px 4px;
    border-top: 1px solid var(--color-border);
    font-size: 11px;
}
.status-picker-next-foot [data-next-summary] {
    flex: 1;
    color: var(--color-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-picker-next-submit {
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    background: #5b21b6;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}
.status-picker-next-submit:hover:not(:disabled) { background: #4c1d95; }
.status-picker-next-submit:disabled {
    background: #d6d3d1;
    color: #fafaf9;
    cursor: not-allowed;
}
.status-assignees {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px 4px;
}
.status-assignees-col strong { font-size: 11px; color: var(--color-muted); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.check-grid.status-check-grid { grid-template-columns: 1fr; max-height: 180px; }
.task-detail .detail-grid input,
.task-detail .detail-grid select,
.task-detail .detail-grid textarea {
    font: inherit;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}
/* Description textarea is sized to fit exactly 2 rows of text. The user
   can grow it via the resize handle if they need more room. */
.task-detail textarea {
    resize: vertical;
    min-height: 0;
    height: calc(2 * 1.4em + 12px);
    line-height: 1.4;
    padding: 6px 8px;
    box-sizing: border-box;
}
.task-detail .detail-actions {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
    margin-bottom: 14px;
}
.task-action-group { display: flex; gap: 6px; flex-wrap: wrap; }

.task-detail h4 {
    margin: 14px 0 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-muted);
}

/* Permissions tree (per-member cascading scope) */
.perm-tree-wrap { max-height: 400px; overflow: auto; }
.perm-tree { font-size: 13px; }
.perm-tree th, .perm-tree td { padding: 5px 8px; }
.perm-tree th.perm-cell, .perm-tree td.perm-cell {
    width: 60px;
    text-align: center;
    white-space: nowrap;
}
.perm-tree tr[data-depth="1"] td.perm-label { color: var(--color-muted); }
.perm-tree input[type="checkbox"] { transform: scale(1.1); }

.perm-loc-tree {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px;
    max-height: 300px;
    overflow: auto;
    font-size: 13px;
}
.perm-loc-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 0;
}
.perm-loc-row label:hover { background: #fafaf9; border-radius: 4px; }

/* Long-press drag (touch fallback for HTML5 drag-and-drop) */
.long-press-active {
    background: #fef3c7 !important;
    transition: background 120ms;
}
.drag-ghost {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    transform: rotate(-1deg);
    border-radius: var(--radius);
}

/* DDB picker (plan §B.D1) */
.ddb-display {
    font: inherit;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 100px;
}
.ddb-display.sm { padding: 4px 8px; font-size: 12px; min-width: 62px; }
.ddb-display:hover { border-color: var(--color-accent); }

/* Fixed (status = X) badge that replaces the DDB picker on a row. Same
   footprint as the .sm picker so column widths don't jump; tinted to
   distinguish from a live numeric DDB. */
.ddb-fx-display {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    min-width: 62px;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    background: #f0fdf4;
    color: #166534;
    font-variant-numeric: tabular-nums;
    text-align: right;
    cursor: default;
    width: 100%;
}

.ddb-popover {
    z-index: 100;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-md);
    min-width: 240px;
}
.ddb-cols {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ddb-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100px;
}
.ddb-col input {
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.ddb-dot { font-size: 22px; line-height: 1; padding-bottom: 2px; }
/* Hide native number input spinners for the row-level DDB input. */
input[data-row-ddb]::-webkit-outer-spin-button,
input[data-row-ddb]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[data-row-ddb] { -moz-appearance: textfield; }
.ddb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.review-row {
    display: flex;
    gap: 14px;
    margin: 8px 0 14px;
    padding: 8px 10px;
    background: #fafaf9;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.review-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.review-meta {
    color: var(--color-muted);
    font-size: 11px;
    font-style: italic;
}

.comment-list { display: flex; flex-direction: column; gap: 6px; }
.comment-item {
    background: #fafaf9;
    border-left: 3px solid var(--color-accent);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
}
.comment-item .meta { font-size: 11px; color: var(--color-muted); margin-bottom: 2px; }

.add-comment-row { display: flex; gap: 6px; margin-top: 6px; }
.add-comment-row input {
    flex: 1;
    font: inherit;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.info-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 4px 12px;
    font-size: 13px;
    margin-top: 4px;
}
.info-grid dt { color: var(--color-muted); }
.info-grid dd { margin: 0; }
.info-grid .info-input {
    font: inherit;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    width: 100%;
    max-width: 320px;
}

.log-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px 8px;
    background: #fafaf9;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.log-list .row { display: flex; gap: 8px; padding: 2px 0; border-bottom: 1px dashed var(--color-border); }
.log-list .row:last-child { border-bottom: 0; }
.log-list .ts   { color: var(--color-muted); white-space: nowrap; }
.log-list .who  { color: var(--color-text); white-space: nowrap; }
.log-list .what { color: var(--color-muted); flex: 1; }

.assoc-list { font-size: 13px; padding-left: 0; list-style: none; }
.assoc-list li { padding: 4px 0; }
.assoc-list .badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e7e5e4;
    color: var(--color-muted);
    font-size: 11px;
    margin-right: 6px;
}

/* Status grid (status dialog) */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
    margin: 12px 0;
}
.status-grid button {
    font: inherit;
    padding: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius);
    cursor: pointer;
}
.status-grid button:hover { border-color: var(--color-accent); }

/* Checkbox lists (assign / next dialogs) */
.checkbox-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px;
    background: var(--color-surface);
}
.checkbox-list label {
    display: flex;
    gap: 8px;
    padding: 4px 6px;
    align-items: center;
    cursor: pointer;
}
.checkbox-list label:hover { background: #f5f5f4; border-radius: 4px; }
.checkbox-list label input { margin: 0; }
.checkbox-list .row-vendor { display: flex; gap: 6px; align-items: center; flex: 1; }
.checkbox-list select { flex: 0 0 auto; padding: 3px 5px; font-size: 12px; }

/* Location picker (create-task) */
.loc-picker {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px;
    background: var(--color-surface);
    max-height: 220px;
    overflow-y: auto;
    font-size: 13px;
}
.loc-picker ul { list-style: none; padding-left: 16px; margin: 0; }
.loc-picker > ul { padding-left: 0; }
.loc-picker label { display: flex; gap: 6px; align-items: center; padding: 2px 0; cursor: pointer; }
.loc-picker details { margin: 2px 0; }
.loc-picker summary {
    display: flex;
    gap: 6px;
    align-items: center;
    cursor: pointer;
    padding: 2px 0;
}
.loc-picker summary::-webkit-details-marker { display: none; }
.loc-picker summary::before {
    content: "▸";
    width: 12px;
    color: var(--color-muted);
    font-size: 11px;
}

/* OPD-style accordion location picker */
.accdd-host {
    padding: 4px;
    /* Inherited table-cell or flex-parent alignment can let the panel
       float toward the center of a wide colspan'd cell — the Settings
       team-perms row is one such case. Force the host to fill the
       container left-to-right so the checkboxes line up under the
       section heading. */
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.tm-perms { text-align: left; }
.tm-perms h3 { text-align: left; margin-top: 18px; margin-bottom: 4px; }
.tm-perms .accdd-host .accdd-row { justify-content: flex-start; }
/* The perms tree lives inside a colspan'd .settings-table td, which
   forces every input to width:100% via the table's bulk style. That
   stretches the location-permission checkbox across the row, padding
   text out from the left edge and creating the "centered" look the
   user kept reporting. Pin checkboxes inside any .accdd-host back to
   their intrinsic dimensions so the row stays tight against the
   left margin. */
.accdd-host input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
}
/* New non-leaf row layout: the checkbox lives in its own wrapper, the
   rest of the row (name + chevron) is a separate flex child marked
   data-toggleable. The two never share a tap target so a row click
   can't accidentally toggle the checkbox even on iOS where the OS
   sometimes routes taps to the nearest interactive element. */
.accdd-cb-wrap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* Pad the checkbox tap target without inflating the visible cell.
     * On iOS Safari the OS routes near-misses to the nearest interactive
     * element; the explicit padding makes "tapped the checkbox" vs
     * "tapped the name" unambiguous. */
    padding: 4px 8px 4px 4px;
}
.accdd-cb-wrap input[type="checkbox"] {
    margin: 0;
}
/* Leaf-row name span (loc-picker). Click handler in JS toggles the
 * sibling checkbox; keeping the span dimensioned like .accdd-toggle-area
 * so leaves and non-leaves visually align. */
.accdd-name-area {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.accdd-name-area .accdd-name { flex: 1 1 auto; font-weight: inherit; }

.accdd-toggle-area {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    /* Padding gives the toggle a generous tap target without bleeding
       into the checkbox column. Negative margin matches the row's
       padding so visual alignment stays the same as before. */
    padding: 4px 0;
}
.accdd-toggle-area .accdd-name { flex: 1 1 auto; font-weight: inherit; }

/* Assignee trigger button (replaces the native <select> on task rows).
   Visually mirrors the previous select width so the column still
   aligns with the rest of the row. The contents (.assignee-trigger-abbr
   plus optional "+N") are filled by renderAssigneeLabel. */
.assignee-trigger {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 4px 8px;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-align: left;
    min-width: 0;
}
.assignee-trigger:hover { background: #fafaf9; }
.assignee-trigger-empty { color: var(--color-muted); font-size: 12px; }
.assignee-trigger-abbr  { font-weight: 500; }
.assignee-trigger-more  { font-size: 11px; color: var(--color-muted); }

/* Assignee picker popover (multi-level accordion: Team Members
   group + each Vendor Category group + Other Vendors). Positioned
   by positionPopoverAtAnchor so it stays inside the viewport. */
.assignee-popover {
    z-index: 100;
    width: 280px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 6px;
    overflow-y: auto;
}
.assignee-section { margin-bottom: 2px; }
.assignee-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: #fafaf9;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.assignee-section-arr { color: var(--color-muted); font-size: 10px; transition: transform 120ms ease; }
.assignee-section.is-open .assignee-section-arr { transform: rotate(90deg); }
.assignee-section-body {
    display: none;
    padding: 4px 0 6px 6px;
    border-left: 2px solid var(--color-border);
    margin-left: 6px;
}
.assignee-section.is-open .assignee-section-body { display: block; }
.assignee-leaf {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
@media (hover: hover) {
    .assignee-leaf:hover { background: var(--color-bg); }
}
.assignee-leaf.is-current {
    background: #ecfeff;
    font-weight: 600;
}
.assignee-leaf.is-unassigned {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
    border-radius: 0;
}
.assignee-leaf-abbr { font-weight: 600; min-width: 32px; }
.assignee-leaf-name { flex: 1 1 auto; }
.assignee-leaf-meta { color: var(--color-muted); font-size: 11px; }
.accdd-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}
.accdd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    background: var(--color-surface);
}
.accdd-row:last-child { border-bottom: 0; }
.accdd-row:hover { background: #fafaf9; }
.accdd-row.accdd-leaf { cursor: default; }
.accdd-row.accdd-leaf:hover { background: #fafaf9; }
.accdd-row.accdd-nested { background: #fafaf9; padding-left: 28px; font-size: 13px; }
.accdd-row.accdd-leaf.accdd-nested { padding-left: 28px; }
.accdd-row .accdd-name { flex: 1; font-weight: 500; }
.accdd-row.accdd-nested .accdd-name { font-weight: 400; }
.accdd-row .accdd-name em { color: var(--color-muted); font-style: normal; font-size: 11px; }
.accdd-row .accdd-arr {
    color: var(--color-muted);
    font-size: 10px;
    transition: transform 120ms ease;
}
.accdd-row.open .accdd-arr { transform: rotate(90deg); }
.accdd-body { display: none; }
.accdd-body.open { display: block; border-bottom: 1px solid var(--color-border); }
.accdd-body .accdd-row.accdd-nested .accdd-name { font-weight: 400; }
.accdd-body .accdd-body .accdd-row { padding-left: 44px; font-size: 12px; }
.accdd-row label { display: contents; cursor: pointer; }

/* Row preferences popover (schedule weekly: show-always toggle) */
.row-prefs-popover {
    z-index: 100;
    width: 260px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 10px;
}
.row-prefs-head { display: flex; gap: 6px; align-items: baseline; margin-bottom: 8px; }
.row-prefs-head em { font-style: normal; color: var(--color-muted); font-size: 12px; }
.row-prefs-check { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.sched-row.is-pinned .row-label { color: var(--color-text); font-weight: 600; }
[data-row-popover] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }

/* Location popover (replaces the wide modal version) */
.loc-popover {
    z-index: 100;
    width: 260px;
    max-height: 70vh;
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 8px;
}
.loc-popover .loc-popover-head {
    display: flex; align-items: baseline; gap: 6px;
    padding: 2px 4px 6px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 6px;
}
.loc-popover .loc-popover-head em { font-style: normal; font-size: 12px; color: var(--color-muted); }
.loc-popover .loc-popover-foot {
    margin-top: 6px;
    text-align: right;
    font-size: 12px;
    min-height: 16px;
}
.loc-popover .loc-popover-foot .ok  { color: #2a7a2a; }
.loc-popover .loc-popover-foot .err { color: #b04040; }

/* V/A/E checkbox column inside permissions accordion */
.perm-vae-cells {
    display: inline-grid;
    grid-template-columns: 24px 24px 24px;
    gap: 4px;
    align-items: center;
    justify-items: center;
    flex: 0 0 auto;
}
.perm-vae-cells em { font-style: normal; font-size: 11px; color: var(--color-muted); }
.perm-vae-cells input { margin: 0; cursor: pointer; }
.perm-vae-header { background: var(--color-bg) !important; cursor: default; }
.perm-vae-header .accdd-name em { font-style: italic; color: var(--color-muted); }
.loc-picker details[open] > summary::before { content: "▾"; }
.loc-picker summary input { margin: 0; }

.muted { color: var(--color-muted); margin: 0 0 10px; font-size: 13px; }

/* Task row tweaks */
.task-row button.status-pill {
    cursor: pointer;
    transition: box-shadow 0.12s ease, transform 0.05s ease;
}
/* Task-list row status button: 20% smaller than the base pill and round.
   Scoped to the row's status column so the pill stays full-size in the
   event task-box and elsewhere. min-width tracks the reduced height so a
   single-letter status (A / C / X …) reads as a circle, while multi-char
   labels (NA / Nxt) grow into a rounded capsule. */
.task-row .col-status .status-pill {
    min-width: 22px;
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 999px;
}
.task-row button.status-pill:hover  { box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
.task-row button.status-pill:active { transform: scale(0.97); }

/* Recurrence editor inside task-name row */
.rec-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; }
.rec-editor label { font-size: 12px; color: var(--color-muted); display: flex; gap: 4px; align-items: center; }
.rec-editor select, .rec-editor input { padding: 4px 6px; font-size: 12px; }

/* Per-recurrence-rule template editor (task box defaults) */
.rec-template-detail {
    background: var(--color-surface-2, #f7f7f9);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px;
}
.rec-template-grid { display: flex; flex-direction: column; gap: 10px; }
.rec-template-grid > label { font-size: 12px; color: var(--color-muted); display: block; }
.rec-template-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec-template-fields label { font-size: 12px; color: var(--color-muted); display: flex; gap: 4px; align-items: center; }
.rec-template-fields input { padding: 4px 6px; font-size: 12px; }
.rec-template-block { display: flex; flex-direction: column; gap: 4px; }
/* Accordion-style collapsible block (Extra Team Members / Vendors) */
.rec-template-collapse {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 0;
    gap: 0;
}
.rec-template-collapse > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    user-select: none;
    border-radius: var(--radius);
}
.rec-template-collapse > summary::-webkit-details-marker { display: none; }
.rec-template-collapse > summary::before {
    content: '▸';
    font-size: 12px;
    color: var(--color-muted);
    width: 12px;
    display: inline-block;
    transition: transform 0.15s;
}
.rec-template-collapse[open] > summary::before { transform: rotate(90deg); }
.rec-template-collapse > summary:hover { background: var(--color-bg); }
.rec-template-collapse > .check-grid {
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
}
.rec-template-count { font-size: 12px; color: var(--color-muted); font-weight: 500; }

/* Vendor section: category-grouped sub-dropdowns inside the top vendors
   accordion, each containing per-vendor checkboxes. Multi-service
   vendors expose a per-service sub-dropdown that only opens once the
   vendor is checked. */
.vendor-cat-list { display: flex; flex-direction: column; padding: 6px 8px; gap: 4px; max-height: 380px; overflow-y: auto; }
.vendor-cat {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}
.vendor-cat > summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    gap: 6px;
    align-items: baseline;
    user-select: none;
    font-weight: 500;
    font-size: 13px;
}
.vendor-cat > summary::-webkit-details-marker { display: none; }
.vendor-cat > summary::before {
    content: '▸';
    font-size: 11px;
    color: var(--color-muted);
    width: 10px;
    transition: transform 0.15s;
}
.vendor-cat[open] > summary::before { transform: rotate(90deg); }
.vendor-cat-count { font-size: 12px; color: var(--color-muted); font-weight: 400; }
.vendor-list { list-style: none; padding: 0 0 8px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.vendor-row { display: flex; flex-direction: column; gap: 2px; padding-left: 0; }
.vendor-row-label { display: flex; gap: 6px; align-items: center; font-size: 13px; padding-left: 8px; text-align: left; justify-content: flex-start; }
.vendor-services {
    margin-left: 8px;
    border-left: 2px solid var(--color-border);
    padding-left: 8px;
}
.vendor-services > summary {
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-muted);
    padding: 2px 0;
    user-select: none;
}
.vendor-services > summary::-webkit-details-marker { display: none; }
.vendor-services > summary::before {
    content: '▸';
    margin-right: 4px;
    font-size: 10px;
    transition: transform 0.15s;
}
.vendor-services[open] > summary::before { transform: rotate(90deg); }
.vendor-services-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.vendor-services-list label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--color-text); text-align: left; justify-content: flex-start; }
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 12px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    max-height: 220px;
    overflow-y: auto;
}
.check-grid label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.check-grid .row-vendor { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Mobile tightening */
@media (max-width: 480px) {
    .main { padding: 8px; }
    .task-row { font-size: 13px; }
    .task-row.task-list-row {
        --task-ddb-spacer: 31px;
        --task-ddb-origin-spacer: 40px;
        --task-action-spacer: 5px;
    }
    .task-row.task-list-row .task-row-top {
        grid-template-columns: minmax(58px, 70px) minmax(0, 1fr) max-content;
        gap: 8px;
        padding: 9px 8px 7px;
    }
    .task-row.task-list-row:has(.col-del) .task-row-top {
        grid-template-columns: minmax(58px, 70px) minmax(0, 1fr) max-content var(--task-ddb-spacer);
    }
    .task-row.task-list-row:has(.col-del):has(.task-status-origin-letter) .task-row-top {
        grid-template-columns: minmax(58px, 70px) minmax(0, 1fr) max-content var(--task-ddb-origin-spacer);
    }
    .task-row.task-list-row .col-loc-btn { padding-right: 7px; }
    .task-row.task-list-row .task-row-bottom {
        grid-template-columns: minmax(0, 1fr) 70px max-content;
        gap: 5px;
        padding: 7px 8px 9px;
    }
    .task-row.task-list-row .task-row-bottom:has(.col-del) {
        grid-template-columns: minmax(0, 1fr) 70px max-content var(--task-action-spacer) auto;
    }
    .task-row.task-list-row .col-ddb { gap: 4px; }
    .task-row.task-list-row .col-client {
        width: 88px;
        max-width: 28vw;
        font-size: 13px;
    }
    .service-task-tab {
        padding: 7px 2px;
        font-size: 11px;
    }
    .task-row.task-list-row .task-row-action-cluster { gap: 3px; }
    .toolbar-title { font-size: 16px; }
    .sched-week-grid { grid-template-columns: 110px repeat(7, minmax(80px, 1fr)); }
}

/* ===== Process → Training matrix =================================== */
.training-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.training-colpick { position: relative; }

/* Completion chart (CSS bars, one per column). */
.training-chart {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.training-chart-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 6px;
}
.training-chart-empty { color: var(--color-muted); font-size: 13px; }
.training-bar-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.training-bar-label {
    width: 90px;
    flex: 0 0 90px;
    font-size: 12px;
    text-align: right;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.training-bar-track {
    flex: 1;
    height: 10px;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}
.training-bar-fill { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.training-bar-pct { flex: 0 0 38px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

/* Matrix table. */
.training-grid-wrap { overflow-x: auto; }
.training-grid { border-collapse: collapse; width: 100%; }
.training-grid th,
.training-grid td {
    border: 1px solid var(--color-border);
    padding: 6px 8px;
    vertical-align: middle;
}
.train-rowhead {
    min-width: 230px;
    background: var(--color-surface);
    text-align: left;
}
.train-col-head {
    background: #f5f3ff;
    font-size: 13px;
    white-space: nowrap;
}
.train-col-head .train-col-name { font-weight: 600; }
.train-col-empty { color: var(--color-muted); font-weight: 400; font-style: italic; }
.train-col-del { font-size: 12px; margin-left: 6px; vertical-align: middle; }

.train-row-header .train-rowhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.train-row-name {
    font: inherit;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 6px;
    flex: 1 1 120px;
    min-width: 0;
    background: transparent;
}
.train-row-name:hover  { border-color: var(--color-border); background: var(--color-surface); }
.train-row-name:focus  { border-color: var(--color-accent); background: var(--color-surface); outline: none; }
.train-row-header .train-cell-head { background: #fafaf9; }

.btn-mini {
    font: inherit;
    font-size: 11px;
    padding: 2px 7px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    cursor: pointer;
    white-space: nowrap;
}
.btn-mini:hover { border-color: var(--color-text); }
.train-checklist-btn.is-open { background: #f5f3ff; border-color: #c4b5fd; color: #5b21b6; }

.train-item-name { display: flex; align-items: center; gap: 6px; padding-left: 18px; font-size: 13px; }
.train-item-bullet { color: var(--color-muted); }
.train-item-text { flex: 1; min-width: 0; }
.train-item-del { font-size: 12px; }
.train-cell { text-align: center; }
.train-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.train-check input { width: 18px; height: 18px; cursor: pointer; }
.train-additem-input {
    width: 95%;
    font: inherit;
    font-size: 12px;
    padding: 5px 7px;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
}

/* Column multi-select dropdown. */
.training-colpicker-pop {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 6px;
    min-width: 240px;
    z-index: 100;
}
.training-colpicker-group + .training-colpicker-group { margin-top: 4px; border-top: 1px solid var(--color-border); padding-top: 4px; }
.training-colpicker-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 6px 6px 2px;
}
.training-colpicker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.training-colpicker-row:hover { background: #f5f3ff; }
.training-colpicker-empty { padding: 4px 6px; color: var(--color-muted); font-size: 12px; }

/* Training checklist popup */
.training-checklist-dialog { width: min(94vw, 460px); }
.training-cl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.training-cl-head h2 { margin: 0; font-size: 18px; }
.training-cl-hint { font-size: 12px; margin: 0 0 12px; }
.training-cl-add { display: flex; gap: 8px; margin-bottom: 10px; }
.training-cl-add input {
    flex: 1;
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 0;
}
.training-cl-add input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(15,118,110,0.12); }
.training-cl-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.training-cl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 4px 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 6px;
    background: var(--color-surface);
}
.training-cl-item-name { flex: 1; min-width: 0; }
.training-cl-empty { color: var(--color-muted); font-size: 13px; padding: 8px 2px; }

/* Per-cell checklist button + selection window */
.train-cell-checklist { min-width: 56px; }
.train-cell-checklist.is-complete {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
    font-weight: 600;
}
.training-cl-select { padding: 6px 10px; }
.training-cl-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: 100%;
}
.training-cl-check input { width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; }
.training-cl-check .training-cl-item-name { flex: 1; min-width: 0; }

/* Training checklist editor (headings, items, drag-reorder, indent) */
.training-cl-edit { display: flex; flex-direction: column; gap: 4px; }
.training-cl-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.training-cl-entry.is-indented { margin-left: 26px; }
.training-cl-handle {
    cursor: grab;
    color: var(--color-muted);
    user-select: none;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    touch-action: none;
}
.training-cl-handle:active { cursor: grabbing; }
.training-cl-name {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
}
.training-cl-name:hover { border-color: var(--color-border); }
.training-cl-name:focus { outline: none; border-color: var(--color-accent); background: var(--color-surface); }
.training-cl-heading { background: #f5f3ff; border-color: #ddd6fe; }
.training-cl-heading-name { font-weight: 700; color: #5b21b6; }
.training-cl-indent { min-width: 26px; text-align: center; }
.training-cl-entry.dragging { opacity: 0.4; }
.training-cl-entry.drop-target-above { box-shadow: inset 0 2px 0 var(--color-accent); }
.training-cl-entry.drop-target-below { box-shadow: inset 0 -2px 0 var(--color-accent); }
.training-cl-entry.drop-over { box-shadow: 0 0 0 2px var(--color-accent); }
.training-cl-entry.long-press-active { opacity: 0.6; }

/* Per-cell window: heading group labels + indented items */
.training-cl-grouphead {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5b21b6;
    padding: 8px 4px 2px;
    margin-top: 2px;
}
.training-cl-item.is-indented { margin-left: 22px; }

/* Training column header drag-reorder */
.train-col-head { position: relative; }
.train-col-handle {
    cursor: grab;
    color: var(--color-muted);
    user-select: none;
    font-size: 13px;
    line-height: 1;
    margin-right: 4px;
    touch-action: none;
}
.train-col-handle:active { cursor: grabbing; }
.train-col-head.dragging { opacity: 0.4; }
.train-col-head.drop-target-left  { box-shadow: inset 2px 0 0 var(--color-accent); }
.train-col-head.drop-target-right { box-shadow: inset -2px 0 0 var(--color-accent); }
.train-col-head.drop-over { box-shadow: 0 0 0 2px var(--color-accent); }
.train-col-head.long-press-active { opacity: 0.6; }

/* Training row header drag-reorder (up/down) */
.train-row-handle {
    cursor: grab;
    color: var(--color-muted);
    user-select: none;
    font-size: 13px;
    line-height: 1;
    margin-right: 4px;
    touch-action: none;
}
.train-row-handle:active { cursor: grabbing; }
.train-row-header.dragging { opacity: 0.4; }
.train-row-header.drop-target-above .train-rowhead { box-shadow: inset 0 2px 0 var(--color-accent); }
.train-row-header.drop-target-below .train-rowhead { box-shadow: inset 0 -2px 0 var(--color-accent); }
.train-row-header.drop-over .train-rowhead { box-shadow: 0 0 0 2px var(--color-accent); }
.train-row-header.long-press-active { opacity: 0.6; }

/* Form builder */
.forms-workspace { display: flex; flex-direction: column; gap: 10px; }
.forms-add-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.5fr) minmax(180px, 0.7fr) auto;
    gap: 8px;
    align-items: center;
}
.forms-add-row input,
.forms-add-row select,
.form-builder-meta input,
.form-builder-meta select,
.form-builder-meta textarea,
.form-field-settings input,
.form-field-settings select,
.form-field-settings textarea,
.task-form-field input,
.task-form-field select,
.task-form-field textarea {
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 7px 9px;
    background: var(--color-surface);
    min-width: 0;
}
.form-builder-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    margin-bottom: 8px;
}
.form-builder-card > summary {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(4, auto);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
}
.form-summary-name { font-weight: 700; }
.form-summary-meta,
.form-summary-attached,
.form-dirty { color: var(--color-muted); font-size: 12px; }
.form-summary-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}
.form-builder-shell {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(340px, 0.85fr) minmax(400px, 1fr);
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--color-border);
}
.form-builder-shell.is-generated-equipment-form {
    grid-template-columns: minmax(340px, 0.85fr) minmax(440px, 1.15fr);
}
.form-builder-shell.is-site-log-form {
    grid-template-columns: minmax(720px, 1.35fr) minmax(340px, 0.65fr);
}
.form-builder-main,
.form-field-settings,
.form-preview-pane {
    min-width: 0;
}
.form-builder-meta {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr);
    gap: 8px;
}
.form-builder-meta label,
.form-field-settings label,
.task-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-muted);
}
.form-builder-status {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--color-muted);
    font-size: 12px;
}
.form-builder-settings-row {
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--color-muted);
    font-size: 12px;
}
.form-builder-settings-row label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.form-builder-build-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.form-builder-section-head,
.form-builder-actions,
.task-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}
.form-builder-section-head h3,
.form-field-settings h3,
.form-preview-pane h3 { margin: 0; font-size: 15px; }
.site-log-builder {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.site-log-builder-head,
.site-log-builder-controls,
.site-log-config-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.site-log-site-type-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    width: 100%;
}
.site-log-site-type-picker label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
}
.site-log-builder-section {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px;
}
.site-log-builder-section > summary {
    cursor: pointer;
    font-weight: 700;
}
.chemical-pre-job-builder {
    margin-top: 12px;
}
.chemical-required-builder {
    margin-top: 12px;
}
.chemical-required-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.chemical-required-section {
    display: grid;
    gap: 6px;
    align-content: start;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px;
    background: var(--color-surface);
}
.chemical-required-section h3 {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--color-text);
}
.chemical-required-row {
    display: grid;
    grid-template-columns: minmax(84px, 1fr) minmax(120px, 0.95fr);
    gap: 6px;
    align-items: center;
    color: var(--color-muted);
    font-size: 12px;
}
.chemical-required-row select {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 5px 7px;
    background: var(--color-surface);
    font: inherit;
    font-size: 12px;
}
.chemical-pre-job-controls input,
.chemical-pre-job-controls select {
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 6px 8px;
    background: var(--color-surface);
    min-width: 0;
}
.chemical-pre-job-controls input {
    min-width: 180px;
}
.chemical-pre-job-builder .form-builder-section-head {
    margin-top: 8px;
}
.site-log-three-columns {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(200px, 0.9fr) minmax(120px, 0.5fr);
    gap: 10px;
}
.site-log-row-controls,
.site-log-row-aligned-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(200px, 0.9fr) minmax(120px, 0.5fr);
    gap: 10px;
}
.site-log-row-aligned-grid {
    align-items: stretch;
    margin-top: 8px;
}
.site-log-header-controls {
    margin-top: 6px;
}
.site-log-three-columns h4,
.site-log-row-controls h4 { margin: 0 0 6px; font-size: 13px; }
.site-log-config-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.site-log-config-row {
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
}
.site-log-config-row span {
    flex: 1 1 120px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.site-log-field-name {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}
.site-log-field-name span,
.site-log-field-name small {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.site-log-field-name small {
    color: var(--color-muted);
    font-size: 11px;
}
.site-log-site-field-row textarea {
    width: 100%;
    margin-top: 4px;
    min-height: 28px;
    padding: 4px 6px;
}
.site-log-lease-field-row > .site-log-config-row,
.site-log-site-field-row > .site-log-config-row {
    display: grid;
    grid-template-columns: 22px 22px minmax(0, 1fr) minmax(48px, 0.48fr) 22px;
    align-items: center;
    gap: 3px;
    padding: 3px;
}
.site-log-lease-field-row > .site-log-config-row .site-log-field-name,
.site-log-site-field-row > .site-log-config-row .site-log-field-name {
    flex: initial;
    min-height: 22px;
    font-size: 12px;
    line-height: 1.15;
}
.site-log-lease-field-row > .site-log-config-row .site-log-field-name span,
.site-log-site-field-row > .site-log-config-row .site-log-field-name span {
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
}
.site-log-lease-field-row > .site-log-config-row input[disabled],
.site-log-site-field-row > .site-log-config-row input[disabled] {
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 3px 4px;
    font-size: 11px;
}
.site-log-site-field-row label {
    margin-top: 3px;
}
.site-log-lease-field-row > .site-log-config-row .field-order-btn,
.site-log-lease-field-row > .site-log-config-row .btn-icon,
.site-log-site-field-row > .site-log-config-row .field-order-btn,
.site-log-site-field-row > .site-log-config-row .btn-icon,
.site-log-row-header-config > .site-log-config-row .field-order-btn,
.site-log-row-header-config > .site-log-config-row .btn-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
}
.site-log-row-header-config {
    grid-column: 1 / -1;
}
.site-log-row-header-config > .site-log-config-row {
    display: grid;
    grid-template-columns: 22px 22px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 3px;
    padding: 5px;
    background: #eef2f7;
}
.site-log-row-header-config strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
}
.site-log-move-btn {
    font-size: 15px;
    line-height: 1;
}
.site-log-reference-slot,
.site-log-notes-slot {
    min-height: 88px;
}
.site-log-reference-slot {
    height: 100%;
}
.site-log-reference-slot.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-muted);
    font-size: 12px;
}
.site-log-reference-slot .site-log-config-row {
    height: 100%;
    align-items: flex-start;
}
.site-log-notes-slot {
    display: flex;
    align-items: flex-start;
}
.site-log-preview-empty-exp,
.site-log-runtime-exp-empty {
    min-height: 30px;
}
.site-log-field-settings-window {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 10px;
    background: #fbfcfe;
}
.site-log-field-settings-head,
.site-log-field-settings-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}
.site-log-field-settings-head {
    justify-content: space-between;
}
.site-log-field-settings-head small {
    display: block;
    color: var(--color-muted);
    font-size: 11px;
}
.site-log-field-settings-group {
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
}
.site-log-field-settings-group > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
}
.site-log-field-settings-inline {
    flex-wrap: wrap;
}
.site-log-field-settings-inline select {
    flex: 1 1 88px;
}
.form-select-dropdown {
    min-width: 130px;
}
.form-select-dropdown > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text);
}
.rec-form-dropdown > summary {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 130px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 6px 8px;
    background: var(--color-surface);
}
.form-select-dropdown .check-grid {
    min-width: 220px;
    max-height: 220px;
    overflow: auto;
    padding: 6px;
    margin-top: 4px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    box-shadow: var(--shadow);
}
.form-field-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.form-field-item {
    display: grid;
    grid-template-columns: 24px 28px 28px minmax(0, 1fr) auto 32px;
    align-items: center;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fbfcfe;
}
.form-field-item.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(15,118,110,0.12); }
.field-grip,
.field-order-btn {
    min-width: 24px;
    min-height: 24px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
}
.field-order-btn:disabled { opacity: 0.4; cursor: default; }
.field-title-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.field-title-btn span { color: var(--color-muted); font-size: 12px; }
.field-pill {
    border: 1px solid #bbf7d0;
    color: #047857;
    background: #ecfdf5;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
}
.form-field-settings {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px;
    background: #fbfcfe;
}
.form-field-settings label + label,
.form-field-settings details,
.form-settings-inline { margin-top: 8px; }
.form-check-row { flex-direction: row !important; align-items: center; }
.form-settings-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.form-attachment-panel {
    margin-top: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px;
}
.form-attachment-panel summary,
.form-conditional-settings summary,
.task-form-card summary,
.task-form-submissions summary,
.task-form-submission summary {
    cursor: pointer;
    font-weight: 700;
}
.form-task-name-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 10px;
    margin-top: 8px;
    max-height: 220px;
    overflow: auto;
}
.form-task-name-grid label { display: flex; gap: 7px; align-items: center; font-size: 13px; }
.form-phone-preview {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: min(100%, 540px);
    min-height: 360px;
    margin: 8px auto 0;
    padding: 14px;
    border: 10px solid #1f2937;
    border-radius: 22px;
    background: #f8fafc;
}
.form-equipment-preview {
    border-width: 6px;
    border-radius: 14px;
}
.form-phone-title { font-weight: 700; color: var(--color-text); }
.preview-section { margin: 8px 0 0; font-size: 14px; }
.preview-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-muted); }
.preview-field input,
.preview-field select,
.preview-field textarea {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 7px 8px;
    background: #fff;
}
.site-log-preview-head {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr);
    gap: 8px;
}
.site-log-preview-head label,
.site-log-preview-hint {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-muted);
}
.site-log-preview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(56px, 0.3fr) 32px;
}
.site-log-preview .site-log-runtime-field label {
    grid-template-columns: minmax(0, 0.72fr) minmax(54px, 0.72fr);
    gap: 3px;
}
.site-log-preview input,
.site-log-preview select,
.site-log-preview textarea {
    min-width: 0;
}
.site-log-preview .site-log-number-na-control {
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
    gap: 3px;
}
.site-log-preview .site-log-runtime-field input,
.site-log-preview .site-log-runtime-field select,
.site-log-preview .site-log-runtime-exp input {
    padding: 4px 5px;
    font-size: 11px;
}
.chemical-treatment-preview .site-log-preview-head input,
.chemical-preview-tank-fields input,
.chemical-preview-tank-fields select,
.chemical-preview-wells input,
.chemical-preview-phase input,
.chemical-preview-phase select,
.chemical-preview-note {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 5px 6px;
    background: #fff;
    font-size: 12px;
}
.chemical-preview-pre-job {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}
.chemical-preview-pre-job .preview-field {
    display: grid;
    grid-template-columns: minmax(82px, 0.42fr) minmax(0, 1fr);
    column-gap: 7px;
    row-gap: 4px;
    align-items: center;
}
.chemical-preview-pre-job .preview-field > input,
.chemical-preview-pre-job .preview-field > select,
.chemical-preview-pre-job .preview-field > textarea,
.chemical-preview-pre-job .preview-field > .preview-choice-list {
    grid-column: 2;
    width: 100%;
}
.chemical-preview-pre-job .preview-field > small,
.chemical-preview-pre-job .preview-field > em {
    grid-column: 2;
}
.chemical-preview-tank-fields {
    display: grid;
    grid-template-columns: minmax(82px, 0.72fr) 58px 58px 62px;
    gap: 6px;
}
.chemical-preview-tank-name {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
}
.chemical-preview-tank-name span {
    color: var(--color-muted);
    font-weight: 600;
}
.chemical-preview-tank-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-muted);
    font-size: 12px;
}
.chemical-preview-wells {
    display: grid;
    gap: 4px;
    font-size: 12px;
}
.chemical-preview-wells > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 54px;
    gap: 5px;
    align-items: center;
}
.chemical-preview-phase {
    display: grid;
    gap: 4px;
    font-size: 12px;
}
.chemical-preview-phase > div {
    align-items: center;
}
.chemical-preview-phase-head,
.chemical-preview-chemical-row {
    display: grid;
    grid-template-columns: minmax(58px, 1fr) 38px 40px 54px 62px 28px;
    gap: 3px;
}
.chemical-preview-phase-head strong {
    align-self: end;
    text-align: center;
    font-size: 9px;
    line-height: 1.1;
}
.chemical-preview-phase-head strong:first-child {
    text-align: left;
}
.chemical-preview-phase-head strong,
.chemical-preview-chemical-row span,
.chemical-preview-tbg-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.chemical-preview-chemical-row span:first-child {
    padding-left: 24px;
}
.chemical-preview-well-heading {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 5px 7px;
    background: #eef2f7;
    font-weight: 700;
}
.chemical-preview-tbg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 32px;
    gap: 5px;
    padding: 5px 7px;
    border-left: 2px solid #cbd5e1;
    background: #f8fafc;
}
.chemical-preview-note {
    width: 26px;
    height: 26px;
    padding: 0;
    font-weight: 800;
    line-height: 1;
}
.chemical-preview-chemical-row input[type="number"] {
    width: 38px;
    text-align: right;
    padding-left: 4px;
    padding-right: 4px;
}
.chemical-preview-chemical-row input[type="checkbox"],
.chemical-preview-phase.is-phase2 input[type="checkbox"] {
    justify-self: center;
}
.chemical-preview-phase.is-phase2 > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(58px, 0.75fr)) 32px;
    gap: 5px;
}
.preview-choice-list,
.task-form-choice-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.preview-field small,
.task-form-field small { color: var(--color-muted); }
.preview-field em,
.task-form-field em { color: #b45309; font-style: normal; }
.saved-forms-mini-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.saved-form-mini-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto auto minmax(100px, 0.6fr);
    gap: 8px;
    align-items: center;
    font-size: 12px;
    border-top: 1px solid var(--color-border);
    padding-top: 6px;
}
.saved-form-mini-row span,
.saved-form-mini-row em { color: var(--color-muted); font-style: normal; }

/* Task detail forms */
.detail-forms-block {
    border-top: 1px solid var(--color-border);
    margin-top: 12px;
    padding-top: 10px;
}
.detail-forms-block h4 { margin: 0 0 8px; }
.task-form-launcher-host {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    z-index: 0;
}
.task-form-launcher-host .task-form-launch-card { display: none; }
.task-form-launcher-host > .task-detail,
.task-form-launcher-host > em,
.task-form-launcher-host > .flash { display: none; }
.task-form-picker-dialog {
    width: min(420px, 92vw);
    max-height: 82vh;
}
.task-form-picker-shell {
    display: grid;
    gap: 10px;
    min-width: 0;
}
.task-form-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.task-form-picker-head h2 {
    margin: 0;
    font-size: 18px;
}
.task-form-picker-list {
    display: grid;
    gap: 6px;
}
.task-form-picker-row {
    display: grid;
    grid-template-columns: 24px 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.task-form-picker-row:hover {
    border-color: #93c5fd;
    background: #f8fafc;
}
.task-form-picker-row .task-form-mini-icon {
    justify-self: center;
    color: #1d4ed8;
}
.task-form-picker-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-form-status-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 18px;
    height: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
}
.task-form-status-dot.is-complete {
    border-color: #15803d;
    background: #16a34a;
}
.task-form-status-dot.is-complete::after {
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(40deg) translate(-1px, -1px);
}
.task-form-status-dot.is-pending {
    border-color: #f59e0b;
    background: #fef3c7;
}
.task-form-status-dot.is-pending::after {
    content: "";
    width: 6px;
    height: 6px;
    border: 2px solid #b45309;
    border-left-color: transparent;
    border-radius: 999px;
}
.task-form-status-dot.is-draft {
    border-color: #64748b;
    background: #e2e8f0;
}
.task-form-status-dot.is-draft::after {
    content: "";
    width: 8px;
    height: 2px;
    background: #475569;
    transform: rotate(-35deg);
}
.task-form-status-dot.is-rejected {
    border-color: #b91c1c;
    background: #fee2e2;
}
.task-form-status-dot.is-rejected::before,
.task-form-status-dot.is-rejected::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 2px;
    background: #b91c1c;
}
.task-form-status-dot.is-rejected::before { transform: rotate(45deg); }
.task-form-status-dot.is-rejected::after { transform: rotate(-45deg); }
.task-form-status-dot.is-empty::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #94a3b8;
}
.task-form-card,
.task-form-submissions {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 8px;
    margin-bottom: 8px;
}
.task-form-card > summary,
.task-form-card-summary,
.task-form-submission > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.task-form-card-summary {
    flex-wrap: wrap;
}
.task-form-card-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}
.task-form-card summary em,
.task-form-card-summary em,
.task-form-submission summary em {
    color: var(--color-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}
.task-form-launch-card .task-form-description {
    margin-bottom: 0;
}
.task-form-dialog {
    width: min(1020px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(92vh, 920px);
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}
.task-form-dialog-shell {
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 920px);
    min-height: min(620px, calc(92vh - 24px));
    background: var(--color-surface);
}
.task-form-dialog-head {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
}
.task-form-dialog-head h2 {
    margin: 0;
    font-size: 18px;
    overflow-wrap: anywhere;
}
.task-form-dialog-head > div { min-width: 0; }
.task-form-dialog-head span {
    display: block;
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 12px;
}
.task-form-dialog .task-form-dialog-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    margin: 0;
}
.task-form-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    padding: 12px 14px 16px;
}
.task-form-dialog-body.task-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.task-form-dialog-body > *,
.task-form-dialog .task-form-field,
.task-form-dialog .equipment-task-form-meta,
.task-form-dialog .equipment-inspection-table-wrap,
.task-form-dialog input,
.task-form-dialog select,
.task-form-dialog textarea,
.task-form-dialog button {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
.task-form-dialog-body .task-form-description {
    grid-column: 1 / -1;
    margin-top: 0;
}
.task-form-dialog-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.08);
}
.task-form-dialog-footer .task-form-error {
    flex: 1 1 auto;
    min-height: 18px;
}
.task-form-dialog-footer .task-form-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.task-form-approval-panel {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #f59e0b;
    border-radius: var(--radius);
    background: #fef3c7;
    color: #78350f;
    font-size: 13px;
}
.task-form-approval-panel span {
    margin-right: auto;
    font-weight: 600;
}
.task-form-description { color: var(--color-muted); margin: 6px 0 10px; font-size: 13px; }
.task-form-fill {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.equipment-task-form-fill { display: block; }
.task-form-field,
.task-form-section,
.task-form-error,
.task-form-actions { grid-column: 1 / -1; }
.task-form-field span span { color: #b91c1c; }
.task-form-field input,
.task-form-field select,
.task-form-field textarea { width: 100%; }
.task-form-section {
    margin: 4px 0 0;
    font-size: 13px;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
}
.task-form-single-check { color: var(--color-text); }
.task-form-error { color: #b91c1c; font-size: 12px; min-height: 16px; }
.task-form-error.is-success { color: #166534; }
.task-submit-success,
.task-submit-success[disabled] {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
    opacity: 1;
}
.task-form-submission-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.task-form-submission {
    border-top: 1px solid var(--color-border);
    padding-top: 6px;
}
.task-form-submission dl {
    display: grid;
    grid-template-columns: minmax(120px, 0.5fr) minmax(0, 1fr);
    gap: 4px 8px;
    margin: 8px 0 0;
    font-size: 12px;
}
.task-form-submission dt { color: var(--color-muted); }
.task-form-submission dd { margin: 0; overflow-wrap: anywhere; }
.equipment-task-form-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 8px;
    margin: 8px 0 10px;
}
.preview-equipment-meta {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    margin-top: 0;
}
.equipment-inspection-date-field {
    max-width: 220px;
    margin: 0 0 8px;
}
.equipment-inspection-date-field input[type="date"] {
    min-height: 34px;
}
.equipment-task-form-meta div {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 7px 8px;
    background: #fbfcfe;
    min-width: 0;
}
.equipment-task-form-meta span {
    display: block;
    color: var(--color-muted);
    font-size: 11px;
}
.equipment-task-form-meta strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.site-log-runtime {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.site-log-runtime-head {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(140px, 180px) minmax(160px, 220px);
    gap: 8px;
    align-items: end;
}
.site-log-runtime-head label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-muted);
}
.site-log-runtime-page h5 {
    margin: 0 0 8px;
    font-size: 14px;
}
.site-log-runtime-lease-list {
    display: grid;
    gap: 8px;
}
.site-log-runtime-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(72px, 0.36fr) 36px;
    gap: 4px;
    align-items: stretch;
}
.site-log-runtime-grid-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted);
}
.site-log-runtime-row-header {
    grid-column: 1 / -1;
    min-width: 0;
    margin-left: -8px;
    padding: 5px 7px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #eef2f7;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.site-log-preview-grid .site-log-runtime-row-header {
    margin-left: -6px;
}
.site-log-runtime-field,
.site-log-runtime-field label,
.site-log-runtime-exp,
.site-log-runtime-notes {
    position: relative;
    min-width: 0;
    min-height: 30px;
}
.site-log-runtime-field label {
    display: grid;
    grid-template-columns: minmax(70px, 0.68fr) minmax(72px, 0.74fr);
    gap: 4px;
    align-items: center;
}
.site-log-runtime-field-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.2;
}
.site-log-runtime-field-name {
    min-width: 0;
    overflow-wrap: anywhere;
}
.site-log-required-star {
    flex: 0 0 auto;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.site-log-runtime-field-label .btn-icon {
    flex: 0 0 auto;
}
.site-log-runtime-exp {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.site-log-number-na-control {
    display: grid;
    grid-template-columns: minmax(54px, 0.42fr) minmax(54px, 0.58fr);
    gap: 4px;
}
.site-log-percent-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
}
.site-log-percent-suffix {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.site-log-runtime-field input,
.site-log-runtime-field select,
.site-log-runtime-exp input {
    width: 100%;
    min-width: 0;
    padding: 5px 6px;
    font-size: 12px;
}
.site-log-runtime-notes {
    display: flex;
    align-items: flex-start;
}
.site-log-runtime-notes > button {
    width: 32px;
    min-width: 32px;
    height: 28px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
    position: relative;
}
.site-log-runtime-notes > button::after {
    content: "N";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
}
.site-log-runtime input[readonly] {
    background: var(--color-bg);
    color: var(--color-muted);
}
.site-log-runtime-field.has-warning input,
.site-log-runtime-field.has-warning select,
.site-log-runtime-field.has-warning textarea {
    border-color: #f59e0b;
    background: #fffbeb;
}
.site-log-runtime-warning,
.site-log-runtime-na-marker {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.site-log-runtime-warning {
    color: #92400e;
}
.site-log-runtime-na-marker {
    color: var(--color-muted);
    font-weight: 700;
}
[data-site-log-not-applicable] input,
[data-site-log-not-applicable] select,
[data-site-log-not-applicable] textarea {
    opacity: 0.55;
}
.chemical-treatment-dialog {
    width: min(1120px, calc(100dvw - 24px));
}
.chemical-task-form-fill {
    display: block;
}
.chemical-runtime {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chemical-runtime-pre-job {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px;
    background: #fbfcfe;
}
.chemical-runtime-pre-job h5 {
    margin: 0 0 8px;
    font-size: 14px;
}
.chemical-runtime-pre-job-grid {
    margin: 0;
}
.chemical-runtime-pre-job-grid .task-form-field {
    display: grid;
    grid-template-columns: minmax(118px, 0.4fr) minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
}
.chemical-runtime-pre-job-grid .task-form-field > input,
.chemical-runtime-pre-job-grid .task-form-field > select,
.chemical-runtime-pre-job-grid .task-form-field > textarea,
.chemical-runtime-pre-job-grid .task-form-field > .task-form-choice-list {
    grid-column: 2;
    width: 100%;
}
.chemical-runtime-pre-job-grid .task-form-field > small,
.chemical-runtime-pre-job-grid .task-form-field > em {
    grid-column: 2;
}
.chemical-runtime-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    align-items: end;
}
.chemical-runtime-tank-fields {
    display: grid;
    grid-template-columns: minmax(112px, 0.72fr) 74px 74px 82px;
    gap: 8px;
    align-items: end;
}
.chemical-runtime-head label,
.chemical-runtime-tank-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-muted);
    font-size: 12px;
}
.chemical-runtime-head input,
.chemical-runtime-tank-fields input,
.chemical-runtime-tank-fields select,
.chemical-runtime-well-table input,
.chemical-runtime-well-table select,
.chemical-runtime-well-table textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 6px 7px;
    background: var(--color-surface);
    font: inherit;
    font-size: 12px;
}
.chemical-runtime-head input[readonly] {
    background: var(--color-bg);
    color: var(--color-muted);
}
.chemical-runtime-tank-fields input[readonly] {
    background: var(--color-bg);
    color: var(--color-muted);
}
.chemical-runtime-well-table input[readonly] {
    background: var(--color-bg);
    color: var(--color-muted);
}
.chemical-runtime-tank {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px;
    background: #fbfcfe;
}
.chemical-runtime-tank header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.chemical-runtime-tank h5 {
    margin: 0;
    font-size: 14px;
}
.chemical-runtime-tank h5 span {
    margin-left: 6px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
}
.chemical-runtime-totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    color: var(--color-muted);
    font-size: 12px;
}
.chemical-runtime-totals span {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--color-surface);
}
.chemical-runtime-well-table-wrap {
    margin-top: 10px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
}
.chemical-runtime-well-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}
.chemical-runtime-well-table th,
.chemical-runtime-well-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 6px;
    text-align: left;
    vertical-align: top;
}
.chemical-runtime-well-table th {
    background: var(--color-bg);
    color: var(--color-muted);
    font-weight: 700;
}
.chemical-runtime-well-table th:nth-child(1),
.chemical-runtime-well-table td:nth-child(1) { width: 18%; }
.chemical-runtime-well-table th:nth-child(2),
.chemical-runtime-well-table td:nth-child(2) { width: 18%; }
.chemical-runtime-well-table th:nth-child(3),
.chemical-runtime-well-table td:nth-child(3) { width: 96px; }
.chemical-runtime-well-table th:nth-child(4),
.chemical-runtime-well-table td:nth-child(4) { width: 74px; text-align: center; }
.chemical-runtime-well-table th:nth-child(5),
.chemical-runtime-well-table td:nth-child(5) { width: 118px; }
.chemical-runtime-well-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 4px auto 0;
}
.chemical-runtime-well-table textarea {
    resize: vertical;
    min-height: 32px;
}
.chemical-runtime-phases {
    display: grid;
    gap: 10px;
}
.chemical-runtime-phase {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fbfcfe;
    overflow: hidden;
}
.chemical-runtime-phase h5 {
    margin: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}
.chemical-runtime-phase-table-wrap {
    overflow-x: auto;
    background: var(--color-surface);
}
.chemical-runtime-phase-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}
.chemical-runtime-phase1-table { min-width: 620px; }
.chemical-runtime-phase2-table { min-width: 460px; }
.chemical-runtime-phase-table th,
.chemical-runtime-phase-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 7px 6px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.15;
}
.chemical-runtime-phase-table th:first-child,
.chemical-runtime-phase-table td:first-child {
    text-align: left;
}
.chemical-runtime-phase1-table th:nth-child(1),
.chemical-runtime-phase1-table td:nth-child(1) { width: auto; text-align: left; }
.chemical-runtime-phase1-table tr[data-chemical-treatment-line] td:first-child {
    padding-left: 36px;
}
.chemical-runtime-phase1-table th:nth-child(2),
.chemical-runtime-phase1-table td:nth-child(2) { width: 54px; }
.chemical-runtime-phase1-table th:nth-child(3),
.chemical-runtime-phase1-table td:nth-child(3) { width: 64px; }
.chemical-runtime-phase1-table th:nth-child(4),
.chemical-runtime-phase1-table td:nth-child(4) { width: 86px; }
.chemical-runtime-phase1-table th:nth-child(5),
.chemical-runtime-phase1-table td:nth-child(5) { width: 100px; }
.chemical-runtime-phase1-table th:nth-child(6),
.chemical-runtime-phase1-table td:nth-child(6) { width: 50px; }
.chemical-runtime-phase2-table th:nth-child(1),
.chemical-runtime-phase2-table td:nth-child(1) { width: auto; text-align: left; }
.chemical-runtime-phase2-table th:nth-child(2),
.chemical-runtime-phase2-table td:nth-child(2) { width: 104px; }
.chemical-runtime-phase2-table th:nth-child(3),
.chemical-runtime-phase2-table td:nth-child(3) { width: 104px; }
.chemical-runtime-phase2-table th:nth-child(4),
.chemical-runtime-phase2-table td:nth-child(4) { width: 50px; }
.chemical-runtime-phase-table th {
    background: var(--color-bg);
    color: var(--color-muted);
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}
.chemical-runtime-phase-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 auto;
}
.chemical-runtime-gal-input {
    width: 42px;
    max-width: 42px;
    text-align: right;
    padding: 5px 4px;
}
.chemical-runtime-phase-table select {
    width: auto;
    min-width: 72px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 5px 6px;
    background: var(--color-surface);
    font: inherit;
}
.chemical-well-site-name,
.chemical-runtime-site-name {
    display: block;
    font-weight: 700;
}
.chemical-well-site-description,
.chemical-runtime-site-description {
    display: block;
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.chemical-runtime-well-heading th {
    background: #eef2f7;
    color: var(--color-text);
    text-align: left;
    font-size: 13px;
    font-weight: 800;
}
.chemical-runtime-tbg-row td {
    background: #f8fafc;
    text-align: left;
}
.chemical-runtime-tbg-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.chemical-runtime-tbg-control span {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.chemical-notes-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border-color: #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}
.chemical-notes-button:hover,
.chemical-notes-button.has-notes {
    border-color: #0284c7;
    background: #e0f2fe;
    color: #075985;
}
.chemical-notes-dialog {
    width: min(420px, calc(100vw - 24px));
}
.chemical-notes-dialog form {
    display: grid;
    gap: 10px;
}
.chemical-notes-dialog h3 {
    margin: 0;
    font-size: 16px;
}
.chemical-notes-dialog textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px;
    font: inherit;
}
.chemical-balanced { color: #166534; }
.chemical-variance { color: #b91c1c; }
.equipment-inspection-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.equipment-inspection-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
    font-size: 12px;
}
.equipment-inspection-compact-table {
    min-width: 480px;
    table-layout: fixed;
}
.equipment-inspection-compact-table th:nth-child(1),
.equipment-inspection-compact-table td:nth-child(1) { width: auto; }
.equipment-inspection-compact-table th:nth-child(2),
.equipment-inspection-compact-table td:nth-child(2) { width: 132px; }
.equipment-inspection-compact-table th:nth-child(3),
.equipment-inspection-compact-table td:nth-child(3) { width: 54px; }
.equipment-service-compact-table th:nth-child(2),
.equipment-service-compact-table td:nth-child(2) { width: 190px; }
.equipment-service-heading-content {
    grid-template-columns: 24px minmax(0, 1fr) auto 22px;
}
.equipment-service-heading-counts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.equipment-inspection-table th,
.equipment-inspection-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.equipment-inspection-table td { position: relative; }
.equipment-inspection-table th {
    background: #f8fafc;
    color: var(--color-muted);
    font-weight: 700;
}
.equipment-inspection-table tr:last-child td { border-bottom: 0; }
.equipment-inspection-heading td {
    background: #f8fafc;
    font-weight: 700;
}
.equipment-inspection-heading-content {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.equipment-inspection-heading-toggle {
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.equipment-inspection-heading-toggle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(-45deg);
    transition: transform 120ms ease;
}
.equipment-inspection-heading:not(.is-collapsed) .equipment-inspection-heading-toggle::before {
    transform: rotate(45deg);
}
.equipment-inspection-heading-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-inspection-heading-counts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.equipment-inspection-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}
.equipment-inspection-count.is-passed { background: rgba(22, 163, 74, 0.72); }
.equipment-inspection-count.is-failed { background: rgba(220, 38, 38, 0.72); }
.equipment-inspection-count.is-notes { background: rgba(249, 115, 22, 0.76); }
.equipment-inspection-heading-complete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 22px;
    color: #16a34a;
    font-size: 16px;
    font-weight: 900;
}
.equipment-inspection-heading-complete[hidden] {
    visibility: hidden;
    display: inline-flex;
}
.equipment-inspection-unit-name span,
.equipment-inspection-heading span {
    display: inline-block;
    min-width: 6rem;
}
.equipment-inspection-heading .equipment-inspection-heading-content span {
    display: inline-flex;
    min-width: 0;
}
.equipment-inspection-unit-details {
    min-width: 0;
}
.equipment-inspection-unit-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.equipment-inspection-unit-details summary span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.equipment-inspection-info-button {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1px solid #94a3b8;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.equipment-inspection-info-button:hover {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #075985;
}
.equipment-maintenance-notes-dialog pre {
    max-width: min(620px, calc(100vw - 72px));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.equipment-inspection-unit-details dl {
    display: grid;
    grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
    gap: 3px 8px;
    margin: 7px 0 0;
    padding: 7px 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
}
.equipment-inspection-unit-details dt {
    color: var(--color-muted);
    font-weight: 500;
}
.equipment-inspection-unit-details dd {
    margin: 0;
    color: var(--color-text);
}
.equipment-inspection-table .depth-1 .equipment-inspection-unit-name,
.equipment-inspection-table .depth-1 td:first-child { padding-left: 22px; }
.equipment-inspection-table .depth-2 .equipment-inspection-unit-name,
.equipment-inspection-table .depth-2 td:first-child { padding-left: 38px; }
.equipment-inspection-table .depth-3 .equipment-inspection-unit-name,
.equipment-inspection-table .depth-3 td:first-child { padding-left: 54px; }
.equipment-inspection-table select,
.equipment-inspection-table textarea {
    width: 100%;
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 6px 7px;
    background: var(--color-surface);
}
.equipment-inspection-result-select {
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.equipment-inspection-result-select.is-passed {
    border-color: #16a34a;
    background: #dcfce7;
    color: #166534;
}
.equipment-inspection-result-select.is-failed {
    border-color: #dc2626;
    background: #fee2e2;
    color: #991b1b;
}
.equipment-inspection-result-select.is-see-notes {
    border-color: #f97316;
    background: #ffedd5;
    color: #9a3412;
}
.equipment-notes-button {
    width: 28px;
    height: 28px;
    font-weight: 700;
    padding: 0;
}
.equipment-notes-popover {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 36px;
    width: min(320px, calc(100vw - 48px));
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    box-shadow: var(--shadow);
}
.equipment-notes-popover textarea { min-height: 82px; }

.task-form-dialog .equipment-inspection-table-wrap {
    overflow-x: clip;
}
.task-form-dialog .equipment-inspection-table,
.task-form-dialog .equipment-inspection-compact-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}
.task-form-dialog .equipment-inspection-table th,
.task-form-dialog .equipment-inspection-table td {
    overflow-wrap: anywhere;
}
.task-form-dialog .equipment-inspection-table select,
.task-form-dialog .equipment-inspection-table textarea {
    box-sizing: border-box;
}
.task-form-dialog .equipment-inspection-compact-table th:nth-child(2),
.task-form-dialog .equipment-inspection-compact-table td:nth-child(2) {
    width: clamp(104px, 34%, 132px);
}
.task-form-dialog .equipment-service-compact-table th:nth-child(2),
.task-form-dialog .equipment-service-compact-table td:nth-child(2) {
    width: clamp(128px, 42%, 190px);
}
.task-form-dialog .equipment-inspection-compact-table th:nth-child(3),
.task-form-dialog .equipment-inspection-compact-table td:nth-child(3) {
    width: 48px;
}
.task-form-dialog .equipment-inspection-table .depth-1 .equipment-inspection-unit-name,
.task-form-dialog .equipment-inspection-table .depth-1 td:first-child { padding-left: 16px; }
.task-form-dialog .equipment-inspection-table .depth-2 .equipment-inspection-unit-name,
.task-form-dialog .equipment-inspection-table .depth-2 td:first-child { padding-left: 24px; }
.task-form-dialog .equipment-inspection-table .depth-3 .equipment-inspection-unit-name,
.task-form-dialog .equipment-inspection-table .depth-3 td:first-child { padding-left: 32px; }

@media (max-width: 980px) {
    .form-builder-shell { grid-template-columns: 1fr; }
    .form-builder-card > summary { grid-template-columns: 1fr; }
    .form-builder-meta { grid-template-columns: 1fr; }
    .site-log-three-columns,
    .site-log-row-controls,
    .site-log-row-aligned-grid,
    .site-log-preview-head,
    .site-log-runtime-head,
    .chemical-runtime-head,
    .chemical-runtime-tank-fields,
    .chemical-preview-tank-fields,
    .chemical-reading-grid,
    .chemical-setup-tank,
    .site-log-row-aligned-grid { grid-template-columns: 1fr; }
    .chemical-runtime-tank-fields {
        grid-template-columns: minmax(96px, 0.72fr) 66px 66px 72px;
    }
    .chemical-preview-tank-fields {
        grid-template-columns: minmax(74px, 0.72fr) 54px 54px 58px;
    }
    .chemical-setup-tank {
        grid-template-columns: 1fr 1fr;
    }
    .chemical-setup-area-meta {
        grid-template-columns: 1fr;
    }
    .chemical-tank-row summary { grid-template-columns: 1fr 1fr; }
    .saved-form-mini-row { grid-template-columns: 1fr 1fr; }
    .equipment-task-form-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .forms-add-row,
    .task-form-fill,
    .task-form-dialog-body.task-form-grid,
    .task-form-submission dl,
    .equipment-task-form-meta { grid-template-columns: 1fr; }
    .chemical-tank-row summary,
    .chemical-preview-wells > div { grid-template-columns: 1fr; }
    .chemical-status { justify-self: start; }
    .chemical-runtime-tank header {
        align-items: flex-start;
        flex-direction: column;
    }
    .chemical-runtime-totals {
        justify-content: flex-start;
    }
    .task-form-dialog {
        width: calc(100dvw - 12px);
        max-width: calc(100dvw - 12px);
        max-height: calc(100dvh - 12px);
    }
    .task-form-dialog-shell {
        min-height: 0;
        max-height: calc(100dvh - 12px);
    }
    .task-form-dialog-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .task-form-dialog-footer .task-form-actions {
        width: 100%;
    }
    .task-form-dialog-footer .task-form-actions button {
        flex: 1 1 0;
        min-width: 0;
    }
    .task-form-dialog .equipment-inspection-table th,
    .task-form-dialog .equipment-inspection-table td {
        padding: 5px 4px;
        font-size: 11px;
    }
    .task-form-dialog .equipment-inspection-compact-table th:nth-child(2),
    .task-form-dialog .equipment-inspection-compact-table td:nth-child(2) {
        width: clamp(92px, 36%, 124px);
    }
    .task-form-dialog .equipment-service-compact-table th:nth-child(2),
    .task-form-dialog .equipment-service-compact-table td:nth-child(2) {
        width: clamp(112px, 42%, 152px);
    }
    .task-form-dialog .equipment-inspection-compact-table th:nth-child(3),
    .task-form-dialog .equipment-inspection-compact-table td:nth-child(3) {
        width: 38px;
    }
    .task-form-dialog .equipment-inspection-heading td {
        padding: 6px 4px !important;
    }
    .task-form-dialog .equipment-inspection-heading-content,
    .task-form-dialog .equipment-service-heading-content {
        grid-template-columns: 24px minmax(0, 1fr) auto 20px;
        gap: 6px;
    }
    .task-form-dialog .equipment-inspection-table select,
    .task-form-dialog .equipment-inspection-table textarea {
        padding: 5px 4px;
        font-size: 11px;
    }
    .task-form-dialog .equipment-inspection-unit-name span,
    .task-form-dialog .equipment-inspection-unit-details summary span {
        min-width: 0;
    }
    .task-form-dialog .equipment-notes-button {
        width: 28px;
        min-width: 28px;
    }
    .task-form-dialog .equipment-inspection-unit-details dl {
        grid-template-columns: minmax(0, 1fr);
    }
    .form-field-item { grid-template-columns: 24px 28px 28px minmax(0, 1fr) 32px; }
    .field-pill { display: none; }
}

/* ===== Print: Reports ============================================== */
/* .print-only is shown only when printing (e.g. the report title that
   stands in for the on-screen toolbar/type selector). */
.print-only { display: none; }
.reports-print-btn { margin-left: auto; }

@media print {
    /* Hide app chrome and anything tagged .no-print (the reports toolbar,
       schedule pill, network/queue indicators) so only the report prints. */
    .topbar,
    .no-print,
    .schedule-bar-btn,
    #net-indicator,
    #queue-indicator,
    .filter-multi-popover { display: none !important; }

    /* Full-width page; drop the centered column + padding. */
    .main { padding: 0; margin: 0; max-width: none; }
    body { background: #fff; }

    /* Reveal the print-only report title. */
    .print-only { display: block; }
    .report-print-title { font-size: 16px; margin: 0 0 10px; }

    /* Let the hours/ddb/alerts pivots print their full width instead of
       scrolling inside a fixed-height/overflow box. */
    .hours-grid-wrap { overflow: visible !important; max-height: none !important; }
    .log-list { max-height: none !important; overflow: visible !important; }

    /* Tables: repeat the header on each page, keep rows intact, force
       borders/fills to render. */
    table { width: 100%; border-collapse: collapse; }
    thead { display: table-header-group; }
    tr, td, th { page-break-inside: avoid; }
    .reports-card { page-break-inside: avoid; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    @page { margin: 0.5in; }
}