@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #050910;
    --sidebar: #080e17;
    --card: #0d141f;
    --card2: #111b29;
    --input-bg: var(--card2);
    --blue: #1687ff;
    --blue-dark: #0065d5;
    --text: #f4f7fb;
    --muted: #8795a8;
    --border: rgba(255,255,255,.08);
    --green: #22c982;
    --red: #ff5365;
    --orange: #ffae42;
}

/* تم روشن آبی/سفید */
[data-theme="light"] {
    --bg: #f4f8fd;
    --sidebar: #ffffff;
    --card: #ffffff;
    --card2: #eef4fc;
    --input-bg: #eef4fc;
    --blue: #1687ff;
    --blue-dark: #0065d5;
    --text: #10233f;
    --muted: #5c7291;
    --border: rgba(20,80,150,.12);
    --green: #17a06a;
    --red: #e14257;
    --orange: #d98922;
}
[data-theme="light"] body {
    background:
        radial-gradient(circle at 80% 0%, rgba(20,135,255,.08), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(20,135,255,.05), transparent 30%),
        var(--bg);
}
[data-theme="light"] .sidebar { box-shadow: 0 0 30px rgba(20,80,150,.06); }
[data-theme="light"] .stat-icon, [data-theme="light"] .list-icon, [data-theme="light"] .menu-icon { background: rgba(20,135,255,.08); }

/* ============================================================
   تم «شرکتی / مالی» — تیره
   ============================================================ */
[data-theme="corporate"] {
    --bg: #0a1220;
    --sidebar: #0c1626;
    --card: #101d30;
    --card2: #16263c;
    --input-bg: #16263c;
    --blue: #5c7fb3;
    --blue-dark: #3f5c86;
    --text: #e7ecf3;
    --muted: #7e8fa8;
    --border: rgba(160,185,220,.14);
    --green: #2fa87a;
    --red: #dd5568;
    --orange: #c99348;
    --accent2: #b6913f;
}
[data-theme="corporate"] body {
    background:
        radial-gradient(circle at 85% 0%, rgba(92,127,179,.10), transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(182,145,63,.05), transparent 30%),
        var(--bg);
}

/* ============================================================
   تم «شرکتی / مالی» — روشن
   ============================================================ */
[data-theme="corporate-light"] {
    --bg: #eef1f6;
    --sidebar: #ffffff;
    --card: #ffffff;
    --card2: #e8edf4;
    --input-bg: #e8edf4;
    --blue: #35507f;
    --blue-dark: #253a5e;
    --text: #182437;
    --muted: #5b6b82;
    --border: rgba(24,36,55,.10);
    --green: #1f8a5f;
    --red: #c8465a;
    --orange: #a97328;
    --accent2: #96762f;
}
[data-theme="corporate-light"] body {
    background:
        radial-gradient(circle at 85% 0%, rgba(53,80,127,.05), transparent 35%),
        var(--bg);
}
[data-theme="corporate-light"] .sidebar { box-shadow: 0 0 30px rgba(24,36,55,.05); }

/* امضای تم مالی: اعداد و مبالغ هم‌عرض می‌شوند (حس صورت‌حساب/دفتر مالی) و کمی جدی‌تر/کم‌گردتر */
[data-theme="corporate"] .value,
[data-theme="corporate"] .stat-card .value,
[data-theme="corporate"] .total-cell,
[data-theme="corporate-light"] .value,
[data-theme="corporate-light"] .stat-card .value,
[data-theme="corporate-light"] .total-cell {
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}
[data-theme="corporate"] .card, [data-theme="corporate"] .card-box, [data-theme="corporate"] .stat-card,
[data-theme="corporate-light"] .card, [data-theme="corporate-light"] .card-box, [data-theme="corporate-light"] .stat-card {
    border-radius: 10px;
}
[data-theme="corporate"] .btn, [data-theme="corporate-light"] .btn { border-radius: 6px; }
[data-theme="corporate"] .menu-item, [data-theme="corporate-light"] .menu-item { border-radius: 8px; }
[data-theme="corporate"] .stat-card, [data-theme="corporate-light"] .stat-card {
    border-top: 2px solid var(--accent2);
}
[data-theme="corporate"] .menu-item.active, [data-theme="corporate-light"] .menu-item.active {
    background: linear-gradient(90deg, rgba(182,145,63,.18), transparent);
    border: 1px solid rgba(182,145,63,.22);
    color: var(--accent2);
}
[data-theme="corporate"] .data-table thead th, [data-theme="corporate-light"] .data-table thead th {
    border-bottom: 2px solid var(--accent2);
}

/* ============================================================
   تم «کارگاهی» — گرم، نارنجی ایمنی، الهام‌گرفته از محیط کارگاه/پروژه
   عمداً در همه‌چیز (رنگ، فرم، حس) با دو تم قبلی متفاوت است
   ============================================================ */
