@font-face {
    font-family: IRANSansWeb;
    font-style: normal;
    font-weight: bold;
    src: url('Fonts/IRANSansWeb.woff') format('woff');
}

/* ══════════════════════════════════════════════════════════
   ثابت‌هایِ چیدمانِ ریلِ دکمه‌هایِ کشویِ لبهٔ چپ
   وابسته به تم نیستند، پس بیرونِ بلوک‌هایِ روشن/تیره می‌مانند.
   سه جا از همین دو عدد می‌خوانند و باید هم‌گام بمانند:
     • MainLayout.razor.css  → جایِ خودِ ریل
     • AgentQueueTurns       → ته‌فاصلهٔ بدنهٔ کشو
     • AgentStatusAlerts     → ته‌فاصلهٔ فهرستِ کشو
   ══════════════════════════════════════════════════════════ */
:root {
    /* فاصلهٔ ریل از کفِ پنجره */
    --edge-rail-gap: 16px;
    /* بلندیِ تقریبیِ ریل + همان فاصله، با کمی لقی. دکمه‌ها رویِ کشویِ باز می‌افتند، پس بدنهٔ
       هر کشو باید همین‌قدر ته‌فاصله داشته باشد وگرنه آخرین ردیف‌ها زیرشان پنهان می‌مانند.
       عدد است چون بلندیِ واقعیِ ریل به محتوا بند است (بَجِ شمارشِ اعلان‌ها کم و زیاد می‌شود)
       و CSS نمی‌تواند ارتفاعِ یک عنصرِ fixed را به padding عنصرِ دیگری بدهد. */
    --edge-rail-clear: 190px;
}

/* ══════════════════════════════════════════════════════════
   Design tokens — Navy palette (light/dark)
   منبع حقیقت رنگ. scope روی html[data-bs-theme] تا بر :root
   تلریک (که بعد از این فایل لود می‌شود) غلبه کند.
   ══════════════════════════════════════════════════════════ */
html[data-bs-theme="light"] {
    --surface-rgb: 255, 255, 255;
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --row-hover: #f8fafc;
    --muted-bg: #eef2f7;
    --btn-face: #eef2f7;
    --btn-face-hover: #e2e8f0;
    --btn-face-active: #cbd5e1;

    --primary: #1e40af;
    --primary-rgb: 30, 64, 175;
    --primary-hover: #1e3a8a;
    --primary-contrast: #ffffff;
    --accent: #3b82f6;

    --success: #16a34a;
    --success-text: #15803d;
    --danger: #dc2626;
    --danger-text: #b91c1c;
    --warning: #d97706;
    --warning-text: #92400e;
    --info: #0ea5e9;

    --side-bg: #0f1f3d;
    --side-text: #9fb3d1;
    --side-strong: #eaf1fb;
    --side-muted: #5b7196;
    --side-line: rgba(255, 255, 255, 0.08);
    --side-hover: rgba(255, 255, 255, 0.06);

    color-scheme: light;
}

html[data-bs-theme="dark"] {
    --surface-rgb: 19, 28, 46;
    --bg: #0b1220;
    --surface: #131c2e;
    --surface-2: #0f1828;
    --text: #e6edf6;
    --text-muted: #8ea2bd;
    --border: #233047;
    --row-hover: #172339;
    --muted-bg: #1c2740;
    --btn-face: #1c2740;
    --btn-face-hover: #26334f;
    --btn-face-active: #30405f;

    --primary: #3b82f6;
    --primary-rgb: 59, 130, 246;
    --primary-hover: #60a5fa;
    --primary-contrast: #ffffff;
    --accent: #60a5fa;

    --success: #22c55e;
    --success-text: #86efac;
    --danger: #ef4444;
    --danger-text: #fca5a5;
    --warning: #f59e0b;
    --warning-text: #fcd34d;
    --info: #38bdf8;

    --side-bg: #070d18;
    --side-text: #8298b5;
    --side-strong: #e6edf6;
    --side-muted: #4a5e7d;
    --side-line: rgba(255, 255, 255, 0.06);
    --side-hover: rgba(255, 255, 255, 0.06);

    color-scheme: dark;
}

/* ── مپینگ متغیرهای Bootstrap 5.3 به توکن‌ها ────────────── */
html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-emphasis-color: var(--text);
    --bs-border-color: var(--border);

    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: var(--primary-hover);

    --bs-card-bg: var(--surface);
    --bs-card-cap-bg: var(--surface-2);
    --bs-card-border-color: var(--border);

    --bs-success: var(--success);
    --bs-danger: var(--danger);
    --bs-warning: var(--warning);
    --bs-info: var(--info);
}

html, body {
    font-family: 'IRANSansWeb';
    direction: rtl;
    text-align: right;
    background-color: var(--bg);
    color: var(--text);
}

/* ── Telerik Grid RTL ─────────────────────────────────── */
.k-grid,
.k-grid-header,
.k-grid-header-wrap table,
.k-grid-table,
.k-grid-content table {
    direction: rtl;
    text-align: right;
}

.k-grid th,
.k-grid td {
    text-align: right;
}

.k-grid .k-sorted .k-sort-icon,
.k-grid .k-column-title {
    float: right;
}

/* ── TelerikCard RTL ──────────────────────────────────────
   ریشهٔ تلریک LTR است و کارت جهتش را به همهٔ فرزندانش تحمیل می‌کند؛ در نتیجه هر فرم/جدولی
   که داخلِ <TelerikCard> نوشته شده چپ‌چین رندر می‌شد (نمونه: کادرِ انتخابِ مجوز در /crm/roles:
   چک‌باکس سمتِ چپ، متن از چپ، و ستون‌های .row از چپ پر می‌شدند). محتوایی که عمداً LTR است
   (کد، شماره، نامِ کاربری) روی خودش dir="ltr" دارد و همچنان LTR می‌ماند. */
.k-card {
    direction: rtl;
    text-align: right;
}

/* پنجره و دیالوگ تلریک هم LTR تزریق می‌شود؛ عنوان، بدنه و دکمه‌ها باید راست‌چین بمانند. */
.k-window,
.k-dialog,
.k-window-content,
.k-dialog-content,
.k-window-titlebar,
.k-dialog-titlebar,
.k-window-title,
.k-dialog-title,
.k-dialog-buttongroup,
.k-actions {
    direction: rtl;
    text-align: right;
}

.treasury-detail.k-window-content,
.treasury-detail.k-dialog-content,
.treasury-detail .k-window-content,
.treasury-detail .k-dialog-content {
    min-height: 12rem;
    max-height: min(70vh, 640px);
    overflow: auto;
}

/* ── راهنمای ستون (GridHelp) داخل هدر گرید تلریک ─────────────
   هدر تلریک به‌صورت پیش‌فرض overflow:hidden دارد و پاپ‌آپ راهنما را می‌بُرد؛
   این override اجازه می‌دهد پاپ‌آپ ؟ روی محتوای گرید سرریز شود و دیده شود. */
.k-grid-header,
.k-grid-header-wrap,
.k-grid-header .k-header,
.k-grid-header th {
    overflow: visible !important;
}

.k-grid-header .k-column-title {
    overflow: visible;
    text-overflow: clip;
}

/* ── فهرستِ نتایجِ CustomerPicker داخلِ TelerikCard ──────────
   .k-card به‌صورت پیش‌فرض overflow:hidden دارد؛ وقتی پیکرِ مشتری داخلِ کارتِ کوتاه است
   (مثلِ /crm/emergency-charge) فهرستِ کشوییِ نتایج از پایینِ کارت بیرون می‌زند و بریده می‌شود
   («کادرِ نتایج خیلی کوچک است و دیده نمی‌شود»). با :has فقط کارت‌هایی که پیکر دارند را
   به overflow:visible می‌بریم تا فهرست کامل روی محتوا سرریز شود؛ بقیهٔ کارت‌ها دست‌نخورده می‌مانند.
   مرورگرهای بدونِ پشتیبانیِ :has این قاعده را نادیده می‌گیرند (بازگشتِ امن به رفتارِ فعلی). */
.k-card:has(.customer-picker),
.k-card.overflow-visible {
    overflow: visible !important;
}

a, .btn-link {
    color: var(--primary);
}

