/* =====================================================================
   سامانه‌ی حسابداری آژانس مسافرتی — ظاهر برنامه (نسخه‌ی ۲، بازنویسی‌شده)
   ---------------------------------------------------------------------
   فکر پشت این طراحی:
     • «سیاه‌قلم و منظم» — مثل دفتر حسابداری خوب: خط‌کشی تمیز، سلسله‌مراتب روشن،
       چشم سریع عدد را پیدا می‌کند.
     • همه چیز راست‌به‌چپ و فارسی؛ عددها یک‌اندازه (tabular) تا ستون‌ها قِلِق نشوند.
     • رنگ‌ها فقط کار می‌کنند، نه اینکه داد بزنند: سبز-آبی برای برند، طلایی برای مالیات،
       و چهار رنگ وضعیت (سبز/زرد/قرمز/آبی) با پس‌زمینه‌ی ملایم.
     • روشن و شب‌نما: هر دو از یک مجموعه متغیر ساخته می‌شوند.
     • دسترس‌پذیری: کنتراست ۴.۵:۱ برای متن، حلقه‌ی فوکوس دیدنی، پرش با کیبورد.
   فایل به بخش‌های شماره‌دار تقسیم شده؛ برای پیدا کردن هر چیزی از فهرست زیر استفاده کن.
     ۰۱ فونت  ۰۲ متغیرهای طراحی  ۰۳ پایه و دسترس‌پذیری  ۰۴ صفحه‌ی ورود
     ۰۵ قاب برنامه (منو، نوار بالا)  ۰۶ کارت و شبکه  ۰۷ کارت‌های عددی
     ۰۸ جدول  ۰۹ دکمه و نشان  ۱۰ فرم‌ها  ۱۱ یادداشت و پیام
     ۱۲ پنجره و پیام کوتاه  ۱۳ حالت خالی و بارگذاری  ۱۴ اجزای خاص
     ۱۵ واکنش‌گرایی  ۱۶ چاپ  ۱۷ حالت شب‌نما
   ===================================================================== */

/* ---------------------------------------------------------------- ۰۱ فونت */
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------- ۰۲ متغیرهای طراحی */
:root {
  /* برند: سبز-آبی آژانس */
  --brand-50:  #ecf8f4;
  --brand-100: #d3efe7;
  --brand-200: #a8ded0;
  --brand-300: #74c7b3;
  --brand-400: #3fae94;
  --brand-500: #12876d;
  --brand-600: #0f7460;
  --brand-700: #0c5c4c;
  --brand-800: #094639;
  --brand-900: #062f27;
  --brand-soft: #e7f6f2;
  --brand-line: #c4e8dd;
  --brand-ink:  var(--brand-700);   /* سبز برای نوشته روی پس‌زمینه‌ی روشن */

  /* طلایی: مالیات و تأکید خاص */
  --gold: #a9761a;
  --gold-soft: #fdf4e3;
  --gold-line: #efdcb4;

  /* خنثی‌ها */
  --ink: #0e1b26;
  --ink-2: #31485a;
  --muted: #6b8496;
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f6f9fb;
  --surface-3: #eaf0f5;
  --line: #e4ebf1;
  --line-2: #cfdbe5;

  /* وضعیت‌ها */
  --ok: #0f6b45;      --ok-soft: #e7f6ee;      --ok-line: #bfe6d2;
  --warn: #8a6100;    --warn-soft: #fff7e2;    --warn-line: #f0dca6;
  --danger: #b42318;  --danger-soft: #fdeceb;  --danger-line: #f4cbc6;
  --info: #1d4ed8;    --info-soft: #eef4ff;    --info-line: #cddcfb;

  /* نوار کناری (همیشه تیره است، حتی در حالت روز) */
  --sidebar-1: #0a1b28;
  --sidebar-2: #102c3f;
  --sidebar-ink: #c3d5e1;
  --sidebar-ink-dim: #8ba5b6;
  --sidebar-line: rgba(255, 255, 255, .10);

  /* قالب */
  --r-xs: 8px;  --r-sm: 10px;  --r: 12px;  --r-lg: 16px;  --r-xl: 22px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(14, 27, 38, .06);
  --sh-2: 0 1px 2px rgba(14, 27, 38, .05), 0 10px 24px rgba(14, 27, 38, .07);
  --sh-3: 0 28px 70px rgba(6, 20, 30, .32);
  --ring: 0 0 0 3px rgba(18, 135, 109, .30);

  /* اندازه‌ها */
  --sidebar-w: 248px;
  --topbar-h: 66px;
  --h-control: 40px;
  --h-btn: 38px;
  --pad-x: clamp(14px, 1.6vw, 24px);

  /* متن */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --lh-tight: 1.5;
  --lh: 1.75;
}

