:root {
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface-card: #f8fafc;
    --surface-hover: #e2e8f0;
    --surface-input: #ffffff;
    --border: #cbd5e1;
    --border-strong: #94a3b8;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --accent: #0284c7;
    --accent-hover: #0369a1;
    --accent-glow: rgba(2, 132, 199, 0.18);
    --success: #059669;
    --success-hover: #047857;
    --warning: #d97706;
    --warning-hover: #b45309;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --purple: #7c3aed;
    --purple-hover: #6d28d9;
    --teal: #0d9488;
    --teal-hover: #0f766e;
    --slate: #475569;
    --slate-hover: #334155;
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.08);
    --shadow-md: 0 4px 14px rgba(15,23,42,0.10);
    --shadow-lg: 0 16px 32px rgba(15,23,42,0.16);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --surface: #111a2b;
    --surface-card: #0f1727;
    --surface-hover: #1b2942;
    --surface-input: #0c1524;
    --border: #263650;
    --border-strong: #3d4f6d;
    --text-primary: #e6edf7;
    --text-secondary: #9aa8bd;
    --accent: #0b8bd0;
    --accent-hover: #0a78b3;
    --accent-glow: rgba(56, 189, 248, 0.18);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.5);
    --shadow-lg: 0 16px 32px rgba(0,0,0,0.6);
  }
  /* text colours that need to be lighter on a dark surface */
  :root[data-theme="dark"] .chip-success, :root[data-theme="dark"] .status-added { color: #34d399; }
  :root[data-theme="dark"] .chip-warning, :root[data-theme="dark"] .status-updated,
  :root[data-theme="dark"] .health-tag, :root[data-theme="dark"] .backup-banner,
  :root[data-theme="dark"] .backup-banner .bb-quiet, :root[data-theme="dark"] .edit-status.dirty { color: #fbbf24; }
  :root[data-theme="dark"] .chip-danger, :root[data-theme="dark"] .status-stale { color: #f87171; }
  :root[data-theme="dark"] .chip-accent, :root[data-theme="dark"] .health-chip.active { color: #7dd3fc; }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 6px 12px;
    background: radial-gradient(circle at top right, var(--surface), var(--bg) 80%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13.5px;
    color: var(--text-primary);
    min-height: 100vh;
    width: 100%;
  }

  /* Sidebar Drawer */
  .sidebar-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease);
  }
  .sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-width: 85vw;
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.16);
    z-index: 10002;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease);
    display: flex;
    flex-direction: column;
  }
  .sidebar-drawer.open {
    transform: translateX(0);
  }

  .sidebar-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-card);
  }
  .sidebar-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sidebar-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    padding: 4px 10px;
    margin: 0;
  }

  .sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sidebar-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
    font-family: inherit;
  }
  .sidebar-btn:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--accent);
  }
  .sidebar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .sidebar-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
  }
  .sidebar-btn-danger {
    color: var(--danger);
  }
  .sidebar-btn-danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.1);
    color: var(--danger-hover);
  }

  .sidebar-auth-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    margin: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .menu-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s var(--ease);
  }
  .menu-toggle-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
  }
  .menu-toggle-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  #toast-container {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    margin: 0 auto;
    /* transform is set from JS to follow the visual viewport (mobile keyboard / address bar) */
    z-index: 10010; /* above sidebar overlay (10001) and drawer (10002) */
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    width: 90%;
    max-width: 440px;
  }

  .toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  }

  .toast.show { opacity: 1; transform: translateY(0) scale(1); }
  .toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .toast-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
  }
  .toast-close:hover, .toast-close:focus-visible { background: rgba(255, 255, 255, 0.22); opacity: 1; outline: none; }
  .toast-success { background: var(--success); }
  .toast-danger { background: var(--danger); }
  .toast-info { background: var(--accent); }
  .toast-warning { background: var(--warning); }

  /* The overlay is the browser's own fixed box, which follows the phone's address bar. JS only sets
     --vv-top / --vv-bottom while the on-screen keyboard is open (see syncModalViewport). */
  .modal-overlay {
    position: fixed;
    top: var(--vv-top, 0px); left: 0; right: 0; bottom: var(--vv-bottom, 0px);
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;   /* the card centres itself with margin:auto, see below */
    justify-content: center;
    overflow-y: auto;          /* a card taller than the screen scrolls instead of being clipped */
    padding: 16px;
    animation: fadeInModal 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    margin: auto;              /* centred when it fits, top-aligned and scrollable when it doesn't */
    padding: 28px 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    text-align: center;
    animation: popInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes popInModal {
    from { transform: scale(0.94) translateY(8px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
  }

  .modal-icon-badge {
    width: 48px;
    height: 48px;
    background: var(--accent-glow);
    color: var(--accent);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

  .modal-icon-badge svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  .modal-card h3 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
  }

  .modal-card p {
    color: var(--text-secondary);
    font-size: 13.5px;
    margin: 0 0 20px 0;
    line-height: 1.45;
  }

  .modal-select-wrapper {
    position: relative;
    margin-bottom: 24px;
  }

  .modal-select-wrapper select {
    width: 100%;
    height: 42px;
    padding: 0 38px 0 38px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--surface-input);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: all 0.2s var(--ease);
  }

  .modal-select-wrapper select:hover {
    border-color: var(--border-strong);
    background-color: var(--surface-hover);
  }

  .modal-select-wrapper select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background-color: var(--surface);
  }

  .modal-select-wrapper .select-icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    fill: var(--text-secondary);
    pointer-events: none;
  }

  .btn-proceed {
    width: 100%;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.24);
    transition: all 0.15s var(--ease);
  }

  .btn-proceed:hover:not(:disabled):not(.is-disabled) {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.32);
  }

  .btn-proceed:active:not(:disabled):not(.is-disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2);
  }

  .btn-proceed:disabled,
  .btn-proceed.is-disabled {
    opacity: 0.75;
    cursor: not-allowed;
  }

  .btn-proceed svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.15s var(--ease);
  }

  .btn-proceed:hover:not(:disabled):not(.is-disabled) svg {
    transform: translateX(3px);
  }

  .wrap {
    width: 100%;
    max-width: 100% !important;
    margin: 0;
  }

  .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--accent);
    border-radius: 10px 10px 0 0;
    padding: 8px 14px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    gap: 8px;
  }

  .title-left-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .title-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-primary);
  }

  .engine-select-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .engine-select-wrap label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .engine-select-wrap select {
    height: 32px;
    font-size: 13px;
    width: auto;
    min-width: 250px;
    background-color: var(--surface);
    border: 1.5px solid var(--accent);
    font-weight: 600;
    color: var(--accent);
  }

  .panel {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 12px;
  }

  .field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 0;
    position: relative;
  }

  .col-third { grid-column: span 2; }
  .col-half  { grid-column: span 3; }
  .col-two-thirds { grid-column: span 4; }

  .field label {
    font-weight: 600;
    font-size: 11.5px;
    margin-bottom: 3px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .req-star {
    color: var(--danger);
    font-weight: bold;
    margin-left: 2px;
  }

  input, select, textarea {
    width: 100%;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    padding: 5px 10px;
    outline: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
  }

  /* Inline Validation Error Boundaries */
  input.invalid-field, select.invalid-field {
    border-color: var(--danger) !important;
    background-color: rgba(220, 38, 38, 0.06) !important;
  }
  .focus-helper.error-helper {
    background: var(--danger) !important;
    color: #ffffff !important;
    border-color: var(--danger) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    display: block !important;
    z-index: 150;
  }
  .focus-helper.error-helper::before,
  .focus-helper.error-helper::after {
    border-color: transparent transparent var(--danger) transparent !important;
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-left: 10px;
    padding-right: 36px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  select option {
    background: var(--surface);
    color: var(--text-primary);
    padding: 6px 10px;
  }

  input:hover, select:hover, textarea:hover {
    border-color: var(--border-strong);
    background-color: var(--surface-hover);
  }

  input:focus, select:focus, textarea:focus {
    background-color: var(--surface-hover);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  .focus-field-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .focus-helper {
    position: absolute;
    top: calc(100% + 5px);
    left: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    padding: 4px 9px;
    border-radius: 5px;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  }

  .focus-helper::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 9px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--border-strong) transparent;
  }

  .focus-helper::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 10px;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent var(--surface) transparent;
  }

  .focus-field-wrap:focus-within .focus-helper:not(.error-helper) {
    opacity: 1;
    transform: translateY(0);
  }

  /* Form fields: the hint lives in the label row (right of the label) instead of floating under the input,
     where it used to cover the label of the field in the next row. It is part of the layout, so it can never
     overlap a neighbour. A validation message is shown as plain text on its own row below the input; the field
     grows to fit it, so the next row of fields shifts down rather than being covered. */
  .field-head { display: contents; }
  .field-head label { margin-bottom: 0; grid-column: 1; grid-row: 1; }
  .field-head .focus-helper {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    border: none;
    border-radius: 4px;
    background: var(--accent-glow);
    color: var(--accent-hover);
    box-shadow: none;
    transform: none;
    font-size: 11px;
    line-height: 13px;
  }
  .field-head .focus-helper::before,
  .field-head .focus-helper::after { display: none; }
  .field:focus-within .field-head .focus-helper:not(.error-helper) { opacity: 1; }
  .field > .focus-field-wrap { grid-column: 1 / -1; grid-row: 2; }
  .field-head .focus-helper.error-helper {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    position: static;
    margin: 0;
    text-align: left;
    white-space: normal;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    line-height: 1.3;
    background: transparent !important;
    color: var(--danger) !important;
    box-shadow: none !important;
  }

  /* Floor entries: a floating hint would sit on top of the next floor row (desktop) or the next field (phone).
     The unit is already in the column heading / field label and the Area placeholder, so the hint is not shown.
     A validation error is shown in line under its field instead of floating over its neighbours. */
  .ftd .focus-helper:not(.error-helper) { display: none; }
  .ftd .focus-helper.error-helper { position: static; margin-top: 4px; white-space: normal; line-height: 1.3; }
  .ftd .focus-helper.error-helper::before,
  .ftd .focus-helper.error-helper::after { display: none; }

  .gis-row {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
  }
  .gis-row input {
    padding-right: 152px;
  }
  .gis-controls {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
  }
  .gis-controls button {
    border: none;
    border-radius: 4px;
    background: var(--surface-hover);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s var(--ease), color .15s var(--ease);
    padding: 0;
    height: 100%;
  }
  .gis-controls button:hover {
    background: var(--border-strong);
    color: #fff;
  }
  .gis-nav-btn {
    width: 24px;
  }
  .gis-nav-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
  }
  .gis-view-btn {
    background: var(--accent) !important;
    color: #ffffff !important;
    font-size: 11.5px;
    font-weight: 700;
    padding: 0 10px !important;
  }
  .gis-view-btn:hover {
    background: var(--accent-hover) !important;
  }

  @media (max-width: 900px) {
    .grid { grid-template-columns: 1fr !important; }
    .col-third, .col-half, .col-two-thirds { grid-column: span 1 !important; }
  }

  .floor-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 10px;
    width: 100%;
    overflow-x: auto;
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }
  .floor-grid {
    display: grid;
    width: 100%;
  }
  .fth {
    background: var(--surface-card);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 7px 6px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-strong);
    border-right: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.25;
  }
  .fth:last-child, .ftd:last-child { border-right: none; }
  .frow-label {
    background: var(--surface-card);
    font-weight: 600;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    font-size: 13px;
    white-space: nowrap;
  }
  .frow-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .frow-remove-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--danger);
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s var(--ease);
  }
  .frow-remove-btn:hover { background: rgba(220,38,38,0.12); border-color: var(--danger); color: var(--danger-hover); }
  .ftd {
    padding: 4px 8px;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    position: relative;
  }
  .ftd-remarks-spanning {
    align-items: stretch;
  }
  .ftd-remarks-spanning textarea {
    height: 100%;
    min-height: 28px;
    resize: none;
    font-size: 12.5px;
    line-height: 1.4;
  }
  .ftd input, .ftd select {
    height: 28px;
    font-size: 12.5px;
  }
  .ftd input:disabled, .ftd select:disabled {
    background: var(--surface-hover);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.75;
  }
  .ftd select {
    padding-left: 8px;
    padding-right: 34px !important;
  }
  .ftd button {
    border: none;
    color: #fff;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s var(--ease), opacity .15s var(--ease);
  }
  .floor-add { background: var(--accent); color: #ffffff !important; }
  .floor-add:hover { background: var(--accent-hover); }
  .floor-remove { background: var(--danger); }
  .floor-remove:hover { background: var(--danger-hover); }

  /* Barrier between one sub-row's Remove button and the next sub-row (mobile only) */
  .sub-row-divider, .sub-row-tag { display: none; }

  .floor-level-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-card);
  }
  .floor-level-actions:empty { display: none; }

  .floor-add-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s var(--ease), transform .1s var(--ease);
  }
  .floor-add-wrap:hover { box-shadow: var(--shadow-md); }
  .floor-add-wrap:active { transform: scale(0.98); }
  .floor-add-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    fill: #fff;
    pointer-events: none;
  }
  .floor-add-by-name {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 9px 30px 9px 34px;
    cursor: pointer;
    outline: none;
  }
  .floor-add-by-name option { color: var(--text-primary); background: var(--surface-input); font-weight: 600; }
  .floor-add-chevron {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: #fff;
    pointer-events: none;
  }

  .floor-empty-hint {
    grid-column: 1 / -1; /* span every grid column, not just the narrow "Floor" one */
    width: 100%;
    box-sizing: border-box;
    padding: 18px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
  }

  @media (max-width: 900px) {
    .floor-grid { grid-template-columns: 1fr !important; }
    .fth { display: none; }
    .frow-label { border-top: 2px solid var(--border-strong); font-size: 13.5px; padding: 8px 10px; }
    .ftd { border-right: none; border-top: none; padding: 5px 12px; flex-direction: column; align-items: stretch; }
    .ftd::before { content: attr(data-label); font-weight: 600; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 2px; }
    .ftd-remarks-spanning textarea { height: 50px; }

    /* Actions: side-by-side, equal-width, thumb-sized buttons (label is redundant on mobile) */
    .ftd-actions { flex-direction: row; align-items: stretch; gap: 8px; padding: 8px 12px 12px; background: var(--surface-card); }
    .ftd-actions::before { display: none; }
    .ftd-actions button { flex: 1 1 0; min-height: 40px; padding: 8px 12px; font-size: 13px; border-radius: 8px; }
    .frow-remove-btn { width: 32px; height: 32px; min-width: 32px; font-size: 18px; border-radius: 8px; }

    .sub-row-tag {
      display: block;
      padding: 8px 12px 2px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--accent);
    }

    /* Clear barrier so it's obvious which sub-row a Remove button belongs to */
    .sub-row-divider {
      display: block;
      height: 14px;
      background: var(--surface);
      border-top: 3px solid var(--accent);
      border-bottom: 3px solid var(--accent);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    /* Floor-level "Add Floor" control: full-width, easy tap target */
    .floor-level-actions { justify-content: stretch; padding: 10px 12px 12px; }
    .floor-add-wrap { width: 100%; }
    .floor-add-by-name { width: 100%; min-height: 44px; text-align: center; text-align-last: center; font-size: 14px; }
  }

  #syncBadge { position: fixed; left: 12px; bottom: 12px; z-index: 9000; display: none; padding: 8px 14px; border-radius: 999px; background: #b45309; color: #fff; font-size: 13px; font-weight: 600; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }
  #syncBadge.bad { background: #b91c1c; }

  /* Import / Export dialog and Staff Activity controls */
  .xl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .xl-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; background: var(--surface-card); min-width: 0; }
  .xl-card h4 { margin: 0; font-size: 15px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .xl-card h4 span { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
  .xl-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
  .xl-export { border: 1px solid var(--border); border-top: 4px solid var(--accent); }
  .xl-export h4 { color: var(--accent); }
  .xl-import { border: 2px dashed var(--success); }
  .xl-import h4 { color: var(--success); }
  .xl-btn { height: 38px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); }
  .xl-btn:disabled { opacity: .55; cursor: not-allowed; }
  .xl-btn-fill { background: var(--accent); color: #fff; }
  .xl-btn-fill:hover:not(:disabled) { background: var(--accent-hover); }
  .xl-btn-ok { background: var(--success); border-color: var(--success); color: #fff; }
  .xl-btn-ok:hover:not(:disabled) { background: var(--success-hover); }
  .xl-drop { height: 64px; border: 2px dashed var(--success); border-radius: 8px; background: transparent; color: var(--success); font-size: 14px; font-weight: 600; cursor: pointer; }
  .xl-drop:hover:not(:disabled) { background: rgba(5, 150, 105, 0.08); }
  .xl-drop:disabled { opacity: .55; cursor: not-allowed; }
  .xl-msg { margin: 0; font-size: 12px; color: var(--text-secondary); }
  @media (max-width: 640px) { .xl-grid { grid-template-columns: 1fr; } }
  .act-grid { display: grid; gap: 16px; }
  .act-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
  .btns {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .btns button {
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: background-color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
  }
  .btns button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  .btns button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }

  .save { background: var(--success); }
  .save:hover { background: var(--success-hover); }

  .update { background: var(--warning); }
  .update:hover { background: var(--warning-hover); }

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

  .reset { background: var(--slate); }
  .reset:hover { background: var(--slate-hover); }

  #recordCount { text-align: center; margin-top: 8px; font-weight: 600; color: var(--text-secondary); font-size: 13px; }

  /* Edit-state indicator + changed-field highlight */
  .edit-status {
    display: none;
    width: fit-content;
    margin: 10px auto 0;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
  }
  .ownercopy { background: var(--accent); }
  .ownercopy:hover { background: var(--accent-hover); }
  .oc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 14px 0; }
  .oc-field-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-card); cursor: pointer; transition: border-color .12s, background .12s; }
  .oc-field-card:hover { border-color: var(--accent); }
  .oc-field-card.on { border-color: var(--accent); background: var(--accent-glow); }
  .oc-field-card.off { cursor: default; border-style: dashed; opacity: .7; }
  .oc-field-card.off:hover { border-color: var(--border); }
  .oc-field-card input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--accent); cursor: pointer; }
  .oc-field-card.off input[type="checkbox"] { cursor: default; }
  .oc-field-card .oc-field-text { min-width: 0; }
  .oc-field-card .oc-field-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 2px; }
  .oc-field-card .oc-field-value { display: block; font-size: 14px; font-weight: 600; word-break: break-word; }
  .oc-field-card.off .oc-field-value { font-weight: 400; font-style: italic; color: var(--text-secondary); }
  .history { background: var(--purple); }
  .history:hover { background: var(--purple-hover); }
  .hist-entry { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
  .hist-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 9px 12px; background: var(--surface-card);
    border-bottom: 1px solid var(--border); font-size: 12.5px;
  }
  .hist-table { min-width: 0; }
  .hist-changes { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.5; }
  .hist-changes .hist-from-txt { color: var(--danger); }
  .hist-changes .hist-to-txt { color: var(--success); font-weight: 600; }
  .hist-table td.hist-from { color: var(--danger); }
  .hist-table td.hist-to { color: var(--success); font-weight: 600; }
  .edit-status.clean { background: var(--surface-hover); color: var(--text-secondary); border-color: var(--border); }
  .edit-status.dirty { background: rgba(217,119,6,0.14); color: var(--warning-hover); border-color: rgba(217,119,6,0.45); }
  input.field-changed, select.field-changed, textarea.field-changed {
    border-color: var(--warning);
    background-color: rgba(217,119,6,0.08);
  }

  /* Wide modals */
  .modal-overlay-lg {
    --modal-pad: 24px;
    position: fixed;
    top: var(--vv-top, 0px); left: 0; right: 0; bottom: var(--vv-bottom, 0px);
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--modal-pad) 16px max(var(--modal-pad), env(safe-area-inset-bottom, 0px));
    animation: fadeInModal 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
  }
  .modal-card-lg {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 100%;
    max-width: 1060px;
    max-height: 100%;          /* of the overlay's padded box: header and footer always stay on screen */
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.12), 0 8px 10px -6px rgba(0,0,0,0.1);
    animation: popInModal 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
  .modal-header-lg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .modal-header-lg h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .modal-close-btn {
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 30px; height: 30px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s var(--ease);
  }
  .modal-close-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
  .modal-body-lg {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;             /* lets the body shrink and scroll while header/footer stay put */
  }
  .modal-footer-lg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
  }
  .modal-footer-lg .footer-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
  }
  .filter-bar input[type="text"],
  .filter-bar select,
  .filter-bar input[type="datetime-local"] {
    height: 38px;
    padding: 0 12px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--surface-input);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: all .15s var(--ease);
  }
  .filter-bar input[type="text"] { flex: 1 1 220px; min-width: 180px; }
  .filter-bar select { flex: 0 0 auto; min-width: 140px; }
  .filter-bar input:focus, .filter-bar select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
  .data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 680px; }
  .data-table th {
    text-align: left;
    padding: 9px 12px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
  }
  .data-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: top;
  }
  .data-table tbody tr:last-child td { border-bottom: none; }
  .data-table tbody tr.clickable-row { cursor: pointer; transition: background-color .1s var(--ease); }
  .data-table tbody tr.clickable-row:hover { background: var(--surface-hover); }
  .empty-row { text-align: center !important; color: var(--text-secondary); padding: 24px !important; font-style: italic; }

  .chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
  }
  .chip-success { background: rgba(5,150,105,0.12); border-color: rgba(5,150,105,0.3); color: var(--success); }
  .chip-warning { background: rgba(217,119,6,0.12); border-color: rgba(217,119,6,0.3); color: var(--warning); }
  .chip-danger { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.3); color: var(--danger); }
  .chip-accent { background: var(--accent-glow); border-color: rgba(2,132,199,0.3); color: var(--accent); }
  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

  .status-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .status-added { background: rgba(5,150,105,0.14); color: var(--success); }
  .status-updated { background: rgba(217,119,6,0.14); color: var(--warning); }
  .status-stale { background: rgba(220,38,38,0.12); color: var(--danger); }
  .status-same { background: var(--surface-hover); color: var(--text-secondary); }
  .link-btn { background: none; border: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; }
  .link-btn:hover { color: var(--accent-hover); }
  .import-op-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .import-op-cell .status-pill { white-space: nowrap; }
  .import-detail-inner { position: sticky; left: 0; max-width: min(560px, calc(100vw - 96px)); }
  .data-table td.import-detail-cell { background: var(--surface-card); padding: 10px 16px; }
  .import-change-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; }
  .import-change-list .from { color: var(--text-secondary); text-decoration: line-through; }
  .import-detail-warn { margin: 0 0 8px 0; font-size: 12px; font-weight: 600; color: var(--danger); }
  .health-table th, .health-table td { padding-left: 8px; padding-right: 8px; }
  .health-chip { font-family: inherit; cursor: pointer; }
  .health-chip:hover { border-color: var(--border-strong); }
  .health-chip.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent-hover); }
  .health-tag { display: inline-block; margin: 2px 4px 0 0; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: rgba(217,119,6,0.12); color: var(--warning-hover); }
  .backup-banner { display: none; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px 0; padding: 9px 12px; border: 1px solid rgba(217,119,6,0.45); background: rgba(217,119,6,0.10); border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--warning-hover); }
  .backup-banner .bb-text { flex: 1 1 220px; }
  .backup-banner button { font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 7px; cursor: pointer; padding: 6px 12px; }
  .backup-banner .bb-primary { border: 1px solid var(--warning); background: var(--warning); color: #ffffff; }
  .backup-banner .bb-primary:hover { background: var(--warning-hover); }
  .backup-banner .bb-quiet { border: 1px solid transparent; background: transparent; color: var(--warning-hover); }
  .backup-banner .bb-quiet:hover { text-decoration: underline; }
  .about-list { margin: 0 0 4px 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
  .about-list li { margin-bottom: 4px; }
  .about-credit { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
  .about-credit strong { color: var(--text-primary); font-weight: 700; }
  .sidebar-badge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--accent-glow); color: var(--accent-hover); font-size: 11.5px; font-weight: 700; text-align: center; }
  .bin-item { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-card); padding: 12px 14px; margin-bottom: 10px; }
  .bin-item-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
  .bin-item-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
  .bin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .bin-actions .page-btn-danger { color: var(--danger); }
  .hist-restore-row { padding: 10px 12px; border-top: 1px solid var(--border); }
  .sidebar-note { margin: 0; padding: 0 14px 4px 44px; font-size: 11.5px; color: var(--text-secondary); }

  .pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .pagination-controls .page-info { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
  .pagination-controls .page-btns { display: flex; gap: 6px; }
  .page-btn {
    padding: 7px 14px;
    border-radius: 7px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s var(--ease);
  }
  .page-btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
  .page-btn:disabled { opacity: 0.45; cursor: not-allowed; }

  .tabs-bar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .tab-btn {
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s var(--ease);
    margin-bottom: -1px;
  }
  .tab-btn:hover { color: var(--text-primary); }
  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
  .report-panel { display: none; }
  .report-panel.active { display: block; }
  .report-panel-note { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 12px 0; }
  .report-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

  @media (max-width: 640px) {
    .data-table { min-width: 480px; }
    .modal-body-lg { padding: 12px 14px; }
    .modal-header-lg, .modal-footer-lg { padding: 12px 14px; }
    .modal-overlay-lg { --modal-pad: 10px; padding-left: 8px; padding-right: 8px; }
    .modal-overlay { padding: 10px 8px; }
  }

  .login-field { margin-bottom: 12px; text-align: left; }
  .login-field input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--surface-input);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: all .2s var(--ease);
    box-sizing: border-box;
  }
  .login-field input:hover { border-color: var(--border-strong); }
  .login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--surface); }
  .login-error {
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 600;
    margin: -4px 0 14px 0;
    text-align: left;
  }
  .modal-link-btn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    text-decoration: underline;
    font-family: inherit;
  }
  .modal-link-btn:hover { color: var(--text-primary); }
  /* Touch and scrolling polish */
  button, select, input, textarea, label, .clickable-row { touch-action: manipulation; }
  .modal-overlay, .modal-overlay-lg, .modal-body-lg, .sidebar-body { overscroll-behavior: contain; }
  /* iOS Safari zooms the page when a field under 16px gets focus */
  @supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: 16px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
  /* Full-page sign-in gate. Covers everything until a Supabase Auth session
     with a loaded users/{uid} role profile exists. */
  #authGateModal, #authPendingModal {
    position: fixed; inset: 0; z-index: 20000;
    background: radial-gradient(circle at top right, var(--surface), var(--bg) 80%);
    display: none; align-items: center; justify-content: center; padding: 16px;
  }
  #authGateModal .modal-card, #authPendingModal .modal-card { width: 100%; max-width: 380px; }
  #authGateModal .login-error { display: block; }
  /* Tax Configuration Modal Responsive Adjustments */
  .cfg-dynamic-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
  }
  @media (max-width: 640px) {
    #ulbConfigModal .grid {
      grid-template-columns: 1fr !important;
    }
    #ulbConfigModal .login-field[style*="grid-column: span 2"] {
      grid-column: span 1 !important;
    }
    .cfg-dynamic-row {
      flex-wrap: wrap;
      background: var(--surface-hover);
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
    }
    .cfg-dynamic-row input {
      flex: 1 1 100% !important;
      width: 100% !important;
      height: 38px !important;
      margin-bottom: 4px;
    }
    .cfg-dynamic-row button {
      flex: 1 1 100%;
      height: 38px !important;
      background: rgba(220, 38, 38, 0.1);
      color: var(--danger);
      border-radius: 6px;
    }
  }
  /* App content stays out of the page (not rendered at all) until the person is signed in AND
     has picked a ULB. body.app-ready is added by switchUlb(). */
  body:not(.app-ready) .wrap,
  body:not(.app-ready) #sidebarDrawer,
  body:not(.app-ready) #sidebarOverlay { display: none !important; }


  /* Preload / boot screen. Sits above everything (including the sign-in
     gate) and is the very first thing in <body>, so it paints before the
     Supabase SDKs even start downloading. It stays up until the app's
     first onAuthStateChanged callback resolves (hidePreload(), called from
     that handler), which is the point at which both possible sources of
     delay — GitHub Pages serving the page/assets, and Supabase Auth's
     initial session check — are done. */
  #preloadView {
    position: fixed; inset: 0; z-index: 20010;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px max(24px, env(safe-area-inset-bottom, 0px));
    text-align: center;
    background: radial-gradient(circle at top right, var(--surface), var(--bg) 80%);
    transition: opacity .35s var(--ease);
  }
  #preloadView.hide { opacity: 0; pointer-events: none; }
  #preloadView .pl-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid var(--border); border-top-color: var(--accent);
    animation: pl-spin 0.8s linear infinite;
  }
  @keyframes pl-spin { to { transform: rotate(360deg); } }
  #preloadView .pl-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; }
  #preloadView .pl-status { font-size: 12.5px; color: var(--text-secondary); margin: 0; min-height: 16px; }
  #preloadView .pl-retry {
    display: none; margin-top: 4px; padding: 8px 18px; border-radius: 8px; border: none;
    background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer;
    font-family: inherit;
  }
  #preloadView .pl-retry:hover { background: var(--accent-hover); }


