/* =========================================================================
   Parshan Surveying — Design Tokens
   الهام از دنیای نقشه‌برداری: کاغذ گراف، خطوط تراز توپوگرافی، پلاک برنجی
   ابزار دقیق، و رنگ پاتینه‌شده مس/برنز ابزارآلات ژئودتیک قدیمی.
   ========================================================================= */

/* فونت وزیرمتن از طریق لینک CDN در base.html بارگذاری می‌شود */

:root {
    /* رنگ‌بندی */
    --paper: #F1F3EF;         /* پس‌زمینه کلی: کاغذ گراف مایل به خاکستری-سبز */
    --surface: #FFFFFF;       /* سطح کارت‌ها */
    --ink: #1C2A25;           /* متن اصلی: مشکی مایل به سبز کاج */
    --ink-soft: #56655D;      /* متن ثانویه */
    --ink-faint: #8B978F;     /* متن کم‌رنگ / placeholder */
    --line: #DCE1D9;          /* خطوط جداکننده — مثل خطوط تراز */
    --line-strong: #C6CDC2;

    --teal: #2F6F62;          /* برند اصلی: سبز پاتینه‌ی برنز نقشه‌برداری */
    --teal-deep: #1F4E44;
    --teal-tint: #E4EEEC;

    --blueprint: #2B4C6F;     /* آبی طرح نقشه — برای لینک‌ها و اطلاعات */
    --blueprint-tint: #E6ECF2;

    --brass: #B8874A;         /* برنز ابزار — برای نشانگرها و هشدار ملایم */
    --brass-tint: #F5EBDA;

    --danger: #AE3B32;
    --danger-tint: #F6E7E5;

    /* تایپوگرافی */
    --font-main: "Vazirmatn", Tahoma, sans-serif;

    /* هندسه */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-card: 0 1px 2px rgba(28, 42, 37, 0.04), 0 4px 16px rgba(28, 42, 37, 0.06);

    /* فاز ۱۸ — مقیاس فاصله‌گذاری فشرده (به‌جای مقادیر پراکنده‌ی inline قبلی) */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 14px;
    --space-lg: 20px;
    /* فاز ۷۲B — دو پله‌ی بزرگ‌تر، برای فاصله‌ی بین بخش‌های سطح‌صفحه (نه داخل کارت) */
    --space-xl: 28px;
    --space-2xl: 40px;
    --card-padding: 16px;         /* پیش‌فرض همه‌ی کارت‌ها — قبلاً ۲۰px */
    --card-padding-compact: 12px; /* کارت‌های خلاصه‌ی سطح ۲ (بند ۷ فاز ۱۸) */
    --section-gap: var(--space-md);        /* فاصله‌ی بین بخش‌های اصلی صفحه */

    /* فاز ۷۲B — توکن‌های چیدمان سراسری: قبلاً ۲۲۰px/۶۴px مستقیم در دو جای
       مختلف CSS هاردکد بودند (بدون ارتباط رسمی با هم). این‌جا فقط همان دو
       مقدار موجود را به توکن تبدیل می‌کنیم — هیچ عددی تغییر نکرد. */
    --app-sidebar-width: 220px;
    --app-header-height: 64px;

    /* فاز ۷۲B — مقیاس تایپوگرافی: قبلاً هر selector عدد پیکسل خودش را
       مستقل تعریف می‌کرد (۲۲px عنوان صفحه، ۱۴.۵px عنوان کارت، ...) — این
       توکن‌ها همان اعداد موجود را نام‌گذاری می‌کنند تا کامپوننت‌های تازه از
       همان مقیاس پیروی کنند، نه اعداد دلبخواه تازه. مقادیر موجود صفحات
       فعلی دست‌نخورده می‌مانند (این توکن‌ها فقط برای کامپوننت‌های تازه‌ی
       همین فاز مصرف می‌شوند، نه جایگزینی retroactive سراسری). */
    --text-page-title: 22px;
    --text-section-title: 16px;
    --text-card-title: 14.5px;
    --text-body: 13.5px;
    --text-secondary: 12.5px;
    --text-metadata: 11.5px;
    --text-caption: 11px;

    /* فاز ۷۲B — رنگ‌های معنایی: نام‌گذاری مفهومی روی همان پالت رنگ موجود
       (teal/blueprint/brass/danger/paper) — هیچ رنگ فیزیکی تازه‌ای تعریف
       نشد، فقط یک لایه‌ی نام‌گذاری معنایی روی رنگ‌های از‌قبل موجود، تا
       کامپوننت‌های تازه بر اساس «معنی» انتخاب کنند نه «کدام کامپوننت». */
    --color-success: var(--teal);
    --color-success-tint: var(--teal-tint);
    --color-info: var(--blueprint);
    --color-info-tint: var(--blueprint-tint);
    --color-warning: var(--brass);
    --color-warning-tint: var(--brass-tint);
    --color-danger-tint: var(--danger-tint);
    --color-neutral: var(--ink-soft);
    --color-neutral-tint: var(--paper);
    /* «در انتظار» و «عقب‌افتاده» مفاهیم مستقل کسب‌وکاری‌اند (بند ۶ اصول
       محصولی فاز ۷۲A) — اما هر دو از‌قبل با همان دو رنگ warning/danger
       نمایش داده می‌شدند؛ این نام‌گذاری فقط همان تصمیم بصری موجود را صریح
       می‌کند، معنای کسب‌وکاری‌شان را ادغام نمی‌کند. */
    --color-waiting: var(--brass);
    --color-waiting-tint: var(--brass-tint);
    --color-overdue: var(--danger);
    --color-overdue-tint: var(--danger-tint);

    /* فاز ۷۰ (رفع F69-01 ممیزی فاز ۶۹): قبلاً یک عدد ثابت (۱۱۸۰px) در هر
       عرضی از ۹۸۰px تا بی‌نهایت تکرار می‌شد و در ۱۹۲۰px تنها ۵۲۰px (۲۷٪)
       فضای خالی و بی‌استفاده می‌ساخت. این یک تابع پیوسته‌ی واحد است، نه چند
       breakpoint: کف ۱۱۸۰px دقیقاً همان مقدار قبلی را در ۱۲۸۰/۱۳۶۶px حفظ
       می‌کند (چون عرض طبیعی باقی‌مانده بعد از سایدبار در آن عرض‌ها از ۱۱۸۰
       کمتر است و اصلاً به سقف نمی‌رسد)، سقف ۱۴۴۰px یک gutter واقعی و
       عمدی در عرض‌های خیلی بزرگ (۱۹۲۰px به بالا) تضمین می‌کند تا محتوا
       هرگز edge-to-edge نشود. عدد ۱۶۰px در calc صرفاً برای رسیدن به این
       دو لنگر (کف در ~۱۳۴۰px ویوپورت، سقف در ~۱۶۰۰px ویوپورت) انتخاب شده،
       نه یک مقدار دلبخواه. */
    --app-content-max-width: clamp(1180px, calc(100vw - 160px), 1440px);
}