.btn-primary {
    color: var(--primary-contrast);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover, .btn-primary:active {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover, .btn-outline-primary:active {
    color: var(--primary-contrast);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ── Blazor error UI (global — scoped CSS in MainLayout doesn't reach LoginLayout) ── */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fef9c3;
    border-top: 1px solid #fde047;
    padding: 0.6rem 1.25rem 0.7rem;
    z-index: 9999;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12);
    font-size: 0.875rem;
    color: #713f12;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── مودالِ اتصال‌مجددِ بلیزر (فارسی) ─────────────────────
   حالت‌ها/شناسه‌ها را خودِ blazor.web.js کنترل می‌کند (کلاس روی #components-reconnect-modal
   می‌گذارد)؛ اینجا فقط نمایش/ظاهرِ فارسیِ همان حالت‌ها تعریف می‌شود. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-fadeInOpacity 0.5s ease-in-out;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

#components-reconnect-modal .reconnect-panel {
    position: relative;
    background-color: var(--surface, #fff);
    color: var(--text, #0f172a);
    width: 20rem;
    max-width: 90vw;
    margin: 20vh auto;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

#components-reconnect-modal .components-rejoining-animation {
    display: none;
    position: relative;
    width: 60px;
    height: 60px;
}

#components-reconnect-modal.components-reconnect-show .components-rejoining-animation {
    display: block;
}

#components-reconnect-modal .components-rejoining-animation div {
    position: absolute;
    border: 3px solid var(--primary, #0087ff);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#components-reconnect-modal .components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-ripple {
    0%   { top: 30px; left: 30px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 30px; left: 30px; width: 0; height: 0; opacity: 0; }
    5%   { top: 30px; left: 30px; width: 0; height: 0; opacity: 1; }
    100% { top: 0;    left: 0;    width: 60px; height: 60px; opacity: 0; }
}

@keyframes components-reconnect-fadeInOpacity {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

#components-reconnect-modal .reconnect-text { display: none; margin: 0; }
#components-reconnect-modal .reconnect-btn { display: none; }

#components-reconnect-modal.components-reconnect-show .reconnect-text-show { display: block; }
#components-reconnect-modal.components-reconnect-retrying .reconnect-text-show { display: none; }
#components-reconnect-modal.components-reconnect-retrying .reconnect-text-retrying { display: block; }
#components-reconnect-modal.components-reconnect-paused .reconnect-text-paused { display: block; }
#components-reconnect-modal.components-reconnect-paused .reconnect-btn-resume { display: inline-block; }
#components-reconnect-modal.components-reconnect-failed .reconnect-text-failed { display: block; }
#components-reconnect-modal.components-reconnect-failed .reconnect-btn-retry { display: inline-block; }
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-text-resume-failed { display: block; }
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-btn-resume { display: inline-block; }
#components-reconnect-modal.components-reconnect-rejected .reconnect-text-rejected { display: block; }
#components-reconnect-modal.components-reconnect-rejected .reconnect-btn-reload { display: inline-block; }

#components-reconnect-modal .reconnect-btn {
    border: 0;
    background-color: var(--primary, #1e40af);
    color: #fff;
    padding: 6px 24px;
    border-radius: 8px;
    cursor: pointer;
}

#components-reconnect-modal .reconnect-btn:hover {
    background-color: var(--primary-hover, #1e3a8a);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@keyframes call-slide-in {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.call-popup {
    animation: call-slide-in 0.3s ease-out;
}

/* ══════════════════════════════════════════════════════════
   Telerik (Kendo) — هم‌سوسازی با توکن‌ها در هر دو تم.
   specificity بالاتر از :root تلریک تا غلبه کند.
   ══════════════════════════════════════════════════════════ */
html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    /* سطح‌ها و متن */
    --kendo-color-app-surface: var(--surface);
    --kendo-color-on-app-surface: var(--text);
    --kendo-color-surface: var(--surface-2);
    --kendo-color-surface-alt: var(--surface);
    --kendo-color-subtle: var(--text-muted);
    --kendo-color-border: var(--border);
    --kendo-color-border-alt: var(--border);

    /* خانوادهٔ base — دکمهٔ خنثی، تکمهٔ بازکنندهٔ پیکر، چیپ، ناوبریِ تقویم، نوارِ ابزارِ گرید.
       بدونِ این‌ها تلریک به خاکستریِ ثابتِ #f5f5f5 برمی‌گردد و در تمِ تیره سفید می‌زند. */
    --kendo-color-base: var(--btn-face);
    --kendo-color-base-hover: var(--btn-face-hover);
    --kendo-color-base-active: var(--btn-face-active);
    --kendo-color-base-emphasis: var(--border);
    --kendo-color-base-subtle: var(--btn-face);
    --kendo-color-base-subtle-hover: var(--btn-face-hover);
    --kendo-color-base-subtle-active: var(--btn-face-active);
    --kendo-color-base-on-subtle: var(--text);
    --kendo-color-on-base: var(--text);
    --kendo-color-base-on-surface: var(--text);

    --kendo-color-primary: var(--primary);
    --kendo-color-primary-hover: var(--primary-hover);
    --kendo-color-primary-active: var(--primary-hover);
    --kendo-color-primary-emphasis: var(--accent);
    --kendo-color-primary-subtle: color-mix(in srgb, var(--primary) 16%, var(--surface));
    --kendo-color-primary-subtle-hover: color-mix(in srgb, var(--primary) 24%, var(--surface));
    --kendo-color-primary-subtle-active: color-mix(in srgb, var(--primary) 32%, var(--surface));
    --kendo-color-primary-on-subtle: var(--text);
    --kendo-color-primary-on-surface: var(--primary);
    --kendo-color-on-primary: var(--primary-contrast);

    /* secondary/tertiary/light/dark/inverse — دکمه‌ها و بَج‌هایِ خنثی */
    --kendo-color-secondary: var(--text-muted);
    --kendo-color-secondary-hover: var(--text);
    --kendo-color-secondary-active: var(--text);
    --kendo-color-secondary-emphasis: var(--border);
    --kendo-color-secondary-subtle: var(--btn-face);
    --kendo-color-secondary-subtle-hover: var(--btn-face-hover);
    --kendo-color-secondary-subtle-active: var(--btn-face-active);
    --kendo-color-secondary-on-subtle: var(--text);
    --kendo-color-secondary-on-surface: var(--text-muted);
    --kendo-color-on-secondary: var(--surface);

    --kendo-color-tertiary: var(--accent);
    --kendo-color-tertiary-hover: var(--primary-hover);
    --kendo-color-tertiary-active: var(--primary-hover);
    --kendo-color-tertiary-subtle: color-mix(in srgb, var(--accent) 16%, var(--surface));
    --kendo-color-tertiary-on-subtle: var(--text);
    --kendo-color-on-tertiary: var(--primary-contrast);

    --kendo-color-light: var(--surface-2);
    --kendo-color-light-hover: var(--btn-face-hover);
    --kendo-color-light-active: var(--btn-face-active);
    --kendo-color-light-subtle: var(--btn-face);
    --kendo-color-light-on-subtle: var(--text);
    --kendo-color-on-light: var(--text);

    --kendo-color-dark: var(--text);
    --kendo-color-dark-hover: var(--text);
    --kendo-color-dark-active: var(--text);
    --kendo-color-dark-subtle: var(--btn-face);
    --kendo-color-dark-on-subtle: var(--text);
    --kendo-color-on-dark: var(--surface);

    --kendo-color-inverse: var(--text);
    --kendo-color-inverse-subtle: var(--btn-face);
    --kendo-color-inverse-on-subtle: var(--text);
    --kendo-color-on-inverse: var(--surface);

    /* وضعیت‌ها — پس‌زمینهٔ کم‌رنگ با آمیختن رویِ سطحِ تم ساخته می‌شود تا در تمِ تیره تیره بماند */
    --kendo-color-success: var(--success);
    --kendo-color-success-hover: var(--success);
    --kendo-color-success-active: var(--success);
    --kendo-color-success-emphasis: var(--success);
    --kendo-color-success-subtle: color-mix(in srgb, var(--success) 16%, var(--surface));
    --kendo-color-success-subtle-hover: color-mix(in srgb, var(--success) 24%, var(--surface));
    --kendo-color-success-subtle-active: color-mix(in srgb, var(--success) 32%, var(--surface));
    --kendo-color-success-on-subtle: var(--success-text);
    --kendo-color-success-on-surface: var(--success-text);
    --kendo-color-on-success: #ffffff;

    --kendo-color-error: var(--danger);
    --kendo-color-error-hover: var(--danger);
    --kendo-color-error-active: var(--danger);
    --kendo-color-error-emphasis: var(--danger);
    --kendo-color-error-subtle: color-mix(in srgb, var(--danger) 16%, var(--surface));
    --kendo-color-error-subtle-hover: color-mix(in srgb, var(--danger) 24%, var(--surface));
    --kendo-color-error-subtle-active: color-mix(in srgb, var(--danger) 32%, var(--surface));
    --kendo-color-error-on-subtle: var(--danger-text);
    --kendo-color-error-on-surface: var(--danger-text);
    --kendo-color-on-error: #ffffff;

    --kendo-color-warning: var(--warning);
    --kendo-color-warning-hover: var(--warning);
    --kendo-color-warning-active: var(--warning);
    --kendo-color-warning-emphasis: var(--warning);
    --kendo-color-warning-subtle: color-mix(in srgb, var(--warning) 18%, var(--surface));
    --kendo-color-warning-subtle-hover: color-mix(in srgb, var(--warning) 26%, var(--surface));
    --kendo-color-warning-subtle-active: color-mix(in srgb, var(--warning) 34%, var(--surface));
    --kendo-color-warning-on-subtle: var(--warning-text);
    --kendo-color-warning-on-surface: var(--warning-text);
    --kendo-color-on-warning: #1a1204;

    --kendo-color-info: var(--info);
    --kendo-color-info-hover: var(--info);
    --kendo-color-info-active: var(--info);
    --kendo-color-info-emphasis: var(--info);
    --kendo-color-info-subtle: color-mix(in srgb, var(--info) 16%, var(--surface));
    --kendo-color-info-subtle-hover: color-mix(in srgb, var(--info) 24%, var(--surface));
    --kendo-color-info-subtle-active: color-mix(in srgb, var(--info) 32%, var(--surface));
    --kendo-color-info-on-subtle: var(--info);
    --kendo-color-info-on-surface: var(--info);
    --kendo-color-on-info: #04121a;
}

/* بعضی کامپوننت‌های تلریک رنگ متن/پس‌زمینه را مستقیم ست می‌کنند */
.k-grid,
.k-card,
.k-input,
.k-picker {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.k-grid-header,
.k-grid-header-wrap,
.k-grid td {
    border-color: var(--border);
}

/* راست‌چین‌کردنِ ورودی و گزینه‌هایِ پاپ‌آپِ دراپ‌دان/کمبوباکسِ تلریک — تلریک سراسری LTR است و
   پاپ‌آپِ گزینه‌ها بیرون از دیوِ dir="rtl" (مستقیماً زیرِ body) تزریق می‌شود */
.k-input-inner,
.k-input-value-text,
.k-list-container,
.k-list-ul,
.k-list-item,
.k-list-item-text,
.k-list-optionlabel {
    text-align: right;
    direction: rtl;
}

/* ── سوییچ تم (سه‌دکمه‌ایِ کنارِهم) ────────────────── */
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.theme-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.theme-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.theme-btn.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.theme-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* ── اسکرول‌بار هم‌رنگ تم ──────────────────────────── */
* {
    scrollbar-color: var(--border) transparent;
}

/* ══════════════════════════════════════════════════════════
   فاز ۲ — کلاس‌های پایه قابل‌استفاده مجدد (کارت/بَج/جدول/فرم/تب)
   ══════════════════════════════════════════════════════════ */

/* ── Card ─────────────────────────────────────────── */
.card {
    border-radius: 12px;
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.card-header {
    font-weight: 600;
    background-color: var(--surface-2);
    border-bottom-color: var(--border);
}

/* ── Soft badges (استاندارد جدید برای فاز ۳) ──────── */
.badge-soft-primary { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.badge-soft-success { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success-text); }
.badge-soft-danger  { background: color-mix(in srgb, var(--danger) 18%, transparent);  color: var(--danger-text); }
.badge-soft-warning { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning-text); }
.badge-soft-info    { background: color-mix(in srgb, var(--info) 18%, transparent);    color: var(--info); }
.badge-soft-muted   { background: var(--muted-bg); color: var(--text-muted); }
.appt-visit-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2em 0.55em;
}

/* ── Tables ───────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    color: var(--text);
    border-color: var(--border);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--border);
}

.table > thead.table-light th,
.table .table-light > th,
.table-light {
    background-color: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--row-hover);
}

/* ── Form controls ────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 22%, transparent);
    color: var(--text);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* ── Tabs ─────────────────────────────────────────── */
.nav-tabs { border-bottom-color: var(--border); }

.nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
}

.nav-tabs .nav-link:hover { color: var(--text); }

.nav-tabs .nav-link.active {
    color: var(--primary);
    background: transparent;
    border-bottom: 2px solid var(--primary);
}

/* ── Buttons / Alerts polish ──────────────────────── */
.btn { border-radius: 8px; }

/* ── btn-xs ────────────────────────────────────────────
   بوت‌استرپ ۵ این کلاس را ندارد (یادگارِ bs3) و در سراسرِ
   ستون‌های «عملیات» استفاده شده بود؛ بدونِ تعریف، دکمه‌ها با
   اندازهٔ کاملِ .btn (۱rem / ۰.۳۷۵rem پدینگ) رندر می‌شدند و از
   کادرِ سلولِ گرید بیرون می‌زدند. یک پله کوچک‌تر از .btn-sm.
   border-radius باید مستقیم بیاید، چون .btn بالا خودِ خاصیت را
   ست می‌کند و متغیرِ --bs-btn-border-radius دیگر اثری ندارد. */
.btn-xs {
    --bs-btn-padding-y: 0.125rem;
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-line-height: 1.45;
    border-radius: 6px;
}

/* دکمه‌های ستونِ عملیات نباید با شکستنِ متن، ارتفاعِ سطر را به‌هم بریزند */
.k-grid td .btn-xs { white-space: nowrap; }

/* دکمهٔ سه‌نقطهٔ عملیات در گرید — مربع جمع‌وجور، بدون قابِ درشتِ تلریک */
.k-grid .grid-row-actions,
.k-grid .grid-row-actions .k-button {
    width: 1.85rem;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    color: var(--text-muted);
}
.k-grid .grid-row-actions .k-button:hover,
.k-grid .grid-row-actions .k-button:focus {
    background: var(--surface-2);
    color: var(--text);
}
.k-grid td:has(.grid-row-actions) {
    overflow: visible;
    text-align: center;
    padding-inline: 4px !important;
}

.btn-secondary {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.alert { border-radius: 9px; }

/* bg-light در Bootstrap با تم فلیپ نمی‌شود — به توکن وصل می‌کنیم
   (در لایت ≈ همان خاکستری قبلی، در دارک سطح تیره) */
.bg-light { background-color: var(--surface-2) !important; }

/* همان کاستیِ .bg-light برایِ .bg-white و .border-light */
.bg-white { background-color: var(--surface) !important; }
.border-light { border-color: var(--border) !important; }

/* .text-dark در بوت‌استرپ ۵٫۳ ثابتِ #212529 است — بلوکِ [data-bs-theme=dark]
   متغیرِ --bs-dark-rgb را بازتعریف نمی‌کند — پس رویِ زمینهٔ #0b1220 نامرئی است.
   ⚠️ نمی‌شود متغیر را سراسری چرخاند: ۵۹ کاربرد از ۷۰ کاربردِ .text-dark رویِ
   .bg-warning یا .bg-info نشسته که در هر دو تم زرد/فیروزه‌ایِ روشن می‌مانند
   (‑‑bs-warning-rgb و ‑‑bs-info-rgb عمداً نگاشته نشده‌اند) و آن‌جا دقیقاً متنِ
   تیره لازم است؛ چرخاندنِ متغیر ضمناً .text-bg-dark را هم خراب می‌کرد.
   پس فقط جایی می‌چرخد که خودِ زمینه هم با تم چرخیده باشد. */
.text-dark { color: var(--text) !important; }

.bg-warning.text-dark,
.bg-info.text-dark,
.bg-warning .text-dark,
.bg-info .text-dark { color: #212529 !important; }

/* پرکاربردترین دکمهٔ برنامه (۲۱۳ کاربرد). خاکستریِ ثابتِ #6c757dِ بوت‌استرپ
   رویِ زمینهٔ تیره کم‌جان می‌شود و hoverش لکهٔ روشن می‌سازد. */
.btn-outline-secondary {
    --bs-btn-color: var(--text-muted);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--btn-face-hover);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--btn-face-active);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-border-color: var(--border);
}


@font-face {
    font-family: YekanBakhBlack;
    src: url(Fonts/YekanBakhBlack.woff2) format("woff2");
    font-display: swap;
}

/* ══════════════════════════════════════════════════════════
   صفحهٔ ورود — طرحِ تک‌ستونیِ متمرکز
   ══════════════════════════════════════════════════════════
   جایگزینِ چیدمانِ دوپنلیِ قبلی (فرم + پنلِ برندِ تمام‌قد). آن طرح نیمی از صفحه را صرفِ معرفیِ
   محصول به کسی می‌کرد که همین حالا کارمندِ خودِ ماست و روزی یک‌بار این صفحه را می‌بیند؛
   ستونِ فرم هم عملاً خالی می‌مانْد و نشان در ۴۰px خوانده نمی‌شد.

   کلاس‌ها با پیشوندِ lg- هستند و فقط همین صفحه از آن‌ها استفاده می‌کند. */

.login-page {
    /* دقیقاً هم‌اندازهٔ صفحهٔ نمایش، نه یک پیکسل بیشتر — وگرنه نوارِ اسکرولِ بی‌مصرف می‌آید.
       dvh برایِ مرورگرِ موبایل که نوارِ نشانی‌اش ارتفاع را عوض می‌کند؛ vh تکیه‌گاهِ قدیمی‌ترهاست. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.lg {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    /* ⚠️ عمداً align-items: center نیست و به‌جایش margin: auto رویِ .lg-mid نشسته.
       با مرکزچینیِ فلکس، وقتی محتوا از ظرف بلندتر شود (پیامِ خطا، فهرستِ بازِ کاربران، یا
       نمایشگرِ کوتاه) سرریز از **بالا** بریده می‌شود و نشان از کادر بیرون می‌زند —
       margin: auto این کار را نمی‌کند و به‌جایش اسکرول می‌دهد. */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 0;
    background: var(--bg);
}

/* ظرفِ لایه‌هایِ تزئینی — بریده، تا هیچ‌کدامشان ارتفاعِ صفحه را زیاد نکنند. */
.lg-bg {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* دو هالهٔ رنگی که آرام جابه‌جا می‌شوند تا پس‌زمینه ثابت و مرده نمانَد. */
.lg-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(8px); }

/* در تمِ سفید هر دو هاله برداشته شدند (درخواستِ کاربر، ۲۰۲۶-۰۸-۳۱): لکهٔ آبیِ
   بالا-راست و پایین-چپ. در تمِ تیره می‌مانند، چون آن‌جا زمینه را زنده
   نگه می‌دارند نه اینکه لکه به‌نظر برسند. */
html[data-bs-theme="light"] .lg-glow { display: none; }

.lg-glow-1 {
    width: 820px; height: 520px; top: -230px; inset-inline-start: -120px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), .22), transparent 66%);
    animation: lg-drift1 26s ease-in-out infinite alternate;
}

