/* ===== permit_intake.html styles moved during Phase 1 ===== */
:root {
      --bg:               #07101f;
      --panel:            #0e1c32;
      --panel-2:          #142440;
      --surface:          #192e4a;
      --surface-2:        #0a1526;
      --ink:              #edf6ff;     /* was #e8f4ff — slightly brighter */
      --muted:            #b0cce6;     /* was #9ab8d8 — more readable */
      --faint:            #7490ac;     /* was #5a7a9e — was too dim */
      --border:           #2d4a6d;     /* was #243d5c — more visible */
      --accent:           #4d9fec;
      --accent-strong:    #82caff;     /* was #78c0ff — slightly brighter */
      --accent-soft:      rgba(77, 159, 236, 0.18);
      --teal:             #2dd4c8;
      --teal-soft:        rgba(45, 212, 200, 0.15);
      --purple:           #c9b3ff;
      --purple-soft:      rgba(140, 100, 220, 0.20);
      --green:            #6fcf97;
      --green-soft:       rgba(111, 207, 151, 0.15);
      --danger:           #ff6b6b;
      --danger-soft:      rgba(255, 107, 107, 0.16);
      --warning:          #fbbf24;
      --warning-soft:     rgba(251, 191, 36, 0.16);
      --input-bg:         #050d1b;
      --btn-secondary-bg: #192e4a;
      --shadow:           0 4px 24px rgba(0, 0, 0, 0.55);
      --radius:           6px;
    }

