/* ===================================================================
   DESIGN TOKENS — TIES brand colors: navy primary (#1A3048), gold
   secondary (#9f893c), on white cards over a neutral gray canvas.
   NOTE: variables keep their original names (--emerald, --brass, etc.)
   for minimal-risk refactor — --emerald now holds the navy brand color,
   not green; --brass holds the exact gold brand value.
   =================================================================== */
:root {
  --paper: #f3f4f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #e7e9ec;
  --border-strong: #d7dbe0;
  --ink: #161c19;
  --ink-muted: #6f7871;
  --ink-faint: #9ba39c;

  --emerald: #1a3048;
  --emerald-deep: #0e1c2c;
  --emerald-tint: #e8ecf1;
  --brass: #9f893c;
  --brass-tint: #f6f1e2;
  --wine: #c15656;
  --wine-tint: #fbebeb;
  --slate: #5b7fe0;
  --slate-tint: #eaefff;

  --success: #1a3048;
  --danger: #d64545;
  --warning: #9f893c;
  --info: #5b7fe0;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 25, .04);
  --shadow: 0 4px 14px rgba(20, 30, 25, .06), 0 1px 3px rgba(20,30,25,.05);
  --shadow-lg: 0 20px 44px rgba(20, 30, 25, .13);
  --sidebar-w: 258px;

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-bs-theme="dark"] {
  --paper: #10141a;
  --surface: #182130;
  --surface-raised: #1e2838;
  --border: #2a3646;
  --border-strong: #384658;
  --ink: #eef1ef;
  --ink-muted: #a3acb5;
  --ink-faint: #6d7688;

  --emerald: #4c7096;
  --emerald-deep: #6b93bc;
  --emerald-tint: #1b2836;
  --brass: #cbaf62;
  --brass-tint: #2c2717;
  --wine: #e08080;
  --wine-tint: #2a1717;
  --slate: #8aa4f0;
  --slate-tint: #191f30;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .94rem;
  transition: background .25s ease, color .25s ease;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -.01em; }

a { color: var(--emerald-deep); }
[data-bs-theme="dark"] a { color: var(--emerald); }