[data-theme="field"] {
    --bg: #1c1512;
    --sidebar: #221a16;
    --card: #2a201b;
    --card2: #362a23;
    --input-bg: #362a23;
    --blue: #ff7a29;
    --blue-dark: #d4611a;
    --text: #f7ede4;
    --muted: #ab9686;
    --border: rgba(255,180,120,.16);
    --green: #5cb87d;
    --red: #e5636a;
    --orange: #e8a33d;
    --accent2: #ffc02e;
}
[data-theme="field"] body {
    background:
        radial-gradient(circle at 85% 0%, rgba(255,122,41,.10), transparent 35%),
        radial-gradient(circle at 5% 100%, rgba(255,192,46,.06), transparent 30%),
        var(--bg);
}
[data-theme="field"] .sidebar { box-shadow: 0 0 30px rgba(255,122,41,.05); }

/* اشکال گردتر و دوستانه‌تر، برعکس تم شرکتی که تیزتر بود */
[data-theme="field"] .card, [data-theme="field"] .card-box, [data-theme="field"] .stat-card { border-radius: 20px; }
[data-theme="field"] .btn { border-radius: 14px; font-weight: 700; }
[data-theme="field"] .menu-item { border-radius: 14px; }

/* امضای تم: نوار راه‌راه هشدار (hazard stripe) روی کارت‌های آماری */
[data-theme="field"] .stat-card {
    border-top: none;
    position: relative;
    overflow: hidden;
}
[data-theme="field"] .stat-card::before {
    content: '';
    position: absolute; top: 0; right: 0; left: 0; height: 5px;
    background: repeating-linear-gradient(-45deg, var(--blue), var(--blue) 8px, var(--accent2) 8px, var(--accent2) 16px);
}
[data-theme="field"] .menu-item.active {
    background: linear-gradient(90deg, rgba(255,122,41,.22), rgba(255,122,41,.03));
    border: 1px solid rgba(255,122,41,.25);
    color: var(--blue);
}
[data-theme="field"] .stat-icon, [data-theme="field"] .list-icon, [data-theme="field"] .menu-icon {
    background: rgba(255,122,41,.14);
}
[data-theme="field"] .slider-fill { background: rgba(255,122,41,.22); }
[data-theme="field"] .data-table thead th {
    border-bottom: 2px dashed rgba(255,180,120,.35);
}

/* ============================================================
   تکمیل جفت «کارگاهی» — نسخه روشن
   ============================================================ */
[data-theme="field-light"] {
    --bg: #fbf3ea;
    --sidebar: #ffffff;
    --card: #ffffff;
    --card2: #f6ead9;
    --input-bg: #f6ead9;
    --blue: #d4611a;
    --blue-dark: #a94e14;
    --text: #2e2013;
    --muted: #8a7259;
    --border: rgba(180,110,40,.16);
    --green: #2f8f5b;
    --red: #c8465a;
    --orange: #b8791f;
    --accent2: #b8860b;
}
[data-theme="field-light"] body {
    background:
        radial-gradient(circle at 85% 0%, rgba(212,97,26,.08), transparent 35%),
        radial-gradient(circle at 5% 100%, rgba(184,134,11,.06), transparent 30%),
        var(--bg);
}
[data-theme="field-light"] .sidebar { box-shadow: 0 0 30px rgba(180,110,40,.06); }
[data-theme="field-light"] .card, [data-theme="field-light"] .card-box, [data-theme="field-light"] .stat-card { border-radius: 20px; }
[data-theme="field-light"] .btn { border-radius: 14px; font-weight: 700; }
[data-theme="field-light"] .menu-item { border-radius: 14px; }
[data-theme="field-light"] .stat-card { border-top: none; position: relative; overflow: hidden; }
[data-theme="field-light"] .stat-card::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0; height: 5px;
    background: repeating-linear-gradient(-45deg, var(--blue), var(--blue) 8px, var(--accent2) 8px, var(--accent2) 16px);
}
[data-theme="field-light"] .menu-item.active {
    background: linear-gradient(90deg, rgba(212,97,26,.14), rgba(212,97,26,.02));
    border: 1px solid rgba(212,97,26,.2); color: var(--blue);
}
[data-theme="field-light"] .stat-icon, [data-theme="field-light"] .list-icon, [data-theme="field-light"] .menu-icon { background: rgba(212,97,26,.10); }
[data-theme="field-light"] .data-table thead th { border-bottom: 2px dashed rgba(180,110,40,.3); }

/* ============================================================
   تم «اقیانوسی» — تیره: آبی نفتی + فیروزه‌ای درخشان، حس تکنولوژی/آرامش
   امضا: کارت‌های شیشه‌ای (glass) با درخشش نرم فیروزه‌ای در گوشه‌ها
   ============================================================ */
