/* ===================================================================
   Strata AI — Portal Design System
   Module 4, Phase 1.

   Consulting aesthetic: white-dominant, generous whitespace,
   thin borders, minimal colour. DM Sans typography.
   Brand blue from logo, green for success/accents only.
   =================================================================== */


/* ----- Custom Properties -----
   The BASE token values. clean-theme.css redefines every one of them on
   :root, and the portal's page heads (base.html, the signed-out login
   shell, the phone Ask AI page) load it after this file, so on those pages
   these values are overridden. They are live only where portal.css loads
   without the theme: the My Apps frame, by default
   (templates/manager/apps/frame_shell.html). */

:root {
    /* Backgrounds */
    --color-bg:             #ffffff;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f9fafb;
    --color-surface-hover:  #f3f4f6;

    /* Text */
    --color-text:           #111111;
    --color-text-secondary: #4b5563;
    /* 4.56:1 or better on every surface the portal uses — the same value
       clean-theme.css sets (#9ca3af was 2.54:1 on white, and the pages
       that wear ONLY this file — the My Apps frame, the phone assistant,
       the login shell — never saw the theme's override). */
    --color-text-muted:     #646f7f;

    /* Brand (from logo) */
    --color-brand:          #1a7ec5;
    --color-brand-hover:    #1569a8;
    --color-brand-light:    #eff7ff;

    /* Accent — green, used sparingly */
    --color-accent:         #16a34a;
    --color-accent-light:   #f0fdf4;

    /* Semantic */
    --color-danger:         #dc2626;
    --color-danger-light:   #fef2f2;
    --color-warning:        #d97706;
    --color-warning-light:  #fffbeb;
    --color-success:        #16a34a;
    --color-success-light:  #f0fdf4;
    --color-info:           #1a7ec5;
    --color-info-light:     #eff7ff;

    /* Borders */
    --color-border:         #e5e7eb;
    --color-border-light:   #f3f4f6;

    /* Nav */
    --color-nav-bg:         #ffffff;
    --color-nav-border:     #e5e7eb;

    /* Typography */
    --font-sans:            'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:            'DM Mono', 'Menlo', monospace;

    /* Spacing */
    --radius:               0.375rem;
    --radius-sm:            0.25rem;
    --radius-lg:            0.5rem;

    /* Shadows — very subtle */
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.08);
}


/* ----- Reset ----- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}


/* ===================================================================
   Navigation — white bar, thin bottom border, minimal
   =================================================================== */