* { box-sizing: border-box; }

html, body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* لایه محافظ: کل صفحه هیچ‌وقت به‌صورت افقی اسکرول نشود */
    max-width: 100vw;
}

body {
    /* بافت ظریف کاغذ گراف در پس‌زمینه کل صفحه */
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 32px 32px;
    background-attachment: fixed;
    background-color: var(--paper);
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--teal-tint); color: var(--teal-deep); }

/* اسکرول‌بار سبک */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }

/* =========================================================================
   ساختار کلی: هدر / سایدبار / محتوا / فوتر
   ========================================================================= */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 28px;
    height: var(--app-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 30;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--paper); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    padding: 4px; flex-shrink: 0;
}
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: -0.2px; }
.brand-sub { font-size: 11px; color: var(--ink-faint); margin-top: -2px; }

.header-user { display: flex; align-items: center; gap: 14px; }
.header-user .name { font-weight: 600; font-size: 14px; }
.header-user .role-badge {
    font-size: 11px; color: var(--teal-deep); background: var(--teal-tint);
    padding: 2px 9px; border-radius: 20px; font-weight: 600;
}

/* دکمه همبرگری — فقط در موبایل نمایش داده می‌شود */
.hamburger-btn {
    display: none;
    flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong);
    background: var(--surface); cursor: pointer; flex-shrink: 0;
}
.hamburger-btn span { width: 16px; height: 2px; background: var(--ink); margin: 0 auto; border-radius: 2px; }

.sidebar-close { display: none; }

.nav-overlay {
    display: none; position: fixed; inset: 0; background: rgba(28,42,37,0.4); z-index: 40;
}
.nav-overlay.open { display: block; }

.btn-logout {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--danger);
    background: var(--danger-tint); padding: 7px 14px; border-radius: 10px;
    border: none; cursor: pointer;
}
.btn-logout:hover { filter: brightness(0.96); }

.app-body { display: flex; flex: 1; min-width: 0; }

.app-sidebar {
    width: var(--app-sidebar-width); flex-shrink: 0;
    background: var(--surface);
    border-inline-start: 1px solid var(--line);
    padding: 20px 14px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.sidebar-link:hover { background: var(--paper); color: var(--ink); }
.sidebar-link.active { background: var(--teal-tint); color: var(--teal-deep); }
.sidebar-link .dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55;
    flex-shrink: 0;
}
/* فاز ۱۷ (بند ۲۲): گروه‌بندی سایدبار — عنوان غیرقابل‌کلیک هر گروه + زیرلینک‌های تورفته */
.sidebar-group-label {
    font-size: 11px; font-weight: 700; color: var(--ink-faint);
    padding: 10px 12px 2px; margin-top: 6px;
}
.sidebar-link.sidebar-sub { padding-inline-start: 28px; font-size: 13px; }

.app-main { flex: 1; min-width: 0; padding: 28px 32px; max-width: var(--app-content-max-width); }

.app-footer {
    border-top: 1px solid var(--line);
    padding: 16px 28px;
    font-size: 12px; color: var(--ink-faint);
    display: flex; justify-content: space-between;
    background: var(--surface);
}

