/* ============================================================
   Spendently — Custom Design System
   Copyright © 2026 spendently.com / seagull-dev.com
   All rights reserved. Proprietary and confidential.

   ARCHITECTURE RULE:
   ─ Bootstrap 5.3 components (btn, card, form, table, alert,
     badge, modal, dropdown…) are used AS-IS via their classes.
   ─ This file ONLY:
       1. Overrides Bootstrap's own CSS variables so every
          Bootstrap component automatically reflects our palette.
       2. Adds layout & components Bootstrap cannot provide
          (sidebar, topbar, metric cards, page heading, etc.).
   ─ Never duplicate a Bootstrap component here.
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1.  BOOTSTRAP 5.3 VARIABLE OVERRIDES — DARK  (app default)
       Set  data-bs-theme="dark"  on <html>.
       Every Bootstrap component reads these automatically.
   ══════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  color-scheme: dark;

  /* ── Semantic / brand palette ─────────────────────────── */
  --bs-primary:                   #14b8a6;
  --bs-primary-rgb:               20, 184, 166;
  --bs-success:                   #10b981;
  --bs-success-rgb:               16, 185, 129;
  --bs-warning:                   #f59e0b;
  --bs-warning-rgb:               245, 158, 11;
  --bs-danger:                    #ef4444;
  --bs-danger-rgb:                239, 68, 68;
  --bs-info:                      #0ea5e9;
  --bs-info-rgb:                  14, 165, 233;
  --bs-secondary:                 #64748b;
  --bs-secondary-rgb:             100, 116, 139;

  /* ── Backgrounds ──────────────────────────────────────── */
  --bs-body-bg:                   #0f172a;   /* page canvas */
  --bs-body-bg-rgb:               15, 23, 42;
  --bs-secondary-bg:              #182235;   /* cards, panels, inputs */
  --bs-secondary-bg-rgb:          24, 34, 53;
  --bs-tertiary-bg:               #1e2d45;   /* table-thead, hover surfaces */
  --bs-tertiary-bg-rgb:           30, 45, 69;

  /* ── Text / emphasis ──────────────────────────────────── */
  --bs-body-color:                #e2e8f0;
  --bs-body-color-rgb:            226, 232, 240;
  --bs-secondary-color:           #94a3b8;
  --bs-secondary-color-rgb:       148, 163, 184;
  --bs-tertiary-color:            rgba(148, 163, 184, 0.5);
  --bs-emphasis-color:            #f8fafc;
  --bs-emphasis-color-rgb:        248, 250, 252;
  --bs-heading-color:             #f1f5f9;

  /* ── Borders ──────────────────────────────────────────── */
  --bs-border-color:              #2a3a52;
  --bs-border-color-translucent:  rgba(255, 255, 255, 0.08);

  /* ── Links ────────────────────────────────────────────── */
  --bs-link-color:                #2dd4bf;
  --bs-link-color-rgb:            45, 212, 191;
  --bs-link-hover-color:          #5eead4;

  /* ── Dropdown ─────────────────────────────────────────── */
  --bs-dropdown-bg:               #1e2d45;
  --bs-dropdown-border-color:     #2a3a52;
  --bs-dropdown-link-color:       #e2e8f0;
  --bs-dropdown-link-hover-bg:    #2a3a52;
  --bs-dropdown-link-hover-color: #f8fafc;
  --bs-dropdown-divider-bg:       #2a3a52;
  --bs-dropdown-header-color:     #94a3b8;

  /* ── Modal ────────────────────────────────────────────── */
  --bs-modal-bg:                  #182235;
  --bs-modal-border-color:        #2a3a52;
  --bs-modal-header-border-color: #2a3a52;
  --bs-modal-footer-border-color: #2a3a52;

  /* ── Table ────────────────────────────────────────────── */
  --bs-table-color:               #e2e8f0;
  --bs-table-bg:                  transparent;
  --bs-table-striped-bg:          rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg:            rgba(20, 184, 166, 0.07);
  --bs-table-border-color:        #2a3a52;
  --bs-table-active-bg:           rgba(20, 184, 166, 0.1);

  /* ── List group ───────────────────────────────────────── */
  --bs-list-group-bg:             #182235;
  --bs-list-group-border-color:   #2a3a52;
  --bs-list-group-action-hover-bg:#1e2d45;
  --bs-list-group-active-bg:      #14b8a6;
  --bs-list-group-active-border-color: #14b8a6;

  /* ── Pagination ───────────────────────────────────────── */
  --bs-pagination-bg:             #182235;
  --bs-pagination-border-color:   #2a3a52;
  --bs-pagination-color:          #94a3b8;
  --bs-pagination-hover-bg:       #1e2d45;
  --bs-pagination-hover-color:    #e2e8f0;
  --bs-pagination-active-bg:      #14b8a6;
  --bs-pagination-active-border-color: #14b8a6;
  --bs-pagination-disabled-bg:    #182235;
  --bs-pagination-disabled-border-color: #2a3a52;

  /* ── Progress ─────────────────────────────────────────── */
  --bs-progress-bg:               #2a3a52;

  /* ── Tooltip / Popover ────────────────────────────────── */
  --bs-tooltip-bg:                #1e2d45;
  --bs-tooltip-color:             #f8fafc;
  --bs-popover-bg:                #1e2d45;
  --bs-popover-border-color:      #2a3a52;
  --bs-popover-header-bg:         #2a3a52;

  /* ── Accordion ────────────────────────────────────────── */
  --bs-accordion-bg:              #182235;
  --bs-accordion-border-color:    #2a3a52;
  --bs-accordion-btn-color:       #e2e8f0;
  --bs-accordion-active-bg:       rgba(20, 184, 166, 0.08);
  --bs-accordion-active-color:    #2dd4bf;

  /* ── Breadcrumb ───────────────────────────────────────── */
  --bs-breadcrumb-divider-color:  #64748b;
  --bs-breadcrumb-active-color:   #94a3b8;

  /* ── Badge subtle backgrounds (Bootstrap 5.3) ─────────── */
  --bs-primary-bg-subtle:         rgba(20, 184, 166, 0.15);
  --bs-success-bg-subtle:         rgba(16, 185, 129, 0.15);
  --bs-warning-bg-subtle:         rgba(245, 158, 11, 0.15);
  --bs-danger-bg-subtle:          rgba(239, 68, 68, 0.15);
  --bs-info-bg-subtle:            rgba(14, 165, 233, 0.15);
  --bs-secondary-bg-subtle:       rgba(100, 116, 139, 0.15);

  --bs-primary-text-emphasis:     #2dd4bf;
  --bs-success-text-emphasis:     #34d399;
  --bs-warning-text-emphasis:     #fbbf24;
  --bs-danger-text-emphasis:      #f87171;
  --bs-info-text-emphasis:        #38bdf8;
  --bs-secondary-text-emphasis:   #94a3b8;

  --bs-primary-border-subtle:     rgba(20, 184, 166, 0.3);
  --bs-success-border-subtle:     rgba(16, 185, 129, 0.3);
  --bs-warning-border-subtle:     rgba(245, 158, 11, 0.3);
  --bs-danger-border-subtle:      rgba(239, 68, 68, 0.3);
  --bs-info-border-subtle:        rgba(14, 165, 233, 0.3);

  /* ── Form validation ──────────────────────────────────── */
  --bs-form-valid-color:          #34d399;
  --bs-form-valid-border-color:   #34d399;
  --bs-form-invalid-color:        #f87171;
  --bs-form-invalid-border-color: #f87171;
}

