/* ============================================================================
   Copia Resources — Client Portal
   portal.css : the single source of truth for shared styling.

   Load order (see app.html): Bootstrap 5.3 -> Bootstrap Icons -> Google Fonts
   -> portal.css. Because this file loads last, its rules win over Bootstrap at
   equal specificity — that is intentional; it is how we theme Bootstrap without
   SASS or new dependencies.

   RULES (non-negotiable):
   - The only colors permitted in the app are the tokens in :root below.
     No hex/rgb literals in templates. #28a745 / #f5f7fa / #e2e6ea are banned.
   - --money (amber) may ONLY appear on invoice/billing UI.
   - --info-blue may ONLY appear as Multi-Family property-type coding.
   - Every border-radius is one of --radius-sm/md/lg/pill (8/12/16/999).
   - Currency and any column of numbers uses tabular-nums (.money / .tnum).
============================================================================ */

/* ---------------------------------------------------------------------------
   1. Design tokens — the only colors, radii, shadows and spacing allowed
--------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ink:            #12291f;   /* deep evergreen — sidebar bg, headings, primary text */
  --ink-soft:       #2e4a3c;   /* secondary evergreen — hover states in sidebar */
  --green:          #1b8f52;   /* THE action color — buttons, links, active states */
  --green-dark:     #137143;   /* button hover */
  --green-tint:     #e8f5ee;   /* selected/active backgrounds, success tints */

  /* Surfaces */
  --bg:             #f6f8f6;   /* page background (faint green-tinted) */
  --surface:        #ffffff;   /* cards, sidebar-inverse content */
  --border:         #e3e8e4;   /* ALL borders and dividers */

  /* Text */
  --text:           #1f2a24;   /* body text */
  --text-soft:      #5f6f66;   /* secondary text */
  --text-faint:     #9aa8a0;   /* placeholders, disabled */

  /* Semantic accents — use ONLY for their meaning */
  --money:          #b45309;   /* billing/invoices ONLY */
  --money-tint:     #fdf6ec;
  --info-blue:      #0d6efd;   /* Multi-Family property-type coding ONLY */
  --info-blue-tint: #e7f1ff;
  --danger:         #dc3545;
  --danger-tint:    #fdecee;

  /* Visit sources — the "Last Time at Property" check-in vs GPS comparison ONLY.
     Aliases, not new colors, so this stays inside the existing palette. GPS is
     the deep evergreen rather than green/amber/red on purpose: a second data
     series must not read as success, money or alarm, it is just a different
     way of observing the same visit. */
  --visit-checkin:  var(--info-blue);
  --visit-gps:      var(--ink-soft);

  /* Radius scale — no other values permitted */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* Shadows — exactly two levels */
  --shadow-card:  0 1px 3px rgba(18,41,31,0.06), 0 1px 2px rgba(18,41,31,0.04);
  --shadow-float: 0 8px 24px rgba(18,41,31,0.12);

  /* Spacing rhythm — multiples of 4 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* Layout constants */
  --sidebar-w:  240px;
  --topbar-h:   56px;
  --content-max: 1280px;

  /* Bootstrap theming hooks (so any stray Bootstrap component picks up brand) */
  --bs-primary: var(--green);
  --bs-link-color: var(--green);
  --bs-link-hover-color: var(--green-dark);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--border);
  --bs-focus-ring-color: rgba(27,143,82,0.25);
}

/* ---------------------------------------------------------------------------
   2. Reset & base
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  color: var(--ink);
  margin: 0;
}

img { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--border); opacity: 1; }

/* Visible keyboard focus everywhere (inputs opt out — they use a ring, below) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   3. Typography helpers
--------------------------------------------------------------------------- */
.page-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.card-title,
.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0;
}

.eyebrow,
.section-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin: 0;
}

.text-meta,
.meta { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.8rem; color: var(--text-soft); }
.text-soft  { color: var(--text-soft); }
.text-faint { color: var(--text-faint); }
.text-ink   { color: var(--ink); }

/* Tabular numerals — REQUIRED on all currency & any column of numbers */
.money, .tnum, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.money { font-weight: 500; }

/* ---------------------------------------------------------------------------
   4. App shell — the unified evergreen sidebar layout
--------------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }

/* Two classes to match (and beat on source order) Bootstrap's own
   .offcanvas.offcanvas-start compound selector, which also sets `width` at
   the same (0,2,0) specificity — a plain `.app-sidebar` single-class rule
   loses that fight and the sidebar renders at Bootstrap's 400px default. */
