/* =========================================================================
   سیستم طراحی پنل CRM لوتوس‌تل
   Modern SaaS + Bento Grid + Card Based UI + Minimalism + Dark/Light + Micro Animations
   -------------------------------------------------------------------------
   ساختار این فایل:
     ۱) توکن‌های طراحی (رنگ، فاصله، شعاع، سایه) به‌صورت متغیر CSS برای دو تم
     ۲) پایه‌ها و تایپوگرافی فارسی/RTL
     ۳) اسکلت صفحه: نوار کناری + نوار بالا + محتوا (کاملاً ریسپانسیو)
     ۴) Bento Grid و کارت‌ها
     ۵) اجزا: دکمه، فرم، نشان (Badge)، جدول، خالی‌بودن، اعلان
     ۶) میکرو انیمیشن‌ها
     ۷) نقاط شکست موبایل و تبلت
   ========================================================================= */

/* =========================================================================
   ۱) توکن‌های طراحی — تم روشن (پیش‌فرض)
   ========================================================================= */
:root {
    /* رنگ برند لوتوس‌تل — قرمز/سفید/مشکی طبق پالت رسمی */
    --brand-50: #fdecec;
    --brand-100: #fbd6d4;
    --brand-300: #ef6b62;
    --brand-500: #e10600;
    --brand-600: #990000;
    --brand-700: #700000;

    /* رنگ مکمل برای تأکیدهای ثانویه */
    --accent-500: #7c5cff;
    --accent-100: #eee9ff;

    /* رنگ‌های وضعیت */
    --success-500: #14a06a;
    --success-100: #e2f7ee;
    --warning-500: #d98613;
    --warning-100: #fdf1de;
    --danger-500: #d9453e;
    --danger-100: #fdeaea;
    --info-500: #0e8fa8;
    --info-100: #e0f5f9;

    /* سطوح (پس‌زمینه، کارت، حاشیه) */
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #f9fafc;
    --surface-hover: #f2f5fa;
    --border: #e4e8f0;
    --border-strong: #ccd4e2;

    /* متن */
    --text: #0d0d0d;
    --text-muted: #5d6b80;
    --text-faint: #8b98ab;
    --text-on-brand: #ffffff;

    /* شعاع گوشه */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-full: 999px;

    /* سایه‌ها — در تم روشن نرم، در تم تیره تقریباً حذف می‌شوند */
    --shadow-sm: 0 1px 2px rgba(16, 27, 43, .06);
    --shadow-md: 0 4px 16px rgba(16, 27, 43, .07);
    --shadow-lg: 0 12px 36px rgba(16, 27, 43, .10);

    /* فاصله‌گذاری */
    --gap: 16px;
    --pad: 20px;

    /* عرض نوار کناری */
    --sidebar-w: 250px;

    /* مدت زمان میکرو انیمیشن‌ها */
    --t-fast: .14s;
    --t: .22s;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   ۱-ب) تم تیره — با data-theme روی <html> فعال می‌شود
   ========================================================================= */
:root[data-theme="dark"] {
    /* در تم تیره، برند باید روشن‌تر/پرتضادتر شود؛ همان قرمز اما سرزنده‌تر برای خوانایی روی پس‌زمینه مشکی */
    --brand-50: #260c0b;
    --brand-100: #3a1210;
    --brand-300: #b33128;
    --brand-500: #ff453a;
    --brand-600: #ff6b61;
    --brand-700: #ff8f87;

    --accent-500: #9b83ff;
    --accent-100: #241d45;

    --success-500: #3ecf95;
    --success-100: #12291f;
    --warning-500: #f0ad4e;
    --warning-100: #2e2314;
    --danger-500: #ff6b63;
    --danger-100: #33191a;
    --info-500: #3fc3dd;
    --info-100: #12262c;

    /* سطوح مشکی خالص طبق پالت رسمی (نه آبی‌تیره قبلی) */
    --bg: #0a0a0a;
    --surface: #161616;
    --surface-2: #1c1c1c;
    --surface-hover: #222222;
    --border: #2c2c2c;
    --border-strong: #3a3a3a;

    --text: #f5f5f5;
    --text-muted: #a8a8a8;
    --text-faint: #757575;
    --text-on-brand: #ffffff;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .40);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, .50);
}