/* ------------------------------------------------- ۰۳ پایه و دسترس‌پذیری */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 12px);   /* نوار چسبان روی فوکوس را نپوشاند */
}
body {
  font-family: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: var(--lh);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-200); color: var(--brand-900); }

h1, h2, h3, h4 {
  margin: 0 0 .5rem; font-weight: 700; line-height: var(--lh-tight); color: var(--ink);
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 .6rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
a { color: var(--brand-ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 700; }
code, kbd, samp {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .92em;
}
svg { flex: none; }

/* عددها: یک‌اندازه، یک‌خطی، بدون به‌هم‌ریختگی در ستون‌ها */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  unicode-bidi: isolate;
  white-space: nowrap;
  letter-spacing: .1px;
}
[dir="ltr"], .ltr { direction: ltr; }
.hidden { display: none !important; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); line-height: 1.7; }

/* فوکوس: همیشه دیدنی، هم با کیبورد هم با ماوس */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* اسکرول‌بار نازک و آرام */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: var(--r-pill);
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

/* پرش به محتوا (برای کار با کیبورد) */
.skip-link {
  position: fixed; inset-inline-start: 12px; top: -60px; z-index: 100;
  background: var(--brand-600); color: #fff; padding: 9px 16px;
  border-radius: var(--r-sm); font-weight: 600; transition: top .18s;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ------------------------------------------------------ ۰۴ صفحه‌ی ورود */
.login-wrap {
  min-height: 100dvh; display: grid; place-items: center; padding: 22px;
  background:
    radial-gradient(900px 420px at 88% -10%, var(--brand-100) 0%, transparent 62%),
    radial-gradient(760px 400px at 4% 106%, #dde8f3 0%, transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 900px; display: grid; grid-template-columns: 1.06fr .94fr;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2);
}
.login-side {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  justify-content: center; padding: 34px 30px;
  background: linear-gradient(158deg, var(--sidebar-1) 0%, var(--sidebar-2) 100%);
  color: #dbe9f2;
}
.login-side::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(420px 260px at 88% 10%, rgba(63, 174, 148, .28), transparent 70%),
    radial-gradient(300px 200px at 10% 100%, rgba(169, 118, 26, .14), transparent 70%);
}
.login-side > * { position: relative; z-index: 1; }
.login-side .brand { display: flex; align-items: center; gap: 13px; }
.login-side .brand-text strong { display: block; color: #fff; font-size: var(--fs-lg); }
.login-side .brand-text span { display: block; font-size: var(--fs-sm); color: var(--sidebar-ink-dim); }
.login-side .lead { margin: 0; color: #c6d8e4; font-size: var(--fs); line-height: 1.9; }
.login-side .feat { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.login-side .feat li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs); color: #c6d8e4; line-height: 1.7;
}
.login-side .feat svg { margin-top: 5px; color: var(--brand-300); }
.login-side .foot { margin: auto 0 0; font-size: var(--fs-xs); color: var(--sidebar-ink-dim); }

.brand-mark {
  width: 46px; height: 46px; flex: none; border-radius: 14px;
  background: linear-gradient(160deg, var(--brand-500), var(--brand-700));
  display: grid; place-items: center; padding: 7px;
  box-shadow: 0 8px 18px rgba(6, 47, 39, .35);
}

.login-form { display: grid; gap: 14px; align-content: start; padding: 34px 30px; }
.login-head h2 { margin: 0; font-size: var(--fs-xl); }
.login-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.login-form .hint {
  display: grid; gap: 6px; margin-top: 2px;
  background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--r); padding: 12px 14px;
  font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.85;
}
.login-form .hint strong { font-size: var(--fs-sm); }
.login-form .hint code {
  direction: ltr; display: inline-block; background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; padding: 0 7px; font-size: 11.5px;
}

/* ------------------------------------------ ۰۵ قاب برنامه (منو و نوار بالا) */
.app {
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
}

/* ---- منوی کناری (در راست) ---- */
.sidebar {
  position: sticky; top: 0; height: 100dvh; z-index: 30;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 12px 14px;
  background: linear-gradient(180deg, var(--sidebar-1) 0%, var(--sidebar-2) 100%);
  color: var(--sidebar-ink);
  border-inline-start: 0;
}
.side-brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px 12px; }
.side-brand .brand-mark { width: 38px; height: 38px; border-radius: 12px; padding: 6px; }
.side-brand .brand-text strong {
  display: block; color: #fff; font-size: var(--fs);
  font-weight: 600; line-height: 1.45;
}
.side-brand .brand-text span { display: block; font-size: var(--fs-2xs); color: var(--sidebar-ink-dim); }

