@font-face {
    font-family: 'A-Sade';
    src: url('/A-Sade.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
    :root{
      --card-radius:12px;
      --accent1:#7dd3fc; --accent2:#60a5fa; --accent3:#a78bfa;
      --danger1:#ff7a88; --success1:#34d399;
      --bg-1:#071025; --bg-2:#081228; --glass:rgba(255,255,255,0.03);
      --text:#e6eef8; --text-inverse:#071a3e; --muted:rgba(230,238,248,0.62);
      --panel:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      --shadow-accent:rgba(99,102,241,0.12);
      --focus-ring: 0 0 0 6px rgba(167,139,250,0.12);
    }
    .theme-light{
      --accent1:#06b6d4; --accent2:#3b82f6; --accent3:#8b5cf6;
      --bg-1:#ffffff; --bg-2:#f8fafc; --glass:rgba(2,6,23,0.03);
      --text:#071124; --text-inverse:#ffffff; --muted:rgba(7,17,36,0.6);
      --panel: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
      --danger1:#ef4444; --success1:#10b981;
      --focus-ring: 0 0 0 6px rgba(59,130,246,0.12);
    }

    html,body{height:100%}
    body{
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial, 'Vazirmatn', sans-serif;
      background: linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 60%);
      color:var(--text);
      transition: background .35s ease, color .25s ease;
      font-family: 'A-Sade', sans-serif;
      font-size: 1.4rem;
    }
    /* Force table cell text colors to follow theme variables */
.table td,
.table tbody td,
.table tfoot td,
.table thead td,
.table th {
  color: var(--text) !important;
  background: transparent !important; /* keep card/header bg controlled separately */
}

/* muted text inside table (help text, small captions) */
.table td .small-muted,
.table td small,
.table .small-muted {
  color: var(--muted) !important;
}

/* buttons, badges and chips inside table cells should inherit theme colors */
.table td .btn,
.table td .btn * ,
.table td .chip,
.table td .badge,
.table td button,
.table td a {/* ===========================
   THEME VARIABLES & BASE
   =========================== */
@font-face {
  font-family: 'A-Sade';
  src: url('/A-Sade.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Dark theme (defaults) */
:root{
  --card-radius: 12px;

  /* accents */
  --accent1: #7dd3fc;
  --accent2: #60a5fa;
  --accent3: #a78bfa;

  /* semantic */
  --danger1: #ff7a88;
  --success1: #34d399;

  /* backgrounds */
  --bg-1: #071025;
  --bg-2: #081228;
  --glass: rgba(255,255,255,0.03);

  /* text */
  --text: #e6eef8;
  --text-inverse: #071124;
  --muted: rgba(230,238,248,0.62);

  /* panels / cards */
  --panel: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));

  /* focus / shadows */
  --shadow-accent: rgba(99,102,241,0.12);
  --focus-color: rgba(167,139,250,0.12);
  --focus-ring: 0 0 0 6px var(--focus-color);

  /* utilities */
  --btn-outline-bg: rgba(255,255,255,0.04);
  --table-head-bg: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

/* Light theme override */
.theme-light{
  --accent1:#06b6d4;
  --accent2:#3b82f6;
  --accent3:#8b5cf6;

  --bg-1:#ffffff;
  --bg-2:#f8fafc;
  --glass:rgba(2,6,23,0.03);

  --text:#071124;
  --text-inverse:#ffffff;
  --muted:rgba(7,17,36,0.6);

  --panel: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));

  --danger1:#ef4444;
  --success1:#10b981;

  --focus-color: rgba(59,130,246,0.12);
  --focus-ring: 0 0 0 6px var(--focus-color);

  --btn-outline-bg: rgba(7,17,36,0.04);
  --table-head-bg: linear-gradient(180deg, rgba(7,17,36,0.03), rgba(7,17,36,0.01));
}

/* ===========================
   GLOBAL LAYOUT + TEXT
   =========================== */
html, body { height:100%; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 'Vazirmatn', sans-serif;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 60%);
  color: var(--text);
  transition: background .35s ease, color .25s ease;
  font-size: 1.4rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* container/card basics */
.container{ max-width: 1180px; }
.card{
  border: none;
  border-radius: var(--card-radius);
  background: var(--panel);
  backdrop-filter: blur(8px);
  transition: box-shadow .2s, transform .12s, background .25s;
  box-shadow: 0 8px 20px rgba(2,6,23,0.24);
}
.card:focus-within { box-shadow: var(--focus-ring); }

/* navbar */
nav.navbar{
  padding: .6rem 1rem;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  box-shadow: 0 10px 40px rgba(12,18,35,0.25);
}
.brand-badge{
  background: rgba(255,255,255,0.12);
  padding: .25rem .5rem;
  border-radius: 10px;
  font-weight: 700;
  color: var(--text-inverse);
}

/* helpers */
.small-muted{ color: var(--muted); font-size: .9rem; }
.badge-income{ background: linear-gradient(90deg, var(--accent1), var(--accent2)); color: var(--text-inverse); font-weight:700; padding:.25rem .6rem; border-radius:10px; }
.badge-expense{ background: linear-gradient(90deg, var(--danger1), #ff5a7a); color: var(--text-inverse); font-weight:700; padding:.25rem .6rem; border-radius:10px; }

.chip{ display:inline-block; padding:.16rem .5rem; border-radius:999px; font-size:.86rem; margin:2px; border:0; }
.amount-cell{ direction:ltr; text-align:left; }
.category-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; margin-inline-start:.5rem; }

/* snackbar / toast */
.snackbar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  background: var(--panel);
  color: var(--text);
  padding: .6rem 1rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(2,6,23,0.7);
  display: flex;
  gap: .6rem;
  align-items: center;
  z-index: 9999;
}
.snackbar.hidden { display: none; }

.input-focus{ box-shadow: var(--focus-ring); border-color: rgba(167,139,250,0.6); }
.btn-glow{ box-shadow: 0 10px 30px rgba(99,102,241,0.08); transition: transform .12s; }

/* table head */
.table thead th{ position: sticky; top: 0; background: var(--table-head-bg); color: var(--text); }

/* kbd */
kbd{ background: rgba(0,0,0,0.12); padding: .08rem .3rem; border-radius:4px; font-size:0.8rem; }

/* responsive */
@media (max-width:767px){ .desktop-only{ display:none } }

/* ===========================
   BOOTSTRAP UTILITIES OVERRIDES
   (make bootstrap components follow variables)
   =========================== */

/* Buttons that were heavily used in your HTML */
.btn-outline-light,
.btn-light {
  background: var(--btn-outline-bg) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.theme-light .btn-outline-light,
.theme-light .btn-light {
  background: var(--btn-outline-bg) !important;
  color: var(--text) !important;
  border-color: rgba(7,17,36,0.12) !important;
}

/* ensure btn-danger legibility */
.btn-danger{ box-shadow: none !important; }

/* dropdowns, modals, forms adopt panel + text */
.dropdown-menu,
.modal-content,
.table,
.modal-body {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: none !important;
}

/* inputs/selects */
.form-control,
.form-select,
.input-group-text {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
.theme-light .form-control,
.theme-light .form-select,
.theme-light .input-group-text {
  background-color: rgba(7,17,36,0.02) !important;
  border: 1px solid rgba(7,17,36,0.06) !important;
}
.form-control::placeholder{ color: rgba(255,255,255,0.36) !important; }
.theme-light .form-control::placeholder{ color: rgba(7,17,36,0.34) !important; }

/* navbar text-white fix (if used) */
.navbar .text-white { color: var(--text) !important; opacity: 0.95 !important; }

/* progress bar styling (budget) */
#budgetProgress{ transition: width .4s ease, background .25s ease; height: 10px; border-radius: 999px; }

/* Chart canvases should be transparent so card bg shows through */
canvas { background: transparent !important; }

/* make dropdown items readable and hover visible */
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover { background: rgba(255,255,255,0.06) !important; }
.theme-light .dropdown-item:hover { background: rgba(7,17,36,0.06) !important; }

/* ===========================
   REAL THEME FIX (HIGH PRIORITY OVERRIDES)
   These rules forcibly override Bootstrap's built-in coloring
   to ensure every UI part follows the theme variables.
   Place these at the end of your <style>.
   =========================== */

/* Ensure text color across main containers */
body, .card, .table, .modal-content, .dropdown-menu {
  color: var(--text) !important;
}

/* panels/cards/modal background & subtle border */
.card, .modal-content, .dropdown-menu {
  background: var(--panel) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Inputs and input-group text */
.form-control, .form-select, .input-group-text {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.theme-light .form-control, .theme-light .form-select, .theme-light .input-group-text {
  background-color: rgba(7,17,36,0.04) !important;
  border-color: rgba(7,17,36,0.12) !important;
}

/* table visual reset (cells inherit card background by default) */
.table { background: transparent !important; }
.table thead th {
  background: var(--table-head-bg) !important;
  color: var(--text) !important;
}
.table td { background: transparent !important; }

/* Buttons inside table and common usages */
.btn-light, .btn-outline-light {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.theme-light .btn-light, .theme-light .btn-outline-light {
  background: rgba(7,17,36,0.06) !important;
  border-color: rgba(7,17,36,0.16) !important;
}

/* Navbar inline text fix */
.navbar .text-white { color: var(--text-inverse) !important; }

/* dropdowns inherit theme */
.dropdown-item { color: var(--text) !important; }

/* ===========================
   TABLE CELL SPECIFIC FIXES
   (ensures td contents follow theme and icons inherit color)
   =========================== */

/* Force table cell text colors to follow theme variables */
.table td,
.table tbody td,
.table tfoot td,
.table thead td,
.table th {
  color: var(--text) !important;
  background: transparent !important;
}

/* Muted text inside table (help text, small captions) */
.table td .small-muted,
.table td small,
.table .small-muted {
  color: var(--muted) !important;
}

/* Buttons, badges and chips inside table cells should inherit theme colors */
.table td .btn,
.table td .btn *,
.table td .chip,
.table td .badge,
.table td button,
.table td a {
  color: var(--text) !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Ensure icons inside table inherit color (bootstrap-icons or inline svgs) */
.table td i,
.table td svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Keep amount cell alignment but ensure text color */
.table td.amount-cell {
  direction: ltr;
  text-align: left;
  color: var(--text) !important;
}

/* Fix for rows that Bootstrap may mark as .table-light/.table-dark */
.table.table-light td,
.table.table-light th,
.table.table-dark td,
.table.table-dark th {
  color: var(--text) !important;
  background: transparent !important;
}

    background-color: rgba(255,255,255,0.04) !important;
    color: var(--text) !important;
    border-color: rgba(255,255,255,0.08);
    }

    .theme-light .form-control,
    .theme-light .form-select,
    .theme-light .input-group-text {
    background-color: rgba(7,17,36,0.04) !important;
    border-color: rgba(7,17,36,0.12);
    }

    /* table */
    .table {
    background: transparent !important;
    }

    .table thead th {
    background: var(--table-head-bg) !important;
    color: var(--text) !important;
    }

    .table td {
    background: transparent !important;
    }
    .btn-light,
    .btn-outline-light {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text) !important;
    border-color: rgba(255,255,255,0.12) !important;
    }

    .theme-light .btn-light,
    .theme-light .btn-outline-light {
    background: rgba(7,17,36,0.06) !important;
    border-color: rgba(7,17,36,0.16) !important;
    }

    /* navbar text-white fix */
    .navbar .text-white {
    color: var(--text-inverse) !important;
    }

    /* dropdown items */
    .dropdown-item {
    color: var(--text) !important;
    }

    .dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    }

    .theme-light .dropdown-item:hover {
    background: rgba(7,17,36,0.08);
    }

    .container{max-width:1180px}
    .card{border:none;border-radius:var(--card-radius);background:var(--panel);backdrop-filter: blur(8px);transition: box-shadow .2s, transform .12s, background .25s; box-shadow: 0 8px 20px rgba(2,6,23,0.24)}
    .card:focus-within{ box-shadow: var(--focus-ring) }

    nav.navbar{ padding:.6rem 1rem; background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)); box-shadow: 0 10px 40px rgba(12,18,35,0.25); }
    .brand-badge{ background: rgba(255,255,255,0.12); padding:.25rem .5rem; border-radius:10px; font-weight:700; color:var(--text-inverse); }

    .small-muted{ color:var(--muted); font-size:.9rem }
    .badge-income{ background: linear-gradient(90deg,var(--accent1),var(--accent2)); color:var(--text-inverse); font-weight:700; padding:.25rem .6rem; border-radius:10px }
    .badge-expense{ background: linear-gradient(90deg,var(--danger1),#ff5a7a); color:#2b0b12; font-weight:700; padding:.25rem .6rem; border-radius:10px }

    .chip{ display:inline-block; padding:.16rem .5rem; border-radius:999px; font-size:.86rem; margin:2px }
    .amount-cell{ direction:ltr; text-align:left }

    .category-dot{ width:12px;height:12px;border-radius:50%;display:inline-block;margin-inline-start:.5rem }

    .snackbar{ position:fixed; left:50%; transform:translateX(-50%); bottom:20px; background:linear-gradient(180deg, rgba(12,18,35,0.95), rgba(12,18,35,0.9)); color:var(--text); padding:.6rem 1rem; border-radius:10px; box-shadow:0 8px 24px rgba(2,6,23,0.7); display:flex; gap:.6rem; align-items:center; z-index:9999 }
    .snackbar.hidden{ display:none }

    .input-focus{ box-shadow: var(--focus-ring); border-color: rgba(167,139,250,0.6) }
    .btn-glow{ box-shadow:0 10px 30px rgba(99,102,241,0.08); transition:transform .12s }

    .table thead th{ position:sticky; top:0; background: linear-gradient(180deg, rgba(0,0,0,0.06), transparent) }
    .theme-light .table thead th{ background: linear-gradient(180deg, rgba(7,17,36,0.03), transparent); color:var(--text) }

    kbd{background:rgba(0,0,0,0.12); padding:.08rem .3rem; border-radius:4px; font-size:0.8rem}

    @media (max-width:767px){ .desktop-only{ display:none } }