/* اگر کاربر هنوز تمی انتخاب نکرده، از ترجیح سیستم‌عامل پیروی می‌کنیم */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a0a0a;
        --surface: #161616;
        --surface-2: #1c1c1c;
        --surface-hover: #222222;
        --border: #2c2c2c;
        --border-strong: #3a3a3a;
        --text: #f5f5f5;
        --text-muted: #a8a8a8;
        --text-faint: #757575;
        --text-on-brand: #ffffff;
        --brand-500: #ff453a;
        --brand-600: #ff6b61;
        --brand-700: #ff8f87;
        --brand-300: #b33128;
        --brand-100: #3a1210;
        --brand-50: #260c0b;
        --success-100: #12291f;
        --warning-100: #2e2314;
        --danger-100: #33191a;
        --info-100: #12262c;
        --accent-100: #241d45;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, .40);
        --shadow-lg: 0 12px 36px rgba(0, 0, 0, .50);
    }
}

/* =========================================================================
   ۲) پایه‌ها و تایپوگرافی
   ========================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Vazirmatn, "Segoe UI", IRANSans, Tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    direction: rtl;
    /* جلوگیری از پرش افقی صفحه در موبایل */
    overflow-x: hidden;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
}

h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

p { margin: 0 0 1em; }

a {
    color: var(--brand-600);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--brand-700); }

/* اعداد همیشه لاتین و چپ‌چین خوانده شوند تا شماره تماس/کد ملی به‌هم نریزد */
.num {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: 12px; }

/* حلقه فوکوس یکسان برای دسترس‌پذیری با صفحه‌کلید */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* =========================================================================
   ۳) اسکلت صفحه — نوار کناری ثابت + محتوای اصلی
   ========================================================================= */
.app {
    display: flex;
    min-height: 100vh;
}

/* ---------- نوار کناری ---------- */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform var(--t) var(--ease);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px var(--pad);
    border-bottom: 1px solid var(--border);
    color: inherit;
}

.sidebar__brand:hover { color: inherit; }

/* لوگوی رسمی لوتوس‌تل */
.sidebar__logo-img {
    width: 96px;
    height: auto;
    flex-shrink: 0;
}

/* لوگو زمینه سفید دارد؛ در تم تیره کمی روشن‌تر و با پس‌زمینه ملایم نمایش داده می‌شود
   تا لبه‌های سفید آن روی زمینه تیره تیز به نظر نرسد */
:root[data-theme="dark"] .sidebar__logo-img,
:root[data-theme="dark"] .auth__logo-img {
    background: rgba(255, 255, 255, .92);
    border-radius: var(--r-sm);
    padding: 3px 5px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sidebar__logo-img,
    :root:not([data-theme="light"]) .auth__logo-img {
        background: rgba(255, 255, 255, .92);
        border-radius: var(--r-sm);
        padding: 3px 5px;
    }
}

/* لوگوی متنی جایگزین (در جاهایی که فضای عرضی کم است) */
.sidebar__logo {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.sidebar__title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
}

.sidebar__subtitle {
    font-size: 11px;
    color: var(--text-faint);
}

.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px 20px;
}

.nav-section {
    margin-top: 14px;
    padding: 0 10px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: .02em;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: var(--r-md);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.nav-link:hover {
    background: var(--surface-hover);
    color: var(--text);
    /* میکرو انیمیشن: لغزش خفیف به سمت راست (جهت RTL) */
    transform: translateX(-2px);
}

.nav-link.is-active {
    background: var(--brand-100);
    color: var(--brand-700);
    font-weight: 700;
}

/* نوار نشانگر آیتم فعال */
.nav-link.is-active::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: var(--r-full);
    background: var(--brand-500);
}

.nav-link__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .9;
}

.nav-link__badge {
    margin-inline-start: auto;
    background: var(--danger-500);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r-full);
}

.sidebar__footer {
    padding: 12px var(--pad);
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-faint);
}

/* ---------- ناحیه اصلی ---------- */
.main {
    flex: 1;
    margin-right: var(--sidebar-w);
    min-width: 0; /* بدون این، محتوای عریض (جدول) صفحه را می‌کشد */
    display: flex;
    flex-direction: column;
}

/* ---------- نوار بالا ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

/* پشتیبان برای مرورگرهایی که color-mix ندارند */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .topbar { background: var(--surface); }
}

.topbar__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.topbar__spacer { flex: 1; }

/* دکمه همبرگری فقط در موبایل دیده می‌شود */
.icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.icon-btn:active { transform: scale(.94); }

