/* ==========================================================
   QIS GUNA — APP STYLESHEET
   PT Gunanusa Eramandiri Tbk.
   File ini dipakai bersama oleh semua halaman.
   Section per halaman diberi komentar biar gampang dicari.
   ========================================================== */

:root{
    --bg-deep:#0A0E27;
    --bg-panel:#10153A;
    --surface:#151B48;
    --surface-2:#1B2358;
    --border:#2A3268;
    --border-soft:#252c5c;
    --text:#F3F4FA;
    --text-muted:#8D96C4;
    --brass:#F0A63A;
    --brass-soft:#F0A63A1f;
    --brass-dim:#C97D1E;
    --danger:#FF6B75;
    --danger-bg:#3a1620;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    min-height:100vh;
    background:#F6F7FB;
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    color:#1A2145;
    -webkit-font-smoothing:antialiased;
}

/* Dark theme KHUSUS halaman login - selain itu body selalu terang (lihat body{} di atas) */
body.auth-body{
    background:
        radial-gradient(circle at 15% 20%, #161d4d 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, #141a42 0%, transparent 50%),
        var(--bg-deep);
    color:var(--text);
}

/* ==========================================================
   LOGIN PAGE
   ========================================================== */

.login-wrapper{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.login-box{
    width:100%;
    max-width:920px;
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02);
    display:grid;
    grid-template-columns:1.05fr 1fr;
    opacity:0;
    transform:translateY(14px);
    animation:riseIn .6s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes riseIn{
    to{ opacity:1; transform:translateY(0); }
}

/* ---- panel kiri: identitas (desktop) ---- */
.panel-visual{
    position:relative;
    padding:44px 40px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(160deg, #12183f 0%, #0c1030 100%);
    border-right:1px solid var(--border-soft);
    overflow:hidden;
}

.panel-visual::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(240,166,58,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(240,166,58,.06) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(ellipse at 30% 20%, black 0%, transparent 70%);
    pointer-events:none;
}

.brand-row{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
}

.brand-mark{
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--brass-soft);
    border:1px solid rgba(240,166,58,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.brand-mark svg{ width:28px; height:28px; }

.brand-name{
    font-family:'Space Grotesk', sans-serif;
    font-size:19px;
    font-weight:700;
    letter-spacing:.01em;
    line-height:1.15;
}

.brand-sub{
    font-size:12px;
    color:var(--text-muted);
    margin-top:2px;
}

.hero-copy{ position:relative; margin-top:36px; }

.eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--brass);
    display:flex;
    align-items:center;
    gap:8px;
}
.eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--brass);
    box-shadow:0 0 0 4px var(--brass-soft);
    animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{ box-shadow:0 0 0 3px var(--brass-soft); }
    50%{ box-shadow:0 0 0 7px transparent; }
}

.hero-title{
    font-family:'Space Grotesk', sans-serif;
    font-size:27px;
    font-weight:600;
    line-height:1.32;
    margin:14px 0 0;
    color:var(--text);
}
.hero-title em{ font-style:normal; color:var(--brass); }

.hero-desc{
    font-size:13.5px;
    line-height:1.6;
    color:var(--text-muted);
    margin-top:14px;
    max-width:34ch;
}

.panel-foot{
    position:relative;
    font-size:11px;
    color:var(--text-muted);
    margin-top:32px;
    padding-top:18px;
    border-top:1px solid var(--border-soft);
}

