/* Vazirmatn font is self-hosted (see /vendor/vazirmatn.css, linked from each HTML page) instead of being pulled from fonts.googleapis.com — so the CRM keeps working (and CSP can be locked to 'self') without outbound internet access. */ /* ================= تم (رنگ اصلی) و حالت (روشن/تیره) ================= دو محور کاملاً مستقل‌اند: data-theme روی رنگ اصلی را تعیین می‌کند (بنفش/آبی/سبز/گلبهی/فیروزه‌ای)، و data-mode حالت روشن/تیره را. هر دو را public/js/theme.js خیلی زود (اولین اسکریپت هر صفحه) از روی localStorage ست می‌کند تا فلاشِ تم اشتباه دیده نشود. برای این‌که رنگ‌های نیمه‌شفاف (tint/glow) هم به رنگِ تم و هم به حالت روشن/تیره واکنش نشان دهند بدون این‌که برای هر ترکیبِ ۵ تم × ۲ حالت یک بلوک جدا لازم باشد، رنگ اصلی به‌صورت «R,G,B» در --primary-rgb نگه داشته می‌شود و alpha آن از یک متغیر جداگانه (--tint-a/--glow-a1/2/3که در بلوک حالت تعریف می‌شوند) می‌آید؛ ترکیب نهایی همیشه در :root با rgba(var(...)) ساخته می‌شود، پس صرفاً با عوض‌شدن یکی از دو attribute، نتیجه خودش درست می‌شود. */ :root{ /* ---- تم پیش‌فرض (بنفش) — اگر به هر دلیلی theme.js لود نشود، همین دیده می‌شود ---- */ --primary-rgb:124,92,252; --primary:#7C5CFC; --primary-dark:#6845F0; --primary-2:#4C2FE0; /* رنگ دوم گرادیان‌ها (لوگو، آواتار، دکمه اصلی) */ /* ---- حالت پیش‌فرض (تیره) — همان پالت قبلی پروژه ---- */ --bg:#0A0D18; /* page background */ --sidebar-bg:#0D1020; /* sidebar background, slightly distinct */ --surface:#131629; /* card / table background */ --surface-alt:#191D33; /* inputs, alt rows, hover fills */ --surface-raised:#1B1F3B; /* nav active item, elevated chips */ --ink:#F1F2F8; /* primary text (light, for dark bg) */ --ink-2:#C7CAE0; /* secondary heading tone */ --text:#E7E8F3; --text-muted:#8B90AE; --border:#252A47; --placeholder:#5C6184; --shadow:0 4px 14px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.3); --tint-a:.16; --glow-a1:.16; --glow-a2:.38; --glow-a3:.5; --on-tint:#fff; /* رنگ متن روی زمینه‌ی primary-tint -- در حالت روشن باید تیره شود */ /* ---- رنگ‌های معنایی (طلایی/سبز/قرمز) -- عمداً مستقل از تم و حالت‌اند چون معنای‌شان (هشدار/موفقیت/خطر) باید همیشه یکسان و قابل‌تشخیص بماند ---- */ --gold:#F5A623; --gold-deep:#D98C0F; --gold-tint:rgba(245,166,35,.14); --success:#22C55E; --success-tint:rgba(34,197,94,.14); --danger:#F0466B; --danger-tint:rgba(240,70,107,.14); --radius:16px; --font:'Vazirmatn',Tahoma,'Segoe UI',Arial,sans-serif; /* ---- ترکیب نهایی رنگ‌های نیمه‌شفاف از primary-rgb + آلفای حالت ---- */ --primary-tint: rgba(var(--primary-rgb), var(--tint-a)); --primary-glow-1: rgba(var(--primary-rgb), var(--glow-a1)); --primary-glow-2: rgba(var(--primary-rgb), var(--glow-a2)); --primary-glow-3: rgba(var(--primary-rgb), var(--glow-a3)); } /* ---- تم‌های رنگی (فقط primary را عوض می‌کنند) ---- */ html[data-theme="purple"]{ --primary-rgb:124,92,252; --primary:#7C5CFC; --primary-dark:#6845F0; --primary-2:#4C2FE0; } html[data-theme="blue"]{ --primary-rgb:59,130,246; --primary:#3B82F6; --primary-dark:#2563EB; --primary-2:#1D4ED8; } html[data-theme="emerald"]{ --primary-rgb:16,185,129; --primary:#10B981; --primary-dark:#059669; --primary-2:#047857; } html[data-theme="rose"]{ --primary-rgb:244,63,94; --primary:#F43F5E; --primary-dark:#E11D48; --primary-2:#BE123C; } html[data-theme="teal"]{ --primary-rgb:6,182,212; --primary:#06B6D4; --primary-dark:#0891B2; --primary-2:#0E7490; } /* ---- حالت تیره (پیش‌فرض، همان پالت قبلی) ---- */ html[data-mode="dark"]{ --bg:#0A0D18; --sidebar-bg:#0D1020; --surface:#131629; --surface-alt:#191D33; --surface-raised:#1B1F3B; --ink:#F1F2F8; --ink-2:#C7CAE0; --text:#E7E8F3; --text-muted:#8B90AE; --border:#252A47; --placeholder:#5C6184; --shadow:0 4px 14px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.3); --tint-a:.16; --glow-a1:.16; --glow-a2:.38; --glow-a3:.5; --on-tint:#fff; color-scheme:dark; /* به input/select/scrollbar بومی مرورگر هم می‌گوید تیره رندر شوند */ } /* ---- حالت روشن ---- */ html[data-mode="light"]{ --bg:#F5F6FB; --sidebar-bg:#FFFFFF; --surface:#FFFFFF; --surface-alt:#F1F2F8; --surface-raised:#E9EBF5; --ink:#1B1F2E; --ink-2:#333750; --text:#2B2F45; --text-muted:#6B7090; --border:#E2E4F0; --placeholder:#9498B5; --shadow:0 4px 14px rgba(20,20,40,.08), 0 1px 3px rgba(20,20,40,.06); --tint-a:.12; --glow-a1:.10; --glow-a2:.22; --glow-a3:.3; --on-tint:var(--primary-dark); /* روی زمینه‌ی کم‌رنگِ primary-tint، متنِ تیره خواناتر است */ color-scheme:light; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{font-family:var(--font); background: radial-gradient(900px 480px at 100% -10%, var(--primary-glow-1), transparent 55%), radial-gradient(700px 420px at -5% 10%, var(--primary-glow-1), transparent 50%), var(--bg); color:var(--text); min-height:100vh; direction:rtl;} .app{max-width:1360px;margin:0 auto;padding:0;display:flex;min-height:100vh;} /* ---- Sidebar ---- */ .sidebar{width:230px;flex:none;background:var(--sidebar-bg);border-inline-start:1px solid var(--border); display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;} .sidebar-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;} .sidebar-brand-mark{width:34px;height:34px;border-radius:10px;flex:none; background:linear-gradient(135deg, var(--primary), var(--primary-2)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px; box-shadow:0 4px 14px var(--primary-glow-2);} .sidebar-brand-text{font-weight:800;font-size:14px;color:var(--ink);line-height:1.3;} .sidebar-brand-text .sub{font-size:10.5px;color:var(--text-muted);font-weight:600;} .sidebar-nav{display:flex;flex-direction:column;gap:3px;flex:1;} .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:none; background:transparent;color:var(--text-muted);font-family:var(--font);font-size:13px;font-weight:600; cursor:pointer;text-align:right;width:100%;transition:background .15s, color .15s;} .nav-item .nav-ic{flex:none;opacity:.8;display:flex;} .nav-item:hover{background:var(--surface-alt);color:var(--ink);} .nav-item.active{background:var(--primary-tint);color:var(--on-tint);box-shadow:inset 0 0 0 1px var(--primary-glow-2);} .nav-item.active .nav-ic{opacity:1;color:var(--primary);} /* ---- بج آیکون گرد و گلاسی (الهام‌گرفته از استایل آیکون‌های اپ‌های AI) ---- هر آیتم منو یک دایره‌ی کوچک با گرادیان تیره + هاله‌ی رنگی تمِ فعلی + یک هایلایت شیشه‌ای بالا می‌گیرد، به‌جای خط‌آیکونِ تخت قبلی. رنگ هاله از همان متغیرهای --primary-rgb / --gold / --danger پروژه می‌آید تا با هر ۵ تمِ رنگی و هر دو حالت روشن/تیره خودش را هماهنگ کند -- رنگ ثابت هاردکد نشده. یک زیرمجموعه (مالی: پیش‌واریزی/بدهی/بستانکاری/پرداختی) عمداً هاله‌ی طلایی می‌گیرد و یک زیرمجموعه (مانیتورینگ/لاگ) هاله‌ی قرمز، تا کمی تنوعِ دسته‌بندی‌شده مثل تصویر مرجع داشته باشیم بدون رنگ‌های دلبخواهیِ نامرتبط با پالت پروژه. */ .nav-ic-badge{--badge-rgb:var(--primary-rgb);--badge-color:var(--primary); position:relative;flex:none;width:32px;height:32px;border-radius:50%; display:flex;align-items:center;justify-content:center; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 42%), radial-gradient(circle at 68% 78%, rgba(var(--badge-rgb),.35), transparent 60%), linear-gradient(160deg, #20243c, #0c0e1c); box-shadow: 0 0 0 1px rgba(var(--badge-rgb),.35), 0 0 10px 1px rgba(var(--badge-rgb),.28), inset 0 1px 1px rgba(255,255,255,.28), inset 0 -3px 5px rgba(0,0,0,.45); transition:box-shadow .15s, transform .15s;} .nav-ic-badge svg{position:relative;z-index:1;width:16px;height:16px; color:#EDEFFA;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));} .nav-ic-badge.money{--badge-rgb:245,166,35;--badge-color:var(--gold);} .nav-ic-badge.alert{--badge-rgb:240,70,107;--badge-color:var(--danger);} .nav-item:hover .nav-ic-badge{box-shadow: 0 0 0 1px rgba(var(--badge-rgb),.55), 0 0 14px 2px rgba(var(--badge-rgb),.4), inset 0 1px 1px rgba(255,255,255,.32), inset 0 -3px 5px rgba(0,0,0,.45);} .nav-item.active .nav-ic-badge{box-shadow: 0 0 0 1.5px rgba(var(--badge-rgb),.8), 0 0 16px 3px rgba(var(--badge-rgb),.55), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.45);} html[data-mode="light"] .nav-ic-badge{ background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.35), transparent 42%), radial-gradient(circle at 68% 78%, rgba(var(--badge-rgb),.4), transparent 60%), linear-gradient(160deg, #3a3f5c, #14172a);} .nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px; margin-inline-start:auto;border-radius:999px;background:var(--danger,#e5484d);color:#fff;font-size:11px; font-weight:800;line-height:1;} .sidebar-footer{border-top:1px solid var(--border);padding-top:14px;margin-top:10px;} .sidebar-user{display:flex;align-items:center;gap:10px;padding:6px 8px;} .sidebar-avatar{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--primary),var(--primary-2)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;} .sidebar-user-text{flex:1;min-width:0;} .sidebar-user-text .name{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-user-text .role{font-size:10.5px;color:var(--text-muted);} .sidebar-footer-actions{display:flex;gap:6px;margin-top:10px;} /* ---- Main area ---- */ .main-area{flex:1;min-width:0;padding:22px 26px 50px;} .topheader{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:14px;} .topheader h1{font-size:21px;font-weight:800;color:var(--ink);margin:0;} .topheader .sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;} .topheader-actions{display:flex;align-items:center;gap:10px;} /* ---- Cards ---- */ .card{position:relative;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:19px 18px 18px;margin-bottom:14px;box-shadow:var(--shadow);} .card h2{font-size:14px;font-weight:700;margin:0 0 12px;color:var(--ink);} .card-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} @media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}} label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-muted);font-weight:600;} input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],select,textarea{ font-family:var(--font);padding:10px 12px;border:1px solid var(--border);border-radius:10px; font-size:13.5px;color:var(--text);background:var(--surface-alt);outline:none;transition:.15s;width:100%;} input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);} select{cursor:pointer;} input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px;cursor:pointer;} /* Time inputs (shift start/end hours, etc.) — bring the native picker in line with the rest of the dark UI instead of leaving it plain/browser-default. */ input[type=time]{ cursor:pointer;text-align:center;direction:ltr;font-variant-numeric:tabular-nums;letter-spacing:.5px; /* color-scheme حالا از html[data-mode] ارث می‌رسد (بالا) -- دیگر اینجا هارد-کد نیست */ } input[type=time]:hover{border-color:var(--primary);} input[type=time]::-webkit-datetime-edit{padding:0;} input[type=time]::-webkit-datetime-edit-fields-wrapper{display:flex;align-items:center;} input[type=time]::-webkit-datetime-edit-hour-field, input[type=time]::-webkit-datetime-edit-minute-field{ padding:1px 3px;border-radius:5px;color:var(--text);} input[type=time]::-webkit-datetime-edit-hour-field:focus, input[type=time]::-webkit-datetime-edit-minute-field:focus{ background:var(--primary-tint);color:var(--on-tint);outline:none;} input[type=time]::-webkit-datetime-edit-text{color:var(--text-muted);padding:0 1px;} input[type=time]::-webkit-calendar-picker-indicator{ cursor:pointer;border-radius:6px;padding:4px;margin-inline-start:4px; filter:invert(72%) sepia(9%) saturate(716%) hue-rotate(196deg) brightness(92%) contrast(88%); transition:.15s;} input[type=time]::-webkit-calendar-picker-indicator:hover{background:var(--primary-tint);} input[type=time]::-moz-focus-inner{border:0;} textarea{resize:vertical;} ::placeholder{color:var(--placeholder);} /* در حالت روشن، فیلترِ بالا (تنظیم‌شده برای پس‌زمینه‌ی تیره) رنگ آیکون ساعت را کم‌رنگ/نامفهوم می‌کند -- آیکون پیش‌فرض مرورگر روی زمینه‌ی روشن خودش به‌اندازه‌ی کافی خواناست. */ html[data-mode="light"] input[type=time]::-webkit-calendar-picker-indicator{filter:none;} /* ---- Buttons ---- */ .btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-2));color:#fff;border:none; padding:11px 20px;border-radius:11px;font-family:var(--font);font-weight:700;font-size:13.5px;cursor:pointer; transition:transform .15s, box-shadow .15s;box-shadow:0 6px 16px var(--primary-glow-2);} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px var(--primary-glow-3);} .btn-primary:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;} .btn-small{background:var(--surface-alt);color:var(--ink);border:1px solid var(--border);padding:8px 13px; border-radius:9px;font-family:var(--font);font-weight:700;font-size:12px;cursor:pointer;transition:.15s;} .btn-small:hover{background:var(--surface-raised);border-color:var(--primary);} .btn-ghost{background:var(--danger-tint);color:var(--danger);border-color:transparent;} .btn-ghost:hover{background:rgba(240,70,107,.24);border-color:transparent;} .icon-btn{background:var(--surface-alt);border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px; border-radius:9px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.15s;} .icon-btn:hover{background:var(--danger-tint);color:var(--danger);} .btn-group{display:flex;gap:8px;flex-wrap:wrap;} /* ---- Tables ---- */ /* «اتو فیت»: به‌جای اینکه هر ستون هرچقدر محتوایش لازم دارد عرض بگیرد و کل جدول از عرض کارت/صفحه بیرون بزند (و فقط با اسکرول افقی .table-wrap قابل دیدن باشد)، سرستون‌ها و سلول‌ها اجازه دارند بشکنند (word-wrap) تا مرورگر بتواند عرض هر ستون را طوری کوچک کند که کل جدول همیشه داخل ۱۰۰٪ عرضِ ظرفش جا شود -- این برای هر جدولی در برنامه صدق می‌کند (رکوردها، بدهی، بوکینگ، شیفت، ...)، چون این قوانین سراسری‌اند نه مخصوص یک صفحه. .table-wrap{overflow-x:auto} همچنان به‌عنوان راه‌حل پشتیبان برای صفحات خیلی باریک با تعداد ستون خیلی زیاد باقی می‌ماند. */ table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto;} thead th{background:transparent;color:var(--text-muted);padding:10px 12px;font-weight:700;text-align:right; font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--border); overflow-wrap:anywhere;word-break:break-word;} tbody td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text); overflow-wrap:anywhere;word-break:break-word;} tbody tr:hover{background:var(--surface-alt);} .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);} .table-wrap table{margin:0;} .amount-cell{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;} /* ---- Pills / badges ---- */ .pill{display:inline-block;padding:4px 11px;border-radius:20px;background:var(--success-tint); color:var(--success);font-size:11px;font-weight:700;white-space:nowrap;} .pill-pending{background:var(--gold-tint);color:var(--gold);} .pill-danger{background:var(--danger-tint);color:var(--danger);} .empty-state{text-align:center;padding:36px 20px;color:var(--text-muted);font-size:13px;} .chip{display:flex;align-items:center;justify-content:space-between;background:var(--surface-alt); border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600; margin-bottom:6px;color:var(--text);} .chip-list{display:flex;flex-direction:column;max-height:320px;overflow:auto;} /* گیرندگان پیام کاری: باکس جستجو + چیپ + گروه، جایگزین لیست چک‌باکسی قبلی */ .recipient-picker{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface-alt);} .recipient-picker input[type=text]{border:none;background:transparent;padding:4px 2px;width:100%;} .recipient-picker input[type=text]:focus{box-shadow:none;} .recipient-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;} .recipient-chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-tint);color:var(--on-tint); border-radius:20px;padding:5px 6px 5px 12px;font-size:12.5px;font-weight:700;} .recipient-chip-remove{background:rgba(255,255,255,.22);border:none;color:#fff;width:18px;height:18px; border-radius:50%;cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;} .recipient-chip-remove:hover{background:rgba(255,255,255,.4);} .recipient-suggestions{margin-top:6px;border:1px solid var(--border);border-radius:8px;overflow:hidden; max-height:220px;overflow-y:auto;background:var(--surface);} .recipient-suggestion{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border);} .recipient-suggestion:last-child{border-bottom:none;} .recipient-suggestion:hover{background:var(--primary-tint);color:var(--on-tint);} .recipient-suggestion:hover .recipient-role{color:var(--on-tint);opacity:.85;} .recipient-role{font-size:11px;color:var(--text-muted);} .recipient-groups{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;} .recipient-group-btn{background:var(--gold-tint);color:var(--gold-deep);border:1px solid transparent; border-radius:20px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);} .recipient-group-btn:hover{background:var(--gold);color:#fff;} .add-row{display:flex;gap:8px;margin-bottom:12px;} .add-row input{flex:1;} .save-msg{font-size:12.5px;font-weight:600;} .save-msg.err{color:var(--danger);} .save-msg.ok{color:var(--success);} .status-tabs{display:flex;gap:6px;margin-bottom:14px;background:var(--surface-alt);padding:4px; border-radius:11px;border:1px solid var(--border);flex-wrap:wrap;} .status-tab{border:none;background:transparent;padding:8px 13px;font-family:var(--font);font-size:12px; font-weight:700;color:var(--text-muted);border-radius:8px;cursor:pointer;} .status-tab.active{background:var(--surface-raised);color:var(--ink);} .filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px;} .filters label{min-width:150px;} .voucher-card,.deposit-card{border:1px solid var(--border);background:var(--surface-alt);border-radius:12px; padding:14px;display:flex;flex-direction:column;gap:10px;margin-bottom:12px;} .voucher-card-head{display:flex;align-items:center;gap:10px;} .voucher-idx{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;} /* ---- Stat cards (icon-badge style, like the dashboard reference) ---- */ .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:16px 18px;box-shadow:var(--shadow);} .stat-card .stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .stat-card .stat-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center; background:var(--primary-tint);color:var(--primary);flex:none;} .stat-card.cost .stat-icon{background:var(--danger-tint);color:var(--danger);} .stat-card.profit .stat-icon{background:var(--success-tint);color:var(--success);} .stat-card .stat-label{font-size:11.5px;color:var(--text-muted);font-weight:700;margin-bottom:6px;} .stat-card .stat-value{font-size:20px;font-weight:800;color:var(--ink);} .stat-card .stat-trend{font-size:11px;font-weight:700;margin-top:8px;color:var(--success);} .stat-card .stat-trend.down{color:var(--danger);} /* ---- Login page ---- */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px; background:radial-gradient(900px 480px at 50% -10%, var(--primary-glow-1), transparent 55%), var(--bg);} .login-card{max-width:400px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:20px; padding:34px 28px;box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center;} .login-card h1{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 6px;} .login-card .sub{font-size:12px;color:var(--text-muted);margin-bottom:24px;} .login-card label{text-align:right;margin-bottom:12px;} .captcha-row{display:flex;align-items:center;gap:10px;} .captcha-question{background:var(--surface-raised);padding:4px; border-radius:10px;border:1px solid var(--border);flex:none;line-height:0;} .captcha-question svg{display:block;width:160px;height:56px;border-radius:6px;} .captcha-refresh{background:var(--surface-alt);border:1px solid var(--border);color:var(--text);border-radius:10px; width:40px;height:40px;cursor:pointer;font-size:15px;flex:none;} .login-error{color:var(--danger);font-size:12.5px;font-weight:600;margin-top:10px;min-height:18px;} .perm-matrix{width:100%;border-collapse:collapse;} .perm-matrix th,.perm-matrix td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:center;font-size:12px;} .perm-matrix th:first-child,.perm-matrix td:first-child{text-align:right;font-weight:700;color:var(--ink);} .perm-matrix input[type=checkbox]{width:17px;height:17px;} /* ---- Calendar popup ---- */ .overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:998;} .overlay.hidden{display:none;} .calendar-popup{position:fixed;z-index:999;background:var(--surface);border:1px solid var(--border); border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);padding:12px;width:280px;} .calendar-popup.hidden{display:none;} .date-btn{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-alt); font-family:var(--font);font-size:13px;text-align:right;cursor:pointer;color:var(--text);width:100%;} .date-btn.empty{color:var(--text-muted);} .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .cal-head .cal-title{font-weight:700;font-size:13.5px;color:var(--ink);} .cal-nav{display:flex;gap:4px;} .cal-nav button{border:none;background:var(--surface-alt);width:26px;height:26px;border-radius:7px; cursor:pointer;font-size:13px;color:var(--text);} .cal-nav button:hover{background:var(--primary-tint);color:var(--primary);} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;} .cal-wd{text-align:center;font-size:10.5px;color:var(--text-muted);font-weight:700;padding:4px 0;} .cal-day{text-align:center;padding:7px 0;border-radius:8px;font-size:12px;cursor:pointer;border:none; background:transparent;font-family:var(--font);color:var(--text);} .cal-day:hover{background:var(--primary-tint);} .cal-day.today{border:1px solid var(--gold);} .cal-day.selected{background:var(--primary);color:#fff;} .cal-day.empty{visibility:hidden;cursor:default;} .cal-footer{display:flex;justify-content:space-between;margin-top:8px;} .cal-footer button{border:none;background:none;color:var(--text-muted);font-size:11.5px;font-family:var(--font); cursor:pointer;font-weight:600;} .cal-footer button:hover{color:var(--danger);} /* ---- Print / PDF export (unchanged: prints in light mode for readable paper output) ---- */ .print-only{display:none;} @media print{ @page{ size: A4 landscape; margin:10mm 8mm; } body *{visibility:hidden;} #printArea, #printArea *{visibility:visible;} #printArea{position:absolute;top:0;right:0;left:0;display:block !important;padding:0;font-family:var(--font);color:#1B2230;} #printArea .print-header{display:flex;align-items:baseline;justify-content:space-between; border-bottom:2px solid #154F41;padding-bottom:10px;margin-bottom:14px;} #printArea .print-header h2{margin:0;font-size:15px;color:#154F41;} #printArea .print-header .print-meta{font-size:10px;color:#555;} #printArea table{width:100%;max-width:100%;border-collapse:collapse;font-size:9.5px;table-layout:auto;} #printArea th{background:#154F41;color:#fff;padding:6px 5px;text-align:right;font-weight:700; -webkit-print-color-adjust:exact;print-color-adjust:exact;white-space:normal !important; overflow-wrap:break-word;word-break:break-word;line-height:1.35;} #printArea td{padding:5px;text-align:right;border-bottom:1px solid #ddd;vertical-align:top; white-space:normal !important;overflow-wrap:break-word;word-break:break-word;color:#1B2230;} #printArea tbody tr:nth-child(even){background:#F5F6F8;-webkit-print-color-adjust:exact;print-color-adjust:exact;} #printArea .print-footer{margin-top:10px;font-size:10px;color:#888;text-align:left;} } /* ---- Generic small modal ---- */ .modal-panel{position:fixed;z-index:1000;background:var(--surface);border:1px solid var(--border); border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);padding:18px;width:360px;max-width:92vw; max-height:82vh;overflow:auto;top:50%;left:50%;transform:translate(-50%,-50%);} .modal-panel.hidden{display:none;} /* ---- Responsive: collapse sidebar to a top bar on small screens ---- */ @media(max-width:820px){ .app{flex-direction:column;} .sidebar{width:100%;height:auto;position:relative;flex-direction:row;flex-wrap:wrap;align-items:center; padding:12px 14px;gap:8px;} .sidebar-brand{padding:0 8px 0 0;flex:none;} .sidebar-nav{flex-direction:row;flex-wrap:wrap;flex:1;} .nav-item{width:auto;padding:8px 10px;} .sidebar-footer{border-top:none;margin-top:0;padding-top:0;flex:none;} .main-area{padding:16px;} /* روی صفحه‌ی باریک، پدینگ سلول‌ها فضای زیادی از عرض محدودِ جدول را می‌خورد -- کوچک‌ترش می‌کنیم تا ستون‌های بیشتری بدون له‌شدنِ متن جا شوند (مکملِ overflow-wrap بالا، نه جایگزینش). */ thead th{padding:7px 8px;font-size:10.5px;} tbody td{padding:8px 8px;font-size:12px;} } /* --- Login page: plane-logo button + click animation (moved out of an inline