:root {
    --brand: #2563eb;
    --brand-600: #1d4ed8;
    --brand-700: #1e40af;
    --brand-soft: #eff6ff;
    --brand-ring: rgba(37, 99, 235, .25);

    --navy: #163a92;
    --navy-2: #1e4bb8;
    --navy-line: rgba(255, 255, 255, .14);
    --navy-text: rgba(255, 255, 255, .82);

    --surface: #ffffff;
    --surface-2: #f8fafc;
    --canvas: #f4f6fb;
    --border: #e5e8ef;
    --border-strong: #d5dae5;

    --text: #1e293b;
    --text-muted: #64748b;
    --text-soft: #64748b;

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0891b2;

    --radius-sm: .5rem;
    --radius: .75rem;
    --radius-lg: 1rem;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

    --shell-max: 1600px;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--canvas);
    color: var(--text);
    font-family: var(--app-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: .925rem;
    line-height: 1.5;
}

a {
    color: var(--brand);
    text-decoration: none;
}
a:hover {
    color: var(--brand-600);
}

.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
/* Tombol, input, badge-brand, form-label → bootstrap.preset.css */

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
a:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem var(--brand-ring);
    border-radius: var(--radius-sm);
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.shell-container {
    width: 100%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
/* Lebar container & seluruh aturan responsif → responsive.css */

.brandbar {
    background-color: var(--navy);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1.2'%3E%3Ccircle cx='36' cy='36' r='30'/%3E%3Ccircle cx='0' cy='0' r='30'/%3E%3Ccircle cx='72' cy='0' r='30'/%3E%3Ccircle cx='0' cy='72' r='30'/%3E%3Ccircle cx='72' cy='72' r='30'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
    background-repeat: repeat, no-repeat;
    background-position: center, center;
    color: #fff;
}
.brandbar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 92px;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.brandbar__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    min-width: 0;
}
.brandbar__brand:hover { color: #fff; }
.brandbar__logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.brandbar__logo i {
    font-size: 2rem;
    background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brandbar__eyebrow {
    font-size: .82rem;
    color: var(--navy-text);
    line-height: 1.1;
}
.brandbar__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brandbar__utils {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-shrink: 0;
}
.brandbar__icon {
    position: relative;
    color: var(--navy-text);
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: transparent;
    border: 0;
    padding: 0;
}
.brandbar__icon:hover { color: #fff; }
.brandbar__lang {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.brandbar__lang .flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, #dc2626 50%, #fff 50%);
    display: inline-block;
}
.brandbar__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--danger);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    padding: 0 3px;
}

.user-menu .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
}
.user-menu .dropdown-toggle::after {
    color: rgba(255, 255, 255, .8);
    margin-left: .2rem;
}
.user-menu__meta { line-height: 1.15; text-align: right; }
.user-menu__name { font-weight: 700; font-size: .92rem; color: #fff; }
.user-menu__role { font-size: .76rem; color: var(--navy-text); }
.user-menu__icon {
    width: 22px;
    display: grid;
    place-items: center;
    color: var(--navy-text);
    font-size: 1.35rem;
}

.mainnav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0;
}
.mainnav .navbar-nav {
    gap: .4rem;
    padding: .45rem 0;
}
.mainnav .nav-link {
    color: var(--text);
    font-weight: 500;
    font-size: .82rem;
    padding: .45rem .8rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    transition: background-color .15s ease, color .15s ease;
}
.mainnav .nav-link:hover {
    color: var(--brand);
    background: var(--surface-2);
}
.mainnav .nav-link.active {
    color: var(--brand-700);
    background: var(--brand-soft);
    font-weight: 600;
}
.mainnav .nav-link.show,
.mainnav .show > .nav-link {
    color: #fff;
    background: var(--brand);
    font-weight: 600;
}
.mainnav .nav-link.show:hover { color: #fff; }
.mainnav .dropdown-toggle::after {
    margin-left: .3rem;
    opacity: .7;
}
.mainnav .navbar-toggler {
    border: 0;
    padding: .5rem .25rem;
    color: var(--text);
    font-size: 1.4rem;
}
.mainnav .navbar-toggler:focus { box-shadow: none; }

/* Dropdown menu/item/header → bootstrap.preset.css */

.app-main {
    flex: 1;
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
    width: 100%;
}

/* ===== Layout Sidebar (NAVIGATION_UI='sidebar') ===== */
/* Pola app-shell: tinggi viewport tetap; sidebar penuh, KONTEN yang scroll (bukan halaman) */
.app-shell--side{display:grid;grid-template-columns:256px 1fr;height:100vh;overflow:hidden;transition:grid-template-columns .22s ease}
.app-shell--side.sidenav-collapsed{grid-template-columns:0 1fr}
.sidenav{height:100vh;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--navy) 0%,#0f2a6b 100%);color:#eaf0ff;z-index:1040}
.sidenav__brand{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12);min-height:62px}
.sidenav__brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-width:0}
.sidenav__logo{width:38px;height:38px;border-radius:9px;background:#fff;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.sidenav__logo img{width:30px;height:30px;object-fit:contain}
.sidenav__brand-txt{min-width:0}
.sidenav__brand-txt small{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#a9bbe8}
.sidenav__brand-txt span{display:block;font-weight:800;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidenav__nav{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidenav__nav::-webkit-scrollbar{width:7px}.sidenav__nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}
.sn-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;color:#d3ddf5;font:inherit;font-size:.86rem;font-weight:500;
  padding:.56rem .7rem;border-radius:9px;cursor:pointer;text-align:left;text-decoration:none;position:relative}
.sn-ico{width:20px;flex:0 0 auto;display:grid;place-items:center;font-size:1rem}
.sn-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-car{font-size:.7rem;opacity:.7;transition:transform .2s;flex:0 0 auto}
.sn-item:hover{background:rgba(255,255,255,.09);color:#fff}
.sn-item.on{background:rgba(255,255,255,.14);color:#fff}
.sn-item.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--warning)}
.sn-sub{display:none;padding-left:4px}
.sn-group.open>.sn-sub{display:block}
.sn-group.open>.sn-toggle>.sn-car{transform:rotate(180deg)}
.sn-item--l2{font-size:.83rem;font-weight:450;color:#bccbec;padding-left:2.4rem}
.sn-item--l3{font-size:.81rem;color:#aebbdf;padding-left:3.1rem}
.sn-item--l2.on,.sn-item--l3.on{color:#fff;background:rgba(255,255,255,.12)}
.sn-item--l2.on::before,.sn-item--l3.on::before{display:none}
.sn-badge{background:var(--warning);color:#fff;font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:20px;margin-left:6px}
.sn-soon{background:rgba(255,255,255,.15);color:#cdd8f2;font-size:.58rem;padding:1px 6px;border-radius:20px;margin-left:6px}
.sidenav__foot{display:flex;align-items:center;gap:10px;padding:11px 12px;border-top:1px solid rgba(255,255,255,.12)}
.sidenav__ava{width:34px;height:34px;border-radius:50%;background:#2a54b8;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff;flex:0 0 auto}
.sidenav__who{min-width:0}
.sidenav__who b{display:block;font-size:.8rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidenav__who small{color:#9fb2e0;font-size:.7rem}

.side-main{display:flex;flex-direction:column;min-width:0;height:100vh;overflow-y:auto;background:var(--canvas)}
.side-main .app-main{padding-top:0;padding-bottom:0}
.side-topbar{display:flex;align-items:center;gap:12px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1030}
/* Utilitas topbar samping berlatar putih → warna gelap agar terlihat (override gaya header navy) */
.side-topbar .brandbar__lang{color:var(--text)}
.side-topbar .brandbar__icon{color:var(--text-soft)}
.side-topbar .brandbar__icon:hover{color:var(--brand)}
.side-topbar .user-menu__name{color:var(--text)}
.side-topbar .user-menu__role{color:var(--text-soft)}
.side-topbar .user-menu__icon{color:var(--brand)}
.side-topbar .user-menu .dropdown-toggle{color:var(--text)}
.side-topbar .user-menu .dropdown-toggle::after{border-top-color:var(--muted)}
.side-burger{width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;color:var(--text);font-size:1.1rem}
.side-burger:hover{border-color:var(--brand);color:var(--brand)}
.side-topbar__brand{font-weight:700;color:var(--text);text-decoration:none;font-size:.95rem}
.side-topbar__crumb{flex:1;min-width:0;overflow:hidden}
.side-topbar__crumb .breadcrumb{margin:0;padding:0;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-topbar__utils{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.side-content{padding:clamp(1rem,2vw,1.6rem);flex:1;min-width:0}
.sidenav-scrim{display:none}

@media (max-width:992px){
  .app-shell--side{grid-template-columns:1fr}
  .sidenav{position:fixed;left:0;top:0;width:264px;transform:translateX(-100%);transition:transform .24s ease}
  .app-shell--side.sidenav-open .sidenav{transform:translateX(0)}
  .sidenav-scrim{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1035;opacity:0;pointer-events:none;transition:opacity .2s}
  .app-shell--side.sidenav-open .sidenav-scrim{display:block;opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.app-shell--side,.sidenav,.sn-car{transition:none}}

.ay-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand-soft);
    color: var(--brand-700);
    font-weight: 500;
    font-size: .8rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, .15);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-xs);
}
/* Komposisi inline: judul selebar konten (porsi kecil), aksi mengisi sisanya di kanan */
.page-header__main { flex: 0 1 auto; min-width: 0; max-width: 45%; }
.page-header__actions { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; }
/* Judul menumpuk (block); breadcrumb tepat di bawah judul (menggantikan sub-title). */
.page-header__title { display: block !important; }
.page-header__crumb { margin: .3rem 0 0 !important; padding: 0; font-size: .78rem; }
.page-header__search { flex: 1 1 200px; max-width: 340px; }
/* Listview: judul selebar panel filter (25%); kotak cari mengisi sisa ruang aksi.
   Aksi tidak boleh wrap → judul | cari | tombol tetap satu baris; hanya kotak cari
   yang melar, tombol memakai lebar alaminya. */
.page-header--list .page-header__main { flex: 0 0 23%; max-width: 23%; }
.page-header--list .page-header__actions { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
.page-header--list .page-header__actions > :not(.page-header__search) { flex: 0 0 auto; }
.page-header--list .page-header__search { flex: 1 1 0; max-width: none; min-width: 0; }
@media (max-width: 640px) {
    .page-header { align-items: stretch; }
    .page-header__actions { justify-content: flex-start; }
    .page-header__actions .btn { flex: 1 1 auto; }
    .page-header__search { flex: 1 1 100%; max-width: none; }
    .page-header--list .page-header__main { max-width: none; }
    .page-header--list .page-header__actions { flex-wrap: wrap; }
}
/* Lebar panel filter: 25% di setiap ukuran. */
#filterCol:not(.is-collapsed) { flex: 0 0 25%; max-width: 25%; }
/* Show/hide panel filter yang halus (lebar + opasitas beranimasi). */
#filterCol { transition: flex-basis .28s ease, max-width .28s ease, opacity .2s ease; }
#filterCol.is-collapsed {
    flex-basis: 0 !important; max-width: 0 !important;
    opacity: 0; overflow: hidden; pointer-events: none; padding-left: 0; padding-right: 0;
}
@media (prefers-reduced-motion: reduce) { #filterCol { transition: none; } }
.page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--text);
}
.page-header__subtitle {
    color: var(--text-muted);
    margin: .25rem 0 0;
    font-size: .9rem;
}
.page-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.breadcrumb {
    font-size: .8rem;
    margin-bottom: .3rem;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--text-soft); }
.breadcrumb-item.active { color: var(--text-muted); }

.card {
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-cap-bg: transparent;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.card-header {
    font-weight: 600;
    font-size: .95rem;
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.15rem;
    background: transparent;
}
.card-body { padding: 1.25rem; }
.card-footer {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    padding: .85rem 1.15rem;
}

.stat-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.stat-card .card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.stat-card__label {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.stat-card__value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--text);
}
.stat-card__value.sm { font-size: 1.15rem; }

.tone-indigo { background: var(--brand-soft); color: var(--brand); }
.tone-green { background: #dcfce7; color: var(--success); }
.tone-amber { background: #fef3c7; color: var(--warning); }
.tone-cyan { background: #cffafe; color: var(--info); }
.tone-slate { background: #f1f5f9; color: #475569; }

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.1rem;
}
.info-item__label {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .15rem;
}
.info-item__value {
    font-weight: 600;
    font-size: .98rem;
    color: var(--text);
}

.section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}
.section-title i { color: var(--brand); }

/* Tabel generik (.table) → bootstrap.preset.css */
.card > .table-responsive:last-child .table > tbody tr:last-child td { border-bottom: 0; }

/* Badge dasar → bootstrap.preset.css */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 500;
    font-size: .78rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    line-height: 1;
}
.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-badge.is-draft { background: #f1f5f9; color: #475569; }
.status-badge.is-submitted { background: #fef3c7; color: var(--warning); }
.status-badge.is-approved { background: #dcfce7; color: var(--success); }
.status-badge.is-rejected { background: #fee2e2; color: var(--danger); }

.grade-pill {
    display: inline-block;
    min-width: 2rem;
    font-weight: 600;
    font-size: .8rem;
    padding: .2rem .45rem;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-700);
}

.progress {
    background: var(--border);
    border-radius: 999px;
}
.progress-bar { background-color: var(--brand); }

.alert {
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: .9rem;
}
.alert-info { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 2rem;
    color: var(--text-soft);
    display: block;
    margin-bottom: .5rem;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background-color: #e9eaef;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9ccd6' stroke-opacity='0.5' stroke-width='1'%3E%3Ccircle cx='40' cy='40' r='34'/%3E%3Ccircle cx='0' cy='0' r='34'/%3E%3Ccircle cx='80' cy='0' r='34'/%3E%3Ccircle cx='0' cy='80' r='34'/%3E%3Ccircle cx='80' cy='80' r='34'/%3E%3C/g%3E%3C/svg%3E");
}
.auth-shell {
    width: 100%;
    max-width: 1000px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}
.auth-photo {
    display: none;
    position: relative;
    min-height: 460px;
    background-color: var(--navy);
    background-image:
        linear-gradient(180deg, rgba(20, 40, 100, .15) 0%, rgba(11, 25, 66, .85) 100%),
        linear-gradient(135deg, #1e4bb8 0%, #163a92 60%, #0b1942 100%);
    background-size: cover;
    background-position: center;
}
.auth-photo__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem;
    color: #fff;
}
.auth-photo__eyebrow {
    display: inline-block;
    color: #a3e635;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: .8rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid #a3e635;
    margin-bottom: .75rem;
}
.auth-photo__title { font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.auth-photo__uni { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.75rem 1.75rem;
}
.auth-card {
    width: 100%;
    max-width: 380px;
}
.auth-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
}
.auth-card__brand .app-brand__mark { width: 58px; height: 58px; font-size: 1.9rem; border-radius: 16px; }
.app-brand__mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .4);
}

@media (min-width: 992px) {
    .auth-shell { grid-template-columns: 1fr 1fr; }
    .auth-photo { display: block; }
}

.btn-glass {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, .14);
    --bs-btn-border-color: rgba(255, 255, 255, .3);
    --bs-btn-hover-bg: rgba(255, 255, 255, .26);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .3);
    --bs-btn-active-color: #fff;
}

.launcher-page { background: var(--canvas); }
.launcher-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    /* Bawah > atas → konten bergeser sedikit ke atas dari tengah */
    padding: 2rem 1rem 8rem;
}
.launcher-card {
    width: 100%;
    max-width: 1080px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.launcher-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: none;
    padding: 1.15rem 1.5rem;
}
.launcher-head__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}
.launcher-body { padding: 1.75rem 1.75rem 2.5rem; }
.launcher-title { font-weight: 700; font-size: 1.4rem; margin-bottom: 1.35rem; }
.launcher-next {
    display: flex; align-items: center; gap: .55rem;
    margin: -.5rem 0 1.35rem; padding: .6rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-primary);
    border-radius: var(--radius-sm);
    background: var(--bs-tertiary-bg);
    font-size: .85rem;
}
.launcher-next code {
    background: var(--bs-body-bg); padding: .1rem .4rem;
    border-radius: var(--radius-sm); word-break: break-all;
}
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.1rem;
}
.module-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .95rem;
    padding: 1.85rem 1rem;
    min-height: 168px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
.module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--brand);
    color: var(--brand-700);
}
.module-card__icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 2rem;
}
.module-card__label { font-weight: 600; font-size: .95rem; line-height: 1.25; }

