*, html, body, button, input, select, textarea, span, p, h1, h2, h3, h4, h5, h6, a, table, td, th {
  font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ==========================================================================
   سامانه مهندسی تبدیل خودکار کروکی به نقشه گاز (مبحث ۱۷ نظام مهندسی)
   زبان طراحی: اپل (Apple Aesthetic / macOS Sonoma & iOS)
   ========================================================================== */

@import url('../assets/fonts/vazirmatn.css');

:root {
  --apple-bg: #f5f5f7;
  --apple-card: #ffffff;
  --apple-card-hover: #fafafa;
  --apple-text: #1d1d1f;
  --apple-secondary: #6e6e73;
  --apple-border: rgba(0, 0, 0, 0.08);
  --apple-blue: #0071e3;
  --apple-blue-hover: #0077ed;
  --apple-green: #34c759;
  --apple-header: rgba(255, 255, 255, 0.85);
  --apple-subtle: #f0f0f2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --apple-bg: #000000;
    --apple-card: #1c1c1e;
    --apple-card-hover: #2c2c2e;
    --apple-text: #f5f5f7;
    --apple-secondary: #a1a1a6;
    --apple-border: rgba(255, 255, 255, 0.12);
    --apple-blue: #2997ff;
    --apple-blue-hover: #0077ed;
    --apple-green: #30d158;
    --apple-header: rgba(28, 28, 30, 0.85);
    --apple-subtle: #2c2c2e;
  }
}

:root[data-theme="dark"] {
  --apple-bg: #000000;
  --apple-card: #1c1c1e;
  --apple-card-hover: #2c2c2e;
  --apple-text: #f5f5f7;
  --apple-secondary: #a1a1a6;
  --apple-border: rgba(255, 255, 255, 0.12);
  --apple-blue: #2997ff;
  --apple-blue-hover: #0077ed;
  --apple-green: #30d158;
  --apple-header: rgba(28, 28, 30, 0.85);
  --apple-subtle: #2c2c2e;
}

