/* =====================================================
   LABUAN GROUP — PREMIUM DESIGN SYSTEM v2
   Fresh • Mewah • Responsive
===================================================== */
:root{
    --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
    --primary:#6366f1;
    --primary-2:#8b5cf6;
    --accent:#f59e0b;
    --navy:#0b1220;
    --bg:#f3f5fa;
    --card:#ffffff;
    --text:#1e293b;
    --muted:#64748b;
    --line:#e6eaf2;
    --radius:18px;
    --shadow:0 8px 30px rgba(15,23,42,.08);
    --shadow-lg:0 20px 50px -12px rgba(15,23,42,.2);
    --grad:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#a855f7);
    --grad-gold:linear-gradient(135deg,#f59e0b,#fbbf24);
    --grad-dark:linear-gradient(160deg,#0b1220 0%,#16213c 100%);
}

*{outline:none}
html{scroll-behavior:smooth}
body{
    font-family:var(--font);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    background:
        radial-gradient(1100px 400px at 85% -10%, rgba(139,92,246,.09), transparent 60%),
        radial-gradient(900px 380px at -10% 0%, rgba(99,102,241,.09), transparent 55%),
        var(--bg);
}
::selection{background:rgba(139,92,246,.25)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c3cbe0;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#a8b3cf}

h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.4px}

/* ============ LAYOUT: SIDEBAR + MAIN ============ */
.app-layout{min-height:100vh}
.sidebar{
    position:fixed;top:0;bottom:0;left:0;width:264px;z-index:1040;
    background:var(--grad-dark);
    display:flex;flex-direction:column;
    transition:transform .3s ease;
    box-shadow:4px 0 30px rgba(2,6,23,.25);
}
.main-area{margin-left:264px;min-height:100vh;display:flex;flex-direction:column}

.sidebar-backdrop{
    position:fixed;inset:0;background:rgba(2,6,23,.55);z-index:1035;
    opacity:0;visibility:hidden;transition:.3s;backdrop-filter:blur(2px);
}
.sidebar-backdrop.show{opacity:1;visibility:visible}

/* Brand */
.sidebar-brand{display:flex;gap:12px;align-items:center;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-icon{
    width:46px;height:46px;border-radius:14px;background:var(--grad-gold);
    display:grid;place-items:center;color:#0b1220;font-size:1.3rem;
    box-shadow:0 8px 22px rgba(245,158,11,.4);flex-shrink:0;
}
.brand-text strong{color:#fff;display:block;font-size:1.02rem}
.brand-text small{color:#8ea0bf;font-size:.66rem;text-transform:uppercase;letter-spacing:1.6px}

/* Menu */
.sidebar-menu{padding:14px 14px 20px;overflow-y:auto;flex:1}
.menu-label{font-size:.66rem;letter-spacing:1.8px;text-transform:uppercase;color:#5b6b8c;margin:16px 12px 8px}
.menu-item{
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;margin-bottom:4px;border-radius:12px;
    color:#aab8d0;text-decoration:none;font-size:.9rem;font-weight:600;
    transition:.25s;
}
.menu-item i{font-size:1.05rem;width:22px;text-align:center}
.menu-item:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(3px)}
.menu-item.active{background:var(--grad);color:#fff;box-shadow:0 10px 22px -6px rgba(139,92,246,.55)}
.menu-item .menu-badge{
    margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:50rem;
    background:#ef4444;color:#fff;font-size:.66rem;font-weight:800;
    display:grid;place-items:center;
}
.menu-item .menu-badge.gold{background:var(--grad-gold);color:#0b1220}
.menu-item.danger:hover{background:rgba(239,68,68,.15);color:#fca5a5}

/* Topbar */
.topbar{
    position:sticky;top:0;z-index:1030;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:12px 24px;
    display:flex;align-items:center;gap:14px;
}
.btn-icon{
    width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);
    display:grid;place-items:center;color:var(--muted);text-decoration:none;transition:.25s;
}
.btn-icon:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px)}
.bell-wrap{position:relative}
.bell-badge{
    position:absolute;top:-6px;right:-7px;min-width:19px;height:19px;padding:0 5px;
    border-radius:50rem;background:#ef4444;color:#fff;font-size:.64rem;font-weight:800;
    display:grid;place-items:center;box-shadow:0 0 0 2px #fff;
}
.avatar{
    width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:.85rem;
    box-shadow:0 6px 16px -4px rgba(99,102,241,.5);
}

/* Content */
.content{padding:26px;flex:1;animation:fadeUp .45s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ KOMPONEN ============ */
/* Card */
.card{border:none;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:var(--card)}
.card:hover{box-shadow:var(--shadow)}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:700;padding:16px 20px}
.card-body{padding:22px}

/* Buttons */
.btn{border-radius:12px;font-weight:700;transition:.25s;letter-spacing:.1px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);border:none;box-shadow:0 8px 20px -6px rgba(99,102,241,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(99,102,241,.65);background:var(--grad)}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);border:none;box-shadow:0 8px 20px -6px rgba(16,185,129,.5)}
.btn-success:hover{transform:translateY(-2px)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);border:none;box-shadow:0 8px 20px -6px rgba(239,68,68,.5)}
.btn-danger:hover{transform:translateY(-2px)}
.btn-info{background:linear-gradient(135deg,#0ea5e9,#0284c7);border:none;color:#fff;box-shadow:0 8px 20px -6px rgba(14,165,233,.5)}
.btn-info:hover{transform:translateY(-2px);color:#fff}
.btn-warning{background:var(--grad-gold);border:none;color:#0b1220;box-shadow:0 8px 20px -6px rgba(245,158,11,.5)}
.btn-warning:hover{transform:translateY(-2px);color:#0b1220}
.btn-secondary{background:#e2e8f0;border:none;color:#334155}
.btn-secondary:hover{background:#cbd5e1;color:#0f172a}
.btn-outline-primary{color:var(--primary);border:1.5px solid #c9ccf9}
.btn-outline-primary:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)}
.btn-outline-warning{color:#b45309;border:1.5px solid #fcd34d}
.btn-outline-warning:hover{background:var(--grad-gold);border-color:transparent;color:#0b1220}

/* Forms */
.form-control,.form-select{
    border-radius:12px;border:1.5px solid var(--line);
    padding:.62rem .95rem;font-size:.92rem;background:#fff;
}
.form-control:focus,.form-select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(99,102,241,.13);
}
.form-label{font-weight:700;font-size:.83rem;color:#334155;margin-bottom:.4rem}

/* Tables */
.table{margin-bottom:0}
.table thead th{
    background:#f8fafc;color:var(--muted);font-size:.7rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.9px;border:none;padding:13px 16px;
}
.table td{padding:14px 16px;vertical-align:middle;border-color:var(--line);font-size:.9rem}
.table-hover tbody tr:hover{background:#f6f7ff}
.table tfoot th{background:#f8fafc;border:none;padding:13px 16px}

/* Badge & Alert */
.badge{border-radius:50rem;padding:.5em .85em;font-weight:700}
.alert{border:none;border-radius:14px;font-size:.9rem}

/* Modal */
.modal-content{border:none;border-radius:20px;box-shadow:var(--shadow-lg)}
.modal-header{border-bottom:1px solid var(--line);padding:18px 22px}
.modal-body{padding:22px}
.modal-footer{border-top:1px solid var(--line);padding:14px 22px}

/* Dropdown */
.dropdown-menu{border:none;border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;font-size:.9rem}
.dropdown-item{border-radius:10px;padding:9px 14px;font-weight:600}
.dropdown-item:hover{background:#f1f2fe;color:var(--primary)}

/* List group */
.list-group-item{border-color:var(--line);padding:16px 18px}
.list-group-item:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.list-group-item:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}

/* ============ HALAMAN LOGIN (MEWAH) ============ */
.login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:var(--grad-dark);position:relative;overflow:hidden;padding:24px;
}
.login-orb{position:absolute;border-radius:50%;filter:blur(95px)}
.orb-1{width:430px;height:430px;background:#6366f1;opacity:.45;top:-130px;left:-130px}
.orb-2{width:390px;height:390px;background:#a855f7;opacity:.4;bottom:-150px;right:-110px}
.orb-3{width:230px;height:230px;background:#f59e0b;opacity:.22;top:38%;right:16%}
.login-card{
    width:100%;max-width:440px;position:relative;z-index:2;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    border-radius:26px;padding:42px 34px;
    box-shadow:var(--shadow-lg);
    animation:fadeUp .5s ease;
}
.login-logo{
    width:66px;height:66px;border-radius:20px;background:var(--grad-gold);
    display:grid;place-items:center;font-size:1.7rem;color:#0b1220;
    margin:0 auto 18px;box-shadow:0 12px 32px rgba(245,158,11,.45);
}
.login-card h1{color:#fff;font-size:1.45rem;text-align:center;margin-bottom:4px}
.login-card .sub{color:#8ea0bf;text-align:center;font-size:.82rem;margin-bottom:28px;letter-spacing:.4px}
.login-card label{color:#cbd5e1;font-size:.82rem;font-weight:700}
.login-card .form-control{
    background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);color:#fff;
}
.login-card .form-control::placeholder{color:#7487a8}
.login-card .form-control:focus{
    border-color:var(--accent);background:rgba(255,255,255,.12);
    box-shadow:0 0 0 4px rgba(245,158,11,.16);
}
.btn-login{
    width:100%;background:var(--grad-gold);color:#0b1220;border:none;
    border-radius:14px;padding:.85rem;font-weight:800;font-size:.95rem;letter-spacing:.3px;
    box-shadow:0 10px 26px -6px rgba(245,158,11,.55);transition:.25s;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 14px 32px -6px rgba(245,158,11,.65)}
.login-footer{color:#64748b;text-align:center;font-size:.72rem;margin-top:22px;letter-spacing:.5px}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .main-area{margin-left:0}
    .topbar{padding:10px 16px}
    .content{padding:18px 16px}
}
@media (max-width: 576px){
    .content{padding:14px 12px}
    h2{font-size:1.35rem}
    .card-body{padding:16px}
    .table td,.table thead th{padding:11px 12px}
    .topbar-title small{display:none}
}

/* ============ INPUT LOGIN PRESISI + IKON ============ */
.input-group-login{position:relative;display:flex;align-items:center}
.input-group-login .form-control{
    width:100%;
    padding-left:46px;
    padding-right:46px;
    height:52px;
}
.input-group-login .icon{
    position:absolute;left:16px;color:#7487a8;font-size:1.05rem;
    pointer-events:none;z-index:2;
}
.input-group-login .eye{
    position:absolute;right:8px;background:none;border:none;color:#7487a8;
    width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
    cursor:pointer;transition:.2s;z-index:2;
}
.input-group-login .eye:hover{color:#fff;background:rgba(255,255,255,.1)}

/* =====================================================
   LOGIN V3 — PRESISI, SPACING SERAGAM, FIX AUTOFILL
===================================================== */
.login-card{padding:46px 38px;border-radius:28px}
.login-logo{width:68px;height:68px;border-radius:22px;margin:0 auto 18px}
.login-card h1{font-size:1.5rem;margin-bottom:6px}
.login-card .sub{margin-bottom:32px}

/* Label kecil uppercase — rapi & mewah */
.login-card .form-label{
    margin-bottom:8px;font-size:.72rem;font-weight:800;
    letter-spacing:1.2px;text-transform:uppercase;color:#9fb0cd;
}

/* Spacing seragam antar field */
.login-field{margin-bottom:20px}

/* Input tinggi seragam 54px */
.input-group-login .form-control{
    height:54px;padding-left:48px;padding-right:48px;
    border-radius:14px;font-size:.95rem;
}
.input-group-login .icon{left:17px;font-size:1.05rem}
.input-group-login .eye{right:10px}

/* Tombol login */
.btn-login{height:54px;margin-top:10px;border-radius:14px;font-size:.95rem}
.login-footer{margin-top:28px}

/* ✅ FIX: Background KUNING autofill Chrome dihapus */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #16213c inset !important;
    box-shadow:0 0 0 1000px #16213c inset !important;
    -webkit-text-fill-color:#ffffff !important;
    caret-color:#ffffff;
    transition:background-color 5000s ease-in-out 0s;
    border-radius:14px;
}

/* Responsive mobile */
@media (max-width:576px){
    .login-card{padding:34px 22px}
    .input-group-login .form-control{height:50px}
    .btn-login{height:50px}
}

/* =====================================================
   FIX: HALAMAN BISA DIGESER / TERPOTONG DI HP
===================================================== */
/* Kunci scroll horizontal di seluruh aplikasi */
html, body{
    overflow-x:hidden;
    max-width:100%;
}

/* Biarkan halaman login scroll vertikal normal */
.login-wrap{
    overflow:visible;
    position:relative;
    width:100%;
}

/* Wadah khusus orb: fixed + overflow hidden
   → orb terpotong rapi di dalam wadah, TIDAK memicu scroll */
.login-bg{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}
.login-bg .login-orb{position:absolute}

/* Pastikan kartu login di atas orb */
.login-card{position:relative;z-index:2;max-width:440px;width:100%}

/* ============ FIX: LIST NOTIFIKASI MOBILE ============ */
.notif-list .list-group-item{overflow:hidden}
.notif-content{min-width:0;flex:1 1 auto}   /* kunci agar truncate bekerja di flexbox */
.notif-content .text-truncate{max-width:100%}