.topbar__menu-btn { display: none; }

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.user-chip__avatar {
    width: 26px;
    height: 26px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}

.content {
    flex: 1;
    padding: 24px;
    /* فضای تنفس انتهای صفحه در موبایل */
    padding-bottom: 48px;
}

/* پوشش تیره پشت نوار کناری در موبایل */
.scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 13, 20, .5);
    z-index: 55;
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

/* =========================================================================
   ۴) Bento Grid و کارت‌ها
   -------------------------------------------------------------------------
   شبکه ۱۲ ستونی؛ هر خانه با کلاس‌های .span-* پهنا و با .row-* ارتفاع می‌گیرد.
   در موبایل همه خانه‌ها تمام‌عرض می‌شوند تا چیدمان نشکند.
   ========================================================================= */
.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    /* ارتفاع پایه هر ردیف؛ خانه‌های بلندتر مضربی از این مقدار می‌گیرند */
    grid-auto-rows: minmax(96px, auto);
}

.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-12 { grid-column: span 12; }

.row-2 { grid-row: span 2; }
.row-3 { grid-row: span 3; }

/* ---------- کارت پایه ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--pad);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* کارت‌های تعاملی (قابل کلیک) با شناوری خفیف بازخورد می‌دهند */
.card--interactive { cursor: pointer; }

.card--interactive:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.card__title {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0;
}

.card__head-actions { margin-inline-start: auto; }

.card__body { flex: 1; min-width: 0; }

/* ---------- خانه آماری (KPI) ---------- */
.stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.stat__label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.stat__value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.stat__hint {
    font-size: 11.5px;
    color: var(--text-faint);
}

.stat__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* رنگ‌بندی خانه‌های آماری بر اساس معنا */
.tone-brand   .stat__icon { background: var(--brand-100);   color: var(--brand-600); }
.tone-success .stat__icon { background: var(--success-100); color: var(--success-500); }
.tone-warning .stat__icon { background: var(--warning-100); color: var(--warning-500); }
.tone-danger  .stat__icon { background: var(--danger-100);  color: var(--danger-500); }
.tone-info    .stat__icon { background: var(--info-100);    color: var(--info-500); }
.tone-accent  .stat__icon { background: var(--accent-100);  color: var(--accent-500); }

.tone-brand   .stat__value { color: var(--brand-600); }
.tone-success .stat__value { color: var(--success-500); }
.tone-warning .stat__value { color: var(--warning-500); }
.tone-danger  .stat__value { color: var(--danger-500); }

/* ---------- نوار توزیع (به‌جای نمودار سنگین) ---------- */
.dist { display: flex; flex-direction: column; gap: 10px; }

.dist__row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }

.dist__name { width: 100px; flex-shrink: 0; color: var(--text-muted); }

.dist__track {
    flex: 1;
    height: 8px;
    background: var(--surface-2);
    border-radius: var(--r-full);
    overflow: hidden;
}

.dist__fill {
    height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
    /* میکرو انیمیشن: پر شدن نوار هنگام بارگذاری صفحه */
    animation: grow-x var(--t) var(--ease) both;
    transform-origin: right center;
}

.dist__count {
    width: 42px;
    text-align: left;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ۵) اجزا
   ========================================================================= */

/* ---------- دکمه ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--brand-500);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.btn:hover { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-sm); }
/* میکرو انیمیشن: فشرده شدن دکمه هنگام کلیک */
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}

.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn--soft { background: var(--brand-100); color: var(--brand-700); }
.btn--soft:hover { background: var(--brand-100); filter: brightness(.97); color: var(--brand-700); }

.btn--danger { background: var(--danger-500); }
.btn--danger:hover { background: var(--danger-500); filter: brightness(.92); }

.btn--sm { padding: 6px 11px; font-size: 12px; }
.btn--block { width: 100%; }

/* ---------- فرم ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }

.field__label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

.field__label .req { color: var(--danger-500); }

.input, .select, .textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    /* در موبایل، فونت کوچک‌تر از 16px باعث زوم خودکار iOS می‌شود؛ در نقطه شکست اصلاح شده است */
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
}

.textarea { min-height: 88px; resize: vertical; line-height: 1.7; }

.field__hint { font-size: 11.5px; color: var(--text-faint); }

/* شبکه فرم: در دسکتاپ دو یا سه ستون، در موبایل تک‌ستون */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 var(--gap);
}