:root[data-theme="light"] {
  --apple-bg: #f5f5f7;
  --apple-card: #ffffff;
  --apple-card-hover: #fafafa;
  --apple-text: #1d1d1f;
  --apple-secondary: #6e6e73;
  --apple-border: rgba(0, 0, 0, 0.08);
  --apple-blue: #0071e3;
  --apple-blue-hover: #0077ed;
  --apple-green: #34c759;
  --apple-header: rgba(255, 255, 255, 0.85);
  --apple-subtle: #f0f0f2;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--apple-bg);
  color: var(--apple-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* فارسی خطِ پیوسته است: هر letter-spacingِ غیرصفری فاصله‌ای میان هر جفتِ
     حرفِ چسبیده می‌اندازد و زنجیرهٔ اتصال (ـا، ـه، ـی) را می‌شکند. */
  letter-spacing: 0;
  user-select: none;
}

/* تنظیمات دسکتاپ: بدون اسکرول صفحه در مانیتورها */
@media (min-width: 1024px) {
  html, body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
}

/* تنظیمات موبایل: اسکرول طبیعی، بدون پرش و رعایت حاشیه‌های امن ناچ/آیلند آیفون */
@media (max-width: 1023px) {
  html, body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* تم تیره کامل و دقیق برای تمام عناصر داشبورد */
/* هدر شیشه‌ای و متحرک اپلی در داشبورد */
header {
  background-color: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] header {
  background-color: rgba(28, 28, 30, 0.78) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] .bg-white {
  background-color: #1c1c1e !important;
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] .bg-\[\#f5f5f7\] {
  background-color: #000000 !important;
}

:root[data-theme="dark"] .bg-\[\#fafafc\] {
  background-color: #161618 !important;
}

:root[data-theme="dark"] .bg-\[\#f0f6fe\] {
  background-color: #152238 !important;
  color: #2997ff !important;
}

:root[data-theme="dark"] .border-blue-200,
:root[data-theme="dark"] .border-slate-200 {
  border-color: rgba(41, 151, 255, 0.25) !important;
}

:root[data-theme="dark"] .border-black\/\[0\.06\],
:root[data-theme="dark"] .border-black\/\[0\.04\],
:root[data-theme="dark"] .border-black\/\[0\.08\],
:root[data-theme="dark"] .border-black\/\[0\.05\] {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:root[data-theme="dark"] .text-\[\#1d1d1f\] {
  color: #f5f5f7 !important;
}

/* --------------------------------------------------------------------------
   متن ثانویه — یکسان‌سازی کنتراست.

   هر سه رنگ زیر نقش یکسانی داشتند (متن کم‌رنگِ توضیحی) ولی هرکدام کنتراستی
   زیر حد WCAG AA می‌دادند: #86868b تنها ۲٫۹ تا ۳٫۶:۱ و در ۱۰۸ جای داشبورد
   تکرار شده بود، gray-400 روی سفید ۲٫۵:۱، و دوتای دیگر روی پس‌زمینهٔ رنگی
   خودشان زیر ۴٫۵:۱ می‌افتادند. به‌جای افزودن شش‌شمارهٔ تازه، همه به متغیر
   موجودِ --apple-secondary نگاشت می‌شوند تا پالت یکدست بماند.

   انتخابگر بر پایهٔ [class*=] است و نه کلاسِ دقیق، چون Tailwind برای هر
   شفافیت یک کلاسِ جدا می‌سازد (text-[#86868b]/70) و آن کلاس، کلاسِ
   text-[#86868b] نیست؛ با انتخابگرِ ساده، نسخه‌های دارای /70 از دست
   می‌رفتند و متن روی ۲٫۳:۱ می‌ماند.

   کنتراست اندازه‌گیری‌شده (روی هر پس‌زمینه‌ای که این رنگ‌ها در سایت دارند):
     روشن #6e6e73 → سفید ۵٫۰۷ | کارت ۴٫۸۶ | bg ۴٫۶۶ | آبی ۴٫۶۶ | سبز ۴٫۸۱
     تیره  #a1a1a6 → پس‌زمینه ۸٫۱۶ | کارت ۶٫۶۱ | هاور ۵٫۴۲
   -------------------------------------------------------------------------- */
[class*="text-[#86868b]"],
.text-gray-400 {
  color: var(--apple-secondary) !important;
}

:root[data-theme="dark"] [class*="text-[#86868b]"],
:root[data-theme="dark"] .text-gray-400 {
  color: #a1a1a6 !important;
}

/* --------------------------------------------------------------------------
   رنگِ وضعیت روی پس‌زمینهٔ کم‌رنگِ خودش.

   نکتهٔ ساختاری که این قاعده‌ها را شکل می‌دهد: در این داشبورد، کلاسِ
   پس‌زمینه روی ظرف (a یا button) می‌نشیند و متنِ واقعی یک span فرزند است
   که رنگ را ارث می‌برد. بنابراین «کلاسِ رنگ» و «کلاسِ پس‌زمینه» روی یک
   عنصر نیستند و انتخابگرِ صرفاً فرزند (X .Y) هرگز آن‌ها را پیدا نمی‌کند.
   به همین دلیل هر قاعده هم شکلِ «همان عنصر» و هم شکلِ «فرزند» را دارد.

     #0071e3 روی آبی‌۵۰ = ۴٫۳۲:۱  →  #006edc = ۴٫۵۳:۱
     #059669 روی سبز‌۵۰ = ۳٫۵۸:۱  →  #04825b = ۴٫۵۸:۱
   -------------------------------------------------------------------------- */
.text-\[\#0071e3\].bg-blue-50,
.bg-blue-50 .text-\[\#0071e3\] {
  color: #006edc !important;
}

.text-emerald-600.bg-emerald-50,
.bg-emerald-50 .text-emerald-600 {
  color: #04825b !important;
}

/* هدرِ شیشه‌ای پشتش تصویرِ محوِ نقشه است، نه یک رنگِ ثابت؛ رنگ کمی تیره‌تر
   می‌شود تا در بدترین حالتِ پس‌زمینه از حد AA عبور کند. */
header .text-\[\#0071e3\] {
  color: #0069cf !important;
}

/* دکمهٔ غیرفعال. متنِ خاکستری روی #e5e5ea فقط ۴٫۰۴:۱ می‌داد.
   دکمهٔ غیرفعال عمداً کم‌رنگ است، ولی «کم‌رنگ» نباید یعنی «ناخوانا». */
[class*="text-[#86868b]"].bg-\[\#e5e5ea\],
.bg-\[\#e5e5ea\] [class*="text-[#86868b]"] {
  color: #5f5f63 !important;
}

:root[data-theme="dark"] .text-\[\#424245\] {
  color: #d1d1d6 !important;
}

:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-slate-100 {
  background-color: #2c2c2e !important;
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] .bg-blue-50 {
  background-color: #13233c !important;
  color: #2997ff !important;
}

:root[data-theme="dark"] .bg-emerald-50 {
  background-color: #0d2818 !important;
  color: #30d158 !important;
}

:root[data-theme="dark"] .bg-purple-50 {
  background-color: #2a1b38 !important;
  color: #bf5af2 !important;
}

:root[data-theme="dark"] .bg-amber-50 {
  background-color: #2e1d08 !important;
  color: #ffd60a !important;
}

:root[data-theme="dark"] details {
  background-color: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] #emptyStateOverlay {
  background-color: #141416 !important;
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] #emptyStateOverlay .bg-white {
  background-color: #242426 !important;
}

:root[data-theme="dark"] .shadow-apple {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

/* پترن شبکه خطوط شطرنجی پس‌زمینه نقشه */
.blueprint-subtle-grid {
  background-size: 20px 20px;
  background-image:
    linear-gradient(to right, #f1f3f5 1px, transparent 1px),
    linear-gradient(to bottom, #f1f3f5 1px, transparent 1px);
}

:root[data-theme="dark"] .blueprint-subtle-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* اسکرول‌بار نرم و باریک */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d1d1d6;
  border-radius: 9999px;
  border: 1px solid var(--apple-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: #a1a1a6;
}

/* مخفی‌سازی اسکرول‌بار در چیپ‌های افقی */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* جدول‌های رسمی نقشه مهندسی */
.dwg-table {
  border-collapse: collapse;
  width: 100%;
}

.dwg-table th, 
.dwg-table td {
  border: 1px solid #111;
  padding: 1.5px 3px;
  text-align: center;
  font-size: 7.5px;
  line-height: 1.25;
}

.dwg-table th {
  background-color: #f8fafc;
  font-weight: 700;
}

/* بهینه‌سازی خوانایی و تجربه کاربری در موبایل (< lg) */
@media (max-width: 1023px) {
  #compareContainer {
    touch-action: pan-y;
  }

  /* حالت نمایش اختصاصی پلان لوله در موبایل */
  .mobile-view-plan #isoCol,
  .mobile-view-plan #tablesCol {
    display: none !important;
  }
  .mobile-view-plan #planCol {
    grid-column: span 12 / span 12 !important;
    border-left: none !important;
  }
  .mobile-view-plan svg {
    max-height: 240px !important;
  }

  /* حالت نمایش اختصاصی دیاگرام ایزومتریک در موبایل */
  .mobile-view-iso #planCol,
  .mobile-view-iso #tablesCol {
    display: none !important;
  }
  .mobile-view-iso #isoCol {
    grid-column: span 12 / span 12 !important;
    border-left: none !important;
  }
  .mobile-view-iso svg {
    max-height: 240px !important;
  }

  /* حالت نمایش اختصاصی جداول متره در موبایل */
  .mobile-view-tables #planCol,
  .mobile-view-tables #isoCol {
    display: none !important;
  }
  .mobile-view-tables #tablesCol {
    grid-column: span 12 / span 12 !important;
    border-left: none !important;
    overflow-y: auto !important;
    /* جدول متره عرض زیادی دارد؛ بدون اسکرول افقی روی موبایل
       یا بریده می‌شود یا کل ستون‌ها روی هم می‌افتند. */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-view-tables .dwg-table {
    /* جلوگیری از فشرده‌شدن جدول تا عرض ستون‌ها */
    min-width: 520px;
  }
  .mobile-view-tables .dwg-table th,
  .mobile-view-tables .dwg-table td {
    /* ۸ پیکسل در موبایل عملاً خوانا نبود؛ سایز دسکتاپ
       (۷.۵ پیکسل) برای شبیه‌سازی شیت چاپی لازم است،
       اما روی صفحه باید خوانا باشد. */
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap;
  }
}