/* Card & modal need secondary-bg, not body-bg ─────────────── */
[data-bs-theme="dark"] .card {
  --bs-card-bg:           var(--bs-secondary-bg);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-cap-bg:       var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .offcanvas {
  --bs-offcanvas-bg:           var(--bs-secondary-bg);
  --bs-offcanvas-border-color: var(--bs-border-color);
}


/* ══════════════════════════════════════════════════════════════
   2.  BOOTSTRAP 5.3 VARIABLE OVERRIDES — LIGHT
   ══════════════════════════════════════════════════════════════ */
[data-bs-theme="light"] {
  color-scheme: light;

  --bs-primary:             #2EC4B6;
  --bs-primary-rgb:         46, 196, 182;
  --bs-success:             #16a34a;
  --bs-success-rgb:         22, 163, 74;
  --bs-warning:             #d97706;
  --bs-warning-rgb:         217, 119, 6;
  --bs-danger:              #dc2626;
  --bs-danger-rgb:          220, 38, 38;
  --bs-info:                #0284c7;
  --bs-info-rgb:            2, 132, 199;

  --bs-body-bg:             #f0f4f8;
  --bs-body-color:          #1B2A4A;
  --bs-secondary-bg:        #ffffff;
  --bs-tertiary-bg:         #f8fafc;
  --bs-secondary-color:     #6B7A8D;
  --bs-heading-color:       #1B2A4A;
  --bs-border-color:        #dde3ec;
  --bs-link-color:          #1fa99d;

  --bs-primary-bg-subtle:      rgba(46, 196, 182, 0.1);
  --bs-primary-text-emphasis:  #1fa99d;
  --bs-primary-border-subtle:  rgba(46, 196, 182, 0.3);
}

[data-bs-theme="light"] .card {
  --bs-card-bg:           #ffffff;
  --bs-card-border-color: #dde3ec;
  --bs-card-cap-bg:       #f8fafc;
}


/* ══════════════════════════════════════════════════════════════
   3.  LAYOUT DIMENSIONS  (not Bootstrap component colors)
   ══════════════════════════════════════════════════════════════ */
:root {
  --eb-sidebar-w:     260px;
  --eb-sidebar-mini:  64px;
  --eb-topbar-h:      64px;
  --eb-radius:        10px;
  --eb-radius-sm:     6px;
  --eb-t:             0.18s ease;

  /* Sidebar stays dark in both themes */
  --eb-sidebar-bg:        #0b1120;
  --eb-sidebar-border:    rgba(255, 255, 255, 0.07);
  --eb-sidebar-text:      rgba(255, 255, 255, 0.52);
  --eb-sidebar-hover:     rgba(255, 255, 255, 0.06);
  --eb-sidebar-active-bg: rgba(20, 184, 166, 0.14);
  --eb-sidebar-active-fg: #2dd4bf;

  /* Brand */
  --eb-teal:      #14b8a6;
  --eb-teal-dark: #0d9488;
  --eb-navy:      #1B2A4A;

  /* Chart palette — theme-independent; use with rgba(var(--eb-cN-rgb), alpha) */
  --eb-c1-rgb:  99,102,241;   /* indigo  */
  --eb-c2-rgb:  34,197,94;    /* green   */
  --eb-c3-rgb:  245,158,11;   /* amber   */
  --eb-c4-rgb:  236,72,153;   /* pink    */
  --eb-c5-rgb:  14,165,233;   /* sky     */
  --eb-c6-rgb:  168,85,247;   /* purple  */
  --eb-c7-rgb:  249,115,22;   /* orange  */
  --eb-c8-rgb:  20,184,166;   /* teal    */
  --eb-c9-rgb:  239,68,68;    /* red     */
  --eb-c10-rgb: 234,179,8;    /* yellow  */
  --eb-c11-rgb: 59,130,246;   /* blue    */
  --eb-c12-rgb: 16,185,129;   /* emerald */

  /* Shadows */
  --eb-shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.16);
  --eb-shadow:    0 4px 20px rgba(0, 0, 0, 0.22);
  --eb-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.30);
  --eb-ring:      0 0 0 3px  rgba(20, 184, 166, 0.25);
}


/* ══════════════════════════════════════════════════════════════
   4.  BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
}

a { text-decoration: none; }

/* Smooth theme transitions */
body, .eb-topbar, .card, .modal-content,
.list-group-item, .dropdown-menu,
.form-control, .form-select, .form-check-input {
  transition:
    background-color var(--eb-t),
    border-color     var(--eb-t),
    color            var(--eb-t);
}


/* ══════════════════════════════════════════════════════════════
   5.  SIDEBAR  — Bootstrap has no sidebar, 100% custom
   ══════════════════════════════════════════════════════════════ */
.eb-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  width: var(--eb-sidebar-w);
  background: var(--eb-sidebar-bg);
  border-right: 1px solid var(--eb-sidebar-border);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
  transition: width var(--eb-t), transform var(--eb-t);
}

.eb-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--eb-sidebar-border);
  min-height: var(--eb-topbar-h);
  text-decoration: none;
  flex-shrink: 0;
}

.eb-logo-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--eb-teal), #0ea5e9);
  border-radius: var(--eb-radius-sm);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.eb-logo-text {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}

.eb-logo-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--eb-sidebar-text);
}