.form-grid--full { grid-column: 1 / -1; }

/* ---------- نوار جستجوی بزرگ (Search محور) ---------- */
.searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.searchbar:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 14%, transparent);
}

.searchbar__icon { color: var(--text-faint); margin-inline-start: 10px; flex-shrink: 0; }

.searchbar__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    padding: 6px 0;
}

.searchbar__input:focus { outline: none; }

/* ---------- نشان (Badge) ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--r-full);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge--brand   { background: var(--brand-100);   color: var(--brand-700);    border-color: transparent; }
.badge--success { background: var(--success-100); color: var(--success-500);  border-color: transparent; }
.badge--warning { background: var(--warning-100); color: var(--warning-500);  border-color: transparent; }
.badge--danger  { background: var(--danger-100);  color: var(--danger-500);   border-color: transparent; }
.badge--info    { background: var(--info-100);    color: var(--info-500);     border-color: transparent; }
.badge--accent  { background: var(--accent-100);  color: var(--accent-500);   border-color: transparent; }

/* نقطه ضربان‌دار برای وضعیت زنده */
.badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--r-full);
    background: currentColor;
    animation: pulse 2s var(--ease) infinite;
}

/* ---------- تراشه فیلتر ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all var(--t-fast) var(--ease);
}

.chip:hover { border-color: var(--border-strong); color: var(--text); }

.chip.is-active {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

/* ---------- کارت مشتری (فهرست کارت‌محور) ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap);
}

.customer-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* میکرو انیمیشن: ظاهر شدن نرم کارت‌های تازه‌بارگذاری‌شده */
    animation: fade-up var(--t) var(--ease) both;
}

.customer-card__top { display: flex; align-items: flex-start; gap: 11px; }

.customer-card__avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    background: var(--brand-100);
    color: var(--brand-700);
}

.customer-card__avatar--legal { background: var(--accent-100); color: var(--accent-500); }

.customer-card__name {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0;
    /* نام‌های بلند نباید کارت را بشکنند */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
   پیوند اصلی کارت: خودِ متن با صفحه‌کلید و صفحه‌خوان قابل دسترسی است، ولی ناحیه کلیک آن با یک
   شبه‌عنصر به کل کارت گسترش می‌یابد. این روش نسبت به onclick روی کل کارت هم دسترس‌پذیر است و هم
   امکان «باز کردن در تب جدید» را حفظ می‌کند.
*/
.card-link {
    color: inherit;
    text-decoration: none;
}

.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* کارت باید مبنای موقعیت‌یابی شبه‌عنصر بالا باشد */
.customer-card { position: relative; }

/* دکمه‌ها و پیوندهای داخل پاورقی کارت باید بالای لایه کلیک قرار بگیرند */
.customer-card__foot,
.customer-card__meta a { position: relative; z-index: 1; }

/* حلقه فوکوس روی کل کارت دیده شود، نه فقط روی متن */
.card-link:focus-visible { outline: none; }
.card--interactive:focus-within {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

.customer-card__meta { font-size: 12px; color: var(--text-faint); }

.customer-card__rows { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }

.customer-card__row { display: flex; align-items: center; gap: 7px; color: var(--text-muted); }

.customer-card__row svg { flex-shrink: 0; opacity: .7; }

.customer-card__foot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}

/* ---------- جدول (برای صفحاتی که واقعاً جدول لازم دارند) ---------- */
.table-wrap {
    /* جدول عریض داخل خودش اسکرول می‌خورد و بدنه صفحه را افقی نمی‌کشد */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 520px;
}

.table th, .table td {
    padding: 10px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}

.table th {
    background: var(--surface-2);
    font-weight: 700;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: none; }

/* ---------- شمارش معکوس مهلت SLA ---------- */
.sla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 700;
    /* عدد ثابت‌عرض تا متن با هر تیک ثانیه نلرزد */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--text-muted);
}

/* مهلت گذشته: باید فوراً در فهرست دیده شود */
.sla--breached { background: var(--danger-100); color: var(--danger-500); }
/* کمتر از یک ساعت مانده */
.sla--soon     { background: var(--warning-100); color: var(--warning-500); }
.sla--ok       { background: var(--success-100); color: var(--success-500); }
/* ساعت متوقف است؛ عدد نمایش داده می‌شود ولی به‌عنوان هشدار خوانده نمی‌شود */
.sla--paused   { background: var(--surface-2); color: var(--text-faint); }