.lg-glow-2 {
    width: 700px; height: 460px; bottom: -220px; inset-inline-end: -100px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), .16), transparent 66%);
    animation: lg-drift2 32s ease-in-out infinite alternate;
}

@keyframes lg-drift1 { to { transform: translate(60px, 46px) scale(1.10); } }
@keyframes lg-drift2 { to { transform: translate(-54px, -38px) scale(1.08); } }

/* بافتِ کپسول — نشانهٔ حوزهٔ دارو، در شفافیتی که «بافت» دیده شود نه «تصویر». */
.lg-tex {
    position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4' opacity='0.9'%3E%3Crect x='12' y='20' width='30' height='13' rx='6.5' transform='rotate(-25 27 26.5)'/%3E%3Cline x1='27' y1='20' x2='27' y2='33' transform='rotate(-25 27 26.5)'/%3E%3Crect x='52' y='58' width='30' height='13' rx='6.5' transform='rotate(-25 67 64.5)'/%3E%3Cline x1='67' y1='58' x2='67' y2='71' transform='rotate(-25 67 64.5)'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .035;
    mask-image: radial-gradient(circle at 50% 44%, transparent 26%, #000 78%);
}

html[data-bs-theme="light"] .lg-tex { filter: invert(1); opacity: .03; }

/* بوعلی سینا — فقط هیکل، کمرنگ در گوشهٔ پایین-چپ (در RTL همان inset-inline-end). */
.lg-avicenna {
    position: absolute;
    inset-block-end: -2%;
    inset-inline-end: -1%;
    height: min(68vh, 600px);
    width: auto;
    max-width: 52vw;
    object-fit: contain;
    object-position: bottom;
    pointer-events: none;
    user-select: none;
    opacity: .17;
    z-index: 0;
}

html[data-bs-theme="light"] .lg-avicenna {
    mix-blend-mode: multiply;
    opacity: .22;
}

html[data-bs-theme="dark"] .lg-avicenna {
    mix-blend-mode: lighten;
    opacity: .50;
    filter: sepia(.18) saturate(1.12) brightness(1.18);
}

/* ── نوارِ ECG پایینِ صفحه (اثرِ مانیتور) ────────────────
   فقط ردِ ضربان، بدونِ شکلِ قلب. قلمِ روشن مسیر را آرام ضبط می‌کند
   (دنبالهٔ فسفر پشتِ سرِ نقطهٔ در حالِ ثبت). pathLength="1000" تا dash
   به طولِ واقعی وابسته نباشد؛ هر سه قطعه جمعِ dash+gap برابرِ ۱۰۰۰ دارند. */
.lg-ecg {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%; height: 128px;
    pointer-events: none; z-index: 0;
    overflow: visible;
}

.lg-ecg-base,
.lg-ecg-trail,
.lg-ecg-beam {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.lg-ecg-base {
    stroke: rgba(var(--primary-rgb), .16);
    stroke-width: 1.5;
}

html[data-bs-theme="light"] .lg-ecg-base { stroke: rgba(var(--primary-rgb), .20); }

.lg-ecg-trail,
.lg-ecg-beam {
    animation: lg-ecg-run 16s linear infinite;
}

.lg-ecg-trail-long {
    stroke: rgba(var(--primary-rgb), .28);
    stroke-width: 1.9;
    stroke-dasharray: 170 830;
    stroke-dashoffset: 1000;
}

.lg-ecg-trail-mid {
    stroke: rgba(var(--primary-rgb), .55);
    stroke-width: 2.2;
    stroke-dasharray: 72 928;
    stroke-dashoffset: 1000;
}

.lg-ecg-beam {
    stroke: var(--primary);
    stroke-width: 2.7;
    stroke-dasharray: 16 984;
    stroke-dashoffset: 1000;
    filter: drop-shadow(0 0 6px rgba(var(--primary-rgb), .95));
}

@keyframes lg-ecg-run { to { stroke-dashoffset: 0; } }

.lg-ecg-head {
    fill: var(--primary);
    filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 1));
}

.lg-mid { --col: 400px; position: relative; z-index: 1; width: var(--col); margin: auto; }

.lg-brand { margin-bottom: 18px; text-align: center; }

.sina-wordmark { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sina-wordmark-name {
    font-family: YekanBakhBlack, IRANSansWeb, Tahoma, sans-serif;
    font-size: 2.35rem;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--primary);
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sina-wordmark-steth {
    width: 118px;
    height: auto;
    margin: 0 0 8px;
}
.sina-steth-on-light { display: block; }
.sina-steth-on-dark { display: none; }
html[data-bs-theme="dark"] .sina-steth-on-light { display: none; }
html[data-bs-theme="dark"] .sina-steth-on-dark { display: block; }
.sina-wordmark-tag {
    margin-top: 4px;
    font-size: .78rem;
    color: var(--text-muted);
    letter-spacing: .04em;
}

/* تم تیره: طلاییِ حکاکیِ بوعلی سینا تا نام، گوشی و نوار ضربان با تصویر یکی شوند. */
html[data-bs-theme="dark"] .lg {
    --login-warm: #d7b07a;
    --login-warm-deep: #c09258;
    --login-warm-rgb: 215, 176, 122;
}
html[data-bs-theme="dark"] .lg-glow-1 {
    background: radial-gradient(circle, rgba(215, 176, 122, .20), transparent 66%);
}
html[data-bs-theme="dark"] .lg-glow-2 {
    background: radial-gradient(circle, rgba(184, 138, 82, .14), transparent 66%);
}
html[data-bs-theme="dark"] .sina-wordmark-name {
    color: var(--login-warm);
    background-image: linear-gradient(135deg, #ead4ae 0%, #d7b07a 52%, #c09258 100%);
}
html[data-bs-theme="dark"] .sina-wordmark-steth {
    filter: drop-shadow(0 0 8px rgba(215, 176, 122, .45));
}
html[data-bs-theme="dark"] .sina-wordmark-tag {
    color: #cbb896;
}
html[data-bs-theme="dark"] .lg-ecg-base { stroke: rgba(215, 176, 122, .22); }
html[data-bs-theme="dark"] .lg-ecg-trail-long { stroke: rgba(215, 176, 122, .34); }
html[data-bs-theme="dark"] .lg-ecg-trail-mid { stroke: rgba(215, 176, 122, .58); }
html[data-bs-theme="dark"] .lg-ecg-beam {
    stroke: #d7b07a;
    filter: drop-shadow(0 0 6px rgba(215, 176, 122, .9));
}
html[data-bs-theme="dark"] .lg-ecg-head {
    fill: #e6c89a;
    filter: drop-shadow(0 0 8px rgba(215, 176, 122, 1));
}

.sina-mark-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sina-badge {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
}
.sina-badge img { width: 20px; height: 20px; object-fit: contain; }
.cside img { width: 22px; height: 22px; object-fit: contain; }
html[data-bs-theme="dark"] .sina-badge {
    background: linear-gradient(135deg, #c09258, #d7b07a);
}

/* پابرگ سایدبار — طلایی تم تیره، روی زمینهٔ همیشه تیره‌ی نوار کناری */
.side-brand {
    flex-shrink: 0;
    padding: 0.8rem 0.85rem 1rem;
    border-top: 1px solid var(--side-line, rgba(255, 255, 255, 0.08));
    text-align: center;
}
.side-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.side-brand-row img,
.side-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.side-brand-name {
    font-family: YekanBakhBlack, IRANSansWeb, Tahoma, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    color: #d7b07a;
    background-image: linear-gradient(135deg, #ead4ae 0%, #d7b07a 52%, #c09258 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    pointer-events: none;
}
@media (max-width: 767.98px) {
    a.side-brand-name {
        pointer-events: auto;
        padding: 0.45rem 0.8rem;
    }
}
.side-brand-company {
    margin-top: 0.4rem;
    font-size: 0.68rem;
    line-height: 1.55;
    color: #cbb896;
}
.side-brand-web {
    display: inline-block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    color: #d7b07a;
    text-decoration: none;
    direction: ltr;
}
.side-brand-web:hover {
    color: #ead4ae;
    text-decoration: underline;
}
.side-brand-mini {
    padding: 0.55rem 0 0.75rem;
}
.side-brand-mini img {
    width: 26px;
    height: 26px;
    margin: 0 auto;
    display: block;
}
.sina-mark-name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.01em;
    line-height: 1;
}

/* ── کارتِ فرم ───────────────────────────────────────── */
.lg-card {
    position: relative;
    padding: 24px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(15, 31, 61, .12);
}

.lg-hello { margin-bottom: 18px; text-align: center; }
.lg-hello h2 { font-size: 1.06rem; font-weight: 800; margin: 0; }
.lg-hello p { font-size: .78rem; color: var(--text-muted); margin: 4px 0 0; }

.lg-field { position: relative; margin-bottom: 14px; }
.lg-label { display: block; font-size: .79rem; font-weight: 600; margin-bottom: 6px; }

.lg-input {
    width: 100%; height: 44px; padding: 0 13px; font: inherit; font-size: .89rem;
    border: 1px solid var(--border); border-radius: 11px;
    background: var(--bg); color: var(--text);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.lg-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .17);
}

.lg-input:disabled { opacity: .6; cursor: not-allowed; }

/* جا برایِ کلیدِ چشم، تا رمزِ بلند زیرش نرود. */
.lg-input-pass { padding-inline-end: 42px; }

.lg-otp { text-align: center; letter-spacing: .5em; font-size: 1.1rem; font-weight: 700; }

/* inset-inline-end یعنی در چیدمانِ راست‌به‌چپ سمتِ **چپ**. */
.lg-eye {
    position: absolute; inset-inline-end: 9px; top: 32px;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 7px;
    transition: background-color .15s ease, color .15s ease;
}

.lg-eye:hover { background: var(--muted-bg); color: var(--text); }

/* ── فهرستِ کشوییِ کاربران (تلریک) ─────────────────────────
   خودِ کامپوننت دست‌نخورده می‌مانَد؛ فقط ظاهرش با بقیهٔ فرم یکی می‌شود. */
.lg-field .k-input,
.lg-field .k-textbox,
.lg-field .k-picker {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 11px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: inherit; font-size: .89rem;
}

.lg-field .k-input:hover,
.lg-field .k-picker:hover { border-color: rgba(var(--primary-rgb), .55) !important; }

.lg-field .k-input.k-focus,
.lg-field .k-picker.k-focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .17) !important;
}

