:root {
    --biru: #007991;
    --ungu: #222E50;
    --oren: #439A86;
    --biru-soft: #DFF1F4;
    --ungu-soft: #E7EAF1;
    --oren-soft: #E3F1ED;
    --gelap: #222E50;
    --abu: #64746F;
    --bg: #F4F8F7;
    --putih: #ffffff;
    --sidebar-width: 344px;
    --sidebar-width-collapsed: 0px;
    --navbar-height: 66px;
}

html, body {
    height: 100%;
}

body {
    background: var(--bg);
    font-size: 0.95rem;
    color: var(--gelap);
    overflow: hidden;
}

.guest-bg {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.15), transparent 25%),
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.15), transparent 25%),
        radial-gradient(circle at bottom center, rgba(249, 115, 22, 0.15), transparent 25%),
        linear-gradient(135deg, #eff6ff 0%, #f8fafc 40%, #fff7ed 100%);
    display: flex;
    align-items: center;
}

.login-wrapper {
    max-width: 460px;
    margin: 0 auto;
}

.login-card {
    border-radius: 1.25rem;
}

.login-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--biru), var(--ungu), var(--oren));
    color: white;
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.25);
}

.btn-gradient {
    background: linear-gradient(90deg, var(--biru), var(--ungu), var(--oren));
    border: none;
    color: white;
    font-weight: 700;
    border-radius: 0.85rem;
}

.btn-gradient:hover {
    opacity: 0.95;
    color: white;
}

.admin-navbar {
    min-height: 66px;
    background: linear-gradient(90deg, var(--biru), var(--ungu));
    z-index: 1050;
}

.navbar-brand {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff !important;
}

.nav-toggle-btn {
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.nav-topbar {
    gap: 0.4rem;
}

.nav-topbar .nav-link {
    color: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.nav-topbar .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}

.nav-topbar .nav-link.active {
    background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.28));
    color: #fff;
}

.topbar-user {
    min-width: 160px;
    max-width: 220px;
}

.topbar-user .text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1199.98px) {
    .navbar-brand {
        max-width: 220px;
    }

    .nav-topbar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .nav-topbar .nav-link {
        width: 100%;
        border-radius: 0.85rem;
        padding: 0.75rem 1rem;
    }

    .topbar-user {
        max-width: 100%;
        min-width: 100%;
        padding: 0.25rem 0;
    }
}

@media (max-width: 767.98px) {
    .navbar-brand {
        max-width: 160px;
        font-size: 1rem;
    }

    .admin-navbar .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

.app-shell {
    display: flex;
    height: calc(100vh - var(--navbar-height));
    overflow: hidden;
}

.sidebar-admin {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-right: 1px solid #e2e8f0;
    transition: all 0.25s ease;
    overflow: hidden;
}

.sidebar-inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    scrollbar-width: thin;
}

.sidebar-inner::-webkit-scrollbar {
    width: 8px;
}

.sidebar-inner::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.menu-group-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--abu);
    padding: 0.75rem 0.75rem 0.35rem;
    letter-spacing: 0.05em;
}

.sidebar-link {
    color: #334155;
    border-radius: 0.85rem;
    padding: 0.78rem 0.95rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.sidebar-link:hover {
    background: linear-gradient(90deg, var(--biru-soft), var(--ungu-soft));
    color: var(--ungu);
}

.sidebar-link.active {
    background: linear-gradient(90deg, var(--biru), var(--ungu), var(--oren));
    color: white;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.22);
}

.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
}

.sidebar-collapsed .sidebar-admin {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
    border-right: none;
}

.bg-page {
    background: #f8fafc;
}

.page-header {
    padding: 0.5rem 0 0.75rem;
}

.page-title {
    font-size: 1.85rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    color: var(--gelap);
}

.page-subtitle {
    color: var(--abu);
    margin-bottom: 0;
}

.card-stat {
    border-radius: 1rem;
}

.label-stat {
    color: var(--abu);
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.value-stat {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gelap);
}

.form-control,
.form-select {
    border-radius: 0.85rem;
    border-color: #dbeafe;
    padding: 0.75rem 0.95rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ungu);
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.12);
}

@media (max-width: 991.98px) {
    .nav-topbar {
        display: none !important;
    }

    .sidebar-admin {
        width: 250px;
        min-width: 250px;
    }
}

/* tambahan dari Satuan - Langkah 2 */
.table > :not(caption) > * > * {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.table thead th {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--abu);
    font-weight: 700;
    border-bottom-width: 1px;
}

.card .form-label {
    margin-bottom: 0.5rem;
}

.btn-outline-primary,
.btn-outline-danger,
.btn-outline-secondary {
    border-radius: 0.75rem;
}

.card {
    border-radius: 1rem;
}

.filter-search-box {
    min-width: 220px;
}

@media (min-width: 768px) {
    .filter-search-box {
        min-width: 280px;
    }
}

@media (min-width: 1200px) {
    .filter-search-box {
        min-width: 340px;
    }
}

/* detail */
.detail-section-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ungu);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.detail-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--abu);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.detail-value {
    font-size: 0.98rem;
    color: var(--gelap);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.8rem 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    line-height: 1.45;
}

.detail-value-multiline {
    min-height: 72px;
    align-items: flex-start;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .detail-value {
        min-height: 44px;
        padding: 0.72rem 0.9rem;
        font-size: 0.95rem;
    }

    .detail-value-multiline {
        min-height: 64px;
    }
}

/* =========================================================
   POS / KASIR
   Revisi:
   - Kolom keranjang lebih lebar
   - Item keranjang sejajar: produk | qty | subtotal | hapus
   - Info template + aplikasi lain 2 kolom dan tidak terpotong
   - Ringkasan pembayaran 3 kolom
   ========================================================= */

.pos-root {
    grid-template-columns: minmax(0, 1fr) minmax(530px, 560px) !important;
}

.pos-right {
    min-width: 0 !important;
}

.pos-checkout-title {
    align-items: center !important;
    margin-bottom: 0 !important;
}

.pos-checkout-title h2 {
    font-size: 18px !important;
    line-height: 1.15 !important;
}

.pos-checkout-title p {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.pos-customer-box {
    gap: 7px !important;
}

.pos-customer-pay-row {
    grid-template-columns: minmax(0, 1.35fr) 118px 150px !important;
    gap: 7px !important;
}

.pos-info-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: stretch !important;
}

.pos-template {
    min-height: auto !important;
    height: auto !important;
    padding: 8px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.pos-template b {
    white-space: nowrap !important;
}

.pos-template-warning {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #9a3412 !important;
}

.pos-cart-list {
    padding: 8px !important;
    margin-top: 0 !important;
}

.pos-cart-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 0 !important;
}

.pos-cart-info {
    min-width: 0 !important;
}

.pos-cart-info h4 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 0 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}

.pos-cart-info p {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pos-cart-actions {
    display: grid !important;
    grid-template-columns: 104px 108px 30px !important;
    gap: 7px !important;
    align-items: center !important;
}

.pos-qty {
    gap: 4px !important;
    justify-content: center !important;
}

.pos-qty button {
    width: 27px !important;
    height: 27px !important;
    font-size: 14px !important;
}

.pos-qty input {
    width: 36px !important;
    height: 28px !important;
    font-size: 13px !important;
}

.pos-cart-price {
    font-size: 13px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.pos-remove {
    width: 29px !important;
    height: 29px !important;
    font-size: 14px !important;
}

.pos-summary-box {
    padding: 7px !important;
    margin-bottom: 7px !important;
}

.pos-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.pos-summary-cell {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 6px 7px !important;
}

.pos-summary-cell label,
.pos-summary-cell .pos-summary-label {
    font-size: 10.8px !important;
}

.pos-summary-value {
    font-size: 11.5px !important;
}

.pos-total-cell {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.pos-total-cell .pos-summary-value {
    font-size: 14px !important;
}

.pos-summary-small {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    font-size: 10.8px !important;
    gap: 5px !important;
    margin-top: 5px !important;
}

.pos-action-row {
    gap: 7px !important;
}

.pos-btn {
    height: 39px !important;
}

@media (max-width: 1366px) and (min-width: 1200px) {
    .pos-root {
        grid-template-columns: minmax(0, 1fr) minmax(520px, 540px) !important;
        padding: 10px !important;
        gap: 10px !important;
    }

    .pos-left,
    .pos-right {
        padding: 12px !important;
    }

    .pos-customer-pay-row {
        grid-template-columns: minmax(0, 1.25fr) 112px 140px !important;
    }

    .pos-cart-actions {
        grid-template-columns: 100px 104px 30px !important;
    }

    .pos-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .pos-total-cell {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 1199px) {
    .pos-root {
        grid-template-columns: 1fr !important;
    }

    .pos-customer-pay-row,
    .pos-info-grid,
    .pos-summary-grid,
    .pos-summary-small {
        grid-template-columns: 1fr !important;
    }

    .pos-cart-item {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .pos-cart-actions {
        grid-template-columns: 105px minmax(90px, 1fr) 32px !important;
        width: 100% !important;
    }

    .pos-cart-price {
        text-align: right !important;
    }

    .pos-total-cell {
        grid-column: auto !important;
    }
}

.login-logo {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.login-logo img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    display: block;
}
.navbar-app-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: inline-block;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, .18));
}

/* V6 mobile tightening: navbar, content, tables, forms */
@media (max-width: 767.98px) {
    body { overflow-x: hidden; }
    .admin-navbar .container-fluid { padding-left: 10px; padding-right: 10px; }
    .navbar-brand span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .navbar-app-logo { width: 34px; height: 34px; }
    .topbar-user { text-align: left !important; width: 100%; background: rgba(255,255,255,.12); border-radius: 14px; padding: 9px 11px; }
    .app-shell { display: block !important; }
    .sidebar-admin { width: min(86vw, 320px) !important; }
    .main-content { padding: 12px !important; width: 100% !important; max-width: 100% !important; }
    .page-title { font-size: 1.35rem !important; line-height: 1.2 !important; }
    .page-subtitle { font-size: .88rem !important; }
    .card, .accurate-card, .accurate-panel { border-radius: 16px !important; }
    .table-responsive { border-radius: 14px; }
    table { font-size: .86rem; }
    .btn, .form-control, .form-select { min-height: 40px; }
    .row.g-3 > [class*="col-"], .row.g-2 > [class*="col-"] { margin-bottom: 6px; }
    .modal-dialog { margin: 10px; }
}


/* =========================================================
   V7 - Sidebar bertingkat + ikon modul
   ========================================================= */
.sidebar-admin {
    display: flex;
    align-items: stretch;
    background: #ffffff;
}

.sidebar-rail {
    width: 62px;
    min-width: 62px;
    background: linear-gradient(180deg, #0f172a 0%, #172554 100%);
    color: #fff;
    padding: 10px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.sidebar-rail::-webkit-scrollbar {
    width: 4px;
}

.sidebar-rail-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
}

.sidebar-rail-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.sidebar-rail-btn {
    width: 46px;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    color: rgba(255,255,255,.88);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
}

.sidebar-rail-btn i {
    font-size: 20px;
    line-height: 1;
}

.sidebar-rail-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sidebar-rail-btn:hover,
.sidebar-rail-btn.active {
    background: linear-gradient(135deg, var(--biru), var(--ungu));
    color: #fff;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .35);
    transform: translateY(-1px);
}

.sidebar-inner {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 14px 12px 18px;
}

.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 4px 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sidebar-section-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--biru), var(--ungu));
}

.sidebar-menu-list {
    gap: 4px;
}

.sidebar-group-item {
    margin-top: 6px !important;
}

.sidebar-group > summary.menu-group-title {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 9px;
    user-select: none;
    padding: 9px 9px;
    border-radius: 16px;
    background: #f1f5f9;
    border: 1px solid rgba(226,232,240,.92);
    font-weight: 900;
    color: #0f172a;
    letter-spacing: 0;
    text-transform: none;
    transition: all .18s ease;
}

.sidebar-group > summary.menu-group-title::-webkit-details-marker {
    display: none;
}

