/* =====================================================================
   پله ۹ — سیستم طراحی یکپارچه‌ی پله (سایت عمومی + پرتال + پنل مدیر)
   ---------------------------------------------------------------------
   • فقط یک رنگ برند: همه‌ی رنگ‌ها از یک «فام» (hue) ساخته می‌شن و فقط
     روشنایی‌شون فرق داره (۵۰ = خیلی روشن … ۹۵۰ = خیلی تیره).
     برای عوض کردن رنگ کل سایت فقط --pelle-h (و در صورت نیاز --pelle-s) رو عوض کن.
   • خاکستری‌ها هم از همون فام با اشباع خیلی کم ساخته می‌شن تا همه‌چیز هم‌خانواده باشه.
   • سطح‌های شیشه‌ای (سبک اپل): پس‌زمینه‌ی نیمه‌شفاف + blur + حاشیه‌ی روشن.
   • این فایل بعد از style.css و public-theme.css لود می‌شه و فقط ظاهر رو عوض می‌کنه.
   ===================================================================== */
/* :root:root = اولویت بالاتر از :root فایل‌های دیگه، حتی اگه بعد از این فایل لود بشن */
:root:root {
  /* ---- فام و اشباع برند ---- */
  --pelle-h: 189;                 /* پله ۱۲: آبی فیروزه‌ای (قبلاً سبز تیره ۱۶۸) */
  --pelle-s: 72%;
  --pelle-s-soft: 14%;            /* اشباع خاکستری‌ها */

  /* ---- رنگ مکمل: نارنجی (فقط برای دکمه‌های اصلی، برچسب‌ها و نقاط تأکید) ---- */
  --acc-h: 26;
  --acc-s: 92%;
  --a-50:  hsl(var(--acc-h) var(--acc-s) 97%);
  --a-100: hsl(var(--acc-h) var(--acc-s) 92%);
  --a-200: hsl(var(--acc-h) var(--acc-s) 83%);
  --a-400: hsl(var(--acc-h) var(--acc-s) 62%);
  --a-500: hsl(var(--acc-h) var(--acc-s) 53%);
  --a-600: hsl(calc(var(--acc-h) - 2) var(--acc-s) 46%);
  --a-700: hsl(calc(var(--acc-h) - 4) 85% 38%);
  --ui-accent: var(--a-500);
  --ui-accent-hover: var(--a-600);

  /* ---- طیف روشنایی (ضریب روشنی/تیرگی) ---- */
  --l-50: 97%;  --l-100: 93%; --l-200: 86%; --l-300: 74%; --l-400: 58%;
  --l-500: 40%; --l-600: 32%; --l-700: 25%; --l-800: 18%; --l-900: 12%; --l-950: 7%;

  --p-50:  hsl(var(--pelle-h) var(--pelle-s) var(--l-50));
  --p-100: hsl(var(--pelle-h) var(--pelle-s) var(--l-100));
  --p-200: hsl(var(--pelle-h) var(--pelle-s) var(--l-200));
  --p-300: hsl(var(--pelle-h) var(--pelle-s) var(--l-300));
  --p-400: hsl(var(--pelle-h) var(--pelle-s) var(--l-400));
  --p-500: hsl(var(--pelle-h) var(--pelle-s) var(--l-500));
  --p-600: hsl(var(--pelle-h) var(--pelle-s) var(--l-600));
  --p-700: hsl(var(--pelle-h) var(--pelle-s) var(--l-700));
  --p-800: hsl(var(--pelle-h) var(--pelle-s) var(--l-800));
  --p-900: hsl(var(--pelle-h) var(--pelle-s) var(--l-900));
  --p-950: hsl(var(--pelle-h) var(--pelle-s) var(--l-950));

  --n-0:   #ffffff;
  --n-50:  hsl(var(--pelle-h) var(--pelle-s-soft) 98%);
  --n-100: hsl(var(--pelle-h) var(--pelle-s-soft) 95%);
  --n-200: hsl(var(--pelle-h) var(--pelle-s-soft) 89%);
  --n-400: hsl(var(--pelle-h) var(--pelle-s-soft) 62%);
  --n-600: hsl(var(--pelle-h) var(--pelle-s-soft) 40%);
  --n-800: hsl(var(--pelle-h) var(--pelle-s-soft) 20%);
  --n-900: hsl(var(--pelle-h) var(--pelle-s-soft) 12%);

  /* ---- نقش‌ها ---- */
  --ui-bg: var(--n-50);
  --ui-text: var(--n-900);
  --ui-muted: var(--n-600);
  --ui-line: hsl(var(--pelle-h) var(--pelle-s-soft) 88% / .9);
  --ui-primary: var(--p-600);
  --ui-primary-hover: var(--p-700);
  --ui-primary-ink: #ffffff;
  --ui-soft: var(--p-50);
  --ui-danger: hsl(4 58% 42%);    /* تنها رنگ غیربرند: فقط برای خطا و خروج */

  /* ---- شیشه ---- */
  --glass-bg: hsl(0 0% 100% / .62);
  --glass-bg-strong: hsl(0 0% 100% / .82);
  --glass-bg-dark: hsl(var(--pelle-h) var(--pelle-s) var(--l-900) / .55);
  --glass-blur: 18px;
  --glass-saturate: 170%;
  --glass-border: hsl(0 0% 100% / .65);
  --glass-shadow: 0 1px 0 hsl(0 0% 100% / .7) inset, 0 10px 30px hsl(var(--pelle-h) 30% 20% / .08);

  /* ---- اندازه‌ها ---- */
  --ui-radius-sm: 10px;
  --ui-radius: 16px;
  --ui-radius-lg: 24px;
  --ui-shadow-sm: 0 1px 2px hsl(var(--pelle-h) 30% 15% / .06), 0 2px 8px hsl(var(--pelle-h) 30% 15% / .05);
  --ui-shadow: 0 12px 32px hsl(var(--pelle-h) 30% 15% / .10);
  --ui-ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- نگاشت متغیرهای قدیمی به طیف جدید (همه‌ی صفحه‌ها خودکار هم‌رنگ می‌شن) ---- */
  --color-bg: var(--ui-bg);
  --color-primary: var(--p-600);
  --color-primary-light: var(--p-500);
  --color-primary-dark: var(--p-800);
  --color-accent-gold: var(--p-400);
  --color-text: var(--ui-text);
  --color-muted: var(--ui-muted);
  --color-border: var(--n-200);
  --color-badge-bg: var(--p-100);
  --brand-green: var(--p-700);
  --brand-green-dark: var(--p-900);
  --brand-green-light: var(--p-600);
  --brand-cream: var(--p-50);
  --brand-gold: var(--p-600);
  --tl-ink: var(--n-900);
  --tl-muted: var(--n-600);
  --tl-line: var(--n-200);
  --tl-soft: var(--p-50);
  --tl-green: var(--p-600);
  --tl-green-2: var(--p-300);
  --tl-gold: var(--p-500);
  --tl-hero-a: var(--p-900);
  --tl-hero-b: var(--p-700);

  /* رزومه‌ساز و بقیه‌ی ماژول‌ها */
  --rb-primary: var(--p-600);
  --rb-primary-soft: var(--p-100);
  --rb-ink: var(--n-900);
  --rb-muted: var(--n-600);
  --rb-line: var(--n-200);
  --rb-soft: var(--p-50);
  --hm-green: var(--p-600);
  --hm-ink: var(--n-900);

  /* پرتال: دکمه‌های ابزار تک‌رنگ (به‌جای ۸ رنگ مختلف) */
  --pill-shadow: var(--ui-shadow-sm);
  --pill-shadow-hover: var(--ui-shadow);
  --pill-on-ring: 0 0 0 2px var(--p-600);
  --pill-badge-bg: var(--ui-danger);
}