.lg-field .k-input .k-input-inner,
.lg-field .k-picker .k-input-inner {
    height: 100%;
    padding-block: 0;
    padding-inline: 13px;
}

.lg-remember {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; color: var(--text-muted); cursor: pointer;
    margin: 2px 0 18px;
}

/* ── دکمهٔ اصلی، با درخششی که از رویش می‌گذرد ─────────── */
.lg-btn {
    position: relative; overflow: hidden;
    width: 100%; height: 46px; font: inherit; font-size: .94rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--primary-contrast);
    box-shadow: 0 9px 22px rgba(var(--primary-rgb), .30);
    transition: transform .14s ease, box-shadow .14s ease;
}

.lg-btn > * { position: relative; z-index: 1; }

.lg-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
    transform: translateX(-160%);
    animation: lg-shine 4.2s ease-in-out infinite;
}

@keyframes lg-shine { 0%, 62% { transform: translateX(-160%); } 100% { transform: translateX(320%); } }

.lg-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(var(--primary-rgb), .38); }
.lg-btn:active:not(:disabled) { transform: translateY(0) scale(.995); }
.lg-btn:disabled { opacity: .7; cursor: progress; }

.lg-link {
    width: 100%; margin-top: 9px; padding: 7px; font: inherit; font-size: .78rem;
    border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

.lg-link:hover:not(:disabled) { background: var(--muted-bg); color: var(--text); }

/* ── پیام‌ها ─────────────────────────────────────────── */
.lg-alert {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 10px 12px; margin-bottom: 15px; border-radius: 11px;
    font-size: .8rem; line-height: 1.8;
}

.lg-alert-info { display: block; }

.lg-alert span { display: block; font-size: .72rem; opacity: .75; }

/* لرزشِ کوتاه فقط برایِ خطا — کاربر بی‌آنکه بخواند می‌فهمد چیزی درست نبوده. */
.lg-alert-err {
    background: rgba(220, 38, 38, .09); color: var(--danger-text);
    border: 1px solid rgba(220, 38, 38, .22);
    animation: lg-shake .4s cubic-bezier(.36,.07,.19,.97) both;
}

.lg-alert-info {
    background: rgba(var(--primary-rgb), .09); color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), .22); text-align: center;
    animation: lg-rise .3s cubic-bezier(.16,1,.3,1) both;
}

@keyframes lg-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes lg-rise { from { opacity: 0; transform: translateY(-6px); } }

/* آیکنِ هشدار به‌صورتِ SVG و نه نویسهٔ «!»: آن نویسه در بافتِ راست‌به‌چپ و با فونتِ فارسی
   جابه‌جا/نامرئی می‌شد (در سنجشِ چشمی روی تمِ تیره اصلاً دیده نشد). */
.lg-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 4px;
    color: var(--danger);
}

/* ── شعارِ روز، زیرِ کارتِ ورود ──────────────────────────
   بازنویسیِ ۲۰۲۶-۰۸-۳۱ به درخواستِ کاربر. پیش‌تر یک لایهٔ نستعلیقِ **متحرکِ** پس‌زمینه بود
   که پشتِ کارت رد می‌شد؛ حالا متنی ساکن با قلمِ یکان‌بخ، زیرِ کارت. سه چیز با آن رفت:
   انیمیشنِ ۲۶ثانیه‌ای، نسخهٔ دومِ «نوری که از رویش می‌گذرد» (.lg-callig-lit)، و کلِ
   سنجهٔ خودکارِ اندازه (js/loginCallig.js) — وقتی متن پشتِ چیزی نیست، جایی برای
   پوشیده‌شدن نمانده که لازم باشد اندازه‌اش حساب شود.

   ⚠️ حاشیهٔ منفی عمدی است: ظرف (.lg-mid) فقط ۴۰۰px پهنا دارد و متنِ ۳۲pt در آن به چند
   خط می‌شکست. متن از دو طرف بیرون می‌زند و نسبت به **صفحه** وسط‌چین می‌مانَد. */
.lg-callig {
    position: relative; z-index: 1;
    width: min(1080px, 92vw);
    margin-block: 52px 0;   /* فاصله از کارت، به درخواستِ کاربر بیشتر شد (۲۶ ← ۵۲) */
    margin-inline: calc((var(--col, 400px) - min(1080px, 92vw)) / 2);
}

.lg-callig span {
    display: block;
    font-family: YekanBakhBlack, IRANSansWeb, Tahoma, sans-serif;
    font-size: 27pt;   /* ۳۲pt کمی درشت بود (درخواستِ کاربر، ۲۰۲۶-۰۸-۳۱) */
    line-height: 1.7;
    text-align: center;
    color: var(--text-muted);
}

/* در تمِ تیره — همان که کاربر «تمِ آبی» می‌نامد، زمینه‌اش #0b1220 است — شعار سفید می‌شود.
   خاکستریِ --text-muted (#8ea2bd) روی آن زمینه کم‌جان بود. */
