/* ======================================== سیستم طراحی یکپارچه - custom.css نسخه ۲.۰ - تمام استایل‌های مشترک ======================================== */ /* ======================================== 1. متغیرها ======================================== */ :root { /* رنگ‌های اصلی */ --primary: #6366F1; --primary-dark: #4F46E5; --primary-light: #8B5CF6; --primary-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); --secondary: #64748b; --success: #10b981; --success-dark: #059669; --warning: #f59e0b; --warning-dark: #d97706; --danger: #ef4444; --danger-dark: #dc2626; --info: #06b6d4; /* خاکستری‌ها */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; /* سایه‌ها */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); /* گردی */ --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; --radius-lg: 16px; /* ═══════════════════════════════════════════════════ توکن‌های معنایی تم (زیرساختِ تم روشن/تاریک) ─────────────────────────────────────────────────── هر صفحه که به تم تاریک مهاجرت می‌کند، باید رنگ‌های هاردکدشده‌اش را با این توکن‌ها جایگزین کند، نه با مقادیرِ مستقیم. مقادیرِ تاریک در پایینِ همین فایل، زیرِ ‎:root[data-theme="dark"]‎ تعریف شده‌اند. ═══════════════════════════════════════════════════ */ --surface: #ffffff; --bg-page: var(--gray-50); --text-strong: var(--gray-900); --text-muted: var(--gray-500); --border-soft: var(--gray-200); --icon-accent: #744CA4; --brand-gradient: linear-gradient(135deg, #744ca4 0%, #657ae7 100%); --info-box-bg: #f0f0f0; --warning-box-bg: #fff3cd; --warning-box-text: #856404; --toast-success-bg: #f0fdf4; --toast-error-bg: #fef2f2; --toast-warning-bg: #fffbeb; --toast-info-bg: #fff5f5ff; } /* ═══════════════════════════════════════════════════ تم تاریک — فقط مقادیرِ توکن‌های بالا override می‌شوند. با کلیکِ دکمهٔ تعویضِ تم در هدر، ‎data-theme="dark"‎ روی ست می‌شود (assets/js در pages/header.php). ═══════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* به مرورگر می‌گوید عناصر بومی (اسکرول‌بار، فرم‌کنترل‌های سیستمی و...) را با تمِ تاریک رندر کند؛ این یک خط، اسکرول‌بارهای پیش‌فرض/بدون استایل‌شخصیِ کل اپ را پوشش می‌دهد */ color-scheme: dark; --surface: #1b2130; --bg-page: #12151f; --text-strong: #e8eaed; --text-muted: #9aa4b5; --border-soft: #2b3242; --icon-accent: #cdb8ff; --brand-gradient: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%); --info-box-bg: #232a3a; --warning-box-bg: rgba(255, 193, 7, 0.15); --warning-box-text: #ffb74d; --toast-success-bg: rgba(16, 185, 129, 0.14); --toast-error-bg: rgba(239, 68, 68, 0.14); --toast-warning-bg: rgba(245, 158, 11, 0.14); --toast-info-bg: rgba(59, 130, 246, 0.14); } /* ======================================== 2. تایپوگرافی و پایه ======================================== */ * { font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif !important; } body { background-color: var(--bg-page); color: var(--text-strong); line-height: 1.6; font-size: 14px; margin-top: 3.5rem; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; color: var(--text-strong); } /* ======================================== 3. ناوبری (Navbar) ======================================== */ .navbar { background: var(--surface) !important; box-shadow: 0 4px 20px rgba(135, 92, 242, 0.08); border-bottom: 1px solid rgba(135, 92, 242, 0.1); padding: 0.4rem 0 !important; } :root[data-theme="dark"] .navbar { box-shadow: 0 4px 20px rgba(0, 0, 0, .35); border-bottom: 1px solid var(--border-soft); } /* متن و آیکنِ لینک‌های هدر در تم تاریک — روشن‌تر از --text-muted عمومی، چون آن توکن هنوز در صفحات مهاجرت‌نشده (مثل ticket.css) با پس‌زمینهٔ روشن استفاده می‌شود */ :root[data-theme="dark"] .navbar .nav-link { color: #c9d1de !important; } :root[data-theme="dark"] .navbar .nav-link:hover, :root[data-theme="dark"] .navbar .nav-link.active { color: var(--icon-accent) !important; } /* دراورِ موبایل: dashboard-responsive.css یک رنگ ثابت (#334155) با !important روی #mainNav .nav-link ست کرده که تم را نادیده می‌گیرد؛ اینجا با همان وزنِ اهمیت ولی specificity بالاتر override می‌شود */ :root[data-theme="dark"] #mainNav .nav-link { color: #c9d1de !important; } .theme-toggle-btn { background: none; border: none; font: inherit; cursor: pointer; } #mainNav .dropdown-menu { position: absolute !important; z-index: 9999 !important; } .navbar .dropdown-menu { z-index: 1050 !important; } .nav-tabs { border-bottom: 2px solid var(--gray-200); } .nav-tabs .nav-link { border: none; color: var(--gray-600); font-weight: 500; padding: 0.75rem 1.25rem; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s ease; } .nav-tabs .nav-link:hover { color: var(--primary); border-bottom-color: var(--gray-300); } .nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: none; } /* ======================================== 4. کارت‌ها ======================================== */ .card { border: none; border-radius: var(--radius); box-shadow: var(--shadow); transition: all 0.2s ease; background: white; margin-bottom: 1.5rem; } :root[data-theme="dark"] .card { background: var(--surface); } .card:hover { box-shadow: var(--shadow-md); } .card-header { background: var(--primary-gradient); border-bottom: 1px solid var(--gray-200); border-radius: var(--radius) var(--radius) 0 0 !important; padding: 1rem; font-weight: 500; } .card-header h5 { color: white; font-weight: 500; font-size: 16px; } .card-body { padding: 1.5rem; } /* ======================================== 5. دکمه‌ها ======================================== */ .btn { border-radius: var(--radius-sm); padding: 0.625rem 1.25rem; font-weight: 500; font-size: 0.875rem; border: none; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); } .btn-success { background: var(--success); color: white; } .btn-success:hover { background: var(--success-dark); } .btn-warning { background: var(--warning); color: white; } .btn-danger { background: var(--danger); color: white; } .btn-outline-primary { border: 2px solid var(--primary); color: var(--primary); background: white; } .btn-outline-primary:hover { background: var(--primary); color: white; } :root[data-theme="dark"] .btn-outline-primary { background: transparent; } .btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; } /* ======================================== 6. فرم‌ها ======================================== */ .form-control, .form-select { border: 1px solid var(--gray-300); border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; font-size: 0.875rem; transition: all 0.2s ease; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); outline: none; } [dir="rtl"] .form-select { padding-left: 2.5rem !important; padding-right: 0.75rem !important; background-position: left 0.75rem center !important; } .form-label { font-weight: 500; color: var(--gray-700); margin-bottom: 0.5rem; font-size: 0.875rem; } .form-section { margin-bottom: 24px; padding: 20px; background: #fafbfc; border-radius: 8px; border: 1px solid #e8eaed; display: none; } .form-section.active { display: block; animation: fadeIn 0.3s ease-in; } .form-section h4 { color: #1a1a1a; margin-bottom: 20px; font-weight: 600; font-size: 1.1rem; } .form-section h4 i { color: #667eea; } :root[data-theme="dark"] .form-section { background: var(--surface); border-color: var(--border-soft); } :root[data-theme="dark"] .form-section h4 { color: var(--text-strong); } @media (max-width: 768px) { .form-section { padding: 16px; } } /* ======================================== 7. Badge ها - پوشش کامل همه انواع ======================================== */ /* --- Badge پایه --- */ .badge { padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; /* بود: 500 — متن پررنگ‌تر */ border-radius: 6px; /* مستطیلی با گوشهٔ ملایم */ display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; letter-spacing: 0.3px; } .badge i { font-size: 0.6rem; } /* --- Bootstrap badge رنگ‌ها --- */ .badge.bg-primary { background: var(--primary) !important; } .badge.bg-success { background: var(--success) !important; } .badge.bg-warning { background: var(--warning) !important; color: white !important; } .badge.bg-danger { background: var(--danger) !important; } .badge.bg-info { background: var(--info) !important; } .badge.bg-secondary { background: var(--gray-500) !important; } .badge.bg-light { background: var(--gray-100) !important; } .badge-info { background-color: #17a2b8; color: white; } /* --- Badge بخش‌ها (section) - گزارش تیم --- */ .badge-section { display: inline-block; } .badge.sales { background: #dbeafe; color: #1e40af; } .badge.technical { background: #fef3c7; color: #92400e; } .badge.warehouse { background: #d1fae5; color: #065f46; } .badge.accounting { background: #fce7f3; color: #831843; } .badge.management { background: #e0e7ff; color: #3730a3; } .badge.purchase { background: #ffedd5; color: #9a3412; } .badge.public { background: #f3f4f6; color: #374151; } /* بج‌های خنثیِ خاکستری/سفید — روی پس‌زمینهٔ تیره باید تیره بشن، نه سفید بمونن. بج‌های رنگی (آبی/سبز/قرمز/بنفش/فیروزه‌ای) خودشون کنتراستِ کافی دارن و دست نمی‌خورن */ :root[data-theme="dark"] .badge.public { background: #2b3242; color: #c7cfdd; } .status-period_done { background: #cffafe; color: #0e7490; } .status-overdue { background: #fee2e2; color: #b91c1c; } .status-not_started { background: #f1f3f5; /* بود: #f3f4f6 */ color: #495057; /* بود: #6b7280 — تیره‌تر */ } :root[data-theme="dark"] .status-not_started { background: #2b3242; color: #c7cfdd; } .status-in_progress { background: #e7f0ff; /* بود: #dbeafe */ color: #1554d1; /* بود: #1d4ed8 — شارپ‌تر */ } .status-completed { background: #e3faf0; /* بود: #d1fae5 */ color: #037a52; /* بود: #047857 */ } .status-pending_approval { background: #fff4d6; /* بود: #fef3c7 */ color: #a16207; /* بود: #b45309 */ } .status-approved { background: #dcf5e3; /* بود: #d4edda */ color: #0f7a2e; /* بود: #155724 */ } .status-delegated { background: #e8eaff; /* بود: #e0e7ff */ color: #3730d4; /* بود: #4338ca */ } .status-stopped { background: #f1f3f5; color: #495057; } :root[data-theme="dark"] .status-stopped { background: #2b3242; color: #c7cfdd; } .status-rejected { background: #ffe3e6; /* بود: #f8d7da */ color: #c81e1e; /* بود: #721c24 — قرمز شارپ */ } .status-termination_requested { background: #e0fff2; /* بود: #edfff5 */ color: #158463; /* بود: #299e7d */ } .status-waiting { background: #fff3cd; color: #856404; } .status-pending { background: #d1ecf1; color: #0c5460; } .priority-high { background: #ffe3e3; /* بود: #fee2e2 */ color: #cc1f1f; /* بود: #dc2626 */ } .priority-medium { background: #fff0d0; /* بود: #fef3c7 */ color: #c26a06; /* بود: #d97706 */ } .priority-low { background: #dcf7e6; /* بود: #d1fae5 */ color: #04794a; /* بود: #059669 */ } .type-periodic { background: #e6e9ff; /* بود: #e0e7ff */ color: #3f38d6; /* بود: #4f46e5 */ } .type-continuous { background: #ffe6f2; /* بود: #fce7f3 */ color: #c91f74; /* بود: #db2777 */ } /* --- Badge روزها (مهلت) --- */ .days-badge { font-size: 0.68rem; font-weight: 500; padding: 0.15rem 0.35rem; border-radius: 3px; } .days-overdue { background: #ffe8e8; /* بود: #fef2f2 */ color: #d61f1f; /* بود: #dc2626 — قرمز شارپ‌تر */ font-weight: 600; /* پررنگ‌تر */ } .days-today { background: #fff3d6; /* بود: #fffbeb */ color: #c2740a; /* بود: #d97706 */ font-weight: 600; } .days-soon { background: #fff0cc; /* بود: #fef3c7 */ color: #a5620a; /* بود: #b45309 */ font-weight: 600; } .days-normal { background: #e6faec; /* بود: #f0fdf4 */ color: #12772c; /* بود: #15803d */ font-weight: 600; } s-normal { background: #f0fdf4; color: #15803d; } /* --- Status Badge (درخواست‌ها) --- */ .status-badge { display: inline-block; padding: 6px 10px; border-radius: 20px; font-size: 10px; font-weight: 500; text-align: center; } .status-badge-large { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 25px; font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } .status-badge.status-with-timeline { position: relative; } /* --- Request Badge (نوع درخواست) --- */ .request-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 10px; font-size: 9px; font-weight: 600; } .request-badge i { font-size: 10px; } .request-badge.pass { background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: white; } .request-badge.mission { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); color: white; } .request-badge.leave { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); color: white; } .request-badge.forget { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); color: white; } .request-badge.technical { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: white; } /* --- Pending Badge --- */ .pending-badge { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 700; } /* --- Role Badge (نقش‌ها) --- */ .role-badge { padding: 4px 10px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 600; } .role-badge.substitute { background: #FEF3C7; color: #D97706; } .role-badge.manager { background: #DBEAFE; color: #2563EB; } .role-badge.supervisor { background: #F3E8FF; color: #7C3AED; } .role-badge.admin { background: #FCE7F3; color: #DB2777; } /* --- Shift Badge (شیفت) --- */ .shift-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .badge-shift1 { background: #3B82F6; color: white; } .badge-shift2 { background: #7C3AED; color: white; } /* --- Unit Badge (واحد فعالیت) --- */ .unit-badge { font-size: 0.75rem; padding: 5px 10px; border-radius: 20px; font-weight: 500; } .unit-RS { background-color: #3B82F6; color: white; } .unit-ATM { background-color: #10b981; color: white; } .unit-AM { background-color: #f59e0b; color: #212529; } .unit-AC { background-color: #dc3545; color: white; } .unit-HE { background-color: #fd7e14; color: white; } .unit-PR { background-color: #7C3AED; color: white; } /* --- Step Badge (مراحل روتین) --- */ .step-badge { background: var(--primary-gradient); color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; margin: 2px; } /* --- Time Badge (حضور و غیاب) --- */ .time-badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; } .time-badge.in { background: #d1fae5; color: #065f46; } .time-badge.out { background: #fee2e2; color: #991b1b; } .time-badge.absent { background: #fef3c7; color: #92400e; } .time-badge.holiday { background: #f3f4f6; color: #6b7280; } .step-info { flex-grow: 1; } .step-info strong { color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 4px; } .step-unit { display: inline-block; background: #e8eaed; padding: 3px 10px; border-radius: 12px; font-size: 12px; margin-right: 8px; color: #5f6368; font-weight: 500; } .step-time { color: #5f6368; font-size: 13px; } .step-time i { opacity: 0.7; } /* استایل سوئیچ */ .form-check-input { width: 3rem !important; height: 1.5rem; margin-left: 0.5rem; border: 2px solid #e8eaed; background-color: #f1f3f4; cursor: pointer; } .form-check-input:checked { background-color: #667eea; border-color: #667eea; } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); border-color: #667eea; } .form-check-label { font-weight: 500; color: #1a1a1a; user-select: none; cursor: pointer; font-size: 14px; margin: 5px auto auto 5px; } /* ======================================== 8. Alert ها ======================================== */ .alert { border-radius: var(--radius-sm); border: none; padding: 1rem 1.25rem; font-size: 0.875rem; } .alert-info { background: #e0f2fe; color: #075985; } .alert-warning { background: #fef3c7; color: #92400e; } .alert-danger { background: #fee2e2; color: #991b1b; } .alert-success { background: #d1fae5; color: #065f46; } .custom-alert { position: fixed; top: 90px; left: 20px; z-index: 9999; min-width: 280px; border-radius: var(--radius-sm); font-size: 0.85rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: slideIn 0.3s ease; } /* استایل‌های workflow */ .workflow-preview { background: white; border: 1px solid #e8eaed; border-radius: 8px; padding: 16px; margin-top: 16px; } .workflow-preview h6 { color: #1a1a1a; font-weight: 600; font-size: 14px; margin-bottom: 16px; } .workflow-preview h6 i { color: #667eea; } .step-preview-item { display: flex; align-items: center; padding: 12px; margin-bottom: 8px; background: #fafbfc; border-radius: 8px; border-right: 3px solid #667eea; transition: all 0.2s ease; } .step-preview-item:hover { background: #f1f3f4; } .step-preview-item i.bi-arrow-left { color: #dadce0; font-size: 18px; margin-right: 8px; } :root[data-theme="dark"] .workflow-preview { background: var(--surface); border-color: var(--border-soft); } :root[data-theme="dark"] .workflow-preview h6 { color: var(--text-strong); } :root[data-theme="dark"] .step-preview-item { background: var(--bg-page); } :root[data-theme="dark"] .step-preview-item:hover { background: var(--border-soft); } :root[data-theme="dark"] .step-preview-item i.bi-arrow-left { color: var(--text-muted); } .step-number { width: 32px; height: 32px; background: #667eea; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 12px; font-weight: 600; font-size: 14px; flex-shrink: 0; } /* ======================================== 9. کانتینر و لایه‌بندی اصلی ======================================== */ .overview-container { max-width: 70% !important; margin: 0 auto; padding: 1rem 1rem; } .overview-container h1 { font-size: 18px; } .main-content { padding: 20px; max-width: 70%; margin: 0 auto; } /* ======================================== 10. فیلترها ======================================== */ .filters-wrapper { background: white; border-radius: 10px; padding: 1rem 1rem .8rem 1rem; margin-bottom: 0; margin-top: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); border: 1px solid #f0f0f0; } :root[data-theme="dark"] .filters-wrapper { background: var(--surface); border-color: var(--border-soft); } /* --- لایه‌بندی ۲ ستونی فیلتر (عنوان + کنترل‌ها) --- */ .filters-wrapper.two-col { display: flex; align-items: center; gap: 1.5rem; } .filters-title-col { flex-shrink: 0; border-left: 1px solid #e5e7eb; padding-left: 1.5rem; } .filters-title-col h1 { font-size: 1.2rem; font-weight: 700; color: #1f2937; margin: 0; white-space: nowrap; } .filters-title-col p { font-size: 0.75rem; color: #6b7280; margin: 0.15rem 0 0 0; } :root[data-theme="dark"] .filters-title-col { border-left-color: var(--border-soft); } :root[data-theme="dark"] .filters-title-col h1 { color: var(--text-strong); } :root[data-theme="dark"] .filters-title-col p { color: var(--text-muted); } .filters-controls-col { flex: 1; } /* --- فیلتر با search-box (صفحات task) --- */ .search-box { position: relative; margin-bottom: .6rem; } .search-box input { width: 100%; padding: 0.6rem 2rem 0.6rem 2.5rem; border: 1px solid #e5e7eb; border-radius: var(--radius-sm); font-size: 0.85rem; transition: all 0.2s; background: #fafbfc; } .search-box input:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08); } :root[data-theme="dark"] .search-box input { background: var(--surface); border-color: var(--border-soft); color: var(--text-strong); } :root[data-theme="dark"] .search-box input:focus { background: var(--surface); border-color: var(--icon-accent); box-shadow: 0 0 0 3px rgba(205, 184, 255, 0.15); } .search-box i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.95rem; } /* --- فیلتر با search-wrapper (صفحات گزارش) --- */ .search-wrapper { position: relative; } .search-wrapper i { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.9rem; } /* --- ردیف فیلترها (grid) --- */ .filters-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.75rem; align-items: center; } /* حالت flex برای فیلترهای گزارش */ .filters-row.flex { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; } /* --- filter-group (لیبل + اینپوت) --- */ .filter-group { flex: 1; min-width: 120px; } .filter-group.search-group { flex: 2; } .filter-label { font-size: 0.75rem; color: #6b7280; margin-bottom: 0.25rem; display: block; } /* --- filter-select و filter-input (استایل مستقیم select/input) --- */ .filter-select, .filter-input { width: 100%; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: var(--radius-xs); font-size: 0.8rem; background: white; transition: all 0.2s; } .filter-input { padding-right: 2rem; } .filter-select:focus, .filter-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } :root[data-theme="dark"] .filter-select, :root[data-theme="dark"] .filter-input { background: var(--surface); border-color: var(--border-soft); color: var(--text-strong); } /* --- filter-item (select با آیکون ▼) --- */ .filter-item { position: relative; } .filter-item select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; border-radius: var(--radius-xs); font-size: 0.8rem; background: white; color: #374151; cursor: pointer; transition: all 0.2s; appearance: none; } :root[data-theme="dark"] .filter-item select { background: var(--surface); border-color: var(--border-soft); color: var(--text-strong); } .filter-item select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08); } .filter-item::after { content: '▼'; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; font-size: 0.6rem; } .filter-item.no-arrow::after { display: none; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; height: 100%; padding: 0.5rem 0.75rem; background: #fafbfc; border: 1px solid #e5e7eb; border-radius: var(--radius-xs); } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } .checkbox-item label { font-size: 0.8rem; color: #374151; cursor: pointer; margin: 0; white-space: nowrap; } :root[data-theme="dark"] .checkbox-item { background: var(--surface); border-color: var(--border-soft); } :root[data-theme="dark"] .checkbox-item label { color: var(--text-strong); } .filter-btn { border: 1px solid var(--gray-300); border-radius: 20px; padding: 0.5rem 1rem; background: white; color: var(--gray-700); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } :root[data-theme="dark"] .filter-btn { background: var(--surface); border-color: var(--border-soft); color: var(--text-strong); } .filter-btn:hover { border-color: var(--primary); color: var(--primary); } .filter-btn.active { background: var(--primary); border-color: var(--primary); color: white; } .btn-delete { padding: 0.3rem 0.5rem; background: none; color: var(--gray-300); border: none; border-radius: 4px; font-size: 0.7rem; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.25rem; } .btn-delete:hover { color: #dc2626; } .btn-delete i { font-size: 1rem; } /* Per-page buttons */ .per-page-buttons { display: flex; gap: 4px; background: #f3f4f6; padding: 3px; border-radius: var(--radius-xs); } .per-page-btn { flex: 1; padding: 0.5rem 0.4rem; border: none; background: transparent; color: #6b7280; font-size: 0.75rem; font-weight: 500; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .per-page-btn:hover { background: #e5e7eb; color: #374151; } .per-page-btn.active { background: white; color: var(--primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } :root[data-theme="dark"] .per-page-btn { color: var(--text-muted); } :root[data-theme="dark"] .per-page-btn:hover { background: var(--border-soft); color: var(--text-strong); } :root[data-theme="dark"] .per-page-btn.active { background: var(--surface); color: var(--icon-accent); } /* ======================================== 11. Stats Cards (عمومی) ======================================== */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .stat-card { background: white; border-radius: var(--radius-sm); padding: 0.75rem 1rem; border: 1px solid #f0f0f0; display: grid; align-items: center; /* gap: 0.75rem; */ box-shadow: var(--shadow-sm); transition: all 0.2s ease; height: stretch; } /* برخی صفحات (مثل attendance_system/pages/requests.php) هم custom.css را مستقیم لینک می‌کنند و هم header.php را include می‌کنند که خودش دوباره custom.css را لود می‌کند؛ چون این include بعد از