/* Money Mind UI. RTL first: only logical properties, mobile first, one breakpoint at 768px. */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  min-height: 100vh;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: none; box-shadow: var(--focus); }

.icon { width: 24px; height: 24px; flex: none; }
.icon--s { width: 18px; height: 18px; }
.icon.flip { transform: scaleX(-1); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Shell ---------- */
.app { min-height: 100vh; }
.page {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) calc(var(--nav-height) + var(--space-6));
}
.page--bare { padding-bottom: var(--space-6); }

.nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  direction: ltr; /* icon order matches the design left to right */
  justify-content: space-around;
  align-items: center;
  height: var(--nav-height);
  padding-inline: var(--space-3);
  background: var(--primary-dark);
  border-radius: 32px 32px 0 0;
}
.nav__brand { display: none; }
.nav__link {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: rgb(255 255 255 / 0.78);
}
.nav__link:hover { color: #fff; }
.nav__link[aria-current="page"] { background: var(--primary); color: #fff; }
.nav__label { display: none; }

@media (min-width: 768px) {
  .app { display: grid; grid-template-columns: 248px 1fr; }
  .nav {
    position: sticky;
    inset: 0 auto auto 0;
    top: 0;
    grid-column: 1;
    direction: rtl;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-1);
    height: 100vh;
    padding: var(--space-5) var(--space-3);
    border-radius: 0;
  }
  .nav__brand {
    display: block;
    margin-bottom: var(--space-5);
    padding-inline: var(--space-3);
    color: #fff;
    font-size: var(--fs-title);
    font-weight: 700;
    direction: ltr;
    text-align: start;
  }
  .nav__link {
    display: flex;
    gap: var(--space-3);
    width: auto;
    height: 48px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-m);
  }
  .nav__label { display: inline; }
  .page { max-width: 720px; padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .page--bare { max-width: 440px; }
}

/* On desktop the rail sits first in DOM order, so RTL puts it at the right edge. */
@media (min-width: 768px) { .app > .main { grid-column: 2; } }

/* ---------- Typography ---------- */
.title { font-size: var(--fs-title); font-weight: 600; }
.caption { font-size: var(--fs-caption); color: var(--text-secondary); }
.muted { color: var(--text-secondary); }
.big-number { font-size: var(--fs-number); font-weight: 700; line-height: 1.3; }
.big-number small { font-size: var(--fs-body); font-weight: 400; color: var(--text-secondary); margin-inline-start: var(--space-1); }
.section-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.topbar__title { font-size: var(--fs-title); font-weight: 600; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--separator);
  color: var(--text);
}
.icon-btn { position: relative; }
.icon-btn:hover { background: #d9dce1; }
.icon-btn:active, .icon-btn[aria-pressed="true"] { background: #c9cdd4; transform: scale(0.96); }
.icon-btn--primary { background: var(--primary); color: #fff; }
.icon-btn--primary:hover { background: var(--primary-dark); }
.icon-btn--primary:active, .icon-btn--primary[aria-pressed="true"] { background: var(--primary-darker); }
.icon-btn--danger { color: var(--danger); }
.icon-btn[disabled], .icon-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.icon-btn__count {
  position: absolute; inset-block-start: -2px; inset-inline-end: -2px;
  min-width: 20px; height: 20px; padding-inline: 5px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--danger); color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
}
.topbar__actions { display: flex; gap: var(--space-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-inline: var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-m);
  font-weight: 600;
  line-height: 1;
}
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); }
.btn--primary:active, .btn--primary[aria-pressed="true"] { background: var(--primary-darker); }
.btn--secondary { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn--secondary:hover { background: var(--primary-soft); }
.btn--secondary:active, .btn--secondary[aria-pressed="true"] { background: var(--primary-soft-strong); }
.btn--text { background: transparent; color: var(--primary); padding-inline: var(--space-3); }
.btn--text:hover { background: var(--primary-soft); }
.btn--text:active, .btn--text[aria-pressed="true"] { background: var(--primary-soft-strong); }
.btn--danger { background: var(--danger-soft); color: var(--danger); }
.btn--danger:hover { background: #ecc8c4; }
.btn--danger:active, .btn--danger[aria-pressed="true"] { background: #e3b3ae; }
.btn--danger-solid { background: var(--danger); color: #fff; }
.btn--small { min-height: 36px; padding-inline: var(--space-4); font-size: var(--fs-caption); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"], .btn.htmx-request { opacity: 0.55; pointer-events: none; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); }
.field__label { font-weight: 600; font-size: 0.9375rem; }
.field__label small { font-weight: 400; color: var(--text-secondary); margin-inline-start: var(--space-1); }
.input, .select, .date-btn {
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid transparent;
  border-radius: var(--radius-m);
  background: var(--surface);
  text-align: start;
}
.input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.input:focus, .select:focus, .date-btn:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.input--amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.input-affix { position: relative; }
.input-affix .input { padding-inline-end: 4.5rem; }
.input-affix__label {
  position: absolute; inset-block: 0; inset-inline-end: var(--space-4);
  display: grid; align-items: center; pointer-events: none; color: var(--text-secondary);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 20px;
  padding-inline-end: var(--space-4);
  padding-inline-start: 2.75rem;
}
.field--error .input, .field--error .select, .field--error .date-btn { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: var(--fs-caption); }
.field__words { color: var(--primary); font-size: var(--fs-caption); min-height: 1.4em; }
.field__hint { color: var(--text-secondary); font-size: var(--fs-caption); }
.form-error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.9375rem;
}
.form-actions { display: grid; gap: var(--space-2); margin-top: var(--space-2); }

.date-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.date-btn .placeholder { color: var(--text-secondary); }

/* "every N months" appears only while that repeat option is selected. */
.js-every-n { display: none; }
.form:has(option[value="every_n"]:checked) .js-every-n { display: grid; }

.password { position: relative; }
.password .input { padding-inline-end: 3.25rem; }
.password__toggle {
  position: absolute; inset-block: 0; inset-inline-end: var(--space-2);
  width: 44px; border: 0; background: transparent; color: var(--text-secondary);
  display: grid; place-items: center;
}

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip__face {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding-inline: var(--space-4);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--primary);
  font-size: 0.9375rem;
}
.chip__face .icon { width: 18px; height: 18px; }
.chip input:checked + .chip__face { background: var(--primary); color: #fff; }
.chip input:focus-visible + .chip__face { box-shadow: var(--focus); }
.chip input:active + .chip__face { background: var(--primary-soft-strong); }
.chip input:checked:active + .chip__face { background: var(--primary-darker); }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + .chip__face { opacity: 0.5; border-color: var(--text-secondary); color: var(--text-secondary); }
.chip input:disabled:checked + .chip__face { background: var(--text-secondary); color: #fff; }

/* ---------- Cards, rows, badges ---------- */
.card { padding: var(--space-4); border-radius: var(--radius-l); background: var(--surface); }
.card--primary { background: var(--primary); color: var(--on-primary); }
.card--primary .caption { color: rgb(255 255 255 / 0.8); }
.stack { display: grid; gap: var(--space-3); }

.cat-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--cat-bg, var(--primary-soft));
  color: var(--cat-fg, var(--primary));
}
.cat-icon--l { width: 64px; height: 64px; }
.cat-icon--l .icon { width: 30px; height: 30px; }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-l);
  background: var(--surface);
  color: inherit;
}
.row__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row__top { display: grid; gap: 0; }
.row__title { font-weight: 600; overflow-wrap: anywhere; }
.row__amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--primary); }
@media (min-width: 768px) {
  .row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
}
.row__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.row__meta { color: var(--text-secondary); font-size: var(--fs-caption); }
.row__action { margin-inline-start: auto; }
.row--link:hover { background: #e7e4de; }
.row--paid { opacity: 0.85; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-3);
  min-height: 26px;
  border-radius: var(--radius-s);
  font-size: var(--fs-caption);
  white-space: nowrap;
}
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--warning { background: var(--warning-soft); color: #a6691a; }
.badge--success { background: var(--success-soft); color: #2d7a52; }
.badge--muted { background: var(--separator); color: var(--text-secondary); }

.progress { height: 8px; border-radius: var(--radius-pill); background: var(--separator); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }

.summary { text-align: center; padding: var(--space-3) 0 var(--space-2); display: grid; gap: var(--space-1); }
.summary__split { display: flex; justify-content: center; gap: var(--space-4); color: var(--text-secondary); font-size: var(--fs-caption); }
.summary__split b { color: var(--text); font-weight: 600; }

/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-6) var(--space-4); }
.empty__icon {
  display: grid; place-items: center; width: 88px; height: 88px;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary);
}
.empty__icon .icon { width: 40px; height: 40px; }
.empty__title { font-size: var(--fs-title); font-weight: 600; }
.empty p { max-width: 28ch; color: var(--text-secondary); }
.empty--compact { padding-block: var(--space-4); }
.empty--compact .empty__icon { width: 56px; height: 56px; }
.empty--compact .empty__icon .icon { width: 26px; height: 26px; }
.empty--compact .empty__title { font-size: var(--fs-body); }