/* کادر پیدا کردن صفحه در منو */
.nav-filter {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--sidebar-line);
  border-radius: var(--r-sm); padding: 0 10px; height: 38px;
  color: var(--sidebar-ink-dim);
  transition: border-color .15s, background .15s;
}
.nav-filter:focus-within { border-color: var(--brand-400); background: rgba(255, 255, 255, .11); }
.nav-filter input {
  all: unset; flex: 1; min-width: 0; color: #fff; font-family: inherit; font-size: var(--fs-sm);
}
.nav-filter input::placeholder { color: var(--sidebar-ink-dim); }
.nav-filter input::-webkit-search-cancel-button { display: none; }
.nav-filter kbd {
  font-size: 10px; color: var(--sidebar-ink-dim); border: 1px solid var(--sidebar-line);
  border-radius: 6px; padding: 1px 5px; white-space: nowrap;
}
.nav-filter input:not(:placeholder-shown) ~ kbd { display: none; }

/* فهرست صفحه‌ها */
#nav {
  flex: 1; display: grid; gap: 2px; align-content: start;
  overflow-y: auto; overflow-x: hidden; padding: 2px 2px 8px;
  scrollbar-color: #2b475c transparent;
}
#nav button {
  all: unset; box-sizing: border-box;
  position: relative; display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--sidebar-ink); font-size: var(--fs); font-weight: 500;
  border: 1px solid transparent;
  transition: background .14s, color .14s, border-color .14s;
}
#nav button svg { opacity: .82; transition: opacity .14s; }
#nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
#nav button:hover svg { opacity: 1; }
#nav button:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 1px; }
#nav button.active {
  background: linear-gradient(90deg, rgba(18, 135, 109, .96), rgba(18, 135, 109, .62));
  color: #fff; font-weight: 600; border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 8px 18px rgba(4, 34, 28, .40);
}
#nav button.active::before {
  content: ""; position: absolute; inset-inline-end: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 3px; background: var(--brand-300);
}
#nav .nav-sep {
  margin: 12px 10px 4px; font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .4px; color: var(--sidebar-ink-dim);
}
#nav button[hidden] { display: none; }
#nav .nav-sep[hidden] { display: none; }

