:root {
    --app-primary: #2563eb;
    --app-primary-rgb: 37, 99, 235;
    --app-secondary: #64748b;
    --app-sidebar: #0f172a;
    --app-sidebar-text: #cbd5e1;
    --app-bg: #f1f5f9;
    --app-card: #ffffff;
    --app-header: #ffffff;
    --app-text: #0f172a;
    --app-muted: #64748b;
    --app-border: #e2e8f0;
    --app-radius: 16px;
    --app-shadow: 0 8px 30px rgba(15, 23, 42, .06);
}
* { box-sizing: border-box; }
body { background: var(--app-bg); color: var(--app-text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .92rem; }
a { color: var(--app-primary); }
.app-shell { min-height: 100vh; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: 270px; background: var(--app-sidebar); color: var(--app-sidebar-text); z-index: 1040; display: flex; flex-direction: column; transition: transform .25s ease; }
.app-sidebar-brand { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.app-brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--app-primary), #60a5fa); box-shadow: 0 8px 20px rgba(var(--app-primary-rgb), .24); font-weight: 800; color: #fff; }
.app-brand-title { font-size: .98rem; font-weight: 700; line-height: 1.15; }
.app-brand-subtitle { color: #94a3b8; font-size: .72rem; margin-top: 3px; }
.app-sidebar-menu { overflow-y: auto; padding: 18px 12px; flex: 1; }
.menu-caption { padding: 14px 12px 7px; font-size: .68rem; letter-spacing: .12em; color: #64748b; text-transform: uppercase; font-weight: 800; }
.menu-link { display: flex; align-items: center; gap: 12px; color: var(--app-sidebar-text); text-decoration: none; border-radius: 11px; padding: 10px 12px; margin: 2px 0; font-weight: 550; }
.menu-link i { width: 20px; text-align: center; font-size: 1rem; }
.menu-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.menu-link.active { background: rgba(var(--app-primary-rgb), .22); color: #fff; box-shadow: inset 3px 0 0 var(--app-primary); }
.menu-link.disabled { opacity: .42; pointer-events: none; }
.menu-badge { margin-left: auto; font-size: .63rem; background: rgba(255,255,255,.1); padding: 3px 7px; border-radius: 999px; }
.app-main { min-height: 100vh; margin-left: 270px; }
.app-topbar { background: var(--app-header); height: 76px; display: flex; align-items: center; gap: 14px; padding: 0 26px; backdrop-filter: blur(12px); border-bottom: 1px solid var(--app-border); position: sticky; top: 0; z-index: 1030; }
.topbar-toggle { width: 40px; height: 40px; border: 1px solid var(--app-border); background: #fff; border-radius: 11px; display: none; place-items: center; }
.page-heading { min-width: 0; }
.page-heading h1 { font-size: 1.05rem; margin: 0; font-weight: 750; }
.page-heading .breadcrumb-mini { color: var(--app-muted); font-size: .75rem; margin-top: 2px; }
.user-menu { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 39px; height: 39px; border-radius: 12px; object-fit: cover; background: #dbeafe; color: var(--app-primary); display: grid; place-items: center; font-weight: 800; }
.app-content { padding: 24px 26px 32px; }
.app-card { background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }
.app-card-header { padding: 18px 20px; border-bottom: 1px solid var(--app-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-card-body { padding: 20px; }
.stat-card { height: 100%; padding: 18px; position: relative; overflow: hidden; }
.stat-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--app-primary-rgb), .10); color: var(--app-primary); font-size: 1.18rem; }
.stat-label { color: var(--app-muted); font-size: .78rem; font-weight: 650; margin-top: 14px; }
.stat-value { font-size: 1.65rem; line-height: 1.2; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; }
.stat-note { color: var(--app-muted); font-size: .72rem; margin-top: 6px; }
.btn { border-radius: 10px; font-weight: 650; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); }
.form-control, .form-select { border-color: var(--app-border); border-radius: 10px; min-height: 42px; font-size: .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .12); }
.form-label { font-size: .8rem; font-weight: 700; color: #334155; }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .035em; color: #64748b; background: #f8fafc; border-bottom: 1px solid var(--app-border); white-space: nowrap; }
.table tbody td { vertical-align: middle; border-color: #edf2f7; }
.table-hover tbody tr.js-clickable-row { cursor: pointer; }
.table-hover tbody tr.js-clickable-row:hover { background: #f8fbff; }
.badge-soft-success { color: #047857; background: #d1fae5; }
.badge-soft-warning { color: #b45309; background: #fef3c7; }
.badge-soft-danger { color: #b91c1c; background: #fee2e2; }
.badge-soft-info { color: #0369a1; background: #e0f2fe; }
.badge-soft-secondary { color: #475569; background: #e2e8f0; }
.badge { border-radius: 999px; padding: .45em .7em; font-weight: 700; }
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 80px rgba(15,23,42,.18); }
.modal-header, .modal-footer { border-color: var(--app-border); }
.select2-container--bootstrap-5 .select2-selection { border-radius: 10px !important; border-color: var(--app-border) !important; min-height: 42px !important; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, .9fr) minmax(480px, 1.1fr); background: #fff; }
.login-visual { position: relative; overflow: hidden; padding: 52px; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(96,165,250,.32), transparent 35%), linear-gradient(145deg, #0f172a 15%, var(--app-primary) 140%); display: flex; flex-direction: column; justify-content: space-between; }
.login-visual::after { content: ""; position: absolute; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -170px; bottom: -180px; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); }
.login-copy { position: relative; z-index: 1; max-width: 540px; }
.login-copy h2 { font-size: clamp(2rem, 3vw, 3.3rem); font-weight: 800; letter-spacing: -.045em; }
.login-copy p { color: #cbd5e1; max-width: 500px; line-height: 1.7; }
.login-form-wrap { padding: 42px; display: grid; place-items: center; background: #f8fafc; }
.login-panel { width: min(440px, 100%); background: #fff; border: 1px solid var(--app-border); border-radius: 22px; padding: 30px; box-shadow: 0 16px 50px rgba(15,23,42,.08); }
.login-panel h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.login-logo { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--app-primary), #60a5fa); display: grid; place-items: center; color: #fff; font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; }
.login-meta { color: var(--app-muted); font-size: .82rem; }
.empty-state { padding: 42px 20px; text-align: center; color: var(--app-muted); }
.empty-icon { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; background: #f1f5f9; display: grid; place-items: center; font-size: 1.45rem; color: #64748b; }
.sidebar-overlay { display: none; }
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .topbar-toggle { display: grid; }
    .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 1035; opacity: 0; visibility: hidden; transition: .2s ease; }
    body.sidebar-open .sidebar-overlay { opacity: 1; visibility: visible; }
    .login-page { grid-template-columns: 1fr; }
    .login-visual { display: none; }
    .login-form-wrap { min-height: 100vh; padding: 22px; }
}
@media (max-width: 575.98px) {
    .app-topbar { padding: 0 14px; height: 68px; }
    .app-content { padding: 16px 12px 28px; }
    .user-name { display: none; }
    .app-card-header, .app-card-body { padding: 15px; }
    .login-panel { padding: 23px 18px; border-radius: 18px; }
    .modal-dialog { margin: .5rem; }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: none; }
}
@media print {
    .app-sidebar, .app-topbar, .no-print { display: none !important; }
    .app-main { margin: 0 !important; }
    .app-content { padding: 0 !important; }
    body { background: #fff !important; }
    .app-card { border: 0; box-shadow: none; }
}

/* UPDATE 005 — Toast seperti referensi, compact di kanan atas */
.app-toast-container { z-index: 1095; width: min(385px, calc(100vw - 20px)); pointer-events: none; padding-top: 78px !important; }
.app-toast { pointer-events: auto; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #0f766e; border-radius: 14px; box-shadow: 0 12px 36px rgba(15,23,42,.16); overflow: hidden; min-height: 52px; }
.app-toast-success { border-left-color: #059669; }
.app-toast-danger { border-left-color: #dc2626; }
.app-toast-warning { border-left-color: #d97706; }
.app-toast-info { border-left-color: #0284c7; }
.app-toast .toast-body { padding: 14px 16px; font-size: .88rem; color: #1e293b; line-height: 1.35; }
.app-toast-icon { font-size: 1.05rem; width: 20px; text-align: center; flex: 0 0 20px; }
.app-toast-text { overflow-wrap: anywhere; }
.app-toast-close { width: .72em; height: .72em; padding: .35em; margin-left: 8px; opacity: .55; }

/* UPDATE 005 — Accordion Sidebar persistent */
.app-sidebar-menu { padding-top: 14px; }
.menu-group { margin-bottom: 4px; }
.menu-group-header { width: 100%; border: 0; background: transparent; color: #8eabd0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 8px; font-size: .72rem; letter-spacing: .055em; text-transform: uppercase; font-weight: 800; text-align: left; }
.menu-group-header:hover { color: #dbeafe; }
.menu-group-caret { font-size: .72rem; transition: transform .2s ease; }
.menu-group.open .menu-group-caret { transform: rotate(180deg); }
.menu-group-body { max-height: 0; overflow: hidden; transition: max-height .24s ease; }
.menu-group-body-inner { padding-bottom: 5px; }
.menu-group .menu-link { padding-left: 12px; }
.menu-group .menu-link.active { box-shadow: inset 3px 0 0 var(--app-primary); }

/* System settings */
.setting-section-title { font-size: .9rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.setting-preview-sidebar { border-radius: 14px 14px 0 0; padding: 18px; min-height: 220px; }
.setting-color-row { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; }
.setting-color-row .form-control-color { width: 46px; min-width: 46px; height: 42px; padding: 4px; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 8px 14px; }
.permission-item { border: 1px solid var(--app-border); border-radius: 10px; padding: 10px 12px; background: #fff; }
.permission-group-title { font-size: .75rem; font-weight: 800; color: var(--app-primary); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px; }

@media (max-width: 575.98px) {
  .app-toast-container { padding: 10px !important; padding-top: 78px !important; width: 100%; }
  .app-toast { width: 100%; }
}

/* UPDATE 009B — Sidebar scrollbar hidden + lighter typography (App & Super Admin) */
/* Sidebar tetap bisa di-scroll, tetapi scrollbar visual disembunyikan. */
.app-sidebar { overflow: hidden; }
.app-sidebar-menu {
    overflow-y: auto;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge legacy */
}
.app-sidebar-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Tipografi lebih ringan dan modern, berlaku global untuk App dan Super Admin. */
body { font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
strong, b, .fw-bold, .fw-semibold { font-weight: 600 !important; }

.app-brand-mark { font-weight: 600; }
.app-brand-title { font-weight: 600; }
.menu-caption { font-weight: 500; }
.menu-group-header { font-weight: 500; }
.menu-link { font-weight: 400; }
.page-heading h1 { font-weight: 600; }
.user-avatar { font-weight: 600; }
.user-name .fw-bold { font-weight: 500 !important; }
.stat-label { font-weight: 500; }
.stat-value { font-weight: 600; }
.btn { font-weight: 500; }
.form-label { font-weight: 500; }
.table thead th { font-weight: 500; }
.badge { font-weight: 500; }
.setting-section-title { font-weight: 600; }
.permission-group-title { font-weight: 500; }
.login-copy h2,
.login-panel h1,
.login-logo { font-weight: 600; }

/* Bootstrap kadang memberi bobot tinggi lewat utility/komponen. */
.dropdown-item,
.nav-link,
.card-title,
.modal-title,
.accordion-button { font-weight: 400; }

/* UPDATE 009C — Modal form scroll + image upload preview/compression */
/* Bootstrap modal-dialog-scrollable mengharapkan body sebagai flex child langsung.
   Pada project ini body berada di dalam <form>, jadi form ikut dibuat flex agar bagian
   bawah modal selalu bisa discroll dan footer tetap terlihat. */
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1.5rem);
    overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 1.5rem);
    overflow: hidden;
    flex: 1 1 auto;
}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex: 0 0 auto;
    background: var(--app-card);
    z-index: 2;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    box-shadow: 0 -8px 18px rgba(15,23,42,.035);
}

.image-upload-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    padding: 10px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #f8fafc;
}
.image-upload-preview.d-none { display: none !important; }
.image-upload-thumb {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    border-radius: 10px;
    overflow: hidden;
    background: #e2e8f0;
    border: 1px solid #dbe2ea;
}
.image-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-upload-info { min-width: 0; }
.image-upload-name { font-size: .82rem; font-weight: 500; color: #1e293b; }
.image-upload-size,
.image-upload-dimension { line-height: 1.35; }
.image-upload-badge { flex: 0 0 auto; align-self: flex-start; }

@media (max-width: 575.98px) {
    .modal-dialog-scrollable .modal-content,
    .modal-dialog-scrollable .modal-content > form {
        max-height: calc(100vh - 1rem);
    }
    .image-upload-preview { align-items: flex-start; }
    .image-upload-thumb { width: 58px; height: 58px; flex-basis: 58px; }
    .image-upload-badge { display: none; }
}

/* Safety net: semua modal yang memakai form tetap dapat discroll walau class
   modal-dialog-scrollable terlewat pada modul berikutnya. */
.modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 1.5rem);
}
.modal-content > form > .modal-body {
    min-height: 0;
    overflow-y: auto;
}
.modal-content > form > .modal-header,
.modal-content > form > .modal-footer { flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .modal-content > form { max-height: calc(100vh - 1rem); }
}

/* UPDATE 009D — RBAC ringkas: 1 fitur = 1 baris, aksi berupa chip/override compact */
.rbac-table thead th {
    background: #f8fafc;
    white-space: nowrap;
}
.rbac-action-option {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-card);
    font-size: .82rem;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}
.rbac-action-option:hover { background: #f8fafc; }
.rbac-action-option .form-check-input { margin-top: 0; }
.rbac-override-card {
    width: 178px;
    padding: 8px 9px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-card);
    transition: border-color .15s ease, background-color .15s ease;
}
.rbac-override-card.is-allowed {
    border-color: rgba(22,163,74,.24);
    background: rgba(22,163,74,.035);
}
.rbac-override-card.is-denied {
    background: #fbfcfe;
}
.rbac-state-select {
    min-width: 155px;
    font-size: .78rem;
}
#rolePermissionAccordion .accordion-button,
#userPermissionAccordion .accordion-button {
    font-weight: 500;
    background: var(--app-card);
    box-shadow: none;
}
#rolePermissionAccordion .accordion-button:not(.collapsed),
#userPermissionAccordion .accordion-button:not(.collapsed) {
    color: var(--app-primary);
    background: rgba(59,130,246,.04);
}
@media (max-width: 767.98px) {
    .rbac-override-card { width: 100%; max-width: 220px; }
    .rbac-table td { min-width: 180px; }
}

/* ========================================================================
   UPDATE 009E — MOBILE FIRST RESPONSIVE HARDENING
   Berlaku untuk App Tenant dan Super Admin.
   Tujuan: tidak auto-zoom saat input, tanpa horizontal body scroll,
   header/sidebar compact, modal keyboard-safe, tabel menjadi card mobile.
   ======================================================================== */

/* Basic containment: perbaiki sumber overflow tanpa sekadar menyembunyikannya. */
html { width: 100%; max-width: 100%; }
body { width: 100%; max-width: 100%; }
.app-shell,
.app-main,
.app-content,
.app-card,
.app-card-header,
.app-card-body,
.row > *,
.d-flex > * { min-width: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }
pre, code, .text-break-mobile { overflow-wrap: anywhere; word-break: break-word; }
.input-group,
.input-group > .form-control,
.input-group > .form-select,
.select2-container { min-width: 0; max-width: 100%; }
.select2-container { width: 100% !important; }
.select2-dropdown { max-width: calc(100vw - 16px); }
.dropdown-menu { max-width: calc(100vw - 20px); }

/* Touch targets yang tetap compact. */
.btn:not(.btn-sm) { min-height: 42px; }
.topbar-toggle { touch-action: manipulation; }
.menu-link,
.menu-group-header,
.btn,
.form-check-input,
.dropdown-item { touch-action: manipulation; }

/* Tabel regular diberi class mobile-card-table oleh app.js. */
.mobile-card-wrapper { width: 100%; }

@media (max-width: 991.98px) {
    .app-sidebar {
        width: min(86vw, 300px);
        max-width: 300px;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 18px 0 46px rgba(15,23,42,.16);
    }
    body.sidebar-open { overflow: hidden; }
    .app-sidebar-brand { min-height: 68px; padding: 12px 16px; }
    .app-sidebar-menu { padding: 10px 10px 14px; overscroll-behavior: contain; }
    .menu-group-header { min-height: 42px; padding: 10px; }
    .menu-link { min-height: 42px; padding: 9px 10px; font-size: .88rem; }

    .app-main { width: 100%; max-width: 100%; }
    .app-topbar {
        min-height: 64px;
        height: calc(64px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 14px 0;
        gap: 10px;
    }
    .topbar-toggle { width: 40px; height: 40px; flex: 0 0 40px; }
    .page-heading { flex: 1 1 auto; overflow: hidden; }
    .page-heading h1 {
        font-size: 1rem;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .breadcrumb-mini {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .user-menu { flex: 0 0 auto; gap: 6px; }
    .user-avatar { width: 38px; height: 38px; border-radius: 11px; }

    .app-content {
        width: 100%;
        max-width: 100%;
        padding: 16px 14px calc(28px + env(safe-area-inset-bottom, 0px));
    }

    .app-card { max-width: 100%; }
    .app-card-header { flex-wrap: wrap; }
    .sticky-top { position: static !important; }
}

@media (max-width: 767.98px) {
    /* iOS Safari melakukan zoom saat focus jika font input <16px.
       Jangan gunakan maximum-scale/user-scalable=no agar aksesibilitas tetap baik. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .select2-container--bootstrap-5 .select2-selection,
    .select2-container--bootstrap-5 .select2-search__field,
    .select2-search--dropdown .select2-search__field {
        font-size: 16px !important;
    }

    .form-control,
    .form-select,
    .select2-container--bootstrap-5 .select2-selection {
        min-height: 44px !important;
    }
    textarea.form-control { min-height: 88px !important; }
    .form-label { font-size: .78rem; margin-bottom: 5px; }
    .form-text, .small { line-height: 1.4; }

    .app-content { padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)); }
    .app-content > .d-flex.flex-wrap.justify-content-between { align-items: flex-start !important; margin-bottom: 14px !important; }
    .app-content > .d-flex.flex-wrap.justify-content-between > div:first-child { flex: 1 1 100%; }
    .app-content > .d-flex.flex-wrap.justify-content-between > .btn,
    .app-content > .d-flex.flex-wrap.justify-content-between > a.btn { flex: 1 1 auto; }

    .app-card { border-radius: 14px; box-shadow: 0 5px 18px rgba(15,23,42,.05); }
    .app-card-header { padding: 13px 14px; gap: 8px; align-items: flex-start; }
    .app-card-body { padding: 14px; }
    .app-card-header .h5,
    .app-card-header h5,
    .app-card-header .fw-bold { line-height: 1.3; }

    h1 { font-size: 1.22rem; }
    h2, .h2 { font-size: 1.15rem; }
    h3, .h3 { font-size: 1.08rem; }
    h4, .h4, h5, .h5 { font-size: 1rem; }
    .stat-card { padding: 14px; min-height: 0; }
    .stat-icon { width: 40px; height: 40px; border-radius: 11px; }
    .stat-label { margin-top: 10px; font-size: .75rem; }
    .stat-value { font-size: 1.35rem; }
    .stat-note { font-size: .7rem; }

    .btn { padding: .55rem .78rem; }
    .btn-sm { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-group, .btn-toolbar { max-width: 100%; flex-wrap: wrap; }

    /* Modal hampir full screen, tetap scroll saat keyboard virtual terbuka. */
    .modal { padding: 0 !important; }
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }
    .modal-dialog-centered { min-height: calc(100dvh - 16px); align-items: flex-start; }
    .modal-content,
    .modal-dialog-scrollable .modal-content,
    .modal-content > form,
    .modal-dialog-scrollable .modal-content > form {
        max-height: calc(100dvh - 16px);
        border-radius: 15px;
    }
    .modal-header { padding: 12px 14px; }
    .modal-title { font-size: 1rem; }
    .modal-body { padding: 14px; -webkit-overflow-scrolling: touch; }
    .modal-footer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
        background: var(--app-card);
    }
    .modal-footer .btn { flex: 1 1 0; min-width: 0; }

    /* Preview upload foto compact pada mobile. */
    .image-upload-preview { gap: 10px; padding: 9px; }
    .image-upload-name { white-space: normal; overflow-wrap: anywhere; }

    /* Toast aman terhadap notch/topbar dan tidak memenuhi layar. */
    .app-toast-container {
        width: 100%;
        max-width: 100%;
        padding: calc(70px + env(safe-area-inset-top, 0px)) 10px 10px !important;
    }
    .app-toast { width: 100%; min-height: 50px; border-radius: 12px; }
    .app-toast .toast-body { padding: 12px 13px; font-size: .84rem; }

    /* Dropdown/select2 tidak keluar viewport. */
    .select2-container--open .select2-dropdown { left: 0; right: auto; }
    .select2-results__option { padding-top: 9px; padding-bottom: 9px; }

    /* Regular data table -> card/list view. Tabel matrix khusus dapat opt-out. */
    .table-responsive.mobile-card-wrapper { overflow: visible; }
    table.mobile-card-table,
    table.mobile-card-table tbody { display: block; width: 100%; }
    table.mobile-card-table thead { display: none; }
    table.mobile-card-table tbody {
        display: grid;
        gap: 10px;
    }
    table.mobile-card-table tbody tr {
        display: block;
        width: 100%;
        background: var(--app-card);
        border: 1px solid var(--app-border);
        border-radius: 13px;
        padding: 10px 12px;
        box-shadow: 0 3px 12px rgba(15,23,42,.035);
    }
    table.mobile-card-table tbody tr.js-clickable-row:active { background: #f8fafc; }
    table.mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(90px, 34%) minmax(0, 1fr);
        gap: 9px;
        align-items: start;
        width: 100%;
        min-width: 0 !important;
        padding: 6px 0;
        border: 0;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    table.mobile-card-table tbody td::before {
        content: attr(data-label);
        color: var(--app-muted);
        font-size: .72rem;
        font-weight: 500;
        line-height: 1.35;
    }
    table.mobile-card-table tbody td.mobile-card-primary {
        display: block;
        padding: 1px 0 9px;
        margin-bottom: 3px;
        border-bottom: 1px solid var(--app-border);
    }
    table.mobile-card-table tbody td.mobile-card-primary::before,
    table.mobile-card-table tbody td.mobile-card-actions::before,
    table.mobile-card-table tbody td[colspan]::before { display: none; }
    table.mobile-card-table tbody td.mobile-card-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        padding-top: 9px;
        margin-top: 3px;
        border-top: 1px dashed var(--app-border);
    }
    table.mobile-card-table tbody td.mobile-card-actions form { margin: 0; }
    table.mobile-card-table tbody td.mobile-card-actions .btn { margin: 0 !important; }
    table.mobile-card-table tbody td[colspan] { display: block; text-align: center !important; }

    /* Tabel yang memang harus matrix tetap scroll halus tanpa scrollbar visual. */
    .table-responsive:not(.mobile-card-wrapper) {
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive:not(.mobile-card-wrapper)::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .rbac-table { min-width: 680px; }

    /* Hindari text-nowrap memaksa card melebar. */
    .mobile-card-table .text-nowrap { white-space: normal !important; }

    /* Login mobile terasa seperti layar aplikasi, bukan desktop yang dikecilkan. */
    .login-form-wrap {
        min-height: 100dvh;
        padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
        align-items: center;
    }
    .login-panel {
        width: 100%;
        max-width: 440px;
        padding: 22px 18px;
        border-radius: 18px;
    }
}

@media (max-width: 575.98px) {
    .app-topbar {
        min-height: 60px;
        height: calc(60px + env(safe-area-inset-top, 0px));
        padding-left: 10px;
        padding-right: 10px;
    }
    .breadcrumb-mini { display: none; }
    .page-heading h1 { font-size: .98rem; }
    .app-content { padding-left: 10px; padding-right: 10px; }
    .app-card-header, .app-card-body { padding-left: 12px; padding-right: 12px; }

    .app-content > .d-flex.flex-wrap.justify-content-between > .btn,
    .app-content > .d-flex.flex-wrap.justify-content-between > a.btn {
        width: 100%;
    }

    .row.g-3 { --bs-gutter-y: .75rem; }
    .row.g-2 { --bs-gutter-y: .6rem; }

    table.mobile-card-table tbody td {
        grid-template-columns: minmax(82px, 32%) minmax(0, 1fr);
        gap: 8px;
    }
}

@media (max-width: 359.98px) {
    .app-content { padding-left: 8px; padding-right: 8px; }
    .app-card-header, .app-card-body { padding: 11px; }
    .stat-card { padding: 12px; }
    .stat-value { font-size: 1.2rem; }
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl { width: calc(100vw - 10px); max-width: calc(100vw - 10px); margin: 5px auto; }
    table.mobile-card-table tbody td { grid-template-columns: 1fr; gap: 2px; }
    table.mobile-card-table tbody td::before { margin-bottom: 1px; }
}

/* ========================================================================
   UPDATE 009F — MASTER DATA BESAR: MOBILE COMPACT LIST
   Desktop tetap tabel. Mobile memakai compact list 64–80px agar 4–6 data
   dapat dipindai dalam satu layar. Pola: Browse -> Detail -> Action.
   ======================================================================== */
.master-browser-desktop { display: block; }
.master-browser-mobile { display: none; }
.master-browser-toolbar .form-label { margin-bottom: 4px; }
.master-browser-summary { color: var(--app-muted); font-size: .78rem; }
.master-browser-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.master-browser-pagination .page-meta { font-size: .76rem; color: var(--app-muted); white-space: nowrap; }
.master-browser-pagination .btn { min-width: 42px; }

@media (max-width: 767.98px) {
    .master-browser-desktop { display: none !important; }
    .master-browser-mobile { display: block !important; }

    .master-browser-toolbar.app-card { box-shadow: none; border-radius: 12px; }
    .master-browser-toolbar .app-card-body { padding: 10px; }
    .master-browser-toolbar .desktop-filter-label { display: none; }
    .master-browser-toolbar .master-search-wrap { order: -1; flex: 0 0 100%; width: 100%; }
    .master-browser-toolbar .master-filter-control { flex: 1 1 calc(50% - 5px); width: calc(50% - 5px); }
    .master-browser-toolbar .master-filter-actions { flex: 0 0 auto; width: auto; }
    .master-browser-toolbar .form-control,
    .master-browser-toolbar .form-select,
    .master-browser-toolbar .select2-container--bootstrap-5 .select2-selection { min-height: 40px !important; }
    .master-browser-toolbar .btn { min-height: 40px; padding-top: .42rem; padding-bottom: .42rem; }

    .master-mobile-list {
        background: var(--app-card);
        border: 1px solid var(--app-border);
        border-radius: 13px;
        overflow: visible;
        box-shadow: 0 4px 16px rgba(15,23,42,.035);
    }
    .master-mobile-item {
        position: relative;
        min-height: 70px;
        display: grid;
        grid-template-columns: 44px minmax(0,1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 9px 9px 9px 11px;
        border-bottom: 1px solid var(--app-border);
        background: var(--app-card);
        cursor: pointer;
    }
    .master-mobile-item:last-child { border-bottom: 0; }
    .master-mobile-item:active { background: #f8fafc; }
    .master-mobile-avatar {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        object-fit: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        font-size: .92rem;
        font-weight: 500;
        color: var(--app-primary);
        background: color-mix(in srgb, var(--app-primary) 10%, white);
        overflow: hidden;
    }
    .master-mobile-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .master-mobile-main { min-width: 0; align-self: center; }
    .master-mobile-name {
        font-size: .88rem;
        line-height: 1.25;
        font-weight: 500;
        color: var(--app-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 2px;
    }
    .master-mobile-meta,
    .master-mobile-context {
        font-size: .71rem;
        line-height: 1.3;
        color: var(--app-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 2px;
    }
    .master-mobile-side {
        min-width: 54px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        align-self: center;
    }
    .master-mobile-side .badge {
        font-size: .63rem;
        padding: .3rem .43rem;
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .master-mobile-menu-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border: 0;
        color: #64748b;
        background: transparent;
        border-radius: 9px;
    }
    .master-mobile-menu-btn:hover,
    .master-mobile-menu-btn:focus { background: #f1f5f9; color: var(--app-text); }
    .master-mobile-item .dropdown-menu { min-width: 190px; font-size: .82rem; }
    .master-mobile-item .dropdown-item { min-height: 38px; display: flex; align-items: center; gap: 8px; }
    .master-mobile-item .dropdown-item i { width: 18px; text-align: center; }
    .master-mobile-empty { padding: 32px 16px; text-align: center; color: var(--app-muted); font-size: .84rem; }

    .master-browser-footer {
        padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--app-border);
        background: var(--app-card);
    }
    .master-browser-pagination .btn { width: auto; min-width: 40px; min-height: 38px; padding: .38rem .62rem; }
    .master-browser-pagination .page-position { text-align: center; min-width: 0; }
    .master-browser-pagination .page-position strong { display: block; font-size: .78rem; font-weight: 500; color: var(--app-text); }
    .master-browser-pagination .page-position span { display: block; font-size: .68rem; color: var(--app-muted); margin-top: 1px; }

    /* Bila halaman menyediakan compact list khusus, jangan transform tabel desktop menjadi card. */
    .master-browser-desktop .table-responsive { overflow-x: auto; }
}

@media (max-width: 359.98px) {
    .master-mobile-item { grid-template-columns: 40px minmax(0,1fr) auto; gap: 8px; min-height: 66px; padding: 8px; }
    .master-mobile-avatar { width: 40px; height: 40px; flex-basis: 40px; }
    .master-mobile-name { font-size: .84rem; }
    .master-mobile-meta, .master-mobile-context { font-size: .68rem; }
    .master-mobile-side .badge { max-width: 70px; }
}

/* Update 009G - relation-aware delete inspector */
#globalDeleteInspectorModal .modal-body{background:var(--body-bg,#f6f8fb)}
.delete-inspector-head{padding:2px 0}
.delete-relation-table-wrap{background:#fff;max-height:360px;overflow:auto;scrollbar-width:none}
.delete-relation-table-wrap::-webkit-scrollbar{display:none}
.delete-relation-table th{white-space:nowrap;font-weight:500;font-size:.78rem;color:#64748b}
.delete-relation-table td{vertical-align:top}
@media(max-width:767.98px){
  #globalDeleteInspectorModal .modal-dialog{margin:8px;max-width:calc(100% - 16px)}
  #globalDeleteInspectorModal .modal-content{max-height:calc(100dvh - 16px)}
  #globalDeleteInspectorModal .modal-body{padding:12px}
  #globalDeleteInspectorModal .modal-footer{padding:10px 12px;position:sticky;bottom:0;background:#fff;z-index:2}
  .delete-relation-table{min-width:760px}
}

/* =========================================================
   UPDATE 012 — POS / KOPERASI CASHLESS
   ========================================================= */
.pos-cashier-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:stretch}
.pos-cashier-left,.pos-cart-panel{min-height:calc(100dvh - 155px)}
.pos-cart-panel{position:sticky;top:78px;max-height:calc(100dvh - 94px)}
.pos-cart-panel .app-card-body{min-height:0}
.pos-cart-items{overflow-y:auto;min-height:180px;max-height:calc(100dvh - 265px);scrollbar-width:none}
.pos-cart-items::-webkit-scrollbar,.app-tabs-scroll::-webkit-scrollbar,.pos-product-results::-webkit-scrollbar{display:none}
.pos-student-empty{min-height:105px;border:1px dashed var(--bs-border-color);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:12px;color:#64748b;background:rgba(var(--app-primary-rgb),.025)}
.pos-student-empty>i{font-size:1.6rem}
.pos-student-card{border:1px solid rgba(var(--app-primary-rgb),.18);background:rgba(var(--app-primary-rgb),.035);border-radius:14px;padding:13px}
.pos-avatar{width:48px;height:48px;overflow:hidden;flex:0 0 48px}.pos-avatar img{width:100%;height:100%;object-fit:cover}
.pos-mini-stat{border-radius:10px;background:var(--app-card);border:1px solid var(--bs-border-color);padding:9px 10px;height:100%}.pos-mini-stat span{display:block;color:#64748b;font-size:.72rem;margin-bottom:2px}.pos-mini-stat strong{font-size:.88rem;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-product-results{max-height:calc(100dvh - 430px);overflow-y:auto;scrollbar-width:none;border:1px solid var(--bs-border-color);border-radius:12px}
.pos-product-row{width:100%;border:0;border-bottom:1px solid var(--bs-border-color);background:transparent;display:flex;align-items:center;gap:10px;padding:9px 11px;text-align:left;color:inherit}.pos-product-row:last-child{border-bottom:0}.pos-product-row:hover{background:rgba(var(--app-primary-rgb),.045)}
.pos-product-thumb{width:42px;height:42px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;overflow:hidden;flex:0 0 42px}.pos-product-thumb img{width:100%;height:100%;object-fit:cover}.pos-product-thumb i{font-size:1.15rem;color:#64748b}
.pos-cart-empty{height:100%;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#94a3b8;gap:8px}.pos-cart-empty i{font-size:1.7rem}
.pos-cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bs-border-color);font-size:.88rem}.pos-cart-line:last-child{border-bottom:0}
.pos-qty-control{display:flex;align-items:center;border:1px solid var(--bs-border-color);border-radius:9px;overflow:hidden}.pos-qty-control button{border:0;background:#f8fafc;width:30px;height:30px}.pos-qty-control span{min-width:30px;text-align:center;font-size:.78rem}
.pos-cart-summary{background:var(--app-card)}
.app-tabs-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}.app-tabs-scroll .nav-link{white-space:nowrap;font-size:.86rem}
@media(max-width:991.98px){.pos-cashier-grid{grid-template-columns:1fr}.pos-cashier-left,.pos-cart-panel{min-height:0}.pos-cart-panel{position:static;max-height:none}.pos-cart-items{max-height:310px}.pos-product-results{max-height:320px}}
@media(max-width:575.98px){.pos-cashier-grid{gap:10px}.pos-student-card{padding:10px}.pos-mini-stat{padding:8px}.pos-mini-stat strong{font-size:.8rem}.pos-product-row{padding:8px}.pos-cart-line{grid-template-columns:minmax(0,1fr) auto;}.pos-cart-line>strong{grid-column:1/-1;text-align:right;margin-top:-5px}.pos-cashier-left .app-card-body,.pos-cart-panel .app-card-body{padding:12px}.pos-cart-panel{padding-bottom:env(safe-area-inset-bottom)}}

/* ========================================================================
   UPDATE 012B — POS OPERASIONAL + SIDEBAR DESKTOP COLLAPSE
   ======================================================================== */
.app-main { transition: margin-left .25s ease; }
@media (min-width: 992px) {
    .topbar-toggle { display: grid; }
    body.sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
    body.sidebar-collapsed .app-main { margin-left: 0; }
}

.pos-product-container { display: grid; gap: 10px; }
.pos-product-container.pos-view-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); }
.pos-product-container.pos-view-list { grid-template-columns: 1fr; }
.pos-product-card { border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-card); overflow: hidden; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; min-width: 0; }
.pos-product-card:hover { border-color: rgba(var(--app-primary-rgb),.35); box-shadow: 0 8px 22px rgba(15,23,42,.08); transform: translateY(-1px); }
.pos-product-card .pos-product-photo { width: 100%; aspect-ratio: 1.35/1; object-fit: cover; background: #f8fafc; display: block; }
.pos-product-card .pos-product-photo-placeholder { width: 100%; aspect-ratio: 1.35/1; display: grid; place-items: center; background: #f8fafc; color: #94a3b8; font-size: 1.55rem; }
.pos-product-main { padding: 11px 12px; min-width: 0; }
.pos-product-name { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pos-product-meta { font-size: .72rem; color: var(--app-muted); margin-top: 3px; }
.pos-product-price { font-weight: 700; color: var(--app-primary); margin-top: 7px; }
.pos-view-list .pos-product-card { display: grid; grid-template-columns: 74px minmax(0,1fr); align-items: stretch; }
.pos-view-list .pos-product-card .pos-product-photo,
.pos-view-list .pos-product-card .pos-product-photo-placeholder { width: 74px; height: 74px; aspect-ratio: auto; }
.pos-view-list .pos-product-main { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; align-content: center; }
.pos-view-list .pos-product-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; white-space: nowrap; }
.pos-detail-photo { width: min(180px,100%); aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; border: 1px solid var(--app-border); background: #f8fafc; }
.pos-shift-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px; font-size: .76rem; font-weight: 600; background: #ecfdf5; color: #047857; }
.pos-shift-badge.is-closed { background: #fff7ed; color: #c2410c; }

@media (max-width: 575.98px) {
    .pos-product-container.pos-view-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .pos-product-card .pos-product-photo,
    .pos-product-card .pos-product-photo-placeholder { aspect-ratio: 1.2/1; }
    .pos-product-main { padding: 9px 10px; }
    .pos-product-name { font-size: .84rem; }
    .pos-product-price { font-size: .82rem; }
    .pos-view-list .pos-product-card { grid-template-columns: 62px minmax(0,1fr); }
    .pos-view-list .pos-product-card .pos-product-photo,
    .pos-view-list .pos-product-card .pos-product-photo-placeholder { width: 62px; height: 62px; }
}

/* Grid/list switch untuk markup kasir Update 012B. */
.pos-product-results.pos-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(155px,1fr));
    gap: 9px;
    padding: 9px;
    align-content: start;
}
.pos-product-results.pos-view-grid .pos-product-row {
    min-width: 0;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    background: var(--app-card);
}
.pos-product-results.pos-view-grid .pos-product-thumb {
    width: 100%; height: auto; aspect-ratio: 1.4/1; border-radius: 10px; flex: none;
}
.pos-product-results.pos-view-grid .pos-product-thumb img { width:100%;height:100%;object-fit:cover; }
.pos-product-results.pos-view-grid .pos-product-main,
.pos-product-results.pos-view-grid .pos-product-price { width:100%; min-width:0; }
.pos-product-results.pos-view-grid .pos-product-price { display:flex;align-items:end;justify-content:space-between;gap:8px; }
.pos-product-results.pos-view-grid .pos-product-price small { text-align:right; }
.pos-product-results.pos-view-list { display:block; padding:0; }
.pos-product-results.pos-view-list .pos-product-row { display:flex; }
@media(max-width:575.98px){
    .pos-product-results.pos-view-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px}
    .pos-product-results.pos-view-grid .pos-product-row{padding:8px}
}
.pos-detail-photo { width:96px; height:96px; flex:0 0 96px; position:relative; overflow:hidden; display:grid; place-items:center; }
.pos-detail-photo img { position:relative; z-index:2; width:100%; height:100%; object-fit:cover; }
.pos-detail-photo-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#94a3b8; font-size:1.5rem; z-index:1; }
.pos-detail-photo:not(.is-broken) img + .pos-detail-photo-fallback { display:none; }
@media(max-width:575.98px){.pos-detail-photo{width:78px;height:78px;flex-basis:78px}}

/* ========================================================================
   UPDATE 012D — Branding scope + visual menu icon picker
   ======================================================================== */
.app-brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    overflow: visible;
    color: #fff;
}
.app-brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: transparent !important;
    border: 0;
    box-shadow: none;
}
.app-brand-logo-fallback { font-size: 1.45rem; color: #fff; }
.login-brand-logo { width: 54px; height: 54px; flex-basis: 54px; }
.tenant-logo-preview {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0;
    background: transparent;
}
.tenant-logo-preview img { max-width: 220px; max-height: 76px; object-fit: contain; background: transparent; }

.menu-group-label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}
.menu-group-label > i {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
    font-size: .92rem;
}
.menu-group-label > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-current-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(var(--app-primary-rgb), .06);
    color: var(--app-primary);
    font-size: 1.25rem;
    transition: .15s ease;
}
.icon-current-btn:hover { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .12); }
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    gap: 10px;
}
.icon-picker-item {
    min-height: 86px;
    padding: 10px 8px;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: #fff;
    color: #334155;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: .15s ease;
}
.icon-picker-item i { font-size: 1.5rem; color: var(--app-primary); }
.icon-picker-item span { font-size: .68rem; line-height: 1.15; text-align: center; color: var(--app-muted); }
.icon-picker-item:hover,
.icon-picker-item:focus { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .06); outline: none; transform: translateY(-1px); }
.icon-select-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background: #fff;
    color: #334155;
    text-align: left;
}
.icon-select-trigger i { width: 25px; text-align: center; color: var(--app-primary); font-size: 1.15rem; }
.icon-select-trigger span { color: var(--app-muted); font-size: .82rem; }

@media (max-width: 575.98px) {
    .app-brand-logo { width: 40px; height: 40px; flex-basis: 40px; }
    .icon-picker-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
    .icon-picker-item { min-height: 68px; padding: 7px 4px; }
    .icon-picker-item i { font-size: 1.25rem; }
    .icon-picker-item span { display: none; }
}

/* ========================================================================
   UPDATE 012F — RBAC SIMPLE MATRIX + INTERACTION HOTFIX
   ======================================================================== */
.rbac-simple-table > :not(caption) > * > * { padding: .62rem .72rem; }
.rbac-simple-table thead th {
    font-size: .72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .025em;
    white-space: nowrap;
    background: #f8fafc;
}
.rbac-simple-table tbody td { font-size: .84rem; vertical-align: middle; }
.rbac-permission-name { font-weight: 500; color: #0f172a; line-height: 1.25; }
.rbac-permission-desc { margin-top: 2px; max-width: 560px; line-height: 1.25; }
.rbac-simple-table code { font-size: .72rem; color: #e11d48; white-space: normal; overflow-wrap: anywhere; }
.rbac-simple-table .rbac-state-select { min-width: 155px; font-size: .78rem; }
.rbac-simple-table .rbac-effective { min-width: 44px; }
.rbac-group-actions .btn { padding-left: .58rem; padding-right: .58rem; }

.icon-picker-item.is-selected {
    border-color: var(--app-primary);
    background: rgba(var(--app-primary-rgb), .1);
    box-shadow: 0 0 0 2px rgba(var(--app-primary-rgb), .09);
}
.icon-picker-item.is-selected::after {
    content: "✓";
    position: absolute;
    right: 7px;
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--app-primary);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
}
.icon-picker-item { position: relative; }

@media (max-width: 767.98px) {
    .rbac-simple-table .rbac-col-code,
    .rbac-simple-table .rbac-col-template { display: none; }
    .rbac-simple-table > :not(caption) > * > * { padding: .56rem .58rem; }
    .rbac-simple-table tbody td { font-size: .8rem; }
    .rbac-simple-table .rbac-state-select { min-width: 132px; width: 132px; }
    .rbac-permission-desc { display: none; }
    .rbac-group-actions .btn { padding: .32rem .45rem; font-size: .7rem; }
}

/* Update 012H - Pusat Menu / cPanel-style menu launcher */
.menu-launcher-search{overflow:hidden;border:1px solid rgba(148,163,184,.24)}
.menu-launcher-search .form-control{font-size:1rem;background:transparent}
.menu-launcher-search .input-group-text{color:#64748b}
.menu-launcher-search kbd{min-width:24px;text-align:center;background:#f8fafc;color:#64748b;border:1px solid #dbe3ee;box-shadow:none;font-weight:600}
.menu-launcher-section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .65rem;padding:0 .15rem;color:#64748b;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.menu-launcher-section-title>i{color:var(--app-primary);font-size:.92rem}
.menu-launcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:.65rem}
.menu-launcher-item{position:relative;min-width:0;min-height:118px;padding:.9rem .7rem;border:1px solid rgba(148,163,184,.23);border-radius:14px;background:var(--app-card,#fff);color:#0f172a;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease}
.menu-launcher-item:hover,.menu-launcher-item:focus{color:#0f172a;transform:translateY(-2px);border-color:rgba(var(--app-primary-rgb),.32);box-shadow:0 10px 24px rgba(15,23,42,.08);outline:0}
.menu-launcher-icon{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:.55rem;background:rgba(var(--app-primary-rgb),.10);color:var(--app-primary);font-size:1.28rem}
.menu-launcher-name{display:block;width:100%;font-size:.82rem;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.menu-launcher-desc{display:-webkit-box;width:100%;margin-top:.22rem;color:#64748b;font-size:.68rem;line-height:1.25;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:575.98px){
  .menu-launcher-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .menu-launcher-item{min-height:106px;padding:.75rem .55rem;border-radius:12px}
  .menu-launcher-icon{width:40px;height:40px;border-radius:11px;font-size:1.15rem;margin-bottom:.45rem}
  .menu-launcher-name{font-size:.78rem}
  .menu-launcher-desc{font-size:.65rem}
}

/* ========================================================================
   UPDATE 012I — RBAC MATRIX UX (inspirasi aplikasi Pabrik)
   ======================================================================== */
.rbac-list-header{gap:12px;flex-wrap:wrap}
.rbac-role-table thead th,
.rbac-matrix-table thead th{
    font-size:.72rem;
    font-weight:600;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.025em;
    white-space:nowrap;
    background:#f8fafc;
}
.rbac-role-table>:not(caption)>*>*,
.rbac-matrix-table>:not(caption)>*>*{padding:.62rem .72rem}
.rbac-role-table tbody td,
.rbac-matrix-table tbody td{font-size:.82rem}
.rbac-role-table code,
.rbac-matrix-table code{font-size:.7rem;color:#e11d48;white-space:normal;overflow-wrap:anywhere}
.rbac-matrix-card .app-card-header{min-height:54px}
.rbac-matrix-scroll{max-width:100%}
.rbac-matrix-table{min-width:680px}
.rbac-matrix-table .rbac-feature-col{min-width:230px;text-align:left}
.rbac-matrix-table th:not(.rbac-feature-col),
.rbac-matrix-table td:not(:first-child){min-width:74px}
.rbac-matrix-table .form-check-input{
    width:1.02rem;
    height:1.02rem;
    margin:0;
    cursor:pointer;
    vertical-align:middle;
}
.rbac-check-wrap{
    position:relative;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
}
.rbac-check-wrap.is-override{
    background:rgba(245,158,11,.12);
    box-shadow:inset 0 0 0 1px rgba(245,158,11,.35);
}
.rbac-check-wrap.is-override::after{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    right:2px;
    top:2px;
    background:#f59e0b;
}
.rbac-legend{display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;color:#64748b;font-size:.76rem;line-height:1.35}
.rbac-search{width:min(340px,100%)}
.rbac-matrix-table tbody tr:hover td{background:rgba(148,163,184,.055)}
@media (min-width:992px){
    .rbac-matrix-table .rbac-feature-col,
    .rbac-matrix-table tbody td:first-child{
        position:sticky;
        left:0;
        z-index:2;
        background:var(--app-card,#fff);
        box-shadow:1px 0 0 rgba(148,163,184,.16);
    }
    .rbac-matrix-table thead .rbac-feature-col{z-index:3;background:#f8fafc}
    .rbac-matrix-table tbody tr:hover td:first-child{background:#f8fafc}
}
@media (max-width:767.98px){
    .rbac-role-table .rbac-hide-sm{display:none}
    .rbac-role-table>:not(caption)>*>*,
    .rbac-matrix-table>:not(caption)>*>*{padding:.52rem .58rem}
    .rbac-matrix-table{min-width:620px}
    .rbac-matrix-table .rbac-feature-col{min-width:180px}
    .rbac-matrix-card .app-card-header{align-items:flex-start}
    .rbac-matrix-card .app-card-header .btn{font-size:.7rem;padding:.28rem .42rem}
    .rbac-legend{font-size:.7rem;gap:.35rem .7rem}
}