/* =============================================================
   فونت وزیرمتن — روی خودِ سرویس میزبانی می‌شود، نه CDN بیرونی،
   تا در شبکه‌های داخلی و بدون دسترسی به اینترنت جهانی هم بارگذاری شود.
   فونت متغیر است: یک فایل، همه وزن‌ها از ۱۰۰ تا ۹۰۰.
   مجوز SIL OFL — متن مجوز در assets/fonts/OFL.txt
   ============================================================= */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Variable.woff2') format('woff2-variations'),
       url('../fonts/Vazirmatn-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   پنل کنترل پروژه — شیوه‌نامه اصلی
   راست‌چین، فونت فارسی، طراحی اداری و آرام.
   ============================================================= */

:root {
  /* خنثای گرم، نه سرد: نشان سازمان مسی است و زمینه آبی‌خاکستری با آن
     ناسازگار بود. همه سطح‌ها و مرزها یک درجه به سمت گرمی رفتند. */
  --c-bg:        #f7f6f4;
  --c-surface:   #ffffff;
  --c-surface-2: #fbfaf9;
  --c-border:    #e9e5e0;
  --c-border-2:  #d8d2ca;

  --c-text:      #1a1714;
  --c-text-2:    #6b6560;
  --c-text-3:    #736c64;   /* روی سفید ۵٫۱۷ — متن کم‌رنگ هم باید خوانا بماند */

  /* رنگ اصلی پنل: سبزآبیِ ملایم — نه نئون، نه تیره‌وتار. هر مقدار با
     ماشین‌حساب کنتراستِ WCAG روی سطح‌های واقعیِ پنل (سفید و زمینه‌ی صفحه)
     سنجیده شده، نه فقط چشمی (npm run contrast). سازمانی که رنگ خودش را
     می‌خواهد همین چهار متغیر را عوض کند و دوباره contrast را بزند. */
  --c-primary:   #1c7a89;   /* متن سفید رویش: ۵٫۰۱ */
  --c-primary-d: #12606c;   /* لینک روی کارت سفید: ۷٫۲۰ */
  --c-primary-l: #e3f1f2;
  --c-accent:    #237e8a;   /* نوار پیشرفت — روی مسیرِ خاکستری: ۴٫۱۹ */

  /* دو رنگِ مکملِ تازه، فقط برای تنوعِ کاشی‌های آماری (KPI) — معنای
     وضعیت (سبز=خوب/زرد=هشدار/قرمز=بحرانی) را عوض نمی‌کنند، چون آن سه
     همچنان فقط برای نشان‌ها/گانت به‌کار می‌روند. */
  /* رنگِ برند خودش دیگر تکرنگِ گرم نیست (سبزآبی شد)، پس رنگِ تنوعِ
     چهارم دیگر «teal» معنا ندارد — یک آبیِ روشن جایگزینش شد که هم از
     برند هم از بنفش فاصله‌ی فامیِ کافی دارد. */
  --c-blue:      #33529c;   /* متن سفید رویش: ۷٫۴۳ */
  --c-blue-d:    #263f78;   /* روی کارت سفید */
  --c-blue-l:    #eaeef8;
  --c-purple:    #6b3fa0;   /* متن سفید رویش: ۷٫۳۸ */
  --c-purple-d:  #583384;   /* روی کارت سفید: ۹٫۴۵ */
  --c-purple-l:  #f1eaf8;

  --c-green:     #0a7a46;   /* یک پله زنده‌تر از قبل؛ روی زمینه‌ی سبز: ۴٫۷۷ */
  --c-green-bg:  #e6f4ec;
  /* هشدار زرد عمداً به سمت طلایی برده شد (فام ۴۸° در برابر ۲۰° برند)
     تا با نارنجی برند اشتباه گرفته نشود. */
  --c-yellow:    #8a6a00;   /* زنده‌تر از قبل؛ روی زمینه‌ی زرد: ۴٫۶۷ */
  --c-yellow-bg: #fcf6da;
  --c-red:       #c62a20;   /* زنده‌تر از قبل؛ روی زمینه‌ی قرمز: ۴٫۸۱ */
  --c-red-bg:    #fbeae9;
  --c-gray:      #5f6b79;
  --c-gray-bg:   #eef1f4;

  /* متریال: شعاعِ کوچک (۴px کارت‌ها طبق مشخصاتِ کلاسیکِ متریال)،
     و «ارتفاع» به‌جای مرز — هرچه عنصر مهم‌تر/شناورتر، تراز بالاتر. */
  --radius:      4px;
  --radius-sm:   4px;
  --el-1:  0 1px 2px 0 rgba(26,23,20,.20), 0 1px 3px 1px rgba(26,23,20,.10);
  --el-2:  0 1px 2px 0 rgba(26,23,20,.24), 0 2px 6px 2px rgba(26,23,20,.12);
  --el-3:  0 4px 8px 3px rgba(26,23,20,.14), 0 1px 3px 0 rgba(26,23,20,.24);
  --el-4:  0 6px 10px 4px rgba(26,23,20,.14), 0 2px 3px 0 rgba(26,23,20,.28);
  --shadow:      var(--el-1);
  --shadow-lg:   var(--el-4);

  /* عرض ستون ناوبری، و عرضش وقتی جمع شده باشد */
  --side-w:            232px;
  --side-w-collapsed:  64px;
  /* ارتفاع نوار بالا در موبایل — ثابت، چون کشو دقیقاً زیرش می‌نشیند */
  --topbar-h:          55px;

  --font-sans:   'Vazirmatn', 'IRANSans', 'IRANYekan', Tahoma, 'Segoe UI', sans-serif;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    800;
}

* { box-sizing: border-box; }

/* قواعد display در کلاس‌های زیر (مثل .btn) بر [hidden] پیش‌فرض مرورگر غلبه
   می‌کنند؛ بدون این خط، عنصرهای مخفی‌شده با el.hidden = true دیده می‌شوند. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg);
  direction: rtl;
}

body.is-modal-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5rem;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
}
h1 { font-size: 1.55rem; font-weight: var(--fw-black); }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
strong, b, th { font-weight: var(--fw-bold); }
p  { margin: 0 0 .6rem; }

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

/* ------------------------------ منوی کناری ------------------------------ */
/*
 * ناوبری ستونی در کنار صفحه است، نه نواری در بالای آن: با ده آیتم، نوار
 * افقی می‌شکند و ستون فقط یک سطر دیگر می‌گیرد.
 *
 * همه‌جا از ویژگی‌های منطقی (inset-inline-start، border-inline-end) استفاده
 * شده، نه right/left خام؛ پس ستون در فارسی سمت راست و در چیدمان
 * چپ‌به‌راست سمت چپ می‌نشیند، بی‌آنکه چیزی بازنویسی شود.
 */

.side {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
  width: var(--side-w);
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, var(--c-primary) 0%, var(--c-primary-d) 100%);
  border-inline-end: 0;
  box-shadow: var(--el-3);
}
.is-side-collapsed .side { width: var(--side-w-collapsed); }

.side__brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem .875rem; color: inherit;
  border-bottom: 1px solid var(--c-border);
}
.side__brand:hover { text-decoration: none; }
.side__logo { height: 34px; width: auto; flex: none; display: block; }
.side__mark { height: 32px; width: 32px; flex: none; display: none; }
/* آرم روی زمینه‌ی رنگیِ ستون کناری باید سفید شود؛ همان تصویرِ رنگی
   می‌ماند، فقط با فیلتر به سفید بدل می‌شود — بدون آپلودِ فایلِ دوم و
   بدون دست‌زدن به HTML/JS. برخلافِ topbar (که زمینه‌اش سفید است) این
   فیلتر فقط داخلِ .side اعمال می‌شود. */