.app-sidebar.offcanvas {
  width: var(--sidebar-w);
  background-color: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* Brand / logo block at top of sidebar */
.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px 24px 24px;
  flex-shrink: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.sidebar-collapse-toggle {
  display: none;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.sidebar-collapse-toggle:hover { background: var(--ink-soft); color: #fff; }
.sidebar-brand img { width: 30px; height: 30px; object-fit: contain; }
.sidebar-brand .brand-word {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.1;
}

/* Scrolling nav region */
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: var(--radius-pill); }

.nav-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.45);
  padding: 16px 14px 6px;
}

/* Top-level nav item — pill */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.72);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav-item > i { font-size: 1rem; flex-shrink: 0; }
.nav-item .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background-color: var(--ink-soft); color: #fff; }
.nav-item:focus-visible { outline-offset: -2px; }
.nav-item.active { background-color: var(--green); color: #fff; font-weight: 600; }
.nav-item.active:hover { background-color: var(--green); }

/* Count bubble */
.nav-count {
  margin-left: auto;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
}
.nav-item.active .nav-count { background: rgba(255,255,255,0.25); }

/* Property-type dot */
.prop-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex-shrink: 0; }
.prop-dot--d2d   { background: var(--green); }
.prop-dot--mf    { background: var(--info-blue); }
.prop-dot--other { background: var(--text-faint); }
/* keep the dot legible when the item is active (green fill) */
.nav-item.active .prop-dot { box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }

/* Hide empty count bubbles (JS fills them; empty = nothing to show) */
.nav-count:empty { display: none; }

/* Contextual property sub-nav (indented group under active property) */
.nav-subnav { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; }
.nav-subgroup-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 4px 42px;
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}
.nav-subgroup-label .nav-count { margin-left: 0; }
.nav-subitem--deep { padding-left: 54px; }
.nav-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 14px 7px 42px;
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav-subitem > i { font-size: 0.9rem; flex-shrink: 0; }
.nav-subitem .nav-label { flex: 1 1 auto; }
.nav-subitem:hover { background-color: var(--ink-soft); color: #fff; }
.nav-subitem.active { color: #fff; font-weight: 600; background: rgba(255,255,255,0.08); box-shadow: inset 3px 0 0 var(--green); }

/* Pinned footer: user identity + sign out */
.sidebar-footer {
  flex-shrink: 0;
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.sidebar-user { padding: 4px 12px 12px; }
.sidebar-user-name { color: #fff; font-size: 0.85rem; font-weight: 500; line-height: 1.3; }
.sidebar-user-email { color: rgba(255,255,255,0.5); font-size: 0.75rem; word-break: break-word; }

.nav-signout {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.72);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.nav-signout > i { font-size: 1rem; }
.nav-signout:hover { background-color: var(--danger-tint); color: var(--danger); }

/* Main content column */
.app-main {
  min-height: 100vh;
  background-color: var(--bg);
}
.content-area {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6);
}

/* Mobile top bar (hidden on desktop) */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  z-index: 1035;
}
.mobile-topbar .brand-word {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.mobile-topbar img { width: 26px; height: 26px; object-fit: contain; }
.hamburger {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--ink); font-size: 1.4rem; cursor: pointer;
}
.hamburger:hover { background: var(--bg); }

/* ---- Responsive: desktop static sidebar vs. mobile off-canvas drawer ---- */
@media (min-width: 1024px) {
  /* Neutralize Bootstrap offcanvas -> pin the sidebar open */
  .app-sidebar.offcanvas {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    transform: none !important;
    visibility: visible !important;
    z-index: 1030;
    box-shadow: none;
  }
  .app-main { margin-left: var(--sidebar-w); transition: margin-left .2s ease; }
  .mobile-topbar { display: none !important; }
  .offcanvas-backdrop { display: none !important; }
  .sidebar-collapse-toggle { display: inline-flex; }

  /* Manually collapsed via the sidebar's own toggle (desktop only — the
     mobile drawer already has its own show/hide via the hamburger). */
  body.sidebar-collapsed .app-sidebar.offcanvas { transform: translateX(-100%) !important; }
  body.sidebar-collapsed .app-main { margin-left: 0; }
  .sidebar-expand-toggle {
    display: none;
    position: fixed;
    top: 16px; left: 16px;
    z-index: 1031;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-float);
    cursor: pointer;
  }
  .sidebar-expand-toggle:hover { background: var(--ink-soft); }
  body.sidebar-collapsed .sidebar-expand-toggle { display: inline-flex; }
}

@media (max-width: 1023.98px) {
  .mobile-topbar { display: flex; }
  .app-main { margin-left: 0; padding-top: var(--topbar-h); }
  .content-area { padding: var(--space-4); }
  .app-sidebar.offcanvas { width: min(280px, 85vw); box-shadow: var(--shadow-float); }
  .sidebar-expand-toggle { display: none !important; }
  /* Brand scrim / drawer scrim in evergreen */
  .offcanvas-backdrop.show { background-color: rgba(18,41,31,0.4); opacity: 1; }
}

/* ---------------------------------------------------------------------------
   5. Page header pattern (identical on every page)
--------------------------------------------------------------------------- */
.page-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.page-header__main { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.page-header__text { min-width: 0; }
.page-header__breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--text-soft);
  margin-bottom: 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.page-header__breadcrumb a { color: var(--text-soft); }
.page-header__breadcrumb a:hover { color: var(--green); }
.page-header__breadcrumb .sep { color: var(--text-faint); }
.page-header__title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.page-header__desc { font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--text-soft); margin: 4px 0 0; }
.page-header__action { flex-shrink: 0; }

