/* ---------------------------------------------------------------
 *  این فایل ساخته می‌شود — دستی ویرایشش نکنید.
 *  منبع: assets/css/modules/  ·  ساخت: php tools/build-css.php
 *  هر تغییری اینجا با اجرای بعدی build از بین می‌رود.
 * --------------------------------------------------------------- */
/* =====================================================================
   متغیرهای تم، ریست، دکمه‌ها، فرم‌ها، پیام‌ها
   خطوط 1 تا 256 از style.css اصلی.
   ===================================================================== */
/* =====================================================================
   سامانه فیش حقوقی - استایل اصلی
   پشتیبانی از تم روشن (پیش‌فرض) و تم تاریک از طریق [data-theme]
   ===================================================================== */

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

:root {
    /* پالت حرفه‌ای Minimalism/Swiss برای محصولات مالی (Slate + Trust Blue) — UI/UX Pro Max */
    --bg: #ffffff;
    --panel-bg: #f1f5f9;          /* slate-100 */
    --panel-bg-soft: #f8fafc;     /* slate-50 */
    --panel-border: #e2e8f0;      /* slate-200 */
    --button-bg: #e2e8f0;         /* slate-200 */
    --button-bg-hover: #cbd5e1;   /* slate-300 */
    --button-text: #0f172a;       /* slate-900 */
    --text: #0f172a;              /* slate-900 */
    --text-muted: #475569;        /* slate-600 — کنتراست AA روی پنل */
    --accent: #2563eb;            /* blue-600 — آبی اعتماد */
    --accent-hover: #1d4ed8;      /* blue-700 */
    --accent-soft: #eff6ff;       /* blue-50 */
    --accent-text: #ffffff;
    --success: #16a34a;           /* green-600 */
    --danger: #dc2626;            /* red-600 */
    --warning: #b45309;           /* amber-700 — کنتراست AA روی سفید */
    --leave-mission: #eab308;         /* yellow-500 — مأموریت روزانه */
    --leave-mission-hourly: #6b7280;  /* gray-500  — مأموریت ساعتی */
    --input-bg: #ffffff;
    --input-border: #cbd5e1;      /* slate-300 */
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --login-panel-bg: #e2e8f0;
    --login-card-bg: #ffffff;
    --login-page-gradient: linear-gradient(135deg, #1e3a8a 0%, #3730a3 55%, #1e293b 100%);
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(255, 255, 255, 0.6);
    --header-bar-bg: #e2ecfb;
    --header-bar-border: #c7dbf5;
    --login-frame-bg: rgba(255, 255, 255, 0.22);
    /* توکن‌های تازه‌ی لایه‌ی پالیش حرفه‌ای */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
    --ring: #2563eb;
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

:root[data-theme="dark"] {
    /* تم تاریک Slate حرفه‌ای — UI/UX Pro Max */
    --bg: #0f172a;                /* slate-900 */
    --panel-bg: #1e293b;          /* slate-800 */
    --panel-bg-soft: #172033;
    --panel-border: #334155;      /* slate-700 */
    --button-bg: #334155;         /* slate-700 */
    --button-bg-hover: #475569;   /* slate-600 */
    --button-text: #f1f5f9;
    --text: #f1f5f9;              /* slate-100 */
    --text-muted: #94a3b8;        /* slate-400 */
    --accent: #3b82f6;            /* blue-500 */
    --accent-hover: #60a5fa;      /* blue-400 */
    --accent-soft: #1e293b;
    --accent-text: #ffffff;
    --success: #22c55e;
    --danger: #f87171;
    --warning: #fbbf24;
    --leave-mission: #facc15;         /* yellow-400 */
    --leave-mission-hourly: #9ca3af;  /* gray-400 */
    --input-bg: #0f172a;
    --input-border: #334155;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    --login-panel-bg: #0b1220;
    --login-card-bg: #1e293b;
    --login-page-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 55%, #020617 100%);
    --glass-bg: rgba(30, 41, 59, 0.92);
    --glass-border: rgba(255, 255, 255, 0.12);
    --header-bar-bg: #16233b;
    --header-bar-border: #24344f;
    --login-frame-bg: rgba(255, 255, 255, 0.08);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --ring: #3b82f6;
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

/* یکدست‌سازی سطوح سفید در تم تاریک */
:root[data-theme="dark"] .company-form-field input:not(:disabled),
:root[data-theme="dark"] .company-form-field select:not(:disabled),
:root[data-theme="dark"] .company-form-field .typeahead-input:not(:disabled),
:root[data-theme="dark"] .job-title-entry-field input:not(:disabled),
:root[data-theme="dark"] .users-form-panel input:not(:disabled),
:root[data-theme="dark"] .users-form-panel select:not(:disabled),
:root[data-theme="dark"] .job-titles-form-panel .filters-row > form input:not(:disabled),
:root[data-theme="dark"] .job-titles-form-panel .filters-row > form select:not(:disabled),
:root[data-theme="dark"] .job-titles-form-panel .job-company-display-field.has-company input,
:root[data-theme="dark"] .message-recipient-field select {
    background: #263449 !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] .iw-sample img,
:root[data-theme="dark"] .iw-dz-icon { background: #334155; }
:root[data-theme="dark"] .message-compose-panel,
:root[data-theme="dark"] .message-list-panel,
:root[data-theme="dark"] .public-message-panel,
:root[data-theme="dark"] .message-compose-panel input,
:root[data-theme="dark"] .message-compose-panel select,
:root[data-theme="dark"] .message-compose-panel textarea { background-color: #263449; color: #ffffff; }

* { box-sizing: border-box; }

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Vazirmatn', Tahoma, 'Segoe UI', Arial, sans-serif;
    transition: background-color .2s ease, color .2s ease;
}

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

/* ---------------------------------------------------------------- تم toggle ---------------------------------------------------------------- */
.theme-toggle {
    display: inline-block;
    position: relative;
    width: 54px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
}
.theme-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.theme-toggle-slider {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #15181f;
    transition: background-color .2s ease;
}
.theme-toggle-slider::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .25s ease, background-color .2s ease, box-shadow .25s ease;
}
:root[data-theme="dark"] .theme-toggle-slider { background: #fff; }
:root[data-theme="dark"] .theme-toggle-slider::after {
    background: transparent;
    box-shadow: 7px 7px #15181f;
    transform: translateX(24px) translateY(-5px);
}
.theme-toggle input:focus-visible + .theme-toggle-slider { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle input:checked + .theme-toggle-slider { background: #fff; }
.theme-toggle input:checked + .theme-toggle-slider::after {
    background: transparent;
    box-shadow: 7px 7px #15181f;
    transform: translateX(24px) translateY(-5px);
}

/* ---------------------------------------------------------------- دکمه‌ها ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease;
}
.btn:hover { background: var(--button-bg-hover); }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-outline:hover { background: var(--accent); color: var(--accent-text); }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 6px; }


/* ---------------------------------------------------------------- فرم‌ها ---------------------------------------------------------------- */
label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--text-muted); }
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
input[type="file"],
textarea {
    width: 100%;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
}
.field { margin-bottom: 16px; }

/* ---------------------------------------------------------------- پیام‌ها ---------------------------------------------------------------- */
.alert {
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.alert-error { background: rgba(230, 72, 63, .1); color: var(--danger); border-color: rgba(230, 72, 63, .3); }
.alert-success { background: rgba(31, 157, 85, .1); color: var(--success); border-color: rgba(31, 157, 85, .3); }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
}


.badge-success { color: var(--success); border-color: var(--success); }
.badge-danger { color: var(--danger); border-color: var(--danger); }
/* =====================================================================
   صفحه‌ی ورود
   خطوط 257 تا 543 از style.css اصلی.
   ===================================================================== */
/* =====================================================================
   صفحه ورود (سبک قالب مدرن با حاشیه offset پشت پنل)
   ===================================================================== */
.login-stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 90px;
    background: var(--login-page-gradient);
}
/* لایه رنگی offset پشت پنل ورود (شبیه تصویر مرجع)
   پنل ورود به راست، لایه شیشه‌ای پشت به چپ */
.login-frame {
    position: relative;
    display: grid;
    direction: ltr;
    width: 100%;
    max-width: 380px;
    --login-offset: 200px;
    overflow: visible;
}
.security-notice {
    position: relative;
    grid-area: 1 / 1;
    width: calc(100% + 200px);
    height: auto;
    margin-block: 10px;
    padding: 24px 28px;
    background: var(--login-frame-bg);
    border-radius: 18px;
    transform: translateX(calc(-1 * var(--login-offset) - 50px));
    z-index: 0;
    color: #000000;
    text-align: center;
    direction: rtl;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.security-notice h2 {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 800;
}
.security-notice ol {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    line-height: 2;
    list-style: none;
}
.security-notice li {
    margin-bottom: 8px;
}
.security-number {
    display: inline-block;
    margin-inline-end: 4px;
    font-weight: 800;
}
.security-notice-content {
    width: 100%;
    transform: translateX(-80px);
}
.login-card {
    position: relative;
    grid-area: 1 / 1;
    direction: rtl;
    z-index: 1;
    transform: translateX(var(--login-offset));
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 30px 28px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.login-card button {
    background: rgba(82, 127, 241, .55);
    color: #111827;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 5px 14px rgba(0, 0, 0, .08);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.login-card button:hover {
    background: rgba(25, 75, 190, .95);
    color: #ffffff;
}
.login-card button:focus-visible {
    background: rgba(25, 75, 190, .95);
    color: #ffffff;
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
}

.toggle-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}
.toggle-btn {
    flex: 1;
    padding: 9px 6px;
    border: 1px solid var(--panel-border);
    background: rgba(82, 127, 241, .55);
    color: #111827;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 11px;
    border-radius: 8px;
    transition: background .2s ease;
}
.toggle-btn.active {
    background: rgba(25, 75, 190, .95);
    color: #ffffff;
    border-color: rgba(255, 255, 255, .65);
}

.login-pane { display: none; flex-direction: column; }
.login-pane.active-pane { display: flex; }
.login-card h2 {
    font-size: 17px;
    margin: 0 0 20px;
    text-align: center;
}

/* هر سه کادر کد ملی، رمز عبور و دکمه ورود هم‌عرض و وسط‌چین */
.login-card .field {
    width: 60%;
    margin: 0 auto 14px;
}
.password-field-wrap { position: relative; }
.login-card input[type="text"],
.login-card input[type="password"] {
    text-align: center;
    font-size: 19px;
    padding: 10px 12px;
    border-radius: 8px;
}
.login-card input::placeholder { font-size: 14px; }
.password-field-wrap input { padding-inline-end: 40px; }
.password-eye {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;                        /* اندازه ثابت تا موقع hover جابه‌جا نشود */
    height: 32px;
    padding: 0;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;   /* حذف بلور که پشت آیکون سفیدی می‌ساخت */
    -webkit-backdrop-filter: none !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    line-height: 1;
    color: #000000;
    user-select: none;
    transition: none !important;
}
.eye-icon {
    display: block;
    width: 20px;                        /* ۵px بزرگ‌تر از ۱۵px */
    height: 20px;
    object-fit: contain;
    pointer-events: none;
}
.eye-icon-open {
    background: transparent;
}
.eye-icon-closed {
    width: 20px;
    height: 20px;
}
.password-eye.is-closed .eye-icon-open,
.password-eye:not(.is-closed) .eye-icon-closed {
    display: none;
}
.password-eye:hover,
.password-eye:focus,
.password-eye:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #000000;
    border: none;
    box-shadow: none !important;
    outline: none;
    filter: none;
    transform: translateY(-50%);
}
.login-submit {
    width: 60%;
    margin: 4px auto 0;
    font-size: 15px;
    padding: 10px 12px;
}
.login-submit.btn-primary {
    background: rgba(82, 127, 241, .55);
    color: #111827;
}
.login-submit.btn-primary:hover,
.login-submit.btn-primary:focus-visible {
    background: rgba(25, 75, 190, .95);
    color: #ffffff;
}
/* ناحیه ثابت برای نمایش خطا زیر دکمه، بدون کادر و بدون تغییر ارتفاع پنل */
.login-error {
    min-height: 54px;
    margin-top: 19px;
    color: var(--danger);
    font-size: 13px;
    line-height: 1.9;
    text-align: center;
}
#otpPane .login-error { color: var(--danger); font-weight: bold; }
#otpPane .login-error .login-ok,
#otpPane .login-error .otp-debug { font-weight: normal; }
.theme-toggle-fixed {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 5;
}

@media (max-width: 760px) {
    .login-stage {
        padding: 28px 20px;
        overflow-x: hidden;            /* جلوگیری از اسکرول افقی و سفیدی کنار */
    }
    .login-frame {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 380px;              /* عرض ثابت، وسط صفحه */
        margin-inline: auto;
    }
    /* پنل ورود بالاتر از هشدارها قرار بگیرد */
    .login-card {
        order: 1;
        transform: none;
        margin: 0;
        width: 100%;
    }
    .security-notice {
        order: 2;
        position: relative;
        inset: auto;
        width: 100%;
        padding: 18px 16px;
        transform: none;
        margin: 0;
    }
    /* حذف جابه‌جایی افقی که روی موبایل باعث سفیدیِ سمت چپ می‌شد */
    .security-notice-content {
        transform: none;
    }
    /* هشدارها ریزتر و وسط‌چین تا هر خط در یک ردیف جا شود */
    .security-notice h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .security-notice ol {
        font-size: 11px;
        line-height: 1.9;
        text-align: center;
    }
    .security-notice li {
        margin-bottom: 4px;
    }
}


/* =====================================================================
   رمز یکبار مصرف / بازیابی رمز — گام‌های داخل همان کارت ورود
   ===================================================================== */
.login-forgot {
    display: block;
    width: 60%;
    margin: 12px auto 0;
    text-align: center;
    font-size: 12.5px;
    color: #1e3a8a;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.login-forgot:hover { color: #1d4ed8; }
.otp-form { display: flex; flex-direction: column; }
.login-sub {
    margin: -8px auto 16px;
    width: 80%;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-muted);
}
.otp-code-input {
    letter-spacing: .35em;
    font-weight: 700;
}
.otp-code-input::placeholder { letter-spacing: normal; font-weight: 400; }
.otp-debug {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(217, 119, 6, .12);
    color: #92400e;
    font-size: 12px;
}
.login-ok { color: var(--success); }
.otp-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: -30px;    /* داخلِ ناحیه‌ی خالیِ زیرِ پیام خطا */
    margin-bottom: 8px;
}
.otp-inline-form { margin: 0; }
.login-card .otp-link {
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #1e3a8a;
    font-family: inherit;
    font-size: 12.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.login-card .otp-link:hover { color: #1d4ed8; }
.login-card .otp-link:disabled { color: var(--text-muted); text-decoration: none; cursor: default; }
.otp-done { display: flex; flex-direction: column; align-items: center; text-align: center; }
.otp-done-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 163, 74, .15);
    color: var(--success);
    font-size: 30px;
    font-weight: 800;
}
.otp-done h2 { margin-bottom: 10px; }
.otp-done .login-sub { margin-top: 0; }
.login-card a.otp-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    text-decoration: none;
    background: rgba(82, 127, 241, .55);
    color: #111827;
    border: 1px solid rgba(255, 255, 255, .5);
}
.login-card a.otp-back:hover { background: rgba(25, 75, 190, .95); color: #fff; }
:root[data-theme="dark"] .login-forgot,
:root[data-theme="dark"] .login-card .otp-link { color: #93c5fd; }

@media (max-width: 760px) {
    .login-card .field,
    .login-submit,
    .login-forgot { width: 80%; }
}

/* ارتفاع کارت ثابت است: به اندازه‌ی پنل «ورود برای اولین مرتبه» (گام ۱)؛ بقیه‌ی
   پنل‌ها داخل همان ارتفاع جا می‌گیرند و ناحیه‌ی پیام، فضای باقی‌مانده را می‌گیرد
   تا با عوض‌شدن زبانه یا گام، کارت بالا و پایین نپرد. */
.login-card { display: flex; flex-direction: column; min-height: 385px; padding-bottom: 22px; }
.login-pane.active-pane { flex: 1; }
.otp-form, .otp-done { flex: 1; }
.login-error { flex: 1 0 auto; }
#loginPane .field { margin-bottom: 10px; }
#loginPane .login-error { margin-top: 0; min-height: 25px; }
.login-forgot { margin-top: 8px; }
.otp-form .login-error { margin-top: 6px; min-height: 25px; }
.otp-step2 .login-error { min-height: 46px; }   /* جا برای پیام + لینک‌های زیرش */
.otp-links { margin-top: -24px; }
.login-sub { width: 100%; }
/* گام رمز جدید: سه کادر زیر هم؛ کادرها کوتاه‌تر تا در همان ارتفاع ثابت جا شوند */
.otp-step3 h2 { margin-bottom: 12px; }
.otp-step3 .field { margin-bottom: 8px; }
.login-card .otp-step3 input[type="text"],
.login-card .otp-step3 input[type="password"] { padding-block: 6px; font-size: 16px; }
.otp-step3 .password-eye { width: 28px; height: 28px; }
/* عنوانِ بازیابی رمز کمی ریزتر تا در یک خط جا شود */
.login-card h2.otp-title-sm { font-size: 15px; white-space: nowrap; }

/* ---------- بازبینیِ UI: خوانایی و دکمه‌ی اصلی ---------- */
/* متنِ پنلِ نکاتِ امنیتی روی زمینه‌ی تیره‌ی صفحه: سفید، تا در هر دو تم خوانا باشد */
.security-notice { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* دکمه‌ی اصلیِ «ورود» پُررنگ و سفیدنویس — نیمه‌شفاف بودنش آن را غیرفعال نشان می‌داد */
.login-card .login-submit.btn-primary { background: #1d4ed8; color: #ffffff; border-color: transparent; }
.login-card .login-submit.btn-primary:hover,
.login-card .login-submit.btn-primary:focus-visible { background: #1e40af; color: #ffffff; }
.login-card .login-submit.btn-primary:disabled { opacity: .6; cursor: default; }
/* برچسبِ تب‌های روشِ ورود: ۱۳px و ارتفاعِ مناسبِ لمس */
.toggle-btn { font-size: 13px; min-height: 40px; }
/* کاربرِ کیبورد باید بداند فوکوس روی آیکونِ چشم است */
.password-eye:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; border-radius: 6px; }
/* =====================================================================
   لایوت داشبورد
   خطوط 544 تا 662 از style.css اصلی.
   ===================================================================== */
/* =====================================================================
   لایوت داشبورد
   ===================================================================== */
.app-shell {
    display: flex;
    min-height: 100vh;
}


.payslip-nav-link {
    font-size: 15px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: 13.5px;
    white-space: nowrap;
}
.nav-link:hover { background: var(--button-bg); text-decoration: none; }
.nav-link.active { background: var(--button-bg); font-weight: bold; }

.main-area {
    flex: 1;
    min-width: 0;
    padding: 22px 28px 60px;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.topbar h1 { font-size: 20px; margin: 0; }
.topbar .today { color: var(--text-muted); font-size: 26px; }
/* =====================================================================
   سربرگ، پنل کاربری، منوها، دکمه‌ی فهرست
   خطوط 663 تا 1021 از style.css اصلی.
   ===================================================================== */
/* ============================================================
   سربرگ سایت: نوار خاکستری ۳۰px + پنل کاربری + دکمه فهرست
   ============================================================ */
.app-shell {
    display: block;
    min-height: 100vh;
}
.site-header {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: stretch;   /* ارتفاع دکمه فهرست = ارتفاع پنل کاربری */
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px;       /* پنل تا حد امکان به گوشه‌ی بالا-چپ می‌چسبد */
    background: var(--header-bar-bg);
    border-bottom: 1px solid var(--header-bar-border);
    direction: ltr;         /* پنل کاربری چپ، دکمه فهرست راست */
}

/* ---------- پنل کاربری ---------- */
.user-card-wrap {
    position: relative;
    width: max-content;
    /* یک‌ونیم برابرِ عرض طبیعی کادر (≈۱۸۰px)، ولی روی نمایشگر باریک کوچک می‌شود */
    min-width: min(270px, calc(100vw - 120px));
    max-width: calc(100vw - 120px);
}
.user-card {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 3px 5px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    direction: ltr; /* ستون‌ها: چپ، وسط، راست */
}
.uc-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* دکمه‌ها به گوشه‌های بالا و پایین کادر */
    gap: 2px;
    flex: 0 0 auto;
}
.uc-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}
.uc-icon-btn img { width: 19px; height: 19px; display: block; }
.uc-icon-btn:hover { filter: brightness(1.25); }
.uc-logout img { width: 22px; height: 22px; }
/* هر آیکون دو فایل دارد؛ فقط نسخه‌ی متناسب با تم جاری نمایش داده می‌شود.
   انتخابگرها باید هم‌وزنِ «.uc-icon-btn img» باشند وگرنه آن رویشان را می‌گیرد. */
.uc-icon-btn img.uc-icon-dark { display: none; }
:root[data-theme="dark"] .uc-icon-btn img.uc-icon-light { display: none; }
:root[data-theme="dark"] .uc-icon-btn img.uc-icon-dark { display: block; }
.uc-badge {
    position: absolute;
    top: -4px;
    left: -5px;
    min-width: 13px;
    height: 13px;
    padding: 0 2px;
    border-radius: 7px;
    background: var(--danger);
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* وسط کادر: نام کاربر در جای قبلی‌اش، تاریخ و ساعت چسبیده به پایینِ کادر */
.uc-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 4px 0;   /* نام را از لبه‌ی بالا فاصله می‌دهد تا به ارتفاع قبلی برگردد */
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    line-height: 1.25;
    direction: rtl;
    cursor: pointer;
}
.uc-name {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap; /* کادر پهن می‌شود تا نام طولانی روی آیکون‌ها نیفتد */
}
/* تاریخ و ساعت کنار هم در یک ردیف */
.uc-datetime {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}
.uc-date, .uc-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* کلید تم — طرح codingartistweb، هم‌عرض دکمه‌ی خروج */
.ca-toggle {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 12px;
    flex: 0 0 auto;
    cursor: pointer;
}
.ca-toggle input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.ca-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: #15181f;
    transition: background 0.25s;
}
.ca-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    transition: 0.25s;
}
:root[data-theme="dark"] .ca-toggle-track { background: #ffffff; }
:root[data-theme="dark"] .ca-toggle-track::after {
    top: -1px;
    left: 11px;
    background: transparent;
    box-shadow: 3px 3px #15181f;
}

/* ---------- منوهای کشویی پنل کاربری ---------- */
.user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;             /* هم‌عرض کادر پنل */
    padding: 10px 0;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    color: var(--text);
    direction: rtl;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.15s, transform 0.15s;
    z-index: 60;
}
.user-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.user-menu-role {
    padding: 2px 14px;
    font-size: 12px;
    color: var(--text-muted);
}
.user-menu-role:last-of-type {
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--panel-border);
}
.user-menu ul { list-style: none; margin: 0; padding: 0; }
.user-menu li a,
.user-menu li .notif-item,
.user-menu li .notif-empty {
    display: block;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}
.user-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.user-menu li a:hover { background: var(--button-bg); text-decoration: none; }
.um-icon { font-size: 13px; line-height: 1; }
.umr-label { color: var(--text-muted); opacity: 0.8; }
.notif-menu { min-width: 240px; }
.notif-menu-title { font-weight: bold; color: var(--text); }
.notif-item-subject { display: block; font-size: 12.5px; line-height: 1.6; }
.notif-item-sender { display: block; font-size: 11px; color: var(--text-muted); }
.notif-empty { color: var(--text-muted); font-size: 12px; }
.notif-unseen .notif-item-subject { font-weight: bold; }

/* ---------- دکمه فهرست + کادر سنجاق‌شدنی ---------- */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    flex: 0 0 auto;
    align-self: stretch;   /* هم‌ارتفاع با پنل کاربری */
    padding: 0 16px;
    background: var(--panel-bg);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    direction: rtl;
    cursor: pointer;
}
.nav-toggle:hover { background: var(--button-bg); }

.site-body {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.nav-dock {
    position: absolute;
    top: 8px;
    right: 6px;   /* هم‌تراز با لبه‌ی راست دکمه‌ی فهرست */
    z-index: 55;
    width: 290px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 34px 12px 12px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;   /* گوشه‌ها مشابه منوی پنل کاربری */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.15s, transform 0.15s;
}
.nav-dock.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-pin {
    position: absolute;
    top: 8px;
    left: 8px;            /* سمت چپ کادر باز شده */
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.nav-pin:hover { background: var(--button-bg); }
.nav-pin[aria-pressed="true"] {
    background: var(--button-bg);
    border-color: var(--panel-border);
}
.nav-dock-backdrop {
    position: fixed;
    inset: 0;
    z-index: 54;
    background: rgba(0, 0, 0, 0.35);
}

/* حالت سنجاق‌شده: کادر بخشی از چیدمان می‌شود، نه منوی کشویی.
   حاشیه‌ها عمداً برابر top/right حالت شناور است تا هنگام سنجاق‌شدن ذره‌ای جابه‌جا نشود. */
.app-shell.nav-pinned .nav-dock {
    position: sticky;
    top: 12px;
    right: auto;
    order: 1;          /* در چیدمان RTL یعنی سمت راست، هم‌جهت با دکمه فهرست */
    margin: 8px 6px 0 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.app-shell.nav-pinned .main-area { order: 2; }
.app-shell.nav-pinned .nav-dock-backdrop { display: none; }

.main-area {
    flex: 1;
    min-width: 0;
}

/* سرِ صفحه: عنوان سمت راست، دو کادر اطلاعاتی سمت چپ صفحه */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.page-title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
}
.page-head-aside { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.page-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 56px;               /* دو برابر ارتفاع قبلی */
    padding: 0 14px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
a.page-chip:hover { background: var(--button-bg); text-decoration: none; }
.page-chip.is-empty { color: var(--text-muted); }
.page-chip-lbl { font-size: 11px; color: var(--text-muted); }
.page-chip-val { font-size: 12px; font-weight: bold; }

/* موبایل: کادرهای «آخرین فیش» و «آخرین حکم» وسط‌چین زیر عنوان */
@media (max-width: 820px) {
    .page-head { justify-content: center; }
    .page-title { width: 100%; justify-content: center; text-align: center; }
    .page-head-aside { width: 100%; justify-content: center; }
    .page-chip { flex: 0 1 auto; }
}
/* =====================================================================
   تب‌های داشبورد + پوشش ساخت PDF
   خطوط 1022 تا 1162 از style.css اصلی.
   ترتیب این فایل‌ها معنادار است — build-css.php آن‌ها را به همین ترتیب
   کنار هم می‌گذارد. جابه‌جا کردنشان ظاهر سایت را خراب می‌کند.
   ===================================================================== */
/* ---------- تب‌های داشبورد: سه تب در یک ردیف + کادر جدا زیرشان ---------- */
.tabset { margin-bottom: 24px; }
.tabset-row {
    display: grid;
    grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr));  /* دسکتاپ: همه‌ی تب‌ها هم‌عرض در یک ردیف */
    gap: 8px;
    position: relative;
    z-index: 2;
}
.tabset-tab {
    display: flex;
    align-items: center;      /* فلش هم‌سطح نوشته */
    justify-content: center;  /* متنِ داخلِ کادر وسط‌چین */
    gap: 8px;
    min-width: 0;
    text-align: center;
    padding: 7px 12px;        /* ارتفاع فقط به اندازه‌ی نوشته */
    background: var(--panel-bg-soft);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}
.tabset-tab:hover { background: var(--button-bg); }
.tabset-label { white-space: normal; text-align: center; line-height: 1.35; overflow-wrap: anywhere; }
.tabset-caret {
    flex: 0 0 auto;
    font-size: 20px;          /* فلش بزرگ‌تر */
    line-height: 1;
    color: var(--text-muted);
    transition: transform 0.15s;
}
/* تب باز: آبی می‌شود تا کاربر بفهمد در کدام بخش است. کادرِ پایین جداست، نه متصل. */
.tabset-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}
.tabset-tab.is-active:hover { background: var(--accent); }
.tabset-tab.is-active .tabset-caret { transform: rotate(180deg); color: var(--accent-text); }

.tabset-panels { display: none; }
.tabset.has-open .tabset-panels {
    display: block;
    position: relative;
    margin-top: 10px;
    padding: 16px 20px 20px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
}
.tabset-panel[hidden] { display: none; }
.tabset-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tabset-panel-head h2 { margin: 0; font-size: 16px; }
/* کمبوهای سال و ماه — نصفِ عرض قبلی، کنارِ عنوان نه زیر آن */
.tabset-panel-head .panel-header-filters { display: flex; gap: 8px; margin: 0; }
.tabset-panel-head .panel-header-filters select {
    width: 110px;
    min-width: 0;
    height: 34px;
    padding: 4px 8px;
    font-size: 13px;
}

/* عرض‌های میانی: چهار کادر کنار هم می‌مانند ولی جمع‌وجور می‌شوند تا متن کامل بماند */
@media (max-width: 900px) {
    .tabset-row { gap: 6px; }
    .tabset-tab { padding: 7px 8px; gap: 5px; font-size: 12.5px; }
    .tabset-caret { font-size: 15px; }
}
@media (max-width: 720px) {
    .tabset-tab { padding: 6px 6px; gap: 4px; font-size: 11.5px; }
    .tabset-caret { font-size: 14px; }
}
/* از این عرض به پایین دیگر چهار کادر جا نمی‌شود → دو ردیفِ دوتایی (فیش/حکم بالا، مرخصی/وام پایین) */
@media (max-width: 620px) {
    .tabset-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    /* تعدادِ فرد: تبِ آخر تنها نماند، کلِ ردیف را بگیرد */
    .tabset-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .tabset-tab { padding: 9px 10px; font-size: 13px; }
    .tabset-caret { font-size: 16px; }
    /* برچسب بلندِ «درخواست مرخصی و اضافه‌کار» در موبایل تک‌خطی بماند:
       فونت با عرضِ صفحه کوچک می‌شود (بین ۸.۵ تا ۱۳px) تا هیچ‌وقت به خط دوم نرود */
    .tabset-tab[data-panel="tabLeave"] .tabset-label {
        white-space: nowrap;
        font-size: clamp(10px, 2.9vw, 13px);
    }
}
@media (max-width: 820px) {
    .tabset.has-open .tabset-panels { padding: 14px 12px 16px; }
    /* موبایل: دو کمبوی سال و ماه با هم کلِ عرض پنل را پر می‌کنند */
    .tabset-panel-head { display: block; }
    .tabset-panel-head .panel-header-filters { width: 100%; }
    .tabset-panel-head .panel-header-filters select { flex: 1 1 0; width: auto; }
}
@media (max-width: 380px) {
    .tabset-row { gap: 6px; }
    .tabset-tab { padding: 8px 7px; font-size: 12px; }
    .tabset-caret { font-size: 14px; }
}

@media (max-width: 820px) {
    .site-header { flex-wrap: wrap; gap: 8px; padding: 4px 6px; }
    .user-card-wrap { max-width: 100%; }
    .uc-name { white-space: normal; }
    .nav-dock { right: 12px; width: calc(100vw - 24px); }
    .nav-pin { display: none; } /* سنجاق فقط در نمای دسکتاپ */
}

/* ---------- پوشش تمام‌صفحه هنگام ساخت PDF (صفحه‌ی فیش و داشبورد) ---------- */
.pdf-progress { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.pdf-progress[hidden] { display: none; }
.pdf-progress-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 280px; padding: 22px 26px; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); font-size: 13px; text-align: center; }
.pdf-progress-box small { color: #666; font-size: 11px; line-height: 1.8; }
.pdf-progress-spinner { width: 26px; height: 26px; border: 3px solid var(--panel-border); border-top-color: var(--accent); border-radius: 50%; animation: pdf-spin 0.8s linear infinite; }
@keyframes pdf-spin { to { transform: rotate(360deg); } }
/* قابِ پنهانِ رندر — صفحه‌ی فیش را در پس‌زمینه و در عرض دسکتاپ بار می‌کند */
.pdf-render-frame { position: fixed; top: 0; left: -20000px; width: 1200px; height: 2000px; border: 0; opacity: 0; pointer-events: none; }

.panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}
.panel h2 {
    font-size: 16px;
    margin: 0 0 16px;
}
/* =====================================================================
   پنل‌ها، مدال‌های تایید/حذف، تاریخچه
   خطوط 1163 تا 1412 از style.css اصلی.
   ترتیب این فایل‌ها معنادار است — build-css.php آن‌ها را به همین ترتیب
   کنار هم می‌گذارد. جابه‌جا کردنشان ظاهر سایت را خراب می‌کند.
   ===================================================================== */
/* تب‌ست سه‌تایی (صفحه‌ی مدیریت شرکت‌ها): سه کادر هم‌عرض در همه‌ی اندازه‌ها
   (این بلوک قبلاً اشتباهاً داخلِ قاعده‌ی .panel-header-row افتاده بود و با
    CSS Nesting به «.panel-header-row .tabset-3 …» تعبیر می‌شد — یعنی بی‌اثر.) */
.tabset-3 .tabset-row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) {
    .tabset-3 .tabset-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .tabset-3 .tabset-tab { padding: 8px 6px; font-size: 12px; }
    .tabset-3 .tabset-label { font-size: clamp(10px, 2.9vw, 12.5px); }
}
/* پنل‌های داخل تب: کادرِ پنلِ داخلی نباید دوباره حاشیه و کادر بگیرد */
.tabset-3 .tabset-panel > .panel:first-child,
.tabset-3 .tabset-panel > .job-titles-layout > .panel:first-child { margin-top: 0; }
.tabset-3 .tabset-panel > .panel:last-child,
.tabset-3 .tabset-panel > .job-titles-layout { margin-bottom: 0; }

.panel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.panel-header-row h2 { margin: 0; font-size: 18px; }
.panel-header-filters {
    display: flex;
    gap: 10px;
}
.panel-header-filters select {
    text-align: center;
    text-align-last: center;
    min-width: 130px;
}


table { width: 100%; border-collapse: collapse; font-size: 14px; }
th,
td { padding: 11px 10px; text-align: right; border-bottom: 1px solid var(--panel-border); }
th { color: var(--text-muted); font-weight: normal; font-size: 13px; }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }
.payslip-table th,
.payslip-table td {
    text-align: center;
}
.companies-table th,
.companies-table td {
    text-align: center;
}
.companies-table { font-size: 15px; }
.company-actions-cell {
    white-space: nowrap;
    text-align: center;
    position: relative;
}
.company-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 3px;
    padding: 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}
.company-action-button:hover,
.company-action-button:focus-visible {
    background: transparent;
    outline: none;
}
.company-action-button img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.company-status-button { width: 40px; height: 40px; }
.company-status-button img { width: 40px; height: 40px; }
.delete-company-form {
    display: inline-block;
    vertical-align: top;
}
.delete-confirm-modal {
    position: fixed;
    z-index: 1000;
    display: none;
}
.delete-confirm-modal.open { display: block; }
.delete-confirm-modal-box {
    width: 360px;
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel-bg);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.delete-confirm-modal-box p {
    flex: 1;
    margin: 0;
    color: var(--text-muted);
    white-space: nowrap;
}
.delete-confirm-modal-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 0;
}
.delete-confirm-modal-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.delete-confirm-modal-actions button:hover,
.delete-confirm-modal-actions button:focus-visible {
    background: transparent;
}
.delete-confirm-modal-actions img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.job-history-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
}
.history-modal .delete-confirm-modal-box {
    width: 360px;
    display: block;
    text-align: right;
}
.history-modal-list {
    margin: 12px 0;
    padding-inline-start: 20px;
    color: var(--text-muted);
    line-height: 1.9;
}