/* پایین منو: کاربر و دکمه‌ها */
.side-foot {
  border-top: 1px solid var(--sidebar-line); padding-top: 12px;
  display: grid; gap: 9px; font-size: var(--fs-sm);
}
.side-user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  background: rgba(63, 174, 148, .20); color: #8fe3c4;
  border: 1px solid rgba(126, 231, 194, .38);
}
.side-user .who { line-height: 1.45; min-width: 0; }
.side-user strong {
  display: block; color: #fff; font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-user span { color: var(--sidebar-ink-dim); font-size: var(--fs-2xs); }
.side-foot .row { display: flex; gap: 6px; }
.side-foot .row .btn { flex: 1; }

/* ---- ناحیه‌ی محتوا ---- */
.content { padding: 0 var(--pad-x) 80px; min-width: 0; }
#view { max-width: 1440px; outline: none; }
#view > * { min-width: 0; }

/* نوار بالا */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--topbar-h); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--pad-x)) 20px;
  padding: 10px var(--pad-x);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--line-2) 70%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: var(--bg); }
}
.top-start, .top-end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-start { flex: 1 1 auto; }
.page-head { display: flex; flex-direction: column; min-width: 0; }
.topbar h2 {
  margin: 0; font-size: var(--fs-lg); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 12px;
  font-size: var(--fs-sm); color: var(--ink-2); box-shadow: var(--sh-1);
  white-space: nowrap;
}
.chip svg { color: var(--brand-500); }
.icon-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: background .14s, color .14s, border-color .14s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
.icon-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.menu-btn { display: none; }
#btn-theme .ico-moon { display: none; }
[data-theme="dark"] #btn-theme .ico-sun { display: none; }
[data-theme="dark"] #btn-theme .ico-moon { display: block; }

