:root{
  --bg:#f9fafb;
  --card:#ffffff;
  --muted:#555555;
  --text:#5a5a5a;       /* unified text color */
  --accent:#22c55e;
  --line:#dddddd;
  --btn:#F4D23C;        /* Psyduck yellow */
  --focus:#3C5EF4;      /* complement to Psyduck yellow */
  --btnText:#5a5a5a;    /* dark gray text instead of black */
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.4 Verdana, sans-serif;
}
.topbar{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:center;
  align-items:center;
    position:relative;
  min-height:52px;
}
.topbar h1{
  margin:0;
  font-size:18px;
  text-align:center;
}
button.nav-back-btn{
  width:auto;
  margin:0;
  padding:6px 12px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:var(--text);
  font-weight:600;
  font-size:14px;
  line-height:1;
  display:flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  transition:background 120ms ease, color 120ms ease, transform 120ms ease;
}
button.nav-back-btn:hover{
  background:rgba(0,0,0,0.08);
}
button.nav-back-btn:active{
  transform:translateY(-50%) scale(0.98);
  background:rgba(0,0,0,0.12);
}

.view{padding:16px}
.hidden{display:none}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  max-width:760px;
  margin:0 auto;
  box-shadow:0 1px 2px rgba(90,90,90,.06);
}
h2{margin:0 0 12px 0;font-size:18px}
label{display:block;margin:10px 0 6px 0;font-size:14px}
input, select, textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
}
button{
  width:100%;
  margin-top:12px;
  padding:12px;
  border-radius:10px;
  border:0;
  background:var(--btn);
  color:var(--btnText);
  font-weight:600
}
button:active{transform:scale(0.995)}
/* Accessible focus states */
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* Consistent hover/disabled */
button:hover{ filter:brightness(0.98); }
button[disabled]{ opacity:.55; cursor:not-allowed; }
.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

.muted{color:var(--muted);font-size:14px}
.msg{min-height:22px;color:var(--accent);margin-top:8px}
.msg.error{
  color:#d32f2f;
  text-decoration:underline;
  text-decoration-thickness:1px;
}

.tabs{display:flex;gap:6px;max-width:760px;margin:0 auto 12px auto}
.tabs button{
  flex:1;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#f0f0f0;
  color:var(--text);
  font-family:inherit;
  cursor:pointer;
}
.tabs button:hover{ filter:brightness(0.98); }
.tabs button.active{
  background:#F4D23C;        /* Psyduck yellow for active tab */
  border:1px solid #e2c200;
  color:#5a5a5a;
  font-weight:700;
}

.tab.hidden{display:none}
.row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}