/* ==========================================================================
   PAGES, SECTION BAR, "GO TO" LINKS AND THE DASHBOARD  (used with pages.js)
   ========================================================================== */
.pg-hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* every page except Survey Entry shows only its title bar, the section bar and its own content */
body[data-page]:not([data-page=entry]) #form > *:not(.title-bar):not(.pg-nav) { display: none !important; }
body:not(.app-ready) #pageHome { display: none; }

/* Section bar (Dashboard | Survey Entry | Browse & Reports | ...) */
.pg-nav {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 0 8px; margin: 0 0 12px;
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 10px 10px; box-shadow: var(--shadow-sm);
}
.pg-nav::-webkit-scrollbar { display: none; }
body[data-page=entry] .pg-nav { margin-bottom: 0; border-radius: 0; box-shadow: none; }
.pg-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px;
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
  color: var(--text-secondary); border-bottom: 2.5px solid transparent;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.pg-tab svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.pg-tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.pg-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.pg-tab:focus-visible, .tool-main:focus-visible, .stat-tile:focus-visible, .ward-row:focus-visible,
.recent-row:focus-visible, .pg-jump a:focus-visible, .tool-subs a:focus-visible, .other-card a:focus-visible,
.chip:focus-visible, .btn-primary:focus-visible, .panel-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sidebar entries that are links */
a.sidebar-btn { text-decoration: none; }
a.sidebar-btn.is-current { color: var(--accent); background: var(--accent-glow); }