.general-manager-picker {
    position: relative;
    display: flex;
    align-items: end;
    gap: 12px;
    max-width: 700px;
    margin: 0 auto;
}
.general-manager-picker label {
    flex: 0 0 180px;
    margin: 0 0 8px;
    color: var(--text-muted);
    text-align: center;
}
.general-manager-picker input {
    flex: 1;
    width: auto;
    box-sizing: border-box;
    text-align: center;
}
.general-manager-search-results {
    position: absolute;
    top: 100%;
    right: 192px;
    left: 0;
    z-index: 20;
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--input-bg);
    box-shadow: var(--shadow);
}
.general-manager-search-result {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.general-manager-search-result:last-child { border-bottom: 0; }
.general-manager-search-result:hover { background: var(--button-bg); }
.general-manager-selected-list {
    max-width: 520px;
    margin: 22px auto 0;
}
.general-manager-selected-list h3 {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}
.general-manager-selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 7px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-bg-soft);
}
.general-manager-selected-item small { color: var(--text-muted); }
.general-manager-remove {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

/* ستونِ عملیاتِ جدول شرکت‌ها: سه آیکون در عرضِ ستون جا شوند و از لبه‌ی جدول بیرون نزنند */
.companies-table .company-actions-cell > form { display: inline-block; margin: 0; vertical-align: middle; }
.companies-table .company-actions-cell .company-action-button { width: 34px; height: 34px; margin: 0 2px; padding: 1px; }
.companies-table .company-actions-cell .company-action-button img { width: 30px; height: 30px; }
/* جای خالیِ آیکونی که در این ردیف نیست — تا آیکون‌های بقیه‌ی ردیف‌ها هم‌ستون بمانند */
.act-slot { display: inline-flex; width: 40px; height: 40px; margin: 0 3px; vertical-align: middle; visibility: hidden; }
.companies-table .act-slot { width: 34px; height: 34px; margin: 0 2px; }
/* =====================================================================
   مدیر کل، شرکت‌ها، فرم و فیلترها
   خطوط 1413 تا 1712 از style.css اصلی.
   ترتیب این فایل‌ها معنادار است — build-css.php آن‌ها را به همین ترتیب
   کنار هم می‌گذارد. جابه‌جا کردنشان ظاهر سایت را خراب می‌کند.
   ===================================================================== */
@media (max-width: 600px) {
    .general-manager-picker { display: block; }
    .general-manager-picker label { display: block; margin-bottom: 8px; }
    .general-manager-picker input { width: 100%; }
    .general-manager-search-results { right: 0; }
}
.general-manager-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}
.general-manager-header h2 {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}
.general-manager-header .general-manager-picker {
    display: block;
    flex: 0 1 285px;
    width: 285px;
    max-width: 285px;
    margin: 0;
}
.general-manager-header .general-manager-picker input {
    width: 100%;
    height: 42px;
    padding: 6px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 15px;
    text-align: center;
}
.general-manager-header .general-manager-search-results {
    right: 0;
    border-radius: 14px;
    border-color: #d1d1d1;
}
.general-manager-header .general-manager-search-result {
    padding: 9px 12px;
    border-bottom-color: #d9d9d9;
    font-size: 15px;
    text-align: right;
}
.general-manager-header .general-manager-selected-list {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: none;
    margin: 0;
}
.general-manager-header .general-manager-selected-list[hidden] {
    display: none;
}
.general-manager-selected-title {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
}
.general-manager-header #selectedGeneralManagerItems {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.general-manager-header .general-manager-selected-item {
    margin: 0;
    padding: 4px 7px;
    gap: 6px;
    white-space: nowrap;
}
.general-manager-header .general-manager-remove {
    width: 22px;
    height: 22px;
}
@media (max-width: 900px) {
    .general-manager-header {
        flex-wrap: wrap;
    }
    .general-manager-header .general-manager-picker {
        flex-basis: 285px;
        width: min(285px, 100%);
        max-width: 285px;
    }
}
.company-save-success {
    text-align: center;
}
.companies-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.companies-panel-header h2 {
    margin: 0;
}
.companies-title-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.company-list-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.company-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 3px;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    background: var(--button-bg);
    cursor: pointer;
}
.company-search-toggle img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.company-search-input {
    width: 190px;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    text-align: center;
}
.company-status-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 2px;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}
.company-status-filter img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.company-form-toggle {
    display: inline-block;
    width: 220px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: #d0d0d4;
    color: #171717;
    font: inherit;
    cursor: pointer;
    text-align: center;
}
.company-form-toggle:hover { background: #b8b8bd; }
.company-form-panel { display: none; }
.company-form-panel.open { display: block; }
.company-form-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: stretch;
}
.company-form-field {
    min-width: 0;
    margin-bottom: 0;
}
.company-form-field label {
    text-align: center;
}
.company-form-field input,
.company-form-field select,
.company-form-field .typeahead-input {
    width: 100%;
    text-align: center;
    font-size: 15px;
}
.company-form-field .jdate-input {
    width: 100%;
    max-width: none;
}
.company-form-field input:not(:disabled),
.company-form-field select:not(:disabled),
.company-form-field .typeahead-input:not(:disabled),
.job-title-entry-field input:not(:disabled) {
    background: #ffffff;
    color: #111111;
}
:root[data-theme="dark"] .company-form-field input:not(:disabled),
:root[data-theme="dark"] .company-form-field select:not(:disabled),
:root[data-theme="dark"] .company-form-field .typeahead-input:not(:disabled),
:root[data-theme="dark"] .job-title-entry-field input:not(:disabled) {
    background: #000000;
    color: #ffffff;
}
.company-form-actions {
    display: flex;
    flex-direction: row;
    direction: ltr;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    align-self: end;
    padding-top: 0;
    transform: translateY(-3px);
}
.company-form-actions .btn {
    width: 50%;
    min-width: 0;
    text-align: center;
}
.company-form-actions .form-icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent !important;
}
.company-form-actions .form-icon-button:hover,
.company-form-actions .form-icon-button:focus-visible,
.company-form-actions .form-icon-button:disabled {
    background: transparent !important;
    filter: none;
}
.company-form-actions .form-icon-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.company-form-help {
    color: var(--text-muted);
    font-size: 12px;
    margin: 16px 0 0;
    text-align: center;
}
.users-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.users-form-panel {
    display: none;
    order: 1;
}
.user-first-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
}
.user-first-row > form { display: contents; }
.user-first-row > .field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.user-first-row .user-company-field { min-width: 0; }
.user-first-row label {
    text-align: center;
    color: #555555;
    font-weight: 600;
}
.user-first-row input,
.user-first-row select,
.user-first-row input::placeholder {
    text-align: center;
}
.users-form-panel form#userSaveForm > .filters-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}
.users-form-panel form#userSaveForm > .filters-row > .field {
    min-width: 0;
}
.users-form-panel .jdate-input {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* «ثبت شرکت جدید» دکمه‌ی اصلیِ صفحه است: آبی و ۳۶px، نه خاکستریِ شبیهِ غیرفعال.
   وقتی فرم باز است حالتِ روشن‌تر می‌گیرد تا معلوم باشد باز است. */
.company-form-toggle { min-height: 36px; padding: 7px 18px; border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.company-form-toggle:hover { background: var(--accent-hover); }
.company-form-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.company-form-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* =====================================================================
   کاربران — فرم، فهرست، ورود گروهی
   خطوط 1713 تا 2012 از style.css اصلی.
   ترتیب این فایل‌ها معنادار است — build-css.php آن‌ها را به همین ترتیب
   کنار هم می‌گذارد. جابه‌جا کردنشان ظاهر سایت را خراب می‌کند.
   ===================================================================== */
.users-form-panel .general-manager-display-field input,
.users-form-panel .general-manager-display-input {

/* ---------------------------------------------------------------
   موبایل: چیدمان فرم و سرصفحه‌ی لیست شرکت‌ها
   --------------------------------------------------------------- */
/* این‌جا قبلاً یک بلوکِ `.companies-panel-header + .company-list-search` بود
   که هیچ‌وقت هیچ عنصری را نمی‌گرفت: سلکتورِ «خواهرِ بعدیِ هدر» بود، ولی
   .company-list-search داخلِ .companies-title-group (درونِ هدر) قرار دارد.
   حذف شد تا دوباره کسی فکر نکند این مشکل حل شده است. */

    width: 50%;
    align-self: center;
    font-size: 16px;
    text-align: center;
}
.users-form-panel.open { display: block; }

/* چک‌باکسِ «ریست رمز کاربر» — فقط در ویرایش؛ هم‌قدِ کادرهای کنارش */
.user-reset-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.user-reset-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--danger); flex: 0 0 auto; }
.user-reset-check:has(input:checked) { border-color: var(--danger); color: var(--danger); }
.users-list-panel { order: 2; }
.users-panel-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.users-panel-header h2 { margin: 0; }
.users-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    direction: ltr;
}
.users-list-success {
    margin: 0;
    text-align: center;
    white-space: nowrap;
}
.users-title-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.user-form-toggle {
    padding: 9px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    background: #d0d0d4;
    color: #171717;
    font: inherit;
    cursor: pointer;
}
.user-form-toggle:hover { background: #b8b8bd; }
.user-action-icon-button {
    width: 46px;
    height: 46px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.user-action-icon-button img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.user-form-toggle {
    opacity: 1;
    background: transparent;
    border-color: transparent;
}
.user-import-toggle {
    opacity: 1;
    background: transparent;
    border-color: transparent;
}
.user-form-toggle img { opacity: 1; }
.user-import-toggle img { opacity: .5; }
.user-import-toggle,
.user-import-sample {
    padding: 9px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    background: #e3e3e6;
    color: #171717;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.user-import-toggle:hover,
.user-import-sample:hover { background: #d2d2d6; }
.users-header-actions .user-import-toggle,
.users-header-actions .user-import-toggle:hover,
.users-header-actions .user-import-toggle:focus-visible {
    background: transparent;
    border-color: transparent;
}
.user-import-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.user-import-actions[hidden] {
    display: none !important;
}
.user-import-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.user-import-icon {
    width: 46px;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    opacity: .5;
}
.user-form-active { opacity: 1; background: #b8b8bd; }
.users-header-actions.import-open .user-import-toggle { opacity: 1; }
.users-header-actions.import-open .user-import-toggle img { opacity: 1; }
.users-header-actions.import-open .user-form-toggle { opacity: 1; }
.users-header-actions.import-open .user-form-toggle img { opacity: .2; }
.users-header-actions.import-open .user-import-icon { opacity: 1; }
.user-import-icon:hover { background: #f0f0f0; }
.user-form-toggle:hover,
.user-import-toggle:hover,
.user-import-icon:hover {
    background: transparent;
}
.user-import-icon img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.users-import-warnings {
    margin: 0 0 14px;
    text-align: right;
    line-height: 1.9;
}


.users-list-panel .company-action-button,
.users-list-panel .user-action-form {
    display: inline-flex;
    vertical-align: middle;
}
.users-form-panel input:not(:disabled),
.users-form-panel select:not(:disabled) {
    background: #ffffff;
    color: var(--text);
}
.users-form-panel input:disabled,
.users-form-panel select:disabled {
    background: #eeeeee;
    color: #999999;
    border-color: #d2d2d2;
    cursor: not-allowed;
}
.users-list-panel .company-actions-cell {
    position: relative;
}
.users-list-panel thead th {
    text-align: center;
}
.users-list-panel table th,
.users-list-panel table td {
    text-align: center;
}
.site-manager-label {
    display: block;
    width: fit-content;
    margin: 4px auto 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(61, 110, 245, .12);
    color: var(--accent);
    font-size: 11px;
    line-height: 1.5;
}


.user-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0;
    min-width: 0;
}
/* مرکزِ آیکون‌ها روی خطِ وسطِ ردیف بنشیند: align-items: center کافی است.
   top: 5px که قبلاً اینجا بود کلِ گروه را ۵ پیکسل پایین‌تر می‌برد. */
.users-form-panel form#userSaveForm > .filters-row .user-form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
}
/* دکمه هم‌اندازهٔ تصویرش باشد (۴۶px). وقتی ۶۹px بود، object-fit تصویرِ ۴۶px
   را وسطِ یک کادرِ بزرگ‌تر می‌نشاند و همان فضای خالیِ نامرئی، آیکون‌ها را
   از هم دور نگه می‌داشت — نه gap. */
.users-form-panel form#userSaveForm > .filters-row .user-form-actions .btn {
    min-width: 0;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}
.users-form-panel form#userSaveForm > .filters-row .user-form-actions .btn:hover,
.users-form-panel form#userSaveForm > .filters-row .user-form-actions .btn:focus-visible {
    background: transparent;
}
.users-form-panel form#userSaveForm > .filters-row .user-form-actions .btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* تیک و ضربدر: margin: auto نگیرند. روی یک آیتمِ فلکس، فضای خالیِ ردیف را
   می‌بلعد و آیکون‌ها را به گوشه‌ها می‌راند — فاصله را gap تعیین می‌کند. */
.users-form-panel form#userSaveForm > .filters-row .user-form-actions .form-confirm-button img,
.users-form-panel form#userSaveForm > .filters-row .user-form-actions .form-cancel-button img {
    width: 46px;
    height: 46px;
    margin: 0;
}
.users-form-panel .btn-primary:hover,
.users-form-panel .btn-primary:focus-visible {
    background: rgba(25, 75, 190, .95);
    border-color: rgba(25, 75, 190, .95);
    filter: none;
}


.job-title-entry-field input {
    text-align: center;
}
.job-title-entry-field {
    position: relative;
}

/* آیکون‌های «ثبت کاربر جدید» و «ثبت گروهی» تک‌رنگِ تیره‌اند و روی زمینه‌ی تم
   تاریک دیده نمی‌شوند؛ در تم تاریک رنگشان معکوس می‌شود. */
:root[data-theme="dark"] .user-action-icon-button img { filter: invert(1) brightness(1.15); }
/* =====================================================================
   بخش‌های کاری و جدول مشاغل
   خطوط 2013 تا 2312 از style.css اصلی.
   ترتیب این فایل‌ها معنادار است — build-css.php آن‌ها را به همین ترتیب
   کنار هم می‌گذارد. جابه‌جا کردنشان ظاهر سایت را خراب می‌کند.
   ===================================================================== */
.job-title-entry-field .job-input-label {
    position: absolute;
    top: 50%;
    right: 11px;
    z-index: 1;
    margin: 0;
    padding: 0 3px;
    transform: translateY(-50%);
    background: transparent;
    color: var(--text-muted);
    pointer-events: none;

    white-space: nowrap;
}
.job-title-entry-field input {
    padding-right: 82px;
    background: transparent;
}
.job-title-entry-field .form-icon-button {
    position: relative;
    left: -30px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    background: transparent !important;
}
.job-title-entry-field .form-icon-button:hover,
.job-title-entry-field .form-icon-button:focus-visible,
.job-title-entry-field .form-icon-button:disabled {
    background: transparent !important;
    filter: none;
}
.job-title-entry-field .form-icon-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.job-titles-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "form"
        "list";
    align-items: start;
    gap: 18px;
}
.job-titles-form-panel { grid-area: form; }
.job-titles-list-panel { grid-area: list; }
.job-titles-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.job-titles-list-header h2 { margin: 0; }
.job-titles-list-success {
    margin: 0;
    padding: 6px 10px;
    white-space: nowrap;
}
.job-titles-form-panel {
    width: 100%;
    min-width: 0;
}

.job-titles-form-panel .filters-row {
    flex-direction: column;
    align-items: stretch !important;
}
.job-titles-form-panel .filters-row > .field,
.job-titles-form-panel .filters-row > form {
    width: 100%;
    flex: none !important;
}
.job-titles-form-panel .filters-row > .job-title-entry-field:last-child {
    width: 50%;
    margin-right: auto;
    align-self: flex-start;
    position: relative;
    left: 25px;
    right: 75px;
    transform: none;
}
.job-titles-form-panel .filters-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    column-gap: 0;
    row-gap: 12px;
}
.job-titles-form-panel .filters-row > .field,
.job-titles-form-panel .filters-row > form {
    grid-column: 1 / -1;
}
.job-titles-form-panel .filters-row > .job-title-entry-field:nth-last-child(2) {
    grid-column: 1;
    width: 100% !important;
    margin: 0;
}
.job-titles-form-panel .filters-row > .job-title-entry-field:last-child {
    grid-column: 2;
    width: 52px !important;
    margin: 0;
    align-self: end;
    left: auto;
    right: auto;
}
.job-titles-form-panel .filters-row > .job-title-entry-field:last-child .form-icon-button {
    left: 0;
}
.job-titles-form-panel .filters-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 36px 36px;
    column-gap: 5px;
    align-items: end;
}
.job-titles-form-panel .filters-row > .field,
.job-titles-form-panel .filters-row > form {
    grid-column: auto;
    width: 100% !important;
}
.job-titles-form-panel .filters-row > .job-title-entry-field:last-child {
    grid-column: auto;
    width: 52px !important;
    left: 0;
    right: auto;
    margin: 0;
}
.job-titles-form-panel .filters-row > .job-entry-action-field {
    grid-column: auto;
    width: 36px !important;
    margin: 0;
    align-self: end;
    left: 0;
    right: auto;
}
.job-titles-form-panel .filters-row > form,
.job-titles-form-panel .filters-row > .job-company-display-field {
    grid-column: 1 !important;
}
.job-titles-form-panel .filters-row > .job-entry-unit-field {
    grid-column: 2 !important;
}
.job-titles-form-panel .filters-row > .job-entry-job-field {
    grid-column: 3 !important;
}
.job-titles-form-panel .filters-row > .job-entry-confirm-field {
    grid-column: 4 !important;
}
.job-titles-form-panel .filters-row > .job-entry-cancel-field {
    grid-column: 5 !important;
}
.job-titles-form-panel .job-entry-action-field {
    display: none;
}
.job-titles-form-panel .job-entry-action-field .form-icon-button {
    position: static;
    left: auto !important;
    right: auto !important;
    width: 36px;
    height: 36px;
}
.job-titles-form-panel .job-entry-action-field {
    align-items: flex-end;
    justify-content: center;
}
.job-titles-form-panel .job-entry-cancel-field {
    transform: none;
}
.job-titles-form-panel .job-entry-action-field {
    left: auto !important;
    right: auto !important;
}
.job-titles-form-panel .filters-row > form input:not(:disabled),
.job-titles-form-panel .filters-row > form select:not(:disabled),
.job-titles-form-panel .job-company-display-field.has-company input {
    background: #ffffff;
    color: #111111;
}
:root[data-theme="dark"] .job-titles-form-panel .filters-row > form input:not(:disabled),
:root[data-theme="dark"] .job-titles-form-panel .filters-row > form select:not(:disabled),
:root[data-theme="dark"] .job-titles-form-panel .job-company-display-field.has-company input {
    background: #000000;
    color: #ffffff;
}
.filters-row .typeahead-input,
.filters-row select,
.filters-row > .field > input {
    text-align: center;
}
.job-title-entry-field input:disabled {
    background: transparent;
    color: #999999;
    border-color: #d2d2d2;
    cursor: not-allowed;
}
.job-title-entry-field button:disabled {
    background: #eeeeee;
    color: #999999;
    border-color: #d2d2d2;
    cursor: not-allowed;
}
.job-titles-table th,
.job-titles-table td {
    text-align: center;
}
/* عرضِ ستون‌ها فقط دسکتاپ — روی موبایل جدول کارتی می‌شود و
   این درصدها خانه را به ۳۰٪ ستونِ گرید می‌چسباندند (اندازه‌گیری: ۴۳.۸px از ۱۴۶px). */
@media (min-width: 901px) {
    .job-titles-table {
        width: 100%;
        table-layout: fixed;
    }
    .job-titles-table th:nth-child(1),
.job-titles-table td:nth-child(1),
.job-titles-table th:nth-child(2),
.job-titles-table td:nth-child(2) {
        width: 30%;
    }
    .job-titles-table th:nth-child(3),
.job-titles-table td:nth-child(3) {
        width: 40%;
    }
}
.job-titles-table input {
    text-align: center;
}
.job-inline-field {
    display: none;
    width: 90px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: center;
}
.job-titles-table tr.editing .job-inline-field {
    display: inline-block;
    border-color: var(--panel-border);
    background: var(--input-bg);
}
.job-titles-table tr.editing .job-inline-label {
    display: none;
}
.job-inline-label {
    display: inline-block;
    max-width: 100%;
    padding: 7px 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-titles-table .company-actions-cell form {
    display: inline-block;
    vertical-align: middle;
}
.job-titles-table .company-actions-cell .btn {
    margin: 0 2px;
    padding: 5px 9px;
}
.job-actions-lock {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, .68);
    backdrop-filter: blur(3px);
}
.job-actions-lock[hidden] { display: none; }
.job-actions-lock.open { display: flex; }
.job-titles-table tr.actions-locked .company-action-button,
.job-titles-table tr.actions-locked .delete-company-form {
    filter: blur(3px);
    pointer-events: none;
}
.job-actions-lock button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.job-actions-lock img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
@media (max-width: 900px) {
    .job-titles-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "form"
            "list";
    }
    .job-titles-form-panel { width: 100%; }
}
/* =====================================================================
   فیلترها، تاریخ شمسی، تایپ‌اهد، جستجوی زنده
   خطوط 2313 تا 2612 از style.css اصلی.
   ترتیب این فایل‌ها معنادار است — build-css.php آن‌ها را به همین ترتیب
   کنار هم می‌گذارد. جابه‌جا کردنشان ظاهر سایت را خراب می‌کند.
   ===================================================================== */
.delete-company-form {
    display: inline-block;
    vertical-align: top;

}
.delete-error-popup {
    max-width: 190px;
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(230, 72, 63, .35);
    border-radius: 6px;
    background: rgba(230, 72, 63, .1);
    color: var(--danger);
    font-size: 11px;
    line-height: 1.7;
    white-space: normal;
    text-align: center;
}

.filters-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 18px;
}
.filters-row .field { margin-bottom: 0; min-width: 150px; }


@media (max-width: 820px) {
    
    .app-shell { display: block; }
    
    
    
    
    
    
    
    .main-area { padding: 16px 14px 40px; }
    /* سرصفحه‌ی لیست شرکت‌ها: عنوان + فیلتر وضعیت + ذره‌بین + «ثبت شرکت جدید»
       همه در یک ردیف می‌مانند؛ سرچ‌باکس ردیف بعدی است (مارک‌آپ companies.php). */
    /* ۵ پیکسل تا سرچ‌باکسِ زیرش (به‌جای ۱۶ پیکسلِ حالت دسکتاپ) */
    .companies-panel-header { flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
    .companies-title-group { flex-wrap: wrap; gap: 8px; }
    .companies-panel-header .company-form-toggle { width: auto; padding: 8px 14px; }
    /* «مدیرعامل + کد اقتصادی» و «تاریخ شروع + مسئول سایت» دوتایی در یک ردیف؛
       نام شرکت تمام‌عرض می‌ماند چون بلندترین مقدار را دارد. */
    .company-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .company-form-field:first-child { grid-column: 1 / -1; }
    .company-form-actions { padding-top: 0; grid-column: 1 / -1; justify-content: flex-start; }
}

.jdate-input { max-width: 220px; }

/* تم کتابخانه JalaliDatePicker هماهنگ با تم سایت */
:root[data-theme="dark"] jdp-container {
    --jdp-color-0: #0f172a;
    --jdp-color-1: #1e293b;
    --jdp-color-2: #334155;
    --jdp-color-3: #64748b;
    --jdp-color-4: #94a3b8;
    --jdp-color-5: #f1f5f9;
    --jdp-primary: #3b82f6;
}

.typeahead-wrap { position: relative; }


.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--button-bg);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    padding: 3px 6px 3px 10px;
    margin: 0 3px;
    font-size: 13px;
    color: var(--text);
}
.chip-remove {
    background: transparent;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
}

.typeahead-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: 320px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    z-index: 50;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.typeahead-dropdown.open { display: block; }
.typeahead-row {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--panel-border);
    color: var(--text);
}
.typeahead-row:last-child { border-bottom: none; }
.typeahead-row:hover { background: var(--button-bg); }

/* جستجوی زنده‌ی داشبورد پرسنل */
.staff-search-field { position: relative; }
.staff-search-field input { width: 100%; box-sizing: border-box; }
.staff-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    box-shadow: var(--shadow);
}
.staff-search-dropdown.open { display: block; }
.staff-search-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--panel-border);
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.staff-search-row:last-child { border-bottom: none; }
.staff-search-row:hover,
.staff-search-row.is-active { background: var(--button-bg); }
.staff-search-name { font-weight: 600; }
.staff-search-meta { color: var(--text-muted); font-size: 11px; line-height: 1.7; }
.staff-search-empty { padding: 10px 12px; color: var(--text-muted); font-size: 12px; }


.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 10px;
    font-size: 14px;
}
details.nav-group { margin: 0; }
details.nav-group summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
}
details.nav-group summary::-webkit-details-marker { display: none; }

/* مثلثِ وضعیتِ گروه: بسته => رو به پایین، باز => رو به بالا.
   با ::after در انتهای ردیف (سمت چپ در RTL) می‌نشیند. */
details.nav-group > summary::after {
    content: '';
    margin-inline-start: auto;
    flex: 0 0 auto;
    width: 0; height: 0;
    border-inline-start: 5px solid transparent;
    border-inline-end: 5px solid transparent;
    border-top: 6px solid currentColor;
    opacity: .65;
    transition: transform .15s ease;
}
details.nav-group[open] > summary::after { transform: rotate(180deg); }
details.nav-group > summary:hover::after { opacity: 1; }

/* زیرگروه‌ها فقط کمی جلوتر از سرتیترِ دسته (سرتیتر ۱۲px است) */
.nav-sub-link { padding-right: 22px !important; font-size: 13px; }


/* فهرستِ فایل‌های حقوقیِ ثبت‌شده (داخلِ پاپ‌آپِ ورود گروهی — 17-import-wizard.css).
   سرصفحه و فیلترهای صفحه‌ی مدیریت فیش‌ها در 11-payroll.css است. */
.upload-file-list[hidden] { display: none; }
.upload-file-list table { font-size: 12px; }
.upload-file-list table,
#payrollTable { table-layout: auto; width: max-content; min-width: 100%; }
.upload-file-list th,
#payrollTable th { padding: 6px 8px; white-space: normal; overflow-wrap: anywhere; max-width: 150px; line-height: 1.5; }
.upload-file-list th,
#payrollTable th { text-align: center; vertical-align: middle; }
.upload-file-list td,
#payrollTable td { padding: 6px 8px; white-space: normal; overflow-wrap: anywhere; text-align: center; vertical-align: middle; }
.editable-payroll-row { cursor: pointer; }
.editable-payroll-row:hover { background: var(--panel-bg-soft); }
.editable-payroll-row.payroll-row-selected { background: #dbeafe !important; outline: 2px solid #3b82f6; outline-offset: -2px; }
:root[data-theme="dark"] .editable-payroll-row.payroll-row-selected,
:root[data-theme="dark"] .editable-payroll-row.payroll-row-selected td,
:root[data-theme="dark"] .editable-payroll-row.payroll-row-selected th,
:root[data-theme="dark"] .editable-payroll-row.payroll-row-selected input,
:root[data-theme="dark"] .editable-payroll-row.payroll-row-selected select {
    color: #111111 !important;
}
/* منوی کوچکِ ویرایش/حذف که با کلیک روی ردیفِ فیش کنارِ محلِ کلیک باز می‌شود */
.row-action-modal { position: fixed; inset: 0; z-index: 1100; background: transparent; }
.row-action-box { position: absolute; display: flex; min-width: 70px; padding: 4px; border-radius: 8px; background: var(--panel-bg-soft); border: 1px solid var(--panel-border); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.row-action-item { display: flex; align-items: center; justify-content: center; width: 58px; height: 52px; padding: 4px; border: 0; background: transparent; cursor: pointer; }
.row-action-item:hover { background: var(--button-bg-hover); border-radius: 6px; }
.row-action-item img { display: block; width: 30px; height: 30px; margin: 0; object-fit: contain; }
.payroll-pdf-download { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; width: 34px; height: 34px; padding: 2px; border: 0; background: transparent; }

/* داشبورد پرسنل — نوارِ جستجو: شرکت (راست) · نام (وسط، کشیده) · جستجوی جدید (چپ) */
.staff-search-bar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.staff-search-bar .pretty-select { flex: 0 0 220px; width: auto; }
.staff-search-bar > select.staff-company-select { flex: 0 0 220px; height: 46px; }   /* تا JS نرسیده */
.staff-search-bar .staff-search-field { flex: 1 1 auto; margin: 0; }
.staff-search-bar .staff-search-field input { height: 46px; }
.staff-search-new { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 720px) {
    .staff-search-bar { flex-wrap: wrap; gap: 8px; }
    .staff-search-bar .pretty-select, .staff-search-bar > select.staff-company-select { flex: 1 1 100%; }
    .staff-search-bar .staff-search-field { flex: 1 1 60%; }
    .staff-search-new { flex: 1 1 30%; text-align: center; }
}

/* داشبورد پرسنل — سرصفحه‌ی پروفایل: نام (راست) و فیلترهای سال/ماه/بازه در یک ردیف (چپ) */
.staff-profile-head { flex-wrap: wrap; gap: 10px 14px; }
.staff-profile-head h2 { margin: 0; }
.staff-range-label { font-size: 12px; font-weight: normal; margin-inline-start: 8px; }
.staff-range-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; margin-inline-start: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
.staff-range-bar .pretty-select { flex: 0 0 auto; width: auto; min-width: 130px; }
.staff-range-bar > select { height: 40px; }   /* تا JS نرسیده */
.staff-range-bar .pretty-select-trigger { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.staff-range-bar .date-range-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; font-size: 13px; }
.staff-range-bar .date-range-inputs { display: inline-flex; gap: 6px; }
.staff-range-bar .date-range-inputs[hidden] { display: none !important; }
.staff-range-bar .date-range-inputs input { width: 120px; height: 40px; box-sizing: border-box; text-align: center; }
/* مشخصات کاربر: دو واحد درشت‌تر */
.staff-profile-table th, .staff-profile-table td { font-size: 14px; }
@media (max-width: 720px) {
    .staff-range-bar { margin-inline-start: 0; width: 100%; }
    .staff-range-bar .pretty-select { flex: 1 1 45%; min-width: 0; }
    .staff-range-bar .date-range-inputs { width: 100%; }
    .staff-range-bar .date-range-inputs input { flex: 1 1 0; width: auto; }
    .staff-profile-table th, .staff-profile-table td { font-size: 13px; }
}
/* =====================================================================
   فیش حقوقی، صفحه‌ی پرداخت، ویرایش درجا
   خطوط 2613 تا 2762 از style.css اصلی.
   ترتیب این فایل‌ها معنادار است — build-css.php آن‌ها را به همین ترتیب
   کنار هم می‌گذارد. جابه‌جا کردنشان ظاهر سایت را خراب می‌کند.
   ===================================================================== */
.payroll-pdf-download:hover,
.payroll-pdf-download:focus-visible { background: transparent; text-decoration: none; }
.payroll-pdf-download img { display: block; width: 28px; height: 28px; object-fit: contain; }
.payslip-view-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 2px; border: 0; background: transparent; }
.payslip-view-icon:hover,
.payslip-view-icon:focus-visible { background: transparent; text-decoration: none; }
.payslip-view-icon img { display: block; width: 28px; height: 28px; object-fit: contain; }
.payslip-user-actions { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
/* پاپ‌آپِ ویرایش دستی فیش (جایگزینِ ویرایشِ درجا در ردیف): همه‌ی اقلام گروه‌بندی‌شده،
   تیک = ذخیره (ارسال فرم save_row)، ضربدر = بستن بدون تغییر */
.payroll-edit-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.45); }
.payroll-edit-modal[hidden] { display: none; }
.payroll-edit-box { display: flex; flex-direction: column; width: min(820px, 100%); max-height: 92vh; background: var(--panel-bg); color: var(--text); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; }
.payroll-edit-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 12px 18px; border-bottom: 1px solid var(--panel-border); }
.payroll-edit-head h3 { margin: 0; font-size: 15px; }
.payroll-edit-meta { font-size: 12.5px; color: var(--text-muted); }
#payrollEditForm { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.payroll-edit-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 18px; }
.payroll-edit-group { margin: 6px 0 8px; font-size: 13px; color: var(--accent); }
.payroll-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 10px; margin-bottom: 8px; }
.payroll-edit-grid .field { margin: 0; }
.payroll-edit-grid label { display: block; margin-bottom: 3px; font-size: 12px; }
.payroll-edit-grid input { width: 100%; box-sizing: border-box; height: 34px; padding: 5px 8px; font-size: 13px; text-align: center; }
.payroll-edit-grid .field.is-inactive label { color: var(--text-muted); }
.payroll-edit-actions { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--panel-border); background: var(--panel-bg-soft); }
.payroll-edit-actions button { width: 44px; height: 44px; padding: 4px; border: 0; background: transparent; cursor: pointer; }
.payroll-edit-actions img { display: block; width: 36px; height: 36px; object-fit: contain; }
body.payroll-edit-open { overflow: hidden; }

