/* ===========================
   My Budget UI — Unified CSS
   - No CSS Grid (Namecheap-safe)
   - One design system (tokens → base → layout → components → pages → utilities)
   - Semantic colors: income=green, expense=red, neutral=blue
   =========================== */

/* ===========================
   1) Design tokens
   =========================== */
:root{
  /* Surfaces */
  --bg: #f8fafc;            /* app background */
  --panel: #ffffff;         /* cards/panels */
  --panel-soft: #f1f4f9;    /* soft fill */

  /* Text */
  --text: #0f172a;
  --muted: #2f3c4f;

  /* Aliases (compat with earlier patches) */
  --text-main: var(--text);
  --text-muted: var(--muted);

  /* Borders & shadow */
  --line: rgba(15,23,42,0.4);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(2,6,23,0.06);

  /* Primary / neutral */
  /*--primary: #2563eb;*/
  --primary: #276cab;
  --primary-soft: rgba(37,99,235,0.08);

  /* Finance accents */
  --inc: #16a34a;
  --inc-soft: rgba(22,163,74,0.10);
  --inc-line: rgba(22,163,74,0.22);

  --exp: #dc2626;
  --exp-soft: rgba(220,38,38,0.10);
  --exp-line: rgba(220,38,38,0.22);

  /* “Other / neutral” info */
  --neu: #276cab;
  --neu-soft: rgba(79,70,229,0.10);
  --neu-line: rgba(79,70,229,0.22);

  /* Layout */
  --container: 1120px;
  --gap: 14px;
}

/* ===========================
   2) Base / reset
   =========================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.1;
  font-size: 15px;
}
a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Headings: unified rhythm */
h1,h2,h3{ margin:0; }
.page-title,
.pagehead__title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.section-title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.panel-title,
h2{
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Helper text */
.muted{ color: var(--muted); font-size:12px; }

/* ===========================
   3) Layout
   =========================== */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}
.main{ padding: 18px 16px 28px; }

/* Generic sections */
.section{ margin-top: 28px; }
.section__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* Dashboard pagehead */
.pagehead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:16px;
  margin-top: 6px;
  margin-bottom: var(--gap);
}
.pagehead__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Hero (Reports, etc.) */
.hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:16px;
}
.hero__title{ margin:0; font-size:26px; font-weight:900; letter-spacing:-0.2px; }
.hero__desc{ margin:6px 0 0; color: var(--muted); }

/* ===========================
   4) Topbar / Navigation (unified)
   =========================== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(248,250,252,0.75);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 210px;
  color: inherit;
  text-decoration:none;
}
.brand__logo{
  width:40px; height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--primary);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__title{
  font-weight:700;
  font-size:20px;
  letter-spacing:-0.2px;
}
.brand__subtitle{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.topbar__right{ display:flex; align-items:center; gap:10px; }

/* Nav pills */
.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.nav__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  font-size:13px;
  color:var(--text);
  border-radius:6px;
  border:1px solid transparent;
  font-weight:650;
}
.nav__link:hover{
  background: rgba(255,255,255,0.75);
  border-color: rgba(15,23,42,0.10);
}
.nav__link--active{
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,23,42,0.3);
}
@media (max-width: 960px){
  .topbar__inner{ align-items:flex-start;}
  .brand{ min-width: 0; }
  .topbar__right{ order: 3; width:100%; justify-content:flex-end; }
}

/* ===========================
   5) Components
   =========================== */

/* Cards */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04);
}
.card--raised{ box-shadow: var(--shadow); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  /*min-height:42px;*/
  padding: 8px 16px;
  border-radius:6px;
  font-size:14px;
  font-weight:700;
  border:1px solid rgba(15,23,42,0.4);
  background:#f7f8bf;
  color:var(--text);
  cursor:pointer;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover{ background: rgba(15,23,42,0.04); }
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background:var(--primary);
  color:#fff;
  border-color: #316393;
  box-shadow: 0 8px 18px rgba(37,99,235,0.18);
}
.btn--primary:hover{ 
     background: #99a4bd;
     border-color: #7e859373;
    
}

.btn--ghost{
  background: rgba(255,255,255,0.75);
  border-color: var(--line);
  color: var(--text);
}

.btn--danger{
  background: var(--exp-soft);
  color: var(--exp);
  border-color: var(--exp-line);
}

.btn--disabled{
  opacity:.5;
  pointer-events:none;
}

