/* -----------------------
   Fonts (FA)
------------------------ */
@font-face{
  font-family: "BYekan";
  src: url("/static/fonts/BYekan.ttf") format("truetype");
  font-display: swap;
}

/* ✅ Force form controls to use inherited font (Android/WebView fix) */
button, input, textarea, select, option {
  font-family: inherit !important;
  font-size: inherit;
  line-height: inherit;
}

/* -----------------------
   Variables
------------------------ */
:root{
  --r: 18px;
  --r2: 22px;
  --pad: 14px;
  --shadow: 0 14px 36px rgba(0,0,0,.22);
  --shadow2: 0 8px 24px rgba(0,0,0,.18);

  --bg: #0b1220;
  --bg2:#0f1b2f;
  --card:#0e1a2d;
  --txt:#eaf1ff;
  --muted:#b7c4dd;
  --line: rgba(255,255,255,.10);

  --brand:#0ea5e9;
  --brand2:#22c55e;
  --danger:#ef4444;

  --btn:#101f36;
  --btn2:#0b1a30;
  --btnTxt:#eaf1ff;
  --btnGhost: rgba(255,255,255,.06);
}

/* ✅ Light theme – more lively turquoise/blue */
body[data-theme="light"]{
  --bg: #eaf7ff;
  --bg2:#dff2ff;
  --card:#ffffff;
  --txt:#071423;
  --muted:#335069;
  --line: rgba(7,20,35,.14);

  --brand:#06b6d4;   /* cyan */
  --brand2:#22c55e;  /* green */
  --danger:#ef4444;

  --btn:#ffffff;
  --btn2:#eaf6ff;
  --btnTxt:#071423;
  --btnGhost: rgba(6,182,212,.14);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 720px at 15% -10%, rgba(14,165,233,.22), transparent 60%),
    radial-gradient(1200px 720px at 110% 10%, rgba(34,197,94,.14), transparent 60%),
    var(--bg);
  color: var(--txt);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body[data-theme="light"]{
  background:
    radial-gradient(1200px 720px at 12% -10%, rgba(6,182,212,.24), transparent 60%),
    radial-gradient(1200px 720px at 110% 10%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body[data-lang="fa"]{
  font-family: "BYekan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* prevent scroll behind modal */
body.modal-open{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }

.container{
  padding: 14px;
  padding-bottom: 28px;
  max-width: 520px;
  margin: 0 auto;
}

/* -----------------------
   Topbar
------------------------ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-bottom: 1px solid var(--line);
}
body[data-theme="light"] .topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.35));
}

.topbar-inner{
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.10);
}
body[data-theme="light"] .brand{
  background: rgba(255,255,255,.85);
}

.brand-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 6px rgba(14,165,233,.12);
}
body[data-theme="light"] .brand-dot{
  box-shadow: 0 0 0 6px rgba(6,182,212,.18);
}

.brand-text{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 14px;
  opacity: .95;
}

.iconbtn{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.10);
  color: var(--txt);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow2);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
body[data-theme="light"] .iconbtn{
  background: rgba(255,255,255,.85);
}

.iconbtn.small{
  width: 38px; height: 38px;
  border-radius: 12px;
  box-shadow: none;
}
.ic{ font-size: 18px; }

/* -----------------------
   Hero + Buttons
------------------------ */
/* ✅ فاصله از هدر + آوردن به وسط */
.hero{
  margin-top: 22px;           /* بیشتر از قبل */
  padding: 16px;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(14,165,233,.12), rgba(34,197,94,.08)),
    rgba(0,0,0,.10);
  box-shadow: var(--shadow);
}
body[data-theme="light"] .hero{
  background:
    linear-gradient(135deg, rgba(6,182,212,.14), rgba(34,197,94,.10)),
    rgba(255,255,255,.86);
}

/* ✅ اگر خواستی دکمه‌ها کمی وسط‌تر بیان */
.btncol{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-width: 440px;           /* باعث میشه تو موبایل شیک‌تر وسط بایسته */
  margin: 0 auto;             /* وسط چین */
}

.hero-title{
  margin: 6px 0 16px;
  text-align:center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.btn{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: var(--btnTxt);
  font-weight: 800;
  box-shadow: var(--shadow2);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
body[data-theme="light"] .btn{
  background: linear-gradient(180deg, rgba(6,182,212,.14), rgba(255,255,255,.92));
}

.btn.primary{
  background: linear-gradient(135deg, rgba(14,165,233,.95), rgba(34,197,94,.75));
  border-color: rgba(255,255,255,.18);
  color: #07121f;
}
body[data-theme="light"] .btn.primary{
  background: linear-gradient(135deg, rgba(6,182,212,.95), rgba(34,197,94,.78));
}

.btn.ghost{ background: var(--btnGhost); }
.btn:active{ transform: translateY(1px); }
.btn-ic{ font-size: 18px; }
.btn-txt{ font-size: 15px; }

/* -----------------------
   Modal
------------------------ */
/* ✅ مودال‌ها بالای صفحه */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display:none;
  align-items:flex-start;     /* was flex-end */
  justify-content:center;
  padding: 12px;
  padding-top: 14px;
  background: rgba(0,0,0,.55);
}
.modal.open{ display:flex; }

.modal-card{
  width: 100%;
  max-width: 520px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow:hidden;
  animation: down .18s ease-out;
}
@keyframes down{
  from{ transform: translateY(-10px); opacity:.55; }
  to{ transform: translateY(0); opacity:1; }
}

.modal-head{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid var(--line);
}
.modal-title{
  font-weight: 900;
  font-size: 16px;
}
.meta{
  padding: 10px 14px 0;
  color: var(--muted);
  font-size: 12px;
}

.form{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.field{ display:flex; flex-direction:column; gap: 6px; }
.lbl{ font-size: 12px; color: var(--muted); }

.inp{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.12);
  color: var(--txt);
  outline:none;
}
body[data-theme="light"] .inp{
  background: rgba(6,182,212,.08);
}
.inp:focus{
  border-color: rgba(14,165,233,.55);
  box-shadow: 0 0 0 4px rgba(14,165,233,.14);
}
body[data-theme="light"] .inp:focus{
  border-color: rgba(6,182,212,.62);
  box-shadow: 0 0 0 4px rgba(6,182,212,.18);
}

.area{ resize:none; min-height: 84px; }

.row{
  display:flex;
  gap: 10px;
  margin-top: 4px;
}
.row .btn{ padding: 12px; border-radius: 16px; box-shadow:none; }

/* -----------------------
   Toast
------------------------ */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.70);
  color: var(--txt);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease;
  max-width: 520px;
  width: calc(100% - 24px);
  text-align:center;
  z-index: 120;
}
.toast.show{ opacity: 1; }

/* -----------------------
   Reports
------------------------ */
.report{ margin-top: 14px; }
.report-head{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* ✅ فاصله تیتر گزارش از دکمه‌ها بیشتر */
#reportTitle{
  margin-bottom: 10px;
}

.seg{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:center;
  margin-top: 4px;
  margin-bottom: 14px; /* فاصله بیشتر از عنوان */
}

.segbtn{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.10);
  font-weight: 800;
  font-size: 12px;
}
body[data-theme="light"] .segbtn{
  background: rgba(255,255,255,.78);
}