[data-theme="ocean"] {
    --bg: #061821;
    --sidebar: #071e28;
    --card: #0b2530;
    --card2: #0f2e3b;
    --input-bg: #0f2e3b;
    --blue: #14c9c0;
    --blue-dark: #0e9a93;
    --text: #eaf7f6;
    --muted: #7fa6a8;
    --border: rgba(120,220,210,.14);
    --green: #34c98f;
    --red: #ff6b6b;
    --orange: #ffb454;
    --accent2: #5fd0ff;
}
[data-theme="ocean"] body {
    background:
        radial-gradient(circle at 85% -5%, rgba(20,201,192,.16), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(95,208,255,.08), transparent 35%),
        var(--bg);
}
[data-theme="ocean"] .sidebar { box-shadow: 0 0 40px rgba(20,201,192,.06); border-left: 1px solid var(--border); }
[data-theme="ocean"] .card, [data-theme="ocean"] .card-box, [data-theme="ocean"] .stat-card {
    border-radius: 18px; border: 1px solid var(--border);
    background: linear-gradient(160deg, var(--card), var(--card2));
}
[data-theme="ocean"] .btn { border-radius: 24px; }
[data-theme="ocean"] .btn.approve { background: linear-gradient(135deg, var(--blue), var(--accent2)); }
[data-theme="ocean"] .menu-item { border-radius: 24px; }
[data-theme="ocean"] .menu-item.active {
    background: linear-gradient(90deg, rgba(20,201,192,.20), rgba(95,208,255,.04));
    border: 1px solid rgba(20,201,192,.3); color: var(--blue);
    box-shadow: 0 4px 18px rgba(20,201,192,.15);
}
[data-theme="ocean"] .stat-icon, [data-theme="ocean"] .list-icon, [data-theme="ocean"] .menu-icon {
    background: rgba(20,201,192,.14); color: var(--blue);
}
[data-theme="ocean"] .stat-card { border-top: none; position: relative; overflow: hidden; }
[data-theme="ocean"] .stat-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at 100% 0%, rgba(95,208,255,.14), transparent 55%);
}
[data-theme="ocean"] .logo-icon { background: linear-gradient(135deg, var(--blue), var(--accent2)); }
[data-theme="ocean"] .avatar { background: linear-gradient(135deg, var(--blue), var(--accent2)); }
[data-theme="ocean"] .data-table thead th { border-bottom: 2px solid rgba(20,201,192,.35); }

/* ============================================================
   تم «اقیانوسی» — روشن: فیروزه‌ای شفاف روی زمینه سفید/نعنایی
   ============================================================ */
[data-theme="ocean-light"] {
    --bg: #eef9fa;
    --sidebar: #ffffff;
    --card: #ffffff;
    --card2: #e3f6f5;
    --input-bg: #e3f6f5;
    --blue: #0d9c94;
    --blue-dark: #087a73;
    --text: #0b2530;
    --muted: #4f7d7f;
    --border: rgba(13,156,148,.14);
    --green: #12946a;
    --red: #d64545;
    --orange: #c07816;
    --accent2: #0284c7;
}
[data-theme="ocean-light"] body {
    background:
        radial-gradient(circle at 85% -5%, rgba(13,156,148,.08), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(2,132,199,.05), transparent 35%),
        var(--bg);
}
[data-theme="ocean-light"] .sidebar { box-shadow: 0 0 30px rgba(13,156,148,.06); }
[data-theme="ocean-light"] .card, [data-theme="ocean-light"] .card-box, [data-theme="ocean-light"] .stat-card { border-radius: 18px; }
[data-theme="ocean-light"] .btn { border-radius: 24px; }
[data-theme="ocean-light"] .btn.approve { background: linear-gradient(135deg, var(--blue), var(--accent2)); }
[data-theme="ocean-light"] .menu-item { border-radius: 24px; }
[data-theme="ocean-light"] .menu-item.active {
    background: linear-gradient(90deg, rgba(13,156,148,.14), rgba(2,132,199,.03));
    border: 1px solid rgba(13,156,148,.25); color: var(--blue);
}
[data-theme="ocean-light"] .stat-icon, [data-theme="ocean-light"] .list-icon, [data-theme="ocean-light"] .menu-icon { background: rgba(13,156,148,.10); }
[data-theme="ocean-light"] .logo-icon, [data-theme="ocean-light"] .avatar { background: linear-gradient(135deg, var(--blue), var(--accent2)); }
[data-theme="ocean-light"] .data-table thead th { border-bottom: 2px solid rgba(13,156,148,.3); }

/* ============================================================
   تم «بنفش مدرن» — تیره: بنفش/صورتی، حس اپلیکیشن‌های SaaS جدید
   امضا: دکمه‌ها و آیتم فعال با گرادیان بنفش→صورتی و درخشش نرم
   ============================================================ */