/* =========================================================================
   عناصر عمومی
   ========================================================================= */
.eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: var(--teal-deep);
    letter-spacing: 0.3px; margin-bottom: 6px;
}
.eyebrow::before {
    content: "+"; display: inline-block; color: var(--brass);
    font-weight: 800; font-size: 13px;
}

.page-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.3px; }
.page-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 22px; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--card-padding);
    height: auto; /* بند ۸ فاز ۱۸: هیچ کارتی ارتفاع ثابت/حداقلی ندارد که فضای خالی بسازد */
}

/* فاز ۱۸ (بند ۷): کارت‌های خلاصه‌ی مدیریتی (سطح ۲) — نیاز به اقدام عمداً از
   این کلاس استفاده نمی‌کند تا نسبت به بقیه، کمی فراخ‌تر و برجسته‌تر بماند */
.card-compact { padding: var(--card-padding-compact); }

.card-title {
    font-size: 14.5px; font-weight: 700; margin: 0 0 var(--space-sm);
    display: flex; align-items: center; justify-content: space-between;
}
/* فاز ۱۸ (بند ۹): سرصفحه‌ی فشرده‌تر برای کارت‌های خلاصه — گپ کمتر تا محتوا */
.card-compact > .card-title { margin-bottom: var(--space-xs); font-size: 13.5px; }

/* فاز ۱۸ (بند ۱۹): فاصله‌ی یکدست بین بخش‌های اصلی صفحه (به‌جای margin-bottom
   پراکنده‌ی inline قبلی روی هر کارت) — استفاده: چند کارت/عنصر پشت‌سرهم داخل
   یک والد با این کلاس */
.section-stack > * { margin-bottom: var(--section-gap); }
.section-stack > *:last-child { margin-bottom: 0; }

/* فاز ۱۸ (بند ۱۰/۲۸): ردیف فشرده — جایگزین card-in-card برای آیتم‌های لیستی
   (صف اقدام، اولویت‌های من) — یک نوار رنگی سمت راست به‌جای border دورتادور
   و shadow کامل، تا هم severity واضح بماند و هم فضای کمتری بگیرد */
.compact-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-sm); flex-wrap: wrap;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--paper);
    border-inline-start: 3px solid var(--line-strong);
}
.compact-row.severity-critical { border-inline-start-color: var(--danger); background: var(--danger-tint); }
.compact-row.severity-attention { border-inline-start-color: var(--brass); background: var(--brass-tint); }
.compact-row.clickable { cursor: pointer; transition: filter .12s ease; }
.compact-row.clickable:hover { filter: brightness(0.98); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }

/* فاز ۷۱ — صفحه‌ی «امروز»: ردیف «نیاز به اقدام» (پهن‌تر) کنار «اولویت‌های
   من» (باریک‌تر). فاز ۷۲B: همین primitive با نام عمومی «grid-main-side»
   هم در دسترس است تا صفحات دیگر بتوانند بدون وابستگی به نام today-* از آن
   استفاده کنند — هر دو نام دقیقاً همان یک قانون CSS را می‌گیرند. */
.grid-main-side, .today-action-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-md); }

/* قاعده‌ی سراسری موبایل باید بعد از تعریف پایه‌ی بالا بیاید — وگرنه در
   CSS، ترتیب سند برنده می‌شود و media query نادیده گرفته می‌شود (باگی که
   در فاز ۷۱ کشف و رفع شد؛ همان قاعده این‌جا رعایت می‌شود). */
@media (max-width: 980px) { .grid-2, .grid-3, .grid-main-side, .today-action-row { grid-template-columns: minmax(0, 1fr); } }

/* فاز ۷۱ — جفت KPI اختیاری «وصول»/«پروژه‌های نیازمند توجه»: هر دو مستقلاً
   ممکن است غایب باشند (دو مجوز متفاوت: view_case_finance در برابر
   view_all_cases/manage_cases). auto-fit به‌جای دو ستون ثابت، تا اگر فقط
   یکی حاضر بود یک ستون خالی/تهی ایجاد نشود — همان کارت به‌تنهایی تمام‌عرض
   می‌شود؛ در موبایل هم بدون نیاز به media query جداگانه به تک‌ستون می‌افتد. */
.today-kpi-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-md); }

