/* ==========================================================================
   modern.css — لایهٔ مدرن ظاهر سامانه (۱۴۰۵/۰۷/۲۳)
   رویکرد: فقط ظاهر. هیچ شناسه (id)، هیچ onclick و هیچ منطق JS تغییر نکرده.
   این فایل AFTER از style.css لود می‌شود، پس با همان ویژگی (specificity)
   برندهٔ آبشاری است. تم تیره با html[data-ras-theme="dark"] حفظ شده.
   واحد پول: ریال؛ جهت: RTL؛ قلم: وزیرمتن (از style.css می‌آید).
   ========================================================================== */

/* ===== ۰. توکن‌های مدرن (روشن پیش‌فرض) ===== */
:root {
  --md-radius-sm: 8px;
  --md-radius: 12px;
  --md-radius-lg: 16px;
  --md-radius-xl: 20px;
  --md-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --md-shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.08);
  --md-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.14);
  --md-shadow-lg: 0 20px 48px -16px rgba(15, 23, 42, 0.22);
  --md-grad-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --md-grad-primary-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  --md-grad-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --md-grad-danger: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  --md-grad-sidebar: linear-gradient(180deg, #0b1226 0%, #101b3d 55%, #0c1530 100%);
  --md-grad-login: linear-gradient(135deg, #0b1226 0%, #1e1b4b 45%, #1e3a8a 100%);
  --md-ring: 0 0 0 3px rgba(99, 102, 241, 0.16);
  --md-border: #e6eaf2;
  --md-page-bg: #eef1f7;
}

/* ===== ۱. پس‌زمینهٔ صفحه + تایپوگرافی ظریف ===== */
body {
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
    radial-gradient(900px 420px at 10% 0%, rgba(56, 189, 248, 0.07), transparent 60%),
    var(--md-page-bg);
}
.content-body {
  padding: 26px 28px 40px;
  max-width: 1720px;
  margin-inline: auto;
  width: 100%;
}

/* ===== ۲. سایدبار مدرن (گرادیان سرمه‌ای + آیتم کپسولی) ===== */
.sidebar {
  background: var(--md-grad-sidebar);
  border-left: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: -8px 0 30px -18px rgba(0, 0, 0, 0.55);
  width: 278px;
}
.sidebar-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(255, 255, 255, 0.02);
}
.sidebar-logo {
  background: var(--md-grad-primary) !important;
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.65);
}
.sidebar-item {
  border-radius: 12px;
  margin-bottom: 5px;
  border: 1px solid transparent;
  font-weight: 600;
}
.sidebar-item:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.12);
}
.sidebar-item.active {
  background: var(--md-grad-primary);
  box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.7);
  border-color: rgba(255, 255, 255, 0.18);
}
.sidebar-submenu {
  background: rgba(255, 255, 255, 0.03);
  border-right: 2px solid #818cf8;
  border-radius: 10px;
  margin: 2px 6px 10px 6px;
  padding: 6px 8px;
}
.sidebar-subitem {
  border-radius: 8px;
  padding: 8px 12px;
}
.sidebar-subitem.active {
  background: rgba(129, 140, 248, 0.16);
  color: #c7d2fe;
}
.sidebar-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(255, 255, 255, 0.02);
}
.menu-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.12);
  flex-shrink: 0;
}
.sidebar-item.active .menu-icon { background: rgba(255, 255, 255, 0.2); }

/* ===== ۳. هدر شیشه‌ای ===== */
.top-navbar {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--md-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, var(--md-shadow-xs);
  height: 68px;
  gap: 12px;
}
.omnibar-input {
  height: 42px;
  border-radius: var(--md-radius);
  background: #f4f6fb;
  border: 1px solid var(--md-border);
  font-size: 12.5px;
}
.omnibar-input:focus {
  background: #fff;
  border-color: #818cf8;
  box-shadow: var(--md-ring);
}
.omnibar-dropdown {
  border-radius: 14px;
  box-shadow: var(--md-shadow-lg);
  border: 1px solid var(--md-border);
  top: 48px;
}
.user-profile-badge {
  border-radius: var(--md-radius) !important;
  background: #f4f6fb !important;
  border: 1px solid var(--md-border) !important;
  padding: 5px 8px 5px 6px !important;
}
.user-avatar-circle {
  box-shadow: 0 4px 10px -4px rgba(79, 70, 229, 0.6);
}
.currency-switcher-bar {
  border-radius: 10px !important;
  font-size: 11px;
}