.nav {
    background: var(--color-nav-bg);
    border-bottom: 1px solid var(--color-nav-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.nav-logo-img {
    width: 1.625rem;
    height: 1.625rem;
}

.nav-logo-text {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.nav-item {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 400;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s;
}

.nav-item:hover {
    color: var(--color-text);
}

.nav-item.active {
    color: var(--color-text);
    font-weight: 500;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-user {
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 400;
}

.nav-role-badge {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.nav-logout {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.nav-logout:hover {
    color: var(--color-text);
}


/* ===================================================================
   Main Content
   =================================================================== */

.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
    min-height: calc(100vh - 3.5rem - 3rem);
}


/* ===================================================================
   Page Header
   =================================================================== */

.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.page-header p {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 400;
}


/* ===================================================================
   Cards
   =================================================================== */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.card-body {
    padding: 1.5rem;
    overflow-wrap: anywhere;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text);
}

.card-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    border-radius: 0 0 12px 12px;
}


/* ===================================================================
   Stat Cards
   =================================================================== */

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.stat-card-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.375rem;
}

.stat-card-value {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.stat-card-value.positive { color: var(--color-success); }
.stat-card-value.negative { color: var(--color-danger); }
.stat-card-value.warning  { color: var(--color-warning); }


/* ===================================================================
   Tables
   =================================================================== */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table th {
    text-align: left;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
    vertical-align: middle;
    /* Long LLM/user text wraps within its column rather than widening the
       table past its card; a single long token is force-broken. */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.table tbody tr:hover {
    background: var(--color-surface-alt);
}

.table .text-right {
    text-align: right;
}

.table .text-mono {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}


/* ===================================================================
   Buttons — outline-first, minimal fills
   =================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    background: transparent;
    color: var(--color-text);
}

.btn:hover {
    border-color: var(--color-text);
}

.btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #ffffff;
}
.btn-primary:hover {
    background: #333333;
    border-color: #333333;
}

.btn-brand {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #ffffff;
}
.btn-brand:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

.btn-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: transparent;
}
.btn-danger:hover {
    background: var(--color-danger);
    color: #ffffff;
}

.btn-ghost {
    border-color: transparent;
    color: var(--color-text-secondary);
}
.btn-ghost:hover {
    color: var(--color-text);
    background: var(--color-surface-alt);
}

.btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
}

.btn-full {
    width: 100%;
}


/* ===================================================================
   Badges
   =================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* Safe-truncating badge for variable (LLM/user) text — pairs with a title attr
   for the full value. Badges are nowrap by design, so any badge holding
   arbitrary text must use this to avoid overflowing its frame. */
.badge-truncate {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.badge-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.badge-info {
    background: var(--color-info-light);
    color: var(--color-info);
}

.badge-muted {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
}

/* An amount the manager has overridden from the AI's projection. Subtly marked
   (faint tint + left accent bar) so it reads differently from an untouched
   editable cell, without breaking the consulting table style. */
.table td.cell-edited {
    background: var(--color-accent-light) !important;
    box-shadow: inset 3px 0 0 0 var(--color-accent);
}

/* Editable amount cells: make it obvious a human can type here — a text cursor,
   an input-like underline, and a clear hover/focus highlight. Edited (locked)
   cells keep their green left-bar via .cell-edited. */
.table td.budget-amount {
    cursor: text;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.table td.budget-amount:not(.cell-edited) {
    box-shadow: inset 0 -1px 0 0 var(--color-border);
}
.table td.budget-amount:not(.cell-edited):hover {
    background: var(--color-accent-light) !important;
    box-shadow: inset 0 -2px 0 0 var(--color-accent);
}
.table td.budget-amount:focus {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 2px var(--color-accent);
    border-radius: 4px;
    outline: none;
}


/* ===================================================================
   Alerts / Flash Messages
   =================================================================== */

.flash-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem 0;
}

.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    border: 1px solid;
}

.alert-error {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border-color: #fecaca;
}

.alert-info {
    background: var(--color-info-light);
    color: var(--color-info);
    border-color: #bfdbfe;
}

.alert-success {
    background: var(--color-success-light);
    color: var(--color-success);
    border-color: #bbf7d0;
}

.alert-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border-color: #fde68a;
}

.alert-dismiss {
    background: none;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0 0.25rem;
    line-height: 1;
}
.alert-dismiss:hover {
    opacity: 1;
}


/* ===================================================================
   Forms
   =================================================================== */

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-text);
}

/* THE RULE: a text-entry control carries its own focus treatment — brand
   border plus a low-alpha glow — and suppresses the outline ring, which is
   for buttons, links and tabs (clean-theme.css:87 states the same rule for
   bare controls). This is the ONE place that treatment is written. It used
   to be four near-copies, three of them with the brand colour hardcoded as
   #2c6fb0 while the fourth used the token; adding a grid should extend this
   selector list, never restate the declarations. */
.owner-roll-table input[type="text"]:focus,
.owner-roll-table input[type="email"]:focus,
.owner-roll-table textarea:focus,
.lot-field input:focus,
.owner-subtable input:focus,
.owner-subtable textarea:focus,
.opening-balance-input input:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

textarea.form-input {
    min-height: 6rem;
    resize: vertical;
}

select.form-input {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 12px 8px;
}

select.form-input:hover { border-color: var(--color-text-muted); }


/* ===================================================================
   Vocab autocomplete — Phase B Step 8 (v2.4)

   Custom JS dropdown component for inputs with data-vocab attribute.
   Replaces the v2.3 native <datalist> approach so the dropdown:
     - Always shows ALL options on focus/click (regardless of value)
     - Uses portal typography (DM Sans) and brand-blue hover
     - Breaks out of narrow table cells (position: fixed)

   The vocab_autocomplete.js component reads vocabularies from
   window.STRATA_VOCAB (populated by _vocab.html partial) and renders
   the dropdown defined here.

   Chevron colours use existing design tokens:
     muted (#9ca3af) — default
     text  (#111111) — hover
     brand (#1a7ec5) — focus
   =================================================================== */

/* Input chevron — visual cue that the field is a dropdown */
input[data-vocab] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 4.5 6 7.5 9 4.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 12px 12px;
    padding-right: 1.875rem;
    cursor: pointer;
}