.side .side__logo, .side .side__mark { filter: brightness(0) invert(1); }
.side__brandtext { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.side__brandtext strong { font-size: .9rem; white-space: nowrap; }
/* روی زمینه‌ی رنگی، متن و آیکن‌ها سفید/نیمه‌شفاف می‌شوند */
.side { color: rgba(255,255,255,.92); }
.side__brandtext strong { color: #fff; }
.side__brandtext small {
  color: rgba(255,255,255,.6); font-size: .67rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.side__nav { flex: 1 1 auto; overflow-y: auto; padding: .75rem .5rem; }
.side__grouplabel {
  font-size: .66rem; font-weight: 700; color: rgba(255,255,255,.55);
  padding: .75rem .625rem .3rem;
}
.side__grouplabel:first-child { padding-top: .125rem; }
.side__link {
  position: relative;
  display: flex; align-items: center; gap: .625rem;
  padding: .55rem .625rem; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.78); font-size: .875rem; font-weight: var(--fw-medium);
  white-space: nowrap;
}
.side__link:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
/* آیتمِ فعال: قرصِ سفیدِ کامل با متنِ رنگی — سبکِ «نشانگرِ انتخاب»
   در نوار کناریِ متریال۳، نه یک تُن کم‌رنگ از همان رنگِ زمینه. */
.side__link.is-active {
  background: #fff; color: var(--c-primary-d); font-weight: 700;
  border-radius: 999px;
}

.side__icon { display: inline-flex; flex: none; }

.side__foot { border-top: 1px solid rgba(255,255,255,.16); padding: .5rem; }
.side__user { width: 100%; text-align: start; }
.side__collapse {
  display: flex; align-items: center; gap: .625rem; width: 100%;
  margin-top: .25rem; padding: .5rem .625rem;
  background: none; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: .8rem; color: rgba(255,255,255,.7); text-align: start; cursor: pointer;
}
.side__collapse:hover { background: rgba(255,255,255,.1); color: #fff; }
.side__collapse .side__icon svg { transform: scaleX(-1); }
.is-side-collapsed .side__collapse .side__icon svg { transform: none; }

/* حالت جمع‌شده: فقط آیکون‌ها. نام هر آیتم در title می‌ماند. */
.is-side-collapsed .side__label,
.is-side-collapsed .side__brandtext,
.is-side-collapsed .user-btn__meta,
.is-side-collapsed .side__grouplabel { display: none; }
.is-side-collapsed .side__logo { display: none; }
.is-side-collapsed .side__mark { display: block; }
.is-side-collapsed .side__brand,
.is-side-collapsed .side__link,
.is-side-collapsed .side__user,
.is-side-collapsed .side__collapse { justify-content: center; padding-inline: .5rem; }

/* ------------------------------ نوار بالا (فقط موبایل) ------------------------------ */

.topbar { display: none; }
.topbar__inner {
  display: flex; align-items: center; gap: .75rem;
  height: var(--topbar-h); padding: 0 .875rem;
}
.topbar__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text-2); cursor: pointer;
}
.topbar__burger:hover { background: var(--c-surface-2); }
.topbar__brand { display: flex; align-items: center; gap: .5rem; color: inherit; font-size: .9rem; }
.topbar__brand:hover { text-decoration: none; }
.topbar__brand .side__mark { display: block; height: 28px; width: 28px; }

.side-overlay { display: none; }

.user-wrap { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: .3rem .5rem; cursor: pointer; font: inherit; color: inherit;
}
.user-btn:hover { background: rgba(255,255,255,.1); border-color: transparent; }
.user-btn__avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--c-primary-l); color: var(--c-primary-d); font-weight: 700;
}
.user-btn__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.user-btn__meta strong { font-size: .85rem; }
.user-btn__meta small { font-size: .68rem; color: rgba(255,255,255,.62); }

.user-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
  min-width: 190px; padding: .3rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60;
  /* منو داخل ستون تیره است؛ بدون این، رنگ سفیدِ .side به گزینه‌ها ارث می‌رسد. */
  color: var(--c-text);
}
.user-menu__item {
  display: block; width: 100%; text-align: start;
  padding: .5rem .7rem; border: 0; border-radius: var(--radius-sm);
  background: none; font: inherit; color: inherit; cursor: pointer;
}
.user-menu__item:hover { background: var(--c-surface-2); }
.user-menu__item--danger { color: var(--c-red); }
/* دکمه کاربر حالا پایین ستون است، پس منو باید رو به بالا باز شود. */
.user-menu--up { top: auto; bottom: calc(100% + 6px); }

/* ------------------------------ چیدمان ------------------------------ */

/*
 * جای ستون با padding خودِ body باز می‌شود (ستون position: fixed است تا
 * تمام ارتفاع را بگیرد و در موبایل به کشو تبدیل شود).
 *
 * این padding عمداً انیمیشن ندارد: کلاسِ has-side در خود HTML است ولی
 * محتوای صفحه پیش از ساخته‌شدن ستون رسم می‌شود؛ هر انیمیشنی این‌جا یعنی
 * پریدنِ محتوا در هر بار باز شدن صفحه.
 */
body.has-side { padding-inline-start: var(--side-w); }
html.is-side-collapsed body.has-side { padding-inline-start: var(--side-w-collapsed); }

.page { max-width: 1440px; margin: 0 auto; padding: 2rem 2rem 3rem; }

.page__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.page__title { margin: 0; font-weight: var(--fw-black); }
.page__sub { color: var(--c-text-2); font-size: .82rem; margin: .25rem 0 0; }
.page__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.card {
  background: var(--c-surface);
  border: 0;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  box-shadow: var(--el-1);
  transition: box-shadow .2s ease;
}
.card.is-editing { box-shadow: var(--el-2); outline: 2px solid var(--c-primary); outline-offset: -2px; }
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1.25rem; border-bottom: 1px solid #f0ede9; flex-wrap: wrap;
}
/* دکمه‌های ویرایش/ذخیره در سرِ کارت */
.card__actions { display: inline-flex; gap: .4rem; margin-inline-start: auto; }
.card__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .98rem; font-weight: var(--fw-bold); }
.card__title-icon { display: inline-flex; color: var(--c-primary); }
.card__body { padding: 1rem 1.25rem 1.25rem; }
.card__note { color: var(--c-text-3); font-size: .78rem; margin: 0 0 .75rem; }

/* کارت‌های برنامه/تفاهم‌نامه در programs.html — کارت معمولی، ولی کلیک‌پذیر */
.proggroup__title { font-size: 1.02rem; font-weight: var(--fw-bold); margin: 1.25rem 0 .6rem; }
.proggroup__title:first-child { margin-top: 0; }
.proggrid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.progcard { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.progcard:hover, .progcard:focus-visible { box-shadow: var(--el-2); transform: translateY(-1px); }
.progcard__title { font-weight: var(--fw-bold); margin-bottom: .6rem; }
/* کارتی که خودش لینک نیست (سوییچ فعال/غیرفعال کنارش است) — فقط عنوانش لینک است */
.progcard--static:hover, .progcard--static:focus-within { box-shadow: var(--el-1); transform: none; }
.progcard__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.progcard__head .progcard__title { margin-bottom: 0; color: var(--c-primary); text-decoration: none; }
.progcard__head .progcard__title:hover { text-decoration: underline; }
.progcard__head .checkbox { flex-shrink: 0; font-size: .78rem; color: var(--c-text-3); }

/* ردیفِ جدولِ قابل‌بازشدن — جزئیاتش زیرِ خودش باز می‌شود */
tr.is-clickable { cursor: pointer; }
tr.is-clickable:hover { background: var(--c-surface-2); }
.county-row__chevron { display: inline-flex; margin-inline-end: .4rem; color: var(--c-text-3); transition: transform .15s ease; }
.county-row__chevron.is-open { transform: rotate(90deg); }
tr.is-expanded-panel > td { padding: 0 .85rem .85rem; background: var(--c-surface-2); }
tr.is-expanded-panel .table-wrap { margin-top: .3rem; }
.progcard__stats { display: flex; gap: 1rem; flex-wrap: wrap; }
.progcard__stat { display: flex; flex-direction: column; gap: .1rem; }
.progcard__stat strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.progcard__stat span { font-size: .72rem; color: var(--c-text-3); }

.grid { display: grid; gap: .875rem; }
/* min() لازم است: minmax با عددِ ثابت، ستون را حتی وقتی جا ندارد به همان
   عرض مجبور می‌کند و روی موبایل از کارت بیرون می‌زند. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* ------------------------------ فرم ------------------------------ */

.form-grid { display: grid; gap: .85rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.form-grid--1 { grid-template-columns: 1fr; }

.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field__label { font-size: .8rem; color: var(--c-text-2); font-weight: var(--fw-bold); }
.field__hint { font-size: .72rem; color: var(--c-text-3); }

/*
 * فیلدی که منتظر تیکِ خودش است.
 *
 * تنها نشانه‌اش نباید «خاکستری بودن ورودی» باشد: در فرمی که ده فیلد دارد،
 * خاکستری با «فعلاً چیزی ندارد» اشتباه گرفته می‌شود. عنوان هم کم‌رنگ
 * می‌شود تا کل فیلد یک‌جا «هنوز نه» بخواند، و راهنمایش می‌گوید کدام تیک.
 */
/* ردیفِ سرفصلِ غیرفعال: هست ولی دیگر جاری نیست. */
/*
 * ناحیه رها کردن فایل.
 *
 * بزرگ و بی‌ابهام: تنها کاری که کاربر در این پنجره دارد همین است، پس
 * نباید دنبال یک دکمه کوچک بگردد.
 */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.8rem 1.2rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--c-border); border-radius: var(--radius);
  background: var(--c-surface-2); color: var(--c-text-2);
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.is-over {
  border-color: var(--c-primary); background: var(--c-primary-l); color: var(--c-primary-d);
}
.dropzone__title { font-weight: var(--fw-bold); margin: 0; }
.dropzone__hint { font-size: .78rem; color: var(--c-text-3); margin: 0; }

.table tr.is-muted td { color: var(--c-text-3); }
/* سهمیه دارد ولی عقدقرارداد صفر یا کم است — دقیقاً «جای خالی»ای که گزارش عملکرد باید نشان بدهد */
.table tr.is-warn { background: var(--c-yellow-bg); }
.table tr.is-warn td { color: var(--c-yellow); }

.field--locked .field__label { color: var(--c-text-3); }
.field--locked .field__hint { color: var(--c-text-3); font-style: italic; }

/*
 * نقطه وضعیت کنار نام فاز — همان رنگ‌های گانت.
 *
 * فرم ثبت باید بگوید هر فاز کجای برنامه است، وگرنه کاربر باید برود تب
 * زمان‌بندی و برگردد. رنگ‌ها عمداً همان‌های گانت‌اند تا یک زبان باشد.
 */
.state-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-inline-start: .35rem; vertical-align: middle;
  background: var(--c-gray); border: 1px solid var(--c-border-2); }