.list-controls{gap:10px;}
.list-controls label{flex:1 1 160px;}
.list-controls .toggle-col{display:flex;align-items:flex-end;flex:0 0 auto;}
.list-toggle-btn{
  width:auto;
  margin:0;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.btn-blue{
  background:#3C5EF4;
  color:#ffffff;
  border:none;
  border-radius:12px;
  font-weight:700;
  padding:10px 14px;
  line-height:1;
  cursor:pointer;
}
.btn-blue:hover{ filter:brightness(0.95); }
.btn-blue:active{ transform:translateY(1px); }

.list-cat.list-comment{
  -webkit-line-clamp:3;
}

/* ----- List layout ----- */
.list{margin-top:10px}
.item{
  display:grid;
  grid-template-columns: 1fr 120px 88px;
  align-items:center;
  gap:12px;
  padding:10px;
  border-bottom:1px dashed var(--line);
}
.item:hover{ background:#fafafa; }
.item .left{min-width:0}
.item .right{
  text-align:right;
  color:#505050;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* Action button column */
.item .actions{display:flex;justify-content:flex-end}
.item .actions .edit-btn{
  width:auto;
  margin:0;
  padding:8px 12px;
  border-radius:10px;
  background:#3C5EF4;
  color:#fff;
  border:1px solid #2d46cc;
  cursor:pointer;
}
.item .actions .edit-btn:hover{ background:#2d46cc; }
.item .actions .edit-btn:active{ transform:scale(0.99); background:#2438a8; }

@media (max-width: 480px){
  .item{ grid-template-columns: 1fr 100px 76px; gap:10px; }
}

/* ----- KPIs ----- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.kpi{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  background:#fff;
}
.kpi-title{color:var(--muted);font-size:13px}
.kpi-value{
  font-size:18px;
  font-weight:700;
  margin-top:4px;
  color:#505050;
}

/* ----- Links / Buttons ----- */
.linkbtn{display:inline-block;padding:10px 12px;border:1px solid var(--line);border-radius:8px;color:#93c5fd;text-decoration:none}

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:600;
  line-height:1;
}
.btn-month{
  background: var(--btn);
  color: var(--btnText);
  border-color: #e2c200;
}
.btn-month:hover{ filter:brightness(0.97); }
.btn-month:active{ transform:scale(0.99); }

.btn-alltime{
  background: #5a5a5a;
  color: #F4D23C;
  border-color: #444;
}
.btn + .btn{ margin-left:10px; }
.btn-alltime:hover{ filter:brightness(0.97); }
.btn-alltime:active{ transform:scale(0.99); }

*, button, input, select, textarea { font-family: Verdana, sans-serif !important; }

/* --- Dashboard filter controls --- */
.quick-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 10px 0;
}
.quick-btn{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#f0f0f0;
  color:var(--text);
  font-weight:600;
  cursor:pointer;
}
.quick-btn:hover{ filter:brightness(0.98); }
.quick-btn.active{
  background:#F4D23C;
  color:#111;
  border-color:#e2c200;
}
.range-row{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.hidden{display:none !important;}

/* Category-wise Summary grid (tighter columns) */
#byCat{
  display:grid;
  grid-template-columns: 1fr 100px 60px; /* Category | Amount (≤6 digits) | % */
  gap:8px;
  align-items:center;
}
.bycat-row{
  padding:6px 0;
  border-bottom:1px dashed var(--line);
}
.bycat-right{
  text-align:right;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}


/* === System Theme Support ========================================= */
:root{ color-scheme: light dark; }

/* Toast */
#toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: #1f2937;        /* slate-800 */
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  transform-origin: bottom center;
}
#toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Dark theme tweak */
@media (prefers-color-scheme: dark){
  #toast{
    background:#111827;  /* darker */
    color:#e5e7eb;
  }
}


/* Dark theme overrides (system-driven) */
@media (prefers-color-scheme: dark) {
  :root{
    /* keep brand accents */
    --psy:#F4D23C;
    --accent:#3C5EF4;

    /* dark neutrals */
    --bg:#0b1220;
    --card:#0f172a;
    --text:#e5e7eb;
    --muted:#9aa5b1;
    --line:#1f2937;

    --btn:#3C5EF4;
    --btnText:#ffffff;
  }

  /* surfaces */
  body{ background:var(--bg); color:var(--text); }
  .card{
    background:var(--card);
    border-color:var(--line);
    box-shadow:0 2px 10px rgba(0,0,0,.25);
  }

  /* inputs */
  input, select, textarea{
    background:#0f172a;
    color:var(--text);
    border-color:var(--line);
  }

  /* tabs */
  .tabs button{
    background:#0f172a;
    color:var(--text);
    border-color:var(--line);
  }
  .tabs button.active{
    background:var(--psy) !important;
    color:#111 !important;
    border-color:transparent !important;
    font-weight:700;
  }

  /* topbar */
  .topbar{ background:#0b1220; border-bottom:none; box-shadow:none; }
  .topbar h1{ color:#e5e7eb; }

  /* dashboard tiles — FIX */
  .kpi{
    background:#0f172a;          /* dark tile */
    border-color:#1f2937;
  }
  .kpi-title{ color:#9aa5b1; }   /* grey label */
  .kpi-value{ color:#ffffff; }   /* white value */

  /* KPI ids (if present) stay bright; harmless if not used */
  #k_total, #k_anik, #k_barsha, #k_ta, #k_tb, #k_settle{
    color:#ffffff !important;
    font-weight:700;
  }

  /* list items */
  .item .right{ color:#e5e7eb; }
  .item .left { color:#cbd5e1; }

  /* inline messages */
  .msg.ok{ color:#86efac; }
  .msg.error{ color:#fca5a5; text-decoration:underline; }

  /* chips / quick buttons on dark (APPENDED) */
  .chip{ background:#0f172a; border-color:#1f2937; color:#e5e7eb; }
  .quick-btn{ background:#0f172a; border-color:#1f2937; color:#e5e7eb; }

  /* byCat grid on dark (APPENDED) */
  .bycat-head{ color:#9aa5b1; }
  .bycat-row{ border-bottom:1px dashed #1f2937; }
  /* quick filter buttons on dark */
  .quick-btn{
    background:#0f172a;
    border-color:#1f2937;
    color:#e5e7eb;
  }
  .quick-btn.active{
    background:var(--psy);
    color:#111;
    border-color:transparent;
  }

  /* Category-wise Summary on dark */
  .bycat-row{ border-bottom:1px dashed #1f2937; }

} /* end dark-mode */


/* smooth theme transitions */
* { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }

/* Hide the tabs while editing to make the form feel like a dedicated edit view */
body.editing .tabs{ display:none !important; }

/* === Psyduck yellow button (works in both themes) === */
.psyduck-btn {
  background: #F7D000;           /* Psyduck yellow */
  color: #111;                   /* dark text for contrast */
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 2px 10px rgba(0,0,0,0.06);
}
.psyduck-btn:active { transform: translateY(1px); }

/* Ensure dark mode keeps same look */
@media (prefers-color-scheme: dark) {
  .psyduck-btn {
    background: #F7D000;
    color: #111;
  }
}

/* === Compact icon-only button for Edit pencil (transparent) === */
.icon-btn {
  background: transparent;
  color: inherit;
  border: 0;
  width: 28px;              /* compact but still tappable */
  height: 28px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.icon-btn:active { transform: translateY(1px); }

/* === History list (4-col compact) === */
.list-row {
  display: grid;
  /* 62px for date, flexible cat, compact amount, tiny icon column */
  grid-template-columns: 62px minmax(0,1fr) auto 18px;
  align-items: center;
  column-gap: 4px;            /* minimal inter-column gap */
  padding: 2px 4px;           /* near-zero padding, keeps tap target sane */
  border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.06));
}

.list-date {
  margin: 0;                  /* hug left edge */
  padding: 0;
  line-height: 1.05;
  font-weight: 700;
  font-size: 11px;            /* smaller date */
  color: var(--muted, #9aa3ad);
  display: flex;
  flex-direction: column;
}
.list-date .dmy-top { white-space: nowrap; }
.list-date .dmy-year { opacity: .9; }

.list-cat {
  margin: 0; padding: 0;
  font-size: 13px;            /* smaller category */
  line-height: 1.1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* wrap to two lines max */
  -webkit-box-orient: vertical;
}

.list-amt {
  margin: 0; padding: 0 2px 0 0;  /* keep just a breath before icon */
  font-size: 14px;                 /* smaller amount */
  font-weight: 800;
  justify-self: end;
  white-space: nowrap;
}

.edit-icon {
  /* icon is just the emoji; keep it tight and tappable */
  width: 18px; height: 18px;       /* visual box */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;         /* no blue background */
  box-shadow: none;
  padding: 0;
  margin: 0 2px 0 0;               /* hug right edge */
  font-size: 16px;                 /* crisp emoji size */
  line-height: 1;
  cursor: pointer;
}
.edit-icon:active { transform: scale(0.96); }
/* === end History list === */


/* === Psyduck buttons (works in both themes) === */
.btn-psy {
  background: #f6cf2f;          /* Psyduck yellow */
  color: #121212;               /* dark text for contrast */
  border: none;
  border-radius: 12px;
  font-weight: 700;
  padding: 10px 14px;
  line-height: 1;
  cursor: pointer;
}
.btn-psy:active { transform: translateY(1px); }
.btn-psy:disabled { opacity: .6; cursor: not-allowed; }

/* Make sure dark mode doesn't invert these */
.dark .btn-psy {
  background: #f6cf2f;
  color: #121212;
}

/* === History list: compact 4-column grid === */
.list-row {
  display: grid;
  grid-template-columns: 64px 1fr minmax(70px, 110px) 36px; /* date | category | amount | edit */
  align-items: center;
  column-gap: 6px;
  padding: 6px 6px;                  /* minimal padding */
  border-bottom: 1px solid rgba(127,127,127,.12);
}

.list-date {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.05;
  margin: 0;                         /* hug left edge */
}
.list-date .dmy-top {
  font-weight: 800;
}
.list-date .dmy-year {
  opacity: .85;
  font-size: .9em;
}

/* === Compact History list overrides (more room for category) === */

/* Tighter 4-column grid with tuned spacing */
.list-row{
  display:grid;
  grid-template-columns: 56px minmax(0,1fr) min-content 28px; /* date | category | amount | edit */
  align-items:center;
  column-gap:3px;            /* pull category closer to date */
  padding:6px 6px;           /* minimal row padding */
}

/* Pull the date in while keeping plenty of room for the amount */
.list-date{ margin-left:0; }
.list-amt{
  padding:0 6px 0 8px;       /* extra breath from category, slight right inset */
  margin:0;
}

/* Two-line category with tight line-height; no wasted space */
.list-cat{
  line-height:1.1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
  margin-left:-2px;      /* tuck closer to the date */
  padding-right:8px;     /* add breathing room before amount */
}

/* Date stacked already; ensure compact typography matches */
.list-date .dmy-top{ display:block; font-weight:700; }
.list-date .dmy-year{ display:block; opacity:0.8; }

/* Edit button = yellow/orange pencil emoji */
.edit-icon{
  width:28px;
  height:28px;
  border:0;
  background:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.edit-icon::before{ content:none; }

.edit-icon:active{ transform:scale(0.96); }

/* Reduce left/right dead space inside the card list area on narrow screens */
@media (max-width: 480px){
  .card .content{ padding-left:12px; padding-right:12px; }
}