.sidebar-group > summary.menu-group-title:hover,
.sidebar-group.active > summary.menu-group-title {
    border-color: rgba(79,70,229,.28);
    background: linear-gradient(90deg, #eef2ff, #eff6ff);
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.sidebar-group.active > summary.menu-group-title .sidebar-icon-box,
.sidebar-link.active .sidebar-icon-box {
    background: rgba(255,255,255,.2);
    color: #fff;
}

.sidebar-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #ffffff;
    color: var(--ungu);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

.sidebar-icon-box i {
    font-size: 18px;
    line-height: 1;
}

.sidebar-label-wrap,
.sidebar-label {
    min-width: 0;
}

.sidebar-label-wrap {
    display: block;
}

.sidebar-label-wrap .sidebar-label,
.sidebar-link .sidebar-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.25;
}

.sidebar-label-wrap small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}

.sidebar-group .group-chevron {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #64748b;
    transition: transform .18s ease, background .18s ease;
}

.sidebar-group[open] > summary .group-chevron {
    transform: rotate(180deg);
    background: rgba(79,70,229,.1);
    color: var(--ungu);
}

.sidebar-group > .sidebar-menu-list {
    margin-top: 7px;
    margin-left: 18px;
    padding-left: 12px;
    border-left: 1px dashed rgba(100,116,139,.28);
}

.sidebar-group-level-2 > summary.menu-group-title,
.sidebar-group-level-3 > summary.menu-group-title {
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    font-size: .9rem;
}

.sidebar-group-level-2 .sidebar-icon-box,
.sidebar-group-level-3 .sidebar-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.sidebar-link {
    gap: 9px;
    color: #334155;
    border-radius: 15px;
    padding: 8px 9px;
    margin-bottom: 4px;
    font-weight: 800;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    border: 1px solid transparent;
}

.sidebar-depth-2 .sidebar-link,
.sidebar-depth-3 .sidebar-link {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 7px 8px;
    font-size: .92rem;
}

.sidebar-depth-2 .sidebar-icon-box,
.sidebar-depth-3 .sidebar-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    box-shadow: none;
}

.sidebar-link:hover {
    border-color: rgba(79,70,229,.18);
    background: linear-gradient(90deg, #eef2ff, #eff6ff);
    color: var(--ungu);
}

.sidebar-link.active {
    background: linear-gradient(135deg, var(--biru), var(--ungu));
    color: white;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.22);
}

.sidebar-link.active .sidebar-icon-box {
    border-color: rgba(255,255,255,.22);
}

@media (max-width: 1199.98px) {
    :root {
        --sidebar-width: 324px;
    }
}

@media (max-width: 991.98px) {
    body {
        overflow: hidden;
    }

    .app-shell {
        position: relative;
        height: calc(100vh - var(--navbar-height));
    }

    .sidebar-admin {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        bottom: 0;
        z-index: 1049;
        width: min(94vw, 340px) !important;
        min-width: min(94vw, 340px) !important;
        max-width: 94vw;
        transform: translateX(0);
        box-shadow: 18px 0 38px rgba(15,23,42,.20);
        border-right: 1px solid #dbeafe;
        transition: transform .23s ease;
    }

    .sidebar-collapsed .sidebar-admin {
        width: min(94vw, 340px) !important;
        min-width: min(94vw, 340px) !important;
        transform: translateX(-104%);
        border-right: 1px solid #dbeafe;
    }

    .sidebar-rail {
        width: 56px;
        min-width: 56px;
        padding: 8px 6px;
    }

    .sidebar-rail-btn {
        width: 42px;
        min-height: 42px;
        border-radius: 13px;
    }

    .sidebar-inner {
        padding: 12px 10px 16px;
    }

    .main-content {
        width: 100%;
        padding: 1rem;
    }

    .page-title {
        font-size: 1.45rem;
    }

    .navbar-brand span {
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
}

@media (max-width: 540px) {
    .admin-navbar {
        min-height: 60px;
    }

    :root {
        --navbar-height: 60px;
    }

    .navbar-app-logo {
        width: 34px !important;
        height: 34px !important;
    }

    .navbar-brand span {
        max-width: 132px;
        font-size: .95rem;
    }

    .main-content {
        padding: .8rem;
    }

    .sidebar-admin {
        width: min(96vw, 336px) !important;
        min-width: min(96vw, 336px) !important;
        max-width: 96vw;
    }

    .sidebar-collapsed .sidebar-admin {
        width: min(96vw, 336px) !important;
        min-width: min(96vw, 336px) !important;
    }

    .sidebar-group > summary.menu-group-title,
    .sidebar-link {
        border-radius: 14px;
    }
}


/* =========================================================
   V8 - Perbaikan sidebar mobile: logo tidak membesar, link tidak polos
   ========================================================= */
.sidebar-admin,
.sidebar-admin * {
    box-sizing: border-box;
}

.sidebar-admin {
    display: flex !important;
    align-items: stretch !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.sidebar-admin a,
.sidebar-admin a:hover,
.sidebar-admin a:focus {
    text-decoration: none !important;
}

.sidebar-admin img {
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
}

.sidebar-rail-logo img {
    width: 32px !important;
    height: 32px !important;
}

.sidebar-inner {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.sidebar-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
}

.sidebar-menu-list .nav-item {
    list-style: none !important;
}

.sidebar-group > summary.menu-group-title,
.sidebar-link {
    text-decoration: none !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.sidebar-link {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
}

.sidebar-icon-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}

.sidebar-icon-box i {
    font-size: 18px !important;
    line-height: 1 !important;
}

.sidebar-icon-box img,
.sidebar-icon-box svg {
    max-width: 22px !important;
    max-height: 22px !important;
}

@media (max-width: 991.98px) {
    .sidebar-rail {
        display: none !important;
    }

    .sidebar-admin {
        width: min(90vw, 310px) !important;
        min-width: min(90vw, 310px) !important;
        max-width: 90vw !important;
    }

    .sidebar-collapsed .sidebar-admin {
        width: min(90vw, 310px) !important;
        min-width: min(90vw, 310px) !important;
        transform: translateX(-104%) !important;
    }

    .sidebar-inner {
        width: 100% !important;
        padding: 12px !important;
    }

    .sidebar-section-title {
        margin: 0 2px 10px !important;
        font-size: 11px !important;
    }

    .sidebar-group > summary.menu-group-title {
        grid-template-columns: 34px minmax(0, 1fr) 22px !important;
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }

    .sidebar-link {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }

    .sidebar-icon-box,
    .sidebar-depth-2 .sidebar-icon-box,
    .sidebar-depth-3 .sidebar-icon-box,
    .sidebar-group-level-2 .sidebar-icon-box,
    .sidebar-group-level-3 .sidebar-icon-box {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        border-radius: 12px !important;
    }

    .sidebar-group > .sidebar-menu-list {
        margin-left: 8px !important;
        padding-left: 8px !important;
    }

    .navbar-app-logo {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }
}

@media (max-width: 420px) {
    .sidebar-admin {
        width: min(92vw, 300px) !important;
        min-width: min(92vw, 300px) !important;
        max-width: 92vw !important;
    }

    .navbar-brand span {
        max-width: 126px !important;
    }
}

/* =========================================================
   V9 - Sidebar kelompok bertingkat model rail + pop-up menu
   ========================================================= */
:root {
    --sidebar-width: 76px !important;
    --sidebar-width-collapsed: 0px !important;
    --sidebar-rail-width: 76px;
    --sidebar-flyout-width: 364px;
}

.app-shell {
    display: flex !important;
    position: relative !important;
}

.sidebar-admin-popout,
.sidebar-admin-popout * {
    box-sizing: border-box !important;
}

.sidebar-admin-popout {
    width: var(--sidebar-rail-width) !important;
    min-width: var(--sidebar-rail-width) !important;
    max-width: var(--sidebar-rail-width) !important;
    flex: 0 0 var(--sidebar-rail-width) !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    border-right: 0 !important;
    z-index: 1060 !important;
}

.sidebar-admin-popout a,
.sidebar-admin-popout a:hover,
.sidebar-admin-popout a:focus {
    text-decoration: none !important;
}

.sidebar-admin-popout .sidebar-rail-popout {
    width: var(--sidebar-rail-width) !important;
    min-width: var(--sidebar-rail-width) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 10px !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    background: linear-gradient(180deg, #0f172a 0%, #172554 55%, #1e3a8a 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.08) !important;
    scrollbar-width: thin !important;
    z-index: 1062 !important;
    position: relative !important;
}

.sidebar-admin-popout .sidebar-rail-logo {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.14) !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 0 10px 0 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.22) !important;
}

.sidebar-admin-popout .sidebar-rail-logo img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
}

.sidebar-admin-popout .sidebar-rail-btn {
    position: relative !important;
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    border: 0 !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    color: rgba(255,255,255,.86) !important;
    background: rgba(255,255,255,.06) !important;
    cursor: pointer !important;
    transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.sidebar-admin-popout .sidebar-rail-btn i {
    font-size: 21px !important;
    line-height: 1 !important;
}

.sidebar-admin-popout .sidebar-rail-btn:hover,
.sidebar-admin-popout .sidebar-rail-btn.active,
.sidebar-admin-popout .sidebar-rail-btn.is-open {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    box-shadow: 0 10px 24px rgba(37,99,235,.32) !important;
    transform: translateY(-1px) !important;
}

.sidebar-admin-popout .sidebar-rail-btn.active::before,
.sidebar-admin-popout .sidebar-rail-btn.is-open::before {
    content: "" !important;
    position: absolute !important;
    left: -10px !important;
    top: 50% !important;
    width: 4px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: #facc15 !important;
    transform: translateY(-50%) !important;
}

.sidebar-admin-popout .rail-tooltip {
    position: absolute !important;
    left: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-4px) !important;
    min-width: max-content !important;
    max-width: 220px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: #0f172a !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 1065 !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.26) !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.sidebar-admin-popout .sidebar-rail-btn:hover .rail-tooltip {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
}

.sidebar-admin-popout.flyout-open .sidebar-rail-btn .rail-tooltip {
    display: none !important;
}

.sidebar-admin-popout .rail-badge {
    position: absolute !important;
    top: -3px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #f97316 !important;
    color: #fff !important;
    border: 2px solid #172554 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.sidebar-admin-popout .sidebar-flyout-panel {
    position: absolute !important;
    left: calc(var(--sidebar-rail-width) + 12px) !important;
    top: 12px !important;
    width: min(var(--sidebar-flyout-width), calc(100vw - var(--sidebar-rail-width) - 32px)) !important;
    max-height: calc(100vh - var(--navbar-height) - 28px) !important;
    display: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(226,232,240,.95) !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.22) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 1064 !important;
}

.sidebar-admin-popout.flyout-open .sidebar-flyout-panel {
    display: block !important;
}

.sidebar-admin-popout .sidebar-flyout-backdrop {
    display: none !important;
}

.sidebar-admin-popout .sidebar-popout-menu {
    display: none !important;
}

.sidebar-admin-popout .sidebar-popout-menu.is-active {
    display: block !important;
}

.sidebar-flyout-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 4px 4px 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 14px !important;
}

.sidebar-flyout-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.sidebar-flyout-title-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff) !important;
    color: #2563eb !important;
    box-shadow: inset 0 0 0 1px #dbeafe !important;
}

.sidebar-flyout-title-icon i {
    font-size: 23px !important;
}

.sidebar-flyout-kicker {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

.sidebar-flyout-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.sidebar-flyout-header p {
    margin: 3px 0 0 !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

.sidebar-flyout-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: 0 !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
}

.sidebar-flyout-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.sidebar-flyout-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.sidebar-flyout-link {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: 10px !important;
    border-radius: 17px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    text-decoration: none !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.sidebar-flyout-link:hover {
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff) !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.12) !important;
}

.sidebar-flyout-link.active {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(37,99,235,.24) !important;
}

.sidebar-flyout-link-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: #ffffff !important;
    color: #2563eb !important;
    box-shadow: inset 0 0 0 1px #dbeafe !important;
}

.sidebar-flyout-link.active .sidebar-flyout-link-icon {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.24) !important;
}

.sidebar-flyout-link-icon i {
    font-size: 18px !important;
    line-height: 1 !important;
}