/* صفحه‌ی حکم‌های پرسنلی — همان چیدمانِ فیش‌ها (کلاس‌های payroll-* مشترک‌اند) */
#orderTable td { text-align: center; vertical-align: middle; }
#orderTable td:first-child { width: 34px; }
.order-publish-btn[disabled] { opacity: .55; cursor: not-allowed; }
.order-publish-hint { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.delete-action-popover { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.delete-action-box { position: absolute; min-width: 190px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg-soft); box-shadow: 0 10px 28px rgba(0,0,0,.22); text-align: center; }
.delete-action-box p { margin: 0; font-size: 12px; color: var(--text); white-space: nowrap; }
.delete-action-buttons { display: flex; align-items: center; justify-content: center; gap: 10px; }
.delete-action-buttons button { width: 34px; height: 34px; padding: 3px; border: 0; background: transparent; cursor: pointer; }
.delete-action-buttons img { width: 28px; height: 28px; object-fit: contain; }
/* فهرستِ فایل‌ها داخلِ پاپ‌آپ: دکمه‌ی «نمایش تمامی…» بالا، بعد جدول، بعد صفحه‌بند */
.upload-file-list { display: flex; flex-direction: column; }
.upload-file-list .show-all-files { order: 2; align-self: center; margin: 0 0 10px; }
.upload-file-list .table-wrap { order: 3; max-height: 500px; overflow-y: auto; }
.upload-file-list .empty-state { order: 4; }
/* صفحه‌بندِ سراسری هم‌رتبه‌ی جدول: JS آن را قبل (موبایل) یا بعد (دسکتاپ) از جدول می‌گذارد */
.upload-file-list .rt-pager { order: 3; }
.upload-file-list form { padding: 0; background: transparent; border: 0; box-shadow: none; }
#payrollUploadToggle img { opacity: 1 !important; filter: none !important; }

/* ---------------------------------------------------------------------
   سرصفحه‌ی «مدیریت فیش‌های حقوقی» — یک پنل به‌جای دو پنل:
     ردیف ۱: عنوان + ذره‌بین (راست) · کادرِ جست‌وجو (بعد از کلیک، سمتِ چپِ ذره‌بین)
             · آیکونِ ثبت فایل + شرکت / سال / ماه (چپ)
     ردیف ۲: «فیش‌های حقوقی N مورد» · لیستِ پیش‌نویس‌ها · فیلترِ وضعیت (چپ)
   لیست‌ها با pretty-select ساخته می‌شوند، پس اندازه روی .pretty-select-trigger
   می‌نشیند نه روی خودِ <select>.
   --------------------------------------------------------------------- */
.payroll-panel-header { position: relative; gap: 8px 12px; }
.payroll-title-group { display: inline-flex; align-items: center; gap: 12px; }
.payroll-title-group h2 { margin: 0; white-space: nowrap; }
.payroll-search-input { width: 220px; text-align: right; }
.payroll-search-input[hidden] { display: none; }
.payroll-filter-form { display: flex; align-items: center; gap: 8px; margin: 0; margin-inline-start: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
.payroll-filter-form .user-import-toggle { width: 38px; height: 38px; padding: 3px; background: transparent; border-color: transparent; }
.payroll-filter-form .user-import-toggle img { width: 30px; height: 30px; }
.payroll-row-break { display: none; }
.payroll-filter-form .pretty-select { width: auto; flex: 0 0 auto; }
.payroll-filter-form .pretty-select:has(> .payroll-filter-company) { min-width: 200px; }
.payroll-filter-form .pretty-select-trigger,
.payroll-list-head .pretty-select-trigger { min-width: 130px; min-height: 34px; padding: 5px 10px; font-size: 12.5px; }
.payroll-filter-form .pretty-select-label,
.payroll-list-head .pretty-select-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.payroll-filter-form > select { height: 34px; padding: 5px 8px; }   /* تا JS نرسیده */

.payroll-list-head { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; margin-bottom: 12px; }
.payroll-count { margin: 0; font-size: 15px; white-space: nowrap; }
.payroll-list-head .pretty-select { width: auto; flex: 0 0 auto; }
.draft-publish-select { max-width: 260px; height: 34px; padding: 5px 8px; font-size: 12px; }
.draft-publish-form { display: inline-block; margin: 0; }
.payroll-publish-success { color: var(--success); font-size: 12px; white-space: nowrap; }

.inline-action-form { display: inline-block; margin: 2px; }

/* نامه‌های داخلی */
.message-mailbox-tabs { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; direction: ltr; }
.message-mailbox-tabs a { padding: 8px 12px; border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-bg); color: var(--text); font-size: 13px; text-decoration: none; direction: rtl; }
.message-mailbox-tabs a.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.message-mailbox-tabs .message-delete-all-form { margin: 0; margin-left: auto; }   /* کارِ خطرناک دور از دکمه‌های پیمایش، آن سرِ ردیف */
@media (max-width: 620px) {
    /* موبایل: تب‌ها دوتایی و هم‌عرض تا هیچ تبی تنها در ردیفِ آخر نماند */
    .message-mailbox-tabs a { flex: 1 1 calc(50% - 4px); text-align: center; }
    .message-mailbox-tabs a:last-of-type:nth-of-type(odd) { flex-basis: 100%; }
    .message-mailbox-tabs .message-delete-all-form { flex: 1 1 100%; margin-left: 0; }
    .message-delete-all-trigger { width: 100%; }
}
.message-delete-all-trigger { height: 100%; padding: 8px 12px; border: 1px solid var(--danger); border-radius: 7px; background: transparent; color: var(--danger); font: inherit; font-size: 13px; cursor: pointer; direction: rtl; }
.message-delete-all-trigger:hover { background: var(--danger); color: #fff; }
.message-compose-panel,
.message-list-panel { width: 100%; box-sizing: border-box; }
.message-compose-form,
.message-full-field { width: 100%; }
.message-subject-recipient-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(180px, 1fr); gap: 14px; margin-bottom: 10px; }
.message-subject-recipient-row .field { margin: 0; }
.message-recipient-field input,
.message-recipient-field select { background: #fff; }
.message-recipient-field.typeahead-wrap .typeahead-dropdown { right: 0; left: 0; width: 100%; max-width: 100%; }
.message-full-field input,
.message-full-field select,
.message-full-field textarea { width: 100%; box-sizing: border-box; font: inherit; }
.message-full-field input,
.message-full-field select { min-height: 46px; }
.message-full-field textarea { height: 210px; min-height: 210px; resize: vertical; line-height: 1.9; }
.message-size-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; color: var(--text-muted); font-size: 12px; }
.message-letter-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-bottom: 8px; }
.message-letter-toolbar > label { white-space: nowrap; }
.message-compose-tools { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
.message-compose-tools .message-size-controls { margin-bottom: 0; }
/* فایل ضمیمه: دکمه‌ی آیکونی هم‌ارتفاعِ دکمه‌های اندازه‌ی نوشته + بندانگشتی کوچک */
.message-attachment-field { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; font-size: 12px; white-space: nowrap; }
.message-attachment-trigger { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border: 1px solid var(--panel-border); border-radius: 6px; background: var(--button-bg); color: var(--button-text); font-size: 12px; line-height: 18px; white-space: nowrap; cursor: pointer; }
.message-attachment-trigger:hover { border-color: var(--accent); }
.message-attachment-icon { display: block; color: currentColor; line-height: 0; }
.message-attachment-icon svg { display: block; width: 16px; height: 16px; }
.message-attachment-field input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.message-attachment-preview { position: relative; display: inline-flex; flex: 0 0 auto; }
.message-attachment-preview[hidden] { display: none; }
.message-attachment-preview img { display: block; width: 30px; height: 30px; object-fit: cover; border: 1px solid var(--panel-border); border-radius: 6px; background: var(--panel-bg-soft); }
.message-attachment-remove { position: absolute; top: -6px; left: -6px; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; padding: 0; border: 1px solid var(--panel-border); border-radius: 50%; background: var(--panel-bg); color: var(--danger); font-size: 12px; line-height: 1; cursor: pointer; }
.message-attachment-remove:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.message-size-controls button { padding: 5px 10px; border: 1px solid var(--panel-border); border-radius: 6px; background: var(--button-bg); color: var(--button-text); font: inherit; cursor: pointer; }
.message-size-controls button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.message-font-small textarea,
.message-view-body.message-font-small { font-size: 13px; }
.message-font-medium textarea,
.message-view-body.message-font-medium { font-size: 15px; }
.message-font-large textarea,
.message-view-body.message-font-large { font-size: 17px; }
.message-compose-actions { display: flex; align-items: center; gap: 8px; }
.message-summary-list { display: grid; gap: 8px; }
.message-list-head,
.message-summary-card { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(120px, 1fr) minmax(140px, 1fr) 170px; align-items: center; gap: 12px; }
.message-list-head { padding: 0 12px 8px; color: var(--text-muted); font-size: 12px; }
.message-summary-card { min-height: 62px; padding: 12px; border: 1px solid var(--panel-border); border-radius: 9px; background: var(--panel-bg-soft); cursor: pointer; }
.message-summary-card.message-unread { border-inline-start: 4px solid var(--accent); }
.message-summary-main { display: contents; }
.message-summary-main h3 { margin: 0; font-size: 14px; }
.message-summary-main small,
.message-summary-recipient { color: var(--text-muted); font-size: 12px; }
.message-summary-actions { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; }
.message-inline-detail { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--panel-border); cursor: default; }
.message-inline-detail[hidden] { display: none; }
.message-thread-item { padding: 10px 0; }
.message-thread-item + .message-thread-item { border-top: 1px solid var(--panel-border); }
.message-thread-own .message-view-body { background: color-mix(in srgb, var(--accent) 7%, var(--panel-bg)); }
.message-summary-actions form { margin: 0; }
.message-summary-actions .company-action-button { width: 32px; height: 32px; padding: 2px; border: 0; background: transparent; }
.message-summary-actions .company-action-button img { width: 28px; height: 28px; object-fit: contain; }

.message-reply-link { padding: 4px 7px; border: 0; border-radius: 6px; font: inherit; font-size: 11px; text-decoration: none; background: var(--button-bg); color: var(--button-text); cursor: pointer; }
.message-reply-link { color: #fff; background: var(--accent); }
.message-forward-link { background: var(--button-bg); color: var(--text); border: 1px solid var(--panel-border); }
.message-forward-link:hover { border-color: var(--accent); }


.message-view-meta { margin: 8px 0; color: var(--text-muted); font-size: 12px; }
.message-view-body { padding: 12px; border-radius: 7px; background: var(--panel-bg); font: inherit; line-height: 1.9; white-space: normal; }
.message-attachment-link { display: inline-block; margin-top: 10px; font-size: 12px; }
.message-reply-target { width: 100%; box-sizing: border-box; margin-bottom: 14px; padding: 11px; border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-bg-soft); }
.message-original-content { margin: -4px 0 16px; padding: 12px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg-soft); }
.message-original-content-title { margin-bottom: 8px; color: var(--text-muted); font-size: 12px; }



#messageDeleteConfirmModal { z-index: 1200; }

/* اطلاعات حساب */
.profile-single-panel { width: 100%; box-sizing: border-box; }
.profile-account-form { display: grid; gap: 22px; }
/* شش قلم اطلاعات در یک ردیف؛ در موبایل دوتا-دوتا (پایین‌تر) */
.profile-info-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 14px; text-align: center; }

.profile-info-row > div { display: grid; justify-items: center; align-content: start; gap: 7px; min-height: 45px; padding: 6px 2px; }
.profile-info-row span { color: var(--text-muted); font-size: 12px; }
.profile-info-row strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.profile-info-row .field { margin: 0; }

/* شماره تلفن: مثل بقیه‌ی کادرهای اطلاعات، با یک آیکون ویرایش کنار عنوان */
.profile-phone-label { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--text-muted); font-size: 12px; }
.profile-phone-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; line-height: 0; }
/* display: inline-flex بالاتر، قانونِ پیش‌فرضِ [hidden] را خنثی می‌کند؛ باید صریح پنهان شود */
.profile-phone-btn[hidden] { display: none; }
.profile-phone-btn:hover { background: var(--button-bg); }
.profile-phone-btn img { display: block; width: 20px; height: 20px; object-fit: contain; }
.profile-phone-editor { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.profile-phone-editor[hidden] { display: none; }
.profile-phone-editor input { width: 12ch; min-width: 0; height: 30px; margin: 0; padding: 4px 6px; text-align: center; font-size: 14px; }
.profile-documents-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* ---------- کارت بارگذاری مدارک هویتی ---------- */
.profile-document-card { position: relative; display: grid; justify-items: center; gap: 10px; padding: 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg-soft); text-align: center; }
.profile-document-title { font-size: 13px; font-weight: 600; }
.profile-document-card.is-approved .profile-document-title { color: #1e8e3e; }

/* کادر بارگذاری سمت راست، تصویر بارگذاری‌شده سمت چپش (چیدمان RTL) */
.profile-document-body { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.profile-document-drop { display: grid; justify-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 14px 10px; border: 1px dashed var(--panel-border); border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: background .15s, border-color .15s, padding .15s; }
.profile-document-drop:hover { border-color: var(--accent); background: var(--button-bg); }
.profile-document-icon { display: block; color: var(--text-muted); line-height: 0; }
.profile-document-icon svg { display: block; width: 44px; height: 44px; transition: width .15s, height .15s; }
.profile-document-drop:hover .profile-document-icon { color: var(--accent); }
.profile-document-hint { font-size: 11px; line-height: 1.8; }
.profile-document-input, input[type="file"].profile-document-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* با وجود فایل، کادر بارگذاری جمع می‌شود تا جا برای تصویر باز شود */
.profile-document-card.has-file .profile-document-drop { padding: 8px 6px; }
.profile-document-card.has-file .profile-document-icon svg { width: 30px; height: 30px; }
.profile-document-card.has-file .profile-document-hint { display: none; }
/* پس از تایید فقط یک ردیف می‌ماند: متن تایید و کنارش «ارسال مجدد مدارک» */
.profile-document-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.profile-document-card.is-approved .profile-document-body { display: none; }
.profile-document-card.is-approved .profile-document-drop { display: none; }
.profile-document-reopen { padding: 6px 14px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); color: var(--text); font-family: inherit; font-size: 12px; cursor: pointer; }
.profile-document-reopen:hover { border-color: var(--accent); background: var(--button-bg); }
.profile-document-reopen[hidden] { display: none; }

.profile-document-thumb { position: relative; display: grid; justify-items: center; gap: 6px; flex: 0 0 auto; }
.profile-document-thumb[hidden] { display: none; }
.profile-document-open { display: block; width: 74px; height: 74px; padding: 0; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); cursor: pointer; }
.profile-document-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-document-remove { position: absolute; top: -7px; left: -8px; display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; padding: 0; border: 1px solid var(--panel-border); border-radius: 50%; background: var(--panel-bg); color: var(--danger); font-size: 15px; line-height: 1; cursor: pointer; z-index: 1; }
.profile-document-remove:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.profile-document-note { max-width: 190px; color: var(--text-muted); font-size: 10.5px; line-height: 1.8; }
.profile-document-note[hidden] { display: none; }
.profile-documents-actions { display: flex; justify-content: center; }
.profile-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.profile-panel-head h2 { margin: 0; }
.profile-password-trigger { white-space: nowrap; }

/* پاپ‌آپ‌های تایید هویت و تغییر رمز عبور */
.pw-modal { position: fixed; inset: 0; z-index: 1600; display: grid; place-items: center; padding: 20px; }
.pw-modal[hidden] { display: none; }
.pw-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.pw-modal-box { position: relative; z-index: 1; display: grid; gap: 8px; width: min(420px, 100%); padding: 22px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel-bg); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); text-align: center; }
#passwordModal .pw-modal-box { width: min(640px, 100%); }   /* جا برای سه کادر در یک ردیف */
.pw-modal-box h3 { margin: 0 0 4px; font-size: 15px; }
.pw-modal-text { margin: 0 0 6px; color: var(--text-muted); font-size: 12.5px; line-height: 2; }

/* عنوان داخل کادر، وسط‌چین — با شروع تایپ خودش محو می‌شود */
.pw-modal-box input[type="password"] { width: 100%; height: 36px; margin: 0; padding: 6px 10px; text-align: center; }
.pw-modal-box input[type="password"]::placeholder { color: var(--text-muted); opacity: 1; text-align: center; }
.pw-modal-error { margin: 0; color: var(--danger); font-size: 12px; text-align: center; }
.pw-modal-error[hidden] { display: none; }
.pw-modal-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }

/* سه کادر رمز پشت سر هم، و تیک و ضربدر در ادامه‌شان */
.pw-modal-row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-top: 6px; }
.pw-modal-row input[type="password"] { flex: 1 1 0; min-width: 0; }
.pw-modal-box-wide { width: min(520px, 100%); }
.pw-modal-box textarea { width: 100%; min-height: 96px; padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--input-bg, var(--panel-bg-soft)); color: var(--text); font-family: inherit; font-size: 13px; line-height: 2; resize: vertical; }
/* فرمِ تاییدِ وام: برچسبِ فیلد + کادرِ مبلغ/select ماه */
.pw-modal-field-label { display: block; margin: 4px 0 2px; color: var(--text-muted); font-size: 12px; text-align: center; }
.pw-modal-box input[type="text"],
.pw-modal-box select {
    width: 100%; height: 36px; margin: 0; padding: 6px 10px;
    border: 1px solid var(--panel-border); border-radius: 8px;
    background: var(--input-bg, var(--panel-bg-soft)); color: var(--text);
    font-family: inherit; font-size: 13px; text-align: center; text-align-last: center;
}

/* پاپ‌آپ تک‌کادره (تایید ارسال / تغییر شماره): کادر کوچک‌تر و وسط‌چین */
.pw-modal-row-single { align-items: center; }
.pw-modal-row-single input[type="password"] { flex: 0 1 190px; }
.pw-modal-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.pw-modal-icon:hover { background: var(--button-bg); }
.pw-modal-icon img { display: block; width: 26px; height: 26px; object-fit: contain; }
@media (max-width: 640px) {
    .pw-modal-row { flex-wrap: wrap; }
    .pw-modal-row input[type="password"] { flex: 1 1 100%; }
}

.profile-document-status { font-size: 11px; }
.profile-document-status[hidden] { display: none; }
.profile-document-status.status-pending { color: #b8860b; }
.profile-document-status.status-approved { color: #1e8e3e; }
.profile-document-status.status-rejected { color: var(--danger); }
.profile-document-status.status-draft { color: var(--text-muted); }

/* ---------- جدول بررسی مدارک ارسال‌شده ---------- */
.doc-review-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.doc-review-head h2 { margin: 0; }
.doc-review-filters { display: flex; align-items: center; gap: 6px; }
.doc-review-filter { padding: 5px 12px; border: 1px solid var(--panel-border); border-radius: 8px; color: var(--text); font-size: 12px; }
.doc-review-filter:hover { background: var(--button-bg); text-decoration: none; }
.doc-review-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.doc-review-table { width: 100%; border-collapse: collapse; }
.doc-review-table th,
.doc-review-table td { padding: 8px 6px; border-bottom: 1px solid var(--panel-border); text-align: center; font-size: 12px; vertical-align: middle; }
.doc-review-table th { background: var(--panel-bg-soft); font-size: 12px; white-space: nowrap; }
.doc-review-cell { display: grid; justify-items: center; gap: 5px; }
.doc-review-thumb { width: 58px; height: 58px; padding: 0; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-bg-soft); cursor: pointer; }
.doc-review-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* تیک و ضربدر دقیقاً زیرِ سرستونِ «عملیات»: وسط‌چین در سلول */
.doc-review-actions { display: flex; justify-content: center; align-items: center; }
.doc-review-actions form { display: flex; gap: 3px; margin: 0; justify-content: center; }
.doc-review-btn { width: 28px; height: 28px; padding: 2px; border: 0; background: transparent; cursor: pointer; }
.doc-review-btn img { width: 22px; height: 22px; object-fit: contain; display: block; }
.doc-review-status { font-size: 11px; }
.doc-review-status.status-pending { color: #b8860b; }
.doc-review-status.status-approved { color: #1e8e3e; }
.doc-review-status.status-rejected { color: var(--danger); }
.doc-review-status.status-none { color: var(--text-muted); }
.doc-review-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.doc-review-pager-btn { padding: 6px 16px; border: 1px solid var(--panel-border); border-radius: 8px; color: var(--text); font-size: 12px; }
a.doc-review-pager-btn:hover { background: var(--button-bg); text-decoration: none; }
.doc-review-pager-btn.is-disabled { color: var(--text-muted); opacity: .5; }
.doc-review-pager-info { color: var(--text-muted); font-size: 12px; }
@media (max-width: 720px) {
    .doc-review-table th,
.doc-review-table td { padding: 6px 4px; font-size: 11px; }
    .doc-review-thumb { width: 48px; height: 48px; }
}
/* =====================================================================
   جدول اقساط وام + مدال مدارک
   خطوط 2912 تا 2982 از style.css اصلی.
   ترتیب این فایل‌ها معنادار است — build-css.php آن‌ها را به همین ترتیب
   کنار هم می‌گذارد. جابه‌جا کردنشان ظاهر سایت را خراب می‌کند.
   ===================================================================== */
/* ---------- جدول اقساط وام/مساعده (admin/loans.php) ---------- */
.loan-installments-table th,
.loan-installments-table td { white-space: nowrap; }
.loan-installment-cell { min-width: 90px; }
.loan-installment-check { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font-size: 11px; color: var(--text); }
.loan-installment-check input { width: 16px; height: 16px; cursor: pointer; }
@media (max-width: 720px) {
    .loan-installment-check { font-size: 10px; }
}

/* پیش‌نمایش بزرگ مدرک */
.doc-modal { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px; }
.doc-modal[hidden] { display: none; }
.doc-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.doc-modal-box { position: relative; z-index: 1; display: grid; gap: 12px; width: min(760px, 100%); max-height: 88vh; padding: 16px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel-bg); box-shadow: var(--shadow); }
.doc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.doc-modal-head h3 { margin: 0; font-size: 15px; }
.doc-modal-close { border: 0; background: transparent; color: var(--danger); font-size: 26px; line-height: 1; cursor: pointer; }
.doc-modal-box img { max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; border-radius: 8px; }

.profile-save-button { min-height: 42px; white-space: nowrap; }

/* پیغام عمومی */
.public-message-panel { width: 100%; box-sizing: border-box; }
/* یک ردیف: موضوع (۵ برابر) + نوع پیام + دسته گیرندگان */
.public-message-options { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.public-message-options .field { margin: 0; }
.public-message-options input,
.public-message-options select { width: 100%; box-sizing: border-box; min-height: 46px; font: inherit; }
/* دکمه‌های تیک و ضربدر، چسبیده به سمت چپ پنل */
.public-message-actions { display: flex; flex-direction: row; direction: ltr; justify-content: flex-start; align-items: center; gap: 5px; margin-top: 14px; }
.public-message-actions .form-icon-button { width: 40px; min-width: 40px; height: 40px; padding: 0; border: none; background: transparent !important; }
.public-message-actions .form-icon-button:hover,
.public-message-actions .form-icon-button:focus-visible,
.public-message-actions .form-icon-button:disabled { background: transparent !important; filter: none; }
.public-message-actions .form-icon-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.public-announcement-modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 20px; }
.public-announcement-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .56); }
.public-announcement-box { position: relative; z-index: 1; width: min(560px, 100%); max-height: 75vh; overflow: auto; padding: 26px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel-bg); box-shadow: var(--shadow); }
.public-announcement-box h2 { margin: 8px 0; }
.public-announcement-close { position: absolute; top: 10px; left: 12px; border: 0; background: transparent; color: var(--text); font-size: 26px; cursor: pointer; }
.public-announcement-label,
.public-announcement-sender { color: var(--text-muted); font-size: 12px; }
.public-announcement-body { margin-top: 16px; padding: 14px; border-radius: 8px; background: var(--panel-bg-soft); line-height: 2; }
@media (max-width: 850px) {
    /* موبایل: «نام و کد ملی» / «شرکت و بخش کاری» / «شغل و شماره موبایل» هر جفت در یک ردیف */
    .profile-info-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* پیغام عمومی: موضوع تمام‌عرض، دو لیست کشویی کنار هم */
    .public-message-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-message-subject-field { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .message-subject-recipient-row { grid-template-columns: 1fr; }
    .message-letter-toolbar { align-items: stretch; flex-direction: column; }
    .message-compose-tools { align-items: stretch; flex-wrap: wrap; }
    .message-attachment-field { align-items: flex-start; flex-direction: column; }
    /* profile-info-row اینجا تک‌ستونی نمی‌شود — جفت‌ها باید کنار هم بمانند */
    .profile-documents-row,
.public-message-options { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .message-list-head { display: none; }
    .message-summary-card { grid-template-columns: 1fr auto; }
    .message-summary-main h3 { grid-column: 1 / -1; }
    .message-summary-main .message-summary-recipient,
.message-summary-main small { font-size: 11px; }
    .message-summary-actions .company-action-button { width: 28px; height: 28px; }
    .message-summary-actions .company-action-button img { width: 25px; height: 25px; }
}


/* ---------------------------------------------------------------------
   پیغام عمومی — کادرهای فرم: موضوع هم‌اندازه و هم‌شکلِ لیست‌های کشویی،
   زمینه‌ی سفید در تم روشن و مشکی در تم تاریک.
   --------------------------------------------------------------------- */
.public-message-panel { --pm-field-bg: #ffffff; }
:root[data-theme="dark"] .public-message-panel { --pm-field-bg: #0b0d12; }
.public-message-panel input[name="subject"],
.public-message-panel textarea,
.public-message-panel .pretty-select-trigger,
.public-message-panel .pretty-select-list {
    background: var(--pm-field-bg);
    color: var(--text);
}
.public-message-panel input[name="subject"],
.public-message-panel textarea {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 14px;
}
.public-message-panel input[name="subject"] { min-height: 46px; padding: 11px 14px; }
.public-message-panel textarea { padding: 11px 14px; }
.public-message-panel input[name="subject"]:focus,
.public-message-panel textarea:focus { outline: none; border-color: var(--accent); }
.public-message-panel input[name="subject"]:disabled { opacity: .55; cursor: not-allowed; }
:root[data-theme="dark"] .public-message-panel input[name="subject"],
:root[data-theme="dark"] .public-message-panel textarea { color: #ffffff; }

/* پاپ‌آپِ تأییدِ ارسالِ پیامک */
.pm-sms-popover { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.pm-sms-pop-box { position: absolute; width: 330px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg-soft); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.pm-sms-pop-text { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.9; text-align: justify; }
.pm-sms-pop-box.is-error .pm-sms-pop-text { color: #dc2626; font-weight: bold; }
:root[data-theme="dark"] .pm-sms-pop-box.is-error .pm-sms-pop-text { color: #f87171; }
.pm-sms-pop-rows { display: flex; flex-direction: column; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; }
.pm-sms-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--panel-border); color: var(--text); font-size: 12px; }
.pm-sms-pop-row:last-child { border-bottom: none; }
.pm-sms-pop-row span { color: var(--text-muted); }
.pm-sms-pop-buttons { display: flex; direction: ltr; align-items: center; justify-content: center; gap: 10px; }
.pm-sms-pop-buttons button { width: 32px; height: 32px; padding: 3px; border: 0; background: transparent; cursor: pointer; }
.pm-sms-pop-buttons img { width: 26px; height: 26px; object-fit: contain; }
@media (max-width: 720px) {
    .pm-sms-pop-box { width: calc(100vw - 16px); }
    .public-message-panel input[name="subject"],
    .public-message-panel textarea { font-size: 16px; }   /* جلوگیری از زومِ iOS */
}

/* داشبورد کارمند — فرم درخواست گواهی اشتغال */
.cert-req { margin: 10px 0 14px; padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg-soft); }
.cert-req[hidden] { display: none !important; }
/* دو کادر و تیک/ضربدر در یک ردیف؛ دکمه‌ها هم‌تراز با کادرها (زیرِ برچسب‌ها) */
.cert-req-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.cert-req .field { margin: 0; }
.cert-req .field input { width: 100%; box-sizing: border-box; min-height: 42px; }
.cert-req .leave-req-actions { margin: 0; display: flex; align-items: center; gap: 8px; height: 42px; }
.cert-list-title { margin: 18px 0 8px; font-size: 14px; }
.leave-stats-total td { background: var(--panel-bg-soft); }
@media (max-width: 720px) { .cert-req-grid { grid-template-columns: 1fr 1fr; } .cert-req .leave-req-actions { grid-column: 1 / -1; justify-content: center; } }
.loan-installment-check input { accent-color: var(--accent); }
/* =====================================================================
   UI/UX Pro Max — لایه‌ی پالیش (بر بلوک‌های بالا مقدم است)
   خطوط 2983 تا 3089 از style.css اصلی.
   ===================================================================== */
/* =====================================================================
   UI/UX Pro Max — لایه‌ی پالیش حرفه‌ای (فقط بصری + دسترس‌پذیری)
   Minimalism/Swiss · افزوده‌ی غیرمخرب؛ ساختار/آپلود/PDF/اکسل دست‌نخورده.
   ===================================================================== */

/* ۱) رینگ فوکوسِ یکدست برای هر عنصر تعاملی که استایل اختصاصی ندارد (a11y/کیبورد) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ۲) گردیِ یکدستِ سطوح اصلی (پنل‌ها/کارت‌ها/جدول‌ها) — ظاهر مدرن و حرفه‌ای */
.company-form-panel,
.job-titles-form-panel,
.job-titles-list-panel,
.users-form-panel,
.message-compose-panel,
.message-list-panel,
.public-message-panel,
.profile-single-panel,
.profile-panel,
.tabset-panel,
.message-summary-card,
.profile-document-card,
.login-card {
    border-radius: var(--radius);
}

/* ۳) مدیریت پاپ‌آپ‌ها: کادرِ همه‌ی مدال‌ها یکدست (گردی + سایه‌ی لایه‌ای + کادر ظریف) */
.delete-confirm-modal-box,
.doc-modal-box,
.history-modal,
.public-announcement-box,
.pw-modal-box,
.pw-modal-box-wide,
.row-action-modal,
.delete-error-popup {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--panel-border);
}

/* ۴) پس‌زمینه‌ی همه‌ی پاپ‌آپ‌ها: تیرگی + بلورِ یکدست (شیشه‌ای، حرفه‌ای) */
.doc-modal-backdrop,
.pw-modal-backdrop,
.public-announcement-backdrop {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ۵) منوهای کشویی (پنل کاربری/زنگوله/تایپ‌اِهد): سایه و گردیِ یکدست */
.user-menu,
.notif-menu,
.typeahead-dropdown {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--panel-border);
}

/* ۶) دکمه‌ی بستنِ مدال‌ها: هدف لمسیِ ۴۴px، هاور نرم */
.doc-modal-close,
.pw-modal .pw-modal-box .public-announcement-close,
.public-announcement-close {
    border-radius: 50%;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

/* ۷) گذارِ نرمِ حالت‌ها روی عناصر تعاملی (حسِ حرفه‌ای، بدون کندی) */
.company-action-button,
.form-confirm-button,
.form-cancel-button,
.form-icon-button,
.profile-save-button,
.btn,
.btn-primary {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}

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


/* =====================================================================
   بازبینیِ UI — ناحیه‌ی لمس: ظاهرِ آیکون‌های کوچک همان می‌ماند، ولی
   محدوده‌ی کلیک/لمس با یک لایه‌ی نامرئیِ ::before بزرگ‌تر می‌شود.
   ===================================================================== */
.uc-icon-btn::before { content: ''; position: absolute; inset: -3px -9px; }
.ca-toggle::before { content: ''; position: absolute; inset: -10px -8px; }
.message-reply-link { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
@media (max-width: 900px) {
    .message-reply-link { min-height: 36px; }
}
.uc-icon-btn:focus-visible, .ca-toggle:focus-within { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

/* پاپ‌آورِ تأییدِ حذف: ورودِ نرم و حلقه‌ی فوکوسِ کیبورد */
.delete-action-box { animation: pop-in .14s ease-out; transform-origin: center top; }
@keyframes pop-in { from { transform: scale(.94); } to { transform: none; } }
.delete-action-buttons button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* پنل‌های تب و منوها با گذارِ کوتاه ظاهر شوند */
.tabset.has-open .tabset-panel:not([hidden]) { animation: panel-in .16s ease-out; }
@keyframes panel-in { from { transform: translateY(4px); } to { transform: none; } }

/* کاربرانی که حرکت را در سیستم‌عامل خاموش کرده‌اند: همه‌ی انیمیشن‌ها و گذارها خاموش */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* نوارِ ابزارِ برگه‌ها (فیش/حکم/گواهی): دکمه‌های برچسب‌دار به‌جای آیکونِ تنها */
.print-toolbar .tb-btn,
.print-toolbar .payslip-toolbar-close.tb-btn { width: auto; min-width: 0; height: 36px; gap: 6px; padding: 4px 12px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg-soft); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; direction: rtl; }
.print-toolbar .tb-btn img { width: 22px; height: 22px; }
.print-toolbar .tb-btn .tb-x { color: var(--danger); font-family: Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1; }
.print-toolbar .tb-btn.tb-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.print-toolbar .tb-btn:hover, .print-toolbar .tb-btn:focus-visible { background: var(--button-bg); }
.print-toolbar .tb-btn.tb-primary:hover, .print-toolbar .tb-btn.tb-primary:focus-visible { background: var(--accent-hover); }
.print-toolbar .tb-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 900px) {
    .print-toolbar .tb-btn, .print-toolbar .payslip-toolbar-close.tb-btn { height: 36px; padding: 4px 10px; font-size: 12.5px; }
}

/* تم تاریک: برچسبِ «مدیر سایت» خوانا */
:root[data-theme="dark"] .site-manager-label { background: rgba(59, 130, 246, .15); color: #93c5fd; }
/* =====================================================================
   مرخصی و اضافه‌کار — همه‌ی لایه‌های بازطراحی، به ترتیب
   خطوط 3090 تا 4658 از style.css اصلی.
   ===================================================================== */
/* =====================================================================
   درخواست‌های مرخصی و اضافه‌کار — فرم کارمند + پنل بررسی (UI/UX Pro Max)
   ===================================================================== */


.leave-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.leave-field-full { grid-column: 1 / -1; }
.leave-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* انتخابگرِ سگمنتیِ نوع درخواست */
.leave-type-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.leave-type-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    background: var(--panel-bg-soft);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.leave-type-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.leave-type-opt:hover { background: var(--button-bg); }
.leave-type-opt:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}
.leave-type-opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }


.leave-time-fields { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.leave-time-pair { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.leave-note {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}
.leave-note:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }

.leave-actions { align-items: flex-start; }


/* برچسب نوع درخواست و وضعیت — متنِ رنگی روی سطحِ نرمِ خنثی (سبک سوئیسی) */
.leave-type-badge,
.leave-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border);
}
.leave-type-daily_leave { color: var(--success); }   /* مرخصی روزانه = سبز */
.leave-type-hourly_leave { color: var(--accent); }    /* مرخصی ساعتی = آبی */
.leave-type-overtime { color: var(--warning); }   /* اضافه‌کار = نارنجی */
.leave-type-daily_mission { color: var(--leave-mission); }        /* مأموریت روزانه = زرد */
.leave-type-hourly_mission { color: var(--leave-mission-hourly); } /* مأموریت ساعتی = خاکستری */

.leave-status-pending { color: var(--warning); }
.leave-status-approved { color: var(--success); }
.leave-status-rejected { color: var(--danger); }

.leave-reject-reason { color: var(--danger); }

/* بَجِ شمارشِ کنارِ لینکِ فهرست (مرخصی و اضافه‌کار) */
.nav-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-inline-start: 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}

@media (max-width: 620px) {
    
    
    .leave-type-opt { flex: 1 1 auto; }
}

/* =====================================================================
   فاز ۱: تقویم ماهانه‌ی مرخصی/اضافه‌کار + پنل کناری + صفحه‌ی روز
   ===================================================================== */

.leave-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* --- تقویم --- */
.leave-cal { min-width: 0; }
.leave-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.leave-cal-title { font-size: 16px; font-weight: 800; color: var(--text); }
.leave-cal-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: var(--panel-bg-soft); border: 1px solid var(--panel-border);
    color: var(--text); font-size: 20px; line-height: 1; text-decoration: none;
    transition: background-color .16s ease;
}
.leave-cal-nav:hover { background: var(--button-bg); text-decoration: none; }

.leave-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.leave-cal-dow {
    text-align: center; font-size: 12px; font-weight: 700;
    color: var(--text-muted); padding: 4px 0;
}
.leave-cal-cell {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 58px; padding: 6px 4px 8px;
    border: 1px solid var(--panel-border); border-radius: var(--radius-sm);
    background: var(--panel-bg-soft); color: var(--text);
    text-decoration: none;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .06s ease;
}
.leave-cal-cell:hover { background: var(--button-bg); border-color: var(--accent); text-decoration: none; }
.leave-cal-cell:active { transform: scale(.97); }
.leave-cal-cell.is-empty { background: transparent; border-color: transparent; pointer-events: none; }
.leave-cal-cell.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.leave-cal-day { font-size: 14px; font-weight: 700; }

.leave-cal-bars {
    display: flex; flex-wrap: wrap; gap: 3px; justify-content: center;
    width: 100%; margin-top: auto;
}
.leave-bar { display: block; width: 16px; height: 4px; border-radius: 2px; }
.leave-bar.leave-bar-pending { opacity: .55; }  /* در انتظار = کم‌رنگ‌تر */

/* رنگِ نوع درخواست — مشترک بین خطوطِ تقویم و نقطه‌های راهنما */
.leave-bar-daily_leave,
.leave-dot.leave-bar-daily_leave { background: var(--success); }
.leave-bar-hourly_leave,
.leave-dot.leave-bar-hourly_leave { background: var(--accent); }
.leave-bar-overtime,
.leave-dot.leave-bar-overtime { background: var(--warning); }
.leave-bar-daily_mission,
.leave-dot.leave-bar-daily_mission { background: var(--leave-mission); }
.leave-bar-hourly_mission,
.leave-dot.leave-bar-hourly_mission { background: var(--leave-mission-hourly); }

.leave-cal-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    justify-content: center;                 /* راهنمای رنگ‌ها وسط‌چین */
    margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted);
}
.leave-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.leave-dot { display: inline-block; width: 12px; height: 6px; border-radius: 3px; }

/* --- پنل کناری --- */
.leave-side {
    min-width: 0;
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 14px;
}


.leave-side-empty { font-size: 13px; color: var(--text-muted); padding: 2px 2px 4px; }

.leave-side-item {
    border: 1px solid var(--panel-border);
    border-inline-start-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 9px 11px;
    margin-bottom: 8px;
}
.leave-side-daily_leave { border-inline-start-color: var(--success); }
.leave-side-hourly_leave { border-inline-start-color: var(--accent); }
.leave-side-overtime { border-inline-start-color: var(--warning); }
.leave-side-daily_mission { border-inline-start-color: var(--leave-mission); }
.leave-side-hourly_mission { border-inline-start-color: var(--leave-mission-hourly); }
.leave-side-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }


/* --- صفحه‌ی ثبت/ویرایش درخواستِ روز --- */
.leave-day-panel { max-width: 560px; }
.leave-day-head { margin-bottom: 16px; }
.leave-day-badge {
    display: inline-block; padding: 8px 16px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    font-size: 15px; font-weight: 800;
}
.leave-day-form { display: flex; flex-direction: column; gap: 16px; }
.leave-day-actions { flex-direction: row; gap: 10px; flex-wrap: wrap; }
.leave-select {
    width: 100%; max-width: 320px; padding: 10px 12px;
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 14px;
}
.leave-select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }

@media (max-width: 820px) {
    .leave-layout { grid-template-columns: 1fr; }
    .leave-cal-cell { min-height: 52px; }
}
@media (max-width: 480px) {
    .leave-cal-grid { gap: 4px; }
    .leave-cal-dow { font-size: 10.5px; }
    .leave-cal-cell { min-height: 46px; padding: 4px 2px 6px; }
    .leave-cal-day { font-size: 12.5px; }
    .leave-bar { width: 12px; }
}

/* =====================================================================
   بازطراحی UX تقویم مرخصی — پنل درخواستِ اینلاین، تقویم/پنل کوچک‌تر،
   تعطیلی جمعه، و ترتیب موبایل. (روی نسخه‌ی فاز ۱ سوار می‌شود.)
   ===================================================================== */

.leave-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.82fr);
    gap: 14px;
}

/* روزهای تقویم حالا button هستند → ریست ظاهر */
.leave-cal-cell {
    width: 100%;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-height: 0;            /* ارتفاع از grid-auto-rows می‌آید، نه از محتوا */
    height: 100%;
    padding: 5px 3px 6px;
}
/* ارتفاع ثابت تقویم: همیشه ۶ ردیفِ هم‌اندازه، مستقل از تعداد هفته‌های ماه.
   ارتفاع فقط به اندازه‌ی «عدد روز + نوار رنگی» است. */
.leave-cal-grid {
    grid-template-rows: auto repeat(6, 40px);
}
.leave-cal-cell {
    gap: 0;                      /* فاصله‌ی عدد تا رنگ‌ها حذف شد */
    padding: 3px 2px 4px;
    justify-content: center;
}
.leave-cal-day { font-size: 17px; font-weight: 800; line-height: 1.1; }
.leave-cal-dow { font-size: 13px; }
.leave-cal-title { font-size: 15px; }
.leave-cal-nav { width: 32px; height: 32px; font-size: 18px; }

/* نوارهای رنگی چسبیده به عدد */
.leave-cal-bars { margin-top: 2px; gap: 2px; }
.leave-bar { height: 3px; }

/* مناسبت‌های روزِ انتخاب‌شده — زیر جدول، بدون کادر */
.leave-cal-occ { margin-top: 10px; }
.leave-cal-occ-date {
    font-size: 13px; font-weight: 700; color: var(--success);   /* «مناسبت‌های فلان تاریخ» سبز */
    margin-bottom: 4px;
}
.leave-cal-occ-list { margin: 0; padding: 0; list-style: none; }
.leave-cal-occ-list li {
    font-size: 14px; line-height: 1.9; color: var(--text);
    overflow-wrap: anywhere;                 /* متن بلند بریده نشود */
}
/* مناسبتِ تعطیل → متنِ مناسبت قرمز (عنوانِ تاریخ همیشه سبز می‌ماند) */
.leave-cal-occ.is-holiday .leave-cal-occ-list li { color: var(--danger); }

/* جمعه‌ها (تعطیل) قرمزِ کم‌رنگ — مطابق دیت‌پیکر */
.leave-cal-dow:last-child { color: var(--danger); }
.leave-cal-cell.is-holiday {
    background: color-mix(in srgb, var(--danger) 9%, var(--panel-bg-soft));
    border-color: color-mix(in srgb, var(--danger) 22%, var(--panel-border));
}
.leave-cal-cell.is-holiday .leave-cal-day { color: var(--danger); }

/* موبایل/تبلت: ارتفاع ردیف و اندازه‌ها کوچک‌تر می‌شوند، ولی هیچ داده‌ای پنهان نمی‌شود.
   ارتفاع همچنان ثابت است (۶ ردیف) تا با کم‌شدن هفته‌ها تقویم بالا نپرد. */
@media (max-width: 820px) {
    .leave-cal-grid { grid-template-rows: auto repeat(6, 38px); }
}
@media (max-width: 480px) {
    .leave-cal-grid { grid-template-rows: auto repeat(6, 36px); gap: 4px; }
    .leave-cal-cell { padding: 2px 1px 3px; }
    .leave-cal-day { font-size: 15px; }     /* هنوز از ۱۲.۵px قبلی بزرگ‌تر */
    .leave-cal-dow { font-size: 11px; }
    .leave-bar { width: 12px; }
    .leave-cal-legend { gap: 8px 12px; font-size: 11.5px; }
    .leave-cal-occ-list li { font-size: 13.5px; line-height: 1.85; }
}
@media (max-width: 360px) {
    .leave-cal-grid { grid-template-rows: auto repeat(6, 34px); }
    .leave-cal-day { font-size: 14px; }
    .leave-bar { width: 10px; }
}

/* روزِ انتخاب‌شده */
.leave-cal-cell.is-selected { background: var(--accent); border-color: var(--accent); box-shadow: var(--focus-ring); }
.leave-cal-cell.is-selected .leave-cal-day,
.leave-cal-cell.is-selected.is-holiday .leave-cal-day { color: var(--accent-text); }

/* پنل درخواست (وسط) */
.leave-req {
    min-width: 0;
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 14px;
    margin: 0;
}
.leave-req-date {
    font-size: 13px; font-weight: 700; color: var(--text-muted);
    padding: 8px 10px; margin-bottom: 12px; text-align: center;
    border: 1px dashed var(--panel-border); border-radius: var(--radius-sm);
}
.leave-req-date.is-picked {
    color: var(--accent); border-style: solid;
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    background: var(--accent-soft);
}
.leave-req-fields { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.leave-req-fields[disabled] { opacity: .5; }
.leave-req-times { display: flex; flex-wrap: wrap; gap: 14px; }
.leave-hm { display: inline-flex; align-items: center; gap: 6px; }
.leave-hm-sel {
    padding: 8px; border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text); font: inherit; font-size: 14px;
    direction: ltr; text-align: center;
}
.leave-hm-sel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.leave-hm-sep { color: var(--text-muted); font-weight: 700; }
.leave-req-submit { align-self: flex-start; padding: 9px 22px; }

/* پنل گوشه (لاگ) کوچک‌تر */
.leave-side { padding: 10px; }

.leave-side-item { padding: 7px 9px; margin-bottom: 5px; }


/* ===== موبایل: پیش از «ثبت درخواست جدید» فقط جدول است (لاگ‌ها بالا).
   پس از زدنِ آن دکمه (یا در حالتِ ویرایش)، ترتیب برعکس می‌شود:
   تقویم → فرمِ نوع‌درخواست → جدول، همیشه به‌عنوان آخرین پنل. ===== */
@media (max-width: 900px) {
    .leave-layout { display: flex; flex-direction: column; gap: 12px; }
    .leave-side { order: 1; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
    .leave-cal { order: 2; }
    .leave-req { order: 3; }
    
    
    /* پنل درخواست تا انتخاب تاریخ پنهان است */
    .leave-req:not(.is-active) { display: none; }

    /* --- ثبت/ویرایشِ درخواست: تقویم بالا، فرم وسط، جدول همیشه آخر --- */
    .leave-layout.is-armed .leave-cal { order: 1; display: block; }
    .leave-layout.is-armed .leave-req { order: 2; }
    .leave-layout.is-armed .leave-side { order: 3; display: block; overflow: visible; }

    /* پس از انتخاب یک تاریخ (فرم فعال)، مناسبتِ روزهای تقویم لازم نیست دیده شود */
    .leave-layout:has(.leave-req.is-active) .leave-cal-legend { display: none; }
}

/* =====================================================================
   درخواست وام و مساعده — دکمهٔ شروع، فرم (نوع/مبلغ/قسط در یک ردیف،
   توضیح در ردیف بعد) و جدولِ تاریخچه.
   ===================================================================== */

/* نوارِ بالا: دکمهٔ «ثبت درخواست جدید» — مثل تبِ مرخصی */
.loan-topbar {
    display: flex; justify-content: flex-end;
    margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
}
.loan-start-btn[hidden] { display: none; }

/* چیدمان: جدول سمت چپ، پنلِ درخواست سمت راست (هم‌عرضِ تقویمِ مرخصی) */
.loan-layout { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.loan-layout .loan-req { display: none; }
.loan-layout.is-armed .loan-req { display: flex; }

.loan-req {
    padding: 18px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--panel-bg-soft);
    flex-direction: column; gap: 14px;
    min-width: 0;
}
.loan-req-head {
    font-size: 13px; font-weight: 800; text-align: center;
    color: var(--text); margin-bottom: 2px;
}

/* گریدِ ۲×۲ واقعی — نه flexbox خطی — تا هر سلول دقیقاً هم‌ستونِ سلولِ بالا/
   پایینِ خودش بماند، صرف‌نظر از عرضِ محتوای بقیه‌ی سلول‌ها:
     ستونِ ۱ (راست):  نوع درخواست  /  لیبلِ «تعداد اقساط»
     ستونِ ۲ (چپش):   مبلغ به ریال /  دکمه‌ی تعداد اقساط
   در RTL، اولین ناحیه‌ی نام‌گذاری‌شده در هر سطر سمتِ راست می‌نشیند. */
.loan-req-row {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas:
        "type   amount"
        "mLabel mControl";
    justify-content: start;   /* گرید به سمتِ راستِ پنل بچسبد، نه وسط/کشیده */
    column-gap: 5px; row-gap: 5px;
    margin-right: -8px;   /* فاصله‌ی ۱۰px تا خطِ پنل (پنل ۱۸px padding دارد) */
}
/* هر دو فیلدِ سطرِ اول باید gap یکسان داشته باشند وگرنه (چون leave-field
   پیش‌فرض gap:8px دارد و اینجا amount را ۴px کرده بودیم) کنترل‌های‌شان
   هم‌ارتفاع نمی‌مانند و یکی از دیگری پایین‌تر می‌افتد. */
.loan-field-type { grid-area: type;   margin: 0; gap: 4px; }
.loan-amount-field { grid-area: amount; margin: 0; gap: 4px; }
.loan-months-label-cell { grid-area: mLabel; align-self: center; }
.loan-field-months { grid-area: mControl; margin: 0; }
.loan-months-label-cell[hidden],
.loan-field-months[hidden] { display: none; }
.loan-req-row .leave-label { font-size: 11.5px; text-align: center; }
.loan-months-label-standalone { display: block; text-align: center; white-space: nowrap; }

/* «جایگاهِ» عرضِ ثابتِ مشترک بین کادرِ مبلغ و دکمه‌ی قسط: هر دو داخلِ یک
   slot با عرضِ یکسان (۱۰۰px) و justify-content:center قرار می‌گیرند، پس
   مرکزِ افقی‌شان همیشه یکی است — صرف‌نظر از عرضِ متغیرِ خودِ دکمه یا
   عرضِ متغیرِ تومان/مبلغِ‌قسط کنارشان (که بیرون از این slot‌اند). */
.loan-value-slot {
    width: 100px; flex: 0 0 auto;
    display: flex; justify-content: center;
}
/* برای مبلغ: لیبل هم داخلِ همین slot می‌آید (بالای input) تا دقیقاً روی
   خودِ کادر بماند، نه روی کل ردیف (که تومان هم عرضش را عوض می‌کند) */
.loan-value-slot-column { flex-direction: column; gap: 4px; }
.loan-amount-row,
.loan-months-row {
    display: flex; align-items: flex-end; justify-content: flex-start; gap: 6px;
}
.loan-amount-field .leave-select {
    width: 100px; min-width: 0; flex: 0 0 auto;   /* عرضِ ثابت، با تایپ عوض نمی‌شود */
    height: 36px; box-sizing: border-box;
    background: #fff; color: #1a1a1a;
    text-align: center; direction: ltr;
}
:root[data-theme="dark"] .loan-amount-field .leave-select { background: #fff; color: #1a1a1a; }
/* فضای معادلِ تومانی/مبلغِ قسط از پیش رزرو می‌شود تا با هر رقمِ تازه‌تایپ‌شده
   کادرهای کناری جابه‌جا نشوند — عرض به‌اندازه‌ی طولانی‌ترین حالتِ ممکن
   («۹۹۹ میلیون و پانصد هزار تومان» ≈ ۱۳۳px، «هر قسط ...» ≈ ۱۷۴px) */
.loan-amount-toman {
    flex: 0 0 auto;
    font-size: 11px; color: var(--text-muted); white-space: nowrap;
    height: 36px; box-sizing: border-box;
    display: inline-flex; align-items: center;   /* هم‌ارتفاعِ کادرِ ورودی، وسط‌چینِ عمودی */
}
#loanAmountToman { min-width: 140px; }
#loanInstallmentHint { min-width: 180px; }

/* دکمه‌های سفارشیِ نوع/قسط هم همان ارتفاعِ کادرِ مبلغ را دارند */
.loan-field-type .leave-mm-custom-btn,
.loan-field-months .leave-mm-custom-btn {
    height: 36px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
}

/* لیست‌باکس‌های سفارشیِ نوع و قسط — همان ظاهرِ سال/ماهِ مرخصی */
.loan-type-custom .leave-mm-custom-btn,
.loan-months-custom .leave-mm-custom-btn {
    display: inline-block;
    font: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--text); background: var(--input-bg);
    border: 1px solid var(--input-border); border-radius: 10px;
    padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
/* لیستِ بازشونده — همان ظاهرِ سال/ماهِ مرخصی، ولی در همه‌ی عرض‌ها (نه فقط موبایل) */
.loan-type-custom,
.loan-months-custom { position: relative; display: inline-block; }
.loan-type-custom .leave-mm-custom-list,
.loan-months-custom .leave-mm-custom-list {
    display: block;
    position: absolute; top: 100%; right: 0;
    z-index: 20; margin: 0; padding: 4px; list-style: none;
    min-width: 100%; max-height: 220px; overflow-y: auto;
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: 10px; box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.18));
}
.loan-type-custom .leave-mm-custom-list[hidden],
.loan-months-custom .leave-mm-custom-list[hidden] { display: none; }
.loan-type-custom .leave-mm-custom-list li,
.loan-months-custom .leave-mm-custom-list li {
    padding: 7px 10px; font-size: 12.5px; text-align: center;
    white-space: nowrap; border-radius: 7px; cursor: pointer;
}
.loan-type-custom .leave-mm-custom-list li:hover,
.loan-type-custom .leave-mm-custom-list li.is-selected,
.loan-months-custom .leave-mm-custom-list li:hover,
.loan-months-custom .leave-mm-custom-list li.is-selected {
    background: var(--accent); color: var(--accent-text, #fff);
}
/* سلکتِ نیتیو فقط برای ارسالِ فرم می‌ماند */
.loan-type-custom select,
.loan-months-custom select {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* کادرِ توضیح: هم‌ارتفاعِ کادرِ مرخصی */
.loan-req .leave-letter-field { flex: 1 1 auto; }
.loan-req .leave-note { min-height: 150px; }
.loan-req .leave-req-actions { justify-content: center; }

.loan-type-loan { color: var(--accent); }    /* وام = آبی */
.loan-type-advance { color: var(--success); }   /* مساعده = سبز */

/* جدولِ تاریخچه — ردیف‌های در دستِ بررسی با کلیک، پاپ‌آپِ ویرایش/حذف می‌دهند */
.loan-history { position: relative; min-width: 0; }
.loan-row.is-actionable { cursor: pointer; }
.loan-row.is-actionable:hover { background: var(--button-bg); }
.loan-row.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }
.loan-row-empty td {
    padding: 22px 10px; text-align: center;
    color: var(--text-muted); font-size: 12.5px;
}
/* پاپ‌آپِ ویرایش/حذف، چسبیده به لبه‌ی چپِ جدول */
.loan-history .leave-actions-pop { position: absolute; left: 6px; z-index: 5; }

/* دسکتاپ: پنلِ درخواست سمت راست (هم‌عرضِ تقویمِ مرخصی ۴۶۰px)، جدول سمت چپ.
   در RTL ستونِ اولِ grid سمت راست می‌نشیند، پس پنل باید ستونِ اول باشد. */
@media (min-width: 901px) {
    .loan-layout.is-armed { grid-template-columns: 460px minmax(0, 1fr); }
    .loan-layout.is-armed .loan-req { order: 1; }
    .loan-layout.is-armed .loan-history { order: 2; }
}

/* موبایل: پنلِ درخواست بالای جدول، تمام‌عرض (هم‌اندازهٔ کادرِ مرخصی) */
@media (max-width: 900px) {
    .loan-layout { grid-template-columns: minmax(0, 1fr); }
    .loan-layout.is-armed .loan-req { order: 1; }
    .loan-layout.is-armed .loan-history { order: 2; }
    .loan-req { padding: 14px; }
    .loan-req-row { column-gap: 6px; row-gap: 3px; }
    .loan-months-row { gap: 6px; flex-wrap: wrap; }
    .loan-value-slot { width: 83px; }
    .loan-amount-field .leave-select { width: 83px; }
    /* عرضِ کاملِ دسکتاپ در صفحه‌ی باریک جا نمی‌شود؛ در دو خط می‌شکند نه اینکه
       بیرون بزند — عرض هنوز ثابت است، پس با تایپ جابه‌جایی رخ نمی‌دهد */
    .loan-amount-toman {
        white-space: normal; line-height: 1.5; font-size: 10px;
    }
    #loanAmountToman { min-width: 76px; max-width: 76px; }
    #loanInstallmentHint { min-width: 90px; max-width: 90px; }
    .loan-history .leave-actions-pop { left: 4px; }
}

.loan-table th,
.loan-table td { text-align: center; vertical-align: middle; }
.loan-table th { font-size: 12px; }
.loan-table td { font-size: 12.5px; white-space: nowrap; }

/* موبایل: جدول ۱۱ستونی جا نمی‌شود — داخلِ کادرِ خودش افقی اسکرول می‌خورد
   (هیچ داده‌ای پنهان یا بریده نمی‌شود) و ستونِ تاریخ چسبیده می‌ماند. */
@media (max-width: 900px) {
    .loan-history .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .loan-table { min-width: 900px; }
    .loan-table th,
.loan-table td { padding: 7px 8px; font-size: 11.5px; }
}

/* =====================================================================
   نسخه ۳ مرخصی: پنل بزرگ‌تر، ردیفِ نوع+ساعت، آیکن ویرایش/حذف، ضمیمه
   ===================================================================== */

/* رفع باگ: [hidden] وقتی روی عناصرِ display:flex باشد بی‌اثر می‌شد */
.leave-field[hidden],
.leave-req-times[hidden],
.leave-time-fields[hidden] { display: none !important; }

/* پنل درخواست بزرگ‌تر */
.leave-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.85fr); }
.leave-req { padding: 18px; }


.leave-req-times { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.leave-req-actions { display: flex; gap: 10px; flex-wrap: wrap; }


/* آیکن ویرایش (مداد) و حذف (سطل) در همان ردیفِ نوع و تاریخ */
.leave-side-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.leave-icon-form { display: inline; margin: 0; }
.leave-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 3px; border: 0; background: transparent;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: background-color .15s ease;
}
.leave-icon-btn:hover { background: var(--button-bg); }
.leave-icon-btn img { width: 22px; height: 22px; object-fit: contain; }

.leave-side-attach {
    display: inline-block; margin-top: 6px; font-size: 12.5px;
    color: var(--accent); text-decoration: none;
}
.leave-side-attach:hover { text-decoration: underline; }


.leave-side-body { min-height: 40px; }
.leave-side-note { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.7; }
.leave-day-block + .leave-day-block { margin-top: 4px; }

/* موبایل: پنل روزِ انتخابی به‌صورت بلوکِ عادی (نه ردیفِ افقی) بماند */
@media (max-width: 900px) {
    .leave-side { display: block; overflow: visible; padding: 12px; }
}

/* =====================================================================
   پنل درخواست: سرصفحه‌ی «درخواست [نوع] تاریخ»، متنِ هم‌ظاهرِ نامه‌ها،
   و صفحه‌ی انتخاب ساعتِ عقربه‌ای
   ===================================================================== */

/* ستون‌های تقویم / درخواست / پنل کناری هم‌ارتفاع شوند تا کادر درخواست
   با بلندشدنِ تقویم (به‌خاطر مناسبت‌ها) همان‌قدر بلند شود */
.leave-layout { align-items: stretch; }
.leave-req { display: flex; flex-direction: column; }
.leave-req-fields { flex: 1 1 auto; }
/* فیلدِ متن تمام فضای باقی‌مانده را می‌گیرد و textarea تا ته کشیده می‌شود */
/* gap: 0 چون این عنصر کلاس .leave-field را هم دارد و آن ۸px فاصله می‌گذارد؛
   نوار ابزار باید کاملاً به کادر متن بچسبد */
.leave-letter-field { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: 0; }
.leave-letter-field .leave-note {
    flex: 1 1 auto; min-height: 150px; resize: vertical; line-height: 1.9;
}

/* سرصفحه: «درخواست [لیست‌باکس] ۱۴ مرداد ۱۴۰۵» */
/* سرصفحه‌ی «درخواست [نوع] تاریخ» باید در یک ردیف بماند */
.leave-req-date {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px;
    font-size: 12.5px;
}
.leave-req-date-lead { white-space: nowrap; flex: 0 0 auto; }
/* متنِ تاریخ/راهنما وسطِ خودش نمی‌شکند؛ اگر جا نبود کلِ آن به خط بعد می‌رود
   (به‌جای بریده‌شدن) — روی پنل‌های باریک این تنها حالتِ دو خطی است */
.leave-req-date-day { white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.leave-type-inline {
    width: auto; min-width: 0; max-width: 100%; flex: 0 0 auto;
    padding: 5px 8px; font-size: 12.5px; font-weight: 700;
    border-radius: var(--radius-sm);
}

/* نوار ابزار متن: اندازه‌ی نوشته + فایل ضمیمه — وسط‌چین، مثل نامه‌ها */
/* نوار ابزارِ متنِ درخواست: راست‌چین، بالای کادر، با فاصله از آن.
   اندازه‌ها فقط همین‌جا کوچک می‌شوند تا نوار ابزارِ نامه‌ها دست‌نخورده بماند. */
.leave-letter-toolbar {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px; margin-bottom: 2px;
}
.leave-letter-toolbar .message-size-controls { margin-bottom: 0; gap: 4px; font-size: 11px; }
.leave-letter-toolbar .message-size-controls button {
    padding: 3px 8px; border-radius: 5px; font-size: 11px; line-height: 16px;
}
.leave-letter-toolbar .message-attachment-field { gap: 5px; font-size: 11px; }
.leave-letter-toolbar .message-attachment-trigger {
    padding: 3px 8px; border-radius: 5px; font-size: 11px; line-height: 16px; gap: 4px;
}
.leave-letter-toolbar .message-attachment-icon svg { width: 13px; height: 13px; }
.leave-letter-toolbar .message-attachment-preview img { width: 24px; height: 24px; }

/* راهنما داخلِ خودِ کادرِ متن، وسط‌چین — با شروعِ تایپ یا فوکوس محو می‌شود */
.leave-note-wrap { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }
.leave-note-wrap .leave-note { flex: 1 1 auto; }
.leave-note-hint {
    position: absolute; inset: 0; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px 14px; text-align: center; pointer-events: none;
    font-size: 12.5px; line-height: 1.9; color: var(--text-muted);
}
/* placeholder=" " فقط برای همین است: تا وقتی متنی نوشته نشده hint دیده شود */
.leave-note:not(:placeholder-shown) + .leave-note-hint,
.leave-note:focus + .leave-note-hint { opacity: 0; }

/* اندازه‌ی نوشته‌ی متنِ درخواست — همان مقیاسِ نامه‌ها */
.leave-letter-field.message-font-small  .leave-note { font-size: 13px; }
.leave-letter-field.message-font-medium .leave-note { font-size: 15px; }
.leave-letter-field.message-font-large  .leave-note { font-size: 18px; }

/* دکمه‌ی ساعت (جای select های قبلی) */
.leave-time-btn {
    min-width: 84px; padding: 7px 10px;
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text);
    font: inherit; font-size: 13px; font-weight: 700;
    direction: ltr; text-align: center; cursor: pointer;
}
.leave-time-btn:hover { border-color: var(--accent); }
.leave-time-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }

/* ---------- کادرِ انتخاب ساعت (داخلِ صفحه، نه پاپ‌آپ) ---------- */
/* دو فیلدِ «ساعت شروع/پایان» در یک ردیف بمانند: کادر کوچک‌تر و فاصله‌ی کمتر */
.leave-req-times { position: relative; justify-content: center; align-items: center; gap: 10px; }
/* برچسبِ «ساعت شروع/پایان» کنارِ کادر، نه بالای آن */
.leave-req-times > .leave-field {
    flex-direction: row; align-items: center; gap: 6px; text-align: center;
}
.leave-req-times > .leave-field .leave-label { white-space: nowrap; font-size: 13px; }

.timepick {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 50%;
    transform: translateX(50%);            /* RTL: نیمه‌ی راست ← وسط‌چین */
    z-index: 30; width: 268px; max-width: calc(100vw - 32px);
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: var(--radius); padding: 12px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}
.timepick[hidden] { display: none; }

.timepick-readout {
    position: relative; display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; min-height: 42px;
}
.timepick-units { display: flex; align-items: center; gap: 5px; direction: ltr; }
.timepick-unit {
    min-width: 50px; padding: 4px 6px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--panel-bg-soft); color: var(--text);
    font: inherit; font-size: 25px; font-weight: 800; line-height: 1.1;
    cursor: pointer;
}
.timepick-unit.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.timepick-colon { font-size: 23px; font-weight: 800; color: var(--text-muted); }

.timepick-dial {
    position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 240px;
    margin: 0 auto; border-radius: 50%;
    background: var(--panel-bg-soft); border: 1px solid var(--panel-border);
    /* کشیدنِ عقربه نباید صفحه را اسکرول کند و متن انتخاب شود */
    touch-action: none; user-select: none; -webkit-user-select: none;
}
/* هنگام کشیدن، عقربه بدونِ تأخیر دنبال انگشت/ماوس بیاید */
.timepick-num { pointer-events: auto; }
.timepick-center {
    position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
    margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent);
}
.timepick-hand {
    position: absolute; left: 50%; bottom: 50%; width: 2px;
    background: var(--accent); transform-origin: 50% 100%;
    margin-left: -1px; pointer-events: none;
}
.timepick-hand-knob {
    position: absolute; left: 50%; top: -15px; width: 30px; height: 30px;
    margin-left: -15px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.timepick-num {
    position: absolute; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 31px; height: 31px; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--text); font: inherit; cursor: pointer; direction: ltr;
}
/* عددها باید روی خط‌های دقیقه بیفتند تا کلیکشان دزدیده نشود */
.timepick-num.is-outer,
.timepick-num.is-inner { z-index: 2; }
.timepick-num.is-outer { font-size: 17px; font-weight: 800; }
.timepick-num.is-inner { width: 26px; height: 26px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* دقیقه‌های بینِ مضرب‌های ۵: خطِ کوچکِ شعاعی (رو به مرکز) */
.timepick-num.is-tick {
    width: 12px; height: 12px; z-index: 1;
    transform: translate(-50%, -50%) rotate(var(--a, 0deg));
}
.timepick-num.is-tick::before {
    content: ''; width: 2px; height: 7px; border-radius: 1px;
    background: var(--text-muted); opacity: .5;
}
.timepick-num:hover { background: var(--button-bg); }
.timepick-num.is-tick:hover { background: transparent; }
.timepick-num.is-tick:hover::before { opacity: 1; background: var(--accent); }
.timepick-num.is-on { background: var(--accent); color: var(--accent-text); }
.timepick-num.is-tick.is-on { background: transparent; }
.timepick-num.is-tick.is-on::before { background: var(--accent); opacity: 1; height: 10px; width: 3px; }

/* ---------- دکمه‌های تیک/ضربدر ---------- */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--panel-border); border-radius: 50%;
    background: var(--panel-bg-soft); cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.icon-btn svg { width: 17px; height: 17px; display: block; }
.icon-btn-lg { width: 40px; height: 40px; }
.icon-btn-lg svg { width: 21px; height: 21px; }
.icon-btn-ok { color: var(--success); }
.icon-btn-ok:hover { background: var(--success); border-color: var(--success); color: #fff; }
.icon-btn-cancel { color: var(--danger); }
.icon-btn-cancel:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ثبت/پاک‌کردن در سمتِ چپ (در RTL، flex-end یعنی چپ) */
.leave-req-actions { justify-content: flex-end; gap: 8px; }

/* آیتم‌های لیست‌باکسِ نوع درخواست وسط‌چین */
.leave-type-inline,
.leave-type-inline option { text-align: center; text-align-last: center; }

/* موبایل: همه‌چیز کوچک‌تر ولی کامل و خوانا */
@media (max-width: 480px) {
    .leave-type-inline { min-width: 118px; font-size: 12.5px; }
    .leave-letter-field .leave-note { min-height: 120px; }
    .timepick { width: 244px; padding: 10px; }
    .timepick-dial { max-width: 214px; }
    .timepick-unit { font-size: 22px; min-width: 44px; }
    .timepick-num { width: 28px; height: 28px; }
    .timepick-num.is-outer { font-size: 15px; }
    .timepick-num.is-inner { width: 23px; height: 23px; font-size: 11px; }
}

/* چند فایل ضمیمه: ردیفِ بندانگشتی‌ها کنار دکمه‌ی انتخاب فایل */
.leave-attach-previews { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.leave-attach-previews .message-attachment-preview { flex: 0 0 auto; }
/* لینک‌های ضمیمه در پنل روز — چند ضمیمه زیر هم/کنار هم بدون بریدگی */
.leave-side-attach-row { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; }

@media (max-width: 480px) {
    .leave-attach-previews { gap: 5px; }
    .leave-attach-previews .message-attachment-preview img { width: 26px; height: 26px; }
}

/* =====================================================================
   پنل روزِ انتخابی: پاپ‌آپ شناورِ ویرایش/حذف + ردیفِ یک‌خطیِ درخواست
   ===================================================================== */

/* پاپ‌آپ نسبت به همین پنل جای می‌گیرد */
.leave-side { position: relative; }

/* ردیفِ درخواست: نوع، ساعت و وضعیت در یک خط */
.leave-side-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.leave-side-item.is-actionable { cursor: pointer; }
.leave-side-item.is-actionable:hover { border-color: var(--accent); }

/* وضعیت در گوشه‌ی سمت چپِ ردیف */
.leave-side-main .leave-status { margin-inline-start: 0; }

/* پاپ‌آپ شناور — جایش با جاوااسکریپت به گوشه‌ی همان درخواست تنظیم می‌شود.
   روی درخواست‌های دیگر می‌افتد و این اشکالی ندارد. */
.leave-actions-pop {
    position: absolute; top: 0; left: 0; z-index: 40;
    display: flex; align-items: center; gap: 4px;
    padding: 5px 6px;
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm); box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.leave-actions-pop[hidden] { display: none; }


/* سال و ماه دو گروهِ جدا، هرکدام با دکمه‌های قبل/بعدِ خودش */
.leave-mm-form { display: flex; align-items: center; gap: 18px; margin: 0; flex-wrap: wrap; }
.leave-mm-group { display: inline-flex; align-items: center; gap: 6px; }
.leave-mm-form select {
    padding: 7px 10px; min-width: 96px;
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text); font: inherit; font-size: 13px;
    text-align: center; text-align-last: center;
}
.leave-mm-form select option { text-align: center; }
.leave-mm-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--panel-bg-soft); border: 1px solid var(--panel-border);
    color: var(--text); font-size: 18px; line-height: 1; text-decoration: none;
}
.leave-mm-nav:hover { background: var(--button-bg); border-color: var(--accent); text-decoration: none; }


/* موبایل: سرصفحه‌ی پاپ‌آپ زیر هم، ولی همه‌ی کنترل‌ها کامل می‌مانند */
@media (max-width: 600px) {
    
    
    
    .leave-mm-form select { min-width: 0; flex: 1 1 auto; font-size: 12.5px; padding: 7px 6px; }
    .leave-actions-pop { top: 6px; left: 6px; }
}

/* پیام‌های پنل مرخصی (ثبت/ویرایش/حذف) وسط‌چین */
#tabLeave > .alert { text-align: center; }

/* پاپ‌آپ تأیید حذف روی صفحه‌های باریک بیرون نزند */
.delete-confirm-modal-box { max-width: calc(100vw - 16px); box-sizing: border-box; }
@media (max-width: 400px) {
    .delete-confirm-modal-box { width: auto; }
    .delete-confirm-modal-box p { white-space: normal; }
}

/* علت رد در پنل روز: وسط‌چین و ریزتر (بقیه‌ی جاها دست‌نخورده می‌مانند) */
.leave-side-item .leave-reject-reason {
    text-align: center;
    font-size: 11.5px;
    line-height: 1.8;
    margin-top: 4px;
    overflow-wrap: anywhere;   /* علتِ بلند بریده نشود */
}