.stat-card { padding: 18px 20px; }
.stat-number { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.stat-label { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* =========================================================================
   فاز ۷۲B — سیستم طراحی مشترک (Shared Design System Foundation)
   بر اساس بلوپرینت فاز ۷۲A. هر کلاس زیر presentation-only است — هیچ منطق
   کسب‌وکاری/داده‌ای در CSS نیست.
   ========================================================================= */

/* --- Page Header (مصرف‌شده توسط macro مشترک app/templates/macros/_page_header.html) --- */
.page-header { margin-bottom: var(--space-lg); }
.page-header-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-md); flex-wrap: wrap;
}
.page-header-titles { min-width: 0; flex: 1 1 auto; }
/* فاز ۷۲D (رفع یافته‌ی QA بصری ۳۷۵px): flex-shrink:0 این‌جا وقتی فقط ۱-۲
   اکشن بود بی‌خطر بود، اما با ۶ اکشن (Quick Actions مرکز کنترل مدیریت) روی
   ردیف اختصاصی خودش (بعد از شکستن از عنوان)، شرینک‌نشدن یعنی عرض این
   کانتینر همیشه برابر عرض بدون‌wrap کامل محتوایش می‌ماند — یعنی هرگز به
   عرض واقعی صفحه محدود نمی‌شد و از ۳۷۵px سرریز افقی واقعی می‌ساخت.
   min-width:0 (نه flex-shrink:0) دقیقاً همان قصد اصلی فاز ۷۲B را حفظ
   می‌کند («دکمه‌ها هرگز فشرده/ریز نمی‌شوند») چون flex-wrap:wrap خودِ این
   کانتینر مسئول شکستن دکمه‌ها به چند ردیف داخلی است، نه شرینک‌شدن متن آن‌ها؛
   min-width:0 فقط اجازه می‌دهد کانتینر به عرض واقعی موجود محدود شود تا آن
   شکستن داخلی واقعاً فعال شود. */
.page-header-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.page-header-titles .page-title { margin-bottom: 2px; }

/* --- Metric Card: ادغام دو الگوی قبلی .stat-card/.finance-pill --- */
.metric-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md); flex: 1 1 auto; min-width: 108px;
}
.metric-card-label { font-size: var(--text-metadata); font-weight: 700; color: var(--ink-faint); }
.metric-card-value { font-size: 19px; font-weight: 800; margin-top: 2px; color: var(--ink); }
.metric-card-secondary { font-size: var(--text-caption); color: var(--ink-soft); margin-top: 1px; }
a.metric-card { text-decoration: none; display: block; transition: border-color .12s ease; }
a.metric-card:hover { border-color: var(--teal); }
.metric-card.tone-success { background: var(--color-success-tint); border-color: transparent; }
.metric-card.tone-success .metric-card-value { color: var(--color-success); }
.metric-card.tone-info { background: var(--color-info-tint); border-color: transparent; }
.metric-card.tone-info .metric-card-value { color: var(--color-info); }
.metric-card.tone-warning { background: var(--color-warning-tint); border-color: transparent; }
.metric-card.tone-warning .metric-card-value { color: #8A5F2A; }
.metric-card.tone-danger { background: var(--color-danger-tint); border-color: transparent; }
.metric-card.tone-danger .metric-card-value { color: var(--color-overdue); }
.metric-card-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

/* --- Metadata: جفت برچسب/مقدار یکدست، برای همه‌ی زمینه‌های بافتی (کارفرما/پرونده/مسئول/سررسید/...) --- */
.metadata-list { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
.metadata-list.stacked { flex-direction: column; gap: var(--space-sm); }
.metadata-item { min-width: 0; }
.metadata-item-label { font-size: var(--text-metadata); font-weight: 700; color: var(--ink-faint); }
.metadata-item-value { font-size: var(--text-body); font-weight: 700; color: var(--ink); margin-top: 2px; }
.metadata-item-value a { color: var(--color-info); }
.metadata-item-value.muted { font-weight: 600; color: var(--ink-soft); }

/* --- Context Block: قاب بافتی که فاز ۷۲C آن را با داده‌ی کارفرما/مسئول
   پروژه پر می‌کند (این فاز فقط ساختار بصری را می‌سازد، طبق دستور صریح). --- */
.context-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-md); }

/* --- Task Row (چگالی قابل‌تنظیم: compact/standard/detailed) --- */
.task-row-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface);
}
a.task-row-item, .task-row-item[data-href] { cursor: pointer; transition: border-color .12s ease; }
a.task-row-item:hover, .task-row-item[data-href]:hover { border-color: var(--teal); }
.task-row-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.task-row-item-title {
    font-size: var(--text-body); font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.task-row-item-title.done { text-decoration: line-through; color: var(--ink-faint); }
.task-row-item-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    font-size: var(--text-metadata); color: var(--ink-soft);
}
.task-row-item-dot { color: var(--ink-faint); }
.task-row-list { display: flex; flex-direction: column; gap: var(--space-xs); }

/* --- Case/Project Row --- */
.case-row-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap;
    padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
a.case-row-item { cursor: pointer; transition: border-color .12s ease; text-decoration: none; }
a.case-row-item:hover { border-color: var(--teal); }
.case-row-item-title { font-size: var(--text-body); font-weight: 700; color: var(--ink); }
.case-row-item-meta { font-size: var(--text-metadata); color: var(--ink-soft); margin-top: 2px; }

/* --- Filter Grid: چیدمان افقی فیلدهای فیلتر، از فضای دسکتاپ بهتر استفاده می‌کند --- */
.filter-grid { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: flex-start; }
.filter-grid-field { min-width: 180px; }