/* ---------------------------------------------------------------- پایه */
body {
  background:
    radial-gradient(1200px 600px at 100% -10%, hsl(var(--pelle-h) var(--pelle-s) 90% / .55), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, hsl(var(--pelle-h) var(--pelle-s) 92% / .45), transparent 60%),
    var(--ui-bg);
  background-attachment: fixed;
  color: var(--ui-text);
}
a { color: var(--p-600); }
a:hover { color: var(--p-800); }
::selection { background: var(--p-200); }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ---------------------------------------------------------------- سایت عمومی: ناوبری شیشه‌ای */
.site-navbar {
  background: hsl(0 0% 100% / .72) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--ui-line) !important;
  padding: 10px 0 !important;
}
.site-navbar .nav-link { color: var(--n-800) !important; border-radius: 999px; transition: background .2s var(--ui-ease); }
.site-navbar .nav-link:hover { background: var(--p-50); }
.site-navbar .nav-link.active { color: var(--p-700) !important; background: var(--p-100); }
.site-navbar .dropdown-menu { border: 1px solid var(--glass-border); border-radius: var(--ui-radius);
  background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--ui-shadow); padding: 6px; }
.site-navbar .dropdown-item { border-radius: var(--ui-radius-sm); }
.site-navbar .dropdown-item:hover, .site-navbar .dropdown-item.active { background: var(--p-100); color: var(--p-800); }
.site-navbar .nav-exchange { color: var(--p-700) !important; }