/* "Go to" strip at the foot of every tool window */
.pg-jump {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; overflow-x: auto; white-space: nowrap;
  padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface-card);
  font-size: 12px; scrollbar-width: thin;
}
.pg-jump > span { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); margin-right: 2px; }
.pg-jump a {
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-primary); font-weight: 600; text-decoration: none;
}
.pg-jump a:hover { border-color: var(--accent); color: var(--accent); }
.modal-card > .pg-jump { margin: 16px -24px -28px; border-radius: 0 0 16px 16px; }

/* Buttons used on the dashboard */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
  border: none; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; box-shadow: 0 2px 4px rgba(2,132,199,.24); transition: background-color .15s var(--ease), transform .1s var(--ease);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary svg { width: 18px; height: 18px; fill: currentColor; }
.btn-big { height: 44px; padding: 0 20px; font-size: 14.5px; }

/* Page and dashboard container */
#pageHome { max-width: 1180px; margin: 4px auto 24px; padding: 0 4px; }
#pageHome .page-title { margin: 6px 0 4px; font-size: 22px; letter-spacing: -.2px; }
#pageHome .page-about { margin: 0 0 18px; color: var(--text-secondary); max-width: 62ch; line-height: 1.5; }
#pageHome h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); }
.dash-muted { margin: 0; color: var(--text-secondary); font-size: 13px; }
.dash-note { margin: 4px 2px 16px; color: var(--text-secondary); font-size: 12.5px; }
.dash-foot { margin: 22px 0 0; text-align: center; }