.money-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ---------------------------------------------------------- layout --- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  z-index: 40;
  transition: transform .2s ease;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 8px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.sidebar-brand .brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(155deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.sidebar-brand .brand-text { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.1; }
.sidebar-brand .brand-sub { font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-section { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin: 18px 12px 8px; }
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: 12px;
  color: var(--ink-muted); font-size: .89rem; font-weight: 500;
  text-decoration: none;
  position: relative;
}
.nav-link i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--ink-faint); }
.nav-link:hover { background: var(--emerald-tint); color: var(--ink); }
.nav-link.active {
  background: linear-gradient(155deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px rgba(26,48,72,.30);
}
.nav-link.active i { color: #fff; }

.main-col { margin-left: var(--sidebar-w); flex: 1; min-width: 0; }

.topbar {
  height: 66px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px;
  background: rgba(247,245,239,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
[data-bs-theme="dark"] .topbar { background: rgba(16,20,15,.82); }

.breadcrumb { font-size: .82rem; --bs-breadcrumb-divider: '/'; }
.breadcrumb-item.active { color: var(--ink-muted); }

.btn-icon { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 38px; height: 38px; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.btn-icon:hover { border-color: var(--border-strong); }
.btn-user { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 5px; color: var(--ink); }
.avatar-circle { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(155deg, var(--emerald) 0%, var(--emerald-deep) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; font-family: var(--font-display); }

.content { padding: 26px 28px 60px; max-width: 1440px; }

/* ----------------------------------------------------------- cards --- */
.card, .surface {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

.stat-card {
  padding: 20px 22px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.stat-card .label { font-size: .78rem; color: var(--ink-muted); font-weight: 500; }
.stat-card .icon-badge {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint, var(--emerald-tint)); color: var(--accent, var(--emerald)); font-size: 1.1rem; flex-shrink: 0;
}
.stat-card.accent-emerald { --accent: var(--emerald); --accent-tint: var(--emerald-tint); }
.stat-card.accent-brass { --accent: var(--brass); --accent-tint: var(--brass-tint); }
.stat-card.accent-slate { --accent: var(--slate); --accent-tint: var(--slate-tint); }
.stat-card.accent-wine { --accent: var(--wine); --accent-tint: var(--wine-tint); }
.stat-card .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; margin-top: 10px; letter-spacing: -.01em; }
.stat-card .see-more { font-size: .78rem; color: var(--ink-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; }
.stat-card .see-more:hover { color: var(--emerald-deep); }

.glass { background: rgba(255,255,255,.6); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.5); }
[data-bs-theme="dark"] .glass { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.07); }

/* ------------------------------------------------------------ table --- */
.table-modern { --bs-table-bg: transparent; font-size: .89rem; }
.table-modern thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); border-bottom: 1px solid var(--border-strong); font-weight: 700; padding: 12px 14px; }
.table-modern tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table-modern tbody tr:hover { background: var(--emerald-tint); }
.table-modern tbody tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------- buttons --- */
.btn { border-radius: 999px; font-weight: 600; font-size: .87rem; letter-spacing: .01em; }
.btn-sm { border-radius: 999px; }
.btn-dark, .btn-dark:hover, .btn-dark:focus {
  background: linear-gradient(155deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  border-color: var(--emerald-deep); color: #fff;
  box-shadow: 0 6px 16px rgba(26,48,72,.24);
}
.btn-dark:hover { filter: brightness(1.06); }
.btn-outline-secondary { border-color: var(--border-strong); color: var(--ink); }
.btn-outline-secondary:hover { background: var(--emerald-tint); border-color: var(--emerald); color: var(--emerald-deep); }
.btn-outline-danger { border-color: var(--wine); color: var(--wine); }
.btn-outline-danger:hover { background: var(--wine-tint); border-color: var(--wine); color: var(--wine); }
.btn-success { background: var(--emerald); border-color: var(--emerald-deep); }
.btn-danger { background: var(--wine); border-color: var(--wine); }

/* ------------------------------------------------------------ forms --- */
.form-control, .form-select {
  border-radius: var(--radius-sm); border-color: var(--border-strong);
  background: var(--surface); color: var(--ink);
  font-size: .89rem; padding: 8px 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-tint);
}
.form-control-lg { font-size: 1.05rem; padding: 11px 14px; }
.form-check-input:checked { background-color: var(--emerald); border-color: var(--emerald); }
.form-label { color: var(--ink-muted); }

/* ------------------------------------------------------------ badges --- */
.badge-status {
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .65rem;
  padding: 5px 10px; border-radius: 999px; border: 1px solid transparent;
}
.text-bg-secondary.badge-status { background: var(--slate-tint) !important; color: var(--slate) !important; border-color: var(--slate); }
.text-bg-warning.badge-status { background: var(--brass-tint) !important; color: var(--brass) !important; border-color: var(--brass); }
.text-bg-info.badge-status { background: var(--slate-tint) !important; color: var(--slate) !important; border-color: var(--slate); }
.text-bg-success.badge-status { background: var(--emerald-tint) !important; color: var(--emerald-deep) !important; border-color: var(--emerald); }
[data-bs-theme="dark"] .text-bg-success.badge-status { color: var(--emerald) !important; }
.text-bg-dark.badge-status { background: var(--border) !important; color: var(--ink-muted) !important; border-color: var(--border-strong); }
.text-bg-danger.badge-status { background: var(--wine-tint) !important; color: var(--wine) !important; border-color: var(--wine); }

/* -------------------------------------------------------------- fab --- */
.fab {
  position: fixed; right: 28px; bottom: 28px;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(155deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  color: #fff; border: 3px solid var(--paper);
  font-size: 1.5rem; box-shadow: var(--shadow-lg);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.fab:hover { transform: scale(1.06) rotate(90deg); color: #fff; }

/* --------------------------------------------------------- skeleton --- */
.skeleton { background: linear-gradient(90deg, var(--emerald-tint) 25%, var(--border) 37%, var(--emerald-tint) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 8px; }
@keyframes skeleton-loading { 0% {background-position: 100% 50%;} 100% {background-position: 0 50%;} }

/* ------------------------------------------------------- empty state --- */
.empty-state { text-align: center; padding: 56px 20px; color: var(--ink-faint); }
.empty-state i { font-size: 2.2rem; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--emerald-tint); color: var(--emerald); }

/* --------------------------------------------------------- modals --- */
.modal-content { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border); padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--border); padding: 16px 22px; }
.modal-body { padding: 20px 22px; }
.modal-title { font-family: var(--font-display); font-weight: 600; }

.qa-date-card {
  background: var(--emerald-tint); border: 1px dashed var(--emerald);
  border-radius: var(--radius); padding: 16px;
}
.qa-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px; margin-bottom: 8px; background: var(--surface);
}
.qa-row-index {
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint);
  flex: 0 0 18px; order: 1;
}
.qa-field { min-width: 0; }
.qa-field-category { flex: 1 1 130px; order: 2; }
.qa-field-desc { flex: 1 1 100%; order: 3; }
.qa-field-qty { flex: 1 1 70px; order: 4; }
.qa-field-price { flex: 1 1 90px; order: 5; }
.qa-remove-row { order: 6; flex: 0 0 auto; }
.qa-field select, .qa-field input { width: 100%; }

/* Large screens: one horizontal line per row. Small screens keep the
   default stacked layout above (each field wraps onto its own line). */
@media (min-width: 768px) {
  .qa-row { flex-wrap: nowrap; }
  .qa-field-category { flex: 0 0 150px; }
  .qa-field-desc { flex: 1 1 auto; }
  .qa-field-qty { flex: 0 0 80px; }
  .qa-field-price { flex: 0 0 100px; }
}

.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--emerald-tint); color: var(--emerald-deep);
  font-size: .78rem; font-weight: 600;
}
[data-bs-theme="dark"] .cat-pill { color: var(--emerald); }