/* ---------- Detail ---------- */
.hero { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-3) 0; }
.facts { display: grid; gap: 0; border-radius: var(--radius-l); background: var(--surface); padding: 0 var(--space-4); }
.facts > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--separator); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; font-weight: 600; text-align: end; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.actions .btn--block-all { grid-column: 1 / -1; }

/* ---------- Auth ---------- */
.brand { text-align: center; font-size: 2rem; font-weight: 700; color: var(--primary); letter-spacing: 0.01em; direction: ltr; }
.auth { display: grid; gap: var(--space-5); padding-top: var(--space-6); }
.auth__links { display: grid; gap: var(--space-2); text-align: center; }

/* ---------- Toast ---------- */
#toast-slot {
  position: fixed;
  inset-inline: var(--space-4);
  bottom: calc(var(--nav-height) + var(--space-3));
  z-index: 60;
  display: grid;
  justify-items: center;
  pointer-events: none;
}
@media (min-width: 768px) { #toast-slot { bottom: var(--space-5); } }
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 440px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--text);
  color: #fff;
  pointer-events: auto;
  animation: toast-life 7s ease forwards;
}
.toast--error { background: var(--danger); }
.toast .btn { color: #fff; min-height: 32px; }
.toast .btn:hover { background: rgb(255 255 255 / 0.14); }
@keyframes toast-life {
  0% { opacity: 0; transform: translateY(8px); }
  5%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- Sheet / dialog ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  align-items: end;
  background: rgb(31 41 51 / 0.45);
}
.sheet {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-5);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--bg);
  box-shadow: var(--shadow-sheet);
  display: grid;
  gap: var(--space-4);
  animation: sheet-in 0.18s ease-out;
  max-height: 92vh;
  overflow-y: auto;
}
.sheet__title { font-size: var(--fs-title); font-weight: 600; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 768px) {
  .overlay { align-items: center; }
  .sheet { max-width: 420px; border-radius: var(--radius-l); }
}