/* Optional icon tile in a page header (amber = invoices only) */
.icon-tile {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.icon-tile--money { background: var(--money-tint); color: var(--money); }
.icon-tile--green { background: var(--green-tint); color: var(--green); }
.icon-tile--blue  { background: var(--info-blue-tint); color: var(--info-blue); }

/* ---------------------------------------------------------------------------
   6. Buttons — one primary per view region; everything else secondary/ghost
--------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary  > i, .btn-secondary > i, .btn-ghost > i, .btn-danger-outline > i { font-size: 1em; }

.btn-primary { background-color: var(--green); color: #fff; }
.btn-primary:hover { background-color: var(--green-dark); color: #fff; transform: translateY(-1px); }
.btn-primary:active { transform: none; }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--text-faint); transform: none; cursor: not-allowed; opacity: 1; }

.btn-secondary { background-color: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background-color: var(--bg); color: var(--ink); }

.btn-ghost { background-color: transparent; color: var(--text-soft); }
.btn-ghost:hover { background-color: var(--bg); color: var(--ink); }

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

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger-outline:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Size + shape modifiers */
.btn-sm  { padding: 7px 12px; font-size: 0.8rem; }
.btn-icon { padding: 9px; width: 40px; height: 40px; }
.btn-block { display: flex; width: 100%; }

/* ---------------------------------------------------------------------------
   7. Cards
--------------------------------------------------------------------------- */
.card-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card-interactive { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); border-color: var(--green); }

/* Property-type left-border coding */
.card--type-d2d { border-left: 4px solid var(--green); }
.card--type-mf  { border-left: 4px solid var(--info-blue); }

/* Safety net: theme any stray Bootstrap .card to the token system */
.card { border-radius: var(--radius-md); border-color: var(--border); box-shadow: var(--shadow-card); }

/* ---------------------------------------------------------------------------
   8. Pills & badges
--------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  white-space: nowrap;
}
.pill--green   { background: var(--green-tint);     color: var(--green); }
.pill--money   { background: var(--money-tint);     color: var(--money); }
.pill--blue    { background: var(--info-blue-tint); color: var(--info-blue); }
.pill--danger  { background: var(--danger-tint);    color: var(--danger); }
.pill--neutral { background: var(--bg);             color: var(--text-soft); border: 1px solid var(--border); }

/* ---------------------------------------------------------------------------
   9. Tables & lists
--------------------------------------------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: none;
  white-space: nowrap;
}
.data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text);
  vertical-align: middle;
}
.data-table tbody tr { transition: background-color .12s ease; }
.data-table tbody tr:hover { background: var(--bg); }
.data-table tbody tr.selected {
  background: var(--green-tint);
  box-shadow: inset 2px 0 0 var(--green);
}
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sticky selection / total bar (invoices) */
.selection-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(18,41,31,0.12);
  padding: 14px var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  z-index: 20;
}
.selection-bar .total-amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

/* Segmented pill filter (status filters) */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.segmented .seg {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.segmented .seg:hover { background: var(--bg); color: var(--ink); }
.segmented .seg.active { background: var(--green-tint); color: var(--green); border-color: var(--green); }

/* ---------------------------------------------------------------------------
   10. Forms & inputs
--------------------------------------------------------------------------- */
.form-control,
.form-select,
textarea.form-control {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  background-color: var(--surface);
  line-height: 1.4;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
  outline: none;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:disabled, .form-select:disabled { background-color: var(--bg); color: var(--text-faint); }

.form-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text);
  margin-bottom: 6px;
}

.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-check-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }

/* Input with a trailing affordance (password show/hide, search icon) */
.input-affix { position: relative; }
.input-affix .form-control { padding-right: 44px; }
.input-affix .affix-btn {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--text-soft); line-height: 1; border-radius: var(--radius-sm);
}
.input-affix .affix-btn:hover { color: var(--ink); }
input[type="password"]::-ms-reveal { display: none; }

/* ---------------------------------------------------------------------------
   11. Modals (Bootstrap restyle)
--------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
.modal-header { border-bottom: none; padding: 20px 24px 4px; }
.modal-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.modal-subtitle { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--text-soft); }
.modal-body { padding: 12px 24px; }
.modal-footer { border-top: none; padding: 12px 24px 20px; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------------------
   12. States — loading (skeleton), empty, error  (implement all three
        on every fetch-driven region)
--------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--bg) 25%, #ffffff 50%, var(--bg) 75%);
  background-size: 200% 100%;
  animation: portal-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes portal-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.state {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  max-width: 460px;
  margin: 0 auto;
}
.state__icon {
  width: 96px; height: 96px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 3rem;
  margin-bottom: var(--space-4);
}
.state--empty .state__icon { background: var(--green-tint); color: var(--green); }
.state--error .state__icon { background: var(--danger-tint); color: var(--danger); }
.state__title { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 0 0 4px; }
.state__desc  { font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--text-soft); margin: 0 0 var(--space-4); }

/* ---------------------------------------------------------------------------
   13. Toasts — bottom-right, semantic left border, auto-dismiss
--------------------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: calc(100vw - 2 * var(--space-5));
}
.toast-item {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  border-left: 4px solid var(--green);
  padding: 14px 18px;
  min-width: 260px;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  animation: toast-in .2s ease;
}
.toast-item .toast-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.3; }
.toast-item--success { border-left-color: var(--green); }
.toast-item--success .toast-icon { color: var(--green); }
.toast-item--danger  { border-left-color: var(--danger); }
.toast-item--danger .toast-icon { color: var(--danger); }
.toast-item--money   { border-left-color: var(--money); }
.toast-item--money .toast-icon { color: var(--money); }
.toast-item.leaving { animation: toast-out .2s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------------------
   14. Small utilities
--------------------------------------------------------------------------- */
.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }

.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-4) 0; }

/* Responsive auto-fill card grid (dashboard property picker, galleries) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}
.card-grid--sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }

.overflow-x-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------------
   15. Auth screens (login / forgot / reset / verify / access-denied)
        Full-viewport evergreen with the leaf logo above a white card.
--------------------------------------------------------------------------- */
.auth-body {
  min-height: 100vh;
  background-color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.auth-shell { width: 100%; max-width: 420px; }
.auth-logo {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: var(--space-5);
}
.auth-logo img { width: 48px; height: 48px; object-fit: contain; }
.auth-logo .brand-word {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 1.15rem; color: #fff; letter-spacing: -0.01em;
}
.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 40px 36px;
  width: 100%;
}
.auth-card h1 {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 1.5rem; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em;
}
.auth-subtitle { font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--text-soft); margin: 0 0 var(--space-5); }
.auth-field { margin-bottom: var(--space-4); }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.auth-label-row .form-label { margin-bottom: 0; }
.auth-link { font-size: 0.82rem; color: var(--green); font-weight: 500; }
.auth-footer { color: rgba(255,255,255,0.55); font-size: 0.8rem; text-align: center; margin-top: var(--space-5); }
.auth-footer a { color: rgba(255,255,255,0.85); }

.auth-alert {
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--danger);
  background: var(--danger-tint);
  color: var(--text);
  padding: 12px 14px;
  font-size: 0.88rem;
  margin-bottom: var(--space-5);
}
.auth-alert--success { border-left-color: var(--green); background: var(--green-tint); }
.auth-alert--info    { border-left-color: var(--info-blue); background: var(--info-blue-tint); }

.auth-loading { text-align: center; padding: var(--space-5) 0; color: var(--text-soft); font-size: 0.9rem; }
.auth-hint { font-size: 0.8rem; color: var(--text-soft); margin-top: 6px; }
.auth-icon-circle {
  width: 72px; height: 72px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.2rem; margin: 0 auto var(--space-4);
}
.auth-icon-circle--danger { background: var(--danger-tint); color: var(--danger); }
.auth-icon-circle--green  { background: var(--green-tint); color: var(--green); }
.spinner-border.text-green { color: var(--green) !important; }

/* ---------------------------------------------------------------------------
   16. Reduced motion — disable lifts, shimmers, transitions
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card-interactive:hover,
  .btn-primary:hover { transform: none !important; }
  .skeleton { background: var(--bg); }
}