:root {
    --navy-900: #0B1F3A;
    --navy-800: #132F52;
    --navy-700: #1A3D6B;
    --accent: #2563EB;
    --content-bg: #F5F7FA;
}

body {
    background-color: var(--content-bg);
    color: #1F2937;
}

.sidebar-nav {
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.sidebar-nav a {
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.15s ease;
}

.sidebar-nav a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

.sidebar-nav a.active {
    color: #ffffff;
    background-color: var(--accent);
}

.qr-preview {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: inline-block;
}

/* ==== Tampilan mobile (v1.46.0) ====
   Sidebar jadi menu geser (off-canvas) di bawah 1024px, dibuka lewat tombol ☰ di header. */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    color: var(--navy-800);
    font-size: 1.4rem;
    line-height: 1;
}

.sidebar-toggle:hover {
    background: #f3f4f6;
}

.sidebar-backdrop {
    display: none;
}

@media (min-width: 1024px) {
    .sidebar-toggle {
        display: none;
    }

    /* Menu panjang tetap bisa digulir tanpa ikut menggulir halaman. */
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

@media (max-width: 1023px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    body.sidebar-open .app-sidebar {
        transform: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(0, 0, 0, 0.4);
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .app-header {
        padding: 0.75rem 1rem !important;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .app-main {
        padding: 1rem !important;
    }

    .app-footer {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Modal yang isinya panjang (mis. form disposal + memo) tetap bisa digulir di layar kecil. */
[id^="modal-"] > div {
    max-height: 90vh;
    overflow-y: auto;
}

/* iPhone memperbesar halaman bila ukuran huruf isian < 16px. */
@media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ==== v1.50.0: toast, grup menu, tombol sibuk ==== */
.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.75rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    font-size: 0.875rem;
    color: #1f2937;
    animation: toast-in 0.2s ease-out;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-success { border-left-color: #16a34a; }
.toast-error { border-left-color: #dc2626; }
.toast-leave { opacity: 0; transform: translateX(1rem); }

.toast-close {
    color: #9ca3af;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.15rem;
}

.toast-close:hover { color: #374151; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: none; }
}

.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group:not([open]) .nav-group-chevron { transform: rotate(-90deg); }

button.is-busy { opacity: 0.7; cursor: progress; }

/* Tab detail aset (v1.50.0): panel tersembunyi tetap ikut tercetak. */
.tab-hidden {
    display: none !important;
}

@media print {
    .no-print {
        display: none !important;
    }

    .tab-hidden {
        display: block !important;
    }
}