.state-dot--done-on-time, .state-dot--done { background: var(--c-green); border-color: var(--c-green); }
.state-dot--done-late { background: var(--c-yellow); border-color: var(--c-yellow); }
.state-dot--overdue { background: var(--c-red); border-color: var(--c-red); }
.state-dot--running { background: var(--c-primary); border-color: var(--c-primary); }
.state-dot--not-started { background: var(--c-gray-bg); }
.field__unit { font-size: .72rem; color: var(--c-text-3); font-weight: 400; }
.field--required .field__label::after { content: ' *'; color: var(--c-red); }

.input, .select, .textarea {
  width: 100%; padding: .5rem .65rem;
  font: inherit; color: var(--c-text);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border-2); border-radius: var(--radius-sm);
  transition: border-color .12s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border: 2px solid var(--c-primary); padding: calc(.5rem - .5px) calc(.65rem - .5px);
}
.input:disabled, .select:disabled { background: var(--c-surface-2); color: var(--c-text-3); cursor: not-allowed; }
.input.is-invalid { border-color: var(--c-red); background: var(--c-red-bg); }
.textarea { min-height: 80px; resize: vertical; }

/* یک تیک با متن کنارش، در دل یک گفت‌وگو */
.checkline { display: flex; align-items: center; gap: .45rem; cursor: pointer;
  font-size: .88rem; margin-top: .5rem; }
.checkline input { width: 17px; height: 17px; accent-color: var(--c-primary); }
.checkbox { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--c-primary); }

.form-msg { color: var(--c-red); font-size: .8rem; min-height: 1.2em; margin: 0; }

/* ------------------------------ دکمه ------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1.15rem; border-radius: var(--radius-sm);
  border: 0; font: inherit; font-weight: var(--fw-bold); font-size: .87rem;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn:disabled, .btn.is-busy { opacity: .6; cursor: not-allowed; }
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: var(--el-2); }
.btn--primary:active:not(:disabled) { box-shadow: var(--el-1); }
.btn--primary:hover:not(:disabled) { background: var(--c-primary-d); }
/* دکمه‌ی متنی: بدون زمینه، بدون ارتفاع — سطحِ سوم در سلسله‌مراتبِ متریال */
.btn--ghost { background: transparent; color: var(--c-primary-d); border: 1px solid var(--c-border-2); box-shadow: none; }
.btn--ghost:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); }
.btn--danger { background: var(--c-red); color: #fff; box-shadow: var(--el-2); }
.btn--danger:hover:not(:disabled) { background: #8f1e17; }
.btn--sm { padding: .3rem .6rem; font-size: .8rem; }
.btn--block { width: 100%; }

.icon-btn {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--c-text-2);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.icon-btn--danger:hover { background: var(--c-red-bg); color: var(--c-red); }

/* ------------------------------ جدول ------------------------------ */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.table th, .table td { padding: .7rem .85rem; text-align: start; border-bottom: 1px solid #f5f2ef; }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--c-surface-2); color: var(--c-text-3);
  font-size: .76rem; font-weight: var(--fw-bold); white-space: nowrap;
}
.table tbody tr:hover { background: var(--c-surface-2); }
/* سطر جمع در جدول‌های تجمیعی */
.table tbody tr.is-total { background: var(--c-surface-2); border-top: 2px solid var(--c-border-2); }
.table tbody tr.is-clickable { cursor: pointer; }
.table td.num, .table th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .cell-actions { display: flex; gap: .2rem; }
.table__sort { cursor: pointer; user-select: none; }
.table__sort::after { content: ' ⇅'; color: var(--c-text-3); font-size: .7rem; }
.table__sort.is-asc::after  { content: ' ↑'; color: var(--c-primary); }
.table__sort.is-desc::after { content: ' ↓'; color: var(--c-primary); }

/* ------------------------------ نشان ------------------------------ */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.badge__icon { display: inline-flex; }
.badge--green  { background: var(--c-green-bg);  color: var(--c-green); }
.badge--yellow { background: var(--c-yellow-bg); color: var(--c-yellow); }
.badge--red    { background: var(--c-red-bg);    color: var(--c-red); }
.badge--gray   { background: var(--c-gray-bg);   color: var(--c-gray); }
.badge--info   { background: var(--c-primary-l); color: var(--c-primary-d); }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  font-size: .76rem; color: var(--c-text-2);
}

/* داده‌ای که از کش آمده و در حال تازه شدن است — خوانا و قابل استفاده
   می‌ماند؛ فقط یک نشانه محو که هنوز نهایی نیست. */
.is-stale { opacity: .72; transition: opacity .18s ease; }
@media (prefers-reduced-motion: reduce) { .is-stale { transition: none; } }

/* چند کد در یک فیلد — هر کد یک تراشه جدا */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chips .chip { font-variant-numeric: tabular-nums; }

/* ویرایشگر فهرست در تنظیمات — افزودن و حذف با دکمه */
.listedit { display: flex; flex-direction: column; gap: .5rem; }
.listedit .toolbar { display: flex; gap: .4rem; align-items: center; }
.listedit .toolbar .input { flex: 1; min-width: 0; }

/* کد اتصال ربات — عمداً درشت و تک‌فاصله: کاربر باید بتواند از روی صفحه
   گوشی بخواندش و در چت تایپ کند. */
.linkcode { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin-top: .7rem; padding: .6rem .8rem; border: 1px dashed var(--c-primary);
  border-radius: var(--radius); background: var(--c-surface-2); }
.linkcode__digits { font-size: 1.8rem; font-weight: var(--fw-black);
  letter-spacing: .25em; font-variant-numeric: tabular-nums; color: var(--c-primary); }

/* ------------------------------ داشبورد اصلی ------------------------------ */
/*
 * سه لایه: نوار بالا (امروز + نقشه)، و پایین‌تر اسلاید هر بخش.
 *
 * دو کارت بالا عمداً هم‌ارتفاع‌اند و نقشه مربع است: نقشه استان تقریباً
 * مربع است و در جعبه کشیده، یا لِه می‌شود یا نصف جعبه سفید می‌ماند.
 */
.dash-top { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; margin-bottom: 1rem; }
/* کارت «امروز» سه بلوک هم‌وزن دارد تا ارتفاعِ کارتِ نقشه را پر کند، نه
   اینکه نیمه پایینش سفید بماند. */
.dash-brief { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem 1.2rem; }
/* مربع‌ها اندازه خودشان را دارند؛ باقی ارتفاع کارت به فهرست اخطارها می‌رسد */
.dash-brief > .brief__squares { flex: 0 0 auto; }
.dash-brief > .brief__alerts { flex: 1 1 auto; min-height: 0; }
/* نقشه در جعبه مربع می‌نشیند: خودش تقریباً مربع است و در جعبه کشیده،
   یا لِه می‌شود یا نصف جعبه سفید می‌ماند. */
.dash-map { padding: .9rem 1rem 1rem; display: flex; flex-direction: column;
  aspect-ratio: 1 / 1; max-height: 620px; }
.dash-map .card__head { margin-bottom: .4rem; padding-bottom: .4rem; }
.dash-map .card__body { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-height: 0; }
.dash-map__canvas { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; }
.dash-map__canvas .azmap { height: 100%; display: flex; justify-content: center; }
/* نقشه تا جایی که جا دارد بزرگ می‌شود و نسبتش دست نمی‌خورد: کشیدنِ نقشه
   استان به اندازه جعبه، همان‌قدر بد است که کوچک ماندنش. */
.dash-map__canvas .azmap__svg { height: 100%; width: auto; max-width: 100%; }

/* دو مربع کنار هم: ساعت و هوا */
.brief__squares { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: stretch; }
/*
 * دو جعبه هم‌اندازه کنار هم.
 *
 * ارتفاع را ردیف گرید تعیین می‌کند (بلندترین محتوا)، نه aspect-ratio. دو
 * بار امتحان شد و هر بار یک چیز شکست:
 *   با aspect-ratio + overflow:hidden، کمترین ارتفاعِ جعبه صفر می‌شد و
 *   نسبت ۱:۱ محتوا را می‌بُرید — دمای کمینهٔ نوار پیش‌بینی زیر لبه گم شد.
 *   با aspect-ratio بدون hidden، نسبت بر کشیده‌شدنِ گرید غلبه می‌کرد و
 *   ساعت ۲۱۶ می‌ماند در حالی که هوا ۲۵۳ می‌شد — دو جعبه نابرابر.
 * حالا محتوای هوا (وضعیت + پنج روز) خودش تقریباً به اندازه عرض ستون ارتفاع
 * می‌خواهد، پس جعبه‌ها در عمل مربع درمی‌آیند و هیچ‌وقت چیزی بریده نمی‌شود.
 */
.brief__square { border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface-2); padding: .65rem .7rem;
  display: flex; flex-direction: column; gap: .35rem; min-width: 0; }

/* — ساعت عقربه‌ای — */
.clock { align-items: center; }
.clock__wrap { flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0; width: 100%; }
.clock__face { width: 100%; max-width: 100%; height: 100%; }
.clock__ring { fill: var(--c-surface); stroke: var(--c-border); stroke-width: 2; }
.clock__tick { stroke: var(--c-text-3); stroke-width: 2.5; stroke-linecap: round; }
.clock__tick--q { stroke: var(--c-text-2); stroke-width: 4.5; }
/* چرخش با صفتِ rotate(angle cx cy) خود SVG انجام می‌شود، نه با CSS:
   transform-origin در CSS با همان صفت تداخل می‌کرد و عقربه‌ها اصلاً از
   مرکز جدا نمی‌شدند. */
