:root {
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --ink: #1f2933;
  --ink-soft: #5c6b7a;
  --border: #e2e8ef;
  --brand: #0f5c8c;
  --brand-dark: #0a3d5c;
  --accent: #0f9d78;
  --warn: #c0392b;
  --warn-bg: #fdecea;
  --direct: #0f5c8c;
  --indirect: #58a6d6;
  /* ================= توکن‌های تازه‌ی «بازآرایی بصری متوسط» (افزایش #۱۴) =================
     عمداً هیچ رنگ پایه‌ای بالا تغییر نکرد — چون همین مقادیر hex در ده‌ها جای دیگر (views.js) به‌صورت
     inline-style مستقیم تکرار شده‌اند و تغییرشان اینجا باعث ناهماهنگی بین المان‌های CSS-محور و
     inline می‌شد. این بخش فقط توکن‌های تازه (سایه/شعاع گوشه/تاکید) برای عمق و سلسله‌مراتب بصری اضافه
     می‌کند، بدون دست‌زدن به هویت رنگی موجود. */
  --shadow-sm: 0 1px 3px rgba(10, 30, 45, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 30, 45, 0.09);
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  /* overflow-x باید غیر-visible باشد چون نوار کناری با transform به بیرون از صفحه در حالت موبایل
     منتقل می‌شود — کروم عرض قابل‌اسکرول صفحه را بر مبنای جعبه‌ی «قبل از transform» همین عنصر
     position:fixed حساب می‌کند، نه موقعیت واقعی‌اش، و بدون این خط یک اسکرول افقی ناخواسته ایجاد
     می‌شد. تجربه‌ی واقعی نشان داد این قانون هم روی html هم روی body لازم است: با آزمایش مستقیم،
     برداشتنش فقط از body (نگه‌داشتنش فقط روی html) باعث یک باگ چیدمان بسیار بدتر در موبایل شد —
     کل محتوای صفحه به یک نوار باریک در گوشه‌ی صفحه جمع می‌شد (به‌جای گرفتن کل عرض صفحه).
     ولی مقدار قدیمی `hidden` یک اثر جانبی داشت: طبق مشخصات CSS Overflow، وقتی یک محور overflow
     غیر-visible باشد و محور دیگر visible بماند، مرورگر محور visible را هم به‌طور خودکار به auto
     تبدیل می‌کند — یعنی body (که overflow-y آن هیچ‌وقت صراحتاً تنظیم نشده بود) به یک اسکرول‌کانتینر
     «شبح» تبدیل می‌شد: چون ارتفاع body همیشه دقیقاً هم‌اندازه‌ی محتوایش است (نه محدود به ارتفاع
     صفحه)، این اسکرول‌کانتینر هرگز واقعاً اسکرول نمی‌شد (اسکرول واقعی در html اتفاق می‌افتاد)، ولی
     طبق مشخصات position:sticky همین کافی بود تا هر عنصر چسبانِ داخل body را خراب کند (باگ واقعی
     افزایش #۱۹: کارت «جمع مبلغ انتخاب‌شده» چسبنده نمی‌ماند). **راه‌حل**: به‌جای `hidden` از مقدار
     تازه‌تر `clip` استفاده شد — طبق مشخصات، clip از آن قانون جفت‌شدن خودکار معاف است، پس overflow-y
     واقعاً visible می‌ماند، body دیگر اسکرول‌کانتینر شبح نمی‌شود، و position:sticky درست کار
     می‌کند — درحالی‌که همان اثر اصلی (جلوگیری از اسکرول افقی/خرابی چیدمان موبایل) کامل حفظ می‌شود.
     (پشتیبانی مرورگر: Chrome/Edge 90+‎, Firefox 97+‎, Safari 16+‎ — برای این پروژه که همیشه با
     مرورگر امروزی تست می‌شود مشکلی ندارد.) */
  overflow-x: clip;
  overflow-y: visible;
}
body {
  margin: 0;
  font-family: 'Vazirmatn', 'IRANSans', Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  direction: rtl;
  text-align: right;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ================= نوار کناری (Sidebar) — جایگزین نوار بالای قبلی =================
   ثابت در سمت راست صفحه (هم‌راستا با چیدمان راست‌به‌چپ)؛ در صفحه‌های باریک (موبایل/تبلت) به‌صورت
   کشویی از راست باز می‌شود (دکمه‌ی ☰ ثابت بالا-راست) تا فضای محتوای اصلی روی صفحه‌ی کوچک تلف نشود. */
.sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 250px;
  background: var(--brand-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 50;
}
.sidebar-brand { padding: 18px 18px 16px; font-weight: 700; font-size: 1.02rem; border-bottom: 1px solid rgba(255,255,255,.15); line-height: 1.5; }
.sidebar-brand .sidebar-sub { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.8; }
.sidebar-brand .pilot-tag { display: block; font-weight: 400; font-size: 0.72rem; opacity: 0.6; margin-top: 6px; }
.sidebar-links { flex: 1; padding: 10px 0; display: flex; flex-direction: column; }
.sidebar-links a {
  color: #fff; padding: 11px 18px; font-size: 0.9rem; display: block;
  border-left: 3px solid transparent; transition: background 0.12s ease, border-color 0.12s ease;
}
.sidebar-links a:hover { background: rgba(255,255,255,.09); text-decoration: none; }
/* .active توسط اسکریپت کوچک انتهای layout() بر اساس location.pathname اضافه می‌شود (افزایش #۱۴) —
   بدون نیاز به دست‌زدن به ده‌ها فراخوانی V.layout(...) در app.js برای پاس‌دادن مسیر فعلی */
.sidebar-links a.active { background: rgba(255,255,255,.16); border-left-color: #fff; font-weight: 700; }
.sidebar-user { border-top: 1px solid rgba(255,255,255,.15); padding: 14px 18px 16px; font-size: 0.85rem; }
.sidebar-user-name { font-weight: 700; }
.sidebar-user-role { opacity: 0.8; font-size: 0.78rem; margin: 2px 0 10px; }
.sidebar-logout { color: #fff; text-decoration: underline; }
.sidebar-logout:hover { opacity: 0.85; }

.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px; right: 12px;
  z-index: 60;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: var(--brand-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.25rem;
  cursor: pointer;
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,33,.4); z-index: 45; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(100%); transition: transform 0.22s ease; box-shadow: -2px 0 12px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: flex; }
  .sidebar.open ~ .sidebar-overlay { display: block; }
  /* وقتی نوار کناری باز است، دکمه‌ی ☰ شناور خودش زیر نوار کناری قرار می‌گیرد و روی برند همپوشانی
     پیدا می‌کند — پنهانش می‌کنیم چون برای بستن، لمس هر جای فضای تیره‌ی پس‌زمینه (overlay) کافی است */
  .sidebar.open ~ .sidebar-toggle { display: none; }
  .container.with-sidebar { margin-right: 0 !important; padding-top: 64px; }
  footer.with-sidebar { margin-right: 0 !important; }
}

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.container.with-sidebar { margin-right: 266px; margin-left: 16px; max-width: 1200px; }
footer.with-sidebar { margin-right: 266px; margin-left: 16px; }

.breadcrumb { margin-bottom: 16px; font-size: 0.9rem; color: var(--ink-soft); }
.breadcrumb a { margin: 0 4px; }

.notice {
  background: var(--warn-bg);
  border: 1px solid #f3c8c3;
  color: var(--warn);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card .label { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 7px; }
.kpi-card .value { font-size: 1.5rem; font-weight: 700; color: var(--brand-dark); letter-spacing: -0.01em; }
.kpi-card .sub { font-size: 0.78rem; color: var(--ink-soft); margin-top: 5px; }
/* رنگ‌بندی سرِ کارت بر اساس نوع شاخص (افزایش #۱۴) — فقط از پالت رنگی از‌قبل‌موجود استفاده شده،
   هیچ رنگ تازه‌ای معرفی نشده تا با بقیه‌ی سامانه (بج‌ها، نمودارها) هماهنگ بماند */
.kpi-card.kpi-people { border-top-color: var(--brand-dark); }
.kpi-card.kpi-premium { border-top-color: var(--brand); }
.kpi-card.kpi-collected { border-top-color: var(--accent); }
.kpi-card.kpi-claims { border-top-color: var(--indirect); }
.kpi-card.kpi-ratio { border-top-color: var(--warn); }

.section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 22px;
}
.section h2 {
  margin: 0 0 16px; padding-right: 12px; border-right: 3px solid var(--brand);
  font-size: 1.08rem; font-weight: 700; color: var(--brand-dark); line-height: 1.4;
}
.section h2 .badge { vertical-align: middle; }

.subsection { padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--border); }
.subsection:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.subsection h3 { margin: 0 0 6px; font-size: 0.92rem; color: var(--ink); }