/* پرده‌ی منو روی صفحه‌های باریک */
.drawer-back {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(6, 20, 30, .45); backdrop-filter: blur(2px);
  animation: fade .16s ease-out;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* -------------------------------------------------- ۰۶ کارت و شبکه */
.card {
  min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-1);
  margin-bottom: 16px;
}
.card > h3:first-child {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: var(--fs-md); margin: 0 0 14px; padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.card > h3:first-child::before {
  content: ""; width: 4px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
}
.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.quick {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.quick .btn:first-child { box-shadow: var(--sh-1); }

/* ------------------------------------------- ۰۷ کارت‌های عددی (KPI) */
.kpi { display: grid; gap: 3px; align-content: start; position: relative; overflow: hidden; }
.kpi::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 4px; background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
}
.kpi .label {
  color: var(--muted); font-size: var(--fs-sm); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.kpi .value {
  font-size: var(--fs-2xl); font-weight: 700; color: var(--ink);
  line-height: 1.3; letter-spacing: -.2px;
}
.kpi .value.num { font-size: var(--fs-2xl); }
.kpi .small { color: var(--muted); }
.kpi .value.pos { color: var(--ok); }
.kpi .value.neg { color: var(--danger); }
.kpi.gold::before { background: linear-gradient(180deg, #d8a13c, var(--gold)); }
.kpi.info::before { background: linear-gradient(180deg, #6f9bff, var(--info)); }
.kpi.danger::before { background: linear-gradient(180deg, #f0786c, var(--danger)); }

/* ------------------------------------------------------------ ۰۸ جدول */
.table-wrap {
  overflow: auto; max-width: 100%; max-height: 70dvh;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs);
  table-layout: auto;   /* مرورگر عرض ستون‌ها را بر اساس محتوا می‌چیند */
}
th, td {
  padding: 10px 10px; text-align: right; vertical-align: middle;
  border-bottom: 1px solid var(--line);
  overflow-wrap: break-word;
}
/* هیچ ستونی آن‌قدر باریک نمی‌شود که کلمه‌ها تکه‌تکه شوند؛
   اگر جدول جا نشد، خودِ جدول کنار می‌رود (اسکرول افقی) */
th:not(:last-child), td:not(:last-child) { min-width: 78px; }
th:first-child, td:first-child { min-width: 96px; }
th:last-child, td:last-child { min-width: 50px; }
th {
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1px;
  border-bottom: 1px solid var(--line-2);
  box-shadow: inset 0 -1px 0 var(--line-2);
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--brand-50); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.strong, td b { font-weight: 600; }
/* ستون‌هایی که «عملیات» یا «حالت» هستند، جای کمی می‌گیرند و کلمه‌ها را نمی‌شکنند */
td .badge, td .pill { white-space: nowrap; }
/* ستون عملیات: دکمه‌ها اگر جا نشدند، زیر هم می‌آیند تا اطلاعات پهن‌تر جا شود */
.row-actions { max-width: 210px; }
tfoot td {
  position: sticky; bottom: 0; z-index: 2; font-weight: 700;
  background: var(--surface-3); border-top: 1px solid var(--line-2); border-bottom: 0;
  box-shadow: 0 -1px 0 var(--line-2);
}
.table-wrap table { min-width: 100%; }
/* جدول‌های پهن: به‌جای شکستن، داخل خودشان اسکرول می‌شوند */

/* ------------------------------------------------ ۰۹ دکمه و نشان */
.btn {
  font-family: inherit; font-size: var(--fs); font-weight: 600;
  height: var(--h-btn); padding: 0 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .06s;
}
.btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.primary {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  border-color: var(--brand-600); color: #fff;
  box-shadow: 0 1px 2px rgba(6, 47, 39, .28);
}
.btn.primary:hover {
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  color: #fff; border-color: var(--brand-600);
}
.btn.danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
.btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn.ghost {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18);
  color: #d4e4ee;
}
.btn.ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn.wide { width: 100%; }
.btn.lg { height: 44px; font-size: var(--fs-md); }
.btn.small { height: 32px; padding: 0 11px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn.icon { width: 36px; padding: 0; }
.row-actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; justify-content: flex-start; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.7;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .8; flex: none;
}
.badge.draft   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.badge.posted  { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.badge.reversed{ background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.badge.closed  { background: var(--surface-3);   color: var(--ink-2);  border-color: var(--line-2); }
.badge.open    { background: var(--brand-soft);  color: var(--brand-ink); border-color: var(--brand-line); }
.badge.active  { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.badge.role    { background: var(--info-soft);   color: var(--info);   border-color: var(--info-line); }
.pill {
  display: inline-block; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 2px 10px; font-size: var(--fs-xs); color: var(--ink-2);
}

/* ----------------------------------------------------------- ۱۰ فرم‌ها */
label { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
input, select, textarea {
  font-family: inherit; font-size: var(--fs-md); color: var(--ink);
  width: 100%; height: var(--h-control); padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { height: auto; min-height: 88px; line-height: 1.9; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; font-weight: 400; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: var(--ring);
}
input:disabled, select:disabled, input[readonly], textarea[readonly] {
  background: var(--surface-2); color: var(--ink-2); cursor: not-allowed;
}
input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--brand-600);
  vertical-align: -3px; cursor: pointer;
}
input[type="date"], input[type="time"] { direction: ltr; text-align: right; }
input[type="search"]::-webkit-search-cancel-button { opacity: .5; }
select {
  appearance: none; cursor: pointer; padding-inline-start: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(15px) 50%, calc(20px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.error-text {
  color: var(--danger); margin: 0; min-height: 20px;
  font-size: var(--fs-sm); font-weight: 600;
}
.filters {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.filters label { min-width: 130px; font-size: var(--fs-xs); }
.filters input, .filters select { height: var(--h-btn); }
.filters .btn { height: var(--h-btn); }
.chk {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.chk input { width: 16px; height: 16px; }

/* سطرهای سند روزنامه */
.lines { display: grid; gap: 8px; }
.line {
  display: grid; grid-template-columns: 2.3fr 1.05fr 1.05fr 1.7fr 38px;
  gap: 8px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.line:focus-within {
  background: var(--surface); border-color: var(--brand-400); box-shadow: var(--ring);
}
.line > * { min-width: 0; }
.line input, .line select { background: var(--surface); }
.line-head {
  display: grid; grid-template-columns: 2.3fr 1.05fr 1.05fr 1.7fr 38px; gap: 8px;
  padding: 0 9px 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}
.sub-line {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--muted); padding: 4px 12px 0;
}
.sub-line select { width: auto; min-width: 155px; height: 32px; padding: 4px 9px; font-size: var(--fs-sm); }
.ip-pax { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* جمع‌های سند */
.totals {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  margin-top: 14px; padding: 12px 16px;
  background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--r); font-size: var(--fs);
}
.totals .ok { color: var(--ok); font-weight: 700; }
.totals .bad { color: var(--danger); font-weight: 700; }

/* ------------------------------------------------ ۱۱ یادداشت و پیام */
.note {
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-ink);
  border-inline-start: 3px solid var(--brand-500);
  border-radius: var(--r); padding: 12px 15px; font-size: var(--fs-sm); line-height: 1.85;
}
.note strong { font-weight: 700; }
.note small, .note .small { color: inherit; opacity: .85; }
.note.warn { background: var(--warn-soft);   border-color: var(--warn-line);   color: var(--warn);   border-inline-start-color: var(--warn); }
.note.bad  { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); border-inline-start-color: var(--danger); }
.note.info { background: var(--info-soft);   border-color: var(--info-line);   color: var(--info);   border-inline-start-color: var(--info); }
.note.gold { background: var(--gold-soft);   border-color: var(--gold-line);   color: var(--gold);   border-inline-start-color: var(--gold); }

/* --------------------------------------- ۱۲ پنجره (Modal) و پیام کوتاه */
.modal-back {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: 18px;
  background: rgba(6, 20, 30, .52); backdrop-filter: blur(3px);
  animation: fade .15s ease-out;
}
.modal {
  --modal-pad: 22px;
  width: 100%; max-width: 900px; max-height: 88dvh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--modal-pad);
  box-shadow: var(--sh-3);
  animation: pop .17s cubic-bezier(.2, .8, .3, 1);
}
@keyframes pop { from { transform: translateY(10px) scale(.99); opacity: .5 } to { transform: none; opacity: 1 } }
.modal > h3:first-child {
  position: sticky; top: calc(-1 * var(--modal-pad)); z-index: 3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad)) 16px;
  padding: 15px var(--modal-pad);
  background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: var(--fs-md);
}
.modal-actions {
  position: sticky; bottom: calc(-1 * var(--modal-pad)); z-index: 3;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 20px; padding: 14px 0 calc(var(--modal-pad) - 4px);
  background: var(--surface); border-top: 1px solid var(--line);
}
.modal .table-wrap { max-height: 46dvh; }

.toast-root {
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 60;
  display: grid; gap: 9px; max-width: min(440px, calc(100vw - 36px));
}
.toast {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px 12px 40px; border-radius: var(--r);
  background: #12303f; color: #eaf4fa; font-size: var(--fs-sm); line-height: 1.75;
  border: 1px solid rgba(255, 255, 255, .10);
  border-inline-start: 4px solid var(--brand-400);
  box-shadow: var(--sh-2);
  animation: pop .18s ease-out;
}
.toast .toast-ico { flex: none; margin-top: 2px; opacity: .95; }
.toast .toast-msg { min-width: 0; }
.toast a { color: #8fe3c4; font-weight: 600; }
.toast .toast-x {
  all: unset; position: absolute; inset-inline-end: 8px; top: 8px;
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  display: grid; place-items: center; color: #a9c2d1; font-size: 15px;
}
.toast .toast-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.toast.ok  { background: #0f2f24; border-inline-start-color: #4ad2a0; }
.toast.bad { background: #3a1512; border-inline-start-color: #f97066; }
.toast.warn{ background: #33270a; border-inline-start-color: #f3c96b; }
.toast.info{ background: #131f3d; border-inline-start-color: #9bbcff; }

/* ---------------------------------- ۱۳ حالت خالی، بارگذاری، چرخنده */
.empty {
  display: grid; gap: 6px; place-items: center; text-align: center;
  padding: 34px 18px; font-size: var(--fs-sm); color: var(--muted);
  background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--r);
}
.empty::before {
  content: ""; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-3) center / 21px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b8496'%3E%3Cpath d='M4 4h16v4h-2V6H6v12h12v-2h2v4H4V4Zm7 9.4 4.3-4.3 1.4 1.4L11 16.2 6.3 11.5l1.4-1.4 3.3 3.3Z'/%3E%3C/svg%3E");
}
td.empty, .empty.in-table { background: none; border: 0; padding: 26px 14px; }
td.empty { display: table-cell; }
td.empty::before { display: none; }

.spinner {
  width: 20px; height: 20px; flex: none; display: inline-block;
  border: 2.5px solid var(--brand-200); border-top-color: var(--brand-600);
  border-radius: 50%; animation: spin .75s linear infinite; vertical-align: -4px;
}
@keyframes spin { to { transform: rotate(360deg) } }
.loading-card {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  color: var(--muted); padding: 34px 18px; font-size: var(--fs-sm);
}

/* ------------------------------------------------- ۱۴ اجزای خاص برنامه */
/* مغایرت‌گیری بانکی */
.br-row { display: grid; grid-template-columns: 64px 1fr 1fr 1fr 38px; gap: 8px; align-items: center; }
.br-up {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px; transition: border-color .15s, box-shadow .15s;
}
.br-up:focus-within { border-color: var(--brand-400); box-shadow: var(--ring); background: var(--surface); }
.br-rate { direction: ltr; text-align: right; }
.br-del { white-space: nowrap; }

/* حقوق و دستمزد */
.pay-item { display: grid; gap: 5px; }
.role { background: var(--info-soft); color: var(--info); }

/* کادرهای کوچک اطلاعات (تاریخ‌ها، نرخ‌ها، عمر دارایی) */
.c-rate, .c-method, .c-life, .c-save,
.s-unit, .s-stuff, .s-pattern, .s-save, .s-ok { min-width: 0; }
.s-ok { color: var(--ok); }

/* -------------------------------------------------- ۱۵ واکنش‌گرایی */
/* دو جدول کنار هم در داشبورد: اگر جا کم بیاید، زیر هم می‌آیند تا هیچ ستونی
   بریده نشود (جدولی که بریده شود بدتر از جدولی است که یک خط پایین‌تر برود). */
@media (max-width: 1560px) {
  .grid.tables-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1400px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  :root { --sidebar-w: 250px; }
  .line { grid-template-columns: 1fr 1fr 1fr 1fr 38px; }
  .line input, .line select { font-size: var(--fs); padding: 7px 9px; }
}

/* ستون اول جدول‌های پهن، موقع اسکرول افقی می‌چسبد تا بدانیم کدام سطر است */
.table-wrap th:first-child, .table-wrap td:first-child {
  position: sticky; inset-inline-start: 0; z-index: 1;
  border-inline-end: 1px solid var(--line);
}
.table-wrap th:first-child { background: var(--surface-2); z-index: 3; }
.table-wrap td:first-child { background: var(--surface); }
.table-wrap tbody tr:hover td:first-child { background: var(--brand-50); }
.table-wrap tbody tr:nth-child(even) td:first-child { background: var(--surface-2); }
.table-wrap tfoot td:first-child { background: var(--surface-3); z-index: 3; }
[data-theme="dark"] .table-wrap tbody tr:hover td:first-child { background: #16302a; }

/* منو روی صفحه‌های باریک: کشویی، از راست باز می‌شود */
@media (max-width: 1080px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* منو از لبه‌ی راستِ صفحه بیرون می‌آید و با کشیدن نرم داخل می‌شود.
     (در حالت راست‌به‌چپ، «شروعِ عرض» همان سمت راست است) */
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(310px, 86vw);
    height: 100dvh; z-index: 35; padding: 14px 12px;
    box-shadow: -18px 0 50px rgba(5, 18, 27, .45);
    transform: translateX(102%);          /* بیرون از لبه‌ی راست، تا باز شود */
    transition: transform .22s cubic-bezier(.3, .9, .3, 1);
  }
  .sidebar.open { transform: none; }
  .menu-btn { display: grid; }
  .content { padding-bottom: 64px; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  .line { grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px; }
  .line-head { display: none; }
  .line > button { grid-column: 1 / -1; width: 100%; }
  .br-row { grid-template-columns: 1fr 1fr; }
  .modal { --modal-pad: 16px; max-height: 92dvh; }
}
@media (max-width: 620px) {
  .card { padding: 14px; border-radius: var(--r); }
  .topbar h2 { font-size: var(--fs-md); }
  .chip { padding: 4px 10px; font-size: var(--fs-xs); }
  .kpi .value { font-size: var(--fs-xl); }
  .filters { gap: 8px; }
  .filters label { min-width: 100%; }
  .toast-root { inset-inline: 12px; }
  .toast { max-width: none; }
}

/* حرکت کمتر برای کسی که نمی‌خواهد */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ ۱۶ چاپ */
@media print {
  .sidebar, .topbar, .filters, .modal-actions, .row-actions, .toast-root,
  .drawer-back, .quick, .btn, .skip-link { display: none !important; }
  .app { display: block; }
  .content { padding: 0; }
  #view { max-width: none; }
  body { background: #fff; font-size: 11pt; color: #000; }
  .card {
    border: 0; box-shadow: none; padding: 0; margin: 0 0 14px; break-inside: avoid;
  }
  .table-wrap { max-height: none; overflow: visible; border-color: #999; }
  th {
    position: static; background: #eee !important; color: #000;
    box-shadow: none; border-bottom: 1px solid #999;
  }
  tbody tr:hover { background: none; }
  tfoot td { position: static; background: #f4f4f4; }
  .note, .empty, .badge, .pill { border-color: #999 !important; }
  a { color: #000; text-decoration: none; }
}

/* ------------------------------------------------------- ۱۷ حالت شب‌نما */
[data-theme="dark"] {
  --brand-soft: #0d2b25;
  --brand-line: #1c4d41;
  --brand-ink: var(--brand-300);
  --gold: #e8c273;  --gold-soft: #2b2410;  --gold-line: #4d3f1b;
  --ink: #e8eef4;
  --ink-2: #b7c7d4;
  --muted: #8ba0b0;
  --bg: #0b1319;
  --surface: #111c24;
  --surface-2: #16232c;
  --surface-3: #1d2c37;
  --line: #22303c;
  --line-2: #33434f;
  --ok: #5fd39d;      --ok-soft: #10301f;      --ok-line: #1e5136;
  --warn: #f3c96b;    --warn-soft: #33270a;    --warn-line: #5a4614;
  --danger: #ff9b90;  --danger-soft: #3a1512;  --danger-line: #5c2a24;
  --info: #9bbcff;    --info-soft: #131f3d;    --info-line: #26375f;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .45);
  --sh-3: 0 28px 70px rgba(0, 0, 0, .6);
  --ring: 0 0 0 3px rgba(63, 174, 148, .32);
  color-scheme: dark;
}
[data-theme="dark"] .login-wrap {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(18, 135, 109, .16) 0%, transparent 62%),
    radial-gradient(760px 400px at 4% 106%, rgba(29, 78, 216, .12) 0%, transparent 60%),
    var(--bg);
}
[data-theme="dark"] .login-side { background: linear-gradient(158deg, #071319 0%, #0d2331 100%); }
[data-theme="dark"] .btn.primary { color: #04140f; }
[data-theme="dark"] .btn.primary:hover { color: #04140f; }
[data-theme="dark"] .topbar { background: color-mix(in srgb, var(--bg) 80%, transparent); }
[data-theme="dark"] .empty::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238ba0b0'%3E%3Cpath d='M4 4h16v4h-2V6H6v12h12v-2h2v4H4V4Zm7 9.4 4.3-4.3 1.4 1.4L11 16.2 6.3 11.5l1.4-1.4 3.3 3.3Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] table tbody tr:hover { background: rgba(63, 174, 148, .09); }
[data-theme="dark"] .select, [data-theme="dark"] select { background-color: var(--surface); }

/* نوار اسکرول جدول‌های پهن کمی پررنگ‌تر، تا معلوم باشد ستون‌های بیشتری هم هست */
.table-wrap::-webkit-scrollbar { height: 11px; width: 11px; }
.table-wrap::-webkit-scrollbar-track { background: var(--surface-2); border-radius: var(--r-pill); }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: var(--r-pill); border: 3px solid var(--surface-2);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --------------------------------------------------- افزوده‌های قاب تازه */
.nav-none {
  margin: 12px 10px; padding: 10px 12px; font-size: var(--fs-xs); line-height: 1.8;
  color: var(--sidebar-ink-dim); background: rgba(255, 255, 255, .05);
  border: 1px dashed var(--sidebar-line); border-radius: var(--r-xs);
}
.nav-none[hidden] { display: none; }
body.modal-open, body.drawer-open { overflow: hidden; }