.segbtn.active{
  background: linear-gradient(135deg, rgba(14,165,233,.85), rgba(34,197,94,.65));
  color:#07121f;
  border-color: rgba(255,255,255,.18);
}
body[data-theme="light"] .segbtn.active{
  background: linear-gradient(135deg, rgba(6,182,212,.92), rgba(34,197,94,.70));
}

.card{
  margin-top: 12px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.10);
  box-shadow: var(--shadow2);
}
body[data-theme="light"] .card{
  background: rgba(255,255,255,.86);
}

.card-title{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
  text-align:center;
  color: var(--muted);
}

/* ✅ نمودار نصف بشه تا تو یه صفحه جا بشه */
.chart-wrap{
  width: 100%;
  height: 170px;        /* was 320px */
}

/* ✅ جدول */
.table{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.trow{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.15fr 1fr; /* مبلغ کمی جا بیشتر */
  gap: 8px;
  padding: 10px 10px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.08);
}
body[data-theme="light"] .trow{ background: rgba(6,182,212,.06); }

.trow.thead{
  background: rgba(14,165,233,.10);
  font-weight: 900;
}
body[data-theme="light"] .trow.thead{
  background: rgba(6,182,212,.12);
}

.trow.tfoot{
  background: rgba(34,197,94,.10);
  font-weight: 900;
}