.eb-logo-icon-only { display: block; }
.eb-logo-horizontal { height: 40px; width: auto; }

.eb-nav {
  flex: 1;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.eb-nav-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--eb-sidebar-text);
  opacity: 0.5;
  padding: 0.85rem 0.6rem 0.3rem;
  margin-top: 0.25rem;
  white-space: nowrap;
}

.eb-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--eb-radius-sm);
  color: var(--eb-sidebar-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--eb-t), color var(--eb-t);
}

.eb-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.eb-nav-item:hover  { background: var(--eb-sidebar-hover);     color: #fff; }
.eb-nav-item.active { background: var(--eb-sidebar-active-bg); color: var(--eb-sidebar-active-fg); }

.eb-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--eb-sidebar-border);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--eb-t);
}

.eb-sidebar-user:hover { background: var(--eb-sidebar-hover); }

.eb-user-avatar,
.eb-user-avatar-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--eb-teal);
  object-fit: cover;
}

.eb-user-avatar-placeholder {
  background: linear-gradient(135deg, var(--eb-teal), #0ea5e9);
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
}

.eb-user-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.eb-user-tier { font-size: 0.7rem; color: var(--eb-teal); display: block; }

.eb-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1039;
  backdrop-filter: blur(2px);
}


/* ══════════════════════════════════════════════════════════════
   6.  MAIN LAYOUT WRAPPER
   ══════════════════════════════════════════════════════════════ */
.eb-main {
  margin-left: var(--eb-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--eb-t);
}

.eb-main-public { min-height: 100vh; }
.eb-main-no-sidebar { margin-left: 0; }


/* ══════════════════════════════════════════════════════════════
   7.  TOPBAR
   ══════════════════════════════════════════════════════════════ */
.eb-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: var(--eb-topbar-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.5rem;
  background: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: var(--eb-shadow-sm);
}

.eb-topbar-title {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bs-heading-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}


.eb-topbar-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--eb-radius-sm);
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow var(--eb-t);
}

.eb-topbar-toggle:hover { box-shadow: var(--eb-ring); }

.eb-theme-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--eb-radius-sm);
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  font-size: 1rem;
  transition: box-shadow var(--eb-t);
}

.eb-theme-btn:hover { box-shadow: var(--eb-ring); }


/* ══════════════════════════════════════════════════════════════
   8.  PAGE CONTENT WRAPPER
   ══════════════════════════════════════════════════════════════ */
.eb-content { flex: 1; padding: 1.75rem 1.5rem; }


/* ══════════════════════════════════════════════════════════════
   9.  PAGE HEADING
   ══════════════════════════════════════════════════════════════ */
.eb-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.eb-page-header-left { display: flex; align-items: center; gap: 0.85rem; }

.eb-page-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--eb-radius);
  background: rgba(20, 184, 166, 0.12);
  color: var(--eb-teal);
  font-size: 1.15rem;
}

.eb-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--eb-teal);
  margin-bottom: 0.1rem;
}

.eb-page-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bs-heading-color);
  line-height: 1.2;
}

.eb-page-subtitle { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--bs-secondary-color); }

.eb-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}


/* ══════════════════════════════════════════════════════════════
   10. TABLE HEADER TYPOGRAPHY
       Bootstrap's .table is used as-is; we only style <thead>.
   ══════════════════════════════════════════════════════════════ */
.table > thead > tr > th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
}


/* ══════════════════════════════════════════════════════════════
   11. METRIC / STAT CARDS
   ══════════════════════════════════════════════════════════════ */
.eb-metric {
  position: relative;
  padding: 1.25rem;
  border-radius: var(--eb-radius);
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--eb-shadow-sm);
  overflow: hidden;
  height: 100%;
  transition: box-shadow var(--eb-t), transform var(--eb-t),
              background-color var(--eb-t), border-color var(--eb-t);
}

.eb-metric::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 99px 0 0 99px;
  background: var(--eb-metric-accent, var(--eb-teal));
}

.eb-metric:hover { box-shadow: var(--eb-shadow); transform: translateY(-2px); }

.eb-metric-teal    { --eb-metric-accent: var(--eb-teal); }
.eb-metric-primary { --eb-metric-accent: var(--bs-primary); }
.eb-metric-success { --eb-metric-accent: var(--bs-success); }
.eb-metric-warning { --eb-metric-accent: var(--bs-warning); }
.eb-metric-danger  { --eb-metric-accent: var(--bs-danger); }
.eb-metric-info    { --eb-metric-accent: var(--bs-info); }

.eb-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.eb-metric-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bs-secondary-color);
}

.eb-metric-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--eb-radius-sm);
  background: rgba(20, 184, 166, 0.1);
  color: var(--eb-metric-accent, var(--eb-teal));
  font-size: 0.95rem;
  flex-shrink: 0;
}

.eb-metric-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--bs-emphasis-color);
  line-height: 1;
  letter-spacing: -0.5px;
}

.eb-metric-meta { margin-top: 0.6rem; font-size: 0.8rem; color: var(--bs-secondary-color); }
.eb-metric-up   { color: var(--bs-success); font-weight: 700; }
.eb-metric-down { color: var(--bs-danger);  font-weight: 700; }


/* ══════════════════════════════════════════════════════════════
   12. ACCOUNT CARDS  — coloured gradient bank/wallet tiles
   ══════════════════════════════════════════════════════════════ */
.eb-account-card {
  border-radius: var(--eb-radius);
  padding: 1.25rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--eb-shadow);
  transition: box-shadow var(--eb-t), transform var(--eb-t);
  text-decoration: none;
}

.eb-account-card:hover { box-shadow: var(--eb-shadow-lg); transform: translateY(-3px); color: #fff; }

.eb-account-card::after {
  content: '';
  position: absolute;
  right: -1.5rem; top: -1.5rem;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.eb-account-name        { font-size: 0.95rem; font-weight: 700; }
.eb-account-institution { font-size: 0.72rem; opacity: 0.65; margin-top: 2px; }
.eb-account-balance     { font-size: 1.7rem;  font-weight: 800; letter-spacing: -0.5px; }
.eb-account-currency    { font-size: 0.75rem; opacity: 0.7; }


/* ══════════════════════════════════════════════════════════════
   13. TRANSACTION AMOUNT COLOURS
   ══════════════════════════════════════════════════════════════ */
.amount-income   { color: var(--bs-success); font-weight: 700; }
.amount-expense  { color: var(--bs-danger);  font-weight: 700; }
.amount-transfer { color: var(--bs-secondary-color); font-weight: 600; }


/* ══════════════════════════════════════════════════════════════
   14. AUTH PAGES
   ══════════════════════════════════════════════════════════════ */
.eb-auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--bs-body-bg);
}

