@import url("../fonts/google/tajawal/tajawal.css");[dir=rtl] body,[dir=rtl] button,[dir=rtl] input,[dir=rtl] select,[dir=rtl] textarea{font-family:"Tajawal","Open Sans",Arial,sans-serif;}:root{--ks-login-bg:#07162e;--ks-login-ink:#eef7ff;--ks-login-muted:rgba(232,243,255,.72);--ks-login-border:rgba(167,216,255,.22);--ks-login-cyan:#32d8ff;--ks-login-blue:#285dff;--ks-login-shadow:0 28px 80px rgba(2,9,25,.46);} .auth-page-wrapper{padding-inline:18px;} .ks-login-shell{width:min(1180px,100%);min-height:min(760px,calc(100vh - 44px));display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);border:1px solid rgba(255,255,255,.16);border-radius:28px;overflow:hidden;box-shadow:var(--ks-login-shadow);background:rgba(8,22,47,.78);backdrop-filter:blur(20px);} .ks-login-brand-panel{position:relative;overflow:hidden;min-height:680px;display:flex;align-items:center;padding:64px;color:var(--ks-login-ink);background:linear-gradient(135deg,rgba(5,20,47,.94),rgba(23,58,151,.82) 55%,rgba(26,174,213,.42)),var(--ks-auth-bg-image);background-size:cover;background-position:center;} .ks-login-brand-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 34%,rgba(50,216,255,.14) 35% 36%,transparent 37% 100%),radial-gradient(circle at 28% 20%,rgba(255,255,255,.16),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:auto,auto,72px 72px;animation:ksLoginGradient 12s ease-in-out infinite alternate;} .ks-login-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,rgba(0,0,0,.72),transparent 84%);} .ks-login-shape{position:absolute;width:150px;aspect-ratio:1;border:1px solid rgba(102,220,255,.34);transform:rotate(18deg);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.01));box-shadow:inset 0 0 34px rgba(50,216,255,.12);animation:ksFloat 9s ease-in-out infinite;} .ks-login-shape-one{top:58px;right:64px;} .ks-login-shape-two{left:72px;bottom:70px;width:112px;animation-delay:-3s;} .ks-login-brand-content{position:relative;max-width:620px;z-index:1;} .ks-login-mark{width:68px;height:68px;display:grid;place-items:center;margin-bottom:34px;border-radius:18px;color:#06162e;background:linear-gradient(135deg,#eaffff,#62e2ff);box-shadow:0 18px 42px rgba(50,216,255,.28);font-size:25px;font-weight:800;letter-spacing:0;} .ks-login-brand-content h1{margin:0;color:#fff;font-size:5.8rem;line-height:.9;font-weight:800;letter-spacing:0;} .ks-login-subtitle{margin:24px 0 0;color:rgba(255,255,255,.88);font-size:1.18rem;font-weight:600;} .ks-login-copy{max-width:520px;margin:18px 0 0;color:var(--ks-login-muted);font-size:1rem;line-height:1.7;} .ks-login-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:38px;} .ks-login-chip{min-height:58px;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);font-weight:600;} .ks-login-chip i{color:var(--ks-login-cyan);font-size:20px;} .ks-login-form-panel{display:flex;align-items:center;justify-content:center;padding:48px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(235,245,255,.9)),linear-gradient(135deg,rgba(50,216,255,.16),transparent);} .ks-login-card{width:min(430px,100%);padding:40px;border:1px solid rgba(255,255,255,.68);border-radius:24px;background:rgba(255,255,255,.76);box-shadow:0 24px 60px rgba(11,31,69,.16);backdrop-filter:blur(18px);} .ks-login-card-header{margin-bottom:28px;} .ks-login-secure{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:#0a63d8;font-weight:700;font-size:.82rem;} .ks-login-card h2{margin:0;color:#0a1933;font-size:2rem;font-weight:800;letter-spacing:0;} .ks-login-card p{margin:8px 0 0;color:#63728a;} .ks-login-form{display:grid;gap:18px;} .ks-login-alert:empty{display:none;} .ks-login-field label{display:block;margin-bottom:8px;color:#22314a;font-weight:700;font-size:.86rem;} .ks-login-input-wrap{position:relative;} .ks-login-input-wrap > i{position:absolute;top:50%;inset-inline-start:16px;transform:translateY(-50%);color:#6b7c95;font-size:18px;z-index:2;} .ks-login-input-wrap .form-control,.ks-login-input-wrap .form-select{min-height:52px;border:1px solid #d8e2f0;border-radius:14px;padding-inline-start:46px;background-color:rgba(255,255,255,.86);color:#11243f;box-shadow:none;font-size:.95rem;} .ks-login-input-wrap .form-control:focus,.ks-login-input-wrap .form-select:focus{border-color:rgba(40,93,255,.62);box-shadow:0 0 0 .22rem rgba(40,93,255,.11);} .ks-password-toggle{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;color:#536278;background:transparent;} .ks-password-toggle:hover{color:#0a63d8;background:rgba(10,99,216,.08);} .ks-login-note,.ks-login-footer{color:#6b778b;font-size:.8rem;} .ks-login-submit{min-height:54px;border:0;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--ks-login-blue),#12bde8);box-shadow:0 18px 34px rgba(18,99,232,.26);font-weight:800;transition:transform .2s ease,box-shadow .2s ease;} .ks-login-submit:hover{color:#fff;transform:translateY(-2px);box-shadow:0 24px 42px rgba(18,99,232,.32);} .ks-login-submit.is-loading{pointer-events:none;opacity:.86;} .ks-login-footer{margin:24px 0 0;text-align:center;} [dir="rtl"] .ks-login-input-wrap .form-control,[dir="rtl"] .ks-login-input-wrap .form-select{padding-inline-start:46px;padding-inline-end:14px;} @keyframes ksLoginGradient{from{transform:translate3d(0,0,0);opacity:.76;} to{transform:translate3d(-18px,10px,0);opacity:1;}} @keyframes ksFloat{0%,100%{transform:translateY(0) rotate(18deg);} 50%{transform:translateY(-16px) rotate(24deg);}} @media (max-width:991.98px){.ks-login-shell{grid-template-columns:1fr;min-height:auto;} .ks-login-brand-panel{min-height:420px;padding:40px;} .ks-login-brand-content h1{font-size:4.4rem;} .ks-login-form-panel{padding:34px;}} @media (max-width:575.98px){.auth-page-wrapper{padding-inline:10px;} .ks-login-shell{border-radius:20px;} .ks-login-brand-panel,.ks-login-form-panel{padding:26px;} .ks-login-brand-content h1{font-size:3.1rem;} .ks-login-feature-grid{grid-template-columns:1fr;} .ks-login-card{padding:24px;border-radius:20px;}} @media (prefers-reduced-motion:reduce){.ks-login-brand-panel::before,.ks-login-shape,.ks-login-submit{animation:none;transition:none;}} .ks-dashboard{--ks-bg:#f3f6fb;--ks-ink:#172238;--ks-muted:#66758c;--ks-border:#dde5f0;--ks-blue:#2764e6;--ks-cyan:#0aa4c6;--ks-green:#1e9b6c;--ks-amber:#d58a12;--ks-red:#d84646;--ks-indigo:#5865d6;display:grid;gap:18px;} .ks-dashboard-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:152px;padding:24px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:8px;color:#fff;background:linear-gradient(135deg,rgba(8,25,57,.98),rgba(24,75,170,.9) 52%,rgba(10,164,198,.72)),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:auto,54px 54px;box-shadow:0 18px 44px rgba(18,42,82,.16);} .ks-dashboard-hero::after{content:"";position:absolute;inset-inline-end:30px;top:-48px;width:280px;height:280px;border:1px solid rgba(255,255,255,.16);transform:rotate(18deg);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));} .ks-dashboard-hero > *{position:relative;z-index:1;} .ks-dashboard-hero h1{margin:0;color:#fff;font-size:2rem;font-weight:800;letter-spacing:0;} .ks-dashboard-hero p{margin:8px 0 0;color:rgba(255,255,255,.76);font-size:.98rem;} .ks-dashboard-context{display:grid;gap:8px;min-width:280px;} .ks-dashboard-context div{display:flex;align-items:center;gap:10px;min-height:36px;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.88);font-weight:600;} .ks-dashboard-actions{display:flex;flex-wrap:wrap;gap:10px;} .ks-action-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 13px;border:1px solid #d9e3f2;border-radius:8px;background:#fff;color:#23324a;font-weight:700;box-shadow:0 8px 22px rgba(21,38,72,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;} .ks-action-button:hover{color:#0c58ca;border-color:rgba(39,100,230,.32);transform:translateY(-2px);box-shadow:0 14px 26px rgba(21,38,72,.1);} .ks-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;} .ks-kpi-card{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;min-height:136px;padding:18px;overflow:hidden;border:1px solid var(--ks-border);border-radius:8px;background:#fff;box-shadow:0 12px 30px rgba(21,38,72,.06);animation:ksDashFade .45s ease both;transition:transform .18s ease,box-shadow .18s ease;} .ks-kpi-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(21,38,72,.1);} .ks-kpi-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--ks-accent,var(--ks-blue));} .ks-kpi-card:nth-child(2){animation-delay:.04s;} .ks-kpi-card:nth-child(3){animation-delay:.08s;} .ks-kpi-card:nth-child(4){animation-delay:.12s;} .ks-kpi-card:nth-child(5){animation-delay:.16s;} .ks-kpi-card:nth-child(6){animation-delay:.2s;} .ks-kpi-card:nth-child(7){animation-delay:.24s;} .ks-kpi-card:nth-child(8){animation-delay:.28s;} .ks-kpi-card:nth-child(9){animation-delay:.32s;} .ks-kpi-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:8px;color:var(--ks-accent,var(--ks-blue));background:color-mix(in srgb,var(--ks-accent,var(--ks-blue)) 11%,#fff);font-size:22px;} .ks-kpi-card span{display:block;margin-bottom:4px;color:var(--ks-accent,var(--ks-blue));font-size:.75rem;font-weight:800;text-transform:uppercase;} .ks-kpi-card h3{margin:0;color:var(--ks-ink);font-size:.95rem;font-weight:800;letter-spacing:0;} .ks-kpi-card strong{display:block;margin-top:10px;color:#101928;font-size:1.75rem;line-height:1;font-weight:800;} .ks-kpi-card small{display:block;margin-top:8px;color:var(--ks-muted);font-size:.78rem;} .ks-payroll-status{font-size:1.2rem !important;} .ks-accent-blue{--ks-accent:var(--ks-blue);} .ks-accent-cyan{--ks-accent:var(--ks-cyan);} .ks-accent-green{--ks-accent:var(--ks-green);} .ks-accent-amber{--ks-accent:var(--ks-amber);} .ks-accent-red{--ks-accent:var(--ks-red);} .ks-accent-indigo{--ks-accent:var(--ks-indigo);} .ks-dashboard-main{display:grid;grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr);gap:18px;} .ks-panel{border:1px solid var(--ks-border);border-radius:8px;background:#fff;box-shadow:0 12px 30px rgba(21,38,72,.06);} .ks-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 18px 12px;border-bottom:1px solid #eef2f7;} .ks-panel-header h2{margin:0;color:var(--ks-ink);font-size:1.05rem;font-weight:800;letter-spacing:0;} .ks-panel-header p{margin:4px 0 0;color:var(--ks-muted);font-size:.82rem;} .ks-panel-header span{color:#0c58ca;font-weight:800;font-size:.82rem;} .ks-alert-list{display:grid;gap:10px;padding:14px;} .ks-alert-row{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;min-height:64px;padding:12px;border:1px solid #eef2f7;border-radius:8px;color:var(--ks-ink);background:#fbfdff;} .ks-alert-row:hover{color:var(--ks-ink);border-color:#d8e6f8;background:#f7fbff;} .ks-alert-dot{width:10px;height:10px;border-radius:50%;background:#6c7a91;} .ks-alert-row strong,.ks-alert-row span{display:block;} .ks-alert-row strong{font-weight:800;} .ks-alert-row span{color:var(--ks-muted);font-size:.82rem;} .ks-alert-row em{font-style:normal;color:var(--ks-muted);font-size:.75rem;font-weight:800;} .ks-alert-critical .ks-alert-dot{background:var(--ks-red);box-shadow:0 0 0 5px rgba(216,70,70,.12);animation:ksPulse 1.8s ease-in-out infinite;} .ks-alert-warning .ks-alert-dot{background:var(--ks-amber);} .ks-alert-info .ks-alert-dot{background:var(--ks-cyan);} .ks-empty-state{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;color:var(--ks-muted);font-weight:700;} .ks-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px;} .ks-chart-box{min-height:255px;padding:14px;border:1px solid #eef2f7;border-radius:8px;background:#fbfdff;} .ks-chart-box h3{margin:0 0 10px;color:var(--ks-ink);font-size:.9rem;font-weight:800;} .ks-chart-box > div{min-height:205px;} .ks-watch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;} .ks-watch-grid > .col-xl-6{width:100%;max-width:none;padding:0;} .ks-watch-grid .card{height:100%;border:1px solid var(--ks-border);border-radius:8px;box-shadow:0 12px 30px rgba(21,38,72,.06);} .ks-watch-grid .card-header{border-bottom-color:#eef2f7;background:#fff;} @keyframes ksDashFade{from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);}} @keyframes ksPulse{0%,100%{box-shadow:0 0 0 4px rgba(216,70,70,.12);} 50%{box-shadow:0 0 0 8px rgba(216,70,70,.06);}} @media (max-width:1199.98px){.ks-dashboard-main,.ks-watch-grid{grid-template-columns:1fr;}} @media (max-width:767.98px){.ks-dashboard-hero{align-items:flex-start;flex-direction:column;} .ks-dashboard-context{width:100%;min-width:0;} .ks-chart-grid{grid-template-columns:1fr;}} @media (max-width:575.98px){.ks-dashboard-hero h1{font-size:1.55rem;} .ks-kpi-grid{grid-template-columns:1fr;} .ks-action-button{width:100%;justify-content:center;}} @media (prefers-reduced-motion:reduce){.ks-kpi-card,.ks-action-button,.ks-alert-critical .ks-alert-dot{animation:none;transition:none;}}