/* تنظیمات چاپ استاندارد مهندسی (Print to PDF / Paper) - همیشه شیت ۳ ستونی استاندارد */
@media print {
  body * {
    visibility: hidden !important;
  }
  #printArea, #printArea * {
    visibility: visible !important;
  }
  #printArea {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    transform: none !important;
    min-width: unset !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #blueprintBodyGrid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  #planCol {
    display: flex !important;
    grid-column: span 4 / span 4 !important;
    border-left: 2px solid black !important;
  }
  #isoCol {
    display: flex !important;
    grid-column: span 5 / span 5 !important;
    border-left: 2px solid black !important;
  }
  #tablesCol {
    display: flex !important;
    grid-column: span 3 / span 3 !important;
    font-size: 7px !important;
  }
}

/* ==========================================================================
   سایدبار کنسول: فاصله محتوا فقط هنگام باز بودن سایدبار (جلوی جای خالی را می‌گیرد)
   ========================================================================== */
.dash-shift {
  transition: none;
}

/* فاصله سایدبار: padding روی body — با mx-auto تداخل ندارد و وسط‌چینی می‌ماند */
@media (min-width: 1024px) {
  body.sidebar-open {
    padding-right: 20rem;
    transition: padding-right 0.3s ease;
  }
}

/* دکمه سوییچ سایدبار: استایل یکدست با آیکون‌های هدر */
#toggleConsoleSidebarBtn {
  flex-shrink: 0;
}

