
/* ===========================================================================
   میز کار سفر — رنگ

   قبلاً تقریباً تک‌رنگ بود: سرمه‌ای و خاکستری، و بس. خوانا بود ولی مرده.
   حالا رنگ کار می‌کند، نه اینکه فقط تزئین باشد:

     نیلی (accent)  — کارِ اصلی: دکمهٔ اقدام، تبِ فعال، پیوند
     فیروزه‌ای (teal) — پول و خزانه
     بنفش (violet)  — سند و دفتر
     برنجی (brass)  — عددهای کلیدی، همان‌جا که چشم باید بایستد
     سبز/زرد/سرخ    — وضعیت: خوب، هشدار، بد

   هر رنگ یک معنی دارد و همان معنی را همه‌جا نگه می‌دارد. رنگی که هر جا
   چیز دیگری بگوید، از بی‌رنگی بدتر است.
   =========================================================================== */

:root{
  /* color-scheme چیزی است که مرورگر با آن کنترل‌های خودش را رنگ می‌کند:
     فهرستِ بازشوندهٔ <select>، اسکرول‌بار، تقویمِ input[type=date]، چک‌باکس.
     این‌ها را CSS ما رنگ نمی‌کند — سیستم می‌کشدشان.

     تا امروز اعلام نشده بود، پس مرورگر همیشه فرض می‌کرد صفحه روشن است و
     فهرستِ select را سفید می‌کشید؛ ولی رنگِ متنِ گزینه‌ها را از ما
     می‌گرفت که در تم تیره روشن است. نتیجه: سفید روی سفید، و کاربر یک
     فهرستِ خالی می‌دید. با اعلام‌کردنش، خودِ مرورگر همه‌شان را درست
     می‌کند — یک سطر، به‌جای رنگ‌کردنِ تک‌تکِ کنترل‌ها که به‌هرحال
     روی ویندوز جواب نمی‌دهد. */
  color-scheme:light;

  --ground:#F2F5FA; --surface:#FFFFFF; --surface-2:#EBEFF7;
  --line:#D6DEEC; --line-soft:#E6EBF4;
  --ink:#111726; --ink-2:#39445A; --muted:#68748C;

  --accent:#2B4BC4;      --accent-soft:#E4E9FD; --accent-ink:#FFFFFF;
  --accent-2:#5B7BF0;                            /* برای گرادیان و حالت فعال */
  --teal:#0E7C86;        --teal-soft:#DBF1F3;    /* خزانه و پول */
  --violet:#6D3FC4;      --violet-soft:#EDE5FB;  /* دفتر و اسناد */
  --brass:#9A6B08;       --brass-soft:#FBF0D8;

  --ok:#0F7A4E;   --ok-soft:#DAF3E7;
  --warn:#A2620A; --warn-soft:#FCEED6;
  --bad:#C0342F;  --bad-soft:#FCE3E1;
  --wa:#128C4A;

  --radius:10px;
  --shadow:0 1px 2px rgba(17,23,38,.05), 0 10px 28px rgba(30,50,120,.07);
  --shadow-lift:0 2px 6px rgba(17,23,38,.07), 0 16px 40px rgba(30,50,120,.12);
  --sidebar:246px;
}

/* تیره — همان معناها، با اشباعِ بیشتر تا روی زمینهٔ تیره نمیرند */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#090D15; --surface:#141B27; --surface-2:#1C2634;
    --line:#2A3547; --line-soft:#212B3A;
    --ink:#EAEFF8; --ink-2:#B7C2D4; --muted:#8794A9;

    --accent:#7E9BFF;      --accent-soft:#1A2547; --accent-ink:#080C14;
    --accent-2:#A9BEFF;
    --teal:#3FC5CE;        --teal-soft:#0D2B2E;
    --violet:#B392F5;      --violet-soft:#231A3C;
    --brass:#E0B45C;       --brass-soft:#2C2413;

    --ok:#4FD69C;   --ok-soft:#0C2B20;
    --warn:#EFBB63; --warn-soft:#2D2314;
    --bad:#FF8D86;  --bad-soft:#331A1A;
    --wa:#4FD69C;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.4);
    --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#090D15; --surface:#141B27; --surface-2:#1C2634;
  --line:#2A3547; --line-soft:#212B3A;
  --ink:#EAEFF8; --ink-2:#B7C2D4; --muted:#8794A9;

  --accent:#7E9BFF;      --accent-soft:#1A2547; --accent-ink:#080C14;
  --accent-2:#A9BEFF;
  --teal:#3FC5CE;        --teal-soft:#0D2B2E;
  --violet:#B392F5;      --violet-soft:#231A3C;
  --brass:#E0B45C;       --brass-soft:#2C2413;

  --ok:#4FD69C;   --ok-soft:#0C2B20;
  --warn:#EFBB63; --warn-soft:#2D2314;
  --bad:#FF8D86;  --bad-soft:#331A1A;
  --wa:#4FD69C;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.4);
  --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.5);
}

/* تم روشنِ دستی روی سیستمِ تیره: بدون این، مرورگر همچنان کنترل‌هایش را
   تیره می‌کشد چون سیستم تیره است. */
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
/* یک قاعدهٔ ساده که یک باگ واقعی را بست: صفت hidden از طریق استایل‌شیت مرورگر
   display:none می‌دهد، ولی هر قاعدهٔ نویسنده — مثل .shell{display:flex} — بر آن
   غلبه می‌کند. نتیجه‌اش این بود که کل پوستهٔ برنامه زیر صفحهٔ ورود رندر می‌شد. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 420px at 100% -10%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(900px 380px at 0% 8%,
      color-mix(in srgb, var(--teal) 7%, transparent), transparent 70%),
    var(--ground);
  background-attachment:fixed;
  font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.6; direction:rtl}
.mono,.num{font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
h1,h2,h3{font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; margin:0;
  text-wrap:balance; letter-spacing:-.01em}
button,input,select{font:inherit; color:inherit}
/* بیمهٔ دوم روی ویندوز: color-scheme کارِ اصلی را می‌کند، ولی کرومِ
   قدیمی‌تر فهرست را همچنان سفید می‌کشد و متنِ روشن رویش گم می‌شود. این دو
   خط زمینه و متنِ گزینه‌ها را صریح می‌گذارد، پس در هر نسخه‌ای خواناست. */
select option{background:var(--surface); color:var(--ink)}
select option:checked{background:var(--accent-soft); color:var(--accent)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.shell{display:flex; min-height:100vh}
.side{width:var(--sidebar); flex:0 0 var(--sidebar);
  background:linear-gradient(180deg, var(--surface),
    color-mix(in srgb, var(--accent) 4%, var(--surface)));
  border-left:1px solid var(--line); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh}
.brand{padding:20px 20px 16px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent),
    color-mix(in srgb, var(--violet) 8%, transparent) 60%, transparent)}
.brand .mark{display:flex; align-items:center; gap:10px}
/* نشانِ دُرسا جای حرفِ «س» در جعبهٔ آبی نشست. تصویر است، پس نه رنگ
   می‌گیرد نه گرادیان — خودش رنگِ برند را می‌آورد و در هر دو تم یکی است.
   اگر فایلِ نشان نبود، همان جعبه با حرف D جایش را می‌گیرد. */