[data-theme="violet"] {
    --bg: #0f0a1f;
    --sidebar: #140d29;
    --card: #1a1233;
    --card2: #221a40;
    --input-bg: #221a40;
    --blue: #a855f7;
    --blue-dark: #7c3aed;
    --text: #f3f0fa;
    --muted: #9b8fc4;
    --border: rgba(200,170,255,.14);
    --green: #34d399;
    --red: #f87171;
    --orange: #fbbf6d;
    --accent2: #ec4899;
}
[data-theme="violet"] body {
    background:
        radial-gradient(circle at 85% -5%, rgba(168,85,247,.18), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(236,72,153,.10), transparent 35%),
        var(--bg);
}
[data-theme="violet"] .sidebar { box-shadow: 0 0 40px rgba(168,85,247,.08); }
[data-theme="violet"] .card, [data-theme="violet"] .card-box, [data-theme="violet"] .stat-card {
    border-radius: 16px; border: 1px solid var(--border);
}
[data-theme="violet"] .btn.approve, [data-theme="violet"] .logo-icon, [data-theme="violet"] .avatar {
    background: linear-gradient(135deg, var(--blue), var(--accent2));
}
[data-theme="violet"] .btn.approve { box-shadow: 0 6px 20px rgba(168,85,247,.35); }
[data-theme="violet"] .menu-item.active {
    background: linear-gradient(90deg, rgba(168,85,247,.22), rgba(236,72,153,.06));
    border: 1px solid rgba(168,85,247,.3); color: #d9b8ff;
    box-shadow: 0 4px 18px rgba(168,85,247,.18);
}
[data-theme="violet"] .stat-icon, [data-theme="violet"] .list-icon, [data-theme="violet"] .menu-icon { background: rgba(168,85,247,.16); }
[data-theme="violet"] .stat-card { border-top: 2px solid transparent; border-image: linear-gradient(90deg, var(--blue), var(--accent2)) 1; }
[data-theme="violet"] .data-table thead th { border-bottom: 2px solid rgba(168,85,247,.35); }

/* ============================================================
   تم «بنفش مدرن» — روشن
   ============================================================ */
[data-theme="violet-light"] {
    --bg: #f8f5fd;
    --sidebar: #ffffff;
    --card: #ffffff;
    --card2: #f1ebfb;
    --input-bg: #f1ebfb;
    --blue: #8b5cf6;
    --blue-dark: #6d28d9;
    --text: #241a3d;
    --muted: #6f6390;
    --border: rgba(139,92,246,.14);
    --green: #16a34a;
    --red: #dc2626;
    --orange: #b3690f;
    --accent2: #db2777;
}
[data-theme="violet-light"] body {
    background:
        radial-gradient(circle at 85% -5%, rgba(139,92,246,.08), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(219,39,119,.05), transparent 35%),
        var(--bg);
}
[data-theme="violet-light"] .sidebar { box-shadow: 0 0 30px rgba(139,92,246,.06); }
[data-theme="violet-light"] .card, [data-theme="violet-light"] .card-box, [data-theme="violet-light"] .stat-card { border-radius: 16px; }
[data-theme="violet-light"] .btn.approve, [data-theme="violet-light"] .logo-icon, [data-theme="violet-light"] .avatar {
    background: linear-gradient(135deg, var(--blue), var(--accent2));
}
[data-theme="violet-light"] .menu-item.active {
    background: linear-gradient(90deg, rgba(139,92,246,.14), rgba(219,39,119,.04));
    border: 1px solid rgba(139,92,246,.25); color: var(--blue-dark);
}
[data-theme="violet-light"] .stat-icon, [data-theme="violet-light"] .list-icon, [data-theme="violet-light"] .menu-icon { background: rgba(139,92,246,.10); }
[data-theme="violet-light"] .stat-card { border-top: 2px solid transparent; border-image: linear-gradient(90deg, var(--blue), var(--accent2)) 1; }
[data-theme="violet-light"] .data-table thead th { border-bottom: 2px solid rgba(139,92,246,.3); }

/* --------- انتخابگر تم (کارت‌های قابل‌کلیک در تنظیمات) --------- */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.theme-picker .theme-option {
    cursor: pointer; border-radius: 12px; border: 2px solid var(--border); padding: 12px; text-align: center;
    background: var(--card); transition: .15s; position: relative;
}
.theme-picker .theme-option:hover { border-color: var(--blue); }
.theme-picker .theme-option.active { border-color: var(--accent2, var(--blue)); }
.theme-picker .theme-option.active::after { content: '✔'; position:absolute; top:6px; left:8px; color: var(--green); font-size:12px; }
.theme-swatch { height: 50px; border-radius: 8px; margin-bottom: 8px; display:flex; overflow:hidden; }
.theme-swatch span { flex:1; }
.theme-picker .theme-option .name { font-size: 11px; color: var(--text); }


.theme-toggle-btn {
    width: 40px; height: 40px; border-radius: 12px; background: var(--card2); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
}

/* آیکون‌های بزرگ‌تر و خواناتر */
.menu-icon { font-size: 19px; width: 26px; }
.stat-icon { width: 42px; height: 42px; font-size: 18px; }
.list-icon { width: 40px; height: 40px; font-size: 17px; }
.logo-icon { font-size: 24px; }

html { scroll-behavior: smooth; }