/* ---------- Jalali calendar ---------- */
.calendar { max-width: 360px; padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface); }
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.calendar__month { font-weight: 600; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendar__dow { color: var(--text-secondary); font-size: var(--fs-caption); padding-block: var(--space-1); }
.calendar__day {
  aspect-ratio: 1;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: transparent;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.calendar__day:hover { background: var(--primary-soft); }
.calendar__day.is-today { border-color: var(--primary); }
.calendar__day.is-selected { background: var(--primary); color: #fff; }
.calendar__foot { display: flex; justify-content: space-between; margin-top: var(--space-2); }

/* ---------- Category manager ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { position: relative; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.swatch span {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--cat-bg); color: var(--cat-fg); border: 2px solid transparent;
}
.swatch input:checked + span { border-color: var(--text); }
.swatch input:focus-visible + span { box-shadow: var(--focus); }

/* ---------- Settings rows ---------- */
.settings { display: grid; gap: var(--space-2); }
.settings .row { min-height: 56px; }
.settings .row__title { font-weight: 500; }

.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---------- Toggle and checkbox ---------- */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; position: relative; }
.toggle__text { display: grid; }
.toggle__label { font-weight: 500; }
.toggle__hint { color: var(--text-secondary); font-size: var(--fs-caption); }
.toggle__input, .check__input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.toggle__track {
  position: relative; flex: none; width: 48px; height: 28px;
  border-radius: var(--radius-pill); background: var(--text-secondary);
  transition: background 0.15s;
}
.toggle__track::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  transition: transform 0.15s;
}
.toggle__input:checked ~ .toggle__track { background: var(--primary); }
.toggle__input:checked ~ .toggle__track::after { transform: translateX(-20px); }
.toggle__input:active ~ .toggle__track::after { width: 26px; }
.toggle__input:focus-visible ~ .toggle__track { box-shadow: var(--focus); }
.toggle.is-disabled { cursor: not-allowed; opacity: 0.5; }

.check { display: inline-flex; align-items: center; gap: var(--space-3); position: relative; cursor: pointer; min-height: 44px; }
.check__box {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border: 2px solid var(--text-secondary); border-radius: 7px; background: var(--surface); color: transparent;
}
.check__input:checked ~ .check__box { background: var(--primary); border-color: var(--primary); color: #fff; }
.check__input:active ~ .check__box { background: var(--primary-soft-strong); }
.check__input:checked:active ~ .check__box { background: var(--primary-darker); }
.check__input:focus-visible ~ .check__box { box-shadow: var(--focus); }
.check.is-disabled { cursor: not-allowed; opacity: 0.5; }

/* ---------- Loan progress ---------- */
.loan { display: grid; gap: var(--space-1); }
.loan__text { color: var(--text-secondary); font-size: var(--fs-caption); }
.loan--small { margin-top: var(--space-1); }
.loan--small .progress { height: 5px; }
.loan-block { display: grid; gap: var(--space-1); justify-items: center; text-align: center; }
.loan-block .loan { width: 100%; max-width: 320px; }

/* ---------- Privacy mode: amounts blur until tapped ---------- */
.hide-amounts .amount:not(.is-revealed) { filter: blur(7px); cursor: pointer; user-select: none; }
.amount { transition: filter 0.15s; }

/* ---------- Welcome ---------- */
.welcome { gap: var(--space-4); }
.welcome #welcome-step { display: grid; gap: var(--space-4); }
.welcome__dots { display: flex; justify-content: center; gap: var(--space-2); }
.welcome__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--separator); }
.welcome__dot.is-active { width: 24px; border-radius: var(--radius-pill); background: var(--primary); }

