/* ============================================================
   SiTinggi Global UI Design System v1
   UI-only stylesheet. Tidak mengubah logika aplikasi.
   Baseline visual: Dashboard SiTinggi.
   ============================================================ */
:root{
  --st-bg:#f5f7fb;
  --st-card:#ffffff;
  --st-text:#182235;
  --st-muted:#788594;
  --st-border:rgba(148,163,184,.20);
  --st-radius:20px;
  --st-radius-sm:13px;
  --st-shadow:0 12px 30px rgba(15,23,42,.055);
  --st-shadow-hover:0 18px 40px rgba(15,23,42,.09);
  --st-cyan-1:#22b8c8;
  --st-cyan-2:#12879a;
  --st-green-1:#55b96a;
  --st-green-2:#318f4d;
  --st-blue-1:#4b9ff1;
  --st-blue-2:#2f72cf;
  --st-purple-1:#9b6deb;
  --st-purple-2:#7147cf;
  --st-pink-1:#dc4d81;
  --st-pink-2:#b42f6d;
  --st-amber-1:#f7c54c;
  --st-amber-2:#ec951d;
  --st-red-1:#ef6a78;
  --st-red-2:#cf4055;
  --st-sidebar-1:#142338;
  --st-sidebar-2:#0f1b2b;
}