/* --- Empty State: عنوان + توضیح + اکشن اختیاری --- */
.empty-state-title { font-weight: 700; color: var(--ink-soft); font-size: var(--text-body); margin-bottom: 2px; }
.empty-state-desc { font-size: var(--text-secondary); }
.empty-state-action { margin-top: var(--space-sm); }

/* --- Return Link (نمایش استاندارد return_to فاز ۶۷ — بدون تغییر منطق).
   فلش با ::before تزریق می‌شود، نه یک <span> داخل متن anchor — تا محتوای
   متنی واقعی لینک همان برچسب خام (بدون عنصر اضافه) بماند و تست‌های موجود
   فاز ۶۷ که روی substring دقیق ">{برچسب}<" تطبیق می‌دهند نشکنند. --- */
.return-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--space-md); color: var(--ink-soft); font-size: var(--text-secondary); font-weight: 600;
}
.return-link:hover { color: var(--teal-deep); }
.return-link::before { content: "←"; font-size: 14px; }

/* --- Focus-visible: قابل‌مشاهده برای ناوبری کیبورد، در سراسر عناصر تعاملی موجود --- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px;
}

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.badge-teal { background: var(--teal-tint); color: var(--teal-deep); }
.badge-brass { background: var(--brass-tint); color: #8A5F2A; }
.badge-blue { background: var(--blueprint-tint); color: var(--blueprint); }
.badge-danger { background: var(--danger-tint); color: var(--danger); }
.badge-muted { background: var(--paper); color: var(--ink-soft); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--font-main); font-size: 13.5px; font-weight: 700;
    padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; transition: filter .12s ease, transform .12s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); }
.btn-outline { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal-deep); }
.btn-danger-outline { background: var(--danger-tint); color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; }

.form-field { margin-bottom: 14px; }
.form-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.form-input, .form-select, textarea.form-input {
    width: 100%; font-family: var(--font-main); font-size: 14px;
    padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--surface); color: var(--ink);
}
.form-input:focus, .form-select:focus, textarea.form-input:focus {
    outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint);
}

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th {
    text-align: right; font-size: 11.5px; font-weight: 700; color: var(--ink-faint);
    padding: 8px 10px; border-bottom: 1px solid var(--line);
}
table.data-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--paper); }

/* تاریخچه‌ی رویدادها (مثل ارجاعات تسک) — دایره و متن در یک ردیف فلکس، نه با
   موقعیت‌دهی absolute، تا هیچ‌وقت متن روی دایره نیفتد */
.timeline-item { display: flex; align-items: flex-start; gap: 10px; position: relative; padding-bottom: 16px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before {
    content: ""; position: absolute; top: 18px; bottom: -4px; inset-inline-start: 5px;
    width: 2px; background: var(--line);
}
.timeline-dot {
    flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--surface); margin-top: 4px; box-shadow: 0 0 0 1px var(--line);
}
.timeline-dot.brass { background: var(--brass); }
.timeline-dot.teal { background: var(--teal); }
.timeline-body { min-width: 0; flex: 1; }
.timeline-title { font-size: 13px; font-weight: 700; }

.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.flash {
    padding: 11px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
}
.flash-success { background: var(--teal-tint); color: var(--teal-deep); }
.flash-danger { background: var(--danger-tint); color: var(--danger); }
.flash-warning { background: var(--brass-tint); color: #8A5F2A; }
.flash-info { background: var(--blueprint-tint); color: var(--blueprint); }

.empty-state {
    text-align: center; padding: 36px 20px; color: var(--ink-faint); font-size: 13.5px;
}

/* =========================================================================
   تقویم شمسی — عنصر شاخص طراحی: سلول‌های گراف با پلاک/پرچم برای تسک‌ها
   ========================================================================= */
.jcal { }
.jcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.jcal-title { font-size: 15px; font-weight: 800; }
.jcal-nav { display: flex; gap: 6px; }
.jcal-nav button {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong);
    background: var(--surface); cursor: pointer; font-size: 14px; color: var(--ink-soft);
    display: flex; align-items: center; justify-content: center;
}
.jcal-nav button:hover { border-color: var(--teal); color: var(--teal-deep); }
.jcal-nav button.jcal-today-btn { width: auto; padding: 0 12px; font-size: 12px; font-weight: 700; }

.jcal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.jcal-weekdays span {
    text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-faint); padding: 6px 0;
}

.jcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.jcal-cell {
    position: relative;
    min-width: 0; /* اجازه می‌دهد ستون گرید با عنوان بلند تسک (white-space: nowrap) عریض نشود */
    min-height: 66px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 10px 10px;
    background-color: var(--surface);
    padding: 6px;
    cursor: pointer;
    transition: border-color .12s ease;
}
.jcal-cell:hover { border-color: var(--teal); }
.jcal-cell.is-other-month { opacity: 0.35; cursor: default; }
.jcal-cell.is-today { border-color: var(--teal); border-width: 2px; }
.jcal-cell.is-selected { background-color: var(--teal-tint); }
.jcal-cell.is-friday .jcal-daynum { color: var(--danger); }
.jcal-cell.is-overdue { border-color: var(--danger); }
.jcal-cell.is-overdue .jcal-daynum { color: var(--danger); }