/* ---------- Split screen (bills) ---------- */
.split__back { display: flex; }
.split__list, .split__detail { min-width: 0; }
.split:not(.split--detail) .split__detail { display: none; }
.split--detail .split__list { display: none; }
.row--selected { outline: 2px solid var(--primary); }

@media (min-width: 1024px) {
  .page--split { max-width: 1120px; }
  .split { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 6fr); gap: var(--space-6); align-items: start; }
  .split:not(.split--detail) .split__detail, .split--detail .split__list { display: block; }
  .split__back { display: none; }
  .split__detail {
    position: sticky; top: var(--space-5);
    max-height: calc(100vh - var(--space-6));
    overflow-y: auto;
    padding: var(--space-5);
    border: 1px solid var(--separator);
    border-radius: var(--radius-l);
    background: #fff;
  }
  .split__detail .row, .split__detail .facts { background: var(--surface); }
}

/* ---------- Error pages ---------- */
.error-page { min-height: 100vh; display: grid; align-content: center; gap: var(--space-4); }
.error-code { text-align: center; font-size: 3.5rem; font-weight: 700; color: var(--primary); line-height: 1; }

/* ---------- Component gallery (DEBUG only) ---------- */
.gallery { display: grid; gap: var(--space-4); }
.gallery__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.gallery__label { width: 100%; color: var(--text-secondary); font-size: var(--fs-caption); }