.eb-auth-card-wrap { width: min(100%, 440px); }

.eb-auth-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; }

.eb-auth-brand-name { font-size: 1.15rem; font-weight: 800; color: var(--bs-heading-color); }

.eb-auth-brand-name span {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
}


/* ══════════════════════════════════════════════════════════════
   15. LANDING PAGE
   ══════════════════════════════════════════════════════════════ */
.eb-landing-hero {
  background: linear-gradient(135deg, #0b1120 0%, #182235 60%, #0b1120 100%);
  min-height: 100vh;
  color: #fff;
  display: flex;
  align-items: center;
}

.eb-hero-title    { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -1.5px; }
.eb-hero-accent   { color: var(--eb-teal); }
.eb-hero-subtitle { font-size: 1.05rem; opacity: 0.75; max-width: 520px; line-height: 1.65; }


/* ══════════════════════════════════════════════════════════════
   16. ACTIVITY FEED
   ══════════════════════════════════════════════════════════════ */
.eb-activity-list { display: flex; flex-direction: column; gap: 1rem; }

.eb-activity-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.eb-activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.eb-activity-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 0.35rem; }


/* ══════════════════════════════════════════════════════════════
   17. RESPONSIVE — SIDEBAR
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  body.eb-mini .eb-sidebar       { width: var(--eb-sidebar-mini); }
  body.eb-mini .eb-main          { margin-left: var(--eb-sidebar-mini); }
  body.eb-mini .eb-logo-horizontal,
  body.eb-mini .eb-nav-label,
  body.eb-mini .eb-nav-text,
  body.eb-mini .eb-sidebar-user  { display: none; }
  body.eb-mini .eb-logo-icon-only { display: block; }
  body.eb-mini .eb-nav-item      { justify-content: center; padding-inline: 0; }
  body.eb-mini .eb-sidebar-brand { justify-content: center; }
}

@media (max-width: 991.98px) {
  .eb-sidebar {
    width: min(var(--eb-sidebar-w), calc(100vw - 3rem));
    transform: translateX(-100%);
  }
  .eb-main { margin-left: 0; }
  body.eb-sidebar-open { overflow: hidden; }
  body.eb-sidebar-open .eb-sidebar         { transform: translateX(0); }
  body.eb-sidebar-open .eb-sidebar-overlay { display: block; }
}

@media (max-width: 767.98px) {
  .eb-content        { padding: 1.25rem 1rem; }
  .eb-topbar         { padding: 0 1rem; }
  .eb-page-header    { flex-direction: column; align-items: flex-start; }
  .eb-header-actions { width: 100%; }

  /* Prevent iOS/Android auto-zoom on input focus (triggered when font-size < 16px) */
  input, textarea, select { font-size: 16px !important; }

  /* Ticker: on mobile collapse to 38×38 icon button — text hidden, flip hidden */
  .eb-ticker-label       { display: none !important; }
  .eb-ticker-mobile-icon { display: inline-block !important; }
  #ebTickerFlip          { display: none !important; }
  #ebTickerWrap          { max-width: 38px !important; }
  .eb-ticker-frame       { padding: 0 !important; width: 38px !important; }
  #ebTickerBtn           { min-width: 0 !important; width: 34px !important; padding: 0 !important; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   18. BRAND UTILITIES
   ══════════════════════════════════════════════════════════════ */
.text-teal  { color: var(--eb-teal) !important; }
.text-navy  { color: var(--eb-navy) !important; }
.bg-teal    { background-color: var(--eb-teal) !important; }
.bg-navy    { background-color: var(--eb-navy) !important; }
.rounded-eb { border-radius: var(--eb-radius)  !important; }


/* ══════════════════════════════════════════════════════════════
   19. SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar             { width: 6px; height: 6px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: var(--bs-border-color); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--bs-secondary-color); }
.eb-nav::-webkit-scrollbar       { width: 3px; }
.eb-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }


/* ══════════════════════════════════════════════════════════════
   20. REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   21. TRANSACTION TYPE BADGES
   ══════════════════════════════════════════════════════════════ */
.eb-badge-income   { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-size: 0.72rem; }
.eb-badge-expense  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis);  font-size: 0.72rem; }
.eb-badge-transfer { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis);    font-size: 0.72rem; }

/* Pro / locked-feature tier badge */
.eb-badge-pro {
  background: var(--bs-secondary-bg-subtle);
  color:      var(--bs-secondary-text-emphasis);
  font-size:  0.6rem;
}


/* ══════════════════════════════════════════════════════════════
   22. TRANSACTION TYPE SELECTOR CARDS
   ══════════════════════════════════════════════════════════════ */
.eb-type-card          { cursor: pointer; }
.eb-type-icon-expense  { font-size: 1.5rem; color: var(--bs-danger); }
.eb-type-icon-income   { font-size: 1.5rem; color: var(--bs-success); }
.eb-type-icon-transfer { font-size: 1.5rem; color: var(--bs-info); }
.eb-type-text-expense  { color: var(--bs-danger-text-emphasis); }
.eb-type-text-income   { color: var(--bs-success-text-emphasis); }
.eb-type-text-transfer { color: var(--bs-info-text-emphasis); }
.eb-credit-display     { min-height: 38px; line-height: 1.6; }


/* ══════════════════════════════════════════════════════════════
   23. SETTINGS PAGE
   ══════════════════════════════════════════════════════════════ */
.eb-settings-card {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--eb-radius);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.eb-settings-card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eb-settings-card-header .eb-settings-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--eb-radius-sm);
  font-size: 1rem;
  flex-shrink: 0;
}

.eb-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  gap: 1rem;
}

.eb-settings-row:last-child { border-bottom: none; }

.eb-settings-row-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-heading-color);
}

.eb-settings-row-description {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin-top: 0.15rem;
}

.eb-danger-card { border-color: rgba(220, 38, 38, 0.35); }
.eb-danger-card .eb-settings-card-header { border-color: rgba(220, 38, 38, 0.35); }

.eb-settings-badge {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
}

.eb-switch-theme { width: 2.5rem; height: 1.25rem; cursor: pointer; }