/* ------------------------------------------------------- dashboard hero --- */
.eyebrow {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-faint); font-weight: 600;
}

.wallet-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #25415c 0%, var(--emerald) 45%, var(--emerald-deep) 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: 26px 26px 22px; height: 100%;
  box-shadow: 0 20px 40px rgba(14,28,44,.32);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 210px;
}
.wallet-card::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,255,255,.08);
}
.wallet-card::after {
  content: ""; position: absolute; right: 40px; bottom: -70px; width: 160px; height: 160px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}
.wallet-card-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.wallet-chip {
  width: 38px; height: 28px; border-radius: 6px;
  background: linear-gradient(155deg, #ecdfb6, var(--brass));
  position: relative; z-index: 1;
}
.wallet-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 600; }
.wallet-balance {
  font-family: var(--font-mono); font-size: 2.15rem; font-weight: 700;
  margin: 10px 0 4px; letter-spacing: -.01em; position: relative; z-index: 1;
}
.wallet-currency { font-size: .95rem; opacity: .8; font-weight: 500; margin-left: 6px; }
.wallet-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1; }
.wallet-mask { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .18em; opacity: .8; }
.wallet-updated { font-size: .7rem; opacity: .75; text-align: right; }

.wallet-budget { position: relative; z-index: 1; margin-top: 10px; }
.wallet-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.wallet-progress-bar { height: 100%; background: #fff; border-radius: 999px; transition: width .4s ease; }

.qa-hero {
  height: 100%;
  background: var(--surface);
  border: 1.5px dashed var(--brass);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 210px;
}
.qa-hero-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brass-tint); color: var(--brass);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 14px;
}

.trend-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.trend-up { background: var(--wine-tint); color: var(--wine); }
.trend-down { background: var(--emerald-tint); color: var(--emerald-deep); }
[data-bs-theme="dark"] .trend-down { color: var(--emerald); }

.card { transition: transform .15s ease, box-shadow .15s ease; }
.stat-card:hover, .card:hover { box-shadow: var(--shadow); }