.jcal-daynum { font-size: 12.5px; font-weight: 700; }

.jcal-today-pin {
    position: absolute; top: 5px; left: 5px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
}

/* نقطه‌های ریز به‌جای عنوان کامل تسک‌ها — خلاصه و تمیز، عنوان با هاور دیده می‌شود */
.jcal-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; align-items: center; }
.jcal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.jcal-dot.done { background: var(--line-strong); }
.jcal-dot.assigned { background: var(--brass); }
.jcal-dot.overdue { background: var(--danger); }
.jcal-dot.followup { border-radius: 2px; }
.jcal-dot-more { font-size: 9px; font-weight: 700; color: var(--ink-faint); }

/* پنل جزئیات روز انتخاب‌شده */
.jcal-day-panel { margin-top: 16px; border-top: 1px dashed var(--line-strong); padding-top: 14px; }
.jcal-day-panel-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--ink-soft); }

/* پنل فیلترهای جمع‌شونده — پیش‌فرض بسته، با آیکون قیف باز/بسته می‌شود */
.filter-panel { margin-bottom: 16px; }
.filter-panel > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary:hover { border-color: var(--teal); color: var(--teal-deep); }
.filter-panel[open] > summary { border-color: var(--teal); color: var(--teal-deep); background: var(--teal-tint); }
.filter-panel-body { margin-top: 10px; }

/* اکشن‌های inline صفحه Inbox (زمان‌بندی/واگذاری/پیگیری) — details بدون فلش پیش‌فرض */
.inbox-action { display: inline-block; }
.inbox-action > summary { list-style: none; }
.inbox-action > summary::-webkit-details-marker { display: none; }
.inbox-action-form { margin-top: 8px; padding: 12px; min-width: 260px; }
.inbox-item.is-aging { border-color: var(--brass); }

/* =========================================================================
   فاز ۲۰ — ردیف فشرده‌ی موبایل برای جدول‌های پرستون (data-table-cards قبلی
   هر ستون را به یک بلوک عمودی کامل تبدیل می‌کرد؛ این کامپوننت به‌جای آن،
   فیلدها را در چند خط معنادار (عنوان+وضعیت / خلاصه / اقدام بعدی / اقدامات)
   گروه می‌کند). فقط برای صفحاتی استفاده می‌شود که ممیزی فاز ۱۹ آن‌ها را
   به‌عنوان بحرانی مشخص کرده — جدول دسکتاپ دست‌نخورده باقی می‌ماند و با
   .desktop-only/.mobile-only بین دو حالت جابه‌جا می‌شود. */
.data-rows { display: flex; flex-direction: column; gap: var(--space-xs); }
.data-row {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: var(--space-sm); background: var(--surface);
    display: flex; flex-direction: column; gap: 4px;
}
a.data-row, .data-row[onclick] { cursor: pointer; transition: border-color .12s ease; }
a.data-row:hover, .data-row[onclick]:hover { border-color: var(--teal); }
.data-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.data-row-title {
    font-size: 13.5px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.data-row-sub, .data-row-stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    font-size: 12px; color: var(--ink-soft);
}
.data-row-next { font-size: 12px; color: var(--ink-soft); }
.data-row-flag { font-size: 12px; font-weight: 600; }
.data-row-flag-danger { color: var(--danger); }
.data-row-alert { color: var(--danger); font-weight: 700; }
.data-row-dot { color: var(--ink-faint); }
.data-row-actions { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.data-row-actions .form-select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12.5px; }
.data-row-actions .btn { flex-shrink: 0; }

/* پیش‌فرض: دسکتاپ فقط جدول را نشان می‌دهد، موبایل فقط ردیف‌های فشرده را.
   سوییچ واقعی در تایر ۸۶۰px پایین‌تر (کنار قوانین data-table-cards) است. */
.mobile-only { display: none; }

/* فاز ۲۱ — خلاصه‌ی وضعیت تیمی (کنترل پروژه/وصول): برخلاف data-row فاز ۲۰
   (که برای جدول‌های پرستون با نمایش دوگانه‌ی دسکتاپ/موبایل ساخته شد)، این
   دو جدول کوچک (۵ ستون، چند نفر عضو تیم) با یک ساختار معنایی واحد در هر دو
   اندازه کار می‌کنند — بدون نیاز به نسخه‌ی جدول جداگانه برای دسکتاپ. */
.team-status-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.team-status-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--paper);
    border: 1px solid var(--line);
}
.team-status-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.team-status-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.team-status-primary { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; flex-shrink: 0; }
.team-status-metrics {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    font-size: 12px; color: var(--ink-soft);
}
.team-status-alert { color: var(--danger); font-weight: 700; }
.team-status-dot { color: var(--ink-faint); }

/* فاز ۲۱: روی دسکتاپ (جایی که عرض کافی هست)، نام+معیار اصلی و معیارهای
   فرعی در یک خط قرار می‌گیرند — چگالی حتی از جدول قبلی هم بهتر می‌شود،
   نه فقط «قابل‌خواندن» */