body {
    font-family: "Vazirmatn", sans-serif;
    background:
        radial-gradient(circle at 80% 0%, rgba(0,120,255,.16), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(0,100,255,.08), transparent 30%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
}

button, input, select { font-family: inherit; }
button { border: 0; cursor: pointer; }

/* رفع مشکل نامرئی‌بودن آیکون و متن ساعت/تاریخ روی پس‌زمینه تیره در گوشی‌ها */
input[type="time"], input[type="date"], input[type="datetime-local"] {
    color-scheme: dark;
    color: var(--text);
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    cursor: pointer;
}
select { color-scheme: dark; }
select option { background: var(--input-bg); color: var(--text); }
/* روی تمِ روشن، «color-scheme: dark» و اینورت‌کردنِ آیکون باعث می‌شد آیکونِ
   تقویم/ساعت سفیدِ نامرئی روی پس‌زمینه‌ی سفید بشه — یعنی باکسِ تاریخ اصلاً
   قابل‌تشخیص از یک اینپوتِ متنیِ ساده نبود. اینجا برای تمِ روشن برعکسش
   می‌کنیم. */
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] select {
    color-scheme: light;
}
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* ---------------------------------------------------------------------
   رفع زوم خودکار سافاری آیفون موقع فوکوس روی فیلد ورودی: iOS Safari هر
   وقت فونت واقعیِ input/select/textarea زیر ۱۶px باشه، خودکار زوم می‌کنه
   تا متن خواناتر بشه — کاربر هم باید دستی زومش رو برگردونه. این قانون
   حداقل ۱۶px رو فقط روی صفحه‌های موبایلی (که مشکل واقعاً همونجاست) اعمال
   می‌کنه، بدون اینکه ظاهر دسکتاپ رو عوض کنه. این تنها راه واقعی رفع مشکله؛
   قفل‌کردن زوم از طریق ویوپورت به‌تنهایی این زوم خودکار رو متوقف نمی‌کنه.
   --------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--card2); border-radius: 10px; }

