@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap'); :root{ --hr-gold: #c9a24a; --hr-gold-2:#d8b15a; --hr-bg: #f7f7fb; --hr-card:#ffffff; --hr-text:#0f172a; --hr-muted:#64748b; --hr-border:#e5e7eb; --hr-sidebar:#ffffff; --hr-sidebar-2:#f5f6fa; --hr-sidebar-text:#0f172a; --hr-shadow: 0 10px 30px rgba(2,6,23,.08); --hr-radius: 18px; /* Bootstrap color sync (keeps buttons/links consistent) */ --bs-body-bg: var(--hr-bg); --bs-body-color: var(--hr-text); --bs-border-color: var(--hr-border); --bs-primary: var(--hr-gold); --bs-link-color: var(--hr-gold); --bs-link-hover-color: var(--hr-gold-2); } /* ========================= Color Palettes (Luxury Packs) Applies to the whole system via ========================= */ html[data-palette="luxury_gold"]{ --hr-gold:#c9a24a; --hr-gold-2:#d8b15a; --hr-accent:#3aa3ff; --hr-hero-1:#0b1220; --hr-hero-2:#1a2a44; } html[data-palette="royal_black"]{ --hr-gold:#7c3aed; /* primary */ --hr-gold-2:#a78bfa; /* primary-2 */ --hr-accent:#22c55e; --hr-hero-1:#120a22; --hr-hero-2:#2a145a; } html[data-palette="platinum"]{ --hr-gold:#475569; --hr-gold-2:#94a3b8; --hr-accent:#0ea5e9; --hr-hero-1:#0f172a; --hr-hero-2:#334155; } html[data-palette="emerald"]{ --hr-gold:#10b981; --hr-gold-2:#34d399; --hr-accent:#f59e0b; --hr-hero-1:#052014; --hr-hero-2:#0b3a27; } /* ========================================================= Layout shell (Professional, simple, RTL-friendly) ========================================================= */ .hr-shell{display:flex;min-height:100vh;background:var(--hr-bg);} /* sidebar */ .hr-sidebar{ width:280px; flex:0 0 280px; position:sticky; top:0; height:100vh; overflow:auto; background:linear-gradient(180deg,var(--hr-sidebar) 0%, var(--hr-sidebar-2) 100%); border-left:1px solid var(--hr-border); } /* main content */ .hr-main{flex:1;min-width:0;} .hr-content{padding:22px 22px 70px;} /* Fix for any accidental overflow causing narrow cards */ .container, .container-fluid{min-width:0;} .card, .hr-card{min-width:0;} /* Responsive: collapse sidebar on small screens */ @media (max-width: 992px){ .hr-sidebar{position:fixed;z-index:1050;right:0;transform:translateX(100%);transition:transform .2s ease;width:300px;} body.hr-sidebar-open .hr-sidebar{transform:translateX(0);} .hr-content{padding:16px 14px 80px;} } /* Ensure RTL typography stays readable */ body{line-height:1.65;} .table td, .table th{vertical-align:middle;} html[data-theme="dark"]{ --hr-bg: #050914; --hr-card:#0b162b; --hr-text:#f8fafc; --hr-muted:#cbd5e1; --hr-border:#16233a; /* Dark sidebar (higher contrast) */ --hr-sidebar:#060b18; --hr-sidebar-2:#0c1733; --hr-sidebar-text: rgba(255,255,255,.94); --hr-shadow: 0 10px 30px rgba(0,0,0,.35); --bs-body-bg: var(--hr-bg); --bs-body-color: var(--hr-text); --bs-border-color: var(--hr-border); --bs-primary: var(--hr-gold); --bs-link-color: var(--hr-gold); --bs-link-hover-color: var(--hr-gold-2); } /* Dark mode readability: labels / hints / placeholders */ html[data-theme="dark"] label, html[data-theme="dark"] .form-label, html[data-theme="dark"] .hr-label{ color: rgba(229,231,235,.86) !important; } html[data-theme="dark"] .muted, html[data-theme="dark"] .form-help, html[data-theme="dark"] .hr-help{ color: rgba(229,231,235,.65) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color: rgba(229,231,235,.45); } .hr-body{ font-family: 'Cairo','Tajawal',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif; background: var(--hr-bg); color: var(--hr-text); } .hr-app{ display:flex; min-height:100vh; align-items:stretch; } .hr-sidebar{ width: 280px; background: linear-gradient(180deg, var(--hr-sidebar), var(--hr-sidebar-2)); color: var(--hr-sidebar-text); position: sticky; top: 0; height: 100vh; padding: 18px 14px; display:flex; flex-direction: column; border-left: 1px solid var(--hr-border); } .hr-brand{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: var(--hr-radius); padding: 12px; margin-bottom: 14px; } .hr-brand-link{ display:flex; gap: 12px; align-items:center; text-decoration:none; color: inherit; } .hr-logo{ width: 42px; height: 42px; border-radius: 14px; object-fit: cover; box-shadow: 0 8px 20px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); } .hr-logo-fallback{ width: 42px; height: 42px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#111827; background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-2)); } .hr-brand-name{ font-weight: 800; line-height: 1.1; } .hr-brand-sub{ font-size: .8rem; color: rgba(15,23,42,.55); } /* Dark mode: make brand subtitle readable */ html[data-theme="dark"] .hr-brand-sub{ color: rgba(229,231,235,.75); } .hr-nav{ display:flex; flex-direction: column; gap: 6px; padding: 6px 4px; overflow:auto; } .hr-nav-link{ display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 14px; color: var(--hr-sidebar-text); opacity:1; text-decoration:none; border: 1px solid transparent; transition: all .15s ease; } /* Sidebar readability (dark mode): force higher contrast for links + icons */ html[data-theme="dark"] .hr-nav-link{ color: rgba(255,255,255,.92); } html[data-theme="dark"] .hr-nav-link i{ opacity: 1; } html[data-theme="dark"] .hr-nav-link:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); } .hr-nav-link i{ font-size: 1.1rem; opacity:.95; } .hr-nav-link:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); transform: translateX(-2px); } .hr-nav-link.active{ background: color-mix(in srgb, var(--hr-gold) 16%, transparent); border-color: color-mix(in srgb, var(--hr-gold) 35%, transparent); color: var(--hr-text); } /* Dark mode: keep active link text high-contrast */ html[data-theme="dark"] .hr-nav-link.active{ color: rgba(255,255,255,.98); background: color-mix(in srgb, var(--hr-gold) 20%, transparent); border-color: color-mix(in srgb, var(--hr-gold) 45%, transparent); } .hr-sidebar-footer{ margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); } .hr-user{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: var(--hr-radius); padding: 12px; margin-bottom: 10px; } .hr-user-name{ font-weight: 700; } .hr-user-role{ font-size: .85rem; color: rgba(229,231,235,.75); } .hr-main{ flex: 1; min-width: 0; display:flex; flex-direction: column; } .hr-topbar{ position: sticky; top: 0; z-index: 10; display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: rgba(255,255,255,.65); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hr-border); } html[data-theme="dark"] .hr-topbar{ background: rgba(11,18,32,.65); } .hr-topbar-title{ font-weight: 800; letter-spacing: .2px; } .hr-topbar-actions{display:flex;align-items:center;gap:10px;} .hr-badge-gold{ background: color-mix(in srgb, var(--hr-gold) 18%, transparent); border: 1px solid color-mix(in srgb, var(--hr-gold) 35%, transparent); color: var(--hr-text); padding: 10px 12px; border-radius: 999px; } .hr-content{ padding: 18px; } /* Mobile bottom actions (always visible) */ .hr-mobile-actions{ position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1200; display: flex; gap: 10px; justify-content: center; } .hr-mobile-btn{ flex: 1; display:flex; align-items:center; justify-content:center; gap: 8px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(148,163,184,.22); background: rgba(255,255,255,.72); backdrop-filter: blur(12px); color: var(--hr-text); font-weight: 800; box-shadow: 0 12px 28px rgba(0,0,0,.12); } .hr-mobile-btn i{ font-size: 1.05rem; } .hr-mobile-btn:active{ transform: translateY(1px) scale(.99); } .hr-mobile-btn.danger{ border-color: rgba(239,68,68,.25); background: rgba(255,255,255,.72); } html[data-theme="dark"] .hr-mobile-btn{ background: rgba(11,18,32,.62); border-color: rgba(255,255,255,.10); box-shadow: 0 14px 32px rgba(0,0,0,.35); } html[data-theme="dark"] .hr-mobile-btn.danger{ border-color: rgba(239,68,68,.25); } /* prevent bottom actions from covering content */ @media (max-width: 991px){ .hr-content{ padding-bottom: 90px; } } .card{ border-radius: var(--hr-radius) !important; border: 1px solid var(--hr-border) !important; background: var(--hr-card) !important; box-shadow: var(--hr-shadow); } .table th{ white-space: nowrap; } .btn-success{ background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-2)) !important; border: none !important; color: #111827 !important; font-weight: 700; } .btn-success:hover{ filter: brightness(1.03); } .btn-dark{ background: #111827 !important; border: none !important; } .alert{ border-radius: var(--hr-radius); } .form-control, .form-select{ border-radius: 14px; border-color: var(--hr-border); background: color-mix(in srgb, var(--hr-card) 85%, transparent); color: var(--hr-text); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select{ background: rgba(255,255,255,.04); } .form-control::placeholder{color: color-mix(in srgb, var(--hr-muted) 80%, transparent);} .form-control:focus, .form-select:focus{ box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--hr-gold) 18%, transparent); border-color: color-mix(in srgb, var(--hr-gold) 55%, transparent); } .text-muted{ color: var(--hr-muted) !important; } @media (max-width: 992px){ .hr-sidebar{ position: fixed; right: 0; top: 0; transform: translateX(110%); transition: transform .2s ease; z-index: 999; } body.hr-sidebar-open .hr-sidebar{ transform: translateX(0); } .hr-topbar{ padding: 12px 12px; } } /* Premium UI v5 */ :root{ --hr-grad-1: radial-gradient(1200px 600px at 90% 10%, color-mix(in srgb, var(--hr-gold) 35%, transparent), transparent 60%), radial-gradient(900px 500px at 10% 90%, rgba(90,179,255,.18), transparent 55%), linear-gradient(135deg, rgba(15,23,42,.06), rgba(15,23,42,0)); --hr-card-grad: linear-gradient(135deg, color-mix(in srgb, var(--hr-gold) 14%, transparent), rgba(255,255,255,0)); --hr-glass: rgba(255,255,255,.62); --hr-glass-border: rgba(255,255,255,.22); } html[data-theme="dark"]{ --hr-grad-1: radial-gradient(1200px 600px at 90% 10%, color-mix(in srgb, var(--hr-gold) 28%, transparent), transparent 60%), radial-gradient(900px 500px at 10% 90%, rgba(90,179,255,.12), transparent 55%), linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0)); --hr-card-grad: linear-gradient(135deg, color-mix(in srgb, var(--hr-gold) 16%, transparent), rgba(15,23,42,0)); --hr-glass: rgba(7,11,20,.78); --hr-glass-border: rgba(255,255,255,.08); } .hr-surface{ background: var(--hr-grad-1); } .hr-card-premium{ background: var(--hr-card) !important; position: relative; overflow: hidden; } .hr-card-premium::before{ content:""; position:absolute; inset:-2px; background: var(--hr-card-grad); opacity:.9; pointer-events:none; } .hr-card-premium > *{ position:relative; } .hr-kpi{ display:flex; align-items:center; justify-content: space-between; gap: 12px; } .hr-kpi .hr-kpi-icon{ width: 44px; height: 44px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: linear-gradient( 135deg, color-mix(in srgb, var(--hr-gold) 35%, transparent), color-mix(in srgb, var(--hr-gold) 8%, transparent) ); border: 1px solid color-mix(in srgb, var(--hr-gold) 35%, transparent); } .hr-kpi .hr-kpi-value{ font-weight: 900; letter-spacing: .2px; } .hr-kpi .hr-kpi-label{ color: var(--hr-muted); font-weight: 700; } .hr-float{ animation: hrFloat 6s ease-in-out infinite; } @keyframes hrFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} } /* ========================================================= Theme palettes preview (Settings) ========================================================= */ .hr-steps{display:flex;flex-wrap:wrap;gap:10px;padding:12px 12px;border:1px dashed color-mix(in srgb, var(--hr-gold) 35%, var(--hr-border));border-radius:18px;background:color-mix(in srgb, var(--hr-card) 85%, transparent)} .hr-step{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:color-mix(in srgb, var(--hr-gold) 6%, transparent);border:1px solid color-mix(in srgb, var(--hr-gold) 18%, transparent);font-weight:700;color:var(--hr-text)} .hr-step-dot{width:28px;height:28px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--hr-gold),var(--hr-gold-2));color:#0b1220;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.18)} .hr-palette-card{width:100%;text-align:right;appearance:none;border:1px solid var(--hr-border);background:var(--hr-card);border-radius:20px;padding:14px 14px;position:relative;overflow:hidden;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease} .hr-palette-card::before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,color-mix(in srgb, var(--hr-gold) 14%, transparent),transparent 65%);opacity:.65;pointer-events:none} .hr-palette-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.14);border-color:color-mix(in srgb, var(--hr-gold) 35%, var(--hr-border))} .hr-palette-card.active{border-color:color-mix(in srgb, var(--hr-gold) 55%, var(--hr-border));box-shadow:0 22px 52px rgba(0,0,0,.18)} .hr-palette-title{position:relative;font-weight:900;letter-spacing:.2px} .hr-palette-sub{position:relative;color:var(--hr-muted);font-weight:700;font-size:.9rem;margin-top:2px} .hr-palette-swatches{position:relative;display:flex;gap:8px;margin-top:12px} .hr-palette-swatches span{width:34px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 22px rgba(0,0,0,.12)} html[data-theme="dark"] .hr-palette-card::before{opacity:.85} html[data-theme="dark"] .hr-palette-card{border-color:color-mix(in srgb, var(--hr-border) 80%, #000)} /* Auth */ .hr-auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding: 22px; background: var(--hr-grad-1); } .hr-auth-shell{ width: min(980px, 100%); display:grid; grid-template-columns: 1.05fr .95fr; gap: 16px; } @media (max-width: 992px){ .hr-auth-shell{ grid-template-columns: 1fr; } } .hr-auth-hero{ border-radius: 28px; padding: 26px; background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.72)); color: var(--hr-text); position: relative; overflow:hidden; box-shadow: 0 18px 60px rgba(2,6,23,.22); } html[data-theme="dark"] .hr-auth-hero{ background: linear-gradient(135deg, rgba(5,10,20,.92), rgba(15,27,48,.72)); } .hr-auth-hero::before{ content:""; position:absolute; inset:-60px; background: radial-gradient(600px 300px at 75% 25%, rgba(201,162,74,.55), transparent 60%), radial-gradient(520px 280px at 20% 80%, rgba(90,179,255,.22), transparent 60%); opacity: .95; animation: heroMove 9s ease-in-out infinite; } @keyframes heroMove{ 0%,100%{ transform: translate3d(0,0,0) rotate(0deg); } 50%{ transform: translate3d(20px,-12px,0) rotate(2deg); } } .hr-auth-hero > *{ position:relative; } .hr-auth-title{ font-weight: 950; letter-spacing: .2px; } .hr-auth-sub{ color: rgba(255,255,255,.78); } .hr-auth-badges{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .hr-pill{ padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); font-weight: 700; font-size: .9rem; } .hr-auth-card{ border-radius: 28px !important; background: var(--hr-glass) !important; border: 1px solid var(--hr-glass-border) !important; backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(2,6,23,.18); overflow:hidden; position: relative; } .hr-auth-card::before{ content:""; position:absolute; inset:-2px; background: linear-gradient(135deg, rgba(201,162,74,.22), rgba(90,179,255,.12), rgba(255,255,255,0)); opacity:.9; pointer-events:none; } .hr-auth-card .card-body{ position:relative; } .hr-auth-btn{ border-radius: 16px !important; padding: 12px 14px !important; font-weight: 900 !important; } .hr-input{ border-radius: 16px !important; padding: 12px 14px !important; } /* Ultra UI helpers */ .hr-glass{ background: rgba(255,255,255,.70); border: 1px solid rgba(15,23,42,.10); backdrop-filter: blur(14px); } html[data-theme="dark"] .hr-glass{ background: rgba(13,23,42,.78); border-color: rgba(248,250,252,.10); } .hr-gradient-card{ background: linear-gradient(135deg, rgba(201,162,74,.18), rgba(216,177,90,.08)) !important; } html[data-theme="dark"] .hr-gradient-card{ background: linear-gradient(135deg, rgba(201,162,74,.20), rgba(15,27,48,.60)) !important; } .hr-kpi{ position: relative; overflow: hidden; } .hr-kpi:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(circle at 20% 10%, rgba(201,162,74,.40), transparent 55%), radial-gradient(circle at 80% 0%, rgba(216,177,90,.25), transparent 60%); opacity:.55; pointer-events:none; } .hr-kpi:hover{ transform: translateY(-2px); } .card{ transition: transform .18s ease, box-shadow .18s ease; } .card:hover{ box-shadow: 0 16px 40px rgba(2,6,23,.12); } html[data-theme="dark"] .card:hover{ box-shadow: 0 18px 44px rgba(0,0,0,.45); } .hr-page{ animation: hrFade .25s ease both; } @keyframes hrFade{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } } .hr-chart-wrap{ height: 280px; position: relative; } @media (max-width: 992px){ .hr-chart-wrap{ height: 240px; } } /* Sidebar animation */ .hr-sidebar{ transition: transform .22s ease, box-shadow .22s ease; } .hr-nav-link{ transition: all .18s ease; } .hr-nav-link:hover{ transform: translateX(-4px); } /* Login premium */ .login-bg{ min-height: 100vh; background: radial-gradient(900px 420px at 12% 18%, color-mix(in srgb, var(--hr-gold) 18%, transparent), transparent 56%), radial-gradient(900px 420px at 86% 14%, color-mix(in srgb, var(--hr-accent-cool, #5b8cff) 16%, transparent), transparent 58%), var(--hr-bg); display:flex; align-items:center; justify-content:center; padding: 28px 14px; } .login-bg::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(500px 500px at 20% 70%, rgba(201,162,74,.18), transparent 60%),radial-gradient(520px 520px at 85% 65%, rgba(91,140,255,.16), transparent 62%);mix-blend-mode:screen;opacity:.9} .login-card{ width: min(980px, 100%); border-radius: 26px; overflow: hidden; box-shadow: 0 28px 70px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); } .login-left{ padding: 42px 36px; color: #e5e7eb; background: radial-gradient(circle at 20% 10%, rgba(201,162,74,.32), transparent 55%), radial-gradient(circle at 80% 30%, rgba(216,177,90,.18), transparent 60%), rgba(255,255,255,.04); } .login-right{ padding: 42px 36px; background: rgba(255,255,255,.96); } html[data-theme="dark"] .login-right{ background: rgba(15,27,48,.78); color: #e5e7eb; } .login-badge{ display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; background: rgba(201,162,74,.18); border: 1px solid rgba(201,162,74,.35); color: var(--hr-text); font-weight: 700; } .login-title{ font-weight: 900; letter-spacing: .2px; font-size: 1.8rem; margin-top: 14px; } .login-sub{ opacity:.85; line-height:1.8; } .login-orb{ width: 240px; height: 240px; border-radius: 999px; background: radial-gradient(circle at 30% 25%, rgba(201,162,74,.70), rgba(201,162,74,.10) 60%, transparent 70%); filter: blur(.2px); position:absolute; left: -80px; bottom: -90px; opacity:.75; animation: floaty 5s ease-in-out infinite; } @keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } } /* Collapsed sidebar */ body.hr-sidebar-collapsed .hr-sidebar{ width: 92px; } body.hr-sidebar-collapsed .hr-brand-text{ display:none; } body.hr-sidebar-collapsed .hr-nav-link span{ display:none; } body.hr-sidebar-collapsed .hr-nav-link{ justify-content:center; } body.hr-sidebar-collapsed .hr-nav-link i{ font-size: 1.25rem; } body.hr-sidebar-collapsed .hr-user{ display:none; } /* Page Loader */ .hr-loader{ position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.65); backdrop-filter: blur(10px); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .18s ease; } html[data-theme="dark"] .hr-loader{ background: rgba(11,18,32,.72); } .hr-loader.show{ opacity: 1; pointer-events: auto; } .hr-loader .ring{ width: 58px; height: 58px; border-radius: 999px; border: 3px solid color-mix(in srgb, var(--hr-gold) 25%, transparent); border-top-color: color-mix(in srgb, var(--hr-gold) 95%, transparent); animation: spin .8s linear infinite; } @keyframes spin{ to{ transform: rotate(360deg);} } /* Visual delight */ .hr-gradient-border{ position: relative; overflow: hidden; } .hr-gradient-border:after{ content:""; position:absolute; inset:0; padding: 1px; border-radius: inherit; background: linear-gradient( 135deg, color-mix(in srgb, var(--hr-gold) 85%, transparent), color-mix(in srgb, var(--hr-gold-2) 15%, transparent), color-mix(in srgb, var(--hr-gold) 55%, transparent) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.55; } .hr-shine{ position: relative; overflow: hidden; } .hr-shine:before{ content:""; position:absolute; top:-40%; left:-60%; width: 60%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: rotate(20deg); transition: left .6s ease; pointer-events:none; } .hr-shine:hover:before{ left: 130%; } .btn-success{ position: relative; box-shadow: 0 10px 24px rgba(201,162,74,.18); } .btn-success:hover{ box-shadow: 0 14px 30px rgba(201,162,74,.28); } .hr-glass{ border-radius: 22px; } /* Background pattern */ .hr-body{ background-image: radial-gradient(circle at 12% 18%, rgba(201,162,74,.08), transparent 40%), radial-gradient(circle at 86% 12%, rgba(216,177,90,.06), transparent 42%); } html[data-theme="dark"] .hr-body{ background-image: radial-gradient(circle at 10% 12%, rgba(201,162,74,.16), transparent 40%), radial-gradient(circle at 90% 18%, rgba(216,177,90,.10), transparent 42%); } /* KPI gradients */ .hr-kpi{ position: relative; overflow: hidden; } .hr-kpi:after{ content:""; position:absolute; inset:-2px; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 40%), radial-gradient(circle at 80% 0%, rgba(201,162,74,.18), transparent 45%); opacity: .9; pointer-events:none; } html[data-theme="dark"] .hr-kpi:after{ background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 40%), radial-gradient(circle at 80% 0%, rgba(201,162,74,.20), transparent 45%); } .hr-kpi-1{ background: linear-gradient(135deg, rgba(201,162,74,.22), rgba(33,150,243,.08)) !important; } .hr-kpi-2{ background: linear-gradient(135deg, rgba(216,177,90,.22), rgba(76,175,80,.08)) !important; } .hr-kpi-3{ background: linear-gradient(135deg, rgba(201,162,74,.20), rgba(244,67,54,.07)) !important; } .hr-kpi-4{ background: linear-gradient(135deg, rgba(216,177,90,.20), rgba(156,39,176,.07)) !important; } .hr-kpi-5{ background: linear-gradient(135deg, rgba(201,162,74,.18), rgba(0,188,212,.07)) !important; } .hr-kpi-6{ background: linear-gradient(135deg, rgba(216,177,90,.18), rgba(255,152,0,.07)) !important; } .hr-kpi-7{ background: linear-gradient(135deg, rgba(201,162,74,.18), rgba(63,81,181,.07)) !important; } .hr-kpi-8{ background: linear-gradient(135deg, rgba(216,177,90,.18), rgba(0,150,136,.07)) !important; } /* Sidebar hover animation */ .hr-nav-link{ transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease; } .hr-nav-link:hover{ transform: translateX(-4px); box-shadow: 0 10px 24px rgba(201,162,74,.10); } html[data-theme="dark"] .hr-nav-link:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28); } .hr-sidebar{ transition: width .22s ease; } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } } /* Theme variables applied globally */ .hr-sidebar{ background: linear-gradient(180deg, var(--hr-sb-light-1), var(--hr-sb-light-2)) !important; color: var(--hr-ink) !important; } html[data-theme="dark"] .hr-sidebar{ background: linear-gradient(180deg, var(--hr-sb-dark-1), var(--hr-sb-dark-2)) !important; } .hr-topbar{ background: linear-gradient(90deg, rgba(15,23,42,.02), rgba(201,162,74,.08)); } html[data-theme="dark"] .hr-topbar{ background: linear-gradient(90deg, rgba(15,23,42,.35), rgba(201,162,74,.10)); } .hr-glass{ background: var(--hr-surface) !important; border: 1px solid rgba(148,163,184,.25); } html[data-theme="dark"] .hr-glass{ border: 1px solid rgba(148,163,184,.14); } .btn-success{ background: linear-gradient(135deg, var(--hr-accent-1), var(--hr-accent-2)) !important; border: 0 !important; } .hr-badge-gold{ background: linear-gradient(135deg, var(--hr-accent-1), var(--hr-accent-2)) !important; color: #0b1220 !important; } /* Two-tone premium touch (like login) */ .hr-page{ background: radial-gradient(circle at 18% 10%, rgba(201,162,74,.14), transparent 45%), radial-gradient(circle at 90% 22%, rgba(2,132,199,.08), transparent 42%); } html[data-theme="dark"] .hr-page{ background: radial-gradient(circle at 18% 10%, rgba(201,162,74,.18), transparent 45%), radial-gradient(circle at 90% 22%, rgba(56,189,248,.10), transparent 42%); } /* Page transitions */ .hr-route-fade{ opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease; } .hr-route-fade.show{ opacity: 1; transform: translateY(0); } /* Cool accent usage */ .hr-topbar{ background: linear-gradient(90deg, rgba(15,23,42,.02), color-mix(in srgb, var(--hr-accent-1) 55%, transparent)) !important; } .hr-page{ background: radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--hr-accent-1) 28%, transparent), transparent 45%), radial-gradient(circle at 90% 22%, color-mix(in srgb, var(--hr-accent-cool) 20%, transparent), transparent 42%); } html[data-theme="dark"] .hr-page{ background: radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--hr-accent-1) 34%, transparent), transparent 45%), radial-gradient(circle at 90% 22%, color-mix(in srgb, var(--hr-accent-cool) 22%, transparent), transparent 42%); } /* v13 force-theme overrides */ .hr-sidebar{ background: linear-gradient(180deg, var(--hr-sb-light-1), var(--hr-sb-light-2)) !important; } html[data-theme="dark"] .hr-sidebar{ background: linear-gradient(180deg, var(--hr-sb-dark-1), var(--hr-sb-dark-2)) !important; } .hr-nav-link.active{ background: linear-gradient(135deg, color-mix(in srgb, var(--hr-accent-1) 22%, transparent), color-mix(in srgb, var(--hr-accent-cool) 10%, transparent)) !important; border: 1px solid color-mix(in srgb, var(--hr-accent-1) 28%, transparent) !important; } .btn-success{ background: linear-gradient(135deg, var(--hr-accent-1), var(--hr-accent-2)) !important; } .hr-gradient-border{ position: relative; } .hr-gradient-border:before{ content:""; position:absolute; inset:-1px; border-radius: inherit; padding:1px; background: linear-gradient(135deg, color-mix(in srgb, var(--hr-accent-1) 60%, transparent), color-mix(in srgb, var(--hr-accent-cool) 35%, transparent), color-mix(in srgb, var(--hr-accent-2) 55%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.9; } /* v16 UI polish */ .list-group-item{border-radius:14px;margin-bottom:8px;border:1px solid rgba(148,163,184,.18)} .list-group-item:hover{transform:translateY(-1px); transition: .18s ease} .modal-content{border-radius:18px} /* Attachments */ .hr-attach-card{border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.6);backdrop-filter: blur(10px);border-radius:16px;padding:12px 14px;box-shadow: var(--hr-shadow-sm)} [data-theme="dark"] .hr-attach-card{background:rgba(20,20,20,.45);border-color:rgba(255,255,255,.08)} .hr-badge-gold{background: linear-gradient(135deg, var(--hr-accent), var(--hr-accent-2)); color:#111;} /* Dark mode readability tweaks (labels / placeholders) */ [data-theme="dark"] label, [data-theme="dark"] .form-label, [data-theme="dark"] .field-label{ color: rgba(255,255,255,.86) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{ color: rgba(255,255,255,.55) !important; } /* Employee page: prevent the side card from collapsing (سبب ظهور النص عموديًا عند بعض الشاشات) */ .employee-layout{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start;} .employee-layout .side{min-width:320px;} .employee-layout .main{min-width:0;} @media (max-width: 992px){ .employee-layout{grid-template-columns:1fr;} .employee-layout .side{min-width:0;} } /* LUXURY THEME v1 — Premium, consistent, RTL */ :root{ --lux-bg1: color-mix(in srgb, var(--hr-gold) 12%, transparent); --lux-bg2: color-mix(in srgb, var(--hr-accent-cool, #3aa3ff) 10%, transparent); --lux-shadow: 0 18px 60px rgba(2,6,23,.25); } .hr-body{ background: radial-gradient(900px 420px at 85% 10%, var(--lux-bg1), transparent 60%), radial-gradient(800px 420px at 10% 15%, var(--lux-bg2), transparent 55%), linear-gradient(180deg, var(--hr-bg), color-mix(in srgb, var(--hr-bg) 86%, #000 14%)); background-attachment: fixed; } .hr-topbar{ position: sticky; top:0; backdrop-filter: blur(14px); background: linear-gradient(135deg, color-mix(in srgb, var(--hr-card) 78%, transparent), color-mix(in srgb, var(--hr-card) 62%, transparent) ); border-bottom: 1px solid color-mix(in srgb, var(--hr-border) 65%, transparent); } .hr-topbar:after{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background: linear-gradient(90deg, transparent, var(--hr-gold), var(--hr-gold-2), transparent); opacity:.9; pointer-events:none; } .hr-card, .card, .table-responsive{ border-radius: 22px !important; } .hr-card, .card{ border: 1px solid color-mix(in srgb, var(--hr-border) 70%, transparent); box-shadow: var(--lux-shadow); overflow:hidden; } .btn-hr{ border-radius: 16px; background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-2)); color:#111827; font-weight:900; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 12px 30px rgba(2,6,23,.18); } .btn-hr:hover{ filter: brightness(1.03); transform: translateY(-1px); } .form-control, .form-select{ border-radius:16px; } .form-control:focus, .form-select:focus{ border-color: color-mix(in srgb, var(--hr-gold) 55%, var(--hr-border)); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--hr-gold) 22%, transparent); } .badge-paid{ background: color-mix(in srgb, #22c55e 16%, transparent); } .badge-unpaid{ background: color-mix(in srgb, #f59e0b 18%, transparent); } .login-bg{ min-height: 100vh; background: radial-gradient(900px 420px at 12% 18%, color-mix(in srgb, var(--hr-gold) 18%, transparent), transparent 56%), radial-gradient(900px 420px at 86% 14%, color-mix(in srgb, var(--hr-accent-cool, #5b8cff) 16%, transparent), transparent 58%), var(--hr-bg); display:flex; align-items:center; justify-content:center; padding: 28px 14px; } .login-bg::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(500px 500px at 20% 70%, rgba(201,162,74,.18), transparent 60%),radial-gradient(520px 520px at 85% 65%, rgba(91,140,255,.16), transparent 62%);mix-blend-mode:screen;opacity:.9} .login-card{ width:min(960px, 100%); border-radius: 28px; overflow:hidden; box-shadow: 0 30px 120px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.10); background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); backdrop-filter: blur(14px); } .login-left{ padding: 34px; background: linear-gradient(135deg, rgba(201,162,74,.18), rgba(58,163,255,.08)); } .login-right{ padding: 34px; background: rgba(255,255,255,.03); } /* =========================== VIP Theme System (v2) هدف: تباين قوي في الوضع الليلي + تطبيق ألوان موحد على كل النظام + لمسات فخامة =========================== */ :root{ --hr-surface: #ffffff; --hr-surface-2: #f3f4f6; --hr-glass: rgba(255,255,255,.72); --hr-glass-border: rgba(15,23,42,.10); --hr-text-strong: #0b1220; --hr-text-soft: #334155; --hr-focus: color-mix(in srgb, var(--hr-gold) 55%, transparent); } /* Dark mode: high contrast, no "washed out" */ html[data-theme="dark"]{ --hr-bg: #070b14; --hr-surface: #0c1426; --hr-card: #0f1a33; --hr-surface-2: #0b1220; --hr-text: #f1f5f9; --hr-text-strong: #ffffff; --hr-muted: rgba(241,245,249,.78); --hr-border: rgba(148,163,184,.18); --hr-glass: rgba(12,20,38,.70); --hr-glass-border: rgba(241,245,249,.10); } /* Apply surfaces */ body{ background: radial-gradient(1200px 600px at 15% 0%, color-mix(in srgb, var(--hr-gold) 12%, transparent), transparent 60%), radial-gradient(900px 500px at 85% 10%, color-mix(in srgb, var(--hr-accent-cool, #5b8cff) 10%, transparent), transparent 55%), var(--hr-bg); color: var(--hr-text); } /* Luxury subtle pattern in header area */ .hr-topbar::before, .hr-content::before{ content:""; position:absolute; inset:auto; pointer-events:none; } .hr-topbar{ position:sticky; top:0; z-index:1020; } .hr-topbar::before{ content:""; position:absolute; inset:0; background: radial-gradient(400px 200px at 10% 30%, color-mix(in srgb, var(--hr-gold) 18%, transparent), transparent 60%), radial-gradient(520px 240px at 90% 20%, color-mix(in srgb, var(--hr-accent-cool, #5b8cff) 14%, transparent), transparent 62%); opacity:.9; filter: blur(0px); } .hr-topbar .container-fluid, .hr-topbar .container{ position:relative; z-index:1; } /* Glass bar */ .hr-topbar{ background: var(--hr-glass) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--hr-glass-border) !important; } /* Cards */ .card, .hr-card, .hr-panel{ background: linear-gradient(180deg, color-mix(in srgb, var(--hr-card) 92%, transparent), var(--hr-card)) !important; border: 1px solid var(--hr-border) !important; box-shadow: var(--hr-shadow); } .card-header, .card-footer{ background: transparent !important; border-color: var(--hr-border) !important; } /* Forms */ .form-control, .form-select, .form-control:focus, .form-select:focus{ background: color-mix(in srgb, var(--hr-surface) 88%, transparent) !important; color: var(--hr-text) !important; border-color: var(--hr-border) !important; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select{ background: color-mix(in srgb, var(--hr-surface) 92%, transparent) !important; } .form-control:focus, .form-select:focus{ box-shadow: 0 0 0 .22rem var(--hr-focus) !important; } /* Tables readability */ .table{ color: var(--hr-text) !important; } .table thead th{ color: var(--hr-text-strong) !important; border-color: var(--hr-border) !important; } .table td, .table th{ border-color: var(--hr-border) !important; } html[data-theme="dark"] .table{ background: transparent !important; } html[data-theme="dark"] .table tbody tr{ background: rgba(255,255,255,.02); } /* Sidebar: no faded links */ .hr-nav-link{ opacity: 1 !important; color: var(--hr-sidebar-text) !important; } .hr-nav-link:hover{ background: color-mix(in srgb, var(--hr-gold) 12%, transparent) !important; border-color: color-mix(in srgb, var(--hr-gold) 24%, transparent) !important; transform: translateX(-2px); } .hr-nav-link.active, .hr-nav-link[aria-current="page"]{ background: linear-gradient(135deg, color-mix(in srgb, var(--hr-gold) 18%, transparent), color-mix(in srgb, var(--hr-gold-2) 10%, transparent)) !important; border-color: color-mix(in srgb, var(--hr-gold) 35%, transparent) !important; color: var(--hr-text-strong) !important; } /* Buttons: unified */ .btn-primary{ background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-2)) !important; border: none !important; box-shadow: 0 10px 22px rgba(0,0,0,.16); } .btn-outline-primary{ color: var(--hr-gold) !important; border-color: color-mix(in srgb, var(--hr-gold) 55%, transparent) !important; } .btn-outline-primary:hover{ background: color-mix(in srgb, var(--hr-gold) 12%, transparent) !important; } /* Typography contrast */ h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{ color: var(--hr-text-strong) !important; } .small, small, .text-muted{ color: var(--hr-muted) !important; } /* Mobile: nicer spacing */ @media (max-width: 576px){ .hr-content{ padding: 14px 12px 18px 12px; } .card, .hr-card{ border-radius: 18px !important; } .table{ font-size: .92rem; } } /* Login page improvements (night/day) */ .hr-login-shell{ background: radial-gradient(900px 420px at 15% 20%, color-mix(in srgb, var(--hr-gold) 18%, transparent), transparent 55%), radial-gradient(900px 420px at 85% 15%, color-mix(in srgb, var(--hr-accent-cool, #5b8cff) 16%, transparent), transparent 58%), var(--hr-bg) !important; } /* Optional: decorative blobs for "slides-like" luxury */ .hr-blob{ position:absolute; inset:auto; width:520px; height:520px; border-radius:999px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--hr-gold) 22%, transparent), transparent 58%), radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--hr-accent-cool, #5b8cff) 18%, transparent), transparent 60%); filter: blur(18px); opacity:.85; pointer-events:none; } /* Tables — readable in both modes */ .table{color: var(--hr-text);} .table thead th{ background: color-mix(in srgb, var(--hr-card) 92%, var(--hr-gold) 8%); color: var(--hr-text); border-bottom: 1px solid var(--hr-border); } .table tbody tr{background: transparent;} .table tbody td{border-color: var(--hr-border);} html[data-theme="dark"] .table thead th{ background: rgba(255,255,255,.04); } /* Premium micro-interactions */ .hr-card-premium, .card, .hr-panel{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .hr-card-premium:hover, .card:hover, .hr-panel:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.14); } html[data-theme="dark"] .hr-card-premium:hover, html[data-theme="dark"] .card:hover, html[data-theme="dark"] .hr-panel:hover{ box-shadow: 0 18px 44px rgba(0,0,0,.45); } .btn, .hr-palette-card{ transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .btn:hover{ transform: translateY(-1px); filter: brightness(1.02); } /* Subtle "slide-like" luxury background (non-intrusive) */ body:before{ content:""; position:fixed; inset:0; pointer-events:none; background: radial-gradient(900px 500px at 12% 12%, color-mix(in srgb, var(--hr-gold) 22%, transparent), transparent 60%), radial-gradient(800px 520px at 86% 18%, color-mix(in srgb, var(--hr-accent) 18%, transparent), transparent 62%), radial-gradient(950px 650px at 50% 105%, color-mix(in srgb, var(--hr-gold-2) 16%, transparent), transparent 60%); opacity:.55; z-index:0; } html[data-theme="dark"] body:before{opacity:.35;} .hr-content, .hr-sidebar{position:relative; z-index:1;} /* Settings live preview */ .hr-dashboard-preview{border-radius: 22px;} .hr-mini-kpi{ background: color-mix(in srgb, var(--hr-card) 92%, var(--hr-gold) 8%); border: 1px solid var(--hr-border); border-radius: 16px; padding: 10px 12px; } html[data-theme="dark"] .hr-mini-kpi{ background: rgba(255,255,255,.04); } /* Dark tables/forms readability */ html[data-theme="dark"] .table, html[data-theme="dark"] .table thead th{ color: var(--hr-text); } html[data-theme="dark"] .table thead th{ background: color-mix(in srgb, var(--hr-card) 92%, #000); border-color: var(--hr-border); } html[data-theme="dark"] .table tbody td{ background: transparent; border-color: var(--hr-border); } html[data-theme="dark"] .table tbody tr:hover td{ background: rgba(255,255,255,.03); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select{ background-color: color-mix(in srgb, var(--hr-card) 92%, #000); border-color: var(--hr-border); color: var(--hr-text); } html[data-theme="dark"] .form-control::placeholder{ color: rgba(255,255,255,.55); } html[data-theme="dark"] .btn-outline-secondary{ color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .btn-outline-secondary:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } /* Dark sidebar active */ html[data-theme="dark"] .hr-nav-link.active{ background: color-mix(in srgb, var(--hr-gold) 22%, rgba(255,255,255,.04)); border-color: color-mix(in srgb, var(--hr-gold) 55%, transparent); box-shadow: 0 8px 18px rgba(0,0,0,.25); } html[data-theme="dark"] .hr-brand-sub{ color: rgba(255,255,255,.65); } /* ==================== Dark Sidebar FINAL FIX ==================== */ /* Force high-contrast sidebar links + active state (prevents clashes from duplicated legacy rules). */ html[data-theme="dark"] .hr-sidebar{ color: rgba(255,255,255,.94) !important; } html[data-theme="dark"] .hr-sidebar .muted, html[data-theme="dark"] .hr-sidebar small{ color: rgba(255,255,255,.70) !important; } html[data-theme="dark"] .hr-nav-link{ color: rgba(255,255,255,.90) !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; } html[data-theme="dark"] .hr-nav-link:hover{ background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.16) !important; } html[data-theme="dark"] .hr-nav-link.active, html[data-theme="dark"] .hr-nav-link[aria-current="page"]{ background: rgba(212,175,55,.22) !important; border-color: rgba(212,175,55,.35) !important; color: rgba(255,255,255,.98) !important; } /* =========================== IMPRESS REDESIGN v1 (2026) هدف: تصميم فخم + وضع ليلي واضح + مؤثرات (Transitions) =========================== */ /* Base surfaces */ .hr-body{ background: radial-gradient(1200px 600px at 20% 10%, rgba(201,162,74,.14), transparent 55%), radial-gradient(900px 480px at 90% 20%, rgba(56,189,248,.12), transparent 60%), linear-gradient(180deg, var(--hr-bg), var(--hr-bg)); background-attachment: fixed; } /* Glass surface */ .hr-surface{ background: rgba(255,255,255,.62); backdrop-filter: blur(18px); border: 1px solid rgba(15,23,42,.06); box-shadow: 0 18px 50px rgba(2,6,23,.10); } /* Cards + widgets */ .card, .hr-card, .hr-stat, .hr-panel{ background: rgba(255,255,255,.72); border: 1px solid rgba(15,23,42,.06); box-shadow: 0 16px 44px rgba(2,6,23,.10); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card:hover, .hr-card:hover, .hr-stat:hover, .hr-panel:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px rgba(2,6,23,.14); border-color: rgba(201,162,74,.25); } /* Buttons: premium feel */ .btn{ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0); } /* Forms */ .form-control, .form-select, textarea{ background: rgba(255,255,255,.75); border: 1px solid rgba(15,23,42,.12); box-shadow: none; } .form-control:focus, .form-select:focus, textarea:focus{ border-color: rgba(201,162,74,.55); box-shadow: 0 0 0 .22rem rgba(201,162,74,.16); } /* Tables */ .table{ --bs-table-bg: transparent; } .table thead th{ font-weight: 800; color: var(--hr-text); opacity: .92; border-bottom: 1px solid rgba(15,23,42,.10) !important; } .table tbody tr{ transition: background .15s ease; } .table tbody tr:hover{ background: rgba(201,162,74,.08); } /* ================= DARK MODE (high contrast sidebar + clean glass) ================= */ html[data-theme="dark"] body.hr-body{ --hr-bg:#0b1220; --hr-card: rgba(255,255,255,.06); --hr-text:#e5e7eb; --hr-muted: rgba(229,231,235,.70); --hr-border: rgba(255,255,255,.12); background: radial-gradient(1000px 520px at 15% 12%, rgba(201,162,74,.18), transparent 55%), radial-gradient(800px 440px at 90% 18%, rgba(56,189,248,.12), transparent 60%), linear-gradient(180deg, #070d18, #0b1220); } /* Dark surfaces */ html[data-theme="dark"] .hr-surface{ background: rgba(15,23,42,.45); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 20px 60px rgba(0,0,0,.35); } html[data-theme="dark"] .card, html[data-theme="dark"] .hr-card, html[data-theme="dark"] .hr-stat, html[data-theme="dark"] .hr-panel{ background: rgba(15,23,42,.55); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 55px rgba(0,0,0,.35); } html[data-theme="dark"] .table thead th{color: rgba(255,255,255,.92); border-bottom-color: rgba(255,255,255,.12) !important;} html[data-theme="dark"] .table tbody tr:hover{background: rgba(201,162,74,.12);} /* FIX: Sidebar unreadable in dark mode (force contrast regardless of palette) */ html[data-theme="dark"] .hr-sidebar{ background: linear-gradient(180deg, rgba(10,16,30,.92), rgba(15,23,42,.86)) !important; border-left-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] .hr-brand, html[data-theme="dark"] .hr-brand *{ color: rgba(255,255,255,.92) !important; } html[data-theme="dark"] .hr-nav-link{ color: rgba(255,255,255,.86) !important; } html[data-theme="dark"] .hr-nav-link i, html[data-theme="dark"] .hr-nav-link svg{ color: rgba(255,255,255,.82) !important; opacity: 1 !important; } html[data-theme="dark"] .hr-nav-link:hover{ background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.95) !important; } html[data-theme="dark"] .hr-nav-link.active, html[data-theme="dark"] .hr-nav-link[aria-current="page"]{ background: linear-gradient(90deg, rgba(201,162,74,.30), rgba(201,162,74,.12)) !important; border: 1px solid rgba(201,162,74,.35) !important; color: #fff !important; } html[data-theme="dark"] .hr-sidebar .hr-sidebar-footer{ border-top: 1px solid rgba(255,255,255,.10) !important; } /* Dark mode controls */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.92); } html[data-theme="dark"] .form-control::placeholder{color: rgba(255,255,255,.55);} html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus{ border-color: rgba(201,162,74,.55); box-shadow: 0 0 0 .22rem rgba(201,162,74,.18); } /* ================= Page transitions (slide + fade) ================= */ .hr-route-fade{ opacity:0; transform: translateX(14px); transition: opacity .22s ease, transform .22s ease; will-change: opacity, transform; } .hr-route-fade.show{ opacity:1; transform: translateX(0); } .hr-route-fade.exit{ opacity:0; transform: translateX(-14px); } /* ================= Sidebar micro-interactions ================= */ .hr-nav-link{ border-radius: 14px !important; transition: background .16s ease, transform .16s ease, color .16s ease, box-shadow .16s ease; } .hr-nav-link:hover{ transform: translateX(-2px); } .hr-nav-link.active{ box-shadow: 0 12px 30px rgba(201,162,74,.18); } /* Smooth collapse */ body.hr-sidebar-collapsed .hr-sidebar{ width: 92px !important; } body.hr-sidebar-collapsed .hr-main{ margin-right: 92px !important; width: calc(100% - 92px) !important; } /* Stagger entrance (premium) */ @keyframes hrStaggerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .hr-stagger{animation: hrStaggerIn .35s ease both;}