/* =====================================================================
   Tema UII untuk eLab (V3) — dimuat SESUDAH theme-default.css dan
   tema-uii-warna.css (lapisan warna primer yang dibangkitkan otomatis).

   Palet diambil dari uii.ac.id:
     navy gelap  #14245E   sidebar, panel login, judul
     biru        #253E93   tombol & tautan (lewat tema-uii-warna.css)
     kuning      #FFD000   penanda aktif & tombol masuk (teks navy di atasnya)
     putih hangat #F5F4F1  latar halaman
   Huruf: Inter.
   ===================================================================== */

:root {
    --uii-navy: #14245e;
    --uii-navy-2: #1d3175;
    --uii-navy-soft: #23367a;
    --uii-biru: #253e93;
    --uii-kuning: #ffd000;
    --uii-kuning-tegas: #f5c400;
    --uii-kuning-muda: #fff6cc;
    --uii-latar: #f5f4f1;
    --uii-garis: #e4e1d8;
    --uii-teks-redup: #565b6b;
    --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Ikon ----------
   vendor/fonts/boxicons.css menunjuk ../fonts/boxicons.* padahal berkasnya ada
   di vendor/fonts/boxicons/ — semua URL itu 404 sejak commit awal, jadi ikon
   tidak pernah tampil. Dideklarasikan ulang di sini dengan jalur yang benar
   (relatif terhadap berkas ini), tanpa menyunting berkas vendor. */
@font-face {
    font-family: "boxicons";
    font-weight: normal;
    font-style: normal;
    font-display: block;
    src: url("../vendor/fonts/boxicons/boxicons.woff2") format("woff2"),
         url("../vendor/fonts/boxicons/boxicons.woff") format("woff"),
         url("../vendor/fonts/boxicons/boxicons.ttf") format("truetype");
}

/* ---------- Dasar ----------
   demo.css memuat tema lama "Cupertino" dengan selektor #layout-menu... dan
   !important; aturan di bawah memakai spesifisitas yang sama supaya menang. */
body {
    font-family: var(--bs-body-font-family);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--uii-latar) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.offcanvas-title, .app-brand-text, .uii-brand, .uii-form-judul {
    font-family: var(--bs-body-font-family);
    letter-spacing: -0.025em;
    color: var(--uii-navy);
}
.card {
    border: 1px solid var(--uii-garis);
    box-shadow: 0 1px 2px rgba(20, 36, 94, 0.05);
}
.table > :not(caption) > * > th { color: var(--uii-teks-redup); }

/* ---------- Sidebar ---------- */
#layout-menu.bg-menu-theme {
    background-color: var(--uii-navy) !important;
    color: #d3d9ee;
    border-right: 0 !important;
}
#layout-menu .app-brand.demo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    height: auto;
    min-height: 76px;
    margin-top: 0;
    padding: 16px 20px !important;
}
/* Kepala sidebar opsi C: tanda eLab navy di ubin kuning + nama dua baris.
   dss.png asli (titik oranye + garis gelap) dibuat untuk latar putih; di atas
   navy garisnya hilang dan logonya tampak berserakan. */
#layout-menu .elab-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.elab-logo, .uii-logo {
    width: 44px; height: 44px; border-radius: 11px;
    background-color: var(--uii-kuning);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.elab-logo img, .uii-logo img { width: 34px; height: auto; display: block; }
#layout-menu .elab-brand-teks { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#layout-menu .elab-brand-teks .app-brand-text.demo {
    font-size: 1.48rem !important;
    font-weight: 800;
    margin: 0 !important;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
