/* تنخواه‌یار — پوسته شیشه‌ای رنگی با هاله نور چرخان */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg1: #0b1026;
  --bg2: #1b0f36;
  --ink: #eef2ff;
  --muted: #a5b1d6;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-2: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.13);
  --cyan: #22d3ee;
  --violet: #a78bfa;
  --pink: #f472b6;
  --amber: #fbbf24;
  --green: #34d399;
  --red: #fb7185;
  --r: 22px;
  --halo-speed: 14s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  background: linear-gradient(160deg, var(--bg1), var(--bg2) 55%, #071a2b);
  min-height: 100vh;
  color: var(--ink);
  line-height: 1.9;
  overflow-x: hidden;
}

/* حباب‌های رنگی پس‌زمینه */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.bg-blobs i {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .3;
  animation: float 26s ease-in-out infinite alternate;
}
.bg-blobs .b1 { width: 44vw; height: 44vw; background: #7c3aed; top: -12vw; right: -10vw; }
.bg-blobs .b2 { width: 36vw; height: 36vw; background: #0891b2; bottom: -10vw; left: -8vw; animation-delay: -9s; }
.bg-blobs .b3 { width: 26vw; height: 26vw; background: #db2777; top: 38vh; left: 32vw; opacity: .2; animation-delay: -17s; }
@keyframes float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4vw, -5vh) scale(1.12); }
}