/* ══════════════════════════════════════════════════════════════
   24. SETTINGS ICON COLOR MODIFIERS
   ══════════════════════════════════════════════════════════════ */
.eb-icon-teal   { background: rgba(20,184,166,0.12);  color: var(--eb-teal); }
.eb-icon-sky    { background: rgba(14,165,233,0.12);  color: #0ea5e9; }
.eb-icon-purple { background: rgba(168,85,247,0.12);  color: #a855f7; }
.eb-icon-yellow { background: rgba(234,179,8,0.12);   color: #eab308; }
.eb-icon-red    { background: rgba(220,38,38,0.12);   color: #dc2626; }
.eb-icon-slate  { background: rgba(100,116,139,0.12); color: #94a3b8; }


/* ══════════════════════════════════════════════════════════════
   25. SHARED UTILITIES
   ══════════════════════════════════════════════════════════════ */
.eb-empty-icon      { font-size: 3rem; opacity: 0.4; }
.eb-icon-lg         { width: 48px; height: 48px; font-size: 1.3rem; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: var(--eb-radius-sm); }
.eb-card-danger-top { border-top: 3px solid var(--bs-danger) !important; }
.eb-date-cell       { font-size: 0.85rem; white-space: nowrap; }
.eb-amount-cell     { font-size: 0.95rem; white-space: nowrap; }
.eb-meta            { font-size: 0.85rem; }
.eb-label-xs        { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.eb-value-lg        { font-size: 1.4rem; letter-spacing: -0.02em; }
.eb-meta-row        { font-size: 0.75rem; }
.eb-badge-teal      { background: rgba(20,184,166,.15); color: var(--eb-teal); border: 1px solid rgba(20,184,166,.3); }
.eb-input-sm        { width: 120px; }
.eb-input-xs        { width: 105px; }
.eb-auth-wrap       { min-height: 70vh; }
.eb-auth-box        { width: 100%; max-width: 420px; }
.eb-auth-box-wide   { width: 100%; max-width: 480px; }
.eb-logo-icon-sm    { width: 28px !important; height: 28px !important; font-size: 0.8rem !important; }
.eb-sidebar-brand img { flex-shrink: 0; }
.eb-cs-ribbon       { position: absolute; top: 0; right: 0; background: var(--eb-teal, #20c997); color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 12px; border-radius: 0 var(--bs-border-radius, 4px) 0 8px; pointer-events: none; z-index: 2; }


/* ══════════════════════════════════════════════════════════════
   26. NAVBAR / TICKER / NOTIFICATIONS
   ══════════════════════════════════════════════════════════════ */
.eb-topbar-public-brand      { flex-shrink: 0; margin-right: auto; }
.eb-topbar-public-brand img  { flex-shrink: 0; }
.eb-topbar-public-brand-name { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; color: var(--bs-heading-color); }
.eb-ticker-frame         { height: 38px; padding: 0 4px 0 0; }
.eb-ticker-text          { font-size: 0.8rem; font-variant-numeric: tabular-nums; min-width: 120px; border: none; background: transparent; color: inherit; }
.eb-ticker-flip          { height: 28px; font-size: 0.75rem; }
.eb-ticker-mobile-icon   { display: none; }          /* hidden on desktop, shown on mobile via media query */
.eb-panel-rate-row       { font-variant-numeric: tabular-nums; }
.eb-panel-rate-text      { font-size: 0.85rem; }
.eb-input-active         { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25) !important; }
.eb-ticker-panel       { min-width: 300px; width: 320px; }
.eb-ticker-panel-title { font-size: 0.85rem; }
.eb-keypad-grid        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.eb-user-dropdown      { min-width: 320px; max-width: 360px; }
.eb-notif-list         { max-height: 360px; overflow-y: auto; }
.eb-notif-dot          { width: 8px; height: 8px; }
.eb-notif-badge        { font-size: 0.6rem; }
.eb-notif-body-text    { font-size: 0.75rem; }
.eb-notif-time         { font-size: 0.7rem; }
.eb-notif-icon         { font-size: 0.9rem; flex-shrink: 0; }
.eb-toast-container    { z-index: 1100; }

/* Notification read/unread state (SPNW-105) -- single class per state, driven
   client-side by JS toggling one class; the rest cascades from these rules
   instead of the template toggling a bunch of Bootstrap utilities. */
.notification-unread      { background-color: rgba(var(--bs-primary-rgb), .1); }
.notification-read        { background-color: transparent; }
.card.notification-unread { border-color: rgba(var(--bs-primary-rgb), .25); }
.notification-read .eb-mark-read-form,
.notification-read .eb-notif-unread-dot { display: none; }
.eb-toast-overlay      { z-index: 1200; }


/* ══════════════════════════════════════════════════════════════
   27. LANDING PAGE (home.html)
   ══════════════════════════════════════════════════════════════ */
.eb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 99px;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.25);
  color: var(--eb-teal);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.eb-feature-card {
  padding: 1.75rem;
  border-radius: var(--eb-radius);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-secondary-bg);
  height: 100%;
  transition: border-color var(--eb-t), transform var(--eb-t), box-shadow var(--eb-t);
}

.eb-feature-card:hover {
  border-color: rgba(20, 184, 166, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.eb-feature-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--eb-radius);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.eb-stat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 2rem;
  border-radius: var(--eb-radius);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.eb-footer-public {
  background: #070e1a;
  border-top: 1px solid var(--bs-border-color);
  padding: 2rem 0;
}

.eb-mockup-wrap { position: relative; }

.eb-mockup-wrap::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(20,184,166,0.3) 0%, rgba(14,165,233,0.15) 100%);
  z-index: 0;
}

.eb-mockup-wrap svg { position: relative; z-index: 1; }

.eb-tagline       { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; color: var(--bs-heading-color); }
.eb-hero-logo     { width: 100%; max-width: 420px; height: auto; }
.eb-hero-svg      { width: 100%; display: block; border-radius: 12px; box-shadow: 0 32px 80px rgba(0,0,0,0.6); }
.eb-section       { padding: 5rem 0; background: var(--bs-body-bg); }
.eb-section-alt   { padding: 4rem 0; background: var(--bs-secondary-bg); border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); }
.eb-desc-max      { max-width: 520px; }
.eb-desc-centered { max-width: 480px; margin-inline: auto; }


/* ══════════════════════════════════════════════════════════════
   28. MISC UTILITIES (generated during CSS cleanup)
   ══════════════════════════════════════════════════════════════ */
.eb-text-xxs      { font-size: 0.65rem; }
.eb-text-xs       { font-size: 0.7rem; }
.eb-text-sub      { font-size: 0.72rem; }
.eb-text-sm       { font-size: 0.8rem; }
.eb-icon-amber    { background: rgba(245,158,11,0.1); color: #f59e0b; }
.eb-icon-md       { width: 44px; height: 44px; font-size: 1.1rem; display: inline-grid; place-items: center; border-radius: var(--eb-radius-sm); flex-shrink: 0; }
.eb-preview-name  { max-width: 160px; }
.eb-label-tracking { letter-spacing: 0.05em; }
.eb-icon-sm { width: 36px; height: 36px; font-size: 1.1rem; display: inline-grid; place-items: center; border-radius: var(--eb-radius-sm); flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════════
   29. PROFILE PAGE
   ══════════════════════════════════════════════════════════════ */
.eb-profile-avatar {
  width: 96px; height: 96px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--eb-teal);
}

.eb-avatar-placeholder {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--eb-teal), #0ea5e9);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.25rem; font-weight: 800; color: #fff;
  flex-shrink: 0; border: 3px solid var(--eb-teal);
}

.eb-subscription-badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.75rem; border-radius: 99px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.eb-subscription-badge.free     { background: rgba(100,116,139,.15); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }
.eb-subscription-badge.pro      { background: rgba(234,179,8,.15);   color: #eab308; border: 1px solid rgba(234,179,8,.4); }
.eb-subscription-badge.business { background: rgba(168,85,247,.15);  color: #a855f7; border: 1px solid rgba(168,85,247,.4); }

.eb-flag { font-size: 1.5rem; line-height: 1; }

.eb-country-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; border-radius: var(--eb-radius-sm);
  background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color);
  font-size: .88rem;
}

.eb-currency-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; border-radius: var(--eb-radius-sm);
  border: 1px solid var(--bs-border-color); margin-bottom: .4rem;
}
.eb-currency-row.is-base { background: rgba(20,184,166,.08); border-color: rgba(20,184,166,.35); }

.eb-currency-symbol {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--eb-radius-sm);
  background: var(--bs-tertiary-bg); font-size: 1rem;
  font-weight: 700; color: var(--bs-heading-color); flex-shrink: 0;
}
.eb-currency-row.is-base .eb-currency-symbol { background: rgba(20,184,166,.2); color: var(--eb-teal); }

.eb-section-card {
  background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color);
  border-radius: var(--eb-radius); padding: 1.5rem; margin-bottom: 1.25rem;
}