/* ---- panel kanan / sheet: form ---- */
.panel-form{
    padding:48px 42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.brand-row-mobile{ display:none; margin-bottom:26px; }

.form-heading h1{
    font-family:'Space Grotesk', sans-serif;
    font-size:23px;
    font-weight:600;
    margin:0 0 6px;
}
.form-heading p{
    font-size:13.5px;
    color:var(--text-muted);
    margin:0 0 28px;
}

.alert-box{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    padding:11px 14px;
    border-radius:10px;
    margin-bottom:18px;
    background:var(--danger-bg);
    color:var(--danger);
    border:1px solid rgba(255,107,117,.25);
}

.field{ margin-bottom:16px; }
.field label{
    display:block;
    font-size:12px;
    font-weight:500;
    color:var(--text-muted);
    margin-bottom:7px;
}
.field input{
    width:100%;
    height:46px;
    padding:0 14px;
    border-radius:11px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:14px;
    font-family:'Inter', sans-serif;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input::placeholder{ color:#565f8f; }
.field input:focus{
    border-color:var(--brass);
    background:var(--surface-2);
    box-shadow:0 0 0 3px var(--brass-soft);
}

.btn{
    width:100%;
    height:46px;
    border-radius:11px;
    border:none;
    font-size:14px;
    font-weight:600;
    font-family:'Inter', sans-serif;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:transform .12s ease, filter .15s ease, background .15s ease;
}
.btn:active{ transform:scale(.98); }

.btn-primary{
    background:linear-gradient(135deg, #FCC66B, var(--brass) 55%, var(--brass-dim));
    color:#241202;
    margin-top:6px;
}
.btn-primary:hover{ filter:brightness(1.06); }

.btn-biometric{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-muted);
    margin-bottom:16px;
    display:none;
}
.btn-biometric:hover{ border-color:var(--brass); color:var(--brass); }
.btn-biometric svg{ width:17px; height:17px; }

.divider{
    display:none;
    align-items:center;
    gap:12px;
    margin:4px 0 16px;
}
.divider.show{ display:flex; }
.divider::before, .divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--border-soft);
}
.divider span{ font-size:11px; color:var(--text-muted); }

.form-foot{ text-align:center; margin-top:20px; font-size:12.5px; }
.form-foot a{ color:var(--brass); text-decoration:none; }
.form-foot a:hover{ text-decoration:underline; }

.loading-state{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    color:var(--text-muted);
    font-size:13px;
}

.spinner{
    width:34px;
    height:34px;
    border-radius:50%;
    border:3px solid var(--border);
    border-top-color:var(--brass);
    animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- modal tawaran biometrik ---- */
.bm-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(6,8,22,.72);
    backdrop-filter:blur(3px);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.bm-box{
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:18px;
    max-width:340px;
    width:100%;
    padding:28px 24px;
    text-align:center;
}
.bm-box .icon-wrap{
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--brass-soft);
    border:1px solid rgba(240,166,58,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 14px;
}
.bm-box .icon-wrap svg{ width:26px; height:26px; }
.bm-box h5{ font-family:'Space Grotesk', sans-serif; font-size:16px; margin:0 0 8px; }
.bm-box p{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin:0 0 18px; }
.bm-box .btn-outline{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-muted);
    width:100%;
    height:42px;
    border-radius:10px;
    font-size:13.5px;
    margin-top:8px;
    cursor:pointer;
}

/* ---- hero mobile: icon besar, ala kartu identitas ---- */
.mobile-hero{
    display:none;
    position:relative;
    width:100%;
    max-width:420px;
    height:190px;
    border-radius:22px;
    background:linear-gradient(160deg, #12183f 0%, #0c1030 100%);
    border:1px solid var(--border-soft);
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.mobile-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(240,166,58,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(240,166,58,.08) 1px, transparent 1px);
    background-size:24px 24px;
    mask-image:radial-gradient(ellipse at 50% 40%, black 0%, transparent 75%);
}
.mobile-hero .hero-icon-lg{
    position:relative;
    width:92px;
    height:92px;
    border-radius:24px;
    background:var(--brass-soft);
    border:1px solid rgba(240,166,58,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 10px rgba(240,166,58,.05);
}
.mobile-hero .hero-icon-lg svg{ width:48px; height:48px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media(max-width:820px){
    .login-wrapper{
        flex-direction:column;
        gap:18px;
        padding:20px 16px;
    }
    .mobile-hero{ display:flex; }
    .login-box{
        grid-template-columns:1fr;
        max-width:420px;
        opacity:1;
        transform:none;
        animation:none;
    }
    .panel-visual{ display:none; }
    .panel-form{ padding:32px 24px 38px; }
    .form-heading{ display:none; }
    .brand-row-mobile{ display:flex; }
}

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

/* ==========================================================
   CONTENT PAGES (kedatangan, check-incoming, dst)
   Tema terang, konsisten sama dashboard.
   ========================================================== */

.content-page{
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:24px 20px 100px;
    min-height:100vh;
    min-height:100svh;
}

.page-heading{ margin-bottom:18px; }
.page-heading h1{
    font-family:'Space Grotesk', sans-serif;
    font-size:19px;
    font-weight:700;
    color:#1A2145;
    margin:0 0 4px;
}
.page-heading p{ font-size:12.5px; color:#6B7299; margin:0; }

.access-notice{
    background:#FFF8ED;
    border:1px solid #F3DBA8;
    color:#8A5A0F;
    border-radius:14px;
    padding:14px 16px;
    font-size:12.5px;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    gap:8px;
}

/* ---- form card ---- */
.form-card{
    background:#FFFFFF;
    border:1px solid #ECEDF5;
    border-radius:18px;
    padding:22px 20px;
    margin-bottom:20px;
    box-shadow:0 8px 24px rgba(20,25,60,.05);
}
.form-card h2{
    font-family:'Space Grotesk', sans-serif;
    font-size:14px;
    font-weight:700;
    color:#1A2145;
    margin:0 0 4px;
}
.form-card-sub{ font-size:11.5px; color:#9AA0BE; margin:0 0 18px; }

.form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px 16px;
}
.form-grid .full{ grid-column:1 / -1; }
.qis-field{
    min-width:0;
}
.qis-field label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:#4A5178;
    margin-bottom:6px;
}
.qis-field input,
.qis-field select,
.qis-field textarea{
    width:100%;
    box-sizing:border-box;
    padding:10px 13px;
    border-radius:10px;
    border:1px solid #E2E4EF;
    background:#FBFBFE;
    color:#1A2145;
    font-size:13.5px;
    font-family:'Inter', sans-serif;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.qis-field select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:40px;
    cursor:pointer;
    background-color:#FBFBFE;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7299' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 13px center;
    background-size:14px;
}
.qis-field select:hover{
    border-color:#C8CCDF;
    background-color:#fff;
}
.qis-field select:focus{
    background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C97D1E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.qis-field select option{
    background:#fff;
    color:#1A2145;
    padding:8px;
}
@media(max-width:640px){
    .form-grid{ grid-template-columns:1fr; }
}
.qis-field input:focus,
.qis-field select:focus,
.qis-field textarea:focus{
    border-color:var(--brass);
    box-shadow:0 0 0 3px var(--brass-soft);
    background:#fff;
}
.qis-field textarea{ resize:vertical; min-height:80px; font-family:'Inter', sans-serif; }
.qis-field [data-note]{
    margin-top:8px;
}
#standar .qis-field{
    margin-bottom:10px;
}
#standar{
    margin-top:26px;
}
#standar > p{
    min-height:48px;
    margin:24px 0 22px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px dashed #D8DBEB;
    border-radius:10px;
    background:#F8F9FC;
    color:#6B7299;
    font-size:13px;
    line-height:1.4;
}
.qis-field .hint{ font-size:10.5px; color:#C7852C; margin-top:5px; }

/* ---- native file upload ---- */
.upload-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-top:4px;
}
@media(max-width:820px){
    .upload-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:480px){
    .upload-grid{ grid-template-columns:1fr; }
}
.upload-tile{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    min-height:0;
    border:0;
    border-radius:0;
    padding:0;
    text-align:left;
    cursor:default;
    background:transparent;
    min-width:0;
}
.upload-tile:hover{ border-color:transparent; background:transparent; }
.upload-tile input[type=file]{
    width:100%;
    height:36px;
    padding:4px 7px;
    border:1px solid #D8DBEB;
    border-radius:8px;
    background:#fff;
    color:#6B7299;
    font-size:11px;
    line-height:24px;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.upload-tile input[type=file]:hover,
.upload-tile input[type=file]:focus{
    border-color:var(--brass);
    outline:0;
    box-shadow:0 0 0 3px rgba(240,166,58,.12);
}
.upload-tile input[type=file]::file-selector-button{
    margin-right:7px;
    padding:3px 9px;
    border:1px solid #D2D6E5;
    border-radius:5px;
    background:#F4F5F9;
    color:#1A2145;
    font-size:11px;
    line-height:18px;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.upload-tile input[type=file]::file-selector-button:hover{
    background:#FFF8ED;
    border-color:var(--brass);
    color:#8A5A0F;
}
.upload-tile i{ display:none; }
.upload-tile .upload-label{
    font-size:12px;
    font-weight:600;
    color:#4A5178;
    line-height:1.4;
}
.upload-tile .upload-filename{
    display:none;
    font-size:10px;
    color:var(--brass-dim);
    margin-top:6px;
    width:100%;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.4;
}
.upload-tile .upload-status{
    display:none;
}
.upload-tile .upload-status.selected{
    color:#218739;
    font-weight:700;
}
.upload-tile img.preview{
    display:none;
    max-height:84px;
    width:max-content;
    border-radius:8px;
    margin-bottom:8px;
    max-width:100%;
    object-fit:cover;
}
.upload-tile.has-file{
    border-style:solid;
    border-color:var(--brass);
    background:#FFFDF8;
}
.upload-tile.has-file i{ display:none; }
.upload-tile.has-file .upload-filename{
    display:block;
}
.standard-info{border:0;background:transparent;color:#6874C8;cursor:pointer;padding:0 3px;font-size:13px;}
.qc-result{display:block;font-size:11px;margin-top:8px;margin-bottom:9px;min-height:15px;padding:5px 8px;border-radius:6px;}
.qc-result.sesuai{color:#218739;background:#EAF8EF;border:1px solid #C7EBD3;font-weight:700;}
.qc-result.tidak_sesuai{color:#B42318;background:#FDEDED;border:1px solid #F5CACA;font-weight:700;}
.status-sesuai{color:#218739;font-weight:700;}
.status-tidak-sesuai{color:#B42318;font-weight:700;}

/* ---- tombol sekunder (buat form-actions) ---- */
.btn-secondary{
    background:#F2F3F8;
    color:#6B7299;
}
.btn-secondary:hover{ background:#E7E9F3; }

.form-actions{
    margin-top:22px;
    display:flex;
    gap:10px;
}
.form-actions .btn{ width:auto; padding:0 22px; flex:none; }
@media(max-width:480px){
    .form-actions{ flex-direction:column; }
    .form-actions .btn{ width:100%; }
}

/* ---- tabel data ---- */
.table-card{
    background:#FFFFFF;
    border:1px solid #ECEDF5;
    border-radius:18px;
    padding:18px;
    overflow-x:auto;
}
.table-card h2{
    font-family:'Space Grotesk', sans-serif;
    font-size:14px;
    font-weight:700;
    color:#1A2145;
    margin:0 0 14px;
}
.qis-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.qis-table th{
    text-align:left;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#9AA0BE;
    padding:10px 12px;
    border-bottom:1px solid #ECEDF5;
    white-space:nowrap;
}
.qis-table td{
    padding:11px 12px;
    border-bottom:1px solid #F2F3F8;
    color:#1A2145;
    white-space:nowrap;
}
.qis-table tbody tr:hover{ background:#FBFBFE; }
.detail-table-wrap{
    overflow-x:auto;
    border:1px solid #E4E6F0;
    border-radius:10px;
}
.detail-check-table{
    min-width:720px;
    margin:0;
}
.detail-check-table th,
.detail-check-table td{
    border:1px solid #E4E6F0;
    text-align:center;
    vertical-align:middle;
}
.detail-check-table th{
    background:#F6F7FB;
    color:#7B84A8;
}

/* ---- badge status approval ---- */
.badge-status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:10.5px;
    font-weight:600;
    padding:4px 11px;
    border-radius:20px;
    white-space:nowrap;
}
.badge-pending{  background:#F2F3F8; color:#6B7299; }
.badge-approved{ background:#E6F8EF; color:#1CA765; }
.badge-rejected{ background:#FDEBEB; color:#E5484D; }
.badge-revisi{   background:#E7F1FD; color:#2F7DE1; }

/* ---- tabs ---- */
.tab-bar{
    display:flex;
    gap:8px;
    margin-bottom:18px;
    border-bottom:1px solid #ECEDF5;
}
.tab-btn{
    background:none;
    border:none;
    padding:10px 4px;
    font-size:13px;
    font-weight:600;
    color:#9AA0BE;
    cursor:pointer;
    position:relative;
    font-family:'Inter', sans-serif;
}
.tab-btn.active{ color:#1A2145; }
.tab-btn.active::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:2px;
    background:var(--brass);
    border-radius:2px;
}
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.standard-manage-help{
    margin:0 0 16px;
    color:#6B7299;
    font-size:12px;
}

/* ---- toolbar di atas tabel ---- */
.table-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:16px;
    flex-wrap:wrap;
}
.table-toolbar h2{ margin:0; }
.toolbar-left,
.toolbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.toolbar-right{ margin-left:auto; }
.toolbar-search{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:260px;
    height:40px;
    padding:0 13px;
    border:1px solid #E3E5F0;
    border-radius:10px;
    background:#fff;
    color:#9AA0BE;
}
.toolbar-search i{ font-size:12px; }
.toolbar-search input{
    width:100%;
    min-width:0;
    height:36px;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#1A2145;
    font:inherit;
}
.toolbar-search:focus-within{
    border-color:var(--brass);
    box-shadow:0 0 0 3px rgba(240,166,58,.12);
}
.btn-toolbar{
    width:auto;
    padding:0 18px;
    min-height:40px;
    height:40px;
    margin-top:0;
    align-self:center;
    font-size:13px;
    white-space:nowrap;
}
.table-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:16px;
    color:#8D96C4;
    font-size:12px;
}
.table-pagination > div{ display:flex; gap:6px; }
.page-btn{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #E3E5F0;
    border-radius:8px;
    background:#fff;
    color:#6874C8;
    text-decoration:none;
}
.page-btn:hover{ border-color:var(--brass); background:#FFF8ED; }

/* ---- tombol aksi kecil (edit/hapus) di tabel ---- */
.icon-btn{
    border:none;
    background:#F2F3F8;
    color:#6B7299;
    width:30px;
    height:30px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin-right:4px;
    font-size:12px;
    transition:background .15s ease, color .15s ease;
}
.icon-btn i{ pointer-events:none; }
.icon-btn:hover{ background:#E7E9F3; }
.icon-btn.danger:hover{ background:#FDEBEB; color:#E5484D; }

/* ---- modal ringan (dipakai buat form tambah/edit) ---- */
.qis-modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(10,14,39,.5);
    z-index:2000;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.qis-modal-overlay.show{ display:flex; }
.qis-modal-box{
    background:#fff;
    border-radius:20px;
    max-width:440px;
    width:100%;
    padding:24px 22px;
    max-height:calc(100vh - 40px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.qis-modal-box form{
    overflow-y:auto;
    min-height:0;
}
.qis-modal-box h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:16px;
    font-weight:700;
    color:#1A2145;
    margin:0 0 18px;
}
.qis-modal-actions{
    display:flex;
    gap:10px;
    margin-top:20px;
}
.qis-modal-actions .btn{ flex:1; width:auto; }
.premix-field{ margin-bottom:14px; }
.premix-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
}
.premix-label-row label{ margin-bottom:0; }
.btn-premix-add,
.btn-premix-remove{
    border:1px solid #E2E4EF;
    background:#F8F9FC;
    color:#6874C8;
    border-radius:8px;
    cursor:pointer;
    font-size:11px;
    font-weight:600;
    padding:7px 10px;
}
.btn-premix-add:hover{ background:#FFF8ED; border-color:var(--brass); color:#8A5A0F; }
.premix-list{}
.premix-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}
.premix-row input{ flex:1; min-width:0; }
.btn-premix-remove{
    width:36px;
    height:40px;
    padding:0;
    flex:0 0 36px;
    color:#D85B64;
}
.btn-premix-remove:hover{ background:#FDEBEB; border-color:#F3C4C7; }
.premix-help{
    display:block;
    margin-top:4px;
    color:#9AA0BE;
    font-size:11px;
}

/* ---- tab switcher ---- */
.tab-group{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.tab-btn{
    padding:9px 18px;
    border-radius:10px;
    border:1px solid #ECEDF5;
    background:#fff;
    color:#6B7299;
    font-size:12.5px;
    font-weight:600;
    font-family:'Inter', sans-serif;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tab-btn.active{
    background:var(--brass);
    color:#241202;
    border-color:var(--brass);
}
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

/* ---- header baris: judul section + tombol tambah ---- */
.section-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.section-toolbar h2{ margin:0; }

.btn-sm{
    width:auto;
    height:38px;
    padding:0 16px;
    font-size:12.5px;
    flex:none;
}

/* ---- tombol icon kecil (edit / hapus di tabel) ---- */
.icon-btn{
    width:30px;
    height:30px;
    border-radius:8px;
    border:1px solid #ECEDF5;
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#6B7299;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
    margin-right:4px;
    font-size:12px;
}
.icon-btn:hover{ background:#F6F7FB; border-color:#D8DBEB; }
.icon-btn.danger:hover{ background:#FDEBEB; color:#E5484D; border-color:#F7C9CB; }

/* ---- badge status aktif/nonaktif ---- */
.badge-aktif{ background:#E6F8EF; color:#1CA765; }
.badge-nonaktif{ background:#F2F3F8; color:#9AA0BE; }

/* ---- modal form (dipakai tambah/edit master data) ---- */
.qis-modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(10,14,39,.45);
    z-index:1050;
    opacity:0;
    transition:opacity .2s ease;
}
.qis-modal-backdrop.show{ display:block; opacity:1; }
body.modal-open{ overflow:hidden; }

.qis-modal{
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%,-48%) scale(.96);
    width:92%;
    max-width:440px;
    max-height:calc(100vh - 40px);
    box-sizing:border-box;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    background:#fff;
    border-radius:20px;
    z-index:1060;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 30px 60px rgba(10,14,39,.3);
}
.qis-modal.modal-kedatangan{
    width:min(88vw, 1100px);
    max-width:1100px;
}
.qis-modal.qc-check-modal{
    width:min(92vw, 760px);
    max-width:760px;
}
.qis-modal > form{
    display:flex;
    flex-direction:column;
    min-height:0;
    flex:1 1 auto;
}
.qis-modal.show{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
}
.qis-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px 4px;
}
.qis-modal-header h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:16px;
    font-weight:700;
    color:#1A2145;
    margin:0;
}
.qis-modal-close{
    border:none;
    background:#F2F3F8;
    width:28px;
    height:28px;
    border-radius:50%;
    color:#6B7299;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
}
.qis-modal-body{
    padding:16px 20px 4px;
    overflow-x:hidden;
    overflow-y:auto;
    min-height:0;
    flex:1 1 auto;
}
.qis-modal.modal-kedatangan .qis-modal-body{
}
.qis-modal-footer{
    display:flex;
    gap:12px;
    padding:18px 20px 22px;
    align-items:stretch;
    flex:0 0 auto;
}
.qis-modal-footer .btn{
    flex:1 1 0;
    width:auto;
    min-height:42px;
    height:42px;
    line-height:1.2;
    padding:0 18px;
    font-size:13.5px;
    margin-top:0;
}
.qis-modal-footer .btn-primary{
    margin-top:0;
}
@media (max-width:480px){
    .table-toolbar{
        align-items:stretch;
        gap:12px;
    }
    .toolbar-left,
    .toolbar-right{
        width:100%;
    }
    .toolbar-right{
        margin-left:0;
        flex-wrap:wrap;
    }
    .toolbar-search{
        width:100%;
        min-width:0;
    }
    .btn-toolbar{
        flex:1 1 auto;
        min-width:140px;
    }
    .qis-modal-footer{
        gap:10px;
        padding:12px 16px 16px;
    }
    .qis-modal-footer .btn{
        min-height:40px;
        height:40px;
        font-size:13px;
    }
}

/* ==========================================================
   TOPBAR SEDERHANA (dipakai di halaman selain dashboard,
   misal pages/kedatangan.php, pages/check-incoming.php, dst)
   ========================================================== */
.topbar{
    position:sticky;
    top:0;
    z-index:500;
   height:62px;
   background:linear-gradient(135deg, #0d143b 0%, #131d4f 100%);
   border-bottom:1px solid rgba(255,255,255,.08);
   box-shadow:0 10px 22px rgba(9,11,29,.18);
}
.topbar-inner{
   width:100%;
   height:100%;
   margin:0 auto;
   display:grid;
   grid-template-columns:36px minmax(0, 1fr) 36px;
   align-items:center;
   gap:12px;
   padding:0 20px;
}
.topbar-toggle{
   border:none;
   background:rgba(255,255,255,.08);
   color:#fff;
   width:36px;
   height:36px;
   border-radius:10px;
   display:flex;
   align-items:center;
   justify-content:center;
   cursor:pointer;
   transition:background .2s ease;
}
.topbar-toggle:hover{ background:rgba(255,255,255,.16); }
.topbar .home-btn,
.topbar-action{
   color:#fff;
   font-size:17px;
   text-decoration:none;
   display:flex;
   align-items:center;
   justify-content:center;
   min-width:36px;
}
.topbar .title{
    min-width:0;
   text-align:center;
   font-family:'Space Grotesk', sans-serif;
   font-weight:700;
   font-size:15px;
   color:#fff;
   letter-spacing:.01em;
   text-shadow:none;
}
.topbar i{ color:#fff; font-size:16px; }

.qis-body{ background:#F6F7FB; }
.qis-app-shell{
   display:flex;
   min-height:100vh;
   min-height:100svh;
}
.qis-sidebar{
   position:sticky;
   top:0;
   width:240px;
   min-width:240px;
   height:100vh;
   background:linear-gradient(180deg, #111935 0%, #0b102d 100%);
   border-right:1px solid rgba(255,255,255,.06);
   color:#fff;
   transition:width .25s ease, min-width .25s ease, transform .25s ease;
   z-index:1000;
}
.qis-sidebar-header{
   display:flex;
   align-items:center;
   gap:10px;
   height:72px;
   padding:14px 16px;
   border-bottom:1px solid rgba(255,255,255,.06);
}
.qis-sidebar-brand{
   display:flex;
   align-items:center;
   gap:10px;
   flex:1;
   overflow:hidden;
   white-space:nowrap;
   min-width:0;
}
.qis-sidebar-badge{
   width:34px;
   height:34px;
   min-width:34px;
   border-radius:10px;
   display:flex;
   align-items:center;
   justify-content:center;
   overflow:hidden;
   background:rgba(255,255,255,.06);
   border:1px solid rgba(255,255,255,.12);
}
.qis-sidebar-logo{
   width:100%;
   height:100%;
   object-fit:contain;
   display:block;
   padding:4px;
}
.qis-sidebar-brand span{
   font-family:'Space Grotesk', sans-serif;
   font-size:15px;
   font-weight:700;
   color:#fff;
}
.qis-sidebar-nav{
   display:flex;
   flex-direction:column;
   gap:6px;
   padding:14px 10px 18px;
   height:calc(100vh - 72px);
   min-height:0;
}
.qis-nav-item{
   display:flex;
   align-items:center;
   gap:12px;
   padding:10px 12px;
   border-radius:12px;
   color:#dfe5ff;
   text-decoration:none;
   font-size:13px;
   font-weight:600;
   background:none;
   border:none;
   text-align:left;
   width:100%;
   cursor:pointer;
   transition:background .2s ease, color .2s ease, transform .2s ease;
}
.qis-nav-item:hover{
   background:rgba(255,255,255,.04);
   color:#fff;
   text-decoration:none;
}
.qis-nav-item.active{
   background:linear-gradient(135deg, rgba(240,166,58,.22), rgba(240,166,58,.12));
   color:#fff;
   border:1px solid rgba(240,166,58,.28);
}
.qis-nav-item.qis-nav-logout{
   margin-top:auto;
   border-top:1px solid rgba(255,255,255,.08);
   padding-top:12px;
}
.qis-nav-item.qis-nav-logout:hover{
   background:rgba(255,107,107,.08);
}
.qis-nav-icon{
   width:22px;
   text-align:center;
   color:inherit;
   font-size:13px;
   flex-shrink:0;
}
.qis-nav-label{ white-space:nowrap; }
.qis-main-panel{
   flex:1;
   width:0;
   min-width:0;
   background:#F6F7FB;
}
.qis-sidebar-backdrop{ display:none; }
body.sidebar-collapsed .qis-sidebar{
   width:82px;
   min-width:82px;
}
body.sidebar-collapsed .qis-sidebar-brand span,
body.sidebar-collapsed .qis-nav-label{
   display:none;
}
body.sidebar-collapsed .qis-sidebar-brand{
   justify-content:center;
}
body.sidebar-collapsed .qis-sidebar-header{
   justify-content:center;
   padding:14px 10px;
}
body.sidebar-collapsed .qis-sidebar-badge{
   width:28px;
   height:28px;
   min-width:28px;
}
body.sidebar-collapsed .qis-nav-item{
   justify-content:center;
   padding:10px 8px;
}
body.sidebar-collapsed .qis-nav-item.qis-nav-logout{
   padding:10px 8px;
}
body.sidebar-collapsed .qis-nav-icon{
   width:auto;
}

.page-heading{ display:none; }

@media (max-width:900px){
   .qis-app-shell{ display:block; }
   .qis-sidebar{
       position:fixed;
       left:0;
       top:0;
       height:100vh;
       transform:translateX(-105%);
       width:260px;
       min-width:260px;
       box-shadow:0 16px 48px rgba(0,0,0,.25);
   }
   body.sidebar-open .qis-sidebar{
       transform:translateX(0);
   }
   .qis-sidebar-backdrop{
       display:block;
       position:fixed;
       inset:0;
       background:rgba(9,12,27,.45);
       opacity:0;
       pointer-events:none;
       transition:opacity .2s ease;
       z-index:999;
   }
   body.sidebar-open .qis-sidebar-backdrop{
       opacity:1;
       pointer-events:auto;
   }
   .qis-main-panel{ width:100%; }
}

/* ==========================================================
   DASHBOARD (pages/index.php)
   Satu markup responsive untuk mobile & desktop.
   ========================================================== */

.qis-dashboard{
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:0 0 100px;
    min-height:100vh;
    min-height:100svh;
}

/* ---- hero: foto siang/malam + sapaan (tetap gelap, ini yang sudah oke) ---- */
.qis-hero{
    position:relative;
    overflow:hidden;
    padding:calc(env(safe-area-inset-top) + 20px) 20px 64px;
    background-size:cover;
    background-position:center;
    border-radius:0 0 28px 28px;
}
/* overlay sengaja tidak dipakai lagi - foto siang/malam ditampilkan apa adanya,
   keterbacaan teks dibantu text-shadow di masing-masing elemen di bawah */
.qis-hero-topbar{
    position:relative;
    display:grid;
    grid-template-columns:40px 1fr 40px;
    align-items:center;
    gap:12px;
    min-height:42px;
}
.qis-hero-toggle{
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,.1);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 3px 12px rgba(0,0,0,.14);
    transition:background .2s ease;
}
.qis-hero-toggle:hover{ background:rgba(255,255,255,.18); }
.qis-hero-logo{
    justify-self:center;
    height:32px;
    width:auto;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.qis-hero-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    border:2px solid rgba(255,255,255,.9);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--brass-dim);
    font-size:16px;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
    justify-self:end;
}
.qis-hero-greeting{
    position:relative;
    margin-top:22px;
    text-align:center;
}
.qis-hero-greeting .sapaan{
    font-size:14px;
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.qis-hero-greeting .nama{
    font-family:'Space Grotesk', sans-serif;
    font-size:21px;
    font-weight:700;
    color:#fff;
    line-height:1.3;
    margin-top:2px;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.qis-hero-greeting .level-badge{
    display:inline-block;
    margin-top:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
    background:rgba(10,14,39,.55);
    border:1px solid rgba(255,255,255,.3);
    padding:3px 10px;
    border-radius:20px;
    backdrop-filter:blur(2px);
}
@media (max-width:900px){
    .qis-hero-toggle{ display:none; }
    .qis-hero-topbar{ grid-template-columns:1fr 40px; }
    .qis-hero-logo{ justify-self:flex-start; }
}

/* ---- info card: TERANG kaya ENG (putih, teks gelap) ---- */
.qis-info-card{
    position:relative;
    z-index:10;
    display:flex;
    align-items:center;
    gap:14px;
    background:#FFFFFF;
    border:1px solid #ECEDF5;
    border-radius:18px;
    padding:14px 18px;
    margin:-16px 16px 0;
    box-shadow:0 14px 30px rgba(20,25,60,.10);
}
.qis-info-card img{
    width:64px;
    height:64px;
    object-fit:contain;
    flex-shrink:0;
}
.qis-info-card .label{
    font-size:10.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#9AA0BE;
}
.qis-info-card .tanggal{
    font-size:14px;
    font-weight:600;
    color:#1A2145;
    margin-top:2px;
}

/* ---- section title: gelap juga, biar kebaca di atas bg terang ---- */
.qis-section-title{
    font-family:'Space Grotesk', sans-serif;
    font-size:14px;
    font-weight:600;
    color:#1A2145;
    margin:30px 16px 12px;
}

/* ---- rak menu: 4 kotak utama, warna beda-beda kaya ENG ---- */
.qis-menu-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px 8px;
    padding:0 16px;
}
.qis-menu-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-decoration:none;
    cursor:pointer;
}
.qis-menu-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    box-shadow:0 3px 8px rgba(20,25,60,.06);
    transition:transform .15s ease, filter .15s ease;
}
.qis-menu-item:hover .qis-menu-icon{
    transform:translateY(-2px);
    filter:brightness(0.97);
}
.qis-menu-text{
    font-size:11.5px;
    font-weight:600;
    color:#4A5178;
    text-align:center;
    line-height:1.25;
}

/* palet warna ikon menu, beda-beda tiap modul */
.qis-ic-blue{   background:#E7F1FD; color:#2F7DE1; }
.qis-ic-green{  background:#E6F8EF; color:#1CA765; }
.qis-ic-purple{ background:#F1EAFB; color:#8B5CF6; }
.qis-ic-orange{ background:#FFF2E1; color:#F0A020; }
.qis-ic-teal{   background:#E4F7F6; color:#149E96; }
.qis-ic-slate{  background:#ECEDF5; color:#4A5178; }

@media(min-width:640px){
    .qis-menu-grid{ max-width:640px; margin:0 auto; gap:18px 12px; }
}
@media(min-width:900px){
    .qis-menu-grid{ max-width:760px; }
    .qis-menu-icon{ width:64px; height:64px; font-size:22px; border-radius:20px; }
    .qis-menu-text{ font-size:12.5px; }
}

/* ---- bottom sheet: Menu Lainnya ---- */
.qis-sheet-backdrop{
    position:fixed;
    inset:0;
    background:rgba(10,14,39,.45);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:1050;
}
.qis-sheet-backdrop.show{ opacity:1; pointer-events:auto; }

.qis-bottom-sheet{
    position:fixed;
    left:0; right:0; bottom:0;
    background:#fff;
    border-radius:22px 22px 0 0;
    box-shadow:0 -8px 24px rgba(0,0,0,.15);
    transform:translateY(100%);
    transition:transform .3s ease;
    z-index:1060;
    max-height:78vh;
    overflow-y:auto;
    padding-bottom:24px;
}
.qis-bottom-sheet.show{ transform:translateY(0); }

.qis-sheet-drag-handle{
    width:42px;
    height:5px;
    background:#E2E4EF;
    border-radius:3px;
    margin:10px auto 0;
}
.qis-sheet-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 18px 6px;
}
.qis-sheet-header h6{
    margin:0;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    color:#1A2145;
    font-size:15px;
}
.qis-sheet-close-btn{
    border:none;
    background:#F2F3F8;
    width:28px;
    height:28px;
    border-radius:50%;
    color:#6B7299;
    display:flex;
    align-items:center;
    justify-content:center;
}
.qis-sheet-menu-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px 8px;
    padding:16px 18px 4px;
}

/* ---- statistik / diagram: 4 kotak kosongan, disiapkan buat chart masa depan ---- */
.qis-chart-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    margin:26px 16px 0;
}
.qis-chart-placeholder{
    border:1.5px dashed #D8DBEB;
    border-radius:16px;
    aspect-ratio:1.3/1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:#9AA0BE;
    background:#FFFFFF;
}
.qis-chart-placeholder i{ font-size:19px; color:#D8DBEB; }
.qis-chart-placeholder span{ font-size:10.5px; text-align:center; padding:0 8px; }

@media(min-width:640px){
    .qis-chart-grid{ max-width:800px; margin-left:auto; margin-right:auto; margin-top:26px; }
}
@media(min-width:900px){
    .qis-chart-grid{ max-width:960px; grid-template-columns:repeat(4, 1fr); }
}

/* ---- bottom nav: TETAP GELAP (satu-satunya bagian dashboard yang dark) ---- */
.qis-bottom-nav{
    display:none;
}
@media(max-width:768px){
    .qis-bottom-nav{
        display:flex;
        justify-content:space-around;
        align-items:center;
        position:fixed;
        left:0; right:0; bottom:0;
        height:calc(60px + env(safe-area-inset-bottom));
        padding-bottom:env(safe-area-inset-bottom);
        background:var(--bg-panel);
        border-top:1px solid var(--border-soft);
        z-index:400;
    }
    .qis-bottom-nav a{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:3px;
        text-decoration:none;
        color:var(--text-muted);
        font-size:10px;
        padding-top:9px;
    }
    .qis-bottom-nav a i{ font-size:17px; }
    .qis-bottom-nav a.active{ color:var(--brass); }
    .qis-dashboard{ padding-bottom:90px; }
}

/* ==========================================================
   Foto Profil Di Index
   ========================================================== */

.qis-hero-avatar {
    overflow: hidden;
}

.qis-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* ==========================================================
   MODAL DETAIL: baris data + grid foto (dipakai tombol "Detail")
   ========================================================== */
.qis-modal.modal-lg{ max-width:640px; }

.detail-section-title{
    font-family:'Space Grotesk', sans-serif;
    font-size:12.5px;
    font-weight:700;
    color:#1A2145;
    margin:18px 0 8px;
}
.detail-section-title:first-child{ margin-top:0; }

.detail-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:8px 0;
    border-bottom:1px solid #F2F3F8;
    font-size:12.5px;
}
.detail-row .label{ color:#9AA0BE; flex-shrink:0; }
.detail-row .value{ color:#1A2145; font-weight:600; text-align:right; }

.detail-photo-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    margin-top:4px;
}
.detail-photo-item{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #ECEDF5;
    aspect-ratio:4/3;
    background:#F6F7FB;
    cursor:pointer;
}
.detail-photo-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-photo-item .cap{
    position:absolute;
    left:0; right:0; bottom:0;
    background:rgba(10,14,39,.6);
    color:#fff;
    font-size:10px;
    padding:4px 8px;
    text-align:center;
}
.detail-empty{
    text-align:center;
    color:#9AA0BE;
    font-size:12px;
    padding:18px 0;
}

/* lightbox sederhana buat zoom foto di detail modal */
.qis-lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(6,8,22,.85);
    z-index:3000;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.qis-lightbox.show{ display:flex; }
.qis-lightbox img{ max-width:100%; max-height:100%; border-radius:12px; }

/* ==========================================================
   DESKTOP REFINEMENTS
   Rapiin topbar, form, tabel & dashboard di layar lebar.
   ========================================================== */
@media(min-width:900px){

    /* form field jadi 3 kolom, nggak numpuk 2 kolom doang di layar lebar */
    .form-grid{ grid-template-columns:repeat(3, 1fr); }

    /* 4 foto upload sejajar 1 baris */
    .upload-grid{ grid-template-columns:repeat(4, 1fr); }

    /* heading & spacing sedikit lebih lega */
    .page-heading h1{ font-size:22px; }
    .content-page{ padding-top:32px; }

    /* hero dashboard dikasih margin atas dikit biar nggak nempel banget ke topbar browser */
    .qis-hero{ padding-top:36px; }

    /* tabel dikasih padding lebih nyaman, font sedikit lebih besar */
    .qis-table{ font-size:13px; }
    .qis-table th, .qis-table td{ padding:12px 14px; }

    .table-card, .form-card{ padding:26px 26px; }
}

/* ==========================================================
   SELECT2 - restyle biar konsisten sama .qis-field input/select
   ========================================================== */
.select2-container{ width:100% !important; }

.select2-container--default .select2-selection--single{
    height:46px;
    border-radius:11px;
    border:1px solid #E2E4EF;
    background:#FBFBFE;
    display:flex;
    align-items:center;
    padding:0 13px;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    padding:0;
    color:#1A2145;
    font-size:13.5px;
    font-family:'Inter', sans-serif;
    line-height:normal;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color:#8B93B8;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:44px;
    right:11px;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single{
    border-color:var(--brass);
    box-shadow:0 0 0 3px var(--brass-soft);
    background:#fff;
}

.select2-dropdown{
    border-radius:12px;
    border:1px solid #E2E4EF;
    overflow:hidden;
    font-family:'Inter', sans-serif;
    font-size:13.5px;
    box-shadow:0 14px 30px rgba(20,25,60,.14);
    z-index:3000;
}
.select2-search--dropdown{ padding:10px; }
.select2-search--dropdown .select2-search__field{
    border-radius:8px;
    border:1px solid #E2E4EF;
    padding:8px 10px;
    outline:none;
    font-family:'Inter', sans-serif;
    font-size:13px;
}
.select2-search--dropdown .select2-search__field:focus{
    border-color:var(--brass);
}
.select2-results__option{ padding:9px 13px; color:#1A2145; }
.select2-results__option--highlighted[aria-selected]{
    background-color:var(--brass) !important;
    color:#241202 !important;
}
.select2-results__option[aria-selected=true]{
    background-color:#FCEFD9;
    color:#8A5A0F;
}
.select2-results__message{ color:#9AA0BE; padding:10px 13px; }

/* select2 dropdown butuh z-index di atas modal (1060) supaya nggak ketutup */
.select2-container--open{ z-index:3001; }
/* ==========================================================
   STANDAR PARAMETER: label + tombol info, tooltip, field hidden,
   out-of-range highlight, dan tabel matrix di modal "Atur Standar"
   ========================================================== */
.qis-field.field-hidden{ display:none !important; }

.qis-field-label-row{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
}
.qis-field-label-row label{ margin-bottom:0; }

.info-standar-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:50%;
    border:1px solid var(--brass);
    color:var(--brass-dim);
    background:#fff;
    font-size:10px;
    font-weight:700;
    font-family:'Space Grotesk', sans-serif;
    cursor:pointer;
    flex-shrink:0;
    line-height:1;
    padding:0;
}
.info-standar-btn:hover{ background:var(--brass); color:#241202; }
.info-standar-btn.no-standar{ opacity:.35; cursor:default; }

.standar-popover{
    position:absolute;
    z-index:3005;
    max-width:260px;
    background:#1A2145;
    color:#F3F4FA;
    font-size:12px;
    line-height:1.5;
    padding:10px 12px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(20,25,60,.25);
    display:none;
}
.standar-popover.show{ display:block; }
.standar-popover .judul{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:11.5px;
    color:var(--brass);
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.qis-field input.out-of-range,
.qis-field select.out-of-range{
    border-color:var(--danger);
    background:#FFF3F4;
}

/* ---- tabel matrix standar (modal Master Data) ---- */
.matrix-standar-table{
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
}
.matrix-standar-table th{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#9AA0BE;
    padding:8px 6px;
    border-bottom:1px solid #E2E4EF;
}
.matrix-standar-table td{
    padding:8px 6px;
    border-bottom:1px solid #F2F3F8;
    vertical-align:middle;
}
.matrix-standar-table input[type="text"],
.matrix-standar-table input[type="number"],
.matrix-standar-table select{
    width:100%;
    padding:6px 8px;
    border-radius:8px;
    border:1px solid #E2E4EF;
    background:#FBFBFE;
    font-size:12.5px;
    font-family:'Inter', sans-serif;
}
.matrix-standar-table tr.param-nonaktif td:not(.col-aktif){ opacity:.35; }
.matrix-standar-table .col-aktif{ width:36px; text-align:center; }
.matrix-standar-table .col-minmax{ width:150px; }
.matrix-standar-table .minmax-wrap{ display:flex; gap:6px; }