/* ============================================================ style.css — Custom Stylesheet نظام إدارة النتائج لجامعة هيك تشاد Complements Tailwind CSS + Font Awesome ============================================================ */ /* ── Google Fonts Import ── */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&family=Poppins:wght@300;400;500;600;700&display=swap'); /* ───────────────────────────────────────────── 1. CSS Custom Properties (Design Tokens) ───────────────────────────────────────────── */ :root { --primary: #3b82f6; /* blue-500 */ --primary-dark: #1e40af; /* blue-800 */ --primary-light: #eff6ff; /* blue-50 */ --success: #10b981; /* emerald-500 */ --danger: #ef4444; /* red-500 */ --warning: #f59e0b; /* amber-500 */ --info: #06b6d4; /* cyan-500 */ --bg-body: #f1f5f9; --bg-card: #ffffff; --bg-sidebar: #ffffff; --bg-nav: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --text-light: #94a3b8; --border: #e2e8f0; --radius: 0.5rem; --radius-lg: 0.75rem; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04); --shadow: 0 4px 12px rgba(0, 0, 0, .08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .12); --transition: 0.2s ease; --font-ar: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; --font-en: 'Poppins', 'Segoe UI', sans-serif; } /* ───────────────────────────────────────────── 2. Base / Reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-ar); background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; font-size: 0.9375rem; } /* RTL global (set in ) */ [dir="rtl"] body { font-family: var(--font-ar); } a { color: var(--primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary-dark); text-decoration: underline; } img { max-width: 100%; display: block; } /* Header logo must not be stretched by the global img rule */ .site-header__logo { max-width: none !important; } /* ───────────────────────────────────────────── 3. Site Header (modern) ───────────────────────────────────────────── */ /* Sticky wrapper */ .site-header { position: sticky; top: 0; z-index: 200; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%); box-shadow: 0 4px 20px rgba(37, 99, 235, .35); } /* Top inner row: brand ↔ controls */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.5rem; gap: 1rem; } @media (max-width: 767px) { .site-header__inner { padding: 0.5rem 0.75rem; gap: 0.75rem; } } /* Brand link */ .site-header__brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none !important; } @media (max-width: 767px) { .site-header__brand { gap: 0.5rem; } } .site-header__logo { height: 48px; width: auto; max-height: 48px; flex-shrink: 0; border-radius: 0.4rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); transition: transform var(--transition); display: block; } @media (max-width: 767px) { .site-header__logo { height: 40px; max-height: 40px; } } .site-header__brand:hover .site-header__logo { transform: scale(1.06); } .site-header__titles { display: flex; flex-direction: column; line-height: 1.3; } .site-header__title { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: 0.01em; } @media (max-width: 767px) { .site-header__title { font-size: 0.9rem; } } .site-header__subtitle { font-size: 0.78rem; color: rgba(255,255,255,0.72); font-weight: 500; } /* Controls group */ .site-header__controls { display: flex; align-items: center; gap: 0.5rem; } /* Mobile: reduce controls gap */ @media (max-width: 767px) { .site-header__controls { gap: 0.35rem; } .hdr-icon-btn > button, .hdr-user__btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; } .hdr-icon-btn > button { width: 32px; height: 32px; } .hdr-user__avatar { width: 24px; height: 24px; font-size: 0.75rem; } } /* ── Bell icon button ── */ .hdr-icon-btn { position: relative; } .hdr-icon-btn > button { position: relative; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition), transform var(--transition); font-size: 0.95rem; padding: 0; } .hdr-icon-btn > button:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); } .hdr-icon-btn > button i { margin: 0 !important; } /* Badge on bell */ .hdr-badge { position: absolute; top: -4px; left: -4px; background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid #2563eb; animation: pulse-badge 1.5s infinite; } @keyframes pulse-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* ── User button ── */ .hdr-user { position: relative; } .hdr-user__btn { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; padding: 0.35rem 0.85rem 0.35rem 0.55rem; border-radius: 99px; cursor: pointer; transition: background var(--transition); font-size: 0.875rem; font-weight: 500; font-family: var(--font-ar); } .hdr-user__btn:hover { background: rgba(255,255,255,0.25); } .hdr-user__avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.9); color: #1e40af; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hdr-user__name { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr-user__caret { font-size: 0.65rem !important; opacity: 0.75; margin: 0 !important; transition: transform 0.2s; } /* ── Shared dropdown ── */ .hdr-dropdown { position: absolute; top: calc(100% + 8px); left: 0; /* RTL: opens to the left */ background: #fff; border-radius: 0.75rem; box-shadow: 0 8px 32px rgba(0,0,0,.15); border: 1px solid var(--border); border-top: 3px solid var(--primary); overflow: hidden; min-width: 200px; z-index: 300; animation: dropIn 0.18s ease; } @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .hdr-dropdown__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; font-size: 0.875rem; color: var(--text-main) !important; text-decoration: none !important; transition: background var(--transition), color var(--transition); font-family: var(--font-ar); } .hdr-dropdown__item:hover { background: var(--primary-light); color: var(--primary-dark) !important; } .hdr-dropdown__item i { width: 1rem; text-align: center; color: var(--primary); margin: 0 !important; flex-shrink: 0; } .hdr-dropdown__item--danger, .hdr-dropdown__item--danger i { color: var(--danger) !important; } .hdr-dropdown__item--danger:hover { background: #fee2e2 !important; color: #991b1b !important; } .hdr-dropdown__divider { height: 1px; background: var(--border); margin: 0.25rem 0; } .hdr-dropdown__empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; } /* ───────────────────────────────────────────── 3b. Horizontal Navigation Strip ───────────────────────────────────────────── */ .site-nav { background: rgba(0,0,0,0.18); border-top: 1px solid rgba(255,255,255,0.12); display: block; } /* Hide nav strip on desktop (≥1024px), show sidebar instead */ @media (min-width: 1024px) { .site-nav { display: none; } } .site-nav__inner { display: flex; align-items: center; gap: 0.15rem; padding: 0 1rem; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(255,255,255,0.3) rgba(0,0,0,0.1); -ms-overflow-style: auto; /* IE/Edge */ /* RTL: flex flows right-to-left automatically via html dir="rtl" */ } @media (max-width: 767px) { .site-nav__inner { padding: 0 0.5rem; gap: 0.1rem; } } .site-nav__inner::-webkit-scrollbar { height: 4px; } .site-nav__inner::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); } .site-nav__inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; } .site-nav__inner::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); } .site-nav__link { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.1rem; color: rgba(255,255,255,0.8) !important; text-decoration: none !important; font-size: 0.875rem; font-weight: 500; white-space: nowrap; border-bottom: 3px solid transparent; transition: color var(--transition), border-color var(--transition), background var(--transition); flex-shrink: 0; font-family: var(--font-ar); } @media (max-width: 767px) { .site-nav__link { padding: 0.55rem 0.75rem; font-size: 0.8rem; gap: 0.3rem; } } .site-nav__link i { font-size: 0.85rem; margin: 0 !important; flex-shrink: 0; } @media (max-width: 767px) { .site-nav__link i { font-size: 0.75rem; } } .site-nav__link:hover { color: #fff !important; background: rgba(255,255,255,0.1); border-bottom-color: rgba(255,255,255,0.5); } .site-nav__link.active { color: #fff !important; font-weight: 700; border-bottom-color: #fff; background: rgba(255,255,255,0.15); } /* ───────────────────────────────────────────── 3c. Page layout (body / sidebar / main) ───────────────────────────────────────────── */ .site-body { background: var(--bg-body); min-height: calc(100vh - 110px); } .site-body__inner { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1rem; /* Mobile-first: single column, sidebar hidden */ display: block; } .site-sidebar { display: none; /* hidden by default (mobile) */ } .site-sidebar__card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 0.5rem 0; overflow: hidden; } .site-main { min-width: 0; } /* Desktop (≥1024px): switch to sidebar + main grid */ @media (min-width: 1024px) { .site-body__inner { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; } .site-sidebar { display: block; position: sticky; top: 115px; } } /* Mobile-only header tweaks */ @media (max-width: 767px) { .site-header__subtitle { display: none; } .hdr-user__name { display: none; } .site-body__inner { padding: 1rem 0.75rem; } /* Mobile navigation bar fixes */ .site-nav__inner { padding: 0 0.75rem; gap: 0.05rem; } } /* ───────────────────────────────────────────── 4. Sidebar links (desktop panel) ───────────────────────────────────────────── */ .sidebar-link { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.65rem 1rem; color: var(--text-main); font-weight: 500; transition: background var(--transition), color var(--transition); font-size: 0.9rem; text-decoration: none !important; direction: rtl; text-align: right; } .sidebar-link i { width: 1.1rem; text-align: center; font-size: 0.9rem; color: var(--primary); flex-shrink: 0; margin: 0 !important; } .sidebar-link:hover { background: var(--primary-light); color: var(--primary-dark); } .sidebar-link:hover i { color: var(--primary-dark); } .sidebar-link.active { background: var(--primary); color: #fff !important; font-weight: 700; } .sidebar-link.active i { color: #fff !important; } /* ───────────────────────────────────────────── 5. Cards ───────────────────────────────────────────── */ .card, .bg-white.rounded-lg.shadow { background: var(--bg-card); border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--border); transition: box-shadow var(--transition), transform var(--transition); } .bg-white.rounded-lg.shadow:hover { box-shadow: var(--shadow) !important; transform: translateY(-1px); } /* Stat icon circles */ .p-3.rounded-full { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); flex-shrink: 0; } /* ───────────────────────────────────────────── 6. Tables ───────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } thead { background: linear-gradient(135deg, #f8fafc, #f1f5f9); } thead th { padding: 0.85rem 1rem; text-align: right; font-weight: 700; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--border); white-space: nowrap; } [dir="ltr"] thead th { text-align: left; } tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); } tbody tr { transition: background var(--transition), box-shadow var(--transition); } tbody tr:hover { background: var(--primary-light); box-shadow: inset 3px 0 0 var(--primary); /* left accent bar on hover */ } [dir="rtl"] tbody tr:hover { box-shadow: inset -3px 0 0 var(--primary); } tbody td { padding: 0.75rem 1rem; color: var(--text-main); vertical-align: middle; } tbody tr:last-child { border-bottom: none; } /* overflow wrapper */ .overflow-x-auto { border-radius: var(--radius); border: 1px solid var(--border); } /* ───────────────────────────────────────────── 7. Forms & Inputs ───────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], select, textarea { width: 100%; padding: 0.55rem 0.85rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-ar); font-size: 0.9rem; color: var(--text-main); background: #fff; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); /* color: var(--text-main); */ } select option { background-color: #ffffff; color: var(--text-main); /* color: gray; */ } /* option:hover { background-color: var(--primary); color: #fff; } */ label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text-main); margin-bottom: 0.3rem; } /* ───────────────────────────────────────────── 8. Buttons ───────────────────────────────────────────── */ button, .btn, a.btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.2rem; border: none; border-radius: var(--radius); font-family: var(--font-ar); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--transition); text-decoration: none !important; } button:active { transform: scale(0.97); } /* Primary button override for Tailwind classes */ .bg-blue-600 { transition: background var(--transition), box-shadow var(--transition) !important; } /* ── Colored button hover: lift + glow ── */ .bg-blue-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(37, 99, 235, .45) !important; transform: translateY(-1px); } .bg-green-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(5, 150, 105, .45) !important; transform: translateY(-1px); } .bg-red-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(220, 38, 38, .45) !important; transform: translateY(-1px); } .bg-yellow-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(180, 83, 9, .45) !important; transform: translateY(-1px); } .bg-purple-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(109, 40, 217, .45) !important; transform: translateY(-1px); } .bg-indigo-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(79, 70, 229, .45) !important; transform: translateY(-1px); } .bg-pink-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(219, 39, 119, .45) !important; transform: translateY(-1px); } .bg-teal-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(13, 148, 136, .45) !important; transform: translateY(-1px); } .bg-gray-600:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(75, 85, 99, .45) !important; transform: translateY(-1px); } /* ───────────────────────────────────────────── 8b. Icon ↔ Text Spacing (Global) ───────────────────────────────────────────── */ /* Any Font Awesome icon that has a sibling text node (inside a button, link, or any element) */ a>i[class*="fa-"], a>i[class*="fas"], a>i[class*="far"], a>i[class*="fal"], button>i[class*="fa-"], button>i[class*="fas"], button>i[class*="far"], span>i[class*="fa-"], span>i[class*="fas"] { display: inline-block; /* LTR: space after icon, before text */ margin-left: 0; margin-right: 0.45rem; line-height: 1; vertical-align: middle; } /* RTL: flip — space should be to the LEFT of the icon (i.e. between icon and the Arabic text that follows) */ [dir="rtl"] a>i[class*="fa-"], [dir="rtl"] a>i[class*="fas"], [dir="rtl"] a>i[class*="far"], [dir="rtl"] a>i[class*="fal"], [dir="rtl"] button>i[class*="fa-"], [dir="rtl"] button>i[class*="fas"], [dir="rtl"] button>i[class*="far"], [dir="rtl"] span>i[class*="fa-"], [dir="rtl"] span>i[class*="fas"] { margin-right: 0; margin-left: 0.45rem; } /* Tailwind mr-2 override in RTL (Tailwind applies margin-right, wrong side in RTL) */ [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; } /* Also ensure action links/buttons that contain icons are flex so spacing is clean */ a[class*="bg-"], a[class*="py-"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; text-decoration: none !important; } /* ───────────────────────────────────────────── 9. Badges / Status Pills ───────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .badge-success { background: #d1fae5; color: #065f46; } .badge-danger { background: #fee2e2; color: #991b1b; } .badge-warning { background: #fef3c7; color: #92400e; } .badge-info { background: #cffafe; color: #164e63; } .badge-primary { background: #dbeafe; color: #1e40af; } .badge-gray { background: #f1f5f9; color: #475569; } /* Tailwind text-based status helpers */ .text-green-600 { font-weight: 600; } .text-red-600 { font-weight: 600; } /* ───────────────────────────────────────────── 10. Login Page ───────────────────────────────────────────── */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%); padding: 1rem; } /* The white login card */ body.bg-gray-100.flex>.bg-white { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; border: none; } /* ───────────────────────────────────────────── 11. Alerts / Flash Messages ───────────────────────────────────────────── */ .alert { padding: 0.9rem 1.2rem; border-radius: var(--radius); margin-bottom: 1rem; border-right: 4px solid transparent; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } [dir="ltr"] .alert { border-right: none; border-left: 4px solid transparent; } .alert-success { background: #d1fae5; color: #065f46; border-color: #10b981; } .alert-danger { background: #fee2e2; color: #991b1b; border-color: #ef4444; } .alert-warning { background: #fef3c7; color: #92400e; border-color: #f59e0b; } .alert-info { background: #cffafe; color: #164e63; border-color: #06b6d4; } /* Tailwind-generated alert */ .bg-red-100.border.border-red-400 { border-radius: var(--radius) !important; font-size: 0.875rem; } /* ───────────────────────────────────────────── 12. Notification Dropdown ───────────────────────────────────────────── */ #notification-dropdown { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--border); border-top: 3px solid var(--primary); } #notification-dropdown>div { transition: background var(--transition); } #notification-dropdown>div:hover { background: var(--primary-light); } /* User dropdown */ #user-menu-dropdown { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--border); border-top: 3px solid var(--primary); overflow: hidden; } #user-menu-dropdown a { color: var(--text-main) !important; transition: background var(--transition), color var(--transition); font-size: 0.875rem; } #user-menu-dropdown a:hover { background: var(--primary-light) !important; color: var(--primary-dark) !important; text-decoration: none !important; } /* ───────────────────────────────────────────── 13. Modals / Popups ───────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; z-index: 999; backdrop-filter: blur(2px); animation: fadeIn .2s ease; } .modal-box { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2rem; max-width: 30rem; width: 100%; animation: slideUp .25s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────── 14. Page Titles / Section Headers ───────────────────────────────────────────── */ .page-title { font-size: 1.4rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; } .page-title i { color: var(--primary); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border); } /* ───────────────────────────────────────────── 14b. Grade Tab Buttons ───────────────────────────────────────────── */ /* Base tab button */ .grade-tab-button { position: relative; padding: 0.55rem 1.1rem; border-radius: var(--radius) var(--radius) 0 0; font-family: var(--font-ar); font-size: 0.875rem; font-weight: 600; color: var(--text-muted); background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; } .grade-tab-button:hover { background: var(--primary-light); color: var(--primary-dark); } /* Active tab — solid blue background, white bold text */ .grade-tab-button.active, .grade-tab-button.border-blue-500, .grade-tab-button.text-blue-600 { background: #2563eb !important; color: #ffffff !important; font-weight: 700 !important; border-bottom: 3px solid #1e40af !important; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -2px 8px rgba(37, 99, 235, .2); } /* When only text-blue-600 is set (PHP-rendered active without JS) */ .grade-tab-button.text-blue-600:not(.active) { background: #2563eb !important; color: #ffffff !important; font-weight: 700 !important; } /* ───────────────────────────────────────────── 15. Chart Container ───────────────────────────────────────────── */ canvas { max-width: 100%; height: auto !important; } /* ───────────────────────────────────────────── 16. Transcript / Print View ───────────────────────────────────────────── */ @media print { nav, .lg\:col-span-1, .sidebar-link, button, .no-print { display: none !important; } body { background: #fff !important; font-family: var(--font-ar); font-size: 12pt; } table { border: 1px solid #000; } thead th, tbody td { border: 1px solid #999; padding: 6px; } thead { background: #e2e8f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .bg-white.rounded-lg.shadow { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; } } /* ───────────────────────────────────────────── 17. RTL Utilities ───────────────────────────────────────────── */ [dir="rtl"] table, [dir="rtl"] thead th { text-align: right; } [dir="rtl"] .space-x-2>*+*, [dir="rtl"] .space-x-3>*+*, [dir="rtl"] .space-x-4>*+* { margin-right: 0.5rem; margin-left: 0; } /* ───────────────────────────────────────────── 18. Scrollbar (Webkit) ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ───────────────────────────────────────────── 19. Utility Helpers ───────────────────────────────────────────── */ .text-gradient { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; } .loading-spinner { width: 1.5rem; height: 1.5rem; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ───────────────────────────────────────────── 20. Responsive Adjustments ───────────────────────────────────────────── */ @media (max-width: 768px) { nav h1 { font-size: 0.9rem; } body { font-size: 0.875rem; } .sidebar-link { font-size: 0.8rem; padding: 0.5rem 0.7rem; } thead th { font-size: 0.7rem; padding: 0.6rem 0.75rem; } tbody td { padding: 0.6rem 0.75rem; font-size: 0.8rem; } } @media (max-width: 480px) { .p-3.rounded-full { width: 2.5rem; height: 2.5rem; } }