.sidebar-flyout-link-text {
    min-width: 0 !important;
    display: block !important;
    font-size: 13px !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.sidebar-flyout-subgroup {
    grid-column: 1 / -1 !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important;
}

.sidebar-flyout-subtitle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    color: #475569 !important;
    text-transform: uppercase !important;
}

.sidebar-flyout-subtitle-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 9px !important;
    display: grid !important;
    place-items: center !important;
    background: #eff6ff !important;
    color: #2563eb !important;
}

.sidebar-flyout-empty {
    padding: 18px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.sidebar-collapsed .sidebar-admin-popout {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden !important;
}

.sidebar-collapsed .sidebar-admin-popout.flyout-open .sidebar-flyout-panel,
.sidebar-collapsed .sidebar-admin-popout.flyout-open .sidebar-flyout-backdrop {
    display: none !important;
}

@media (max-width: 991.98px) {
    :root {
        --sidebar-rail-width: 72px;
        --sidebar-flyout-width: 340px;
    }

    .app-shell {
        display: flex !important;
        height: calc(100vh - var(--navbar-height)) !important;
        overflow: hidden !important;
    }

    .sidebar-admin-popout {
        position: fixed !important;
        left: 0 !important;
        top: var(--navbar-height) !important;
        bottom: 0 !important;
        height: calc(100vh - var(--navbar-height)) !important;
        width: var(--sidebar-rail-width) !important;
        min-width: var(--sidebar-rail-width) !important;
        max-width: var(--sidebar-rail-width) !important;
        transform: translateX(0) !important;
        transition: transform .22s ease !important;
        z-index: 1060 !important;
    }

    .sidebar-collapsed .sidebar-admin-popout {
        width: var(--sidebar-rail-width) !important;
        min-width: var(--sidebar-rail-width) !important;
        max-width: var(--sidebar-rail-width) !important;
        transform: translateX(-110%) !important;
        overflow: visible !important;
    }

    .sidebar-admin-popout .sidebar-rail-popout {
        display: flex !important;
        width: var(--sidebar-rail-width) !important;
        min-width: var(--sidebar-rail-width) !important;
        padding: 10px 9px !important;
    }

    .sidebar-admin-popout .sidebar-rail-btn {
        width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    .sidebar-admin-popout .rail-tooltip {
        display: none !important;
    }

    .sidebar-admin-popout .sidebar-flyout-backdrop {
        position: fixed !important;
        display: none !important;
        top: var(--navbar-height) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(15,23,42,.38) !important;
        z-index: 1061 !important;
    }

    .sidebar-admin-popout.flyout-open .sidebar-flyout-backdrop {
        display: block !important;
    }

    .sidebar-admin-popout .sidebar-flyout-panel {
        position: fixed !important;
        left: calc(var(--sidebar-rail-width) + 8px) !important;
        top: calc(var(--navbar-height) + 8px) !important;
        width: min(78vw, var(--sidebar-flyout-width)) !important;
        max-height: calc(100vh - var(--navbar-height) - 16px) !important;
        border-radius: 20px !important;
        z-index: 1063 !important;
    }

    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
    }
}

@media (max-width: 540px) {
    :root {
        --sidebar-rail-width: 66px;
    }

    .sidebar-admin-popout .sidebar-rail-logo {
        width: 44px !important;
        height: 44px !important;
        border-radius: 15px !important;
    }

    .sidebar-admin-popout .sidebar-rail-logo img {
        width: 33px !important;
        height: 33px !important;
        max-width: 33px !important;
        max-height: 33px !important;
    }

    .sidebar-admin-popout .sidebar-rail-btn {
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        border-radius: 15px !important;
    }

    .sidebar-admin-popout .sidebar-flyout-panel {
        left: calc(var(--sidebar-rail-width) + 7px) !important;
        width: min(80vw, 318px) !important;
        padding: 12px !important;
    }

    .sidebar-flyout-menu-grid {
        grid-template-columns: 1fr !important;
    }

    .sidebar-flyout-header h2 {
        font-size: 16px !important;
    }

    .sidebar-flyout-link {
        min-height: 58px !important;
    }
}

/* =========================================================
   V10 - Sidebar DB tree + pop-up menu seperti aplikasi akuntansi
   ========================================================= */
:root {
    --sidebar-rail-width: 64px !important;
    --sidebar-flyout-width: 430px !important;
}

.sidebar-admin-popout {
    width: var(--sidebar-rail-width) !important;
    min-width: var(--sidebar-rail-width) !important;
    max-width: var(--sidebar-rail-width) !important;
    flex: 0 0 var(--sidebar-rail-width) !important;
    overflow: visible !important;
}

.sidebar-admin-popout .sidebar-rail-popout {
    width: var(--sidebar-rail-width) !important;
    min-width: var(--sidebar-rail-width) !important;
    padding: 8px 7px !important;
    gap: 7px !important;
    background: #0b2f6b !important;
}

.sidebar-admin-popout .sidebar-rail-logo {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
}

.sidebar-admin-popout .sidebar-rail-logo img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
}

.sidebar-admin-popout .sidebar-rail-btn {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.09) !important;
}

.sidebar-admin-popout .sidebar-rail-btn i {
    font-size: 20px !important;
}

.sidebar-admin-popout .rail-badge {
    display: none !important;
}

.sidebar-admin-popout .sidebar-flyout-panel {
    left: var(--sidebar-rail-width) !important;
    top: 8px !important;
    width: min(var(--sidebar-flyout-width), calc(100vw - var(--sidebar-rail-width) - 18px)) !important;
    max-height: calc(100vh - var(--navbar-height) - 16px) !important;
    padding: 10px !important;
    border-radius: 4px 14px 14px 4px !important;
    border: 1px solid #d7dee9 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 16px 48px rgba(15, 23, 42, .26) !important;
    z-index: 1090 !important;
}

.sidebar-flyout-header {
    padding: 6px 8px 10px !important;
    margin-bottom: 10px !important;
    align-items: center !important;
    border-bottom: 2px solid #e9b5c5 !important;
}

.sidebar-flyout-title-wrap {
    align-items: center !important;
}

.sidebar-flyout-title-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: #e0f2fe !important;
    color: #075985 !important;
}