input[data-vocab]:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 4.5 6 7.5 9 4.5'/></svg>");
}

input[data-vocab]:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231a7ec5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 4.5 6 7.5 9 4.5'/></svg>");
}

/* Nested table rows — tighter cells, trim chevron spacing */
.row-input[data-vocab] {
    background-position: right 0.5rem center;
    padding-right: 1.5rem;
}

/* The dropdown popup — positioned via JS (position: fixed) so it can
   float above narrow table cells and other containers. */
.vocab-dropdown {
    position: fixed;
    z-index: 1000;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    padding: 0.25rem 0;
    min-width: 220px;
}

.vocab-dropdown-item {
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    color: var(--color-text);
    line-height: 1.4;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.vocab-dropdown-item:hover {
    background: var(--color-brand-light);
    color: var(--color-brand);
}

/* Bolded items match what the user has typed (prefix match) */
.vocab-dropdown-item-match {
    font-weight: 500;
}

/* Keyboard-highlighted item (arrow keys, or auto-highlight of first match) */
.vocab-dropdown-item-highlighted {
    background: var(--color-brand-light);
    color: var(--color-brand);
}


/* ===================================================================
   Custom select — styled trigger over a hidden native <select>.
   custom_select.js enhances every <select class="form-input"> so the
   option list uses the .vocab-dropdown popup above instead of the
   OS-native popup. The real <select> stays for form submit + validation.
   =================================================================== */
.custom-select {
    position: relative;
    display: block;
}

.custom-select > select.form-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

.custom-select-trigger {
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    padding-right: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* same chevron as select.form-input */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 12px 8px;
}

.custom-select-trigger:hover { border-color: var(--color-text-muted); }
.custom-select-trigger:focus { outline: none; border-color: var(--color-text); }

.vocab-dropdown-item-disabled:hover {
    background: transparent;
    color: var(--color-text);
}


/* ===================================================================
   Tabs
   =================================================================== */

.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2rem;
}

.tab-item {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    padding: 0.625rem 1rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.tab-item:hover {
    color: var(--color-text);
}

.tab-item.active {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
    font-weight: 500;
}


/* ===================================================================
   Breadcrumbs
   =================================================================== */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--color-text);
}

.breadcrumb-sep::before {
    content: '/';
    color: var(--color-border);
}

.breadcrumb-current {
    color: var(--color-text);
    font-weight: 500;
}


/* ===================================================================
   Grid Layouts
   =================================================================== */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

/* Responsive stacking so the multi-column grids don't overflow on narrow
   screens: 5-up → 3-up → 1-up; 4-up → 2-up → 1-up; 2/3-up → 1-up.

   This is the ONLY place the .grid-* breakpoints are set. The Responsive
   section further down used to restate them at different widths; because
   it came later in the file it won every overlap, so .grid-3 and .grid-4
   never reached one column above 480px and the ladder above described a
   layout the portal did not have. One ladder now, and each step is at
   least as narrow as the wider of the two it replaces. */
@media (max-width: 1024px) {
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

.sidebar-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
}


/* ===================================================================
   Utilities
   =================================================================== */

.text-muted   { color: var(--color-text-muted); }
.text-mono    { font-family: var(--font-mono); font-size: 0.8125rem; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-sm      { font-size: 0.8125rem; }
.text-xs      { font-size: 0.75rem; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1      { gap: 0.5rem; }
.gap-2      { gap: 1rem; }
.gap-3      { gap: 1.5rem; }


/* ===================================================================
   HTMX Loading Indicators
   =================================================================== */

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

.spinner {
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--color-border);
    border-top-color: var(--color-text);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ===================================================================
   Login Page
   =================================================================== */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg);
}

.login-card {
    width: 100%;
    max-width: 360px;
    padding: 2rem 0;
}

.login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.login-logo {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.login-title {
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
}

.login-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
    font-weight: 400;
}

.login-flash {
    margin-bottom: 1rem;
}

.login-form {
    margin-top: 0.5rem;
}

.login-form .form-group {
    margin-bottom: 1rem;
}

.login-form .btn {
    margin-top: 0.75rem;
}

.login-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
}


/* ===================================================================
   Error Pages
   =================================================================== */

.error-page {
    text-align: center;
    padding: 6rem 1rem;
}

