/* ========================================================
   Lapisan PWA & responsif mobile (tambahan; tidak mengubah tema dasar)
   ======================================================== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(5, 150, 105, 0.12); overscroll-behavior-y: none; }

/* ---- Safe area (notch iPhone) saat mode standalone ---- */
@supports (padding: env(safe-area-inset-top)) {
    #appHeader > header { padding-top: env(safe-area-inset-top); height: calc(4rem + env(safe-area-inset-top)); }
    #appSidebar { padding-top: env(safe-area-inset-top); }
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ---- Toast PWA & banner offline ---- */
.pwa-toast {
    position: fixed; left: 12px; right: 12px; z-index: 30;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
    max-width: 480px; margin: 0 auto; padding: 10px 12px;
    background: #0f172a; color: #fff; border-radius: 14px; font-size: 13px; line-height: 1.35;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
}
.has-bottom-nav .pwa-toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
.pwa-btn { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: #059669; color: #fff; font-weight: 700; font-size: 13px; }
.pwa-btn-ghost { background: transparent; font-size: 22px; padding: 0 10px; color: #cbd5e1; }
#pwaOfflineBar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 130; padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
    background: #b45309; color: #fff; font-size: 12px; font-weight: 600; text-align: center;
}

/* ---- Bottom navigation (hanya layar < 1024px) ---- */
#mobileBottomNav { display: none; }
@media (max-width: 1023px) {
    body.has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    #mobileBottomNav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
        background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
        border-top: 1px solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
    }
    #mobileBottomNav a, #mobileBottomNav button {
        flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        background: transparent; border: 0; color: #64748b; font-size: 10.5px; font-weight: 600; text-decoration: none; padding: 6px 2px;
    }
    #mobileBottomNav i { font-size: 18px; }
    #mobileBottomNav .active { color: #059669; }
    #mobileBottomNav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- Tabel: selalu bisa digulir menyamping (cadangan) ---- */
.rt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ---- Tabel -> kartu di HP (< 640px) ---- */
@media (max-width: 639px) {
    table.rt-card, table.rt-card tbody { display: block; width: 100%; }
    table.rt-card thead { display: none; }
    table.rt-card tr:not(.hidden) {
        display: block; margin: 0 0 10px; padding: 6px 4px;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }
    table.rt-card td:not(.hidden) {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
        width: auto !important; padding: 6px 10px !important; border: 0 !important; text-align: right !important; white-space: normal !important;
    }
    table.rt-card td[data-label]::before {
        content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left;
        font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b;
    }
    table.rt-card td[data-label] > *:not(button):not(a) { min-width: 0; overflow-wrap: anywhere; }
    table.rt-card td[colspan] { display: block !important; text-align: center !important; }
    table.rt-card td:not([data-label])::before { content: none; }
}

/* ---- Area sentuh >= 44px (layar sentuh / mobile) ---- */
@media (pointer: coarse), (max-width: 1023px) {
    button, [role="button"], select, summary,
    input[type="button"], input[type="submit"], input[type="reset"],
    a[class*="rounded"], a[class*="btn"] {
        min-height: 44px; min-width: 44px;
    }
    a[class*="rounded"], a[class*="btn"] { display: inline-flex; align-items: center; justify-content: center; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]), textarea, select {
        min-height: 44px; font-size: 16px !important;     /* 16px mencegah iOS memperbesar layar saat fokus */
    }
    input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
    #appSidebar a, #appSidebar button { min-height: 44px; }
    .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
    .leaflet-container button { min-height: 0; min-width: 0; }
}

/* ---- Hindari konten melebar keluar layar ---- */
@media (max-width: 639px) {
    main { overflow-x: hidden; }
    img, canvas, svg { max-width: 100%; }
}
@media print { #mobileBottomNav, .pwa-toast, #pwaOfflineBar { display: none !important; } }

/* Kartu tabel: biarkan teks panjang membungkus, tidak terpotong */
@media (max-width: 639px) {
    table.rt-card td .truncate, table.rt-card td [class*="truncate"] { white-space: normal; overflow: visible; text-overflow: clip; }
    table.rt-card td [class*="max-w-"] { max-width: none; }
}