.brand .glyph{width:34px; height:34px; flex:0 0 34px; border-radius:9px;
  object-fit:contain; display:block}
.brand div.glyph{background:linear-gradient(140deg, var(--accent), var(--violet));
  color:var(--accent-ink); display:grid; place-items:center;
  box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);
  font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; font-weight:800; font-size:16px}
.brand h1{font-size:1.02rem; font-weight:700; line-height:1.35}
.brand .by{font-size:.72rem; color:var(--muted); margin-top:1px}
.brand .co{margin-top:8px; font-size:.8rem; color:var(--ink-2); font-weight:600}

/* min-height:0 لازم است: خانهٔ فلکس کوچک‌تر از محتوایش نمی‌شود مگر صریح
   بگوییم. بدون آن، با بلندتر شدنِ سربرگ (لوگو) و پاورقی، منو از پایین
   صفحه بیرون می‌زد و آخرین تب‌ها اصلاً قابل کلیک نبودند. */
.nav{padding:12px 10px; overflow-y:auto; flex:1; min-height:0}
.nav .group{font-size:.7rem; color:var(--muted); letter-spacing:.08em;
  padding:14px 12px 6px; font-weight:600}
.nav button{width:100%; display:flex; align-items:center; gap:11px; background:none;
  border:0; cursor:pointer; text-align:start; padding:9px 12px; border-radius:var(--radius);
  color:var(--ink-2); font-size:.92rem; transition:background .12s, color .12s}
.nav button:hover{background:var(--surface-2); color:var(--ink)}
.nav button.on{background:var(--accent-soft); color:var(--accent); font-weight:600;
  position:relative}
.nav button.on::before{content:""; position:absolute; inset-inline-start:0;
  top:18%; bottom:18%; width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(var(--accent), var(--violet))}
.nav button .ic{width:18px; flex:0 0 18px; opacity:.85}
.nav button .badge{margin-inline-start:auto; font-size:.72rem; padding:1px 7px;
  border-radius:99px; background:var(--bad-soft); color:var(--bad); font-weight:600}

.side .foot{padding:12px 14px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:10px}
.side .foot .av{width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  background:var(--surface-2); display:grid; place-items:center; font-size:.8rem; font-weight:600}
.side .foot .who b{display:block; font-size:.85rem; font-weight:600}
.side .foot .who span{font-size:.74rem; color:var(--muted)}
.side .foot .out{margin-inline-start:auto; background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:.8rem}
.side .foot .out:hover{color:var(--bad)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.top{display:flex; align-items:center; gap:14px; padding:16px 26px; background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.top .burger{display:none; background:none; border:1px solid var(--line);
  border-radius:var(--radius); padding:6px 9px; cursor:pointer; line-height:1}
.top h2{font-size:1.12rem; font-weight:700}
.top .sub{font-size:.78rem; color:var(--muted); margin-top:2px}
.top .spacer{flex:1}
.top .date{font-size:.82rem; color:var(--muted)}
/* عرض کامل صفحه. سقف ۱۲۴۰ پیکسل باعث می‌شد روی مانیتور بزرگ نصف صفحه
   خالی بماند و همان جدول‌ها تنگ شوند و تاریخ و مبلغ به دو خط بروند.
   حالا فقط یک سقف بسیار بلند برای نمایشگرهای فوق‌عریض می‌ماند. */
.page{padding:24px 26px 60px; max-width:2000px; width:100%}
.page[hidden]{display:none}

.card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)}
.card > header{border-radius:var(--radius) var(--radius) 0 0}
.card + .card{margin-top:18px}
/* کارتی که کارِ خطرناک دارد. لبهٔ قرمز، تا وسطِ صفحهٔ پر از کارتِ خاکستری
   بی‌آنکه بخوانی معلوم باشد این یکی فرق دارد. */
.card.bad{border-color:color-mix(in srgb, var(--bad) 45%, var(--line))}
.card.bad > header h3{color:var(--bad)}
.card > header{display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%, transparent), transparent)}
.card > header h3{font-size:.95rem; font-weight:700}
.card > header .spacer{flex:1}
.card .body{padding:18px}
.card .body.flush{padding:0}

.btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:var(--radius); font-size:.88rem; font-weight:500;
  transition:background .12s, border-color .12s}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:transparent; color:var(--accent-ink); font-weight:600;
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent)}
.btn.primary:hover{filter:brightness(1.07);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent)}
.btn.sm{padding:5px 10px; font-size:.8rem}
.btn.quiet{border-color:transparent; background:none; color:var(--accent)}
.btn.quiet:hover{background:var(--accent-soft)}
.btn.wa{color:var(--wa); border-color:color-mix(in srgb, var(--wa) 35%, transparent)}
.btn.wa:hover{background:color-mix(in srgb, var(--wa) 12%, transparent)}
.btn.wa svg{width:15px; height:15px; fill:currentColor}
/* دکمهٔ کارِ برگشت‌ناپذیر. قرمزِ توپُر، نه هم‌شکلِ بقیه: دستی که روی صفحه
   می‌چرخد باید پیش از فشاردادن یک لحظه مکث کند. */