/* ---------- Global ---------- */
html{scroll-behavior:smooth}
body{color:var(--st-text);background:var(--st-bg);font-family:Inter,"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.content-wrapper{background:linear-gradient(180deg,#f7f9fc 0%,#f3f6fa 100%)!important}
.content{padding-bottom:1.25rem}
.content-header{padding:1rem .5rem .5rem}
.content-header h1{font-size:1.32rem!important;font-weight:800!important;color:var(--st-text);letter-spacing:-.02em;margin:0!important;display:flex;align-items:center;gap:.55rem}
.content-header h1:before{content:"";width:5px;height:24px;border-radius:999px;background:linear-gradient(180deg,var(--st-cyan-1),var(--st-blue-2));display:inline-block;flex:0 0 auto}

/* ---------- Top navbar ---------- */
.main-header.navbar{min-height:58px;border-bottom:1px solid rgba(148,163,184,.16)!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(14px);box-shadow:0 4px 18px rgba(15,23,42,.035)}
.main-header .nav-link{color:#536170!important;border-radius:10px;margin:.15rem .1rem;transition:.18s ease}
.main-header .nav-link:hover{background:#f0f7fa;color:var(--st-cyan-2)!important}
.main-header .dropdown-menu{border:1px solid var(--st-border);border-radius:15px;box-shadow:0 18px 42px rgba(15,23,42,.12);padding:.45rem;overflow:hidden}
.main-header .dropdown-item{border-radius:10px;padding:.62rem .75rem;font-size:.86rem}
.main-header .dropdown-item:hover{background:#f3f8fb}

/* ---------- Sidebar ---------- */
.main-sidebar{background:linear-gradient(180deg,var(--st-sidebar-1),var(--st-sidebar-2))!important;box-shadow:8px 0 30px rgba(15,23,42,.08)!important}
.brand-link{min-height:66px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;padding:.65rem 1rem!important}
.brand-logo{width:42px!important;height:42px!important;filter:drop-shadow(0 5px 12px rgba(0,0,0,.16))}
.brand-text{font-size:1.18rem!important;font-weight:800!important;letter-spacing:.01em}
.nav-sidebar{padding:.25rem .55rem}
.nav-sidebar>.nav-item>.nav-link,.nav-treeview>.nav-item>.nav-link{border-radius:12px;margin:.16rem 0;padding:.68rem .75rem;color:rgba(255,255,255,.72)!important;transition:.18s ease}
.nav-sidebar>.nav-item>.nav-link:hover,.nav-treeview>.nav-item>.nav-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;transform:translateX(2px)}
.nav-sidebar>.nav-item>.nav-link.active{background:linear-gradient(135deg,var(--st-cyan-1),var(--st-blue-2))!important;color:#fff!important;box-shadow:0 9px 20px rgba(31,133,179,.24)!important}
.nav-sidebar .nav-icon{width:1.5rem!important;text-align:center}
.nav-treeview{padding-left:.4rem}
.nav-treeview>.nav-item>.nav-link.active{background:rgba(255,255,255,.11)!important;color:#fff!important}

/* ---------- Cards / panels ---------- */
.content .card{border:1px solid var(--st-border);border-radius:var(--st-radius);box-shadow:var(--st-shadow);overflow:hidden;background:var(--st-card)}
.content .card:hover{box-shadow:var(--st-shadow-hover)}
.content .card-header{border-bottom:1px solid #edf1f4;background:#fff;padding:.9rem 1rem}
.content .card-header .card-title{font-size:.96rem;font-weight:800;color:var(--st-text);margin:0;line-height:1.35}
.content .card-header.bg-primary,.content .card-header.bg-info{background:linear-gradient(125deg,var(--st-cyan-1),var(--st-blue-2))!important;border-bottom:0}
.content .card-header.bg-success{background:linear-gradient(125deg,var(--st-green-1),var(--st-green-2))!important;border-bottom:0}
.content .card-header.bg-warning{background:linear-gradient(125deg,var(--st-amber-1),var(--st-amber-2))!important;border-bottom:0;color:#fff!important}
.content .card-header.bg-danger{background:linear-gradient(125deg,var(--st-red-1),var(--st-red-2))!important;border-bottom:0}
.content .card-header.bg-purple{background:linear-gradient(125deg,var(--st-purple-1),var(--st-purple-2))!important;border-bottom:0}
.content .card-header[class*="bg-"] .card-title{color:#fff}
.content .card-body{padding:1rem}
.content .card-footer{border-top:1px solid #edf1f4;background:#fbfcfd;padding:.75rem 1rem}

/* ---------- Forms ---------- */
.form-group label,.col-form-label{font-size:.79rem;font-weight:700;color:#546270;margin-bottom:.4rem}
.form-control,.custom-select,.form-control-sm,.custom-select-sm{border:1px solid #dce5eb;border-radius:11px;background:#fff;color:#263342;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.form-control{min-height:40px}
.form-control-sm,.custom-select-sm{min-height:34px}
.form-control:focus,.custom-select:focus{border-color:#66bccc;box-shadow:0 0 0 3px rgba(34,184,200,.12);background:#fff}
.form-control:disabled,.form-control[readonly]{background:#f5f7f9;color:#7a8590}
.input-group-text{border-color:#dce5eb;background:#f4f8fa;color:#647481;border-radius:11px}
.input-group>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.input-group>.input-group-append>.btn,.input-group>.input-group-prepend>.btn{border-radius:0 11px 11px 0}
textarea.form-control{min-height:88px;line-height:1.45}
select.form-control{cursor:pointer}
.form-text,.text-muted{color:#7f8c98!important}

/* ---------- Buttons ---------- */
.btn{border-radius:10px;font-weight:700;font-size:.83rem;box-shadow:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--st-blue-1),var(--st-blue-2));border-color:transparent;box-shadow:0 7px 16px rgba(47,114,207,.18)}
.btn-info{background:linear-gradient(135deg,var(--st-cyan-1),var(--st-cyan-2));border-color:transparent;box-shadow:0 7px 16px rgba(18,135,154,.16)}
.btn-success{background:linear-gradient(135deg,var(--st-green-1),var(--st-green-2));border-color:transparent;box-shadow:0 7px 16px rgba(49,143,77,.16)}
.btn-warning{background:linear-gradient(135deg,var(--st-amber-1),var(--st-amber-2));border-color:transparent;color:#fff;box-shadow:0 7px 16px rgba(236,149,29,.16)}
.btn-danger{background:linear-gradient(135deg,var(--st-red-1),var(--st-red-2));border-color:transparent;box-shadow:0 7px 16px rgba(207,64,85,.16)}
.btn-secondary{background:#eef2f5;border-color:#dde5ea;color:#50606d}
.btn-outline-primary,.btn-outline-info,.btn-outline-success,.btn-outline-warning,.btn-outline-danger{background:#fff;border-width:1px}
.btn-sm,.btn-group-sm>.btn{border-radius:9px}

/* ---------- Tables ---------- */
.table-responsive{border-radius:14px;-webkit-overflow-scrolling:touch}
.table{color:#293744;margin-bottom:0}
.table thead th{border-top:0;border-bottom:1px solid #dfe7ec;background:#f3f6f9;color:#52606d;font-size:.76rem;font-weight:800;letter-spacing:.015em;padding:.72rem .75rem;white-space:nowrap}
.table tbody td{border-top:1px solid #edf1f4;padding:.7rem .75rem;background:#fff}
.table-striped tbody tr:nth-of-type(odd) td{background:#fbfcfd}
.table-hover tbody tr:hover td,.table tbody tr:hover td{background:#f4fafb}
.table-bordered{border:1px solid #e2e8ed}
.table-bordered td,.table-bordered th{border-color:#e2e8ed}
.table-sm td,.table-sm th{padding:.52rem .6rem}

/* ---------- DataTables ---------- */
.dataTables_wrapper .dataTables_length label,.dataTables_wrapper .dataTables_filter label{font-size:.78rem;font-weight:700;color:#667582}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border:1px solid #dce5eb;border-radius:10px;padding:.35rem .55rem;background:#fff;outline:none}
.dataTables_wrapper .dataTables_filter input:focus{border-color:#66bccc;box-shadow:0 0 0 3px rgba(34,184,200,.10)}
.dataTables_wrapper .dataTables_info{font-size:.77rem;color:#7a8792;padding-top:.8rem}
.dataTables_wrapper .dataTables_paginate{padding-top:.55rem}
.page-item .page-link{border:0;margin:0 2px;border-radius:9px!important;color:#586875;background:#eef3f6;min-width:34px;text-align:center}
.page-item.active .page-link{background:linear-gradient(135deg,var(--st-cyan-1),var(--st-blue-2));box-shadow:0 6px 14px rgba(47,114,207,.15)}
.page-item.disabled .page-link{background:#f5f6f7;color:#a1aab2}

/* ---------- Badges / alerts ---------- */
.badge{border-radius:999px;padding:.34em .62em;font-weight:800;letter-spacing:.005em}
.badge-success{background:#e7f6ec;color:#2f8f4d}
.badge-danger{background:#fdebed;color:#c84255}
.badge-warning{background:#fff2cc;color:#9a6900}
.badge-info{background:#e6f6f8;color:#12879a}
.badge-primary{background:#e8f1ff;color:#2f72cf}
.badge-secondary{background:#edf1f4;color:#66727d}
.alert{border:1px solid transparent;border-radius:14px;box-shadow:0 8px 20px rgba(15,23,42,.04);font-size:.86rem}
.alert-success{background:#eefaf2;border-color:#d6f0df;color:#2b7442}
.alert-warning{background:#fff9e8;border-color:#f3e3aa;color:#826414}
.alert-danger{background:#fff0f1;border-color:#f2d6da;color:#a73a49}
.alert-info{background:#eef9fb;border-color:#d4edf1;color:#256d78}

/* ---------- Modals / dropdowns ---------- */
.modal-content{border:1px solid var(--st-border);border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.20);overflow:hidden}
.modal-header{border-bottom:1px solid #edf1f4;background:#fff;padding:1rem 1.1rem}
.modal-title{font-weight:800;color:var(--st-text)}
.modal-footer{border-top:1px solid #edf1f4;background:#fbfcfd}
.dropdown-menu{border-radius:13px;border:1px solid var(--st-border);box-shadow:0 16px 34px rgba(15,23,42,.12)}

/* ---------- Generic page toolbar ---------- */
.card-tools .btn,.content .d-flex .btn{white-space:nowrap}
.breadcrumb{background:transparent;padding:.25rem 0;margin:0;font-size:.8rem}

/* ---------- Small boxes kept compatible but modernized ---------- */
.small-box{border-radius:18px;overflow:hidden;box-shadow:var(--st-shadow);border:0}
.small-box>.small-box-footer{background:rgba(0,0,0,.10);font-weight:700;font-size:.78rem;padding:.5rem .7rem}

/* ---------- Auth pages: Login + MFA ---------- */
.login-wrapper,.mfa-wrapper{border-radius:28px!important;box-shadow:0 24px 70px rgba(15,23,42,.15)!important;border:1px solid rgba(148,163,184,.18)}
.login-left,.mfa-left{background:linear-gradient(145deg,#edf9fa 0%,#edf5ff 55%,#eef9f2 100%)!important}
.login-left h1,.mfa-left h1{color:#153a51!important}
.login-left h1 .highlight{color:var(--st-cyan-2)!important}
.login-left p,.mfa-left p{color:#5f7885!important}
.login-right h2,.section-title h2{color:#1e3a50!important}
.btn-login{background:linear-gradient(135deg,var(--st-cyan-1),var(--st-blue-2))!important;border-radius:12px!important;box-shadow:0 9px 22px rgba(47,114,207,.20)}
.btn-login:hover{box-shadow:0 12px 28px rgba(47,114,207,.28)!important}
.input-wrap input{border-radius:12px!important;border-color:#dce5eb!important}
.input-wrap input:focus{border-color:#66bccc!important;box-shadow:0 0 0 3px rgba(34,184,200,.12)!important}
.forgot{color:var(--st-cyan-2)!important}
.remember input{accent-color:var(--st-cyan-2)!important}
.shield-badge{color:var(--st-cyan-2)!important;box-shadow:0 15px 35px rgba(18,135,154,.14)!important}

/* ---------- Responsive ---------- */
@media(max-width:991.98px){
  .content-header{padding-top:.8rem}
  .content-header h1{font-size:1.18rem!important}
  .content .card{border-radius:17px}
}
@media(max-width:767.98px){
  .content-header,.content>.container-fluid{padding-left:.65rem!important;padding-right:.65rem!important}
  .content .card-body{padding:.8rem}
  .main-header.navbar{min-height:54px}
  .btn{font-size:.8rem}
  .table,.table-sm{font-size:.82rem}
  .table thead th,.table tbody td{padding:.52rem .55rem}
}
@media(max-width:575.98px){
  .content-header h1{font-size:1.08rem!important}
  .content-header h1:before{height:20px;width:4px}
  .form-control{min-height:38px}
  .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length{text-align:left!important}
  .dataTables_wrapper .dataTables_filter input{width:100%;margin:.35rem 0 0!important}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}