:root { color-scheme: dark; background: #0f172a; }
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; background-color: #0f172a !important; }
html { min-height: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
.hidden { display: none !important; }
body { min-height: 100vh; min-height: 100dvh; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: clip; background: #0f172a !important; }
/* Jaga latar belakang dan lebar halaman di Safari iOS serta Android WebView. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: #0f172a; pointer-events: none; }
#welcomeScreen, #appShell { background-color: #0f172a; width: 100%; max-width: 100%; min-width: 0; }
header, main, nav, section, .grid, .flex { min-width: 0; }
img, canvas, svg, video { max-width: 100%; }
canvas { display: block; }
button, input, select, textarea { max-width: 100%; }
input, select, textarea { min-width: 0; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.app-shell { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); background: #0f172a; overflow-x: clip; }
.safe-nav { padding-bottom: env(safe-area-inset-bottom); }
.modal-backdrop { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-card { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.welcome-card { width: min(100%, 27rem); }
.login-screen { min-height: 100vh; min-height: 100dvh; padding-top: max(1rem, env(safe-area-inset-top)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.app-header-inner { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.header-user-name { max-width: 42vw; overflow-wrap: anywhere; }
.header-user-email { max-width: 42vw; overflow-wrap: anywhere; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#tab-dashboard .summary-metrics { display:flex; flex-wrap:wrap; gap:.5rem; }
#tab-dashboard .summary-metrics > div { min-width: 0; }
#tab-dashboard .export-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
#tab-dashboard .export-actions button { min-width: 0; flex: 1 1 9rem; justify-content:center; }
.settings-section { border: 1px solid rgba(148,163,184,.16); background: rgba(15,23,42,.5); border-radius: 1rem; padding: 1rem; }
.field-control { display:block; width:100%; min-height:2.75rem; box-sizing:border-box; border-radius:.8rem; border:1px solid #475569; background:#0f172a; color:#f8fafc; padding:.7rem .85rem; font-size:16px; }
.field-control:focus { outline:2px solid rgba(16,185,129,.35); border-color:#34d399; }
.form-status { min-height:1.25rem; overflow-wrap:anywhere; }
#toast { pointer-events: none; }
#txListContainer > div { min-width: 0; flex-wrap: wrap; gap: .65rem; }
#txListContainer > div > div:first-child { min-width: 0; flex: 1 1 10rem; }
#txListContainer > div > div:first-child p:first-child { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .modal-backdrop { align-items: flex-start; padding: .55rem; }
    .modal-card { max-height: calc(100dvh - 1.1rem); padding: 1rem; border-radius: 1.15rem; }
    main { padding-left: .7rem !important; padding-right: .7rem !important; padding-top: .8rem !important; gap: .85rem !important; }
    #tab-dashboard { gap: .85rem !important; }
    #tab-dashboard > div:first-child { padding: 1rem !important; }
    #tab-dashboard .summary-metrics > div { flex: 1 1 8rem; }
    #tab-dashboard > div:nth-child(2) { padding: 1rem !important; }
    #txSearch { width: 45%; flex: 1 1 7rem; }
    #txFilter { max-width: 48%; }
    #txListContainer > div > div:last-child { flex: 1 1 100%; justify-content: space-between; }
    .safe-nav > div { height: 3.7rem; }
    .header-user-name, .header-user-email { max-width: 38vw; }
    .top-action-label { display:none; }
    .app-header-inner { width: 100%; max-width: 100%; padding-left:.7rem !important; padding-right:.7rem !important; }
    .app-header-inner > div:first-child { min-width: 0; }
    .app-header-inner h1 { white-space: nowrap; }
    .header-user-name, .header-user-email { display: block; width: 100%; max-width: 100%; }
    .header-brand-icon { display:none !important; }
    main { width: 100%; max-width: 100%; min-width: 0; }
    #tab-dashboard > div, #tab-dashboard .grid > div { min-width: 0; max-width: 100%; }
    #mainChart { width: 100% !important; }
    .safe-nav { width: 100%; max-width: 100%; left: 0; right: 0; }
    .safe-nav > div { width: 100%; max-width: 100%; padding-left: .25rem; padding-right: .25rem; }
}
@media (max-width: 360px) {
    .header-user-name { font-size:.78rem; }
    .header-user-email { font-size:.62rem; }
    .header-actions button { padding-left:.65rem !important; padding-right:.65rem !important; }
    .nav-btn span { font-size:9px !important; }
    .nav-btn i { font-size:1rem !important; }
}

/* ===== Tablet & desktop (>= 768px): navigasi jadi tab di bawah header ===== */
@media (min-width: 768px) {
    .app-shell { padding-bottom: 0; }
    .safe-nav {
        position: sticky;
        top: 4rem;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        border-top: 0;
        border-bottom: 1px solid rgba(148, 163, 184, .16);
        background: rgba(30, 41, 59, .92);
        padding-bottom: 0;
    }
    .safe-nav > div { max-width: 40rem; height: 3.5rem; gap: .75rem; padding: 0 .75rem; }
    .safe-nav .nav-btn {
        flex-direction: row;
        gap: .5rem;
        border-radius: .9rem;
        font-size: .8125rem;
        transition: background-color .15s ease, color .15s ease;
    }
    .safe-nav .nav-btn:hover { background: rgba(16, 185, 129, .08); }
    .safe-nav .nav-btn span { font-size: 12px; margin-top: 0 !important; }
    .safe-nav .nav-btn i { font-size: 1rem !important; }
    #toast { top: 8.75rem; }
    .header-user-name, .header-user-email { max-width: 24rem; }
    main { padding-left: 1.25rem; padding-right: 1.25rem; }
    .modal-backdrop { padding: 1.5rem; }
}
@media (min-width: 1024px) {
    .safe-nav > div { max-width: 44rem; }
    .modal-card { padding: 1.75rem; }
}

@media print {
    nav, header button, .no-print, .modal-backdrop { display: none !important; }
    body, .app-shell { background: white !important; color: black !important; padding: 0 !important; }
    .tab-panel { display: block !important; }
}