.sla__label { font-weight: 500; opacity: .85; }

/* نوار باریک بالای کارت پرونده که فوریت را بدون خواندن متن نشان می‌دهد */
.case-card { position: relative; overflow: hidden; }

.case-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--border);
}

.case-card--breached::before { background: var(--danger-500); }
.case-card--soon::before     { background: var(--warning-500); }
.case-card--critical::before { background: linear-gradient(90deg, var(--danger-500), var(--warning-500)); }

/* ---------- خط زمانی تعاملات ---------- */
.timeline { display: flex; flex-direction: column; }

.timeline__item {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}

/* خط عمودی وصل‌کننده آیتم‌ها */
.timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    right: 13px;
    top: 30px;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.timeline__dot {
    width: 27px;
    height: 27px;
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--brand-100);
    color: var(--brand-600);
    z-index: 1;
}

.timeline__body { flex: 1; min-width: 0; }

.timeline__title { font-size: 13.5px; font-weight: 600; margin: 0 0 2px; }

.timeline__meta { font-size: 11.5px; color: var(--text-faint); display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- حالت خالی ---------- */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 44px 20px;
    text-align: center;
    color: var(--text-faint);
}

.empty__icon {
    width: 54px;
    height: 54px;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--text-faint);
}

.empty__title { font-size: 14.5px; font-weight: 700; color: var(--text-muted); }

/* ---------- اعلان ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: var(--gap);
    animation: fade-up var(--t) var(--ease) both;
}

.alert--success { background: var(--success-100); color: var(--success-500); }
.alert--danger  { background: var(--danger-100);  color: var(--danger-500); }
.alert--warning { background: var(--warning-100); color: var(--warning-500); }
.alert--info    { background: var(--info-100);    color: var(--info-500); }

.alert svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- بارگذارنده Infinite Scroll ---------- */
.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 22px;
    color: var(--text-faint);
    font-size: 12.5px;
}

.spinner {
    width: 17px;
    height: 17px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--brand-500);
    border-radius: var(--r-full);
    animation: spin .7s linear infinite;
}

/* ---------- بخش جمع‌شونده (فیلتر پیشرفته) ---------- */
.collapse > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-600);
    user-select: none;
}

.collapse > summary::-webkit-details-marker { display: none; }

.collapse > summary svg { transition: transform var(--t) var(--ease); }
.collapse[open] > summary svg { transform: rotate(180deg); }

.collapse__body { animation: fade-up var(--t) var(--ease) both; padding-top: 14px; }

/* =========================================================================
   فروشگاه عمومی — چیدمان مستقل از پنل (بدون نوار کناری، تمام‌عرض با سقف عرض)
   ========================================================================= */
.store {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.store__header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .store__header { background: var(--surface); }
}

.store__bar {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
}

.store__brand { display: flex; align-items: center; flex-shrink: 0; }
.store__brand img { width: 104px; height: auto; display: block; }

.store__nav { display: flex; gap: 4px; }

.store__link {
    padding: 7px 13px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.store__link:hover { background: var(--surface-hover); color: var(--text); }
.store__link.is-active { background: var(--brand-100); color: var(--brand-700); }

/* ---------- منوی کشویی نوار فروشگاه («سرویس‌ها») ---------- */
.store__menu { position: relative; }

.store__menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    /* مثلث پیش‌فرض مرورگر کنار می‌رود تا شِورون خودمان جایش بنشیند */
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.store__menu > summary::-webkit-details-marker { display: none; }
.store__menu > summary::marker { content: ""; }

.store__menu > summary svg { transition: transform var(--t-fast) var(--ease); }
.store__menu[open] > summary { background: var(--surface-hover); color: var(--text); }
.store__menu[open] > summary svg { transform: rotate(180deg); }

.store__menu-panel {
    position: absolute;
    top: calc(100% + 7px);
    inset-inline-start: 0;
    z-index: 60;
    min-width: 250px;
    max-width: min(300px, calc(100vw - 26px));
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    animation: cat-sub-in var(--t-fast) var(--ease);
}

.store__menu-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    color: var(--text-muted);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.store__menu-item:hover { background: var(--surface-hover); color: var(--text); }
.store__menu-item.is-active { background: var(--brand-100); color: var(--brand-700); }
.store__menu-item svg { flex-shrink: 0; margin-top: 2px; }
.store__menu-item strong { display: block; font-size: 13.5px; font-weight: 700; }

.store__menu-item em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-faint);
}