.user-pop {
    padding: 0;
    min-width: 300px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 56px -16px rgba(15, 23, 42, .32);
    margin-top: .55rem;
}
/* Header ringkas: avatar kiri + nama/peran — modern, tanpa banner besar. */
.user-pop__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background-color: var(--navy);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Ccircle cx='32' cy='32' r='26'/%3E%3Ccircle cx='0' cy='0' r='26'/%3E%3Ccircle cx='64' cy='64' r='26'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--navy-2), var(--navy));
    color: #fff;
}
.user-pop__avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .12));
    border: 1.5px solid rgba(255, 255, 255, .4);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}
.user-pop__id { min-width: 0; }
.user-pop__name {
    font-weight: 700; font-size: .95rem; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-pop__sub { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
.user-pop__role {
    font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    padding: .1rem .45rem; border-radius: 999px;
    background: rgba(255, 255, 255, .16); color: #fff;
}
.user-pop__org { font-size: .72rem; color: rgba(255, 255, 255, .6); }

.user-pop__menu { padding: .4rem; background: var(--surface); }
.user-pop__item {
    display: flex; align-items: center; gap: .7rem;
    width: 100%; margin: 0;
    padding: .58rem .6rem; border: 0; background: transparent;
    border-radius: 10px; text-align: left; cursor: pointer;
    color: var(--text); font-size: .875rem; font-weight: 500;
    text-decoration: none; transition: background .12s ease, color .12s ease;
}
.user-pop__item > i:first-child {
    font-size: 1.02rem; width: 1.2rem; text-align: center; color: var(--text-soft);
    transition: color .12s ease;
}
.user-pop__item span { flex: 1 1 auto; }
.user-pop__item:hover { background: var(--brand-soft); color: var(--brand); }
.user-pop__item:hover > i:first-child { color: var(--brand); }
.user-pop__chev { font-size: .78rem; color: var(--muted); }
.user-pop__item--accent { color: var(--brand); font-weight: 600; }
.user-pop__item--accent > i:first-child { color: var(--brand); }
.user-pop__item--danger { color: var(--danger); }
.user-pop__item--danger > i:first-child { color: var(--danger); }
.user-pop__item--danger:hover { background: rgba(var(--bs-danger-rgb, 220, 53, 69), .1); color: var(--danger); }
.user-pop__item--danger:hover > i:first-child { color: var(--danger); }
.user-pop__sep { height: 1px; background: var(--border); margin: .35rem .55rem; }

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand-700);
    font-size: 2.4rem;
    font-weight: 700;
}