/* Badges */
.badge{
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.06);
}
.badge--ok{ background: var(--inc-soft); color:#166534; border-color: var(--inc-line); }
.badge--bad{ background: var(--exp-soft); color:#991b1b; border-color: var(--exp-line); }
.badge--neutral{ background: var(--primary-soft); color: var(--primary); border-color: rgba(37,99,235,0.18); }
.badge--info{ background: var(--neu-soft); color: var(--neu); border-color: var(--neu-line); }

/* Warning (paused) */
.badge--warn{
  background: rgba(245,158,11,0.12);
  color: #92400e;
  border-color: rgba(245,158,11,0.26);
}

/* Dots */
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; background: var(--primary); }
.dot--inc{ background: var(--inc); }
.dot--exp{ background: var(--exp); }
.dot--neu{ background: var(--neu); }

/* Title row + tag */
.title-row{ display:inline-flex; align-items:center; gap:8px; }
.title-tag{ margin-left:6px; }

/* Delta pills */
.delta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(15,23,42,0.06);
  background: #fff;
}
.delta--up{ color: #166534; background: var(--inc-soft); border-color: var(--inc-line); }
.delta--down{ color: #991b1b; background: var(--exp-soft); border-color: var(--exp-line); }
.delta--flat{ color: var(--primary); background: var(--primary-soft); border-color: rgba(37,99,235,0.18); }

/* Progress */
.progress{
  height:10px;
  background: rgba(15,23,42,0.08);
  border-radius:999px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,0.06);
  margin: 6px 0;
}
.progress__bar{
  height:100%;
  background: #4ea5f4;
}

/* Spark mini chart */
.spark{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height: 36px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(37,99,235,0.06);
  border: 1px solid rgba(37,99,235,0.12);
  min-width: 110px;
  margin-top: 8px;
}
.spark > span{
  display:block;
  width: 8px;
  height: 40%;
  background: rgba(37,99,235,0.55);
}
.spark--inc{
  background: rgba(22,163,74,0.08);
  border-color: rgba(22,163,74,0.16);
}
.spark--inc > span{ background: rgba(34,197,94); }
.spark--exp{
  background: rgba(220,38,38,0.07);
  border-color: rgba(220,38,38,0.16);
}
.spark--exp > span{ background: rgba(239,68,68); }

/* Empty / Note */
.empty{
  background:#fff;
  border:1px dashed rgba(15,23,42,0.16);
  border-radius:14px;
  padding:20px;
  text-align:center;
}
.empty__title{ font-weight:900; }
.empty__desc{ color:var(--muted); margin-top:4px; font-size:12px; }

.note{
  padding: 12px;
  border-radius: 14px;
  background: rgba(248,250,252,0.78);
  border: 1px solid rgba(15,23,42,0.06);
}
.note__title{ font-weight:900; margin-bottom:6px; }

/* Checklist */
.checklist{ margin:0; padding-left:18px; }
.checklist li{ margin:6px 0; }

/* Forms */
.form__grid{ display:flex; flex-wrap:wrap; gap:12px; }
.field{ width:100%; }
.form_categories {flex-wrap:nowrap !important;}

.pagination-row {
    margin-top: 1rem;
}
@media(min-width:800px){
  .field{ width:calc(33.333% - 8px); }
  .field--wide{ width:100%; }
}
.label{
  display:block;
  font-size:13px;
  margin-bottom:6px;
  color:var(--muted);
}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.12);
  background:#fff;
  font-size:14px;
}
.input:focus{
  outline:none;
  border-color: rgba(37,99,235,0.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
@media (max-width: 720px) {
  .form__grid{ flex-direction: column; gap: 12px; }
  .field, .field--wide{ width: 100%; }
  .form__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
    margin-top: 8px;
  }
  .form__actions .btn{ width:100%; }
}

.form_categories .field--actions .btn {margin-top: 20px;}

/* Alerts */
.alert{
  border-radius: var(--radius);
  padding: 12px 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background: var(--panel);
}
.alert--bad{ border-color: var(--exp-line); background: var(--exp-soft); }

/* Tables */
.table{
  border:1px solid rgba(15,23,42,0.12);
  border-radius:var(--radius);
  overflow:hidden;
  background: #fff;
}
.table__head,
.table__row{
  display:flex;
  padding:12px;
  gap:12px;
  align-items:center;
}
.table__head{
  background: rgba(15,23,42,0.04);
  font-size:16px;
  font-weight:700;
  color: rgba(15,23,42,0.85);
}
.table__row{ border-top:1px solid rgba(15,23,42,0.10); }
.table__row:hover{ background: rgba(37,99,235,0.03); }
.ta-right{ text-align:right; }

/* Mobile table → cards */
@media (max-width: 720px) {
  .table__head { display: none; }
  .table__row {
    display: block;
    border: 1px solid rgba(15,23,42,0.10);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .table__row .tx-col{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    width: 100% !important;
    flex: none !important;
  }
  .table__row .tx-col::before{
    content: attr(data-label);
    color: rgba(15,23,42,0.55);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
  }
  .table__row .tx-col--actions{
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px dashed rgba(15,23,42,0.12);
    margin-top: 6px;
  }
  .table__row .tx-col--actions::before{ display:none; }
  .table__row .btn.btn--danger{ padding: 6px 16px; }
  
  .row-expense .col-date {
      margin-bottom: 10px;
  }
}

/* ===========================
   6) Pages
   =========================== */

/* Dashboard KPIs */
.cards{
  display:flex;
  flex-wrap:wrap;
  gap: var(--gap);
  align-items: stretch;
  margin-bottom: var(--gap);
}
.cards > .card{
  flex: 1 1 calc(33.333% - var(--gap));
  min-width: 240px;
}
@media (max-width: 960px){
  .cards > .card{ flex: 1 1 100%; }
}
.stat{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:160px;
  overflow:hidden;
}
.stat__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.stat__label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.stat__badge{ font-size:12px; color:var(--muted); }
.stat__value{
  font-size:24px;
  font-weight:950;
  letter-spacing:-0.4px;
  line-height: 1.1;
}
.stat__foot{ margin-top:auto; }

/* KPI backgrounds */
.stat--income{ background: linear-gradient(0deg, var(--inc-soft), var(--panel)); }
.stat--expense{ background: linear-gradient(0deg, var(--exp-soft), var(--panel)); }
.stat--balance{ background: linear-gradient(0deg, var(--primary-soft), var(--panel)); }

/* Dashboard 2 columns */
.grid{
  display:flex;
  gap: var(--gap);
  align-items:flex-start;
}
.leftcol{ flex: 1 1 58%; display:flex; flex-direction:column; gap: var(--gap); min-width: 300px; }
.rightcol{ flex: 1 1 42%; display:flex; flex-direction:column; gap: var(--gap); min-width: 260px; }
@media (max-width: 960px){
  .grid{ flex-direction:column; }
  .leftcol,.rightcol{ min-width: 0; }
}

/* Panel headers */
.panel__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Bars list (Top categories) */
.bars{ display:flex; flex-direction:column; gap:10px; }
.bar-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(15,23,42,0.06);
}
/*.bar-chip:first-child{ border-top:none; }*/
.bar-chip__meta{
  flex: 0 0 160px;
  color: rgba(15,23,42,0.85);
  font-size: 13px;
  font-weight: 700;
}
.bar-chip__track{
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  overflow:hidden;
  border: 1px solid rgba(15,23,42,0.06);
}
.bar-chip__fill{
  height:100%;
  width: 0%;
  border-radius:999px;
  background: rgba(37,99,235,0.55);
}
.bar-chip__fill--exp{ background: rgba(239,68,68) !important; }
.bar-chip__fill--inc{ background: rgba(22,163,74,0.65) !important; }
.bar-chip__val{
  flex: 0 0 130px;
  text-align:right;
  font-weight:700;
  font-size: 14px;
  color: #111827;
}
@media (max-width: 760px){
  .bar-chip{ flex-wrap:wrap; }
  .bar-chip__meta{ flex: 1 1 100%; }
  .bar-chip__val{ flex: 1 1 100%; text-align:left; color: var(--muted); font-weight:700; }
}

/* Quick actions */
.quick{ display:flex; flex-direction:column; gap:10px; }
.quick .btn{ width:100%; }

/* ===========================
   7) Utilities (replace inline)
   =========================== */
.is-hidden{ display:none !important; }
.inline-form{ display:inline; }

.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.flex-between{ justify-content:space-between; }
.flex-center{ align-items:center; }
.gap-sm{ gap: 8px; }
.gap-md{ gap: 12px; }
.gap-lg{ gap: 16px; }

.card-col{ flex:1 1 420px; min-width:320px; }
.card-col-sm{ flex:1 1 260px; min-width:260px; }

.mb-sm{ margin-bottom:10px; }
.mt-sm{ margin-top:8px; }
.mb-12{ margin-bottom:12px; }

.min-w-160{ min-width:160px; }
.min-w-180{ min-width:180px; }

.note-text{ color:#374151; }
.row-income{ background: rgba(22,163,74,0.04); }
.row-expense{ background: rgba(220,38,38,0.03); }
.bar-fill-full{ width:100%; }

/* Common layouts used by cleaned pages */
.stack{ display:grid; gap:12px; } /* used in reports header area */

/* ===== Footer unified ===== */
.footer{
  margin-top: 28px;
  border-top: 1px solid rgba(15,23,42,0.08);
  background: rgb(188,199,211,.65);
}
.footer__inner{
  padding: 16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer__left{ display:flex; flex-direction:column; gap:4px; }
.footer__brand{
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-main, #0f172a);
}
.footer__meta{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--text-muted, #64748b);
  font-size: 12px;
}
.footer__sep{ opacity: .7; }
.footer__nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.footer__link{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-main, #0f172a);
  text-decoration:none;
  border: 1px solid transparent;
}
.footer__link:hover{
  background: rgba(255,255,255,0.75);
  border-color: rgba(15,23,42,0.10);
}
@media (max-width: 720px){
  .footer__inner{ align-items:flex-start; }
  .footer__nav{ width:100%; justify-content:flex-start; }
  
}

@media (max-width: 619px){
    .footer__link {
        padding: 4px 6px;
    }
}

/* ===== Table column alignment (desktop) ===== */

/* Ensure rows always use full width and columns can shrink correctly */
.table__head,
.table__row{
  width:100%;
}
.table__head > div,
.table__row > div{
  min-width:0;
}

/* Force desktop table layout even if something accidentally overrides it */
@media (min-width: 721px){
  .table__head{ display:flex !important; }
  .table__row{ display:flex !important; }
}

/* --- Transactions table (6 columns) ---
   Add class: <div class="table table--tx"> ... */
.table--tx .table__head > div:nth-child(1),
.table--tx .table__row  > div:nth-child(1){ flex:0 0 110px; }

.table--tx .table__head > div:nth-child(2),
.table--tx .table__row  > div:nth-child(2){ flex:0 0 120px; }

.table--tx .table__head > div:nth-child(3),
.table--tx .table__row  > div:nth-child(3){ flex:1 1 200px; }

.table--tx .table__head > div:nth-child(4),
.table--tx .table__row  > div:nth-child(4){ flex:2 1 260px; }

.table--tx .table__head > div:nth-child(5),
.table--tx .table__row  > div:nth-child(5){ flex:0 0 140px; text-align:right; }

.table--tx .table__head > div:nth-child(6),
.table--tx .table__row  > div:nth-child(6){ flex:0 0 120px; text-align:right; }

.table--tx .table__row > div:nth-child(6){
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* --- Reports: Trend 6 months (4 columns) ---
   Add class: <div class="table table--trend6"> ... */
.table--trend6 .table__head > div:nth-child(1),
.table--trend6 .table__row  > div:nth-child(1){ flex:0 0 110px; }

.table--trend6 .table__head > div:nth-child(2),
.table--trend6 .table__row  > div:nth-child(2){ flex:1 1 190px; }

.table--trend6 .table__head > div:nth-child(3),
.table--trend6 .table__row  > div:nth-child(3){ flex:1 1 190px; }

.table--trend6 .table__head > div:nth-child(4),
.table--trend6 .table__row  > div:nth-child(4){ flex:0 0 170px; text-align:right; }

/* --- Reports: Top-10 expenses (5 columns) ---
   Add class: <div class="table table--top10"> ... */
.table--top10 .table__head > div:nth-child(1),
.table--top10 .table__row  > div:nth-child(1){ flex:0 0 110px; }

.table--top10 .table__head > div:nth-child(2),
.table--top10 .table__row  > div:nth-child(2){ flex:1 1 200px; }

.table--top10 .table__head > div:nth-child(3),
.table--top10 .table__row  > div:nth-child(3){ flex:2 1 320px; }

.table--top10 .table__head > div:nth-child(4),
.table--top10 .table__row  > div:nth-child(4){ flex:0 0 150px; text-align:right; }

.table--top10 .table__head > div:nth-child(5),
.table--top10 .table__row  > div:nth-child(5){ flex:0 0 90px; text-align:right; }

/* Mobile tables: keep your existing card layout (do not override) */
.row-expense .col-cat {
    font-weight: 600;
}
/* ===== Rows for KPI + Categories columns ===== */

/* Reports: KPI cards row */
.kpi-row{
  display:flex;
  gap: var(--gap, 14px);
  flex-wrap:wrap;
  align-items: stretch;
}
.card-col-sm{
  flex: 1 1 calc(33.333% - var(--gap, 14px));
  min-width: 260px;
}

/* Categories: 2 columns row */
.cats-grid{
  display:flex;
  gap: var(--gap, 14px);
  flex-wrap:wrap;
  align-items:flex-start;
}
.cats-col{
  flex: 1 1 calc(50% - var(--gap, 14px));
  min-width: 320px;
}

@media (max-width: 960px){
  .card-col-sm{ flex: 1 1 100%; min-width: 0; }
  .cats-col{ flex: 1 1 100%; min-width: 0; }
}

/* ===== Dashboard “dodge” patch: compact quick actions + small buttons ===== */

.btn--sm{
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 999px;
}

.btn--sm{
  min-height:34px;
  padding:0 12px;
  font-size:13px;
}

/* ===== Dashboard readability + premium spacing =====
   Goal: bigger labels, higher contrast, more whitespace, clearer separation
   Safe: affects mostly Dashboard components (.pagehead, .cards, .grid, .stat, .panel__, .card--toolbar, .card--main)
*/

/* 1) Global rhythm (more “air”) */
:root{
  --gap: 18px;          /* more space between blocks */
  --pad: 18px;          /* more padding inside cards */
  --radius: 18px;       /* slightly rounder = premium */
  --border-soft: rgba(15,23,42,0.3);
  --shadow: 0 14px 40px rgba(2,6,23,0.08);
}

/* 2) Text contrast + sizes */
.muted{
  color: rgba(15,23,42,0.62) !important; /* darker than before */
  font-size: 13px !important;
  line-height: 1.35;
}

.pagehead__title{
  font-size: 26px !important;
  letter-spacing: -0.35px;
}

.panel__title{
  font-size: 18px !important;
  letter-spacing: -0.25px;
}

.stat__label{
  font-size: 13px !important;
  color: rgba(15,23,42,0.70) !important;
  font-weight: 850 !important;
}

.stat__badge{
  font-size: 13px !important;
  color: rgba(15,23,42,0.62) !important;
}

.stat__value{
  font-size: 28px !important;
  letter-spacing: -0.45px !important;
}

/* 3) More separation between blocks */
.main{ gap: 22px !important; }
.pagehead{ margin-top: 10px; }
.cards{ gap: 18px !important; }
.grid{ gap: 18px !important; }
.leftcol, .rightcol{ gap: 18px !important; }

/* 4) Cards: clearer borders + stronger shadow */
.card{
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  padding: var(--pad) !important;
  background: rgba(255,255,255,0.92);
  box-shadow: 1px 1px 11px rgba(204,204,204);
}

.card--raised{
  box-shadow: var(--shadow) !important;
  background: #fff;
}

.card--main{
  border-color: rgba(220,38,38,0.18) !important; /* subtle expense signal */
  box-shadow: 0 18px 54px rgba(2,6,23,0.10) !important;
}

/* 5) Toolbar quick actions: make it visually distinct, not another “big card” */
.quick--toolbar{ gap: 10px !important; }
.btn--sm{
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

/* 6) “Trend (6 months)” label and sparklines: make readable */
.stat__foot .muted{
  font-size: 13px !important;
  color: rgba(15,23,42,0.62) !important;
  font-weight: 700;
}

.spark{
  height: 42px !important;
  padding: 8px 10px;
  border-radius: 14px;
}
.spark span{ width: 9px !important; }

/* 7) Bars block readability */
.bars{ gap: 12px !important; }
.bar-chip{
  padding: 12px 12px !important;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.2);
  background: rgba(248,250,252,0.75);
}
.bar-chip__meta{
  font-size: 14px !important;
  color: rgba(15,23,42,0.82);
}


/* 8) KPI indicator pill: slightly larger */
.kpi-ind{
  padding: 7px 12px !important;
}
.kpi-ind__label,
.kpi-ind__val{
  font-size: 13px !important;
}

/* 9) Responsive: keep air even on mobile */
@media (max-width: 960px){
  .main{ gap: 16px !important; }
  .cards, .grid{ gap: 14px !important; }
  .card{ padding: 16px !important; }
  .pagehead__title{ font-size: 24px !important; }
}

/* ===== Header separation + Hero promo block (Dashboard) ===== */

/* Header: clearly separated from content */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(15,23,42,0.14) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,0.08) !important;
}

/* Gradient separator line under the header */
.topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(37,99,235,0.55),
    rgba(22,163,74,0.45),
    rgba(220,38,38,0.40)
  );
  opacity: 0.55;
}