.store__spacer { flex: 1; }

.store__content {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 56px;
}

.store__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    padding: 18px 20px 26px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ---------- کارت محصول ---------- */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    animation: fade-up var(--t) var(--ease) both;
}

.product-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--brand-100);
    color: var(--brand-600);
    flex-shrink: 0;
}

/* تصویر محصول؛ ابعاد ثابت تا کارت‌ها با تصاویر مختلف هم‌ارتفاع بمانند */
.product-card__image {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    object-fit: cover;
    background: var(--surface-2);
    flex-shrink: 0;
}

/* ---------- سکشن‌های صفحه اصلی فروشگاه ---------- */
.store-section { margin-bottom: 34px; }

.store-section__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.store-section__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--brand-100);
    color: var(--brand-600);
    flex-shrink: 0;
}

.store-section__title { margin: 0; font-size: 17px; font-weight: 800; }
.store-section__subtitle { font-size: 12.5px; color: var(--text-faint); }

/* ---------- شبکه دسته‌بندی صفحه اصلی فروشگاه ---------- */
.cat-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: var(--gap);
}

.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 22px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-300);
    color: var(--text);
}

.cat-card.is-active {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent);
}

.cat-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    background: var(--brand-100);
    color: var(--brand-600);
}

.cat-card__chevron { color: var(--text-faint); transition: transform var(--t) var(--ease); }
.cat-card.is-active .cat-card__chevron { transform: rotate(180deg); color: var(--brand-500); }

/* ---------- ریزدسته‌های سیم‌کارت (نمایش تدریجی زیر کارت «خرید سیم‌کارت») ---------- */
.cat-sub {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: -2px 0 26px;
    padding: 18px;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    animation: cat-sub-in var(--t) var(--ease);
}

.cat-sub.is-open { display: grid; }

@keyframes cat-sub-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.cat-sub__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

a.cat-sub__tile:hover { border-color: var(--brand-500); color: var(--text); transform: translateY(-2px); }

.cat-sub__tile.is-disabled { opacity: .55; cursor: not-allowed; }

.cat-sub__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    background: var(--brand-50);
    color: var(--brand-500);
}

.cat-sub__badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-faint);
    background: var(--surface-2);
    border-radius: var(--r-full);
    padding: 1px 8px;
}

/* نوار شماره شناسایی‌شده مشتری در بالای فروشگاه */
.identified-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 15px;
    border-radius: var(--r-md);
    background: var(--success-100);
    color: var(--success-500);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: var(--gap);
}

.product-card__name {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
}

/* نشان تخفیف گوشه کارت */
.product-card__ribbon {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--danger-500);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: var(--r-full);
    z-index: 2;
}