@media (min-width: 860px) {
    .team-status-row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-md); }
    .team-status-main { flex: 0 0 auto; }
    .team-status-metrics { flex: 0 0 auto; justify-content: flex-end; }
}

.task-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
    margin-bottom: 8px; background: var(--surface); flex-wrap: wrap;
}
.task-row:last-child { margin-bottom: 0; }
a.task-row { cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
a.task-row:hover { border-color: var(--teal); background: var(--teal-tint); }
.task-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.task-check {
    width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--line-strong);
    flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
    background: transparent;
}
.task-check.checked { background: var(--teal); border-color: var(--teal); color: #fff; font-size: 11px; }
.task-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.task-title.done { text-decoration: line-through; color: var(--ink-faint); }
.task-meta { font-size: 11.5px; color: var(--ink-faint); flex-shrink: 0; }

/* مودال ساده */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(28, 42, 37, 0.45);
    display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: var(--surface); border-radius: var(--radius-lg);
    padding: 24px; width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-size: 16px; font-weight: 800; }
.modal-close { border: none; background: var(--paper); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }

.finance-summary { display: flex; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.finance-pill { flex: 1; border-radius: 12px; padding: var(--space-sm) var(--space-md); }
.finance-pill.received { background: var(--teal-tint); }
.finance-pill.expense { background: var(--danger-tint); }
.finance-pill.balance { background: var(--blueprint-tint); }
.finance-pill.promise { background: var(--brass-tint); }
.finance-pill.muted { background: var(--paper); }
.finance-pill .label { font-size: 11px; font-weight: 700; opacity: 0.75; }
.finance-pill .value { font-size: 18px; font-weight: 800; margin-top: 2px; }

.upload-drop {
    border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 18px;
    text-align: center; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px;
}

/* =========================================================================
   تب‌های صفحه پرونده
   ========================================================================= */
.case-tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
    overflow-x: auto;
}
.case-tab {
    font-family: var(--font-main); font-size: 13.5px; font-weight: 700; color: var(--ink-faint);
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 10px 16px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.case-tab:hover { color: var(--ink); }
.case-tab.active { color: var(--teal-deep); border-bottom-color: var(--teal); }
.case-tab-panel { display: none; }
.case-tab-panel.active { display: block; }

/* =========================================================================
   فاز ۵۰ — Kanban کارمند (فقط‌خواندنی)
   دقیقاً هم‌الگوی .case-tabs بالا: ناحیه‌ی اسکرول افقیِ محصورشده، نه اسکرول
   سطح صفحه (که با overflow-x:hidden روی body قفل است). روی موبایل (۳۷۵px)
   ستون‌ها به‌جای فشرده‌شدن، به‌صورت افقی قابل‌اسکرول می‌مانند.
   ========================================================================= */
.kanban-board {
    display: flex; gap: var(--space-sm); overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-xs);
}
.kanban-column {
    flex: 0 0 260px; min-width: 260px; max-width: 260px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs);
}
.kanban-column-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13.5px; font-weight: 700; padding: 2px 2px var(--space-xs);
    border-bottom: 1px solid var(--line); margin-bottom: 2px;
}
.kanban-column-body { display: flex; flex-direction: column; gap: var(--space-xs); min-height: 40px; }
.kanban-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card); padding: var(--space-xs) var(--space-sm);
}
.kanban-card a:hover { opacity: .85; }

/* فاز ۵۱ — دکمه‌های جابه‌جایی کارت: فرم POST سنتی مستقل به‌ازای هر مقصد،
   نه لینک/drag — با JS غیرفعال هم کار می‌کند. هر فرم داخل یک flex-wrap
   قرار می‌گیرد تا روی ستون باریک موبایل هم بشکند، نه سرریز کند. */
.kanban-move-row {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: var(--space-xs);
    padding-top: var(--space-xs); border-top: 1px solid var(--line);
}
.kanban-move-form { display: inline-block; margin: 0; }
.kanban-move-btn { font-size: 11px; padding: 3px 8px; line-height: 1.6; }

@media (max-width: 480px) {
    .kanban-column { flex: 0 0 84vw; min-width: 84vw; max-width: 84vw; }
}