.sidebar-flyout-header h2 {
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

.sidebar-flyout-header p,
.sidebar-flyout-kicker {
    display: none !important;
}

.sidebar-flyout-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.sidebar-flyout-link {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 92px !important;
    padding: 10px 8px !important;
    gap: 8px !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}

.sidebar-flyout-link:nth-child(8n+1) { background: #7dd3fc !important; color: #0c4a6e !important; }
.sidebar-flyout-link:nth-child(8n+2) { background: #86efac !important; color: #14532d !important; }
.sidebar-flyout-link:nth-child(8n+3) { background: #bef264 !important; color: #365314 !important; }
.sidebar-flyout-link:nth-child(8n+4) { background: #fde68a !important; color: #78350f !important; }
.sidebar-flyout-link:nth-child(8n+5) { background: #fdba74 !important; color: #7c2d12 !important; }
.sidebar-flyout-link:nth-child(8n+6) { background: #fca5a5 !important; color: #7f1d1d !important; }
.sidebar-flyout-link:nth-child(8n+7) { background: #c4b5fd !important; color: #2e1065 !important; }
.sidebar-flyout-link:nth-child(8n+8) { background: #f0abfc !important; color: #701a75 !important; }

.sidebar-flyout-link:hover {
    transform: translateY(-1px) !important;
    filter: brightness(.98) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.16) !important;
}

.sidebar-flyout-link.active {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: -3px !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 10px 24px rgba(37,99,235,.22) !important;
}

.sidebar-flyout-link-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.42) !important;
    color: currentColor !important;
    box-shadow: none !important;
}

.sidebar-flyout-link-icon i {
    font-size: 21px !important;
}

.sidebar-flyout-link-text {
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    color: currentColor !important;
    max-width: 100% !important;
}

.sidebar-flyout-subgroup {
    grid-column: 1 / -1 !important;
    padding: 8px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
}

.sidebar-flyout-subgroup .sidebar-flyout-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.main-content {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 991.98px) {
    :root {
        --sidebar-rail-width: 62px !important;
        --sidebar-flyout-width: 360px !important;
    }

    .sidebar-admin-popout .sidebar-flyout-panel {
        left: var(--sidebar-rail-width) !important;
        top: calc(var(--navbar-height) + 6px) !important;
        width: min(82vw, var(--sidebar-flyout-width)) !important;
        max-height: calc(100vh - var(--navbar-height) - 12px) !important;
        border-radius: 4px 14px 14px 4px !important;
    }

    .sidebar-flyout-menu-grid,
    .sidebar-flyout-subgroup .sidebar-flyout-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sidebar-flyout-link {
        min-height: 84px !important;
    }
}

@media (max-width: 460px) {
    :root {
        --sidebar-rail-width: 58px !important;
    }

    .sidebar-admin-popout .sidebar-rail-popout {
        padding: 7px 5px !important;
    }

    .sidebar-admin-popout .sidebar-rail-logo,
    .sidebar-admin-popout .sidebar-rail-btn {
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
    }

    .sidebar-admin-popout .sidebar-flyout-panel {
        width: min(84vw, 318px) !important;
        padding: 8px !important;
    }

    .sidebar-flyout-link {
        min-height: 78px !important;
        padding: 8px 6px !important;
    }

    .sidebar-flyout-link-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .sidebar-flyout-link-text {
        font-size: 10.8px !important;
    }
}

.page-header-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.page-header-card h2 {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .page-header-card {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =========================================================
   FIX - Sidebar rail: Logout/Login selalu paling bawah
   ========================================================= */
.sidebar-admin-popout .sidebar-rail,
.sidebar-rail-popout {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.sidebar-admin-popout .sidebar-rail-main,
.sidebar-rail-popout .sidebar-rail-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
}

.sidebar-admin-popout .sidebar-rail-bottom,
.sidebar-rail-popout .sidebar-rail-bottom {
    margin-top: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    display: flex !important;
    justify-content: center !important;
}

.sidebar-admin-popout .sidebar-logout-link,
.sidebar-rail-popout .sidebar-logout-link {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}

.sidebar-admin-popout .sidebar-logout-link:hover,
.sidebar-rail-popout .sidebar-logout-link:hover {
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .sidebar-admin-popout .sidebar-rail,
    .sidebar-rail-popout {
        height: calc(100vh - var(--navbar-height)) !important;
        min-height: calc(100vh - var(--navbar-height)) !important;
    }
}


/* =========================================================
   FINAL FIX - Jarak antar ikon sidebar rail
   Catatan: selector lama memiliki margin:0!important, jadi override ini
   diletakkan paling bawah dan dibantu inline style dari sidebar.php.
   ========================================================= */
.sidebar-admin-popout .sidebar-rail-popout .sidebar-rail-main,
.sidebar-admin-popout .sidebar-rail-main,
.sidebar-rail-popout .sidebar-rail-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 12px !important;
    gap: 12px !important;
}

.sidebar-admin-popout .sidebar-rail-popout .sidebar-rail-main > .sidebar-rail-btn,
.sidebar-admin-popout .sidebar-rail-main > .sidebar-rail-btn,
.sidebar-rail-popout .sidebar-rail-main > .sidebar-rail-btn {
    margin-bottom: 0 !important;
    flex: 0 0 50px !important;
}

.sidebar-admin-popout .sidebar-rail-popout .sidebar-rail-logo,
.sidebar-admin-popout .sidebar-rail-logo,
.sidebar-rail-popout .sidebar-rail-logo {
    margin-bottom: 14px !important;
}

.sidebar-admin-popout .sidebar-rail-bottom,
.sidebar-rail-popout .sidebar-rail-bottom {
    margin-top: auto !important;
    padding-top: 18px !important;
}

@media (max-height: 650px) {
    .sidebar-admin-popout .sidebar-rail-popout .sidebar-rail-main,
    .sidebar-admin-popout .sidebar-rail-main,
    .sidebar-rail-popout .sidebar-rail-main {
        row-gap: 8px !important;
        gap: 8px !important;
    }
}

/* =========================================================
   RESPONSIVE UNIVERSAL + PEMINDAI QR KAMERA
   ========================================================= */
html {
    max-width: 100%;
    overflow-x: hidden;
}

body,
.app-shell,
.main-content,
.main-content > *,
.row > *,
.card,
.card-body,
.modal-content {
    min-width: 0;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

.table-responsive,
.card-body,
.modal-body {
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
}

.table-responsive {
    overflow-x: auto;
}

.btn,
.form-control,
.form-select {
    max-width: 100%;
}

.qr-camera-input-group {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
}

.qr-camera-input-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.qr-camera-trigger {
    flex: 0 0 auto;
    white-space: nowrap;
}

.universal-qr-scanner {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147483647 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(15, 23, 42, .78);
    backdrop-filter: blur(6px);
}

.universal-qr-scanner.show {
    display: flex !important;
}

html.qr-scanner-open,
body.qr-scanner-open {
    overflow: hidden !important;
}

.universal-qr-card {
    width: min(520px, 100%);
    max-height: 100%;
    overflow: auto;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
}

.universal-qr-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--biru), var(--ungu), var(--oren));
}

.universal-qr-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.universal-qr-head p {
    margin: .25rem 0 0;
    font-size: .875rem;
    opacity: .9;
}

.universal-qr-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    font-size: 1.75rem;
    line-height: 1;
}

.universal-qr-view {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #020617;
}

.universal-qr-view video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.universal-qr-frame {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(68%, 290px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 20px;
    box-shadow: 0 0 0 999px rgba(2, 6, 23, .28);
}

.universal-qr-frame span {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    background: #22c55e;
    box-shadow: 0 0 12px #22c55e;
    animation: qrScanLine 2s ease-in-out infinite;
}

@keyframes qrScanLine {
    0%, 100% { transform: translateY(-90px); }
    50% { transform: translateY(90px); }
}

.universal-qr-status {
    padding: .9rem 1rem;
    text-align: center;
    font-weight: 700;
    color: #334155;
}

.universal-qr-status.is-error { color: #b91c1c; background: #fef2f2; }
.universal-qr-status.is-success { color: #166534; background: #ecfdf5; }

.universal-qr-actions {
    display: flex;
    gap: .6rem;
    justify-content: center;
    padding: 0 1rem 1rem;
}

@media (max-width: 991.98px) {
    body {
        overflow: hidden;
    }

    .app-shell {
        position: relative;
        width: 100%;
    }

    .main-content {
        width: 100%;
        padding: 1rem;
    }

    .sidebar-admin:not(.sidebar-admin-popout) {
        position: absolute;
        z-index: 1040;
        left: 0;
        top: 0;
        bottom: 0;
        box-shadow: 16px 0 40px rgba(15, 23, 42, .18);
    }

    .sidebar-collapsed .sidebar-admin:not(.sidebar-admin-popout) {
        transform: translateX(-100%);
    }

    .page-header,
    .d-flex.justify-content-between,
    .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap;
    }

    .modal-dialog {
        margin: .65rem;
        max-width: calc(100% - 1.3rem);
    }
}

@media (max-width: 575.98px) {
    :root {
        --navbar-height: 62px;
    }

    .main-content {
        padding: .75rem;
    }

    .page-title {
        font-size: 1.4rem;
        overflow-wrap: anywhere;
    }

    .card-body,
    .modal-body {
        padding: .85rem;
    }

    .modal-footer,
    .card-footer,
    .actions,
    .form-actions {
        flex-wrap: wrap;
    }

    .modal-footer > .btn,
    .form-actions > .btn {
        flex: 1 1 100%;
    }

    .qr-camera-input-group {
        flex-wrap: wrap;
    }

    .qr-camera-trigger {
        width: 100%;
        justify-content: center;
    }

    .universal-qr-scanner {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .universal-qr-card {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
        display: flex;
        flex-direction: column;
    }

    .universal-qr-view {
        flex: 1 1 auto;
        min-height: 270px;
        aspect-ratio: auto;
    }

    .universal-qr-actions {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .universal-qr-actions .btn {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .universal-qr-frame span {
        animation: none;
    }
}

/* =========================================================
   FINAL RESPONSIVE FIX - konten tidak terpotong di HP/tablet
   ========================================================= */
:root {
    --admin-bottom-safe-space: 96px;
}

html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.admin-navbar,
.admin-navbar .container-fluid,
.admin-navbar .navbar-brand,
.admin-navbar .navbar-brand span,
.app-shell,
.main-content,
.main-content > *,
.card,
.card-body,
.row,
.row > *,
form,
.input-group,
.modal,
.modal-dialog,
.modal-content {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.app-shell {
    width: 100% !important;
    height: calc(100dvh - var(--navbar-height)) !important;
    min-height: calc(100dvh - var(--navbar-height)) !important;
    overflow: hidden !important;
}

.main-content {
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-bottom: calc(var(--admin-bottom-safe-space) + env(safe-area-inset-bottom)) !important;
}

.main-content .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.main-content img,
.main-content svg,
.main-content video,
.main-content canvas,
.main-content iframe {
    max-width: 100% !important;
    height: auto;
}

.main-content .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.main-content .form-control,
.main-content .form-select,
.main-content .btn {
    max-width: 100% !important;
}

.main-content .input-group > .form-control,
.main-content .input-group > .form-select {
    min-width: 0 !important;
}

.main-content label,
.main-content .form-text,
.main-content .page-title,
.main-content .page-subtitle,
.main-content td,
.main-content th {
    overflow-wrap: anywhere;
}

.main-content form > .d-flex.gap-2.mt-4,
.main-content .card-body form > .d-flex.gap-2.mt-4 {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    padding-bottom: max(.25rem, env(safe-area-inset-bottom));
}

.sidebar-admin-popout,
.sidebar-admin-popout .sidebar-rail,
.sidebar-admin-popout .sidebar-rail-popout {
    height: 100% !important;
    min-height: 0 !important;
}

@media (max-width: 991.98px) {
    body {
        overflow: hidden !important;
    }

    .admin-navbar {
        min-height: var(--navbar-height) !important;
    }

    .admin-navbar .container-fluid {
        flex-wrap: wrap !important;
        gap: .5rem !important;
    }

    .admin-navbar .container-fluid > .d-flex {
        min-width: 0 !important;
        max-width: calc(100% - 48px) !important;
    }

    .navbar-brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .navbar-brand span {
        display: inline-block !important;
        max-width: calc(100vw - 178px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    .app-shell {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        height: calc(100dvh - var(--navbar-height)) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .main-content {
        width: 100% !important;
        height: calc(100dvh - var(--navbar-height)) !important;
        padding: 12px 12px calc(var(--admin-bottom-safe-space) + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain;
    }

    .sidebar-admin-popout {
        height: calc(100dvh - var(--navbar-height)) !important;
        max-height: calc(100dvh - var(--navbar-height)) !important;
    }

    .sidebar-admin-popout .sidebar-rail,
    .sidebar-admin-popout .sidebar-rail-popout {
        height: calc(100dvh - var(--navbar-height)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--navbar-height)) !important;
    }

    .sidebar-admin-popout .sidebar-flyout-panel {
        max-height: calc(100dvh - var(--navbar-height) - 12px) !important;
    }

    .page-header {
        margin-bottom: 1rem !important;
    }

    .page-title {
        font-size: clamp(1.25rem, 5vw, 1.45rem) !important;
        line-height: 1.2 !important;
    }

    .card {
        border-radius: 14px !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --admin-bottom-safe-space: 112px;
    }

    .main-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .navbar-brand span {
        max-width: calc(100vw - 168px) !important;
    }

    .main-content .card-body {
        padding: .85rem !important;
    }

    .main-content .input-group {
        flex-wrap: wrap !important;
        gap: .5rem !important;
    }

    .main-content .input-group > .form-control,
    .main-content .input-group > .form-select,
    .main-content .input-group > .btn {
        flex: 1 1 100% !important;
        width: 100% !important;
        border-radius: .85rem !important;
    }

    .main-content form > .d-flex.gap-2.mt-4 > .btn,
    .main-content form > .d-flex.gap-2.mt-4 > a.btn,
    .main-content .card-body form > .d-flex.gap-2.mt-4 > .btn,
    .main-content .card-body form > .d-flex.gap-2.mt-4 > a.btn {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .modal-dialog {
        margin: .5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
}

@supports not (height: 100dvh) {
    .app-shell {
        height: calc(100vh - var(--navbar-height)) !important;
        min-height: calc(100vh - var(--navbar-height)) !important;
    }

    @media (max-width: 991.98px) {
        .main-content,
        .sidebar-admin-popout,
        .sidebar-admin-popout .sidebar-rail,
        .sidebar-admin-popout .sidebar-rail-popout {
            height: calc(100vh - var(--navbar-height)) !important;
            max-height: calc(100vh - var(--navbar-height)) !important;
        }
    }
}

/* =========================================================
   V12 - Perbaikan tabel mobile: kolom tidak diperas per huruf
   ========================================================= */
@media (max-width: 767.98px) {
    .main-content .table-responsive,
    .main-content .table-responsive > div {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .main-content .table-responsive table.table {
        width: max-content !important;
        min-width: 960px !important;
    }

    .main-content .table-responsive th,
    .main-content .table-responsive td,
    .main-content .table-responsive th a,
    .main-content .table-responsive td a,
    .main-content .table-responsive .badge {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .main-content .table-responsive td.text-wrap,
    .main-content .table-responsive th.text-wrap {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

/* =========================================================
   V15 - COASTAL MEADOW ADMIN THEME
   Palet utama: #E9D985, #439A86, #007991, #222E50
   ========================================================= */
:root {
    --coastal-gold: #E9D985;
    --coastal-seagrass: #439A86;
    --coastal-cerulean: #007991;
    --coastal-indigo: #222E50;
    --coastal-white: #FFFFFF;
    --coastal-surface: #F4F8F7;
    --coastal-surface-alt: #EAF2F0;
    --coastal-border: #CBDDD8;
    --coastal-muted: #64746F;
    --coastal-gold-soft: #F8F1CF;
    --coastal-seagrass-soft: #E3F1ED;
    --coastal-cerulean-soft: #DFF1F4;
    --coastal-indigo-soft: #E7EAF1;

    /* Alias lama dipertahankan agar seluruh modul mengikuti tema baru. */
    --biru: var(--coastal-cerulean);
    --ungu: var(--coastal-indigo);
    --oren: var(--coastal-seagrass);
    --biru-soft: var(--coastal-cerulean-soft);
    --ungu-soft: var(--coastal-indigo-soft);
    --oren-soft: var(--coastal-seagrass-soft);
    --gelap: var(--coastal-indigo);
    --abu: var(--coastal-muted);
    --bg: var(--coastal-surface);
    --putih: var(--coastal-white);
}

body,
.bg-page,
.main-content {
    background: var(--coastal-surface) !important;
    color: var(--coastal-indigo) !important;
}

a {
    color: var(--coastal-cerulean);
}

a:hover,
a:focus {
    color: var(--coastal-seagrass);
}

::selection {
    background: var(--coastal-gold);
    color: var(--coastal-indigo);
}

/* Top navigation */
.admin-navbar {
    background: linear-gradient(100deg, var(--coastal-indigo) 0%, var(--coastal-cerulean) 58%, var(--coastal-seagrass) 100%) !important;
    border-bottom: 4px solid var(--coastal-gold) !important;
    box-shadow: 0 8px 24px rgba(34, 46, 80, .22) !important;
}

.admin-navbar .navbar-brand,
.admin-navbar .navbar-brand span,
.admin-navbar .topbar-user,
.admin-navbar .topbar-user * {
    color: var(--coastal-white) !important;
}

.nav-toggle-btn,
.admin-navbar .navbar-toggler {
    border-color: rgba(255,255,255,.34) !important;
    color: var(--coastal-gold) !important;
    background: rgba(255,255,255,.10) !important;
}

.nav-toggle-btn:hover,
.admin-navbar .navbar-toggler:hover {
    background: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
    border-color: var(--coastal-gold) !important;
}

.nav-topbar .nav-link {
    color: rgba(255,255,255,.90) !important;
}

.nav-topbar .nav-link:hover {
    color: var(--coastal-gold) !important;
    background: rgba(233,217,133,.14) !important;
}

.nav-topbar .nav-link.active {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-gold) !important;
    box-shadow: 0 6px 16px rgba(34,46,80,.20) !important;
}

/* Sidebar rail */
.sidebar-admin,
.sidebar-admin-popout .sidebar-rail-popout,
.sidebar-admin-popout .sidebar-rail,
.sidebar-rail-popout {
    background: linear-gradient(180deg, var(--coastal-indigo) 0%, #1B4160 100%) !important;
}

.sidebar-admin-popout .sidebar-rail-popout {
    box-shadow: inset -1px 0 0 rgba(233,217,133,.22) !important;
}

.sidebar-admin-popout .sidebar-rail-logo,
.sidebar-rail-popout .sidebar-rail-logo {
    background: var(--coastal-white) !important;
    border: 2px solid var(--coastal-gold) !important;
    box-shadow: 0 10px 22px rgba(34,46,80,.32) !important;
}

.sidebar-admin-popout .sidebar-rail-btn,
.sidebar-rail-popout .sidebar-rail-btn {
    color: var(--coastal-white) !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
}

.sidebar-admin-popout .sidebar-rail-btn:hover,
.sidebar-admin-popout .sidebar-rail-btn.active,
.sidebar-admin-popout .sidebar-rail-btn.is-open,
.sidebar-rail-popout .sidebar-rail-btn:hover,
.sidebar-rail-popout .sidebar-rail-btn.active,
.sidebar-rail-popout .sidebar-rail-btn.is-open {
    color: var(--coastal-white) !important;
    background: var(--coastal-cerulean) !important;
    border-color: var(--coastal-gold) !important;
    box-shadow: 0 10px 24px rgba(0,121,145,.28) !important;
}

.sidebar-admin-popout .sidebar-rail-btn.active::before,
.sidebar-admin-popout .sidebar-rail-btn.is-open::before,
.sidebar-rail-popout .sidebar-rail-btn.active::before,
.sidebar-rail-popout .sidebar-rail-btn.is-open::before {
    background: var(--coastal-gold) !important;
}

.sidebar-admin-popout .rail-tooltip,
.sidebar-rail-popout .rail-tooltip {
    background: var(--coastal-indigo) !important;
    color: var(--coastal-gold) !important;
    border: 1px solid var(--coastal-gold) !important;
}

.sidebar-admin-popout .rail-badge,
.sidebar-rail-popout .rail-badge {
    background: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
    border-color: var(--coastal-indigo) !important;
}

.sidebar-admin-popout .sidebar-rail-bottom,
.sidebar-rail-popout .sidebar-rail-bottom {
    border-top-color: rgba(233,217,133,.32) !important;
}

.sidebar-admin-popout .sidebar-logout-link,
.sidebar-rail-popout .sidebar-logout-link,
.sidebar-admin-popout .sidebar-logout-link:hover,
.sidebar-rail-popout .sidebar-logout-link:hover {
    background: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
    border-color: var(--coastal-gold) !important;
}

/* Flyout menu */
.sidebar-admin-popout .sidebar-flyout-panel {
    background: var(--coastal-white) !important;
    border: 2px solid var(--coastal-indigo) !important;
    box-shadow: 12px 18px 0 rgba(67,154,134,.16), 0 24px 70px rgba(34,46,80,.24) !important;
}

.sidebar-flyout-header {
    border-bottom: 3px solid var(--coastal-gold) !important;
}

.sidebar-flyout-title-icon {
    background: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
    box-shadow: inset 0 0 0 2px var(--coastal-indigo) !important;
}

.sidebar-flyout-kicker,
.sidebar-flyout-header p {
    color: var(--coastal-muted) !important;
}

.sidebar-flyout-header h2 {
    color: var(--coastal-indigo) !important;
}

.sidebar-flyout-close {
    background: var(--coastal-indigo) !important;
    color: var(--coastal-white) !important;
}

.sidebar-flyout-close:hover {
    background: var(--coastal-cerulean) !important;
    color: var(--coastal-white) !important;
}

.sidebar-flyout-link,
.sidebar-flyout-link:nth-child(8n+1),
.sidebar-flyout-link:nth-child(8n+5) {
    background: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
    border: 2px solid var(--coastal-indigo) !important;
}

.sidebar-flyout-link:nth-child(8n+2),
.sidebar-flyout-link:nth-child(8n+6) {
    background: var(--coastal-seagrass) !important;
    color: var(--coastal-white) !important;
    border: 2px solid var(--coastal-seagrass) !important;
}

.sidebar-flyout-link:nth-child(8n+3),
.sidebar-flyout-link:nth-child(8n+7) {
    background: var(--coastal-cerulean) !important;
    color: var(--coastal-white) !important;
    border: 2px solid var(--coastal-cerulean) !important;
}

.sidebar-flyout-link:nth-child(8n+4),
.sidebar-flyout-link:nth-child(8n+8) {
    background: var(--coastal-indigo) !important;
    color: var(--coastal-white) !important;
    border: 2px solid var(--coastal-indigo) !important;
}

.sidebar-flyout-link:hover {
    filter: brightness(1.03) !important;
    transform: translateY(-2px) !important;
    box-shadow: 5px 5px 0 var(--coastal-indigo) !important;
}

.sidebar-flyout-link.active {
    outline: 4px solid var(--coastal-gold) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--coastal-indigo), 7px 7px 0 rgba(34,46,80,.20) !important;
}

.sidebar-flyout-link-icon,
.sidebar-flyout-link.active .sidebar-flyout-link-icon {
    background: rgba(255,255,255,.90) !important;
    color: currentColor !important;
    box-shadow: inset 0 0 0 1px rgba(34,46,80,.18) !important;
}

.sidebar-flyout-subgroup {
    background: var(--coastal-seagrass-soft) !important;
    border: 2px dashed var(--coastal-seagrass) !important;
}

.sidebar-flyout-subtitle,
.sidebar-flyout-subtitle-icon {
    color: var(--coastal-indigo) !important;
}

.sidebar-flyout-subtitle-icon {
    background: var(--coastal-gold) !important;
}

/* Header, cards, modal, dropdown */
.page-title,
.page-header-card h2,
.card-title,
.modal-title {
    color: var(--coastal-indigo) !important;
}

.page-subtitle,
.text-muted,
.label-stat,
.detail-label {
    color: var(--coastal-muted) !important;
}

.page-header-card,
.card,
.card-stat,
.accurate-card,
.accurate-panel,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item {
    background: var(--coastal-white) !important;
    border-color: var(--coastal-border) !important;
}

.page-header-card {
    border-top: 5px solid var(--coastal-seagrass) !important;
    box-shadow: 7px 7px 0 rgba(67,154,134,.10) !important;
}

.card,
.card-stat,
.accurate-card,
.accurate-panel {
    box-shadow: 0 8px 24px rgba(34,46,80,.08) !important;
}

.card-header,
.modal-header,
.accordion-button:not(.collapsed) {
    background: var(--coastal-indigo) !important;
    color: var(--coastal-gold) !important;
    border-color: var(--coastal-indigo) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2) !important;
}

.dropdown-item {
    color: var(--coastal-indigo) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--coastal-gold-soft) !important;
    color: var(--coastal-indigo) !important;
}

/* Buttons */
.btn-gradient,
.btn-primary,
.btn-info {
    background: var(--coastal-cerulean) !important;
    border-color: var(--coastal-cerulean) !important;
    color: var(--coastal-white) !important;
    font-weight: 800 !important;
}

.btn-gradient:hover,
.btn-gradient:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
    background: var(--coastal-indigo) !important;
    border-color: var(--coastal-indigo) !important;
    color: var(--coastal-white) !important;
}

.btn-secondary,
.btn-success {
    background: var(--coastal-seagrass) !important;
    border-color: var(--coastal-seagrass) !important;
    color: var(--coastal-white) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-success:hover,
.btn-success:focus {
    background: var(--coastal-indigo) !important;
    border-color: var(--coastal-indigo) !important;
    color: var(--coastal-white) !important;
}

.btn-dark,
.btn-danger {
    background: var(--coastal-indigo) !important;
    border-color: var(--coastal-indigo) !important;
    color: var(--coastal-white) !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-danger:hover,
.btn-danger:focus {
    background: var(--coastal-cerulean) !important;
    border-color: var(--coastal-cerulean) !important;
    color: var(--coastal-white) !important;
}

.btn-warning {
    background: var(--coastal-gold) !important;
    border-color: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--coastal-cerulean) !important;
    border-color: var(--coastal-cerulean) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-info:hover,
.btn-outline-info:focus {
    color: var(--coastal-white) !important;
    border-color: var(--coastal-cerulean) !important;
    background: var(--coastal-cerulean) !important;
}

.btn-outline-secondary,
.btn-outline-success {
    color: var(--coastal-seagrass) !important;
    border-color: var(--coastal-seagrass) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {
    color: var(--coastal-white) !important;
    background: var(--coastal-seagrass) !important;
    border-color: var(--coastal-seagrass) !important;
}

.btn-outline-danger,
.btn-outline-dark {
    color: var(--coastal-indigo) !important;
    border-color: var(--coastal-indigo) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    color: var(--coastal-white) !important;
    background: var(--coastal-indigo) !important;
    border-color: var(--coastal-indigo) !important;
}

/* Form */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--coastal-white) !important;
    color: var(--coastal-indigo) !important;
    border-color: var(--coastal-border) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--coastal-cerulean) !important;
    box-shadow: 0 0 0 .22rem rgba(0,121,145,.15) !important;
}

.form-check-input:checked {
    background-color: var(--coastal-seagrass) !important;
    border-color: var(--coastal-seagrass) !important;
}

.form-range::-webkit-slider-thumb {
    background: var(--coastal-cerulean) !important;
}

.form-range::-moz-range-thumb {
    background: var(--coastal-cerulean) !important;
}

/* Tables */
.table {
    color: var(--coastal-indigo) !important;
    border-color: var(--coastal-border) !important;
}

.table thead,
.table thead th {
    background: var(--coastal-indigo) !important;
    color: var(--coastal-gold) !important;
    border-color: var(--coastal-indigo) !important;
}

.table tbody tr:nth-child(even) > * {
    background-color: #F8FBFA !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--coastal-gold-soft) !important;
    color: var(--coastal-indigo) !important;
}

.table-primary > * {
    background-color: var(--coastal-cerulean-soft) !important;
    color: var(--coastal-indigo) !important;
}

/* Tabs, pagination, progress, badges */
.nav-tabs {
    border-bottom-color: var(--coastal-seagrass) !important;
}

.nav-tabs .nav-link {
    color: var(--coastal-indigo) !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--coastal-gold) !important;
    background: var(--coastal-gold-soft) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background: var(--coastal-cerulean) !important;
    color: var(--coastal-white) !important;
    border-color: var(--coastal-cerulean) !important;
}

.page-link {
    color: var(--coastal-cerulean) !important;
    border-color: var(--coastal-border) !important;
}

.page-link:hover,
.page-item.active .page-link {
    background: var(--coastal-seagrass) !important;
    border-color: var(--coastal-seagrass) !important;
    color: var(--coastal-white) !important;
}

.progress {
    background: var(--coastal-surface-alt) !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--coastal-cerulean), var(--coastal-seagrass)) !important;
    color: var(--coastal-white) !important;
}

.badge.bg-primary,
.bg-primary {
    background-color: var(--coastal-cerulean) !important;
    color: var(--coastal-white) !important;
}

.badge.bg-secondary,
.bg-secondary,
.badge.bg-success,
.bg-success {
    background-color: var(--coastal-seagrass) !important;
    color: var(--coastal-white) !important;
}

.badge.bg-dark,
.bg-dark,
.badge.bg-danger,
.bg-danger {
    background-color: var(--coastal-indigo) !important;
    color: var(--coastal-white) !important;
}

.badge.bg-warning,
.bg-warning {
    background-color: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
}

.text-primary,
.text-info {
    color: var(--coastal-cerulean) !important;
}

.text-success {
    color: var(--coastal-seagrass) !important;
}

.text-danger,
.text-dark {
    color: var(--coastal-indigo) !important;
}

.border-primary,
.border-info {
    border-color: var(--coastal-cerulean) !important;
}

.border-success {
    border-color: var(--coastal-seagrass) !important;
}

/* Alerts */
.alert-primary,
.alert-info {
    background: var(--coastal-cerulean-soft) !important;
    border-color: var(--coastal-cerulean) !important;
    color: var(--coastal-indigo) !important;
}

.alert-success {
    background: var(--coastal-seagrass-soft) !important;
    border-color: var(--coastal-seagrass) !important;
    color: var(--coastal-indigo) !important;
}

.alert-warning,
.alert-danger {
    background: var(--coastal-gold-soft) !important;
    border-color: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
}

/* Login and QR scanner */
.guest-bg {
    background:
        radial-gradient(circle at 18% 18%, rgba(233,217,133,.24), transparent 28%),
        radial-gradient(circle at 80% 72%, rgba(67,154,134,.34), transparent 36%),
        linear-gradient(135deg, var(--coastal-indigo) 0%, var(--coastal-cerulean) 56%, var(--coastal-seagrass) 100%) !important;
}

.login-card {
    border: 3px solid var(--coastal-gold) !important;
    box-shadow: 12px 12px 0 rgba(34,46,80,.42) !important;
}

.universal-qr-head {
    background: var(--coastal-indigo) !important;
    color: var(--coastal-gold) !important;
    border-bottom: 4px solid var(--coastal-gold) !important;
}

.universal-qr-close {
    background: var(--coastal-seagrass) !important;
    color: var(--coastal-white) !important;
}

.universal-qr-view {
    background: var(--coastal-indigo) !important;
}

.universal-qr-frame {
    border-color: var(--coastal-gold) !important;
}

.universal-qr-frame span {
    background: var(--coastal-cerulean) !important;
    box-shadow: 0 0 12px var(--coastal-cerulean) !important;
}

/* Detail/value blocks and POS notices */
.detail-section-title {
    color: var(--coastal-cerulean) !important;
}

.detail-value {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-white) !important;
    border-color: var(--coastal-border) !important;
}

.pos-template-warning {
    background: var(--coastal-gold-soft) !important;
    border-color: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
}

/* Accessible focus indicator */
.btn:focus-visible,
a:focus-visible,
.sidebar-rail-btn:focus-visible,
.sidebar-flyout-link:focus-visible {
    outline: 3px solid var(--coastal-gold) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   V14 - FIX TABEL RIWAYAT PENJUALAN
   Kolom tidak diperas hingga teks turun per huruf.
   Tabel memakai scroll horizontal jika ruang layar tidak cukup.
   ========================================================= */
.riwayat-penjualan-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.riwayat-penjualan-table-wrap .riwayat-penjualan-table {
    width: max-content !important;
    min-width: 1525px !important;
    table-layout: auto !important;
    margin-bottom: 0 !important;
}

.riwayat-penjualan-table-wrap .riwayat-penjualan-table th,
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td,
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th a,
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td a,
.riwayat-penjualan-table-wrap .riwayat-penjualan-table .badge {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.riwayat-penjualan-table-wrap .riwayat-penjualan-table thead a {
    color: inherit !important;
}

.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(1),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(1) { min-width: 55px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(2),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(2) { min-width: 120px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(3),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(3) { min-width: 190px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(4),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(4) { min-width: 180px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(5),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(5) { min-width: 90px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(6),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(6) { min-width: 125px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(7),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(7) { min-width: 120px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(8),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(8) { min-width: 100px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(9),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(9) { min-width: 100px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(10),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(10) { min-width: 125px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(11),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(11) { min-width: 110px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(12),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(12) { min-width: 100px !important; }
.riwayat-penjualan-table-wrap .riwayat-penjualan-table th:nth-child(13),
.riwayat-penjualan-table-wrap .riwayat-penjualan-table td:nth-child(13) { min-width: 110px !important; }

@media (max-width: 767.98px) {
    .riwayat-penjualan-table-wrap .riwayat-penjualan-table {
        min-width: 1525px !important;
    }
}

/* =========================================================
   V16 - COASTAL MEADOW FINAL UNIFICATION
   Menyamakan dashboard, ikon, logo, sidebar, dan flyout yang
   sebelumnya masih memakai warna tema lama dari CSS inline.
   ========================================================= */

/* Logo aplikasi: navbar dan sidebar memakai bingkai/warna yang sama. */
.navbar-app-logo,
.sidebar-admin-popout .sidebar-rail-logo img,
.sidebar-rail-popout .sidebar-rail-logo img {
    object-fit: contain !important;
    filter: none !important;
}

.navbar-app-logo {
    width: 42px !important;
    height: 42px !important;
    padding: 3px !important;
    border-radius: 13px !important;
    background: var(--coastal-white) !important;
    border: 2px solid var(--coastal-gold) !important;
    box-shadow: 0 7px 18px rgba(34,46,80,.22) !important;
}

.sidebar-admin-popout .sidebar-rail-logo,
.sidebar-rail-popout .sidebar-rail-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 3px !important;
    border-radius: 15px !important;
    background: var(--coastal-white) !important;
    border: 2px solid var(--coastal-gold) !important;
    box-shadow: 0 8px 20px rgba(34,46,80,.22) !important;
}

.sidebar-admin-popout .sidebar-rail-logo img,
.sidebar-rail-popout .sidebar-rail-logo img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 10px !important;
}

/* Sidebar: seluruh ikon memakai sistem warna yang seragam. */
.sidebar-admin-popout .sidebar-rail-btn,
.sidebar-rail-popout .sidebar-rail-btn {
    color: var(--coastal-white) !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(233,217,133,.24) !important;
    box-shadow: none !important;
}

.sidebar-admin-popout .sidebar-rail-btn:hover,
.sidebar-rail-popout .sidebar-rail-btn:hover {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-seagrass-soft) !important;
    border-color: var(--coastal-gold) !important;
    box-shadow: 0 8px 18px rgba(34,46,80,.20) !important;
}

.sidebar-admin-popout .sidebar-rail-btn.active,
.sidebar-admin-popout .sidebar-rail-btn.is-open,
.sidebar-rail-popout .sidebar-rail-btn.active,
.sidebar-rail-popout .sidebar-rail-btn.is-open {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-gold) !important;
    border-color: var(--coastal-gold) !important;
    box-shadow: 0 9px 20px rgba(233,217,133,.24) !important;
}

.sidebar-admin-popout .sidebar-rail-btn.active::before,
.sidebar-admin-popout .sidebar-rail-btn.is-open::before,
.sidebar-rail-popout .sidebar-rail-btn.active::before,
.sidebar-rail-popout .sidebar-rail-btn.is-open::before {
    background: var(--coastal-seagrass) !important;
}

.sidebar-admin-popout .sidebar-logout-link,
.sidebar-rail-popout .sidebar-logout-link {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-gold) !important;
    border-color: var(--coastal-gold) !important;
}

.sidebar-admin-popout .sidebar-logout-link:hover,
.sidebar-rail-popout .sidebar-logout-link:hover {
    color: var(--coastal-white) !important;
    background: var(--coastal-seagrass) !important;
    border-color: var(--coastal-gold) !important;
}

/* Flyout: hapus pola kartu warna-warni; gunakan satu sistem yang rapi. */
.sidebar-admin-popout .sidebar-flyout-panel {
    background: var(--coastal-white) !important;
    border: 2px solid var(--coastal-indigo) !important;
    box-shadow: 8px 12px 0 rgba(67,154,134,.16), 0 22px 56px rgba(34,46,80,.22) !important;
}

.sidebar-flyout-header {
    border-bottom: 3px solid var(--coastal-gold) !important;
}

.sidebar-flyout-title-icon,
.sidebar-flyout-subtitle-icon {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-gold) !important;
    border: 2px solid var(--coastal-indigo) !important;
    box-shadow: none !important;
}

.sidebar-flyout-link,
.sidebar-flyout-link:nth-child(n),
.sidebar-flyout-subgroup .sidebar-flyout-link,
.sidebar-flyout-subgroup .sidebar-flyout-link:nth-child(n) {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-surface-alt) !important;
    border: 1.5px solid var(--coastal-border) !important;
    box-shadow: none !important;
    filter: none !important;
}

.sidebar-flyout-link-icon,
.sidebar-flyout-link.active .sidebar-flyout-link-icon {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-gold) !important;
    border: 1px solid var(--coastal-indigo) !important;
    box-shadow: none !important;
}

.sidebar-flyout-link:hover,
.sidebar-flyout-link:nth-child(n):hover,
.sidebar-flyout-subgroup .sidebar-flyout-link:hover {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-seagrass-soft) !important;
    border-color: var(--coastal-seagrass) !important;
    box-shadow: 0 8px 18px rgba(34,46,80,.12) !important;
    transform: translateY(-1px) !important;
}

.sidebar-flyout-link.active,
.sidebar-flyout-link:nth-child(n).active,
.sidebar-flyout-subgroup .sidebar-flyout-link.active {
    color: var(--coastal-white) !important;
    background: var(--coastal-cerulean) !important;
    border-color: var(--coastal-indigo) !important;
    outline: 3px solid var(--coastal-gold) !important;
    outline-offset: 1px !important;
    box-shadow: 0 9px 20px rgba(0,121,145,.22) !important;
}

.sidebar-flyout-link.active .sidebar-flyout-link-icon {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-gold) !important;
    border-color: var(--coastal-indigo) !important;
}

.sidebar-flyout-subgroup {
    background: var(--coastal-seagrass-soft) !important;
    border: 1.5px dashed var(--coastal-seagrass) !important;
}

/* Dashboard utama dan seluruh dashboard role. */
.dashboard-hero,
.keu-hero,
.dashboard-gudang-hero,
.dashboard-penjualan-hero,
.dashboard-pembelian-hero,
.dashboard-produksi-hero {
    color: var(--coastal-white) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.20), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(233,217,133,.20), transparent 30%),
        linear-gradient(135deg, var(--coastal-indigo) 0%, var(--coastal-cerulean) 58%, var(--coastal-seagrass) 100%) !important;
    border: 0 !important;
    border-bottom: 5px solid var(--coastal-gold) !important;
    box-shadow: 0 12px 28px rgba(34,46,80,.18) !important;
}

.dashboard-hero *,
.keu-hero *,
.dashboard-gudang-hero *,
.dashboard-penjualan-hero *,
.dashboard-pembelian-hero *,
.dashboard-produksi-hero * {
    color: inherit !important;
}

.dashboard-card,
.dashboard-stat,
.keu-card,
.dashboard-gudang-card {
    background: var(--coastal-white) !important;
    border: 1px solid var(--coastal-border) !important;
    box-shadow: 0 8px 22px rgba(34,46,80,.08) !important;
}

.dashboard-card:hover,
.dashboard-stat:hover,
.keu-card:hover,
.dashboard-gudang-card:hover {
    border-color: var(--coastal-seagrass) !important;
    box-shadow: 0 11px 26px rgba(34,46,80,.12) !important;
}

/* Semua kotak ikon ringkasan dibuat sama, bukan biru/ungu/oranye campuran. */
.stat-icon,
.keu-icon,
.dashboard-gudang-card-icon,
.stat-icon.bg-blue-gradient,
.stat-icon.bg-purple-gradient,
.stat-icon.bg-orange-gradient,
.stat-icon.bg-dark-gradient,
.keu-icon.bg-keu-blue,
.keu-icon.bg-keu-purple,
.keu-icon.bg-keu-orange,
.keu-icon.bg-keu-dark {
    color: var(--coastal-white) !important;
    background: var(--coastal-cerulean) !important;
    border: 3px solid var(--coastal-gold) !important;
    box-shadow: 0 8px 18px rgba(0,121,145,.18) !important;
}

.stat-icon i,
.keu-icon i,
.dashboard-gudang-card-icon i {
    color: var(--coastal-white) !important;
}

/* Warna data/grafik tetap berbeda, tetapi hanya memakai palet Coastal Meadow. */
.progress-bar.bg-blue-gradient,
.chart-bar.blue,
.keu-bar.masuk,
.dashboard-chart .series-1,
.dashboard-chart .bar-1 {
    background: var(--coastal-cerulean) !important;
}

.progress-bar.bg-purple-gradient,
.chart-bar.purple,
.dashboard-chart .series-2,
.dashboard-chart .bar-2 {
    background: var(--coastal-indigo) !important;
}

.progress-bar.bg-orange-gradient,
.chart-bar.orange,
.keu-bar.keluar,
.dashboard-chart .series-3,
.dashboard-chart .bar-3 {
    background: var(--coastal-seagrass) !important;
}

.progress-bar.bg-dark-gradient,
.chart-bar.dark,
.dashboard-chart .series-4,
.dashboard-chart .bar-4 {
    background: var(--coastal-gold) !important;
    color: var(--coastal-indigo) !important;
}

.dashboard-chart,
.keu-chart {
    border-color: var(--coastal-border) !important;
    background:
        linear-gradient(to bottom, rgba(0,121,145,.05), rgba(67,154,134,.035)),
        repeating-linear-gradient(to bottom, transparent 0, transparent 47px, rgba(34,46,80,.055) 48px) !important;
}

.dashboard-chart text,
.dashboard-chart .label,
.keu-chart text,
.keu-chart .label,
.dashboard-card .text-muted,
.dashboard-stat .text-muted,
.keu-card .text-muted {
    color: var(--coastal-muted) !important;
    fill: var(--coastal-muted) !important;
}

.dashboard-card a,
.dashboard-stat a,
.keu-card a {
    color: var(--coastal-cerulean) !important;
}

.dashboard-card a:hover,
.dashboard-stat a:hover,
.keu-card a:hover {
    color: var(--coastal-seagrass) !important;
}

/* Menetralkan warna lama yang tertanam sebagai inline style pada legenda dashboard. */
.dashboard-card [style*="background:#2563eb"],
.dashboard-card [style*="background: #2563eb"],
.keu-card [style*="background:#2563eb"],
.keu-card [style*="background: #2563eb"] {
    background: var(--coastal-cerulean) !important;
}

.dashboard-card [style*="background:#7c3aed"],
.dashboard-card [style*="background: #7c3aed"],
.keu-card [style*="background:#7c3aed"],
.keu-card [style*="background: #7c3aed"] {
    background: var(--coastal-indigo) !important;
}

.dashboard-card [style*="background:#f97316"],
.dashboard-card [style*="background: #f97316"],
.keu-card [style*="background:#f97316"],
.keu-card [style*="background: #f97316"] {
    background: var(--coastal-seagrass) !important;
}

.dashboard-card [style*="background:#fbbf24"],
.dashboard-card [style*="background: #fbbf24"],
.keu-card [style*="background:#fbbf24"],
.keu-card [style*="background: #fbbf24"] {
    background: var(--coastal-gold) !important;
}

/* Header tabel dashboard dan tabel umum konsisten. */
.table-dashboard thead th,
.dashboard-card .table thead th,
.keu-card .table thead th {
    color: var(--coastal-gold) !important;
    background: var(--coastal-indigo) !important;
    border-color: var(--coastal-indigo) !important;
}

@media (max-width: 575.98px) {
    .navbar-app-logo {
        width: 38px !important;
        height: 38px !important;
    }
}

/* ============================================================
   Coastal Meadow flyout menu tiles (varied colors + gradient hover)
   Permintaan: logo/icon tetap sama, kotak tombol warna-warni sesuai tema.
   ============================================================ */
.sidebar-flyout-link,
.sidebar-flyout-link:nth-child(n),
.sidebar-flyout-subgroup .sidebar-flyout-link,
.sidebar-flyout-subgroup .sidebar-flyout-link:nth-child(n) {
    --tile-bg-start: rgba(233,217,133,.34);
    --tile-bg-end: rgba(255,255,255,.96);
    --tile-border: rgba(233,217,133,.72);
    --tile-hover-start: #E9D985;
    --tile-hover-end: #439A86;
    color: var(--coastal-indigo) !important;
    background: linear-gradient(180deg, var(--tile-bg-start), var(--tile-bg-end)) !important;
    border: 1.5px solid var(--tile-border) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px rgba(34,46,80,.06) !important;
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, color .22s ease !important;
    position: relative;
    overflow: hidden;
}

/* Variasi warna per kotak tetap dalam palet yang sama */
.sidebar-flyout-menu-grid > .sidebar-flyout-link:nth-child(4n+1),
.sidebar-flyout-subgroup .sidebar-flyout-menu-grid > .sidebar-flyout-link:nth-child(4n+1) {
    --tile-bg-start: rgba(233,217,133,.38);
    --tile-bg-end: rgba(255,251,226,.98);
    --tile-border: rgba(233,217,133,.95);
    --tile-hover-start: #E9D985;
    --tile-hover-end: #007991;
}

.sidebar-flyout-menu-grid > .sidebar-flyout-link:nth-child(4n+2),
.sidebar-flyout-subgroup .sidebar-flyout-menu-grid > .sidebar-flyout-link:nth-child(4n+2) {
    --tile-bg-start: rgba(67,154,134,.20);
    --tile-bg-end: rgba(240,249,246,.98);
    --tile-border: rgba(67,154,134,.55);
    --tile-hover-start: #439A86;
    --tile-hover-end: #222E50;
}

.sidebar-flyout-menu-grid > .sidebar-flyout-link:nth-child(4n+3),
.sidebar-flyout-subgroup .sidebar-flyout-menu-grid > .sidebar-flyout-link:nth-child(4n+3) {
    --tile-bg-start: rgba(0,121,145,.18);
    --tile-bg-end: rgba(240,250,252,.98);
    --tile-border: rgba(0,121,145,.48);
    --tile-hover-start: #007991;
    --tile-hover-end: #439A86;
}

.sidebar-flyout-menu-grid > .sidebar-flyout-link:nth-child(4n+4),
.sidebar-flyout-subgroup .sidebar-flyout-menu-grid > .sidebar-flyout-link:nth-child(4n+4) {
    --tile-bg-start: rgba(34,46,80,.16);
    --tile-bg-end: rgba(243,246,253,.98);
    --tile-border: rgba(34,46,80,.40);
    --tile-hover-start: #222E50;
    --tile-hover-end: #007991;
}

/* Logo/icon tombol tetap konsisten */
.sidebar-flyout-link-icon,
.sidebar-flyout-link.active .sidebar-flyout-link-icon {
    color: var(--coastal-indigo) !important;
    background: var(--coastal-gold) !important;
    border: 1px solid var(--coastal-indigo) !important;
    box-shadow: 0 3px 10px rgba(34,46,80,.10) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}

.sidebar-flyout-link:hover,
.sidebar-flyout-link:nth-child(n):hover,
.sidebar-flyout-subgroup .sidebar-flyout-link:hover {
    color: var(--coastal-white) !important;
    background: linear-gradient(135deg, var(--tile-hover-start), var(--tile-hover-end)) !important;
    border-color: transparent !important;
    box-shadow: 0 14px 28px rgba(34,46,80,.18), 0 0 0 1px rgba(255,255,255,.14) inset !important;
    transform: translateY(-2px) scale(1.01) !important;
}

.sidebar-flyout-link:hover .sidebar-flyout-link-text,
.sidebar-flyout-link:hover .sidebar-flyout-link-label,
.sidebar-flyout-link:hover small,
.sidebar-flyout-link:hover span {
    color: var(--coastal-white) !important;
}

.sidebar-flyout-link:hover .sidebar-flyout-link-icon {
    transform: scale(1.06) !important;
    box-shadow: 0 6px 14px rgba(34,46,80,.18) !important;
}

.sidebar-flyout-link.active,
.sidebar-flyout-link:nth-child(n).active,
.sidebar-flyout-subgroup .sidebar-flyout-link.active {
    color: var(--coastal-white) !important;
    background: linear-gradient(135deg, #007991, #439A86) !important;
    border-color: transparent !important;
    outline: 3px solid var(--coastal-gold) !important;
    outline-offset: 1px !important;
    box-shadow: 0 14px 28px rgba(0,121,145,.20) !important;
}


/* =========================================================
   FIX MOBILE - flyout sidebar admin tidak terpotong di HP
   ========================================================= */
@media (max-width: 767.98px) {
    html, body {
        overflow-x: hidden !important;
    }

    :root {
        --sidebar-rail-width: 58px !important;
    }

    .sidebar-admin-popout {
        overflow: visible !important;
        z-index: 1100 !important;
    }

    .sidebar-admin-popout .sidebar-rail-popout {
        width: var(--sidebar-rail-width) !important;
        min-width: var(--sidebar-rail-width) !important;
        max-width: var(--sidebar-rail-width) !important;
        padding: 8px 5px !important;
    }

    .sidebar-admin-popout .sidebar-rail-logo,
    .sidebar-admin-popout .sidebar-rail-btn {
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
    }

    .sidebar-admin-popout .sidebar-flyout-backdrop {
        top: 0 !important;
        z-index: 1101 !important;
        background: rgba(15,23,42,.38) !important;
    }

    .sidebar-admin-popout .sidebar-flyout-panel {
        left: 50% !important;
        right: auto !important;
        top: calc(var(--navbar-height) + 10px) !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 18px) !important;
        max-width: 360px !important;
        max-height: calc(100dvh - var(--navbar-height) - 20px) !important;
        padding: 10px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        z-index: 1102 !important;
    }

    .sidebar-flyout-header {
        padding: 6px 6px 10px !important;
        margin-bottom: 10px !important;
    }

    .sidebar-flyout-menu-grid,
    .sidebar-flyout-subgroup .sidebar-flyout-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sidebar-flyout-subgroup {
        padding: 8px !important;
    }

    .sidebar-flyout-link {
        min-height: 86px !important;
        padding: 10px 8px !important;
        border-radius: 16px !important;
        word-break: break-word !important;
        overflow: hidden !important;
    }

    .sidebar-flyout-link-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 12px !important;
    }

    .sidebar-flyout-link-text {
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }
}

@media (max-width: 420px) {
    .sidebar-admin-popout .sidebar-flyout-panel {
        width: calc(100vw - 14px) !important;
        top: calc(var(--navbar-height) + 8px) !important;
        padding: 8px !important;
    }

    .sidebar-flyout-menu-grid,
    .sidebar-flyout-subgroup .sidebar-flyout-menu-grid {
        gap: 8px !important;
    }

    .sidebar-flyout-link {
        min-height: 78px !important;
        padding: 8px 6px !important;
    }

    .sidebar-flyout-link-text {
        font-size: 10.8px !important;
    }
}


/* =========================================================
   FINAL FIX MOBILE SIDEBAR FLYOUT
   - panel dihitung dari viewport, bukan dari rail sidebar
   - seluruh isi menu bisa discroll
   - sisi kanan/kiri tidak terpotong
   ========================================================= */
@media (max-width: 767.98px) {
    .sidebar-admin-popout.flyout-open {
        transform: none !important;
        overflow: visible !important;
    }

    .sidebar-admin-popout.flyout-open .sidebar-flyout-panel {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: calc(var(--navbar-height) + 8px) !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 20px) !important;
        max-width: 380px !important;
        height: auto !important;
        max-height: calc(100dvh - var(--navbar-height) - 16px) !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        border-radius: 18px !important;
        z-index: 1202 !important;
    }

    .sidebar-admin-popout.flyout-open .sidebar-flyout-backdrop {
        position: fixed !important;
        inset: 0 !important;
        display: block !important;
        z-index: 1201 !important;
    }

    .sidebar-flyout-menu-grid,
    .sidebar-flyout-subgroup .sidebar-flyout-menu-grid {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sidebar-flyout-link,
    .sidebar-flyout-subgroup,
    .sidebar-popout-menu {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sidebar-flyout-link-text {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

@media (max-width: 390px) {
    .sidebar-admin-popout.flyout-open .sidebar-flyout-panel {
        width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - var(--navbar-height) - 12px) !important;
        padding: 8px !important;
    }

    .sidebar-flyout-menu-grid,
    .sidebar-flyout-subgroup .sidebar-flyout-menu-grid {
        gap: 7px !important;
    }

    .sidebar-flyout-link {
        min-height: 74px !important;
        padding: 7px 5px !important;
    }
}


/* =========================================================
   REVISI GLOBAL TABLE HEADER SORT/FILTER - 2026-08-08
   Semua teks, link, dan icon sort/filter di header tabel admin
   dibuat kuning agar tidak menyatu dengan background tabel gelap.
   Berlaku untuk Pesanan Online, Riwayat Pembelian, Stok Barang,
   Produksi Barang, Bayar Utang, dan tabel admin lain.
   ========================================================= */
.main-content .table thead th,
.main-content .table thead th *,
.main-content .table thead th a,
.main-content .table thead th a.text-dark,
.main-content .table thead th a.text-muted,
.main-content .table thead th .text-dark,
.main-content .table thead th .text-muted,
.main-content .table thead th i,
.main-content .table thead th .bi,
.main-content table.dataTable thead th,
.main-content table.dataTable thead th *,
.main-content table.dataTable thead th a,
.main-content table.dataTable thead th i,
.main-content table.dataTable thead th .bi {
    color: var(--coastal-gold, #FFE66D) !important;
    opacity: 1 !important;
}

.main-content .table thead th svg,
.main-content .table thead th svg *,
.main-content table.dataTable thead th svg,
.main-content table.dataTable thead th svg * {
    color: var(--coastal-gold, #FFE66D) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

.main-content .table thead th a:hover,
.main-content .table thead th a:focus,
.main-content table.dataTable thead th a:hover,
.main-content table.dataTable thead th a:focus {
    color: #FFF3A3 !important;
    text-decoration: none !important;
}

.main-content .table thead th .bi-sort-up,
.main-content .table thead th .bi-sort-down,
.main-content .table thead th .bi-arrow-up,
.main-content .table thead th .bi-arrow-down,
.main-content .table thead th .bi-arrow-down-up,
.main-content .table thead th [class*="sort"],
.main-content table.dataTable thead .sorting,
.main-content table.dataTable thead .sorting_asc,
.main-content table.dataTable thead .sorting_desc,
.main-content table.dataTable thead .sorting_disabled {
    color: var(--coastal-gold, #FFE66D) !important;
    opacity: 1 !important;
}

.main-content table.dataTable thead > tr > th.sorting::before,
.main-content table.dataTable thead > tr > th.sorting::after,
.main-content table.dataTable thead > tr > th.sorting_asc::before,
.main-content table.dataTable thead > tr > th.sorting_asc::after,
.main-content table.dataTable thead > tr > th.sorting_desc::before,
.main-content table.dataTable thead > tr > th.sorting_desc::after,
.main-content table.dataTable thead > tr > td.sorting::before,
.main-content table.dataTable thead > tr > td.sorting::after,
.main-content table.dataTable thead > tr > td.sorting_asc::before,
.main-content table.dataTable thead > tr > td.sorting_asc::after,
.main-content table.dataTable thead > tr > td.sorting_desc::before,
.main-content table.dataTable thead > tr > td.sorting_desc::after {
    color: var(--coastal-gold, #FFE66D) !important;
    opacity: 1 !important;
}

.main-content .table thead th .sort-muted,
.main-content .table thead th .filter-icon,
.main-content .table thead th .sort-icon {
    color: var(--coastal-gold, #FFE66D) !important;
    opacity: 1 !important;
}


/* =========================================================
   REVISI STOK TABLE - header/isi tabel tidak turun per huruf
   Daftar saldo stok, penyesuaian stok, mutasi stok, konversi produk.
   ========================================================= */
.main-content .table thead th,
.main-content .table thead th *,
.main-content .table thead th a,
.main-content .table thead th span,
.main-content .table thead th i,
.main-content .table thead th .bi {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: middle !important;
}

.main-content .stok-table-responsive,
.main-content .stok-table-responsive > div {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.main-content .stok-nowrap-table {
    width: max-content !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
}

.main-content .stok-nowrap-table th,
.main-content .stok-nowrap-table td,
.main-content .stok-nowrap-table th *,
.main-content .stok-nowrap-table td *,
.main-content .stok-nowrap-table a,
.main-content .stok-nowrap-table .badge {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.main-content .stok-nowrap-table thead th {
    color: var(--coastal-gold, #FFE66D) !important;
    background: var(--coastal-indigo, #24345A) !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

/* Lebar minimum supaya judul kolom stok tidak pecah */
.main-content .stok-saldo-table { min-width: 1160px !important; }
.main-content .stok-saldo-table th:nth-child(1), .main-content .stok-saldo-table td:nth-child(1) { min-width: 55px !important; }
.main-content .stok-saldo-table th:nth-child(2), .main-content .stok-saldo-table td:nth-child(2) { min-width: 120px !important; }
.main-content .stok-saldo-table th:nth-child(3), .main-content .stok-saldo-table td:nth-child(3) { min-width: 120px !important; }
.main-content .stok-saldo-table th:nth-child(4), .main-content .stok-saldo-table td:nth-child(4) { min-width: 260px !important; }
.main-content .stok-saldo-table th:nth-child(5), .main-content .stok-saldo-table td:nth-child(5) { min-width: 160px !important; }
.main-content .stok-saldo-table th:nth-child(6), .main-content .stok-saldo-table td:nth-child(6) { min-width: 110px !important; }
.main-content .stok-saldo-table th:nth-child(7), .main-content .stok-saldo-table td:nth-child(7) { min-width: 120px !important; }
.main-content .stok-saldo-table th:nth-child(8), .main-content .stok-saldo-table td:nth-child(8) { min-width: 155px !important; }
.main-content .stok-saldo-table th:nth-child(9), .main-content .stok-saldo-table td:nth-child(9) { min-width: 160px !important; }
.main-content .stok-saldo-table th:nth-child(10), .main-content .stok-saldo-table td:nth-child(10) { min-width: 130px !important; }

.main-content .stok-opname-table { min-width: 1240px !important; }
.main-content .stok-opname-table th:nth-child(1), .main-content .stok-opname-table td:nth-child(1) { min-width: 48px !important; }
.main-content .stok-opname-table th:nth-child(2), .main-content .stok-opname-table td:nth-child(2) { min-width: 55px !important; }
.main-content .stok-opname-table th:nth-child(3), .main-content .stok-opname-table td:nth-child(3) { min-width: 170px !important; }
.main-content .stok-opname-table th:nth-child(4), .main-content .stok-opname-table td:nth-child(4) { min-width: 135px !important; }
.main-content .stok-opname-table th:nth-child(5), .main-content .stok-opname-table td:nth-child(5) { min-width: 180px !important; }
.main-content .stok-opname-table th:nth-child(6), .main-content .stok-opname-table td:nth-child(6) { min-width: 105px !important; }
.main-content .stok-opname-table th:nth-child(7), .main-content .stok-opname-table td:nth-child(7) { min-width: 105px !important; }
.main-content .stok-opname-table th:nth-child(8), .main-content .stok-opname-table td:nth-child(8) { min-width: 105px !important; }
.main-content .stok-opname-table th:nth-child(9), .main-content .stok-opname-table td:nth-child(9) { min-width: 150px !important; }
.main-content .stok-opname-table th:nth-child(10), .main-content .stok-opname-table td:nth-child(10) { min-width: 105px !important; }
.main-content .stok-opname-table th:nth-child(11), .main-content .stok-opname-table td:nth-child(11) { min-width: 190px !important; }

.main-content .stok-mutasi-table { min-width: 1320px !important; }
.main-content .stok-mutasi-table th:nth-child(1), .main-content .stok-mutasi-table td:nth-child(1) { min-width: 55px !important; }
.main-content .stok-mutasi-table th:nth-child(2), .main-content .stok-mutasi-table td:nth-child(2) { min-width: 135px !important; }
.main-content .stok-mutasi-table th:nth-child(3), .main-content .stok-mutasi-table td:nth-child(3) { min-width: 110px !important; }
.main-content .stok-mutasi-table th:nth-child(4), .main-content .stok-mutasi-table td:nth-child(4) { min-width: 250px !important; }
.main-content .stok-mutasi-table th:nth-child(5), .main-content .stok-mutasi-table td:nth-child(5) { min-width: 150px !important; }
.main-content .stok-mutasi-table th:nth-child(6), .main-content .stok-mutasi-table td:nth-child(6) { min-width: 125px !important; }
.main-content .stok-mutasi-table th:nth-child(7), .main-content .stok-mutasi-table td:nth-child(7) { min-width: 100px !important; }
.main-content .stok-mutasi-table th:nth-child(8), .main-content .stok-mutasi-table td:nth-child(8) { min-width: 100px !important; }
.main-content .stok-mutasi-table th:nth-child(9), .main-content .stok-mutasi-table td:nth-child(9) { min-width: 125px !important; }
.main-content .stok-mutasi-table th:nth-child(10), .main-content .stok-mutasi-table td:nth-child(10) { min-width: 135px !important; }
.main-content .stok-mutasi-table th:nth-child(11), .main-content .stok-mutasi-table td:nth-child(11) { min-width: 155px !important; }
.main-content .stok-mutasi-table th:nth-child(12), .main-content .stok-mutasi-table td:nth-child(12) { min-width: 90px !important; }

.main-content .konversi-produk-table { min-width: 1500px !important; }
.main-content .konversi-produk-table th:nth-child(1), .main-content .konversi-produk-table td:nth-child(1) { min-width: 55px !important; }
.main-content .konversi-produk-table th:nth-child(2), .main-content .konversi-produk-table td:nth-child(2) { min-width: 130px !important; }
.main-content .konversi-produk-table th:nth-child(3), .main-content .konversi-produk-table td:nth-child(3) { min-width: 230px !important; }
.main-content .konversi-produk-table th:nth-child(4), .main-content .konversi-produk-table td:nth-child(4) { min-width: 230px !important; }
.main-content .konversi-produk-table th:nth-child(5), .main-content .konversi-produk-table td:nth-child(5) { min-width: 120px !important; }
.main-content .konversi-produk-table th:nth-child(6), .main-content .konversi-produk-table td:nth-child(6) { min-width: 110px !important; }
.main-content .konversi-produk-table th:nth-child(7), .main-content .konversi-produk-table td:nth-child(7) { min-width: 140px !important; }
.main-content .konversi-produk-table th:nth-child(8), .main-content .konversi-produk-table td:nth-child(8) { min-width: 160px !important; }
.main-content .konversi-produk-table th:nth-child(9), .main-content .konversi-produk-table td:nth-child(9) { min-width: 170px !important; }
.main-content .konversi-produk-table th:nth-child(10), .main-content .konversi-produk-table td:nth-child(10) { min-width: 180px !important; }
.main-content .konversi-produk-table th:nth-child(11), .main-content .konversi-produk-table td:nth-child(11) { min-width: 110px !important; }
.main-content .konversi-produk-table th:nth-child(12), .main-content .konversi-produk-table td:nth-child(12) { min-width: 120px !important; }


/* =========================================================
   REVISI GLOBAL CETAK LANDSCAPE - 2026-08-08
   Semua halaman admin yang dicetak dari browser dibuat landscape
   dan tabel tidak boleh terpotong samping.
   ========================================================= */
@media print {
    @page {
        size: A4 landscape !important;
        margin: 8mm 8mm 10mm 8mm !important;
    }

    html, body {
        width: 297mm !important;
        max-width: 297mm !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .no-print,
    .page-header,
    .page-header-card,
    .sidebar-admin,
    .sidebar-admin-popout,
    .topbar,
    .navbar,
    .btn,
    button,
    .pagination,
    .modal-backdrop {
        display: none !important;
    }

    .admin-wrapper,
    .main-wrapper,
    .main-content,
    .content-wrapper {
        width: 281mm !important;
        max-width: 281mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .table-responsive,
    .table-responsive > div {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 0 !important;
    }

    table,
    table.table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        font-size: 7.6px !important;
    }

    th,
    td {
        padding: 2.5px 3.2px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.15 !important;
        vertical-align: middle !important;
    }

    th {
        white-space: nowrap !important;
        background: #24345A !important;
        color: #FFE66D !important;
    }
}