.chip-toggle { display: inline-flex; background: var(--emerald-tint); border-radius: 999px; padding: 3px; gap: 2px; }
.chip-toggle span { font-size: .74rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; color: var(--ink-muted); }
.chip-toggle span.active { background: var(--emerald); color: #fff; }

/* ------------------------------------------------------- reports page --- */
.segmented {
  display: inline-flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.seg-btn {
  border: none; background: transparent; color: var(--ink-muted);
  font-size: .83rem; font-weight: 600; padding: 7px 16px; border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active {
  background: linear-gradient(155deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  color: #fff; box-shadow: 0 3px 10px rgba(26,48,72,.32);
}

.cat-bar-row { margin-bottom: 14px; }
.cat-bar-row:last-child { margin-bottom: 0; }
.cat-bar-label { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 5px; font-weight: 500; }
.cat-bar-track { height: 8px; border-radius: 999px; background: var(--emerald-tint); overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }

.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

.txn-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; }
.status-dot.dot-success { background: var(--emerald); }
.status-dot.dot-warning { background: var(--brass); }
.status-dot.dot-info { background: var(--slate); }
.status-dot.dot-danger { background: var(--wine); }
.status-dot.dot-secondary { background: var(--ink-faint); }

.impersonate-banner {
  position: fixed; top: 0; left: 0; right: 0; height: 36px; z-index: 60;
  background: var(--brass); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px; font-size: .82rem; font-weight: 600;
}
.impersonate-banner .btn-light { font-size: .74rem; font-weight: 600; line-height: 1.4; }

body.impersonating .sidebar { top: 36px; bottom: 0; }
body.impersonating .topbar { top: 36px; }
body.impersonating .app-shell { padding-top: 36px; }

.item-suggest-dropdown {
  position: fixed; z-index: 1080;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 220px; overflow-y: auto;
}
.item-suggest-option {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; border-bottom: 1px solid var(--border); background: var(--surface);
  text-align: left; font-size: .85rem; color: var(--ink); cursor: pointer;
}
.item-suggest-option:last-child { border-bottom: none; }
.item-suggest-option:hover, .item-suggest-option:focus { background: var(--emerald-tint); }

/* ------------------------------------------------------------ misc --- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--paper); }
.auth-card { width: 100%; max-width: 400px; padding: 40px 36px; }

@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main-col { margin-left: 0; }
  .content { padding: 16px; }
}

/* ------------------------------------------------------- phone (<=576px) */
@media (max-width: 576px) {
  body { font-size: .89rem; }
  .content { padding: 12px; padding-bottom: 90px; } /* leave room above the FAB */

  .topbar { height: 56px; padding: 0 12px; gap: 8px; }
  .breadcrumb { display: none; } /* page heading inside .content already says where we are */

  h4.fw-bold, h5.fw-bold { font-size: 1.15rem; }
  h6.fw-bold { font-size: .95rem; }

  /* Hero / feature cards: less padding, smaller headline figures */
  .wallet-card, .qa-hero { padding: 18px 18px; min-height: 0; }
  .wallet-balance { font-size: 1.7rem; }
  .wallet-card-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wallet-updated { text-align: left; }

  .stat-card { padding: 14px 16px; }
  .stat-card .value { font-size: 1.15rem; }
  .stat-card .icon-badge { width: 32px; height: 32px; font-size: .95rem; }

  /* Auth screens: don't waste half the phone screen on padding */
  .auth-card { padding: 28px 22px; max-width: 100%; }

  /* Modals: tighter padding once they're already full-screen on phones */
  .modal-header, .modal-footer { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal-title { font-size: 1.05rem; }

  /* Quick Add rows: fields stack, larger tap targets */
  .qa-field-category, .qa-field-qty, .qa-field-price { flex-basis: 100%; }
  .qa-row { padding: 12px; }

  /* Segmented control & filter bars: full-width, evenly spaced pills */
  .segmented { width: 100%; }
  .seg-btn { flex: 1; text-align: center; padding: 8px 10px; }

  /* Tables: smaller type, tighter cells so more fits before horizontal scroll kicks in */
  .table-modern { font-size: .8rem; }
  .table-modern thead th, .table-modern tbody td { padding: 9px 10px; }

  .fab { right: 18px; bottom: 18px; width: 52px; height: 52px; font-size: 1.3rem; }

  .cat-pill { font-size: .72rem; padding: 3px 8px; }
  .money-figure { font-size: .92em; }
}