/* Increase spacing under header */
main.container{ padding-top: 24px; }

/* Hero promo card */
.hero--promo{ margin-top: 10px; }
.hero-card{
  display:flex;
  gap: 20px;
  align-items: stretch;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.4);
  background: #ffffff;
  box-shadow: 0 18px 54px rgba(2,6,23,0.10);
}
.hero-card__content{ flex: 1 1 320px; min-width: 320px; }
.hero-card__eyebrow{
  font-weight: 850;
  font-size: 13px;
  color: rgba(15,23,42,0.65);
  letter-spacing: 0.2px;
}
.hero-card__title{
  margin: 10px 0 20px;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.6px;
  color: rgba(15,23,42,0.92);
}
.hero-card__desc{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(15,23,42,0.70);
  max-width: 62ch;
}
.hero-card__actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 20px;
}
.hero-card__actions .btn{ height: 40px; }
.hero-card__actions .btn--ghost{
  background: rgba(255,255,255,0.70);
  border-color: rgba(15,23,42,0.12);
}

/* Steps */

.step{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(248,250,252,0.85);
}
.step__num{
  width: 26px; height: 26px;
  border-radius: 9px;
  display:grid; place-items:center;
  font-weight: 900;
  color: rgba(15,23,42,0.78);
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.16);
}
.step__text{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(15,23,42,0.72);
}

/* Visual stack */
.hero-card__visual{
  flex: 0 0 280px;
  display:flex;
  flex-direction: column;
  gap: 12px;
  justify-content:center;
}
.hero-metric{
  border-radius: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(248,250,252,0.88);
}
.hero-metric__label{
  font-size: 13px;
  font-weight: 850;
  color: rgba(15,23,42,0.70);
}
.hero-metric__value{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.hero-metric--inc{ border-color: rgba(22,163,74,0.18); background: rgba(22,163,74,0.08); }
.hero-metric--inc .hero-metric__value{ color: #166534; }

.hero-metric--exp{ border-color: rgba(220,38,38,0.18); background: rgba(220,38,38,0.06); }
.hero-metric--exp .hero-metric__value{ color: #991b1b; }

.hero-metric--net{ border-color: rgba(37,99,235,0.18); background: rgba(37,99,235,0.06); }
.hero-metric--net .hero-metric__value{ color: #1d4ed8; }

@media (max-width: 960px){
  .hero-card{ flex-direction: column; }
  .hero-card__visual{ flex: 1 1 auto; width: 100%; }
  .hero-card__title{ font-size: 26px; }
}

/* Steps — Flexbox only (Namecheap safe) */
.hero-card__steps{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.step{
  flex: 1 1 calc(33.333% - 10px);
  min-width: 220px;
}

/* Mobile */
@media (max-width: 960px){
  .hero-card{
    flex-direction: column;
  }

  .hero-card__visual{
    flex: 1 1 auto;
    width: 100%;
  }

  .step{
    flex: 1 1 100%;
  }

  .hero-card__title{
    font-size: 26px;
  }
}

/* =========================================================
   DASHBOARD PATCH (append to end of app.css)
   - status-widget in hero (right)
   - metric-cards row after hero (same format as old hero metrics)
   - top categories widget header: marker + total count + ghost-pill
   - compact quick actions toolbar
   ========================================================= */

/* ---------- 1) Status widget (hero right) ---------- */

.status-widget{
  border-radius: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(15,23,42,0.2);
  background: rgba(248,250,252,0.85);
  box-shadow: 1px 1px 11px #cccccc;
}

.status-widget__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.status-widget__title{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: rgba(15,23,42,0.90);
}

.status-widget__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
}

.status-widget__badge--ok{
  color: #166534;
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.22);
}

.status-widget__badge--bad{
  color: #991b1b;
  background: rgba(220,38,38,0.10);
  border-color: rgba(220,38,38,0.22);
}

.status-widget__main{
  margin-top: 6px;
}

.status-widget__label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.70);
}

.status-widget__value{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.45px;
  font-variant-numeric: tabular-nums;
}

.status-widget__rows{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.status-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15,23,42,0.12);
}

.status-row:first-child{
  border-top: none;
  padding-top: 0;
}

.status-row__name{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.72);
}

.status-row__val{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-row__val--inc{ color: #166534; }
.status-row__val--exp{ color: #991b1b; }


/* ---------- 2) Metric cards row (after hero) ---------- */

.metrics-row{
  display:flex;
  flex-wrap:wrap;
  gap: 24px;
  margin-top: 28px;
  margin-bottom: 28px;
  align-items: stretch;
}

.metric-card{
  flex: 1 1 260px;
  min-width: 240px;
  padding: 18px 18px 20px;
  border-radius: 20px;
  border: 2px solid rgba(15,23,42,0.12);
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(2,6,23,0.08);
}

.metric-card__head{
  display:flex;
  align-items:center;
  gap: 10px;
}

.metric-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
}

.metric-dot--inc{ background: var(--inc); }
.metric-dot--exp{ background: var(--exp); }
.metric-dot--neu{ background: var(--neu); }

.metric-title{
  font-size: 18px;
  font-weight: 700;
  color: rgba(15,23,42,0.88);
}

.metric-meta{
  margin-left: auto;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.65);
}

.metric-value{
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(15,23,42,0.95);
}

.metric-foot{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.metric-foot__label{
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,0.68);
}

.metric-foot__note{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.62);
}

/* Semantic fills */
.metric-card--inc{
  /*background: linear-gradient(180deg, #ffffff, rgba(22,163,74,0.08));*/
  border-color: rgba(22,101,52,0.5);
}
.metric-card--inc .metric-value{ color:#166534; }

.metric-card--exp{
  /*background: linear-gradient(180deg, #ffffff, rgba(220,38,38,0.07));*/
  border-color: rgba(153,27,27,0.5);
}
.metric-card--exp .metric-value{ color:#991b1b; }

/* Net: ok/bad */
.metric-card--ok{
  background: linear-gradient(180deg, #ffffff, rgba(22,163,74,0.08));
  border-color: rgba(22,163,74,0.18);
}
.metric-card--ok .metric-value{ color:#166534; }

.metric-card--bad{
  background: linear-gradient(180deg, #ffffff, rgba(220,38,38,0.07));
  border-color: rgba(220,38,38,0.18);
}
.metric-card--bad .metric-value{ color:#991b1b; }

/* Make sparklines inside metric-cards feel “premium” */
.metric-card .spark{
  margin-top: 0;            /* we already have spacing in .metric-foot */
  height: 42px;
  padding: 8px 10px;
  border-radius: 14px;
}
.metric-card .spark > span{ width: 9px; }


/* ---------- 3) Top categories widget header extras ---------- */

/* red marker in header (left) */
.panel__marker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  font-weight: 950;
  color: rgba(15,23,42,0.86);
}

.panel__marker::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--exp);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.10);
}

/* header right side: total categories + “Show all” pill */
.topcats__meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap:wrap;
  text-align:right;
}

.topcats__count{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.62);
}

/* Small ghost pill button */
.btn--pill{
  border-radius: 999px;
}

.btn--sm{
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
}


/* ---------- 4) Quick actions toolbar style (compact) ---------- */

.card--toolbar{
  padding: 12px 14px !important;
  background: rgba(248,250,252,0.85) !important;
  border-color: rgba(15,23,42,0.10) !important;
  box-shadow: none !important;
}

.quick--toolbar{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.quick--toolbar .btn{
  width: auto;
}

/* If you still have .quick--compact anywhere */
.quick--compact{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.quick--compact .btn{ width:auto; }


/* ---------- 5) Extra readability on small labels in dashboard ---------- */

.metric-title,
.metric-foot__label,
.panel__marker,
.topcats__count{
  text-rendering: optimizeLegibility;
}

/* Mobile: keep comfortable spacing */
@media (max-width: 960px){
  .metrics-row{ gap: 14px; }
  .metric-card{ min-width: 0; }
  .status-widget{ width: 100%; }
}

/* ===== Dashboard hero status: aliases + insights ===== */

/* Aliases to match dashboard_view_rewritten.php markup */
.status-widget__pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
}
.status-widget--ok .status-widget__pill{
  color: #166534;
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.22);
}
.status-widget--bad .status-widget__pill{
  color: #991b1b;
  background: rgba(220,38,38,0.10);
  border-color: rgba(220,38,38,0.22);
}
.status-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(15,23,42,0.06);
}

.status-widget__amount{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.45px;
  font-variant-numeric: tabular-nums;
}

/* Fix label class mismatch if present */
.status-row__label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.72);
}

