/* e-Fail Pejabat v2.0 — "Aurora Office" design system */
:root{
  --utama:#232a5c; --utama-2:#2f3a7d; --aksen:#22d3ee; --aksen-2:#818cf8;
  --emas:#e8b64c; --bg:#eef1f8; --kad:#ffffff; --teks:#1c2340; --muted:#6d7690;
  --garis:#e4e9f4; --jejari:20px; --bayang:0 12px 34px rgba(28,35,64,.10);
  --bayang-lg:0 22px 60px rgba(28,35,64,.16);
  --grad:linear-gradient(135deg,#232a5c,#3b2f7d 55%,#0e7490);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--teks);-webkit-font-smoothing:antialiased}
::selection{background:rgba(34,211,238,.3)}
a{text-decoration:none}
/* ===== RANGKA ===== */
.shell{display:flex;min-height:100vh}
/* Sidebar rel mengembang */
.side{width:268px;flex:0 0 268px;background:linear-gradient(180deg,#131838 0%,#1b2350 55%,#232a5c 100%);color:#dfe6fb;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:1040;transition:width .25s ease,flex-basis .25s ease;overflow:hidden;border-right:1px solid rgba(255,255,255,.08)}


.brand{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1rem .9rem;white-space:nowrap}
.brand-mark{width:52px;height:52px;flex:0 0 52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;color:#06121f;background:linear-gradient(135deg,#67e8f9,#a5b4fc 60%,#fcd34d);box-shadow:0 8px 22px rgba(34,211,238,.35)}
.brand-text{transition:opacity .2s;overflow:hidden}


.brand-text strong{display:block;font-size:.92rem;line-height:1.25}
.brand-text small{color:#93a0c4;font-size:.7rem;letter-spacing:1px}
.me-chip{display:flex;align-items:center;gap:.7rem;margin:.4rem .8rem .8rem;padding:.6rem .7rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:15px;white-space:nowrap}
.avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#0b1023;background:linear-gradient(135deg,#fcd34d,#f59e0b)}
.me-info{transition:opacity .2s;overflow:hidden;flex:1;min-width:0}


.me-info strong{display:block;font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-info small{color:#93a0c4;font-size:.7rem}
.menu{flex:1;overflow-y:auto;overflow-x:hidden;padding:.2rem .8rem 1rem;scrollbar-width:thin}
.menu-cap{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#7c89b3;margin:1rem .3rem .45rem;white-space:nowrap}
.mitem{display:flex;align-items:center;gap:.8rem;color:#c4cfef;padding:.68rem .8rem;border-radius:13px;font-weight:600;font-size:.88rem;margin-bottom:3px;border:1px solid transparent;white-space:nowrap;transition:.18s}
.mitem i{font-size:1.2rem;width:32px;text-align:center;flex:0 0 32px}
.mitem span{transition:opacity .2s}


.mitem:hover{background:rgba(255,255,255,.09);color:#fff}
.mitem.active{background:linear-gradient(90deg,rgba(34,211,238,.25),rgba(129,140,248,.18));border-color:rgba(34,211,238,.35);color:#fff;box-shadow:0 6px 18px rgba(34,211,238,.15)}
body.side-mini .side{width:88px;flex:0 0 88px}
body.side-mini .brand-text,body.side-mini .me-info,body.side-mini .mitem span{opacity:0}
body.side-mini .menu-cap{opacity:0;height:8px;overflow:hidden;margin:0 .3rem}
body.side-mini .side-foot small{display:none}
.side-foot{padding:.9rem .8rem;border-top:1px solid rgba(255,255,255,.1)}
.mitem.danger{color:#fda4af}.mitem.danger:hover{background:rgba(244,63,94,.18);color:#fff}
.side-foot small{color:#66719a;font-size:.68rem;display:block;text-align:center;margin-top:.5rem;white-space:nowrap}
/* Kandungan */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--garis);padding:.75rem 1.6rem;display:flex;align-items:center;gap:1rem;box-shadow:0 4px 18px rgba(28,35,64,.06)}
.crumb{flex:1;min-width:0}
.crumb small{color:var(--muted);font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase}
.crumb h1{font-size:1.4rem;font-weight:800;margin:0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-global{display:flex;align-items:center;gap:.5rem;background:#f1f4fa;border:1px solid var(--garis);border-radius:999px;padding:.35rem .35rem .35rem .9rem;min-width:230px}
.search-global input{border:0;background:transparent;outline:none;flex:1;font-size:.85rem;font-family:inherit;color:var(--teks);min-width:0}
.search-global button{border:0;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;background:var(--utama);color:#fff;cursor:pointer}
.top-actions{display:flex;align-items:center;gap:.55rem}
.pill-tarikh{background:#f1f4fa;border:1px solid var(--garis);border-radius:999px;padding:.4rem .9rem;font-size:.78rem;font-weight:700;color:#3b4566;white-space:nowrap}
.avatar-top{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--grad);border:2px solid #fff;box-shadow:var(--bayang)}
.content{padding:1.6rem;max-width:1300px;width:100%;margin:0 auto}
.page-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.6rem 1.8rem;color:var(--muted);font-size:.8rem;max-width:1300px;width:100%;margin:0 auto}
/* ===== KOMPONEN ===== */
.card{border:1px solid var(--garis);border-radius:var(--jejari);box-shadow:var(--bayang);background:var(--kad)}
.card-header{background:transparent;border-bottom:1px solid var(--garis);font-weight:800;padding:.95rem 1.25rem}
.hero{background:var(--grad);border:0;color:#fff;border-radius:24px;position:relative;overflow:hidden;box-shadow:var(--bayang-lg)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.hero::before{width:340px;height:340px;background:#22d3ee;right:-100px;top:-120px}
.hero::after{width:260px;height:260px;background:#f472b6;left:30%;bottom:-140px;opacity:.35}
.hero>*{position:relative;z-index:1}
.stat{border:0;border-radius:22px;color:#fff;overflow:hidden;position:relative}
.stat .card-body{padding:1.2rem 1.3rem}
.stat .num{font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.stat .lbl{opacity:.92;font-weight:600;font-size:.85rem}
.stat .icon{font-size:2.4rem;opacity:.95;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.stat.s1{background:linear-gradient(135deg,#232a5c,#4f46e5)}
.stat.s2{background:linear-gradient(135deg,#0e7490,#22d3ee);color:#06222b}
.stat.s2 .lbl{color:#083344}
.stat.s3{background:linear-gradient(135deg,#b45309,#f59e0b)}
.stat.s4{background:linear-gradient(135deg,#6d28d9,#c026d3)}
.stat::after{content:"";position:absolute;right:-46px;top:-46px;width:160px;height:160px;background:rgba(255,255,255,.14);border-radius:50%}
.stat::before{content:"";position:absolute;right:20px;bottom:-60px;width:110px;height:110px;background:rgba(255,255,255,.1);border-radius:50%}
.btn{border-radius:13px;font-weight:700;transition:.18s}
.btn-primary{background:var(--utama);border-color:var(--utama)}
.btn-primary:hover{background:var(--utama-2);border-color:var(--utama-2);transform:translateY(-1px);box-shadow:0 10px 22px rgba(35,42,92,.3)}
.btn-glow{background:linear-gradient(90deg,#22d3ee,#818cf8);border:0;color:#0b1023}
.btn-glow:hover{color:#0b1023;filter:brightness(1.08);transform:translateY(-1px)}
.table{font-size:.89rem;margin-bottom:0}
.table thead th{background:#161d3d;color:#fff;border:0;white-space:nowrap;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;padding:.8rem .9rem}
.table thead th:first-child{border-radius:14px 0 0 0}
.table thead th:last-child{border-radius:0 14px 0 0}
.table tbody td{padding:.75rem .9rem;vertical-align:middle}
.table-hover tbody tr{transition:.15s}
.table-hover tbody tr:hover{background:#f2f6ff}
.badge-masuk{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
.badge-keluar{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.ruj{font-weight:800;font-size:.85rem}
.ruj-sub{font-size:.72rem;color:var(--muted)}
.form-control,.form-select{border-radius:13px;border-color:#dbe1f0;padding:.62rem .85rem;font-size:.9rem}
.form-control:focus,.form-select:focus{border-color:var(--aksen);box-shadow:0 0 0 .22rem rgba(34,211,238,.16)}
.form-label{font-weight:700;font-size:.83rem}
.langkah{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.langkah .nombor{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--grad)}
.langkah h5{margin:0;font-weight:800}
.pantas{display:flex;gap:.9rem;align-items:center;background:#fff;border:1px solid var(--garis);border-radius:18px;padding:1rem 1.1rem;transition:.2s;color:var(--teks)}
.pantas:hover{transform:translateY(-3px);box-shadow:var(--bayang-lg);color:var(--teks)}
.qikon{width:48px;height:48px;flex:0 0 48px;border-radius:15px;display:grid;place-items:center;font-size:1.4rem;color:#fff}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 1.1rem 1.6rem;border-left:2px solid var(--garis);margin-left:.5rem}
.timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--aksen);box-shadow:0 0 0 4px rgba(34,211,238,.18)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
/* Kertas surat rasmi */
.kertas{background:#fff;border-radius:8px;box-shadow:var(--bayang-lg);padding:3rem 3.2rem;max-width:820px;margin:0 auto;border-top:8px solid var(--utama)}
.kop{text-align:center;border-bottom:3px double #334155;padding-bottom:1rem;margin-bottom:1.2rem}
.kop h4{font-weight:800;margin:.2rem 0}
.rujukan-grid{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:#f6f8fd;border:1px solid var(--garis);border-radius:14px;padding:.9rem 1.1rem}
/* Login & landing */
.login-bg{min-height:100vh;background:#0b1023;display:flex;align-items:center;padding:2rem 1rem;position:relative;overflow:hidden}
.login-bg::before,.login-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(100px);opacity:.45}
.login-bg::before{width:480px;height:480px;background:#1d4ed8;top:-140px;left:-140px}
.login-bg::after{width:420px;height:420px;background:#0e7490;bottom:-140px;right:-120px}
.login-card{border:0;border-radius:26px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;z-index:1}
.login-side{background:linear-gradient(160deg,#ffffff,#e6f6ff);padding:2.4rem}
.hero-badge{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--garis);border-radius:999px;padding:.32rem .85rem;font-size:.76rem;font-weight:800;color:var(--utama);box-shadow:var(--bayang)}
.kpi{background:#fff;border:1px solid var(--garis);border-radius:15px;padding:.7rem .9rem;box-shadow:var(--bayang)}
.landing-hero{background:radial-gradient(900px 420px at 15% 0%,rgba(34,211,238,.16),transparent),radial-gradient(800px 380px at 85% 10%,rgba(129,140,248,.18),transparent),linear-gradient(180deg,#f7f9ff,#eef1f8)}
.grad-text{background:linear-gradient(90deg,#232a5c,#6d28d9 55%,#0e7490);-webkit-background-clip:text;background-clip:text;color:transparent}
.fitur{background:#fff;border:1px solid var(--garis);border-radius:18px;padding:1.2rem;box-shadow:var(--bayang);height:100%;transition:.2s}
.fitur:hover{transform:translateY(-4px);box-shadow:var(--bayang-lg)}
.fitur .fic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:1.4rem;color:#fff;margin-bottom:.8rem}
/* Toast */
.toast-container{position:fixed;bottom:1.2rem;right:1.2rem;z-index:2000}
@media(max-width:991px){
  .side{position:fixed;left:0;top:0;transform:translateX(-105%);transition:.25s;width:272px;flex-basis:272px}
  .side.open{transform:none;box-shadow:0 0 70px rgba(0,0,0,.5)}
  .side .brand-text,.side .me-info,.side .mitem span{opacity:1}
  .content{padding:1rem}
  .crumb h1{font-size:1.05rem}
  .search-global{display:none}
  .kertas{padding:1.4rem}
}
@media print{.side,.topbar,.page-foot,.no-print,.toast-container{display:none!important}.main{display:block}body{background:#fff}.content{padding:0;max-width:none}}
/* ===== Dashboard premium v2 ===== */
.hero-premium{border-radius:26px;background:linear-gradient(120deg,#171d42 0%,#2b2470 48%,#0b5e78 100%);color:#fff;position:relative;overflow:hidden;box-shadow:var(--bayang-lg)}
.hero-premium::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.5),transparent 70%);right:-120px;top:-140px}
.hero-premium::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.4),transparent 70%);left:32%;bottom:-170px}
.hero-premium>*{position:relative;z-index:1}
.glass-chip{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);border-radius:999px;padding:.42rem .95rem;font-size:.8rem;font-weight:700}
.hero-deco{font-size:4.2rem;opacity:.9;filter:drop-shadow(0 14px 26px rgba(0,0,0,.35))}
.kpi-card{border:1px solid var(--garis);border-radius:22px;background:#fff;box-shadow:var(--bayang);padding:1.15rem 1.25rem;position:relative;overflow:hidden;transition:.2s;height:100%}
.kpi-card:hover{transform:translateY(-4px);box-shadow:var(--bayang-lg)}
.kpi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--kc,#6366f1)}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start}
.kpi-blob{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.45rem;color:#fff;background:var(--kb,#6366f1);box-shadow:0 10px 20px color-mix(in srgb,var(--kb,#6366f1) 40%,transparent)}
.kpi-num{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin:.55rem 0 .1rem}
.kpi-lbl{font-weight:700;font-size:.86rem}
.kpi-sub{font-size:.74rem;color:var(--muted)}
.qa-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.qa-tile{display:flex;align-items:center;gap:.75rem;background:#fff;border:1px solid var(--garis);border-radius:17px;padding:.85rem 1rem;color:var(--teks);font-weight:700;font-size:.85rem;transition:.2s;box-shadow:var(--bayang)}
.qa-tile:hover{transform:translateY(-3px);box-shadow:var(--bayang-lg);color:var(--teks)}
.qa-tile .qikon{width:42px;height:42px;flex-basis:42px;font-size:1.2rem}
@media(max-width:768px){.qa-tiles{grid-template-columns:repeat(2,1fr)}}
.rekod-row{display:flex;align-items:center;gap:.9rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--garis);transition:.15s}
.rekod-row:last-child{border-bottom:0}
.rekod-row:hover{background:#f2f6ff}
.rekod-ikon{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem;color:#fff}
.rekod-info{flex:1;min-width:0}
.rekod-info .t{font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{height:9px;border-radius:99px;background:#edf1f8;overflow:hidden}
.prog>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#818cf8)}
.tindak{border:1px solid var(--garis);border-left:5px solid var(--tc,#f59e0b);border-radius:15px;padding:.75rem .9rem;background:#fff;transition:.18s;display:block;color:var(--teks)}
.tindak:hover{transform:translateX(4px);box-shadow:var(--bayang);color:var(--teks)}
.donut-wrap{position:relative;max-width:230px;margin:0 auto}
.donut-tengah{position:absolute;inset:0;display:grid;place-items:center;text-align:center}

/* Notifikasi kekal sehingga ditutup pengguna */

/* Modal dijamin jelas dibaca */
.modal-content{background:#fff;color:#1c2340;border:0;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.modal-header{border-bottom:1px solid #e4e9f4}
.modal-footer{border-top:1px solid #e4e9f4}
.modal-title{color:#1c2340}
.modal-content .form-label{color:#1c2340}
.modal-content .form-control,.modal-content .form-select{background:#fff;color:#1c2340;border-color:#dbe1f0}
.modal-content .form-control::placeholder{color:#9aa4b5}



/* Gerakan tambahan yang jelas: hero + blob login */







/* Latar statik premium: kecerunan lembut + corak titik (tiada gerakan langsung) */
body{background-color:#eef1f8;background-image:radial-gradient(1000px 620px at 6% -6%,rgba(34,211,238,.10),transparent 60%),radial-gradient(1100px 660px at 106% 4%,rgba(129,140,248,.10),transparent 60%),radial-gradient(920px 640px at 50% 116%,rgba(232,182,76,.08),transparent 60%),radial-gradient(rgba(35,42,92,.07) 1.2px,transparent 1.3px);background-size:auto,auto,auto,26px 26px}
@media print{body{background:#fff}}