/*
 * Field Tracking — canonical interface layer
 * Loaded after the legacy application stylesheet so every breakpoint and
 * shared component has one predictable final definition.
 */

:root {
  --ui-bg: #f2f5f3;
  --ui-card: #ffffff;
  --ui-card-soft: #f8faf9;
  --ui-text: #17211b;
  --ui-muted: #647168;
  --ui-line: #dce4de;
  --ui-primary: #17633f;
  --ui-primary-strong: #104b31;
  --ui-primary-soft: #e8f3ec;
  --ui-danger: #a43d28;
  --ui-warning: #a36b17;
  --ui-radius-sm: 9px;
  --ui-radius: 14px;
  --ui-radius-lg: 18px;
  --ui-shadow-sm: 0 3px 12px rgba(24, 47, 33, .055);
  --ui-shadow: 0 14px 38px rgba(24, 47, 33, .085);
  --ui-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Role hierarchy: make protected accounts visibly read-only. */
.admin-user.account-locked {
  opacity: .72;
  background: color-mix(in srgb, var(--ui-card) 94%, var(--ui-line));
}
.admin-user.account-locked :is(input, select, fieldset), .role-card.role-locked .permission-grid {
  cursor: not-allowed;
}
.role-heading { flex-wrap: wrap; }
.role-heading > label { min-width: 190px; }
.role-heading label small { display: block; margin-top: 4px; color: var(--ui-muted); font-size: 9px; }

/* Per-user, multi-person Active Work filter. */
.ticket-search-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-line); }
.ticket-search-form > label { display: grid; min-width: 0; gap: 4px; color: var(--ui-muted); font-size: 9px; font-weight: 800; letter-spacing: .035em; }
.ticket-search-input { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; min-height: 41px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); }
.ticket-search-input > span { color: var(--ui-primary); font-size: 18px; text-align: center; }
.ticket-search-input input { width: 100%; min-width: 0; height: 39px; margin: 0 !important; padding: 7px 10px 7px 0 !important; border: 0 !important; background: transparent !important; color: var(--ui-text) !important; box-shadow: none !important; }
.ticket-search-form > .button { min-width: 82px; }
.ticket-search-clear { color: var(--ui-danger); }
html[data-theme="dark"] .ticket-search-input { background: var(--ui-card-soft); border-color: var(--ui-line); }
.work-queue-controls .assignment-filter { position: relative; flex: 0 0 auto; width: min(100%, 290px); margin: 0; }
.work-queue-controls .assignment-filter-locked { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-card-soft); }
.work-queue-controls .assignment-filter-locked > span { color: var(--ui-muted); font-size: 9px; font-weight: 750; }
.work-queue-controls .assignment-filter-locked > strong { color: var(--ui-text); font-size: 11px; }
.work-queue-controls .assignment-filter > summary {
  display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 11px; border: 1px solid var(--ui-line); border-radius: 10px;
  background: var(--ui-paper); color: var(--ui-text); list-style: none; cursor: pointer;
}
.work-queue-controls .assignment-filter > summary::-webkit-details-marker { display: none; }
.work-queue-controls .assignment-filter > summary > span { color: var(--ui-muted); font-size: 9px; font-weight: 750; }
.work-queue-controls .assignment-filter > summary > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.work-queue-controls .assignment-filter > summary::after { content: "⌄"; color: var(--ui-primary); font-weight: 900; }
.work-queue-controls .assignment-filter[open] > summary { border-color: color-mix(in srgb, var(--ui-primary) 48%, var(--ui-line)); }
.work-queue-controls .assignment-filter > form {
  position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; width: min(340px, calc(100vw - 32px));
  padding: 13px; border: 1px solid var(--ui-line); border-radius: 13px;
  background: var(--ui-card); box-shadow: 0 18px 42px rgba(14, 31, 20, .2);
}
.assignment-everyone, .assignment-person-list label {
  display: flex !important; align-items: center !important; flex-direction: row !important; gap: 9px !important;
  width: 100% !important; padding: 9px 10px; border: 1px solid var(--ui-line); border-radius: 9px;
  background: var(--ui-card-soft); color: var(--ui-text) !important; font-size: 11px !important; text-transform: none !important; cursor: pointer;
}
.assignment-everyone { margin-bottom: 8px; }
.assignment-everyone span { display: flex; flex-direction: column; gap: 1px; }
.assignment-everyone small { color: var(--ui-muted); font-size: 8px; }
.assignment-person-list { display: grid; grid-template-columns: 1fr; gap: 6px; max-height: 320px; margin-bottom: 10px; overflow-y: auto; }
.assignment-everyone input, .assignment-person-list input { flex: 0 0 auto; width: 17px !important; height: 17px; margin: 0 !important; accent-color: var(--ui-primary); }
.assignment-everyone:has(input:checked), .assignment-person-list label:has(input:checked) { border-color: #7eaa8d; background: #eaf4ed; color: #205d3d !important; }
.assignment-filter form > .button { width: 100%; }
html[data-theme="dark"] :is(.assignment-everyone, .assignment-person-list label):has(input:checked) { border-color: #679279; background: #294136; color: #c5ead2 !important; }
@media screen and (min-width: 901px) {
  .work-queue-controls {
    grid-template-columns: minmax(250px, 1fr) minmax(220px, 280px) auto auto;
    align-items: center;
  }
  .ticket-search-form {
    grid-column: auto;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .ticket-search-form > label > span:first-child { display: none; }
  .work-queue-filter-row { grid-column: auto; }
  .work-queue-sort { align-self: center; }
}
.saved-work-views { display: flex; align-items: center; gap: 4px; }
.saved-work-views select { width: 126px; min-height: 40px; padding: 6px 25px 6px 8px; font-size: 9px; }
.saved-work-views button { min-width: 36px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-card); color: var(--ui-primary); font: 800 9px var(--ui-font); cursor: pointer; }
.project-select-row.can-edit-ticket.without-bulk-ticket { grid-template-columns: minmax(0, 1fr) 42px; }
.work-pagination {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 14px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 12px;
  background: var(--ui-card); box-shadow: var(--ui-shadow-sm);
}
.work-pagination > strong { color: var(--ui-muted); font-size: 10px; text-align: center; }
.work-pagination > :last-child { justify-self: end; }
.work-pagination .button { min-height: 36px; padding: 7px 11px; }
.stats .history-status-card { margin-left: 8px; border-left-width: 3px; }
.stale-ticket-card { box-shadow: inset 0 0 0 1px rgba(163,107,23,.18), var(--ui-shadow-sm) !important; }
.stale-ticket-card.stale-14 { box-shadow: inset 0 0 0 1px rgba(174,83,38,.25), var(--ui-shadow-sm) !important; }
.stale-ticket-card.stale-30 { box-shadow: inset 0 0 0 2px rgba(164,61,40,.34), var(--ui-shadow-sm) !important; }
.stale-ticket-label { padding: 3px 6px; border-radius: 999px; background: #fff0df; color: #8a5512 !important; font-size: 8px; font-weight: 850; white-space: nowrap; }
html[data-theme="dark"] .stale-ticket-label { background: #493821; color: #f0ca8c !important; }
@media screen and (max-width: 700px) {
  .ticket-search-form { grid-template-columns: minmax(0, 1fr) auto; }
  .ticket-search-form > label { grid-column: 1 / -1; }
  .ticket-search-form > .button { width: 100%; }
  .work-queue-controls .assignment-filter { width: 100%; }
  .work-queue-controls .assignment-filter > form {
    position: fixed; z-index: 115; top: auto; right: 8px; bottom: calc(78px + env(safe-area-inset-bottom)); left: 8px;
    width: auto; max-height: calc(100dvh - 105px); overflow-y: auto; border-radius: 17px;
  }
  .project-select-row.can-edit-ticket.without-bulk-ticket { grid-template-columns: minmax(0, 1fr) 38px; }
  .work-pagination { position: sticky; bottom: 78px; z-index: 8; padding: 8px; }
  .work-pagination > strong { font-size: 9px; }
  .stats .history-status-card { margin-left: 3px; }
  .saved-work-views { grid-column: 1/-1; }
  .saved-work-views select { flex: 1; width: auto; }
}

/* Quick ticket editing is a centered overlay, independent of queue/card clipping. */
.project-select-row:has(.inline-ticket-edit[open]) {
  position: relative;
  z-index: 110;
  transform: none !important;
}
.inline-ticket-edit[open]::before {
  content: "";
  position: fixed;
  z-index: 108;
  inset: 0;
  background: rgba(9, 18, 12, .58);
  backdrop-filter: blur(3px);
}
.inline-ticket-edit[open] > summary { position: relative; z-index: 111; }
.inline-ticket-edit-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.inline-ticket-edit-heading strong { font-size: 17px; }
.inline-ticket-edit-heading button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); color: var(--ui-text); font-size: 22px; cursor: pointer; }
@media screen and (min-width: 1px) { .inline-ticket-edit > form {
  position: fixed;
  z-index: 112;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(420px, calc(100vw - 28px));
  max-height: min(680px, calc(100dvh - 32px));
  padding: 20px;
  overflow-y: auto;
  border-radius: 18px;
  transform: translate(-50%, -50%);
} }
@media screen and (max-width: 700px) {
  .inline-ticket-edit > form {
    top: auto;
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 100px);
    padding: 17px;
    transform: none;
  }
}

/* Compact ticket editing: single-row technician choices without oversized
   cards or unused two-column space. */
@media screen and (min-width: 701px) {
  .page-project #project-details .form-grid.compact {
    gap: 9px 12px;
    margin-top: 11px;
  }
  .page-project #project-details .form-grid.compact > label :is(input,select) {
    min-height: 35px;
    margin-top: 4px;
    padding: 7px 9px;
  }
  .page-project #project-details .form-grid.compact > label textarea {
    margin-top: 4px;
    padding: 8px 9px;
  }
  .page-project #project-details .project-assignees {
    grid-column: 1 !important;
    align-self: start;
    max-height: 205px;
    gap: 4px;
    padding: 7px;
    overflow-y: auto;
  }
  .page-project #project-details .project-assignees label {
    min-height: 30px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 10px;
  }
  .page-project #project-details .project-assignees input {
    width: 15px;
    height: 15px;
  }
  .page-project #project-details .project-assignees small {
    padding: 2px 3px;
    font-size: 8px;
    line-height: 1.3;
  }

  :is(.page-project,.page-onsite) #log-time .stack {
    gap: 8px;
    margin-top: 10px;
  }
  :is(.page-project,.page-onsite) .time-worker-picker {
    padding: 7px;
    border-radius: 9px;
  }
  :is(.page-project,.page-onsite) .time-worker-picker > div {
    max-height: 170px;
    gap: 4px;
    overflow-y: auto;
  }
  :is(.page-project,.page-onsite) .time-worker-picker label {
    min-height: 30px;
    gap: 6px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 10px;
  }
  :is(.page-project,.page-onsite) .time-worker-picker input {
    width: 15px;
    height: 15px;
  }
  :is(.page-project,.page-onsite) .time-worker-picker > small {
    margin-top: 5px;
    font-size: 8px;
  }
  :is(.page-project,.page-onsite) .duplicate-time-override {
    gap: 6px;
    padding: 6px 8px;
    font-size: 8px !important;
  }
  :is(.page-project,.page-onsite) #log-time :is(input,select) {
    min-height: 35px;
    margin-top: 4px;
    padding: 7px 9px;
  }
  :is(.page-project,.page-onsite) #log-time textarea {
    margin-top: 4px;
    padding: 8px 9px;
  }
}

@media screen and (max-width: 700px) {
  :is(.page-project,.page-onsite) :is(.project-assignees,.time-worker-picker) { padding: 8px; gap: 5px; }
  :is(.page-project,.page-onsite) :is(.project-assignees,.time-worker-picker) label {
    min-height: 40px;
    padding: 7px 8px;
  }
}