/* SIDEBAR */
.sidebar {
    position: fixed; right: 0; top: 0; width: 270px; height: 100vh;
    background: var(--sidebar); border-left: 1px solid var(--border);
    padding: 18px 14px; overflow-y: auto; z-index: 1000; backdrop-filter: blur(20px);
}
.logo { display: flex; align-items: center; gap: 12px; padding: 7px 8px 25px; }
.logo-icon {
    width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    box-shadow: 0 10px 35px rgba(20,135,255,.25);
    box-shadow: 0 10px 35px color-mix(in srgb, var(--blue) 30%, transparent);
    font-size: 21px; font-weight: 800; color: #fff;
}
.logo-text strong { display: block; font-size: 15px; }
.logo-text span { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.menu-title { color: var(--muted); font-size: 9px; margin: 4px 12px 8px; opacity: .8; }
.menu { display: flex; flex-direction: column; gap: 3px; }
.menu-item {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 12px; background: transparent; color: var(--muted); font-size: 11px; text-align: right; transition: .2s;
    text-decoration: none;
}
.menu-item:hover { color: var(--text); background: var(--card2); }
.menu-item.active {
    color: var(--text);
    background: rgba(20,135,255,.14);
    background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 22%, transparent), color-mix(in srgb, var(--blue) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.menu-icon { width: 23px; text-align: center; font-size: 16px; }
.menu-group-toggle {
    width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
    border-radius: 12px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; transition: .2s; user-select: none;
}
.menu-group-toggle span:first-child { display: flex; align-items: center; gap: 10px; }
.menu-group-toggle:hover, .menu-group-toggle.open { color: var(--text); background: var(--card2); }
.menu-group-toggle .chevron { transition: transform .2s; font-size: 12px; }
.menu-group-toggle.open .chevron { transform: rotate(-90deg); }
.submenu { max-height: 0; overflow: hidden; transition: max-height .25s ease; display: flex; flex-direction: column; gap: 3px; }
.submenu.open { max-height: 400px; }
.submenu .menu-item { padding-right: 30px; font-size: 10.5px; }
.bottom-menu { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.version { text-align: center; color: var(--muted); font-size: 9px; margin-top: 18px; opacity: .8; }

/* دکمه بازگشت در بالای صفحات داخلی — قبلاً از استایل کم‌رنگ منوی ساید‌بار (.menu-item)
   استفاده می‌شد که روی صفحه اصلی به‌سختی دیده می‌شد؛ این کلاس یک دکمه واضح و قابل‌کلیک است */
.btn-back {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 9px 16px; border-radius: 10px;
    background: var(--card2); border: 1px solid var(--border);
    color: var(--text); font-size: 11px; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: .2s;
}
.btn-back:hover, .btn-back:active { background: var(--blue); color: #fff; border-color: var(--blue); }

.submenu-group { margin: 2px 0; }
.submenu-group > summary {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 12px; background: transparent; color: var(--muted); font-size: 11px; text-align: right; cursor: pointer;
    list-style: none; transition: .2s;
}
.submenu-group > summary::-webkit-details-marker { display: none; }
.submenu-group > summary::after { content: '\25BE'; margin-right: auto; font-size: 9px; }
.submenu-group[open] > summary::after { content: '\25B4'; }
.submenu-group > summary:hover { color: var(--text); background: var(--card2); }
.submenu-list { display: flex; flex-direction: column; gap: 2px; padding-right: 14px; margin-top: 2px; }
.submenu-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
    color: var(--muted); font-size: 10.5px; text-decoration: none; transition: .2s;
}
.submenu-item:hover { color: var(--text); background: var(--card2); }

/* طبق درخواست: عددِ موارد در انتظار (پیام/درخواست) کنار آیتم‌های منو —
   پنل کارمند و سوپرادمین از همین کلاس‌های مشترک استفاده می‌کنن؛ پنل مدیر
   کلاس‌های جدای خودش رو داره (db-nav-count/db-sub-count در manager/index.php) */
.menu-count { margin-right: auto; background: var(--red); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 20px; min-width: 16px; text-align: center; line-height: 1.7; }
.menu-group-toggle .menu-count { margin-right: 8px; }
.menu-group-toggle::after { margin-right: 0; }

/* منوی بزرگ‌تر و راحت‌تر برای لمس در پنل کارمند (استفاده بیشتر با گوشی) */
.sidebar-lg .menu-item, .sidebar-lg .submenu-group > summary {
    min-height: 52px; padding: 13px 14px; font-size: 13px; gap: 12px;
}
.sidebar-lg .menu-icon { font-size: 19px; width: 27px; }
.sidebar-lg .submenu-list { gap: 4px; padding-right: 16px; }
.sidebar-lg .submenu-item { padding: 11px 14px; font-size: 12px; gap: 10px; min-height: 42px; }
.sidebar-lg .menu { gap: 5px; }

/* MAIN */
.main { width: calc(100% - 270px); margin-right: 270px; padding: 25px 30px 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; gap: 14px; flex-wrap: wrap; }
.topbar-start { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.topbar-start .welcome { min-width: 0; flex: 1; }
.topbar-start .welcome h1, .topbar-start .welcome p { overflow-wrap: break-word; word-break: break-word; }
.welcome h1 { font-size: 23px; margin-bottom: 5px; }
.welcome p { color: var(--muted); font-size: 11px; }
.profile { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.avatar {
    width: 43px; height: 43px; border-radius: 13px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; color: #fff;
}

/* STAT CARDS */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.stat-card .value { font-size: 22px; font-weight: 800; }
.stat-card .label { color: var(--muted); font-size: 10px; margin-top: 4px; }

/* STAT CARDS (نسخه دقیق فایل نمونه) */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 17px; padding: 17px; display: block; }
a.stat { transition: .15s; }
a.stat:hover, a.stat:active { border-color: var(--blue); transform: translateY(-1px); }
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stat-label { color: var(--muted); font-size: 9px; }
.stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(20,135,255,.1); }
.stat-value { font-size: 20px; font-weight: 800; }
.stat-desc { color: var(--green); font-size: 8px; margin-top: 4px; }

/* HOME GRID CARDS */
.home-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.info-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 19px; }
.info-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.info-card-header h3 { font-size: 12px; }
.see-link { background: transparent; color: var(--blue); font-size: 9px; text-decoration: none; }
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
a.list-item { transition: .15s; border-radius: 8px; margin: 0 -6px; padding-inline: 6px; }
a.list-item:hover, a.list-item:active { background: var(--card2); }
.list-right { display: flex; align-items: center; gap: 10px; }
.list-icon { width: 35px; height: 35px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(20,135,255,.1); }
.list-title { font-size: 10px; }
.list-sub { color: var(--muted); font-size: 8px; margin-top: 2px; }
.badge.green { color: var(--green); background: rgba(34,201,130,.1); }
.badge.orange { color: var(--orange); background: rgba(255,174,66,.1); }
.badge.red { color: var(--red); background: rgba(255,83,101,.1); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } .home-grid { grid-template-columns: 1fr; } }

/* ATTENDANCE CARD */
.attendance {
    position: relative; overflow: hidden;
    background: linear-gradient(115deg, rgba(12,126,255,.24), rgba(10,16,26,.96) 68%), var(--card);
    background: linear-gradient(115deg, color-mix(in srgb, var(--blue) 22%, transparent), var(--card) 68%), var(--card);
    border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent); border-radius: 22px; padding: 25px; margin-bottom: 18px;
}
.attendance-content { position: relative; z-index: 2; }
.attendance-content::before {
    /* سایه‌ی محافظِ خوانایی، به‌صورت جدا از خودِ نقشه (نه داخلش) تا با روشن‌تر
       شدنِ نقشه، این سایه هم کم‌رنگ نشه و متن همیشه خوانا بمونه */
    content: ''; position: absolute; inset: -25px -25px -25px -25px; z-index: -1;
    background: linear-gradient(115deg, color-mix(in srgb, var(--blue) 26%, transparent), var(--card) 66%);
    border-radius: inherit;
}
.attendance-map-bg {
    position: absolute; inset: 0; z-index: 1;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0; filter: grayscale(.35) contrast(1.2) brightness(1.05) saturate(1.15);
    transition: opacity .6s ease; pointer-events: none;
}
.attendance-map-bg.loaded { opacity: .68; }
.attendance-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.attendance-head h2 { font-size: 16px; }
.status {
    display: flex; align-items: center; gap: 6px; color: var(--green);
    background: rgba(34,201,130,.08); border: 1px solid rgba(34,201,130,.14);
    padding: 6px 10px; border-radius: 20px; font-size: 9px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.status.offline { color: var(--red); background: rgba(255,83,101,.08); border-color: rgba(255,83,101,.14); }
.status.offline .dot { background: var(--red); box-shadow: 0 0 10px var(--red); }
.clock { font-size: 42px; font-weight: 800; letter-spacing: 1px; }
.date { color: var(--muted); font-size: 10px; margin-top: 2px; }

/* SWIPE SLIDER */
.attendance-control { width: 100%; max-width: 510px; margin-top: 24px; }
.slider-track {
    position: relative; width: 100%; height: 64px; background: var(--input-bg);
    border: 1px solid var(--border); border-radius: 17px; overflow: hidden;
}
.slider-handle {
    position: absolute; top: 5px; right: 5px; width: 54px; height: 54px; border-radius: 13px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark)); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; z-index: 5; cursor: grab;
    box-shadow: 0 8px 25px rgba(20,135,255,.32);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--blue) 32%, transparent);
    transition: right .25s ease, background .2s ease;
    touch-action: none; user-select: none;
}
.slider-handle:active { cursor: grabbing; }
.slider-handle.is-red { background: linear-gradient(135deg, #ff5365, #c0202f); box-shadow: 0 8px 25px rgba(255,83,101,.32); }
.slider-track { touch-action: none; }
.slider-text {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 11px; font-weight: 600; pointer-events: none; z-index: 2;
}
.slider-fill {
    position: absolute; top: 5px; right: 5px; height: 54px; width: 54px; border-radius: 13px;
    background: rgba(20,135,255,.15);
    background: color-mix(in srgb, var(--blue) 15%, transparent);
}

/* TOAST */
.toast {
    position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--card2); border: 1px solid var(--border); color: var(--text); padding: 12px 20px;
    border-radius: 12px; font-size: 11px; opacity: 0; pointer-events: none; transition: .3s; z-index: 3000;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* AUTH PAGE */
.auth-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; gap: 4px; }
.auth-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 30px;
    width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px;
}
.auth-card h1 { font-size: 18px; margin-bottom: 10px; text-align: center; }
.auth-card label { font-size: 11px; color: var(--muted); margin-top: 6px; }
.auth-card input {
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
    color: var(--text); font-size: 13px;
}
.auth-card button {
    margin-top: 14px; padding: 13px; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    color: #fff; font-size: 13px; font-weight: 700;
}
.auth-error {
    background: rgba(255,83,101,.1); border: 1px solid rgba(255,83,101,.25); color: var(--red);
    padding: 10px; border-radius: 10px; font-size: 11px; text-align: center;
}

