/* ════════════════════════════════════════════════════════════════
   styles.css — shared, cross-page component styles.

   This replaces a previous version of this file that defined a full
   dark "Midnight/Graphite" theme but was never actually linked from
   any page (every page had already moved to its own light "Electric
   Blue" theme in its own inline <style> block, so this file was dead
   weight sitting in the repo doing nothing).

   Rather than force every page onto one global stylesheet in a single
   pass — 10 files' worth of hand-tuned, page-specific CSS, with no
   visual regression testing available in this environment — this file
   is intentionally scoped to net-new SHARED COMPONENTS that multiple
   pages now use identically:

     • Pagination controls (.pag-*, .mob-pag-*) — previously
       hand-duplicated (with the same class names!) across
       fund-ledger.html, vehicles.html, payment-history.html and
       payments-overview.html. Now defined once here and reused by
       those four AND the newly-paginated index.html, flat-search.html,
       and owner-tenant.html.
     • Toast notifications (#sp-toast-stack, .sp-toast-*) — the
       target for utils.js's Utils.showToast(), used by every page
       that doesn't already have its own toast system, including the
       two pages that used to call the browser's native alert().

   All selectors here use their own self-contained --sp-* custom
   properties instead of each page's --blue-*/--midnight-* tokens, so
   linking this file is safe on every page regardless of which local
   theme it uses — nothing here can be overridden unexpectedly, and
   nothing here overrides a page's own styles (this file is linked
   BEFORE each page's own <style> block, and a page's own rule at equal
   specificity always wins by source order — e.g. the four pages above
   that already style .pag-btn locally keep doing exactly what they did
   before).

   Link this near the top of <head>, before the page's own <style>:
     <link rel="stylesheet" href="styles.css">

   Consolidating the REST of each page's duplicated CSS (topbar, forms,
   modals, cards — the bulk of the ~26K duplicated lines flagged in the
   audit) is the Phase 2 follow-up; that requires side-by-side visual
   comparison per page to do safely, which is out of scope here.
   ════════════════════════════════════════════════════════════════ */

:root{
  --sp-primary:#2563eb;
  --sp-primary-dark:#1d4ed8;
  --sp-primary-50:#eff6ff;
  --sp-primary-100:#dbeafe;
  --sp-danger:#dc2626;
  --sp-success:#059669;
  --sp-ink:#0f172a;
  --sp-ink-2:#475569;
  --sp-ink-3:#94a3b8;
  --sp-line:#e2e8f0;
  --sp-surface:#ffffff;
  --sp-surface-2:#f8fafc;
  --sp-radius-sm:8px;
  --sp-radius-lg:14px;
  --sp-shadow-sm:0 1px 3px rgba(15,23,42,0.06);
}

/* ═══════════════════════════════════════════════
   PAGINATION — desktop
   Same markup/classes Utils.renderPagination() (utils.js) emits, and
   the same classes fund-ledger.html/vehicles.html/payment-history.html/
   payments-overview.html already used inline before this file existed.
═══════════════════════════════════════════════ */
.pagination{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-top:1px solid var(--sp-line);
  background:var(--sp-surface-2);flex-wrap:wrap;
}
.pag-info{font-size:0.76rem;color:var(--sp-ink-3);font-weight:500}
.pag-btns{display:flex;align-items:center;gap:4px}
.pag-btn{
  height:32px;min-width:32px;padding:0 10px;
  border:1px solid var(--sp-line);border-radius:var(--sp-radius-sm);
  background:var(--sp-surface);color:var(--sp-ink-2);
  font-size:0.76rem;font-weight:600;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:4px;
  transition:all 0.15s;cursor:pointer;
}
.pag-btn:hover:not(:disabled){background:var(--sp-primary-50);border-color:var(--sp-primary-100);color:var(--sp-primary-dark)}
.pag-btn.active{background:var(--sp-primary);border-color:var(--sp-primary);color:#fff}
.pag-btn:disabled{opacity:0.38;cursor:not-allowed}

/* PAGINATION — mobile */
.mob-pagination{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;margin-top:10px;
  background:var(--sp-surface);border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-lg);box-shadow:var(--sp-shadow-sm);
}
.mob-pag-info{font-size:0.74rem;color:var(--sp-ink-3);font-weight:500}
.mob-pag-btns{display:flex;gap:6px}
.mob-pag-btn{
  height:34px;padding:0 14px;
  border:1px solid var(--sp-line);border-radius:var(--sp-radius-sm);
  background:var(--sp-surface-2);color:var(--sp-ink-2);
  font-size:0.78rem;font-weight:600;font-family:inherit;
  transition:all 0.15s;cursor:pointer;
}
.mob-pag-btn:hover:not(:disabled){background:var(--sp-primary-50);color:var(--sp-primary-dark)}
.mob-pag-btn:disabled{opacity:0.38;cursor:not-allowed}

/* ═══════════════════════════════════════════════
   TOASTS — target of Utils.showToast() in utils.js.
   Utils.showToast() also injects this same CSS itself at runtime (so
   toasts still work even on a page that forgot to link this file), so
   these rules are deliberately identical to the ones injected there —
   don't edit one without the other.
═══════════════════════════════════════════════ */
#sp-toast-stack{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:99999;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:100%;padding:0 16px;
}
.sp-toast{
  pointer-events:auto;display:flex;align-items:center;gap:8px;
  max-width:420px;padding:11px 16px;border-radius:11px;
  font:600 0.83rem/1.35 'DM Sans',sans-serif;color:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,0.22);
  opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;
}
.sp-toast.show{opacity:1;transform:translateY(0)}
.sp-toast-success{background:linear-gradient(135deg,var(--sp-success),#047857)}
.sp-toast-error{background:linear-gradient(135deg,var(--sp-danger),#b91c1c)}
.sp-toast-icon{flex:0 0 auto;display:flex}
@media(max-width:640px){
  #sp-toast-stack{bottom:16px}
  .sp-toast{max-width:none}
}