/* Clean, light weekly report output regardless of the user's screen theme. */
@media print {
  @page { size: letter portrait; margin: .48in; }
  html, html[data-theme="dark"], body.page-reports {
    color-scheme: light !important;
    background: #fff !important;
    color: #18231c !important;
  }
  body.page-reports {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.page-reports::before { display: none !important; }
  body.page-reports .topbar,
  body.page-reports .mobile-bottom-nav,
  body.page-reports .report-range-form,
  body.page-reports .general-time-entry,
  body.page-reports .report-actions,
  body.page-reports .report-card-toggle,
  body.page-reports .report-hour-editor form,
  body.page-reports .general-time-hours form,
  body.page-reports .text-danger,
  body.page-reports > footer { display: none !important; }
  body.page-reports .shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.page-reports .weekly-report-heading {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 3px solid #245d3c !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #18231c !important;
  }
  body.page-reports .weekly-report-heading .eyebrow { color: #245d3c !important; font-size: 7pt !important; }
  body.page-reports .weekly-report-heading h1 { margin: 2px 0 3px !important; color: #18231c !important; font-size: 23pt !important; line-height: 1 !important; }
  body.page-reports .weekly-report-heading p { margin: 0 !important; color: #4d5d53 !important; font-size: 9pt !important; }
  body.page-reports .weekly-report-totals {
    display: grid !important;
    grid-template-columns: 1fr 1.35fr 1fr 1fr !important;
    gap: 7px !important;
    margin: 0 0 12px !important;
  }
  body.page-reports .weekly-report-totals > div {
    min-width: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid #c5d0c8 !important;
    border-radius: 5px !important;
    background: #f7f9f7 !important;
    box-shadow: none !important;
    color: #18231c !important;
    break-inside: avoid;
  }
  body.page-reports .weekly-report-totals .total-hours { background: #eaf3ed !important; border-color: #9fb9a7 !important; }
  body.page-reports .weekly-report-totals > div > span { color: #526258 !important; font-size: 6.5pt !important; }
  body.page-reports .weekly-report-totals > div > strong { margin: 3px 0 !important; color: #245d3c !important; font-size: 19pt !important; line-height: 1 !important; }
  body.page-reports .weekly-report-totals small { color: #657269 !important; font-size: 6.5pt !important; }
  body.page-reports .report-breakdown > div { gap: 3px !important; margin-top: 5px !important; }
  body.page-reports .report-breakdown > div > span { padding: 3px 5px !important; background: #e8ece9 !important; color: #27352c !important; font-size: 7pt !important; }
  body.page-reports .general-time-report,
  body.page-reports .weekly-report-card {
    margin: 0 0 9px !important;
    overflow: visible !important;
    border: 1px solid #bdc9c0 !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #18231c !important;
    break-inside: avoid-page;
  }
  body.page-reports .general-time-report-heading,
  body.page-reports .weekly-report-card > header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 9px 11px !important;
    border-bottom: 1px solid #bdc9c0 !important;
    background: #eef3ef !important;
    color: #18231c !important;
  }
  body.page-reports .weekly-report-card h2 { margin: 4px 0 3px !important; font-size: 12pt !important; line-height: 1.15 !important; }
  body.page-reports .weekly-report-card :is(a, p, strong, span, small),
  body.page-reports .general-time-report :is(p, strong, span, small) { color: inherit !important; text-decoration: none !important; }
  body.page-reports .badge { padding: 2px 5px !important; border: 1px solid #9fac9f !important; background: #fff !important; color: #34483a !important; font-size: 6pt !important; }
  body.page-reports .project-report-hours { flex: 0 0 auto; text-align: right !important; }
  body.page-reports .project-report-hours strong { color: #245d3c !important; font-size: 20pt !important; line-height: 1 !important; }
  body.page-reports .project-report-hours span { color: #526258 !important; font-size: 6pt !important; }
  body.page-reports .weekly-report-body {
    display: grid !important;
    grid-template-columns: 1.15fr .85fr !important;
    gap: 18px !important;
    padding: 10px 11px !important;
    background: #fff !important;
    color: #18231c !important;
  }
  body.page-reports .weekly-report-body[hidden] { display: grid !important; }
  body.page-reports .weekly-report-body h3 { margin: 0 0 5px !important; color: #245d3c !important; font-size: 7pt !important; }
  body.page-reports :is(.report-type-list > div, .report-entry-notes p, .report-parts li) {
    padding: 4px 0 !important;
    border-color: #d7ded9 !important;
    color: #18231c !important;
    font-size: 7.5pt !important;
  }
  body.page-reports .report-entry-row { display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px !important; }
  body.page-reports .report-hour-editor summary,
  body.page-reports .report-hours-static { color: #245d3c !important; font-weight: 700 !important; }
  body.page-reports .general-time-list article { padding: 8px 11px !important; border-color: #d7ded9 !important; }
  body.page-reports .weekly-report-list { display: block !important; }
  body.page-reports .weekly-report-footer {
    display: flex !important;
    margin-top: 13px !important;
    padding-top: 8px !important;
    border-top: 2px solid #245d3c !important;
    color: #526258 !important;
    font-size: 7pt !important;
  }
}

/* Roles & Permissions: grouped, searchable, and compact until needed. */
@media screen {
  .permission-manager { display: grid; gap: 14px; margin-top: 18px; }
  .permission-manager [hidden] { display: none !important; }
  .permission-manager-toolbar {
    display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 18px;
    padding: 14px; border: 1px solid var(--ui-line); border-radius: 14px;
    background: var(--ui-card-soft);
  }
  .permission-manager-toolbar label { display: grid; gap: 5px; color: var(--ui-muted); font-size: 9px; font-weight: 800; }
  .permission-manager-toolbar input { min-height: 42px; background: var(--ui-card); }
  .permission-manager-toolbar > div { display: flex; align-items: flex-end; flex-direction: column; gap: 3px; padding-bottom: 4px; }
  .permission-manager-toolbar > div strong { font-size: 12px; }
  .permission-manager-toolbar > div span { color: var(--ui-muted); font-size: 9px; }

  .permission-manager .roles-list { gap: 9px; }
  .permission-manager details.role-card,
  .permission-manager details.permission-add-role { padding: 0; overflow: clip; }
  .role-card-summary {
    display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 18px;
    padding: 13px 16px; background: var(--ui-card); color: var(--ui-text); cursor: pointer; list-style: none;
  }
  .role-card-summary::-webkit-details-marker { display: none; }
  .role-card-summary::after { content: "⌄"; flex: 0 0 auto; color: var(--ui-primary); font-size: 18px; transition: transform .16s ease; }
  details[open] > .role-card-summary::after { transform: rotate(180deg); }
  .role-card-summary > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
  .role-card-summary > span:first-child > strong { font-size: 15px; }
  .role-card-summary small { color: var(--ui-muted); font-size: 9px; font-weight: 500; }
  .role-permission-count {
    display: inline-flex; flex: 0 0 auto; align-items: baseline; gap: 3px; padding: 6px 9px;
    border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-card-soft);
    color: var(--ui-muted); font-size: 9px;
  }
  .role-permission-count strong { color: var(--ui-primary); font-size: 12px; }
  .role-add-icon { display: none; }
  .permission-manager .role-card > form,
  .permission-manager .permission-add-role > form { padding: 16px; border-top: 1px solid var(--ui-line); }
  .permission-manager .role-heading {
    display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .55fr) auto;
    align-items: end; margin: 0 0 14px; padding: 12px; border-radius: 11px; background: var(--ui-card-soft);
  }
  .permission-manager .role-heading label { text-transform: none; }

  .permission-groups { display: grid; gap: 8px; }
  .role-template-picker { margin-bottom: 12px; padding: 11px 12px; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-card-soft); }
  .role-template-picker > span { display: block; margin-bottom: 7px; color: var(--ui-muted); font-size: 9px; font-weight: 800; }
  .role-template-picker > div { display: flex; flex-wrap: wrap; gap: 6px; }
  .role-template-picker button { padding: 6px 9px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-card); color: var(--ui-text); font: 750 9px var(--ui-font); cursor: pointer; }
  .role-template-picker button:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
  .permission-group { border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-card); overflow: hidden; }
  .permission-group > summary {
    display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 13px; background: var(--ui-card-soft); cursor: pointer; list-style: none;
  }
  .permission-group > summary::-webkit-details-marker { display: none; }
  .permission-group > summary > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
  .permission-group > summary > span:first-child strong { font-size: 12px; }
  .permission-group > summary small { color: var(--ui-muted); font-size: 9px; font-weight: 500; }
  .permission-group > summary > span:last-child { flex: 0 0 auto; color: var(--ui-muted); font-size: 9px; }
  .permission-group > summary > span:last-child strong { color: var(--ui-primary); font-size: 12px; }
  .permission-group[open] > summary { border-bottom: 1px solid var(--ui-line); }
  .permission-group-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 8px 10px 0; }
  .permission-group-actions button {
    padding: 5px 8px; border: 0; border-radius: 7px; background: var(--ui-primary-soft);
    color: var(--ui-primary); font: 750 9px var(--ui-font); cursor: pointer;
  }
  .permission-group-actions button[data-permission-group-action="clear"] { background: transparent; color: var(--ui-muted); }
  .permission-group .permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 9px 10px 11px; }
  .permission-group .permission-grid label {
    min-height: 54px; margin: 0; padding: 9px 10px; border-color: var(--ui-line); background: var(--ui-card);
    text-transform: none; cursor: pointer;
  }
  .permission-group .permission-grid label > span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
  .permission-group .permission-grid label > span > strong { color: var(--ui-text); font-size: 10px; font-weight: 650; line-height: 1.35; }
  .permission-group .permission-grid input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--ui-primary); }
  .permission-group .permission-grid label:has(input:checked) { border-color: color-mix(in srgb, var(--ui-primary) 45%, var(--ui-line)); background: var(--ui-primary-soft); }
  .permission-type { flex: 0 0 auto; padding: 3px 5px; border-radius: 999px; background: #edf1ee; color: #536159; font-size: 7px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
  .permission-type-delete { background: #fff0ed; color: var(--ui-danger); }
  .permission-type-manage, .permission-type-edit { background: #fff5df; color: #8a5b12; }
  .permission-type-upload { background: #edf1fa; color: #48658f; }
  .role-save-bar {
    position: sticky; z-index: 3; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 12px; padding: 10px 11px; border: 1px solid var(--ui-line); border-radius: 11px;
    background: color-mix(in srgb, var(--ui-card) 94%, transparent); box-shadow: var(--ui-shadow-sm); backdrop-filter: blur(12px);
  }
  .role-save-bar > span { color: var(--ui-muted); font-size: 9px; }
  .role-save-bar > span strong { color: var(--ui-primary); font-size: 12px; }
  .role-warning { margin: 9px 2px 0; }
  .permission-add-role { margin-top: 2px !important; border-style: dashed !important; }
  .permission-add-role > .role-card-summary { background: var(--ui-card-soft); }
  .permission-manager .permission-dirty { border-color: color-mix(in srgb, var(--ui-warning) 65%, var(--ui-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-warning) 10%, transparent); }
  .permission-manager .permission-dirty > .role-card-summary { background: color-mix(in srgb, var(--ui-warning) 7%, var(--ui-card)); }

  html[data-theme="dark"] .permission-manager-toolbar,
  html[data-theme="dark"] .permission-manager .role-heading,
  html[data-theme="dark"] .permission-group > summary,
  html[data-theme="dark"] .permission-add-role > .role-card-summary { background: var(--ui-card-soft); border-color: var(--ui-line); }
  html[data-theme="dark"] :is(.permission-manager details.role-card,.permission-manager details.permission-add-role,.permission-group,.role-card-summary,.role-save-bar) { background: var(--ui-card); border-color: var(--ui-line); color: var(--ui-text); }
  html[data-theme="dark"] .permission-group .permission-grid label { background: var(--ui-card); border-color: var(--ui-line); }
  html[data-theme="dark"] .permission-group .permission-grid label:has(input:checked) { background: #294136; border-color: #679279; }
  html[data-theme="dark"] .permission-type { background: #354139; color: #d7e1da; }
  html[data-theme="dark"] .permission-type-delete { background: #4a2c28; color: #f2b7ae; }
  html[data-theme="dark"] .permission-type-manage,
  html[data-theme="dark"] .permission-type-edit { background: #493b24; color: #efd095; }
  html[data-theme="dark"] .permission-type-upload { background: #2c374a; color: #b9ccef; }
}
@media screen and (max-width: 700px) {
  .permission-manager-toolbar { grid-template-columns: 1fr; gap: 9px; }
  .permission-manager-toolbar > div { display: none; }
  .role-card-summary { min-height: 62px; padding: 11px 12px; }
  .role-permission-count { padding: 5px 7px; white-space: nowrap; }
  .permission-manager .role-card > form,
  .permission-manager .permission-add-role > form { padding: 11px; }
  .permission-manager .role-heading { grid-template-columns: 1fr; gap: 9px; }
  .permission-group .permission-grid { grid-template-columns: 1fr; }
  .permission-group > summary { padding: 10px 11px; }
  .permission-group > summary small { max-width: 240px; }
  .role-save-bar { bottom: 78px; }
  .role-save-bar .button { min-height: 38px; padding: 7px 9px; font-size: 10px; }
}

html[data-theme="dark"] {
  --ui-bg: #151b17;
  --ui-card: #202923;
  --ui-card-soft: #263029;
  --ui-text: #f1f5f2;
  --ui-muted: #bdc8c0;
  --ui-line: #4b5a51;
  --ui-primary: #77bf91;
  --ui-primary-strong: #9bd9b1;
  --ui-primary-soft: #294032;
  --ui-danger: #efb5aa;
  --ui-warning: #e2bd77;
  --ui-shadow-sm: 0 4px 14px rgba(0, 0, 0, .22);
  --ui-shadow: 0 18px 44px rgba(0, 0, 0, .32);
}

@media screen {
  body { --section-accent: var(--ui-primary); --section-soft: var(--ui-primary-soft); }
  body:is(.page-people, .page-person, .page-location, .page-new_person) { --section-accent: #27758a; --section-soft: #e8f3f6; }
  body:is(.page-quotes, .page-quote, .page-new_quote) { --section-accent: #715a9a; --section-soft: #f0ebf7; }
  body.page-reports { --section-accent: #536d7d; --section-soft: #eaf0f3; }
  body.page-calendar { --section-accent: #536b9a; --section-soft: #eaf0fa; }
  body.page-waiting_report { --section-accent: #a36b17; --section-soft: #fbf1dd; }
  body:is(.page-billing, .page-invoice) { --section-accent: #9a6a20; --section-soft: #f8efdf; }
  body.page-admin { --section-accent: #58656d; --section-soft: #edf0f2; }
  html[data-theme="dark"] body { --section-soft: var(--ui-primary-soft); }

  html { background: var(--ui-bg); }
  body {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
  }

  body :is(button, input, select, textarea, h1, h2, h3, h4, h5, h6, .button) {
    font-family: inherit;
  }

  body :is(.page-heading h1, .person-hero h1, .project-hero h1, .location-hero h1,
    .weekly-report-heading h1, .stats strong, .hours strong, .empty strong) {
    font-family: inherit !important;
  }

  .shell { width: 100%; }

  .page-heading { gap: 18px; }
  body .page-heading h1 {
    margin: 4px 0 6px;
    color: var(--ui-text);
    font-size: clamp(34px, 3.2vw, 46px);
    font-weight: 760;
    line-height: 1.06;
  }
  .page-heading p { color: var(--ui-muted); line-height: 1.5; }
  .eyebrow { color: var(--section-accent, var(--ui-primary)); }

  /* Reports and Admin previously kept their older boxed title banners. Keep
     every primary section title aligned with the same clean page-heading. */
  .page-heading:is(.weekly-report-heading, .admin-page-heading) {
    position: relative;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 0 17px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .page-heading:is(.weekly-report-heading, .admin-page-heading)::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 5px;
    border-radius: 5px;
    background: var(--section-accent, var(--ui-primary));
  }
  .weekly-report-heading p { color: var(--ui-muted); font-weight: 400; }

  :is(.panel, .project-card, .directory-person, .person-card, .person-hero,
    .project-hero, .location-hero, .location-card, .weekly-report-card,
    .general-time-report, .waiting-report-card, .quote-document, .quote-list > a,
    .invoice, .invoice-list > a, .billing-totals > div, .billing-column,
    .admin-content, .admin-nav, .auth-card, .empty) {
    background: var(--ui-card);
    border-color: var(--ui-line);
    color: var(--ui-text);
  }

  :is(.panel, .project-card, .directory-person, .weekly-report-card,
    .waiting-report-card, .quote-list > a, .invoice-list > a) {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
  }

  .button {
    min-height: 40px;
    border-color: var(--ui-line);
    border-radius: 10px;
    background: var(--ui-card);
    color: var(--ui-text);
    box-shadow: none;
    font-size: 12px;
  }
  .button:hover { border-color: color-mix(in srgb, var(--ui-primary) 42%, var(--ui-line)); }
  .button.primary {
    background: linear-gradient(145deg, var(--ui-primary), var(--ui-primary-strong));
    border-color: var(--ui-primary-strong);
    color: #fff;
    box-shadow: 0 5px 14px rgba(22, 99, 63, .16);
  }
  .button.danger, .danger.button {
    background: color-mix(in srgb, var(--ui-danger) 7%, var(--ui-card));
    border-color: color-mix(in srgb, var(--ui-danger) 34%, var(--ui-line));
    color: var(--ui-danger);
  }

  :is(input, select, textarea) {
    min-height: 42px;
    border-color: var(--ui-line);
    border-radius: 10px;
    background: var(--ui-card-soft);
    color: var(--ui-text);
  }
  :is(input, select, textarea):focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 13%, transparent);
  }
  :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--ui-muted) 72%, transparent); }

  .form-grid label, .stack label {
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .015em;
    text-transform: none;
  }
  .field-help, .muted { color: var(--ui-muted); }

  .badge {
    min-height: 23px;
    border-radius: 999px;
    font-size: 8px;
    letter-spacing: .055em;
  }

  .section-title { gap: 12px; }
  .section-title h2 { color: var(--ui-text); }
  .section-title > span { color: var(--ui-muted); }

  .stats {
    border: 0;
    background: transparent;
  }
  .stats > :is(a, div) {
    border: 1px solid var(--ui-line);
    background: var(--ui-card);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-sm);
  }
  .stats > a.selected {
    border-color: color-mix(in srgb, var(--ui-primary) 45%, var(--ui-line));
    box-shadow: inset 0 -3px 0 var(--ui-primary), var(--ui-shadow-sm);
  }
  .stats span { color: var(--ui-muted); }

  .work-queue-controls {
    border-color: var(--ui-line);
    background: var(--ui-card);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-sm);
  }
  .work-queue-controls .status-filters { display: none !important; }

  .project-status-card {
    border-left: 5px solid var(--status-color, var(--ui-primary));
  }
  .dashboard-layout .project-main h3 { color: var(--ui-text); }
  .dashboard-layout .project-main :is(.project-summary, .address, .project-entered-date) { color: var(--ui-muted); }
  .dashboard-layout .project-list,
  .dashboard-layout .project-select-row,
  .dashboard-layout .project-card,
  .dashboard-layout .project-main,
  .dashboard-layout .project-main > * {
    min-width: 0;
    max-width: 100%;
  }
  .dashboard-layout .project-card {
    box-sizing: border-box;
    overflow: hidden;
  }
  .dashboard-layout .project-main :is(h3, .customer, .address, .project-summary, .assigned-team, .waiting-reason, .queue-entry-code, .project-entered-date) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .dashboard-layout .assigned-team {
    width: auto;
    max-width: 100%;
    white-space: normal;
  }
.assigned-team {
    border-color: color-mix(in srgb, var(--ui-primary) 22%, var(--ui-line));
    background: color-mix(in srgb, var(--ui-primary) 7%, var(--ui-card));
    color: color-mix(in srgb, var(--ui-primary) 76%, var(--ui-text));
}
.assigned-team,.hero-assigned { display: flex !important; align-items: flex-start; gap: 7px; }
.assigned-team > strong,.hero-assigned > strong { flex: 0 0 auto; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.assigned-technician-list { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.assigned-technician-list > span { display: block; line-height: 1.25; overflow-wrap: anywhere; }
.project-assignees { display: grid !important; grid-template-columns: 1fr !important; align-items: stretch; }
.project-assignees label { width: 100%; }
.project-assignees small { grid-column: 1; }
.technician-list { display: grid !important; grid-template-columns: 1fr !important; align-items: stretch !important; gap: 6px !important; }
.technician-list label { width: 100% !important; }

  .directory-locations, .weekly-report-card > header, .general-time-report-heading,
  .waiting-report-content, .invoice-meta, .quote-line-editor h2 {
    background: var(--ui-card-soft);
    border-color: var(--ui-line);
  }

  .general-time-entry > summary {
    line-height: 1.4;
  }
  .general-time-entry[open] .general-time-form {
    padding-top: 18px;
  }

  .map-address { color: var(--ui-text); }
  .map-pin { color: var(--ui-primary); }

  .admin-nav a { background: transparent; color: var(--ui-text); box-shadow: none; }
  .admin-nav a.active {
    background: color-mix(in srgb, var(--section-accent, var(--ui-primary)) 12%, var(--ui-card));
    color: var(--section-accent, var(--ui-primary));
  }

  .quote-profit-summary > div { border-color: var(--ui-line); background: var(--ui-card-soft); }
  .invoice-table th { background: var(--ui-card-soft); color: var(--ui-muted); }
  .invoice-table td { border-color: var(--ui-line); }

  .flash { color: #15563a; }
  .flash.error { color: #8e301d; }

  .mobile-bottom-nav svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Shared control surface used directly below primary page headings. */
  :is(.people-search, .people-directory-toolbar, .quote-sort-bar,
    .report-range-form, .work-queue-controls) {
    border: 1px solid var(--ui-line);
    border-radius: 13px;
    background: var(--ui-card);
    box-shadow: var(--ui-shadow-sm);
  }

  .empty::before {
    content: "✓";
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: var(--section-soft);
    color: var(--section-accent);
    font-size: 18px;
    font-weight: 800;
  }
  .compact-empty { padding: 28px 18px; }


  .project-workspace-nav {
    position: sticky;
    z-index: 9;
    top: 10px;
    display: flex;
    gap: 5px;
    max-width: 1320px;
    margin: 0 0 12px;
    padding: 6px;
    border: 1px solid var(--ui-line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--ui-card) 95%, transparent);
    box-shadow: var(--ui-shadow-sm);
    overflow-x: auto;
    backdrop-filter: blur(16px);
  }
  .project-workspace-nav a {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 8px;
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }
  .project-workspace-nav a:hover { background: var(--ui-primary-soft); color: var(--ui-primary); }
  .project-workspace-nav a span { color: var(--ui-primary); font-size: 14px; }
  .page-project :is(#project-details, #work-updates, #project-photos,
    #log-time, #add-material, #project-activity) { scroll-margin-top: 72px; }

  .combined-activity { margin-top: 13px; }
  .combined-activity article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid var(--ui-line);
  }
  .combined-activity article > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
  .combined-activity article strong { font-size: 12px; }
  .combined-activity article time { color: var(--ui-muted); font-size: 9px; }
  .combined-activity article p { grid-column: 1 / -1; margin: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.45; }
  .activity-symbol {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
  }

  .admin-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .admin-category-grid > a {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 3px 12px;
    align-items: center;
    min-height: 94px;
    padding: 15px;
    border: 1px solid var(--ui-line);
    border-radius: 13px;
    background: var(--ui-card-soft);
  }
  .admin-category-grid > a:hover { border-color: var(--ui-primary); transform: translateY(-1px); }
  .admin-category-icon { display: grid; grid-row: 1 / 3; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--ui-primary-soft); color: var(--ui-primary); font-size: 17px; }
  .admin-category-grid strong { font-size: 13px; }
  .admin-category-grid small { color: var(--ui-muted); font-size: 10px; }
  .admin-category-arrow { grid-column: 3; grid-row: 1 / 3; color: var(--ui-primary); font-size: 18px; }
}

/* Desktop application shell */
@media screen and (min-width: 1101px) {
  body { padding-left: 252px; }
  .topbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 252px;
    height: 100dvh;
  }
  .topbar > nav > a[href*="page=calendar"]::before { content: "Calendar"; }
  .topbar > nav > a[href*="page=calendar"]::after { content: "▦"; display: block; }
  .shell {
    max-width: none;
    margin: 0;
    padding: 38px clamp(28px, 4vw, 66px) 80px;
  }
  .layout-main.dashboard-layout,
  .work-queue-controls,
  .bulk-time-toolbar,
  .dashboard-layout > section { width: 100%; max-width: none; }
  .dashboard-heading { margin-top: -38px; }

  /* Give every primary desktop tab the same wide header treatment as the
     Active Work board while retaining its section accent. */
  body:is(.page-people, .page-quotes, .page-reports, .page-calendar, .page-waiting_report,
    .page-billing, .page-admin) .shell > .page-heading {
    position: relative;
    width: auto;
    max-width: none;
    min-height: 155px;
    align-items: center;
    margin: -38px calc(clamp(28px, 4vw, 66px) * -1) 24px;
    padding: 39px clamp(28px, 4vw, 66px) 28px;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
    border-radius: 0;
    background: linear-gradient(120deg,
      color-mix(in srgb, var(--section-accent) 12%, var(--ui-card)) 0,
      color-mix(in srgb, var(--section-accent) 4%, var(--ui-card)) 62%,
      transparent 100%);
    box-shadow: none;
  }
  body:is(.page-people, .page-quotes, .page-reports, .page-calendar, .page-waiting_report,
    .page-billing, .page-admin) .shell > .page-heading::before {
    display: none;
  }
  body:is(.page-people, .page-quotes, .page-reports, .page-calendar, .page-waiting_report,
    .page-billing, .page-admin) .shell > .page-heading > :last-child:not(:first-child) {
    align-self: center;
    margin-left: auto;
  }
  .general-time-entry .general-time-form {
    grid-template-columns: minmax(180px, 1.25fr) minmax(150px, 1fr)
      minmax(100px, .65fr) minmax(150px, 1fr) auto;
  }
  .general-time-entry .general-time-notes { grid-column: 1 / 5; }
  .general-time-entry .general-time-form > .button {
    grid-column: 5;
    min-width: 130px;
  }
  .project-layout, .location-page-layout, .admin-layout,
  .people-directory, .quote-list, .billing-columns,
  .waiting-report-list, .weekly-report-list { max-width: 1320px; }
}

/* Tablet: compact two-row header instead of a squeezed desktop navigation. */
@media screen and (min-width: 701px) and (max-width: 1100px) {
  body { padding-left: 0; }
  .topbar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto auto;
    height: auto;
    min-height: 70px;
    gap: 8px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--ui-card) 95%, transparent);
    border-color: var(--ui-line);
    backdrop-filter: blur(16px);
  }
  .topbar .brand { min-width: 42px; }
  .topbar .brand span:last-child { display: none; }
  .topbar .global-search { width: 100%; max-width: none; }
  .topbar .active-work-quick, .topbar .quick-add-trigger { min-height: 40px; }
  .topbar .mobile-menu-toggle { display: none; }
  .topbar > nav {
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
    gap: 5px;
    padding-top: 7px;
    border-top: 1px solid var(--ui-line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .general-time-entry .general-time-form { grid-template-columns: 1fr 1fr; }
  .general-time-entry .general-time-notes { grid-column: 1 / -1; }
  .general-time-entry .general-time-form > .button { grid-column: 1 / -1; }
  .topbar > nav::-webkit-scrollbar { display: none; }
  .topbar > nav > a { flex: 0 0 auto; }
  .topbar > nav .display-preferences,
  .topbar > nav .theme-form,
  .topbar > nav .logout-form { flex: 0 0 auto; }
  .shell { max-width: none; padding: 28px 20px 70px; }
  .project-layout, .location-page-layout { grid-template-columns: 1fr; }
  .project-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav { position: static; display: flex; overflow-x: auto; }
  .admin-nav a { flex: 0 0 170px; }
  .project-workspace-nav { top: 124px; }
}

/* Phone workflow */
@media screen and (max-width: 700px) {
  body { width: 100%; padding: 0 0 84px; overflow-x: hidden; zoom: 1; }
  body.ui-size-small main.shell,
  body.ui-size-standard main.shell,
  body.ui-size-large main.shell { zoom: 1 !important; }
  main.shell { width: 100%; max-width: 100%; padding: 16px 10px 46px; }

  .topbar {
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: nowrap;
    min-height: 58px;
    padding: 8px 10px;
    gap: 8px;
    background: color-mix(in srgb, var(--ui-card) 96%, transparent);
    border-color: var(--ui-line);
    box-shadow: 0 4px 18px rgba(20, 42, 28, .07);
    backdrop-filter: blur(18px);
  }
  .topbar .brand { order: 1; flex: 0 0 38px; width: 38px; margin: 0; }
  .topbar .brand span:last-child { display: none; }
  .topbar .global-search { order: 2; flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
  .topbar :is(.active-work-quick, .quick-add-trigger, .mobile-menu-toggle) { display: none; }
  .topbar > nav { display: none !important; }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 90;
    left: 6px;
    right: 6px;
    bottom: max(6px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 66px;
    padding: 5px;
    border: 1px solid var(--ui-line);
    border-radius: 19px;
    background: color-mix(in srgb, var(--ui-card) 96%, transparent);
    box-shadow: 0 14px 40px rgba(16, 35, 23, .2);
    backdrop-filter: blur(18px);
  }
  .mobile-bottom-nav > :is(a, button), .mobile-more-menu > summary {
    height: 54px;
    color: var(--ui-muted);
  }
  .mobile-bottom-nav .current, .mobile-more-menu[open] > summary { color: var(--ui-primary); }
  .mobile-bottom-add span {
    width: 46px;
    height: 46px;
    background: linear-gradient(145deg, var(--ui-primary), var(--ui-primary-strong));
  }

  .mobile-more-panel {
    border-color: var(--ui-line);
    background: color-mix(in srgb, var(--ui-card) 98%, transparent);
    color: var(--ui-text);
  }

  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 15px; }
  body .page-heading h1 { font-size: 29px; }
  .page-heading p { font-size: 11px; }
  .page-heading:is(.weekly-report-heading, .admin-page-heading) {
    padding: 0 0 0 13px;
  }
  .page-heading:is(.weekly-report-heading, .admin-page-heading)::before { width: 4px; }
  .dashboard-heading { margin: 0 0 11px; padding: 3px 2px 0; background: none; border: 0; }
  .dashboard-heading-actions { display: none; }


  .project-workspace-nav {
    top: 63px;
    margin: 0 0 9px;
    padding: 5px;
    border-radius: 12px;
  }
  .project-workspace-nav a { flex: 1 0 auto; min-height: 38px; padding: 7px 9px; }
  .page-project :is(#project-details, #work-updates, #project-photos,
    #log-time, #add-material, #project-activity) { scroll-margin-top: 118px; }

  .combined-activity article > div { grid-template-columns: 1fr; }
  .combined-activity article time, .combined-activity article p { grid-column: 1; }
  .admin-category-grid { grid-template-columns: 1fr; }

  .stats { display: flex; margin: 0 -10px 11px; padding: 0 10px; overflow-x: auto; scroll-snap-type: x proximity; }
  .stats > :is(a, div) { flex: 0 0 104px; min-height: 64px; scroll-snap-align: start; }

  .work-queue-controls { grid-template-columns: 1fr 1fr; width: 100%; padding: 9px; }
  .work-queue-filter-row { grid-column: 1 / -1; display: block; }
  .work-queue-controls .assignment-filter select { width: 100%; max-width: none; }
  .dashboard-view-form, .work-queue-sort { width: 100%; }
  .dashboard-view-form select, .work-queue-sort > summary { width: 100%; min-height: 40px; }

  .project-select-row, .project-select-row.can-edit-ticket {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
    gap: 5px;
  }
  .project-select-row:not(.can-edit-ticket) { grid-template-columns: minmax(0, 1fr); }
  .dashboard-layout .project-card { min-height: 122px; padding: 13px 12px; border-radius: 13px; }

  .dashboard-view-detailed .project-list {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: column;
  }
  .dashboard-view-detailed .project-main {
    display: flex !important;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }
  .dashboard-view-detailed .project-main > * {
    position: static;
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100%;
  }
  .dashboard-view-detailed .project-main .card-top { order: 1; align-self: flex-start; }
  .dashboard-view-detailed .project-main .customer { order: 2; }
  .dashboard-view-detailed .project-main h3 { order: 3; }
  .dashboard-view-detailed .project-main .project-summary { order: 4; }
  .dashboard-view-detailed .project-main .address { order: 5; }
  .dashboard-view-detailed .project-main .assigned-team { order: 6; }
  .dashboard-view-detailed .project-main .waiting-reason { order: 7; }
  .dashboard-view-detailed .project-main .queue-entry-code { order: 8; }
  .dashboard-view-detailed .project-main .project-entered-date { order: 9; }

  .quick-add-dialog, .general-time-dialog, .bulk-time-dialog {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    background: var(--ui-card);
    color: var(--ui-text);
  }

  /* Quick Add is a complete mobile task, so present it as a true full-screen
     workspace instead of leaving the old page visible above a bottom sheet. */
  .quick-add-dialog {
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }
  .quick-add-dialog .quick-add-shell {
    height: 100%;
    padding: calc(18px + env(safe-area-inset-top)) 15px
      calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .general-time-dialog {
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }
  .general-time-dialog .general-time-dialog-form {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: calc(16px + env(safe-area-inset-top)) 14px
      calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .general-time-dialog header { margin-bottom: 11px; }
  .general-time-dialog header p { display: none; }
  .general-time-dialog-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
  }
  .general-time-dialog-fields > label { min-width: 0; }
  .general-time-dialog-fields .span-2 { grid-column: 1 / -1 !important; }
  .general-time-dialog-fields textarea { min-height: 60px; max-height: 90px; }
  .general-time-dialog-actions {
    position: sticky;
    bottom: 0;
    margin: auto -14px -14px;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    background: var(--ui-card);
    border-top: 1px solid var(--ui-line);
  }

  .project-mobile-nav { top: 63px; }
  .page-project .master-save-bar {
    z-index: 91;
    right: 6px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 6px;
    display: block;
    width: auto;
    padding: 6px;
    border-radius: 14px;
    transform: none;
  }
  .page-project .master-save-bar > div { display: none; }
  .page-project .master-save-bar .button {
    width: 100%;
    min-height: 43px;
  }
  .inline-ticket-edit > form { bottom: 82px; max-height: calc(100dvh - 100px); }

  .form-grid, .mini-grid, .mini-grid.two, .general-time-form { grid-template-columns: 1fr !important; }
  .span-2, .general-time-notes, .general-time-description { grid-column: auto !important; }
  .general-time-entry .general-time-form > .button { grid-column: auto; }
  .general-time-entry[open] .general-time-form { padding-top: 14px; }
  .form-actions { width: 100%; flex-wrap: wrap; }

  .people-directory, .billing-columns, .weekly-report-body,
  .waiting-contact-grid, .project-layout, .location-page-layout,
  .admin-layout { grid-template-columns: 1fr !important; }

  .weekly-report-totals { grid-template-columns: 1fr 1fr; }
  .weekly-report-card > header { grid-template-columns: 1fr auto; }
  .weekly-report-body[hidden] { display: none !important; }

  .quote-document .invoice-table { display: block; overflow: visible; }
  .quote-document .invoice-table thead { display: none; }
  .quote-document .invoice-table :is(tbody, tr) { display: block; }

  .flash { top: 68px; right: 8px; width: calc(100% - 16px); }
}

@media screen and (max-width: 390px) {
  .weekly-report-totals, .billing-totals { grid-template-columns: 1fr; }
  .dashboard-heading p { display: none; }
}

.location-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.location-hero-actions form, .quote-toolbar form, .entry-delete-form { margin: 0; }
body:not(.can-delete-quote-items) form:has(input[name="action"][value="delete_quote_item"]) { display: none !important; }
.entry-delete-form { padding: 0 14px 14px; }

.person-phone-fields { padding: 15px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-card-soft); }
.person-phone-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.person-phone-heading > div { display: flex; flex-direction: column; gap: 2px; }
.person-phone-heading strong { color: var(--ui-text); font-size: 12px; }
.person-phone-heading small { color: var(--ui-muted); font-size: 9px; }
.person-phone-rows { display: flex; flex-direction: column; gap: 8px; }
.person-phone-row { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(180px, 1.3fr) 36px; align-items: end; gap: 8px; }
.person-phone-row.is-primary-phone { padding-left: 9px; border-left: 3px solid var(--section-accent); }
.phone-row-remove { display: grid; width: 36px; height: 42px; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--ui-danger) 32%, var(--ui-line)); border-radius: 10px; background: color-mix(in srgb, var(--ui-danger) 7%, var(--ui-card)); color: var(--ui-danger); font-size: 19px; cursor: pointer; }
.person-phone-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.person-phone-summary a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-card-soft); }
.person-phone-summary span { color: var(--ui-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.person-phone-summary strong { color: var(--section-accent); font-size: 11px; }

.calendar-controls {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin-bottom: 14px;
  padding: 14px 16px;
}
.calendar-month-nav { display: flex; align-items: center; gap: 10px; }
.calendar-month-nav strong { min-width: 150px; text-align: center; font-size: 18px; }
.calendar-month-nav .button { min-width: 38px; padding: 8px 10px; }
.calendar-controls form { display: flex; justify-content: center; margin: 0; }
.calendar-controls form label { width: min(100%, 300px); color: var(--ui-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.calendar-controls select { margin-top: 5px; }
.calendar-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.calendar-legend span { padding: 6px 8px; border-radius: 99px; font-size: 9px; font-weight: 800; }
.calendar-legend .scheduled { background: #eee9f8; color: #65508d; }
.calendar-legend .worked { background: #e4f3e9; color: #276344; }
.calendar-legend .general { background: #e8eef3; color: #476074; }
.team-calendar { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-line); box-shadow: var(--ui-shadow-sm); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.calendar-weekdays span { padding: 9px; background: var(--ui-card-soft); color: var(--ui-muted); text-align: center; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.calendar-day { min-width: 0; min-height: 150px; padding: 9px; background: var(--ui-card); }
.calendar-day.outside-month { background: color-mix(in srgb, var(--ui-card-soft) 72%, var(--ui-bg)); opacity: .72; }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--section-accent); }
.calendar-day > header { display: flex; min-height: 28px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calendar-day > header time { display: flex; align-items: center; gap: 5px; }
.calendar-day > header time span { display: none; color: var(--ui-muted); font-size: 10px; font-weight: 750; }
.calendar-day > header time strong { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; font-size: 12px; }
.calendar-day.is-today > header time strong { background: var(--section-accent); color: #fff; }
.calendar-day > header em { color: var(--section-accent); font-size: 8px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.calendar-day-events { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.calendar-event { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 7px 8px; border: 1px solid transparent; border-left-width: 3px; border-radius: 8px; transition: transform .15s, box-shadow .15s; }
a.calendar-event:hover { z-index: 2; box-shadow: var(--ui-shadow-sm); transform: translateY(-1px); }
.calendar-event.event-scheduled { border-color: #d9cdef; background: #f2eef9; color: #58447e; }
.calendar-event.event-worked { border-color: #bddfc9; background: #edf7f0; color: #24593d; }
.calendar-event.event-general { border-color: #cbd9e3; background: #f0f4f7; color: #40586b; }
.calendar-event-kind { font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.calendar-event strong { overflow: hidden; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event small { overflow: hidden; font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; opacity: .84; }
.calendar-empty { margin-top: 14px; }
.calendar-unscheduled { margin-top: 28px; }
.calendar-unscheduled .section-title > div { display: flex; flex-direction: column; gap: 3px; }
.calendar-unscheduled .section-title h2 { margin: 0; }
.calendar-unscheduled > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.calendar-unscheduled > div:last-child > :is(a, div) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-card); box-shadow: var(--ui-shadow-sm); }
.calendar-unscheduled > div:last-child > a:hover { border-color: var(--section-accent); transform: translateY(-1px); }
.calendar-unscheduled > div:last-child > :is(a, div) > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.calendar-unscheduled strong, .calendar-unscheduled small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-unscheduled strong { font-size: 12px; }
.calendar-unscheduled small { color: var(--ui-muted); font-size: 9px; }
html[data-theme="dark"] .calendar-legend .scheduled, html[data-theme="dark"] .calendar-event.event-scheduled { border-color: #625777; background: #332d40; color: #e1d5f5; }
html[data-theme="dark"] .calendar-legend .worked, html[data-theme="dark"] .calendar-event.event-worked { border-color: #476653; background: #263a2d; color: #d2eddc; }
html[data-theme="dark"] .calendar-legend .general, html[data-theme="dark"] .calendar-event.event-general { border-color: #526575; background: #293640; color: #d8e5ee; }

.report-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border-bottom: 1px dotted var(--ui-line);
}
.report-entry-row > p { border-bottom: 0; }
.report-hours-static { padding-top: 8px; font-size: 13px; }
.report-hour-editor { position: relative; padding-top: 4px; }
.report-hour-editor > summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-card-soft);
  color: var(--section-accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.report-hour-editor > summary::-webkit-details-marker { display: none; }
.report-hour-editor > summary::after { content: "✎ Edit hours"; margin-left: 7px; color: var(--section-accent); font-size: 8px; letter-spacing: .03em; text-transform: uppercase; }
.report-hour-editor[open] > summary { border-color: var(--section-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent) 14%, transparent); }
body.report-hours-open { overflow: hidden; }
body.report-hours-open::before {
  content: "";
  position: fixed;
  z-index: 98;
  inset: 0;
  background: rgba(10, 17, 13, .54);
  backdrop-filter: blur(2px);
}
.report-hour-editor > form {
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(360px, calc(100vw - 30px));
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-card);
  box-shadow: var(--ui-shadow);
  transform: translate(-50%, -50%);
}
.report-hour-editor > form::before { content: "Edit time entry"; grid-column: 1 / -1; color: var(--ui-text); font-size: 18px; font-weight: 850; }
.report-hour-editor > form::after { content: "Click outside this window or press Esc to cancel."; grid-column: 1 / -1; color: var(--ui-muted); font-size: 9px; }
.report-hour-editor > form label { color: var(--ui-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.report-hour-editor > form input { min-height: 46px; margin-top: 6px; font-size: 18px; font-weight: 800; }
.report-hour-editor > form .button { min-height: 46px; padding: 10px 17px; }
.general-time-hours .report-hour-editor > form { margin: 0; }
.general-time-hours .report-hour-editor > form .button { padding: 8px 11px; border: 1px solid var(--section-accent); background: var(--section-accent); color: #fff; font-size: 10px; }

@media screen and (max-width: 520px) {
  .location-hero-actions { width: 100%; justify-content: stretch; }
  .location-hero-actions > * { flex: 1; }
  .location-hero-actions .button { width: 100%; }
  .report-hour-editor > form { right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); top: auto; left: 10px; width: auto; padding: 18px; border-radius: 16px; transform: none; }
  .person-phone-row { grid-template-columns: 1fr 40px; }
  .person-phone-row > label:first-child { grid-column: 1 / -1; }
  .phone-row-remove { width: 40px; }
}

@media screen and (max-width: 700px) {
  .mobile-more-panel > a[href*="page=calendar"]::before {
    content: "▦";
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    margin-right: 9px;
    border-radius: 8px;
    background: var(--section-soft);
    color: var(--section-accent);
    font-size: 14px;
  }
  .calendar-heading { align-items: end; }
  .calendar-heading p { display: none; }
  .calendar-heading > .button { display: inline-flex; }
  .calendar-controls { grid-template-columns: 1fr; align-items: stretch; gap: 11px; }
  .calendar-month-nav { justify-content: space-between; }
  .calendar-controls form label { width: 100%; }
  .calendar-legend { justify-content: flex-start; }
  .team-calendar { overflow: visible; border: 0; background: none; box-shadow: none; }
  .calendar-weekdays { display: none; }
  .calendar-grid { display: flex; flex-direction: column; gap: 9px; }
  .calendar-day { display: grid; min-height: 0; grid-template-columns: 55px minmax(0, 1fr); gap: 10px; padding: 11px; border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: var(--ui-shadow-sm); }
  .calendar-day:not(.has-events):not(.is-today), .calendar-day.outside-month { display: none; }
  .calendar-day > header { align-items: flex-start; justify-content: flex-start; margin: 0; }
  .calendar-day > header time { flex-direction: column; gap: 1px; }
  .calendar-day > header time span { display: block; }
  .calendar-day > header time strong { width: auto; height: auto; background: none; font-size: 23px; }
  .calendar-day.is-today > header time strong { background: none; color: var(--section-accent); }
  .calendar-day > header em { display: none; }
  .calendar-event { padding: 9px 10px; }
  .calendar-event strong, .calendar-event small { white-space: normal; }
  .calendar-event strong { font-size: 12px; }
  .calendar-event small { font-size: 9px; }
  .calendar-unscheduled > div:last-child { grid-template-columns: 1fr; }
}

@media print {
  .mobile-bottom-nav, .project-mobile-nav, .report-card-toggle,
  .report-date-presets, .general-time-entry, .report-hour-editor > form, .calendar-controls { display: none !important; }
  .report-hour-editor { padding-top: 8px; }
  .report-hour-editor > summary { min-height: 0; padding: 0; border: 0; background: none; color: #111; }
  .report-hour-editor > summary::after { display: none; }
  body { padding: 0 !important; background: #fff !important; color: #111 !important; }
  .shell { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .weekly-report-body[hidden] { display: grid !important; }
}

/* Location equipment library -------------------------------------------- */
.location-equipment-section { margin: 22px 0; }
.location-equipment-section > .section-title { align-items: flex-end; }
.location-equipment-section > .section-title h2 { margin-bottom: 3px; }
.location-equipment-section > .section-title p { margin: 0; color: var(--muted); font-size: 11px; }
.equipment-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.equipment-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid var(--line); border-left: 4px solid #547caa; border-radius: 13px; background: var(--card); box-shadow: var(--shadow-sm); }
.equipment-card:hover { border-color: #91abc5; box-shadow: 0 8px 22px rgba(29,62,91,.10); transform: translateY(-1px); }
.equipment-card-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #eaf1f8; color: #365f89; font-size: 20px; }
.equipment-card div > span,.equipment-library-main > span { color: #52728f; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.equipment-card h3 { margin: 3px 0; font-size: 15px; }
.equipment-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.equipment-card > strong { color: var(--muted); font-size: 10px; white-space: nowrap; }
.add-equipment-panel { margin-top: 12px; }
.add-equipment-panel > summary,.equipment-create-panel > summary { color: #365f89; font-weight: 800; }
.equipment-search { margin-bottom: 12px; }
.equipment-filter-bar { display: grid; grid-template-columns: minmax(220px,1fr) repeat(3,minmax(135px,.4fr)) auto auto; align-items: end; }
.equipment-filter-bar label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.equipment-filter-bar .equipment-filter-search input,.equipment-filter-bar select { width: 100%; }
.equipment-create-panel { margin-bottom: 15px; }
.equipment-library-summary { display: flex; align-items: baseline; gap: 7px; margin: 14px 2px 10px; }
.equipment-library-summary strong { color: #365f89; font-size: 22px; }
.equipment-library-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.equipment-library { display: grid; gap: 10px; }
.equipment-library-card { display: grid; grid-template-columns: 48px minmax(220px,1.25fr) minmax(280px,1fr) auto; align-items: center; gap: 16px; padding: 17px 19px; border: 1px solid var(--line); border-left: 5px solid #547caa; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); }
.equipment-library-card:hover { border-color: #8aa9c7; box-shadow: 0 10px 27px rgba(29,62,91,.11); transform: translateY(-1px); }
.equipment-library-card .equipment-card-icon { width: 44px; height: 44px; }
.equipment-library-main h2 { margin: 4px 0 5px; font-size: 17px; }
.equipment-library-main p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.equipment-library-card dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; }
.equipment-library-card dl div { min-width: 0; }
.equipment-library-card dt { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.equipment-library-card dd { margin: 3px 0 0; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.equipment-file-count { color: #365f89; font-size: 10px; white-space: nowrap; }
.equipment-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 17px; padding: 23px 25px; border: 1px solid #cbd9e6; border-left: 6px solid #547caa; border-radius: 16px; background: linear-gradient(135deg,#edf4fa,var(--card) 72%); box-shadow: var(--shadow-sm); }
.equipment-hero h1 { margin: 5px 0 8px; font-size: 32px; }
.equipment-hero p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.equipment-hero p a { color: #365f89; font-weight: 800; }
.equipment-detail-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.75fr); gap: 16px; }
.equipment-main-column { display: flex; flex-direction: column; gap: 13px; }
.equipment-facts dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 0 0 18px; }
.equipment-facts dl div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.equipment-facts dt { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.equipment-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 800; }
.equipment-note-block { margin-top: 11px; padding: 14px 16px; border: 1px solid #c9d8e5; border-radius: 11px; background: #f5f9fc; }
.equipment-note-block.parts { border-color: #d8d3b5; background: #fffdf3; }
.equipment-note-block > span { color: #466c91; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.equipment-note-block.parts > span { color: #75631d; }
.equipment-note-block p { margin: 7px 0 0; font-size: 11px; line-height: 1.6; }
.equipment-file-column { min-width: 0; }
.equipment-file-column > .panel { position: sticky; top: 88px; }
.equipment-upload-form { margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.equipment-upload-form label small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.equipment-file-list { display: flex; flex-direction: column; gap: 7px; }
.equipment-file-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.equipment-file-type { padding: 4px 6px; border-radius: 6px; background: #e7f0f8; color: #365f89; font-size: 7px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.equipment-file-list article > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.equipment-file-list article a { min-width: 0; }
.equipment-file-list article a strong,.equipment-file-list article a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-file-list article a strong { color: #365f89; font-size: 11px; }
.equipment-file-list article small { color: var(--muted); font-size: 8px; }

html[data-theme="dark"] :is(.equipment-card,.equipment-library-card,.equipment-hero,.equipment-facts,.equipment-edit-panel,.equipment-file-column>.panel,.equipment-file-list article) { background: #202923; border-color: #4b5b52; color: #f2f6f3; }
html[data-theme="dark"] :is(.equipment-card-icon,.equipment-file-type) { background: #263b4b; color: #a9ccea; }
html[data-theme="dark"] :is(.equipment-card div>span,.equipment-library-main>span,.equipment-file-count,.equipment-hero p a,.equipment-file-list article a strong) { color: #a9ccea; }
html[data-theme="dark"] .equipment-note-block { background: #24323d; border-color: #526676; }
html[data-theme="dark"] .equipment-note-block.parts { background: #39351f; border-color: #6a6240; }
html[data-theme="dark"] .equipment-note-block p { color: #edf2ee; }
html[data-theme="dark"] .equipment-upload-form,html[data-theme="dark"] .equipment-facts dl div { background: #29332d; border-color: #526158; }

@media screen and (max-width: 900px) {
  .equipment-filter-bar { grid-template-columns: 1fr 1fr; }
  .equipment-filter-bar .equipment-filter-search { grid-column: 1/-1; }
  .equipment-card-grid { grid-template-columns: 1fr; }
  .equipment-library-card { grid-template-columns: 44px minmax(0,1fr) auto; }
  .equipment-library-card dl { grid-column: 2/-1; }
  .equipment-detail-layout { grid-template-columns: 1fr; }
  .equipment-file-column > .panel { position: static; }
}

@media screen and (max-width: 620px) {
  .equipment-filter-bar { grid-template-columns: 1fr 1fr; }
  .equipment-filter-bar .equipment-filter-search { grid-column: 1/-1; }
  .equipment-filter-bar .button { width: 100%; }
  .equipment-card { grid-template-columns: 38px minmax(0,1fr); padding: 13px; }
  .equipment-card > strong { grid-column: 2; }
  .equipment-library-card { grid-template-columns: 40px minmax(0,1fr); gap: 11px; padding: 14px; }
  .equipment-library-card dl { grid-column: 1/-1; grid-template-columns: 1fr 1fr; }
  .equipment-file-count { grid-column: 2; }
  .equipment-hero { flex-direction: column; padding: 18px; }
  .equipment-hero form,.equipment-hero .button { width: 100%; }
  .equipment-facts dl { grid-template-columns: 1fr 1fr; }
  .equipment-file-list article { grid-template-columns: auto minmax(0,1fr); }
  .equipment-file-list article form { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.photo-compression-status {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  text-transform: none;
}

html[data-theme="dark"] .photo-compression-status { color: #c6d1c9; }

.time-worker-picker { margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.time-worker-picker legend { padding: 0 6px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.time-worker-picker > div { display: grid; grid-template-columns: 1fr; gap: 7px; }
.time-worker-picker label { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font-size: 11px; font-weight: 750; cursor: pointer; text-transform: none; }
.time-worker-picker label:has(input:checked) { border-color: #73a887; background: #edf7f0; color: #245d3d; }
.time-worker-picker input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.time-worker-picker > small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.duplicate-time-override { display: flex!important; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid #decf9d; border-radius: 9px; background: #fff9e8; color: #725d19!important; font-size: 9px!important; font-weight: 700!important; line-height: 1.4; text-transform: none!important; }
.duplicate-time-override input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #b2871d; }
html[data-theme="dark"] .time-worker-picker { background: #252e29; border-color: #4b5b52; }
html[data-theme="dark"] .time-worker-picker label { background: #202923; border-color: #4b5b52; color: #edf3ef; }
html[data-theme="dark"] .time-worker-picker label:has(input:checked) { background: #294235; border-color: #75b18e; color: #b9e7ca; }
html[data-theme="dark"] .duplicate-time-override { background: #39351f; border-color: #70643a; color: #f0dda1!important; }

/* Manuals and parts library. The former equipment inventory UI is retained only
   for backward-compatible URLs and is no longer shown in the location workflow. */
.location-equipment-section { display: none; }
.location-manual-section { margin: 18px 0 24px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); box-shadow: var(--shadow-sm); }
.location-manual-section .section-title { margin-bottom: 12px; }
.location-manual-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.location-manual-list > a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.location-manual-list > a:hover { border-color: #7ca08a; }
.location-manual-list strong,.location-manual-list small { display: block; }
.location-manual-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.location-manual-list > a > span:last-child { color: var(--green); font-size: 9px; font-weight: 800; white-space: nowrap; }
.manual-file-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #e8f1eb; color: #2e6c47; font-size: 18px; }
.manual-library-layout { display: grid; grid-template-columns: minmax(230px,.55fr) minmax(0,1.8fr); align-items: start; gap: 16px; }
.manual-category-sidebar { position: sticky; top: 88px; padding: 14px; }
.manual-category-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.manual-category-sidebar nav a { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px 8px calc(9px + var(--category-depth,0)*15px); border: 1px solid transparent; border-radius: 8px; color: var(--ink); font-size: 10px; }
.manual-category-sidebar nav a:hover { background: var(--paper); }
.manual-category-sidebar nav a.active { border-color: #9ebba8; background: #edf6f0; color: #245d3d; }
.manual-category-sidebar nav a.inactive { opacity: .55; }
.manual-category-sidebar nav a span { color: var(--muted); font-size: 9px; }
.manual-category-manager { margin-top: 12px; border-top: 1px solid var(--line); }
.manual-category-manager > summary { padding: 12px 4px 4px; color: var(--green); font-size: 10px; font-weight: 850; }
.manual-category-manager > form { padding: 10px 2px; }
.manual-category-edit-list { display: flex; flex-direction: column; gap: 5px; }
.manual-category-edit-list > details { padding: 0 8px 8px; border: 1px solid var(--line); border-radius: 8px; }
.manual-category-edit-list > details > summary { padding: 9px 0; overflow: hidden; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.manual-category-edit-list .delete-note-button { margin-top: 7px; }
.manual-library-main { min-width: 0; }
.manual-library-filters { display: grid; grid-template-columns: minmax(220px,1fr) minmax(130px,.42fr) minmax(130px,.42fr) auto auto; align-items: end; gap: 9px; margin-bottom: 12px; padding: 12px; }
.manual-library-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.manual-upload-panel { margin-bottom: 13px; }
.manual-upload-panel > summary { color: var(--green); font-weight: 850; }
.manual-upload-panel select[multiple],.manual-document-edit select[multiple] { min-height: 115px; }
.manual-library-summary { display: flex; align-items: baseline; gap: 7px; margin: 12px 2px 8px; }
.manual-library-summary strong { font-size: 22px; }
.manual-library-summary span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.manual-document-list { display: flex; flex-direction: column; gap: 9px; }
.manual-document-list > article { position: relative; border: 1px solid var(--line); border-left: 5px solid #4f8a67; border-radius: 13px; background: var(--card); box-shadow: var(--shadow-sm); }
.manual-document-open { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 15px 17px; color: var(--ink); }
.manual-document-open > span:nth-child(2) { min-width: 0; }
.manual-document-open strong,.manual-document-open small { display: block; }
.manual-document-open strong { margin: 3px 0; font-size: 15px; }
.manual-document-open small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.manual-document-open p { margin: 7px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.manual-document-open > span:last-child { color: var(--green); font-size: 9px; font-weight: 800; line-height: 1.6; text-align: right; white-space: nowrap; }
.manual-document-type { color: #3d7453!important; font-size: 8px!important; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.manual-document-edit { border-top: 1px solid var(--line); }
.manual-document-edit > summary { padding: 9px 17px; color: var(--muted); font-size: 9px; font-weight: 750; }
.manual-document-edit form { padding: 4px 17px 15px; }
.manual-document-delete { position: absolute; right: 15px; bottom: 9px; }
.manual-search-notice,.manual-index-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #d7c38d; border-radius: 11px; background: #fff8e8; color: #654b17; }
.manual-search-notice { flex-direction: column; align-items: flex-start; gap: 3px; }
.manual-search-notice strong,.manual-index-notice strong { display: block; font-size: 11px; }
.manual-search-notice span,.manual-index-notice span { display: block; margin-top: 3px; font-size: 9px; line-height: 1.45; }
.manual-content-match { padding: 8px 10px; border-left: 3px solid #4f8a67; border-radius: 0 7px 7px 0; background: #edf6f0; color: #294f38!important; }
.manual-content-match strong { display: inline; color: #245d3d; font-size: inherit; }
.manual-index-status { width: max-content; margin: 5px 0 2px auto; padding: 3px 6px; border-radius: 999px; font-size: 7px!important; font-weight: 850; line-height: 1.2!important; white-space: nowrap; }
.manual-index-status.indexed { background: #e4f2e9; color: #286141!important; }
.manual-index-status.no-text { background: #f7eadc; color: #8a551d!important; }
.manual-reindex-form { padding: 0 17px 15px!important; }
.manual-reindex-form .button { min-height: 34px; padding: 6px 10px; font-size: 9px; }
.manual-search-previews { margin: 0 0 17px; padding: 15px; border: 1px solid #b9d0c1; border-radius: 14px; background: #f2f8f4; box-shadow: var(--shadow-sm); }
.manual-search-previews > header { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.manual-search-previews > header h2 { margin: 3px 0 0; font-size: 18px; }
.manual-search-previews > header small { color: var(--muted); font-size: 9px; font-weight: 750; }
.manual-search-previews > article { margin-top: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.manual-preview-document { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.manual-preview-document > div { min-width: 0; }
.manual-preview-document strong,.manual-preview-document small { display: block; }
.manual-preview-document strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.manual-preview-document small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.manual-preview-matches { display: grid; gap: 1px; background: var(--line); }
.manual-preview-matches > a { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; background: var(--card); }
.manual-preview-matches > a:hover { background: #f5faf7; }
.manual-preview-matches > a > span { color: #367050; font-size: 9px; font-weight: 850; white-space: nowrap; }
.manual-preview-matches > a > p { margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.manual-preview-matches > a > strong { color: var(--green); font-size: 9px; white-space: nowrap; }
.manual-preview-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 10px; text-align: center; }
html[data-theme="dark"] :is(.location-manual-section,.manual-category-sidebar,.manual-library-filters,.manual-upload-panel,.manual-document-list>article) { background: #202923; border-color: #4b5b52; color: #f2f6f3; }
html[data-theme="dark"] :is(.location-manual-list>a,.manual-category-sidebar nav a:hover,.manual-category-sidebar nav a.active) { background: #29332d; border-color: #526158; color: #edf3ef; }
html[data-theme="dark"] .manual-file-icon { background: #294235; color: #b9e7ca; }
html[data-theme="dark"] :is(.manual-search-notice,.manual-index-notice) { background: #3b3421; border-color: #6e6140; color: #f1dca7; }
html[data-theme="dark"] .manual-content-match { background: #253a2d; border-color: #70aa84; color: #d9ecdf!important; }
html[data-theme="dark"] .manual-content-match strong { color: #a9daba; }
html[data-theme="dark"] .manual-index-status.indexed { background: #294235; color: #b9e7ca!important; }
html[data-theme="dark"] .manual-index-status.no-text { background: #483727; color: #f0c697!important; }
html[data-theme="dark"] .manual-search-previews { background: #223029; border-color: #506b59; }
html[data-theme="dark"] :is(.manual-search-previews>article,.manual-preview-matches>a) { background: #202923; border-color: #4b5b52; }
html[data-theme="dark"] .manual-preview-matches>a:hover { background: #29352d; }
html[data-theme="dark"] .manual-preview-matches { background: #4b5b52; }
html[data-theme="dark"] .manual-preview-matches>a>span { color: #a9daba; }

/* Multi-item entry and ticket completion attribution. */
.material-entry-rows { display: flex; flex-direction: column; gap: 8px; }
.material-entry-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(86px,.42fr); align-items: end; gap: 8px; min-width: 0; padding: 10px 48px 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.material-entry-row label { min-width: 0; }
.material-entry-row label:first-child,.material-entry-row label:nth-child(4) { grid-column: 1/-1; }
.material-entry-row input { margin-top: 4px; }
.material-row-remove { position: absolute; top: 29px; right: 8px; display: grid; width: 32px; height: 38px; place-items: center; border: 1px solid #e2b9b1; border-radius: 8px; background: #fff5f3; color: #a43d28; font-size: 18px; cursor: pointer; }
.material-row-remove[hidden] { visibility: hidden; display: grid!important; }
.material-add-row { align-self: flex-start; }
.material-entry-form { min-width: 0; overflow: hidden; }
.work-update-author { display: grid; gap: 7px; min-width: 0; }
.work-update-author label { min-width: 0; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.work-update-author :is(select,input) { min-width: 0; margin-top: 4px; }
.work-update-form { grid-template-columns: minmax(170px,.52fr) minmax(0,1.48fr) auto; }
.ticket-completed-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; padding: 10px; border: 1px solid #b8d2c1; border-radius: 10px; background: #f0f8f3; }
.ticket-completed-picker[hidden] { display: none; }
.ticket-completed-picker label { min-width: 0; }
.ticket-completed-by { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid #afd0ba; border-left: 4px solid #4d9267; border-radius: 9px; background: #edf7f0; }
.ticket-completed-by span { color: #477158; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.ticket-completed-by strong { color: #245d3d; font-size: 11px; }
.ticket-completed-by small { margin-left: auto; color: var(--muted); font-size: 9px; }
html[data-theme="dark"] .material-entry-row { background: #29332d; border-color: #526158; }
html[data-theme="dark"] .material-row-remove { background: #392724; border-color: #704d46; color: #f1c8bf; }
html[data-theme="dark"] .work-update-author label { color: #b8c8bf; }
html[data-theme="dark"] .ticket-completed-picker,html[data-theme="dark"] .ticket-completed-by { background: #263a2e; border-color: #52705d; color: #e7f3eb; }
html[data-theme="dark"] .ticket-completed-by :is(span,strong) { color: #b9e0c6; }

@media screen and (max-width: 900px) {
  .manual-library-layout { grid-template-columns: 1fr; }
  .manual-category-sidebar { position: static; }
  .manual-category-sidebar nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .manual-library-filters { grid-template-columns: 1fr 1fr; }
  .manual-library-filters .manual-search { grid-column: 1/-1; }
  .manual-index-notice { align-items: stretch; flex-direction: column; }
  .manual-index-notice .button { width: 100%; }
  .manual-search-previews { padding: 11px; }
  .manual-search-previews > header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .manual-preview-matches > a { grid-template-columns: auto 1fr; gap: 5px 9px; }
  .manual-preview-matches > a > p { grid-column: 1/-1; display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .manual-preview-matches > a > strong { grid-column: 2; grid-row: 1; justify-self: end; }
  .work-update-form { grid-template-columns: 1fr; }
}

@media screen and (max-width: 520px) {
  .material-entry-row { grid-template-columns: 1fr; }
  .material-entry-row label:first-child,.material-entry-row label:nth-child(4) { grid-column: 1; }
  .ticket-completed-picker { grid-template-columns: 1fr; }
  .ticket-completed-by { align-items: flex-start; flex-direction: column; }
  .ticket-completed-by small { margin-left: 0; }
}

@media screen and (max-width: 480px) {
  .time-worker-picker > div { grid-template-columns: 1fr; }
  .location-manual-list,.manual-category-sidebar nav { grid-template-columns: 1fr; }
  .manual-document-open { grid-template-columns: auto minmax(0,1fr); padding: 13px; }
  .manual-document-open > span:last-child { grid-column: 2; text-align: left; }
  .manual-library-filters { grid-template-columns: 1fr 1fr; }
  .manual-library-filters .button { width: 100%; }
  .manual-document-delete { position: static; padding: 0 13px 12px; }
}

/* Modern invoice document surface and payment instructions. */
@media screen {
  body.page-invoice .invoice {
    position: relative;
    overflow: hidden;
    border: 10px solid #fff;
    outline: 1px solid #dbe4dd;
    background: #fff;
    box-shadow: 0 22px 60px rgba(22, 50, 32, .12);
  }

  body.page-invoice .invoice::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, #295c3b, #5b9972 68%, #bdd8c6);
  }

  body.page-invoice .invoice-company { min-width: 0; }
  body.page-invoice .invoice-company small {
    display: block;
    margin-bottom: 5px;
    color: #52705d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  body.page-invoice .invoice-remittance {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr);
    gap: 28px;
    margin-top: 24px;
    padding: 20px 22px;
    border: 1px solid #bed1c3;
    border-left: 5px solid #295c3b;
    border-radius: 10px;
    background: linear-gradient(135deg, #f1f7f3, #fff);
  }

  body.page-invoice .invoice-remittance span {
    color: #3c7050;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  body.page-invoice .invoice-remittance h2 {
    margin: 5px 0 7px;
    color: #1f4d31;
    font-size: 18px;
  }

  body.page-invoice .invoice-remittance p {
    margin: 0;
    color: #4d6053;
    font-size: 11px;
    line-height: 1.55;
  }

  body.page-invoice .invoice-remittance address {
    align-self: center;
    padding-left: 22px;
    border-left: 1px solid #cbd8ce;
    color: #25382b;
    font-size: 11px;
    font-style: normal;
    line-height: 1.55;
  }

  body.page-invoice .invoice-remittance address em {
    color: #9a422d;
    font-size: 10px;
  }

  .invoice-payment-settings { margin-bottom: 25px; border-top: 4px solid var(--green); }
  .admin-form-heading h2 { margin: 5px 0; }
  .admin-form-heading p, .admin-subsection-heading p { margin: 0; color: var(--muted); font-size: 11px; }
  .admin-subsection-heading { margin: 28px 0 14px; }
  .admin-subsection-heading h2 { margin: 0 0 5px; }

  html[data-theme="dark"] body.page-invoice .invoice {
    --ink: #17231b;
    --muted: #536359;
    --card: #fff;
    --paper: #fff;
    --line: #d2dbd4;
    border-color: #fff;
    outline-color: #69756d;
    background: #fff;
    color: #17231b;
  }
  html[data-theme="dark"] body.page-invoice .invoice * { color: #17231b !important; }
  html[data-theme="dark"] body.page-invoice .invoice .invoice-brand { color: #fff !important; }
  html[data-theme="dark"] body.page-invoice .invoice :is(.invoice-company small, .invoice-header > div:last-child span, .invoice-meta span, .invoice-remittance span) { color: #3c7050 !important; }
  html[data-theme="dark"] body.page-invoice .invoice :is(.invoice-meta p, .invoice-meta dt, .invoice-table td small, .invoice-materials p, .invoice-remittance p, .invoice-footer) { color: #536359 !important; }
  html[data-theme="dark"] body.page-invoice .invoice :is(.invoice-header > div:last-child strong, .invoice-remittance h2, .invoice-total strong) { color: #214e32 !important; }
  html[data-theme="dark"] body.page-invoice .invoice .invoice-meta { background: #f4f8f5 !important; border-color: #c8d5cb !important; }
  html[data-theme="dark"] body.page-invoice .invoice .invoice-table th { background: #dfeae2 !important; border-color: #becbc1 !important; color: #263b2d !important; }
  html[data-theme="dark"] body.page-invoice .invoice .invoice-table td { background: #fff !important; border-color: #d2dbd4 !important; }
  html[data-theme="dark"] body.page-invoice .invoice .invoice-table tbody tr:nth-child(even) td { background: #f7f9f7 !important; }
  html[data-theme="dark"] body.page-invoice .invoice .invoice-materials { background: #fafbfa !important; border-color: #d2dbd4 !important; }
  html[data-theme="dark"] body.page-invoice .invoice .invoice-total { background: #edf4ef !important; border-color: #9fb5a5 !important; }
  html[data-theme="dark"] body.page-invoice .invoice .invoice-remittance address em { color: #9a422d !important; }
  html[data-theme="dark"] body.page-invoice .invoice-remittance { background: linear-gradient(135deg, #edf5ef, #fff); border-color: #a9c2b0; }
  html[data-theme="dark"] body.page-invoice .invoice-remittance address { color: #25382b; }
}

@media screen and (max-width: 700px) {
  body.page-invoice .invoice { border-width: 5px; }
  body.page-invoice .invoice-remittance { grid-template-columns: 1fr; gap: 15px; padding: 17px; }
  body.page-invoice .invoice-remittance address { padding: 14px 0 0; border-top: 1px solid #cbd8ce; border-left: 0; }
}

/* Full-page customer invoice print layout. Keep this last so older responsive
   document rules cannot shrink or turn the invoice table into mobile cards. */
@media print {
  @page { size: Letter portrait; margin: .38in; }

  body.page-invoice {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #17231b !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11pt !important;
    zoom: 1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.page-invoice :is(.topbar, .invoice-toolbar, .invoice-status-actions,
    .mobile-bottom-nav, .quick-add-dialog, body > footer) {
    display: none !important;
  }

  body.page-invoice main.shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-invoice .invoice {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    overflow: visible !important;
    border: 1px solid #d6e0d8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #17231b !important;
  }

  body.page-invoice .invoice-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
    padding: 0 0 20px !important;
    border-bottom: 4px solid #295c3b !important;
    break-inside: avoid;
  }

  body.page-invoice .invoice-header > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  body.page-invoice .invoice-company small {
    display: block !important;
    margin-bottom: 4px !important;
    color: #52705d !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }

  body.page-invoice .invoice-brand {
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
    background: #295c3b !important;
    color: #fff !important;
    font: 700 25px Georgia, serif !important;
  }

  body.page-invoice .invoice-header h1 {
    margin: 0 !important;
    color: #17231b !important;
    font: 700 29px/1.1 Georgia, serif !important;
  }

  body.page-invoice .invoice-header > div:last-child {
    min-width: 180px !important;
    text-align: right !important;
  }

  body.page-invoice .invoice-header > div:last-child span {
    display: block !important;
    margin-bottom: 5px !important;
    color: #52685a !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }

  body.page-invoice .invoice-header > div:last-child strong {
    color: #214e32 !important;
    font-size: 21px !important;
  }

  body.page-invoice .invoice-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .8fr) !important;
    gap: 34px !important;
    margin: 20px 0 24px !important;
    padding: 18px 20px !important;
    border: 1px solid #c8d5cb !important;
    border-left: 5px solid #295c3b !important;
    border-radius: 7px !important;
    background: #f4f8f5 !important;
    break-inside: avoid;
  }

  body.page-invoice .invoice-meta span {
    display: block !important;
    margin: 0 0 5px !important;
    color: #295c3b !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
  }

  body.page-invoice .invoice-meta strong {
    color: #17231b !important;
    font-size: 11px !important;
  }

  body.page-invoice .invoice-meta p {
    margin: 4px 0 14px !important;
    color: #435448 !important;
    font-size: 9.5px !important;
    line-height: 1.45 !important;
  }

  body.page-invoice .invoice-meta dl {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(100px, 1.25fr) !important;
    gap: 8px 13px !important;
    margin: 0 !important;
  }

  body.page-invoice .invoice-meta dt,
  body.page-invoice .invoice-meta dd {
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }

  body.page-invoice .invoice-meta dt { color: #536359 !important; }
  body.page-invoice .invoice-meta dd {
    color: #17231b !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere;
    text-align: right !important;
  }

  body.page-invoice .invoice > .invoice-table {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 1px solid #becbc1 !important;
    border-collapse: collapse !important;
    background: #fff !important;
    font-size: 9.5px !important;
  }

  body.page-invoice .invoice > .invoice-table thead {
    display: table-header-group !important;
  }

  body.page-invoice .invoice > .invoice-table tbody { display: table-row-group !important; }
  body.page-invoice .invoice > .invoice-table tr {
    display: table-row !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.page-invoice .invoice > .invoice-table th,
  body.page-invoice .invoice > .invoice-table td {
    display: table-cell !important;
    padding: 10px 9px !important;
    border: 1px solid #d2dbd4 !important;
    color: #17231b !important;
    line-height: 1.4 !important;
    text-align: left !important;
    vertical-align: top !important;
  }

  body.page-invoice .invoice > .invoice-table th {
    background: #dfeae2 !important;
    color: #263b2d !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  body.page-invoice .invoice > .invoice-table tbody tr:nth-child(even) td {
    background: #f7f9f7 !important;
  }

  body.page-invoice .invoice > .invoice-table td strong {
    color: #17231b !important;
  }

  body.page-invoice .invoice > .invoice-table :is(th, td).number {
    white-space: nowrap !important;
    text-align: right !important;
  }

  body.page-invoice .invoice > .invoice-table th:nth-child(1) { width: 13%; }
  body.page-invoice .invoice > .invoice-table th:nth-child(2) { width: 38%; }
  body.page-invoice .invoice > .invoice-table th:nth-child(3) { width: 18%; }
  body.page-invoice .invoice > .invoice-table th:nth-child(4) { width: 9%; }
  body.page-invoice .invoice > .invoice-table th:nth-child(5) { width: 10%; }
  body.page-invoice .invoice > .invoice-table th:nth-child(6) { width: 12%; }

  body.page-invoice .invoice-table td small {
    display: block !important;
    margin-top: 4px !important;
    color: #536359 !important;
    font-size: 8.5px !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
  }

  body.page-invoice .invoice-materials {
    margin-top: 22px !important;
    padding: 15px 18px !important;
    border: 1px solid #d2dbd4 !important;
    border-radius: 7px !important;
    background: #fafbfa !important;
    break-inside: avoid;
  }

  body.page-invoice .invoice-materials h2 {
    margin: 0 !important;
    color: #295c3b !important;
    font-size: 13px !important;
  }

  body.page-invoice .invoice-materials p {
    margin: 4px 0 9px !important;
    color: #536359 !important;
    font-size: 8.5px !important;
  }

  body.page-invoice .invoice-materials ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-invoice .invoice-materials li {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #dce3de !important;
    font-size: 9px !important;
  }

  body.page-invoice .invoice-total {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: 330px !important;
    margin: 24px 0 0 auto !important;
    padding: 14px 17px !important;
    border: 1px solid #9fb5a5 !important;
    border-top: 4px solid #295c3b !important;
    border-radius: 7px !important;
    background: #edf4ef !important;
    break-inside: avoid;
  }

  body.page-invoice .invoice-total span {
    color: #435448 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
  }

  body.page-invoice .invoice-total strong {
    color: #214e32 !important;
    font: 700 27px/1 Georgia, serif !important;
  }

  body.page-invoice .invoice-remittance {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(200px, .75fr) !important;
    gap: 24px !important;
    margin-top: 20px !important;
    padding: 14px 17px !important;
    border: 1px solid #b7cbbb !important;
    border-left: 5px solid #295c3b !important;
    border-radius: 6px !important;
    background: #f1f7f3 !important;
    break-inside: avoid;
  }

  body.page-invoice .invoice-remittance span {
    color: #295c3b !important;
    font-size: 7.5px !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
  }

  body.page-invoice .invoice-remittance h2 {
    margin: 4px 0 5px !important;
    color: #214e32 !important;
    font-size: 14px !important;
  }

  body.page-invoice .invoice-remittance p {
    margin: 0 !important;
    color: #435448 !important;
    font-size: 8.5px !important;
    line-height: 1.45 !important;
  }

  body.page-invoice .invoice-remittance address {
    align-self: center !important;
    padding-left: 18px !important;
    border-left: 1px solid #c4d2c7 !important;
    color: #17231b !important;
    font-size: 8.5px !important;
    font-style: normal !important;
    line-height: 1.45 !important;
  }

  body.page-invoice .invoice-remittance address em { color: #8d3826 !important; }

  body.page-invoice .invoice-footer {
    display: block !important;
    margin-top: 30px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #c8d5cb !important;
    color: #536359 !important;
    font-size: 9px !important;
    text-align: center !important;
    break-inside: avoid;
  }
}

/* Compact page headers and work-status navigation so ticket content begins
   higher on the screen without reducing usable control sizes. */
@media screen {
  .page-heading { margin-bottom: 16px; gap: 12px; }
  body :is(.page-heading h1,.person-hero h1,.project-hero h1,.location-hero h1) {
    margin: 2px 0 4px;
    font-size: clamp(27px,2.55vw,36px);
    line-height: 1.05;
  }
  .page-heading p,.person-hero p { font-size: 11px; line-height: 1.4; }
  .page-heading .eyebrow { font-size: 9px; }
  .person-hero,.project-hero,.location-hero {
    margin-bottom: 18px;
    padding: 18px 20px;
  }

  .dashboard-heading { margin-bottom: 10px; }
  .dashboard-heading + .stats {
    gap: 6px;
    margin-bottom: 10px;
    border-radius: 9px;
    overflow: visible;
  }
  .dashboard-heading + .stats > :is(a,div) {
    min-height: 50px;
    padding: 7px 10px;
    border-radius: 9px;
    box-shadow: none;
  }
  .dashboard-heading + .stats span { font-size: 9px; }
  .dashboard-heading + .stats strong { font-size: 18px; line-height: 1; }
}

@media screen and (min-width: 1101px) {
  body:is(.page-people,.page-quotes,.page-reports,.page-calendar,.page-waiting_report,
    .page-billing,.page-admin) .shell > .page-heading {
    min-height: 112px;
    margin-bottom: 16px;
    padding-top: 24px;
    padding-bottom: 18px;
  }
}

@media screen and (max-width: 700px) {
  .page-heading { margin-bottom: 11px; }
  body :is(.page-heading h1,.person-hero h1,.project-hero h1,.location-hero h1) {
    font-size: 25px;
  }
  .person-hero,.project-hero,.location-hero {
    margin-bottom: 13px;
    padding: 14px 15px;
  }
  .dashboard-heading { margin-bottom: 7px; }
  .stats { margin-bottom: 8px; }
  .dashboard-heading + .stats { overflow-x: auto; overflow-y: hidden; }
  .dashboard-heading + .stats > :is(a,div) {
    flex-basis: 90px;
    min-height: 52px;
    padding: 7px 9px;
  }
}

/* Unified Active Work toolbar. Search, assignment, sorting, and reusable views
   share one quiet surface; secondary choices live in compact popovers. */
@media screen {
  .work-queue-controls {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px,1fr) auto auto 46px !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 11px;
    padding: 6px !important;
    border: 1px solid var(--ui-line);
    border-radius: 12px !important;
    background: var(--ui-card);
    box-shadow: var(--ui-shadow-sm);
  }

  .work-queue-controls .ticket-search-form {
    display: flex;
    grid-column: auto;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .work-queue-controls .ticket-search-input {
    display: grid;
    flex: 1;
    grid-template-columns: 28px minmax(0,1fr);
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: var(--ui-card-soft);
  }
  .work-queue-controls .ticket-search-input input {
    height: 36px;
    margin: 0 !important;
    padding: 6px 9px 6px 0 !important;
    font-size: 11px;
  }
  .queue-icon-button {
    display: inline-grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--ui-primary);
    color: #fff;
    font: 800 0/1 var(--ui-font);
    cursor: pointer;
  }
  .queue-search-button::before { content: "⌕"; font-size: 17px; }
  .queue-icon-button.ticket-search-clear { background: transparent; color: var(--ui-danger); font-size: 19px; }

  .work-queue-filter-row { display: block; min-width: 0; }
  .work-queue-controls .status-filters { display: none !important; }
  .queue-popover { position: relative; min-width: 0; margin: 0; }
  .queue-popover > summary,
  .work-queue-controls .assignment-filter-locked {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 0;
    border-left: 1px solid var(--ui-line);
    border-radius: 0;
    background: transparent;
    color: var(--ui-text);
    list-style: none;
    cursor: pointer;
  }
  .queue-popover > summary::-webkit-details-marker { display: none; }
  .queue-popover > summary::after { content: "⌄"; margin-left: 2px; color: var(--ui-muted); font-size: 10px; }
  .queue-popover[open] > summary { border-radius: 8px; background: var(--ui-primary-soft); }
  .queue-control-label,
  .work-queue-controls .assignment-filter-locked > span { color: var(--ui-muted) !important; font-size: 8px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .06em; }
  .work-queue-controls .assignment-filter { width: auto; }
  .work-queue-controls .assignment-filter > summary { min-height: 36px; gap: 6px; padding: 5px 9px; border: 0; border-left: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
  .work-queue-controls .assignment-filter > summary::after { content: "⌄"; margin-left: 2px; color: var(--ui-muted); }
  .assignment-summary-chips { display: flex; min-width: 0; align-items: center; gap: 3px; }
  .assignment-summary-chips > span {
    overflow: hidden;
    max-width: 92px;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .work-queue-controls .assignment-filter-locked { cursor: default; }
  .work-queue-controls .assignment-filter-locked > strong { font-size: 10px; }

  .work-queue-controls .assignment-filter > form,
  .queue-sort-form,
  .queue-more-panel {
    position: absolute;
    z-index: 70;
    top: calc(100% + 7px);
    right: 0;
    left: auto;
    width: min(310px,calc(100vw - 28px));
    padding: 10px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-card);
    box-shadow: 0 18px 42px rgba(14,31,20,.2);
  }
  .assignment-filter > form > header,
  .queue-sort-form > header,
  .queue-more-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 2px 8px; border-bottom: 1px solid var(--ui-line); }
  .assignment-filter > form > header strong,
  .queue-sort-form > header strong,
  .queue-more-panel > header strong { font-size: 11px; }
  .assignment-filter > form > header small,
  .queue-sort-form > header small,
  .queue-more-panel > header small { color: var(--ui-muted); font-size: 8px; text-align: right; }

  .assignment-search { display: grid !important; grid-template-columns: 25px minmax(0,1fr); align-items: center !important; min-height: 34px; margin: 8px 0 4px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-card-soft); color: var(--ui-muted) !important; }
  .assignment-search > span { text-align: center; }
  .assignment-search input { height: 32px; margin: 0 !important; padding: 5px 8px 5px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 10px; }
  .assignment-everyone,
  .assignment-person-list label {
    display: flex !important;
    min-height: 33px !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0;
    padding: 5px 7px !important;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb,var(--ui-line) 75%,transparent);
    border-radius: 0;
    background: transparent;
    color: var(--ui-text) !important;
    font-size: 10px !important;
    line-height: 1.2;
    text-transform: none !important;
  }
  .assignment-everyone { min-height: 41px !important; }
  .assignment-everyone span { gap: 0; }
  .assignment-everyone small { font-size: 7px; }
  .assignment-person-list { display: grid; grid-template-columns: 1fr; gap: 0; max-height: 245px; margin: 0; overflow-y: auto; }
  .assignment-everyone input,.assignment-person-list input { width: 15px !important; height: 15px !important; }
  .assignment-everyone:has(input:checked),
  .assignment-person-list label:has(input:checked) { border-color: color-mix(in srgb,var(--ui-primary) 18%,var(--ui-line)); background: var(--ui-primary-soft); color: var(--ui-primary-strong) !important; }
  .assignment-person-list label[hidden] { display: none !important; }

  .work-queue-sort > summary { white-space: nowrap; }
  .work-queue-sort > summary strong { font-size: 10px; }
  .work-queue-sort > summary small { color: var(--ui-primary); font-size: 11px; }
  .queue-sort-form { display: grid; gap: 8px; width: min(285px,calc(100vw - 28px)); }
  .queue-sort-form label { color: var(--ui-muted); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .queue-sort-form select { min-height: 36px; margin-top: 4px; padding: 6px 28px 6px 9px; font-size: 10px; }
  .queue-sort-form .button { min-height: 35px; padding: 6px 10px; font-size: 10px; }

  .work-queue-more > summary { justify-content: center; min-width: 42px; padding: 5px 7px; }
  .work-queue-more > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .work-queue-more > summary > strong { font-size: 12px; letter-spacing: 1px; }
  .work-queue-more > summary::after { display: none; }
  .queue-more-panel { width: min(300px,calc(100vw - 28px)); }
  .saved-work-views { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
  .saved-work-views select { grid-column: 1/-1; width: 100%; min-height: 36px; margin: 0; padding: 6px 28px 6px 9px; font-size: 10px; }
  .saved-work-views button { min-height: 34px; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-card-soft); color: var(--ui-primary); font: 800 9px var(--ui-font); cursor: pointer; }
  .saved-work-views [data-delete-work-view] { color: var(--ui-danger); }

  html[data-theme="dark"] .work-queue-controls .ticket-search-input,
  html[data-theme="dark"] .assignment-search { background: var(--ui-card-soft); }
  html[data-theme="dark"] .queue-popover[open] > summary,
  html[data-theme="dark"] .assignment-summary-chips > span,
  html[data-theme="dark"] :is(.assignment-everyone,.assignment-person-list label):has(input:checked) { background: #294136; color: #c5ead2 !important; }
}

@media screen and (max-width: 700px) {
  .work-queue-controls {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 42px !important;
    gap: 5px !important;
    padding: 6px !important;
  }
  .work-queue-controls .ticket-search-form { grid-column: 1/-1; }
  .work-queue-controls .ticket-search-input { min-height: 39px; }
  .work-queue-controls .ticket-search-input input { height: 39px; }
  .queue-icon-button { width: 39px; height: 39px; }
  .work-queue-filter-row { grid-column: auto; }
  .work-queue-controls .assignment-filter,
  .work-queue-controls .assignment-filter-locked,
  .work-queue-sort { width: 100%; }
  .queue-popover > summary,
  .work-queue-controls .assignment-filter > summary,
  .work-queue-controls .assignment-filter-locked { width: 100%; min-height: 39px; justify-content: center; padding: 5px 7px; border-left: 0; border-radius: 8px; background: var(--ui-card-soft); }
  .queue-control-label { display: none; }
  .assignment-summary-chips { max-width: calc(100% - 18px); }
  .assignment-summary-chips > span { max-width: 105px; }
  .assignment-summary-chips > span:nth-child(n+2) { display: none; }
  .work-queue-sort > summary strong { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
  .work-queue-more > summary { min-width: 39px; }

  .work-queue-controls .assignment-filter > form,
  .queue-sort-form,
  .queue-more-panel {
    position: fixed;
    z-index: 115;
    top: auto;
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 105px);
    padding: 12px;
    overflow-y: auto;
    border-radius: 16px;
  }
  .assignment-person-list { max-height: min(48dvh,330px); }
  .assignment-person-list label { min-height: 40px !important; padding: 7px 8px !important; font-size: 11px !important; }
  .assignment-everyone { min-height: 46px !important; }
  .assignment-search { min-height: 39px; }
  .assignment-search input { height: 37px; }
  .saved-work-views { grid-column: auto; }
}

/* Quieter ticket hierarchy: identity first, conditional alerts second, and a
   single metadata footer instead of several competing blocks. */
@media screen {
  .dashboard-view-detailed .project-select-row { min-width: 0; }
  .dashboard-view-detailed .project-card {
    grid-template-columns: minmax(0,1fr) !important;
    min-width: 0;
    min-height: 0;
    padding: 11px 14px;
  }
  .dashboard-view-detailed .project-main {
    position: relative;
    display: flex !important;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding-right: 98px;
  }
  .dashboard-view-detailed .project-main .card-top {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }
  .dashboard-view-detailed .project-main .customer {
    order: 1;
    margin: 0;
    color: var(--ui-primary-strong);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
  }
  .dashboard-view-detailed .project-main h3 {
    order: 2;
    margin: 1px 0 0;
    font-size: 14px;
    line-height: 1.25;
  }
  .dashboard-view-detailed .project-main .project-summary {
    display: -webkit-box;
    order: 3;
    max-width: 900px;
    margin: 1px 0;
    overflow: hidden;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .dashboard-view-detailed .project-main .assigned-team {
    display: inline-flex !important;
    order: 4;
    width: fit-content !important;
    max-width: 100%;
    align-items: center;
    margin: 3px 0 1px;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    font-size: 9px;
    line-height: 1.25;
  }
  .dashboard-view-detailed .project-main .ticket-unassigned {
    border-color: color-mix(in srgb,var(--ui-warning) 34%,var(--ui-line));
    background: color-mix(in srgb,var(--ui-warning) 9%,var(--ui-card));
    color: var(--ui-warning);
  }
  .dashboard-view-detailed .project-main :is(.waiting-reason,.queue-entry-code) {
    order: 5;
    width: fit-content;
    max-width: 100%;
    margin: 3px 0 0 !important;
  }
  .dashboard-view-detailed .ticket-card-footer {
    display: flex;
    order: 6;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb,var(--ui-line) 78%,transparent);
  }
  .dashboard-view-detailed .ticket-card-footer .address {
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ui-muted);
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-view-detailed .ticket-card-footer .project-entered-date {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    color: var(--ui-muted);
    font-size: 8px !important;
    white-space: nowrap;
  }
  .dashboard-view-detailed .ticket-card-footer .project-entered-date strong { color: var(--ui-text); }

  /* Project workspace sections use one consistent compact disclosure pattern. */
  .page-project .project-content,
  .page-project .project-sidebar { gap: 10px; }
  .page-project details.project-section,
  .page-project details.project-action-section {
    padding: 0 !important;
    overflow: clip;
  }
  .page-project .project-section-summary,
  .page-project .project-action-section > summary {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 13px !important;
    border: 0 !important;
    border-radius: 12px;
    background: transparent !important;
    color: var(--ui-text) !important;
    list-style: none;
  }
  .page-project .project-section-summary::-webkit-details-marker,
  .page-project .project-action-section > summary::-webkit-details-marker { display: none; }
  .page-project .project-section-summary > span,
  .page-project .project-action-section > summary > span { display: flex; min-width: 0; align-items: center; gap: 8px; }
  .page-project .project-section-summary b,
  .page-project .project-action-section > summary b {
    display: grid;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 7px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: 12px;
  }
  .page-project .project-section-summary strong,
  .page-project .project-action-section > summary strong { font-size: 12px; }
  .page-project .project-section-summary > small,
  .page-project .project-action-section > summary > small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ui-muted);
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
  }
  .page-project .project-section-summary::after,
  .page-project .project-action-section > summary::after { content: "⌄"; color: var(--ui-muted); font-size: 11px; }
  .page-project details[open] > .project-section-summary,
  .page-project details.project-action-section[open] > summary { border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--ui-line) !important; }
  .page-project details[open] > .project-section-summary::after,
  .page-project details.project-action-section[open] > summary::after { transform: rotate(180deg); }
  .page-project .project-section-body { padding: 12px 14px 14px; }
  .page-project .project-section-body > :first-child { margin-top: 0; }
  .page-project .project-section-body > :last-child { margin-bottom: 0; }
  .page-project .project-edit-details { margin-top: 10px; }
  .page-project .project-edit-details > summary { padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-card-soft); font-size: 10px; }
  .page-project .project-action-section > form { margin: 0; padding: 12px 14px 14px; }
  .page-project .project-history-section .project-section-body { padding: 0; }
  .page-project .project-history-section .entries { border: 0; border-radius: 0; }
  .page-project .project-history-section .entries > :last-child { border-bottom: 0; }
  .page-project .timeline { margin-top: 14px; }
  .page-project #project-photos .compact-upload { margin-top: 10px; }

  html[data-theme="dark"] .page-project :is(.project-section-summary,.project-action-section > summary) b { background: #294136; color: #bde4ca; }
  html[data-theme="dark"] .dashboard-view-detailed .project-main .ticket-unassigned { background: #3b3322; color: #e6c47d; }
}

@media screen and (max-width: 700px) {
  .dashboard-view-detailed .project-main { padding-right: 82px; }
  .dashboard-view-detailed .project-main h3 { font-size: 13px; }
  .dashboard-view-detailed .ticket-card-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .dashboard-view-detailed .ticket-card-footer .address { width: 100%; white-space: normal; }
  .dashboard-view-detailed .ticket-card-footer .project-entered-date { flex-wrap: wrap; white-space: normal; }
  .page-project .project-section-summary,
  .page-project .project-action-section > summary { min-height: 44px; padding: 9px 11px !important; }
  .page-project .project-section-body,
  .page-project .project-action-section > form { padding: 11px; }
}

/* 2026 Field Tracking visual lift */
@media screen {
  :root {
    --ui-bg: #eef3f0;
    --ui-card: #ffffff;
    --ui-card-soft: #f5f8f6;
    --ui-text: #142019;
    --ui-muted: #64736a;
    --ui-line: #d7e1da;
    --ui-primary: #146c46;
    --ui-primary-strong: #0c5033;
    --ui-primary-soft: #e5f2ea;
    --ui-accent: #cf8128;
    --ui-danger: #b23f2d;
    --ui-warning: #a96d18;
    --ui-radius-sm: 9px;
    --ui-radius: 13px;
    --ui-radius-lg: 18px;
    --ui-shadow-sm: 0 3px 12px rgba(20,48,32,.06);
    --ui-shadow: 0 16px 42px rgba(20,48,32,.11);
    --icon-work: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5zM9 21v-7h6v7'/%3E%3C/svg%3E");
    --icon-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2.5 21v-2a6.5 6.5 0 0 1 13 0v2M16 4.5a4 4 0 0 1 0 7.5M18 14a6 6 0 0 1 3.5 5.5V21'/%3E%3C/svg%3E");
    --icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H11v18H6.5A2.5 2.5 0 0 0 4 22zM20 4.5A2.5 2.5 0 0 0 17.5 2H13v18h4.5A2.5 2.5 0 0 1 20 22z'/%3E%3C/svg%3E");
    --icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h8l4 4v16H6zM14 2v5h5M9 12h6M9 16h6'/%3E%3C/svg%3E");
    --icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
    --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E");
    --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2zM9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E");
    --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6'/%3E%3C/svg%3E");
    --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
  }

  html[data-theme="dark"] {
    --ui-bg: #101713;
    --ui-card: #1b2620;
    --ui-card-soft: #243129;
    --ui-text: #f1f6f3;
    --ui-muted: #b4c1b8;
    --ui-line: #435249;
    --ui-primary: #78cf99;
    --ui-primary-strong: #bce8cb;
    --ui-primary-soft: #293f34;
    --ui-accent: #e7ad62;
    --ui-danger: #ff9587;
    --ui-warning: #efc16f;
    --ui-shadow-sm: 0 4px 15px rgba(0,0,0,.25);
    --ui-shadow: 0 18px 46px rgba(0,0,0,.38);
    --ink: var(--ui-text);
    --muted: var(--ui-muted);
    --paper: var(--ui-bg);
    --card: var(--ui-card);
    --line: var(--ui-line);
    --green: var(--ui-primary);
    --green2: var(--ui-primary);
  }

  body { background: linear-gradient(145deg,color-mix(in srgb,var(--ui-primary) 4%,var(--ui-bg)),var(--ui-bg) 44rem); color: var(--ui-text); }

  /* One line-icon language across desktop navigation and page titles. */
  .topbar :is(.active-work-quick,nav>a,.quick-add-trigger)::before,
  .page-heading h1::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--nav-icon,var(--page-icon,var(--icon-work))) center/contain no-repeat;
    mask: var(--nav-icon,var(--page-icon,var(--icon-work))) center/contain no-repeat;
  }
  .topbar .active-work-quick { --nav-icon: var(--icon-work); }
  .topbar nav a[href*="page=people"] { --nav-icon: var(--icon-people); }
  .topbar nav a[href*="page=library"] { --nav-icon: var(--icon-book); }
  .topbar nav a[href*="page=quotes"] { --nav-icon: var(--icon-file); }
  .topbar nav a[href*="page=reports"] { --nav-icon: var(--icon-chart); }
  .topbar nav a[href*="page=calendar"] { --nav-icon: var(--icon-calendar); }
  .topbar nav a[href*="page=waiting_report"] { --nav-icon: var(--icon-clock); }
  .topbar nav a[href*="page=billing"] { --nav-icon: var(--icon-receipt); }
  .topbar nav a[href*="page=admin"] { --nav-icon: var(--icon-settings); }
  .topbar nav a[href*="page=new_project"],.topbar .quick-add-trigger { --nav-icon: var(--icon-plus); }
  .topbar :is(.active-work-quick,nav>a,.quick-add-trigger) { display: inline-flex; align-items: center; gap: 6px; }
  .topbar nav>a { position: relative; border-radius: 8px; }
  body.page-people .topbar nav a[href*="page=people"],
  body.page-library .topbar nav a[href*="page=library"],
  body:is(.page-quotes,.page-quote,.page-new_quote) .topbar nav a[href*="page=quotes"],
  body.page-reports .topbar nav a[href*="page=reports"],
  body.page-calendar .topbar nav a[href*="page=calendar"],
  body.page-waiting_report .topbar nav a[href*="page=waiting_report"],
  body:is(.page-billing,.page-invoice) .topbar nav a[href*="page=billing"],
  body.page-admin .topbar nav a[href*="page=admin"] { background: var(--ui-primary-soft); color: var(--ui-primary-strong); box-shadow: inset 0 -2px 0 var(--ui-primary); }

  body.page-dashboard { --page-icon: var(--icon-work); }
  body:is(.page-people,.page-person,.page-location) { --page-icon: var(--icon-people); }
  body.page-library { --page-icon: var(--icon-book); }
  body:is(.page-quotes,.page-quote,.page-new_quote) { --page-icon: var(--icon-file); }
  body.page-reports { --page-icon: var(--icon-chart); }
  body.page-calendar { --page-icon: var(--icon-calendar); }
  body.page-waiting_report { --page-icon: var(--icon-clock); }
  body:is(.page-billing,.page-invoice) { --page-icon: var(--icon-receipt); }
  body.page-admin { --page-icon: var(--icon-settings); }
  .page-heading h1 { display: flex; align-items: center; gap: 10px; }
  .page-heading h1::before { width: .78em; height: .78em; color: var(--ui-primary); }

  /* Refined actions: clear hierarchy without heavy gradients or oversized controls. */
  .button,button,input[type="submit"] { transition: border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease; }
  .button { min-height: 37px; gap: 6px; border-color: var(--ui-line); border-radius: 10px; background: var(--ui-card); color: var(--ui-text); box-shadow: 0 1px 2px rgba(20,48,32,.035); }
  .button:hover { border-color: color-mix(in srgb,var(--ui-primary) 34%,var(--ui-line)); background: var(--ui-card-soft); box-shadow: var(--ui-shadow-sm); transform: translateY(-1px); }
  .button.primary { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb,var(--ui-primary) 22%,transparent); }
  .button.primary:hover { background: var(--ui-primary-strong); color: #fff; }
  html[data-theme="dark"] .button.primary { background: #397c56; border-color: #64b783; color: #fff; }
  .button.danger { border-color: color-mix(in srgb,var(--ui-danger) 36%,var(--ui-line)); background: color-mix(in srgb,var(--ui-danger) 7%,var(--ui-card)); color: var(--ui-danger); }
  :is(.button,button,a,summary,input,select,textarea):focus-visible { outline: 3px solid color-mix(in srgb,var(--ui-primary) 28%,transparent); outline-offset: 2px; }

  /* Forms use quiet grouping, stronger focus, and consistent label hierarchy. */
  :is(.form-grid,.stack) label { color: var(--ui-muted); font-weight: 800; letter-spacing: .045em; }
  :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]) { border-color: var(--ui-line); background: var(--ui-card-soft); color: var(--ui-text); transition: border-color .16s ease,box-shadow .16s ease,background-color .16s ease; }
  :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus { border-color: var(--ui-primary) !important; background: var(--ui-card); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ui-primary) 14%,transparent) !important; }
  :is(.form-grid,.stack) fieldset { border: 1px solid var(--ui-line); border-radius: 11px; background: color-mix(in srgb,var(--ui-card-soft) 88%,transparent); }
  :is(.form-grid,.stack) legend { padding: 0 7px; color: var(--ui-primary-strong); font-size: 10px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
  .field-help { line-height: 1.45; }

  /* Status stays colorful, but text contrast is consistent in both themes. */
  .badge { border: 1px solid transparent; font-weight: 850; letter-spacing: .055em; }
  .status-open { border-color: #b9ceda; background: #e8f0f4; color: #315970; }
  .status-scheduled { border-color: #cfc1e2; background: #f0eaf7; color: #654d83; }
  .status-waiting { border-color: #e5c992; background: #fbf1dc; color: #805510; }
  .status-to_be_billed { border-color: #efaca4; background: #fde7e4; color: #a83226; }
  .status-completed { border-color: #acd6bc; background: #e3f2e8; color: #246440; }
  .status-invoiced { border-color: #b9cbe1; background: #e8eef7; color: #365d89; }
  html[data-theme="dark"] .status-open { border-color: #527185; background: #263a45; color: #b9daeb; }
  html[data-theme="dark"] .status-scheduled { border-color: #78678f; background: #352e42; color: #dbcaf0; }
  html[data-theme="dark"] .status-waiting { border-color: #8b6b34; background: #3b3322; color: #f0ce8d; }
  html[data-theme="dark"] .status-to_be_billed { border-color: #94554f; background: #432a27; color: #ffb6ad; }
  html[data-theme="dark"] .status-completed { border-color: #4f7d60; background: #263d2f; color: #b9e7c8; }
  html[data-theme="dark"] .status-invoiced { border-color: #58708e; background: #293645; color: #c4d8f0; }

  /* Aging is recognizable at a glance without coloring the entire ticket loudly. */
  .stale-ticket-label { display: inline-flex; align-items: center; gap: 5px; }
  .stale-ticket-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-warning); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ui-warning) 13%,transparent); }
  .stale-ticket-card.stale-14 .stale-ticket-label::before { background: #d16e2d; }
  .stale-ticket-card.stale-30 .stale-ticket-label::before { background: var(--ui-danger); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent); }

  /* Saved/error messages float above the page and dismiss themselves. */
  .flash {
    position: fixed;
    z-index: 180;
    right: 18px;
    bottom: 18px;
    display: flex;
    width: min(390px,calc(100vw - 28px));
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 13px 42px 13px 43px;
    border: 1px solid #a8d2b8;
    border-radius: 13px;
    background: color-mix(in srgb,#e4f4e9 94%,transparent);
    color: #17583a;
    box-shadow: 0 18px 45px rgba(13,35,23,.2);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .22s ease,transform .22s ease;
    backdrop-filter: blur(16px);
  }
  .flash::before { content: ""; position: absolute; left: 14px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon-check) center/contain no-repeat; mask: var(--icon-check) center/contain no-repeat; }
  .flash.flash-visible { opacity: 1; transform: translateY(0) scale(1); }
  .flash.error { border-color: #e4aaa1; background: color-mix(in srgb,#f9e7e3 95%,transparent); color: #8f3022; }
  .flash.error::before { -webkit-mask: var(--icon-clock) center/contain no-repeat; mask: var(--icon-clock) center/contain no-repeat; }
  .flash-close { position: absolute; top: 50%; right: 8px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: currentColor; font-size: 19px; transform: translateY(-50%); cursor: pointer; }
  html[data-theme="dark"] .flash { border-color: #4f7c60; background: rgba(36,61,46,.96); color: #c2ebcf; }
  html[data-theme="dark"] .flash.error { border-color: #8d554e; background: rgba(66,39,36,.97); color: #ffc0b7; }

  /* Empty states now look intentional and point toward the next action. */
  .empty { padding: clamp(28px,5vw,48px) 22px; border-style: solid; border-color: var(--ui-line); background: color-mix(in srgb,var(--ui-card) 94%,var(--ui-primary-soft)); box-shadow: var(--ui-shadow-sm); }
  .empty::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 10px; background: var(--ui-primary); -webkit-mask: var(--icon-check) center/22px no-repeat; mask: var(--icon-check) center/22px no-repeat; }
  .empty strong { color: var(--ui-text); }
  .empty p { max-width: 520px; margin: 7px auto 0; line-height: 1.5; }

  /* Optional system artwork becomes a backdrop rather than fighting the UI. */
  body.has-site-background :is(.panel,.directory-person,.work-queue-controls,.weekly-report-card,.billing-column,.admin-content,.admin-nav,.quote-list>a,.invoice-list>a,.calendar-controls) { background: color-mix(in srgb,var(--ui-card) 91%,transparent) !important; backdrop-filter: blur(13px) saturate(1.05); }
  html[data-theme="dark"] body.has-site-background :is(.panel,.directory-person,.work-queue-controls,.weekly-report-card,.billing-column,.admin-content,.admin-nav,.quote-list>a,.invoice-list>a,.calendar-controls) { background: color-mix(in srgb,var(--ui-card) 93%,transparent) !important; }

  /* A little motion communicates hierarchy; reduced-motion users get none. */
  :is(.panel,.directory-person,.project-card,.quote-list>a,.invoice-list>a,.weekly-report-card) { transition: border-color .17s ease,box-shadow .17s ease,transform .17s ease,background-color .17s ease; }
  :is(.panel,.directory-person,.quote-list>a,.invoice-list>a,.weekly-report-card):hover { border-color: color-mix(in srgb,var(--ui-primary) 24%,var(--ui-line)); }
  details > summary::after { transition: transform .17s ease; }
}

@media screen and (max-width: 700px) {
  .topbar :is(.active-work-quick,nav>a,.quick-add-trigger)::before { width: 15px; height: 15px; }
  .page-heading h1::before { width: .75em; height: .75em; }
  .flash { right: 8px; bottom: calc(82px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Visual-lift compatibility bridge */
@media screen {
  :root {
    --ink: var(--ui-text);
    --muted: var(--ui-muted);
    --paper: var(--ui-bg);
    --card: var(--ui-card);
    --line: var(--ui-line);
    --green: var(--ui-primary);
    --green2: var(--ui-primary);
    --shadow: var(--ui-shadow);
  }
  .topbar > nav > a[href*="page=calendar"]::after { display: none !important; content: none !important; }
  .global-search button { position: relative; display: inline-flex; align-items: center; gap: 6px; }
  .global-search button::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--icon-search) center/contain no-repeat; mask: var(--icon-search) center/contain no-repeat; }
}
/* Parent-section navigation states */
@media screen {
  body:is(.page-dashboard,.page-project,.page-onsite,.page-new_project,.page-search) .topbar .active-work-quick,
  body:is(.page-people,.page-person,.page-location,.page-new_person) .topbar nav a[href*="page=people"],
  body:is(.page-library,.page-manual,.page-equipment) .topbar nav a[href*="page=library"],
  body:is(.page-quotes,.page-quote,.page-new_quote) .topbar nav a[href*="page=quotes"],
  body.page-reports .topbar nav a[href*="page=reports"],
  body.page-calendar .topbar nav a[href*="page=calendar"],
  body.page-waiting_report .topbar nav a[href*="page=waiting_report"],
  body:is(.page-billing,.page-invoice) .topbar nav a[href*="page=billing"],
  body.page-admin .topbar nav a[href*="page=admin"] {
    background: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
    box-shadow: inset 0 -2px 0 var(--ui-primary);
  }
}
/* 2026 usability, preview, notification, and PWA pass */
@media screen {
  html,body { max-width: 100%; overflow-x: clip; }
  .shell > *, .project-select-row, .project-main, .panel { min-width: 0; }
  img,svg { max-width: 100%; }

  .skip-link {
    position: fixed;
    z-index: 250;
    top: 8px;
    left: 8px;
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--ui-primary);
    color: #fff;
    font-weight: 850;
    transform: translateY(-150%);
    transition: transform .15s ease;
  }
  .skip-link:focus { color: #fff; transform: translateY(0); }

  /* Perceived performance and upload clarity. */
  body.is-navigating .topbar::after { content: ""; position: absolute; z-index: 210; right: 0; bottom: -1px; left: 0; height: 3px; background: linear-gradient(90deg,transparent,var(--ui-primary),var(--ui-accent),transparent); background-size: 220% 100%; animation: ui-loading-bar .9s linear infinite; }
  @keyframes ui-loading-bar { from { background-position: 100% 0; } to { background-position: -120% 0; } }
  [data-submitting="1"] { position: relative; gap: 7px; cursor: wait; opacity: .86; }
  [data-submitting="1"]::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .65s linear infinite; }
  @keyframes ui-spin { to { transform: rotate(360deg); } }
  .file-selection-feedback { display: block; margin-top: 5px; color: var(--ui-primary); font-size: 9px; font-weight: 750; text-transform: none; letter-spacing: 0; }

  /* Install action is secondary and appears only when the browser supports it. */
  .app-install-button { width: 100%; }
  .mobile-install-button { width: 100%; min-height: 43px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-primary-soft); color: var(--ui-primary-strong); font-weight: 850; }
  @media (display-mode: standalone) { .app-install-button,.mobile-install-button { display: none !important; } }

  /* Cross-page overflow and accessibility safety net. */
  :is(.panel,.project-card,.directory-person,.waiting-report-card,.weekly-report-card,.quote-list>a,.invoice-list>a) { overflow-wrap: anywhere; }
  table { max-width: 100%; }
  [hidden] { display: none !important; }
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
}

@media screen and (max-width: 700px) {
  body.is-navigating .topbar::after { bottom: 0; }
  :is(.button,button,select,input[type="date"],input[type="number"],input[type="text"],input[type="search"],input[type="email"],input[type="password"]):not(.flash-close):not(.delete-note-button) { min-height: 42px; }
  .table-scroll, .invoice-table, .report-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}