/* بلوک سهمیه، بزرگ و خوانا — مهم‌ترین چیزی که مشتری می‌بیند */
.product-card__quota {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 11px 14px;
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.product-card__quota-value {
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}

.product-card__quota-unit { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.product-card__quota-validity { margin-inline-start: auto; font-size: 11.5px; color: var(--text-faint); }

/* ---------- قیمت ---------- */
.price { display: flex; flex-direction: column; gap: 1px; }

.price__old {
    font-size: 12px;
    color: var(--text-faint);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.price__value {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.price__toman { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- مراحل خرید ---------- */
.steps {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-faint);
}

.steps__item { display: flex; align-items: center; gap: 6px; }

.steps__num {
    width: 21px;
    height: 21px;
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.steps__item.is-done .steps__num { background: var(--success-100); color: var(--success-500); }
.steps__item.is-current .steps__num { background: var(--brand-500); color: #fff; }
.steps__item.is-current { color: var(--text); font-weight: 700; }

.steps__sep { opacity: .4; }

/* ---------- صفحه شبیه‌ساز درگاه ---------- */
.gateway {
    max-width: 430px;
    margin: 36px auto;
}

.gateway__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--border-strong);
}

.gateway__amount {
    text-align: center;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    margin-bottom: 18px;
}

.gateway__amount-value {
    font-size: 27px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--brand-600);
}

@media (max-width: 768px) {
    .store__bar { padding: 9px 13px; gap: 8px; flex-wrap: wrap; }
    .store__brand img { width: 86px; }
    .store__nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }

    /* نوار در موبایل اسکرول افقی دارد و overflow آن، پنل بازشده را می‌برید؛
       تا وقتی منویی باز است برش را برمی‌داریم و بعد دوباره اسکرول برمی‌گردد. */
    .store__nav:has(details[open]) { overflow: visible; }

    /* مرورگرهای قدیمی بدون پشتیبانی :has() — پنل در جریان صفحه باز می‌شود */
    @supports not selector(:has(*)) {
        .store__menu[open] .store__menu-panel {
            position: static;
            min-width: 0;
            max-width: none;
            margin-top: 6px;
        }
    }
    .store__content { padding: 14px 13px 40px; }
    .store__footer { padding: 15px 13px 22px; }
    .gateway { margin: 16px auto; }
}

/* ---------- Hero (صفحه ورود و سرصفحه‌های بزرگ) ---------- */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    padding: 34px var(--pad);
    background: linear-gradient(135deg, var(--brand-600), var(--accent-500));
    color: #fff;
}

/* هاله نوری تزئینی گوشه Hero */
.hero::after {
    content: "";
    position: absolute;
    top: -70px;
    left: -50px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    pointer-events: none;
}

.hero h1 { color: #fff; font-size: 26px; margin-bottom: 6px; }
.hero p  { color: rgba(255, 255, 255, .88); margin-bottom: 20px; max-width: 52ch; }

/* ---------- تقویم انتخابی شمسی ---------- */
.jdp {
    position: absolute;
    z-index: 200;
    width: 268px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    animation: cat-sub-in var(--t-fast) var(--ease);
}

.jdp__head {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 8px;
}

.jdp__title {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
}

.jdp__nav {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.jdp__nav:hover { background: var(--surface-hover); color: var(--text); }

.jdp__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.jdp__dow {
    display: grid;
    place-items: center;
    height: 26px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
}

.jdp__blank { height: 30px; }

.jdp__day {
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.jdp__day:hover { background: var(--surface-hover); }

/* امروز فقط قاب می‌گیرد تا با «انتخاب‌شده» اشتباه نشود */
.jdp__day.is-today {
    box-shadow: inset 0 0 0 1px var(--brand-600);
    color: var(--brand-700);
    font-weight: 700;
}

.jdp__day.is-selected {
    background: var(--brand-600);
    color: #fff;
    font-weight: 700;
}

.jdp__foot {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.jdp__foot .btn { flex: 1; }

/* ---------- افزوده‌های پنل سازمانی ---------- */

/* کارت انتخابی (چک‌باکس درون کارت): تخصیص سرویس به سازمان */
.card--pick {
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.card--pick:hover { border-color: var(--border-strong); }

.card--pick.is-selected {
    border-color: var(--brand-600);
    background: var(--brand-100);
}

/* شبکهٔ نمایش جزئیات (برچسب و مقدار)؛ در موبایل تک‌ستونی می‌شود */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px var(--gap);
    font-size: 13px;
}

.detail-grid .span-2 { grid-column: span 2; }

@media (max-width: 640px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-grid .span-2 { grid-column: span 1; }
}

/* ورودی کوچک، برای قرارگرفتن کنار دکمه‌های btn--sm */
.input--sm {
    padding: 6px 10px;
    font-size: 12.5px;
}


/* ---------- نوار هشدار ورود به نیابت ----------
   رنگ هشدار و چسبیده به بالا: ادمینی که فراموش کند در حالت نیابت است،
   ممکن است به‌نام سازمان درخواستی ثبت کند که قصدش را نداشته. */
.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 20px;
    background: var(--warning-100);
    color: var(--warning-500);
    border-bottom: 1px solid var(--warning-500);
    font-size: 12.5px;
    font-weight: 600;
}

.impersonation-bar svg { flex-shrink: 0; }
.impersonation-bar form { margin-inline-start: auto; }

/* نام سازمان بالای محتوای پنل سازمانی */
.portal-org {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

/* کارت سرویس در داشبورد سازمان */
.service-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.service-card--open:hover {
    border-color: var(--brand-600);
    transform: translateY(-2px);
}

/* سرویسی که باز نمی‌شود (در حال پیاده‌سازی یا بدون دسترسی) دیده
   می‌شود ولی کم‌جان است — تا کاربر بداند هست و هم‌زمان روی صفحهٔ خالی نیفتد. */
.service-card--locked { opacity: .62; }

.service-card__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--brand-100);
    color: var(--brand-700);
}

/* ردیف فرایند در صفحهٔ سرویس */
.process-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.process-row + .process-row { margin-top: 8px; }
.process-row--open:hover { border-color: var(--brand-600); background: var(--surface-hover); }
.process-row--locked { opacity: .6; }

.process-row__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-muted);
}

/* =========================================================================
   ۶) میکرو انیمیشن‌ها
   ========================================================================= */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes grow-x {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* ورود پلکانی خانه‌های Bento؛ صفحه یک‌باره ظاهر نمی‌شود بلکه می‌نشیند */
.bento > * { animation: fade-up var(--t) var(--ease) both; }
.bento > *:nth-child(1) { animation-delay: 0ms; }
.bento > *:nth-child(2) { animation-delay: 35ms; }
.bento > *:nth-child(3) { animation-delay: 70ms; }
.bento > *:nth-child(4) { animation-delay: 105ms; }
.bento > *:nth-child(5) { animation-delay: 140ms; }
.bento > *:nth-child(6) { animation-delay: 175ms; }
.bento > *:nth-child(7) { animation-delay: 210ms; }
.bento > *:nth-child(8) { animation-delay: 245ms; }

/* احترام به ترجیح کاربر برای کاهش حرکت — الزام دسترس‌پذیری */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================================
   ۷) ریسپانسیو
   ========================================================================= */

/* ---------- تبلت افقی و لپ‌تاپ کوچک ---------- */
@media (max-width: 1200px) {
    .span-3 { grid-column: span 4; }
    .span-5 { grid-column: span 6; }
    .span-7 { grid-column: span 6; }
    .span-9 { grid-column: span 12; }
}

/* ---------- تبلت ---------- */
@media (max-width: 992px) {
    :root { --sidebar-w: 226px; }

    .span-2, .span-3, .span-4 { grid-column: span 6; }
    .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }

    .content { padding: 18px; }
    .topbar { padding: 11px 18px; }
}