.clock__hand { stroke: var(--c-text); stroke-linecap: round; }
.clock__hand--h { stroke-width: 7; }
.clock__hand--m { stroke-width: 5; }
/* عقربه ثانیه تنها چیز متحرک کارت است، پس تنها چیزی است که رنگ می‌گیرد */
.clock__hand--s { stroke: var(--c-primary); stroke-width: 2; }
.clock__pin { fill: var(--c-primary); }
.clock__meta { text-align: center; width: 100%; }
.clock__date { font-size: .92rem; font-weight: var(--fw-bold); }
.clock__day { display: flex; align-items: baseline; justify-content: center; gap: .4rem;
  font-size: .8rem; color: var(--c-text-2); }
.clock__digital { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
  color: var(--c-text); }

/* — هوا — */
.weather__head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.weather__title { font-size: .78rem; color: var(--c-text-2); font-weight: var(--fw-medium); }
.select--sm { width: auto; max-width: 58%; min-width: 0; padding: .18rem 1.4rem .18rem .35rem;
  font-size: .78rem; }
.weather__body { flex: 0 0 auto; display: flex; flex-direction: column; gap: .3rem; min-height: 0; }
/* افقی: مربع باید جای پیش‌بینی پنج روز را هم بدهد */
.weather__now { display: flex; align-items: center; gap: .5rem; }
.weather__nowtext { min-width: 0; }
.weather__icon { color: var(--c-primary); display: inline-flex; flex: 0 0 auto; }
/* عدد دما جزیره دوجهته است: بدون این، علامت منهای به آن سوی عدد می‌پرد */
.weather__temp, .forecast__hi, .forecast__lo { unicode-bidi: isolate; }
.weather__temp { font-size: 1.55rem; font-weight: var(--fw-black); line-height: 1.05;
  font-variant-numeric: tabular-nums; }