.eb-section-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--eb-sidebar-text); margin-bottom: 1rem;
}

.eb-formset-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: .5rem; align-items: center; margin-bottom: .5rem;
}


/* ══════════════════════════════════════════════════════════════
   30. DISPLAY PREFERENCES PAGE
   ══════════════════════════════════════════════════════════════ */
.eb-pref-option {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--eb-radius-sm);
  border: 1px solid var(--bs-border-color);
  cursor: pointer; margin-bottom: .5rem;
  transition: border-color .15s, background .15s;
}
.eb-pref-option:has(input:checked) {
  border-color: var(--eb-teal);
  background: rgba(20,184,166,.07);
}
.eb-pref-option input[type=radio] { flex-shrink: 0; }
.eb-pref-preview {
  font-size: 1.05rem; font-weight: 700;
  color: var(--bs-heading-color); font-variant-numeric: tabular-nums;
}
.eb-pref-label { font-size: .82rem; color: var(--bs-secondary-color); }
.eb-auto-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .65rem; border-radius: 99px;
  background: rgba(14,165,233,.1); color: #0ea5e9;
  border: 1px solid rgba(14,165,233,.3); font-size: .72rem; font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════
   31. NOTIFICATION SETTINGS TABLE
   ══════════════════════════════════════════════════════════════ */
.eb-notif-table              { table-layout: fixed; width: 100%; }
.eb-notif-table .col-event   { width: auto; }
.eb-notif-table .col-enabled { width: 90px; }
.eb-notif-table .col-ch      { width: 72px; }
.eb-notif-table .col-thresh  { width: 185px; }
/* EB-133: constrain threshold inputs so the ✓ button stays inside the card */
.eb-threshold-input { width: 120px; }
.eb-notif-item + .eb-notif-item { border-top: 1px solid var(--bs-border-color); }


/* ══════════════════════════════════════════════════════════════
   32. ACCOUNT CHIP — THEME-ADAPTIVE CONTRAST (EB-041)
   ══════════════════════════════════════════════════════════════ */
/* Background tint comes from the account color (inline style).
   Text color uses Bootstrap's body color — automatically light in dark mode,
   dark in light mode. No separate dark/light rules needed. */
.eb-account-chip {
  color: var(--bs-body-color);
  font-size: 0.8rem;
}


/* ══════════════════════════════════════════════════════════════
   33. EXCHANGE RATES PAGE (EB-043)
   ══════════════════════════════════════════════════════════════ */

/* ── Section 1: Currency Converter ── */
.eb-rate-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color);
  transition: background 0.12s;
}
.eb-rate-row:last-child       { border-bottom: none; }
.eb-rate-row:hover            { background: var(--bs-tertiary-bg); }
.eb-rate-row.eb-rate-base-row { border: 2px solid var(--bs-primary); border-radius: 0.5rem; margin: 0 0.75rem 0.5rem; padding: 0.6rem 0.75rem; cursor: default; }