/* Aturan mobile brandbar/nav & cetak → responsive.css */

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-bg: #b45309;
    --bs-btn-hover-border-color: #b45309;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #92400e;
    --bs-btn-active-border-color: #92400e;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
    --bs-btn-disabled-color: #fff;
}
.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e40af;
    --bs-btn-active-color: #fff;
}
.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #15803d;
    --bs-btn-active-bg: #166534;
    --bs-btn-active-border-color: #166534;
    --bs-btn-disabled-bg: var(--success);
    --bs-btn-disabled-border-color: var(--success);
}
.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-bg: #991b1b;
    --bs-btn-active-border-color: #991b1b;
    --bs-btn-disabled-bg: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
}

.card--accent { border-top: 3px solid var(--success); }
.card--accent-orange { border-top: 3px solid var(--warning); }

/* Bungkus isi daftar (toolbar + tabel + footer + keterangan) dalam satu card putih */
.listcol-card { overflow: hidden; padding-top: 1rem; }
.listcol-card > .detail-wrap { padding-top: 0; }
.listcol-card > .crud-toolbar { padding: 1rem 1.15rem 0; margin-bottom: 1rem; }
/* Jarak kiri-kanan tabel disamakan dengan toolbar/filter di atasnya */
.listcol-card > .table-responsive { padding: 0 1.15rem; }
.listcol-card > .datatable-footer { margin: 0 1.15rem; padding-left: 0; padding-right: 0; background: transparent; }
.listcol-card > .legend-box { margin: 0 1.15rem 1.15rem; }

/* Field representatif yang bisa diklik menuju halaman detail —
   warna sama dg kolom lain; pembeda cukup tebal (fw-bold), bukan warna */
.crud-link { color: inherit; font-weight: 700; text-decoration: none; }
.crud-link:hover { text-decoration: underline; }

/* ===== Neo Feeder Explorer / dashboard ===== */
.nf-scroll { max-height: 60vh; overflow: auto; }
.nf-table { margin: 0; }
.nf-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--navy); color: #fff; white-space: nowrap;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .02em;
}
.nf-table td {
    max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nf-table td:hover { overflow: visible; white-space: normal; word-break: break-word; }
.nf-fields > summary { cursor: pointer; list-style: none; }
.nf-fields > summary::-webkit-details-marker { display: none; }

/* ===== Editor inline pengaturan (AJAX) ===== */
.setting-editor { display: flex; flex-direction: column; gap: .3rem; }
.setting-editbtns { display: inline-flex; gap: .3rem; justify-content: center; }
.setting-cell .setting-input { min-width: 12rem; }

/* ===== Sinkronisasi SISTER (preview before/after) ===== */
.sister-sync__head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; padding: .85rem 1.15rem; border-bottom: 1px solid var(--border);
}
.sister-diff { font-size: .88rem; }
.sister-diff th { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: var(--text-soft); }
.sister-diff td, .sister-diff th { padding: .55rem 1.15rem; }
.sister-diff--changed { background: rgba(var(--bs-warning-rgb, 255, 193, 7), .1); }
.sister-diff--changed td:last-child { color: var(--text); }

/* ===== Searchbar navigasi cepat antar objek (detail/edit) ===== */
.objnav {
    position: relative;
    display: flex; align-items: center; gap: .5rem;
    margin: 1rem 1.15rem; padding: .1rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    background: var(--bs-body-bg);
}
.objnav:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .12); }
.objnav__icon { color: var(--bs-secondary-color); font-size: .95rem; }
.objnav__input {
    flex: 1 1 auto; border: 0; outline: 0; background: transparent;
    padding: .5rem 0; font-size: .92rem; color: inherit; min-width: 0;
}
.objnav__spinner { color: var(--bs-primary); display: inline-flex; }
.objnav__results {
    position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 1050;
    max-height: 340px; overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}
.objnav__item {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .55rem .85rem; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--bs-border-color);
}
.objnav__item:last-child { border-bottom: 0; }
.objnav__item:hover, .objnav__item.is-active { background: var(--bs-tertiary-bg); }
.objnav__label { font-weight: 600; font-size: .9rem; }
.objnav__sub { font-size: .78rem; color: var(--bs-secondary-color); }
.objnav__empty { padding: .7rem .85rem; font-size: .85rem; color: var(--bs-secondary-color); }