#layout-menu .elab-brand-sub { font-size: 0.725rem; font-weight: 500; color: #a5b2dc; white-space: nowrap; margin-top: 3px; letter-spacing: 0.015em; }
/* Menu diciutkan (layar sedang): sisakan ubinnya saja. */
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .elab-brand-teks { display: none; }
#layout-menu .app-brand-text.demo,
#layout-menu .app-brand-link { color: #ffffff !important; }
#layout-menu.bg-menu-theme .menu-inner-shadow {
    background: linear-gradient(var(--uii-navy) 41%, rgba(20, 36, 94, 0.11) 95%, rgba(20, 36, 94, 0)) !important;
}
#layout-menu.bg-menu-theme .menu-header {
    border-top: none !important;
    margin: 1.2rem 0.75rem 0.4rem !important;
    padding: 0 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
    position: relative !important;
}
#layout-menu.bg-menu-theme .menu-header:first-of-type {
    margin-top: 0.35rem !important;
}
#layout-menu.bg-menu-theme .menu-header:not(:first-of-type)::before {
    content: '' !important;
    display: block !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    margin-bottom: 0.85rem !important;
    border-radius: 1px !important;
    width: 100% !important;
    position: static !important;
}
#layout-menu.bg-menu-theme .menu-header-text {
    color: #9ab0e5 !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    display: block !important;
    padding-left: 0.25rem !important;
}
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu.bg-menu-theme .menu-header {
    width: auto !important;
    margin: 0.75rem 0.5rem !important;
    padding: 0 !important;
}
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu.bg-menu-theme .menu-header .menu-header-text {
    display: none !important;
}
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu.bg-menu-theme .menu-header:not(:first-of-type)::before {
    margin-bottom: 0 !important;
}
#layout-menu.bg-menu-theme .menu-link { color: #d3d9ee !important; }
#layout-menu.bg-menu-theme .menu-link .menu-icon { color: #8e9bc8 !important; }
#layout-menu.bg-menu-theme .menu-item:not(.active) > .menu-link:hover,
#layout-menu.bg-menu-theme .menu-item:not(.active) > .menu-link:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}
#layout-menu.bg-menu-theme .menu-item:not(.active) > .menu-link:hover .menu-icon,
#layout-menu.bg-menu-theme .menu-item:not(.active) > .menu-link:focus .menu-icon { color: var(--uii-kuning-tegas) !important; }
#layout-menu.bg-menu-theme .menu-item.active > .menu-link {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    position: relative !important;
}
#layout-menu.bg-menu-theme .menu-item.active > .menu-link::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 4px !important;
    border-radius: 0 4px 4px 0 !important;
    background: var(--uii-kuning-tegas) !important;
    box-shadow: 0 0 10px rgba(245, 196, 0, 0.45) !important;
    display: block !important;
}
#layout-menu.bg-menu-theme .menu-item.active > .menu-link .menu-icon { color: var(--uii-kuning-tegas) !important; }
#layout-menu .menu-item form button.menu-link:hover { background-color: rgba(255, 92, 92, 0.15) !important; color: #ffb4b4 !important; }
#layout-menu .menu-item form button.menu-link:hover i { color: #ffb4b4 !important; }
#layout-menu .ps__thumb-y { background-color: rgba(255, 255, 255, 0.25) !important; }
.app-brand .layout-menu-toggle { background-color: var(--uii-kuning) !important; color: var(--uii-navy) !important; border-color: var(--uii-latar) !important; }

/* ---------- Navbar (opsi A pratinjau header) ----------
   Bilah putih rata selebar halaman, setinggi blok logo sidebar (76px) supaya
   garis bawahnya menyambung lurus. Bukan lagi kartu mengambang. */
.layout-navbar.elab-navbar {
    height: 76px;
    margin: 0 !important;
    padding: 0 2rem !important;
    max-width: none;
    width: 100%;
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--uii-garis);
    border-radius: 0;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.elab-crumb { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; min-width: 0; }