html[data-bs-theme="dark"] .lg-callig span { color: #ffffff; }

/* ── ورودِ پلکانیِ اجزا ──────────────────────────────────
   هر عنصر کمی دیرتر از قبلی می‌آید؛ چشم مسیرِ «کارت ← فرم ← دکمه» را دنبال می‌کند. */
@keyframes lg-in { from { opacity: 0; transform: translateY(14px); } }

.lg-a2 { animation: lg-in .60s .26s cubic-bezier(.16,1,.3,1) both; }
.lg-a3 { animation: lg-in .50s .38s cubic-bezier(.16,1,.3,1) both; }
.lg-a4 { animation: lg-in .50s .46s cubic-bezier(.16,1,.3,1) both; }
.lg-a5 { animation: lg-in .50s .54s cubic-bezier(.16,1,.3,1) both; }
.lg-a6 { animation: lg-in .50s .62s cubic-bezier(.16,1,.3,1) both; }
.lg-a7 { animation: lg-in .55s .74s cubic-bezier(.16,1,.3,1) both; }

/* اگر Blazor گرهٔ کارت را عوض کرد، ورود دوباره از opacity صفر شروع نشود. */
html[data-lg-intro="done"] .lg-a2,
html[data-lg-intro="done"] .lg-a3,
html[data-lg-intro="done"] .lg-a4,
html[data-lg-intro="done"] .lg-a5,
html[data-lg-intro="done"] .lg-a6,
html[data-lg-intro="done"] .lg-a7,
html[data-lg-intro="done"] .lg-alert-info {
    animation: none;
}

/* ── دربارهٔ «حرکتِ کمتر» ────────────────────────────────
   ⚠️ گاردِ prefers-reduced-motion از این صفحه **عمداً برداشته شد** — به درخواستِ صریح و
   مکررِ کاربر (۲۰۲۶-۰۸-۳۰). دلیلش این بود: ویندوز (تنظیمات ← دسترسی‌پذیری ← جلوه‌های
   بصری ← جلوه‌های انیمیشن) این نشانه را می‌دهد و روی ماشین‌های سازمان خاموش است، پس هیچ‌کس
   حرکتی نمی‌دید و طرح مرده به‌نظر می‌رسید.

   این یک انتخابِ آگاهانه است، نه فراموشی: حرکت‌هایِ باقی‌مانده عمداً آرام و کم‌دامنه‌اند
   (چرخهٔ نوارِ ECG ۱۶ ثانیه، جابه‌جاییِ هاله‌ها حداکثر ~۶۰px) تا برای کسی که به حرکت حساس است آزارنده
   نباشند. اگر روزی این صفحه بیرونِ سازمان استفاده شد، گارد باید برگردد.
   بقیهٔ برنامه (نوارِ کناری، پالت) همچنان گارد دارند. */

/* ── نمایشگرِ کوتاه ─────────────────────────────────────
   اندازه‌گیریِ زنده: در ارتفاعِ ۷۲۰ و ۸۶۴ محتوا ~۲۲۰px بلندتر از صفحه بود و نوارِ اسکرولِ
   داخلی می‌آمد. به‌جای اسکرول، خودِ اجزا فشرده می‌شوند تا صفحه دقیقاً هم‌اندازهٔ نمایشگر
   بماند — همان چیزی که خواسته شده بود. */
@media (max-height: 900px) {
    .lg { padding: 12px 0; }
    .lg-brand { margin-bottom: 10px; }
    .sina-wordmark-name { font-size: 1.85rem; }
    .sina-wordmark-steth { width: 92px; }
    .lg-avicenna { height: min(52vh, 440px); }
    .lg-card { padding: 16px 22px; }
    .lg-hello { margin-bottom: 11px; }
    .lg-hello h2 { font-size: .98rem; }
    .lg-field { margin-bottom: 9px; }
    .lg-input, .lg-field .k-input, .lg-field .k-textbox, .lg-field .k-picker { height: 40px !important; min-height: 40px; }
    .lg-eye { top: 29px; }
    .lg-remember { margin: 0 0 11px; }
    .lg-btn { height: 42px; }
}

@media (max-height: 760px) {
    .lg-card { padding: 13px 20px; }
    .lg-hello { margin-bottom: 8px; }
    .lg-field { margin-bottom: 7px; }
}

/* گوشی: کمی بالاتر از وسط، نه چسبیده به لبه. دسکتاپ همان margin:auto می‌ماند. */
@media (max-width: 767.98px) {
    .lg { padding-top: 14px; }
    .lg-mid { margin-top: 5vh; margin-bottom: auto; }
}

@media (max-width: 460px) {
    .lg-mid { --col: 100%; width: 100%; padding: 0 18px; margin-top: 5vh; margin-bottom: auto; }
    /* در پهنایِ گوشی، شعار از ظرف بیرون نمی‌زند و می‌شکند. */
    .lg-callig { width: 100%; margin-inline: 0; }
    .lg-avicenna { height: 36vh; max-width: 62vw; }
}


/* ══════════════════════════════════════════════════════════
   جدول‌ها: یک ردیف = یک خط
   ══════════════════════════════════════════════════════════
   مسئله‌ای که این بلوک حل می‌کند (سنجشِ ۲۰۲۶-۰۸-۲۹ روی عرضِ واقعیِ ناحیهٔ محتوا، یعنی
   پنجرهٔ ۱۳۶۶ منهایِ نوارِ کناریِ ۲۹۰ ⇒ ~۱۰۲۸px):

   ۱) متنِ سلول می‌شکست و هر ردیف ارتفاعِ خودش را می‌گرفت ⇒ جدول ناهموار و «شلوغ» دیده می‌شد.
      بدتر از آن، عدد از واحدش جدا می‌افتاد («۱۲٬۴۵۰٬۰۰۰» در یک خط و «ریال» در خطِ بعد).
   ۲) در گریدهایی که همهٔ ستون‌ها عرضِ ثابت داشتند جز یکی، آن یکی روی صفحهٔ باریک به عرضِ
      **صفر** می‌رسید و عملاً ناپدید می‌شد (نمونهٔ سنجیده‌شده: ستونِ «نام» در /crm/customers).
   ۳) جدولِ سادهٔ بی‌پوششِ table-responsive از لبهٔ صفحه بیرون می‌زد، بی هیچ اسکرولی.

   قاعدهٔ کلی: کم‌بودنِ عرض باید به **اسکرولِ افقی** ترجمه شود، نه به لهیدنِ ستون‌ها. */

/* ── سلولِ گرید: تک‌خطی با سه‌نقطه ─────────────────────────
   نتیجه‌اش ردیف‌هایِ دقیقاً هم‌ارتفاع است. متنِ بریده‌شده گم نمی‌شود: صفحه‌ها اسکرولِ افقی
   دارند و ستون‌ها با کشیدنِ لبه پهن می‌شوند. */
/* ⚠️ !important عمدی است و راهِ دیگری ندارد: در App.razor شیتِ تمِ تلریک **پس از** app.css
   بارگذاری می‌شود، و قاعدهٔ `.k-grid .k-table-td { white-space: normal }`ِ آن با اختصاصی‌بودنِ
   برابر، نسخهٔ ما را می‌بازد. جابه‌جاکردنِ ترتیبِ دو شیت ده‌ها قاعدهٔ دیگر را هم‌زمان عوض می‌کرد،
   پس فقط همین دو اعلان صریح شدند. (سنجشِ زنده: computedStyle.whiteSpace = "normal" بود.) */
.k-grid td,
.k-grid-header th {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── چگالیِ سلول ───────────────────────────────────────────
   پیش‌فرضِ تلریک `8px 12px` است. با ۹ ستون یعنی ۲۱۶px فقط حاشیه — بیش از یک ستونِ کامل.
   `6px 8px` همان جدول را در ~۷۰px کمتر جا می‌دهد و ارتفاعِ ردیف را از ۳۷ به ~۳۳px می‌آورد،
   یعنی چند ردیفِ بیشتر هم بدونِ اسکرول دیده می‌شود. (همان دلیلِ !importantِ بالا.) */
.k-grid td,
.k-grid-header th {
    padding: 6px 8px !important;
}

/* استثنا: سلولی که عمداً چند عنصر دارد (دکمه‌ها، نشان‌ها) نباید سه‌نقطه بخورد — خودِ ظرف
   flex است و بچه‌هایش جا دارند. */
.k-grid td > .d-flex,
.k-grid td > .btn-group {
    overflow: visible;
}

/* ── عددِ فارسی هرگز از واحدش جدا نشود ─────────────────────
   nowrapِ بالا این را در گرید حل می‌کند؛ این قاعده برایِ جدول‌های سادهٔ بوت‌استرپ است. */
.table td,
.table th {
    white-space: nowrap;
}

/* ستونی که واقعاً متنِ بلند دارد (توضیح، پیام، آدرس) با کلاسِ صریح از قاعده مستثنا می‌شود. */
.table td.wrap,
.table th.wrap,
.k-grid td.wrap {
    white-space: normal !important;
}

/* ── جدولِ ساده هرگز از صفحه بیرون نزند ────────────────────
   ⚠️ اینجا عمداً هیچ قاعدهٔ CSSای نیست. راهِ وسوسه‌انگیز `display:block; overflow-x:auto` روی
   خودِ <table> است، ولی سنجیده شد و **غلط بود**: با block شدن، جدول دیگر جعبهٔ جدول نیست و
   جدولِ باریک به‌جای پرکردنِ عرض، در گوشه جمع می‌شود (نمونه: جدولِ سه‌ستونیِ خلاصه).
   راهِ درست پوششِ `<div class="table-responsive">` در خودِ مارک‌آپ است — همان کاری که ۵۸
   جدولِ دیگرِ پروژه می‌کنند و ۳۰ جدولِ باقی‌مانده در ۲۰۲۶-۰۸-۲۹ به آن اضافه شدند. */

/* ── نوارِ اسکرولِ افقیِ گرید همیشه دیده شود ────────────────
   روی ویندوز نوارِ اسکرول تا وقتی ماوس داخل نیامده نازک/نامرئی است؛ کاربر نمی‌فهمید ستونِ
   دیگری هم هست و فکر می‌کرد جدول ناقص است. */
.k-grid-content {
    scrollbar-width: thin;
}

/* راهنمای شناورِ مجوزها — رنگ‌ها در هر دو تم خوانا بمانند */
.clinic-permtip {
    position: fixed;
    z-index: 20000;
    display: none;
    max-width: min(30rem, calc(100vw - 1.5rem));
    padding: .6rem .75rem;
    border-radius: .55rem;
    background: #16202e;
    color: #eef2f7;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
    text-align: justify;
    pointer-events: none;
}

.clinic-permtip.on {
    display: block;
}

.clinic-permtip-title {
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
}

.clinic-permtip-badge {
    display: inline-block;
    margin-inline-start: .35rem;
    padding: 0 .4rem;
    font-size: .62rem;
    font-weight: 700;
    color: #ffdada;
    background: #7f2430;
    border-radius: 1rem;
    vertical-align: middle;
}

.clinic-permtip-what {
    margin-top: .3rem;
    font-size: .78rem;
    line-height: 1.85;
    color: #c9d4e2;
}

.clinic-permtip-ex {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .78rem;
    line-height: 1.85;
    color: #eef2f7;
}

.clinic-permtip-ex-label {
    display: inline-block;
    margin-inline-end: .35rem;
    padding: 0 .45rem;
    font-size: .66rem;
    font-weight: 700;
    color: #16202e;
    background: #ffd97a;
    border-radius: 1rem;
    vertical-align: middle;
}

.clinic-permtip-key {
    margin-top: .4rem;
    font-size: .66rem;
    letter-spacing: .02em;
    color: #7d8ea3;
}


.kpi-card .k-card-body { padding: 1rem 1.1rem; }
.kpi-head { display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 0.35rem; }
.kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.kpi-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }
.kpi-card { border-top: 3px solid transparent; }
.kpi-primary { border-top-color: var(--primary); }
.kpi-success { border-top-color: var(--success); }
.kpi-warning { border-top-color: var(--warning); }
.kpi-danger  { border-top-color: var(--danger); }
.kpi-info    { border-top-color: var(--info); }
.kpi-muted   { border-top-color: var(--border); }
.num-cell { direction: ltr; display: inline-block; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.member-photo { width: 60px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; }
.member-photo-fallback { width: 60px; height: 80px; border-radius: 8px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); font-weight: 700; }
.member-photo-lg { width: 90px; height: 120px; }
.page-title-compact { font-size: 1.2rem; font-weight: 600; }
.section-title-compact { font-size: 1.05rem; font-weight: 600; }
.doctor-present-banner { font-size: 1.25rem; font-weight: 600; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.dash-acc-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 0.85rem; }
.dash-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: inherit;
    text-decoration: none;
    min-height: 7.2rem;
}
.dash-tile:hover {
    border-color: var(--primary);
    color: inherit;
}
.dash-tile-warn { border-color: var(--warning, #d97706); }
.dash-tile-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.dash-tile-value { font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.dash-tile-hint { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.dash-hero-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
.dash-empty { margin: 0 0 0.8rem; color: var(--text-muted); line-height: 1.75; }

/* میزکار — ویوی جدا از فرم‌های عملیاتی */
.ws { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.ws-hero {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.35rem 1.4rem 1.25rem;
    border-radius: 18px;
    color: #f8fafc;
    background:
        radial-gradient(900px 220px at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(128deg, #0f1f3d 0%, #1e3a8a 58%, #2563eb 100%);
    box-shadow: 0 18px 40px rgba(15, 31, 61, 0.18);
}
html[data-bs-theme="dark"] .ws-hero {
    background:
        radial-gradient(900px 220px at 100% 0%, rgba(59, 130, 246, 0.22), transparent 55%),
        linear-gradient(128deg, #0b1220 0%, #172554 70%, #1e3a8a 100%);
    border: 1px solid var(--border);
    box-shadow: none;
}
.ws-kicker { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.72; }
.ws-name { margin: 0 0 0.35rem; font-size: 1.55rem; font-weight: 800; line-height: 1.35; }
.ws-lead { margin: 0; max-width: 42rem; font-size: 0.88rem; line-height: 1.75; color: rgba(248, 250, 252, 0.82); }
.ws-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.ws-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.ws-date {
    flex: 0 0 auto;
    min-width: 9.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.ws-date-label { font-size: 0.72rem; opacity: 0.75; }
.ws-date-value { margin-top: 0.2rem; font-size: 1.05rem; font-weight: 800; }
.ws-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.95rem 1rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ws-block-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.ws-block-icon {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.ws-block-title { margin: 0; font-size: 0.98rem; font-weight: 800; }
.ws-block-hint { margin: 0.12rem 0 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.55; }
.ws-block-link {
    margin-inline-start: auto;
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.ws-block-link:hover { text-decoration: underline; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 0.7rem; }
.ws-metric {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: 5.7rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid transparent;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.ws-metric:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    background: var(--surface);
    color: inherit;
    transform: translateY(-1px);
}
.ws-metric-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    flex-shrink: 0;
    font-size: 0.95rem;
}
.ws-metric-copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ws-metric-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.ws-metric-value { font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.ws-metric-hint { font-size: 0.72rem; color: var(--text-muted); line-height: 1.45; }
.ws-metric.warn { background: rgba(217, 119, 6, 0.08); }
.ws-metric.warn .ws-metric-icon { background: rgba(217, 119, 6, 0.16); color: var(--warning-text); }
.ws-metric.good .ws-metric-icon { background: rgba(22, 163, 74, 0.14); color: var(--success-text); }
.ws-metric.money .ws-metric-value { font-size: 1.08rem; }
.ws-empty { margin: 0; color: var(--text-muted); line-height: 1.75; }
@media (max-width: 720px) {
    .ws-hero { flex-direction: column; }
    .ws-block-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-metric { transition: none; }
    .ws-metric:hover { transform: none; }
}
.form-label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }

/* کارت شناور پیام — گوشهٔ بالا-چپ، ورود از چپ */
.clinic-toast-host {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.clinic-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.22);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    transform: translateX(-120%);
    opacity: 0;
    transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .38s ease;
}

.clinic-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.clinic-toast-ic {
    flex: 0 0 auto;
    width: 46px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
}

.clinic-toast-success .clinic-toast-ic { color: var(--success); }
.clinic-toast-error .clinic-toast-ic { color: var(--danger); }
.clinic-toast-warning .clinic-toast-ic { color: var(--warning); }
.clinic-toast-info .clinic-toast-ic { color: var(--info); }

.clinic-toast-success { border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.clinic-toast-error { border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.clinic-toast-warning { border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.clinic-toast-info { border-color: color-mix(in srgb, var(--info) 28%, transparent); }

.clinic-toast-txt { min-width: 0; flex: 1; }
.clinic-toast-title {
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.3;
}

.clinic-toast-body {
    color: var(--text-muted);
    font-size: .82rem;
    margin-top: 2px;
    line-height: 1.45;
}

.clinic-toast-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    line-height: 1;
    font-size: 1.15rem;
    border-radius: 8px;
}

.clinic-toast-close:hover { color: var(--text); background: var(--surface-2); }

.clinic-visit-call {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 2147483100;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 420px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.3);
    border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .38s ease;
}
.clinic-visit-call.show {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.clinic-visit-call-ic {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #fff;
    background: var(--primary);
    animation: clinic-visit-call-pulse 1.1s ease-in-out 3;
}
.clinic-visit-call-txt { min-width: 0; flex: 1; }
.clinic-visit-call-kicker {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--primary);
    margin-bottom: 6px;
}
.clinic-visit-call-line {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
}
.clinic-visit-call-line span {
    display: inline-block;
    min-width: 3rem;
    margin-inline-end: .4rem;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
}
@keyframes clinic-visit-call-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.acc-page { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.acc-head {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.35rem 1.4rem 1.25rem;
    border-radius: 18px;
    color: #f8fafc;
    background:
        radial-gradient(900px 220px at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(128deg, #0f1f3d 0%, #1e3a8a 58%, #2563eb 100%);
    box-shadow: 0 18px 40px rgba(15, 31, 61, 0.18);
}
html[data-bs-theme="dark"] .acc-head {
    background:
        radial-gradient(900px 220px at 100% 0%, rgba(59, 130, 246, 0.22), transparent 55%),
        linear-gradient(128deg, #0b1220 0%, #172554 70%, #1e3a8a 100%);
    border: 1px solid var(--border);
    box-shadow: none;
}
.acc-head .page-title-compact,
.acc-head h1 {
    color: #f8fafc;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.35;
}
.acc-head .acc-kicker { color: rgba(248, 250, 252, 0.72); }
.acc-head .acc-lead,
.acc-head .text-muted { color: rgba(248, 250, 252, 0.82); }
.acc-head .acc-lead a { color: #fff; font-weight: 700; }
.acc-head > .k-input,
.acc-head > .k-textbox,
.acc-head > button,
.acc-head > .btn,
.acc-head > a.btn,
.acc-head > .rpt-actions,
.acc-head > .acc-head-actions {
    align-self: center;
}
.acc-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}
.acc-head .btn-outline-secondary,
.acc-head .btn-outline-primary,
.acc-head .acc-head-actions .btn-outline-secondary,
.acc-head .acc-head-actions .btn-outline-primary,
.acc-head .acc-head-actions a.btn-outline-secondary {
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    white-space: nowrap;
}
.acc-head .btn-outline-secondary:hover,
.acc-head .btn-outline-primary:hover,
.acc-head .acc-head-actions .btn-outline-secondary:hover,
.acc-head .acc-head-actions .btn-outline-primary:hover,
.acc-head .acc-head-actions a.btn-outline-secondary:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.65);
}
.acc-head .btn-primary,
.acc-head .acc-head-actions .btn-primary {
    white-space: nowrap;
    background: #fff;
    color: #1e3a8a;
    border-color: #fff;
    font-weight: 700;
}
.acc-head .btn-primary:hover,
.acc-head .acc-head-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #172554;
    border-color: rgba(255, 255, 255, 0.9);
}
.acc-head .btn-primary:disabled,
.acc-head .acc-head-actions .btn-primary:disabled {
    background: rgba(255, 255, 255, 0.45);
    color: rgba(30, 58, 138, 0.55);
    border-color: transparent;
}
.acc-head .btn-outline-success,
.acc-head .btn-outline-danger {
    background: rgba(255, 255, 255, 0.92);
}
.treasury-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    justify-content: flex-start;
    min-width: 11rem;
}
.treasury-row-actions .btn {
    white-space: nowrap;
}
.acc-page > .k-grid {
    border-radius: 16px;
    border-color: var(--border);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.acc-kicker {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.2rem;
}
.acc-lead {
    color: var(--text-muted);
    max-width: 46rem;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
}
.acc-switch {
    display: flex;
    gap: 0.3rem;
    background: var(--surface-2);
    padding: 0.28rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.acc-switch-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
}
.acc-switch-item.active,
.acc-switch-item:hover {
    background: var(--surface);
    color: var(--text);
}
.acc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.acc-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.95rem 1rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
article.content .k-card {
    border-radius: 16px;
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.acc-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.inv-sheet { padding-bottom: 1rem; }
.inv-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}
.inv-span-3 { grid-column: span 3; }
.inv-span-4 { grid-column: span 4; }
.inv-span-6 { grid-column: span 6; }
.inv-span-12 { grid-column: span 12; }
.inv-table-wrap { overflow-x: auto; margin-top: 0.4rem; }
.chk-alerts { display: flex; flex-direction: column; gap: 0.4rem; }
.chk-alert {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    text-align: right;
    width: 100%;
    border: 1px solid var(--border);
    border-inline-start-width: 4px;
    background: var(--surface);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: inherit;
    cursor: pointer;
}
.chk-alert.is-bad { border-inline-start-color: #c0392b; }
.chk-alert.is-warn { border-inline-start-color: #d68910; }
.chk-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; }
.chk-direction, .chk-bucket {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: right;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    color: inherit;
    cursor: pointer;
}
.chk-direction span, .chk-bucket span { color: var(--text-muted); font-size: 0.8rem; }
.chk-direction.active, .chk-bucket.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.chk-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.chk-bucket { padding: 0.45rem 0.65rem; }
.chk-bucket.is-bad strong { color: #c0392b; }
@media (max-width: 640px) { .chk-directions { grid-template-columns: 1fr; } }
.chk-sheet-wrap { overflow-x: auto; padding: 0.5rem 0 1rem; }
.chk-sheet {
    position: relative;
    margin: 0 auto;
    background: #fff;
    color: #111;
    border: 1px dashed #999;
    font-size: 12pt;
    line-height: 1.2;
    direction: rtl;
    color-scheme: light;
    box-sizing: border-box;
}
.chk-sheet-field { position: absolute; white-space: nowrap; }
@media print {
    .chk-sheet-wrap { padding: 0 !important; overflow: visible !important; }
    .chk-sheet { border: 0 !important; margin: 0 !important; position: absolute; top: 0; right: 0; }
}
/* فیش حقوق چاپی (ت-۸۸): هر فیش یک برگه. */
.pay-slip-sheet {
    max-width: 190mm;
    margin: 0 auto 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    color: #111;
    border: 1px solid #999;
    direction: rtl;
    color-scheme: light;
    break-inside: avoid;
}
.pay-slip-head { display: flex; justify-content: space-between; border-bottom: 1px solid #999; padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.pay-slip-meta, .pay-slip-foot { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-bottom: 0.75rem; }
.pay-slip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; }
.pay-slip-sheet .table { color: #111; }
.pay-slip-foot { border-top: 1px solid #999; padding-top: 0.5rem; }
.pay-slip-sign { display: flex; justify-content: space-around; padding-top: 2.5rem; }
@media print {
    .pay-slip-sheet { border: 0 !important; margin: 0 !important; max-width: none; break-after: page; }
    .pay-slip-sheet:last-child { break-after: auto; }
}
.trn-add-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.trn-add-label { color: var(--text-muted); font-size: 0.85rem; }
.trn-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.35rem 0.6rem;
    border-inline-start: 3px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    border-radius: 6px;
}
.trn-section-head .num-cell { color: var(--text-muted); font-size: 0.85rem; }
.inv-table { width: 100%; border-collapse: collapse; min-width: 68rem; }
.inv-table th {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: right;
    padding: 0.45rem 0.35rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.inv-table td { padding: 0.35rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
.inv-table .form-control,
.inv-table .form-select { min-width: 5.5rem; }
.inv-money { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; }
.inv-foot {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.8fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}
.inv-totals {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: var(--surface-2);
}
.inv-totals div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.28rem 0;
    font-size: 0.9rem;
}
.inv-totals .inv-due { font-weight: 800; font-size: 1rem; border-top: 1px solid var(--border); margin-top: 0.25rem; padding-top: 0.5rem; }
.inv-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
@media (max-width: 900px) {
    .inv-head { grid-template-columns: 1fr; }
    .inv-span-3, .inv-span-4, .inv-span-6, .inv-span-12 { grid-column: auto; }
    .inv-foot { grid-template-columns: 1fr; }
}
.trade-desk {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
}
.trade-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 34rem;
    overflow: auto;
    padding-left: 0.15rem;
}
.trade-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    width: 100%;
    text-align: right;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    color: inherit;
    cursor: pointer;
}
.trade-pick.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.trade-pick strong { font-size: 0.92rem; }
.trade-pick small { color: var(--text-muted); font-size: 0.78rem; }
@media (max-width: 900px) {
    .trade-desk { grid-template-columns: 1fr; }
    .trade-list { max-height: 16rem; }
}
.acc-panel-title { font-size: 0.98rem; font-weight: 800; margin: 0; }
.acc-panel-hint { color: var(--text-muted); font-size: 0.82rem; margin: 0.28rem 0 0; max-width: 40rem; }
.acc-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.acc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 0.9rem;
}
.acc-filters .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
}
.acc-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.35rem;
}
.acc-badge-group { background: rgba(30, 64, 175, 0.12); color: var(--primary); }
.acc-badge-ledger { background: rgba(14, 165, 233, 0.14); color: var(--info); }
.acc-badge-moeen { background: rgba(22, 163, 74, 0.14); color: var(--success-text); }
.acc-badge-tafsili { background: rgba(217, 119, 6, 0.16); color: var(--warning-text); }
.acc-lock {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    margin-right: 0.35rem;
}
.acc-path { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.acc-inactive { opacity: 0.55; }
.acc-dialog-lead { color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; margin: 0 0 1.1rem; }
.acc-step {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.8rem;
    margin-bottom: 1.05rem;
    align-items: start;
}
.acc-step-num {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.acc-preview {
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    white-space: pre-line;
    line-height: 1.65;
    font-size: 0.88rem;
}
.acc-preview-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.acc-doc-filters {
    display: grid;
    grid-template-columns: 9.5rem 9.5rem 11rem minmax(12rem, 1.5fr) 9.5rem;
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 0.95rem;
}
.treasury-voucher-filters {
    grid-template-columns: 9.5rem 9.5rem minmax(11rem, 1.3fr) 9.5rem 9.5rem 8.5rem minmax(11rem, 1.2fr);
}
.treasury-voucher-filters .treasury-filter-wide {
    grid-column: span 1;
}
@media (max-width: 1100px) {
    .treasury-voucher-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .treasury-voucher-filters .treasury-filter-wide { grid-column: 1 / -1; }
}
.acc-doc-filters .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
}
.acc-doc-filters .k-dropdownlist,
.acc-doc-filters .k-textbox,
.acc-doc-filters .k-picker {
    width: 100%;
}
.acc-doc-number { font-weight: 700; }
.acc-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.acc-muted { color: var(--text-muted); }
.acc-doc-grid .k-grid-content td { vertical-align: middle; }
.acc-doc-sheet {
    margin-bottom: 1.1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid var(--border);
}
.acc-doc-sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.acc-doc-sheet-number {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.acc-doc-sheet-desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
}
.acc-doc-kv {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem 1rem;
    margin: 0.9rem 0 0;
}
.acc-doc-kv div { min-width: 0; }
.acc-doc-kv dt {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 0.15rem;
}
.acc-doc-kv dd {
    margin: 0;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .acc-doc-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acc-doc-filter-wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .acc-doc-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.clinic-row-tip {
    position: fixed;
    z-index: 12000;
    max-width: min(28rem, calc(100vw - 24px));
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    font-size: 0.78rem;
    line-height: 1.7;
    white-space: pre-line;
    pointer-events: none;
    direction: rtl;
    text-align: right;
    opacity: 0;
    visibility: hidden;
}
.clinic-row-tip.is-on {
    opacity: 1;
    visibility: visible;
}
.acc-voucher-head,
.acc-voucher-line {
    display: grid;
    grid-template-columns: 1.4fr 1.1fr 7.2rem 7.2rem 1fr auto;
    gap: 0.45rem;
    align-items: center;
}
.acc-voucher-head {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.acc-voucher-line {
    margin-bottom: 0.4rem;
}
.acc-voucher-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}
.acc-voucher-totals {
    font-size: 0.86rem;
    font-weight: 600;
}
@media print {
    .clinic-row-tip { display: none !important; }
}

.xml-import-overlay {
    position: fixed;
    inset: 0;
    z-index: 16000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 80% 10%, rgba(var(--primary-rgb), 0.22), transparent 55%),
        rgba(11, 18, 32, 0.72);
    backdrop-filter: blur(10px);
}
.xml-import-sheet {
    width: min(56rem, 100%);
    padding: 2.1rem 2.2rem 1.85rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.97), rgba(var(--surface-rgb), 0.92));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    text-align: center;
}
.xml-import-kicker {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.xml-import-title {
    margin: 0.35rem 0 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
}
.xml-import-pct {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    margin: 1.15rem 0 1.05rem;
    color: var(--primary);
    line-height: 1;
}
.xml-import-num {
    font-size: clamp(3.2rem, 8vw, 5.4rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.xml-import-sign {
    font-size: 1.6rem;
    font-weight: 700;
}
.xml-import-track {
    position: relative;
    height: 1.05rem;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: var(--muted-bg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.xml-import-fill {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: var(--xml-pct, 0%);
    margin-inline-start: auto;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-hover), var(--accent));
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.45);
    transition: width 0.35s ease;
}
.xml-import-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(40%);
    animation: xml-import-shine 1.8s linear infinite;
}
.xml-import-hint {
    margin: 1rem auto 0;
    max-width: 36rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
}
@keyframes xml-import-shine {
    from { transform: translateX(-60%); }
    to { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) {
    .xml-import-fill,
    .xml-import-fill::after { animation: none; transition: none; }
}
@media print {
    .xml-import-overlay { display: none !important; }
}

.clinic-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 16100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1.25rem;
    overflow: auto;
    background:
        radial-gradient(1200px 600px at 80% 10%, rgba(var(--primary-rgb), 0.18), transparent 55%),
        rgba(11, 18, 32, 0.72);
    backdrop-filter: blur(10px);
}
.clinic-modal-sheet {
    width: min(46rem, 100%);
    margin: auto;
    padding: 1.4rem 1.5rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--surface);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    text-align: right;
}
.clinic-modal-title {
    margin: 0.2rem 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
.clinic-modal-sheet-wide {
    width: min(64rem, 100%);
    max-height: calc(100vh - 3rem);
    overflow: auto;
}
.clinic-modal-overlay:has(.moadian-detail-sheet) {
    padding: 0.75rem 0.75rem;
    align-items: stretch;
}
.clinic-modal-sheet-wide.moadian-detail-sheet {
    width: calc(100vw - 1.5rem);
    max-width: none;
    max-height: calc(100vh - 1.5rem);
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
}
.moadian-detail-sheet .clinic-modal-title {
    overflow-wrap: anywhere;
}
.moadian-detail-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}
.moadian-detail-sheet .table-responsive {
    max-width: 100%;
}
.moadian-detail-sheet .table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
}
.moadian-detail-sheet .table .moadian-col-service { width: 13%; }
.moadian-detail-sheet .table .moadian-col-amount { width: 8%; }
.moadian-detail-sheet .table .moadian-col-id { width: 10%; }
.moadian-detail-sheet .table .moadian-col-title { width: 50%; }
.moadian-detail-sheet .table .moadian-col-vat { width: 4.6rem; text-align: center; padding-inline: 0.35rem; }
.moadian-detail-sheet .table .moadian-col-status { width: 8%; }
.moadian-detail-sheet .table .moadian-col-action { width: 7%; }
.moadian-detail-sheet .table td,
.moadian-detail-sheet .table th {
    display: table-cell;
    white-space: normal;
    overflow-wrap: anywhere;
    border-inline-end: 1px solid var(--border);
    padding: 0.65rem 0.8rem;
    vertical-align: top;
}
.moadian-detail-sheet .table th {
    background: var(--surface-2);
    font-weight: 800;
}
.moadian-detail-sheet .table td:last-child,
.moadian-detail-sheet .table th:last-child {
    border-inline-end: none;
}
.moadian-detail-sheet .table tbody tr + tr td {
    border-top: 1px solid var(--border);
}
.moadian-detail-sheet .table .num-cell,
.moadian-detail-sheet .table .text-nowrap {
    white-space: nowrap;
    overflow-wrap: normal;
}
.moadian-detail-sheet .acc-lead {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.clinic-modal-overlay.is-stacked { z-index: 16200; }
.moadian-map-panel {
    white-space: normal;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem 0.85rem;
    background: rgba(var(--primary-rgb), 0.04);
}
.moadian-picked {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    white-space: normal;
    overflow-wrap: anywhere;
}
.moadian-stuff-search {
    min-width: 0;
}
.moadian-stuff-search-bar {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
    align-items: stretch;
}
.moadian-stuff-search-bar .form-control {
    min-width: 0;
    flex: 1 1 0;
}
.moadian-stuff-search-bar .k-button {
    flex: 0 0 auto;
}
.moadian-stuff-hits {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 16rem;
    overflow: auto;
    margin-top: 0.75rem;
    padding: 0.2rem;
    min-width: 0;
}
.moadian-stuff-hit {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) 6.5rem;
    column-gap: 0.85rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: right;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    user-select: none;
    font: inherit;
}
.moadian-stuff-hit > .moadian-stuff-id,
.moadian-stuff-hit > .moadian-stuff-title {
    padding-inline-end: 0.85rem;
    border-inline-end: 1px solid var(--border);
}
.moadian-stuff-hit:hover { background: var(--row-hover); }
.moadian-stuff-hit.is-on {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
}
.moadian-stuff-id {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}
.moadian-stuff-title {
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    min-width: 0;
}
.moadian-stuff-vat {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: start;
}

/* ══════════════════════════════════════════════════════════
   قالب بالینی پزشک (ت-۵۱)
   فرم منشی هنگام ثبت، صفحهٔ اختصاص فیلد پزشک، ورودی ویزیت
   ══════════════════════════════════════════════════════════ */
.clinical-booking-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.clinical-booking-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.clinical-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.clinical-intake {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.clinical-step {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    padding: 1rem 1.1rem 1.15rem;
}
.clinical-step.is-form {
    background: var(--surface);
    box-shadow: 0 1px 0 rgba(var(--primary-rgb), 0.08);
}
.clinical-step-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}
.clinical-step-index {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary-contrast);
    background: var(--primary);
}
.clinical-step-head h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
}
.clinical-step-head p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.clinical-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.clinical-identity i {
    font-size: 1.35rem;
    color: var(--primary);
}
.clinical-identity.is-new i { color: var(--warning); }
.clinical-identity.is-known {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: color-mix(in srgb, var(--success) 8%, var(--surface));
}
.clinical-identity.is-new {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.clinical-identity strong {
    display: block;
    font-size: 0.95rem;
}
.clinical-identity span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.clinical-quote {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.clinical-quote .fs-4 { color: var(--primary); }
.clinical-book-action,
.clinical-book-action.k-button {
    width: 100%;
    justify-content: center;
}

.clinical-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 768px) {
    .clinical-fields.is-split {
        grid-template-columns: 1fr 1fr;
    }
    .clinical-field.is-wide { grid-column: 1 / -1; }
}
.clinical-field {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 0.85rem 0.95rem 1rem;
    min-width: 0;
}
.clinical-field.is-retired {
    background: var(--surface-2);
    opacity: 0.92;
}
.clinical-field-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}
.clinical-field-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}
.clinical-field-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.clinical-drop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}
.clinical-drop img {
    max-height: 160px;
    width: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.clinical-empty {
    text-align: center;
    padding: 1.4rem 1rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}
.clinical-empty i {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 0.4rem;
    color: var(--primary);
}
.clinical-empty p { margin: 0; font-size: 0.86rem; }

.clinical-composer .k-card-body { padding: 1.15rem 1.2rem 1.3rem; }
.clinical-choice-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}
.clinical-choice-row.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
    .clinical-choice-row,
    .clinical-choice-row.is-two { grid-template-columns: 1fr; }
}
.clinical-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.8rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-align: center;
    min-width: 0;
    font: inherit;
    appearance: none;
}
.clinical-choice i {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 0.15rem;
}
.clinical-choice strong {
    font-size: 0.86rem;
    font-weight: 700;
}
.clinical-choice em {
    font-style: normal;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.clinical-choice:hover { background: var(--row-hover); }
.clinical-choice.is-on {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 0 0 1px var(--primary);
}
.clinical-choice:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.clinical-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: start;
    cursor: pointer;
    font: inherit;
    appearance: none;
}
.clinical-toggle i { font-size: 1.25rem; color: var(--text-muted); }
.clinical-toggle.is-on {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.clinical-toggle.is-on i { color: var(--danger); }
.clinical-toggle.is-repeat {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.clinical-toggle.is-repeat i { color: var(--primary); }
.clinical-toggle strong { display: block; font-size: 0.88rem; }
.clinical-toggle em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.clinical-catalog {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 960px) {
    .clinical-catalog { grid-template-columns: 1fr; }
}
.clinical-catalog-col {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 1rem 1.05rem 1.1rem;
    min-height: 12rem;
}
.clinical-catalog-col h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
}
.clinical-catalog-col .clinical-kicker { margin-bottom: 0.1rem; }
.clinical-catalog-hint {
    margin: 0.2rem 0 0.85rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.clinical-def {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.65rem;
}
.clinical-def:last-child { margin-bottom: 0; }
.clinical-def.is-editing {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.07);
    box-shadow: 0 0 0 1px var(--primary);
}
.clinical-def-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}
.clinical-def-top h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
}
.clinical-def-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex-shrink: 0;
}
.clinical-def-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.clinical-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.95rem 1rem 1.05rem;
    background: var(--surface-2);
    margin-bottom: 0.9rem;
}
.clinical-panel.is-accent {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}
.clinical-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.clinical-panel-head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.visit-secretary-readout {
    padding: 1rem 1.1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface));
}
.visit-secretary-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.visit-secretary-head h2 {
    margin: 0.1rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.visit-secretary-head > span {
    font-size: 0.75rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}
.visit-secretary-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 0.65rem;
}
.visit-secretary-metric {
    min-width: 0;
    padding: 0.72rem 0.85rem 0.68rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.visit-secretary-metric > span {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.visit-secretary-metric strong {
    display: block;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
}
.visit-secretary-metric.is-empty strong {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-muted);
}
.visit-secretary-metric img {
    display: block;
    width: 100%;
    max-height: 112px;
    object-fit: cover;
    border-radius: 8px;
}
.visit-secretary-metric em {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-style: normal;
    color: var(--danger-text);
}

.queue-board {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}
.queue-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1.35rem 1.4rem 1.25rem;
    border-radius: 18px;
    color: #f8fafc;
    background:
        radial-gradient(900px 220px at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(128deg, #0f1f3d 0%, #1e3a8a 58%, #2563eb 100%);
    box-shadow: 0 18px 40px rgba(15, 31, 61, 0.18);
}
html[data-bs-theme="dark"] .queue-board-head {
    background:
        radial-gradient(900px 220px at 100% 0%, rgba(59, 130, 246, 0.22), transparent 55%),
        linear-gradient(128deg, #0b1220 0%, #172554 70%, #1e3a8a 100%);
    border: 1px solid var(--border);
    box-shadow: none;
}
.queue-board-head .clinical-kicker,
.queue-board-head .text-muted,
.queue-board-head .queue-close-hint { color: rgba(248, 250, 252, 0.82); }
.queue-board-head .page-title-compact { color: #f8fafc; font-size: 1.55rem; font-weight: 800; }
.queue-board-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    max-width: 22rem;
}
.queue-close-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
    text-align: start;
}
.queue-board-head .queue-closed-pill {
    background: rgba(255, 255, 255, 0.14);
    color: #fecaca;
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.queue-closed-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger-text);
    font-size: 0.82rem;
    font-weight: 700;
}
.queue-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.queue-kpi {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    padding: 0.85rem 0.95rem 0.9rem;
    border-top: 3px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 6.4rem;
}
.queue-kpi.kpi-success { border-top-color: var(--success); }
.queue-kpi.kpi-warning { border-top-color: var(--warning); }
.queue-kpi.kpi-primary { border-top-color: var(--primary); }
.queue-kpi.kpi-info { border-top-color: var(--info); }
.queue-kpi.kpi-muted { border-top-color: var(--text-muted); }
.queue-kpi-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}
.queue-kpi-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text);
}
.queue-kpi-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.queue-closed-banner,
.queue-unpaid-banner {
    border-radius: 12px;
    padding: 0.75rem 0.95rem;
    margin-bottom: 0.9rem;
    font-size: 0.88rem;
    line-height: 1.55;
}
.queue-closed-banner {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
    color: var(--danger-text);
    font-weight: 600;
}
.queue-unpaid-banner {
    background: color-mix(in srgb, var(--warning) 16%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
    color: var(--warning-text);
}

.dossier-dialog .k-window-content {
    padding-top: 0.6rem;
}
.dossier,
.dossier-dialog-body {
    direction: rtl;
    text-align: right;
}
.dossier-dialog-body {
    max-height: min(72vh, 820px);
    overflow: auto;
    padding-inline: 0.15rem 0.35rem;
}
.dossier .form-control,
.dossier .clinical-field,
.dossier .clinical-field-title,
.dossier .clinical-panel-head h3,
.dossier .dossier-visit-head h3,
.dossier .dossier-block-head h4,
.dossier .k-grid th,
.dossier .k-grid td {
    direction: rtl;
    text-align: right;
}
.dossier-section {
    margin-top: 1.15rem;
}
.dossier-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.dossier-section-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}
.dossier-section-head p {
    margin: 0;
    max-width: 28rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.dossier-allergies {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    margin-bottom: 0.9rem;
    background: color-mix(in srgb, var(--warning) 16%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
    color: var(--warning-text);
}
.dossier-allergies i { margin-top: 0.15rem; }
.dossier-allergies strong { display: block; font-size: 0.82rem; }
.dossier-allergies span { font-size: 0.78rem; }
.dossier-empty,
.dossier-visit-empty {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-muted);
    font-size: 0.86rem;
}
.dossier-empty {
    padding: 1.4rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 14px;
    justify-content: center;
}
.dossier-empty p,
.dossier-visit-empty { margin: 0; }
.dossier-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.dossier-visit {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.7rem;
}
.dossier-visit-rail {
    position: relative;
}
.dossier-visit-rail::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.32rem;
    top: 1.15rem;
    bottom: -1.1rem;
    width: 2px;
    background: color-mix(in srgb, var(--primary) 22%, var(--border));
}
.dossier-visit:last-child .dossier-visit-rail::before { display: none; }
.dossier-visit-dot {
    position: absolute;
    inset-inline-start: 0;
    top: 0.85rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.dossier-visit-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.95rem 1rem 1rem;
    background: var(--surface);
}
.dossier-visit.is-focus .dossier-visit-card {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.dossier-visit-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.dossier-visit-head h3 {
    margin: 0.15rem 0 0;
    font-size: 0.98rem;
    font-weight: 800;
}
.dossier-visit-date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}
.dossier-visit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.dossier-block {
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
}
.dossier-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.dossier-block-head h4 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.dossier-plain-list {
    margin: 0;
    padding: 0 1.1rem 0 0;
    text-align: right;
}
.dossier-plain-list li { margin: 0.15rem 0; }
.dossier-diagnosis {
    margin: 0;
    font-weight: 600;
    text-align: right;
}
.course-charts {
    display: grid;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.course-chart-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 0.85rem 1rem 0.4rem;
}
.course-chart-card h3 {
    margin: 0 0 0.4rem;
    font-size: 0.92rem;
    font-weight: 800;
    text-align: right;
}
.course-chart-frame {
    width: 100%;
}
.course-chart-tip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: right;
    font-size: 0.8rem;
}
.course-chart-tip strong { font-size: 0.88rem; }