/* ── Light theme ───────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:               #f0f4f8;        /* was #f1f5f9 — very slightly warmer */
  --panel:            #ffffff;
  --panel-2:          #e4ecf4;
  --surface:          #f7fafc;
  --surface-2:        #eaf0f6;
  --ink:              #0c1a2c;        /* was #0f1e30 — slightly darker for contrast */
  --muted:            #374f65;        /* was #4a6278 — darker = more readable on white */
  --faint:            #56728a;        /* was #8099b0 — much darker for better contrast */
  --border:           #b8ccdc;        /* was #ccd8e4 — more visible */
  --accent:           #1d55d4;        /* was #2563eb — slightly richer */
  --accent-strong:    #1740b0;        /* was #1d4ed8 */
  --accent-soft:      rgba(29, 85, 212, 0.12);
  --teal:             #0b8a80;        /* was #0d9488 — slightly richer */
  --teal-soft:        rgba(11, 138, 128, 0.12);
  --purple:           #6027c2;
  --purple-soft:      rgba(96, 39, 194, 0.12);
  --green:            #157a44;
  --green-soft:       rgba(21, 122, 68, 0.12);
  --danger:           #c41d1d;        /* was #dc2626 — darker for contrast */
  --danger-soft:      rgba(196, 29, 29, 0.10);
  --warning:          #9a4208;        /* was #b45309 — darker */
  --warning-soft:     rgba(154, 66, 8, 0.12);
  --input-bg:         #ffffff;
  --btn-secondary-bg: #eaf0f6;
  --shadow:           0 2px 12px rgba(12, 26, 44, 0.10);
}

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      padding-left: 240px;
    }

    header {
      background: var(--panel);
      color: var(--ink);
      padding: 16px 24px;
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid var(--border);
    }
    header h1 { color: var(--ink); }
    header p  { color: var(--muted); }

    .header-container {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }

    .header-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    header h1 {
      font-size: 20px;
      margin: 0;
      line-height: 1.25;
    }

    header p {
      margin: 5px 0 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.4;
    }

    .header-pill {
      display: none;
      border: 1px solid rgba(77, 159, 236, 0.45);
      color: var(--accent-strong);
      background: var(--accent-soft);
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .header-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }

    .app-status { color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: 4px; }
    .app-status.ready { color: var(--teal); font-weight: 700; }

    .log-link-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--accent);
      color: #fff;
      border: 0;
      padding: 10px 14px;
      border-radius: 6px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 0.12s ease;
    }
    .log-link-btn:hover { opacity: 0.88; }

    main {
      max-width: 1180px;
      margin: 0 auto;
      padding: 16px;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 15px;
      box-shadow: var(--shadow);
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    h2 {
      margin: 0;
      font-size: 17px;
      color: var(--accent-strong);
    }

    h3.subsection {
      margin: 18px 0 7px;
      color: var(--ink);
      font-size: 13px;
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
    }

    .section-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

    label { display: block; font-size: 12px; font-weight: 700; margin: 11px 0 5px; color: var(--ink); }

    input, select, textarea, button {
      width: 100%;
      font-family: inherit;
      font-size: 14px;
      border-radius: 6px;
    }

    input, select, textarea {
      border: 1px solid var(--border);
      padding: 10px;
      background: var(--input-bg);
      color: var(--ink);
      outline: none;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--accent-strong);
      box-shadow: 0 0 0 3px rgba(26, 111, 219, 0.20);
    }

    input[readonly] { color: var(--muted); background: var(--surface-2); }

    textarea { min-height: 100px; resize: vertical; line-height: 1.45; }

    button {
      border: 0;
      padding: 11px 12px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.12s ease;
    }
    button:active { transform: scale(0.99); }
    button:hover { opacity: 0.92; }
    button:disabled { cursor: not-allowed; opacity: 0.55; }

    .primary { background: var(--accent); color: #fff; }
    .secondary { background: var(--btn-secondary-bg); color: var(--ink); }
    .danger { background: var(--danger); color: white; }
    .success { background: var(--teal); color: #071f1c; }
    .small-button { padding: 8px 9px; font-size: 12px; margin-top: 0; }

    .grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

    .date-control, .range-control { display: grid; grid-template-columns: 1fr; gap: 6px; }
    .range-control { grid-template-columns: 1fr 1fr; }
    .date-control select, .range-control select, .range-control input { min-width: 0; }

    .inspection-checklist {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin: 8px 0 12px;
    }

    .check-option {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      min-height: 44px;
      margin: 0;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface-2);
      color: var(--ink);
      line-height: 1.35;
    }

    .check-option input { width: auto; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 auto; }

    .photo-toolbar {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: center;
      margin: 8px 0 10px;
    }

    .photo-status { color: var(--muted); font-size: 12px; line-height: 1.4; }

    .photo-gallery, .saved-photo-strip {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
      gap: 10px;
    }

    .photo-card {
      margin: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface-2);
      overflow: hidden;
    }

    .photo-thumb {
      width: 100%;
      aspect-ratio: 4 / 3;
      padding: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: var(--surface-2);
      display: block;
      overflow: hidden;
    }

    .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .photo-card figcaption { padding: 8px; }

    .photo-meta { font-size: 11px; color: var(--faint); margin-top: 5px; line-height: 1.35; overflow-wrap: anywhere; }

    .form-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }

    .modal[hidden] { display: none; }
    .modal {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.78);
      z-index: 200; padding: 16px;
      display: grid; place-items: center;
      backdrop-filter: blur(4px);
    }

    .modal-panel {
      width: min(920px, 100%); max-height: 92vh; overflow: auto;
      background: var(--panel); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px;
    }

    .modal-panel.small-panel { width: min(400px, 100%); padding: 20px; }

    .modal-header {
      display: flex; justify-content: space-between;
      align-items: center; gap: 10px; margin-bottom: 10px;
    }

    .modal-title { font-weight: 700; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
    .modal-panel img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--surface-2); border-radius: 6px; display: block; }
    .modal-caption { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 9px; overflow-wrap: anywhere; }

    .small { font-size: 12px; color: var(--muted); line-height: 1.45; }
    .footer-note { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
    .required::after { content: " *"; color: var(--danger); }

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

    .toast-container {
      position: fixed; bottom: 20px; right: 20px;
      z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none;
    }

    .toast {
      background: var(--surface); color: var(--ink);
      padding: 12px 16px; border-left: 4px solid var(--accent);
      border-radius: var(--radius); box-shadow: var(--shadow);
      font-size: 13px; line-height: 1.4; max-width: 300px;
      animation: slideIn 0.3s ease forwards; pointer-events: auto;
    }
    .toast.error { border-left-color: var(--danger); }
    .toast.success { border-left-color: var(--teal); }
    .toast.warning { border-left-color: var(--warning); }

    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

    @media (min-width: 720px) {
      .header-container { grid-template-columns: 1fr auto; align-items: center; }
      .header-pill { display: inline-block; }
      .header-actions { grid-template-columns: repeat(2, auto); }
      .header-actions button, .header-actions a { width: auto; white-space: nowrap; }
      .grid.two { grid-template-columns: 1fr 1fr; }
      .grid.three { grid-template-columns: repeat(3, 1fr); }
      .grid.four { grid-template-columns: repeat(4, 1fr); }
      .grid.permit-dates-row { grid-template-columns: 1fr 1fr 200px; }
      .form-actions { grid-template-columns: 1.2fr 1fr 1fr; }
      .date-control { grid-template-columns: 1fr 130px; }
      .permit-dates-row .date-control { grid-template-columns: 1fr auto; }
      .inspection-checklist { grid-template-columns: repeat(3, 1fr); }
      .photo-toolbar { grid-template-columns: auto auto 1fr; }
      .photo-toolbar button { width: auto; }
    }

/* ===== work_order_log.html styles moved during Phase 1 ===== */
:root {
      --bg:               #07101f;
      --panel:            #0e1c32;
      --panel-2:          #142440;
      --surface:          #192e4a;
      --surface-2:        #0a1526;
      --ink:              #e8f4ff;
      --muted:            #9ab8d8;
      --faint:            #5a7a9e;
      --border:           #243d5c;
      --accent:           #4d9fec;
      --accent-strong:    #78c0ff;
      --accent-soft:      rgba(77, 159, 236, 0.18);
      --teal:             #2dd4c8;
      --teal-soft:        rgba(45, 212, 200, 0.15);
      --purple:           #c9b3ff;
      --purple-soft:      rgba(140, 100, 220, 0.20);
      --green:            #6fcf97;
      --green-soft:       rgba(111, 207, 151, 0.15);
      --danger:           #ff6b6b;
      --danger-soft:      rgba(255, 107, 107, 0.16);
      --warning:          #fbbf24;
      --warning-soft:     rgba(251, 191, 36, 0.16);
      --input-bg:         #050d1b;
      --btn-secondary-bg: #192e4a;
      --shadow:           0 4px 24px rgba(0, 0, 0, 0.55);
      --radius:           6px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      padding-left: 240px;
    }

    header {
      background: var(--panel);
      color: var(--ink);
      padding: 16px 24px;
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid var(--border);
    }
    header h1 { color: var(--ink); }
    header p  { color: var(--muted); }

    .header-container {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      gap: 10px;
    }

    .header-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

    header h1 { font-size: 18px; margin: 0; line-height: 1.25; }
    header p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

    .header-pill {
      display: none;
      border: 1px solid rgba(26,111,219,0.40);
      color: var(--ink);
      background: rgba(26,111,219,0.18);
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .header-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    .app-status { color: var(--muted); font-size: 11px; margin-top: 4px; }
    .app-status.ready { color: var(--teal); font-weight: 700; }

    .intake-link-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--teal); color: #fff;
      border: 0; padding: 10px 14px; border-radius: 6px;
      font-family: inherit; font-size: 12px; font-weight: 700;
      cursor: pointer; text-decoration: none; white-space: nowrap;
      transition: opacity 0.12s ease;
    }
    .intake-link-btn:hover { opacity: 0.88; }

    main { max-width: 1280px; margin: 0 auto; padding: 16px; }

    /* ── Summary Grid ─────────────────────────────────────────── */
    .summary-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }

    .summary-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      box-shadow: var(--shadow);
      min-height: 78px;
    }

    .summary-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 7px; }
    .summary-card strong { font-size: 22px; line-height: 1; }

    /* ── Fee Totals ───────────────────────────────────────────── */
    .fee-totals {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      background: var(--panel);
      border: 1px solid rgba(77,159,236,0.25);
      border-radius: var(--radius);
      padding: 13px;
      margin-bottom: 14px;
      box-shadow: var(--shadow);
    }

    .fee-total-heading h2 { font-size: 16px; margin: 0 0 4px; }
    .fee-total-heading p { margin: 0; color: var(--muted); font-size: 12px; }

    .fee-total-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    .fee-total-item {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px;
      min-height: 68px;
    }

    .fee-total-item span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 6px; }
    .fee-total-item strong { display: block; font-size: 18px; line-height: 1.1; overflow-wrap: anywhere; }

    /* ── Panel / Section ─────────────────────────────────────── */
    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 15px;
      box-shadow: var(--shadow);
    }

    .section-heading { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
    h2 { margin: 0; font-size: 17px; color: var(--accent-strong); }
    .section-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

    input, select, button {
      font-family: inherit;
      font-size: 14px;
      border-radius: 6px;
    }

    input, select {
      border: 1px solid var(--border);
      padding: 10px;
      background: var(--input-bg);
      color: var(--ink);
      outline: none;
      width: 100%;
    }

    input:focus, select:focus {
      border-color: var(--accent-strong);
      box-shadow: 0 0 0 3px rgba(26,111,219,0.20);
    }

    button {
      border: 0; padding: 11px 12px; font-weight: 700;
      cursor: pointer; width: 100%;
      transition: transform 0.12s ease, opacity 0.12s ease;
    }
    button:active { transform: scale(0.99); }
    button:hover { opacity: 0.92; }
    button:disabled { cursor: not-allowed; opacity: 0.55; }

    .primary { background: var(--accent); color: #fff; }
    .secondary { background: var(--btn-secondary-bg); color: var(--ink); }
    .danger-btn { background: var(--danger); color: white; }
    .success-btn { background: var(--teal); color: #071f1c; }
    .small-button { padding: 8px 9px; font-size: 12px; }

    .range-control { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .range-control input { min-width: 0; }

    /* ── TABLE DATABASE ─────────────────────────────────────── */
    .table-wrap {
      width: 100%;
      overflow-x: auto;
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }

    .records-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      min-width: 700px;
    }

    .records-table thead {
      /* not sticky — avoids covering expanded detail rows */
    }

    .records-table th {
      background: var(--surface-2);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 10px 10px;
      text-align: left;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      border-bottom: 2px solid var(--border);
      transition: color 0.12s ease;
    }

    .records-table th:hover { color: var(--ink); }
    .records-table th.sort-asc { color: var(--accent-strong); }
    .records-table th.sort-asc::after { content: ' ↑'; }
    .records-table th.sort-desc { color: var(--accent-strong); }
    .records-table th.sort-desc::after { content: ' ↓'; }
    .records-table th.no-sort { cursor: default; }
    .records-table th.no-sort:hover { color: var(--muted); }

    .records-table td {
      padding: 10px 10px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      line-height: 1.35;
    }

    .record-row { transition: background-color 0.1s ease; }
    .record-row:hover td { background: rgba(26,111,219,0.05); }
    .record-row.overdue-row { border-left: 3px solid var(--danger); }
    .record-row.overdue-row td:first-child { padding-left: 7px; }

    .col-toggle { width: 36px; text-align: center; }
    .col-permit { width: 130px; font-weight: 700; color: var(--accent-strong); font-size: 12px; }
    .col-address { min-width: 160px; }
    .col-owner { width: 140px; }
    .col-type { width: 170px; }
    .col-projtype { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .col-status { width: 115px; }
    .col-officer { width: 110px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .col-priority { width: 90px; }
    .col-date { width: 95px; font-size: 12px; color: var(--muted); }
    .col-fee { width: 80px; text-align: right; font-size: 12px; }
    .col-balance { width: 80px; text-align: right; font-size: 12px; }
    .col-actions { width: 152px; white-space: nowrap; }

    .balance-owed { color: var(--warning); font-weight: 700; }

    /* ── Badges ──────────────────────────────────────────────── */
    .badge {
      display: inline-block; padding: 3px 9px;
      border-radius: 999px; font-size: 12px; font-weight: 700;
      background: var(--btn-secondary-bg); color: var(--ink);
      border: 1px solid var(--border);
      white-space: nowrap;
    }
    .badge.b-open    { color: #78c0ff; background: rgba(77,159,236,0.18);  border: 1px solid rgba(77,159,236,0.35); }
    .badge.b-pending { color: #c4b5fd; background: rgba(167,139,250,0.16); border: 1px solid rgba(167,139,250,0.30); }
    .badge.b-closed  { color: #2dd4c8; background: rgba(45,212,200,0.14);  border: 1px solid rgba(45,212,200,0.30); }
    .badge.b-notice  { color: #ff8787; background: rgba(255,107,107,0.16); border: 1px solid rgba(255,107,107,0.30); }
    /* ── Click-to-edit status ────────────────────────────────── */
    .badge.status-editable { cursor: pointer; }
    .badge.status-editable:hover { filter: brightness(1.15); }
    .status-caret { opacity: 0.6; font-size: 9px; }
    .status-menu {
      position: absolute; z-index: 4000;
      background: var(--panel); border: 1px solid var(--border);
      border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
      padding: 5px; display: flex; flex-direction: column; gap: 2px;
    }
    .status-menu-item {
      background: none; border: 0; padding: 4px 6px; cursor: pointer;
      text-align: left; border-radius: 5px;
    }
    .status-menu-item:hover { background: var(--surface); }

    /* ── Address autocomplete menu ───────────────────────────── */
    .ac-menu {
      position: absolute; z-index: 4000; max-height: 280px; overflow-y: auto;
      background: var(--panel); border: 1px solid var(--border);
      border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    }
    .ac-item {
      padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 1px;
    }
    .ac-item:last-child { border-bottom: none; }
    .ac-item:hover, .ac-item.active { background: var(--accent-soft); }
    .ac-addr { font-size: 13px; color: var(--ink); font-weight: 600; }
    .ac-sub  { font-size: 11px; color: var(--muted); }

    .badge.b-approved { color: #4ade80; background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.32); }
    .badge.b-denied  { color: #fff;    background: #d03b3b; border: 1px solid #d03b3b; }
    .badge.b-review  { color: #f0a3c4; background: rgba(213,81,129,0.16);  border: 1px solid rgba(213,81,129,0.32); }
    .badge.b-hold    { color: #e0a53a; background: rgba(201,133,0,0.16);   border: 1px solid rgba(201,133,0,0.34); }
    .badge.b-overdue { color: #fff;    background: #e05252; }
    .badge.b-high    { color: #fbbf24; background: rgba(251,191,36,0.16);  border: 1px solid rgba(251,191,36,0.30); }
    .badge.b-emergency { color: #fff;  background: #e05252; }

    /* ── Toggle Button ───────────────────────────────────────── */
    .toggle-btn {
      width: 28px; height: 28px; padding: 0;
      border-radius: 4px;
      background: rgba(55,61,74,0.6);
      color: var(--muted);
      font-size: 11px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--border);
      cursor: pointer;
      transition: background-color 0.12s ease, color 0.12s ease, transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .toggle-btn:hover { background: var(--surface); color: var(--ink); }
    .toggle-btn.expanded {
      background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(77,159,236,0.35);
      transform: rotate(90deg); /* ▶ tips down to ▼ in sync with the shade */
    }

    /* ── Row Action Buttons ──────────────────────────────────── */
    .row-actions { display: flex; gap: 3px; flex-wrap: nowrap; }
    .row-actions .act-btn { padding: 4px 6px; font-size: 10px; }

    .act-btn {
      display: inline-block; padding: 5px 8px;
      border-radius: 4px; font-size: 11px; font-weight: 700;
      border: 1px solid var(--border); cursor: pointer;
      background: var(--btn-secondary-bg); color: var(--ink);
      text-decoration: none; font-family: inherit;
      transition: opacity 0.12s ease;
      white-space: nowrap; width: auto;
    }
    .act-btn:hover { opacity: 0.82; }
    .act-btn.act-edit { background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(77,159,236,0.3); }
    .act-btn.act-close { background: var(--teal-soft); color: var(--teal); border-color: rgba(47,183,164,0.3); }
    .act-btn.act-delete { background: var(--danger-soft); color: var(--danger); border-color: rgba(228,88,88,0.3); }
    .act-btn.act-notice { background: var(--purple-soft); color: var(--purple); border-color: rgba(140,100,220,0.35); font-weight: 600; }
    .act-btn.act-placard { background: rgba(47,183,164,0.10); color: var(--teal); border-color: rgba(47,183,164,0.25); }
    .act-separator { display: block; width: 1px; background: rgba(255,255,255,0.10); margin: 0 2px; align-self: stretch; }

    /* ── Attachments ─────────────────────────────────────────── */
    .attach-section {
      margin: 12px 0 8px;
      padding: 10px 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

    .attach-heading {
      font-size: 11px; font-weight: 600; color: var(--ink);
      margin-bottom: 8px;
    }

    .attach-empty { font-size: 12px; color: var(--faint); }

    .attach-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px; margin-bottom: 10px;
    }

    .attach-item {
      position: relative;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); overflow: hidden;
    }

    .attach-thumb {
      display: block; text-decoration: none;
    }

    .attach-thumb img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
    }

    .attach-doc-icon {
      display: flex; align-items: center; justify-content: center;
      width: 100%; aspect-ratio: 4/3;
      font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
      color: #b89cee; background: rgba(140,100,220,0.12);
    }

    .attach-meta {
      padding: 4px 6px;
      font-size: 10px; color: var(--faint);
      overflow: hidden;
    }

    .attach-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .attach-info { color: var(--faint); opacity: 0.7; }

    .attach-del-btn {
      position: absolute; top: 3px; right: 3px;
      background: rgba(17,20,27,0.82); border: 1px solid rgba(228,88,88,0.35);
      color: var(--danger); border-radius: 50%; width: 18px; height: 18px;
      font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
      display: flex; align-items: center; justify-content: center;
    }

    .attach-del-btn:hover { background: var(--danger-soft); }

    .attach-upload-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
      margin-top: 8px;
    }

    .attach-pick-btn { font-size: 12px; padding: 6px 10px; }

    .attach-pending {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    }

    .attach-pending-name {
      font-size: 12px; color: var(--muted); max-width: 140px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .attach-type-sel, .attach-caption-inp {
      font-family: inherit;
      font-size: 12px; padding: 5px 8px;
      background: var(--surface-2); color: var(--ink);
      border: 1px solid var(--border); border-radius: var(--radius);
    }

    .attach-type-sel { max-width: 130px; }
    .attach-caption-inp { max-width: 180px; }

    .attach-upload-submit, .attach-cancel-btn { font-size: 12px; padding: 6px 10px; }

    /* ── Case Notes ──────────────────────────────────────────── */
    .notes-section {
      margin: 8px 0;
      padding: 10px 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

    /* ── Inspection Panel ───────────────────────────────────────────── */
    .insp-panel {
      margin: 10px 0 6px;
      padding: 10px 12px 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .insp-panel-heading {
      font-size: 11px; font-weight: 600; color: var(--ink);
      margin-bottom: 8px;
    }
    .insp-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
    .insp-item {
      padding: 7px 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .insp-item-meta {
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    }
    .insp-date-label { font-size: 12px; color: var(--muted); }
    .insp-inspector  { font-size: 11px; color: var(--faint); }
    .insp-findings, .insp-corrections {
      font-size: 12px; color: var(--muted); margin-top: 5px;
      white-space: pre-wrap; word-break: break-word; line-height: 1.5;
    }
    .insp-corrections { color: var(--faint); font-style: italic; }
    .insp-add-form { margin-top: 6px; }
    .insp-add-row {
      display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
      margin-bottom: 5px;
    }
    .insp-date-input {
      font-size: 12px; padding: 4px 6px; border-radius: var(--radius);
      background: var(--input-bg); border: 1px solid var(--border);
      color: var(--text); width: 130px; flex-shrink: 0;
    }
    .insp-initials-input {
      font-size: 12px; padding: 4px 6px; border-radius: var(--radius);
      background: var(--input-bg); border: 1px solid var(--border);
      color: var(--text); width: 100px; flex-shrink: 0;
    }
    .insp-edit-form { margin-top: 8px; }

    /* ── Payment Panel ───────────────────────────────────────────────── */
    .pay-panel {
      margin: 10px 0 6px;
      padding: 10px 12px 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .pay-panel-heading {
      font-size: 11px; font-weight: 600; color: var(--ink);
      margin-bottom: 8px;
    }
    .pay-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
    .pay-item {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding: 6px 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 12px;
    }
    .pay-date   { color: var(--muted); white-space: nowrap; }
    .pay-amount { font-weight: 700; color: #6fcf97; white-space: nowrap; }
    .pay-ref    { color: var(--faint); font-size: 11px; }
    .pay-by     { color: var(--faint); font-size: 11px; }
    .pay-notes  { color: var(--faint); font-size: 11px; font-style: italic; flex: 1; min-width: 0; }
    .pay-total  {
      font-size: 12px; color: var(--muted); text-align: right;
      padding: 4px 2px 6px; border-top: 1px solid var(--border);
      margin-bottom: 8px;
    }
    .pay-add-form { margin-top: 8px; }
    .pay-add-row  { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
    .pay-amount-input {
      font-size: 12px; padding: 4px 6px; border-radius: var(--radius);
      background: var(--input-bg); border: 1px solid var(--border);
      color: var(--text); width: 100px; flex-shrink: 0;
    }
    .act-receipt {
      background: var(--green-soft); color: var(--green); font-weight: 600;
      border: 1px solid rgba(111,207,151,0.35);
    }
    .act-receipt:hover { background: var(--green-soft); filter: brightness(1.15); }

    /* ── Fee Ledger ──────────────────────────────────────────────────── */
    .fee-ledger-heading {
      font-size: 11px; font-weight: 600; color: var(--ink);
      margin-bottom: 8px; overflow: hidden;
    }
    .fee-summary-cards {
      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
    }
    .fee-card {
      flex: 1 1 100px; min-width: 90px;
      padding: 8px 10px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .fee-card-alert { border-color: var(--danger); background: rgba(235,87,87,0.06); }
    .fee-card-label { font-size: 10px; color: var(--faint); display: block; margin-bottom: 2px; }
    .fee-card-value { font-size: 14px; font-weight: 700; color: var(--ink); display: block; }
    .fee-table {
      width: 100%; border-collapse: collapse; margin-bottom: 6px;
      font-size: 12px;
    }
    .fee-thead th {
      padding: 5px 6px; text-align: left;
      font-size: 10px; font-weight: 600; color: var(--faint);
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }
    .fee-item-row td {
      padding: 5px 6px; border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .fee-item-row:last-child td { border-bottom: none; }
    .fee-col-type   { font-weight: 500; min-width: 130px; }
    .fee-col-desc   { color: var(--faint); font-size: 11px; min-width: 80px; }
    .fee-col-amt    { text-align: right; font-weight: 700; white-space: nowrap; min-width: 70px; }
    .fee-col-status { white-space: nowrap; }
    .fee-col-notes  { color: var(--faint); font-size: 11px; font-style: italic; }
    .fee-col-actions { white-space: nowrap; width: 50px; text-align: right; }
    .fee-empty-row  { color: var(--faint); font-size: 12px; padding: 8px 6px; }
    .fee-add-section { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
    .fee-waive-btn  { color: var(--warning) !important; font-weight: 700; }

    /* ── Inspection Schedule Page ────────────────────────────────────── */
    .insp-filter-bar { padding: 14px 16px; margin-bottom: 16px; }
    .insp-filter-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
    .insp-filter-actions { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 2px; }
    .mb-0 { margin-bottom: 0 !important; }
    .insp-schedule-card { padding: 0; overflow: hidden; }
    .insp-table {
      width: 100%; border-collapse: collapse; font-size: 14px;
    }
    .insp-table th {
      padding: 9px 12px; text-align: left; font-size: 12px; font-weight: 600;
      color: var(--faint); border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }
    .insp-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .insp-table tr.insp-row:last-child td { border-bottom: none; }
    .insp-table tr.insp-findings-row td { padding: 2px 12px 9px; color: var(--faint); font-size: 12px; border-bottom: none; }
    .insp-table .insp-findings-label { font-weight: 600; color: var(--muted); }
    .insp-permit-link { color: var(--accent-strong); text-decoration: none; font-weight: 600; }
    .insp-permit-link:hover { text-decoration: underline; }
    .insp-address, .insp-owner { color: var(--muted); font-size: 12px; }
    .insp-actions { display: flex; gap: 6px; }
    .insp-quick-btn { font-size: 11px; padding: 3px 8px; }
    .insp-empty { padding: 20px; color: var(--faint); font-size: 13px; }
    .insp-count { padding: 8px 12px; font-size: 11px; color: var(--faint); margin: 0; }

    .notes-heading {
      font-size: 11px; font-weight: 600; color: var(--ink);
      margin-bottom: 8px;
    }

    .notes-empty { font-size: 12px; color: var(--faint); }

    .notes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

    .note-item {
      padding: 8px 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .note-item-system {
      background: var(--surface-2);
      border-color: var(--border);
      opacity: 0.85;
    }
    .note-item-system .note-type-badge { color: var(--faint); }
    .note-item-system .note-text { color: var(--faint); font-style: italic; }

    .note-meta {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 5px; flex-wrap: wrap;
    }

    .note-type-badge {
      font-size: 12px; font-weight: 600;
      color: var(--accent-strong);
      white-space: nowrap;
    }

    .note-byline {
      font-size: 12px; color: var(--faint);
      flex: 1; min-width: 0;
    }

    .note-view-btn {
      font-size: 11px; font-weight: 600; line-height: 1;
      padding: 2px 7px; border-radius: 3px;
      background: var(--accent-soft); color: var(--accent-strong);
      text-decoration: none; white-space: nowrap; flex-shrink: 0;
    }
    .note-view-btn:hover { background: var(--accent-strong); color: #fff; }

    .note-edit-btn {
      background: none; border: none; cursor: pointer;
      color: var(--accent-strong); font-size: 11px; line-height: 1;
      padding: 0 3px; opacity: 0.6;
      width: auto; flex-shrink: 0;
    }
    .note-edit-btn:hover { opacity: 1; }

    .note-del-btn {
      background: none; border: none; cursor: pointer;
      color: var(--danger); font-size: 14px; line-height: 1;
      padding: 0 2px; opacity: 0.6;
      width: auto; flex-shrink: 0;
    }
    .note-del-btn:hover { opacity: 1; }

    .note-edit-form { margin-top: 6px; }
    .note-edit-textarea {
      width: 100%; box-sizing: border-box; min-height: 70px;
      font-size: 12px; resize: vertical; margin-bottom: 6px;
    }
    .note-edit-actions { display: flex; gap: 6px; }

    .note-text {
      font-size: 13px; color: var(--muted);
      line-height: 1.55; white-space: pre-wrap; word-break: break-word;
    }

    .notes-add-form { margin-top: 8px; }

    .notes-add-row {
      display: flex; gap: 6px; align-items: center;
      margin-bottom: 6px; flex-wrap: wrap;
    }

    .note-type-sel {
      font-family: inherit;
      font-size: 12px; padding: 5px 8px;
      background: var(--surface-2); color: var(--ink);
      border: 1px solid var(--border); border-radius: var(--radius);
      max-width: 140px;
    }

    .notes-add-btn { font-size: 12px; padding: 6px 12px; }

    .note-textarea {
      width: 100%; box-sizing: border-box;
      font-family: inherit;
      font-size: 12px; line-height: 1.5;
      background: var(--surface-2); color: var(--ink);
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 7px 9px; resize: vertical; min-height: 64px;
    }

    .note-textarea:focus { outline: none; border-color: var(--accent); }

    /* ── Expanded Detail Row ─────────────────────────────────── */
    .detail-row td {
      padding: 0;
      border: 0;
      background: transparent;
    }

    /* ── Window-shade reveal ─────────────────────────────────────
       Animating a table row to auto height isn't possible directly,
       so the detail content lives in a grid whose single row animates
       from 0fr → 1fr. With overflow hidden on the inner wrapper this
       unrolls the panel top-down like a window shade. */
    .detail-shade {
      display: grid;
      grid-template-rows: 0fr;
      /* Symmetric ease-in-out so open and close feel equally slow/deliberate
         (an ease-out curve made open snap and close linger). */
      transition: grid-template-rows 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .detail-row.open .detail-shade {
      grid-template-rows: 1fr;
    }
    .detail-shade-inner {
      overflow: hidden;
    }

    .detail-content {
      padding: 16px 14px;
      background: var(--surface-2);
      border-bottom: 2px solid var(--border);
    }

    @media (prefers-reduced-motion: reduce) {
      .detail-shade { transition: none; }
      .toggle-btn { transition: background-color 0.12s ease, color 0.12s ease; }
    }

    /* ── Fee picker modal (iWorQ-style checklist) ──────────────── */
    .fp-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.55);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .fp-modal {
      background: var(--panel); border: 1px solid var(--border);
      border-radius: 10px; width: min(560px, 100%);
      max-height: 85vh; display: flex; flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .fp-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 18px; border-bottom: 1px solid var(--border);
      font-size: 15px; font-weight: 700; color: var(--ink);
    }
    .fp-x {
      background: none; border: 0; color: var(--muted);
      font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
    }
    .fp-x:hover { color: var(--ink); }
    .fp-body { overflow-y: auto; padding: 0; }
    .fp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .fp-table thead th {
      position: sticky; top: 0; z-index: 1;
      background: var(--surface); text-align: left;
      padding: 8px 12px; font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
      border-bottom: 1px solid var(--border);
    }
    .fp-row { cursor: pointer; }
    .fp-row td {
      padding: 9px 12px; border-bottom: 1px solid var(--border);
      color: var(--ink); vertical-align: middle;
    }
    .fp-row:nth-child(even) td { background: rgba(255,255,255,0.02); }
    .fp-row:hover td { background: var(--surface); }
    .fp-row.sel td { background: var(--accent-soft); }
    .fp-td-check { width: 38px; text-align: center; }
    .fp-td-type  { color: var(--muted); font-size: 12px; }
    .fp-td-amt   { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
    .fp-td-sqft  { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .fp-check { width: 16px; height: 16px; accent-color: var(--accent); vertical-align: middle; }
    .fp-footer {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 18px; border-top: 1px solid var(--border); gap: 10px;
    }
    .fp-total { font-size: 13px; color: var(--muted); }
    .fp-total strong { color: var(--ink); font-size: 14px; }
    .fp-search-wrap { padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .fp-search {
      width: 100%; box-sizing: border-box;
      background: var(--surface-2); border: 1px solid var(--border);
      color: var(--ink); border-radius: 6px; padding: 8px 11px; font-size: 13px;
    }

    /* ── Expanded work-order detail: numbered step wizard ────── */
    .wo-wizard { display: flex; gap: 20px; align-items: flex-start; }
    .wo-steps { flex: 0 0 176px; display: flex; flex-direction: column; gap: 3px; }
    .wo-step-btn {
      display: flex; align-items: center; gap: 10px; width: 100%;
      background: none; border: 0; border-radius: 8px; padding: 8px 10px;
      cursor: pointer; text-align: left; color: var(--muted);
      font-size: 12.5px; transition: background .12s, color .12s;
    }
    .wo-step-btn:hover { background: var(--surface); color: var(--ink); }
    .wo-step-btn.active { background: var(--accent-soft); color: var(--ink); }
    .wo-step-num {
      flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--surface-2); border: 1px solid var(--border);
      font-size: 11px; font-weight: 700; color: var(--muted);
    }
    .wo-step-btn.active .wo-step-num { background: var(--accent); color: #fff; border-color: var(--accent); }
    .wo-step-label { font-weight: 600; }
    .wo-panes { flex: 1 1 auto; min-width: 0; }
    .wo-pane { display: none; }
    .wo-pane.active { display: block; }
    .wo-pane[data-pane="actions"] .detail-lower-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 22px; }
    .wo-pane[data-pane="actions"] .detail-action-group { flex: 1 1 190px; min-width: 170px; }
    @media (max-width: 720px) {
      .wo-wizard { flex-direction: column; }
      .wo-steps { flex-direction: row; flex-wrap: wrap; }
    }

    .detail-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 14px;
      margin-bottom: 12px;
      font-size: 12px;
      color: var(--muted);
    }

    .detail-meta strong { display: block; color: var(--ink); font-size: 11px; margin-bottom: 2px; }

    .detail-block {
      margin: 10px 0;
      padding: 10px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 12px; line-height: 1.55;
      color: var(--muted);
    }

    .detail-block strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 11px; }

    .detail-lower {
      display: flex; gap: 16px; align-items: flex-start; margin-top: 12px;
    }
    .detail-lower-main { flex: 1; min-width: 0; max-width: 540px; }
    .detail-lower-sidebar {
      width: 260px; flex-shrink: 0;
      display: flex; flex-direction: column; gap: 12px;
    }
    .detail-action-group { display: flex; flex-direction: column; gap: 4px; }
    .detail-action-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--faint);
      padding-bottom: 4px; border-bottom: 1px solid var(--border);
      margin-bottom: 2px;
    }
    .detail-lower-sidebar .act-btn {
      width: 100%; box-sizing: border-box;
      text-align: left; font-size: 11px; padding: 12px 12px; display: block;
    }

    .saved-photo-strip {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px;
      margin: 10px 0;
    }

    .saved-photo {
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface-2); overflow: hidden;
      cursor: pointer; padding: 0; width: 100%;
      font-family: inherit;
    }

    .saved-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
    .saved-photo span { display: block; font-size: 10px; color: var(--faint); padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── Empty / Loading States ──────────────────────────────── */
    .empty-state {
      padding: 40px 20px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
    }

    .empty-state a { color: var(--accent-strong); text-decoration: none; }
    .empty-state a:hover { text-decoration: underline; }

    /* ── Pagination ──────────────────────────────────────────── */
    .pagination-controls {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 12px 0 2px;
      gap: 10px;
      flex-wrap: wrap;
    }
    .pagination-info { font-size: 12px; color: var(--muted); }
    .pagination-actions { display: flex; gap: 8px; }
    .pagination-actions button { width: auto; padding: 8px 14px; font-size: 12px; }

    /* ── Modals ──────────────────────────────────────────────── */
    .modal[hidden] { display: none; }
    .modal {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.78);
      z-index: 200; padding: 16px;
      display: grid; place-items: center;
      backdrop-filter: blur(4px);
    }

    .modal-panel {
      width: min(920px,100%); max-height: 92vh; overflow: auto;
      background: var(--panel); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px;
    }

    .modal-panel.small-panel { width: min(400px,100%); padding: 20px; }
    .modal-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
    .modal-title { font-weight: 700; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
    .modal-panel img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--surface-2); border-radius: 6px; display: block; }
    .modal-caption { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 9px; overflow-wrap: anywhere; }

    /* ── Toast ───────────────────────────────────────────────── */
    .toast-container {
      position: fixed; bottom: 20px; right: 20px;
      z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none;
    }
    .toast {
      background: var(--surface); color: var(--ink);
      padding: 12px 16px; border-left: 4px solid var(--accent);
      border-radius: var(--radius); box-shadow: var(--shadow);
      font-size: 13px; line-height: 1.4; max-width: 300px;
      animation: slideIn 0.3s ease forwards; pointer-events: auto;
    }
    .toast.error { border-left-color: var(--danger); }
    .toast.success { border-left-color: var(--teal); }
    .toast.warning { border-left-color: var(--warning); }

    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .small { font-size: 12px; color: var(--muted); line-height: 1.45; }

    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

    /* ── Responsive ──────────────────────────────────────────── */
    @media (min-width: 720px) {
      .header-container { grid-template-columns: 1fr auto; align-items: center; }
      .header-pill { display: inline-block; }
      .summary-grid { grid-template-columns: repeat(5, 1fr); }
      .fee-totals { grid-template-columns: 220px 1fr; align-items: stretch; }
      .fee-total-grid { grid-template-columns: repeat(4, 1fr); }
      .detail-meta { grid-template-columns: repeat(4, 1fr); }
    }

    @media (min-width: 960px) {
      .col-type, .col-priority { display: table-cell; }
    }

    @media (max-width: 959px) {
      .col-type, .col-priority { display: none; }
      .col-owner { display: none; }
    }

    @media (max-width: 640px) {
      .col-date { display: none; }
      .col-officer { display: none; }
    }

/* ===== Sidebar Navigation ===== */
.site-nav {
  position: fixed;
  top: 0; left: 0;
  width: 240px;
  height: 100vh;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.sidebar-seal {
  width: 30px; height: 30px;
  background: var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sidebar-town {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-dept {
  font-size: 11px;
  color: #8aadcc;
  line-height: 1.3;
}
.sidebar-section-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #607d99;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 10px 3px;
}
.sidebar-links {
  flex: 1;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 4px;
  color: #9ab8d8;
  text-decoration: none;
  font-size: 13px;
  transition: background-color 0.12s, color 0.12s;
}
.sidebar-link:hover {
  background: rgba(77,159,236,0.18);
  color: #e8f4ff;
}
.sidebar-link.active {
  background: rgba(77,159,236,0.28);
  color: #78c0ff;
}
.sidebar-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  opacity: 0.5;
  fill: currentColor;
}
.sidebar-link.active .sidebar-icon,
.sidebar-link:hover .sidebar-icon { opacity: 1; }
.sidebar-footer {
  padding: 10px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-role {
  font-size: 10px;
  color: #8aadcc;
  text-transform: capitalize;
}
.sidebar-logout {
  font-size: 11px;
  color: #607d99;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.sidebar-logout:hover { color: var(--danger); border-color: rgba(224,82,82,0.3); }
.nav-user { display: none; }
.page-home .grid.two a { justify-content: center; }

/* ── Dashboard ───────────────────────────────────────────────────────── */
.dash-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px)  { .dash-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .dash-grid { grid-template-columns: repeat(8, 1fr); } }

.card-alert strong { color: var(--danger); }
.card-money { font-size: 17px !important; }
.card-warn  { color: var(--danger) !important; }

.dash-actions-panel { padding: 14px 16px; }
.dash-quick-links {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.dash-action-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--ink);
  text-decoration: none; font-size: 13px; font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.dash-action-btn:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.dash-action-icon { font-size: 16px; line-height: 1; }

.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-item {
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.activity-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-bottom: 4px; font-size: 12px;
}
.activity-type   { font-weight: 700; color: var(--accent-strong); }
.activity-permit { color: var(--teal); text-decoration: none; font-weight: 700; }
.activity-permit:hover { text-decoration: underline; }
.activity-address { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-when  { color: var(--faint); white-space: nowrap; }
.activity-actor { color: var(--faint); white-space: nowrap; }
.activity-text  { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ── Reports ─────────────────────────────────────────────────────────── */
.report-form-row {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  margin-bottom: 16px;
}
.report-type-group, .report-filter-group { display: flex; flex-direction: column; gap: 6px; }
.report-type-group label, .report-filter-group label { font-size: 11px; font-weight: 700; color: var(--muted); }
.report-type-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.report-type-btn {
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--muted); text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.report-type-btn:hover { border-color: var(--accent); color: var(--ink); }
.report-type-btn.active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }

.report-select, .report-date-input {
  font-family: inherit; font-size: 12px; padding: 6px 8px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
}

.report-output { margin-top: 16px; }
.report-header-bar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.report-title { font-size: 15px; font-weight: 700; color: var(--ink); display: block; }
.report-meta  { font-size: 11px; color: var(--faint); }

.report-totals-bar {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 12px; color: var(--muted); margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--surface-2); border-radius: var(--radius);
}
.report-totals-bar strong { color: var(--ink); }

.report-table-wrap { overflow-x: auto; }
.report-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.report-table th {
  background: var(--surface); color: var(--ink);
  padding: 6px 8px; text-align: left;
  border: 1px solid var(--border);
  white-space: nowrap; font-size: 12px; font-weight: 700;
}
.report-table td {
  padding: 5px 8px; border: 1px solid var(--border);
  color: var(--muted); vertical-align: top;
}
.report-table tbody tr:hover td { background: rgba(255,255,255,0.04); }
.report-table tfoot td { font-size: 12px; background: rgba(17,20,27,0.7); color: var(--ink); border-top: 2px solid var(--border); }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-overdue td { background: rgba(228,88,88,0.06); }
.cell-overdue { color: var(--danger) !important; font-weight: 700; }
.cell-balance { color: var(--danger) !important; }
.nav-user {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 9px;
  opacity: .65;
  align-self: center;
  text-decoration: none;
  cursor: pointer;
}
.nav-user:hover { opacity: 1; color: var(--accent-strong); }

/* ── Profile page ── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 860px;
}
.profile-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.card-title {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.form-static {
  font-size: 13px;
  color: var(--muted);
  padding: 7px 0;
}
.alert {
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.alert-success {
  background: var(--teal-soft);
  border: 1px solid var(--teal);
  color: var(--teal);
}
.alert-error {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* ── Notice editor ── */
.notice-edit-layout { display: flex; flex-direction: column; gap: 16px; max-width: 700px; }
.notice-summary-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
  display: flex; flex-wrap: wrap; gap: 6px 24px;
}
.notice-summary-row { display: flex; gap: 8px; font-size: 12px; align-items: baseline; }
.notice-summary-row span { color: var(--faint); min-width: 52px; }
.notice-summary-row strong { color: var(--ink); }
.notice-form-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.notice-textarea { min-height: 100px; resize: vertical; }
.notice-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.form-hint { font-size: 11px; color: var(--faint); font-weight: 400; }

/* ── Shared page layout (non-header.php pages) ── */
.page-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

/* ── Shared card ── */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

/* ── Shared form controls ── */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.12s;
}
.form-control:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(26,111,219,0.18);
}

/* ── Shared buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.12s, border-color 0.12s;
  width: auto;
}
.btn:hover { opacity: 0.88; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-secondary {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
}
.btn-secondary:hover { color: var(--ink); border-color: var(--accent-strong); opacity: 1; }

/* ── Login page ── */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  padding-left: 0;   /* no sidebar on login */
}
body.page-login { padding-left: 0; }
body.page-login .site-nav { display: none; }

/* ── List page shared styles (permits, cases, properties) ── */
.lp-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.lp-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.lp-sub   { font-size: 13px; color: var(--muted); margin: 0; }
.lp-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.lp-stat {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.lp-stat strong { color: var(--ink); font-size: 14px; margin-right: 2px; }
.lp-stat.accent { background: var(--accent-soft); border-color: rgba(26,111,219,0.25); color: var(--accent-strong); }
.lp-stat.accent strong { color: var(--accent-strong); }
.lp-stat.warn   { background: var(--warning-soft); border-color: rgba(217,119,6,0.25); color: var(--warning); }
.lp-stat.warn strong { color: var(--warning); }
.lp-stat.teal   { background: var(--teal-soft); border-color: rgba(14,165,160,0.25); color: var(--teal); }
.lp-stat.teal strong { color: var(--teal); }

.lp-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.lp-filter-bar input[type="text"],
.lp-filter-bar select {
  padding: 6px 9px; font-size: 13px; border-radius: 4px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--ink); font-family: inherit;
}
.lp-filter-bar input[type="text"] { min-width: 200px; flex: 1; }

.lp-table-wrap { overflow-x: auto; }
.lp-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.lp-table th {
  padding: 9px 12px; text-align: left; font-size: 11.5px; font-weight: 700;
  color: var(--muted); border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--surface-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.lp-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.lp-table tr:hover td { background: rgba(77,159,236,0.08); }
.lp-table tr:last-child td { border-bottom: none; }
.lp-table .col-link { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.lp-table .col-link:hover { text-decoration: underline; }
.lp-table .col-muted  { color: var(--muted); }
.lp-table .col-danger { color: var(--danger); font-weight: 700; }
.lp-table .col-addr  { color: var(--ink); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-count { font-size: 12px; color: var(--faint); padding: 10px 12px; border-top: 1px solid var(--border); }

/* ── Stub / coming-soon pages ── */
.stub-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 360px; padding: 60px 24px; text-align: center;
}
.stub-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid rgba(26,111,219,0.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-size: 26px;
}
.stub-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.stub-desc  { font-size: 13px; color: var(--muted); max-width: 380px; line-height: 1.6; margin: 0 auto 24px; }
.stub-coming {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 11px; color: var(--faint); font-weight: 600;
}

/* ── Map page ── */
#site-map { width: 100%; height: calc(100vh - 200px); min-height: 400px; border-radius: var(--radius); overflow: hidden; }
.map-wrap { padding: 0 24px 24px; max-width: 1280px; margin: 0 auto; }
.map-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}

/* ── Global Top Bar ───────────────────────────────────────────────────── */
.site-topbar {
  position: fixed;
  top: 0; left: 240px; right: 0;
  z-index: 30;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 16px;
}

body { padding-top: 52px; }

header { top: 52px; }

.topbar-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 440px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  height: 34px;
}

.topbar-search-icon {
  width: 15px; height: 15px;
  color: var(--faint);
  flex-shrink: 0;
}

.topbar-search-input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  width: auto;
  min-width: 0;
  padding: 0;
  height: auto;
  border-radius: 0;
}
.topbar-search-input::placeholder { color: var(--faint); }

.topbar-kbd {
  font-size: 10px;
  font-family: inherit;
  color: var(--faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.topbar-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #2563EB;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s;
  height: 32px;
}
.topbar-new-btn:hover { background: #1d4ed8; }

.topbar-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  width: auto;
  height: auto;
}
.topbar-icon-btn:hover { color: var(--ink); border-color: var(--accent); }

.topbar-badge {
  position: absolute;
  top: -5px; right: -5px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 15px;
  height: 15px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.topbar-user:hover { border-color: var(--accent); }

.topbar-avatar {
  width: 28px; height: 28px;
  background: #2563EB;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.topbar-user-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.topbar-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.3;
}

.topbar-user-role {
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
  line-height: 1.3;
  text-transform: capitalize;
}

.topbar-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #b58a1a;
  background: rgba(214, 158, 46, 0.14);
  border: 1px solid rgba(214, 158, 46, 0.35);
}

/* ── Sidebar info/status block ────────────────────────────────────────── */
.sidebar-info-block {
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sidebar-info-city {
  font-size: 10px;
  color: var(--faint);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-info-ver {
  font-size: 9.5px;
  color: var(--faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-status-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sidebar-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(34,197,94,0.7);
}

.sidebar-status-text {
  font-size: 10px;
  color: #4ade80;
}

/* ── Dashboard Metric Cards ───────────────────────────────────────────── */
.dash-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .dash-metric-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-metric-grid { grid-template-columns: repeat(2, 1fr); } }

.dash-metric-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
a.dash-metric-card:hover {
  border-color: rgba(99,179,237,.4);
  box-shadow: 0 0 0 1px rgba(99,179,237,.2);
}
.dash-metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.dash-metric-card.mc-blue::before   { background: #3B82F6; }
.dash-metric-card.mc-red::before    { background: #EF4444; }
.dash-metric-card.mc-amber::before  { background: #F59E0B; }
.dash-metric-card.mc-green::before  { background: #22C55E; }
.dash-metric-card.mc-purple::before { background: #8B5CF6; }

.dash-metric-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.dash-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.dash-metric-icon {
  width: 30px; height: 30px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mi-blue   { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.mi-red    { background: rgba(239,68,68,0.15);   color: #f87171; }
.mi-amber  { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.mi-green  { background: rgba(34,197,94,0.15);   color: #4ade80; }
.mi-purple { background: rgba(139,92,246,0.15);  color: #a78bfa; }

.dash-metric-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.dash-metric-delta {
  font-size: 11px;
  color: var(--faint);
  line-height: 1.35;
}
.delta-up   { color: #f87171; }
.delta-down { color: #4ade80; }

/* ── Dashboard layout ─────────────────────────────────────────────────── */
.dash-main-row {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
@media (max-width: 960px) { .dash-main-row { grid-template-columns: 1fr; } }

.dash-bottom-row {
  display: grid;
  grid-template-columns: 1fr 230px 220px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1050px) { .dash-bottom-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .dash-bottom-row { grid-template-columns: 1fr; } }

.dash-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.dash-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.dash-panel-sub { font-size: 11px; color: var(--faint); }

/* ── Priority Queue table ─────────────────────────────────────────────── */
.pq-table-wrap { overflow-x: auto; }
.pq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pq-table th {
  padding: 7px 11px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pq-table td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.pq-table tr:last-child td { border-bottom: none; }
.pq-table tr:hover td { background: rgba(77,159,236,0.05); }

.pq-permit { font-weight: 700; color: var(--accent-strong); text-decoration: none; font-size: 11.5px; }
.pq-permit:hover { text-decoration: underline; }
.pq-addr   { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pq-type   { color: var(--muted); font-size: 12px; }
.pq-priority { font-size: 11px; color: var(--faint); }

.pq-due { font-size: 11px; font-weight: 600; white-space: nowrap; }
.pq-due.overdue { color: #f87171; }
.pq-due.soon    { color: #fbbf24; }
.pq-due.later   { color: var(--muted); }

/* ── Shared status badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap; text-transform: uppercase;
}
.badge-red    { background: rgba(239,68,68,0.15);   color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.badge-amber  { background: rgba(245,158,11,0.15);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.badge-green  { background: rgba(34,197,94,0.15);   color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.badge-blue   { background: rgba(59,130,246,0.15);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.badge-purple { background: rgba(139,92,246,0.15);  color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.badge-gray   { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); }
.badge-teal   { background: rgba(45,212,200,0.12);  color: #2dd4c8; border: 1px solid rgba(45,212,200,0.25); }

/* ── Dash activity panel ─────────────────────────────────────────────── */
.dash-activity-list { display: flex; flex-direction: column; }

.dash-act-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
.dash-act-item:last-child { border-bottom: none; }

.dash-act-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.dash-act-body { flex: 1; min-width: 0; }

.dash-act-text {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-act-text a { color: var(--accent-strong); text-decoration: none; }
.dash-act-text a:hover { text-decoration: underline; }

.dash-act-meta {
  font-size: 10px;
  color: var(--faint);
  margin-top: 2px;
}

/* ── Donut chart ─────────────────────────────────────────────────────── */
.dash-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 14px 10px;
}
.dash-donut-canvas { max-width: 120px; }

.dash-donut-total {
  font-size: 11px;
  color: var(--faint);
  margin-top: 6px;
}
.dash-donut-total strong { color: var(--ink); font-size: 18px; font-weight: 700; margin-right: 3px; }

.dash-donut-legend {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 4px;
}
.dash-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}
.dash-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-legend-label { flex: 1; color: var(--muted); }
.dash-legend-count { font-weight: 700; color: var(--ink); }

/* ── Upcoming schedule ───────────────────────────────────────────────── */
.dash-schedule-list { display: flex; flex-direction: column; }

.dash-sched-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
.dash-sched-item:last-child { border-bottom: none; }

.dash-sched-time {
  font-size: 10px;
  font-weight: 700;
  color: #60a5fa;
  white-space: nowrap;
  min-width: 54px;
  margin-top: 1px;
}

.dash-sched-body { flex: 1; min-width: 0; }

.dash-sched-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-sched-addr {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-sched-case { font-size: 10px; color: var(--faint); margin-top: 1px; }

/* ── Map placeholder ─────────────────────────────────────────────────── */
.dash-map-body {
  position: relative;
  height: 196px;
  background: var(--surface-2);
  overflow: hidden;
}
.dash-map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.dash-map-marker {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.5);
  transform: translate(-50%,-50%);
}
.dash-map-center-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
}
.dash-map-cta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: rgba(37,99,235,0.25);
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 5px;
  color: #60a5fa;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
}
.dash-map-cta:hover { background: rgba(37,99,235,0.4); }

/* ═══════════════════════════════════════════════════════════════════════════
   UI POLISH — v4
   1. Smooth theme transition (JS adds .theme-switching class during toggle)
   2. Sidebar always dark (split-panel design)
   3. Topbar always dark
   4. Active nav left accent bar
   5. Better table rows in light mode
   6. Sharper status badges in light mode
   7. Input focus rings
   8. Page header shadow in light mode
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Smooth theme transition ────────────────────────────────────────────── */
html.theme-switching,
html.theme-switching body,
html.theme-switching main,
html.theme-switching header,
html.theme-switching .panel,
html.theme-switching .card,
html.theme-switching .dash-panel,
html.theme-switching .dash-metric-card,
html.theme-switching .modal-panel,
html.theme-switching .summary-card,
html.theme-switching .lp-filter-bar,
html.theme-switching .lp-table th,
html.theme-switching .lp-table td,
html.theme-switching .records-table th,
html.theme-switching .records-table td,
html.theme-switching .pq-table th,
html.theme-switching .pq-table td,
html.theme-switching input,
html.theme-switching select,
html.theme-switching textarea,
html.theme-switching .form-control,
html.theme-switching .badge,
html.theme-switching .badge-red,
html.theme-switching .badge-amber,
html.theme-switching .badge-green,
html.theme-switching .badge-blue,
html.theme-switching .badge-purple,
html.theme-switching .badge-gray,
html.theme-switching .badge-teal,
html.theme-switching .topbar-search-wrap,
html.theme-switching .topbar-kbd,
html.theme-switching .topbar-icon-btn,
html.theme-switching .topbar-user,
html.theme-switching .lp-stat,
html.theme-switching .activity-item,
html.theme-switching .note-item,
html.theme-switching .insp-item,
html.theme-switching .pay-item,
html.theme-switching .detail-row td,
html.theme-switching .check-option,
html.theme-switching .dash-act-item,
html.theme-switching .dash-sched-item {
  transition: background-color 0.22s ease, color 0.18s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

/* ── 2. Sidebar always dark (split-panel) ──────────────────────────────────── */
.site-nav {
  background: #07101f;
  border-right-color: #1a2d47;
}
html[data-theme="light"] .site-nav {
  background: #07101f;
  border-right-color: #1a2d47;
}
html[data-theme="light"] .sidebar-brand {
  border-bottom-color: #1a2d47;
}
html[data-theme="light"] .sidebar-town {
  color: #e8f4ff;
}
html[data-theme="light"] .sidebar-dept {
  color: #8aadcc;
}
html[data-theme="light"] .sidebar-section-label {
  color: #4a6a88;
}
html[data-theme="light"] .sidebar-link {
  color: #9ab8d8;
}
html[data-theme="light"] .sidebar-link:hover {
  background: rgba(77,159,236,0.18);
  color: #e8f4ff;
}
html[data-theme="light"] .sidebar-link.active {
  background: rgba(77,159,236,0.22);
  color: #78c0ff;
}
html[data-theme="light"] .sidebar-footer {
  border-top-color: #1a2d47;
}
html[data-theme="light"] .sidebar-user-name {
  color: #e8f4ff;
}
html[data-theme="light"] .sidebar-role {
  color: #8aadcc;
}
html[data-theme="light"] .sidebar-logout {
  color: #4a6a88;
}
html[data-theme="light"] .sidebar-logout:hover {
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.3);
}
html[data-theme="light"] .sidebar-info-block {
  border-top-color: #1a2d47;
}
html[data-theme="light"] .sidebar-info-city {
  color: #4a6a88;
}
html[data-theme="light"] .sidebar-info-ver {
  background: #0a1526;
  border-color: #1a2d47;
  color: #4a6a88;
}
html[data-theme="light"] .sidebar-status-text {
  color: #4ade80;
}

/* ── 3. Topbar always dark ────────────────────────────────────────────────── */
.site-topbar {
  background: #07101f;
  border-bottom-color: #1a2d47;
}
html[data-theme="light"] .site-topbar {
  background: #07101f;
  border-bottom-color: #1a2d47;
}
html[data-theme="light"] .topbar-search-wrap {
  background: #0e1c32;
  border-color: #2d4a6d;
}
html[data-theme="light"] .topbar-search-icon {
  color: #6e92b4;
}
html[data-theme="light"] .topbar-search-input {
  color: #e8f4ff;
}
html[data-theme="light"] .topbar-search-input::placeholder {
  color: #6e92b4;
}
html[data-theme="light"] .topbar-kbd {
  background: #0a1526;
  border-color: #2d4a6d;
  color: #6e92b4;
}
html[data-theme="light"] .topbar-icon-btn {
  color: #9ab8d8;
  border-color: #243d5c;
}
html[data-theme="light"] .topbar-icon-btn:hover {
  color: #e8f4ff;
  border-color: #4d9fec;
}
html[data-theme="light"] .topbar-user {
  border-color: #243d5c;
}
html[data-theme="light"] .topbar-user:hover {
  border-color: #4d9fec;
}
html[data-theme="light"] .topbar-user-name {
  color: #e8f4ff;
}
html[data-theme="light"] .topbar-user-role {
  color: #8aadcc;
}

/* ── 4. Active nav left accent bar ───────────────────────────────────────── */
.sidebar-link {
  border-left: 3px solid transparent;
  padding-left: 6px;
}
.sidebar-link:hover {
  border-left-color: rgba(77,159,236,0.4);
}
.sidebar-link.active {
  border-left-color: #4d9fec;
}

/* ── 5. Better table rows in light mode ──────────────────────────────────── */
html[data-theme="light"] .lp-table tr:hover td {
  background: rgba(37,99,235,0.05);
}
html[data-theme="light"] .lp-table tbody tr:nth-child(even) td {
  background: rgba(0,0,0,0.02);
}
html[data-theme="light"] .lp-table th {
  background: #f1f5f9;
  color: #475569;
  border-bottom-color: #cbd5e1;
}
html[data-theme="light"] .records-table th {
  background: #f1f5f9;
  color: #475569;
  border-bottom-color: #cbd5e1;
}
html[data-theme="light"] .records-table .record-row:hover td {
  background: rgba(37,99,235,0.05);
}
html[data-theme="light"] .records-table tbody tr:nth-child(even) td {
  background: rgba(0,0,0,0.018);
}
html[data-theme="light"] .pq-table th {
  background: #f1f5f9;
  color: #64748b;
}
html[data-theme="light"] .pq-table tr:hover td {
  background: rgba(37,99,235,0.05);
}

/* ── 6. Sharper status badges in light mode ──────────────────────────────── */
html[data-theme="light"] .badge-red    { background: rgba(220,38,38,0.12);   color: #dc2626; border-color: rgba(220,38,38,0.3); }
html[data-theme="light"] .badge-amber  { background: rgba(217,119,6,0.12);   color: #b45309; border-color: rgba(217,119,6,0.3); }
html[data-theme="light"] .badge-green  { background: rgba(22,163,74,0.12);   color: #16a34a; border-color: rgba(22,163,74,0.3); }
html[data-theme="light"] .badge-blue   { background: rgba(37,99,235,0.12);   color: #2563eb; border-color: rgba(37,99,235,0.3); }
html[data-theme="light"] .badge-purple { background: rgba(109,40,217,0.10);  color: #6d28d9; border-color: rgba(109,40,217,0.25); }
html[data-theme="light"] .badge-gray   { background: rgba(100,116,139,0.10); color: #475569; border-color: rgba(100,116,139,0.22); }
html[data-theme="light"] .badge-teal   { background: rgba(13,148,136,0.10);  color: #0d9488; border-color: rgba(13,148,136,0.25); }
html[data-theme="light"] .badge.b-open    { color: #1d4ed8; background: rgba(37,99,235,0.10);   border-color: rgba(37,99,235,0.3); }
html[data-theme="light"] .badge.b-pending { color: #6d28d9; background: rgba(109,40,217,0.10); border-color: rgba(109,40,217,0.25); }
html[data-theme="light"] .badge.b-closed  { color: #0d766e; background: rgba(13,118,110,0.10); border-color: rgba(13,118,110,0.25); }
html[data-theme="light"] .badge.b-notice  { color: #dc2626; background: rgba(220,38,38,0.10);  border-color: rgba(220,38,38,0.25); }
html[data-theme="light"] .badge.b-high    { color: #92400e; background: rgba(146,64,14,0.10);  border-color: rgba(146,64,14,0.25); }
html[data-theme="light"] .badge.b-approved { color: #0f7a3d; background: rgba(15,122,61,0.10);  border-color: rgba(15,122,61,0.28); }
html[data-theme="light"] .badge.b-denied  { color: #fff;    background: #c0392b; border-color: #c0392b; }
html[data-theme="light"] .badge.b-review  { color: #b03060; background: rgba(176,48,96,0.10);  border-color: rgba(176,48,96,0.28); }
html[data-theme="light"] .badge.b-hold    { color: #b06a12; background: rgba(176,106,18,0.10); border-color: rgba(176,106,18,0.28); }

/* ── 7. Input focus rings in both modes ──────────────────────────────────── */
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.16);
}

/* ── 8. Page header polish in light mode ─────────────────────────────────── */
html[data-theme="light"] header {
  box-shadow: 0 1px 6px rgba(15,23,42,0.07);
  border-bottom-color: #cbd5e1;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .dash-panel,
html[data-theme="light"] .dash-metric-card {
  box-shadow: 0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
}
html[data-theme="light"] .lp-filter-bar {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
html[data-theme="light"] .dash-metric-card {
  border-color: #e2e8f0;
}
html[data-theme="light"] a.dash-metric-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 0 0 1px rgba(147,197,253,0.4), 0 4px 12px rgba(15,23,42,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ─────────────────────────────────── */
.topbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid #243d5c;
  border-radius: 6px;
  color: #9ab8d8;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s, border-color .12s;
}
.topbar-hamburger:hover { color: #e8f4ff; border-color: #4d9fec; }

/* ── Backdrop overlay (dismisses open sidebar) ───────────────────────────── */
.nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.62);
  z-index: 150;
  backdrop-filter: blur(2px);
}
.nav-backdrop.open { display: block; }

/* Prevent body scroll while nav is open on mobile */
body.nav-lock { overflow: hidden; }

/* ── Mobile (≤768px) ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Remove the 240px sidebar offset */
  body { padding-left: 0 !important; }

  /* Stretch topbar edge-to-edge */
  .site-topbar { left: 0; padding: 0 10px; gap: 8px; }

  /* Show hamburger */
  .topbar-hamburger { display: flex; }

  /* Hide keyboard shortcut hint in search */
  .topbar-kbd { display: none; }

  /* Hide user name/role text next to avatar — avatar alone is enough */
  .topbar-user-text { display: none; }

  /* Let search bar grow to fill available space */
  .topbar-search-wrap { max-width: none; }

  /* Hide the "New Case" button label on very small screens */
  .topbar-new-btn span { display: none; }

  /* Sidebar becomes a slide-in overlay */
  .site-nav {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
  }
  .site-nav.nav-open {
    transform: translateX(0);
    box-shadow: 6px 0 32px rgba(0,0,0,0.7);
  }

  /* Stack the work-order detail sidebar below main content */
  .detail-lower { flex-direction: column; }
  .detail-lower-sidebar { width: 100%; }

  /* Compact the page-level header */
  header { padding: 12px 14px; }
  header h1 { font-size: 17px; }
  main { padding: 10px; }
  .page-main { padding: 14px 10px; }
  .map-wrap { padding: 0 10px 16px; }

  /* Map: sensible height on small screens */
  #site-map { height: calc(100vh - 160px); min-height: 280px; }

  .insp-filter-row { flex-direction: column; align-items: stretch; }

  /* Report form: stack */
  .report-form-row { flex-direction: column; }
}