table { width: 100%; border-collapse: collapse; font-size: 0.89rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: right; }
th { color: var(--ink-soft); font-weight: 600; font-size: 0.82rem; background: #fafbfc; border-bottom: 2px solid var(--border); }
tbody tr:nth-child(even) td { background: #fafbfd; }
tr:hover td { background: #f0f5f9; }

.legend { display: flex; gap: 16px; font-size: 0.82rem; margin-bottom: 8px; color: var(--ink-soft); }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 4px; vertical-align: middle; }

.toggle-group { display: flex; gap: 8px; margin-bottom: 12px; }
.toggle-group a {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
  font-size: 0.82rem; color: var(--ink-soft);
}
.toggle-group a.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ================= صفحه‌ی ورود — طرح صنعت بیمه (پنل برند + نوار متحرک آرم شرکت‌های بیمه) ================= */
.login-wrap {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 62%, #146a9e 100%);
}
.login-shell {
  display: flex; width: 100%; max-width: 940px; min-height: 560px; border-radius: 20px;
  overflow: hidden; box-shadow: 0 30px 70px -20px rgba(6, 22, 36, 0.55);
  animation: loginShellIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes loginShellIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .login-shell { animation: none; }
}

.login-brand {
  flex: 1 1 52%; min-width: 0; position: relative; color: #fff; padding: 40px 0 0 0;
  background:
    radial-gradient(650px 420px at 100% 0%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(500px 380px at 0% 100%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 100%);
  display: flex; flex-direction: column;
}
.login-brand-inner { max-width: 380px; padding: 0 40px; flex: 0 0 auto; }
.login-shield {
  width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); margin-bottom: 18px;
}
.login-shield svg { width: 34px; height: 34px; }
.login-brand h1 { font-size: 1.32rem; font-weight: 800; line-height: 1.5; margin: 0 0 10px; }
.login-tagline { font-size: 0.87rem; line-height: 1.8; color: rgba(255,255,255,0.82); margin: 0; }

/* دیوار آرم‌های شرکت‌های بیمه: چند ردیف که هر کدام کل عرض پنل برند را پر می‌کنند و باقی‌مانده‌ی
   فضای خالی زیر متن را (به‌جای یک نوار باریک) کاملاً اشغال می‌کنند — هر ردیف با جهت/سرعت متفاوت
   (فرد=راست‌به‌چپ، زوج=چپ‌به‌راست) تا حرکت یک‌دست و مصنوعی به‌نظر نرسد. */
.logo-wall {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 14px; margin-top: 28px; padding: 18px 0; position: relative;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.logo-marquee {
  overflow: hidden; position: relative; width: 100%;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee-track {
  display: flex; align-items: center; gap: 16px; width: max-content;
  animation-name: logoMarqueeScroll; animation-timing-function: linear; animation-iteration-count: infinite;
}
.logo-marquee-rtl .logo-marquee-track { animation-direction: reverse; }
.logo-wall:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes logoMarqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}
.logo-chip {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 12px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 4px 14px -6px rgba(6, 22, 36, 0.4); transition: transform 0.15s ease;
}
.logo-chip:hover { transform: translateY(-2px); }
.logo-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }

.login-box {
  flex: 1 1 48%; background: #fff; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center;
}
.login-box h2 { font-size: 1.2rem; font-weight: 700; text-align: center; margin: 0 0 26px; color: var(--brand-dark); }
.login-box label { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 6px; }
.login-box input {
  width: 100%; padding: 11px 13px; margin-bottom: 16px; border: 1px solid var(--border);
  border-radius: 9px; font-family: inherit; font-size: 0.95rem; transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.login-box input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 92, 140, 0.12); }
.login-box button {
  width: 100%; padding: 12px; background: var(--brand); color: #fff; border: none; margin-top: 6px;
  border-radius: 9px; font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.login-box button:hover { background: var(--brand-dark); }
.login-box button:active { transform: scale(0.99); }

@media (max-width: 760px) {
  .login-shell { flex-direction: column; min-height: 0; max-width: 420px; }
  .login-brand { padding: 28px 0 0; }
  .login-brand-inner { padding: 0 28px; }
  .logo-wall { min-height: 190px; margin-top: 22px; }
  .login-box { padding: 36px 28px; }
}

table button {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; color: var(--brand); font-family: inherit; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
table button:hover { background: var(--brand); color: #fff; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }
.badge.ok { background: #e3f6ee; color: var(--accent); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.muted { background: #eef1f4; color: var(--ink-soft); }

footer { text-align: center; padding: 20px; font-size: 0.75rem; color: var(--ink-soft); }

.chat-thread { max-height: 55vh; overflow-y: auto; padding: 4px; }
.chat-msg { border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; max-width: 80%; }
.chat-msg-user { background: #eef6fb; margin-right: auto; margin-left: 0; }
.chat-msg-assistant { background: #f4f6f8; border: 1px solid var(--border); }
.chat-msg-role { font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 4px; }
.chat-msg-body { font-size: 0.92rem; line-height: 1.7; }
.userinfo ul li.active a, ul li.active a { font-weight: 700; }

.map-btn {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px;
  background: #fff; color: var(--brand); font-family: inherit; font-size: 0.82rem; cursor: pointer;
  text-decoration: none; display: inline-block; transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.map-btn:hover { background: var(--brand); color: #fff; text-decoration: none; box-shadow: var(--shadow-sm); }
.map-cell-clickable:hover path { opacity: 0.82; }

/* ============ نمودارهای تعاملی با Tooltip هاوری (موشن‌گرافیک سبک) ============
   الگوبرداری‌شده از تجربه‌ی سامانه‌های داشبورد عمومی که کاربر پسندید: با نگه‌داشتن موس
   روی هر میله، خلاصه‌ای از چند شاخص هم‌زمان نمایش داده می‌شود؛ کاملاً با SVG+JS خام،
   بدون هیچ کتابخانه‌ی نموداری بیرونی — هم‌راستا با معماری بدون‌وابستگی پروژه. */
.chart-wrap { overflow-x: auto; }
.chart-bar {
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.chart-bar:hover { filter: brightness(1.18); }
.chart-tooltip {
  position: fixed;
  z-index: 999;
  display: none;
  background: rgba(10, 61, 92, 0.97);
  color: #fff;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 0.78rem;
  line-height: 1.75;
  max-width: 280px;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(10, 30, 45, 0.28);
  direction: rtl;
  text-align: right;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.chart-tooltip.visible { opacity: 1; transform: translateY(0); }
.chart-tooltip b { color: #ffd97a; }
@media print {
  .chart-tooltip { display: none !important; }
}

/* ================= پنل ادمین (فرم‌های مدیریت کاربر) ================= */
.admin-form { max-width: 620px; }
.admin-form .field { margin-bottom: 14px; }
.admin-form label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 4px; }
.admin-form input[type="text"], .admin-form input[type="password"], .admin-form select, .admin-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 0.92rem; background: #fff; color: var(--ink);
}
.admin-form textarea { resize: vertical; }
.admin-form .hint { font-size: 0.76rem; color: var(--ink-soft); margin-top: 3px; }
.admin-form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.admin-form .actions { margin-top: 18px; display: flex; gap: 10px; align-items: center; }
.admin-form .actions button { padding: 9px 18px; }
.admin-search { width: 100%; max-width: 320px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
.admin-form input[type="file"] { display: block; padding: 8px 0; font-family: inherit; }
.import-errors { max-height: 320px; overflow-y: auto; }
.import-errors li { margin-bottom: 4px; }
.danger-box { background: var(--warn-bg); border: 1px solid #f3c9c3; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.danger-box h3 { margin-top: 0; color: var(--warn); }
/* ================= نوار انتخابگر دوره‌ی زمانی — طراحی اختصاصی (بهبود بصری، درخواست کارفرما) =================
   قبلاً از همان .admin-form/.row3 عمومی (grid سه‌ستونه‌ی برابر، طراحی‌شده برای فرم‌های چندفیلدی
   پنل ادمین) استفاده می‌کرد؛ چون این نوار معمولاً فقط ۱ تا ۳ فیلد کوچک دارد، آن grid فضای خالی
   زیادی در سمت چپ ایجاد می‌کرد و دکمه‌ی «اعمال» با فاصله‌ی زیاد از فیلدها روی خط جدا می‌افتاد. این
   کلاس‌های اختصاصی با flexbox (عرض هر فیلد بر اساس محتوا، نه ستون‌بندی اجباری) این مشکل را رفع
   می‌کنند، بدون هیچ تغییری در .admin-form عمومی (تا فرم‌های دیگر دست‌نخورده بمانند). */
.period-bar-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding-right: 12px; border-right: 3px solid var(--brand);
}
.period-bar-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--brand-dark); line-height: 1.4; }
.period-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #eaf2f8; color: var(--brand-dark); font-weight: 600; font-size: 0.8rem;
  padding: 4px 12px; border-radius: 20px; border: 1px solid #d8e8f2;
}
.period-chip.muted { background: #eef1f4; color: var(--ink-soft); border-color: var(--border); }
.period-bar-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.period-bar-form .field { margin: 0; flex: 0 1 200px; min-width: 160px; }
.period-bar-form .field.wide { flex-basis: 240px; }
.period-bar-form .period-bar-subrow { display: flex; flex-wrap: wrap; gap: 14px 18px; flex: 1 1 100%; }
.period-bar-form label { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 5px; }
.period-bar-form select, .period-bar-form input[type="text"] {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.89rem; background: #fff; color: var(--ink);
  transition: border-color 0.12s ease;
}
.period-bar-form select:focus, .period-bar-form input[type="text"]:focus {
  outline: none; border-color: var(--brand);
}
.period-bar-form .period-bar-actions { flex: 0 0 auto; }
.period-bar-form .period-bar-actions .btn-primary { padding: 8px 22px; }
@media (max-width: 640px) {
  .period-bar-form .field { flex-basis: 100%; }
  .period-bar-form .period-bar-actions { width: 100%; }
  .period-bar-form .period-bar-actions .btn-primary { width: 100%; }
}

.btn-primary { background: var(--brand); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 18px; font-size: 0.92rem; cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease; }
.btn-primary:hover { background: var(--brand-dark); box-shadow: var(--shadow-sm); }
.btn-danger { background: var(--warn); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 18px; font-size: 0.92rem; cursor: pointer; transition: opacity 0.12s ease, box-shadow 0.12s ease; }
.btn-danger:hover { opacity: 0.88; box-shadow: var(--shadow-sm); }

/* ================= نسخه‌ی چاپی/PDF =================
   با ذخیره‌ی این صفحه به‌عنوان PDF از طریق منوی چاپ خود مرورگر ساخته می‌شود (نه یک تولیدکننده‌ی
   PDF سمت سرور) — عناصر صرفاً تعاملی (دکمه‌ها، فرم‌ها، ناوبری) حذف می‌شوند و جدول‌ها/کارت‌ها
   برای کاغذ سفید بهینه می‌شوند. */
@media print {
  .no-print, .sidebar, .sidebar-toggle, .sidebar-overlay, .toggle-group, footer, form button, table form { display: none !important; }
  body { background: #fff; }
  .container, .container.with-sidebar { max-width: 100%; padding: 0; margin: 0; }
  .section, .kpi-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .breadcrumb { margin-bottom: 10px; }
}