/* SIMPLE TABLE (manager / super admin) */
table.data-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 16px; overflow: hidden; }
table.data-table th, table.data-table td { padding: 12px 14px; font-size: 11px; text-align: right; border-bottom: 1px solid var(--border); }
table.data-table th { color: var(--muted); font-weight: 600; background: rgba(255,255,255,.02); }
.badge { padding: 4px 10px; border-radius: 20px; font-size: 9px; display: inline-block; }
.badge.pending { background: rgba(255,174,66,.1); color: var(--orange); }
.badge.approved { background: rgba(34,201,130,.1); color: var(--green); }
.badge.rejected { background: rgba(255,83,101,.1); color: var(--red); }
.btn { padding: 8px 14px; border-radius: 8px; font-size: 10px; font-weight: 600; }
.btn.approve { background: rgba(34,201,130,.15); color: var(--green); }
.btn.reject { background: rgba(255,83,101,.15); color: var(--red); }
.btn.neutral { background: var(--card2); color: var(--text); border: 1px solid var(--border); }

.mobile-menu-btn {
    display: none; width: 42px; height: 42px; border-radius: 12px; background: var(--card2);
    border: 1px solid var(--border); align-items: center; justify-content: center; font-size: 18px; color: var(--text);
}
.sidebar-overlay { display: none; }

@media (max-width: 900px) {
    .sidebar {
        display: block; transform: translateX(100%); transition: transform .25s ease;
        box-shadow: -10px 0 30px rgba(0,0,0,.4);
    }
    .sidebar.open { transform: translateX(0); }
    .mobile-menu-btn { display: flex; }
    .sidebar-overlay.show {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999;
    }
    .main { width: 100%; margin-right: 0; padding: 16px; }
}