.error-code {
    font-size: 3rem;
    font-weight: 300;
    color: var(--color-text-muted);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.error-message {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    font-weight: 400;
    margin-bottom: 2rem;
}


/* ===================================================================
   Footer — minimal
   =================================================================== */

.footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.footer-sep {
    margin: 0 0.5rem;
}


/* ===================================================================
   Wizard — onboarding (Step 2 of portal-driven onboarding, May 2026)
   =================================================================== */

/* The 4-step horizontal progress bar at the top of each step page */
.wizard-progress {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.25rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.wizard-step-circle {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.wizard-step.current .wizard-step-circle {
    background: var(--color-brand);
    color: #ffffff;
    border-color: var(--color-brand);
}

.wizard-step.complete .wizard-step-circle {
    background: var(--color-success);
    color: #ffffff;
    border-color: var(--color-success);
}

.wizard-step.complete.current .wizard-step-circle {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.wizard-step-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.wizard-step.current .wizard-step-label,
.wizard-step.complete .wizard-step-label {
    color: var(--color-text);
}

.wizard-step-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    margin: 0 0.75rem;
    margin-bottom: 1.25rem;
}

.wizard-step-line.complete {
    background: var(--color-success);
}


/* Opening-balance candidate cards (Screen 2) */
.candidate-card {
    display: block;
    cursor: pointer;
    margin-bottom: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.candidate-card:hover {
    border-color: var(--color-text-secondary);
}

.candidate-card.selected {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 1px var(--color-brand);
}

.candidate-card-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.candidate-card-body {
    padding: 1.25rem 1.5rem;
}

.candidate-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-brand-light);
    color: var(--color-brand);
    flex-shrink: 0;
}

.candidate-score-value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.candidate-score-label {
    font-size: 0.5625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

.score-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
}

.score-pill strong {
    font-weight: 600;
    color: var(--color-text);
    margin-left: 0.125rem;
}


/* ===================================================================
   Records Editor — Step 2.5 (May 2026)
   Editable row table for balance_sheet_rows JSONB array
   =================================================================== */

.row-editor {
    display: grid;
    grid-template-columns: 130px 90px 1fr 130px 32px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border-light);
}

.row-editor.row-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
}

.row-editor .form-input {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

.row-editor select.form-input {
    padding-right: 1.5rem;
}

.row-totals {
    font-size: 0.875rem;
    color: var(--color-text);
}


/* ===================================================================
   Responsive
   =================================================================== */

/* Frame only — the .grid-* ladder lives with the grid definitions above. */
@media (max-width: 1024px) {
    .sidebar-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-inner { padding: 0 1rem; }
    .main-content { padding: 1.5rem 1rem 2rem; }

    .nav-user { display: none; }
}

@media (max-width: 480px) {
    .login-card { margin: 0 1.5rem; }
    .stat-card-value { font-size: 1.25rem; }
}

/* ===================================================================
   Owner-roll editable table — Phase A Step 3
   =================================================================== */

/* Outer container */
.owner-roll-table-wrap {
  margin: 1.5rem 0;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 0.5rem;
}

/* The table itself */
.owner-roll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
}

.owner-roll-table thead th {
  background: #fafafa;
  border-bottom: 1px solid #e5e5e5;
  padding: 0.5rem 0.4rem;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
  white-space: nowrap;
  vertical-align: bottom;
}

.owner-roll-table tbody td {
  padding: 0.4rem;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

/* Column widths — designed for laptop display, scrolls horizontally on narrow */
.owner-roll-table .col-lot       { width: 4em;   min-width: 4em; }
.owner-roll-table .col-unit      { width: 5em;   min-width: 5em; }
.owner-roll-table .col-owner     { width: 14em;  min-width: 14em; }
.owner-roll-table .col-email     { width: 14em;  min-width: 14em; }
.owner-roll-table .col-phone     { width: 8em;   min-width: 8em; }
.owner-roll-table .col-postal    { width: 16em;  min-width: 16em; }
.owner-roll-table .col-entitle   { width: 6em;   min-width: 6em;   text-align: right; }
.owner-roll-table .col-stratapay { width: 9em;   min-width: 9em; }
.owner-roll-table .col-actions   { width: 2em;   min-width: 2em; }

/* Form inputs inside cells */
.owner-roll-table input[type="text"],
.owner-roll-table input[type="email"],
.owner-roll-table textarea {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
}

.owner-roll-table .input-mono {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 12px;
}

.owner-roll-table .input-narrow {
  text-align: right;
}

.owner-roll-table textarea {
  resize: vertical;
  min-height: 2.2em;
  line-height: 1.3;
}

/* Provenance caption under a populated field */
.owner-roll-table .source-caption {
  font-size: 10px;
  color: #6e6e6e;
  margin-top: 0.2rem;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

/* Remove-row button */
.owner-roll-table .btn-remove-row {
  background: transparent;
  border: 1px solid #ddd;
  color: #6e6e6e;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.owner-roll-table .btn-remove-row:hover {
  background: #c4453d;
  color: #fff;
  border-color: #c4453d;
}

/* Add-row button */
.btn-add-row {
  margin-top: 0.75rem;
  font-size: 13px;
  padding: 0.4rem 0.9rem;
}

/* ----------------------------------------------------------------------- */
/* Lot-block owner roll (multiple owners per lot — joint owners)           */
/* Each lot is a card with lot-level fields once, plus a sub-table of      */
/* owner rows so a lot can carry several joint owners.                     */
/* ----------------------------------------------------------------------- */
.owner-roll-lots {
  margin: 1.5rem 0;
  font-family: 'DM Sans', sans-serif;
}

.lot-block {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fff;
  padding: 0.75rem 0.9rem 0.9rem;
  margin-bottom: 1rem;
}

.lot-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #f0f0f0;
}

.lot-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.lot-field label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6e6e6e;
}

.lot-field input {
  padding: 0.3rem 0.4rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
}

.lot-field .input-mono {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 12px;
}

.lot-field .input-lot      { width: 4.5em; }
.lot-field .input-unit     { width: 4.5em; }
.lot-field .input-entitle  { width: 5em; text-align: right; }
.lot-field .input-stratapay{ width: 8em; }
.lot-field .input-opening  { width: 9em; text-align: right; }

.btn-remove-lot {
  margin-left: auto;
  background: transparent;
  border: 1px solid #e0c4c2;
  color: #ae534c;
  font-size: 12px;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-remove-lot:hover {
  background: #c4453d;
  color: #fff;
  border-color: #c4453d;
}

/* Owner sub-table inside a lot block */
.owner-subtable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 13px;
}

.owner-subtable thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6e6e6e;
  padding: 0.2rem 0.4rem;
  white-space: nowrap;
}

.owner-subtable tbody td {
  padding: 0.3rem 0.4rem;
  vertical-align: top;
}

.owner-subtable .col-owner   { width: 16em; }
.owner-subtable .col-email   { width: 15em; }
.owner-subtable .col-phone   { width: 9em; }
.owner-subtable .col-postal  { width: 16em; }
.owner-subtable .col-owner-actions { width: 2em; }

.owner-subtable input[type="text"],
.owner-subtable input[type="email"],
.owner-subtable textarea {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
}

.owner-subtable textarea {
  resize: vertical;
  min-height: 2.2em;
  line-height: 1.3;
}

.owner-primary-tag {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2c6fb0;
  background: #eaf2fa;
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
}

.btn-remove-owner {
  background: transparent;
  border: 1px solid #ddd;
  color: #6e6e6e;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 3px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.btn-remove-owner:hover {
  background: #c4453d;
  color: #fff;
  border-color: #c4453d;
}

.btn-add-owner {
  margin-top: 0.5rem;
  background: transparent;
  border: 1px dashed #c9c9c9;
  color: #2c6fb0;
  font-size: 12px;
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-add-owner:hover {
  border-color: #2c6fb0;
  background: #f4f8fc;
}

/* Wizard subtitle (used by step3 header) */
.wizard-subtitle {
  color: #666;
  margin-top: 0.25rem;
  font-size: 14px;
}

.wizard-header {
  margin: 1.5rem 0 1rem 0;
}

/* Info banner at top of Step 3 */
.info-banner .card-body p {
  margin: 0 0 0.5rem 0;
}
.info-banner .card-body p:last-child {
  margin-bottom: 0;
}
.info-banner .small {
  font-size: 12px;
}
.info-banner .text-muted {
  color: #666;
}

/* Wizard action buttons strip at bottom */
.wizard-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

/* ===========================================================================
 * Opening balance wizard (Step 2 v2 — preset checklist, May 2026)
 * ========================================================================= */

/* Grid: label on left, amount input on right, fixed two-column layout */
.opening-balance-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.opening-balance-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-light, #f0f0f0);
}