/* تا وقتی روزی از تقویم انتخاب نشده، بدنه‌ی فرم (اندازه‌ی نوشته، ضمیمه،
   کادر متن و دکمه‌های تیک/ضربدر) اصلاً نمایش داده نمی‌شود — فقط سرصفحه می‌ماند */
.leave-req:not(.is-active) .leave-req-fields { display: none; }

/* پاپ‌آپ ویرایش/حذف: بدون کادر پشتِ آیکون‌ها، و ارتفاع دقیقاً به اندازه‌ی خودِ آیکون */
.leave-actions-pop { padding: 4px 7px; gap: 10px; line-height: 0; }
.leave-actions-pop .leave-icon-btn {
    width: auto; height: auto; padding: 0;
    border-radius: 0; background: transparent;
}
.leave-actions-pop .leave-icon-btn:hover { background: transparent; }
.leave-actions-pop .leave-icon-btn img {
    width: 21px; height: 21px; display: block;
    transition: transform .14s ease;
}
/* بازخوردِ هاور بدون کادر */
.leave-actions-pop .leave-icon-btn:hover img { transform: scale(1.12); }
.leave-actions-pop .leave-icon-form { display: flex; line-height: 0; }

/* ردیف درخواست در پنل روز: برچسب نوع و وضعیت هم‌عرض، ساعت وسطِ فاصله‌ی بینشان.
   min-width (نه width) تا اگر بعداً برچسبِ بلندتری اضافه شد، بریده نشود. */
/* فضای اضافه‌ی ردیف را برچسب‌ها می‌گیرند، نه ساعت.
   قبلاً ساعت با flex:1 کش می‌آمد و متنش وسطِ آن فضا می‌نشست، برای همین دو طرفش
   فاصله‌ی خالی می‌افتاد که اندازه‌اش به عرض پنل وابسته بود. حالا ساعت به اندازه‌ی
   خودش است و فاصله‌ی دو طرفش دقیقاً همان gap ردیف (۲px) است — در هر عرض صفحه.
   flex: 1 1 0 روی هر دو برچسب یعنی فضای آزاد دقیقاً نصف‌نصف بینشان تقسیم می‌شود،
   پس هم‌عرض می‌مانند و وضعیت هم تا گوشه‌ی سمت چپ کشیده می‌شود. */
.leave-side-main .leave-type-badge,
.leave-side-main .leave-status {
    flex: 1 1 0; text-align: center;
}
.leave-side-main .leave-type-badge { min-width: 116px; }
.leave-side-main .leave-status { min-width: 120px; }


/* =====================================================================
   چیدمان مرخصی روی دسکتاپ.
   پنل کناری عرضِ ثابت دارد نه fr: با fr هرچه صفحه بزرگ‌تر می‌شد، فضای خالیِ
   دو طرفِ ساعت هم بزرگ‌تر می‌شد. عرضِ ثابت دقیقاً اندازه‌ی محتواست، پس این
   فاصله در هر اندازه‌ی صفحه کم و ثابت می‌ماند و باقیِ فضا به پنل وسط می‌رسد.
   اندازه‌ی فونت‌ها همان مقدار اصلی است.
   ===================================================================== */
@media (min-width: 901px) {
    .leave-layout {
        gap: 5px;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 475px;
    }
    .leave-side { padding: 5px; }
    .leave-side-main { gap: 6px; }
}

/* تا وقتی نوع درخواست انتخاب نشده (لیست‌باکس روی «نوع درخواست» است)،
   دکمه‌های تیک و ضربدر نمایش داده نمی‌شوند */
.leave-req:not(.has-type) .leave-req-actions { display: none; }

/* تا وقتی روزی از تقویم انتخاب نشده، فقط جمله‌ی راهنما دیده می‌شود:
   کلمه‌ی «درخواست» و لیست‌باکسِ نوع پنهان می‌مانند */
.leave-req:not(.is-active) .leave-req-date-lead,
.leave-req:not(.is-active) .leave-type-inline { display: none; }
/* جمله‌ی راهنما بلند است و باید کامل دیده شود، پس در این حالت اجازه‌ی شکستن دارد */
.leave-req:not(.is-active) .leave-req-date-day { white-space: normal; }

/* =====================================================================
   پنل درخواست‌های ماه (ستون سوم)
   ===================================================================== */


/* تاریخ و ساعت هم برچسب می‌شوند، مثل نوع و وضعیت */
.leave-date-badge,
.leave-time-badge {
    display: inline-block; text-align: center; white-space: nowrap;
    padding: 3px 6px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    background: var(--panel-bg-soft); border: 1px solid var(--panel-border);
}
.leave-date-badge { color: var(--text); }
.leave-time-badge { color: var(--text-muted); direction: rtl; }

/* برچسب‌های نوع و وضعیت هم جمع‌تر می‌شوند تا کل ردیف در یک خط جا شود */
.leave-side-main .leave-type-badge,
.leave-side-main .leave-status {
    font-size: 11px; padding: 3px 6px;
}

/* یک ردیف: تاریخ | نوع | ساعت | وضعیت — هیچ‌کدام کش نمی‌آیند */
.leave-side-main {
    flex-wrap: nowrap;
}
.leave-side-main .leave-date-badge { flex: 0 0 auto; min-width: 109px; }
.leave-side-main .leave-type-badge { flex: 0 0 auto; min-width: 99px;  }
.leave-side-main .leave-time-badge { flex: 0 0 auto; min-width: 88px;  }
.leave-side-main .leave-status { flex: 0 0 auto; min-width: 102px; }

/* اسکرول فقط روی فهرست درخواست‌ها، با گوشه‌های گرد */
.leave-side-body {
    max-height: 420px; overflow-y: auto; overflow-x: hidden;
    border-radius: 12px; padding: 6px;
    background: var(--bg);                       /* تم روشن: سفید */
    border: 1px solid var(--panel-border);
    scrollbar-width: thin;
}
:root[data-theme="dark"] .leave-side-body { background: var(--panel-border); }  /* تم تاریک: خاکستری */
.leave-side-body::-webkit-scrollbar { width: 8px; }
.leave-side-body::-webkit-scrollbar-thumb {
    background: var(--button-bg); border-radius: 999px;
}
.leave-side-body .leave-side-item:last-child { margin-bottom: 0; }

/* موبایل: ستون‌ها تک‌ستونی می‌شوند، پس عرض ثابت معنا ندارد.
   ردیف اجازه‌ی شکستن دارد تا هیچ برچسبی بریده یا پنهان نشود. */
@media (max-width: 900px) {
    .leave-side-main { flex-wrap: wrap; }
    .leave-side-main .leave-date-badge,
.leave-side-main .leave-type-badge,
.leave-side-main .leave-time-badge,
.leave-side-main .leave-status { min-width: 0; }
    .leave-side-body { max-height: 60vh; }
}

/* =====================================================================
   جابه‌جایی ستون‌ها + برداشتن کادرِ پنل‌ها + دکمه‌های جدید
   ===================================================================== */
@media (min-width: 901px) {
    /* راست: تقویم | وسط: فرم درخواست | چپ: فهرست خلاصه‌ی ماه */
    .leave-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 475px; }
    .leave-cal { order: 1; }
    .leave-req { order: 2; }
    .leave-side { order: 3; }
}

/* پنل فهرست و پنل درخواست کادر ندارند — مثل تقویم */
.leave-side,
.leave-req {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}


/* دکمه‌ی «ثبت درخواست جدید» — جای متنِ راهنما تا وقتی زده نشده */
.leave-start-btn {
    font: inherit; font-size: 13px; font-weight: 800;
    color: var(--accent-text); background: var(--accent);
    border: 1px solid var(--accent); border-radius: var(--radius-sm);
    padding: 7px 16px; cursor: pointer;
}
.leave-start-btn:hover { background: var(--accent-hover, var(--accent)); }
/* پیش از زدنِ دکمه: فقط خودِ دکمه دیده می‌شود */
.leave-layout:not(.is-armed) .leave-req-date-day { display: none; }
/* پس از زدنش: دکمه می‌رود و متن راهنما جایش می‌نشیند */
.leave-layout.is-armed .leave-start-btn { display: none; }

/* تا وقتی دکمه زده نشده، روزهای تقویم قابل انتخاب نیستند */
.leave-layout:not(.is-armed) .leave-cal-cell[data-d] {
    pointer-events: none; opacity: .55;
}

/* =====================================================================
   حالتِ اولیه (پیش از زدنِ «ثبت درخواست جدید»)
   تقویم اصلاً نمایش داده نمی‌شود؛ عرضش به فهرست می‌رسد و فرمِ درخواست
   به گوشه‌ی چپ — همان جایی که تقویم بعداً می‌آید — منتقل می‌شود.
   ===================================================================== */
.leave-layout:not(.is-armed) .leave-cal { display: none; }

@media (min-width: 901px) {
    /* دو ستون: راست = فهرست (عریض)، چپ = فرم درخواست */
    .leave-layout:not(.is-armed) { grid-template-columns: minmax(0, 1fr) 420px; }
    /* فضای اضافه بین برچسب‌ها پخش می‌شود تا ردیف مثل جدول یکدست بماند
       و فضای خالی یکجا ته ردیف جمع نشود */
    .leave-layout:not(.is-armed) .leave-side-main > * { flex: 1 1 auto; }
}

/* انتخابگر سال/ماهِ بالای فهرست درخواست‌ها */
/* نوار ثابتِ بالا: «نمایش کل…» و سال/ماه سمت راست، دکمه‌ی ثبت سمت چپ */
.leave-side-picker {
    justify-content: flex-start; gap: 10px;
    margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
}
.leave-side-picker .leave-start-btn { margin-inline-start: auto; }
.leave-side-picker select { min-width: 88px; }
/* دسکتاپ: همان سلکتِ نیتیو؛ دکمه/لیستِ سفارشی (فقط برای موبایل) پنهان است */
.leave-mm-custom-btn,
.leave-mm-custom-list { display: none; }
.leave-showall-btn {
    font: inherit; font-size: 13px; font-weight: 800;
    color: var(--text); background: transparent;
    border: 0; padding: 4px 2px; cursor: pointer;
    white-space: nowrap;
}
.leave-showall-btn:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 600px) {
    /* ردیفِ اول: «نمایش کل…» + ماه + سال، همه کنار هم، بدون فاصله‌ی اضافه.
       ردیفِ دوم: همیشه فقط دکمه‌ی «ثبت درخواست جدید»، وسط‌چین. */
    .leave-side-picker {
        gap: 4px; row-gap: 8px;
        justify-content: center; flex-wrap: wrap;
    }
    .leave-showall-btn { text-align: center; font-size: 11px; order: 1; flex: 0 0 auto; white-space: nowrap; padding: 4px 0; }
    .leave-mm-group { order: 2; gap: 1px; }
    .leave-side-picker .leave-start-btn {
        order: 3; flex: 1 1 100%;
        margin-inline-start: 0; max-width: 220px; margin-inline: auto;
    }

    /* سلکتِ نیتیو مخفی است — پاپ‌آپِ خودِ آن (رنگ/عرض/گوشه) دست‌ِ سیستم‌عامل
       است و با CSS صفحه کنترل نمی‌شود. به‌جایش دکمه + لیستِ کشویی، تماماً
       با استایلِ خودمان (پایین‌تر). select فقط برای submit فرم می‌ماند. */
    .leave-mm-custom select {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .leave-mm-custom { position: relative; display: inline-block; }
    .leave-mm-custom-btn {
        display: inline-block;
        font: inherit; font-size: 12.5px; font-weight: 700;
        color: var(--text); background: var(--input-bg);
        border: 1px solid var(--input-border); border-radius: 10px;
        padding: 6px 10px; cursor: pointer; white-space: nowrap;
    }
    .leave-mm-custom-list {
        display: block;
        position: absolute; top: 100%; right: 0;
        z-index: 20; margin: 0; padding: 4px; list-style: none;
        min-width: 100%; max-height: 220px; overflow-y: auto;
        background: var(--panel-bg); border: 1px solid var(--panel-border);
        border-radius: 10px; box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.18));
    }
    .leave-mm-custom-list[hidden] { display: none; }
    .leave-mm-custom-list li {
        padding: 7px 10px; font-size: 12.5px; text-align: center;
        white-space: nowrap; border-radius: 7px; cursor: pointer;
    }
    .leave-mm-custom-list li:hover,
.leave-mm-custom-list li.is-selected { background: var(--accent); color: var(--accent-text, #fff); }

    /* دکمه‌های ‹ › از حالتِ دکمه‌ایِ مربعی به آیکونِ ساده — بدون کادر/پس‌زمینه،
       و با فاصله‌ی کم از خودِ لیست‌باکس تا بصری نزدیک‌شان دید */
    .leave-side-picker .leave-mm-nav {
        width: 28px; height: 32px;
        border: 0; background: transparent;
        font-size: 16px; color: var(--text-muted);
    }
    .leave-side-picker .leave-mm-nav:hover { background: transparent; color: var(--accent); }
}

/* =====================================================================
   ردیفِ درخواست — دو حالت
   حالتِ عریض (تقویم پنهان): شش ستونِ هم‌عرض در یک ردیف
   حالتِ باریک (تقویم باز):  چهار برچسب در یک ردیف، علت و ضمیمه خط بعد
   ===================================================================== */

/* «علت» و «ضمیمه» هم مثل بقیه ستون‌اند */
.leave-reason-cell,
.leave-side-attach-row {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; min-width: 0;
    padding: 3px 6px; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-align: center;
    background: var(--panel-bg-soft); border: 1px solid var(--panel-border);
}
.leave-reason-cell {
    color: var(--danger);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leave-side-attach-row { color: var(--text-muted); flex-wrap: nowrap; }
.leave-side-attach { margin-top: 0; font-size: 12px; }

.leave-side-main { flex-wrap: wrap; }

@media (min-width: 901px) {
    /* عریض: هر شش ستون دقیقاً هم‌عرض */
    .leave-layout:not(.is-armed) .leave-side-main > * {
        flex: 1 1 0; min-width: 0;
    }
    /* باریک: همان چیدمانِ فعلی — چهار برچسب با عرضِ ثابت، دو ستونِ آخر خط بعد */
    .leave-layout.is-armed .leave-side-main > * { flex: 0 0 auto; }
    .leave-layout.is-armed .leave-reason-cell,
.leave-layout.is-armed .leave-side-attach-row {
        flex: 1 1 100%; margin-top: 5px;
    }
    /* در حالت باریک، سلولِ خالی خطِ اضافه نگیرد */
    .leave-layout.is-armed .leave-reason-cell.is-empty,
.leave-layout.is-armed .leave-side-attach-row.is-empty { display: none; }
}

/* موبایل: هر ستون خودش را جا کند، هیچ‌کدام پنهان نشود */
@media (max-width: 900px) {
    .leave-reason-cell { white-space: normal; }
}

/* =====================================================================
   حالتِ ورود: فقط جدولِ درخواست‌ها، تمام‌عرض و با ظاهرِ جدول (نه برچسبی)
   ===================================================================== */
.leave-table-head { display: none; }

/* =====================================================================
   موبایل: سرستون‌های جدول ثابت (sticky) بالای فهرست، و هر ردیف در دو
   نیم‌ردیفِ سه‌تایی — (تاریخ، نوع، ساعت) و (وضعیت، علت، ضمیمه) — تا
   نوشته‌ها به هم نچسبند و در صورتِ کمبود جا، خوانا بمانند.
   ===================================================================== */
@media (max-width: 900px) {
    /* بدونِ پدینگِ بالا، تا سرستونِ چسبان درست روی لبه‌ی بالای پنل بنشیند
       (نه چند پیکسل پایین‌تر با فاصله‌ی خالی که از پشتش ردیف‌ها دیده شوند) */
    .leave-side-body { padding-top: 0; }
    .leave-table-head {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px 6px;
        position: sticky; top: 0; z-index: 2;
        background: var(--panel-bg);
        padding: 1px 8px 6px;
        border-bottom: 1px solid var(--panel-border);
        font-size: 10.5px; font-weight: 800; color: var(--text-muted);
    }
    .leave-table-head > * { min-width: 0; text-align: center; }

    .leave-side-body .leave-side-main {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
        gap: 4px 6px;
        flex-wrap: unset;
    }
    /* ترتیبِ DOM: تاریخ، نوع، ساعت، وضعیت، علت، ضمیمه — همان ترتیب که
       سرستون‌ها دارند، پس با گریدِ ۳ستونه‌ی دوردیفه خودکار جفت می‌شوند */
    .leave-side-body .leave-side-main > * {
        min-width: 0; margin: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        text-align: center; font-size: 11.5px;
    }
    /* «از HH:MM تا HH:MM» بلندترین متنِ ستون‌هاست؛ فونتِ کمی ریزتر تا کامل جا شود */
    .leave-side-body .leave-side-main .leave-time-badge { font-size: 10.5px; }
}

@media (min-width: 901px) {
    /* تک‌ستون: کلِ عرض برای جدول */
    .leave-layout:not(.is-armed) { grid-template-columns: minmax(0, 1fr); }
    .leave-layout:not(.is-armed) .leave-req { display: none; }

    /* سرستون‌ها */
    .leave-layout:not(.is-armed) .leave-table-head {
        display: flex; gap: 6px;
        padding: 6px 10px 8px;
        border-bottom: 1px solid var(--panel-border);
        font-size: 11.5px; font-weight: 800; color: var(--text-muted);
    }
    .leave-layout:not(.is-armed) .leave-table-head > * {
        flex: 1 1 0; min-width: 0; text-align: center;
    }

    /* ردیف‌ها: کارت نباشند — خطِ جداکننده + نوارِ رنگیِ نوع */
    .leave-layout:not(.is-armed) .leave-side-item {
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--panel-border);
        border-inline-start: 0;                       /* بدون نوارِ رنگی در حالت جدول */
        border-radius: 0;
        margin-bottom: 0;
        padding: 8px 10px;
    }
    /* سلول‌ها از حالت برچسبی به متنِ ساده‌ی جدول تبدیل می‌شوند */
    .leave-layout:not(.is-armed) .leave-side-main > * {
        background: transparent; border: 0; border-radius: 0;
        padding: 0; font-size: 12px;
    }
    .leave-layout:not(.is-armed) .leave-side-main { gap: 6px; }
}

/* =====================================================================
   جلوگیری از اسکرول افقیِ مرورگر در چیدمان مرخصی.
   هرجا محتوا از ستونش پهن‌تر شود، باید داخل کادرِ خودش جمع یا اسکرول شود،
   نه اینکه کلِ صفحه را پهن کند.
   ===================================================================== */
.tabset-panel,
.leave-layout { min-width: 0; }
.leave-layout > * { min-width: 0; }
.leave-side-item,
.leave-day-block,
.leave-side-main { min-width: 0; }

/* جدول اگر از عرضِ کادر پهن‌تر شد، داخلِ همان کادرِ گردِ خودش اسکرول شود
   (به‌جای overflow-x: hidden که داده را می‌بُرید) */
.leave-side-body { overflow-x: auto; }

/* دسکتاپ‌های باریک: ستونِ ثابتِ ۴۷۵px جا نمی‌شود → کوچک‌تر شود */
@media (min-width: 901px) and (max-width: 1200px) {
    .leave-layout.is-armed { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 400px); }
    .leave-side-main .leave-date-badge,
.leave-side-main .leave-type-badge,
.leave-side-main .leave-time-badge,
.leave-side-main .leave-status { min-width: 0; }
}

/* نوار بالا و ردیف ساعت‌ها هم هرگز سرریز نکنند */
.leave-side-picker,
.leave-req-times,
.leave-letter-toolbar { max-width: 100%; }
.leave-side-picker select { max-width: 100%; }

/* در حالت جدول، متنِ سلول‌ها اجازه‌ی شکستن دارد تا ستون‌ها در عرض‌های کم
   جمع شوند و اسکرول افقی لازم نشود (داده کامل می‌ماند، فقط دو خطی می‌شود) */
@media (min-width: 901px) {
    .leave-layout:not(.is-armed) .leave-side-main > *,
.leave-layout:not(.is-armed) .leave-table-head > * {
        white-space: normal;
        overflow: visible; text-overflow: clip;
        line-height: 1.6;
    }
}

/* حالت ویرایش از داخل جدول: فهرست باریک‌تر، پنل ویرایش سمت چپ */
.leave-layout.is-editing .leave-req { display: flex; }

/* ارتفاعِ دقیقِ لیست را جاوااسکریپت از موقعیتِ واقعیِ خودش تا پایینِ پنجره حساب
   می‌کند (تابع fitLeaveList). این مقدارها فقط پیش‌فرضِ اولیه و حالتِ بدونِ JS‌اند. */
.leave-side-body {
    max-height: calc(100vh - 448px);
    min-height: 160px;
}

/* لیست‌باکس‌های سال/ماه هم‌ارتفاعِ دکمه‌های قبل/بعد (۳۰px) */
.leave-side-picker select {
    height: 30px; box-sizing: border-box;
    padding: 0 8px; line-height: 1;
}
/* ۵px فاصله از کادرِ بالا و از خطِ زیرِ نوار */
.leave-side-picker {
    padding-top: 5px; padding-bottom: 5px;
    margin-bottom: 5px;
}

/* فاصله‌ی بالای نوار سال/ماه تا لبه‌ی پنل دقیقاً ۵px شود.
   ۱۶px از پدینگِ خودِ .tabset-panels می‌آمد و ۵px از خودِ نوار؛ حالا فقط
   پدینگِ ظرف می‌ماند و نوار پدینگِ بالایی ندارد. با :has فقط وقتی اعمال
   می‌شود که تبِ مرخصی باز باشد، تا بقیه‌ی تب‌ها دست‌نخورده بمانند. */
.tabset.has-open .tabset-panels:has(#tabLeave:not([hidden])) { padding-top: 5px; }
.leave-side-picker { padding-top: 0; }

/* در حالت ویرایش، نوع درخواست قفل است */
.leave-type-inline:disabled {
    opacity: .75; cursor: not-allowed;
    background: var(--panel-bg-soft);
}

/* =====================================================================
   نسخه‌ی نهاییِ چیدمانِ تبِ مرخصی — این بلوک بر بلوک‌های بالاتر مقدم است.

   حالت‌ها:
     ۱) ورود                → فقط جدول، تمام‌عرض
     ۲) «ثبت درخواست جدید»  → تقویم (راست) + خلاصه (چپ)
     ۳) پس از انتخاب روز    → تقویم + فرم + خلاصه
     ۴) ویرایش              → فرمِ ویرایش جای تقویم + خلاصه (هم‌عرضِ حالت ۲)
   ===================================================================== */
@media (min-width: 901px) {
    /* --- حالت ۱ --- */
    .leave-layout:not(.is-armed):not(.is-editing) { grid-template-columns: minmax(0, 1fr); }
    .leave-layout:not(.is-armed):not(.is-editing) .leave-req { display: none; }

    /* --- حالت ۲: فرم هنوز نیامده، پس متنِ «یک روز را انتخاب کنید» هم دیده نمی‌شود --- */
    .leave-layout.is-armed { grid-template-columns: 460px minmax(0, 1fr); }
    .leave-layout.is-armed .leave-req { display: none; }

    /* --- حالت ۳ --- */
    /* ستونِ سوم = leave-side (خلاصه)، ستونِ دومِ 1fr = leave-req (فرم).
       خلاصه با عرضِ واقعیِ محتوا (نه ۵ سهمِ مساوی) جمع‌تر شد، بقیه به فرم رفت. */
    .leave-layout.is-armed.has-form { grid-template-columns: 460px minmax(0, 1fr) 455px; }
    .leave-layout.is-armed.has-form .leave-req { display: flex; }

    /* در همین حالت، جدولِ خلاصه فقط پنج ستون دارد؛ «علت» جا نمی‌شود و از فرم هم دیده می‌شود.
       ستون‌ها به‌جای سهمِ مساوی، هم‌عرضِ محتوای واقعی‌شان‌اند تا فاصله‌ی خالی بینشان کم شود. */
    .leave-layout.is-armed.has-form .leave-table-head,
.leave-layout.is-armed.has-form .leave-side-body .leave-side-main {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.97fr) minmax(0, 0.97fr) minmax(0, 1.02fr) minmax(0, 74px);
        gap: 4px;
    }
    .leave-layout.is-armed.has-form .leave-table-head > *:nth-child(5),
.leave-layout.is-armed.has-form .leave-side-body .leave-reason-cell { display: none; }
    .leave-layout.is-armed.has-form .leave-side-body .leave-side-item { padding-inline: 6px; }
    /* چند ضمیمه در ستونِ باریک: فاصله‌ی بین آیکون‌ها کمتر تا جا شوند */
    .leave-layout.is-armed.has-form .leave-side-body .leave-side-attach-row { gap: 2px 4px; }

    /* --- حالت ۴: فرم جای تقویم می‌نشیند، خلاصه همان ۵۲۰px --- */
    /* ویرایش: پنلِ فرم هم‌عرضِ تقویم (۴۶۰px)، بقیه‌ی فضا به خلاصه‌ی ماهانه */
    .leave-layout.is-editing { grid-template-columns: 460px minmax(0, 1fr); }
    .leave-layout.is-editing .leave-cal { display: none; }
    .leave-layout.is-editing .leave-req { display: flex; }

    /* ---------- خلاصه همیشه جدولی است (نه برچسبی) ---------- */
    /* سرستون و ردیف‌ها هر دو گرید با یک الگوی ستون → هم‌ترازیِ تضمینی.
       هر ۶ ستون (تاریخ، نوع، ساعت، وضعیت، علت، ضمیمه) دقیقاً هم‌عرض‌اند. */
    .leave-table-head,
.leave-layout:not(.is-armed) .leave-table-head,
.leave-side-body .leave-side-main {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px; align-items: center;
    }
    .leave-table-head {
        padding: 6px 10px 8px;
        border-bottom: 1px solid var(--panel-border);
        font-size: 11.5px; font-weight: 800; color: var(--text-muted);
    }
    .leave-table-head > *,
.leave-layout:not(.is-armed) .leave-table-head > * { min-width: 0; text-align: center; flex: none; }

    .leave-side-body .leave-side-item {
        background: transparent;
        border: 0; border-bottom: 1px solid var(--panel-border);
        border-inline-start: 0; border-radius: 0;
        margin-bottom: 0; padding: 8px 10px;
    }
    /* بدون فاصله‌ی خالیِ اضافه: هر ستون دقیقاً یک‌ششمِ عرض، همه در یک ردیف */
    .leave-side-body .leave-side-main > * {
        min-width: 0; margin: 0;
        background: transparent; border: 0; border-radius: 0; padding: 0;
        font-size: 12px; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .leave-side-body .leave-side-attach-row { flex-wrap: nowrap; justify-content: center; }
    /* هیچ ردیفی دوخطی نشود */
    .leave-side-body .leave-reason-cell,
.leave-side-body .leave-side-attach-row { margin-top: 0; }
    .leave-side-body .leave-reason-cell.is-empty,
.leave-side-body .leave-side-attach-row.is-empty { display: block; }
}

/* ردیفِ انتخاب‌شده: فقط کادرِ آبی — رنگِ نوشته‌ها دست‌نخورده می‌ماند */
.leave-side-item.is-selected {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: 6px;
}

/* دسکتاپ‌های باریک‌تر: تقویم جمع‌تر می‌شود، ولی عرضِ خلاصه دست‌نخورده می‌ماند —
   جدول ۵۲۵px لازم دارد و کمتر از آن داخلش اسکرول افقی می‌افتد و ستون‌ها بریده می‌شوند. */
@media (min-width: 901px) and (max-width: 1359px) {
    .leave-layout.is-armed { grid-template-columns: 400px minmax(0, 1fr); }
    .leave-layout.is-armed.has-form { grid-template-columns: 400px minmax(0, 1fr) 455px; }
    /* در این بازه تقویم ۴۰۰px است، پس پنلِ ویرایش هم ۴۰۰px */
    .leave-layout.is-editing { grid-template-columns: 400px minmax(0, 1fr); }
}

/* راهنمای رنگ‌های تقویم: فونت کوچک‌تر تا هر پنج مورد در یک ردیف جا شوند */
.leave-cal-legend { font-size: 10.5px; gap: 8px; }
.leave-cal-legend span { gap: 4px; }
.leave-dot { width: 10px; height: 5px; }

/* در حالت ویرایش، تیک و ضربدر وسط‌چین‌اند (نه گوشه‌ی چپ) */
.leave-layout.is-editing .leave-req-actions { justify-content: center; }


/* فلش‌های قبلی/بعدی: آیکونِ SVG (نه نویسه‌ی ‹ › که در متنِ راست‌چین گاهی برعکس رسم می‌شد).
   راست‌چین: «قبلی» سمتِ راست و رو به راست، «بعدی» رو به چپ — در همه‌ی صفحه‌ها یکسان */
.nav-chev { display: block; width: 16px; height: 16px; flex: 0 0 auto; }
.leave-cal-nav .nav-chev { width: 18px; height: 18px; }
@media (max-width: 900px) {
    .leave-mm-nav, .leave-cal-nav { min-width: 36px; min-height: 36px; }
}

/* ماه/روزِ بدونِ درخواست: سرستون‌ها روی پیامِ خالی جمع نشوند */
.leave-side-body:has(> .leave-side-empty:not([hidden])) .leave-table-head { display: none; }
.leave-side-empty { text-align: center; padding: 18px 10px; color: var(--text-muted); }
/* =====================================================================
   نوار فیلتر «تایید شده‌ها»
   خطوط 4659 تا 4770 از style.css اصلی.
   ===================================================================== */
/* =====================================================================
   نوارِ فیلترِ «تایید شده‌ها» — ماه/سال با همان اصولِ تقویمِ مرخصی، به‌علاوه‌ی
   چک‌باکسِ بازه‌ی دلخواه که جای ماه/سال دو کادرِ تاریخ می‌گذارد.
   ===================================================================== */
.loan-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}
.loan-ym-wrap {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}
.loan-ym-wrap[hidden] { display: none; }

/* سلکتِ ماه/سال — هم‌اندازه و هم‌ظاهرِ تقویمِ مرخصی */
.loan-filter-bar select {
    padding: 7px 10px; min-width: 96px;
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text); font: inherit; font-size: 13px;
    text-align: center; text-align-last: center;
}
.loan-filter-bar select option { text-align: center; }

/* چک‌باکسِ بازه — بلافاصله بعد از فلشِ چپِ سال */
.loan-filter-bar .date-range-toggle {
    display: inline-flex; align-items: center;
    cursor: pointer; margin: 0;
}
.loan-filter-bar .date-range-checkbox {
    width: 16px; height: 16px;
    accent-color: var(--accent, #2563eb);
    cursor: pointer; margin: 0;
}

/* دو کادرِ تاریخ — دقیقاً هم‌اندازه‌ی کادرِ ماه/سال، لیبل داخلِ خودِ کادر */
.date-range-inputs { display: inline-flex; align-items: center; gap: 10px; }
.date-range-inputs[hidden] { display: none; }
.date-range-inputs input[data-jdp] {
    padding: 7px 10px; min-width: 96px; width: 112px;
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text); font: inherit; font-size: 13px;
    text-align: center;
}
.date-range-inputs input[data-jdp]::placeholder { color: var(--text-muted); opacity: 1; }

.date-range-error {
    font-size: 12px; font-weight: 700;
    color: var(--danger, #dc2626);
}
.date-range-error[hidden] { display: none; }

/* آیکونِ خروجی اکسل، کنارِ تب‌ها (سمت راستِ «در دست بررسی» در RTL) */
/* آیکون همان آیکونِ «فایل نمونه» است، ولی نباید ارتفاعِ ردیفِ تب‌ها را بلند کند
   (کلاسِ پایه height:46px و opacity:.5 دارد) — اینجا هم‌قدِ خودِ تب‌ها و تمام‌رنگ. */
.doc-review-filters .loan-export-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; height: auto;
    padding: 0; margin-inline-end: 4px;
    opacity: 1;
}
.doc-review-filters .loan-export-icon img { width: 24px; height: 24px; display: block; opacity: 1; }