@media (max-width: 640px) {
    body { overflow-x: hidden; }
    .welcome h1 { font-size: 17px; }
    /* روی گوشی، ۱۶px حاشیه‌ی هر طرف با کنار هم بودنش با gap کارت‌ها خیلی
       جا رو الکی خالی نشون می‌داد؛ تنگ‌ترش کردیم تا خودِ کارت‌ها بزرگ‌تر دیده بشن */
    .main { padding-left: 10px; padding-right: 10px; }
    .db-tiles { gap: 8px; }
    .welcome p { font-size: 10px; }
    .clock { font-size: 32px; }
    .attendance { padding: 18px; }
    .attendance-control { max-width: 100%; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* هر جدولی روی موبایل به‌صورت افقی اسکرول بشه تا بهم نریزه */
    table.data-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

    /* هر فرمی که چیدمان چند-ستونه داره روی موبایل تک‌ستونه بشه */
    .form-grid { grid-template-columns: 1fr !important; }
    .form-grid > * { grid-column: auto !important; width: 100%; max-width: 100%; box-sizing: border-box; }
    .card-box { padding: 14px !important; }
    .days-row { grid-column: auto !important; }
    .days-row label { font-size: 9px; padding: 5px 8px; }

    .auth-card { max-width: 100%; }

    /* پاپ‌آپ «خلاصه تردد» روی گوشی‌های بزرگ هم چیدمان چندستونه‌اش فشرده و
       ناخوانا می‌شد (۵ ستون در یک ردیف/۴ ستون در فرم) — روی موبایل تک‌ستونه
       می‌شود تا هر فیلد عرض کامل و قابل‌لمس داشته باشد */
    .att-modal-box { padding: 14px; max-width: 100%; }
    .att-log-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--border);
    }
    .att-log-row select, .att-log-row input, .att-log-row button { width: 100%; box-sizing: border-box; }
    .att-log-type { width: fit-content; }
    .att-modal-form { grid-template-columns: 1fr; }
    .att-modal-form select, .att-modal-form input, .att-modal-form button { width: 100%; box-sizing: border-box; }
}


/* =====================================================================
   ماژول گزارشات: پاپ‌آپ خلاصه/اصلاح تردد روزانه + قالب‌های عمومی جدول‌های گزارش
   ===================================================================== */
.att-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 999;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.att-modal-box {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; padding: 18px;
}
.att-modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.att-modal-close { cursor: pointer; font-size: 20px; color: var(--muted); line-height: 1; }
.att-modal-body { margin-bottom: 14px; }
.att-log-row { display: grid; grid-template-columns: 55px 1fr 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.att-log-row select, .att-log-row input { padding: 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 10.5px; }
.att-log-row .time-picker-btn { padding: 6px 4px; font-size: 10.5px; }
.att-log-type { font-size: 10.5px; font-weight: 700; text-align: center; border-radius: 8px; padding: 6px 2px; }
.att-log-type.in { background: rgba(34,201,130,.12); color: var(--green); }
.att-log-type.out { background: rgba(255,83,101,.12); color: var(--red); }
.att-modal-foot { border-top: 1px solid var(--border); padding-top: 12px; }
.att-modal-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; }
.att-modal-form select, .att-modal-form input { padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 10.5px; }

.report-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.report-tab-btn { padding: 8px 16px; border-radius: 10px; background: var(--card2); color: var(--muted); font-size: 11px; cursor: pointer; border: none; }
.report-tab-btn.active { background: linear-gradient(135deg, #168cff, #0065d5); color: #fff; }

.holiday-date { color: var(--red) !important; font-weight: 700; }
.holiday-tag { display: block; font-size: 9px; color: var(--red); margin-top: 2px; }
.holiday-why {
    display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
    border-radius: 50%; background: var(--red); color: #fff; font-size: 9px; cursor: help; margin-right: 4px;
}
.summary-link { color: #168cff; cursor: pointer; text-decoration: underline dotted; font-size: 10.5px; }
.report-total-row td { font-weight: 700; background: var(--card2); }

/* =====================================================================
   صفحه اسپلش (Splash Screen) هنگام باز شدن برنامه
   ===================================================================== */
.app-splash {
    position: fixed; inset: 0; z-index: 99999;
    background: radial-gradient(circle at 50% 35%, #0d1626 0%, #050910 70%);
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity .5s ease;
}
.app-splash-hide { opacity: 0; pointer-events: none; }
.app-splash-inner { display: flex; flex-direction: column; align-items: center; animation: splashIn .6s ease; }
.app-splash-logo {
    width: 108px; height: 108px; border-radius: 30px; object-fit: cover;
    box-shadow: 0 20px 60px rgba(22,135,255,.35), 0 0 0 1px rgba(255,255,255,.06);
    margin-bottom: 18px;
}
.app-splash-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: .5px; }
.app-splash-sub { font-size: 11.5px; color: #7c8aa5; margin-top: 6px; }
.app-splash-loader { display: flex; gap: 6px; margin-top: 26px; }
.app-splash-loader span {
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue, #1687ff), var(--blue-dark, #0065d5));
    animation: splashDot 1.1s ease-in-out infinite;
}
.app-splash-loader span:nth-child(2) { animation-delay: .15s; }
.app-splash-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes splashDot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes splashIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }