/* NAMELESS Finance Tracker — CSS v4.26.95 | Datix-inspired light theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Light theme palette (Datix-style) ─────────────────── */
  --bg-base:     #f0f2f7;
  --bg-surface:  #ffffff;
  --bg-card:     #ffffff;
  --bg-hover:    #f4f6fb;
  --bg-input:    #f8f9fc;
  --bg-sidebar:  #ffffff;

  --border:      #e4e8f0;
  --border-light:#eef0f6;

  --text-primary:   #2d3748;
  --text-secondary: #718096;
  --text-muted:     #a0aec0;
  --text-white:     #ffffff;

  /* Accent — Datix indigo */
  --accent:      #5b73e8;
  --accent-dim:  #4a61d4;
  --accent-glow: rgba(91,115,232,0.12);
  --accent-light:#eef0fd;

  /* Stat card gradients */
  --grad-blue:   linear-gradient(135deg, #4e73e5 0%, #6f8ef0 100%);
  --grad-orange: linear-gradient(135deg, #e8784a 0%, #f09a72 100%);
  --grad-green:  linear-gradient(135deg, #2dca8c 0%, #52d9a8 100%);
  --grad-yellow: linear-gradient(135deg, #f6c343 0%, #f8d06b 100%);
  --grad-purple: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);

  --positive:    #2dca8c;
  --positive-bg: rgba(45,202,140,0.1);
  --negative:    #e74c3c;
  --negative-bg: rgba(231,76,60,0.1);
  --warn:        #f6c343;
  --warn-bg:     rgba(246,195,67,0.12);

  --sidebar-w:   180px;
  --topbar-h:    64px;
  --radius:      10px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow:      0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);

  --font-main:   'Inter', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
}

/* Dark mode override */
body.dark-mode {
  --bg-base:       #0f1117;
  --bg-surface:    #171c26;
  --bg-card:       #1e2535;
  --bg-hover:      #252d40;
  --bg-input:      #12161f;
  --bg-sidebar:    #171c26;
  --border:        #2a3347;
  --border-light:  #323d55;
  --text-primary:  #e8eaf0;
  --text-secondary:#8892aa;
  --text-muted:    #4e5a72;
  --accent-light:  rgba(91,115,232,0.15);
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.3);
  --shadow:        0 2px 12px rgba(0,0,0,0.4);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; }
body {
  font-family: var(--font-main);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:3px; }

/* ── LOGIN ──────────────────────────────────────────────────── */
.login-body {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
  background: var(--bg-base);
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(91,115,232,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 80%, rgba(45,202,140,0.06) 0%, transparent 60%);
}
.login-container { width:100%; max-width:420px; padding:20px; }
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 36px 32px;
  box-shadow: var(--shadow-lg);
}
.login-logo { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.login-logo .logo-icon { font-size:1.8rem; color:var(--accent); }
.login-logo .logo-text { font-size:1.3rem; font-weight:800; letter-spacing:.06em; color:var(--text-primary); }
.login-subtitle { color:var(--text-muted); font-size:.83rem; margin-bottom:28px; }

.password-wrap { position:relative; }
.password-wrap input { padding-right:40px; }
[dir="rtl"] .password-wrap input { padding-right:12px; padding-left:40px; }
.eye-btn {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--text-muted); display:flex;
}
[dir="rtl"] .eye-btn { right:auto; left:10px; }
.eye-btn svg { width:17px; height:17px; }
.eye-btn:hover { color:var(--accent); }

.checkbox-label {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:.85rem; color:var(--text-secondary); user-select:none;
}
.checkbox-label input[type="checkbox"] { display:none; }
.checkmark {
  width:17px; height:17px; border:1.5px solid var(--border);
  border-radius:4px; background:var(--bg-input); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.checkbox-label input:checked + .checkmark { background:var(--accent); border-color:var(--accent); }
.checkbox-label input:checked + .checkmark::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; }