/* ---------- هاله نور چرخان دور کادرها ---------- */
@property --ha {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.glow { position: relative; border-radius: var(--r); }
.glow::before {
  content: "";
  position: absolute; inset: -1.6px;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(from var(--ha),
    var(--cyan), var(--violet), var(--pink), var(--amber), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: halo var(--halo-speed) linear infinite;
  opacity: .85;
  pointer-events: none;
}
.glow::after {
  content: "";
  position: absolute; inset: -14px;
  border-radius: inherit;
  background: conic-gradient(from var(--ha),
    rgba(34, 211, 238, .16), rgba(167, 139, 250, .16),
    rgba(244, 114, 182, .16), rgba(251, 191, 36, .14), rgba(34, 211, 238, .16));
  filter: blur(22px);
  animation: halo var(--halo-speed) linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes halo { to { --ha: 360deg; } }

.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ---------- چیدمان ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 18px clamp(10px, 3vw, 26px) 60px; }

.topbar {
  max-width: 1180px;
  margin: 14px auto 6px;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 10px; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 40px; height: 40px; flex: none; }
.brand b {
  font-size: 1.15rem;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand small { display: block; color: var(--muted); font-size: .72rem; margin-top: -6px; }
.topbar nav { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.topbar nav a {
  color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 500;
  padding: 7px 13px; border-radius: 999px; transition: .25s;
  border: 1px solid transparent;
}
.topbar nav a:hover { color: var(--ink); background: var(--glass-2); }
.topbar nav a.on {
  color: #06121f; font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 4px 18px rgba(124, 58, 237, .45);
}
.topbar nav a.out { color: var(--red); }

h1.page-title { font-size: 1.35rem; margin: 18px 4px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h1.page-title .hint { font-size: .8rem; color: var(--muted); font-weight: 400; }

/* ---------- کارت‌ها ---------- */
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-bottom: 18px; }
.kpi { padding: 16px 18px; }
.kpi small { color: var(--muted); font-size: .8rem; }
.kpi b { display: block; font-size: 1.5rem; margin-top: 2px; letter-spacing: .5px; }
.kpi span.unit { font-size: .75rem; color: var(--muted); margin-inline-start: 6px; }
.kpi.c-cyan b { color: var(--cyan); }
.kpi.c-violet b { color: var(--violet); }
.kpi.c-pink b { color: var(--pink); }
.kpi.c-amber b { color: var(--amber); }
.kpi.c-green b { color: var(--green); }

.panel { padding: 18px 20px; margin-bottom: 18px; }
.panel > h2 { font-size: 1.02rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel > h2 .spacer { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- دکمه‌ها ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: .88rem; font-weight: 700;
  padding: 9px 18px; border-radius: 999px; color: #071018;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 4px 20px rgba(34, 211, 238, .35);
  transition: .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(167, 139, 250, .5); }
.btn.pink { background: linear-gradient(90deg, var(--pink), var(--amber)); box-shadow: 0 4px 20px rgba(244, 114, 182, .35); }
.btn.ghost {
  background: var(--glass-2); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none; font-weight: 500;
}
.btn.ghost:hover { border-color: var(--violet); }
.btn.danger { background: linear-gradient(90deg, #f43f5e, #fb923c); }
.btn.sm { padding: 5px 12px; font-size: .78rem; }
.btn:active { transform: translateY(0); }

.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; font-size: .95rem;
  background: var(--glass-2); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; cursor: pointer; transition: .2s;
}
.iconbtn:hover { border-color: var(--cyan); transform: translateY(-1px); }
.iconbtn.danger:hover { border-color: var(--red); background: rgba(251, 113, 133, .15); }

/* ---------- فرم‌ها ---------- */
label.f { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.field { position: relative; }
input[type="text"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%;
  font-family: inherit; font-size: .92rem; color: var(--ink);
  background: rgba(10, 14, 34, .55);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 14px;
  outline: none;
  transition: .25s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .22);
}
input.num, input.jdate { direction: ltr; text-align: center; letter-spacing: 1px; }
select option { background: #131832; color: var(--ink); }
textarea { min-height: 74px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; align-items: end; }
.form-grid .wide { grid-column: 1 / -1; }
.quick { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.chip {
  font-size: .72rem; cursor: pointer; color: var(--muted);
  background: var(--glass-2); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 999px; transition: .2s;
}
.chip:hover { color: var(--ink); border-color: var(--cyan); }

/* ---------- جدول ---------- */
.tbl-wrap { overflow-x: auto; border-radius: 16px; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; min-width: 640px; }
.tbl th {
  text-align: center; font-size: .78rem; color: var(--muted); font-weight: 500;
  padding: 9px 10px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); white-space: nowrap;
}
.tbl td { text-align: center; padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tbl tr:hover td { background: rgba(255, 255, 255, .035); }
.tbl td.money { font-weight: 700; color: var(--cyan); white-space: nowrap; }
.tbl td.right { text-align: right; }
.tbl .sum td {
  font-weight: 700; color: var(--amber);
  background: rgba(251, 191, 36, .07); border-bottom: none;
}
.empty { text-align: center; color: var(--muted); padding: 34px 10px; font-size: .9rem; }
.empty b { display: block; font-size: 1.6rem; margin-bottom: 6px; }

/* ---------- نشان‌ها ---------- */
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: 2px 11px; border-radius: 999px;
}
.badge.open { color: #052e1b; background: linear-gradient(90deg, var(--green), #86efac); }
.badge.closed { color: #38102a; background: linear-gradient(90deg, #f9a8d4, #fda4af); }
.badge.soft { color: var(--muted); background: var(--glass-2); border: 1px solid var(--line); }

/* ---------- نوار پیشرفت ---------- */
.progress { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.progress i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  transition: width .6s;
}
.progress.warn i { background: linear-gradient(90deg, var(--amber), var(--red)); }

/* ---------- نمودار میله‌ای ---------- */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 6px 4px 0; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bars .bar i {
  width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--violet), var(--cyan));
  box-shadow: 0 0 18px rgba(167, 139, 250, .35);
  min-height: 3px;
  transition: .3s;
}
.bars .bar:hover i { filter: brightness(1.25); }
.bars .bar small { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.bars .bar b { font-size: .68rem; color: var(--cyan); white-space: nowrap; }

/* ---------- پیام‌ها ---------- */
.toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 200; font-size: .88rem; font-weight: 500;
  padding: 10px 22px; border-radius: 999px;
  backdrop-filter: blur(14px);
  animation: pop .35s cubic-bezier(.2, 1.4, .4, 1);
  max-width: min(92vw, 560px); text-align: center;
}
.toast.ok { background: rgba(52, 211, 153, .16); border: 1px solid rgba(52, 211, 153, .5); color: #a7f3d0; }
.toast.bad { background: rgba(251, 113, 133, .14); border: 1px solid rgba(251, 113, 133, .5); color: #fecdd3; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -14px); } }

.foot { text-align: center; color: var(--muted); font-size: .74rem; padding: 10px 0 26px; }

/* ---------- ثبت سریع ---------- */
#q-tbl input { border-radius: 10px; padding: 7px 9px; font-size: .86rem; }
#q-tbl td { padding: 4px 4px; }
#q-tbl tr:hover td { background: transparent; }
#q-tbl input:focus { background: rgba(34, 211, 238, .07); }
#q-tbl .pos { color: var(--muted); font-size: .78rem; }
#q-body tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }

/* ---------- ردیف‌های فاکتور ---------- */
#items-tbl input { border-radius: 10px; padding: 7px 10px; font-size: .88rem; }
#items-tbl td { padding: 4px 4px; }
#items-tbl .amount { font-weight: 700; color: var(--cyan); white-space: nowrap; font-size: .88rem; }
.total-line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 16px; border-radius: 16px;
  background: rgba(34, 211, 238, .07); border: 1px dashed rgba(34, 211, 238, .4);
}
.total-line b { font-size: 1.25rem; color: var(--cyan); }
.total-line .words { font-size: .76rem; color: var(--muted); }

/* ---------- تقویم شمسی ---------- */
.jdp {
  /* مختصاتش را جاوااسکریپت می‌گذارد؛ به body می‌چسبد نه به پنل */
  position: absolute; z-index: 9999;
  width: 262px; padding: 12px;
  background: rgba(17, 22, 48, .96);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  backdrop-filter: blur(20px);
}
.jdp header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jdp header b { font-size: .88rem; color: var(--ink); }
.jdp header button {
  width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--glass-2); color: var(--ink); cursor: pointer; font-family: inherit;
}
.jdp header button:hover { border-color: var(--cyan); }
.jdp .wd, .jdp .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp .wd span { font-size: .64rem; color: var(--muted); text-align: center; padding: 2px 0; }
.jdp .days button {
  border: none; background: none; color: var(--ink); font-family: inherit;
  font-size: .78rem; padding: 5px 0; border-radius: 9px; cursor: pointer;
}
.jdp .days button:hover { background: var(--glass-2); }
.jdp .days button.today { border: 1px solid var(--cyan); }
.jdp .days button.sel {
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  color: #06121f; font-weight: 700;
}
.jdp .days button.dis { opacity: 0; pointer-events: none; }
.jdp footer { display: flex; gap: 6px; margin-top: 8px; }

/* ---------- صفحه ورود ---------- */
.login-wrap { min-height: 92vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: min(400px, 94vw); padding: 34px 30px; text-align: center; }
.login-card .brand-big { font-size: 1.6rem; font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-card p.sub { color: var(--muted); font-size: .82rem; margin: 4px 0 20px; }
.login-card form { display: grid; gap: 12px; text-align: right; }

/* ---------- موبایل ---------- */
@media (max-width: 640px) {
  .topbar { position: static; }
  .topbar nav a { font-size: .8rem; padding: 6px 10px; }
  .kpi b { font-size: 1.2rem; }
  .bars { height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .glow::before, .glow::after, .bg-blobs i { animation: none; }
}