/* ==========================================================================
   MOBILE-FIRST (HP) — panel ini terutama dipakai dari HP.
   Bottom-nav jempol, tombol >=44px, tabel jadi kartu, input 16px (iOS tidak auto-zoom).
   ========================================================================== */
.mobile-only { display: none !important; }
.mobile-only-inline { display: none; }
.nav-label, .nav-badge { display: none; }
.btn-hero { display: none; }
.pro-actions, .date-range { display: flex; gap: 8px; }

@media (max-width: 900px) {
    html, body { overflow-x: hidden; }
    body { overflow-y: auto; height: auto; font-size: 14px; -webkit-tap-highlight-color: transparent; }
    .app-layout { display: block; height: auto; min-height: 100vh; width: 100%; }
    .main-viewport { height: auto; overflow: visible; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .mobile-only { display: inline-flex !important; }
    .mobile-only-inline { display: inline; }
    .desk-only { display: none; }

    /* Bottom navigation */
    .sidebar-slim { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: auto; z-index: 50;
                    flex-direction: row; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
                    border-right: none; border-top: 1px solid var(--border-card);
                    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06); }
    .sidebar-top, .sidebar-bottom { display: none; }
    .sidebar-icon-nav { flex-direction: row; justify-content: space-around; gap: 0; width: 100%; }
    .icon-nav-item { width: auto; flex: 1; height: 52px; flex-direction: column; gap: 3px; font-size: 18px; border-radius: 12px; }
    .icon-nav-item.active { box-shadow: none; background: #FFF7EE; }
    .icon-nav-item:hover { box-shadow: none; }
    .nav-label { display: block; font-size: 10.5px; font-weight: 700; }
    .active-indicator-bar { display: none; }
    .nav-badge:not(:empty) { display: block; position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px;
                    padding: 0 5px; border-radius: 9px; background: var(--sun-orange-deep); color: #FFFFFF; font-size: 10.5px;
                    font-weight: 800; line-height: 18px; text-align: center; font-family: var(--font-mono); }

    /* Topbar ringkas & lengket */
    .topbar { position: sticky; top: 0; z-index: 40; height: auto; flex-wrap: wrap; gap: 8px;
              padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
    .topbar-left { width: 100%; justify-content: space-between; }
    .crumb-dim, .crumb-arrow { display: none; }
    .crumb-active { font-size: 13px; }
    .topbar-right { width: 100%; }
    .topbar-right .header-badge { display: none; }
    .action-btn-group { width: 100%; }
    .action-btn-group .btn { flex: 1; justify-content: center; height: 42px; font-size: 13px; }
    .action-btn-group .btn.mobile-only { flex: 0 0 46px; }

    /* Konten */
    .content-page { height: auto; overflow: visible; }
    .page-container-pad, .dashboard-scrollable { padding: 12px 16px; gap: 12px; overflow: visible; }
    .kpi-grid, .kpi-grid.kpi-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-hero { grid-column: 1 / -1; padding: 14px 16px; }
    .kpi-hero .kpi-number { font-size: 34px; }
    .btn-hero { display: flex; justify-content: center; height: 44px; font-size: 14px; margin-top: 4px; }
    .kpi-number { font-size: 22px; }
    .kpi-sub { font-size: 11px; }
    .analytics-layout-grid, .analytics-layout-grid[style] { grid-template-columns: 1fr !important; }
    .device-grid { grid-template-columns: 1fr; }
    .card-header-clean { height: auto; min-height: 44px; padding: 8px 14px; flex-wrap: wrap; gap: 6px; }
    .card-main-title { font-size: 12.5px; }

    /* Kartu device */
    .lease-time { font-size: 24px; }
    .dev-row { font-size: 13px; }
    .dev-actions { display: grid; grid-template-columns: 1fr 1fr 1fr 48px; gap: 8px; }
    .dev-actions .btn { height: 46px; font-size: 13.5px; }
    .dev-stat b { font-size: 17px; }

    /* Terminal */
    .terminal-body { font-size: 11.5px; }
    #dash-term { height: 260px !important; }
    #log-term { height: calc(100vh - 260px) !important; min-height: 320px !important; }
    .term-select { font-size: 13px; padding: 6px 10px; }
    .filter-chip { padding: 6px 12px; font-size: 11px; }

    /* Toolbar Akun Pro */
    .toolbar { padding: 10px 14px; gap: 10px; }
    .toolbar .spacer { display: none; }
    .mode-tabs { width: 100%; }
    .mode-tab { flex: 1; justify-content: center; padding: 9px 6px; font-size: 13px; }
    .pro-search { width: 100% !important; }
    .toolbar .form-input-clean { font-size: 16px; padding: 10px 12px; }
    .date-range { width: 100%; }
    .date-range .form-input-clean { flex: 1; min-width: 0; font-size: 14px; }
    .pro-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .pro-actions .btn { height: 46px; justify-content: center; font-size: 14px; }
    .pro-actions #pro-copy { grid-column: 1 / -1; }
    .toolbar .btn { height: 40px; }
    #pro-sel-info { width: 100%; order: -1; }

    /* Tabel -> kartu */
    .table-wrap { max-height: none !important; overflow: visible; }
    table.data thead { display: none; }
    table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
    table.data tr { border-bottom: 1px solid var(--border-card); padding: 12px 14px; }
    table.data tr:hover td { background: transparent; }
    table.data td { border: none; padding: 0; }
    table.data td.empty-row { padding: 28px 10px !important; }

    .data-pro tr { display: grid !important; grid-template-columns: 28px 1fr auto; column-gap: 10px; row-gap: 3px; align-items: center; }
    .data-pro td:nth-child(1) { grid-row: 1 / span 3; }
    .data-pro td:nth-child(1) input { width: 20px; height: 20px; }
    .data-pro td:nth-child(2) { font-size: 13.5px; font-weight: 700; color: var(--text-pure); word-break: break-all; }
    .data-pro td:nth-child(3) { font-size: 12.5px; color: var(--text-secondary); }
    .data-pro td:nth-child(3)::before { content: "pass: "; color: var(--text-muted); }
    .data-pro td:nth-child(4), .data-pro td:nth-child(6) { display: none; }
    .data-pro td:nth-child(5) { font-size: 11px; color: var(--text-muted); }
    .data-pro td:nth-child(7) { grid-column: 3; grid-row: 1; text-align: right; }
    .data-pro td:nth-child(8) { grid-column: 3; grid-row: 2 / span 2; }
    .data-pro .copy-btn { padding: 10px 14px; font-size: 13px; font-weight: 700; border-radius: 10px; }
    .data-pro td.empty-row { grid-column: 1 / -1; }

    .data-queue tr { display: grid !important; grid-template-columns: 28px 30px 1fr; align-items: center; column-gap: 8px; }
    .data-queue td:nth-child(1) input { width: 20px; height: 20px; }
    .data-queue td:nth-child(3) { font-size: 13px; word-break: break-all; }
    .data-queue td:nth-child(4) { grid-column: 3; }
    .data-queue td.empty-row { grid-column: 1 / -1; }
    .data-hist td:nth-child(1) { font-size: 13px; font-weight: 700; word-break: break-all; }
    .data-hist td:nth-child(2), .data-hist td:nth-child(3) { font-size: 11.5px; color: var(--text-muted); }

    /* Form antrian */
    #q-text { font-size: 16px !important; min-height: 180px !important; }
    #page-queue .tele-control-actions .btn { height: 46px; flex: 1; justify-content: center; font-size: 14px; }
    #page-queue .tele-control-actions .btn-ghost { flex: 0 0 auto; padding: 0 16px; }
    .auto-scroll-btn { font-size: 13px; }
    .auto-scroll-btn input { width: 18px; height: 18px; }

    .toast-popup { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; }
    .login-card .form-input-clean { font-size: 16px; padding: 12px; }
    .login-card .btn { height: 46px !important; font-size: 14px; }
}