.weather__text { font-size: .8rem; color: var(--c-text-2); }
.weather__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .5rem; }
.weather__fact { display: flex; justify-content: space-between; gap: .3rem; font-size: .72rem; }
.weather__fact-k { color: var(--c-text-3); }
.weather__fact-v { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* — پیش‌بینی پنج روز آینده، داخل همان مربع هوا —
   بدون کادر و بدون پس‌زمینه: پنج جعبه در یک مربع ۲۵۰ پیکسلی، شلوغ می‌شود.
   یک خط جداکننده بالای نوار کافی است. */
.forecast { display: grid; grid-template-columns: repeat(5, 1fr); gap: .15rem;
  flex: 1 1 auto; align-items: center; border-top: 1px solid var(--c-border);
  padding-top: .35rem; min-height: 0; }
.forecast__day { display: flex; flex-direction: column; align-items: center; gap: .05rem;
  border-radius: 6px; padding: .15rem .05rem; min-width: 0; }
.forecast__day.is-empty { min-height: 58px; }
/* پیام «در دسترس نیست» در شبکه‌ی پنج‌ستونه، یک ستون می‌گرفت و کلمه‌به‌کلمه می‌شکست */
.forecast__none { grid-column: 1 / -1; text-align: center; align-self: center; }
.forecast__name { font-size: .68rem; color: var(--c-text-2); white-space: nowrap; }
.forecast__icon { color: var(--c-primary); display: inline-flex; }
.forecast__hi { font-size: .8rem; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.forecast__lo { font-size: .68rem; color: var(--c-text-3); font-variant-numeric: tabular-nums; }

.brief__alerts { justify-content: flex-start; }
.alertline { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem;
  border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: .35rem;
  color: inherit; text-decoration: none; }
a.alertline:hover { border-color: var(--c-primary); background: var(--c-surface-2); }
.alertline__icon { display: inline-flex; }
.alertline__text { flex: 1; min-width: 0; font-size: .88rem; }
.alertline__n { font-size: .8rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.alertline.is-red { border-color: var(--c-red); }
.alertline.is-red .alertline__n { color: var(--c-red); }
.alertline.is-ok { border-color: var(--c-green); }

/* خلاصه شهرستان زیر نقشه — نه جعبه شناور: روی لمس باز نمی‌شود و در چاپ نیست.
   ارتفاعش رزرو است: نوارِ کش‌آمدنی، نقشه بالای خودش را با هر بار جابه‌جا
   شدن اشاره‌گر تکان می‌داد. */
.countysum { border-top: 1px solid var(--c-border); padding-top: .55rem;
  flex: 0 0 auto; min-height: 6.4rem; }
.countysum__name { font-weight: var(--fw-bold); margin-bottom: .3rem; }
.countysum__row { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .15rem; }
.countysum__sec { font-size: .76rem; color: var(--c-text-3); min-width: 58px; }
.countysum__metrics { display: flex; flex-wrap: wrap; gap: .15rem .8rem; }
.countysum__item { display: flex; align-items: baseline; gap: .3rem; font-size: .84rem; }
.countysum__k { color: var(--c-text-2); }
.countysum__v { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.countysum__hint { margin-top: .3rem; }

/* اسلاید هر بخش: چهار عدد و یک در ورودی، نه بیشتر */
.slides { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.slide { display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem 1.2rem; }
/* عنوان و تراشه در عرض موبایل باید بشکنند، وگرنه کارت چند پیکسل سرریز
   می‌کند و کل صفحه اسکرول افقی می‌گیرد */
.slide__head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.slide__title { min-width: 0; }
.slide__icon { display: inline-flex; color: var(--c-primary); }
.slide__title { font-size: 1.05rem; font-weight: var(--fw-bold); margin: 0; }
.slide__figures { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
/* گزارش مدیریتی کنار نقشه: جا هست، پس کاشی‌ها در یک ردیف می‌نشینند */
.slide__figures--wide { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.figure { border-radius: var(--radius); padding: .6rem .7rem; background: var(--c-surface-2);
  border: 1px solid var(--c-border); }
.figure__value { font-size: 1.5rem; font-weight: var(--fw-black); line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere; }
.figure__label { font-size: .78rem; color: var(--c-text-2); margin-top: .15rem; }
.figure__unit { font-size: .72rem; color: var(--c-text-3); }
.slide__body { display: flex; flex-direction: column; gap: .7rem; }
.slide__foot { display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: auto; }
.slide__alert { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem;
  color: var(--c-text-2); }
.slide--soon { opacity: .75; }
.slide__note { font-size: .88rem; margin: 0; }

@media (max-width: 960px) {
  .dash-top { grid-template-columns: 1fr; }
  .dash-map { aspect-ratio: auto; max-height: none; }
  .dash-map__canvas .azmap__svg { height: auto; width: 100%; }
  .dash-brief > .brief__squares { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .brief__squares { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .clock__hand { transition: none; } }

/* ------------------------------ آمار ------------------------------ */

.kpi-grid { display: grid; gap: .875rem;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.kpi {
  padding: 1.1rem 1.2rem; border-radius: var(--radius);
  background: var(--c-surface); border: 0; box-shadow: var(--el-1);
  border-top: 3px solid var(--c-primary);
}
/* چرخه‌ی رنگ فقط برای تنوعِ بصری، نه وضعیت — کاشیِ اول-تا-چهارم هر
   گروه به‌ترتیب برند/آبی‌سبز/بنفش/سبز، بعد دوباره از اول. */
.kpi-grid .kpi:nth-child(4n+2) { border-top-color: var(--c-blue); }
.kpi-grid .kpi:nth-child(4n+3) { border-top-color: var(--c-purple); }
.kpi-grid .kpi:nth-child(4n+4) { border-top-color: var(--c-green); }
.kpi-grid .kpi:nth-child(4n+1) .kpi__value { color: var(--c-primary-d); }
.kpi-grid .kpi:nth-child(4n+2) .kpi__value { color: var(--c-blue-d); }
.kpi-grid .kpi:nth-child(4n+3) .kpi__value { color: var(--c-purple-d); }
.kpi-grid .kpi:nth-child(4n+4) .kpi__value { color: var(--c-green); }
.evm { margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.kpi-grid.evm .kpi.evm__kpi--ok { border-top-color: var(--c-green); }
.kpi-grid.evm .kpi.evm__kpi--warn { border-top-color: var(--c-yellow); }
.kpi-grid.evm .kpi.evm__kpi--bad { border-top-color: var(--c-red); }
.kpi-grid.evm .kpi.evm__kpi--ok .kpi__value { color: var(--c-green); }
.kpi-grid.evm .kpi.evm__kpi--warn .kpi__value { color: var(--c-yellow); }
.kpi-grid.evm .kpi.evm__kpi--bad .kpi__value { color: var(--c-red); }
.evm__why { font-size: .78rem; margin: .6rem 0 0; }
.kpi__label { font-size: .78rem; color: var(--c-text-2); font-weight: var(--fw-medium); }
.kpi__value { font-size: 1.65rem; font-weight: var(--fw-black); font-variant-numeric: tabular-nums;
  line-height: 1.3; letter-spacing: -.02em; margin-top: .35rem;
  /* عدد هرچقدر هم بلند باشد، از کارت بیرون نمی‌زند */
  min-width: 0; overflow-wrap: anywhere; }
/* پنج شاخصِ داشبورد پروژه، در یک ردیف. auto-fit عمومی این‌جا جواب نمی‌دهد:
   با پنج کاشی، آخری تنها به خط بعد می‌افتد و ردیف شکسته دیده می‌شود. */
.kpi-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .kpi-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kpi-grid--5 { grid-template-columns: 1fr; } }
/* عددهای بلند کوچک‌تر می‌شوند تا در یک خط جا بمانند */
.kpi__value--md { font-size: 1.45rem; }
.kpi__value--sm { font-size: 1.3rem; }
.kpi__value--xs { font-size: 1.15rem; }
.kpi__unit { font-size: .72rem; color: var(--c-text-3); font-weight: 400; margin-top: .3rem; }

/*
 * نوار پیشرفت.
 *
 * display صریح است چون هر دو span‌اند: span درون‌خطی است و روی عنصر
 * درون‌خطی، width و height اصلاً اثری ندارند — نوار رنگش را داشت ولی
 * صفر در صفر بود، پس همه‌جا یک شیار خاکستریِ خالی دیده می‌شد. .bar در
 * .bar-row (شبکه) اتفاقی بلوک می‌شد و همین پنهانش کرده بود.
 */
.bar { display: block; height: 8px; border-radius: 999px;
       background: var(--c-gray-bg); overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--c-accent); border-radius: 999px; }
/* فازی که از مهلتش گذشته، یا نسبتی که از ۱۰۰٪ رد شده */
.bar__fill--late { background: var(--c-red); }
.danger-text { color: var(--c-red); }

/* ------------------------------ نقشه استان ------------------------------ */
/* پله‌های رنگ گسسته‌اند نه طیف پیوسته: چشم تفاوت دو سبز نزدیک را تشخیص
   نمی‌دهد و مقایسه بی‌معنی می‌شود. عدد هر شهرستان هم روی خودش نوشته
   می‌شود، پس رنگ به‌تنهایی حامل معنا نیست. */
/* نقشه یک عنصر کمکی است نه قهرمان صفحه: عرضش محدود می‌ماند تا کنار
   محتوای اصلی بنشیند، نه اینکه جای آن را بگیرد. */
.azmap { --az-0: var(--c-surface-2); --az-na: #f2efec; max-width: 300px; }
.azmap--wide { max-width: 460px; }
.azmap__svg { width: 100%; height: auto; display: block; overflow: visible; }
.azmap__labels { pointer-events: none; }

.azmap__shape { fill: var(--az-na); stroke: var(--c-surface); stroke-width: calc(3px * var(--az-k, 1));
  transition: fill .15s ease; }
.azmap__county--s0 .azmap__shape { fill: var(--az-0); }
.azmap__county--s1 .azmap__shape { fill: #f0dccf; }
.azmap__county--s2 .azmap__shape { fill: #e0b394; }
.azmap__county--s3 .azmap__shape { fill: #bd7248; }
.azmap__county--s4 .azmap__shape { fill: var(--c-primary); }

.azmap__county[role="button"] { cursor: pointer; }
.azmap__county[role="button"]:hover .azmap__shape,
.azmap__county[role="button"]:focus-visible .azmap__shape { stroke: var(--c-text); stroke-width: calc(5px * var(--az-k, 1)); }
.azmap__county[role="button"]:focus { outline: none; }
.azmap__county.is-selected .azmap__shape { stroke: var(--c-text); stroke-width: calc(6px * var(--az-k, 1)); }

/* در این ابعاد، نام و عدد با هم جا نمی‌شوند. عدد می‌ماند (چیزی که مقایسه
   می‌شود) و نام در tooltip و aria-label است. */
.azmap__name { display: none; }
.azmap--labels .azmap__name { display: block; font-size: calc(32px * var(--az-k, 1)); font-weight: 600;
  fill: var(--c-text-2); text-anchor: middle; pointer-events: none; }
.azmap--labels .azmap__value { font-size: calc(38px * var(--az-k, 1)); }
.azmap--labels .azmap__lbl--s4 .azmap__name { fill: #fff; }
/* نقشه‌ای که کل عرض جعبه‌اش را می‌گیرد — داشبورد، که نقشه ستون اصلی آن است */
.azmap--fill { max-width: none; width: 100%; }
.azmap--wide .azmap__name { display: block; font-size: calc(30px * var(--az-k, 1)); font-weight: 600;
  fill: var(--c-text); text-anchor: middle; pointer-events: none; }
.azmap__value { font-size: calc(46px * var(--az-k, 1)); font-weight: 800; fill: var(--c-text);
  text-anchor: middle; pointer-events: none; font-variant-numeric: tabular-nums; }
.azmap--wide .azmap__value { font-size: calc(34px * var(--az-k, 1)); }
/* فقط تیره‌ترین پله متن سفید می‌گیرد. پله سوم عمداً روشن‌تر نگه داشته شد
   تا متن تیره رویش بخواند؛ رنگ تیره‌ترِ خوش‌ظاهر، متن سفیدش رد می‌شد. */
.azmap__lbl--s4 .azmap__name, .azmap__lbl--s4 .azmap__value { fill: #fff; }

.azmap__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .7rem;
  margin-top: .5rem; font-size: .72rem; color: var(--c-text-2); }
.azmap__legend-item { display: inline-flex; align-items: center; gap: .3rem; }
.azmap__legend-unit { color: var(--c-text-3); margin-inline-start: auto; }
.azmap__swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--c-border); }
.azmap__swatch--s0 { background: var(--az-0); }
.azmap__swatch--s1 { background: #f0dccf; }
.azmap__swatch--s2 { background: #e0b394; }
.azmap__swatch--s3 { background: #bd7248; }
.azmap__swatch--s4 { background: var(--c-primary); }
.azmap__swatch--sna { background: var(--az-na); }

@media (prefers-reduced-motion: reduce) { .azmap__shape { transition: none; } }
@media print { .azmap__shape { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* دفتر تغییرات — خط زمانی رویدادها */
.timeline { display: grid; gap: .5rem; }
.timeline__day { font-size: .84rem; font-weight: var(--fw-bold); color: var(--c-text-2);
  margin: 1rem 0 .1rem; }
.timeline__day:first-child { margin-top: 0; }
.entry { padding: .7rem .9rem; border-radius: var(--radius);
  background: var(--c-surface); border: 1px solid var(--c-border); }
.entry__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.entry__time { font-size: .8rem; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.entry__action { font-weight: var(--fw-bold); }
.entry__user { font-size: .8rem; color: var(--c-text-2); display: inline-flex;
  align-items: center; gap: .2rem; }
.entry__project { font-size: .78rem; color: var(--c-primary); margin-inline-start: auto; }
.changes { display: grid; gap: .25rem; margin-top: .5rem; }
.changes__row { display: grid; gap: .4rem; align-items: baseline; font-size: .82rem;
  grid-template-columns: minmax(90px, auto) 1fr auto 1fr; }
.changes__field { color: var(--c-text-2); }
.changes__from { color: var(--c-text-3); text-decoration: line-through; overflow-wrap: anywhere; }
.changes__arrow { color: var(--c-text-3); }
.changes__to { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .changes__row { grid-template-columns: 1fr; gap: .1rem; }
  .changes__arrow { display: none; }
  .changes__from::after { content: ' ←'; }
}

/* نقشه در گوشه، کنار محتوای اصلی. در موبایل زیر آن می‌رود. */
.with-map { display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1.1rem; }
.with-map__aside { width: min(300px, 40vw); }
.with-map__aside .card { margin: 0; }
.with-map__aside .card__body { padding: .8rem .9rem; }
@media (max-width: 860px) {
  .with-map { grid-template-columns: minmax(0, 1fr); }
  /* ۳۴۰ پیکسل از عرض داخلی کارت روی موبایل بیشتر است و بیرون می‌زد */
  .with-map__aside { width: 100%; max-width: min(340px, 100%); }
}

/* «کارهایی که باید انجام شود» — کارت‌های اخطار بالای لیست پروژه‌ها.
   هر کارت یک دکمه است: کلیک، لیست را روی همان نوع اخطار فیلتر می‌کند. */
.triage { display: grid; gap: .7rem; margin-bottom: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }
.triage__card {
  display: flex; align-items: flex-start; gap: .6rem; text-align: start;
  padding: .85rem .95rem; border-radius: var(--radius); cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-border);
  font: inherit; color: inherit; transition: border-color .15s ease, background .15s ease;
}
.triage__card:hover { border-color: var(--c-text-3); }
.triage__card.is-active { border-color: var(--c-primary); background: var(--c-primary-l); }
.triage__card--red { border-inline-start: 3px solid var(--c-red); }
.triage__card--yellow { border-inline-start: 3px solid var(--c-yellow); }
.triage__icon { flex: none; margin-top: .1rem; }
.triage__body { display: grid; gap: .15rem; min-width: 0; }
.triage__label { font-weight: var(--fw-bold); }
.triage__count { font-size: .82rem; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.triage__red { color: var(--c-red); font-weight: var(--fw-medium); }
.triage__names { font-size: .76rem; color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .triage__card { transition: none; } }

/* ستون دکمه‌های ویرایش/حذف در جدول‌ها */
.row-actions { display: inline-flex; flex-wrap: wrap; gap: .4rem;
  white-space: nowrap; text-align: start; align-items: center; }
.row-actions .icon-btn + .icon-btn { margin-inline-start: .15rem; }
/* minmax(0,…) لازم است: با 1fr خالی، کمینه ستون «اندازه محتوا» است و
   یک نام بلند شهرستان کل سطر را از کارت بیرون می‌بَرد. */
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) auto;
  gap: .6rem; align-items: center; padding: .3rem 0; }
.bar-row__label { font-size: .82rem; color: var(--c-text-2);
  overflow: hidden; text-overflow: ellipsis; }
.bar-row__value { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--c-text-2); white-space: nowrap; }

/* در عرض موبایل، سه‌ستونی شدنِ سطر یعنی برچسب بریده شود («فونداس…»).
   به‌جای بریدن، نوار می‌رود سطر بعد و هر سه چیز کامل دیده می‌شوند. */
@media (max-width: 560px) {
  .bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem .6rem;
    padding: .4rem 0;
  }
  .bar-row__label { overflow: visible; text-overflow: clip; }
  .bar-row .bar { grid-column: 1 / -1; }
}

/* ------------------------------ تب ------------------------------ */

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--c-border-2); margin-bottom: 1rem; overflow-x: auto; }
.tab {
  padding: .8rem 1.1rem; border: 0; border-bottom: 2.5px solid transparent;
  background: none; font: inherit; font-size: .85rem; font-weight: var(--fw-bold);
  color: var(--c-text-2); cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--c-text); background: rgba(169,84,42,.05); }
.tab.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* ------------------------------ زمان‌بندی ------------------------------ */

.phase { border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: .6rem; overflow: hidden; }
.phase.is-locked { opacity: .62; background: var(--c-surface-2); }
.phase__head {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .6rem .85rem; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border);
}
.phase__num {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-primary-l); color: var(--c-primary-d);
  font-size: .78rem; font-weight: 700;
}
.phase.is-done .phase__num { background: var(--c-green-bg); color: var(--c-green); }
.phase.is-late .phase__num { background: var(--c-red-bg); color: var(--c-red); }
.phase__name { font-weight: var(--fw-bold); font-size: .9rem; }
.phase__spacer { margin-inline-start: auto; }
.phase__body { padding: .85rem; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.phase__lock-note { padding: .6rem .85rem; color: var(--c-text-3); font-size: .8rem; }

/* ------------------------------ انتخابگر تاریخ ------------------------------ */

.jdp {
  width: 268px; padding: .55rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.jdp-head { display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; }
.jdp-title { display: flex; gap: .3rem; flex: 1; }
.jdp-title select {
  flex: 1; padding: .25rem; font: inherit; font-size: .8rem;
  border: 1px solid var(--c-border-2); border-radius: var(--radius-sm); background: var(--c-surface);
}
.jdp-nav {
  width: 26px; height: 26px; flex: none;
  border: 1px solid var(--c-border-2); border-radius: var(--radius-sm);
  background: var(--c-surface); cursor: pointer; font-size: 1rem; line-height: 1; color: var(--c-text-2);
}
.jdp-nav:hover { background: var(--c-surface-2); }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp-wd { text-align: center; font-size: .7rem; color: var(--c-text-3); padding: .2rem 0; font-weight: 700; }
.jdp-wd.is-holiday { color: var(--c-red); }
.jdp-day {
  padding: .3rem 0; border: 0; border-radius: var(--radius-sm);
  background: none; font: inherit; font-size: .8rem; color: var(--c-text); cursor: pointer;
}
.jdp-day:hover { background: var(--c-surface-2); }
.jdp-day.is-holiday { color: var(--c-red); }
.jdp-day.is-today { outline: 1px solid var(--c-primary); }
.jdp-day.is-selected { background: var(--c-primary); color: #fff; font-weight: 700; }
.jdp-foot { display: flex; justify-content: space-between; margin-top: .45rem; padding-top: .4rem; border-top: 1px solid var(--c-border); }
.jdp-link {
  border: 0; background: none; padding: .15rem .3rem;
  font: inherit; font-size: .78rem; color: var(--c-primary); cursor: pointer;
}
.jdp-link:hover { text-decoration: underline; }


/* ------------------------------ سربرگ گزارش ------------------------------ */

/* فقط هنگام چاپ دیده می‌شود؛ روی صفحه پنهان است. */
.letterhead { display: none; }

.letterhead__logo { height: 52px; width: auto; }
.letterhead__text { display: flex; flex-direction: column; line-height: 1.6; }
.letterhead__text strong { font-size: 1.05rem; font-weight: var(--fw-black); }
.letterhead__text span { font-size: .8rem; color: var(--c-text-2); }
.letterhead__meta {
  margin-inline-start: auto; text-align: end;
  display: flex; flex-direction: column; gap: .1rem;
  font-size: .75rem; color: var(--c-text-2);
}

/* ------------------------------ مودال ------------------------------ */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,32,48,.45);
  display: grid; place-items: center; padding: 1rem;
  overflow-y: auto;
}
.modal {
  width: min(640px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.modal--wide { width: min(980px, 100%); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--c-border); }
.modal__title { margin: 0; font-size: 1rem; font-weight: var(--fw-bold); }
.modal__body { padding: 1rem; overflow-y: auto; }
.modal__foot { display: flex; gap: .5rem; justify-content: flex-start; padding: .8rem 1rem; border-top: 1px solid var(--c-border); }

/* ------------------------------ اعلان ------------------------------ */

.toast-host { position: fixed; bottom: 1rem; inset-inline-start: 1rem; z-index: 300; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  padding: .6rem .9rem; border-radius: var(--radius);
  background: var(--c-text); color: #fff; font-size: .85rem;
  box-shadow: var(--shadow-lg); max-width: 380px;
  animation: toast-in .2s ease-out;
}
.toast--success { background: var(--c-green); }
.toast--error   { background: var(--c-red); }
.toast.is-out { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------ وضعیت‌ها ------------------------------ */

.skeleton { display: grid; gap: .5rem; }
.skeleton__row { height: 34px; border-radius: var(--radius-sm); background: linear-gradient(90deg, #eef1f4 25%, #f6f8fa 50%, #eef1f4 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--c-text-3); }
.empty__icon { display: inline-flex; color: #c9c2ba; }
.empty__text { margin: .4rem 0 .8rem; }

.notice { padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .85rem; border: 1px solid; }
.notice--info { background: var(--c-primary-l); border-color: #bfdfe1; color: var(--c-primary-d); }
.notice--warn { background: var(--c-yellow-bg); border-color: #efdcae; color: var(--c-yellow); }
.notice--error { background: var(--c-red-bg); border-color: #f0c4c1; color: var(--c-red); }
.notice--ok    { background: var(--c-green-bg); border-color: #bfe0c9; color: var(--c-green); }
.notice__icon  { display: inline-flex; vertical-align: -.2em; margin-inline-end: .35rem; }

/* فهرست اخطارهای یک پروژه، داخل کادر بالای پروفایل */
.alert-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.alert-list__item { display: flex; align-items: flex-start; gap: .4rem; line-height: 1.7; }
.alert-list__icon { flex: none; margin-top: .28rem; }

/* ------------------------------ صفحه ورود ------------------------------ */

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--c-bg); }
.login-card {
  width: min(400px, 100%); padding: 1.75rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 14px; box-shadow: var(--shadow);
}
.login-card__brand { text-align: center; margin-bottom: 1.25rem; }
.login-card__logo {
  display: block; width: 210px; max-width: 100%;
  height: auto; margin: 0 auto 1rem;
}
.login-card__title { font-size: 1.15rem; margin: 0; font-weight: var(--fw-black); }
.login-card__org { font-size: .78rem; color: var(--c-text-3); margin: .2rem 0 0; }
.login-foot { text-align: center; font-size: .72rem; color: var(--c-text-3); margin-top: 1rem; }

/* ------------------------------ فهرست توصیفی ------------------------------ */

.dl { display: grid; gap: .1rem .9rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dl__item { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--c-border); min-width: 0; }
.dl__key { color: var(--c-text-2); font-size: .82rem; flex: none; }
.dl__val { font-weight: 600; font-size: .85rem; text-align: end; overflow-wrap: anywhere; }
.dl__val--muted { color: var(--c-text-3); font-weight: 400; }

/* ------------------------------ فیلترها ------------------------------ */

/* minmax(170px, …) در عرض موبایل خودِ ستون را از کارت بیرون می‌برد:
   min() سقف را به عرض موجود می‌چسباند. */
.filters { display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); align-items: end; }
/* دکمه‌ها باید بشکنند؛ با دو دکمه تازه (تخصیص و تعریف حادثه) یک ردیفِ
   نشکستنی چند پیکسل از کارت بیرون می‌زد */
.filters__actions { display: flex; flex-wrap: wrap; gap: .4rem; }

.toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.toolbar__spacer { margin-inline-start: auto; }
.back-link { display: inline-flex; align-items: center; gap: .3rem; }
.back-link svg { transform: scaleX(-1); }

.muted { color: var(--c-text-3); }
.small { font-size: .8rem; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/*
 * موبایل: ستون به کشو تبدیل می‌شود.
 *
 * حالت «جمع‌شده» این‌جا معنا ندارد و عمداً خنثی می‌شود: کشو یا باز است یا
 * بسته. اگر خنثی نشود، کاربری که در دسکتاپ منو را جمع کرده باشد، در
 * موبایل کشویی بدون نوشته می‌بیند.
 */
@media (max-width: 860px) {
  body.has-side, html.is-side-collapsed body.has-side { padding-inline-start: 0; }

  /*
   * نوار بالا روی کشو می‌ماند و کشو دقیقاً از زیرش شروع می‌شود.
   *
   * اگر کشو روی نوار بیفتد، دکمه‌ای که همین الان بازش کرده زیرش گم می‌شود
   * و کاربر راهی برای بستن ندارد جز نوار باریک کنارش.
   */
  .topbar {
    display: block; position: sticky; top: 0; z-index: 62;
    background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  }

  .side, .is-side-collapsed .side {
    inset-block-start: var(--topbar-h);
    width: min(272px, 82vw);
    transform: translateX(100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  html[dir="ltr"] .side, html[dir="ltr"] .is-side-collapsed .side { transform: translateX(-100%); }
  .is-side-open .side { transform: none; }

  .is-side-collapsed .side__label,
  .is-side-collapsed .side__brandtext,
  .is-side-collapsed .user-btn__meta,
  .is-side-collapsed .side__grouplabel { display: revert; }
  .is-side-collapsed .side__logo { display: block; }
  .is-side-collapsed .side__mark { display: none; }
  .is-side-collapsed .side__brand,
  .is-side-collapsed .side__link,
  .is-side-collapsed .side__user { justify-content: flex-start; padding-inline: .625rem; }

  /* نشان و نام سازمان همین بالا در نوار هست؛ تکرارش در کشو فقط جا می‌گیرد */
  .side__brand { display: none; }
  .side__nav { padding-top: 1rem; }
  .side__collapse { display: none; }

  .is-side-open .side-overlay {
    display: block; position: fixed; z-index: 58;
    inset-block: var(--topbar-h) 0; inset-inline: 0;
    background: rgba(15, 23, 42, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

/* ------------------------------ گزارش یک‌صفحه‌ای ------------------------------ */
/*
 * «نگاه جامع»: همه‌چیز در یک A4.
 *
 * برگه با ابعاد واقعی A4 روی صفحه هم دیده می‌شود (۲۱۰×۲۹۷ میلی‌متر منهای
 * حاشیه)، نه اینکه فقط موقع چاپ معلوم شود جا شده یا نه. اگر محتوا بیرون
 * بزند، همان‌جا در مرورگر دیده می‌شود.
 */
.page--summary { max-width: 100%; }
/* انتخاب حادثه، کنار دکمه‌های صفحه — نه به‌صورت یک فیلد تمام‌عرض */
.field--inline { display: flex; align-items: center; gap: .4rem; margin: 0; }
.field--inline .field__label { margin: 0; white-space: nowrap; }
.field--inline .select { width: auto; min-width: 150px; }
.sheet {
  /* box-sizing عمدی است: عرض و ارتفاع باید *با* حاشیه داخلی برابر ناحیه
     چاپی A4 باشند، وگرنه برگه روی کاغذ سرریز می‌کند بدون اینکه روی صفحه
     معلوم شود. */
  box-sizing: border-box;
  width: 186mm;                 /* A4 منهای ۱۲ میلی‌متر حاشیه از هر طرف */
  height: 273mm;
  margin: 0 auto;
  padding: 7mm 6mm;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 8.8pt;
  line-height: 1.45;
  overflow: hidden;             /* سرریز باید دیده شود، نه اینکه برگه را بکِشد */
  display: flex;
  flex-direction: column;
}
.sheet__head { display: flex; align-items: center; gap: .8rem;
  border-bottom: 2px solid var(--c-primary); padding-bottom: .5rem; margin-bottom: .7rem; }
.sheet__logo { height: 42px; width: auto; }
.sheet__titles { flex: 1; min-width: 0; }
.sheet__org { font-size: 8.5pt; color: var(--c-text-2); }
.sheet__title { font-size: 14pt; font-weight: var(--fw-black); line-height: 1.3; }
.sheet__meta { font-size: 8pt; color: var(--c-text-3); text-align: end; white-space: nowrap; }

.sheet h2 { font-size: 9.4pt; font-weight: var(--fw-bold); margin: .4rem 0 .25rem;
  padding-bottom: .1rem; border-bottom: 1px solid var(--c-border); }
.sheet h2:first-of-type { margin-top: 0; }

/* کاشی‌های شاخص: چگال، چون ۶ تا ۸ عدد باید در یک ردیف جا شوند */
.tiles { display: grid; gap: .4rem; grid-template-columns: repeat(6, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tile { border: 1px solid var(--c-border); border-radius: 8px; padding: .32rem .45rem;
  background: var(--c-surface-2); }
.tile__label { font-size: 7.5pt; color: var(--c-text-2); line-height: 1.35; }
.tile__value { font-size: 12pt; font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile__unit { font-size: 7pt; color: var(--c-text-3); }

/* سه ستون کنار هم: احداثی / تعمیری / معیشتی */
.cols3 { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); align-items: start; }
.cols2 { display: grid; gap: .5rem; grid-template-columns: 1fr auto; align-items: start; }
/* جدول بلند، نصف‌شده و کنار هم، به‌علاوه نقشه: بیست‌ودو سطر در یک ستون،
   برگه را به صفحه دوم می‌برد در حالی که ستون کنارش خالی مانده است. */
/* دو نیمه در تمام عرض برگه، هرکدام ۸۶ میلی‌متر؛ کمی چگال‌تر از جدول عادی */
.cols-split { display: grid; gap: .45rem; grid-template-columns: 1fr 1fr; align-items: start; }
.cols-split .table { font-size: 7pt; }
.cols-split .table th, .cols-split .table td { padding: .1rem .2rem; }
/* نقشه، به ردیف پنل‌های خلاصه نقل‌مکان می‌کند */
.cols3--map { grid-template-columns: repeat(3, 1fr) auto; }
.cols3--map .azmap { max-width: 42mm; }
.cols3--map .azmap__value { font-size: calc(60px * var(--az-k, 1)); }
.panelbox { border: 1px solid var(--c-border); border-radius: 8px; padding: .35rem .45rem; }
.panelbox__title { font-size: 8.5pt; font-weight: var(--fw-bold); margin-bottom: .25rem; }
.kv { display: grid; gap: .1rem; }
.kv__row { display: flex; justify-content: space-between; gap: .5rem; font-size: 7.9pt; }
.kv__k { color: var(--c-text-2); }
.kv__v { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }

/* دو ستون هم‌عرض — برای کارت پروژه، که سمت راستش نمودار است نه نقشه */
.cols2--even { grid-template-columns: 1fr 1fr; }
/* وضعیت پروژه، کنار تاریخ سربرگ: یک تراشه، نه یک سطر متن */
.sheet__stamp { display: inline-block; margin-top: .2rem; padding: .05rem .4rem;
  border: 1px solid var(--c-primary); border-radius: 999px;
  color: var(--c-primary); font-weight: var(--fw-bold); }
/* گانت داخل برگه: ستون برچسب باریک‌تر و سطرها کوتاه‌تر، وگرنه نیمی از
   برگه را می‌گیرد و جای پیشرفت فیزیکی نمی‌ماند. */
.sheet .gantt { min-width: 0; }
.sheet .gantt-scroll { overflow: visible; }
.sheet .gantt__row { grid-template-columns: 62px 1fr; gap: .3rem; }
.sheet .gantt__label { font-size: 7.2pt; }
.sheet .gantt__row--axis { height: 14px; }
.sheet .gantt__row--head { margin-top: .2rem; }
.sheet .gantt__track { min-height: 11px; }
.sheet .gantt__bar { height: 9px; }
.sheet .gantt__bartext, .sheet .gantt__tick { font-size: 6.4pt; }
.sheet .gantt__legend { font-size: 6.8pt; margin-top: .2rem; }
.sheet .table { font-size: 7.5pt; }
.sheet .table th, .sheet .table td { padding: .13rem .28rem; }
.sheet .bar { height: 6px; }
.sheet .azmap { max-width: 56mm; }
.sheet .azmap__value { font-size: calc(52px * var(--az-k, 1)); }
/* بخش پایانی برگه فضای باقی‌مانده را می‌گیرد، تا نه خالی بماند نه سرریز کند.
   min-height صفر و overflow پنهان لازم‌اند: بدون آن‌ها، نوارها از جعبه
   بیرون می‌زنند و روی پانویس می‌افتند به‌جای اینکه جمع شوند. */
.growblock { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* align-content عمداً start است نه space-evenly: با پخش‌کردن، سطرهای آخر
   بی‌سروصدا بریده می‌شدند و دو فاز آخر روی کاغذ اصلاً چاپ نمی‌شد. فضای
   اضافی می‌ماند، ولی هیچ سطری گم نمی‌شود. */
.barsblock { flex: 0 0 auto; display: grid; gap: .13rem; align-content: start; }
.sheet .bar-row { gap: .4rem; }
.sheet .bar-row__label { font-size: 7.6pt; min-width: 72px; }
.sheet .bar-row__value { font-size: 7.6pt; white-space: nowrap; }
.sheet__foot { padding-top: .4rem; margin-top: .3rem; font-size: 7.5pt;
  color: var(--c-text-3); border-top: 1px solid var(--c-border); }
.sheet__body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/*
 * screen عمدی است، نه سهو.
 *
 * کاغذ A4 حدود ۷۹۴ پیکسل CSS پهناست — یعنی زیر همین ۸۲۰. بدون قید screen،
 * هر چاپی این قواعدِ «صفحه باریک» را می‌گرفت: سه ستون شناسنامه روی هم
 * می‌رفتند، کاشی‌ها دو ردیف می‌شدند، و کارتِ «یک برگه» سه برگه چاپ می‌شد.
 * روی نمایشگر هیچ‌وقت دیده نمی‌شد، چون آن‌جا پنجره پهن است.
 */
@media screen and (max-width: 820px) {
  .sheet { width: 100%; padding: 5mm; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .cols3, .cols3--map { grid-template-columns: 1fr; }
  .cols-split { grid-template-columns: 1fr; }
}

@media print {
  /* روی کاغذ: ناوبری و دکمه‌ها حذف، سربرگ رسمی سازمان جایگزین می‌شود. */
  .side, .side-overlay, .topbar__inner, .page__actions, .tabs, .btn, .icon-btn,
  .toast-host, .filters, .modal-backdrop, .no-print { display: none !important; }

  /* ستون کناری روی کاغذ نیست، پس حاشیه‌ای هم که برایش باز شده بود نباید بماند */
  body.has-side, html.is-side-collapsed body.has-side { padding-inline-start: 0 !important; }

  /* میزبان سربرگ رسمی همین نوار است؛ خودش می‌ماند، فقط درونش حذف می‌شود. */
  .topbar {
    display: block !important;
    position: static;
    border-bottom: 2px solid var(--c-primary);
    margin-bottom: 1rem;
  }

  .letterhead {
    display: flex; align-items: center; gap: .9rem;
    max-width: 100%; padding: .5rem 0 .8rem;
  }

  /* پنل‌های مخفیِ تب‌ها هنگام چاپ باز می‌شوند تا گزارش کامل باشد. */
  [data-panel][hidden] { display: block !important; }
  [data-panel] { break-inside: auto; }

  body { background: #fff; font-size: 11pt; }
  .page { padding: 0; max-width: 100%; }
  .card {
    box-shadow: none; break-inside: avoid;
    border-color: #cfd6dd; margin-bottom: .6rem;
  }
  .table thead th { background: #f0f3f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge, .bar__fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href] { text-decoration: none; color: inherit; }

  @page { margin: 14mm 12mm; }

  /* گزارش یک‌صفحه‌ای: خودش سربرگ دارد و باید دقیقاً یک برگه بماند */
  .is-summary .topbar { display: none !important; }
  .is-summary .sheet {
    width: auto; height: auto; margin: 0; padding: 0;
    border: none; border-radius: 0; background: #fff; overflow: visible;
  }
  .is-summary .sheet__body { min-height: 0; }
  .is-summary .tile, .is-summary .panelbox,
  .is-summary .table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .is-summary .sheet, .is-summary .sheet * { break-inside: avoid; }
  .is-summary { }
  @page { margin: 12mm; }
}

/* ------------------------------ انتظار طولانی ------------------------------ */
/*
 * وقتی پاسخ سرویس دیر می‌شود، صفحه نباید خشک‌شده به نظر برسد. این نوار
 * پایین صفحه می‌ماند تا پاسخ برسد — نه مزاحم کار است، نه قابل نادیده گرفتن.
 */
.waitnote {
  position: fixed; inset-block-end: 1rem; inset-inline-start: 50%;
  transform: translateX(50%);
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; z-index: 70;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 999px; box-shadow: var(--shadow-lg);
  font-size: .82rem; color: var(--c-text-2);
}
html[dir="ltr"] .waitnote { transform: translateX(-50%); }
.waitnote__dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--c-primary); animation: waitpulse 1s ease-in-out infinite;
}
@keyframes waitpulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .waitnote__dot { animation: none; } }
@media print { .waitnote { display: none !important; } }

/* ------------------------------ بخش‌های اجرایی و گانت ------------------------------ */
/*
 * کارِ ساختمان خطی نیست: یک پروژه چند بلوک دارد که هرکدام در فاز متفاوتی‌اند.
 * هر بخش اجرایی یک «چیپ» دارد و برنامه مستقل خودش؛ نمودار گانت همه را با هم
 * روی یک محور زمان نشان می‌دهد.
 */
.trackbar {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .75rem .9rem; border-bottom: 1px solid var(--c-border);
}
.trackchip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border: 1px solid var(--c-border); border-radius: 999px;
  background: var(--c-surface); color: var(--c-text-2);
  font: inherit; font-size: .82rem; cursor: pointer;
}
.trackchip:hover { background: var(--c-surface-2); }
.trackchip.is-active {
  background: var(--c-primary-l); border-color: var(--c-primary-l);
  color: var(--c-primary-d); font-weight: var(--fw-bold);
}
.trackchip__n { font-size: .7rem; color: var(--c-text-3); }
/* بخشی که هنوز برنامه‌ای ندارد — «برای تمام بخش‌ها باید برنامه باشد» */
.trackchip--empty { border-style: dashed; color: var(--c-text-3); }
.trackchip--empty .trackchip__n { color: var(--c-yellow); }
.trackchip.is-active .trackchip__n { color: var(--c-primary-d); }
.trackchip--add { border-style: dashed; color: var(--c-primary); }

.gantt-scroll { overflow-x: auto; }
.gantt { min-width: 520px; }
.gantt__row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: .5rem; }
.gantt__row--axis { height: 26px; }
.gantt__row--head { margin-top: .5rem; }
.gantt__label {
  font-size: .78rem; color: var(--c-text-2); text-align: start;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt__label--track { font-weight: var(--fw-bold); color: var(--c-text); }
.gantt__track {
  position: relative; height: 26px;
  border-top: 1px solid var(--c-border-soft, var(--c-border));
}
.gantt__row--axis .gantt__track { border-top: 0; }
.gantt__axis { position: relative; height: 100%; }
.gantt__tick {
  position: absolute; top: 0; font-size: .66rem; color: var(--c-text-3);
  transform: translateX(50%); white-space: nowrap;
}
html[dir="ltr"] .gantt__tick { transform: translateX(-50%); }
.gantt__bar {
  position: absolute; top: 4px; height: 18px; border-radius: 5px;
  background: var(--c-primary-l); border: 1px solid var(--c-primary);
  overflow: hidden; display: flex; align-items: center;
}
.gantt__bar.is-clickable { cursor: pointer; }
.gantt__bar.is-clickable:hover, .gantt__bar.is-clickable:focus-visible {
  border-color: var(--c-text); outline: none; }
/*
 * رنگ میله = وضعیت واقعی نسبت به برنامه، نه فقط «تمام شد یا نه».
 *
 * تفاوت سبز و زرد همان چیزی است که تا پیش از تاریخ‌دار شدن پیشرفت اصلاً
 * قابل گفتن نبود: فازی که سه ماه دیر تمام شد، با فازی که سر وقت تمام شد
 * یک شکل دیده می‌شد.
 */
.gantt__bar.is-overdue { background: var(--c-red-bg); border-color: var(--c-red); }
.gantt__bar.is-done, .gantt__bar.is-done-on-time {
  background: var(--c-green-bg); border-color: var(--c-green); }
.gantt__bar.is-done-late { background: var(--c-yellow-bg); border-color: var(--c-yellow); }
/*
 * «شروع‌نشده» عمداً رنگ خودش را ندارد: همان میله‌ی سادهٔ برنامه است و
 * راهنما هم همین را می‌گوید. اگر خاکستری شود، هر میله‌ای رنگی می‌گیرد و
 * کلید «برنامه» در راهنما به هیچ میله‌ای نمی‌خورد — یعنی نمودار شلوغ‌تر
 * می‌شود بی‌آنکه چیزی بیشتر بگوید.
 */
/* نام قدیمی، تا گانت‌هایی که هنوز وضعیت نمی‌دهند نشکنند */
.gantt__bar.is-late { background: var(--c-red-bg); border-color: var(--c-red); }
.gantt__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--c-primary); opacity: .35; }
.gantt__bartext {
  position: relative; padding: 0 .35rem; font-size: .66rem;
  color: var(--c-primary-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%;
}
.gantt__bar.is-late .gantt__bartext,
.gantt__bar.is-overdue .gantt__bartext { color: var(--c-red); }
.gantt__bar.is-done .gantt__bartext,
.gantt__bar.is-done-on-time .gantt__bartext { color: var(--c-green); }
.gantt__bar.is-done-late .gantt__bartext { color: var(--c-yellow); }
.gantt__now {
  position: absolute; inset-block: 0; width: 2px; background: var(--c-text-3);
  opacity: .55; pointer-events: none;
}
.gantt__legend {
  display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .7rem;
  font-size: .72rem; color: var(--c-text-3);
}
.gantt__legend span { display: inline-flex; align-items: center; gap: .3rem; }
.gantt__key {
  width: 14px; height: 10px; border-radius: 3px;
  background: var(--c-primary-l); border: 1px solid var(--c-primary);
}
.gantt__key--fill { background: var(--c-primary); border-color: var(--c-primary); }
.gantt__key--ontime { background: var(--c-green-bg); border-color: var(--c-green); }
.gantt__key--donelate { background: var(--c-yellow-bg); border-color: var(--c-yellow); }
.gantt__key--late { background: var(--c-red-bg); border-color: var(--c-red); }
.gantt__key--now { width: 2px; background: var(--c-text-3); border: 0; }

@media (max-width: 560px) {
  .gantt__row { grid-template-columns: 96px 1fr; }
}
@media print {
  .gantt-scroll { overflow: visible; }
  .gantt__bar, .gantt__fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* تراشه‌های قابل‌حذف (انواع اعتبار، حادثه‌ها) */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip__x {
  border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--c-text-3); padding: 0 0 0 .2rem; line-height: 1;
}
.chip__x:hover { color: var(--c-red); }