.btn.bad{background:var(--bad); border-color:var(--bad); color:#fff; font-weight:600}
.btn.bad:hover{filter:brightness(.92); background:var(--bad)}

.pill{display:inline-block; padding:2px 9px; border-radius:99px;
  font-size:.74rem; font-weight:600; white-space:nowrap;
  border:1px solid transparent}
.pill.ok  {border-color:color-mix(in srgb, var(--ok) 28%, transparent)}
.pill.warn{border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.pill.bad {border-color:color-mix(in srgb, var(--bad) 28%, transparent)}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.bad{background:var(--bad-soft); color:var(--bad)}
.pill.flat{background:var(--surface-2); color:var(--ink-2)}
/* بنفش = سند و دفتر، همان معنایی که در بقیهٔ برنامه دارد. سطرِ «خرید» در
   تاریخچهٔ مشتری همان سندِ فروش است. */
.pill.violet{background:var(--violet-soft); color:var(--violet);
  border-color:color-mix(in srgb, var(--violet) 28%, transparent)}
/* چیپِ ارز در کارت حساب — هم مانده را می‌گوید هم دکمهٔ عوض‌کردن ارز است */
button.pill.ccy{border:1px solid transparent; cursor:pointer; font-family:inherit}
button.pill.ccy:hover{border-color:var(--line)}
button.pill.ccy.on{outline:2px solid var(--accent); outline-offset:1px}

/* کلیدِ فیلتر در سربرگ کارت — چک‌باکس و متنش یک واحد، نه دو تکهٔ جدا */
.chk{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:.8rem; color:var(--ink-2); user-select:none}
.chk input{cursor:pointer; accent-color:var(--accent)}

/* سود و زیان — رنگ خودش پیام است؛ عدد سیاه یعنی «این معامله بی‌سود بود» */
.pnl{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap}
.pnl.up{color:var(--ok)}
.pnl.down{color:var(--bad)}
.pnl.zero{color:var(--muted); font-weight:400}
.why{font-size:.75rem; color:var(--muted); display:block; margin-top:2px}
/* شرح سند، زیر سربرگ — «بابت چه بود» باید روی خودِ سند دیده شود، وگرنه
   نوشتنش بی‌فایده است و شش ماه بعد کسی جوابش را ندارد. */
.sanad .sdesc{padding:8px 18px 0; font-size:.83rem; color:var(--ink-2)}

/* شمارندهٔ بستنِ خودکار — پیدا باشد تا بسته‌شدن غافلگیری نباشد، ولی آن‌قدر
   کم‌رنگ که چشم را از خودِ سند نگیرد. خالی که شد یعنی ساعت ایستاده. */
.acx{font-size:.72rem; color:var(--muted); margin-inline-start:10px;
  font-variant-numeric:tabular-nums; min-width:9ch; text-align:start}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
/* کاشی‌ها: هر کدام یک نوارِ رنگی بالای خودش دارد و ته‌رنگی از همان رنگ.
   رنگ تزئین نیست — هم‌رنگِ صفحه‌ای است که کاشی به آن می‌برد، پس چشم بعد
   از دو روز بی‌آنکه بخواند می‌داند کدام کاشی کدام است. */
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:box-shadow .15s, transform .15s}
.tile::before{content:""; position:absolute; inset-block-start:0; inset-inline:0;
  height:3px; background:var(--tint, var(--accent))}
.tile::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--tint, var(--accent)) 7%, transparent), transparent 55%)}
.tile > *{position:relative; z-index:1}
.tile:hover{box-shadow:var(--shadow-lift)}
.tile.t-money{--tint:var(--teal)}
.tile.t-debt {--tint:var(--brass)}
.tile.t-sale {--tint:var(--accent)}
.tile.t-profit{--tint:var(--ok)}
.tile.t-cost {--tint:var(--bad)}
.tile.t-doc  {--tint:var(--violet)}
.tile .k{font-size:.78rem; color:var(--muted)}
.tile .v{font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; font-variant-numeric:tabular-nums;
  font-size:1.45rem; font-weight:600; margin-top:8px; direction:ltr; unicode-bidi:isolate}
.tile .v{color:var(--tint, var(--ink))}
.tile .v.brass{color:var(--brass)}
.tile .n{font-size:.76rem; color:var(--muted); margin-top:5px}
.tile .spark{margin-top:10px; display:block; width:100%; height:28px}

.tw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.88rem; min-width:680px}
thead th{text-align:start; font-size:.72rem; letter-spacing:.04em;
  color:color-mix(in srgb, var(--accent) 72%, var(--muted));
  font-weight:700; padding:10px 18px;
  background:color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  border-bottom:1px solid var(--line); white-space:nowrap}
tbody td{padding:11px 18px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
/* تاریخ، مبلغ، PNR و نام مشتری نباید وسط کلمه بشکنند. متن‌های بلند
   (شرح سند، مسیر) آزادند بشکنند، وگرنه جدول از صفحه بیرون می‌زند. */
tbody td.nw, thead th.nw{white-space:nowrap}
td.n, th.n{white-space:nowrap}
tbody td.wide{min-width:220px}
tbody tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--surface-2)}
td.n,th.n{text-align:end; font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
td.act{text-align:end; white-space:nowrap}
td.act .btn{margin-inline-start:5px}
.dim{color:var(--muted)} .neg{color:var(--bad)} .pos{color:var(--ok)}

.bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.bar .search{position:relative; flex:1; min-width:180px; max-width:340px}
.bar .search input{width:100%; padding:9px 34px 9px 12px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface)}
.bar .search .ic{position:absolute; inset-inline-start:11px; top:50%;
  transform:translateY(-50%); color:var(--muted); pointer-events:none}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.seg button{background:var(--surface); border:0; padding:8px 14px; cursor:pointer;
  font-size:.85rem; color:var(--ink-2)}
.seg button + button{border-inline-start:1px solid var(--line)}
.seg button.on{background:var(--accent); color:var(--accent-ink); font-weight:600}

/* زیرتب‌های تنظیمات */
.subtabs{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:18px;
  border-bottom:1px solid var(--line); padding-bottom:0}
.subtabs button{background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 14px; cursor:pointer; color:var(--muted); font-size:.9rem; margin-bottom:-1px}
.subtabs button:hover{color:var(--ink)}
.subtabs button.on{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}

/* تب‌های داخل کارت — دفتر روزنامه به تفکیک نوع فعالیت، مصارف به تفکیک نوع.
   شمارش روی خود تب می‌نشیند تا کاربر پیش از کلیک بداند آن‌جا چیزی هست. */
.tabs{display:flex; gap:4px; flex-wrap:wrap; padding:0 14px;
  border-bottom:1px solid var(--line-soft); overflow-x:auto}
.tabs button{background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 12px; cursor:pointer; color:var(--muted); font-size:.85rem;
  margin-bottom:-1px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.tabs .n{font-size:.72rem; background:var(--surface-2); color:var(--ink-2);
  border-radius:99px; padding:1px 7px; font-variant-numeric:tabular-nums}
.tabs button.on .n{background:var(--accent-soft); color:var(--accent)}

/* صفحه‌بندی — دفتر یک سالِ کاری صدها سطر دارد */
.pager{display:flex; align-items:center; gap:10px; justify-content:center;
  padding:12px 16px; border-top:1px solid var(--line-soft); font-size:.83rem;
  color:var(--muted); flex-wrap:wrap}
.pager:empty{display:none}
.pager button{background:var(--surface); border:1px solid var(--line); cursor:pointer;
  border-radius:6px; padding:5px 12px; color:var(--ink); font-size:.83rem}
.pager button:disabled{opacity:.4; cursor:default}
.pager .who{font-variant-numeric:tabular-nums}

/* گرافِ میله‌ای — SVG درجا، بدون هیچ کتابخانه‌ای. اینترنت هرات ضعیف است و
   یک فایل ۳۰۰ کیلوبایتی از CDN یعنی صفحه‌ای که باز نمی‌شود. */
.chart{width:100%; display:block; overflow:visible}
.chart .bar{fill:var(--accent)}
.chart .bar.neg{fill:var(--bad)}
.chart .bar.alt{fill:var(--brass)}
.chart .gl{stroke:var(--line-soft); stroke-width:1}
.chart text{fill:var(--muted); font-size:10px; font-family:Vazirmatn,system-ui,sans-serif}
.chart text.val{fill:var(--ink-2); font-weight:600}
.chartwrap{overflow-x:auto}
.chartlegend{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;
  font-size:.76rem; color:var(--muted)}
.chartlegend i{display:inline-block; width:10px; height:10px; border-radius:2px;
  margin-inline-end:5px; vertical-align:middle}

/* کارت نرخ ارز روی داشبورد */
.ratecard{margin-bottom:18px}
.ratecard.due{border-color:var(--warn); box-shadow:0 0 0 3px var(--warn-soft)}

.scrim{position:fixed; inset:0; background:rgba(10,14,22,.44); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .18s}
.scrim.open{opacity:1; pointer-events:auto}
/* کشو پهن‌تر شد: جدول مسافران با PNR و تاریخ پرواز در ۵۲۰ پیکسل جا نمی‌شد
   و کاربر مجبور بود داخل جدول افقی اسکرول کند. */
.drawer{position:fixed; top:0; bottom:0; left:0; z-index:60; width:min(860px,100%);
  background:var(--surface); border-right:1px solid var(--line); display:flex;
  flex-direction:column; transform:translateX(-100%); transition:transform .22s ease;
  box-shadow:var(--shadow)}
.drawer.open{transform:none}
.drawer > header{display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--line)}
.drawer > header h3{font-size:1rem; font-weight:700}
.drawer > header .x{margin-inline-start:auto; background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:1.3rem; line-height:1; padding:2px 6px}
.drawer .content{padding:20px; overflow-y:auto; flex:1}
.drawer > footer{padding:14px 20px; border-top:1px solid var(--line);
  display:flex; gap:10px; background:var(--surface)}