.elab-crumb-home { color: #64748b; font-size: 1.15rem; margin-right: 1px; }
.elab-crumb-root { color: #64748b; font-weight: 500; text-decoration: none; transition: color 0.15s ease; }
.elab-crumb-root:hover { color: var(--uii-navy); }
.elab-crumb-induk { color: #64748b; font-weight: 500; }
.elab-crumb-pisah { color: #cbd5e1; font-size: 0.85rem; }
.elab-crumb-kini {
    color: var(--uii-navy);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.elab-crumb-chip {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
}
.elab-sesi { align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--uii-teks-redup); white-space: nowrap; }
.elab-sesi i { color: var(--uii-biru); font-size: 1.05rem; }
.elab-sesi strong { color: var(--uii-navy); font-weight: 700; }
.elab-pemisah { width: 1px; height: 32px; background-color: var(--uii-garis); }
.elab-akun {
    display: flex !important; align-items: center; gap: 0.75rem;
    min-height: 48px; padding: 0 0.5rem 0 0.25rem !important; border-radius: 10px;
}
.elab-akun:hover { background-color: var(--uii-latar); }
.elab-akun-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background-color: var(--uii-navy); color: var(--uii-kuning);
    font-weight: 800; font-size: 0.875rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.elab-akun-teks { line-height: 1.25; text-align: left; }
.elab-akun-nama { font-size: 0.9rem; font-weight: 700; color: var(--uii-navy); }
.elab-akun-peran { font-size: 0.75rem; color: var(--uii-teks-redup); }
.elab-akun-panah { color: var(--uii-teks-redup); }
/* Isi halaman tidak lagi didorong turun oleh margin navbar mengambang. */
.layout-navbar.elab-navbar + .content-wrapper > .container-p-y { padding-top: 2rem !important; }
.elab-peran-btn { border-radius: 8px; }
.avatar-initial.bg-primary { background-color: var(--uii-navy) !important; color: var(--uii-kuning) !important; }

/* ---------- Dashboard ---------- */
.elab-hero {
    background-color: var(--uii-navy);
    border-radius: 12px;
    border-top: 4px solid var(--uii-kuning) !important;
}
.elab-hero h3 { color: #ffffff; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; }
.elab-hero-teks { color: #d3d9ee; }
.elab-hero-lingkup {
    display: inline-flex; align-items: center;
    padding: 0.25rem 0.6rem; border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 0.8rem;
}
.elab-stat-ikon { background-color: #e6eaf6; color: var(--uii-biru); }
.elab-stat-sorot { border-top: 3px solid var(--uii-kuning) !important; }
.elab-stat .card-title { font-feature-settings: "tnum"; letter-spacing: -0.025em; }
.elab-pintas { transition: border-color 0.15s ease, transform 0.15s ease; }
.elab-pintas:hover { border-color: var(--uii-biru) !important; transform: translateY(-1px); }
.min-w-0 { min-width: 0; }

/* ---------- Halaman login (Varian 2: Refined Editorial Split) ---------- */
body.uii-auth { background-color: var(--uii-latar); }
.uii-auth-wrap { min-height: 100vh; display: flex; flex-wrap: wrap; }
.uii-auth-panel {
    flex: 1 1 540px;
    background: linear-gradient(145deg, #09122c 0%, #14245e 55%, #1d337a 100%);
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                      linear-gradient(145deg, #09122c 0%, #14245e 55%, #1d337a 100%);
    background-size: 20px 20px, 100% 100%;
    color: #ffffff;
    padding: 3.5rem 4rem;
    display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
    position: relative;
    overflow: hidden;
}
.uii-auth-panel::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(245, 196, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
}
.uii-brand { font-size: 1.48rem; font-weight: 800; color: #ffffff; letter-spacing: -0.035em; line-height: 1.05; }
.uii-panel-muted { color: #a5b2dc; }
.uii-eyebrow {
    display: inline-block; margin-bottom: 0.75rem;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--uii-kuning-tegas);
}
.uii-auth-intro { max-width: 540px; }
.uii-auth-judul {
    font-size: 2.35rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.035em;
    color: #ffffff; margin-bottom: 1rem;
}
.uii-auth-desc { font-size: 0.95rem; color: #c4cce6; line-height: 1.6; }
.uii-auth-header { flex-shrink: 0; }
.uii-auth-hero-body {
    margin: auto 0;
    padding: 2.5rem 0;
    max-width: 540px;
}
.uii-auth-footer { flex-shrink: 0; }
.uii-lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
}
.uii-lab {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--uii-kuning-tegas);
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    transition: all 0.2s ease;
}
.uii-lab:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}
.uii-lab-tag {
    font-size: 0.72rem;
    color: var(--uii-kuning-tegas);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.uii-lab-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
}
.uii-auth-form-wrap {
    flex: 1 1 420px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    padding: 3rem 1.5rem;
    background: #f8fafc;
}
.uii-auth-card {
    width: 100%; max-width: 430px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.uii-auth-card .card-body { padding: 2.25rem; }
.uii-form-judul { font-size: 1.65rem; font-weight: 800; margin-bottom: 0.4rem; letter-spacing: -0.025em; color: var(--uii-navy); }
/* Input Box Modern dengan Ikon Eksklusif */
.v-input-group { margin-bottom: 1.15rem; }
.v-input-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #1e293b; margin-bottom: 0.4rem; }
.v-input-box { position: relative; display: flex; align-items: center; }
.v-input-box .v-icon-left { position: absolute; left: 0.9rem; color: #94a3b8; font-size: 1.15rem; pointer-events: none; z-index: 5; }
.v-input-box .form-control {
    width: 100%; padding: 0.68rem 2.5rem 0.68rem 2.6rem; font-size: 0.875rem;
    border: 1.5px solid #cbd5e1; border-radius: 10px; outline: none; transition: all 0.15s ease;
    background: #ffffff; color: #0f172a; font-family: inherit;
}
.v-input-box .form-control:focus {
    border-color: var(--uii-biru); box-shadow: 0 0 0 3px rgba(37, 62, 147, 0.12);
}
.v-input-box .btn-eye-toggle {
    position: absolute; right: 0.65rem; background: transparent; border: none;
    color: #64748b; cursor: pointer; padding: 0.35rem; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center; z-index: 5;
}

/* Tombol Masuk Emas UII (Pasti Berwarna Kuning Emas dengan Kontras Navy Tinggi) */
.uii-btn-masuk,
button.uii-btn-masuk,
.btn.uii-btn-masuk {
    width: 100% !important;
    min-height: 46px !important;
    background: #f5c400 !important;
    background-color: #f5c400 !important;
    border: none !important;
    border-color: #f5c400 !important;
    color: #14245e !important;
    border-radius: 10px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(245, 196, 0, 0.35) !important;
    font-family: inherit !important;
}
.uii-btn-masuk:hover,
.uii-btn-masuk:focus,
button.uii-btn-masuk:hover,
.btn.uii-btn-masuk:hover {
    background: #e6b800 !important;
    background-color: #e6b800 !important;
    border-color: #e6b800 !important;
    color: #14245e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(245, 196, 0, 0.45) !important;
}
.uii-auth-kaki { text-align: center; }

@media (max-width: 767.98px) {
    .uii-auth-panel { padding: 2rem 1.25rem; gap: 1.5rem; }
    .uii-auth-hero-body { margin: 1rem 0; padding: 0; }
    .uii-auth-judul { font-size: 1.65rem; margin-bottom: 0.5rem; }
    .uii-lab-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .uii-lab { padding: 0.6rem 0.75rem; }
    .uii-lab-name { font-size: 0.8rem; }
    .uii-lab-tag { font-size: 0.65rem; }
    .uii-auth-card .card-body { padding: 1.5rem; }
    .uii-auth-form-wrap { padding: 1.75rem 1rem; }
}

@media (max-width: 575.98px) {
    .elab-peran-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    .elab-peran-btn .fw-semibold { max-width: 85px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* Saringan modul master (saring.js): dropdown aktif disorot + chip filter aktif */
select.saring-pilih.saring-aktif { border-color: var(--uii-biru, #253e93); color: var(--uii-biru, #253e93); font-weight: 600; }
.saring-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.875rem; }
.saring-judul { font-size: 0.8125rem; color: #565b6b; }
.saring-item {
    display: inline-flex; align-items: center; gap: 0.25rem; height: 1.875rem; padding: 0 0.25rem 0 0.75rem;
    border-radius: 999px; background: #e6eaf6; color: #14245e; font-size: 0.8125rem; font-weight: 600;
}
.saring-item button {
    width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: transparent; color: #253e93;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.saring-item button:hover { background: rgba(37, 62, 147, 0.12); }
.saring-reset { font-size: 0.8125rem; font-weight: 600; margin-left: 0.25rem; }

/* ===================================================================
   Alert & toast (revisi 2026-10-06, PLAN_REVISI_ALERT.md)
   Alert = model A "lembut": latar pastel, garis tipis sewarna, teks gelap
   (kontras >= 4.5:1). Toast = model B: pil navy, ikon dalam titik berwarna.
   Menimpa warna bawaan Sneat (tema-uii-warna.css dibangkitkan — jangan
   disunting); selektor toast diberi awalan `body` karena CSS modul dimuat
   sesudah berkas ini.
   =================================================================== */
:root {
    --uii-ok: #1c6338;    --uii-ok-bg: #e5f2ea;    --uii-ok-garis: #c4e2cf;
    --uii-info: #253e93;  --uii-info-bg: #e6eaf6;  --uii-info-garis: #cbd3ee;
    --uii-warn: #664b00;  --uii-warn-bg: #fff6cc;  --uii-warn-garis: #f0dc80;
    --uii-err: #8f2e12;   --uii-err-bg: #fbe6df;   --uii-err-garis: #f0c5b7;
    --uii-netral: #3d4458; --uii-netral-bg: #f0eee8; --uii-netral-garis: #e0ddd3;
}
.alert { border: 1px solid transparent; border-radius: 10px; line-height: 1.45; }
.alert-success   { background-color: var(--uii-ok-bg);     border-color: var(--uii-ok-garis);     color: var(--uii-ok); }
.alert-primary,
.alert-info      { background-color: var(--uii-info-bg);   border-color: var(--uii-info-garis);   color: var(--uii-info); }
.alert-warning   { background-color: var(--uii-warn-bg);   border-color: var(--uii-warn-garis);   color: var(--uii-warn); }
.alert-danger    { background-color: var(--uii-err-bg);    border-color: var(--uii-err-garis);    color: var(--uii-err); }
.alert-secondary,
.alert-light     { background-color: var(--uii-netral-bg); border-color: var(--uii-netral-garis); color: var(--uii-netral); }
.alert .alert-link, .alert a:not(.btn) { color: inherit; font-weight: 700; text-decoration: underline; }
.alert hr { background-color: currentColor !important; opacity: .25; }
.alert .btn-close { opacity: .55; }
/* Atribut hidden harus menang atas utilitas .d-flex (display:flex !important) —
   tanpa ini kotak info yang disembunyikan JS tetap tampil. */
.alert[hidden] { display: none !important; }
/* Ikon yang disisipkan layout pada flash message (views/index.phtml). */
.alert.elab-alert-ikon { display: flex; align-items: flex-start; gap: .65rem; }
.alert.elab-alert-ikon > .elab-alert-i { font-size: 1.3rem; line-height: 1.1; flex-shrink: 0; }

body .mb-toast, body .md-toast, body .mkf-toast, body .ml-toast, body .mk-toast,
body .mrp-toast, body .ms-toast, body .msa-toast, body .mn-toast {
    background: var(--uii-navy); color: #fff; border-radius: 14px;
    box-shadow: 0 14px 32px rgba(20, 36, 94, .28); font-weight: 600;
}
body .mb-toast i, body .md-toast i, body .mkf-toast i, body .ml-toast i, body .mk-toast i,
body .mrp-toast i, body .ms-toast i, body .msa-toast i, body .mn-toast i {
    flex-shrink: 0; width: 1.65rem; height: 1.65rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: var(--uii-navy); background: #8fd6aa;
}
body .mb-toast-err i, body .md-toast-err i, body .mkf-toast-err i, body .ml-toast-err i, body .mk-toast-err i,
body .mrp-toast-err i, body .ms-toast-err i, body .msa-toast-err i, body .mn-toast-err i { background: #ffb59e; }

/* ===================================================================
   Badge (revisi 2026-10-06, model A "lembut") — palet sama dengan alert:
   latar pastel, teks gelap sewarna (kontras >= 4.5:1), huruf biasa.
   Sneat menulis .bg-label-* dengan !important, jadi penimpanya juga.
   =================================================================== */
.badge {
    text-transform: none; line-height: 1.3; font-size: .75rem; font-weight: 600;
    padding: .25rem .55rem; border-radius: 6px; letter-spacing: 0;
}
.bg-label-success   { background-color: var(--uii-ok-bg) !important;     color: var(--uii-ok) !important; }
.bg-label-primary   { background-color: var(--uii-info-bg) !important;   color: var(--uii-info) !important; }
.bg-label-info      { background-color: #e0f2f4 !important;              color: #0d6470 !important; }
.bg-label-warning   { background-color: var(--uii-warn-bg) !important;   color: var(--uii-warn) !important; }
.bg-label-danger    { background-color: var(--uii-err-bg) !important;    color: var(--uii-err) !important; }
.bg-label-secondary { background-color: var(--uii-netral-bg) !important; color: var(--uii-netral) !important; }
.bg-label-dark      { background-color: #e3e5ec !important;              color: var(--uii-navy) !important; }

/* ===================================================================
   Select dengan pencarian (Tom Select, model B — PLAN_SELECT_PENCARIAN.md).
   Dipasang pada <select data-pilih> oleh assets/js/pilih.js.
   =================================================================== */
/* Pada <select class="form-select">, garis & panah digambar wrapper (border 1px); .ts-control di dalamnya tanpa garis.
   Jadi tinggi kontrol = tinggi target - 2px. */
.ts-wrapper .ts-control { border-color: #d9dee3; border-radius: .5rem; min-height: 37px; padding-left: .875rem; font-size: .9375rem; color: #697a8d; }   /* = select bawaan (39px) */
.ts-wrapper.focus .ts-control { border-color: var(--uii-biru); box-shadow: 0 0 0 3px rgba(37, 62, 147, .15); }
.ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-control-sm .ts-control { min-height: 31px; font-size: .8125rem; border-radius: .5rem; }   /* --bs-border-radius-sm tidak ada di Sneat */
.ts-dropdown { border-color: #e4e1d8; border-radius: 10px; box-shadow: 0 14px 32px rgba(20, 36, 94, .16); overflow: hidden; z-index: 1065; }
.ts-dropdown .option { padding: .45rem .75rem; }
.ts-dropdown .active { background: var(--uii-info-bg); color: var(--uii-navy); }
.ts-dropdown .option.disabled { display: none; }   /* disembunyikan saringan JS modul */
.ts-dropdown .optgroup-header { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #565b6b; padding: .5rem .75rem .25rem; }
.ts-dropdown .highlight { background: #fff6cc; color: inherit; border-radius: 2px; }
.ts-dropdown .no-results { padding: .6rem .75rem; color: #565b6b; }
.pilih-opsi { display: flex; align-items: baseline; gap: .6rem; }
.pilih-kode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; color: #565b6b; min-width: 3.6rem; }
.pilih-teks { font-weight: 600; }
.pilih-sub { font-size: .75rem; color: #565b6b; margin-top: 1px; }
.ts-wrapper.multi .ts-control > div { background: var(--uii-info-bg); color: var(--uii-navy); border-radius: 999px; font-weight: 600; }

/* ===================================================================
   Ukuran kontrol seragam (audit UI 6 Okt 2026).
   Form (panel, modal, profil): 39px bawaan Sneat · bilah filter: 34px · sudut 8px.
   Bilah filter ditandai .bilah-saring pada wadahnya.
   =================================================================== */
.form-control, .form-select, .input-group-text { border-radius: .5rem; }

body .bilah-saring .form-control,
body .bilah-saring .form-select:not(.ts-wrapper),
body .bilah-saring .input-group-text {
    height: 34px; padding-top: .3125rem; padding-bottom: .3125rem; font-size: .875rem; line-height: 1.53;
}
body .bilah-saring .input-group > .form-control,
body .bilah-saring .input-group > .input-group-text { border-radius: .5rem; }   /* sisi yang menempel tetap 0 (aturan Bootstrap lebih spesifik) */
body .bilah-saring .btn:not(.btn-close) {
    height: 34px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .875rem; font-size: .875rem; border-radius: .5rem;
}
body .bilah-saring .ts-wrapper.single .ts-control,
body .bilah-saring .ts-wrapper.single.has-items .ts-control {
    min-height: 32px; padding-top: .3125rem; padding-bottom: .3125rem; font-size: .875rem; line-height: 1.53;
}

/* Kode/NIP di input tetap monospace, tapi seukuran input lain (kelas .85rem itu untuk tabel). */
body .form-control:is(.md-nip, .mk-code, .ms-code, .mrp-uname) { font-size: .9375rem; }

/* Tom Select memberi kelas .invalid pada select wajib yang masih kosong, sejak form dibuka;
   Sneat mewarnai "form .invalid" merah !important. Kosong belum berarti salah: garis biasa. */
form .ts-wrapper.invalid:not(.is-invalid) { border-color: #d9dee3 !important; }

/* ===================================================================
   Drawer (Bootstrap Offcanvas) — revisi drawer 6 Okt 2026.
   Dua lebar saja: standar 480px, .laci-lebar 640px (form bertab/berseksi, editor daftar).
   Penjaga perubahan belum disimpan: assets/js/laci.js.
   =================================================================== */
.offcanvas.offcanvas-end { width: 480px; max-width: 94vw; }   /* Sneat menulis lebar 400px langsung, tanpa variabel */
.offcanvas.offcanvas-end.laci-lebar { width: 640px; }
.offcanvas-footer { background: var(--bs-body-bg, #fff); }
.laci-penanda { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--uii-warn); margin-right: auto; }
.laci-penanda[hidden] { display: none; }
.laci-penanda::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0a800; }

/* Pertanyaan "tutup tanpa menyimpan?" — dirender di dalam drawer */
.laci-tanya { position: absolute; inset: 0; z-index: 10; background: rgba(20, 36, 94, .38); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.laci-tanya[hidden] { display: none; }
.laci-tanya-kartu { background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(20, 36, 94, .3); padding: 1.5rem 1.6rem 1.25rem; max-width: 500px; width: 100%; }
.laci-tanya-ikon { width: 44px; height: 44px; border-radius: 50%; background: var(--uii-warn-bg); color: var(--uii-warn); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: .75rem; }
.laci-tanya-kartu h6 { font-size: 1.05rem; font-weight: 700; color: var(--uii-navy); margin: 0 0 .4rem; }
.laci-tanya-kartu p { font-size: .9rem; color: #3d4458; margin: 0 0 1rem; }
.laci-tanya-aksi { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }

/* Kepala drawer berisi identitas (SDM) */
.laci-kepala { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.laci-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--uii-navy); color: var(--uii-kuning); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; }
.laci-kepala .offcanvas-title { margin: 0; line-height: 1.25; }
.laci-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--uii-teks-redup); margin-top: .2rem; }

/* Tab di dalam drawer */
.laci-tabs { display: flex; gap: 1.5rem; padding: 0 1.5rem; border-bottom: 1px solid var(--uii-garis); background: #fff; }
.laci-tab { border: 0; background: transparent; padding: .8rem .1rem; font-weight: 600; font-size: .875rem; color: var(--uii-teks-redup); border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .45rem; }
.laci-tab:hover { color: var(--uii-navy); }
.laci-tab.aktif { color: var(--uii-navy); border-bottom-color: var(--uii-biru); }
.laci-tab:disabled { opacity: .45; cursor: not-allowed; }
.laci-tab .badge { font-size: .6875rem; }

/* Bagian bernomor (Penawaran Sesi) */
.laci-nav { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--uii-garis); background: #fff; }
.laci-nav button { border: 0; border-radius: 999px; background: var(--uii-netral-bg); color: var(--uii-netral); font-size: .8125rem; font-weight: 600; padding: .3rem .8rem; }
.laci-nav button.aktif { background: var(--uii-navy); color: #fff; }
.laci-bagian { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid #eceae4; scroll-margin-top: .5rem; }
.laci-bagian:last-child { border-bottom: 0; margin-bottom: 0; }
.laci-bagian-judul { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 700; color: var(--uii-navy); margin-bottom: 1rem; }
.laci-no { width: 24px; height: 24px; border-radius: 50%; background: var(--uii-navy); color: var(--uii-kuning); font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.laci-bagian-judul small { font-size: .75rem; font-weight: 600; color: var(--uii-teks-redup); }

/* Chip pilihan ganda (Tom Select multi) dengan avatar inisial */
.ts-wrapper.multi .ts-control { padding: .35rem .5rem; gap: .3rem; }
.ts-wrapper.multi .ts-control > div.item { padding: .15rem .3rem .15rem .2rem; margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.pilih-av { width: 22px; height: 22px; border-radius: 50%; background: var(--uii-biru); color: #fff; font-size: .625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ts-wrapper.plugin-remove_button .item .remove { border-left: 0 !important; color: var(--uii-teks-redup); padding: 0 .3rem; border-radius: 50%; }

/* ===================================================================
   Pengalih semester kerja (header) + pita "bukan semester aktif".
   =================================================================== */
.elab-sesi-btn { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .8rem; border-radius: 10px; border: 1px solid #d9dee3; background: #fff; color: var(--uii-navy); font-size: .875rem; white-space: nowrap; }
.elab-sesi-btn i.bx-calendar { color: var(--uii-biru); font-size: 1.05rem; }
.elab-sesi-btn:hover { border-color: var(--uii-biru); }
.elab-sesi-btn.lama { background: var(--uii-warn-bg); border-color: #e0b800; color: var(--uii-warn); }
.elab-sesi-btn.lama i.bx-calendar { color: var(--uii-warn); }
.elab-sesi-tag { font-size: .6875rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; background: var(--uii-kuning); color: var(--uii-navy); }
.elab-sesi-menu { min-width: 260px; }
.elab-sesi-menu .dropdown-item.active { background: var(--uii-info-bg); color: var(--uii-navy); font-weight: 600; }
.elab-pita-sesi { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--uii-warn-bg); border-bottom: 1px solid var(--uii-warn-garis); color: var(--uii-warn); padding: .6rem 1.625rem; font-size: .875rem; }
.elab-pita-sesi > i { font-size: 1.15rem; }
.elab-pita-btn { background: #fff; border: 1px solid #c9a500; color: var(--uii-warn); font-weight: 600; border-radius: 8px; }
.elab-pita-btn:hover { background: #fff; border-color: var(--uii-warn); color: var(--uii-warn); }
/* Filter semester halaman ikut ditandai saat bekerja di semester lama */
.sesi-lama select[name="thn_akd"], .sesi-lama select[name="session_id"], .sesi-lama select[name="sesi"],
.sesi-lama #ms-filter-thn, .sesi-lama #ms-filter-sem, .sesi-lama #mb-sesi { border-color: #e0b800; background-color: #fffbe6; }
/* ===================================================================
   Responsif ponsel & perapian kecil (QA 12 Okt 2026).
   =================================================================== */
/* Tombol tutup menu di sidebar (ponsel/tablet): bulat kecil, bukan batang selebar tautan menu */
@media (max-width: 1199.98px) {   /* tombol ini hanya ada di ponsel/tablet (d-xl-none) */
    .app-brand { padding-right: 3.75rem; }
    .app-brand .elab-brand { min-width: 0; max-width: calc(100% - 3rem); }
    .app-brand .elab-brand-teks { min-width: 0; }
    .app-brand .elab-brand-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-brand .layout-menu-toggle { width: 2.25rem !important; height: 2.25rem !important; min-width: 0 !important; padding: 0 !important; left: auto !important; right: 1rem;
        display: flex !important; align-items: center; justify-content: center; border-radius: 50%; }
}
/* Select di bilah filter: ruang cukup untuk panah */
body .bilah-saring .form-select:not(.ts-wrapper) { padding-right: 2.25rem; }
/* Tom Select tunggal: teks terpilih dipotong rapi, tidak menabrak panah */
.ts-wrapper.single .ts-control { padding-right: 2.25rem !important; flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Pita semester: ikon sebaris dengan teks */
.elab-pita-sesi > span { flex: 1 1 14rem; min-width: 0; }

@media (max-width: 575.98px) {
    .layout-navbar.elab-navbar { padding: 0 1rem !important; }
    .elab-crumb { display: none !important; }            /* judul halaman sudah ada di konten */
    .elab-sesi-btn { height: 36px; padding: 0 .6rem; gap: .35rem; font-size: .8125rem; }
    .elab-sesi-tag { display: none; }                    /* warna kuning tombol sudah menandai */
    .elab-akun { padding: 0 !important; }
    .elab-pita-sesi { padding: .6rem 1rem; }
    .elab-pita-sesi form, .elab-pita-btn { width: 100%; }
    /* Bilah filter: dua kolom rata alih-alih lebar acak mengikuti teks */
    .bilah-saring select.form-select[style*="width:auto"] { flex: 1 1 calc(50% - .5rem); width: auto !important; min-width: 0; }
}

/* Data besar (QA 12 Okt 2026): kotak chip tidak memanjang tanpa batas; catatan hasil terpotong */
.ts-wrapper.multi .ts-control { max-height: 9.5rem; overflow-y: auto; }
.ts-dropdown .pilih-lebih { padding: .45rem .75rem; font-size: .75rem; color: var(--uii-teks-redup); border-top: 1px solid var(--uii-garis); background: var(--uii-latar); }

/* =====================================================================
   PRIORITAS P2: ACTION-ORIENTED COCKPIT (DASHBOARD BERBASIS AKSI)
   ===================================================================== */
.cockpit-hero {
    background: linear-gradient(135deg, #101c47 0%, #14245e 60%, #1c357e 100%);
    border-radius: 16px;
    border-top: 4px solid var(--uii-kuning-tegas);
    padding: 1.75rem 2rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: 0 8px 24px -4px rgba(20, 36, 94, 0.15);
}
.hero-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--uii-kuning-tegas);
    margin-bottom: 0.5rem;
    letter-spacing: 0.04em;
}
.cockpit-hero .hero-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
    color: #ffffff;
}
.cockpit-hero .hero-sub {
    font-size: 0.85rem;
    color: #c4cce6;
}

/* Urgent Action Alert Banner */
.urgent-action-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 5px solid #f59e0b;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.urgent-action-box.danger-style {
    background: #fef2f2;
    border-color: #fecaca;
    border-left-color: #ef4444;
}
.urgent-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.urgent-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fef3c7;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.urgent-action-box.danger-style .urgent-icon {
    background: #fee2e2;
    color: #dc2626;
}
.urgent-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #92400e;
}
.urgent-action-box.danger-style .urgent-title { color: #991b1b; }
.urgent-desc {
    font-size: 0.8rem;
    color: #b45309;
    margin-top: 1px;
}
.urgent-action-box.danger-style .urgent-desc { color: #b91c1c; }
.btn-urgent-cta {
    background: #d97706;
    color: #ffffff !important;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    font-family: inherit;
}
.btn-urgent-cta:hover {
    background: #b45309;
    transform: translateY(-1px);
    color: #ffffff !important;
}
.urgent-action-box.danger-style .btn-urgent-cta {
    background: #dc2626;
}
.urgent-action-box.danger-style .btn-urgent-cta:hover {
    background: #b91c1c;
}

/* Metric Grid 4 Cards */
.metric-cockpit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.metric-card {
    background: #ffffff;
    border: 1px solid var(--uii-garis);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.metric-left {
    display: flex;
    flex-direction: column;
}
.metric-val {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--uii-navy);
    letter-spacing: -0.025em;
    font-feature-settings: "tnum";
    line-height: 1.1;
}
.metric-lbl {
    font-size: 0.8rem;
    color: var(--uii-teks-redup);
    font-weight: 500;
    margin-top: 4px;
}
.metric-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    width: fit-content;
    margin-top: 6px;
}
.badge-warning-soft { background: #fef3c7; color: #b45309; }
.badge-success-soft { background: #dcfce7; color: #15803d; }
.badge-info-soft { background: #e0f2fe; color: #0369a1; }
.badge-danger-soft { background: #fee2e2; color: #dc2626; }
.metric-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
}

/* 2-Column Cockpit Section */
.cockpit-grid-2 {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 1.5rem;
}
.cockpit-box {
    background: #ffffff;
    border: 1px solid var(--uii-garis);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    margin-bottom: 1.5rem;
}
.box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}
.box-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--uii-navy);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.box-title i { color: var(--uii-biru); }
.box-action-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--uii-biru);
    text-decoration: none;
}

/* Interactive Class Item Card */
.class-card-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.85rem;
    transition: all 0.15s ease;
}
.class-card-item:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15,23,42,0.05);
}
.class-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.class-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}
.class-meta {
    font-size: 0.75rem;
    color: #64748b;
}
.prog-bar-wrap {
    height: 7px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin: 0.5rem 0 0.4rem;
}
.prog-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.prog-green { background: #10b981; }
.prog-amber { background: #f59e0b; }
.prog-blue { background: #3b82f6; }

.class-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}
.btn-input-nilai {
    background: var(--uii-navy);
    color: #ffffff !important;
    border: none;
    padding: 0.32rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
}
.btn-input-nilai:hover {
    background: var(--uii-navy-2);
    color: #ffffff !important;
}

/* Token Review Item Card */
.token-item-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.token-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.token-applicant {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}
.token-reason {
    font-size: 0.78rem;
    color: #475569;
}

/* Kredensial Database Card */
.db-cred-card {
    background: linear-gradient(145deg, #0f1a3a 0%, #172a6b 100%);
    color: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px -4px rgba(20, 36, 94, 0.25);
    position: relative;
    overflow: hidden;
}
.db-cred-card::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(245, 196, 0, 0.2) 0%, transparent 70%);
    pointer-events: none;
}
.db-cred-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.db-cred-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.db-cred-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.db-item-label {
    font-size: 0.7rem;
    color: #a5b2dc;
    text-transform: uppercase;
    font-weight: 600;
}
.db-item-val {
    font-family: var(--font-inter);
    font-feature-settings: "tnum";
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
}
.btn-copy-chip {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: inherit;
}
.btn-copy-chip:hover {
    background: var(--uii-kuning-tegas);
    color: var(--uii-navy);
    font-weight: 700;
}

.hero-stats-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    text-align: right;
}
.hero-badge-val {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--uii-kuning-tegas);
    font-feature-settings: "tnum";
}
.hero-badge-lbl {
    font-size: 0.7rem;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.token-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.btn-approve {
    background: #10b981;
    color: #ffffff !important;
    border: none;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.btn-approve:hover { background: #059669; }
.btn-reject {
    background: #fee2e2;
    color: #dc2626 !important;
    border: 1px solid #fca5a5;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.btn-reject:hover { background: #fecaca; }

/* Toast Notifikasi Feedback */
#cockpit-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #0f172a;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border-left: 4px solid var(--uii-kuning-tegas);
    display: none;
    z-index: 10000;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .cockpit-grid-2 { grid-template-columns: 1fr; }
}