/* ============================================================
   EasyAccounting.App - Global styles & design tokens
   Executive Wealth Design System:
   - Exo 2 Font Family (Clean, geometric, high-legibility)
   - Deep Sky Blue, Emerald & Champagne Gold Palette (No purple/violet)
   - Modern, lucrative, elegant finance surfaces (light/dark)
   ============================================================ */

/* ---------- Google Fonts Fallback / Import ---------- */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/exo-2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/exo-2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/exo-2-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Backward compatibility for previous font names */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/exo-2-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/exo-2-latin.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
  --font-display: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --bg: #f5f7fb;             /* soft cool white canvas */
  --surface: #ffffff;        /* clean white cards, nav */
  --surface-2: #f3f6fa;      /* subtle fills */
  --surface-3: #e9eef5;      /* muted fills / tracks */
  --border: #e4e9f0;         /* hairline border */
  --border-strong: #d2dbe7;  /* stronger border */

  --ink: #0d1b2d;            /* deep ink primary text */
  --ink-2: #23344d;          /* secondary text */
  --ink-3: #64758f;          /* muted text */

  --brand: #0284c7;          /* deep sky blue (readable accent) */
  --brand-strong: #0369a1;   /* deeper sky blue */
  --brand-bright: #0ea5e9;   /* bright sky blue for fills/gradients */
  --brand-soft: #e6f5fe;     /* sky blue tint */
  --ring: rgba(2, 132, 199, 0.22);

  --success: #0b8f68;        /* refined emerald (money in) */
  --danger: #b3455f;         /* refined rose (money out) */
  --warning: #b49332;        /* champagne gold (warnings) */
  --gold: #b49332;           /* champagne gold accent */

  color-scheme: light;
}

html.dark {
  --bg: #0a101d;             /* deep navy-black canvas */
  --surface: #0e1728;        /* dark card surface */
  --surface-2: #141f36;      /* subtle dark fills */
  --surface-3: #1c2b47;      /* muted dark fills / tracks */
  --border: #1d2c46;         /* hairline dark border */
  --border-strong: #2e4060;

  --ink: #f2f6fc;            /* blue-tinted white primary text */
  --ink-2: #cbd6e6;          /* secondary text */
  --ink-3: #8294ad;          /* muted text */

  --brand: #38bdf8;          /* soft bright blue */
  --brand-strong: #7dd3fc;   /* lighter blue */
  --brand-soft: rgba(56, 189, 248, 0.14);
  --ring: rgba(56, 189, 248, 0.35);

  --success: #34d9a6;        /* bright emerald */
  --danger: #f3708c;         /* bright rose */
  --warning: #e6c968;        /* bright gold */
  --gold: #e6c968;           /* bright champagne gold */

  color-scheme: dark;
}

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

html, body, button, input, optgroup, select, textarea {
  font-family: var(--font-body);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

.font-display { font-family: var(--font-display); }

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
::-webkit-scrollbar-track { background: transparent; }

/* Hide scrollbar for segmented tabs / horizontal carousels */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Bootstrap Icons baseline */
i.bi { line-height: 1; vertical-align: -0.125em; }

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ---------- Form fields ---------- */
.field {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  padding: 0.6rem 0.8rem;
  font-size: 0.925rem;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.field::placeholder { color: var(--ink-3); }
.field[disabled] { background: var(--surface-2); color: var(--ink-3); }

/* ---------- Card (crisp, refined elevation) ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 
    0 1px 2px rgba(13, 27, 45, 0.04),
    0 4px 16px -6px rgba(13, 27, 45, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: 
    0 1px 2px rgba(13, 27, 45, 0.05),
    0 10px 28px -10px rgba(13, 27, 45, 0.12);
}
html.dark .card {
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 6px 20px -8px rgba(0, 0, 0, 0.55);
}
html.dark .card:hover {
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 12px 32px -10px rgba(0, 0, 0, 0.65);
}

/* ---------- Brand accents & gradients (Deep Sky Blue) ---------- */
.brand-gradient {
  background: linear-gradient(118deg, #0284c7 0%, #0ea5e9 48%, #0b8f68 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 800;
}
html.dark .brand-gradient {
  background: linear-gradient(118deg, #38bdf8 0%, #7dd3fc 45%, #34d9a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 800;
}

.brand-bg {
  background: linear-gradient(140deg, #0ea5e9 0%, #0284c7 52%, #0369a1 100%);
  color: #ffffff;
}
html.dark .brand-bg {
  background: linear-gradient(140deg, #0ea5e9 0%, #0284c7 52%, #0369a1 100%);
  color: #ffffff;
}

/* ---------- Logo lockup: one-line lucrative wordmark ---------- */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
  text-decoration: none;
}
.brand-mark {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #ffffff;
  background: linear-gradient(140deg, #38bdf8 0%, #0284c7 55%, #0b8f68 130%);
  box-shadow: 0 4px 12px -3px rgba(2, 132, 199, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.45) 0%, transparent 42%);
  pointer-events: none;
}
a.brand-lockup:hover .brand-mark {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 18px -4px rgba(2, 132, 199, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.brand-wordmark {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Exo 2', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.brand-wordmark .brand-rest {
  color: #0f172a;
  font-weight: 800;
}
.brand-lockup-sm .brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  font-size: 1rem;
}
.brand-lockup-sm .brand-wordmark {
  font-size: 0.95rem;
}

/* Brand utility bindings */
.bg-brand-600 { background-color: var(--brand) !important; color: #ffffff; }
.bg-brand-50 { background-color: var(--brand-soft) !important; }
.text-brand-600 { color: var(--brand) !important; }
.text-brand-700 { color: var(--brand-strong) !important; }
.border-brand-600 { border-color: var(--brand) !important; }
.border-brand-300 { border-color: var(--border-strong) !important; }
.hover\:bg-brand-50:hover { background-color: var(--brand-soft) !important; }
.hover\:text-brand-600:hover { color: var(--brand-strong) !important; }

/* ---------- Collapsible sidebar Admin section ---------- */
.admin-nav-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}
#admin-nav.collapsed .admin-nav-collapse {
  grid-template-rows: 0fr;
  opacity: 0;
}
.admin-nav-inner {
  overflow: hidden;
  min-height: 0;
}
#admin-nav-chevron {
  transition: transform 0.2s ease;
}
#admin-nav.collapsed #admin-nav-chevron {
  transform: rotate(-90deg);
}

/* ---------- Mobile quick-add FAB ---------- */
.quick-add-fab {
  position: relative;
  border-radius: 1.15rem;
  box-shadow:
    0 10px 22px -8px rgba(2, 132, 199, 0.65),
    0 0 0 4px #ffffff,
    0 3px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.quick-add-fab:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.06);
  box-shadow:
    0 14px 28px -8px rgba(2, 132, 199, 0.7),
    0 0 0 4px #ffffff,
    0 3px 8px rgba(0, 0, 0, 0.22);
}
.quick-add-fab:active {
  transform: scale(0.94);
}
.quick-add-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.4) 0%, transparent 45%);
  pointer-events: none;
}

/* ---------- Fade / slide animations ---------- */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px) } to { opacity: 1; transform: translateX(0) } }
.anim-fade { animation: fadeIn .25s ease both; }
.anim-up { animation: slideUp .3s ease both; }
.anim-right { animation: slideInRight .25s ease both; }

/* Skeleton shimmer */
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: 8px;
}