/* Insights block */
.status-widget__insights{
  margin-top: 12px;
  padding-top: 10px;
  /*border-top: 1px dashed rgba(15,23,42,0.12); */
}
.status-insight__title{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,0.62);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.status-insight__line{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(15,23,42,0.78);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(15,23,42,0.08);
}
.status-insight__line + .status-insight__line{
  margin-top: 8px;
}

.hero--dashboard .hero-period{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  margin-bottom:10px;
}

.hero--dashboard .hero-period__label{ opacity:.75; }
.hero--dashboard .hero-period__range{ opacity:.6; font-size:.95em; }

/* HERO — уплотняем контент без grid/fr */

/* HERO — совместимо со старыми CSS-линтерами (без grid/fr/gap) */

.hero--dashboard .hero-card__content{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Период */
.hero--dashboard .hero-period{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  margin-bottom:8px;
}
.hero--dashboard .hero-period > *{
  margin-right:8px;         /* вместо gap */
  margin-bottom:6px;        /* чтобы красиво переносилось */
}
.hero--dashboard .hero-period > *:last-child{
  margin-right:0;
}
.hero--dashboard .hero-period__label{ opacity:.75; }
.hero--dashboard .hero-period__range{ opacity:.6; font-size:.95em; }

/* ===== Мини-KPI (3 карточки) ===== */
.hero--dashboard .hero-kpis{
  display:flex;
  flex-wrap:wrap;
  margin: 10px 0 12px;
}

/* карточка + отступы (без gap) */
.hero--dashboard .hero-kpi{
  flex: 1 1 220px;
  min-width: 200px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);

  margin-right:12px;        /* горизонтальный отступ */
  margin-bottom:12px;       /* вертикальный отступ */
}

/* убираем правый отступ у последней карточки в строке на широких экранах */
@media (min-width: 980px){
  .hero--dashboard .hero-kpi{
    flex: 0 0 32%;
    margin-right:2%;
  }
  .hero--dashboard .hero-kpi:nth-child(3n){
    margin-right:0;
  }
}

/* планшет: 2 в ряд */
@media (min-width: 620px) and (max-width: 979px){
  .hero--dashboard .hero-kpi{
    flex: 0 0 49%;
    margin-right:2%;
  }
  .hero--dashboard .hero-kpi:nth-child(2n){
    margin-right:0;
  }
}

/* мобилка: 1 в ряд */
@media (max-width: 619px){
  .hero--dashboard .hero-kpi{
    flex: 0 0 100%;
    margin-right:0;
  }
}

.hero--dashboard .hero-kpi__label{
  display:block;
  font-size:.9em;
  opacity:.75;
  margin-bottom:4px;
}
.hero--dashboard .hero-kpi__val{
  font-weight:700;
  letter-spacing:.2px;
}
.hero--dashboard .hero-kpi__val--exp{ opacity:.95; }
.hero--dashboard .hero-kpi__val--ok{ opacity:1; }
.hero--dashboard .hero-kpi__val--bad{ opacity:1; }

/* ===== Активная цель ===== */
.hero--dashboard .hero-goal{
  margin: 6px 0 12px;
}

.hero--dashboard .hero-goal__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  margin-bottom:8px;
}
.hero--dashboard .hero-goal__head > *{
  margin-right:10px;        /* вместо gap */
  margin-bottom:6px;
}
.hero--dashboard .hero-goal__head > *:last-child{
  margin-right:0;
}

.hero--dashboard .hero-goal__label{ opacity:.75; }