.opening-balance-row:last-child {
  border-bottom: none;
}

.opening-balance-label {
  font-size: 0.875rem;
  line-height: 1.4;
}

.opening-balance-label .source-caption {
  margin-top: 0.125rem;
  font-style: italic;
}

.opening-balance-label .source-caption.manual-entry {
  color: #666f7f;
}

.opening-balance-input input {
  text-align: right;
  font-family: var(--font-mono, "DM Mono", monospace);
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
}

/* Sticky reconciliation strip — stays in view as the manager scrolls
 * through long lot-receivable / creditor sections. */
.opening-balance-reconciliation {
  position: sticky;
  bottom: 1rem;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  background: var(--color-bg, #fff);
}

/* -- Step 2 v2 additions (May 2026 — preset checklist v2) ----------------- */

/* Account-code pill shown next to each row label */
.acct-code-pill {
  display: inline-block;
  font-family: var(--font-mono, "DM Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.0625rem 0.375rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 3px;
  color: var(--color-text-muted, #6b7280);
  margin-right: 0.375rem;
  vertical-align: 1px;
}

/* Locked row (per-lot summary from Step 2 — read-only) */
.opening-balance-row.locked {
  background: var(--color-surface-alt);
  opacity: 0.85;
}

.opening-balance-row.locked .opening-balance-label {
  color: var(--color-text-muted, #4b5563);
}

/* "Add item" button row */
.add-item-row {
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border-light, #e5e7eb);
  margin-top: 0.5rem;
}

.add-item-btn {
  color: var(--color-brand);
}

/* Added rows match preset row layout exactly — no orange highlight, just a
 * subtle dashed top border to suggest "this is a manual addition". */
.opening-balance-row.added-row {
  background: transparent;
  padding-left: 0;
  border-left: none;
  border-top: 1px dashed var(--color-border-light, #e5e7eb);
}

.added-label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Inline account picker — styled small and unobtrusive, like the code pill */
.added-account-picker {
  font-family: var(--font-mono, "DM Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.1875rem 1.25rem 0.1875rem 0.5rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 3px;
  color: var(--color-text, #1f2937);
  cursor: pointer;
  max-width: 360px;
  min-width: 220px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.375rem center;
}

/* Optgroup label styled subtly */
.added-account-picker optgroup {
  font-weight: 600;
  font-style: normal;
  color: var(--color-text-muted, #6b7280);
}

.added-account-picker option {
  font-weight: normal;
  color: var(--color-text, #1f2937);
}

.added-account-picker:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

.added-account-picker:hover {
  border-color: var(--color-text-muted, #9ca3af);
}

/* Inline description input — looks like text, becomes a field on focus */
.added-description-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--color-text, #1f2937);
  border-radius: 3px;
  transition: border-color 0.15s, background 0.15s;
}

.added-description-input:hover {
  border-color: var(--color-border-light, #e5e7eb);
  background: var(--color-surface-alt);
}

.added-description-input:focus {
  outline: none;
  border-color: var(--color-brand);
  background: white;
}

/* Right column: value input + tiny remove button inline */
.added-input {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.btn-remove-inline {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #9ca3af);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.375rem;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}

.btn-remove-inline:hover {
  color: var(--color-danger, #dc2626);
  background: var(--color-surface-alt);
}

/* Owner roll opening balance column */
.col-opening-balance {
  width: 110px;
  text-align: right;
}

.opening-balance-input {
  text-align: right;
}

/* ===========================================================================
 * Owner roll table — v2 (May 2026)
 *
 * Adds column grouping, row striping, highlighted Opening Balance column,
 * subtle placeholders, and an unobtrusive remove button. Layered on top of
 * the existing .owner-roll-table rules — the v2 class additively overrides.
 * ========================================================================= */

/* Top info line replaces the heavy info-banner card */
.owner-roll-info {
  margin: 0.5rem 0 1rem;
  font-size: 0.875rem;
  color: var(--color-text, #1f2937);
}

.owner-roll-info strong {
  color: var(--color-text, #1f2937);
}

/* Header: a touch more vertical breathing room */
.owner-roll-table-v2 thead th {
  padding: 0.625rem 0.5rem 0.5rem;
  vertical-align: bottom;
  background: var(--color-surface-alt);
}

/* Cell padding and middle-vertical alignment for cleaner rows */
.owner-roll-table-v2 tbody td {
  padding: 0.5rem 0.5rem;
  vertical-align: middle;
}

/* Visual group dividers — subtle vertical line at end of each group */
.owner-roll-table-v2 .grp-identity.grp-last,
.owner-roll-table-v2 .grp-contact.grp-last {
  border-right: 1px solid var(--color-border-light, #ececec);
}

/* Opening balance column — tinted background so it visually owns this step */
.owner-roll-table-v2 thead .opening-balance-col,
.owner-roll-table-v2 tbody .opening-balance-col {
  background: #f5f8fb;
}

.owner-roll-table-v2 tbody tr:hover .opening-balance-col {
  background: #ecf2f8;
}

/* Subtle row striping for readability */
.owner-roll-table-v2 tbody tr:nth-child(even) > td:not(.opening-balance-col) {
  background: #fbfbfb;
}

.owner-roll-table-v2 tbody tr:nth-child(even) > td.opening-balance-col {
  background: #eef2f7;   /* slightly darker tint for stripe + highlight combo */
}

/* Hover state for whole rows */
.owner-roll-table-v2 tbody tr:hover > td:not(.opening-balance-col) {
  background: #f4f6f9;
}

/* Placeholder text: greyer + smaller + italic so it doesn't look like real data */
.owner-roll-table-v2 input::placeholder,
.owner-roll-table-v2 textarea::placeholder {
  color: #6e6e6e;
  font-style: italic;
  opacity: 1;
}

/* Refined column widths — tighter than before */
.owner-roll-table-v2 .col-lot       { width: 3em;    min-width: 3em; }
.owner-roll-table-v2 .col-unit      { width: 4em;    min-width: 4em; }
.owner-roll-table-v2 .col-owner     { width: 12em;   min-width: 11em; }
.owner-roll-table-v2 .col-email     { width: 13em;   min-width: 12em; }
.owner-roll-table-v2 .col-phone     { width: 8em;    min-width: 7em; }
.owner-roll-table-v2 .col-postal    { width: 13em;   min-width: 12em; }
.owner-roll-table-v2 .col-entitle   { width: 4.5em;  min-width: 4em;   text-align: right; }
.owner-roll-table-v2 .col-stratapay { width: 6.5em;  min-width: 6em; }
.owner-roll-table-v2 .col-opening-balance { width: 9em; min-width: 8em; text-align: right; }
.owner-roll-table-v2 .col-actions   { width: 2em;    min-width: 2em; }

/* Right-align the opening balance heading text */
.owner-roll-table-v2 thead .col-opening-balance {
  text-align: right;
}

/* The opening balance input itself — slightly emphasized */
.owner-roll-table-v2 .opening-balance-input {
  font-weight: 500;
  background: #fff;
  border-color: var(--color-border-light, #d8e0ea);
  padding-right: 0.6rem;   /* not 1.2rem — no spinner means no need to reserve space */
}

.owner-roll-table-v2 .opening-balance-input:focus {
  border-color: var(--color-brand);
  background: #fff;
}

/* ===========================================================================
 * Hide native number-input spinners — portal-wide
 *
 * The up/down arrow controls on type="number" inputs are visually noisy and
 * not useful for typing money values. Hide them everywhere in the portal.
 * Type stays "number" so we keep numeric keyboards on mobile + browser
 * validation; only the spinner UI is suppressed.
 *
 * This is the ONLY spinner rule. The opening-balance screens had a second
 * copy naming their own classes; every element it reached is an
 * input[type="number"], so it repeated this and nothing more.
 * ========================================================================= */
input[type="number"] {
  -moz-appearance: textfield;        /* Firefox */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;          /* Chrome, Safari, Edge, modern WebKit */
  margin: 0;
}

/* Remove button — much more subtle than the v1 hovering red button */
.owner-roll-table-v2 .col-remove-cell {
  padding-right: 0.25rem;
}

.owner-roll-table-v2 .btn-remove-row {
  background: transparent;
  border: none;
  color: #6e6e6e;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}

.owner-roll-table-v2 .btn-remove-row:hover {
  color: #c2433b;
  background: transparent;
  border: none;
}

/* Source caption styles from v1 still defined but rendering is gone in v2;
 * no rule needed to "hide" them — the template no longer emits them. */

/* ───────────────────────────────────────────────────────────────────────────
   Maintenance request cards — collapsible (progressive disclosure).
   Each request is a <details class="mx-req">; .mx-active marks one needing
   action. Replaces the browser's default disclosure triangle with a thin
   chevron, a quiet hover, and a slim status-coloured left edge.
   ─────────────────────────────────────────────────────────────────────────── */
.mx-req > summary {
    list-style: none;
    position: relative;
    cursor: pointer;
    padding: 0.9rem 1.1rem 0.9rem 2.4rem;
    box-shadow: inset 3px 0 0 var(--color-border);   /* finished / default edge */
    transition: background 0.12s ease;
}
.mx-req > summary::-webkit-details-marker { display: none; }
.mx-req > summary::before {                           /* the chevron */
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: rotate(-45deg);                        /* points right when closed */
    transition: transform 0.15s ease, border-color 0.12s ease;
}
.mx-req[open] > summary::before {
    transform: rotate(45deg);                         /* rotates down when open */
    border-color: var(--color-text-secondary);
}
.mx-req > summary:hover { background: var(--color-surface-hover); }
.mx-req > summary:hover::before { border-color: var(--color-text-secondary); }
.mx-req.mx-active > summary { box-shadow: inset 3px 0 0 var(--color-brand); }  /* active edge */

/* AGM workflow stepper (budget-workspace AGM tracker) */
.agm-stepper { margin: 0.25rem 0; }
.agm-step { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.agm-step:last-child { padding-bottom: 0; }
.agm-step:not(:last-child)::before {
    content: ""; position: absolute; left: 13px; top: 28px; bottom: 0;
    width: 1.5px; background: var(--color-border);
}
.agm-dot {
    width: 27px; height: 27px; border-radius: 50%; flex: 0 0 27px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; line-height: 1; z-index: 1;
    background: var(--color-surface-alt); border: 1.5px solid var(--color-border);
    color: var(--color-text-muted);
}
.agm-dot--done { background: var(--color-success-light); border-color: transparent; color: var(--color-success); }
.agm-dot--late { background: var(--color-warning-light); border-color: transparent; color: var(--color-warning); }
.agm-dot--current { background: var(--color-accent-light); border-color: transparent; color: var(--color-accent); }
.agm-step__label { font-size: 0.9rem; font-weight: 500; color: var(--color-text); }
.agm-step__sub { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 1px; }
.agm-step--upcoming .agm-step__label { color: var(--color-text-secondary); font-weight: 400; }
.agm-step__late { font-size: 0.75rem; color: var(--color-warning); margin-left: 4px; font-weight: 400; }


/* ===================================================================
   Summary rows and section headings
   =================================================================== */

/* ONE base rule for the clickable summary row — title, grey meta line,
   blue "Open" arrow, hover tint, divider — and the section heading above
   it. The dashboard's portfolio rows, the email screens' linked records
   and the Correspondence tab's head all draw it.

   THE DEFECT: this rule was typed twice — dashboard.html's head block and
   again in manager/email/_styles.html, the second copy only so that
   clean-theme.css's lifts (.dash-row / .dash-rtitle / .dash-go /
   .dash-sechead) would reach the email pages by the same name. The email
   copy is injected into the HTMX-swapped Correspondence tab AFTER the
   theme has loaded, which is the wrong side of it: a .dash-row added to
   that tab would have lost the theme's lift with nothing to say so.

   Here the rule sits before every page head block and before the theme,
   so the theme still wins and every screen that draws the row reads one
   base. */
.dash-row {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none; color: inherit;
    transition: background 0.12s;
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--color-surface-alt); }
.dash-rtitle { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.dash-rmeta { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.05rem; }
.dash-go {
    margin-left: auto; font-size: 0.8125rem; color: var(--color-brand);
    display: flex; align-items: center; gap: 0.25rem; white-space: nowrap;
}
.dash-go svg { width: 14px; height: 14px; }
.dash-sechead {
    font-size: 0.875rem; font-weight: 500; color: var(--color-text);
    margin: 1.5rem 0 0.75rem; display: flex; align-items: baseline; gap: 0.5rem;
}
.dash-sechead .sub { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 400; }