.eb-rate-flag    { font-size: 1.4rem; line-height: 1; flex-shrink: 0; width: 1.8rem; text-align: center; }
.eb-rate-code    { font-weight: 600; font-size: 0.9rem; flex-shrink: 0; width: 3rem; }
.eb-rate-name    { font-size: 0.78rem; color: var(--bs-secondary-color); flex-shrink: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.eb-rate-right   { margin-left: auto; text-align: right; flex-shrink: 0; }
.eb-rate-amount  { font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.eb-rate-sub     { font-size: 0.72rem; color: var(--bs-secondary-color); white-space: nowrap; margin-top: 0.1rem; }

.eb-base-select  {
  background: transparent;
  border: none;
  font-weight: 700;
  color: var(--bs-primary);
  font-size: 0.95rem;
  padding: 0;
  width: auto;
  cursor: pointer;
}
.eb-base-select:focus { box-shadow: none; outline: none; }

.eb-base-amount {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: right;
  border: none;
  background: transparent;
  color: var(--bs-body-color);
  min-width: 0;
  flex: 1;
  padding: 0;
}
.eb-base-amount:focus { outline: none; box-shadow: none; }

/* ── Section 2: History Chart ── */
.eb-chart-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  flex: 1;
}
.eb-chart-select {
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bs-body-color);
  padding: 0;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.eb-chart-select:focus { box-shadow: none; outline: none; }

.eb-current-rate {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}
.eb-rate-change-pos { color: var(--bs-success); }
.eb-rate-change-neg { color: var(--bs-danger); }

.eb-period-btn          { border-radius: 99px !important; font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.6rem; flex: 1; text-align: center; }
.eb-period-btn.active   { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

#erChart { min-height: 220px; }

/* ── Section 34: Category icon picker ────────────────────────────────────── */
.eb-icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.eb-icon-picker-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Skeleton shimmer ──────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton-block {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--bs-secondary-bg)    0%,
    var(--bs-tertiary-bg)    40%,
    var(--bs-secondary-bg)   100%
  );
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* ── Stat cards ────────────────────────────────────────────────────────── */
.stat-card {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color) !important;
  transition: box-shadow .18s ease;
}
.stat-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.stat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.stat-card__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
}
.stat-card__icon {
  font-size: 1.15rem;
}
.stat-card__value {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.stat-card__sub {
  font-size: .72rem;
  margin-top: .2rem;
}
.stat-card__toggle {
  font-size: .72rem;
  text-decoration: none;
}
.stat-card__toggle:hover {
  text-decoration: none;
  color: var(--bs-body-color) !important;
}
.stat-card__detail {
  border-top: 1px solid var(--bs-border-color);
  padding-top: .5rem;
  margin-top: .25rem;
}

/* ── Account fan stack ─────────────────────────────────────────────────── */
.account-fan {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.account-fan__card {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--card-color, #14b8a6);
  border-radius: 8px;
  padding: .65rem .9rem;
  transition: box-shadow .15s ease, transform .15s ease;
}
.account-fan__card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.28);
  transform: translateY(-1px);
}
.account-fan__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.account-fan__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-color, #14b8a6) 15%, transparent);
  color: var(--card-color, #14b8a6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
/* Dark mode: lighten the stored colour so dark defaults stay visible */
[data-bs-theme="dark"] .account-fan__icon {
  background: color-mix(in srgb, var(--card-color, #14b8a6) 30%, var(--bs-secondary-bg));
  color: color-mix(in srgb, var(--card-color, #14b8a6) 70%, white);
}

/* ── Recent transactions ───────────────────────────────────────────────── */
.recent-txn-row:hover {
  background: var(--bs-tertiary-bg);
  border-radius: 6px;
}
.recent-txn__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.eb-icon-picker-btn.btn-primary { color: #fff; }

/* ══════════════════════════════════════════════════════════════
   EPIC-001: OCR confidence field highlighting
   Applied by fillReceiptForm() in transaction_form.js
   ══════════════════════════════════════════════════════════════ */
.ocr-high   { border-color: var(--bs-success) !important; background-color: rgba(var(--bs-success-rgb), 0.05) !important; }
.ocr-medium { border-color: var(--bs-warning) !important; background-color: rgba(var(--bs-warning-rgb), 0.05) !important; }
.ocr-failed { border-color: var(--bs-danger)  !important; background-color: rgba(var(--bs-danger-rgb),  0.05) !important; }


/* ══════════════════════════════════════════════════════════════
   EPIC-004 — Driver.js Tour Colour Overrides
   Matches Spendently dark theme: primary teal #14b8a6
   ══════════════════════════════════════════════════════════════ */
.eb-tour-popover {
  z-index: 100001 !important;      /* above sidebar (z-index 1000) and Driver.js overlay (z-index 100000) */
  padding: 20px 24px 16px !important;
  --driver-popover-bg:             #182235;
  --driver-popover-title-color:    #f1f5f9;
  --driver-popover-description-color: #94a3b8;
  --driver-popover-border-color:   #2a3a52;
  --driver-btn-prev-color:         #94a3b8;
  --driver-btn-next-bg:            #14b8a6;
  --driver-btn-next-color:         #0f172a;
  --driver-btn-next-hover-bg:      #0d9488;
  --driver-btn-close-color:        #64748b;
  background:    var(--driver-popover-bg);
  border:        1px solid var(--driver-popover-border-color);
  border-radius: 12px;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.5);
  font-family:   -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}
.eb-tour-popover .driver-popover-title {
  color:       var(--driver-popover-title-color);
  font-size:   1rem;
  font-weight: 700;
}
.eb-tour-popover .driver-popover-description {
  color:       var(--driver-popover-description-color);
  font-size:   0.875rem;
  line-height: 1.6;
  margin-top:  0.35rem;
}
.eb-tour-popover .driver-popover-progress-text {
  color:       #64748b;
  font-size:   0.72rem;
}
.eb-tour-popover .driver-popover-next-btn {
  appearance:         none;
  -webkit-appearance: none;
  background:    #14b8a6;
  color:         #0f172a;
  border:        none;
  border-radius: 6px;
  font-weight:   600;
  font-family:   inherit;
  text-shadow:   none;
  padding:       0.35rem 0.9rem;
}
.eb-tour-popover .driver-popover-next-btn:hover {
  background: #0d9488;
}
.eb-tour-popover .driver-popover-prev-btn {
  appearance:         none;
  -webkit-appearance: none;
  color:         #94a3b8;
  border:        1px solid #2a3a52;
  border-radius: 6px;
  background:    transparent;
  font-family:   inherit;
  text-shadow:   none;
  padding:       0.35rem 0.9rem;
}
.eb-tour-popover .driver-popover-prev-btn:hover {
  background: #1e2d45;
  color:      #e2e8f0;
}
/* ── Footer: progress text left, buttons right ───────────── */
.eb-tour-popover .driver-popover-footer {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: space-between !important;
  margin-top:      16px !important;
  padding-top:     12px !important;
  border-top:      1px solid #2a3a52 !important;
  gap:             8px !important;
}
.eb-tour-popover .driver-popover-navigation-btns {
  display:        flex !important;
  flex-direction: row !important;
  gap:            8px !important;
}
/* ── Close button pinned top-right ───────────────────────── */
.eb-tour-popover .driver-popover-close-btn {
  position: absolute !important;
  top:      12px !important;
  right:    12px !important;
}
/* Popover hidden until JS has positioned it — prevents jump from bottom */
.driver-popover {
  position:   fixed !important;
  opacity:    0 !important;
  transition: opacity 0.15s ease !important;
}
.driver-popover.eb-popover-ready {
  opacity: 1 !important;
}
/* Spotlight ring colour */
#driver-highlighted-element-stage,
.driver-overlay { --driver-stage-background: rgba(20, 184, 166, 0.08); }


/* ══════════════════════════════════════════════════════════════
   34. STANDALONE FULL-PAGE STATES (EPIC-008)
   Shared by 403.html, 404.html, 500.html, core/maintenance.html,
   accounts/device_limit_blocked.html — templates/standalone_page.html
   is the common base they all extend. Uses existing --bs-* tokens
   only (no reinvented palette) — Bootstrap's own semantic classes
   (btn, btn-outline-secondary, bg-*-subtle, text-*-emphasis) handle
   everything these tokens don't.
   ══════════════════════════════════════════════════════════════ */
.eb-standalone-page {
  --eb-accent-rgb: var(--bs-primary-rgb);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  position: relative;
  overflow-x: hidden;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.eb-standalone-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--bs-primary-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.eb-standalone-page::after {
  content: '';
  position: fixed;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse at center, rgba(var(--eb-accent-rgb), 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.eb-standalone-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(10rem, 35vw, 24rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--eb-accent-rgb), 0.07);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  letter-spacing: -0.04em;
}

.eb-standalone-card {
  position: relative;
  z-index: 1;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-top: 3px solid rgb(var(--eb-accent-rgb));
  border-radius: 16px;
  padding: 2.75rem 3rem;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--eb-accent-rgb), 0.06);
}
.eb-standalone-card.eb-standalone-card-wide { max-width: 620px; }

.eb-standalone-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-bottom: 1.75rem;
}
.eb-standalone-logo svg { width: 34px; height: 34px; }
.eb-standalone-logo-text { font-size: 1rem; font-weight: 700; color: var(--bs-body-color); letter-spacing: -.02em; }
.eb-standalone-logo-text span { color: var(--bs-primary); }

.eb-standalone-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(var(--eb-accent-rgb), 0.1);
  border: 1px solid rgba(var(--eb-accent-rgb), 0.22);
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
  color: rgb(var(--eb-accent-rgb));
}

.eb-standalone-eyebrow {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(var(--eb-accent-rgb));
  background: rgba(var(--eb-accent-rgb), 0.1);
  border: 1px solid rgba(var(--eb-accent-rgb), 0.22);
  border-radius: 20px;
  padding: .25rem .85rem;
  margin-bottom: 1rem;
}

.eb-standalone-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--bs-body-color);
  margin-bottom: .75rem;
  line-height: 1.25;
}