.captcha-box {
  border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin-bottom:16px; background:var(--bg-input);
}
.captcha-inner { display:flex; align-items:center; justify-content:space-between; }
.captcha-label { color:var(--text-primary); font-size:.9rem; }
.captcha-logo { text-align:center; color:var(--text-muted); font-size:.68rem; }
.captcha-icon { font-size:1.4rem; }
.captcha-challenge { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.captcha-challenge p { font-size:.85rem; color:var(--text-secondary); margin-bottom:6px; }
.captcha-challenge input { width:110px; }
.captcha-verified { margin-top:8px; color:var(--positive); font-size:.85rem; font-weight:600; }
.error-msg {
  background:var(--negative-bg); border:1px solid var(--negative);
  color:var(--negative); border-radius:8px; padding:8px 12px;
  font-size:.83rem; margin-bottom:12px;
}
.login-hint { text-align:center; font-size:.75rem; color:var(--text-muted); margin-top:14px; }

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

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top:0; left:0; bottom:0;
  z-index: 100;
  transition: transform .3s;
  box-shadow: var(--shadow-sm);
}
[dir="rtl"] .sidebar { left:auto; right:0; border-right:none; border-left:1px solid var(--border); }

.sidebar-logo {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items:center; gap:10px;
}
.logo-icon { font-size:1.5rem; color:var(--accent); }
.logo-text { font-size:1.05rem; font-weight:800; letter-spacing:.04em; color:var(--text-primary); }

.sidebar-nav { flex:1; padding:12px 10px; overflow-y:auto; }
.nav-section-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-muted); padding:12px 10px 4px;
}
.nav-item {
  display: flex; align-items:center; gap:10px;
  padding: 9px 12px; border-radius:8px;
  cursor: pointer; color:var(--text-secondary);
  font-size:.875rem; font-weight:500;
  transition: all .15s; margin-bottom:1px;
  text-decoration: none; user-select:none;
}
.nav-item:hover { background:var(--accent-light); color:var(--accent); }
.nav-item.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(91,115,232,0.35);
}
.nav-item.active svg { stroke:#fff; }
.nav-item svg { width:17px; height:17px; flex-shrink:0; }

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  font-size: .7rem;
  color: var(--text-muted);
  text-align: center;
  font-family: var(--font-mono);
}

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
  position: fixed; top:0; right:0; left:var(--sidebar-w);
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 24px; z-index:90;
  box-shadow: var(--shadow-sm);
  transition: left .3s, right .3s;
}
[dir="rtl"] .topbar { left:0; right:var(--sidebar-w); }

.topbar-left { display:flex; align-items:center; gap:14px; }
.menu-toggle-btn {
  background:none; border:none; cursor:pointer;
  color:var(--text-secondary); padding:6px; border-radius:6px;
  display:flex; align-items:center; transition:all .15s;
}
.menu-toggle-btn:hover { background:var(--bg-hover); color:var(--accent); }
.menu-toggle-btn svg { width:18px; height:18px; }