.tcell{
  font-size: 12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ✅ تاریخ کامل دیده شود (دیگه ... نخوره) */
.tcell.date{
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  direction: ltr; /* تاریخ/ساعت بهتر */
  font-variant-numeric: tabular-nums;
}

/* ✅ مبلغ کامل دیده شود */
.money{
  text-align:end;
  font-weight: 900;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ✅ رنگ‌بندی: مخارج قرمز / درآمد سبز */
.money.expense{ color: var(--danger); }
.money.income{ color: var(--brand2); }

/* برای بیلان */
.pos{ color: var(--brand2); }
.neg{ color: var(--danger); }

/* ✅ اگر در بیلان هنوز جا کم بود */
.trow.balance .tcell,
.trow.balance .money{
  font-size: 13px;
}

.hint{
  margin-top: 10px;
  text-align:center;
  color: var(--muted);
  font-size: 12px;
}

/* OK modal */
.okbox{
  padding: 18px 14px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}
.okicon{ font-size: 34px; }
.okmsg{ color: var(--muted); text-align:center; }

/* Note modal */
.noteBox{
  padding: 14px;
  white-space: pre-wrap;
  line-height: 1.8;
  color: var(--txt);
}

/* Small screens spacing */
@media (max-width: 360px){
  .hero-title{ font-size: 20px; }
  .trow{ grid-template-columns: 1.15fr .95fr 1.12fr 1fr; }
  .chart-wrap{ height: 160px; }
}

/* اضافه کن داخل app.css */
.hero-logo{
  display:block;
  width: 120px;
  max-width: 72%;
  height: auto;
  margin: 8px auto 16px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* -----------------------
   Chips (radio-like)
------------------------ */
.chips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.10);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  font-weight: 800;
  font-size: 12px;
}

body[data-theme="light"] .chip{
  background: rgba(255,255,255,.78);
}

.chip input{
  accent-color: var(--brand);
}


/* ============================
   Reports Swipe UI (FINAL)
   Add at end of your CSS file
   ============================ */

#tbody.swipe-container{
  position: relative;
}

/* wrapper per item */
.swipe-row{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  margin: 10px 0;
}

/* under-layer (actions) */
.swipe-under{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 10px;
  pointer-events: none; /* will enable when opened */
}

.swipe-under .left,
.swipe-under .right{
  display: flex;
  gap: 8px;
}

/* action buttons */
.action-btn{
  border: none;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}

.btn-del{ background:#d9534f; }
.btn-edit{ background:#0275d8; }
.btn-pass{ background:#5cb85c; }

/* content that moves */
.swipe-content{
  position: relative;
  transition: transform .18s ease;
  touch-action: pan-y;
}

/* when opened, allow clicking under buttons */
.swipe-row.open .swipe-under{
  pointer-events: auto;
}

/* done state */
.swipe-row.done .swipe-content{
  opacity: .65;
}

/* money colors (if not already in your css) */
.money.expense{ color:#d9534f; }
.money.income{ color:#5cb85c; }
.money.pos{ color:#5cb85c; }
.money.neg{ color:#d9534f; }

/* optional: danger button if you don't have it */
.btn.danger{
  background: #d9534f;
  color: #fff;
}


/* =========================
   Reports Swipe Fix (Final)
   ========================= */

/* wrapper for each row */
.swipe-row{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

/* under layer (buttons) - hidden by default */
.swipe-under{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;

  /* ✅ default hidden so it won't show through glass */
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* only show buttons when row is open */
.swipe-row.open .swipe-under{
  opacity: 1;
  pointer-events: auto;
}

/* left/right containers */
.swipe-under .left,
.swipe-under .right{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* swipe content moves, should NOT be transparent */
.swipe-content{
  position: relative;
  z-index: 2;
  transform: translateX(0);
  transition: transform .18s ease;

  /* ✅ make it opaque enough so buttons won't be visible underneath */
  background: rgba(10, 20, 28, 0.78);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* light mode variant (if you set something like body.light) */
body.light .swipe-content{
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(0,0,0,0.08);
}

/* keep your inner row style neat */
.swipe-content .trow{
  background: transparent !important;
  border-radius: 14px;
}

/* Done state (debt/credit passed) */
.swipe-row.done .swipe-content{
  opacity: 0.65;
  filter: saturate(0.7);
}

/* buttons (keep yours if already) */
.action-btn{
  border: none;
  padding: 8px 12px;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  min-width: 64px;
}

.btn-del{ background:#d9534f; }
.btn-edit{ background:#0275d8; }
.btn-pass{ background:#5cb85c; }