.eb-standalone-message {
  font-size: .925rem;
  color: var(--bs-secondary-color);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.eb-standalone-message strong { color: var(--bs-body-color); font-weight: 600; }

.eb-standalone-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.eb-standalone-footer {
  margin-top: 2rem;
  font-size: .78rem;
  color: var(--bs-secondary-color);
  text-align: center;
}
.eb-standalone-footer a { color: inherit; text-decoration: underline; }
.eb-standalone-footer a:hover { color: var(--bs-primary); }

/* Device-limit page only: left-aligned checklist + upgrade panel below the
   centered heading block — see accounts/device_limit_blocked.html */
.eb-standalone-devicelist {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  text-align: left;
}
.eb-standalone-devicerow {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  background: var(--bs-tertiary-bg, var(--bs-body-bg));
  border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer;
}
.eb-standalone-devicerow:last-child { border-bottom: none; }
.eb-standalone-devicerow:hover { background: var(--bs-secondary-bg); }
.eb-standalone-devicerow input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.eb-standalone-device-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: 1rem;
  flex-shrink: 0;
}
.eb-standalone-device-info { flex-grow: 1; min-width: 0; }
.eb-standalone-device-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-standalone-device-meta { font-size: .75rem; color: var(--bs-secondary-color); }

.eb-standalone-upgrade {
  background: linear-gradient(155deg, var(--bs-primary-bg-subtle) 0%, transparent 60%), var(--bs-secondary-bg);
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 14px;
  padding: 1.75rem;
  text-align: left;
}
.eb-standalone-upgrade-eyebrow {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-primary-text-emphasis);
  margin-bottom: .6rem;
}
.eb-standalone-upgrade-title { font-size: 1.15rem; font-weight: 700; color: var(--bs-body-color); margin-bottom: .4rem; letter-spacing: -.01em; }
.eb-standalone-upgrade-sub { font-size: .85rem; color: var(--bs-secondary-color); line-height: 1.6; margin-bottom: 1.1rem; }
.eb-standalone-perks {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem .75rem;
  margin-bottom: 1.4rem;
  padding: 0;
}
.eb-standalone-perks li { display: flex; align-items: flex-start; gap: .45rem; font-size: .8rem; color: var(--bs-body-color); line-height: 1.4; }
.eb-standalone-perks i { color: var(--bs-primary); font-size: .85rem; margin-top: .2rem; flex-shrink: 0; }

@media (max-width: 480px) {
  .eb-standalone-card { padding: 2rem 1.5rem; }
  .eb-standalone-perks { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   35. LEGAL PAGES (.eb-legal-body)
   Shared by core/legal/cookies.html, privacy.html, terms.html,
   refund.html — union of what were 3 near-identical, drifted
   copies (EB-379). refund.html never had its own copy and
   rendered fully unstyled before this section existed.
   ══════════════════════════════════════════════════════════════ */
.eb-legal-body p,
.eb-legal-body li {
  color: var(--bs-secondary-color);
  line-height: 1.8;
}
.eb-legal-body ul {
  padding-left: 1.25rem;
}
.eb-legal-body li {
  margin-bottom: .4rem;
}
.eb-legal-body a {
  color: var(--eb-teal, #20c997);
}
.eb-legal-body h2 {
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: .5rem;
}
.eb-legal-body h3 {
  color: var(--bs-body-color);
}
.eb-legal-body .table {
  color: var(--bs-secondary-color);
}
.eb-legal-body code {
  font-size: .85em;
  color: var(--eb-teal, #20c997);
}