/* ══════════════════════════════════════════════════════════
   گزارش‌های مالی (ت-۵۹) — هاب، فیلتر، برگهٔ گزارش، چاپ
   ══════════════════════════════════════════════════════════ */
.rpt-hub-group { display: flex; flex-direction: column; gap: 0.6rem; }
.rpt-hub-title {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.rpt-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.7rem;
}
.rpt-hub-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.rpt-hub-card:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.12);
    transform: translateY(-1px);
    color: var(--text);
}
.rpt-hub-icon {
    flex: 0 0 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 1.15rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, transparent);
}
.rpt-hub-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.rpt-hub-body strong { font-size: 0.95rem; }
.rpt-hub-body small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.55; }
.rpt-hub-go { color: var(--text-muted); font-size: 0.8rem; }

.rpt-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: flex-start; }
.rpt-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; }

.rpt-filters { padding-bottom: 1rem; }
.rpt-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem 0.9rem;
    align-items: end;
}
.rpt-filter-grid .form-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.rpt-filter-wide { grid-column: span 2; }
.rpt-filter-checks { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.rpt-filter-checks .form-check { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.rpt-filter-run { display: flex; justify-content: flex-end; }
.rpt-seg {
    display: inline-flex;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.rpt-seg button {
    flex: 1;
    border: 0;
    background: var(--surface);
    color: var(--text);
    padding: 0.38rem 0.3rem;
    font-size: 0.8rem;
}
.rpt-seg button + button { border-inline-start: 1px solid var(--border); }
.rpt-seg button.active { background: var(--primary); color: var(--primary-contrast); }
.rpt-loading { color: var(--text-muted); padding: 1.2rem; }

.rpt-sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.rpt-sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.7rem;
}
.rpt-sheet-center { font-size: 0.8rem; color: var(--text-muted); }
.rpt-sheet-title { font-size: 1.15rem; font-weight: 800; margin: 0.1rem 0 0.2rem; }
.rpt-sheet-sub { font-size: 0.85rem; color: var(--text-muted); }
.rpt-sheet-meta { font-size: 0.78rem; color: var(--text-muted); text-align: left; line-height: 1.8; }

.rpt-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.6rem;
}
.rpt-kpi {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-inline-start: 3px solid var(--border);
}
.rpt-kpi-label { font-size: 0.75rem; color: var(--text-muted); }
.rpt-kpi-value { font-size: 1.05rem; font-weight: 800; }
.rpt-kpi.is-ok { border-inline-start-color: var(--success); }
.rpt-kpi.is-bad { border-inline-start-color: var(--danger); }
.rpt-kpi.is-bad .rpt-kpi-value { color: var(--danger-text); }
.rpt-kpi.is-debit { border-inline-start-color: var(--primary); }
.rpt-kpi.is-credit { border-inline-start-color: var(--warning); }

.rpt-alert {
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    color: var(--danger-text);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
}

.rpt-table-wrap {
    overflow: auto;
    max-height: 68vh;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.rpt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
}
.rpt-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.76rem;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-align: right;
}
.rpt-table td {
    padding: 0.42rem 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.rpt-table tbody tr:hover td { background: var(--row-hover); }
.rpt-table .rpt-num { text-align: left; white-space: nowrap; }
.rpt-table .rpt-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-table .rpt-wide { min-width: 14rem; }
.rpt-table .rpt-neg { color: var(--danger-text); }
.rpt-table .rpt-empty { text-align: center; color: var(--text-muted); padding: 1.4rem; }
.rpt-row-actions { white-space: nowrap; text-align: left; }
.rpt-row-actions .btn + .btn { margin-inline-start: 0.3rem; }
.rpt-row-group td {
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    font-weight: 800;
    color: var(--primary);
}
.rpt-row-subtotal td { font-weight: 700; background: var(--surface-2); }
.rpt-row-total td {
    font-weight: 800;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-top: 2px solid color-mix(in srgb, var(--primary) 45%, var(--border));
}
/* جمع آخر جدول همیشه در دید است، حتی وقتی جدول بلند اسکرول می‌خورد. */
.rpt-table tbody tr.rpt-row-total:last-child td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    box-shadow: 0 -4px 10px rgba(15, 23, 42, 0.06);
}
.rpt-row-opening td { font-style: italic; color: var(--text-muted); background: var(--surface-2); }
.rpt-row-muted td { color: var(--text-muted); }
.rpt-row-warning td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
.rpt-row-warning td { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.rpt-row-drill { cursor: pointer; }
.rpt-row-drill:hover td:first-child { color: var(--primary); text-decoration: underline; }

.rpt-pager { display: flex; align-items: center; justify-content: center; gap: 0.8rem; font-size: 0.85rem; }
.rpt-notes { margin: 0; padding-inline-start: 1.1rem; color: var(--text-muted); font-size: 0.78rem; line-height: 1.8; }
.rpt-sheet-foot { display: none; }

/* سال مالی */
.fy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; padding-bottom: 0.6rem; }
.fy-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--surface);
    border-top: 3px solid var(--success);
}
.fy-card.is-closed { border-top-color: var(--text-muted); background: var(--surface-2); }
.fy-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.fy-card-year { font-size: 1.5rem; font-weight: 800; }
.fy-card-range { font-size: 0.78rem; color: var(--text-muted); }
.fy-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0; }
.fy-card-stats div { background: var(--surface-2); border-radius: 8px; padding: 0.35rem 0.5rem; }
.fy-card-stats dt { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.fy-card-stats dd { margin: 0; font-weight: 700; }
.fy-card-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

@media (max-width: 640px) {
    .rpt-filter-wide { grid-column: auto; }
    .rpt-sheet { padding: 0.8rem; }
    .rpt-sheet-head { flex-direction: column; }
    .rpt-sheet-meta { text-align: right; }
}

@media print {
    .rpt-page { gap: 0 !important; }
    .rpt-sheet {
        border: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #000 !important;
        gap: 0.35rem !important;
    }
    .rpt-table-wrap { max-height: none !important; overflow: visible !important; border: 0 !important; }
    .rpt-table { font-size: 8.5pt !important; }
    .rpt-table thead { display: table-header-group; }
    .rpt-table tbody tr.rpt-row-total:last-child td { position: static !important; box-shadow: none !important; }
    .rpt-table thead th { position: static !important; background: #eef1f5 !important; color: #000 !important; border-bottom: 1px solid #555 !important; }
    .rpt-table td { padding: 2.5pt 4pt !important; border-bottom: 1px solid #ccc !important; color: #000 !important; }
    .rpt-table tr { page-break-inside: avoid; }
    .rpt-row-total td, .rpt-row-subtotal td, .rpt-row-group td { background: #f1f3f6 !important; color: #000 !important; }
    .rpt-row-warning td { background: #fff4f4 !important; }
    .rpt-kpi { background: #fff !important; border-color: #bbb !important; padding: 3pt 6pt !important; }
    .rpt-kpi-value { font-size: 10pt !important; }
    .rpt-summary { gap: 4pt !important; }
    .rpt-sheet-foot { display: flex !important; justify-content: space-around; margin-top: 18pt; font-size: 9pt; }
}

/* ===== ت-۶۰…۶۲: ورود مبلغ، کنترل سال مالی، خلاصهٔ مالی ===== */
.money-input { display: flex; flex-direction: column; gap: 0.15rem; min-width: 6.5rem; }
.money-input-box { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; }
.money-input-words { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; }
.inv-totals-input { max-width: 9rem; }
.inv-words { font-size: 0.75rem; color: var(--text-muted); text-align: start; border: 0 !important; padding-top: 0 !important; }

.acc-note-info {
    border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
    background: color-mix(in srgb, var(--info) 8%, var(--surface));
    color: var(--text);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
}

.fy-controls { display: flex; flex-direction: column; gap: 0.6rem; }
.fy-switch {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2);
}
.fy-switch .form-check-input { margin-top: 0.2rem; flex: none; }
.fy-switch small { display: block; color: var(--text-muted); font-size: 0.78rem; }

html[data-bs-theme="light"] { --chart-rev: #2a78d6; --chart-exp: #eb6834; --chart-grid: #e2e8f0; }
html[data-bs-theme="dark"] { --chart-rev: #3987e5; --chart-exp: #d95926; --chart-grid: #233047; }

.rpt-hub-kpis { margin-bottom: 0.2rem; }
.rpt-hub-kpis .rpt-kpi { text-decoration: none; color: var(--text); transition: background 0.15s, transform 0.15s; }
.rpt-hub-kpis .rpt-kpi:hover, .rpt-hub-kpis .rpt-kpi:focus-visible { background: var(--row-hover); transform: translateY(-1px); }

.rpt-trend-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; }
.rpt-trend-head .acc-panel-title { margin: 0; }
.rpt-trend-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--text-muted); align-items: center; }
.rpt-trend-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.rpt-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rpt-swatch.is-rev, .rpt-bar.is-rev { background: var(--chart-rev); }
.rpt-swatch.is-exp, .rpt-bar.is-exp { background: var(--chart-exp); }

.rpt-trend-plot {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    height: 200px;
    border-bottom: 1px solid var(--chart-grid);
    background-image: repeating-linear-gradient(to top, var(--chart-grid) 0 1px, transparent 1px 25%);
    padding-top: 1.2rem;
}
.rpt-trend-month { position: relative; display: flex; flex-direction: column; justify-content: flex-end; outline: none; border-radius: 6px; }
.rpt-trend-month:hover, .rpt-trend-month:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); }
.rpt-trend-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.rpt-bar { width: min(22px, 38%); border-radius: 4px 4px 0 0; position: relative; min-height: 0; }
.rpt-bar em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; padding-bottom: 2px; }
.rpt-trend-label { position: absolute; top: 100%; inset-inline: 0; text-align: center; font-size: 0.75rem; color: var(--text-muted); padding-top: 0.3rem; }
.rpt-trend { padding-bottom: 2.2rem; }
.rpt-trend-month[data-tip]:hover::after, .rpt-trend-month[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    background: var(--text); color: var(--surface);
    font-size: 0.75rem; padding: 0.35rem 0.6rem; border-radius: 6px; white-space: nowrap; z-index: 5;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .rpt-trend-plot { height: 160px; gap: 0.25rem; }
    .rpt-hub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
    .rpt-hub-kpis .rpt-kpi { padding: 0.5rem 0.6rem; }
    .rpt-hub-kpis .rpt-kpi-value { font-size: 0.95rem; }
    .rpt-trend-month[data-tip]:hover::after, .rpt-trend-month[data-tip]:focus-visible::after { white-space: normal; width: 10rem; }
}
@media print { .rpt-hub-kpis, .rpt-trend { display: none !important; } }