.drawer > footer .btn{flex:1; justify-content:center}

.f{margin-bottom:14px}
.f > label{display:block; font-size:.78rem; color:var(--muted); margin-bottom:5px; font-weight:500}
.f input,.f select{width:100%; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface)}
.f .hint{display:block; font-size:.74rem; color:var(--muted); margin-top:5px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}

.note{border-radius:var(--radius); padding:11px 14px; font-size:.84rem; margin-bottom:14px}
.note.info{background:var(--accent-soft); color:var(--accent)}
.note.warn{background:var(--warn-soft); color:var(--warn)}
.note.bad{background:var(--bad-soft); color:var(--bad)}
.note.ok{background:var(--ok-soft); color:var(--ok)}

.sum{border-top:1px solid var(--line-soft); margin-top:6px; padding-top:12px}
.sum .r{display:flex; justify-content:space-between; align-items:baseline;
  padding:5px 0; font-size:.87rem}
.sum .r .k{color:var(--muted)}
.sum .r .v{font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate}
.sum .r.big{border-top:1px solid var(--line-soft); margin-top:8px; padding-top:12px}
.sum .r.big .k{color:var(--ink); font-weight:600}
.sum .r.big .v{font-size:1.15rem; font-weight:600; color:var(--brass)}

/* شمارندهٔ مسافر */
.counts{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.count{display:flex; align-items:center; gap:0; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.count .lbl{padding:0 12px; font-size:.84rem; color:var(--ink-2)}
.count button{width:32px; height:34px; border:0; background:var(--surface-2);
  cursor:pointer; font-size:1.05rem; line-height:1; color:var(--ink-2)}
.count button:hover{background:var(--accent-soft); color:var(--accent)}
.count .n{width:34px; text-align:center; font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-weight:600; font-variant-numeric:tabular-nums}

/* سطر مسافر */
.paxrow{display:grid; grid-template-columns:26px 1fr 92px 70px 70px 104px 26px;
  gap:7px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line-soft)}
.paxrow:last-of-type{border-bottom:0}
.paxrow .i{font-size:.75rem; color:var(--muted); text-align:center}
.paxrow input{width:100%; padding:7px 9px; border:1px solid var(--line);
  border-radius:6px; background:var(--surface); font-size:.85rem}
.paxrow .x{background:none; border:0; color:var(--muted); cursor:pointer; font-size:1rem}
.paxrow .x:hover{color:var(--bad)}
/* «همه» — دکمهٔ پرکردنِ کلِ طلب. جای همان × است، پس باید در همان ۲۶ پیکسل
   جا شود بی‌آنکه ستون‌ها را جابه‌جا کند. */
.paxrow .x.wide{font-size:.72rem; color:var(--accent); white-space:nowrap}
.paxrow .x.wide:hover{color:var(--accent); text-decoration:underline}
.paxhead{display:grid; grid-template-columns:26px 1fr 92px 70px 70px 104px 26px; gap:7px;
  font-size:.72rem; color:var(--muted); padding-bottom:4px}
.paxhead span:nth-child(4),.paxhead span:nth-child(5){text-align:center}

/* جعبهٔ محاسبه در کشوی کنسل و چنج — «از کجا این عدد آمد» */
.calcbox{background:var(--surface-2); border-radius:var(--radius);
  padding:10px 14px; margin-bottom:14px; font-size:.84rem}
.calcbox .r{display:flex; justify-content:space-between; gap:12px; padding:3px 0}
.calcbox .r span{color:var(--muted)}
.calcbox .r b{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
.calcbox .r.tot{border-top:1px solid var(--line); margin-top:5px; padding-top:7px}
.calcbox .r.tot b{color:var(--brass); font-size:1rem}

/* سرصفحهٔ جزئیات — عنوان بالا، مقدار درست زیرش، همه با یک تراز.
   عمداً بلوک است نه فلکس: متن ساده در فلکس «آیتم بی‌نام» می‌شود و مقدار
   لاتین (USD، تاریخ، PNR) به لبهٔ مخالفِ عنوانش می‌پرید. */
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 18px;
  padding:14px 16px; background:var(--surface-2); border-radius:var(--radius);
  margin-bottom:16px}
.kv > div{display:block; min-width:0}
.kv .k{display:block; font-size:.72rem; color:var(--muted); line-height:1.5}
.kv .v{display:block; text-align:start; font-weight:600; font-size:.9rem;
  line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv .v bdi{unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.kv .v .pill{font-weight:600}
h4.dh{margin:18px 0 8px; font-size:.85rem; font-weight:700; color:var(--ink-2)}
h4.dh:first-of-type{margin-top:0}

/* سطر پرداخت در رسید — نرخ و معادلش زیر خودِ سطر می‌آید تا معلوم باشد
   نرخ مالِ کدام صندوق است */
.rline{padding:8px 0; border-bottom:1px solid var(--line-soft)}
.rline:last-child{border-bottom:0}
.rline .paxrow{border-bottom:0; padding:0}
.rline .eq{display:block; margin-top:5px; color:var(--brass);
  direction:ltr; unicode-bidi:isolate; text-align:end; font-variant-numeric:tabular-nums}
.rline .eq:empty{display:none}
.rline .eqr{display:block; margin-top:3px; color:var(--muted); font-size:.75rem;
  text-align:end; font-variant-numeric:tabular-nums}
.rline .eqr:empty{display:none}

.addrow{width:100%; border:1px dashed var(--line); background:none; color:var(--accent);
  padding:9px; border-radius:var(--radius); cursor:pointer; font-size:.86rem; margin-top:10px}
.addrow:hover{background:var(--accent-soft)}

.empty{padding:40px 20px; text-align:center; color:var(--muted); font-size:.9rem}
.mockbar{background:var(--brass-soft); color:var(--brass); text-align:center;
  padding:7px 16px; font-size:.8rem; border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .side{position:fixed; top:0; bottom:0; right:0; z-index:70;
    transform:translateX(100%); transition:transform .22s ease}
  .side.open{transform:none}
  .top .burger{display:block}
  .page{padding:18px 14px 60px}
  .top{padding:13px 14px}
  .row2,.row3{grid-template-columns:1fr}

  table,thead,tbody,tr,td{display:block; min-width:0}
  thead{display:none}
  tbody tr{border:1px solid var(--line); border-radius:var(--radius);
    margin:12px 14px; padding:6px 0; background:var(--surface)}
  tbody td{border-bottom:1px solid var(--line-soft); display:flex;
    justify-content:space-between; align-items:center; gap:14px;
    padding:9px 14px; text-align:start}
  tbody td:last-child{border-bottom:0}
  tbody td::before{content:attr(data-l); color:var(--muted); font-size:.78rem;
    font-family:Vazirmatn,sans-serif; direction:rtl}
  tbody td:empty{display:none}
  td.act{justify-content:flex-start; flex-wrap:wrap; gap:6px}
  td.act::before{content:""}
  .card .body.flush{padding:1px 0}

  .paxhead{display:none}
  .paxrow{grid-template-columns:1fr 1fr; gap:8px; padding:12px 0}
  .paxrow .i{grid-column:1/-1; text-align:start; font-weight:600; color:var(--ink-2)}
  .paxrow .nm{grid-column:1/-1}
  .paxrow .tk{grid-column:1/-1}
  .paxrow .ph{grid-column:1/-1}
  .paxrow .x{grid-column:1/-1; justify-self:start}
}

/* ===========================================================================
   افزوده‌های نسخهٔ متصل به سرور — ورود، پیام، سند، بارگذاری
   =========================================================================== */

/* ---------- ورود ---------- */
/* ---------- صفحهٔ ورود: رنگِ برند ----------
   اینجا تنها جایی است که لوگو در اندازهٔ بزرگ دیده می‌شود، پس صفحه هم
   سرخِ دُرسا می‌پوشد نه نیلیِ برنامه. متغیرها فقط داخل #login عوض
   می‌شوند، پس دکمه و پیوند و حلقهٔ فوکوس همه با هم سرخ می‌شوند و بقیهٔ
   برنامه دست‌نخورده می‌ماند.

     #B41615  سرخِ تیره — تکیهٔ اصلی: دکمه، نوار، پیوند
     #E25658  سرخِ روشن — فقط برای گرادیان و تابش

   رنگ‌ها ثابت‌اند و از تم نمی‌آیند: در تم تیره متغیرهای برنامه روشن
   می‌شوند و سفیدِ روی دکمه محو می‌شد. */
#login{
  --accent:#B41615; --accent-2:#E25658; --accent-ink:#FFFFFF;
  --accent-soft:#FBEAEA; --violet:#8E1112;
  min-height:100vh; display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(226,86,88,.20), transparent 68%),
    radial-gradient(700px 380px at 8% 105%, rgba(180,22,21,.14), transparent 70%),
    var(--ground)}
/* دکمهٔ ورود گرادیانِ نیلی برنامه را می‌گیرد؛ اینجا باید سرخ باشد و
   متنش در هر دو تم سفید بماند. */
#login .btn.primary{background:linear-gradient(135deg, #B41615, #D63A38);
  color:#fff; box-shadow:0 4px 14px rgba(180,22,21,.34); border-color:#B41615}
#login .btn.primary:hover{background:linear-gradient(135deg, #9E1312, #C43331)}
#login a{color:#B41615; font-weight:600}
:root[data-theme="dark"] #login a,
:root:not([data-theme="light"]) #login a{color:#F08A8B}
#login input:focus{border-color:#B41615;
  box-shadow:0 0 0 3px rgba(180,22,21,.18); outline:none}