@media (max-width: 860px) {
    .hamburger-btn { display: flex; }

    .app-header { padding: 0 14px; height: 58px; }
    .brand-sub { display: none; }
    .brand-name { font-size: 15px; }
    .header-user .name { font-size: 12.5px; }
    .header-user .role-badge { display: none; }
    .header-user { gap: 8px; }

    .app-sidebar {
        position: fixed; top: 0; bottom: 0; right: -260px;
        width: 240px; z-index: 50; transition: right .2s ease;
        box-shadow: -8px 0 24px rgba(0,0,0,0.12);
        overflow-y: auto;
    }
    .app-sidebar.open { right: 0; }
    .sidebar-close {
        display: block; margin-bottom: 10px; margin-inline-start: auto;
        width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong);
        background: var(--surface); font-size: 16px; color: var(--ink-soft); cursor: pointer;
    }

    .app-main { padding: 16px 14px; }
    .jcal-cell { min-height: 52px; }

    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
    /* فاز ۱۸ (بند ۲۰): قبلاً finance-pillها روی موبایل یکی‌زیر‌دیگری کامل
       stack می‌شدند (ستون تک، هرکدام تمام‌عرض) — با wrap، ۲-۳ تا در هر ردیف
       جا می‌شوند و ارتفاع بخش خلاصه‌ی پروژه‌ها/مالی روی موبایل چند برابر کمتر می‌شود */
    .finance-summary { flex-wrap: wrap; gap: var(--space-xs); }
    .finance-pill { flex: 1 1 auto; min-width: 96px; }
    /* فاز ۷۲B — هم‌الگوی finance-pill بالا: در موبایل metric-cardها هم به‌جای
       stack تک‌ستونه، ۲-۳ تا در هر ردیف جا می‌شوند. */
    .metric-card-row { gap: var(--space-xs); }
    .metric-card { min-width: 96px; padding: var(--space-xs) var(--space-sm); }
    .app-footer { flex-direction: column; gap: 4px; text-align: center; padding: 14px; }

    /* فاز ۱۸ (بند ۷/۲۰): فاصله‌گذاری فشرده‌تر روی موبایل */
    :root { --card-padding: 12px; --card-padding-compact: 10px; --section-gap: var(--space-sm); }
    .card-title { margin-bottom: var(--space-xs); }

    /* جدول‌های ساده (کم‌ستون، مثل لیست کارفرمایان) همان شکل جدول واقعی‌شان را
       روی موبایل هم حفظ می‌کنند — فقط دیگر مجبور به عرض حداقلی نیستند */
    .table-scroll { overflow-x: visible; }
    table.data-table { min-width: 0; }

    /* جدول‌های پهن (ستون زیاد) با کلاس data-table-cards روی موبایل به‌جای
       اسکرول افقی، هر ردیف به یک کارت عمودی تبدیل می‌شوند (برچسب هر مقدار
       از data-label می‌آید) تا کل عرض صفحه جا شود */
    table.data-table-cards thead { display: none; }
    table.data-table-cards, table.data-table-cards tbody, table.data-table-cards tr, table.data-table-cards td {
        display: block; width: 100%;
    }
    table.data-table-cards tr {
        border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; margin-bottom: 10px;
    }
    table.data-table-cards td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 8px 0; border-bottom: 1px solid var(--line);
    }
    table.data-table-cards td:last-child { border-bottom: none; }
    table.data-table-cards td[data-label]::before {
        content: attr(data-label); font-size: 11.5px; font-weight: 700; color: var(--ink-faint); flex-shrink: 0;
    }
    table.data-table-cards td:not([data-label]) { justify-content: flex-end; }

    /* فاز ۲۰ (بند ۱۸/۲۴): برای جدول‌های شناسایی‌شده در ممیزی فاز ۱۹ (کنترل
       پروژه، مسئولیت/واگذاری، وصول)، به‌جای تبدیل خودکار هر ستون به یک بلوک
       عمودی، جدول دسکتاپ کامل مخفی و ردیف‌های فشرده‌ی معنادار جایگزین می‌شود */
    .desktop-only { display: none; }
    .mobile-only { display: block; }
}

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

@media (max-width: 480px) {
    .page-title { font-size: 19px; }
    .stat-number { font-size: 22px; }
    /* فاز ۱۸: padding کارت دیگر این‌جا هاردکد نیست — از --card-padding
       (که در تایر ۸۶۰px پایین‌تر تنظیم شده) پیروی می‌کند */
}

/* =========================================================================
   دیت‌پیکر شمسی (popover قابل اتصال به هر input)
   ========================================================================= */
.jdp-popover {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; display: none;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(28,42,37,0.18);
    padding: 12px; width: 260px; max-width: calc(100vw - 24px);
}
.jdp-popover.open { display: block; }
.jdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jdp-title { font-size: 13px; font-weight: 700; }
.jdp-nav { display: flex; gap: 4px; }
.jdp-nav button {
    width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line-strong);
    background: var(--surface); cursor: pointer; font-size: 12px; color: var(--ink-soft);
}
.jdp-weekdays { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 4px; }
.jdp-weekdays span { text-align: center; font-size: 10px; font-weight: 700; color: var(--ink-faint); }
.jdp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.jdp-day {
    aspect-ratio: 1; border: none; border-radius: 6px; background: transparent;
    font-family: var(--font-main); font-size: 11.5px; cursor: pointer; color: var(--ink);
}
.jdp-day:hover { background: var(--paper); }
.jdp-day.today { border: 1px solid var(--teal); }
.jdp-day.selected { background: var(--teal); color: #fff; }
.jdp-today-btn {
    width: 100%; margin-top: 8px; border: none; background: var(--teal-tint); color: var(--teal-deep);
    border-radius: 8px; padding: 6px; font-family: var(--font-main); font-size: 12px; font-weight: 700; cursor: pointer;
}