/* ===== Halaman detail reusable ===== */
.detail-wrap { padding: 1rem 1.15rem 1.25rem; }
.detail-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.detail-photo {
    width: 76px; height: 76px; border-radius: 12px; object-fit: cover;
    border: 1px solid var(--border); flex: 0 0 auto;
}
.detail-photo--empty { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 2rem; }
.detail-head__name { font-size: 1.15rem; font-weight: 700; color: #1f2937; line-height: 1.2; }
.detail-head__label { font-size: .82rem; color: var(--text-soft); margin-top: .15rem; }

.detail-section { height: 100%; }
.detail-section__title {
    font-weight: 700; color: var(--success); font-size: .95rem;
    padding-bottom: .4rem; margin-bottom: .5rem; border-bottom: 2px solid var(--success);
}
.detail-list { margin: 0; }
.detail-row {
    display: grid; grid-template-columns: 40% 60%; gap: .5rem;
    padding: .5rem 0; border-bottom: 1px solid #eef2f7; align-items: start;
}
.detail-row dt { font-weight: 600; color: var(--brand-700); font-size: .85rem; margin: 0; }
.detail-row dd { margin: 0; font-size: .88rem; color: #1f2937; word-break: break-word; }

/* --- Detail kaya gaya SEVIMA: profil kiri, baris label:nilai, tab bersub-seksi --- */
.detail-profile { text-align: center; }
.detail-profile__photo {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--border); margin: 0 auto .75rem; display: block;
}
.detail-profile__photo--empty { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 3rem; }
.detail-menu { list-style: none; padding: 0; margin: 0; text-align: left; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.detail-menu li { border-bottom: 1px solid #eef2f7; }
.detail-menu li:last-child { border-bottom: 0; }
.detail-menu li a, .detail-menu li span { display: block; padding: .55rem .8rem; font-size: .84rem; color: var(--text); text-decoration: none; }
.detail-menu li span { color: var(--text-soft); cursor: default; }
.detail-menu li a:hover { background: var(--brand-soft); }
.detail-menu li.active { background: var(--brand-soft); border-left: 3px solid var(--brand); }
.detail-menu li.active a { color: var(--brand); font-weight: 600; }

/* Baris label (kiri) : nilai (kanan) dengan garis bawah tipis */
.detail-row2 { display: grid; grid-template-columns: 42% 58%; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid #eef2f7; align-items: start; }
.detail-row2 > label { margin: 0; font-weight: 400; color: #1f2937; font-size: .86rem; }
.detail-row2__val { font-size: .86rem; color: #1f2937; word-break: break-word; }

/* Judul sub-seksi (hijau) di dalam tab */
.callout-subtab {
    font-weight: 700; color: var(--success); font-size: .95rem;
    padding: .3rem 0 .35rem; margin: 1rem 0 .35rem; border-bottom: 2px solid var(--success);
}
.callout-subtab:first-child { margin-top: .25rem; }

/* Tab detail */
.detail-tabs { border-bottom: 1px solid var(--border); gap: .25rem; flex-wrap: wrap; }
.detail-tab {
    background: #eef1f6; border: 1px solid var(--border); border-bottom: 0;
    padding: .5rem 1rem; font-size: .85rem; font-weight: 600; color: var(--text-soft);
    border-radius: 8px 8px 0 0; margin-bottom: -1px; cursor: pointer;
}
.detail-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.detail-tabcontent { padding-top: 1rem; }

/* Ringkasan angka (IPK/SKS/Total) di halaman akademik mahasiswa */
.akm-summary { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.akm-summary__item {
    display: flex; flex-direction: column; gap: .1rem; padding: .6rem .9rem;
    background: var(--brand-soft); border: 1px solid #dfe5ff; border-radius: 10px; min-width: 120px;
}
.akm-summary__label { font-size: .72rem; color: var(--brand-700); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.akm-summary__val { font-size: 1.15rem; font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; }

.crud-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.crud-toolbar__search {
    max-width: 340px;
    flex: 1 1 220px;
}
.crud-toolbar__spacer { flex: 1 1 auto; }
.crud-toolbar .form-select-quick { max-width: 190px; }

.datatable { margin-bottom: 0; }
.datatable > thead th {
    background: var(--brand);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, .12);
    padding: .5rem .75rem;
    vertical-align: middle;
    white-space: nowrap;
}
.datatable > thead th:last-child { border-right: 0; }
.datatable > tbody td {
    padding: .45rem .75rem;
    font-size: .8rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.datatable > tbody tr:nth-child(even) { background: #fafbfd; }
.datatable > tbody tr:hover > * { background: var(--brand-soft); }
.datatable .col-check { width: 42px; text-align: center; }
.datatable .col-actions { width: 1%; white-space: nowrap; text-align: center; }

.btn-act {
    width: 30px;
    height: 29px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: .8rem;
    margin: 0 1px;
}
.btn-act:hover { color: #fff; filter: brightness(.93); }
.btn-act--view { background: var(--info); }
.btn-act--edit { background: var(--warning); }
.btn-act--del { background: var(--danger); }

.datatable-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1.15rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.datatable-footer__count {
    background: #eff6ff;
    color: var(--brand-700);
    font-size: .8rem;
    padding: .4rem .8rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.datatable-footer .pagination { margin: 0; }
/* Pagination → bootstrap.preset.css */

.filter-panel { position: sticky; top: calc(62px + 1rem); }
.filter-panel__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
/* Hanya ikon corong (anak langsung header) yang oranye; ikon dalam tombol tidak */
.filter-panel__header > i { color: var(--warning); }
.filter-panel__toggle i { color: #fff; }
.filter-panel__toggle {
    margin-left: auto;
    background: var(--warning);
    color: #fff;
    border: 0;
    width: 30px;
    height: 28px;
    border-radius: 6px;
    display: grid;
    place-items: center;
}
.filter-section { border-bottom: 1px solid var(--border); }
.filter-section > summary {
    list-style: none;
    cursor: pointer;
    padding: .8rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.filter-section > summary::-webkit-details-marker { display: none; }
.filter-section > summary::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    color: var(--text-soft);
    font-size: .85rem;
    transition: transform .15s ease;
}
.filter-section[open] > summary::after { transform: rotate(180deg); }
.filter-section__body { padding: .85rem 1rem; overflow: hidden; transition: height .24s ease; }
@media (prefers-reduced-motion: reduce) { .filter-section__body { transition: none; } }
/* Filter multi-pilihan (checkbox) dengan tinggi terbatas + scroll */
.filter-checklist { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; padding-right: .2rem; }
.filter-checklist::-webkit-scrollbar { width: 7px; }
.filter-checklist::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.filter-check { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .70rem; font-weight: 400; color: var(--text); cursor: pointer; line-height: 1.35; }
.filter-check input { margin: .15rem 0 0; flex: 0 0 auto; cursor: pointer; }
.filter-check:hover { color: var(--brand); }
/* Penanda jumlah pilihan aktif pada judul seksi */
.filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 9px; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; margin-left: .35rem; }
/* Pohon hierarki Program Studi (Fakultas → Prodi + jenjang) */
.filter-tree__faculty { font-weight: 600; font-size: .8rem; margin: .45rem 0 .1rem; }
.filter-tree__faculty:first-child { margin-top: 0; }
/* Border-primary pada panel filter (mengganti aksen oranye) */
.filter-panel.card--accent-orange { border-top-color: var(--brand); }
/* Tombol "Filter" (muncul di toolbar hanya saat sidebar filter disembunyikan) */
.filter-toggle { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.filter-toggle:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.legend-box {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    font-size: .82rem;
}
.legend-box__title { font-weight: 700; color: #92400e; margin-bottom: .5rem; }
.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .3rem 1.5rem;
}
.legend-grid dt {
    display: inline-block;
    font-weight: 700;
    color: var(--text);
    min-width: 2.2rem;
}

/* filter-panel mobile → responsive.css */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
}
.form-row {
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1.25rem;
    border-bottom: 1px solid var(--border);
    min-height: 60px;
}
.form-row--wide { grid-column: 1 / -1; }
.form-row__label {
    color: var(--brand);
    font-weight: 600;
    font-size: .88rem;
    margin: 0;
}
.form-row__control { min-width: 0; }
.form-row--check .form-row__control {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.req { color: var(--danger); margin-left: 2px; }
.form-section {
    color: var(--success);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 1.15rem 1.25rem .55rem;
    margin: .25rem 1.25rem 0;
    border-bottom: 2px solid var(--success);
}

/* form-grid mobile → responsive.css */

.filter-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    row-gap: .9rem;
    padding: 1.25rem 1.25rem .5rem;
}
.filter-top__row {
    display: grid;
    grid-template-columns: minmax(120px, 30%) 1fr;
    align-items: center;
    gap: 1rem;
}
.filter-top__label {
    color: var(--warning);
    font-weight: 600;
    font-size: .85rem;
    margin: 0;
}
.filter-top__footer {
    display: flex;
    justify-content: flex-end;
    padding: .5rem 1.25rem 1.1rem;
}

/* filter-top mobile → responsive.css */

/* ============================================================
   Sub-sistem: tema per portal (override brandbar & aksen) & komponen
   ============================================================ */
.tone-teal { background: #ccfbf1; color: #0d9488; }
.tone-emerald { background: #d1fae5; color: #059669; }

[data-subsystem="teal"] {
    --navy: #0f766e; --navy-2: #115e59;
    --brand: #0d9488; --brand-600: #0f766e; --brand-700: #115e59;
    --brand-soft: #ccfbf1; --brand-ring: rgba(13, 148, 136, .25);
}
[data-subsystem="emerald"] {
    --navy: #065f46; --navy-2: #064e3b;
    --brand: #059669; --brand-600: #047857; --brand-700: #065f46;
    --brand-soft: #d1fae5; --brand-ring: rgba(5, 150, 105, .25);
}
[data-subsystem="slate"] {
    --navy: #334155; --navy-2: #1e293b;
    --brand: #475569; --brand-600: #334155; --brand-700: #1e293b;
    --brand-soft: #f1f5f9; --brand-ring: rgba(71, 85, 105, .25);
}

/* Chip peran aktif di brandbar */
.role-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255, 255, 255, .14); color: #fff;
    padding: .35rem .7rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.role-chip i { opacity: .85; }

/* Launcher: kartu sub-sistem (grid 2 kolom, seimbang) */
.subsystem-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* subsystem-grid mobile → responsive.css */
.subsystem-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon head go"
        "icon tag  go";
    align-items: center;
    column-gap: 1.05rem; row-gap: .2rem;
    padding: 1.35rem 1.4rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    text-decoration: none; color: var(--text);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.subsystem-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.subsystem-card__icon {
    grid-area: icon; align-self: center;
    width: 60px; height: 60px; border-radius: 17px;
    display: grid; place-items: center; font-size: 1.85rem;
}
.subsystem-card__head { grid-area: head; display: flex; flex-direction: column; min-width: 0; }
.subsystem-card__short { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--text-soft); }
.subsystem-card__label { font-weight: 600; font-size: 1.05rem; line-height: 1.2; margin-top: .1rem; }
.subsystem-card__tagline { grid-area: tag; font-size: .82rem; color: var(--text-soft); margin-top: .25rem; }
.subsystem-card__go { grid-area: go; align-self: center; font-size: 1.4rem; color: var(--border-strong); transition: color .16s ease, transform .16s ease; }
/* Kartu subsistem sebagai tombol/form (pemilih peran) tampil identik dgn <a> */
.subsystem-card-form { display: contents; }
button.subsystem-card { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.subsystem-card:hover .subsystem-card__go { transform: translateX(2px); }
.subsystem-card[data-accent="indigo"]:hover { border-color: var(--brand); }
.subsystem-card[data-accent="indigo"]:hover .subsystem-card__go { color: var(--brand); }
.subsystem-card[data-accent="teal"]:hover { border-color: #0d9488; }
.subsystem-card[data-accent="teal"]:hover .subsystem-card__go { color: #0d9488; }
.subsystem-card[data-accent="emerald"]:hover { border-color: #059669; }
.subsystem-card[data-accent="emerald"]:hover .subsystem-card__go { color: #059669; }
.subsystem-card[data-accent="slate"]:hover { border-color: #475569; }
.subsystem-card[data-accent="slate"]:hover .subsystem-card__go { color: #475569; }

/* Landing sub-sistem: tile menu */
.home-grid {
    display: grid; gap: .85rem;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.home-tile {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: 1.3rem .8rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    text-decoration: none; color: var(--text); text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-tile:hover {
    transform: translateY(-2px); border-color: transparent;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}
.home-tile__icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    font-size: 1.35rem; background: var(--brand-soft); color: var(--brand);
}
.home-tile__label { font-weight: 600; font-size: .9rem; line-height: 1.25; }

/* Modal pemilih peran */
.role-list { display: flex; flex-direction: column; gap: .55rem; }
.role-list__item {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    padding: .8rem 1rem; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-weight: 600; text-align: left;
    transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.role-list__item:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.role-list__item.is-active { border-color: var(--brand); box-shadow: 0 0 0 .15rem var(--brand-ring); }
.role-list__icon {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); font-size: 1.05rem;
}
.role-list__name { flex: 1; }
.role-list__chev { color: var(--text-soft); }

/* Badge "segera hadir" pada item menu stub */
.soon-badge {
    margin-left: .4rem; font-size: .6rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--warning);
    background: #fef3c7; border-radius: 999px; padding: .05rem .4rem; vertical-align: middle;
}
.dropdown-item.active .soon-badge { color: #fff; background: rgba(255,255,255,.25); }

/* Tautan "Sub-Sistem" (kembali ke launcher) — gaya ghost agar beda dari menu utama */
.mainnav .nav-link--ghost {
    color: var(--text-soft);
    border: 1px solid var(--border);
    font-weight: 500;
}
.mainnav .nav-link--ghost:hover {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
}
.mainnav .dropdown-menu { min-width: 232px; }

/* Submenu flyout 3-tingkat (gaya referensi SEVIMA) */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .flyout-parent {
    display: flex; align-items: center; cursor: default; white-space: nowrap;
}
.dropdown-submenu > .flyout-parent .flyout-caret {
    margin-left: auto; padding-left: .75rem; font-size: .7rem; color: var(--text-soft);
}
.dropdown-submenu > .dropdown-menu {
    top: -.45rem; left: 100%; margin: 0; min-width: 224px; display: none;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu { display: block; }
.dropdown-submenu:hover > .flyout-parent { background: var(--brand-soft); color: var(--brand-700); }
.dropdown-submenu:hover > .flyout-parent .flyout-caret { color: var(--brand); }

/* Badge "New" (gradien merah muda seperti referensi) */
.badge-new {
    margin-left: .45rem; font-size: .58rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: #fff; padding: .12rem .42rem; border-radius: 6px;
    background: linear-gradient(106deg, #cf5d9e, #fd5f86); vertical-align: middle;
}

/* dropdown-submenu mobile → responsive.css */

/* Logo UMKO di dalam lingkaran header */
.brandbar__logo--img { overflow: hidden; padding: 7px; }
.brandbar__logo--img img { width: 100%; height: 100%; object-fit: contain; }

/* ===== Dashboard SIAKAD (gaya SEVIMA) ===== */
.dash-filter {
    display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--warning); border-radius: var(--radius);
    padding: 1rem 1.15rem; margin-bottom: 1.15rem; box-shadow: var(--shadow-xs);
}
.dash-filter__field { flex: 1 1 260px; min-width: 200px; }
.dash-filter__field label { font-size: .8rem; font-weight: 600; color: var(--warning); display: block; margin-bottom: .3rem; }
.dash-filter__action { flex: 0 0 auto; }

.stat-tile {
    position: relative; overflow: hidden; border-radius: 14px;
    padding: 1.15rem 1.3rem; color: #fff; min-height: 118px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
.stat-tile__label { font-size: .85rem; font-weight: 500; opacity: .95; }
.stat-tile__value { font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin-top: .35rem; }
.stat-tile__bg { position: absolute; right: -6px; bottom: -14px; font-size: 5rem; opacity: .18; }
.stat-tile--aqua { background: linear-gradient(135deg, #22b3d6 0%, #2f80ed 100%); }
.stat-tile--green { background: linear-gradient(135deg, #1fbf75 0%, #12996a 100%); }
.stat-tile--amber { background: linear-gradient(135deg, #f7a83a 0%, #ef8a1b 100%); }
.stat-tile--rose { background: linear-gradient(135deg, #ef5f7a 0%, #b4295a 100%); }

.dash-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden;
}
.dash-panel--soft { background: linear-gradient(135deg, #e7f2ff 0%, #eef4ff 60%, #fff 100%); }
.dash-panel__head {
    padding: .85rem 1.15rem; font-weight: 600; font-size: .95rem;
    border-bottom: 1px solid var(--border);
}
.dash-panel--soft .dash-panel__head { border-bottom-color: rgba(15,23,42,.06); }
.dash-panel__head i { color: var(--brand); margin-right: .35rem; }
.dash-panel__body { padding: 1rem 1.15rem; }

.worklist-item {
    display: flex; align-items: center; gap: .8rem;
    background: #fff; border: 1px solid #eef2f7; border-radius: 12px;
    padding: .7rem .8rem; margin-bottom: .6rem;
}
.worklist-item:last-child { margin-bottom: 0; }
.worklist-item__icon {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    display: grid; place-items: center; background: #eef4ff; color: var(--brand);
}
.worklist-item__text { min-width: 0; flex: 1; }
.worklist-item__title { font-size: .82rem; font-weight: 600; color: #1f2937; line-height: 1.3; }
.worklist-item__desc { font-size: .75rem; color: var(--text-soft); margin-top: .15rem; }
.tag-prio { flex: 0 0 auto; font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.tag-prio--high { background: #ffe4e6; color: #9f1239; }
.tag-prio--med { background: #fff7ed; color: #9a3412; }

.angkatan-chart { display: flex; flex-direction: column; gap: .7rem; }
.angkatan-row { display: flex; align-items: center; gap: .7rem; }
.angkatan-row__year { width: 42px; font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.angkatan-row__bar { flex: 1; background: #eef2f7; border-radius: 999px; height: 20px; overflow: hidden; }
.angkatan-row__fill { position: relative; height: 100%; border-radius: 999px; background: #cbd5e1; }
.angkatan-row__aktif { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f80ed, #22b3d6); }
.angkatan-row__val { width: 46px; text-align: right; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.angkatan-legend { display: flex; gap: 1.2rem; margin-top: .9rem; font-size: .78rem; color: var(--text-soft); }
.angkatan-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; }
.angkatan-legend .dot--aktif { background: #2f80ed; }
.angkatan-legend .dot--total { background: #cbd5e1; }

/* Ringkasan header detail mahasiswa (label kiri, nilai kanan). */
.student-head > div { padding: .18rem .75rem; }
.student-head dt { flex: 0 0 46%; font-weight: 400; margin: 0; color: #1f2937; }
.student-head dd { margin: 0; word-break: break-word; }

.news-item { display: block; padding: .7rem .75rem; margin-bottom: .5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .12s, box-shadow .12s, transform .12s; }
.news-item:last-child { margin-bottom: 0; }
.news-item:hover { border-color: #cfd8ec; box-shadow: var(--shadow-xs); transform: translateY(-1px); }
.news-item__tags { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; }
.news-item__pin { color: var(--warning); font-size: .78rem; margin-left: auto; }
.news-item__title { font-size: .86rem; font-weight: 700; color: #1f2937; line-height: 1.35; }
a.news-item:hover .news-item__title { color: var(--brand); }
.news-item__summary { font-size: .78rem; color: var(--text-soft); line-height: 1.4; margin-top: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item__time { font-size: .73rem; color: var(--text-soft); margin-top: .4rem; }
.news-item__time i { margin-right: .25rem; }
.dash-panel__head-link { font-size: .76rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.dash-panel__head-link:hover { text-decoration: underline; }

/* Tinggi area grafik dashboard */
.chart-holder { position: relative; height: 300px; }
.chart-holder--tall { height: 360px; }

/* Kartu statistik: ikon info + baris tren */
.stat-tile__info { font-size: .78rem; opacity: .8; }
.stat-tile__trend {
    margin-top: .5rem; font-size: .76rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .28rem;
}
.stat-tile__trend i { font-size: .9rem; }
.stat-tile__trend--muted { font-weight: 500; opacity: .82; }

/* Tanggungan: anchor + chevron + tautan "lihat lainnya" */
a.worklist-item { text-decoration: none; transition: border-color .12s, box-shadow .12s; }
a.worklist-item:hover { border-color: #cfe0ff; box-shadow: 0 2px 8px rgba(47,128,237,.1); }
.worklist-item__chev { flex: 0 0 auto; color: var(--text-soft); font-size: .8rem; }
.dash-morelink {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
    background: none; border: 0; padding: .25rem 0; cursor: pointer;
    color: var(--brand); font-size: .82rem; font-weight: 600;
}
.dash-morelink:hover { text-decoration: underline; }

/* Bilah tab di dalam panel statistik */
.dash-tabs { display: flex; gap: .3rem; padding: .55rem .9rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dash-tab {
    background: none; border: 0; border-bottom: 2px solid transparent;
    padding: .5rem .85rem; font-size: .82rem; font-weight: 600; color: var(--text-soft);
    cursor: pointer; border-radius: 6px 6px 0 0;
}
.dash-tab.active { color: var(--brand); border-bottom-color: var(--brand); background: #f3f7ff; }

/* Tabel data dashboard */
.dash-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.dash-table th, .dash-table td { padding: .5rem .6rem; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.dash-table thead th { background: var(--brand); color: #fff; font-weight: 600; border-bottom: 0; }
.dash-table thead th:first-child { border-top-left-radius: 8px; }
.dash-table thead th:last-child { border-top-right-radius: 8px; }
.dash-table tbody tr:nth-child(even) { background: #fafbfe; }
.dash-table tfoot td { border-top: 2px solid var(--brand); background: #f3f7ff; }
.dash-table td, .dash-table th { font-variant-numeric: tabular-nums; }

/* Tautan panel & label berita */
.dash-panel__link {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem;
    font-size: .82rem; font-weight: 600; color: var(--brand); text-decoration: none;
}
.dash-panel__link:hover { text-decoration: underline; }
.news-badge {
    display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .3px;
    background: var(--success); color: #fff; padding: .05rem .3rem; border-radius: 4px; vertical-align: middle;
}

/* Widget progres kelengkapan kurikulum (cincin) */
.krs-widget { display: flex; align-items: center; gap: 1rem; }
.krs-ring {
    --val: 0; position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--warning) calc(var(--val) * 1%), #edf1f6 0);
}
.krs-ring::before { content: ""; position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%; background: var(--surface); }
.krs-ring__num { position: relative; font-size: 1.05rem; font-weight: 700; color: var(--warning); }
.krs-widget__title { font-size: .92rem; font-weight: 700; color: #1f2937; }
.krs-widget__desc { font-size: .78rem; color: var(--text-soft); margin-top: .15rem; }

/* Header & dropdown-nya harus di atas bilah menu sticky (z-index 1030) */
.brandbar { position: relative; z-index: 1035; }
.brandbar .dropdown-menu { z-index: 1055; }

/* Ukuran item dropdown topnav disamakan dengan teks menu yang kecil */
.mainnav .dropdown-menu { font-size: .8rem; }
.mainnav .dropdown-menu .dropdown-item,
.mainnav .dropdown-submenu > .flyout-parent { padding: .42rem .65rem; }

/* Impor SEVIMA (/sistem/) */
.import-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.import-card {
    border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem;
    background: var(--surface-2);
}
.import-card__title { font-weight: 600; margin-bottom: .75rem; }
.import-card__title i { color: var(--brand); margin-right: .35rem; }
.import-card__actions { display: flex; gap: .5rem; }
.status-badge--success { background: #dcfce7; color: var(--success); }
.status-badge--muted { background: #f1f5f9; color: var(--text-soft); }

/* Toggler navbar & caret dropdown di sisi kanan (end) — default */
.mainnav .shell-container { display: flex; flex-wrap: wrap; align-items: center; }
.mainnav .navbar-toggler { margin-left: auto; }
.mainnav .nav-link.dropdown-toggle { justify-content: space-between; }

/* Mobile (menu collapse): nav link RATA KIRI — ikon+label di kiri, caret di kanan */
@media (max-width: 991.98px) {
    .mainnav .navbar-nav { align-items: stretch; }
    .mainnav .nav-link { justify-content: flex-start; text-align: left; }
    .mainnav .nav-link.dropdown-toggle::after { margin-left: auto; }
}

/* ===== Berita (feed, kartu, artikel, tag) ===== */
a.news-item { text-decoration: none; color: inherit; }
a.news-item:hover .news-item__title { color: var(--brand); }

.news-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.news-card { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; }
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cfd8ec; }
.news-card__body { padding: 1rem 1.1rem 1.1rem; }
.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.news-card__title { font-size: 1rem; font-weight: 700; color: #1f2937; line-height: 1.35; margin: 0 0 .35rem; }
.news-card:hover .news-card__title { color: var(--brand); }
.news-card__summary { font-size: .85rem; color: var(--text-soft); margin: 0 0 .7rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__foot { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .76rem; color: var(--text-soft); }
.news-card__foot i { margin-right: .2rem; }
.news-pin { color: var(--warning); margin-left: auto; }

.news-tag { font-size: .66rem; font-weight: 700; padding: .16rem .5rem; border-radius: 20px; letter-spacing: .02em; text-transform: uppercase; }
.news-tag--aud { background: var(--brand-soft); color: var(--brand-700); text-transform: none; letter-spacing: 0; font-weight: 600; }
.news-tag--new { background: var(--success); color: #fff; }
.news-tag--akademik { background: #eff6ff; color: #1e40af; }
.news-tag--keuangan { background: #dcfce7; color: #166534; }
.news-tag--pmb { background: #cffafe; color: #155e75; }
.news-tag--kegiatan { background: #fef3c7; color: #92400e; }
.news-tag--umum { background: #f1f5f9; color: #475569; }

.news-article { padding: 1.5rem 1.6rem; }
.news-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.news-article__date { font-size: .8rem; color: var(--text-soft); margin-left: auto; }
.news-article__title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .6rem; text-wrap: balance; }
.news-article__target { font-size: .82rem; color: var(--text-soft); padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.news-article__lead { font-size: 1.02rem; font-weight: 500; color: #334155; line-height: 1.6; }
.news-article__body { font-size: .95rem; color: #334155; line-height: 1.75; }
.news-article__body p { margin: 0 0 1rem; }

/* ===== Varian Header (setting HEADER) — hanya topbar ===== */
/* B: Light Editorial — header putih, aksen amber, logo+nama gelap, pencarian */
.brandbar--light{background:var(--surface);background-image:none;color:var(--text);border-top:3px solid var(--warning);border-bottom:1px solid var(--border)}
.brandbar--light .brandbar__inner{justify-content:space-between;gap:1.25rem}
.brandbar--light .brandbar__brand{flex:1 1 46%;min-width:0;color:var(--text)}
/* Klaster kanan: pencarian + utilitas (porsi ~50%) */
.brandbar__right{flex:1 1 46%;min-width:0;display:flex;align-items:center;gap:1rem;justify-content:flex-end}
.brandbar--light .brandbar__brand:hover{color:var(--text)}
.brandbar--light .brandbar__logo{background:#fff;border:1px solid var(--border)}
.brandbar--light .brandbar__eyebrow{color:var(--warning)}
.brandbar--light .brandbar__title{color:#111827}
.brandbar--light .brandbar__utils{margin-left:0}
.brandbar--light .brandbar__lang{color:var(--text)}
.brandbar--light .brandbar__icon{color:var(--muted)}
.brandbar--light .brandbar__icon:hover{color:var(--brand)}
.brandbar--light .user-menu .dropdown-toggle{color:var(--text)}
.brandbar--light .user-menu__name{color:var(--text)}
.brandbar--light .user-menu__role{color:var(--muted)}
.brandbar--light .user-menu__icon{color:var(--brand)}
.brandbar--light .user-menu .dropdown-toggle::after{border-top-color:var(--muted)}
.brandbar__search{flex:1 1 200px;max-width:400px;display:flex;align-items:center;gap:.5rem;background:var(--surface-2);border:1px solid var(--border);border-radius:22px;padding:.48rem .9rem;color:var(--muted)}
.brandbar__search i{font-size:.95rem}
.brandbar__search input{border:0;background:none;outline:none;font:inherit;font-size:.85rem;color:var(--text);width:100%}
@media(max-width:860px){.brandbar__search{display:none}}

/* C: Brand Ribbon — pita navy tipis, brand satu baris */
.brandbar--ribbon .brandbar__inner{padding-top:.28rem;padding-bottom:.28rem;min-height:65px}
.brandbar--ribbon .brandbar__logo{width:34px;height:34px;padding:3px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.brandbar--ribbon .brandbar__logo img{width:100%;height:100%;object-fit:contain}
.brandbar--ribbon .brandbar__brand-line{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;min-width:0}
.brandbar--ribbon .brandbar__brand-line strong{font-size:.9rem;font-weight:700;color:#fff;white-space:nowrap}
.brandbar--ribbon .brandbar__sep{color:var(--navy-text)}
.brandbar--ribbon .brandbar__eyebrow{margin:0;color:var(--navy-text)}
.brandbar--ribbon .brandbar__icon{font-size:1rem}
@media(max-width:600px){.brandbar--ribbon .brandbar__sep,.brandbar--ribbon .brandbar__brand-line .brandbar__eyebrow{display:none}}

/* ===== Header helper bersama (Majestic/Spica/Serein) ===== */
.brandbar__title-sm{font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.15}
/* Brand dua baris (nama penuh + label sub-sistem) untuk header ringkas. */
.brandbar__brand-line{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.brandbar__brand{min-width:0}
.brandbar__search--lg{flex:1 1 420px;max-width:560px;margin:0 auto}
.brandbar__dot{
    position:absolute;top:-5px;right:-6px;min-width:15px;height:15px;padding:0 3px;
    border-radius:8px;background:var(--danger);color:#fff;font-size:.58rem;font-weight:700;
    display:grid;place-items:center;line-height:1;border:2px solid #fff;
}
.brandbar__welcome{display:block;font-size:.82rem;line-height:1.2}

/* Dasar untuk header terang (Majestic & Serein) */
.brandbar--majestic,.brandbar--serein{
    background:#fff;background-image:none;color:var(--text);
    border-bottom:1px solid var(--border);box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.brandbar--majestic .brandbar__logo,.brandbar--serein .brandbar__logo{
    background:#fff;border:1px solid var(--border);box-shadow:none;
}
.brandbar--majestic .brandbar__icon,.brandbar--serein .brandbar__icon{color:var(--muted);font-size:1.25rem}
.brandbar--majestic .brandbar__icon:hover,.brandbar--serein .brandbar__icon:hover{color:var(--brand)}
.brandbar--majestic .user-menu .dropdown-toggle,.brandbar--serein .user-menu .dropdown-toggle{color:var(--text)}
.brandbar--majestic .user-menu__name,.brandbar--serein .user-menu__name{color:var(--text)}
.brandbar--majestic .user-menu__role,.brandbar--serein .user-menu__role{color:var(--muted)}
.brandbar--majestic .user-menu__icon,.brandbar--serein .user-menu__icon{color:var(--brand)}
.brandbar--majestic .user-menu .dropdown-toggle::after,.brandbar--serein .user-menu .dropdown-toggle::after{border-top-color:var(--muted)}

/* Majestic — header putih, logo kiri, search besar di tengah, ikon+profil kanan */
.brandbar--majestic .brandbar__inner{min-height:72px;gap:1.5rem}
.brandbar--majestic .brandbar__logo{width:44px;height:44px}
.brandbar--majestic .brandbar__title-sm{color:var(--text)}

/* Serein — header putih ringkas, logo kiri, ikon+profil+aplikasi kanan (tanpa search) */
.brandbar--serein .brandbar__inner{min-height:64px}
.brandbar--serein .brandbar__logo{width:40px;height:40px}
.brandbar--serein .brandbar__title-sm{color:var(--brand)}

/* Spica — banner gradasi + sapaan, search di tengah, teks terang */
.brandbar--spica{
    background-color:#134e4a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.2'%3E%3Ccircle cx='36' cy='36' r='30'/%3E%3Ccircle cx='0' cy='0' r='30'/%3E%3Ccircle cx='72' cy='0' r='30'/%3E%3Ccircle cx='0' cy='72' r='30'/%3E%3Ccircle cx='72' cy='72' r='30'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(120deg,#134e4a 0%,#155e75 45%,#1e3a8a 100%);
    background-repeat:repeat,no-repeat;background-position:center,center;
    color:#fff;
}
.brandbar--spica .brandbar__inner{min-height:96px;gap:1.5rem}
.brandbar--spica .brandbar__logo{width:48px;height:48px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);box-shadow:none}
.brandbar--spica .brandbar__brand-line{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.brandbar--spica .brandbar__title-sm{color:#fff}
.brandbar--spica .brandbar__welcome{color:rgba(255,255,255,.85)}
.brandbar--spica .brandbar__icon{color:rgba(255,255,255,.85);font-size:1.2rem}
.brandbar--spica .brandbar__icon:hover{color:#fff}
.brandbar--spica .brandbar__dot{border-color:transparent}
.brandbar--spica .brandbar__search{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}
.brandbar--spica .brandbar__search input{color:#fff}
.brandbar--spica .brandbar__search input::placeholder{color:rgba(255,255,255,.75)}
.brandbar--spica .brandbar__search i{color:rgba(255,255,255,.85)}
.brandbar--spica .user-menu .dropdown-toggle{color:#fff}
.brandbar--spica .user-menu__name{color:#fff}
.brandbar--spica .user-menu__role{color:rgba(255,255,255,.82)}
.brandbar--spica .user-menu__icon{color:#fff}
.brandbar--spica .user-menu .dropdown-toggle::after{border-top-color:rgba(255,255,255,.8)}
@media(max-width:600px){.brandbar--spica .brandbar__welcome{display:none}}

/* ===== Varian Menu Atas (setting MAIN_NAV) ===== */
/* B: Light Editorial — tab garis-bawah, jarak lega, tanpa pil */
.mainnav--light .navbar-nav{gap:.3rem}
.mainnav--light .nav-link{border-radius:.4rem;padding:.6rem .6rem;border-bottom:2px solid transparent}
/* Semua state kontras tinggi & konsisten (teks indigo gelap, bukan putih di indigo) */
.mainnav--light .nav-link:hover{background:var(--brand-soft);color:var(--brand-700)}
.mainnav--light .nav-link.active{background:transparent;color:var(--brand-700);border-radius:0;border-bottom-color:var(--brand);font-weight:600}
.mainnav--light .nav-link.show,
.mainnav--light .show>.nav-link{background:var(--brand-soft);color:var(--brand-700);font-weight:600}
.mainnav--light .nav-link.show:hover{background:var(--brand-soft);color:var(--brand-700)}
@media(min-width:992px){
    .mainnav--light .navbar-nav{gap:1rem}
    .mainnav--light .nav-link{border-radius:0;padding-left:.2rem;padding-right:.2rem}
    .mainnav--light .nav-link:hover{background:transparent;color:var(--brand-700)}
    .mainnav--light .nav-link.show,.mainnav--light .show>.nav-link{background:transparent;color:var(--brand-700);border-bottom-color:var(--brand)}
}

/* C: Brand Editorial — bar warna brand primary + tab garis-bawah editorial (teks terang) */
.mainnav--brand-editorial{
    background:var(--brand);
    border-bottom:0;
    box-shadow:0 2px 10px rgba(15,23,42,.18);
}
/* SIAKAD: tetap memakai warna navy sebelumnya (subsistem lain ikut brand primary) */
[data-subsystem="indigo"] .mainnav--brand-editorial{background:var(--navy)}
.mainnav--brand-editorial .navbar-nav{gap:.15rem}
.mainnav--brand-editorial .nav-link{
    position:relative;
    color:rgba(255,255,255,.82);
    font-weight:500;
    font-size:.82rem;
    letter-spacing:.01em;
    padding:.6rem 1.15rem;
    border-radius:.5rem;
    transition:color .18s ease, background-color .18s ease;
}
.mainnav--brand-editorial .nav-link:hover{color:#fff;background:rgba(255,255,255,.10)}
.mainnav--brand-editorial .nav-link.active{color:#fff;font-weight:600;background:rgba(255,255,255,.14)}
.mainnav--brand-editorial .nav-link.show,
.mainnav--brand-editorial .show>.nav-link{color:#fff;font-weight:600;background:rgba(255,255,255,.16)}
.mainnav--brand-editorial .nav-link.show:hover{background:rgba(255,255,255,.16);color:#fff}
.mainnav--brand-editorial .nav-link--ghost{color:rgba(255,255,255,.82)}
.mainnav--brand-editorial .nav-link--ghost:hover{color:#fff}
.mainnav--brand-editorial .navbar-toggler{color:#fff}
/* Ikon dropdown: ganti segitiga bawaan dengan chevron yang berputar saat terbuka */
.mainnav--brand-editorial .dropdown-toggle::after{
    content:"\f282";
    font-family:"bootstrap-icons";
    border:0;
    font-size:.62rem;
    line-height:1;
    margin-left:.5rem;
    opacity:.85;
    vertical-align:middle;
    transition:transform .2s ease, opacity .2s ease;
}
.mainnav--brand-editorial .show>.dropdown-toggle::after,
.mainnav--brand-editorial .dropdown-toggle.show::after{transform:rotate(180deg);opacity:1}

/* Desktop: tab full-height + indikator garis-bawah beranimasi (rata dasar bar) */
@media(min-width:992px){
    .mainnav--brand-editorial .navbar-nav{gap:.15rem;padding:0}
    .mainnav--brand-editorial .nav-link{
        border-radius:0;
        padding:.95rem 1.35rem;
        background:transparent;
    }
    .mainnav--brand-editorial .nav-link::before{
        content:"";
        position:absolute;left:1.15rem;right:1.15rem;bottom:0;height:3px;
        background:#fff;border-radius:3px 3px 0 0;
        opacity:0;transform:scaleX(0);transform-origin:center;
        transition:transform .2s ease, opacity .2s ease;
    }
    .mainnav--brand-editorial .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
    .mainnav--brand-editorial .nav-link:hover::before{opacity:.45;transform:scaleX(1)}
    .mainnav--brand-editorial .nav-link.active{background:transparent;color:#fff}
    .mainnav--brand-editorial .nav-link.active::before{opacity:1;transform:scaleX(1)}
    .mainnav--brand-editorial .nav-link.show,
    .mainnav--brand-editorial .show>.nav-link{background:rgba(255,255,255,.10);color:#fff}
    .mainnav--brand-editorial .nav-link.show::before,
    .mainnav--brand-editorial .show>.nav-link::before{opacity:0}
}

/* ===== Header tabel bertingkat + badge status pengisian ===== */
.datatable thead .th-group{border-bottom:1px solid rgba(255,255,255,.28);font-weight:600}
.datatable thead .th-sub{font-weight:500;font-size:.72rem;letter-spacing:.01em}
.dash-table thead .th-group{border-bottom:1px solid rgba(255,255,255,.28)}
.fill-badge{display:inline-block;font-size:.7rem;font-weight:600;padding:.18rem .55rem;border-radius:6px;white-space:nowrap}
.fill-badge--yes{background:#dcfce7;color:#166534}
.fill-badge--no{background:#f1f5f9;color:#64748b}

/* ============================================================
   Beranda personal mahasiswa & dosen (SEVIMA-style)
   ============================================================ */
.brd-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.brd-card__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--border)}
.brd-card__title{font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:.5rem}
.brd-card__title i{color:var(--brand)}
.brd-card__body{padding:1.1rem}

/* Day selector */
.brd-daybar{display:flex;gap:.4rem;flex-wrap:wrap;padding:.7rem 1.1rem;border-bottom:1px solid var(--border);background:var(--surface-2)}
.brd-daybtn{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.3rem .8rem;font-size:.82rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:.15s}
.brd-daybtn:hover{border-color:var(--brand);color:var(--brand)}
.brd-daybtn.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.brd-daybtn__n{display:inline-block;min-width:1.2em;text-align:center;font-size:.72rem;background:rgba(0,0,0,.12);border-radius:999px;padding:0 .35em;margin-left:.25rem}
.brd-daybtn.is-active .brd-daybtn__n{background:rgba(255,255,255,.28)}

/* Jadwal kuliah item (mahasiswa) */
.jk-item{display:flex;gap:1rem;padding:.9rem 0;border-bottom:1px dashed var(--border)}
.jk-item:last-child{border-bottom:0}
.jk-item__time{flex:0 0 4.2rem;text-align:center;color:var(--brand-600);font-weight:700;font-size:.92rem;line-height:1.25;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.jk-item__time i{font-size:1rem;color:var(--text-muted)}
.jk-item__main{flex:1 1 auto;min-width:0}
.jk-item__title{font-weight:600;color:var(--text);margin-bottom:.25rem}
.jk-item__meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:var(--text-muted);font-size:.82rem;margin-bottom:.4rem}
.jk-item__meta i{margin-right:.2rem}
.jk-item__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.jk-tag{font-size:.72rem;font-weight:600;padding:.2rem .5rem;border-radius:6px;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
.jk-tag--sks{background:var(--brand-soft);color:var(--brand-700);border-color:transparent}
.jk-tag--pres{background:#dcfce7;color:#166534;border-color:transparent}
.jk-item__aside{flex:0 0 auto;align-self:flex-start}

/* Hero side-brief */
.brd-hero{background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.brd-hero--teal{background:linear-gradient(135deg,#0d9488,#115e59)}
.brd-hero__hi{font-size:1.05rem;font-weight:700;line-height:1.3}
.brd-hero__sub{opacity:.9;font-size:.85rem;margin-top:.15rem}
.brd-hero__stats{display:flex;gap:.5rem;margin:.9rem 0 .6rem}
.brd-hero__stats>div{flex:1;background:rgba(255,255,255,.14);border-radius:var(--radius-sm);padding:.5rem;text-align:center}
.brd-hero__num{display:block;font-size:1.2rem;font-weight:700;line-height:1}
.brd-hero__lbl{display:block;font-size:.7rem;opacity:.85;margin-top:.2rem}
.brd-hero__meta{font-size:.76rem;opacity:.82;border-top:1px solid rgba(255,255,255,.2);padding-top:.55rem}

/* Tagihan */
.tgh-total{font-size:1.35rem;font-weight:700;color:var(--danger);margin-bottom:.6rem}
.tgh-row{display:flex;justify-content:space-between;gap:.5rem;font-size:.85rem;padding:.35rem 0;border-bottom:1px dashed var(--border)}
.tgh-row:last-child{border-bottom:0}
.empty-state--ok i{color:var(--success)}

/* Kalender ringkas */
.kal-row{display:flex;gap:.65rem;align-items:flex-start;padding:.45rem 0}
.kal-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;margin-top:.35rem}
.kal-dot--green{background:var(--success)}.kal-dot--rose{background:var(--danger)}.kal-dot--amber{background:var(--warning)}
.kal-t{font-size:.82rem;font-weight:600;color:var(--text)}
.kal-d{font-size:.8rem;color:var(--text-muted)}

/* Presensi / QR (dosen) */
.pres-wrap{display:flex;gap:1.2rem;flex-wrap:wrap}
.pres-qr{flex:0 0 8rem;height:8rem;border:2px dashed var(--border-strong);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:var(--text-muted);background:var(--surface-2)}
.pres-qr i{font-size:2.6rem}
.pres-qr span{font-size:.72rem}
.pres-info{flex:1 1 14rem;min-width:0}
.pres-status__lbl{font-size:.82rem;font-weight:600;margin-bottom:.4rem}
.pres-bar{display:flex;height:.85rem;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.pres-seg{height:100%}
.pres-seg--h{background:#16a34a}.pres-seg--i{background:#0891b2}.pres-seg--s{background:#d97706}.pres-seg--a{background:#dc2626}
.pres-legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.76rem;color:var(--text-muted);margin-top:.5rem}
.pres-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.25rem}
.pres-dot--h{background:#16a34a}.pres-dot--i{background:#0891b2}.pres-dot--s{background:#d97706}.pres-dot--a{background:#dc2626}

/* Jadwal semester (dosen) */
.js-day{display:flex;gap:1rem;padding:.7rem 0;border-bottom:1px dashed var(--border)}
.js-day:last-child{border-bottom:0}
.js-day__name{flex:0 0 5rem;font-weight:600;color:var(--brand-600);font-size:.85rem;padding-top:.3rem}
.js-day__items{flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem}
.js-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem;background:var(--surface)}
.js-card__top{display:flex;justify-content:space-between;font-size:.76rem;color:var(--text-muted);margin-bottom:.3rem}
.js-card__title{font-weight:600;font-size:.9rem;color:var(--text)}
.js-card__meta{font-size:.76rem;color:var(--text-muted);margin:.15rem 0 .5rem}
.js-card__actions{display:flex;flex-wrap:wrap;gap:.3rem}
.btn-xs{--bs-btn-font-size:.72rem}

/* Bimbingan grid (dosen) */
.bmb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.bmb-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem;text-align:center;text-decoration:none;color:inherit;transition:.15s}
a.bmb-item:hover{border-color:var(--brand);background:var(--brand-soft)}
.bmb-num{display:block;font-size:1.3rem;font-weight:700;color:var(--brand-700)}
.bmb-lbl{display:block;font-size:.72rem;color:var(--text-muted)}

/* Tanggungan dosen */
.tgd-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px dashed var(--border);font-size:.85rem}
.tgd-row:last-child{border-bottom:0}
.tgd-badge{min-width:1.6rem;text-align:center;font-size:.75rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--surface-2);color:var(--text-muted)}
.tgd-badge.is-due{background:#fef3c7;color:#92400e}

/* ============================================================
   Font aplikasi (self-hosted, dipilih via setting UI_FONT)
   ============================================================ */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-500.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/roboto-600.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/nunito-400.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/nunito-500.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/nunito-600.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/nunito-700.woff2") format("woff2")}

:root{--app-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body.app-font-inter{--app-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body.app-font-poppins{--app-font:"Poppins",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body.app-font-roboto{--app-font:"Roboto",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif}
body.app-font-nunito{--app-font:"Nunito",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body.app-font-system{--app-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* ============================================================
   Pewarnaan komponen Bootstrap (dipindah dari bootstrap.preset.css).
   Preset kini hanya mengatur ukuran/bentuk; SEMUA warna komponen di sini
   agar tidak tumpang tindih (satu sumber pewarnaan).
   ============================================================ */
.badge.text-bg-primary,
.badge.bg-primary { background-color: var(--brand) !important; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-600);
    --bs-btn-active-border-color: var(--brand-600);
}
.btn:focus-visible,
.btn.focus-visible { outline: none; box-shadow: 0 0 0 .2rem var(--brand-ring); }

.form-control,
.form-select { border-color: var(--border-strong); color: var(--text); }
.form-control:focus,
.form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem var(--brand-ring); }
.form-label { color: var(--text); }

.dropdown-menu { border-color: var(--border); }
.dropdown-item { color: var(--text); }
.dropdown-item i { color: var(--text-muted); }
.dropdown-item:hover { background: var(--brand-soft); color: var(--brand-700); }
.dropdown-item:hover i { color: var(--brand); }
.dropdown-item.active,
.dropdown-item:active { background: var(--brand); color: #fff; }
.dropdown-item.active i,
.dropdown-item:active i { color: #fff; }
.dropdown-header { color: var(--text-soft); }

.table { --bs-table-color: var(--text); }
.table > thead th { background: var(--brand); color: #fff; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .12); }
.table > thead th:last-child { border-right: 0; }
.table > thead th a, .table > thead th a:hover { color: #fff; }
.table > tbody td { border-bottom-color: var(--border); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--brand-soft); }
.table tfoot td { background: var(--surface-2); border-top: 1px solid var(--border); }

.pagination {
    --bs-pagination-color: var(--text);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--brand-ring);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-color: var(--brand-700);
    --bs-pagination-hover-bg: var(--brand-soft);
}

/* ============ Workspace Mata Kuliah (RPS, gaya SEVIMA) ============ */
.ws-search { display: flex; align-items: center; gap: .5rem; position: relative; max-width: 560px; }
.ws-search > .bi-search:first-child {
    position: absolute; left: .75rem; color: #f59e0b; pointer-events: none; font-size: .95rem;
}
.ws-search input {
    flex: 1; border: 1px solid var(--border); border-radius: .5rem;
    padding: .5rem .75rem .5rem 2.1rem; font-size: .85rem; background: #fff;
}
.ws-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

.ws-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.ws-side { flex: 0 0 220px; width: 220px; }
.ws-content { flex: 1 1 auto; min-width: 0; }
.ws-tabs { border: 1px solid var(--border); border-radius: .6rem; overflow: hidden; }
.ws-tab {
    display: block; padding: .7rem 1rem; font-size: .86rem; color: #334155;
    text-decoration: none; border-bottom: 1px solid var(--border); background: #fff;
    transition: background .12s, color .12s;
}
.ws-tabs li:last-child .ws-tab { border-bottom: 0; }
.ws-tab:hover { background: var(--brand-soft); color: var(--brand-600); }
.ws-tab.is-active { color: var(--brand); font-weight: 600; background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand); }

@media (max-width: 767.98px) {
    .ws-layout { flex-direction: column; }
    .ws-side { width: 100%; flex-basis: auto; }
}

/* Ringkasan & read-view (dt/dd sejajar) */
.ws-info__list > div, .ws-read__list > div { padding: .3rem 0; border-bottom: 1px dashed #e3e8ef; }
.ws-info__list dt, .ws-read__list dt {
    flex: 0 0 42%; max-width: 42%; font-weight: 600; color: var(--brand-700); margin: 0;
}
.ws-info__list dd, .ws-read__list dd { flex: 1; margin: 0; color: #1f2937; }
.ws-read__list--stack dt { flex-basis: 22%; max-width: 22%; }
.ws-read__list--full dt { flex-basis: 21%; max-width: 21%; }
.ws-pre { white-space: pre-line; }
.ws-obj { display: flex; gap: .6rem; margin-bottom: .9rem; }
.ws-obj__num { flex: 0 0 1.4rem; color: #64748b; }

.ws-section {
    font-size: .95rem; font-weight: 700; color: #16a34a; margin: 1.4rem 0 .6rem;
    padding-bottom: .35rem; border-bottom: 2px solid #16a34a;
}
.ws-section--green { color: #16a34a; border-color: #16a34a; }
.ws-section--sm { font-size: .9rem; color: var(--brand-700); border-color: var(--brand); margin: .6rem 0 .5rem; }
.mk-total > td { background: var(--brand-soft); }
.mk-add label { color: var(--brand-700); }

/* Manajemen Capaian */
.capaian-badge { display: inline-block; min-width: 34px; padding: .1rem .5rem; border-radius: .4rem;
    font-weight: 600; font-size: .8rem; }
.capaian-badge.is-ok { background: #dcfce7; color: #15803d; }
.capaian-badge.is-no { background: #fee2e2; color: #b91c1c; }
.capaian-matrix th.th-sub { min-width: 46px; }
.mku-tag, .incomplete-tag { display: inline-block; margin-top: .3rem; margin-right: .3rem;
    padding: .05rem .45rem; border-radius: .3rem; font-size: .68rem; font-weight: 600;
    background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.incomplete-tag { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }

/* Tahun Kurikulum workspace */
.ws-tab--header { font-weight: 700; color: #334155; cursor: default; background: #f1f5f9; }
.ws-tab--header:hover { background: #f1f5f9; color: #334155; }
.ws-tab--child { padding-left: 1.6rem; font-size: .82rem; }
.ws-tab--child .bi { color: #94a3b8; margin-right: .2rem; }
.ketentuan-tabs .nav-link { border-radius: .4rem .4rem 0 0; color: #475569; font-size: .84rem;
    background: #eef2f7; margin-right: .25rem; padding: .45rem 1rem; }
.ketentuan-tabs .nav-link.active { background: var(--brand); color: #fff; }
.table-group-row td { background: #f1f5f9 !important; }

.ws-note { border-radius: .5rem; padding: .8rem 1rem; font-size: .85rem; }
.ws-note--info { background: #eff6ff; color: #1e40af; border-left: 4px solid #3b82f6; }

/* Form workspace */
.ws-frow__label { font-weight: 600; color: var(--brand-700); font-size: .84rem; padding-top: .4rem; }
.ws-frow__static { display: inline-block; padding: .4rem 0; font-size: .86rem; color: #1f2937; }
.ws-frow .form-check { padding-top: .35rem; }
.ws-frow select, .ws-frow input:not([type=checkbox]) { font-size: .85rem; }