.loginwrap{width:min(380px,100%); display:flex; flex-direction:column; gap:18px}
.loginbox{width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:34px 30px; box-shadow:var(--shadow)}
.loginbox h1{font-size:1.5rem; text-align:center}
.loginbox .sub{text-align:center; color:var(--muted); font-size:.85rem; margin:6px 0 26px}
/* نوارِ رنگی با متنِ سفید. متنِ سفید جای دیگری از این جعبه خوانا نیست —
   جعبه در تم روشن سفید است — پس خودِ نوار زمینه‌اش را با خودش می‌آورد و
   در هر دو تم همان‌قدر خواناست. */
/* رنگ‌های نوار ثابت‌اند و از متغیرِ تم نمی‌آیند: در تم تیره، نیلی و بنفشِ
   تم روشن می‌شوند و متنِ سفید رویشان محو است (۲ به ۱). نوار زمینه‌اش را
   خودش می‌آورد، پس رنگ برند در هر دو تم همان می‌ماند و سفید خوانا. */
.loginbox .sub.band{margin:10px -6px 24px; padding:7px 12px; border-radius:99px;
  background:linear-gradient(135deg, #B41615, #E25658);
  color:#fff; font-weight:600; letter-spacing:.01em;
  box-shadow:0 3px 12px rgba(180,22,21,.32)}
.loginbox .btn{width:100%; justify-content:center; margin-top:8px; padding:11px}
.loginbox .err{color:var(--bad); font-size:.84rem; min-height:1.3em; margin-bottom:6px}

/* ---------- لوگو ----------
   نوشتهٔ فارسیِ داخلِ لوگو مشکی است. روی زمینهٔ تیره ناپدید می‌شود و
   وارونه‌کردنش رنگِ سرخِ برند را هم می‌برد. پس لوگو همیشه روی یک صفحهٔ
   سفید می‌نشیند: رنگ‌های برند دست‌نخورده می‌مانند و در هر دو تم خواناست.
   در تم روشن صفحه تقریباً نامرئی است، در تیره یک کارت سفیدِ تمیز. */
.logoplate{background:#fff; border-radius:12px; padding:14px 18px;
  display:grid; place-items:center; box-shadow:var(--shadow)}
/* لوگو پهن است (تقریباً ۱ به ۲٫۳)؛ بی‌سقف، بلندیِ صفحهٔ ورود را می‌بلعد */
.logoplate img{max-width:100%; height:auto; max-height:108px; display:block}
.logoplate .fallback{display:none}
/* اگر فایل لوگو نبود، تصویرِ شکسته نشان نمی‌دهیم — نشانِ متنی جایش می‌آید */
.logoplate.nologo img{display:none}
.logoplate.nologo .fallback{display:block; text-align:center; color:#B01F24}
.logoplate.nologo .fallback b{display:block; font-size:1.5rem; letter-spacing:.06em}
.logoplate.nologo .fallback span{font-size:.78rem; color:#333}


/* ---------- کپی‌رایت طراح ---------- */
.credit{font-size:.76rem; color:var(--muted); text-align:center; line-height:1.9}
.credit a{color:var(--accent); text-decoration:none}
.credit a:hover{text-decoration:underline}
.credit .dot{opacity:.5; margin:0 4px}
.credit.rail{padding:10px 14px 14px; border-top:1px solid var(--line-soft);
  font-size:.72rem}
.page-credit{padding:22px 26px 30px; margin-top:auto;
  border-top:1px solid var(--line-soft)}

/* ---------- پیام گذرا ---------- */
#toasts{position:fixed; bottom:18px; inset-inline-start:18px; z-index:90;
  display:flex; flex-direction:column; gap:8px; max-width:min(420px,90vw)}
.toast{background:var(--surface); border:1px solid var(--line); border-inline-start:3px solid var(--accent);
  border-radius:var(--radius); padding:11px 15px; font-size:.87rem; box-shadow:var(--shadow);
  animation:slidein .18s ease}
.toast.ok{border-inline-start-color:var(--ok)}
.toast.bad{border-inline-start-color:var(--bad); color:var(--bad)}
@keyframes slidein{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- سند حسابداری ---------- */
.sanad{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:18px; box-shadow:var(--shadow); overflow:hidden}
.sanad header{display:flex; align-items:center; gap:12px; padding:12px 18px;
  background:var(--ok-soft); border-bottom:1px solid var(--line)}
.sanad header .t{font-weight:700; color:var(--ok); font-size:.92rem}
.sanad header .no{font-size:.82rem; color:var(--ink-2)}
.sanad header .close{margin-inline-start:auto; background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:.84rem}
.sanad tfoot td{border-top:1px solid var(--line); font-weight:600; background:var(--surface-2)}
.sanad .drv{color:var(--bad)} .sanad .crv{color:var(--ok)}
.sanad .orig{color:var(--muted); font-size:.82rem}

/* ---------- انتخابگر مشتری ---------- */
.combo{position:relative}
.combo .list{position:absolute; inset-inline:0; top:100%; z-index:30; margin-top:4px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); max-height:260px; overflow-y:auto}
.combo .list button{width:100%; text-align:start; background:none; border:0; cursor:pointer;
  padding:9px 12px; display:flex; align-items:center; gap:8px; font-size:.87rem}
.combo .list button:hover,.combo .list button.on{background:var(--accent-soft)}
.combo .list .bal{margin-inline-start:auto; font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-size:.8rem; color:var(--bad); direction:ltr}
.combo .list .none{padding:12px; color:var(--muted); font-size:.85rem}
/* «ثبت مشتری تازه» — همان‌جا داخل فهرست، تا کارمند وسطِ فروش مجبور نشود
   کشو را ببندد و به صفحهٔ مشتریان برود (و پیش‌نویسِ فروش را از دست بدهد). */
.combo .list button.newc{border-top:1px solid var(--line-soft); color:var(--accent);
  font-weight:600}
.combo .list .newcform{padding:10px 12px}
.combo .list .newcform .f{margin-bottom:8px}
.combo .list .newcform .row{display:flex; gap:8px}
/* دکمه‌های داخلِ این فرم، دکمهٔ واقعی‌اند نه سطرِ فهرست.
   قاعدهٔ «.combo .list button» بالاتر، background را از آن‌ها می‌گرفت و
   «ثبت و انتخاب» سفید روی سفید می‌شد — دکمه‌ای که هست و دیده نمی‌شود. */
.combo .list .newcform .btn{width:auto; display:inline-flex; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.combo .list .newcform .btn.primary{border-color:transparent; color:var(--accent-ink);
  background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.combo .list .newcform .btn.primary:hover{filter:brightness(1.07);
  background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.combo .list .newcform .btn:not(.primary):hover{background:var(--surface-2)}

/* ---------- در حال کار ---------- */
body.busy{cursor:progress}
body.busy .btn.primary{opacity:.6; pointer-events:none}
.loading{padding:26px; text-align:center; color:var(--muted); font-size:.87rem}

/* ---------- ریز ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.kbd{font-size:.72rem; opacity:.75; font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif}
.f input:disabled,.f select:disabled{background:var(--surface-2); color:var(--muted)}

/* انتخاب مسافر در کشوی کنسل و چنچ — تیک‌دار، چون گاهی ۲ نفر از ۵ نفر */
.paxpick{border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:14px}
.paxpick .pk{display:grid; grid-template-columns:20px 1fr auto auto auto; gap:10px;
  align-items:center; padding:9px 12px; cursor:pointer; font-size:.86rem;
  border-bottom:1px solid var(--line-soft)}
.paxpick .pk:hover{background:var(--surface-2)}
.paxpick .pk input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.paxpick .pk .nm{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.paxpick .pk bdi{font-variant-numeric:tabular-nums}
.paxpick > button{width:100%; border:0; border-radius:0; padding:8px}

/* هشدار پایگاه دادهٔ عقب‌مانده — نواری که نمی‌شود ندیدش */
.dbwarn{background:var(--bad-soft); color:var(--bad); padding:11px 26px;
  font-size:.86rem; border-bottom:1px solid var(--line); line-height:1.7}
.dbwarn code{background:var(--surface); padding:1px 6px; border-radius:4px;
  font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; direction:ltr;
  unicode-bidi:isolate; font-weight:600}
.dbwarn .what{display:block; opacity:.75; font-size:.78rem; direction:ltr;
  unicode-bidi:isolate; text-align:end}
.dbwarn .what:empty{display:none}

/* کلید ظاهر — روشن / تیره / مثل سیستم */
.themebtn{background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:32px; height:32px; cursor:pointer; font-size:.95rem; line-height:1;
  color:var(--ink-2); display:grid; place-items:center; padding:0}
.themebtn:hover{background:var(--surface-2); color:var(--ink)}

/* چیپ طلب‌های مشتری در کشوی رسید */
.debts{display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:9px 12px; background:var(--surface-2); border-radius:var(--radius);
  min-height:38px; font-size:.85rem}

/* دو کارت کنار هم روی صفحهٔ بزرگ، زیر هم روی موبایل */
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px}
.two .card + .card{margin-top:0}
/* بدون min-width:0 خانهٔ گرید به‌اندازهٔ جدولِ داخلش پهن می‌شود و ستون آخر
   زیر کارت بغلی می‌رود — «سود ۲۹٫۰۰» می‌شد «۹٫۰۰». اسکرول افقی مال خودِ
   جدول است، نه صفحه. */
.two > *{min-width:0}
.two .tw{max-width:100%}
/* جدول‌های کارتِ نصف‌عرض ستون کم دارند و به ۶۸۰ پیکسلِ پیش‌فرض نیاز ندارند.
   با آن، ستون آخر («سود USD») بیرون کادر می‌افتاد و کاربر فقط «۹٫۰۰» را
   می‌دید به‌جای «۲۹٫۰۰» — عددی که غلط هم به نظر می‌رسید. */
.two .tw table{min-width:420px}

/* ===========================================================================
   فاکتور چاپی — کاغذ A4 روی سربرگِ چاپیِ شرکت

   کاغذِ دفتر سربرگ و پاورقیِ چاپ‌شده دارد، پس بالای صفحه و پای صفحه خالی
   می‌ماند. حاشیه‌ها در @page می‌نشینند نه در padding: اگر فاکتور به صفحهٔ
   دوم برود، صفحهٔ دوم هم همان حاشیه‌ها را می‌خواهد و padding فقط به صفحهٔ
   اول می‌رسد.

   طرح از فاکتورِ نمونهٔ خودِ دفتر آمده: عنوانِ سرخ، دو ستونِ مشخصات، خطِ
   سرخ، جدولِ کادردار با چند سطرِ خالی، جمع‌ها در پای همان جدول با سطرِ
   آخرِ رنگی، و بعد مهر و امضا.

   سطرهای خالی تزئین نیستند: فاکتوری که جدولش نیمه‌کاره تمام شود، جا برای
   افزودنِ دستیِ سطر می‌گذارد. جدولِ پرشده این را می‌بندد.
   =========================================================================== */
#print{display:none}

@media print{
  /* روی کاغذ فقط فاکتور می‌رود. بقیهٔ برنامه — نوار کناری، کشو، پیام‌ها —
     نباید حتی یک صفحهٔ سفیدِ اضافه چاپ کند. */
  body > *{display:none !important}
  #print{display:block !important}
  html, body{background:#fff !important; margin:0; padding:0}
  @page{size:A4; margin:45mm 18mm 35mm}
}

#print{
  --pred:#C0201F;
  width:174mm; margin:0 auto; color:#111; background:#fff; direction:rtl;
  font-family:Vazirmatn,"Segoe UI",Tahoma,sans-serif;
  font-size:12px; line-height:1.85; -webkit-print-color-adjust:exact;
  print-color-adjust:exact}

#print .ptitle{text-align:center; font-size:17px; font-weight:800;
  color:var(--pred); letter-spacing:.02em; margin-bottom:10px}

/* مشخصات: مشتری سمت راست، شمارهٔ فاکتور و تاریخ سمت چپ */
#print .pmeta{display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; font-size:11.5px}
#print .pmeta b{color:var(--pred); font-weight:700}
#print .pmeta .ml{text-align:end; white-space:nowrap}
#print .prule{border-top:2px solid var(--pred); margin:7px 0 12px}

#print table{width:100%; border-collapse:collapse; table-layout:fixed;
  min-width:0; font-size:11.5px}
#print th, #print td{border:1px solid #333; padding:5px 8px; text-align:start;
  overflow-wrap:anywhere; height:22px}
#print th{font-weight:700; background:#F0F0F0; color:#111}
#print td.n, #print th.n{text-align:end; font-variant-numeric:tabular-nums;
  white-space:nowrap}
#print td.c, #print th.c{text-align:center}
#print tr{break-inside:avoid}
/* #  |  توضیحات  |  تعداد  |  قیمت واحد  |  مبلغ */
#print th:nth-child(1), #print td:nth-child(1){width:8%}
#print th:nth-child(3), #print td:nth-child(3){width:11%}
#print th:nth-child(4), #print td:nth-child(4){width:19%}
#print th:nth-child(5), #print td:nth-child(5){width:19%}

/* جمع‌ها پای همان جدول‌اند، نه یک بلوکِ جدا — مثل فاکتورِ نمونه */
#print tfoot td{background:#FAFAFA}
#print tfoot td.lbl{font-weight:700; text-align:start}
#print tfoot tr.grand td{background:#FBE4E4; font-weight:800; font-size:12.5px}

/* امضا سمت چپِ کاغذ می‌نشیند — همان‌جا که در فاکتورِ نمونهٔ دفتر است.
   در متنِ راست‌به‌چپ، «چپ» یعنی end. */
#print .psign{margin-top:16px; font-size:11.5px; text-align:end}
#print .pby{margin-top:26px; font-size:11.5px; font-weight:700; text-align:end}
#print .pby .ln{display:block; width:60mm; margin-inline-start:auto;
  border-top:1px solid #333; margin-bottom:4px}
#print .num{direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
#print .pfoot{margin-top:14px; font-size:10.5px; color:#555; text-align:center}

/* در پهنای کمتر از ۹۰۰ پیکسل، جدول‌های برنامه به کارت تبدیل می‌شوند تا
   روی موبایل خوانا بمانند. کاغذ A4 هم ۷۹۴ پیکسل است، پس همان قاعده به
   فاکتور می‌خورد و جدول را پلکانی و درهم چاپ می‌کرد. اینجا صریح برش
   می‌گردانیم — کاغذ موبایل نیست. */
#print table{display:table}
#print thead{display:table-header-group}
#print tbody, #print tfoot{display:table-row-group}
#print tr{display:table-row}
#print th, #print td{display:table-cell}
#print tbody tr{border:0; margin:0; padding:0; background:none}
#print tbody td{justify-content:unset; align-items:unset; gap:0}

/* ---------- هشدارِ وسطِ صفحه ----------
   پیامِ گذرا گوشهٔ پایین می‌آید و کاربری که تند کار می‌کند نمی‌بیندش. برای
   چیزی که باید جلوی ثبت را بگیرد، همان‌جا سرِ راه می‌نشیند و تا کلیک
   نکنی نمی‌رود. */
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(9,13,21,.55); padding:20px}
.modal .mbox{width:min(460px,100%); background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lift);
  overflow:hidden}
.modal header{display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--line-soft); background:var(--warn-soft)}
.modal header b{font-size:1rem; color:var(--warn)}
.modal header .close{margin-inline-start:auto; background:none; border:0;
  cursor:pointer; font-size:1.3rem; line-height:1; color:var(--muted)}
.modal header .close:hover{color:var(--bad)}
.modal .mbody{padding:16px 18px; font-size:.93rem; line-height:1.9}
.modal footer{display:flex; gap:10px; padding:12px 18px 16px}
.modal footer .btn{flex:1; justify-content:center}

/* فهرست‌های داشبورد داخلِ خودشان اسکرول می‌کنند: صد بدهکار نباید بقیهٔ
   صفحه را به ته براند. ارتفاع ثابت است تا دو کارتِ کنار هم قد یکی بمانند. */
.scrollbox{max-height:280px; overflow-y:auto}
.f textarea{width:100%; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); color:var(--ink);
  font:inherit; line-height:1.8; resize:vertical}
.f textarea:focus{border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.btn.wa{background:var(--wa); color:#fff; border-color:var(--wa)}
.btn.wa:hover{filter:brightness(.93)}

/* عنوانِ بخش داخلِ یک کارت — کارت حساب مشتری دو فهرست دارد و بدون این،
   دو جدول پشت هم می‌آمدند و معلوم نبود کدام کدام است. */
.secttl{margin:0; padding:14px 18px 8px; font-size:.86rem; font-weight:600;
  color:var(--ink); border-top:1px solid var(--line-soft)}
.secttl:first-child{border-top:0}
.secttl .dim{font-weight:400; font-size:.8rem}

/* نوارِ بازهٔ زمانیِ کارت حساب — دو تاریخ و چند دکمه در یک سطر */
.daterow{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.daterow .f{margin:0; min-width:150px}
.daterow .spacer{flex:1}
/* جمع‌بندیِ دوره: چند عدد کنار هم، نه زیر هم — با یک نگاه خوانده شود */
.sum.cardsum{display:grid; gap:10px; margin-top:14px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.sum.cardsum .r{display:block; background:var(--surface-2); border-radius:var(--radius);
  padding:10px 12px; border:1px solid var(--line-soft)}
.sum.cardsum .k{display:block; font-size:.76rem; color:var(--muted); margin-bottom:3px}
.sum.cardsum .v{display:block; font-weight:700; font-size:1rem}
.sum.cardsum .r.end{background:var(--brass-soft); border-color:transparent}
.sum.cardsum .r.end .v{color:var(--brass)}

/* ===========================================================================
   پیش‌نمایشِ چاپ

   کاربر می‌خواهد پیش از چاپ ببیند، و آن‌چه می‌بیند باید دقیقاً همان باشد
   که روی کاغذ می‌رود. پس پیش‌نمایش همان کاری را می‌کند که چاپ می‌کند —
   همهٔ فرزندانِ body را پنهان می‌کند جز خودِ کاغذ — و فقط یک نوارِ ابزار
   رویش می‌گذارد. هیچ نسخهٔ دومی از طرح وجود ندارد که با نسخهٔ چاپی
   واگرا شود.
   =========================================================================== */
body.previewing{background:#5A6478; overflow-y:auto}
body.previewing > *{display:none !important}
body.previewing > #pvBar{display:flex !important}
body.previewing > #print{display:block !important;
  /* کاغذِ A4 با همان حاشیه‌هایی که @page می‌گذارد، تا جای سربرگِ چاپیِ
     شرکت روی صفحه هم دیده شود */
  width:210mm; min-height:297mm; box-sizing:border-box;
  padding:45mm 18mm 35mm; margin:78px auto 40px;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}

#pvBar{position:fixed; inset-inline:0; top:0; z-index:200; display:flex;
  align-items:center; gap:12px; padding:11px 18px;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
#pvBar .spacer{flex:1}
#pvBar .dim{color:var(--muted); font-size:.82rem}
@media print{ #pvBar{display:none !important} }

/* صورت‌حساب چند جدول با ستون‌های متفاوت دارد؛ عرض‌های ثابتِ فاکتور
   (که برای پنج ستون تنظیم شده‌اند) نباید به آن‌ها برسد. */
#print.stmt th, #print.stmt td{width:auto}

/* عرضِ ستون‌های صورت‌حساب، صریح.
   بی این‌ها مرورگر پهنا را بین ستون‌ها پخش می‌کرد و «شرح» — تنها ستونی
   که واقعاً متن دارد — به سه سطرِ فشرده می‌شکست، در حالی که «ارز» و
   عددها جای اضافه داشتند. */
#print.stmt table.act th:nth-child(1), #print.stmt table.act td:nth-child(1){width:4%}
#print.stmt table.act th:nth-child(2), #print.stmt table.act td:nth-child(2){width:11%}
#print.stmt table.act th:nth-child(3), #print.stmt table.act td:nth-child(3){width:45%}
#print.stmt table.act th:nth-child(4), #print.stmt table.act td:nth-child(4){width:6%}
#print.stmt table.act th:nth-child(5), #print.stmt table.act td:nth-child(5){width:11%}
#print.stmt table.act th:nth-child(6), #print.stmt table.act td:nth-child(6){width:11%}
#print.stmt table.act th:nth-child(7), #print.stmt table.act td:nth-child(7){width:12%}

/* جدولِ تکت‌ها: «شرح» و «مسافران» متن‌اند، بقیه کوتاه */
#print.stmt table.tkt th:nth-child(1), #print.stmt table.tkt td:nth-child(1){width:4%}
#print.stmt table.tkt th:nth-child(2), #print.stmt table.tkt td:nth-child(2){width:10%}
#print.stmt table.tkt th:nth-child(3), #print.stmt table.tkt td:nth-child(3){width:24%}
#print.stmt table.tkt th:nth-child(4), #print.stmt table.tkt td:nth-child(4){width:20%}
#print.stmt table.tkt th:nth-child(5), #print.stmt table.tkt td:nth-child(5){width:10%}
#print.stmt table.tkt th:nth-child(6), #print.stmt table.tkt td:nth-child(6){width:11%}
#print.stmt table.tkt th:nth-child(7), #print.stmt table.tkt td:nth-child(7){width:11%}
#print.stmt table.tkt th:nth-child(8), #print.stmt table.tkt td:nth-child(8){width:10%}
#print.stmt .ptitle{margin-bottom:6px}
#print.stmt .pperiod{text-align:center; font-size:11px; color:#444; margin-bottom:10px}
#print.stmt h4{margin:16px 0 6px; font-size:12.5px; color:var(--pred)}
#print.stmt table{margin-bottom:4px}
#print.stmt tfoot tr.grand td{background:#FBE4E4}
/* جمع‌بندیِ دوره: چند خانه کنار هم، بالای جدول‌ها */
#print .pcards{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px}
#print .pcards div{flex:1 1 92px; border:1px solid #333; padding:5px 7px}
#print .pcards span{display:block; font-size:10px; color:#444}
#print .pcards b{font-size:12px; font-variant-numeric:tabular-nums}
#print .pcards div.end{background:#FBE4E4}

/* انتخابِ گیرندهٔ پیام — مشتری یا هر مسافری که شماره دارد */
.pickwho{display:flex; flex-direction:column; gap:8px}
.pickwho .chk{padding:8px 10px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface)}
.pickwho .chk:hover{background:var(--surface-2)}

/* ستونِ شماره‌ردیف: کمترین جای ممکن. عددِ ترتیب اطلاعاتِ کمی دارد و
   نباید هم‌عرضِ ستونِ مبلغ باشد. */
.tw th.tiny, .tw td.tiny{width:1%; white-space:nowrap; padding-inline:8px;
  color:var(--muted); text-align:center}
#print.stmt th.i, #print.stmt td.i{width:5%; padding-inline:3px}

/* سربرگِ کارت حساب: دکمهٔ بازگشت اول می‌آید، بعد نام */
#cardWrap > header{flex-wrap:wrap}
#cardBack{white-space:nowrap}

/* چند ارز در یک جعبه: هر ارز یک سطر، زیر هم */
.sum.cardsum .v .ml{display:block; font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate; text-align:start}
.sum.cardsum .v .ml + .ml{margin-top:3px}
.sum.cardsum .v .ml .s{font-size:.72rem; font-weight:500; margin-inline-start:6px}
.sum.cardsum .v .ml .s.neg{color:var(--bad)}
.sum.cardsum .v .ml .s.pos{color:var(--ok)}

/* نشانِ ارز روی سطر — کوچک و کم‌رنگ، چون تکرارشونده است و نباید
   عددِ کنارش را تحت‌الشعاع بگذارد. */
.ccytag{font-size:.72rem; color:var(--muted); font-weight:600;
  margin-inline-start:4px; letter-spacing:.02em}
.tw td.tiny .ccytag{margin:0}

/* ستون‌های پولِ کارت حساب کوتاه‌اند و «شرح» پهن — همان تعادلی که
   صورت‌حساب چاپی دارد. */
.tw th.money, .tw td.money{width:9%; white-space:nowrap}