/* دکمه‌ها */
.btn-brand, .site-hero .btn-brand {
  background: var(--ui-accent) !important; color: #fff !important; border: 0; border-radius: 999px !important;
  box-shadow: 0 6px 18px hsl(var(--acc-h) var(--acc-s) 40% / .3); transition: transform .2s var(--ui-ease), background .2s;
}
.btn-brand:hover { background: var(--ui-accent-hover) !important; transform: translateY(-1px); }
.site-navbar .btn, .site-navbar .btn-sm { border-radius: 999px !important; }
.site-navbar .btn[style*="brand-green"] { background: var(--ui-accent) !important; }
.site-navbar .btn[style*="brand-green"]:hover { background: var(--ui-accent-hover) !important; }
.btn-outline-secondary { border-color: var(--n-200); color: var(--n-800); }
.btn-outline-secondary:hover { background: var(--p-50); border-color: var(--p-300); color: var(--p-800); }

/* بخش‌ها و کارت‌ها */
.feature-card, .hm-card, .tl-tile, .tl-box {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--ui-shadow-sm);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.tl-tile:hover, .hm-card:hover { box-shadow: var(--ui-shadow) !important; }
.stats-strip { background: transparent; }
.cta-band { background: linear-gradient(135deg, var(--p-800), var(--p-600)) !important; border-radius: var(--ui-radius-lg); }
.site-footer { background: var(--p-950) !important; }
.site-footer a { color: hsl(var(--pelle-h) 20% 85%); }
.site-footer a:hover { color: #fff; }
.tl-hero { background: linear-gradient(135deg, var(--p-900), var(--p-700)) !important; }
.tl-btn.primary { background: var(--p-600) !important; border-color: var(--p-600) !important; }
.eyebrow, .hm-kicker { color: var(--a-600) !important; }

/* وضعیت‌ها (همه از همون فام) */
.ds-status.live, .da-pill.live, .sh-pill.on, .fc-pill.ok { color: var(--p-700) !important; background: var(--p-100) !important; }
.ds-status.preparing, .da-pill.preparing, .fc-pill.soon { color: var(--p-800) !important; background: var(--p-200) !important; }
.ds-status.planned { color: var(--n-600) !important; background: var(--n-100) !important; }

/* ---------------------------------------------------------------- پرتال و پنل مدیر */
.sidebar {
  background: linear-gradient(180deg, var(--p-800), var(--p-900)) !important;
}
.topbar-bar, .card, .sec-card, .sh-card, .da-card {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--ui-shadow-sm);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--ui-radius) !important;
}
/* دکمه‌های ابزار پرتال: شیشه‌ای و تک‌رنگ؛ صفحه‌ی فعلی پررنگ */
.pn-pills .pn-pill {
  background: var(--glass-bg-strong) !important; color: var(--p-800) !important; text-shadow: none !important;
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.pn-pills .pn-pill:hover { background: var(--p-50) !important; filter: none !important; }
.pn-pills .pn-pill.is-on { background: var(--p-600) !important; color: #fff !important; border-color: var(--p-600); }
.pn-pill .ti { font-size: var(--pill-icon-size, 17px); }
.dot-badge { background: var(--ui-accent) !important; }
.fly-ic .ti { font-size: 19px; opacity: .92; }

/* موبایل: اسم کوتاه برند تا لوگو و دکمه‌ی منو در یک ردیف بمونن */
@media (max-width: 575.98px) {
  .site-navbar .brand-full { display: none !important; }
  .site-navbar .brand-short { display: inline !important; }
  .site-navbar .container { flex-wrap: nowrap; }
  .site-navbar .navbar-collapse { flex-basis: 100%; }
  .site-navbar > .container { flex-wrap: wrap; }
}

/* دسترس‌پذیری: کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* مرورگرهایی که blur ندارن: سطح سفید مات */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .site-navbar, .feature-card, .hm-card, .tl-tile, .tl-box, .card, .topbar-bar, .pn-pill { background: #fff !important; }
}