/* ستون‌های قسط: چک‌باکس + نام ماه */
.loan-installment-cell { text-align: center; white-space: nowrap; }
.loan-installment-check {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.loan-installment-check input {
    width: 16px; height: 16px;
    accent-color: var(--accent, #2563eb);
    cursor: pointer; flex: 0 0 auto;
}
.loan-installment-check span { font-size: .86rem; }
.loan-installments-table th,
.loan-installments-table td { vertical-align: middle; }

@media (max-width: 900px) {
    /* نوارِ فیلتر جمع‌وجورتر می‌شود ولی هیچ کنترلی حذف نمی‌شود */
    .loan-filter-bar { gap: 6px; row-gap: 8px; }
    .loan-ym-wrap { gap: 6px; }
    .loan-filter-bar select { min-width: 78px; padding: 6px 6px; font-size: 12px; }
    .date-range-inputs { gap: 6px; }
    .date-range-inputs input[data-jdp] { min-width: 0; width: 92px; padding: 6px 4px; font-size: 12px; }
    .date-range-error { flex: 1 1 100%; text-align: center; }
    .doc-review-filters .loan-export-icon img { width: 22px; height: 22px; }

    /* روی موبایل هیچ ستونی حذف نمی‌شود؛ فقط فشرده‌تر و با اسکرول افقیِ خودِ جدول */
    .loan-installment-check { flex-direction: column; gap: 2px; }
    .loan-installment-check span { font-size: .75rem; }
    .loan-installments-table th,
    .loan-installments-table td { padding-inline: 6px; font-size: .8rem; }
}

/* صفحه‌ی «طراحی وام‌ها و مساعده‌ها» */
/* طراحی وام‌ها: فرمِ تعریف نوع در یک ردیف (دسته | عنوان | قسطِ باریک | تیک) */
.loan-type-form { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.loan-type-form .field { margin: 0; min-width: 0; }
.loan-type-form .field label { display: block; margin-bottom: 4px; font-size: 12px; }
.loan-type-kind-field { flex: 0 0 140px; }
.loan-type-title-field { flex: 1 1 auto; }
.loan-type-title-field input { width: 100%; box-sizing: border-box; height: 40px; }
.loan-type-months-field { flex: 0 0 90px; }   /* یک‌سومِ عرضِ قبلی */
.loan-type-months-field .lbl-short { display: none; }   /* برچسبِ کوتاه فقط در موبایل (ماژول ۱۸) */
.loan-type-form .pretty-select-trigger { min-height: 40px; padding: 6px 8px; font-size: 13px; }
.loan-type-form-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; height: 40px; }
.loan-type-form-actions .fd-btn { width: 40px; height: 40px; }
.loan-type-form-actions .fd-btn img { width: 34px; height: 34px; }
/* عملیاتِ آیکونی (همان آیکون‌های بخش کاربران) */
.loan-type-actions { display: flex; justify-content: center; align-items: center; gap: 2px; flex-wrap: nowrap; }
.loan-type-actions form { display: inline-flex; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.loan-type-actions .fd-btn { width: 34px; height: 34px; }
.loan-type-actions .fd-btn img { width: 30px; height: 30px; }
#loanTypeTable td { text-align: center; vertical-align: middle; }
.loan-type-company { text-align: right; white-space: nowrap; }
.loan-type-check { width: 17px; height: 17px; accent-color: var(--accent, #2563eb); cursor: pointer; }
.loan-type-check:disabled { cursor: not-allowed; opacity: .4; }
.loan-type-save { margin-top: 12px; }

@media (max-width: 900px) {
    /* روی موبایل هیچ ستون/شرکتی حذف نمی‌شود؛ جدول با اسکرول افقیِ خودش دیده می‌شود */
    .loan-type-actions { gap: 4px; }
    .loan-type-matrix th, .loan-type-matrix td { padding-inline: 6px; font-size: .78rem; }
    .loan-type-check { width: 16px; height: 16px; }
}
/* =====================================================================
   پاپ‌آپ ورود گروهی از اکسل
   خطوط 4771 تا 4903 از style.css اصلی.
   ===================================================================== */
/* =====================================================================
   پاپ‌آپِ «ورود گروهی از فایل اکسل» — دو مرحله‌ای (پیش‌نمایش + نگاشتِ ستون‌ها)
   ===================================================================== */
.iw-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 16px; }
.iw-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.iw-box {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    width: min(1100px, 100%); max-height: 92vh;
    background: var(--panel-bg); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden;
}
.iw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--panel-border); }
.iw-head h3 { margin: 0; font-size: 1rem; }
.iw-close { border: 0; background: transparent; color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; }
.iw-close:hover { color: var(--accent); }
.iw-body { padding: 16px 18px; overflow: auto; flex: 1 1 auto; }
.iw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--panel-border); background: var(--panel-bg-soft); }
.iw-foot-actions { display: flex; gap: 8px; }
.iw-msg { font-size: 12.5px; font-weight: 700; }
.iw-msg.is-error { color: var(--danger, #dc2626); }
.iw-hint { margin: 0 0 12px; font-size: 13px; font-weight: 700; }

/* نوارِ مراحل زیرِ عنوان: شماره‌ی توپر برای مرحله‌ی جاری، تیکِ رنگی برای مراحلِ گذشته */
.iw-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 10px 18px; list-style: none; border-bottom: 1px solid var(--panel-border); background: var(--panel-bg-soft); }
.iw-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.iw-step + .iw-step::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 10px; background: var(--panel-border); }
.iw-step-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--panel-border); border-radius: 50%; background: var(--panel-bg); font-size: 12px; font-weight: 800; }
.iw-step.is-active { color: var(--text); font-weight: 800; }
.iw-step.is-active .iw-step-n { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
.iw-step.is-done .iw-step-n { background: color-mix(in srgb, var(--success, #16a34a) 15%, var(--panel-bg)); border-color: var(--success, #16a34a); color: var(--success, #16a34a); }

/* --- مرحله ۱ --- */
.iw-intro { margin: 0 0 12px; padding: 8px 12px; border-inline-start: 3px solid var(--accent); border-radius: 6px; background: var(--panel-bg-soft); color: var(--text-muted); font-size: 12.5px; line-height: 1.8; }
/* ردیفِ شرکت/سال/ماه داخلِ خودِ پاپ‌آپ (لیست‌های pretty-select) */
.iw-ctx-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.iw-ctx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 140px; }
.iw-ctx-field label { font-size: 12px; font-weight: 700; }
.iw-ctx-field select {
    padding: 7px 10px; min-width: 140px;
    border: 1px solid var(--input-border); border-radius: 8px;
    background: var(--input-bg); color: var(--text); font: inherit; font-size: 12.5px;
}
.iw-ctx-field .pretty-select-trigger { min-height: 36px; padding: 6px 10px; font-size: 12.5px; }
/* کادرِ انتخاب/انداختنِ فایل — کلِ کادر قابلِ کلیک است */
.iw-dropzone {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 10px; padding: 16px 18px;
    border: 2px dashed var(--panel-border); border-radius: 12px;
    background: var(--panel-bg-soft); cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.iw-dropzone:hover, .iw-dropzone:focus-visible { border-color: var(--accent); outline: none; }
.iw-dropzone.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel-bg)); }
.iw-dropzone.has-file { border-style: solid; border-color: var(--success, #16a34a); }
.iw-dz-icon { width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; box-sizing: border-box; }
.iw-dz-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.iw-dz-text b { font-size: 13px; }
.iw-dz-text small { font-size: 11.5px; color: var(--text-muted); }
.iw-dropzone.has-file .iw-dz-text { display: none; }
.iw-file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 12.5px; }
.iw-file-meta[hidden] { display: none; }
.iw-file-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.iw-file-meta small { color: var(--text-muted); }
.iw-file-change { color: var(--accent); font-size: 12px; }
.iw-file-error { font-size: 12px; margin-inline-start: auto; }
.iw-file-error.is-error { color: var(--danger, #dc2626); font-weight: 700; }
.iw-options-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.iw-checkline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.iw-checkline input { width: 16px; height: 16px; accent-color: var(--accent, #2563eb); cursor: pointer; }
.iw-sample { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent); text-decoration: none; }
.iw-sample img { width: 28px; height: 28px; object-fit: contain; background: #fff; border-radius: 7px; padding: 2px; box-sizing: border-box; }
.iw-sample:hover span { text-decoration: underline; }
/* بخشِ جمع‌شونده‌ی «فایل‌های ثبت‌شده‌ی قبلی» زیرِ مرحله‌ی ۱ */
.iw-extra { margin-top: 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg-soft); }
.iw-extra > summary { padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.iw-extra > summary::-webkit-details-marker { display: none; }
.iw-extra > summary::before { content: "▸"; display: inline-block; margin-inline-end: 6px; color: var(--text-muted); transition: transform .15s ease; }
.iw-extra[open] > summary::before { transform: rotate(90deg); }
.iw-extra-body { padding: 4px 12px 12px; }
.iw-found { font-size: 13px; font-weight: 800; color: var(--accent); margin: 10px 0; }
.iw-table-wrap { overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 10px; }
.iw-table { width: 100%; border-collapse: collapse; }
.iw-table th, .iw-table td { padding: 9px 10px; border-bottom: 1px solid var(--panel-border); font-size: 12px; text-align: center; white-space: nowrap; }
.iw-table th { background: var(--panel-bg-soft); font-weight: 800; }
.iw-table tbody tr:last-child td { border-bottom: 0; }

/* --- مرحله ۲ --- */
.iw-map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.iw-map-side h4 { margin: 0 0 8px; font-size: 13px; }
.iw-search { width: 100%; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12.5px; }
.iw-fields, .iw-cols {
    display: flex; flex-direction: column;
    gap: 5px;                       /* فاصله‌ی هر کادر با بعدی، بیشتر از ۵px نه */
    max-height: 46vh; overflow-y: auto;
    padding-inline-end: 6px;        /* جا برای نوارِ اسکرول تا روی کادرها نیفتد */
}

.iw-field-row {
    display: grid; grid-template-columns: 40% 1fr;
    align-items: stretch;
    flex: 0 0 auto;                 /* در ستونِ فلکسی فشرده نشود و متنش نبُرد */
    border: 1px solid var(--panel-border); border-radius: 10px;
    background: var(--panel-bg-soft);
    overflow: visible;              /* overflow:hidden متنِ کادرها را می‌بُرید */
}
.iw-field-name {
    display: flex; align-items: center; justify-content: flex-start; gap: 3px;
    min-width: 0;                   /* تا متنِ بلند بتواند کوتاه شود، نه اینکه سرریز کند */
    padding: 8px 10px; font-size: 12.5px; font-weight: 700; line-height: 1.5;
}
.iw-field-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ستاره‌ی قرمز به‌جای نشانِ «اجباری» — جای کمتری می‌گیرد و لیبل بریده نمی‌شود */
.iw-req { color: var(--danger, #dc2626); font-size: 15px; font-weight: 800; line-height: 1; flex: 0 0 auto; }
.iw-drop {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-width: 0; min-height: 38px; padding: 6px 10px;
    background: var(--panel-bg);
    border-inline-start: 1px dashed var(--panel-border);
    border-radius: 0 9px 9px 0;     /* هم‌قوسِ گوشه‌های خودِ ردیف */
    cursor: pointer;
}
.iw-drop.is-over { background: var(--button-bg); outline: 2px dashed var(--accent); outline-offset: -3px; }
.iw-drop.is-filled { background: var(--panel-bg); }
.iw-drop-hint { font-size: 11.5px; color: var(--text-muted); }
.iw-drop-col { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 700; overflow: hidden; }
.iw-drop-col small { font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-drop-clear { border: 0; background: transparent; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; flex: 0 0 auto; }
.iw-drop-clear:hover { color: var(--danger, #dc2626); }

.iw-col-chip { flex: 0 0 auto; min-width: 0; border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 12px; background: var(--panel-bg); cursor: grab; }
.iw-col-chip:hover { border-color: var(--accent); }
.iw-col-chip.is-dragging { opacity: .45; }
.iw-col-chip.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.iw-col-chip[hidden] { display: none; }
/* تصویرِ شناورِ چیپ هنگام کشیدن با انگشت (wireTouchDrag در import-wizard.js).
   position: fixed است و مرکزش زیرِ انگشت می‌ماند؛ نباید خودش رویدادِ
   اشاره‌گر بگیرد وگرنه elementFromPoint همیشه خودش را برمی‌گرداند. */
.iw-drag-ghost {
    position: fixed;
    z-index: 1000;
    margin: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: .9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.iw-col-name { font-size: 12.5px; font-weight: 700; }
.iw-col-sample { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
    /* عرضِ پاپ‌آپ سه بخش می‌شود:
         دو سومِ راست  → «فیلدهای سایت» (خودش = نامِ فیلد + محلِ انداختن)
         یک سومِ چپ    → «ستون‌های فایل اکسل»
       فقط اندازه‌ها کوچک‌تر می‌شوند تا در عرضِ کم جا شوند. */
    /* موبایل: پاپ‌آپ تمام‌صفحه؛ بدنه اسکرول می‌خورد و دکمه‌های پایین همیشه در دسترس‌اند */
    .iw-modal { padding: 0; }
    .iw-box { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
    .iw-head { padding: 10px 12px; }
    .iw-head h3 { font-size: 13.5px; }
    .iw-steps { padding: 8px 10px; }
    .iw-step { font-size: 11px; }
    .iw-step + .iw-step::before { width: 18px; margin: 0 6px; }
    .iw-step-n { width: 20px; height: 20px; font-size: 11px; }
    .iw-body { padding: 12px; }
    .iw-intro { font-size: 11.5px; padding: 6px 10px; }
    /* شرکت تمام‌عرض، سال و ماه کنارِ هم */
    .iw-ctx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .iw-ctx-field[data-ctx-name="company_id"] { grid-column: 1 / -1; }
    .iw-ctx-field label { font-size: 11px; }
    .iw-ctx-field .pretty-select-trigger { min-height: 34px; padding: 5px 8px; font-size: 12px; }
    .iw-dropzone { padding: 12px; gap: 10px; }
    .iw-dz-icon { width: 36px; height: 36px; }
    .iw-dz-text b { font-size: 12px; }
    .iw-dz-text small { font-size: 10.5px; }
    .iw-file-error { flex: 0 0 100%; margin-inline-start: 0; }
    .iw-options-row { gap: 6px 10px; }
    .iw-checkline, .iw-sample { font-size: 11.5px; }
    .iw-foot { padding: 10px 12px; }
    .iw-msg { flex: 0 0 100%; text-align: center; }
    .iw-foot-actions { width: 100%; }
    .iw-foot-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 6px; font-size: 12.5px; }
    .iw-foot-actions .btn[hidden] { display: none; }
    .iw-map-grid { grid-template-columns: 2fr 1fr; gap: 8px; }
    .iw-map-side { min-width: 0; }   /* وگرنه محتوا ستون را پهن‌تر از سهمش می‌کند */
    .iw-map-side h4 { font-size: 11px; margin: 0 0 5px; }
    .iw-fields, .iw-cols { max-height: 52vh; gap: 5px; padding-inline-end: 3px; }

    /* نامِ فیلد و محلِ انداختن در یک ردیف، کنارِ هم — نه زیرِ هم.
       (قاعده‌ی پایه‌ی 40%/1fr همین است، پس اینجا چیزی را بازنویسی نمی‌کنیم
        و مرزِ خط‌چینِ کناری هم سرِ جای خودش می‌ماند.) */
    .iw-fields .iw-field-name { padding: 4px 6px; font-size: 10.5px; gap: 4px; }
    .iw-fields .iw-drop { min-height: 26px; padding: 3px 6px; }
    .iw-drop-hint { font-size: 10.5px; }
    .iw-drop-col { font-size: 10.5px; }
    .iw-drop-col small { font-size: 10.5px; }

    .iw-search { padding: 6px 8px; margin-bottom: 6px; font-size: 11px; }
    .iw-col-chip { padding: 5px 7px; border-radius: 8px; }
    .iw-col-name { font-size: 10.5px; }
    .iw-col-sample { font-size: 10.5px; }

    /* هنگام کشیدن با انگشت، مرورگر نباید صفحه را اسکرول کند */
    .iw-col-chip { touch-action: none; }
    .iw-table th, .iw-table td { padding: 7px 8px; font-size: 11px; }
    .iw-ctx-row { gap: 8px; }
    .iw-ctx-field { flex: 1 1 45%; }
    .iw-ctx-field select { min-width: 0; width: 100%; }
    .iw-foot { justify-content: center; }
}

/* جدول سرویس‌های فعال هر شرکت */
.company-features-table th, .company-features-table td { text-align: center; vertical-align: middle; }
.company-features-name { text-align: right; white-space: nowrap; font-weight: 700; }
.company-feature-form { display: inline; margin: 0; }
.company-feature-btn {
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--panel-border); border-radius: 8px;
    font-size: 15px; font-weight: 800; line-height: 1;
    cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.company-feature-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
.company-feature-btn.is-off { background: var(--panel-bg-soft); color: var(--text-muted); }
.company-feature-btn:hover { border-color: var(--accent); }

@media (max-width: 900px) {
    /* روی موبایل هیچ ستونی حذف نمی‌شود؛ جدول با اسکرول افقیِ خودش دیده می‌شود */
    .company-features-table th, .company-features-table td { padding-inline: 6px; font-size: .78rem; }
    .company-feature-btn { width: 26px; height: 26px; font-size: 13px; }
}
/* =====================================================================
   جدول‌ها و پنل‌های واکنش‌گرا — آخرین ماژول، پس بر همه‌ی ماژول‌های بالاتر مقدم است.
   همراهِ assets/js/responsive-tables.js که data-label و کادرِ مقدار را می‌گذارد.

   قاعده‌ی این فایل: هر عنصر فقط **یک بار** تعریف می‌شود.
   (نسخه‌ی قبلی شش تعریف متناقض برای خانه‌ی «عملیات» داشت و آیکون‌ها
    به همین دلیل زیر هم می‌افتادند.)

   ساختار:
     ۱) موبایل — کارتِ عمومیِ جدول‌ها
     ۲) موبایل — کارتِ لیست شرکت‌ها
     ۳) موبایل — کارتِ واحدها و شغل‌ها
     ۴) موبایل — فرم ثبت واحد/شغل و عرضِ پنل‌ها
     ۵) دسکتاپ — عرضِ ستون‌های دو جدول و سرچ‌باکس
     ۶) همه‌ی اندازه‌ها — تب‌ها، لیبل‌ها، متن‌های توضیح
   ===================================================================== */


/* ============================================================
   ۱) موبایل — کارتِ عمومیِ جدول‌ها
   هر ردیف یک کارت؛ لیبلِ هر ستون **بیرونِ** کادر، بالای مقدار.
   هیچ داده‌ای پنهان نمی‌شود، فقط چیدمان عوض می‌شود.
   ============================================================ */
@media (max-width: 900px) {
    .rt-stack { display: block; width: 100%; border-collapse: separate; border-spacing: 0; }
    .rt-stack thead {
        position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .rt-stack tbody { display: block; width: 100%; }

    .rt-stack tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 8px;
        padding: 8px;
        border: 1px solid var(--panel-border);
        border-radius: var(--radius);
        background: var(--panel-bg-soft);
    }
    .rt-stack tbody tr:last-child { margin-bottom: 0; }
    /* «display: grid» بالا از ویژگیِ hidden (استایلِ پیش‌فرضِ مرورگر) قوی‌تر است؛
       بدون این قاعده ردیف‌هایی که جست‌وجو/فیلتر پنهان کرده روی موبایل دیده می‌شدند. */
    .rt-stack tbody tr[hidden] { display: none !important; }

    /* خانه: بدون کادر — کادر مالِ مقدار است، نه خانه */
    .rt-stack tbody td {
        display: block;
        /* بدون این دو، خانه درونِ گرید به‌اندازهٔ محتوایش جمع می‌شود
           و کلِ ستون را پر نمی‌کند (اندازه‌گیریِ مرورگر: ۴۳.۸px در برابرِ ۱۴۶px ستون). */
        width: 100%;
        justify-self: stretch;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: center;
        font-size: 12px;
    }

    /* لیبلِ ستون، بیرونِ کادر */
    .rt-stack tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        padding: 0 2px;
        color: var(--text-muted);
        font-size: 10.5px;
        line-height: 1.6;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rt-stack tbody td[data-label=""]::before,
.rt-stack tbody td:not([data-label])::before { content: none; }

    /* کادرِ مقدار — چه JS آن را پیچیده باشد (.rt-box)، چه از قبل span داشته باشد */
    .rt-stack tbody td > .rt-box,
.rt-stack tbody td > .job-inline-label,
.rt-stack tbody td:not(.company-actions-cell) > span:not(.rt-box):not(.job-inline-label),
.rt-stack tbody td:not(.company-actions-cell) > bdi {
        display: block;
        padding: 7px 6px;
        border: 1px solid var(--panel-border);
        border-radius: var(--radius-sm);
        background: var(--input-bg);
        font-size: 12px;
        overflow-wrap: anywhere;
    }
    .rt-stack tbody td > .rt-box:empty { display: none; }

    /* نشان‌های رنگی کادرِ خودشان را دارند — کادرِ دوم نگیرند */
    .rt-stack tbody td > .leave-status,
.rt-stack tbody td > .leave-type-badge,
.rt-stack tbody td > .leave-time-badge,
.rt-stack tbody td > .leave-date-badge,
.rt-stack tbody td > .doc-review-status {
        border: 0;
        background: transparent;
        padding: 4px 6px;
    }

    /* خانه‌ی خالی: خط تیره */
    .rt-stack tbody td.rt-empty::after { content: "—"; color: var(--text-muted); }

    /* ستون‌های بلند، تمام‌عرضِ کارت */
    .rt-stack tbody td[data-label*="توضیح"],
.rt-stack tbody td[data-label*="ریز اقلام"],
.rt-stack tbody td[data-label*="ضمیمه"] { grid-column: 1 / -1; }

    /* ---------- خانه‌ی «عملیات» — تنها تعریفِ آن در کل فایل ----------
       آیکون‌ها همیشه در یک ردیفِ افقی کنار هم. */
    .rt-stack tbody td.company-actions-cell {
        display: block;
        text-align: center;
        white-space: nowrap;
    }
    .rt-stack tbody td.company-actions-cell > a,
.rt-stack tbody td.company-actions-cell > form,
.rt-stack tbody td.company-actions-cell > button,
.rt-stack tbody td.company-actions-cell > .delete-company-form {
        display: inline-block !important;
        vertical-align: middle;
        margin: 0;
    }
    .rt-stack tbody td.company-actions-cell .company-action-button {
        display: inline-flex !important;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        margin: 0 2px;
        padding: 0;
    }
    .rt-stack tbody td.company-actions-cell .company-action-button img {
        width: 30px;
        height: 30px;
    }
    /* پاپ‌آپ خطای حذف نباید ردیف را بشکند */
    .rt-stack tbody td.company-actions-cell .delete-error-popup { white-space: normal; }

    /* ردیف‌های تک‌خانه‌ای مثل «موردی یافت نشد» */
    .rt-stack tbody tr.rt-fullrow { grid-template-columns: 1fr; }
    .rt-stack tbody tr.rt-fullrow td { border: 0; background: transparent; }

    /* دیگر اسکرول افقی لازم نیست */
    .table-wrap:has(.rt-stack) { overflow-x: visible; }
    table.rt-stack { min-width: 0 !important; }
    .rt-stack tbody td { white-space: normal; }
}


/* ============================================================
   ۲) موبایل — کارتِ لیست شرکت‌ها
   شناسه + نام در یک ردیف، مدیرعامل + کد اقتصادی، تاریخ + مسئول + عملیات
   ============================================================ */
@media (max-width: 900px) {
    .companies-table.rt-stack tbody tr {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .companies-table.rt-stack tbody td[data-label="شناسه"] { grid-column: span 1; }
    .companies-table.rt-stack tbody td[data-label="نام شرکت"] { grid-column: span 3; }
    .companies-table.rt-stack tbody td[data-label="مدیرعامل"],
.companies-table.rt-stack tbody td[data-label="کد اقتصادی"] { grid-column: span 2; }
    .companies-table.rt-stack tbody td[data-label="تاریخ شروع همکاری"],
.companies-table.rt-stack tbody td[data-label="مسئول سایت"] { grid-column: span 1; }
    .companies-table.rt-stack tbody td[data-label="عملیات"] { grid-column: span 2; }
}


/* ============================================================
   ۳) موبایل — کارتِ واحدها و شغل‌ها
   سه بخش در یک ردیف: واحد کاری | شغل | عملیات
   ستونِ عملیات فقط به‌اندازه‌ی خودش؛ بقیه‌ی عرض بین دو کادرِ متنی.
   ============================================================ */
@media (max-width: 900px) {
    .job-titles-table.rt-stack tbody tr {
        /* هر سه در یک ردیف: دو کادرِ متنی فضای آزاد را نصف می‌کنند،
           ستونِ عملیات فقط به‌اندازهٔ سه آیکون. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px;
        align-items: start;
    }
    .job-titles-table.rt-stack tbody td[data-label="عملیات"] { grid-column: auto; }
    .job-titles-table.rt-stack tbody td::before { font-size: clamp(10px, 2.6vw, 11px); }
    /* ---------- حالتِ ویرایش — دقیقاً مثلِ دسکتاپ ----------
       خودِ کادر قابلِ ویرایش می‌شود؛ کادرِ دوم باز نمی‌شود.
       (قاعدهٔ بالاترِ من لیبل را block می‌کند و display:none دسکتاپ را خنثی می‌کرد،
        برای همین هر دو کادر با هم دیده می‌شدند.) */
    .job-titles-table.rt-stack tbody tr.editing td > .job-inline-label { display: none !important; }
    .job-titles-table.rt-stack tbody tr.editing td > .job-inline-field {
        display: block !important;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        padding: 7px 3px;
        border: 1px solid var(--panel-border);
        border-radius: var(--radius-sm);
        background: var(--input-bg);
        font-size: 12px;
        text-align: center;
    }
    /* خارج از حالتِ ویرایش مخفی بماند */
    .job-titles-table.rt-stack tbody tr:not(.editing) td > .job-inline-field { display: none !important; }

    /* کادرِ مقدار تمام‌عرضِ ستون؛ پدینگِ افقی کم تا نوشته کامل جا شود،
       و فاصلهٔ بین دو کادر همیشه ۵ پیکسل (همان gap گرید). */
    .job-titles-table.rt-stack tbody td > .job-inline-label,
.job-titles-table.rt-stack tbody td > .rt-box {
        display: block;          /* ماژول ۰۹ این را inline-block می‌کند و کادر جمع می‌شود */
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        padding: 7px 3px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
        overflow: visible;
    }
    /* لیبل هم بریده نشود */
    .job-titles-table.rt-stack tbody td::before { overflow: visible; text-overflow: clip; }
}


/* ============================================================
   ۴) موبایل — فرم ثبت واحد/شغل و عرضِ پنل‌ها
   ============================================================ */
@media (max-width: 900px) {
    /* پدینگِ تودرتوی پنل‌ها عرض را می‌خورد */
    .tabset-3 .tabset-panel .panel { padding: 12px 8px; }
    .tabset.has-open .tabset-panels { padding: 10px 6px 12px; }

    /* فاصله‌ی پنل ثبت تا پنل نمایش */
    .tabset-3 #tabJobs .job-titles-layout { gap: 4px; }
    .tabset-3 #tabJobs .job-titles-form-panel { margin-bottom: 0; }
    .tabset-3 #tabJobs .job-titles-list-panel { margin-top: 0; }

    /* واحد + شغل + تیک و ضربدر، هر سه در یک ردیف */
    .job-entry-fields-row { flex-wrap: nowrap; gap: 6px; }
    .job-entry-fields-row .job-title-entry-field { flex: 1 1 0; min-width: 0; }
    .job-entry-fields-row .job-entry-actions { flex: 0 0 auto; gap: 4px; }
    .job-entry-fields-row .job-entry-action-field { width: 24px !important; }
    .job-entry-fields-row .job-entry-action-field .form-icon-button,
.job-entry-fields-row .job-entry-action-field .form-icon-button img { width: 24px; height: 24px; }
    .job-entry-fields-row .job-title-entry-field input { padding-inline: 4px; font-size: 12px; }
    .job-entry-fields-row .job-title-entry-field .job-input-label { font-size: 10px; }

    /* سرچ‌باکس شرکت‌ها: ردیفِ خودش، تمام‌عرض */
    .companies-panel-header { margin-bottom: 5px; }
}


/* ============================================================
   ۵) دسکتاپ — عرضِ ستون‌ها و سرچ‌باکس
   ============================================================ */
@media (min-width: 901px) {
    /* --- لیست شرکت‌ها: درصدی تا هرگز اسکرول افقی نخورد --- */
    .companies-table { table-layout: fixed; width: 100%; }
    .companies-table th:nth-child(1),
.companies-table td:nth-child(1) { width: 6%; }
    .companies-table th:nth-child(2),
.companies-table td:nth-child(2) { width: 24%; }
    .companies-table th:nth-child(3),
.companies-table td:nth-child(3) { width: 22%; }
    .companies-table th:nth-child(4),
.companies-table td:nth-child(4) { width: 14%; }
    .companies-table th:nth-child(5),
.companies-table td:nth-child(5) { width: 15%; }
    .companies-table th:nth-child(6),
.companies-table td:nth-child(6) { width: 10%; }
    .companies-table th:nth-child(7),
.companies-table td:nth-child(7) { width: 9%; }
    .companies-table th,
.companies-table td { overflow-wrap: anywhere; }
    .companies-table th:nth-child(7) { text-align: left; }
    .companies-table td.company-actions-cell {
        text-align: left;
        padding-inline-start: 0;
        white-space: nowrap;
    }
    .companies-table td.company-actions-cell .company-action-button { margin: 0 1px; }
    .companies-panel-header ~ .table-wrap { overflow-x: visible; }

    /* --- واحدها و شغل‌ها: مجموع ۱۰۰٪ --- */
    .job-titles-table { table-layout: fixed; width: 100%; }
    .job-titles-table th:nth-child(1),
.job-titles-table td:nth-child(1) { width: 38%; }
    .job-titles-table th:nth-child(2),
.job-titles-table td:nth-child(2) { width: 38%; }
    .job-titles-table th:nth-child(3),
.job-titles-table td:nth-child(3) { width: 24%; }
    .job-titles-table td:nth-child(1),
.job-titles-table td:nth-child(2) { overflow-wrap: anywhere; }
    .job-titles-table .job-inline-label {
        display: block;
        max-width: 100%;
        padding: 7px 4px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
    .job-titles-table .job-inline-field { width: 100%; max-width: 100%; box-sizing: border-box; }
    .job-titles-table th:nth-child(3) { text-align: left; }
    .job-titles-table td.company-actions-cell {
        text-align: left;
        padding-inline-start: 0;
        white-space: nowrap;
    }
    .job-titles-table td.company-actions-cell .company-action-button {
        width: 30px; height: 30px; margin: 0 1px; padding: 0;
    }
    .job-titles-table td.company-actions-cell .company-action-button img { width: 30px; height: 30px; }
    .job-titles-list-panel .table-wrap { overflow-x: visible; }

    /* --- سرویس‌های فعال: ستون‌های سرویس هم‌عرض --- */
    .company-features-table { table-layout: fixed; width: 100%; }
    .company-features-table th:first-child,
.company-features-table td:first-child { width: 180px; }

    /* --- دو پنلِ تبِ بخش‌های کاری: ۱/۳ و ۲/۳ --- */
    .tabset-3 #tabJobs .job-titles-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        grid-template-areas: "form list";
    }

    /* --- سرچ‌باکس شرکت‌ها کنارِ ذره‌بین --- */
    .companies-title-group { flex-wrap: nowrap; min-width: 0; }
    .companies-title-group > h2 { flex: 0 0 auto; white-space: nowrap; }
    .companies-title-group > .company-status-filter,
.companies-title-group > .company-search-toggle { flex: 0 0 auto; }
    /* .company-list-search دیگر در companies.php وجود ندارد (کادر جست‌وجو به
       فرزندِ مستقیمِ هدر منتقل شد)، پس قاعده‌اش هم حذف شد تا سلکتورِ مرده نماند. */
}


/* ============================================================
   ۶) همه‌ی اندازه‌ها
   ============================================================ */

/* سرچ‌باکس شرکت‌ها — تمام‌عرضِ ردیف با ۵px فاصله (موبایل) */
/* کادرِ جست‌وجوی شرکت‌ها حالا فرزندِ مستقیمِ هدر است، نه داخلِ گروهِ عنوان.
   ردیفِ کاملِ تمام‌عرضِ پنل می‌گیرد و ردیفِ بالا را جابه‌جا نمی‌کند. */
.companies-panel-header { flex-wrap: wrap; }
.companies-search-input {
    flex: 0 0 100%;
    order: 3;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 5px 0 0;
    text-align: right;
}
.companies-search-input[hidden] { display: none; }
#companySearchInput {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    text-align: right;
}
#companySearchInput[hidden] { display: none; }

/* سه کارتِ بالای صفحه‌ی مدیریت شرکت‌ها */
.tabset-3 { width: 100%; }
.tabset-3 .tabset-row { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabset-3 .tabset-tab { width: 100%; box-sizing: border-box; }
@media (max-width: 620px) {
    .tabset-3 .tabset-row { gap: 6px; }
    .tabset-3 .tabset-tab { padding: 8px 6px; }
    .tabset-3 .tabset-label { font-size: clamp(10px, 2.9vw, 12.5px); }
}

/* عنوان پنل و پیامِ موفقیت، روبه‌روی هم */
.job-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.job-form-header h2 { margin: 0; }
.job-form-header .job-form-flash { margin: 0; padding: 5px 10px; font-size: 12px; line-height: 1.6; }

/* ستونِ راستِ تبِ بخش‌های کاری — همه‌چیز زیر هم */
.job-entry-stack { display: flex; flex-direction: column; gap: 10px; }
.job-entry-stack > .field,
.job-entry-stack > form { width: 100%; margin: 0; }
.job-entry-stack .job-company-picker input,
.job-entry-stack .job-company-picker select { width: 100%; box-sizing: border-box; text-align: center; }
/* لیست کشویی شرکت: هم‌عرضِ کادر و وسط‌چین */
.job-entry-stack .typeahead-dropdown { right: 0; left: 0; width: 100%; max-width: 100%; }
.job-entry-stack .typeahead-row { text-align: center; }

/* دکمه‌ی «ثبت واحد و شغل جدید» */
.job-entry-open {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--button-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.job-entry-open:hover { border-color: var(--accent); }
.job-entry-open[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.job-entry-open[hidden] { display: none; }

/* ردیفِ واحد + شغل + تیک و ضربدر */
.job-entry-fields { display: flex; flex-direction: column; gap: 10px; }
.job-entry-fields[hidden] { display: none; }
.job-entry-fields-row { display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
.job-entry-fields-row .job-title-entry-field { flex: 1 1 0; min-width: 0; margin: 0; }
.job-entry-fields-row .job-title-entry-field input {
    width: 100%;
    box-sizing: border-box;
    padding-inline: 8px;
    text-align: center;
}
.job-entry-fields-row .job-title-entry-field input::placeholder { text-align: center; opacity: .75; }
/* لیبل بالای کادر، نه داخلش (ماژول ۰۸ آن را absolute می‌کند) */
.job-entry-fields-row .job-title-entry-field .job-input-label {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    display: block;
    margin: 0 0 3px;
    padding: 0;
    font-size: 11px;
    line-height: 1.7;
    text-align: center;
    pointer-events: auto;
}
/* تیک و ضربدر، هم‌مرکزِ کادرها (به‌اندازه‌ی ارتفاعِ لیبل پایین‌تر) */
.job-entry-fields-row .job-entry-actions {
    flex: 0 0 auto;
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 6px;
    padding-top: 22px;
}
.job-entry-fields-row .job-entry-action-field {
    width: 27px !important;
    margin: 0;
    display: none;                /* با تایپ در کادرها ظاهر می‌شود (جاوااسکریپت) */
    align-items: center;
    justify-content: center;
    left: auto !important;
    right: auto !important;
    transform: none;
}
.job-entry-fields-row .job-entry-action-field .form-icon-button {
    position: static;
    width: 27px;
    height: 27px;
    padding: 0;
    left: auto !important;
    right: auto !important;
}
.job-entry-fields-row .job-entry-action-field .form-icon-button img { width: 27px; height: 27px; }

/* ماتریس‌های شرکت × سرویس — کارتی روی موبایل */
@media (max-width: 900px) {
    .company-features-table.rt-stack tbody td.company-features-name,
.loan-type-matrix.rt-stack tbody td.loan-type-company {
        grid-column: 1 / -1;
        text-align: center;
        font-weight: 800;
    }
    .company-features-table.rt-stack tbody td.company-features-name::before,
.loan-type-matrix.rt-stack tbody td.loan-type-company::before { content: none; }
    .company-features-table.rt-stack tbody td,
.loan-type-matrix.rt-stack tbody td { min-height: 56px; }
    .company-features-table.rt-stack .company-feature-form { display: flex; justify-content: center; }
}

/* کلیدها و چک‌باکس‌های ماتریس */
.company-feature-btn { width: 20px; height: 20px; font-size: 10px; }
.loan-type-check { width: 15px; height: 15px; }

/* متن توضیحِ بالای ماتریس‌ها، دوطرف‌چین */
.company-features-note { text-align: justify; text-align-last: right; line-height: 2; }

/* جستجوی زنده‌ی داشبورد پرسنل */
.staff-search-field { position: relative; }
.staff-search-field input { width: 100%; box-sizing: border-box; }
.staff-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    box-shadow: var(--shadow);
}
.staff-search-dropdown.open { display: block; }
.staff-search-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--panel-border);
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.staff-search-row:last-child { border-bottom: none; }
.staff-search-row:hover,
.staff-search-row.is-active { background: var(--button-bg); }
.staff-search-name { font-weight: 600; }
.staff-search-meta { color: var(--text-muted); font-size: 11px; line-height: 1.7; }
.staff-search-empty { padding: 10px 12px; color: var(--text-muted); font-size: 12px; }

/* =====================================================================
   فرم «ثبت کاربر جدید» — دسکتاپ: دو ردیف
   ردیف ۱: شرکت | نام و نام خانوادگی | جنسیت | کد ملی | شماره تلفن | کد پرسنلی (+ ریست رمز در ویرایش)
   ردیف ۲: بخش کاری | شغل | تاریخ شروع | تاریخ ترک | دکمه‌ها
   ===================================================================== */
@media (min-width: 901px) {
    /* شش فیلد: شرکت | نام | جنسیت | کد ملی | تلفن | کد پرسنلی
       در ویرایش، چک‌باکسِ «ریست رمز» هفتمین خانه است */
    .user-first-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .users-form-panel.is-editing .user-first-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .users-form-panel form#userSaveForm > .filters-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
        gap: 12px;
    }
    .users-form-panel form#userSaveForm > .filters-row > .user-form-actions {
        display: flex;
        align-items: center;
        gap: 5px;
        align-self: center;
    }
}

/* لیست کشویی «شرکت کاربر»: هم‌عرضِ کادر، با ۵ پیکسل فاصله از زیرِ آن.
   عرضِ خودِ کادر تغییر نمی‌کند. */
/* لیست کشویی «شرکت کاربر».
   typeahead.js کلاس typeahead-wrap را روی parentElement یعنی کلِ .field
   (لیبل + کادر) می‌گذارد؛ پس top:100% زیرِ کلِ فیلد می‌افتاد و
   ارتفاعِ لیبل به فاصله اضافه می‌شد. چون .field خودش flex-column است،
   دروپ‌داون را از حالتِ absolute درمی‌آوریم تا دقیقاً زیرِ کادر بنشیند. */
.user-company-field .typeahead-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
}
/* typeahead.js حالا فقط دورِ input می‌پیچد، پس top:100% دقیقاً زیرِ کادر است
   و لیست شناور می‌ماند (ردیفِ پایین را هل نمی‌دهد). */
.typeahead-wrap { position: relative; display: block; }
.user-company-field .typeahead-wrap { width: 100%; }

/* آیکون «فرم جدید / پاک کردن» */
.form-reset-button img { width: 100%; height: 100%; object-fit: contain; }

/* آیکون «فرم جدید» هم‌اندازهٔ تیک و ضربدر (۴۶px) بماند، نه بزرگ‌تر.
   margin: auto نداشته باشد — روی یک آیتمِ فلکس، فضای خالی را می‌بلعد و
   آیکون را از دو تای دیگر جدا می‌کند. */
.users-form-panel form#userSaveForm > .filters-row .user-form-actions .form-reset-button img {
    width: 46px;
    height: 46px;
    margin: 0;
}


/* =====================================================================
   گوشه‌ی گردِ *لیستِ کشویی* (کادرِ بازشونده‌ی پیشنهادها) — نه خودِ کادرِ ورودی.
   ===================================================================== */
.typeahead-dropdown {
    border-radius: 14px;
    overflow: hidden;
}
.typeahead-row:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.typeahead-row:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }

/* لیست زنده‌ی جستجوی پرسنل هم همین‌طور */
.staff-search-dropdown { border-radius: 14px; overflow: hidden; }

/* نام شرکت‌ها در لیست آبشاری، وسط‌چین */
.typeahead-row { text-align: center; }

/* =====================================================================
   لیستِ کشویی سفارشی (pretty-select) — ظاهرِ منوی بازشونده مثل لیست
   آبشاریِ «شرکت کاربر»، چون منوی بومیِ <select> با CSS گرد نمی‌شود.
   همراهِ assets/js/pretty-select.js
   ===================================================================== */
.pretty-select { position: relative; display: block; width: 100%; }
/* select اصلی می‌ماند (برای ارسال فرم و required) ولی دیده نمی‌شود */
.pretty-select > select {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.pretty-select-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid var(--input-border);
    border-radius: 8px;              /* خودِ کادر مثل قبل */
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}
.pretty-select-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pretty-select.is-disabled .pretty-select-trigger { opacity: .55; cursor: not-allowed; }
.pretty-select-label { flex: 1 1 auto; min-width: 0; }
.pretty-select-caret { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--text-muted); line-height: 1; transition: transform .15s ease; }
.pretty-select-caret svg { display: block; width: 16px; height: 16px; }
.pretty-select.is-open .pretty-select-caret { transform: rotate(180deg); }
/* لیستِ باز بالای سرستون‌های جدول و کارت‌های بعدی بنشیند */
.pretty-select.is-open { z-index: 1000; }

/* منوی بازشونده — گوشه‌ی گرد، دقیقاً مثل typeahead-dropdown */
.pretty-select-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
    max-height: 260px;
    overflow: auto;
    margin-top: 5px;
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--input-bg);
    box-shadow: var(--shadow);
}
.pretty-select-list.open { display: block; animation: ps-open .12s ease-out; }
@keyframes ps-open { from { transform: translateY(-4px); } to { transform: none; } }
.pretty-select-row {
    padding: 8px 12px;
    border-bottom: 1px solid var(--panel-border);
    color: var(--text);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.pretty-select-row:last-child { border-bottom: none; }
.pretty-select-row:hover, .pretty-select-row.is-active { background: var(--button-bg); }
/* گزینه‌ی انتخاب‌شده: زمینه‌ی ملایم + تیک، به‌جای ردیفِ تمام‌آبی */
.pretty-select-row.is-selected { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pretty-select-row.is-selected::after { content: '\2713'; margin-inline-start: 6px; }
.pretty-select-row.is-selected.is-active { background: var(--button-bg); }
:root[data-theme="dark"] .pretty-select-row.is-selected { background: rgba(59, 130, 246, .18); color: #93c5fd; }

/* =====================================================================
   پاپ‌آپ ورود گروهی — ستونِ «فیلدهای سایت» بدون اسکرول
   با ۱۱ فیلد، سقفِ ارتفاع و فونتِ قبلی باعثِ اسکرول می‌شد.

   فقط دسکتاپ: این ماژول آخر لود می‌شود، پس بدونِ این قید، اندازه‌های
   بزرگ‌ترش روی قواعدِ موبایلِ ماژول ۱۷ سوار می‌شد و دو پنلِ کنارِ هم
   در گوشی سرریز می‌کرد (max-height: none هم ارتفاعِ پاپ‌آپ را رها می‌کرد).
   ===================================================================== */
@media (min-width: 901px) {
    .iw-fields {
        max-height: none;        /* سقفِ 46vh برداشته شد */
        gap: 4px;
        overflow-y: visible;
    }
    .iw-fields .iw-field-row { border-radius: 8px; }
    .iw-fields .iw-field-name {
        padding: 5px 8px;
        font-size: 11.5px;
        line-height: 1.4;
    }
    .iw-fields .iw-drop {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 11.5px;
    }
}

/* پیام خطای فایل، روبه‌روی محلِ انتخاب فایل (نه پایینِ پنل) */
.iw-file-error {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.8;
    text-align: justify;
}
.iw-file-error.is-error { color: var(--danger, #dc2626); }
.iw-file-error:empty { display: none; }
@media (min-width: 601px) {
    /* روی دسکتاپ در همان ردیف کنارِ نام فایل می‌نشیند */
    .iw-file-error { flex: 1 1 auto; text-align: start; }
}

/* =====================================================================
   پاپ‌آپ ورود گروهی — مرحله‌ی ۳: نتیجه‌ی ثبت
   خطاها داخلِ خودِ پاپ‌آپ می‌مانند و به پنلِ «ثبت کاربر جدید» نشت نمی‌کنند.
   ===================================================================== */
.iw-result {
    padding: 14px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel-bg-soft);
    text-align: center;
}
.iw-result-ok { border-color: var(--success, #1e8e3e); }
.iw-result-bad { border-color: var(--danger, #dc2626); }
.iw-result-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.iw-result-ok  .iw-result-title { color: var(--success, #1e8e3e); }
.iw-result-bad .iw-result-title { color: var(--danger, #dc2626); }
.iw-result-line { font-size: 13px; line-height: 1.9; }
.iw-result-stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    font-size: 12.5px;
}
.iw-stat {
    padding: 5px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--input-bg);
}
.iw-stat b { font-size: 14px; }
.iw-stat.is-ok  b { color: var(--success, #1e8e3e); }
.iw-stat.is-bad b { color: var(--danger, #dc2626); }

.iw-result-warnings {
    margin-top: 14px;
    max-height: 32vh;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--input-bg);
}
.iw-result-subtitle { font-size: 12.5px; font-weight: 800; margin-bottom: 8px; }
.iw-result-warnings ul { margin: 0; padding-inline-start: 18px; }
.iw-result-warnings li { font-size: 12.5px; line-height: 2; color: var(--text); }

/* =====================================================================
   مرخصی و اضافه‌کار — کادرهای تاریخ در همان ردیفِ عنوان و تب‌ها
   ===================================================================== */
.doc-review-head { flex-wrap: wrap; row-gap: 8px; }
.doc-review-filters { flex-wrap: wrap; row-gap: 8px; }
/* فرمِ بازه (loan-filter-bar) در ردیفِ تب‌ها می‌نشیند، نه ردیفِ جدا */
.doc-review-filters .loan-filter-bar {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
}
.doc-review-filters .loan-filter-bar .loan-ym-wrap,
.doc-review-filters .loan-filter-bar .leave-mm-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}
@media (max-width: 900px) {
    /* موبایل: اگر جا نشد به خط بعد برود، ولی پنل را پهن نکند */
    .doc-review-filters .loan-filter-bar { flex-wrap: wrap; }
}

/* =====================================================================
   ردیفِ فیلترِ مرخصی — کادرهای ماه/سال هم‌ارتفاعِ دکمه‌های تب
   (دکمه‌ها: padding 5px 12px / font 12px)
   ===================================================================== */
.doc-review-filters .loan-filter-bar {
    margin: 0;
    margin-inline-end: auto;   /* چسبیده به سمت راستِ ردیف */
}
.doc-review-filters .loan-filter-bar select,
.doc-review-filters .loan-filter-bar .leave-mm-custom-btn,
.doc-review-filters .loan-filter-bar .date-range-inputs input {
    padding: 5px 10px;
    min-height: 26px;
    min-width: 88px;
    font-size: 12px;
    line-height: 1.4;
}
.doc-review-filters .loan-filter-bar .loan-ym-wrap { gap: 10px; }
.doc-review-filters .loan-filter-bar .leave-mm-nav { font-size: 14px; line-height: 1; }

/* =====================================================================
   مرخصی — سه دکمه‌ی تب سمت چپ، و عنوان + بازه‌ی تاریخ بالای خودِ جدول
   ===================================================================== */
.doc-review-head { justify-content: flex-start; }
.doc-review-filters { margin-inline-start: auto; }   /* دکمه‌ها سمت چپ */

/* ردیفِ بالای جدول: عنوان راست، کادرهای تاریخ کنارش */
.leave-table-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 10px;
}
.leave-table-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}
.leave-table-head .loan-filter-bar { margin: 0; }
.leave-table-head .loan-filter-bar select,
.leave-table-head .loan-filter-bar .leave-mm-custom-btn,
.leave-table-head .loan-filter-bar .date-range-inputs input {
    padding: 5px 10px;
    min-height: 26px;
    min-width: 88px;
    font-size: 12px;
    line-height: 1.4;
}
.leave-table-head .loan-filter-bar .loan-ym-wrap { gap: 10px; }

/* برچسبِ کنارِ چک‌باکسِ بازه */
.date-range-toggle { gap: 6px; }
.date-range-toggle-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.date-range-toggle-text[hidden] { display: none; }

@media (max-width: 900px) {
    .leave-table-head { gap: 8px; }
    .leave-table-head .loan-filter-bar { flex-wrap: wrap; }
}

/* =====================================================================
   مرخصی — عنوان + کادرهای تاریخ و دکمه‌های تب، همه در یک ردیف
   عنوان و تاریخ سمت راست، سه دکمه سمت چپ.
   ===================================================================== */
.leave-head-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}
.leave-head-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}
.leave-head-title .loan-filter-bar { margin: 0; }
.leave-head-title .loan-filter-bar select,
.leave-head-title .loan-filter-bar .leave-mm-custom-btn,
.leave-head-title .loan-filter-bar .date-range-inputs input {
    padding: 5px 10px;
    min-height: 26px;
    min-width: 88px;
    font-size: 12px;
    line-height: 1.4;
}
.leave-head-title .loan-filter-bar .loan-ym-wrap { gap: 10px; }

@media (max-width: 900px) {
    .leave-head-title { gap: 8px; }
    .leave-head-title .loan-filter-bar { flex-wrap: wrap; }

    /* ردیفِ اول: عنوان + سه دکمه‌ی تب + آیکونِ اکسل.
       ردیفِ دوم: کادرهای تاریخ، تمام‌عرض و وسط‌چین.

       چرا display: contents —
       عنوان و فرمِ تاریخ هر دو داخلِ .leave-head-title اند، ولی دکمه‌ها
       بیرونِ آن در .doc-review-filters. تا وقتی این wrapper یک جعبه‌ی
       واقعی باشد، عرضش با پهن‌ترین فرزندش (فرمِ تاریخ) تعیین می‌شود و
       همان عرض، جا را برای دکمه‌ها تنگ می‌کند و آن‌ها را به خطِ بعد
       می‌اندازد. با display: contents جعبه‌ی wrapper حذف می‌شود و
       عنوان و فرمِ تاریخ مستقیماً فرزندِ .doc-review-head می‌شوند؛ حالا
       هر سه در یک بسترِ wrap قرار می‌گیرند و فقط فرمِ تاریخ — که
       flex-basis صد درصد دارد — به ردیفِ دوم می‌رود.

       دو تلاشِ قبلیِ من (flex: 1 1 100% و بعد حذفش) هر دو غلط بودند،
       چون مشکل عرضِ wrapper بود نه مقدارِ flex آن. */
    .leave-head-title { display: contents; }

    /* عنوانِ کوتاه‌تر در موبایل: «درخواست‌های …» → «درخواست …»
       تا عنوان و دکمه‌ها با هم در ردیفِ اول جا شوند.
       (پیش‌فرضِ .head-short پایین‌تر تعریف شده: در دسکتاپ پنهان است،
       وگرنه هر دو واژه پشتِ هم چاپ می‌شدند.) */
    .doc-review-head .head-long { display: none; }
    .doc-review-head .head-short { display: inline; }

    .doc-review-head > .leave-head-title > h3 { margin: 0; }
    .doc-review-head > .leave-head-title > .loan-filter-bar {
        flex: 0 0 100%;
        order: 3;                /* همیشه بعد از عنوان و دکمه‌ها */
        justify-content: center;
    }
    .doc-review-head > .leave-head-title > .loan-filter-bar .loan-ym-wrap,
.doc-review-head > .leave-head-title > .loan-filter-bar .leave-mm-group {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* =====================================================================
   فشرده‌سازی پنل‌های جدولی تا ۸ ردیف + صفحه‌بندی بدون اسکرولِ مرورگر
   ===================================================================== */
/* فضای بالای پنل وقتی عنوانِ صفحه حذف شده */
.main-area > .panel:first-child { margin-top: 0; }
.doc-review-head { margin-bottom: 10px; }

/* فاصله‌ی ردیف آخر تا دکمه‌های صفحه‌بندی */
.doc-review-pager { margin-top: 10px; padding-top: 0; }
.doc-review-pager-btn { padding: 4px 14px; font-size: 12px; }
.doc-review-pager-info { font-size: 11.5px; }

/* ردیف‌های جدولِ بررسی کمی جمع‌تر تا هشت ردیف جا شود */
.doc-review-table th,
.doc-review-table td { padding: 6px 6px; }
.doc-review-table th { font-size: 11.5px; }
.doc-review-table td { font-size: 11.5px; }

/* =====================================================================
   موبایل — «مدیریت کاربران»: فرم ثبت کاربر و کارتِ هر کاربر
   چهار ردیف، طبق خواستِ کاربر:
     ۱) شرکت (۴) | نام (۸)
     ۲) جنسیت | کد ملی | شماره تلفن               (هر کدام ۴)
     ۳) بخش کاری | شغل | کد پرسنلی               (هر کدام ۴)
     ۴) تاریخ شروع | تاریخ ترک | آیکون‌ها          (هر کدام ۴)
     ۵) فقط در ویرایش: چک‌باکسِ «ریست رمز کاربر» تمام‌عرض

   نکته‌ی فنی: کد پرسنلی در .user-first-row است ولی بخش کاری و شغل در
   form#userSaveForm. دو ظرفِ جدا نمی‌توانند یک ردیف بسازند؛ پس هر دو ظرف
   (و خودِ فرم) display: contents می‌شوند و گریدِ ۱۲ ستونی روی خودِ پنل
   می‌نشیند. جای هر خانه با order + span تعیین می‌شود.

   این تنها بلوکِ موبایل برای این دو بخش است. بلوکِ دیگری اضافه نکنید.
   ===================================================================== */
@media (max-width: 900px) {
    /* پنل فقط با کلاسِ .open دیده می‌شود (JS: classList.toggle) — پس
       گرید هم باید روی همان حالت بنشیند، وگرنه display:none را می‌شکند. */
    .users-form-panel.open {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 8px 6px;
        align-items: end;
    }
    .users-form-panel > h2 { grid-column: 1 / -1; margin-bottom: 2px; text-align: center; }
    .users-form-panel > .alert { grid-column: 1 / -1; }

    /* ظرف‌های میانی حذف می‌شوند تا خانه‌ها فرزندِ مستقیمِ گرید شوند */
    .user-first-row,
.user-first-row > form.filters-row,
.users-form-panel form#userSaveForm,
.users-form-panel form#userSaveForm > .filters-row { display: contents; }
    .users-form-panel form#userSaveForm > .filters-row > input[type="hidden"] { display: none; }

    .users-form-panel .field { min-width: 0; margin: 0; }

    /* ---- ردیف ۱ ---- */
    .user-first-row > :first-child,
.user-first-row > form.filters-row > .user-company-field { order: 1; grid-column: span 4; }
    .user-first-row > :nth-child(2) { order: 2; grid-column: span 8; }   /* نام */
    /* ---- ردیف ۲ ---- */
    .user-first-row > :nth-child(3) { order: 3; grid-column: span 4; }   /* جنسیت */
    .user-first-row > :nth-child(4) { order: 4; grid-column: span 4; }   /* کد ملی */
    .user-first-row > :nth-child(5) { order: 5; grid-column: span 4; }   /* تلفن */
    /* ---- ردیف ۵ (فقط ویرایش) ---- */
    .user-first-row > :nth-child(7) { order: 13; grid-column: 1 / -1; }  /* ریست رمز */
    /* چک‌باکسِ ریست: قواعدِ عمومیِ label/input این بلوک نباید رویش بنشیند */
    .users-form-panel .field .user-reset-check {
        display: flex; white-space: normal; overflow: visible; text-overflow: clip;
        min-height: 36px; margin: 0; padding: 4px 8px; font-size: 12px; line-height: 1.4;
    }
    .users-form-panel .field .user-reset-check input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; }
    /* ---- ردیف ۳ ---- */
    .users-form-panel form#userSaveForm > .filters-row > .field:nth-of-type(1) { order: 7; grid-column: span 4; }  /* بخش کاری */
    .users-form-panel form#userSaveForm > .filters-row > .field:nth-of-type(2) { order: 8; grid-column: span 4; }  /* شغل */
    .user-first-row > :nth-child(6) { order: 9; grid-column: span 4; }   /* کد پرسنلی */
    /* ---- ردیف ۴ ---- */
    .users-form-panel form#userSaveForm > .filters-row > .field:nth-of-type(3) { order: 10; grid-column: span 4; } /* تاریخ شروع */
    .users-form-panel form#userSaveForm > .filters-row > .field:nth-of-type(4) { order: 11; grid-column: span 4; } /* تاریخ ترک */
    .users-form-panel form#userSaveForm > .filters-row > .user-form-actions {
        order: 12;
        grid-column: span 4;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        align-self: end;
        min-height: 36px;
    }

    /* لیبل: کوچک، یک‌خطی */
    .users-form-panel .field label {
        display: block;
        margin: 0 0 3px;
        font-size: 10px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* کادرها */
    .users-form-panel .field input,
.users-form-panel .field select,
.users-form-panel .pretty-select-trigger {
        width: 100%;
        box-sizing: border-box;
        min-height: 36px;
        padding: 6px 6px;
        font-size: 12px;
    }
    .users-form-panel .pretty-select-trigger { padding-inline: 5px; }
    .users-form-panel input::placeholder { font-size: 10.5px; }

    /* آیکون‌های تأیید / جدید / انصراف: ۲۸px، فاصله‌ی ۴px */
    .users-form-panel form#userSaveForm > .filters-row .user-form-actions .btn {
        margin: 0; padding: 0; flex: 0 0 auto;
        width: 28px; height: 28px;
    }
    .users-form-panel form#userSaveForm > .filters-row .user-form-actions .btn img {
        width: 28px; height: 28px; margin: 0;
    }

    /* ---------- کارتِ هر کاربر ----------
         نام (تمام‌عرض) · کد ملی|موبایل · کد پرسنلی|شرکت · بخش کاری|شغل
         عملیات — پاورقیِ کارت.
       همه‌ی خانه‌های یک ردیف هم‌ارتفاع‌اند و متنِ داخلِ کادر وسطِ ارتفاع
       می‌نشیند — از جمله «شغل» که متن + دکمه‌ی تاریخچه دارد.              */
    .users-list-panel table.rt-stack tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
        padding: 10px;
        align-items: stretch;
    }
    .users-list-panel table.rt-stack tbody td[data-label="نام و نام خانوادگی"] { grid-column: 1 / -1; }
    .users-list-panel table.rt-stack tbody td:not(.company-actions-cell) {
        display: flex;
        flex-direction: column;
    }
    .users-list-panel table.rt-stack tbody td::before {
        flex: 0 0 auto;
        font-size: 10.5px;
        margin-bottom: 3px;
    }
    .users-list-panel table.rt-stack tbody td > .rt-box,
.users-list-panel table.rt-stack tbody td:not(.company-actions-cell) > span:not(.rt-box),
.users-list-panel table.rt-stack tbody td:not(.company-actions-cell) > bdi {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2px 5px;
        padding: 6px 6px;
        font-size: 12px;
        line-height: 1.45;
    }
    .users-list-panel table.rt-stack tbody td > .rt-box .job-history-trigger {
        margin: 0; padding: 0; border: 0; background: none;
        font: inherit; font-size: 11px; color: var(--accent); cursor: pointer;
    }
    .users-list-panel table.rt-stack tbody td > .rt-box .site-manager-label { font-size: 10.5px; }

    /* پاورقیِ عملیات: لیبل سمت راست، سه آیکون سمت چپ، خطِ جداکننده بالا */
    .users-list-panel table.rt-stack tbody td.company-actions-cell {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
        padding-top: 8px;
        border-top: 1px solid var(--panel-border);
        white-space: nowrap;
        text-align: start;
    }
    .users-list-panel table.rt-stack tbody td.company-actions-cell::before {
        display: block;
        margin: 0;
        margin-inline-end: auto;
    }
    .users-list-panel table.rt-stack tbody td.company-actions-cell > a,
.users-list-panel table.rt-stack tbody td.company-actions-cell > form,
.users-list-panel table.rt-stack tbody td.company-actions-cell > .user-action-form {
        display: inline-flex !important;
        margin: 0;
    }
    .users-list-panel table.rt-stack tbody td.company-actions-cell .company-action-button {
        width: 28px; height: 28px; margin: 0; padding: 0;
    }
    .users-list-panel table.rt-stack tbody td.company-actions-cell .company-action-button img {
        width: 28px; height: 28px;
    }
}

/* =====================================================================
   موبایل — کادر جست‌وجوی «لیست کاربران» در ردیفِ خودش
   عنوان و آیکون‌ها در ردیف بالا می‌مانند؛ کادر جست‌وجو تمام‌عرض به ردیفِ
   پایین می‌رود، بینِ همان ردیف و جدول. تا وقتی کادر پنهان است مارجین صفر
   می‌شود تا فضای خالی نیفتد.
   ===================================================================== */
@media (max-width: 900px) {
    /* ردیفِ بالا دست‌نخورده می‌ماند: عنوان، ذره‌بین و آیکون‌ها سرِ جای خودشان.
       فقط هدر اجازه‌ی wrap می‌گیرد تا کادرِ جست‌وجو — که حالا فرزندِ مستقیمِ
       هدر است — یک ردیفِ کاملِ تمام‌عرض زیرِ آن‌ها بسازد. */
    .users-panel-header { flex-wrap: wrap; }

    /* آیکون‌ها با top:50% وسطِ *کلِ* هدر تراز می‌شدند؛ با باز شدنِ کادرِ
       جست‌وجو هدر بلندتر می‌شد و آیکون‌ها پایین می‌رفتند. حالا به ردیفِ
       اول قفل می‌شوند و با باز و بسته شدنِ کادر تکان نمی‌خورند. */
    .users-panel-header .users-header-actions {
        top: 0;
        transform: none;
        height: 46px;
    }

    .user-search-input {
        flex: 0 0 100%;
        order: 3;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        margin: 5px 0 0;
        text-align: right;
    }
    .user-search-input[hidden] { display: none; }
}

/* =====================================================================
   عنوانِ دوحالته‌ی پنل‌های «درخواست‌ها»
   هر دو واژه در HTML هستند و CSS یکی را نشان می‌دهد. پیش‌فرض = دسکتاپ:
   واژه‌ی بلند دیده می‌شود و کوتاه پنهان است. قاعده‌ی موبایل بالاتر
   این را برعکس می‌کند.
   ===================================================================== */
@media (min-width: 901px) {
    .doc-review-head .head-short { display: none; }
    .doc-review-head .head-long { display: inline; }
}

/* =====================================================================
   موبایل — سرصفحه‌ی «لیست شرکت‌ها» در یک ردیف
   در عرضِ ۳۶۰px، عنوانِ ۱۶ پیکسلی به‌همراهِ دو آیکون و دکمه‌ی
   «ثبت شرکت جدید» (که font: inherit دارد) از عرضِ پنل بیشتر می‌شد و
   دکمه به ردیفِ دوم می‌افتاد. فونت و padding کوچک‌تر، تا همه یک‌ردیفه شوند.
   ===================================================================== */
@media (max-width: 900px) {
    .companies-panel-header h2 { font-size: 13px; }
    .companies-title-group { gap: 6px; }

    .companies-panel-header .company-form-toggle {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* آیکون‌ها کمی جمع‌تر تا جا برای متن باز شود */
    .companies-title-group .company-status-filter { width: 32px; height: 32px; }
    .companies-title-group .company-status-filter img { width: 28px; height: 28px; }
    .companies-title-group .company-search-toggle { width: 30px; height: 30px; }
    .companies-title-group .company-search-toggle img { width: 22px; height: 22px; }
}

/* =====================================================================
   دکمه‌ی «ثبت واحد و شغل جدید» کنارِ عنوانِ «شرکت و بخش‌های کاری»
   دکمه در مارک‌آپ به داخلِ .job-form-header منتقل شد. آن هدر از قبل
   flex با justify-content: space-between است، پس عنوان راست و دکمه چپ.
   قاعده‌ی پایه width: 100% دارد (چون قبلاً در ستونِ عمودی بود) و باید
   اینجا auto شود، وگرنه تمامِ عرض را می‌گیرد و باز هم ردیفِ جدا می‌سازد.
   ===================================================================== */
.job-form-header .job-entry-open {
    width: auto;
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 12px;
}
@media (max-width: 900px) {
    .job-form-header h2 { font-size: 13px; }
    .job-form-header { gap: 6px; }
    .job-form-header .job-entry-open { padding: 5px 9px; font-size: 11px; }
}

/* =====================================================================
   موبایل — جدول و سرصفحه‌ی «مدیریت کاربران» در عرضِ کم
   سه اصلاح:
     ۱) آیکون‌های هدر روی عنوان می‌افتادند. .users-header-actions
        position: absolute است، یعنی جا اشغال نمی‌کند؛ با کوچک‌شدنِ
        عنوان، متن زیرِ آیکون‌ها می‌رفت. اندازه‌ها کوچک شد تا فاصله بیفتد.
     ۲) آیکون‌های «عملیات» زیادی از هم دور بودند (هرکدام ۳px مارجین).
     ۳) کادرِ مقدار ۱۲px بود؛ کد ملیِ ۱۰ رقمی در ستونِ ~۶۰ پیکسلی
        دو خطی می‌شد. فونت و padding کوچک‌تر تا یک‌خطی بماند.
   ===================================================================== */
@media (max-width: 900px) {
    /* ۱) سرصفحه */
    .users-panel-header h2 { font-size: 12px; }
    /* آیکون‌ها تا گوشه‌ی چپ و چسبیده به هم: ۲۸px با ۲px فاصله */
    .users-header-actions { gap: 2px; left: 6px; }
    .users-panel-header .users-header-actions { height: 28px; }
    .users-header-actions .user-action-icon-button {
        width: 28px;
        height: 28px;
        padding: 2px;
    }
    .users-header-actions .user-action-icon-button img { width: 24px; height: 24px; }
    .users-header-actions .user-import-icon { height: 28px; }
    .users-header-actions .user-import-icon { width: 28px; padding: 2px; }
    .users-header-actions .user-import-icon img { width: 24px; height: 24px; }
    .users-header-actions .user-import-actions { gap: 0; }
    .users-title-group { gap: 6px; }
    .users-title-group .user-status-filter { width: 28px; height: 28px; }
    .users-title-group .user-status-filter img { width: 24px; height: 24px; }
    /* ذره‌بین هم — قاعده‌ی کوچک‌کردن فقط برای صفحه‌ی شرکت‌ها نوشته شده بود
       (.companies-title-group)، پس اینجا ۳۴ پیکسل مانده بود و همان روی
       عنوان می‌افتاد. */
    .users-title-group .company-search-toggle { width: 30px; height: 30px; padding: 2px; }
    .users-title-group .company-search-toggle img { width: 22px; height: 22px; }

}

/* =====================================================================
   موبایل — سرصفحه‌ی «مدیریت فیش‌های حقوقی» (یک بلوک برای این پنل)
     ردیف ۱: عنوان + ذره‌بین
     ردیف ۲: کادرِ جست‌وجو تمام‌عرض (وقتی باز است)
     ردیف ۳: آیکونِ ثبت فایل + شرکت / سال / ماه، هم‌عرضِ پنل
   ===================================================================== */
@media (max-width: 900px) {
    /* فرم display: contents می‌شود تا آیکونِ ثبت فایل (که در دسکتاپ کنارِ
       نامِ شرکت است) به ردیفِ عنوان بیاید و لیست‌ها با «شکنِ ردیف» به ردیفِ بعد. */
    .payroll-panel-header { justify-content: center; gap: 6px 4px; }
    .payroll-filter-form { display: contents; }
    .payroll-title-group { order: 1; gap: 6px; }
    .payroll-title-group h2 { font-size: 13px; }
    .payroll-title-group .company-search-toggle { width: 30px; height: 30px; padding: 2px; }
    .payroll-title-group .company-search-toggle img { width: 22px; height: 22px; }
    .payroll-filter-form .user-import-toggle { order: 2; width: 30px; height: 30px; padding: 2px; }
    .payroll-filter-form .user-import-toggle img { width: 26px; height: 26px; }
    .payroll-search-input { order: 3; flex: 0 0 100%; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; }
    .payroll-row-break { display: block; order: 4; flex: 0 0 100%; height: 0; margin-top: -6px; }
    /* چهار لیست در یک ردیف؛ برچسبِ کوتاه (data-short) روی دکمه می‌نشیند */
    .payroll-filter-form .pretty-select { order: 5; flex: 1 1 0; min-width: 0; }
    .payroll-filter-form .pretty-select:has(> .payroll-filter-company),
    .payroll-filter-form .pretty-select:has(> .payroll-status-filter) { flex: 1.3 1 0; min-width: 0; }
    .payroll-filter-form .pretty-select-trigger { min-width: 0; padding: 5px 4px; font-size: 11px; gap: 3px; }

    /* «فیش‌های حقوقی N مورد» و لیستِ پیش‌نویس‌ها در یک ردیف؛ دکمه‌ی انتشار (اگر بیاید) زیرشان */
    .payroll-list-head { flex-wrap: wrap; gap: 6px; }
    .payroll-count { flex: 0 0 auto; font-size: 12.5px; }
    .payroll-list-head .pretty-select { flex: 1 1 0; min-width: 0; }
    .payroll-list-head .pretty-select-trigger { min-width: 0; padding: 5px 6px; font-size: 11px; }

    /* قاعده‌ی دسکتاپِ «width: max-content» (با شناسه، پس قوی‌تر از .rt-stack)
       کارت‌ها را باریک‌تر از پنل و چسبیده به چپ می‌کرد؛ جدولِ فایل‌ها هم از
       پاپ‌آپ بیرون می‌زد. در حالتِ کارتی هر دو هم‌عرضِ ظرفشان می‌شوند. */
    #payrollTable.rt-stack,
    .upload-file-list table.rt-stack { width: 100%; min-width: 0; }

    /* کارتِ فیش: سه ستونِ هم‌عرض —
         ردیف ۱: شرکت | سال | ماه
         ردیف ۲: وضعیت | کد ملی | نام
         ردیف ۳: جمع مزایا | جمع کسور | تاریخ ثبت (عددی: ۱۴۰۵/۰۶/۲۰ تا در ۸۸px جا شود)
         ردیف ۴: مشاهده | دانلود PDF (هرکدام نصفِ عرض) */
    #payrollTable.rt-stack tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
    /* padding: 0 — قاعده‌ی دسکتاپِ «#payrollTable td { padding: 6px 8px }» (با شناسه) از
       .rt-stack قوی‌تر بود و ۸px خالی دو طرفِ هر کادر می‌انداخت؛ فاصله‌ی کادرها فقط gap است */
    #payrollTable.rt-stack tbody td { grid-column: span 2; padding: 0; font-size: 11px; }
    #payrollTable.rt-stack tbody td[data-label="مشاهده"],
    #payrollTable.rt-stack tbody td[data-label="دانلود PDF"] { grid-column: span 3; }
    #payrollTable.rt-stack tbody td::before { font-size: 10px; }
    /* کادرِ مقدار تک‌خطی و جمع‌تر؛ متنِ بلندتر از کادر با «…» کوتاه می‌شود */
    #payrollTable.rt-stack tbody td > .rt-box { padding: 6px 3px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* کارتِ حکم پرسنلی (#orderTable) — ۶ ستون؛ ترتیبِ خانه‌ها با order تنظیم می‌شود:
         ردیف ۱: ☐ ۱ | نام ۳ | شرکت ۲
         ردیف ۲: کد ملی | سال | ماه
         ردیف ۳: پست سازمانی ۳ | وضعیت ۳
         ردیف ۴: جمع حقوق مبنا | جمع مزایا | جمع کل */
    #orderTable.rt-stack tbody tr, #certTable.rt-stack tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
    #orderTable.rt-stack tbody td, #certTable.rt-stack tbody td { grid-column: span 2; padding: 0; font-size: 11px; }
    #orderTable.rt-stack tbody td:first-child, #certTable.rt-stack tbody td:first-child { grid-column: span 1; order: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
    #orderTable.rt-stack tbody td:first-child::before, #certTable.rt-stack tbody td:first-child::before { content: none; }
    #orderTable.rt-stack tbody td[data-label="نام و نام خانوادگی"], #certTable.rt-stack tbody td[data-label="نام و نام خانوادگی"] { grid-column: span 3; order: 2; }
    #orderTable.rt-stack tbody td[data-label="شرکت"], #certTable.rt-stack tbody td[data-label="شرکت"] { order: 3; }
    #orderTable.rt-stack tbody td[data-label="کد ملی"], #certTable.rt-stack tbody td[data-label="کد ملی"] { order: 4; }
    #orderTable.rt-stack tbody td[data-label="سال"], #certTable.rt-stack tbody td[data-label="سال"] { order: 5; }
    #orderTable.rt-stack tbody td[data-label="ماه"], #certTable.rt-stack tbody td[data-label="ماه"] { order: 6; }
    #orderTable.rt-stack tbody td[data-label="پست سازمانی"], #certTable.rt-stack tbody td[data-label="عنوان شغل"] { grid-column: span 3; order: 7; }
    #orderTable.rt-stack tbody td[data-label="وضعیت"], #certTable.rt-stack tbody td[data-label="وضعیت"] { grid-column: span 3; order: 8; }
    #orderTable.rt-stack tbody td[data-label="جمع حقوق مبنا"] { order: 9; }
    #orderTable.rt-stack tbody td[data-label="جمع مزایا"] { order: 10; }
    #orderTable.rt-stack tbody td[data-label="جمع کل"] { order: 11; }
    /* ستونِ «عملیات» (مشاهده) پایینِ کارت، تمام‌عرض */
    #orderTable.rt-stack tbody td[data-label="عملیات"], #certTable.rt-stack tbody td[data-label="عملیات"] { grid-column: 1 / -1; order: 12; display: flex; justify-content: center; align-items: center; }
    #orderTable.rt-stack tbody td[data-label="عملیات"]::before, #certTable.rt-stack tbody td[data-label="عملیات"]::before { content: none; }
    #orderTable.rt-stack tbody td > .rt-box, #certTable.rt-stack tbody td > .rt-box { padding: 6px 3px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #orderTable.rt-stack, #certTable.rt-stack { width: 100%; min-width: 0; }
    .order-publish-hint { flex: 0 0 100%; text-align: center; }

    /* کارتِ انواع وام/مساعده (#loanTypeTable) — ۱۲ ستون:
         ردیف ۱: ردیف ۲ | دسته ۳ | عنوان ۴ | حداکثر قسط ۳
         ردیف ۲: وضعیت ۴ | شرکت‌های فعال ۴ | عملیات ۴ (آیکونی) */
    #loanTypeTable.rt-stack { width: 100%; min-width: 0; }
    #loanTypeTable.rt-stack tbody tr { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px 4px; }
    #loanTypeTable.rt-stack tbody td { padding: 0; grid-column: span 4; font-size: 11px; }
    #loanTypeTable.rt-stack tbody td[data-label="ردیف"] { grid-column: span 2; }
    #loanTypeTable.rt-stack tbody td[data-label="دسته"],
    #loanTypeTable.rt-stack tbody td[data-label="حداکثر قسط"] { grid-column: span 3; }
    #loanTypeTable.rt-stack tbody td::before { font-size: 10px; }
    #loanTypeTable.rt-stack tbody td > .rt-box,
    #loanTypeTable.rt-stack tbody td > .leave-type-badge,
    #loanTypeTable.rt-stack tbody td > .leave-status { padding: 6px 3px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #loanTypeTable.rt-stack .loan-type-actions { min-height: 31px; }
    #loanTypeTable.rt-stack .loan-type-actions .fd-btn { width: 26px; height: 26px; }
    #loanTypeTable.rt-stack .loan-type-actions .fd-btn img { width: 24px; height: 24px; }

    /* فرمِ تعریف نوع در موبایل: عنوان تمام‌عرض، زیرش دسته | قسط | تیک */
    .loan-type-form { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto; gap: 6px; align-items: end; }
    .loan-type-title-field { grid-row: 1; grid-column: 1 / -1; }
    .loan-type-kind-field { grid-row: 2; grid-column: 1; }
    .loan-type-months-field { grid-row: 2; grid-column: 2; }
    .loan-type-form-actions { grid-row: 2; grid-column: 3; }
    .loan-type-months-field .lbl-long { display: none; }
    .loan-type-months-field .lbl-short { display: inline; }
    .loan-type-form .pretty-select-trigger { min-height: 36px; padding: 5px 6px; font-size: 12px; min-width: 0; }
    .loan-type-title-field input { height: 36px; }
    .loan-type-form-actions { height: 36px; }
    .loan-type-form-actions .fd-btn { width: 36px; height: 36px; }
    .loan-type-form-actions .fd-btn img { width: 30px; height: 30px; }

    /* پاپ‌آپِ ویرایش دستی تمام‌صفحه: بدنه‌ی فرم اسکرول می‌خورد و تیک/ضربدر
       همیشه پایینِ صفحه در دسترس‌اند؛ اقلام دو ستونه */
    .payroll-edit-modal { padding: 0; align-items: stretch; }
    .payroll-edit-box { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; }
    .payroll-edit-head { padding: 10px 12px; }
    .payroll-edit-head h3 { font-size: 13.5px; }
    .payroll-edit-meta { font-size: 11.5px; }
    .payroll-edit-body { padding: 10px 12px; }
    .payroll-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .payroll-edit-grid label { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .payroll-edit-grid input { height: 32px; padding: 4px 6px; font-size: 12px; }
    .payroll-edit-actions { padding: 8px; }
}

/* =====================================================================
   صفحه‌بندِ سراسریِ جدول‌ها (responsive-tables.js → ResponsiveTablePager)
   دسکتاپ: ۸ ردیف، زیرِ جدول · موبایل: ۴ ردیف، بالای کارت‌ها.
   ردیف‌های خارج از صفحه‌ی جاری کلاسِ rt-paged-out می‌گیرند (نه hidden، تا با
   فیلترهای هر صفحه تداخل نکند).
   ===================================================================== */
.rt-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; }
.rt-pager[hidden] { display: none; }
.rt-pager button { width: 32px; min-width: 32px; height: 30px; padding: 3px; font-size: 12px; line-height: 1; }
.rt-pager-label { min-width: 70px; text-align: center; font-size: 12px; }
tr.rt-paged-out { display: none !important; }
@media (max-width: 900px) {
    .rt-pager { margin: 0 0 8px; }
}

/* =====================================================================
   سرصفحه‌ی «درخواست‌ها» در گوشی‌های باریک (≤ ۴۲۰px)
   همان شکلِ ۵۴۰px، فقط جمع‌تر:
     ردیف ۱: عنوان (راست) · آیکون اکسل + سه تب (چپ)
     ردیف ۲: ماه/سال با فلش‌ها + چک‌باکسِ بازه — وسط
   در ۳۶۰px فضای مفید ≈ ۲۹۲px است؛ اندازه‌ها با همین بودجه انتخاب شده‌اند.
   هدر به‌جای فلکس، گرید می‌شود تا ردیف اول *هرگز* نشکند: ستونِ عنوان
   minmax(0,1fr) است و اگر جا کم بیاید عنوان با سه‌نقطه کوتاه می‌شود،
   نه اینکه تب‌ها به خط بعد بیفتند.
   ===================================================================== */
.tab-short,
.range-lbl-short { display: none; }

@media (max-width: 420px) {
    .doc-review-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 4px;
        row-gap: 6px;
        align-items: center;
    }
    .doc-review-head > .leave-head-title > h3 {
        grid-column: 1; grid-row: 1;
        min-width: 0;
        font-size: 10.5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .doc-review-head > .doc-review-filters {
        grid-column: 2; grid-row: 1;
        margin-inline-start: 0;
        flex-wrap: nowrap;
        gap: 3px;
    }
    .doc-review-head > .leave-head-title > .loan-filter-bar {
        grid-column: 1 / -1; grid-row: 2;
        justify-content: center;
        gap: 4px;
    }

    /* تب‌ها و آیکون اکسل */
    .doc-review-filter { padding: 3px 4px; font-size: 10px; border-radius: 6px; white-space: nowrap; }
    .doc-review-filters .loan-export-icon img { width: 16px; height: 16px; }
    .tab-long { display: none; }
    .tab-short { display: inline; }

    /* ردیف ۲: ماه/سال */
    .doc-review-head .loan-ym-wrap { gap: 4px; }
    .doc-review-head .leave-mm-group { gap: 2px; }
    .doc-review-head .leave-mm-nav { width: 28px; height: 28px; font-size: 12px; }
    /* سلکتورِ چهارکلاسه عمدی است: قاعده‌ی min-width: 88px بالاتر در همین فایل
       سه کلاس دارد و با دو کلاس شکست نمی‌خورد (اندازه‌گیری: دکمه ۷۷px می‌ماند
       و چک‌باکس به خط سوم می‌افتاد). */
    .doc-review-head .leave-head-title .loan-filter-bar .leave-mm-custom-btn {
        min-width: 0;
        width: auto;
        min-height: 22px;
        padding: 3px 6px;
        font-size: 11px;
        border-radius: 7px;
    }
    /* چک‌باکسِ بازه */
    .doc-review-head .date-range-toggle { gap: 3px; }
    .doc-review-head .date-range-checkbox { width: 15px; height: 15px; margin: 0; }
    .doc-review-head .date-range-toggle-text { font-size: 10.5px; }
    .range-lbl-long { display: none; }
    .range-lbl-short { display: inline; }
    /* دو کادرِ تاریخِ دلخواه، وقتی چک‌باکس فعال است */
    .doc-review-head .leave-head-title .loan-filter-bar .date-range-inputs input {
        min-width: 0; width: 92px; min-height: 22px; padding: 3px 6px; font-size: 11px;
    }
}

/* =====================================================================
   موبایل — کارتِ درخواست‌ها (.review-card): مرخصی/اضافه‌کار و وام/مساعده
   قبلاً هر خانه نصفِ عرض می‌گرفت و کارت خیلی بلند می‌شد (ردیف و توضیح و
   ضمیمه هر کدام یک ردیفِ کامل). گریدِ چهارستونی:
     ردیف (۱) | نام (۳)
     شرکت (۲) | نوع درخواست (۲)
     روز (۲)  | ساعت (۲)          ← ساعت یک کادر: «از ۰۷:۳۰ تا ۰۸:۰۰»
     توضیح (۴)
     ضمیمه (۲) | وضعیت (۲)
     عملیات — پاورقیِ کارت (لیبل راست، آیکون‌ها چپ)
   کادرهای هر ردیف هم‌ارتفاع و متن وسطِ ارتفاع — همان الگوی کارتِ کاربران.
   ===================================================================== */
@media (max-width: 900px) {
    .review-card.rt-stack tbody tr {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px 8px;
        padding: 10px;
        align-items: stretch;
    }
    /* پیش‌فرض: هر خانه نصفِ عرض (دوتایی در هر ردیف). این هم برای مرخصی است
       هم برای وام و مساعده — ستون‌های اقساط در تبِ تأییدشده‌ی وام هم همین را می‌گیرند. */
    .review-card.rt-stack tbody td { grid-column: span 2; }
    .review-card.rt-stack tbody td[data-label="ردیف"] { grid-column: span 1; }
    .review-card.rt-stack tbody td[data-label="نام و نام خانوادگی"] { grid-column: span 3; }
    .review-card.rt-stack tbody td[data-label="توضیح"],
.review-card.rt-stack tbody td[data-label="عملیات"] { grid-column: 1 / -1; }

    /* خانه: ستونِ فلکس تا کادرِ مقدار بقیه‌ی ارتفاع را بگیرد */
    .review-card.rt-stack tbody td:not([data-label="عملیات"]) {
        display: flex;
        flex-direction: column;
    }
    .review-card.rt-stack tbody td::before { flex: 0 0 auto; font-size: 10.5px; margin-bottom: 3px; }
    .review-card.rt-stack tbody td > .rt-box,
.review-card.rt-stack tbody td > span:not(.rt-box),
.review-card.rt-stack tbody td > a {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2px 5px;
        padding: 6px 6px;
        font-size: 12px;
        line-height: 1.45;
    }
    /* وضعیت: نشان + «بازبین — تاریخ» + «علت» همه داخلِ یک کادر.
       قبلاً فقط نشان کادر داشت و دو خطِ small زیرش آویزان می‌ماند؛ کادرِ
       ضمیمه‌ی کناری هم تا تهِ ردیف کش می‌آمد و یک مستطیلِ خالیِ بلند می‌شد. */
    .review-card.rt-stack tbody td > .leave-status-wrap {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px;
        border: 1px solid var(--panel-border);
        border-radius: var(--radius-sm);
        background: var(--input-bg);
        font-size: 12px;
        line-height: 1.45;
        text-align: center;
    }
    .review-card.rt-stack tbody td > .leave-status-wrap .leave-status {
        border: 0; background: none; padding: 0; margin: 0;
    }
    .review-card.rt-stack tbody td > .leave-status-wrap br { display: none; }
    .review-card.rt-stack tbody td > .leave-status-wrap small {
        display: block; font-size: 10.5px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
    }

    /* درخواستِ بررسی‌شده عملیاتی ندارد (فقط «—») — پاورقیِ خالی حذف می‌شود */
    .review-card.rt-stack tbody td[data-label="عملیات"]:not(:has(.doc-review-actions)) { display: none; }
    /* لینک‌های ضمیمه کنارِ هم (فقط وقتی واقعاً لینک هست) */
    .review-card.rt-stack tbody td[data-label="ضمیمه"]:has(> a) { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; }
    .review-card.rt-stack tbody td[data-label="ضمیمه"]:has(> a)::before { flex: 0 0 100%; }
    /* بدون ضمیمه («—» در یک کادر): ستونی بماند تا کادر هم‌ارتفاعِ وضعیتِ کناری شود.
       اندازه‌گیری: در حالتِ ردیفی کادر ۴۶px می‌ماند و وضعیت ۶۴px — ۱۸px جای خالی. */

    /* پاورقیِ عملیات */
    .review-card.rt-stack tbody td[data-label="عملیات"] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
        padding-top: 8px;
        border-top: 1px solid var(--panel-border);
        white-space: nowrap;
        text-align: start;
    }
    .review-card.rt-stack tbody td[data-label="عملیات"]::before { display: block; margin: 0; margin-inline-end: auto; }
    .review-card.rt-stack tbody td[data-label="عملیات"] .doc-review-actions,
.review-card.rt-stack tbody td[data-label="عملیات"] .leave-review-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
    .review-card.rt-stack tbody td[data-label="عملیات"] .doc-review-btn { width: 30px; height: 30px; margin: 0; padding: 0; }
    .review-card.rt-stack tbody td[data-label="عملیات"] .doc-review-btn img { width: 30px; height: 30px; }
    /* وقتی درخواست بررسی شده و به‌جای آیکون «—» است: بی‌کادر */
    .review-card.rt-stack tbody td[data-label="عملیات"] > .rt-box { border: 0; background: none; padding: 0; }
}

/* جدولِ خالی در موبایل: نوارِ فشرده‌ی سرستون‌ها بالای پیامِ «موردی نیست» نماند */
@media (max-width: 900px) {
    table:has(> tbody > tr.rt-fullrow:only-child) > thead { display: none; }
}
/* =====================================================================
   طراحی اقلام (فیش حقوقی / حکم پرسنلی) — includes/field_designer_ui.php
   دسکتاپ: هر گروه یک ستون کنارِ هم (فیش ۳ ستون، حکم ۲ ستون) تا پنل کوتاه بماند؛
           هر آیتم یک ردیفِ باریک: عنوان + آیکون‌ها.
   موبایل: ستون‌ها زیرِ هم؛ آیتم‌های هر گروه کارت‌های کوچک، ۲ تا ۳ در هر ردیف.
   ===================================================================== */
.fd-head { gap: 10px 14px; }
.fd-head h2 { white-space: nowrap; }
/* فرمِ افزودن در خودِ سرصفحه (چپ) */
.fd-add-form { display: flex; align-items: center; gap: 6px; flex: 1 1 360px; max-width: 560px; margin: 0; margin-inline-start: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
.fd-add-label { flex: 1 1 160px; min-width: 0; height: 34px; padding: 5px 10px; font-size: 13px; }
.fd-add-form .pretty-select { flex: 0 0 170px; width: auto; }
.fd-add-form .pretty-select-trigger { min-height: 34px; padding: 5px 10px; font-size: 12.5px; }
.fd-add-form > select { height: 34px; }                  /* تا JS نرسیده */
.fd-add-btn { flex: 0 0 auto; width: 34px; height: 34px; padding: 1px; border: 0; background: transparent; cursor: pointer; }
.fd-add-btn img { display: block; width: 32px; height: 32px; object-fit: contain; }

/* ستون‌ها */
.fd-columns { display: grid; gap: 12px; align-items: start; }
.fd-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-columns-1 { grid-template-columns: minmax(0, 1fr); }
.fd-col { min-width: 0; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg-soft); }
.fd-col-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--panel-border); font-size: 13.5px; }
.fd-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--panel-bg); border: 1px solid var(--panel-border); color: var(--text-muted); font-size: 11.5px; font-weight: 700; }
.fd-list { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.fd-sub { margin: 4px 0 0; padding: 0 4px; color: var(--text-muted); font-size: 11.5px; font-weight: 700; }
.fd-sub:first-child { margin-top: 0; }
.fd-empty { padding: 10px; color: var(--text-muted); font-size: 12.5px; text-align: center; }

/* آیتم: عنوان راست، آیکون‌ها چپ */
.fd-item { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px 4px 4px; border: 1px solid var(--panel-border); border-radius: 9px; background: var(--panel-bg); }
.fd-item.is-inactive .fd-label { color: var(--text-muted); }
.fd-edit-form { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.fd-label { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.fd-item-vis .fd-label { padding-inline-start: 4px; }
.fd-label-input, .fd-group-select, .fd-body-input { display: none; }
/* علامت نقل‌قول برای ویرایشِ متنِ اقلام ثابت (شرح قرارداد، شرح وظایف، …) */
.fd-quote-mark { font-size: 22px; font-weight: 900; line-height: 1; color: var(--accent); font-family: Georgia, "Times New Roman", serif; letter-spacing: -2px; }
.fd-actions { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.fd-actions form { display: inline-flex; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.fd-static, .fd-confirm { display: inline-flex; align-items: center; gap: 2px; }
.fd-static[hidden], .fd-confirm[hidden], .fd-btn[hidden] { display: none !important; }
.fd-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 2px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.fd-btn img { display: block; width: 26px; height: 26px; object-fit: contain; }
.fd-toggle img { width: 28px; height: 28px; }
/* دو فلشِ مثلثیِ بالا/پایین، روی هم، برای جابه‌جایی ردیف */
.fd-move { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin-inline-end: 2px; }
.fd-move form { display: inline-flex; margin: 0; }
.fd-move-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 15px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--text-muted); font-size: 9px; line-height: 1; cursor: pointer; }
.fd-move-btn:hover:not([disabled]) { color: var(--accent); background: var(--button-bg); }
.fd-move-btn[disabled] { opacity: .25; cursor: default; }
/* ناحیه‌ی لمسِ بزرگ‌تر از ظاهرِ فلش (بدون هم‌پوشانیِ عمودی دو فلش) */
.fd-move-btn::before { content: ''; position: absolute; inset: 0 -8px; }
.fd-btn:focus-visible, .fd-move-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* جابه‌جایی: آیتم‌ها لحظه‌ای برجسته می‌شوند و روی بقیه می‌لغزند */
.fd-item { position: relative; will-change: transform; }
/* فعال/غیرفعال: ضربه‌ی کوتاهِ آیکون و گذارِ نرمِ کمرنگی */
.fd-item .fd-label { transition: color .25s ease, opacity .25s ease; }
.fd-toggle-pop img { animation: fd-toggle-pop .32s ease; }
@keyframes fd-toggle-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fd-toggle-pop img { animation: none; } }
.fd-item.fd-moved { z-index: 2; box-shadow: 0 6px 16px rgba(0, 0, 0, .14); border-color: var(--accent); transition: box-shadow .3s ease, border-color .3s ease; }
.fd-delete-form { position: relative; }

/* حالتِ ویرایش: کادرِ عنوان به‌جای عنوان، تمام‌عرض؛ گروه ویرایش نمی‌شود */
/* ویرایشِ عنوان: کادر کوتاه‌تر می‌شود و تیک/ضربدر در ادامه‌ی همان ردیف می‌نشینند */
.fd-item.editing { flex-wrap: nowrap; }
.fd-item.editing .fd-edit-form { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.fd-item.editing .fd-label { display: none; }
.fd-item.editing .fd-label-input { display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: 30px; padding: 3px 8px; font-size: 13px; }
.fd-item.editing .fd-actions { flex: 0 0 auto; margin-inline-start: 4px; }
/* ویرایشِ متن (نقل‌قول) textarea تمام‌عرض می‌خواهد، پس فقط آن حالت می‌شکند */
.fd-item.editing-body { flex-wrap: wrap; }
.fd-item.editing-body .fd-edit-form { flex: 1 1 100%; flex-wrap: wrap; }
/* ویرایشِ متن (نقل‌قول): عنوان ثابت می‌ماند و textarea تمام‌عرض زیرش باز می‌شود */
.fd-item.editing-body .fd-label { display: block; flex: 1 1 100%; }
.fd-item.editing-body .fd-label-input { display: none; }
.fd-item.editing-body .fd-body-input { display: block; flex: 1 1 100%; width: 100%; min-height: 110px; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.9; resize: vertical; }

/* پنلِ نمایش/عدم‌نمایش بر اساس شرکت: کادرِ جست‌وجوی شرکت روبه‌روی عنوان، در سرصفحه */
.fd-company-form { display: flex; flex: 1 1 300px; max-width: 420px; margin: 0; margin-inline-start: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
.fd-company-form .typeahead-wrap { display: block; width: 100%; }
.fd-company-form .typeahead-input { width: 100%; height: 34px; padding: 5px 10px; font-size: 13px; text-align: center; }
.fd-company-form .typeahead-dropdown { right: 0; left: 0; width: 100%; max-width: 100%; }

@media (max-width: 900px) {
    /* سرصفحه: عنوان یک ردیف، فرمِ افزودن تمام‌عرض زیرِ آن */
    .fd-head { gap: 8px; }
    .fd-head h2 { font-size: 14px; }
    .fd-add-form { flex: 1 1 100%; max-width: none; margin-inline-start: 0; gap: 4px; }
    .fd-add-label { flex: 1 1 0; height: 32px; font-size: 12px; }
    .fd-add-form .pretty-select { flex: 0 0 34%; }
    .fd-add-form .pretty-select-trigger { min-height: 32px; min-width: 0; padding: 4px 6px; font-size: 11.5px; }
    .fd-add-btn { width: 30px; height: 30px; }
    .fd-add-btn img { width: 28px; height: 28px; }
    .fd-company-form { flex: 1 1 100%; max-width: none; margin-inline-start: 0; }
    .fd-company-form .typeahead-input { height: 32px; font-size: 12px; }

    /* ستون‌ها زیرِ هم؛ آیتم‌ها کارتِ کوچک — ۳ تا در ردیف (۲ تا وقتی عنوان‌ها بلندند) */
    .fd-columns-3, .fd-columns-2 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .fd-col-title { padding: 7px 10px; font-size: 12.5px; }
    .fd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 5px; padding: 6px; }
    .fd-sub { grid-column: 1 / -1; }
    .fd-empty { grid-column: 1 / -1; }
    .fd-item { flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 5px 4px 3px; }
    .fd-edit-form { flex-direction: column; align-items: stretch; }
    .fd-label { flex: 1 1 auto; font-size: 12px; line-height: 1.6; text-align: center; white-space: normal; overflow-wrap: anywhere; }
    .fd-item-vis .fd-label { padding-inline-start: 0; }
    .fd-actions { flex-wrap: wrap; justify-content: center; gap: 1px; margin-top: auto; }
    .fd-item > .fd-edit-form { flex: 1 1 auto; }
    .fd-static { flex-wrap: wrap; justify-content: center; gap: 1px; }
    .fd-btn { width: 28px; height: 30px; padding: 1px; }
    .fd-btn img { width: 23px; height: 23px; }
    .fd-toggle img { width: 25px; height: 25px; }
    .fd-move { flex-direction: row; gap: 0; margin: 0; }
    .fd-move-btn { width: 22px; height: 30px; font-size: 10px; }
    .fd-move-btn::before { inset: -2px; }
    /* آیتمِ در حالِ ویرایش کلِ ردیف را می‌گیرد تا کادرها جا شوند */
    .fd-item.editing { grid-column: 1 / -1; }
    /* در ستونِ فلکسی، flex-basis به ارتفاع می‌خورد؛ پس کادرها ارتفاعِ ثابت و عرضِ کامل می‌گیرند */
    /* موبایل: در ویرایشِ عنوان هم کادر و تیک/ضربدر کنارِ هم */
    .fd-item.editing:not(.editing-body) { flex-direction: row; align-items: center; }
    .fd-item.editing:not(.editing-body) .fd-edit-form { flex-direction: row; }
    .fd-item.editing .fd-label-input { flex: 1 1 auto; width: 100%; height: 30px; font-size: 12px; }
    .fd-item.editing-body .fd-body-input { flex: 0 0 auto; height: auto; }
    .fd-item.editing .fd-actions { margin: 0; }
}
/* =====================================================================
   صفحه‌ی «قالب پیام‌ها» (admin/sms_templates.php)
   کارت‌ها: چهار ستون در دسکتاپ، یک ستون در موبایل. ویرایش درجا داخل هر کارت.
   ===================================================================== */

/* نوار وضعیتِ پنل پیامکی */
.sms-panel-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 14px; margin: 0 0 14px; background: var(--panel-bg-soft); border: 1px solid var(--panel-border); border-radius: var(--radius); font-size: 13px; line-height: 1.8; }
.sms-panel-strip b { font-weight: 600; }
.sms-panel-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: var(--text-muted); vertical-align: middle; }
.sms-panel-strip.is-live .sms-panel-dot { background: var(--success); }
.sms-panel-strip.is-sandbox .sms-panel-dot { background: var(--warning); }
.sms-panel-strip.is-off .sms-panel-dot { background: var(--danger); }
.sms-panel-muted { color: var(--text-muted); }
.sms-ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- شبکه‌ی کارت‌ها ---------- */
/* بدون align-items:start تا کارت‌های هر ردیف هم‌ارتفاع شوند */
.sms-tpl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sms-tpl-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; background: var(--bg); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.sms-tpl-card.is-off .sms-tpl-body { opacity: .6; }
.sms-tpl-card.is-editing { border-color: var(--accent); box-shadow: var(--shadow-md); }

.sms-tpl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 26px; }
.sms-tpl-head h3 { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.sms-tpl-badge { flex: 0 0 auto; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; line-height: 1.9; white-space: nowrap; }
.sms-tpl-badge.is-custom { background: var(--panel-bg); color: var(--text-muted); }
/* شرحِ کاربرد فضای باقی‌مانده‌ی کارت را پر می‌کند تا کادرِ متن و ردیفِ برچسب‌ها
   در همه‌ی کارت‌ها هم‌تراز بمانند */
.sms-tpl-usage { flex: 1 1 auto; margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.8; }
/* ارتفاعِ کادرِ متن در همه‌ی کارت‌ها یکسان است؛ متنِ بلندتر داخلِ خودش اسکرول می‌خورد */
.sms-tpl-body { flex: 0 0 auto; height: 116px; margin: 0; padding: 10px 12px; overflow-y: auto; background: var(--panel-bg-soft); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
.sms-var { display: inline-block; margin: 0 1px; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12px; line-height: 1.7; white-space: nowrap; }
.sms-tpl-note { margin: 0; color: var(--warning); font-size: 11.5px; line-height: 1.8; }

/* ردیفِ برچسب‌ها درست زیرِ کادرِ متن می‌ماند (نه چسبیده، نه پرت‌شده به کفِ کارت) */
.sms-tpl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; }
.sms-tpl-stats { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.sms-tpl-tag { color: var(--text-muted); font-size: 11px; white-space: nowrap; }

/* ردیف دکمه‌ها؛ فرم‌های تک‌دکمه‌ای نباید ظاهرِ پنل بگیرند */
.sms-tpl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex: 1 0 auto; margin-inline-start: auto; }
.sms-tpl-inline-form { display: inline-flex; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.sms-tpl-actions .fd-btn { width: 30px; height: 30px; }
.sms-tpl-actions .fd-btn img { width: 26px; height: 26px; }
/* آیکون چت و دکمه‌های تیک و ضربدر کوچک‌تر از آیکون‌های سه‌بعدیِ کناری‌اند.
   وزنِ گزینشگر باید از «.sms-tpl-actions .fd-btn img» بالاتر بماند. */
.sms-tpl-actions .fd-btn.sms-tpl-test-btn img { width: 20px; height: 20px; }
.sms-tpl-edit .sms-tpl-actions .fd-btn { width: 26px; height: 26px; }
.sms-tpl-edit .sms-tpl-actions .fd-btn img { width: 22px; height: 22px; }

/* ---------- ویرایش درجا ---------- */
/* [hidden] باید بر display غلبه کند، وگرنه نمای عادی و فرم با هم دیده می‌شوند */
.sms-tpl-view[hidden],
.sms-tpl-edit[hidden] { display: none !important; }
.sms-tpl-edit { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.sms-tpl-title-input { width: 100%; height: 34px; box-sizing: border-box; font-size: 13px; }
/* عنوانِ «قالب جدید» کوتاه‌تر است تا آیکونِ راهنما کنارش جا شود */
.sms-tpl-title-row { align-items: center; gap: 6px; }
.sms-tpl-title-input.is-compact { flex: 1 1 auto; min-width: 0; height: 32px; font-size: 12.5px; }
.sms-vars-help { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 14px; font-weight: bold; line-height: 1; cursor: pointer; }
.sms-vars-help:hover,
.sms-vars-help:focus-visible { background: var(--accent); color: var(--accent-text); }

/* پاپ‌آورِ تأیید حذف در این صفحه هم‌شکلِ پاپ‌آورِ شماره است: متن بالا، تیک و
   ضربدر زیرش. فقط وقتی اعمال می‌شود که از همین صفحه باز شده باشد. */
body.sms-tpl-page .delete-action-box { flex-direction: column; gap: 8px; min-width: 210px; }
body.sms-tpl-page .delete-action-box p { white-space: normal; line-height: 1.8; }
body.sms-tpl-page .delete-action-buttons button { width: 32px; height: 32px; }
body.sms-tpl-page .delete-action-buttons img { width: 26px; height: 26px; }

/* ---------- پاپ‌آورِ مرجعِ کدها ---------- */
.sms-vars-popover { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.sms-vars-pop-box { position: absolute; width: 288px; max-width: calc(100vw - 16px); padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg-soft); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.sms-vars-pop-head { margin: 0 0 8px; color: var(--text); font-size: 12px; font-weight: bold; }
.sms-vars-pop-list { display: flex; flex-direction: column; row-gap: 4px; overflow-y: auto; }
.sms-vars-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--bg); }
.sms-vars-row.is-system-only { opacity: .6; }
.sms-vars-code { flex: 0 0 auto; direction: ltr; unicode-bidi: isolate; color: var(--accent); font-family: inherit; font-size: 12px; white-space: nowrap; }
.sms-vars-label { flex: 1 1 auto; min-width: 0; color: var(--text-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-vars-copy { flex: 0 0 auto; padding: 2px 9px; border: 1px solid var(--panel-border); border-radius: 999px; background: var(--panel-bg); color: var(--text); font: inherit; font-size: 11px; line-height: 1.7; cursor: pointer; }
.sms-vars-copy:hover { background: var(--button-bg-hover); }
.sms-vars-copy.is-done { border-color: var(--success); color: var(--success); }
.sms-vars-pop-note { margin: 8px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.7; }
/* هم‌اندازه‌ی کادرِ نمایش تا کارت هنگام ویرایش بالا و پایین نپرد */
.sms-tpl-body-input { width: 100%; height: 116px; box-sizing: border-box; padding: 10px 12px; overflow-y: auto; font-size: 13px; line-height: 1.95; resize: none; }
.sms-var-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sms-var-chip { padding: 3px 9px; border: 1px dashed var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 11.5px; line-height: 1.6; cursor: pointer; }
.sms-var-chip:hover,
.sms-var-chip:focus-visible { background: var(--accent); color: var(--accent-text); }

/* ---------- کارت «قالب جدید» ---------- */
.sms-tpl-new { border-style: dashed; }
.sms-tpl-new-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 96px; padding: 10px; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--accent); font: inherit; font-size: 14px; font-weight: bold; cursor: pointer; }
.sms-tpl-new-btn:hover { background: var(--accent-soft); }
.sms-tpl-plus { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--accent); border-radius: 50%; font-size: 20px; line-height: 1; }
.sms-tpl-new.is-editing .sms-tpl-new-btn { min-height: 0; margin-bottom: 4px; }

/* ---------- پاپ‌آورِ ارسال آزمایشی (هم‌شکلِ پاپ‌آورِ تأیید حذف) ---------- */
.sms-test-popover { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.sms-test-pop-box { position: absolute; min-width: 210px; padding: 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg-soft); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); text-align: center; }
.sms-test-pop-label { margin: 0; color: var(--text); font-size: 12px; white-space: nowrap; }
.sms-test-pop-input { width: 150px; height: 34px; box-sizing: border-box; direction: ltr; text-align: center; font-size: 14px; }
.sms-test-pop-buttons { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sms-test-pop-buttons button { width: 32px; height: 32px; padding: 3px; border: 0; background: transparent; cursor: pointer; }
.sms-test-pop-buttons img { width: 26px; height: 26px; object-fit: contain; }

/* دسکتاپ چهارستونه می‌ماند؛ فقط وقتی کارت‌ها از ۲۲۰px باریک‌تر می‌شوند ستون کم می‌شود */
@media (max-width: 900px) {
    .sms-tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    /* موبایل: هر ردیف یک قالب، و «قالب جدید» بالای همه */
    .sms-panel-strip { gap: 2px 12px; padding: 8px 10px; font-size: 12px; }
    .sms-tpl-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .sms-tpl-card { padding: 12px; }
    .sms-tpl-new { order: -1; }
    .sms-tpl-new-btn { min-height: 64px; }
    /* ۱۶px جلوی بزرگ‌نماییِ خودکارِ iOS هنگام تایپ را می‌گیرد */
    .sms-tpl-title-input,
    .sms-tpl-body-input,
    .sms-test-pop-input { font-size: 16px; }
    .sms-tpl-title-input { height: 40px; }
    .sms-tpl-actions .fd-btn { width: 32px; height: 32px; }
    .sms-tpl-actions .fd-btn img { width: 27px; height: 27px; }
    .sms-tpl-actions .fd-btn.sms-tpl-test-btn img { width: 21px; height: 21px; }
    .sms-tpl-edit .sms-tpl-actions .fd-btn { width: 28px; height: 28px; }
    .sms-tpl-edit .sms-tpl-actions .fd-btn img { width: 23px; height: 23px; }
}

/* ردیفِ دکمه‌ها در همه‌ی کارت‌ها هم‌ارتفاع بنشیند، چه کارت یادداشتِ هشدار داشته باشد چه نه:
   بدنه‌ی کارت ستونِ فلکسی است و ردیفِ پایین به کفِ کارت چسبیده می‌ماند */
.sms-tpl-view:not([hidden]) { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.sms-tpl-view .sms-tpl-foot { margin-top: auto; }