/* Hero */
.dash-hero {
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between;
  padding: 20px 22px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--accent-glow) 160%); box-shadow: var(--shadow-sm);
}
.dash-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
.dash-hero h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.3px; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dash-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1 1 380px; justify-content: flex-end; }
.dash-search { display: flex; gap: 8px; flex: 1 1 320px; max-width: 560px; }
.dash-search input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; font-size: 14px; border: 1.5px solid var(--border); border-radius: 8px; }
.dash-search select { flex: 0 0 auto; width: auto; min-width: 110px; height: 44px; font-size: 13px; border: 1.5px solid var(--border); border-radius: 8px; }
.dash-search .btn-primary { height: 44px; }
.dash-draft {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding: 10px 14px; border: 1px solid rgba(217,119,6,.45); border-radius: 10px;
  background: rgba(217,119,6,.10); color: var(--warning-hover); font-size: 13px; font-weight: 600;
}
:root[data-theme="dark"] .dash-draft { color: #fbbf24; }
.dash-draft:empty, #dashDraft:empty { display: none; }

/* Key numbers */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 22px; }
.stat-tile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
a.stat-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-secondary); line-height: 1.3; }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 12px; line-height: 1.35; color: var(--text-secondary); }
.stat-tile.tone-warn { border-color: rgba(217,119,6,.5); }
.stat-tile.tone-warn .stat-value { color: var(--warning); }
.stat-tile.tone-danger { border-color: rgba(220,38,38,.5); }
.stat-tile.tone-danger .stat-value { color: var(--danger); }