/* ===== ۴. تیتر داشبورد ===== */
.dash-title-section {
  background: #fff;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-lg);
  padding: 16px 20px;
  box-shadow: var(--md-shadow-xs);
  align-items: center;
}
.dash-title-section h1 { font-size: 19px; letter-spacing: -0.3px; }
.dash-title-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-title-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-last-updated {
  font-size: 11px;
  color: var(--text-muted);
  background: #f4f6fb;
  border: 1px solid var(--md-border);
  border-radius: 20px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* ===== ۵. کارت‌های KPI مینیمال — نوار گرادیانی بالا + لیفت ===== */
.kpi-card-minimal {
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow-xs);
  overflow: hidden;
  isolation: isolate;
}
.kpi-card-minimal::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: var(--md-grad-primary);
  opacity: 0.85;
}
.kpi-card-minimal:hover {
  transform: translateY(-3px);
  box-shadow: var(--md-shadow-md);
  border-color: #c7d2fe;
}
.kpi-min-val { font-size: 23px; letter-spacing: -0.5px; }
.kpi-min-footer { background: #fafbff; margin: 10px -16px -16px; padding: 8px 16px; }

/* ===== ۵ب. نشان آیکون کارت‌های KPI (جایگزین ایموجی؛ FontAwesome) ===== */
.kpi-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: var(--md-shadow-xs);
}
.kpi-ico-indigo { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.kpi-ico-emerald { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.kpi-ico-amber { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.kpi-ico-rose { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.kpi-ico-sky { background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd; }
.kpi-ico-blue { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.kpi-ico-orange { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.kpi-ico-slate { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

/* کارت KPI قدیمی هم یکدست شود */
.kpi-card {
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow-xs);
}
.kpi-card:hover { box-shadow: var(--md-shadow-md); }

/* ===== ۶. پنل‌ها ===== */
.panel-card {
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow-sm);
}
.panel-card:hover { box-shadow: var(--md-shadow-md); }
.panel-header { border-bottom: 1px solid #eef1f6; }
.panel-title { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.panel-title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: var(--md-grad-primary);
  flex-shrink: 0;
}

/* ===== ۷. دکمه‌ها ===== */
.btn {
  border-radius: var(--md-radius);
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.1px;
}
.btn-primary {
  background: var(--md-grad-primary);
  border: 1px solid rgba(124, 58, 237, 0.35);
  box-shadow: 0 6px 16px -8px rgba(124, 58, 237, 0.7);
}
.btn-primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 10px 22px -8px rgba(124, 58, 237, 0.75);
  transform: translateY(-1px);
}
.btn-success {
  background: var(--md-grad-success);
  box-shadow: 0 6px 16px -8px rgba(16, 185, 129, 0.7);
}
.btn-success:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-danger {
  background: var(--md-grad-danger);
  box-shadow: 0 6px 16px -8px rgba(244, 63, 94, 0.7);
}
.btn-danger:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-outline {
  background: #fff;
  border: 1px solid #dbe1ec;
  box-shadow: var(--md-shadow-xs);
}
.btn-outline:hover { border-color: #a5b4fc; color: #4338ca; background: #f8faff; }

/* ===== ۸. فرم‌ها ===== */
.form-grid { display: grid; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-label { font-size: 12px; font-weight: 800; color: #334155; }
.form-input, .form-select, .form-textarea {
  min-height: 42px;
  border-radius: var(--md-radius);
  border: 1px solid #d3dae6;
  background: #fff;
  box-shadow: var(--md-shadow-xs);
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: #a5b4fc; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #6366f1;
  box-shadow: var(--md-ring);
}

/* ===== ۹. نوار فیلتر + چیپ‌ها + ساب‌تب‌ها ===== */
.filter-toolbar {
  background: #fff;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-lg);
  padding: 14px 18px;
  box-shadow: var(--md-shadow-xs);
}
.preset-chip {
  border-radius: 20px;
  padding: 6px 14px;
  border: 1px solid #dbe1ec;
  background: #f8faff;
  font-weight: 700;
}
.preset-chip:hover { border-color: #818cf8; color: #4338ca; background: #eef2ff; transform: translateY(-1px); }
.preset-chip.active {
  background: var(--md-grad-primary);
  border-color: transparent;
  box-shadow: 0 6px 14px -8px rgba(124, 58, 237, 0.8);
}
.subtabs-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: #f4f6fb;
  border: 1px solid var(--md-border);
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 18px;
}
.subtab-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.18s ease;
}
.subtab-btn:hover { background: #fff; color: #0f172a; box-shadow: var(--md-shadow-xs); }
.subtab-btn.active {
  background: #fff;
  color: #4338ca;
  border-color: #c7d2fe;
  box-shadow: var(--md-shadow-sm);
}

/* ===== ۹ب. فرم‌های ورود اطلاعات — کارت بخش، پیش‌نمایش، دکمه ثبت ===== */
.form-section-card {
  background: #fff;
  border: 1px solid var(--md-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--md-shadow-xs);
}
.form-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-title::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: var(--md-grad-primary);
  flex-shrink: 0;
}
/* پیش‌نمایش محاسبات فاکتور: کارت گرادیانی */
#invPreviewBox {
  border-radius: 14px !important;
  border: 1px solid #c7d2fe !important;
  background: linear-gradient(180deg, #f8faff 0%, #eef2ff 100%) !important;
  box-shadow: var(--md-shadow-sm) !important;
}
/* دکمهٔ ثبت بزرگ فرم‌ها */
.btn-submit-lg {
  padding: 12px 28px !important;
  font-size: 13.5px !important;
  border-radius: 14px !important;
  min-width: 240px;
}
/* ورودی‌های form-control قدیمی با فرم‌های جدید یکدست شوند */
.form-control {
  padding: 9px 14px;
  border-radius: var(--md-radius);
  border: 1px solid #d3dae6;
  font-size: 13px;
  outline: none;
  background: #fff;
  transition: all 0.2s ease;
  color: #0f172a;
  box-shadow: var(--md-shadow-xs);
}
.form-control:focus {
  border-color: #6366f1;
  box-shadow: var(--md-ring);
}
/* کارت‌های تنظیمات */
.settings-card {
  background: #fff;
  border: 1px solid var(--md-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--md-shadow-xs);
}
.settings-card-label {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.settings-card-desc { font-size: 11px; color: #64748b; margin-bottom: 12px; line-height: 1.8; }

/* ===== ۱۰. دراپ‌زون اکسل ===== */
.dropzone-box {
  border: 2px dashed #a5b4fc;
  border-radius: var(--md-radius-lg);
  background: linear-gradient(180deg, #f8faff 0%, #eef2ff 100%);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dropzone-box:hover { border-color: #6366f1; background: #eef2ff; transform: translateY(-1px); }
.dropzone-box.dragover {
  border-color: #4f46e5;
  background: #e0e7ff;
  box-shadow: var(--md-ring);
  transform: scale(1.005);
}
.dropzone-icon { font-size: 40px; margin-bottom: 8px; }

/* ===== ۱۱. جدول‌ها — کانتینر کارت + هدر چسبان ===== */
.table-container {
  border: 1px solid var(--md-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--md-shadow-xs);
  overflow: auto;
}
.table-container table { border-collapse: separate; border-spacing: 0; width: 100%; }
.table-container thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248, 250, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--md-border);
  font-size: 11.5px;
  color: #475569;
}
.table-container tbody tr { transition: background 0.12s ease; }
.table-container tbody tr:nth-child(even) td { background: #fafbff; }
.table-container tbody tr:hover td { background: #eef2ff; }
.table-container td { font-size: 12.5px; }

/* ===== ۱۲. نشان‌ها ===== */
.badge {
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
}
.badge-primary, .badge.badge-primary { background: var(--md-grad-primary-soft); color: #4338ca; border: 1px solid #c7d2fe; }
.badge-success { box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.12); }
.badge-danger { box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12); }
.badge-warning { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.14); }
.badge-info { box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.14); }

/* ===== ۱۳. مودال‌ها — ورود نرم با انیمیشن ===== */
.modal-overlay {
  background: rgba(11, 18, 38, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.modal-card, .modal-box {
  border-radius: var(--md-radius-xl);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: var(--md-shadow-lg);
  animation: md-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes md-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header { padding-bottom: 14px; }
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.modal-close:hover { background: #fee2e2; color: #b91c1c; }

/* ===== ۱۴. دروازهٔ ورود تمام‌صفحه — مدرن شیشه‌ای ===== */
#loginGate {
  background: var(--md-grad-login) !important;
  overflow-y: auto;
  padding: 20px;
}
#loginGate::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 340px at 80% 10%, rgba(124, 58, 237, 0.35), transparent 65%),
    radial-gradient(700px 420px at 15% 85%, rgba(56, 189, 248, 0.28), transparent 65%);
}
#loginGate > div {
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.55) !important;
  padding: 36px 34px !important;
  position: relative;
  animation: md-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#loginGate > div::before {
  content: "س‌ج";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: var(--md-grad-primary);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  box-shadow: 0 12px 26px -10px rgba(124, 58, 237, 0.8);
}
#loginGate input[type="text"], #loginGate input[type="password"],
#modalLogin input[type="text"], #modalLogin input[type="password"] {
  border-radius: 12px !important;
  min-height: 44px !important;
  border: 1px solid #d3dae6 !important;
  font-size: 14px !important;
}
#loginGate input:focus, #modalLogin input:focus {
  border-color: #6366f1 !important;
  box-shadow: var(--md-ring) !important;
  outline: none;
}
#gateError, #loginError { border-radius: 10px !important; }

/* ===== ۱۵. بنر فقط‌خواندن + هشدار بالای داشبورد ===== */
#readOnlyBanner {
  border-radius: var(--md-radius) !important;
  box-shadow: var(--md-shadow-xs);
  font-weight: 700;
}

/* ===== ۱۶. نمودارها، گیج، تقویم سررسید، پایپ‌لاین ===== */
.chart-container-box {
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow-sm);
  position: relative;
  overflow: hidden;
}
.chart-container-box::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: var(--md-grad-primary);
  opacity: 0.7;
}
.chart-container-box h3 { letter-spacing: -0.2px; }
/* تول‌تیپ نمودار ستونی */
.chart-tooltip {
  border-radius: 10px !important;
  box-shadow: var(--md-shadow-md) !important;
  font-size: 11.5px !important;
  padding: 10px 14px !important;
}
/* ستون‌های SVG: گوشهٔ گردتر + سایهٔ نرم */
#svgSalesColChart rect { rx: 4px; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.12)); }
#svgSalesColChart text { font-family: var(--font-family); }
/* خطوط روند رأس: سر گرد */
#svgRasTrendChart polyline { stroke-linecap: round; stroke-linejoin: round; }
/* مرکز دونات مطالبات */
#dashDonutCenterOverlay { font-family: var(--font-family); }
#dashDonutCenterTotal { font-size: 14px !important; letter-spacing: -0.3px; }
/* ردیف‌های لژند دونات */
#dashDonutLegendContainer > div { border-radius: 8px; padding: 4px 8px !important; transition: background 0.12s ease; }
#dashDonutLegendContainer > div:hover { background: #f4f6fb; }
/* گیج سلامت: درخشش نرم + عدد بزرگ‌تر */
.health-gauge-circle svg { filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.12)); }
#dashHealthGaugePercent { font-size: 26px !important; letter-spacing: -0.5px; }
#dashHealthGaugeArc { stroke-linecap: round; transition: stroke-dasharray 0.6s ease, stroke 0.3s ease; }
/* میله‌های «در یک نگاه»: گرادیان + سر گرد */
#dashGlanceFillSales { background: linear-gradient(90deg, #4338ca, #7c3aed) !important; }
#dashGlanceFillCol { background: linear-gradient(90deg, #059669, #10b981) !important; }
/* روی موبایل: دو نمودار کنار هم، زیر هم بیایند */
@media (max-width: 960px) {
  div[style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important; }
}
.pipeline-card, .due-cal-card, .alert-card-item {
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow-xs);
}
.pipeline-card:hover, .due-cal-card:hover { box-shadow: var(--md-shadow-sm); }
.glance-bar-track { border-radius: 8px; background: #e8ecf4; }
.glance-bar-fill { border-radius: 8px; }

/* ===== ۱۷. اسکرول‌بار ظریف (روشن) ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3cad9; border-radius: 8px; border: 2px solid #eef1f7; }
::-webkit-scrollbar-thumb:hover { background: #818cf8; }
.sidebar-menu::-webkit-scrollbar-thumb { background: #334155; border: none; }

/* ===== ۱۸. فوکوس قابل مشاهده (دسترس‌پذیری) ===== */
:focus-visible { outline: 2px solid rgba(99, 102, 241, 0.75) !important; outline-offset: 2px; border-radius: 6px; }

/* ===== ۱۹. ریسپانسیو مدرن ===== */
@media (max-width: 1180px) {
  .content-body { padding: 18px 16px 32px; }
  .top-navbar { height: auto; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; }
  .omnibar-wrapper { order: 3; flex-basis: 100%; width: 100%; }
}
@media (max-width: 768px) {
  .content-body { padding: 12px 12px 28px; }
  .dash-title-section { padding: 14px; }
  .dash-title-actions { width: 100%; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .modal-card, .modal-box { width: 96%; padding: 18px !important; border-radius: 16px; }
  #loginGate > div { padding: 26px 22px !important; }
  .subtabs-bar { padding: 6px; }
  .subtab-btn { flex: 1 1 45%; text-align: center; }
}

/* ===== ۲۰. تم تیره — هم‌نشینی با لایهٔ مدرن ===== */
html[data-ras-theme="dark"] body {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(45, 212, 191, 0.08), transparent 60%),
    #070d1f;
}
html[data-ras-theme="dark"] .content-body { background: transparent; }
html[data-ras-theme="dark"] .top-navbar {
  background: rgba(9, 16, 35, 0.8);
  border-bottom: 1px solid rgba(148, 184, 255, 0.12);
}
html[data-ras-theme="dark"] .omnibar-input { background: rgba(13, 24, 48, 0.7); border-color: rgba(148, 184, 255, 0.16); }
html[data-ras-theme="dark"] .user-profile-badge {
  background: rgba(13, 24, 48, 0.7) !important;
  border-color: rgba(148, 184, 255, 0.16) !important;
}
html[data-ras-theme="dark"] .dash-title-section,
html[data-ras-theme="dark"] .filter-toolbar {
  background: linear-gradient(180deg, rgba(23, 36, 68, 0.72), rgba(13, 22, 44, 0.72));
  border-color: rgba(148, 184, 255, 0.14);
}
html[data-ras-theme="dark"] .dash-last-updated { background: rgba(8, 15, 33, 0.7); border-color: rgba(148, 184, 255, 0.16); }
html[data-ras-theme="dark"] .kpi-card-minimal::before { background: linear-gradient(90deg, #0ea5a4, #38bdf8); }
html[data-ras-theme="dark"] .kpi-min-footer { background: rgba(8, 15, 33, 0.5); }
html[data-ras-theme="dark"] .kpi-ico-indigo { background: rgba(79, 70, 229, 0.18); color: #a5b4fc; border-color: rgba(129, 140, 248, 0.4); }
html[data-ras-theme="dark"] .kpi-ico-emerald { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.4); }
html[data-ras-theme="dark"] .kpi-ico-amber { background: rgba(251, 191, 36, 0.14); color: #fcd34d; border-color: rgba(251, 191, 36, 0.4); }
html[data-ras-theme="dark"] .kpi-ico-rose { background: rgba(251, 113, 133, 0.15); color: #fda4af; border-color: rgba(251, 113, 133, 0.4); }
html[data-ras-theme="dark"] .kpi-ico-sky { background: rgba(56, 189, 248, 0.13); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.4); }
html[data-ras-theme="dark"] .kpi-ico-blue { background: rgba(59, 130, 246, 0.16); color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); }
html[data-ras-theme="dark"] .kpi-ico-orange { background: rgba(251, 146, 60, 0.14); color: #fdba74; border-color: rgba(251, 146, 60, 0.4); }
html[data-ras-theme="dark"] .kpi-ico-slate { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.35); }

/* ===== ۵ج. نشان آیکون سربرگ پنل‌ها و نمودارها ===== */
.panel-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: var(--md-shadow-xs);
}
.panel-ico-indigo { background: var(--md-grad-primary); color: #fff; box-shadow: 0 6px 14px -6px rgba(124, 58, 237, 0.7); }
.panel-ico-emerald { background: var(--md-grad-success); color: #fff; box-shadow: 0 6px 14px -6px rgba(16, 185, 129, 0.7); }
.panel-ico-amber { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 6px 14px -6px rgba(217, 119, 6, 0.7); }
.panel-ico-rose { background: var(--md-grad-danger); color: #fff; box-shadow: 0 6px 14px -6px rgba(244, 63, 94, 0.7); }
.panel-ico-sky { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff; box-shadow: 0 6px 14px -6px rgba(2, 132, 199, 0.7); }
html[data-ras-theme="dark"] .subtabs-bar { background: rgba(13, 24, 48, 0.6); border-color: rgba(148, 184, 255, 0.14); }
html[data-ras-theme="dark"] .subtab-btn { color: #9db0d4; }
html[data-ras-theme="dark"] .subtab-btn:hover, html[data-ras-theme="dark"] .subtab-btn.active {
  background: rgba(45, 212, 191, 0.12); color: #5eead4; border-color: rgba(45, 212, 191, 0.35);
}
html[data-ras-theme="dark"] .dropzone-box {
  background: rgba(13, 24, 48, 0.6);
  border-color: rgba(45, 212, 191, 0.4);
}
html[data-ras-theme="dark"] .table-container { background: rgba(8, 15, 33, 0.4); }
html[data-ras-theme="dark"] .table-container thead th { background: rgba(10, 19, 40, 0.95); }
html[data-ras-theme="dark"] .table-container tbody tr:nth-child(even) td { background: rgba(148, 184, 255, 0.03); }
html[data-ras-theme="dark"] .form-label { color: #b9c6e4; }
html[data-ras-theme="dark"] #loginGate > div { background: rgba(17, 27, 54, 0.97) !important; border-color: rgba(45, 212, 191, 0.25); }
html[data-ras-theme="dark"] .form-section-card, html[data-ras-theme="dark"] .settings-card {
  background: linear-gradient(180deg, rgba(23, 36, 68, 0.72), rgba(13, 22, 44, 0.72));
  border-color: rgba(148, 184, 255, 0.14);
}
html[data-ras-theme="dark"] .form-section-title { color: #5eead4; }
html[data-ras-theme="dark"] .settings-card-label { color: #e9f0fd; }
html[data-ras-theme="dark"] .settings-card-desc { color: #9db0d4; }
html[data-ras-theme="dark"] #invPreviewBox {
  background: rgba(13, 24, 48, 0.66) !important;
  border-color: rgba(45, 212, 191, 0.3) !important;
}

/* ===== ۲۳. جدول‌ها — سطر عملیات، پاصفحه جمع، کارت‌های ماتریس ===== */
.table-container thead th { box-shadow: 0 1px 0 var(--md-border); }
.table-container tbody tr:last-child td { border-bottom: none; }
.table-container tbody .btn { border-radius: 8px; font-weight: 800; white-space: nowrap; }
.table-container tbody .btn-outline { background: #f8faff; }
.table-container tbody .btn-outline:hover { background: #eef2ff; }
.table-container tfoot td {
  background: #eef2ff;
  font-weight: 800;
  position: sticky;
  bottom: 0;
  border-top: 2px solid var(--md-border);
  font-size: 12.5px;
}
/* کارت‌های ماتریس ۴بخشی مشتریان */
.md-matrix-card {
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--md-shadow-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-matrix-card:hover { transform: translateY(-1px); box-shadow: var(--md-shadow-sm); }
.md-matrix-q1 { background: linear-gradient(180deg, #f0fdf4, #ecfdf5); border: 1px solid #86efac; }
.md-matrix-q2 { background: linear-gradient(180deg, #fffbeb, #fefce8); border: 1px solid #fde68a; }
.md-matrix-q3 { background: linear-gradient(180deg, #eff6ff, #eef4ff); border: 1px solid #bfdbfe; }
.md-matrix-q4 { background: linear-gradient(180deg, #fef2f2, #fef2f3); border: 1px solid #fecaca; }
/* ردیف‌های ۴ آستانه سقف اعتبار */
.md-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow-xs);
}
/* مینی-KPIهای پرونده ۳۶۰ مشتری */
.md-kpi-mini {
  background: #fff;
  border: 1px solid var(--md-border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--md-shadow-xs);
}
.md-kpi-mini-green { background: linear-gradient(180deg, #f0fdf4, #ecfdf5); border-color: #bbf7d0; }

/* ===== ۲۴. مودال‌ها — تیتر، پاصفحه، سازگاری تم تیره ===== */
.modal-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; color: var(--text-main); }
.modal-footer .btn { border-radius: 10px; }
html[data-ras-theme="dark"] .table-container tbody .btn-outline { background: rgba(13, 24, 48, 0.7); border-color: rgba(148, 184, 255, 0.2); }
html[data-ras-theme="dark"] .table-container tfoot td { background: rgba(23, 36, 68, 0.95); border-top-color: rgba(148, 184, 255, 0.2); }
html[data-ras-theme="dark"] .md-matrix-q1 { background: linear-gradient(180deg, rgba(22, 101, 52, 0.25), rgba(13, 22, 44, 0.6)); border-color: rgba(52, 211, 153, 0.35); }
html[data-ras-theme="dark"] .md-matrix-q2 { background: linear-gradient(180deg, rgba(146, 64, 14, 0.25), rgba(13, 22, 44, 0.6)); border-color: rgba(251, 191, 36, 0.35); }
html[data-ras-theme="dark"] .md-matrix-q3 { background: linear-gradient(180deg, rgba(30, 64, 175, 0.28), rgba(13, 22, 44, 0.6)); border-color: rgba(59, 130, 246, 0.35); }
html[data-ras-theme="dark"] .md-matrix-q4 { background: linear-gradient(180deg, rgba(153, 27, 27, 0.28), rgba(13, 22, 44, 0.6)); border-color: rgba(251, 113, 133, 0.35); }
html[data-ras-theme="dark"] .md-tier-row, html[data-ras-theme="dark"] .md-kpi-mini {
  background: linear-gradient(180deg, rgba(23, 36, 68, 0.72), rgba(13, 22, 44, 0.72));
  border-color: rgba(148, 184, 255, 0.14);
}
html[data-ras-theme="dark"] .md-kpi-mini-green {
  background: linear-gradient(180deg, rgba(22, 101, 52, 0.3), rgba(13, 22, 44, 0.7));
  border-color: rgba(52, 211, 153, 0.35);
}
html[data-ras-theme="dark"] .modal-title { color: #e9f0fd; }

/* ===== ۲۵. هیئت‌مدیره و گزارش‌های اجرایی — کارت‌ها، کاغذ گزارش، چاپ ===== */
.md-board-kpi {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--md-shadow-xs);
  border: 1px solid var(--md-border);
  border-top: 3px solid #94a3b8;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-board-kpi:hover { transform: translateY(-1px); box-shadow: var(--md-shadow-sm); }
.md-board-blue { border-top-color: #3b82f6; }
.md-board-green { border-top-color: #22c55e; }
.md-board-red { border-top-color: #ef4444; }
.md-board-orange { border-top-color: #f97316; }
.md-board-purple { border-top-color: #a855f7; }
.md-board-panel {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--md-shadow-xs);
}
.md-board-risk { border: 1px solid #fecaca; }
.md-board-action { border: 1px solid #bbf7d0; }
.md-exec-paper {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  min-height: 480px;
  font-family: 'Vazirmatn', sans-serif;
}
html[data-ras-theme="dark"] .md-board-kpi,
html[data-ras-theme="dark"] .md-board-panel {
  background: linear-gradient(180deg, rgba(23, 36, 68, 0.72), rgba(13, 22, 44, 0.72));
  border-color: rgba(148, 184, 255, 0.14);
}
html[data-ras-theme="dark"] .md-exec-paper { background: #f8fafc; border-color: #94a3b8; }

/* ===== ۲۱. چاپ — لایهٔ مدرن نباید چاپ را خراب کند ===== */
@media print {
  body { background: #fff !important; }
  .sidebar, .top-navbar, #loginGate, #modalLogin { display: none !important; }
  .panel-card, .kpi-card-minimal, .chart-container-box, .table-container { box-shadow: none !important; animation: none !important; }
  .kpi-card-minimal::before, #loginGate::before { display: none !important; }
  .md-board-kpi, .md-board-panel { box-shadow: none !important; break-inside: avoid; }
  #executiveReportPaper { border: none !important; box-shadow: none !important; padding: 0 !important; }
}

/* ===== ۲۲. کاهش حرکت (دسترس‌پذیری) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}