.hero--dashboard .hero-goal__bar{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.hero--dashboard .hero-goal__fill{
  height:100%;
  border-radius:999px;
  background: rgba(255,255,255,.22);
}
.hero--dashboard .hero-goal__empty{
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

/* ===== Сводка месяца (карточки) ===== */
.hero--dashboard .hero-stats{
  display:flex;
  flex-wrap:wrap;
  margin: 8px 0 14px;
}

.hero--dashboard .hero-stat{
  flex: 1 1 220px;
  min-width: 200px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);

  margin-right:12px;
  margin-bottom:12px;
}

/* 3 в ряд */
@media (min-width: 980px){
  .hero--dashboard .hero-stat{
    flex: 0 0 32%;
    margin-right:2%;
  }
  .hero--dashboard .hero-stat:nth-child(3n){
    margin-right:0;
  }
}

/* 2 в ряд */
@media (min-width: 620px) and (max-width: 979px){
  .hero--dashboard .hero-stat{
    flex: 0 0 49%;
    margin-right:2%;
  }
  .hero--dashboard .hero-stat:nth-child(2n){
    margin-right:0;
  }
}

/* 1 в ряд */
@media (max-width: 619px){
  .hero--dashboard .hero-stat{
    flex: 0 0 100%;
    margin-right:0;
  }
}

.hero--dashboard .hero-stat__label{
  display:block;
  font-size:.9em;
  opacity:.75;
  margin-bottom:4px;
}
.hero--dashboard .hero-stat__val{
  font-weight:700;
}

/* 1) Растянуть hero-card по ширине main */
.hero--dashboard .hero-card{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Мини-KPI: 2 карточки (без gap) */
.hero--dashboard .hero-kpis{
  display:flex;
  flex-wrap:wrap;
  margin: 10px 0 12px;
}
.hero--dashboard .hero-kpi{
  flex: 0 0 49%;
  margin-right:2%;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.hero--dashboard .hero-kpi:nth-child(2n){ margin-right:0; }
@media (max-width: 619px){
  .hero--dashboard .hero-kpi{ flex:0 0 100%; margin-right:0; }
}

/* Общий прогресс целей */
.hero--dashboard .hero-goals-total{
  margin: 8px 0 12px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.hero--dashboard .hero-goals-total__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  margin-bottom:8px;
}
.hero--dashboard .hero-goals-total__title{ margin-right:10px; }
.hero--dashboard .hero-goals-total__bar{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.hero--dashboard .hero-goals-total__fill{
  height:100%;
  border-radius:999px;
  background: rgba(255,255,255,.22);
}
.hero--dashboard .hero-goals-total__meta{
  margin-top:8px;
  font-size:.95em;
  opacity:.75;
}
/* Actions column: чтобы содержимое не схлопывалось в “полоску” */
/* Danger outline button (удалить) — выглядит как кнопка */
.btn--danger-outline{
  border: 1px solid rgba(220,38,38,.45);
  color: #dc2626;
  background: transparent;
}

.btn--danger-outline:hover{
  background: rgba(220,38,38,.08);
}

/* Иконка внутри кнопок */
.btn .icon{
  /*margin-right: 8px;*/
}

/* Actions column: чтобы содержимое не схлопывалось в “полоску” */
/* Danger outline button (удалить) — выглядит как кнопка */
/* Иконка внутри кнопок */
/* =========================
   TRANSACTIONS: ADD FORM UI
   ========================= */

/* Заголовок секции + валюта */
.section__head{
  margin-bottom: 12px;
  align-items: flex-end;
}

.section__title{
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Карточка формы: чуть “выше” и контрастнее */
.section .card{
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Сетка формы: больше воздуха */
.form__grid{
  row-gap: 14px; /* если editor ругается на gap — см. ниже */
}

/* Если у тебя ругается на gap/row-gap, закомментируй row-gap выше
   и включи этот блок вместо него:
.form__grid .field{ margin-bottom: 14px; }
.form__grid .field:last-child{ margin-bottom: 0; }
*/

/* Лейблы: чётче, выше контраст */
.label{
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 650;
  font-size: 13px;
  color: rgba(0,0,0,.78);
}

/* Подсказки/хинты — вторичный текст */
.card__hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  line-height: 1.35;
}

/* Поля ввода: должны быть “видимыми” */
.input{
  background: #fff;
  border: 1px solid rgba(15,23,42,.2);
  border-radius: 12px;
  padding: 11px 12px;
  min-height: 42px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}

/* Hover — лёгкий, чтобы было понятно, что это поле */
.input:hover{
  border-color: rgba(0,0,0,.22);
}

/* Focus — явно, чтобы было понятно куда вводишь */
.input:focus{
  outline: none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* Placeholder чуть спокойнее */
.input::placeholder{
  color: rgba(0,0,0,.35);
}

/* Поля внутри карточки: лёгкая группировка */
.field{
  padding: 10px;
  border-radius: 14px;
  background: #fafbfd;
  border: 1px solid rgba(0,0,0,.04);
}

/* Не делаем “серым” слишком сильно — только лёгкая подложка */
.field:hover{
  border-color: rgba(0,0,0,.08);
}

/* Actions: отделяем от полей */
.form__actions{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Кнопка сохранить — визуально главная */
.btn--primary{
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

/* Иконки в кнопках */
/* Пометка обязательных полей (если добавишь в HTML) */
.req{
  color: rgba(220,38,38,.85);
  margin-left: 4px;
}

/* Actions column: чтобы содержимое не схлопывалось в “полоску” */
/* Danger outline button (удалить) — выглядит как кнопка */
/* Иконка внутри кнопок */
.icon--sm{ width:16px; height:16px; }
.icon--danger{ color:#dc2626; }
/* ===== Icon colors by context ===== */

/* Базовая иконка */
.icon{
  display:inline-block;
  width:16px;
  height:16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  vertical-align: -2px;
}

/* Нейтральные */
.icon--muted{ color: rgba(0,0,0,.55); }

/* “Доход” (зелёный) */
.icon--inc{ color: #16a34a; }   /* green-600 */

/* “Расход” (тёплый, НЕ красный delete) */
.icon--exp{ color: #b45309; }   /* amber-700 */

/* “Итог/баланс” (синий/нейтральный) */
.icon--net{ color: #2563eb; }   /* blue-600 */

/* Danger (только удаление и опасные действия) */
.icon--danger{ color: #dc2626; } /* red-600 */

/* Иконка в заголовках карточек — чуть больше */
.metric-card__head .icon{ width:18px; height:18px; margin-right: 8px; }
.status-widget__title .icon{ width:18px; height:18px; margin-right: 8px; }

/* Важно: если где-то иконки “бледные” из-за opacity — отключаем */
.metric-card__head .icon,
.status-widget__title .icon{ opacity: 1; }

/* =========================================================
   RESPONSIVE PATCH (Desktop / Tablet / Mobile)
   - Keeps your flexbox-first approach (no grid required)
   - Fixes overflow, improves wrapping, scales typography
   - Adds missing styles for hero-goalsum used in dashboard.view
   ========================================================= */

/* 0) Safer media handling (images/long strings) */
img, svg, video, canvas{ max-width:100%; height:auto; }
.card, .table, .hero-card{ min-width:0; }
.hero-card__content, .hero-card__visual, .leftcol, .rightcol{ min-width:0; }
.stat__value, .metric-value, .hero-metric__value{ overflow-wrap:anywhere; }
.table__row, .table__head{ overflow-wrap:anywhere; }

/* 1) Dashboard hero — missing blocks in CSS */
.hero-card--full{ width:100%; max-width:none; }

.hero-goalsum{
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(248,250,252,0.65);
  border: 1px solid rgba(15,23,42,0.2);
  box-shadow: 1px 1px 11px #cccccc;
}
.hero-goalsum__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.hero-goalsum__title{
  font-weight: 600;
  color: rgba(15,23,42,0.82);
}
.hero-goalsum__meta{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  font-variant-numeric: tabular-nums;
}

/* Slightly stronger bar in hero */
.progress--hero{
  height: 12px;
  background: rgba(15,23,42,0.10);
}
.progress--hero .progress__bar{
  background: #4ea5f4;
}

/* 2) Fluid typography for hero title (nice on all widths) */
.hero-card__title{
  font-size: clamp(22px, 2.6vw, 30px);
}
.pagehead__title{
  font-size: clamp(20px, 2.2vw, 26px) !important;
}

/* 3) NAV: keep usable on small screens */
@media (max-width: 720px){
  .topbar__inner{ padding: 10px 12px; }
  .brand__text{ max-width: 70vw; }
  .nav{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav__link{ white-space: nowrap; }
}

/* 4) Tablet portrait (<= 860px): more compact paddings */
@media (max-width: 860px){
  :root{ --container: 980px; }
  .container{ padding: 0 14px; }
  .card{ padding: 16px !important; }
  .hero-card{ padding: 18px; border-radius: 20px; }
  .hero-card__actions .btn{ width: 100%; }
  
  div.footer__inner {
    padding: 20px; 
  }
}

/* 5) Mobile (<= 520px): stack controls, reduce “visual weight” */
@media (max-width: 520px){
  body{ font-size: 14px; }
  .container{ padding: 0 12px; }
  .topbar__right{ width:100%; justify-content:flex-start; }
  .brand{ width:100%; }
  .brand__logo{ width:32px; height:32px; border-radius:10px; }
  .brand__subtitle{ font-size: 11px; }

  main.container{ padding-top: 18px; }

  .hero-card{ padding: 16px; }
  .hero-card__desc{ font-size: 14px; }
  .hero-card__actions{ width:100%; }
  .hero-card__actions .btn{ width:100%; }

  /* KPI cards + metric cards */
  .cards > .card{ min-width: 0; }
  .stat{ min-height: auto; }
  .stat__value{ font-size: 24px !important; }

  .metrics-row{ margin-top: 18px; margin-bottom: 18px; }
  .metric-card{ padding: 16px; border-radius: 18px; }
  .metric-title{ font-size: 16px; }
  .metric-value{ font-size: 24px; }

  /* Bars list */
  .bar-chip{ padding: 10px 10px !important; }
  .bar-chip__meta, .bar-chip__val{ font-size: 13px !important; }

  /* Status widget */
  .status-widget{ padding: 12px 12px; border-radius: 18px; }
  .status-widget__value{ font-size: 20px; }
}

/* 6) Prevent horizontal overflow from long buttons/actions in tables */
.table__row .tx-col--actions,
.table--tx .table__row > div:nth-child(6){
  flex-wrap:wrap;
  row-gap: 8px;
}
@media (max-width: 720px){
  .table__row .btn{ width:auto; }
}

/* 7) Optional: better tap targets on mobile */
@media (pointer: coarse){
  /*.btn{ min-height: 6px; }*/
  .nav__link{ padding: 10px 12px; }
}

/* =========================================================
   HEADER RESPONSIVE (Desktop / Tablet / Mobile)
   - Adds burger toggle on mobile
   - Turns nav into dropdown list on small screens
   ========================================================= */

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.nav-toggle{
  display:none;
  margin-left:auto;
  border:1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.70);
  border-radius: 14px;
  padding: 10px 12px;
  align-items:center;
  gap:10px;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}
.nav-toggle:active{ transform: translateY(1px); }
.nav-toggle__icon{
  width: 18px;
  height: 12px;
  display:inline-block;
  position: relative;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background: rgba(15,23,42,0.72);
  border-radius: 2px;
}
.nav-toggle__icon::before{ top:0; box-shadow: 0 5px 0 rgba(15,23,42,0.72); }
.nav-toggle__icon::after{ bottom:0; }

.topbar__nav{
  display:flex;
  align-items:center;
  gap: 14px;
}

/* Tablet / Mobile behavior */
@media (max-width: 720px){
  .topbar__inner{
    flex-wrap: nowrap;
    row-gap: 10px;
  }

  /* nav-toggle, topbar__nav, nav links — all handled by unified block below */
  .topbar__right{
    width:100%;
    justify-content:flex-start;
  }
}

/* =========================================================
   HEADER RESPONSIVE V3 (Tablet compact + Mobile drawer)
   - <=1024px: nav stays horizontal, compact
   - <=520px: burger opens a sliding drawer with X close
   ========================================================= */

html.no-scroll, html.no-scroll body{ overflow:hidden; }

/* Base: overlay hidden by default */
.topbar__overlay{ display:none; }

/* Tablet: compact horizontal nav (no dropdown) */
@media (max-width: 1024px){
  .topbar__inner{ gap: 10px; padding: 14px 16px;}
  .nav{ gap: 6px; }
  .nav__link{
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 12px;
  }
  .brand__title{ font-size: 14px; }
  .brand__subtitle{ font-size: 11px; }
}

/* Keep nav horizontal and scrollable on tablet when tight */
@media (max-width: 1024px){
  .nav{
    /*overflow-x:auto;*/
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
    flex-wrap: nowrap;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav__link{ white-space: nowrap; }
}

/* Mobile drawer: only on phones */
/* <=520px layout only — drawer handled by unified block */
@media (max-width: 520px){
  .topbar__right{ width:100%; margin-top:12px; justify-content:flex-start; }
  .brand__text{ max-width: 62vw; }
  
  .topbar__inner {
      padding: 10px 12px;
  }
}

/* =========================================================
   HEADER — UNIFIED DRAWER (mobile + tablet <= 860px)
   Desktop (> 860px): inline nav, burger hidden
   JS class toggled: .topbar.is-open
   ========================================================= */

/* Desktop */
@media (min-width: 861px){
  .nav-toggle{ display:none !important; }
  .topbar__navhead{ display:none !important; }
  .topbar__nav{
    display:flex !important;
    position:static !important;
    width:auto !important; height:auto !important;
    padding:0 !important; border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    visibility:visible !important;
    overflow:visible !important;
  }
  .topbar__overlay{ display:none !important; }
}

/* Mobile + Tablet */
@media (max-width: 860px){
  .nav-toggle{ display:inline-flex !important; }

  .topbar__nav{
    position:fixed !important;
    top:0 !important; right:0 !important; bottom:0 !important;
    height:100vh !important;
    width:min(88vw, 360px) !important;
    padding:14px 14px 18px !important;
    background:rgba(255,255,255,0.96) !important;
    box-shadow:-18px 0 50px rgba(2,6,23,.18) !important;
    transform:translateX(100%) !important;
    visibility:hidden !important;
    transition:transform .22s ease, visibility 0s linear .22s !important;
    z-index:70 !important;
    display:block !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .topbar.is-open .topbar__nav{
    transform:translateX(0) !important;
    visibility:visible !important;
    transition:transform .22s ease, visibility 0s linear 0s !important;
  }

  .topbar__overlay{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(2,6,23,0.40) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .22s ease !important;
    z-index:60 !important;
  }
  .topbar.is-open .topbar__overlay{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  body.nav-open{ overflow:hidden !important; }

  .topbar__navhead{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:6px 4px 12px;
    border-bottom:1px solid rgba(15,23,42,0.08);
    margin-bottom:12px;
  }
  .topbar__navtitle{ font-weight:900; color:rgba(15,23,42,0.82); }

  .nav-close{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    border:1px solid rgba(15,23,42,0.12);
    background:rgba(248,250,252,0.90);
    border-radius:14px; padding:10px 12px;
    line-height:1; cursor:pointer;
  }
  .nav-close__x{
    width:14px; height:14px;
    display:inline-block; position:relative;
  }
  .nav-close__x::before, .nav-close__x::after{
    content:""; position:absolute;
    left:0; right:0; top:50%; height:2px;
    background:rgba(15,23,42,0.72);
    border-radius:2px; transform-origin:center;
  }
  .nav-close__x::before{ transform:translateY(-50%) rotate(45deg); }
  .nav-close__x::after{  transform:translateY(-50%) rotate(-45deg); }

  .topbar__nav .nav{
    width:100%; flex-direction:column;
    align-items:stretch; gap:8px; flex-wrap:nowrap; overflow:visible;
  }
  .topbar__nav .nav__link{
    width:100%; justify-content:flex-start;
    padding:12px; border-radius:14px; font-size:14px;
    white-space:normal;
    border:1px solid rgba(15,23,42,0.08);
    background:rgba(248,250,252,0.75);
  }
}
.nav__link.is-active {
  font-weight: 700;
  color: var(--text-strong, #0f172a);
}

/* =========================
   TRANSACTIONS PAGE POLISH
   - clear typography hierarchy
   - separate badges vs export actions
   - hero section with guidance
   ========================= */

/* 1) Hero */
.page-hero{
  margin: 6px 0 18px;
}
.page-hero--tx .page-hero__content{
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.4);
  background: #ffffff;
  box-shadow: 0 18px 54px rgba(2,6,23,0.10);
}

.page-hero--goals .page-hero__content{
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.4);
  background: #ffffff;
  box-shadow: 0 18px 54px rgba(2,6,23,0.10);
}

/* Goals hero: KPI panel */
.hero-kpis{
  padding: 14px;
}
.hero-kpis__top{
  /*display:flex;*/
  /*gap: 12px;*/
  /*align-items:flex-start;*/
  /*justify-content:space-between;*/
}
.hero-kpis__meta{
  min-width: 0;
}
.hero-kpis__label{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.70);
}
.hero-kpis__value{
  margin: 6px 0 10px 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.hero-kpis__hint{
  margin: 6px 0 10px 0;
  font-size: 14px;
  color: rgba(15,23,42,0.70);
}
.hero-kpis__progress{
  flex: 1 1 auto;
  min-width: 160px;
  /*max-width: 220px;*/
  text-align:right;
}
.hero-kpis__subhint{
  margin-top: 6px;
  font-size: 12px;
}
.hero-kpis__divider{
  height: 1px;
  margin: 12px 0;
  background: rgba(15,23,42,0.10);
}
.hero-kpis__badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 10px;
}

/* Goals hero: responsive rhythm */
@media (max-width: 860px){
  .page-hero--goals .page-hero__content{ padding: 18px; border-radius: 20px; }
  .page-hero--goals .page-hero__grid{ gap: 12px; }
  .page-hero--goals .page-hero__actions{ margin-top: 12px; }
  .page-hero--goals .page-hero__helper{ margin-top: 10px; }
  .page-hero--goals .page-hero__right{ flex: 0 0 180px; min-width: 240px; }
}

@media (max-width: 720px){
  .page-hero--goals .page-hero__content{ padding: 16px; border-radius: 18px; }
  .page-hero--goals .page-hero__grid{ flex-direction: column; }
  .page-hero--goals .page-hero__right{ flex: 1 1 auto; min-width: 0; justify-content: stretch; }
  .page-hero--goals .hero-kpis{ width: 100%; }
  .page-hero--goals .hero-kpis__top{ flex-direction: column; }
  .page-hero--goals .hero-kpis__progress{ text-align:left; max-width: none; min-width: 0; }
  .page-hero--goals .hero-kpis__divider{ margin: 10px 0; }
}

/* Optional: extra-tight phones */
@media (max-width: 420px){
  .page-hero--goals .page-hero__actions{ gap: 8px; }
  .page-hero--goals .hero-kpis{ padding: 12px; }
}
.page-hero__eyebrow{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(15,23,42,0.60);
  text-transform: uppercase;
}
.page-hero__title{
  margin: 8px 0 8px;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.page-hero__desc{
  margin: 0;
  max-width: 72ch;
  font-size: 14px;
  color: rgba(15,23,42,0.70);
}

/* Transactions hero: 2 columns (content + monthly badges) */
.page-hero__grid{
  display:flex;
  gap: 16px;
  align-items:flex-start;
  justify-content:space-between;
}
.page-hero__left{
  flex: 1 1 180px;
  min-width: 0;
}
.page-hero__right{
  flex: 0 0 140px;
  min-width: 460px;
  display:flex;
  justify-content:flex-end;
  flex-direction: column;
}
.page-hero__badges{
  margin-top:12px;        
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap: 8px 10px;
}
.page-hero__badges .badge{
  white-space:nowrap;
  max-width:100%;
}
.page-hero--tx .badge--neutral{
  /* don't highlight “Итог” as primary — keep it calm */
  background: rgba(15,23,42,0.05);
  color: rgba(15,23,42,0.78);
  border-color: rgba(15,23,42,0.14);
}
.page-hero__helper{
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.35;
}
.page-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 16px;
}
.page-hero__tips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}
.tip{
  flex: 1 1 260px;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.20);
  background: rgba(248,250,252,0.80);
}
.tip__title{
  display:block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(15,23,42,0.62);
  text-transform: uppercase;
}
.tip__text{
  display:block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(15,23,42,0.82);
}

/* Export dropdown (reused in hero) */
.dropdown{
  position:relative;
  display:inline-block;
}
.dropdown__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dropdown__btn .dropdown__chev{
  margin-left:2px;
  opacity:.75;
}
.dropdown__menu{
  position:absolute;
  top: calc(100% + 8px);
  right:0;
  min-width: 240px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  z-index: 60;
  display:none;
}
.dropdown.is-open .dropdown__menu{ display:block; }

.dropdown__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: inherit;
  line-height: 1.2;
  user-select:none;
}
.dropdown__item:hover,
.dropdown__item:focus{
  background: rgba(0,0,0,.05);
  outline:none;
}
.dropdown__meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.dropdown__title{
  font-weight: 600;
  font-size: 13px;
}
.dropdown__desc{
  font-size: 12px;
  opacity:.75;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* 2) Typography hierarchy on Transactions page */
.section__title{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.25px;
  color: rgba(15,23,42,0.92);
}
.section__head{
  align-items:flex-start;
  margin-bottom: 24px;
}

/* 3) Badges + exports: separated + responsive */
.tx-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  gap: 12px;
  margin-left: auto;
}
.tx-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}
.tx-exports{
  padding-left: 12px;
  border-left: 1px dashed rgba(15,23,42,0.14);
}
.tx-exports__label{
  display:block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: rgba(15,23,42,0.55);
}
.tx-exports__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:flex-end;
}

/* 4) Missing button variant used on the page */
.btn--outline{
  background: #eef3fd;
  border-color: rgba(15,23,42,0.4);
}
.btn--outline:hover{
  background: rgba(15,23,42,0.04);
}

/* Export dropdown (Transactions hero) */
.dropdown{ position:relative; display:inline-block; }
.dropdown__btn{ display:inline-flex; align-items:center; gap:8px; }
.dropdown__btn .dropdown__chev{ margin-left:2px; opacity:.75; }
.dropdown__menu{
  position:absolute;
  top: calc(100% + 8px);
  right:0;
  min-width: 240px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  z-index: 60;
  display:none;
}
.dropdown.is-open .dropdown__menu{ display:block; }
.dropdown__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: inherit;
  line-height: 1.2;
  user-select:none;
}
.dropdown__item:hover,
.dropdown__item:focus{ background: rgba(0,0,0,.05); outline:none; }
.dropdown__meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dropdown__title{ font-weight: 600; font-size: 13px; }
.dropdown__desc{
  font-size: 12px;
  opacity:.75;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
@media (max-width: 520px){
  .dropdown__menu{ right:auto; left:0; min-width: 100%; }
  .dropdown__desc{ max-width: 100%; }
}

/* 5) Mobile: stack groups cleanly */
@media (max-width: 720px){
  .tx-head{ width:100%; justify-content:flex-start; }
  .tx-badges{ width:100%; justify-content:flex-start; }
  .tx-exports{
    width:100%;
    padding-left: 0;
    border-left: 0;
    border-top: 1px dashed rgba(15,23,42,0.14);
    padding-top: 12px;
    margin-top: 2px;
  }
  .tx-exports__actions{ justify-content:flex-start; }
}

/* Hero columns stack on tablet/phone */
@media (max-width: 860px){
 /* .page-hero__grid{ flex-direction: column; }*/
  .page-hero__right{ width:100%; justify-content:flex-start; }
  .page-hero__badges{ justify-content:flex-start; }
}

@media (max-width: 620px){
    .page-hero__right{ flex-direction: column; }
    .page-hero__badges{ flex-direction: column; justify-content: flex-start;}
}


/* Phone: hero actions become full width */
@media (max-width: 520px){
  .page-hero--tx .page-hero__content{ padding: 16px; border-radius: 18px; }
  .page-hero__actions .btn{ width:100%; }
  .tip{ min-width: 0; }

  .page-hero__badges{ gap:6px 8px; }
  .page-hero__badges .badge{ font-size: 12px; }
  .page-hero__badges .icon{ width:14px; height:14px; }

  .dropdown__menu{ right:auto; left:0; min-width: 100%; }
  .dropdown__desc{ max-width: 100%; }
}

/* =========================================================
   Transactions page — Responsive refinements (Desktop/Tablet/Mobile)
   ========================================================= */

/* 1) Hero scales a bit more on large screens */
@media (min-width: 980px){
  .page-hero--tx .page-hero__content{ padding: 26px 28px; }
  .page-hero__desc{ font-size: 15px; }
}

/* 2) Form grid: 3 cols on desktop, 2 cols on tablet */
@media (min-width: 980px){
  .form__grid .field{ width: 24%; }
  .form__grid .field--wide{ width: 100%; }
}
@media (min-width: 620px) and (max-width: 979px){
  .form__grid .field{ width: calc(50% - 6px); }
  .form__grid .field--wide{ width: 100%; }
}

/* 3) Filters/actions: keep buttons tidy on tablet */
@media (min-width: 620px) and (max-width: 979px){
  .form__actions{ gap: 10px; }
  .form__actions .btn{ white-space: nowrap; }
}

/* 4) Transactions table: card-like rows on mobile */
@media (max-width: 720px){
  .table--tx{ border: 0; background: transparent; box-shadow: none; }
  .table--tx .table__head{ display:none; }

  .table--tx .table__row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px 12px;
    border: 1px solid rgba(15,23,42,0.12);
    border-radius: 16px;
    background: #fff;
  }

  .table--tx .tx-col{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
  }

  .table--tx .tx-col::before{
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 12px;
    color: rgba(15,23,42,0.55);
    margin-right: 10px;
    padding-top: 2px;
  }

  .table--tx .tx-col strong{ font-size: 15px; }

  .table--tx .tx-col--amount{ justify-content: space-between; }
  .table--tx .table--tx .tx-col--actions::before{ content: ""; display:none; }

  .table--tx .tx-col--actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* Keep long notes readable */
  .table--tx .note-text{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* 5) Tablet: slightly tighter table columns */
@media (min-width: 620px) and (max-width: 979px){
  .table__head--tx, .table__row{ gap: 10px; }
  .tx-col--note{ flex: 2.2; }
}

/* =========================
   GOALS PAGE POLISH
   - clearer hierarchy
   - compact goal cards
   - hero like Transactions
   ========================= */

/* Scope everything to the Goals page */
.page--goals .page-hero{ margin: 6px 0 18px; }
.page--goals .page-hero__content{
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.12);
  background: #ffffff;
  box-shadow: 0 18px 54px rgba(2,6,23,0.10);
}

.page--goals .page-hero__eyebrow{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(15,23,42,0.60);
  text-transform: uppercase;
}
.page--goals .page-hero__title{
  margin: 8px 0 8px;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.6px;
}
.page--goals .page-hero__desc{
  margin: 0;
  max-width: 72ch;
  font-size: 14px;
  color: rgba(15,23,42,0.72);
}
.page--goals .page-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 16px;
}
.page--goals .page-hero__tips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Section headers: stronger title + more visible hint */
.page--goals .section__title{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.25px;
  color: rgba(15,23,42,0.92);
}
.page--goals .section__meta{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,0.62);
}

/* KPI layout (Overall progress card) */
.page--goals .kpi{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.page--goals .kpi__meta{ flex: 1 1 220px; min-width: 200px; }
.page--goals .kpi__side{ flex: 0 1 220px; min-width: 180px; }
.page--goals .kpi__tag{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: rgba(15,23,42,0.62);
}

/* Status badges row */
.page--goals .goals-statuses{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

/* Filters card spacing */
.page--goals .filters-card{ margin-bottom: 12px; }

/* Summary row (overall + statuses) */
.goals-summary{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items: stretch;
}
.goals-summary > .card{ flex: 1 1 320px; min-width: 280px; }

/* Card primitives used on this page */
.card__label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: rgba(15,23,42,0.62);
}
.card__value{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.card__hint{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(15,23,42,0.66);
  line-height: 1.35;
}

.card__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.card__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Goal cards: compact + tidy spacing */
.goals-grid{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items: stretch;
}
.goal-card{
  flex: 1 1 320px;
  min-width: 280px;
}
.goal-card.card{
  padding: 14px;
  border-radius: 18px;
}

.goal-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.goal-card__titlewrap{ min-width:0; }
.goal-card__title{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  overflow-wrap:anywhere;
}
.goal-card__meta{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(15,23,42,0.60);
}
.goal-card__status{ margin-left: 8px; flex: 0 0 auto; }

.goal-card__proghead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
}
.goal-card__proglabel{ font-size: 12px; font-weight: 600; color: #5780a6; }
.goal-card__progpct{ font-size: 13px; font-weight: 950; }

.goal-card__foot{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:baseline;
  margin-top: 8px;
}

/* Buttons: smaller inside goal cards */
.goal-card .btn{ min-height: 36px; padding: 0 12px; font-size: 13px; }
.goal-card .btn--primary{ box-shadow: 0 10px 18px rgba(37,99,235,0.14); }
.goal-card .btn--danger{ min-height: 34px; }

/* Optional accent backgrounds for goals */
.page--goals .card--neutral{
  background: linear-gradient(180deg, #ffffff, rgba(37,99,235,0.06));
  border-color: rgba(37,99,235,0.16);
}
.page--goals .card--income{
  background: linear-gradient(180deg, #ffffff, rgba(22,163,74,0.08));
  border-color: rgba(22,163,74,0.18);
}

/* Mobile: hero buttons full width, goal cards even tighter */
@media (max-width: 520px){
  .page--goals .page-hero__content{ padding: 16px; border-radius: 18px; }
  .page--goals .page-hero__actions .btn{ width:100%; }
  .page--goals .page-hero__tips .tip{ min-width: 0; }
  .goal-card.card{ padding: 12px; }
  /* On mobile keep goal actions in one row */
  .goal-card .card__actions{ flex-wrap: nowrap; }
  .goal-card .btn{ width: auto; flex: 1 1 0; justify-content:center; padding: 0 10px; }
}

/* New Goal form: specific responsive layout (4-in-a-row desktop, 2x2 tablet, stacked mobile) */
@media (min-width: 980px){
  .goal-new-grid .field{ width: calc(25% - 9px); }
  .goal-new-grid .field--wide{ width: 100%; }
}
@media (min-width: 620px) and (max-width: 979px){
  .goal-new-grid .field{ width: calc(50% - 6px); }
  .goal-new-grid .field--wide{ width: 100%; }
}

/* Tablet: keep cards airy but not huge */
@media (min-width: 620px) and (max-width: 979px){
  .goal-card{ flex: 1 1 calc(50% - 6px); min-width: 0; }
}


/* =========================
   CATEGORIES PAGE POLISH
   - typography hierarchy + visible hints
   - hero like Transactions
   - compact list rows: actions in one line, smaller buttons
   ========================= */

/* Hero (Categories) */
.page--cats .page-hero{ margin: 6px 0 18px; }
.page--cats .page-hero__content{
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.4);
  background: #ffffff;
  box-shadow: 0 18px 54px rgba(2,6,23,0.10);
}
.page--cats .page-hero__eyebrow{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(15,23,42,0.60);
  text-transform: uppercase;
}
.page--cats .page-hero__title{
  margin: 8px 0 8px;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.page--cats .page-hero__desc{
  margin: 0;
  max-width: 72ch;
  font-size: 14px;
  color: rgba(15,23,42,0.72);
}
.page--cats .page-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 16px;
}
.page--cats .page-hero__tips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Section hierarchy + more visible helper text */
.page--cats .section__title{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.25px;
  color: rgba(15,23,42,0.92);
}
.page--cats .section__meta{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,0.62);
}

/* Category list rows: keep everything compact */
.page--cats .bar-chip{
  border-radius: 14px;
}

/* Make columns denser: name + bar + small #id + actions */
.page--cats .bar-chip__meta{
  flex: 0 0 140px;
  font-size: 13px;
  font-weight: 850;
}
.page--cats .bar-chip__val{
  flex: 0 0 70px;
  text-align: right;
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,0.70);
}

/* Actions: inline, no stacked buttons */
.page--cats .row-actions{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
}

/* Smaller buttons specifically in category rows */
.page--cats .row-actions .btn{
  min-height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 999px;
}

/* Inactive category: clearly visible but subdued */
.page--cats .is-inactive{
  opacity: 0.72;
}
.page--cats .is-inactive .bar-chip__meta{
  text-decoration: line-through;
  text-decoration-color: rgba(15,23,42,0.22);
}

/* Tablet: allow name to breathe, still keep actions on one line */
@media (min-width: 620px) and (max-width: 979px){
  .page--cats .bar-chip__meta{ flex: 0 0 160px; }
}

/* Mobile: keep actions in a row and avoid “thick” rows */
@media (max-width: 760px){
  .page--cats .bar-chip{
    border: 1px solid rgba(15,23,42,0.08);
    background: rgba(248,250,252,0.75);
  }

  /* Keep #id + actions on one line under the bar */
  .page--cats .bar-chip__val{
    flex: 0 0 auto;
    text-align: left;
    font-size: 12px;
    color: rgba(15,23,42,0.62);
  }

  .page--cats .row-actions{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .page--cats .row-actions .btn{
    flex: 0 0 auto;
  }
}

/* Phone: hero actions full width for clarity */
@media (max-width: 520px){
  .page--cats .page-hero__content{ padding: 16px; border-radius: 18px; }
  .page--cats .page-hero__actions .btn{ width:100%; }
  .page--cats .page-hero__tips .tip{ min-width: 0; }
}


/* ===== Dashboard: status meter inside hero ===== */
.status-meter{
  margin-top: 12px;
  padding: 4px 8px 0 8px;
}
.status-meter__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 8px;
}
.status-meter__label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.72);
}
.status-meter__val{
  font-size: 13px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  color: rgba(15,23,42,0.72);
  white-space: nowrap;
}
.progress--status{
  height: 10px;
}
/* =========================================================
   LAYOUT PATCH: KPI row + Goals grid (requested)
   1) .kpi-row uses flex and stays in ONE line on large screens
   2) .goals-grid uses flex and shows 3 cards per row on large screens
   ========================================================= */

/* 1) KPI row: single line on large screens */
.kpi-row{
  display:flex;
  gap: var(--gap, 14px);
  flex-wrap: wrap; /* default: allow wrap on smaller widths */
  align-items: stretch;
}

/* Desktop: keep KPI cards in one row */
@media (min-width: 980px){
  .kpi-row{
    flex-wrap: nowrap;
  }
  .kpi-row > *{
    flex: 1 1 0;
    min-width: 0;
  }
}

/* 2) Goals grid: 3 cards per row on large screens */
.goals-grid{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-top: 24px;
}

/* Desktop: force 3 per row */
@media (min-width: 980px){
  .goals-grid .goal-card{
    flex: 0 0 calc((100% - 24px) / 3); /* 3 cols, 2 gaps x 12px */
    min-width: 0;
  }
}

/* Tablet: 2 per row (keep existing behavior, but make sure it wins) */
@media (min-width: 620px) and (max-width: 979px){
  .goals-grid .goal-card{
    flex: 0 0 calc(50% - 6px);
    min-width: 0;
  }
}

/* Mobile: 1 per row */
@media (max-width: 619px){
  .goals-grid .goal-card{
    flex: 0 0 100%;
    min-width: 0;
  }
}


/* =========================================================
   MOBILE RIGHT-DRAWER NAV FIX (<= 860px)
   Fix: when user has scrolled down, opening burger menu must
   render the nav panel relative to the viewport (fixed),
   not relative to the document flow (absolute/static).
   Works with JS toggle class: .topbar.is-open + body.nav-open
   ========================================================= */

@media (max-width: 860px){
  /* Lock background scroll when nav is open (JS adds .nav-open) */
  body.nav-open{ overflow: hidden; }

  /* Fullscreen overlay */
  .topbar__overlay{
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    background: rgba(2,6,23,0.40);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  /* Right drawer panel */
  /* topbar__nav handled by unified block above */
  .topbar.is-open .topbar__overlay{
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /* Make nav links full width inside drawer */
  .topbar__nav .nav{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .topbar__nav .nav__link{
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
  }

  /* Ensure burger is visible and header layout stays sane */
  .nav-toggle{ display: inline-flex; }

  /* Close button (X) inside drawer — visible on all drawer sizes */
  .nav-close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15,23,42,0.12);
    background: rgba(248,250,252,0.90);
    border-radius: 14px;
    padding: 10px 12px;
    line-height: 1;
    cursor: pointer;
  }
  .nav-close__x{
    width: 14px;
    height: 14px;
    display: inline-block;
    position: relative;
  }
  .nav-close__x::before,
  .nav-close__x::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 2px;
    background: rgba(15,23,42,0.72);
    border-radius: 2px;
    transform-origin: center;
  }
  .nav-close__x::before{ transform: translateY(-50%) rotate(45deg); }
  .nav-close__x::after{ transform: translateY(-50%) rotate(-45deg); }
}
@media (max-width: 720px){
    .table--trend6 .table__row .col-month{
        margin-bottom: 12px;
    }
    .table--trend6 .table__row .col-inc {
        margin-bottom: 18px;
    }
}
.brand__logo-img {
    width:auto;
    display:block;
}
/* =========================================================
   SETTINGS PAGE
   - hero + sidebar layout
   - matches dashboard / transactions / goals style
   ========================================================= */

.page--settings .page-hero{ margin: 6px 0 18px; }

.page--settings .page-hero__content{
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.4);
  background: #ffffff;
  box-shadow: 0 18px 54px rgba(2,6,23,0.10);
}

.page--settings .page-hero__eyebrow{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(15,23,42,0.60);
  text-transform: uppercase;
}

.page--settings .page-hero__title{
  margin: 8px 0 8px;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.page--settings .page-hero__desc{
  margin-bottom: 1rem;
  max-width: 72ch;
  font-size: 14px;
  color: rgba(15,23,42,0.72);
}

/* Hero layout */
.page--settings .page-hero__grid{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
}

.page--settings .page-hero__left{
  flex:1 1 560px;
  min-width:0;
}

.page--settings .page-hero__right{
  flex:0 0 320px;
  min-width:280px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Mini cards (right side) */
.settings-mini{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,0.2);
  background: rgba(248,250,252,0.82);
}

.settings-mini__label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2px;
  color: rgba(15,23,42,0.60);
}

.settings-mini__value{
  margin-top:6px;
  font-size:18px;
  font-weight:700;
  color: rgba(15,23,42,0.90);
}

.settings-mini__hint{
  margin-top:6px;
  font-size:12px;
  line-height:1.4;
  color: rgba(15,23,42,0.66);
}

/* Layout */
.settings-layout{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
}

.settings-main{
  flex:1 1 700px;
  min-width:320px;
}

.settings-side{
  flex:0 0 320px;
  min-width:280px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Sections */
.settings-section + .settings-section{
  margin-top:36px;
}

.settings-section__head{
  margin-bottom:14px;
}

.settings-section__title{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.2px;
  color: rgba(15,23,42,0.92);
}

.settings-section__desc{
  margin-top:4px;
  font-size:13px;
  line-height:1.4;
  color: rgba(15,23,42,0.64);
}

/* Grid */
.settings-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
}

.settings-grid .field{
  width: calc(50% - 6px);
}

.settings-grid .field--full{
  width:100%;
}

/* Sidebar cards */
.settings-card-note{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,0.10);
  background: rgba(248,250,252,0.78);
}

.settings-card-note__title{
  font-size:13px;
  font-weight:900;
  color: rgba(15,23,42,0.86);
  margin-bottom:6px;
}

.settings-card-note__text{
  font-size:13px;
  line-height:1.5;
  color: rgba(15,23,42,0.68);
}

/* Tips list */
.settings-list{
  margin:0;
  padding-left:18px;
  color: rgba(15,23,42,0.72);
  font-size:13px;
  line-height:1.1;
}

.settings-list li + li{
  margin-top:6px;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 860px){
  .page--settings .page-hero__grid{
    flex-direction:row;
  }

  .page--settings .page-hero__right{
    flex:1 1 auto;
    min-width:0;
    width:100%;
  }

  .page--settings .page-hero__left{
     flex:1 0 390px;
     min-width:0;
  }

  .settings-layout{
    flex-direction:column;
  }

  .settings-side{
    flex:1 1 auto;
    min-width:0;
    width:100%;
  }
}

@media (max-width: 640px){
  .page--settings .page-hero__content{
    padding:16px;
    border-radius:18px;
  }
  .page--settings .page-hero__grid{
    flex-wrap: wrap;
  }
  
  .page--settings .page-hero__left{
     flex: 1 1 auto;
     min-width:0;
  }
  
  .settings-grid{
      flex-wrap:wrap;
    }
  
  .settings-grid .field{
    width:100%;
  }

  .card__actions .btn{
    width:100%;
  }
}

/* =========================
   Admin Users Page
========================= */

.admin-page{
    max-width:1100px;
    margin:0 auto;
    padding:24px 16px;
}

.admin-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
    gap:12px;
}

.admin-title{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
}

.admin-subtitle{
    font-size:13px;
    color:#64748b;
}

/* Card */

.admin-card{
    background:#fff;
    border:1px solid rgba(15,23,42,.06);
    border-radius:20px;
    padding:18px;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

/* Table */

.admin-table{
    width:100%;
    border-collapse:collapse;
}

.admin-table thead{
    background:#f8fafc;
}

.admin-table th{
    text-align:left;
    font-size:12px;
    font-weight:600;
    color:#64748b;
    padding:12px 10px;
    border-bottom:1px solid #e2e8f0;
}

.admin-table td{
    font-size:14px;
    color:#0f172a;
    padding:14px 10px;
    border-bottom:1px solid #f1f5f9;
}

.admin-table tr:last-child td{
    border-bottom:none;
}

.admin-table tr:hover{
    background:#f9fbfd;
}

/* Email column */

.admin-email{
    font-weight:600;
    color:#0f172a;
}

/* Role badges */

.role-badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.role-admin{
    background:rgba(239,68,68,.1);
    color:#ef4444;
}

.role-user{
    background:rgba(59,130,246,.1);
    color:#3b82f6;
}

/* Stats */

.user-stats{
    display:flex;
    gap:12px;
    font-size:13px;
    color:#475569;
}

.stat-pill{
    background:#f1f5f9;
    padding:4px 10px;
    border-radius:999px;
}

/* Empty state */

.admin-empty{
    text-align:center;
    padding:40px 20px;
    color:#64748b;
    font-size:14px;
}

/* Mobile */

@media (max-width:768px){

    .admin-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .admin-table thead{
        display:none;
    }

    .admin-table tr{
        display:block;
        margin-bottom:14px;
        background:#fff;
        border-radius:14px;
        padding:12px;
        box-shadow:0 8px 20px rgba(15,23,42,.05);
    }

    .admin-table td{
        display:flex;
        justify-content:space-between;
        padding:6px 0;
        border:none;
        font-size:13px;
    }

    .admin-table td::before{
        content:attr(data-label);
        font-weight:600;
        color:#64748b;
    }

}

/*-------------Charts-dashboard------------------------------*/

.analytics-card{
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:22px;
    padding:22px;
    box-shadow:0 16px 40px rgba(15,23,42,.06);
}

.mini-bars{
    display:flex;
    align-items:end;
    gap:10px;
    height:140px;
    padding-top:16px;
}

.mini-bar-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.mini-bar{
    width:100%;
    max-width:34px;
    min-height:8px;
    border-radius:999px 999px 6px 6px;
    background:linear-gradient(180deg,#cee53f,#22c55e);
}

.mini-bar-label{
    font-size:12px;
    color:#64748b;
}

.bar-net-pos{
  background:#4ea5f4;
}

.bar-net-neg{
  background:#807f7e;
}
/* =========================
   6-Month Trend (Improved)
========================= */

.trend-chart{
    display:flex;
    align-items:flex-end;
    gap:12px;
    height:180px;
    position:relative;
}

.trend-y-axis{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
    font-size:11px;
    color:#9ca3af;
    padding-right:6px;
}

.trend-bars{
    display:flex;
    align-items:flex-end;
    gap:14px;
    flex:1;
    height:100%;
    border-left:1px solid #e5e7eb;
    padding-left:10px;
    position:relative;
}

/* horizontal grid lines */
.trend-bars::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:
        linear-gradient(to top,
            transparent 0%,
            transparent 24%,
            #f1f5f9 25%,
            transparent 26%,
            transparent 49%,
            #f1f5f9 50%,
            transparent 51%,
            transparent 74%,
            #f1f5f9 75%,
            transparent 76%
        );
    pointer-events:none;
}

.trend-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    height:100%;
    gap:6px;
}

.trend-bar-wrap{
    height:100%;
    width:16px;
    display:flex;
    align-items:flex-end;
}

.trend-bar{
    width:100%;
    border-radius:6px;
    transition:0.3s;
}

/* expense визуально главный */
.trend-bar.expense{
    background:linear-gradient(180deg,#ef4444,#dc2626);
}

/* hover эффект */
.trend-bar:hover{
    opacity:0.85;
}

.trend-month{
    font-size:11px;
    color:#6b7280;
}
/* Demo mode banner */
.demo-banner{
  background:#111827;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.demo-banner__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 16px;
  font-size:14px;
  text-align:center;
}
.demo-banner__inner strong{
  color:#cee53f;
}
@media (max-width:640px){
  .demo-banner__inner{display:block;line-height:1.45;}
  .demo-banner__inner strong{display:block;margin-bottom:2px;}
}


/* =========================
   Goal details page
========================= */

.goal-deadline-badge {
  margin-left: 8px;
}

.goal-summary-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.goal-summary-card {
  flex: 1 1 420px;
  min-width: 320px;
}

.goal-progress-side {
  min-width: 200px;
}

.goal-remaining-value {
  font-size: 20px;
  margin-top: 4px;
}

.goal-progress {
  margin-top: 10px;
}

.goal-contribution-badges {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.goal-col--date {
  width: 120px;
  flex: 0 0 120px;
}

.goal-col--amount {
  width: 170px;
  flex: 0 0 170px;
}

.goal-col--note {
  width: 360px;
  flex: 2 1 360px;
}

.goal-col--actions {
  width: 140px;
  flex: 0 0 140px;
}

.goal-contribution-row {
  background: rgba(22, 163, 74, 0.03);
}
.goal-conribution {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 12px
}
.goal-contribution-row .goal-col--note {
  color: #374151;
}

.goal-delete-form {
  display: inline;
}

@media (max-width: 720px) {
  .goal-summary-card {
    min-width: 100%;
  }

  .goal-progress-side {
    min-width: 100%;
  }

  .goal-col--date,
  .goal-col--amount,
  .goal-col--note,
  .goal-col--actions {
    width: 100%;
    flex: 1 1 100%;
  }
  .goal-col--date {
      margin-bottom: 10px;
  }
  .goal-col--amount {
    text-align: left;
  }
  .goal-col--actions {
      text-align: right;
  }
  .goal-conribution {
    gap: 6px
  }
}