/* لودینگ واقعی تبدیل: نوار نامعین سرزنده (بدون درصد ساختگی) */
.iso-progress-indeterminate {
  background: linear-gradient(90deg, rgba(0, 113, 227, 0.12) 0%, #0071e3 35%, #2997ff 50%, #0071e3 65%, rgba(0, 113, 227, 0.12) 100%);
  background-size: 300% 100%;
  animation: isoIndeterminate 1.8s ease-in-out infinite;
}

@keyframes isoIndeterminate {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .iso-progress-indeterminate { animation: none; background: #0071e3; }
}

/* ==========================================================================
   حلقهٔ فوکوس صفحه‌کلید
   --------------------------------------------------------------------------
   پیش از این، هیچ قاعدهٔ focus-visible‌ای در خانوادهٔ داشبورد نبود. مرورگرها
   برای :focus حلقهٔ پیش‌فرض می‌کشند، اما کلاس‌هایی مثل outline-none آن را
   حذف می‌کردند؛ نتیجه این بود که کاربری که با Tab کار می‌کرد هیچ نشانه‌ای
   از اینکه کجاست نمی‌دید.

   این حلقه عمداً دو لایه دارد: یک حاشیهٔ روشن برای جدا شدن از هر پس‌زمینه‌ای
   (سفید یا تیره) و یک حاشیهٔ تیره‌تر بیرون آن. به این ترتیب روی کارت سفید
   هم دیده می‌شود و روی دکمهٔ آبی پررنگ هم گم نمی‌شود.
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--apple-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   ابزارهای tracking تیلویند روی متنِ فارسی.

   tracking-tight (-0.025em) در چند جای داشبورد روی نامِ برند «آیزو» و روی
   تیترهای فارسی می‌نشیند؛ اینها غیرصفرند و اتصالِ حروف را می‌شکنند.
   صفرِ ساده کافی است، ولی برای اینکه قاعده در برابرِ اسپکِ غیرعادیِ تیلویند
   هم پابرجا بماند، وزنش از دو منبع می‌آید: با !important تا بر کلاسِ
   تیلویند غلبه کند، و با انتخابگرِ [class*=] تا نسخه‌های دارای پسوندِ
   پاسخ‌گرا (sm:، lg:، dark:) را هم بگیرد.

   عمداً همهٔ شش مقدارِ tracking در یک قاعدهٔ صفر شده‌اند، و این تصمیم آگاهانه
   است: در این داشبورد هیچ متنِ لاتینِ تمام‌حروفِ بزرگِ ردیابی‌شده وجود ندارد،
   پس هیچ موردی نیست که فاصلهٔ حروفش بخشی از خوانایی باشد. اگر روزی چنین
   برچسبی اضافه شد باید این قاعده استثنا بگیرد، نه اینکه برعکس.
   -------------------------------------------------------------------------- */
.tracking-tight,
.tracking-tighter,
.tracking-wide,
.tracking-wider,
.tracking-widest,
[class*="tracking-tight"],
[class*="tracking-tighter"],
[class*="tracking-wide"],
[class*="tracking-wider"],
[class*="tracking-widest"] {
  letter-spacing: 0 !important;
}

:root[data-theme="dark"] :focus-visible {
  outline-color: #64b5ff;
}

/* حلقهٔ فوکوس نباید داخل شیتِ چاپ یا PDF جای بیفتد — جای آن یک کادر سیاه
   چاپ می‌شد و متنِ زیرین را می‌پوشاند. */
@media print {
  :focus-visible {
    outline: none;
  }
}

/* --------------------------------------------------------------------------
   جبران ابزارهایی که Tailwind v3 در مقیاس خود ندارد و CDN بی‌صدا حذفشان می‌کند.
   theme.extend.boxShadow را این نسخه از CDN نادیده می‌گیرد، پس سایه‌ها را
   مستقیم تعریف می‌کنیم. مقادیر با shadow-sm استاندارد یکسان‌اند.
   -------------------------------------------------------------------------- */
.shadow-xs   { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-2xs { box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.04); }

.dark .shadow-xs   { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.35); }
.dark .shadow-2xs { box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.30); }