/* Breadcrumb */
.breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:.82rem; color:var(--text-muted);
}
.breadcrumb a { color:var(--text-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb .sep { font-size:.8rem; }
.breadcrumb .current { color:var(--text-primary); font-weight:600; }

/* Search */
.topbar-search {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; padding:6px 12px; min-width:200px;
}
.topbar-search svg { width:15px; height:15px; color:var(--text-muted); flex-shrink:0; }
.topbar-search input {
  border:none; background:none; outline:none;
  font-size:.83rem; color:var(--text-primary); width:100%;
  font-family:var(--font-main);
}
.topbar-search input::placeholder { color:var(--text-muted); }

.topbar-right { display:flex; align-items:center; gap:8px; }
.topbar-icon-btn {
  position:relative; background:none; border:none; cursor:pointer;
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); transition:all .15s;
}
.topbar-icon-btn:hover { background:var(--bg-hover); color:var(--accent); }
.topbar-icon-btn svg { width:18px; height:18px; }
.topbar-badge {
  position:absolute; top:-2px; right:-2px;
  background:var(--negative); color:#fff;
  border-radius:10px; font-size:.6rem; font-weight:700;
  min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-surface);
}
.badge-warn { background:var(--warn); color:#333; }
.badge-accent { background:var(--accent); }

.user-avatar {
  width:36px; height:36px; border-radius:50%;
  background: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; color:#fff;
  cursor:pointer; border:2px solid var(--border);
  transition:border-color .15s;
}
.user-avatar:hover { border-color:var(--accent); }

/* Page title (topbar center) */
.topbar-title { font-size:1rem; font-weight:700; color:var(--text-primary); }

/* ── MAIN CONTENT ───────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 20px;
  min-height: calc(100vh - var(--topbar-h));
  transition: margin .3s;
}
[dir="rtl"] .main-content { margin-left:0; margin-right:var(--sidebar-w); }

.page { display:none; }
.page.active { display:block; }

/* ── STAT CARDS ─────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media(max-width:900px) { .stats-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card {
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stat-card-body {
  display: flex;
  align-items: stretch;
  min-height: 80px;
}
.stat-card-icon {
  display: flex; align-items:center; justify-content:center;
  width: 64px; flex-shrink:0;
  background: rgba(0,0,0,0.13);
}
.stat-card-icon svg { width:26px; height:26px; stroke:#fff; opacity:.9; }
.stat-card-info {
  flex:1; padding:10px 14px;
  display:flex; flex-direction:column; justify-content:center;
}
.stat-card-label {
  font-size:.68rem; font-weight:600; color:rgba(255,255,255,0.82);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stat-card-value {
  font-size:1.35rem; font-weight:700; color:#fff;
  line-height:1.15; font-family:var(--font-mono);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stat-card-footer {
  background:rgba(0,0,0,0.10);
  padding:5px 14px;
  font-size:.72rem; color:rgba(255,255,255,0.78);
  display:flex; align-items:center; gap:4px;
}
.stat-card-footer .arrow { font-size:.78rem; }
.sc-blue   { background: var(--grad-blue); }
.sc-orange { background: var(--grad-orange); }
.sc-green  { background: var(--grad-green); }
.sc-yellow { background: var(--grad-yellow); }
.sc-gold   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sc-purple { background: var(--grad-purple); }

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-light);
}
.card-title {
  font-size:.9rem; font-weight:700; color:var(--text-primary);
}
.card-subtitle { font-size:.78rem; color:var(--text-muted); margin-top:2px; }

/* ── TABLES ─────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.86rem; }

thead th {
  padding:11px 14px;
  text-align:left;
  font-weight:600;
  font-size:.78rem;
  color:#fff;
  background: var(--accent);
  white-space:nowrap;
  letter-spacing:.02em;
}
thead th:first-child { border-radius:8px 0 0 8px; }
thead th:last-child  { border-radius:0 8px 8px 0; }
[dir="rtl"] thead th { text-align:right; }
[dir="rtl"] thead th:first-child { border-radius:0 8px 8px 0; }
[dir="rtl"] thead th:last-child  { border-radius:8px 0 0 8px; }

tbody td {
  padding:11px 14px;
  border-bottom:1px solid var(--border-light);
  color:var(--text-primary);
  vertical-align:middle;
}
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--bg-hover); }
tfoot td { padding:11px 14px; border-top:2px solid var(--border); font-weight:700; }

.amount { font-family:var(--font-mono); font-size:.88rem; }
.amount.pos { color:var(--positive); }
.amount.neg { color:var(--negative); }
.amount.zero { color:var(--text-muted); }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:20px;
  font-size:.72rem; font-weight:600; white-space:nowrap;
}
.badge-income   { background:rgba(45,202,140,0.12); color:#1aab74; }
.badge-expense  { background:rgba(231,76,60,0.1);   color:#c0392b; }
.badge-transfer { background:rgba(246,195,67,0.15); color:#c49a00; }
.badge-delivered{ background:rgba(45,202,140,0.12); color:#1aab74; }
.badge-pending  { background:rgba(246,195,67,0.15); color:#b8860b; }
.badge-shipped  { background:rgba(91,115,232,0.12); color:var(--accent); }
.badge-cancelled{ background:rgba(231,76,60,0.1);   color:#c0392b; }

/* ── FORMS ──────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:.82rem; font-weight:600;
  color:var(--text-secondary); margin-bottom:5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 9px 12px;
  font-family: var(--font-main);
  font-size: .88rem;
  outline: none;
  transition: border .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-group select option { background:var(--bg-card); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:9px 20px;
  font-size:.88rem; font-weight:600; cursor:pointer;
  transition:all .15s; font-family:var(--font-main);
  box-shadow:0 2px 8px rgba(91,115,232,0.3);
}
.btn-primary:hover { background:var(--accent-dim); transform:translateY(-1px); box-shadow:0 4px 12px rgba(91,115,232,0.4); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-secondary {
  background:var(--bg-hover); color:var(--text-primary);
  border:1.5px solid var(--border); border-radius:8px;
  padding:9px 20px; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:all .15s; font-family:var(--font-main);
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.btn-danger {
  background:var(--negative-bg); color:var(--negative);
  border:1.5px solid var(--negative); border-radius:8px;
  padding:9px 20px; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:all .15s; font-family:var(--font-main);
}
.btn-danger:hover { background:var(--negative); color:#fff; }
.btn-full { width:100%; }
.btn-sm { padding:5px 12px; font-size:.78rem; }
.btn-icon {
  background:none; border:none; cursor:pointer; padding:6px; border-radius:6px;
  display:flex; align-items:center; color:var(--text-secondary); transition:all .15s;
}
.btn-icon:hover { background:var(--bg-hover); color:var(--accent); }
.btn-icon svg { width:15px; height:15px; }

/* ── TABS ───────────────────────────────────────────────────── */
.tabs {
  display:flex; gap:0;
  margin-bottom:20px;
  border-bottom:2px solid var(--border);
}
.tab-btn {
  padding:10px 20px; background:none;
  border:none; border-bottom:2px solid transparent;
  color:var(--text-secondary); font-family:var(--font-main);
  font-size:.87rem; font-weight:500; cursor:pointer;
  transition:all .15s; margin-bottom:-2px;
  display:flex; align-items:center; gap:6px;
}
.tab-btn:hover { color:var(--accent); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tab-btn svg { width:15px; height:15px; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ── FAB ────────────────────────────────────────────────────── */
.fab {
  position:fixed; bottom:28px; right:28px;
  width:52px; height:52px;
  background:var(--accent); color:#fff;
  border:none; border-radius:50%; font-size:1.5rem;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(91,115,232,0.45);
  display:flex; align-items:center; justify-content:center;
  z-index:200; transition:all .2s; font-family:var(--font-main); line-height:1;
}
[dir="rtl"] .fab { right:auto; left:28px; }
.fab:hover { transform:scale(1.08) rotate(90deg); box-shadow:0 6px 28px rgba(91,115,232,.6); }

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(3px);
  z-index:300; display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); width:100%; max-width:480px;
  box-shadow:var(--shadow-lg); animation:slideUp .2s ease;
}
@keyframes slideUp {
  from { transform:translateY(20px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
.modal-header {
  padding:18px 22px 14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-size:1rem; font-weight:700; color:var(--text-primary); }
.modal-close {
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:1.1rem; padding:4px 8px;
  border-radius:6px; font-family:var(--font-main); line-height:1;
  transition:all .15s;
}
.modal-close:hover { background:var(--bg-hover); color:var(--negative); }
.modal-body { padding:22px; max-height:70vh; overflow-y:auto; }
.modal-footer {
  padding:14px 22px; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end;
}

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert-bar {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:10px;
  font-size:.85rem; margin-bottom:12px; font-weight:500;
}
.alert-bar.warn    { background:var(--warn-bg);     border:1px solid var(--warn);     color:#7a5f00; }
.alert-bar.danger  { background:var(--negative-bg); border:1px solid var(--negative); color:var(--negative); }
.alert-bar.success { background:var(--positive-bg); border:1px solid var(--positive); color:#0d7a52; }

/* ── PROGRESS ───────────────────────────────────────────────── */
.progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width .5s; }
.progress-fill.ok   { background: linear-gradient(90deg, var(--positive), #52d9a8); }
.progress-fill.warn { background: linear-gradient(90deg, var(--warn), #f8d06b); }
.progress-fill.over { background: linear-gradient(90deg, var(--negative), #ff7373); }

/* ── LAYOUT HELPERS ─────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.flex-row { display:flex; align-items:center; gap:10px; }
.spacer { flex:1; }
.mt-4  { margin-top:4px; }  .mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.mb-16 { margin-bottom:16px; }
.section-title { font-size:1.05rem; font-weight:700; margin-bottom:16px; color:var(--text-primary); }
.divider { border:none; border-top:1px solid var(--border); margin:18px 0; }
.text-muted { color:var(--text-muted); }
.text-sm { font-size:.82rem; }
.mono { font-family:var(--font-mono); }
.cat-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; display:inline-block; }

/* ── TOGGLE ─────────────────────────────────────────────────── */
.toggle-wrap { display:flex; align-items:center; gap:10px; }
.toggle { position:relative; width:42px; height:23px; display:inline-block; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:var(--border);
  border-radius:23px; cursor:pointer; transition:background .2s;
}
.toggle-slider::before {
  content:''; position:absolute; left:3px; top:3px;
  width:17px; height:17px; background:#fff;
  border-radius:50%; transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background:var(--accent); }
.toggle input:checked + .toggle-slider::before { transform:translateX(19px); }

/* ── CUSTOM DROPDOWN ─────────────────────────────────────────── */
/* Hides native select; .custom-select is built by JS */
.select-wrap { position:relative; display:inline-block; }

/* Hide native but keep it accessible for form submission */
.select-wrap select {
  position:absolute; opacity:0; pointer-events:none; width:0; height:0;
}

/* The visible trigger button */
.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 130px;
  transition: border-color .15s, box-shadow .15s;
  user-select: none;
}
.cs-trigger:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.cs-trigger.open {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.cs-trigger-text { flex:1; text-align:left; }
[dir="rtl"] .cs-trigger-text { text-align:right; }

/* Chevron icon */
.cs-chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .2s;
}
.cs-trigger.open .cs-chevron { transform: rotate(180deg); color: var(--accent); }

/* Dropdown panel */
.cs-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 400;
  overflow: hidden;
  animation: csOpen .15s ease;
  max-height: 280px;
  overflow-y: auto;
}
[dir="rtl"] .cs-panel { left:auto; right:0; }
@keyframes csOpen {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Scrollbar inside panel */
.cs-panel::-webkit-scrollbar { width:4px; }
.cs-panel::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* Group label */
.cs-group-label {
  padding: 8px 14px 4px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

/* Individual option */
.cs-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 400;
  color: var(--text-primary);
  transition: background .1s;
}
.cs-option:hover { background: var(--accent-light); color: var(--accent); }
.cs-option.selected {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
.cs-option.selected::after {
  content: '✓';
  margin-left: auto;
  font-size: .8rem;
  color: var(--accent);
}
[dir="rtl"] .cs-option.selected::after { margin-left:0; margin-right:auto; }

/* Sub-option indent (for category children) */
.cs-option.cs-child {
  padding-left: 28px;
  font-size: .83rem;
  color: var(--text-secondary);
}
[dir="rtl"] .cs-option.cs-child { padding-left:14px; padding-right:28px; }
.cs-option.cs-child:hover { color: var(--accent); }

/* Divider between groups */
.cs-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

/* Color dot inside option */
.cs-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Form-group selects (inside modals/settings) ─────────────── */
/* These still use the custom dropdown but sized for forms */
.form-group .select-wrap { display:block; }
.form-group .cs-trigger {
  width: 100%;
  min-width: unset;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .88rem;
}

/* RTL fixes */
[dir="rtl"] .cs-trigger { flex-direction: row-reverse; }
[dir="rtl"] .cs-option.cs-child { padding-right:28px; padding-left:14px; }

/* ── TOAST ──────────────────────────────────────────────────── */
.toast-container {
  position:fixed; bottom:90px; right:24px; z-index:500;
  display:flex; flex-direction:column; gap:8px;
}
[dir="rtl"] .toast-container { right:auto; left:24px; }
.toast {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; padding:11px 16px; font-size:.85rem;
  box-shadow:var(--shadow); animation:toastIn .25s ease;
  display:flex; align-items:center; gap:8px; min-width:220px;
  font-weight:500;
}
@keyframes toastIn { from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }
.toast.success { border-left:3px solid var(--positive); }
.toast.error   { border-left:3px solid var(--negative); }
.toast.warn    { border-left:3px solid var(--warn); }

/* ── VERSION STAMP ──────────────────────────────────────────── */
.version-stamp {
  position:fixed; bottom:8px; left:50%; transform:translateX(-50%);
  font-size:.68rem; color:var(--text-muted); font-family:var(--font-mono);
  z-index:50; pointer-events:none;
}

/* ── STICKY TABLE HEADERS (desktop) ─────────────────────────── */
@media(min-width:769px) {
  .sticky-header thead th { position:sticky; top:0; z-index:2; }
}

/* ── CATEGORY TREE ──────────────────────────────────────────── */
.cat-group {
  background:var(--bg-hover); border:1px solid var(--border);
  border-radius:10px; margin-bottom:8px; transition:box-shadow .2s; cursor:grab;
}
.cat-group:active { cursor:grabbing; }
.cat-group.dragging { opacity:.4; box-shadow:0 0 0 2px var(--accent); }
.cat-group.drop-before { border-top:2px solid var(--accent); }
.cat-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
}
.cat-child-row {
  background:transparent; padding:7px 12px 7px 20px;
  cursor:grab; border-top:1px solid var(--border-light);
}
.cat-child-row:active { cursor:grabbing; }
.cat-child-row.dragging { opacity:.4; }
.drag-handle { color:var(--text-muted); font-size:1rem; cursor:grab; padding:0 2px; user-select:none; flex-shrink:0; }
.drag-handle:active { cursor:grabbing; }
.cat-name-wrap { flex:1; display:flex; align-items:center; gap:5px; min-width:0; }
.cat-name-edit {
  outline:none; padding:3px 6px; border-radius:5px;
  border:1px solid transparent; cursor:text;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; transition:background .15s, border-color .15s;
}
.cat-name-edit:hover { background:var(--bg-card); border-color:var(--border); }
.cat-name-edit:focus { background:var(--bg-card); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.cat-edit-icon { font-size:.78rem; color:var(--text-muted); opacity:0; transition:opacity .15s; pointer-events:none; flex-shrink:0; }
.cat-row:hover .cat-edit-icon { opacity:1; }
.cat-children { border-top:1px solid var(--border-light); padding:4px 0; }
.cat-children-empty { padding:0; }
.cat-drop-zone {
  margin:4px 8px; padding:6px 12px;
  border:1.5px dashed var(--border); border-radius:6px;
  font-size:.75rem; color:var(--text-muted); text-align:center; transition:all .15s;
}
.cat-drop-zone.drop-active { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
.root-drop { margin:8px 0 0; padding:8px; border-radius:8px; }
.child-drop { font-size:.72rem; padding:4px; }
.btn-sub-add {
  background:var(--accent-light); color:var(--accent);
  border:1px solid rgba(91,115,232,0.3); border-radius:6px;
  padding:3px 10px; font-size:.75rem; font-weight:600;
  cursor:pointer; transition:all .15s; white-space:nowrap; font-family:var(--font-main);
}
.btn-sub-add:hover { background:var(--accent); color:#fff; }

/* ── BUDGET ROWS ────────────────────────────────────────────── */
.budget-parent-row td { padding-top:12px; padding-bottom:12px; }
.budget-child-row td {
  padding-top:7px; padding-bottom:7px;
  background:var(--bg-hover); border-bottom-color:transparent;
}
.budget-child-row:last-of-type td { border-bottom:1px solid var(--border-light); }

/* ── DARK MODE TOGGLE BUTTON (topbar) ───────────────────────── */
.dark-toggle { font-size:1rem; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  [dir="rtl"] .sidebar { transform:translateX(100%); }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .topbar { left:0; right:0; }
  .main-content { margin-left:0; margin-right:0; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .fab { bottom:20px; right:16px; }
  [dir="rtl"] .fab { right:auto; left:16px; }
  .modal { max-width:100%; }
  .year-table thead th { position:static; }
  .topbar-search { display:none; }
}

/* Custom dropdown optgroup text (fallback) */
optgroup { font-weight:700; }
option   { font-weight:400; }

/* ── Year table RTL total column fix ────────────────────────── */
/* Total col is always the last DOM column.
   In LTR it renders rightmost. In RTL the table has dir=rtl so
   the last DOM column renders as the leftmost visible column. */
.year-total-col {
  background: var(--bg-hover);
  font-weight: 700;
}
table[dir="rtl"] th:last-child,
table[dir="rtl"] td:last-child {
  /* Extra visual separation for the total col in RTL */
  border-left: 2px solid var(--border);
}
table[dir="ltr"] th:last-child,
table[dir="ltr"] td:last-child {
  border-left: 2px solid var(--border);
}

/* ── Chart modal wider ───────────────────────────────────────── */
.modal.modal-wide { max-width: min(96vw, 1400px); width: 96vw; }

/* ── Budget Month Layout ─────────────────────────────────────── */
@media(min-width:900px){
  .budget-month-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    /* LTR: table left, charts right */
    flex-direction: row;
  }

  /* In RTL the flex direction flips automatically because dir=rtl
     is set on the shell — row-start is the right side visually.
     So charts (which come second in DOM) appear on the LEFT in RTL. */

  .budget-table-pane {
    flex: 1;
    min-width: 0;
    order: 1; /* always first in LTR = left; in RTL flex reversal = right */
  }

  .budget-donut-pane {
    width: 570px;
    flex-shrink: 0;
    order: 2;
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
    max-height: calc(100vh - var(--topbar-h) - 32px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    align-items: start;
  }

  /* Income top-left, Expense top-right, Assets bottom spanning both */
  #incomeDonutCard  { grid-column: 1; grid-row: 1; }
  #expenseDonutCard { grid-column: 2; grid-row: 1; }
  #assetsDonutCard  { grid-column: 1 / -1; grid-row: 2; }
}

@media(max-width:899px){
  .budget-month-layout { display:block; }
  .budget-donut-pane { margin-bottom:16px; display:block; }
  #incomeDonutCard, #expenseDonutCard, #assetsDonutCard { grid-column: auto; grid-row: auto; }
}

.donut-center-label {
  text-align: center;
  margin-top: -134px;  /* overlap 240px canvas center */
  margin-bottom: 114px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-primary);
  pointer-events: none;
  line-height: 1.3;
}
.donut-legend {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .8rem;
  transition: background .15s;
}
.donut-legend-item:hover  { background: var(--bg-hover); }
.donut-legend-item.active { background: var(--accent-light); font-weight: 600; }
.donut-legend-item .legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.donut-legend-item .legend-name { flex:1; color:var(--text-secondary); }
.donut-legend-item .legend-val  { font-family:var(--font-mono); color:var(--text-primary); font-size:.78rem; }

/* ── Text-selection fix ──────────────────────────────────────── */
/* Prevent pointer events on drag handles from stealing text selection in inputs */
.drag-handle { -webkit-user-select:none; user-select:none; }
/* Inputs, textareas, contenteditable never get dragstart interference */
input, textarea, [contenteditable] {
  -webkit-user-select: text !important;
  user-select: text !important;
}
/* Modals: no drag events bleed through */
.modal-body { touch-action: pan-y; }

/* ── Modal wide ──────────────────────────────────────────────── */
.modal-wide { max-width: min(96vw, 1400px) !important; width: 96vw !important; }

/* ── Alerts advice modal ─────────────────────────────────────── */
.advice-section {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.advice-section h4 {
  font-size: .88rem; font-weight: 700;
  margin-bottom: 6px; color: var(--text-primary);
}
.advice-section p { font-size: .82rem; color: var(--text-secondary); line-height:1.6; }
.advice-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  font-size: .72rem; font-weight: 700;
  margin-right: 4px;
}
.advice-badge.recommended { background:var(--positive-bg); color:var(--positive); }
.advice-badge.simple      { background:var(--accent-glow); color:var(--accent); }
.advice-badge.advanced    { background:var(--warn-bg); color:var(--warn); }

/* ── Highlighted budget row (donut interaction) ─────────────── */
.budget-parent-row.highlighted td {
  background: var(--accent-light) !important;
  border-left: 3px solid var(--accent);
}

/* ── Text selection fix: disable drag interference ──────────── */
/* Draggable elements should never prevent text selection in inputs */
[draggable="true"] { -webkit-user-drag: element; }
.cat-row input[type="color"],
.cat-row input[type="number"],
.cat-name-edit {
  -webkit-user-drag: none;
  user-drag: none;
}
/* Prevent dragstart from firing inside text inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

/* ── Language selector buttons ───────────────────────────────── */
.lang-btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lang-btn {
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.lang-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.lang-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(91,115,232,0.3);
}

/* ── User management ─────────────────────────────────────────── */
.role-btn-group { display:flex; gap:8px; flex-wrap:wrap; }
.role-btn {
  flex:1; min-width:120px;
  padding:10px 14px; border:2px solid var(--border);
  border-radius:8px; background:var(--bg-card);
  color:var(--text-secondary); font-family:var(--font-main);
  font-size:.85rem; font-weight:500; cursor:pointer;
  text-align:left; transition:all .15s;
}
.role-btn:hover { border-color:var(--accent); color:var(--accent); }
.role-btn.active {
  border-color:var(--accent); background:var(--accent-light);
  color:var(--accent); font-weight:700;
}

/* ── Forgot password link button ─────────────────────────────── */
.link-btn {
  background:none; border:none; padding:0;
  color:var(--accent); font-size:.82rem;
  cursor:pointer; text-decoration:underline;
  font-family:var(--font-main);
}
.link-btn:hover { opacity:.8; }

/* ── Viewer mode — hide write actions ────────────────────────── */
body.role-viewer .fab,
body.role-viewer [onclick="openWizard()"],
body.role-viewer [onclick*="openEditBudget"],
body.role-viewer [onclick*="saveProfile"],
body.role-viewer [onclick*="openAddCategory"],
body.role-viewer [onclick*="openAddAccount"] {
  display:none !important;
}

/* ── Password field with eye toggle ─────────────────────────── */
.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-wrap input {
  flex: 1;
  padding-right: 44px !important;
}
[dir="rtl"] .pw-wrap input { padding-right: 12px !important; padding-left: 44px !important; }
.pw-eye {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
[dir="rtl"] .pw-eye { right: auto; left: 12px; }
.pw-eye:hover { color: var(--accent); }
.pw-eye svg { width: 18px; height: 18px; }

/* Year line graph canvas — full width responsive */
#yearChartCanvas {
  width: 100% !important;
  height: clamp(280px, 40vh, 500px) !important;
  display: block;
}
.year-chart-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.year-chart-wrap canvas { flex: 1; min-width: 0; }
.year-chart-legend { width: 200px; flex-shrink: 0; overflow-y: auto; max-height: clamp(280px, 40vh, 500px); }
@media(max-width: 700px) {
  .year-chart-wrap { flex-direction: column; }
  .year-chart-legend { width: 100%; max-height: 200px; }
}

/* ── Calculator buttons ──────────────────────────────────────── */
.calc-btn {
  padding: 12px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .1s;
  font-family: var(--font-mono);
}
.calc-btn:hover { background: var(--bg-hover); }
.calc-btn:active { background: var(--accent-light); }
.calc-op { color: var(--accent); background: var(--accent-light); }
.calc-fn { color: var(--text-secondary); }
.calc-eq { background: var(--accent); color: #fff; border-color: var(--accent); }
.calc-eq:hover { background: var(--accent-hover,#2563eb); }

/* ── Child / Viewer role restrictions ───────────────────────── */

/* Child: hide Assets nav link */
body.role-child a[data-page="assets"] { display: none !important; }

/* Child: hide Edit Budget button */
body.role-child [onclick="openEditBudget()"] { display: none !important; }

/* Child: hide Add Asset, Sync Savings buttons */
body.role-child [onclick="openAddAsset()"],
body.role-child [onclick="syncSavingsAsset()"] { display: none !important; }

/* Child: hide Settings tabs for categories, accounts, reset */
body.role-child button[onclick*="switchSettingsTab('categories'"],
body.role-child button[onclick*="switchSettingsTab('accounts'"],
body.role-child button[onclick*="switchSettingsTab('users'"],
body.role-child button[onclick*="switchSettingsTab('reset'"] { display: none !important; }

/* Child: hide currency and lang settings */
body.role-child #currencySel,
body.role-child #langBtnGroup,
body.role-child .lang-btn-group,
body.role-child [onclick*="saveLang"],
body.role-child label[for="currencySel"] { display: none !important; }

/* Child: hide the entire currency/lang form groups */
body.role-child .pref-currency-group,
body.role-child .pref-lang-group { display: none !important; }

/* Viewer: hide FAB add button */
body.role-viewer button.fab { display: none !important; }