/* ---------- Toasts ---------- */
#toast-root {
  position: fixed;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: calc(100% - 2rem);
  max-width: 22rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem 1rem;
  border-radius: 8px;
  color: #fff;
  font-size: .875rem;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.3);
  animation: slideUp .25s ease both;
}
.toast.success { background: #0b8f68; }
.toast.error { background: #b3455f; }
.toast.info { background: #0284c7; }

/* ---------- Theme switcher ---------- */
.theme-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-3);
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border-radius: 7px;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
html.dark .theme-switch button.active { box-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ============================================================
   Dark-mode overrides for Tailwind utility colors
   ============================================================ */
html.dark .bg-white { background-color: var(--surface) !important; }
html.dark .bg-white\/90 { background-color: rgba(14, 23, 40, .9) !important; }
html.dark .bg-white\/10 { background-color: rgba(255, 255, 255, .05) !important; }
html.dark .bg-slate-100 { background-color: var(--surface-3) !important; }
html.dark .bg-slate-50 { background-color: var(--surface-2) !important; }
html.dark .bg-slate-200 { background-color: #1c2b47 !important; }
html.dark .bg-slate-200\/70 { background-color: rgba(28, 43, 71, .7) !important; }
html.dark .bg-slate-900\/50 { background-color: rgba(10, 16, 29, .7) !important; }

html.dark .bg-brand-50 { background-color: var(--brand-soft) !important; }
html.dark .bg-emerald-50 { background-color: rgba(52, 217, 166, .12) !important; }
html.dark .bg-rose-50 { background-color: rgba(243, 112, 140, .12) !important; }
html.dark .bg-amber-50 { background-color: rgba(230, 201, 104, .12) !important; }
html.dark .bg-amber-50\/60 { background-color: rgba(230, 201, 104, .08) !important; }
html.dark .bg-amber-100 { background-color: rgba(230, 201, 104, .18) !important; }
html.dark .bg-sky-50 { background-color: rgba(56, 189, 248, .14) !important; }
html.dark .bg-sky-100 { background-color: rgba(56, 189, 248, .22) !important; }
html.dark .bg-violet-50 { background-color: rgba(56, 189, 248, .14) !important; }
html.dark .bg-violet-100 { background-color: rgba(56, 189, 248, .22) !important; }
html.dark .bg-indigo-50 { background-color: rgba(56, 189, 248, .14) !important; }

html.dark .text-slate-900 { color: var(--ink) !important; }
html.dark .text-slate-800 { color: #f2f6fc !important; }
html.dark .text-slate-700 { color: #dce4f0 !important; }
html.dark .text-slate-600 { color: var(--ink-2) !important; }
html.dark .text-slate-500 { color: #8294ad !important; }
html.dark .text-slate-400 { color: var(--ink-3) !important; }
html.dark .text-slate-300 { color: #5c6d87 !important; }

html.dark .text-brand-600 { color: var(--brand) !important; }
html.dark .text-brand-700 { color: var(--brand-strong) !important; }
html.dark .text-emerald-600 { color: #34d9a6 !important; }
html.dark .text-emerald-500 { color: #34d9a6 !important; }
html.dark .text-rose-500 { color: #f3708c !important; }
html.dark .text-rose-600 { color: #f3708c !important; }
html.dark .text-rose-400 { color: #f3708c !important; }
html.dark .text-amber-600 { color: #e6c968 !important; }
html.dark .text-amber-500 { color: #e6c968 !important; }
html.dark .text-sky-600 { color: #7dd3fc !important; }
html.dark .text-sky-500 { color: #38bdf8 !important; }
html.dark .text-violet-600 { color: #38bdf8 !important; }
html.dark .text-violet-500 { color: #7dd3fc !important; }
html.dark .text-indigo-600 { color: #38bdf8 !important; }

html.dark .border-slate-200 { border-color: var(--border) !important; }
html.dark .border-slate-100 { border-color: #1c2b47 !important; }
html.dark .border-slate-300 { border-color: #2e4060 !important; }
html.dark .border-brand-600 { border-color: var(--brand) !important; }
html.dark .border-brand-300 { border-color: #0369a1 !important; }
html.dark .border-rose-200 { border-color: #4a1f2c !important; }
html.dark .border-rose-100 { border-color: #3a1822 !important; }
html.dark .border-amber-100 { border-color: #4a3a12 !important; }

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1c2b47 !important; }

/* ---------- Page actions toolbar ---------- */
#page-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  #page-actions {
    gap: 0.5rem;
  }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: 2.5rem; }
.footer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(13, 27, 45, 0.04);
}
.footer-logo { height: 1.5rem; }
.footer-text {
  font-size: 0.75rem;
  color: var(--ink-3);
}
.footer-text a {
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.15s ease;
}
.footer-text a:hover { color: var(--brand); }

/* Print styles */
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .print-block { box-shadow: none !important; border: none !important; }
}

/* ============================================================
   Shared design language — Ledger system
   Quick actions, summary strip, pill tabs, search, txn rows,
   badges, bottom sheets and buttons. Reused across pages.
   Deep Sky Blue · Emerald · Champagne Gold executive system
   ============================================================ */

/* ---------- Quick action tiles ---------- */
.lg-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.lg-actions-single { grid-template-columns: minmax(0, 1fr); }

.lg-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  color: #ffffff;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lg-action::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.22), transparent 55%);
  pointer-events: none;
}
.lg-action:hover { transform: translateY(-2px); }
.lg-action:active { transform: translateY(0) scale(0.985); }
.lg-action:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

.lg-action-in {
  background: linear-gradient(135deg, #0fa06f 0%, #0b8f68 52%, #086e52 100%);
  box-shadow: 0 10px 24px -12px rgba(11, 143, 104, 0.75);
}
.lg-action-out {
  background: linear-gradient(135deg, #c0506a 0%, #b3455f 52%, #8e3750 100%);
  box-shadow: 0 10px 24px -12px rgba(179, 69, 95, 0.75);
}
.lg-action-loan {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 52%, #0369a1 100%);
  box-shadow: 0 10px 24px -12px rgba(2, 132, 199, 0.75);
}

.lg-action-icon {
  position: relative;
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.lg-action-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.lg-action-label { font-weight: 800; font-size: 0.98rem; }
.lg-action-sub { font-size: 0.68rem; font-weight: 500; opacity: 0.82; margin-top: 0.12rem; }

/* ---------- Summary strip ---------- */
.lg-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-summary-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-summary-cell { padding: 0.2rem 0.6rem; text-align: center; }
.lg-summary-cell + .lg-summary-cell { border-left: 1px solid var(--border); }
.lg-summary-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg-summary-value {
  font-size: 1.12rem;
  font-weight: 800;
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.lg-summary-in { color: #0b8f68; }
.lg-summary-out { color: #b3455f; }
.lg-summary-pending { color: #b49332; }
html.dark .lg-summary-in { color: #34d9a6; }
html.dark .lg-summary-out { color: #f3708c; }
html.dark .lg-summary-pending { color: #e6c968; }

/* ---------- Segmented pill bar ---------- */
.lg-pill-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 9999px;
  max-width: 100%;
  overflow-x: auto;
}

.lg-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.42rem 0.85rem;
  min-height: 2rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
}
.lg-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.65); }
html.dark .lg-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.lg-tab:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

.lg-tab-active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 3px 10px -3px rgba(2, 132, 199, 0.55);
}
.lg-tab-active:hover { color: #ffffff; background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }

.lg-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  background: rgba(180, 147, 50, 0.16);
  color: #8a6d1f;
  font-size: 0.66rem;
  font-weight: 800;
}
.lg-tab-active .lg-tab-badge { background: rgba(255, 255, 255, 0.28); color: #ffffff; }
.lg-tab-badge.hidden { display: none; }

/* ---------- Segmented filter ---------- */
.lg-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  flex-shrink: 0;
}
.lg-seg-tab {
  padding: 0.42rem 0.72rem;
  border-radius: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lg-seg-tab:hover { color: var(--ink); }
.lg-seg-tab-active {
  background: var(--surface);
  color: var(--brand-strong);
  box-shadow: 0 1px 2px rgba(13, 27, 45, 0.12);
}
html.dark .lg-seg-tab-active { background: var(--surface-2); color: #7dd3fc; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* ---------- Search ---------- */
.lg-search { position: relative; }
.lg-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  display: flex;
  pointer-events: none;
}
.lg-search-input { padding-left: 2.5rem !important; }

/* ---------- List rows ---------- */
.lg-txn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
}
.lg-txn:hover { border-color: var(--border-strong); }

.lg-txn-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.lg-txn-icon-in { background: rgba(11, 143, 104, 0.1); color: #0b8f68; }
.lg-txn-icon-out { background: rgba(179, 69, 95, 0.1); color: #b3455f; }
.lg-txn-icon-loan { background: rgba(2, 132, 199, 0.1); color: #0284c7; }
html.dark .lg-txn-icon-in { background: rgba(52, 217, 166, 0.13); color: #34d9a6; }
html.dark .lg-txn-icon-out { background: rgba(243, 112, 140, 0.13); color: #f3708c; }
html.dark .lg-txn-icon-loan { background: rgba(56, 189, 248, 0.13); color: #38bdf8; }

.lg-txn-title { font-weight: 600; color: var(--ink); }
.lg-txn-sub { font-size: 0.72rem; color: var(--ink-3); }
.lg-txn-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.lg-txn-amount-in { color: #0b8f68; }
.lg-txn-amount-out { color: #b3455f; }
html.dark .lg-txn-amount-in { color: #34d9a6; }
html.dark .lg-txn-amount-out { color: #f3708c; }

/* ---------- Status badges ---------- */
.lg-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.13rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.lg-badge-pending { background: rgba(180, 147, 50, 0.13); color: #8a6d1f; }
.lg-badge-approved { background: rgba(11, 143, 104, 0.13); color: #0b8f68; }
.lg-badge-rejected { background: rgba(179, 69, 95, 0.13); color: #b3455f; }
.lg-badge-done { background: rgba(2, 132, 199, 0.12); color: #0284c7; }
.lg-badge-due { background: var(--surface-3); color: var(--ink-3); }
html.dark .lg-badge-pending { color: #e6c968; }
html.dark .lg-badge-approved { color: #34d9a6; }
html.dark .lg-badge-rejected { color: #f3708c; }
html.dark .lg-badge-done { color: #7dd3fc; }

/* ---------- Bottom sheets ---------- */
.lg-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 16, 29, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lg-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  z-index: 51;
  width: 100%;
  max-width: 32rem;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  box-shadow: 0 -12px 44px -14px rgba(0, 0, 0, 0.45);
  animation: slideUp 0.3s ease both;
}
@media (min-width: 640px) {
  .lg-sheet { bottom: 1.5rem; border-radius: 1.25rem; max-height: 90vh; }
}

.lg-sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.lg-sheet-title { font-weight: 800; color: var(--ink); }
.lg-sheet-close {
  color: var(--ink-3);
  padding: 0.3rem;
  border-radius: 0.5rem;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}
.lg-sheet-close:hover { color: var(--ink); background: var(--surface-3); }

/* Entry type picker */
.lg-type-pick {
  padding: 0.68rem 0.9rem;
  border-radius: 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  transition: all 0.15s ease;
}
.lg-type-pick:hover { border-color: var(--brand); color: var(--brand-strong); }
.lg-type-pick-in {
  background: linear-gradient(135deg, #0fa06f, #0b8f68);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px -6px rgba(11, 143, 104, 0.65);
}
.lg-type-pick-out {
  background: linear-gradient(135deg, #c0506a, #b3455f);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px -6px rgba(179, 69, 95, 0.65);
}

/* Submit button */
.lg-submit {
  width: 100%;
  padding: 0.92rem 1rem;
  border-radius: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.lg-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.lg-submit:active { transform: translateY(0); }
.lg-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.lg-submit-in { background: linear-gradient(135deg, #0fa06f, #0b8f68); box-shadow: 0 8px 20px -10px rgba(11, 143, 104, 0.7); }
.lg-submit-out { background: linear-gradient(135deg, #c0506a, #b3455f); box-shadow: 0 8px 20px -10px rgba(179, 69, 95, 0.7); }
.lg-submit-loan {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 60%, #0369a1 100%);
  box-shadow: 0 8px 20px -10px rgba(2, 132, 199, 0.7);
}

/* Row / detail action buttons */
.lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 1;
  padding: 0.8rem 0.9rem;
  border-radius: 0.7rem;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.lg-btn:hover { transform: translateY(-1px); }
.lg-btn:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.lg-btn-approve { background: linear-gradient(135deg, #0fa06f, #0b8f68); color: #ffffff; }
.lg-btn-danger { background: linear-gradient(135deg, #c0506a, #b3455f); color: #ffffff; }
.lg-btn-reject { background: var(--surface); border: 1px solid rgba(179, 69, 95, 0.35); color: #b3455f; }
.lg-btn-delete { background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink-3); }
.lg-btn-loan { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #ffffff; }
html.dark .lg-btn-reject { color: #f3708c; }
html.dark .lg-btn-delete { color: var(--ink-2); }

/* Compact inline variant for small rows */
.ln-btn-inline { flex: none; padding: 0.45rem 0.75rem; font-size: 0.75rem; }
.ln-btn-inline:hover { transform: none; }

/* Full-width row variant for card approve/reject */
.ln-btn-row { font-size: 0.78rem; padding: 0.6rem 0.9rem; }

/* ---------- Toolbar buttons (export / import / tools) ---------- */
.lg-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  min-height: 2.6rem;
  min-width: 2.6rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(13, 27, 45, 0.04);
  white-space: nowrap;
}
.lg-tool:hover {
  color: var(--brand-strong);
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-1px);
}
html.dark .lg-tool:hover { background: rgba(56, 189, 248, 0.1); }
.lg-tool:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

/* ---------- Sidebar profile link ---------- */
.sidebar-profile-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 0%;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.sidebar-profile-link:hover {
  background: #f1f5f9; /* slate-100 */
}
html.dark .sidebar-profile-link:hover {
  background: rgba(255,255,255,0.07);
}
.sidebar-profile-link.active {
  background: var(--brand-soft, #e0f2fe);
}