/* ---------- موبایل: نوار کناری کشویی می‌شود ---------- */
@media (max-width: 768px) {
    .sidebar {
        /* خارج از صفحه پارک می‌شود و با دکمه همبرگری می‌آید */
        transform: translateX(100%);
        box-shadow: var(--shadow-lg);
        width: 268px;
    }

    .sidebar.is-open { transform: translateX(0); }

    .main { margin-right: 0; }

    .topbar__menu-btn { display: grid; }

    /* پوشش تیره فقط وقتی منو باز است */
    body.nav-open .scrim { display: block; opacity: 1; }
    /* قفل اسکرول پس‌زمینه هنگام باز بودن منو */
    body.nav-open { overflow: hidden; }

    /* در موبایل هر خانه Bento تمام‌عرض است */
    .bento > * { grid-column: span 12 !important; grid-row: auto !important; }

    .card-grid { grid-template-columns: 1fr; }

    :root { --pad: 16px; --gap: 12px; }

    .content { padding: 14px; }
    .topbar { padding: 10px 14px; gap: 8px; }
    .topbar__title { font-size: 14.5px; }

    h1 { font-size: 20px; }
    .hero { padding: 26px 18px; }
    .hero h1 { font-size: 21px; }

    .stat__value { font-size: 26px; }

    /* iOS با فونت زیر ۱۶ پیکسل هنگام فوکوس صفحه را زوم می‌کند */
    .input, .select, .textarea, .searchbar__input { font-size: 16px; }

    /* نام کاربر در نوار بالا جا نمی‌شود؛ فقط آواتار می‌ماند */
    .user-chip__name { display: none; }
    .user-chip { padding: 5px; }

    .cat-nav { grid-template-columns: repeat(2, 1fr); }
    .cat-card { padding: 16px 10px; }
    .cat-sub { grid-template-columns: repeat(2, 1fr); }

    .dist__name { width: 74px; font-size: 11.5px; }
}

/* ---------- موبایل کوچک ---------- */
@media (max-width: 400px) {
    .content { padding: 11px; }
    .card { padding: 15px; }
    .stat__value { font-size: 23px; }
    .btn { padding: 9px 13px; }
}

/* ---------- چاپ ---------- */
@media print {
    .sidebar, .topbar, .scrim, .btn { display: none !important; }
    .main { margin: 0; }
    .card { break-inside: avoid; box-shadow: none; }
}