/* Tool cards */
.tool-group { margin-bottom: 20px; }
.tool-group > h3 { margin-bottom: 8px !important; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.tool-card {
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tool-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.tool-main { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; padding: 14px 14px 12px; text-decoration: none; color: inherit; }
.tool-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--accent-glow); color: var(--accent); }
.tool-icon svg { width: 20px; height: 20px; fill: currentColor; }
.tool-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.tool-text strong { font-size: 14.5px; }
.tool-text small { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.tool-badge { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: rgba(217,119,6,.14); color: var(--warning-hover); font-size: 11px; font-weight: 700; }
.tool-badge[hidden] { display: none; }
:root[data-theme="dark"] .tool-badge { color: #fbbf24; }
.tool-go { align-self: center; color: var(--text-secondary); opacity: 0; transform: translateX(-4px); transition: all .15s var(--ease); }
.tool-go svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.tool-card:hover .tool-go, .tool-main:focus-visible .tool-go { opacity: 1; transform: none; color: var(--accent); }
.tool-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px 64px; }
.tool-subs a { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-decoration: none; background: var(--surface-card); }
.tool-subs a:hover { border-color: var(--accent); color: var(--accent); }

/* Panels */
.dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 12px; align-items: start; }
.dash-panel { padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); height: 100%; }
.dash-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.panel-link { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.panel-link:hover { text-decoration: underline; }
.ward-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.ward-row { display: grid; grid-template-columns: minmax(70px, 110px) 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; }
a.ward-row:hover { background: var(--surface-hover); }
.ward-bar { height: 8px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.ward-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ward-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.ward-row.is-empty { color: var(--text-secondary); }
.ward-row.is-empty .ward-n { font-weight: 500; font-style: italic; }
.health-meter { height: 10px; border-radius: 999px; background: rgba(220,38,38,.18); overflow: hidden; margin-bottom: 10px; }
.health-meter i { display: block; height: 100%; background: var(--success); border-radius: 999px; }
.health-line { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); }
.health-line strong { color: var(--text-primary); }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--border-strong); }
.recent-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.recent-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 12px; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; }
.recent-row:hover { background: var(--surface-hover); }
.recent-id { font-weight: 700; white-space: nowrap; }
.recent-owner { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-when { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.act-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-bottom: 10px; }
.act-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.act-col i { display: block; width: 100%; max-width: 38px; border-radius: 5px 5px 2px 2px; background: var(--accent); min-height: 2px; }
.act-col span { font-size: 11px; color: var(--text-secondary); }
.top-staff { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.top-staff li { display: flex; justify-content: space-between; gap: 10px; }
.top-staff span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }

/* "Elsewhere in PSAM" on the Browse / Tools / Admin pages */
.other-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.other-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.other-main { display: flex; align-items: center; gap: 8px; color: var(--text-primary); text-decoration: none; }
.other-main svg { width: 18px; height: 18px; fill: var(--accent); }
.other-main:hover strong { color: var(--accent); }
.other-card > div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.other-card > div a { font-size: 12.5px; color: var(--text-secondary); text-decoration: none; }
.other-card > div a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
  .dash-hero { padding: 16px; }
  .dash-hero h2 { font-size: 20px; }
  .dash-hero-actions { justify-content: stretch; }
  .dash-search { flex-wrap: wrap; max-width: none; }
  .dash-search input { flex: 1 1 100%; }
  .dash-search select, .dash-search .btn-primary { flex: 1 1 0; }
  .btn-big { width: 100%; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 24px; }
  .dash-panels { grid-template-columns: 1fr; }
  .tool-subs { padding-left: 14px; }
  .tool-go { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stat-tile, .tool-card, .tool-go { transition: none; } a.stat-tile:hover, .btn-primary:hover { transform: none; } }