/* ============================================================
   admin2-mobile.css - Tampilan Admin 2 khusus HP (<= 768px)
   Hanya berlaku bila body[data-admin-role="admin2"]; owner & desktop tidak berubah.
   - menu bawah (bottom nav) 4 tab utama
   - tabel order -> kartu
   - inbox chat layar penuh seperti aplikasi
   ============================================================ */
#a2-bottomnav { display: none; }

@media (max-width: 768px) {
    body[data-admin-role="admin2"] { -webkit-tap-highlight-color: transparent; }
    body[data-admin-role="admin2"] #adminPage { background: #f1f5f9; }

    /* ---------- header ringkas satu baris ---------- */
    body[data-admin-role="admin2"] #adminPage > header > div {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; justify-content: space-between;
        gap: 8px !important; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important;
    }
    body[data-admin-role="admin2"] #adminPage > header > div > div { min-width: 0; flex: 1; gap: 8px !important; }
    body[data-admin-role="admin2"] #adminPage > header h1 { font-size: 1rem !important; line-height: 1.2; white-space: nowrap; }
    body[data-admin-role="admin2"] #adminPage > header .rounded-xl { padding: 2px !important; min-width: 0; flex: 1; max-width: 190px; }
    body[data-admin-role="admin2"] #filter-brand-admin { width: 100%; font-size: .7rem !important; padding: 8px 6px !important; min-height: 38px; }
    body[data-admin-role="admin2"] #adminPage > header button[onclick^="logout"] { padding: 0 !important; width: 40px; height: 40px; justify-content: center; flex-shrink: 0; border-radius: 12px; }

    /* ---------- konten ---------- */
    body[data-admin-role="admin2"] #adminPage main { padding: 12px 12px calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
    /* tab atas diganti menu bawah */
    body[data-admin-role="admin2"] #adminPage main > div.mb-6.border-b { display: none; }

    /* tombol aksi utama: 1 lebar + 2 sejajar */
    body[data-admin-role="admin2"] #adminPage main > div:first-child {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-bottom: 14px !important;
    }
    body[data-admin-role="admin2"] #adminPage main > div:first-child button {
        min-height: 46px; justify-content: center; padding: 8px 10px !important; font-size: .82rem; border-radius: 12px;
    }
    body[data-admin-role="admin2"] #adminPage main > div:first-child button:first-child { grid-column: 1 / -1; font-size: .92rem; }

    body[data-admin-role="admin2"] #adminPage section.p-6 { padding: 14px !important; border-radius: 16px !important; }
    body[data-admin-role="admin2"] #adminPage section h2 { font-size: 1.05rem !important; }
    body[data-admin-role="admin2"] #adminFilterToggle { padding: 12px 14px !important; border-radius: 14px !important; margin-bottom: 12px !important; }

    /* kolom isian: min 16px agar iPhone tidak zoom otomatis, target sentuh nyaman */
    body[data-admin-role="admin2"] #adminPage input:not([type="checkbox"]):not([type="radio"]),
    body[data-admin-role="admin2"] #adminPage select,
    body[data-admin-role="admin2"] #adminPage textarea { font-size: 16px !important; min-height: 44px; border-radius: 10px; }
    body[data-admin-role="admin2"] #bulk-action-container { width: 100%; flex-direction: column; align-items: stretch; }
    body[data-admin-role="admin2"] #bulk-action-container button { min-height: 44px; border-radius: 10px; }
    body[data-admin-role="admin2"] #archive-search + button, body[data-admin-role="admin2"] #bulkReactivateBtn { min-height: 44px; }

    /* ---------- tabel -> kartu ---------- */
    body[data-admin-role="admin2"] .admin-table,
    body[data-admin-role="admin2"] .admin-table tbody { display: block; width: 100%; }
    body[data-admin-role="admin2"] .admin-table thead { display: none; }
    body[data-admin-role="admin2"] .admin-table tr {
        display: grid; column-gap: 10px; row-gap: 6px; align-items: center;
        background: #fff !important; border: 1px solid #e2e8f0; border-radius: 14px;
        padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(15,23,42,.06);
    }
    body[data-admin-role="admin2"] .admin-table td { border: 0; padding: 0; font-size: .85rem; min-width: 0; word-break: break-word; }
    body[data-admin-role="admin2"] .admin-table td[colspan] { grid-column: 1 / -1; text-align: center; padding: 18px 8px; color: #64748b; }
    body[data-admin-role="admin2"] .admin-table td input[type="checkbox"] { width: 22px !important; height: 22px; min-height: 0; padding: 0; }
    body[data-admin-role="admin2"] .admin-table td .font-mono { font-size: .95rem; }
    body[data-admin-role="admin2"] .admin-table td:last-child:not([colspan]) {
        display: flex !important; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; margin-top: 2px;
    }
    body[data-admin-role="admin2"] .admin-table td:last-child:not([colspan]) button,
    body[data-admin-role="admin2"] .admin-table td:last-child:not([colspan]) a {
        flex: 1 1 28%; min-height: 42px; font-size: .8rem; padding: 6px 8px; justify-content: center; border-radius: 10px; font-weight: 600;
    }

    /* Order Aktif: [cek][ID | status] [cek][Nama | brand] [waktu | total] [aksi] */
    body[data-admin-role="admin2"] #adminOrderTableBody tr {
        grid-template-columns: 26px 1fr auto;
        grid-template-areas: "chk id st" "chk nm br" "chk wk tt" "act act act";
    }
    #adminOrderTableBody td:nth-child(1):not([colspan]) { grid-area: chk; align-self: start; padding-top: 2px; }
    #adminOrderTableBody td:nth-child(2):not([colspan]) { grid-area: id; }
    #adminOrderTableBody td:nth-child(3):not([colspan]) { grid-area: br; justify-self: end; }
    #adminOrderTableBody td:nth-child(3) > div { flex-direction: row !important; align-items: center; gap: 4px; }
    #adminOrderTableBody td:nth-child(4):not([colspan]) { grid-area: nm; font-weight: 600; color: #0f172a; }
    #adminOrderTableBody td:nth-child(5):not([colspan]) { grid-area: st; justify-self: end; }
    #adminOrderTableBody td:nth-child(6):not([colspan]) { grid-area: wk; color: #64748b; font-size: .78rem; }
    #adminOrderTableBody td:nth-child(6):not([colspan])::before { content: "⏱ "; }
    #adminOrderTableBody td:nth-child(7):not([colspan]) { grid-area: tt; justify-self: end; font-weight: 700; color: #0f172a; }
    #adminOrderTableBody td:nth-child(8):not([colspan]) { grid-area: act; }

    /* Menunggu Pembayaran: ID, Brand, Nama, Tgl, Total, Bukti, Aksi */
    body[data-admin-role="admin2"] #adminPendingTableBody tr {
        grid-template-columns: 1fr auto;
        grid-template-areas: "id br" "nm nm" "tg tt" "bk bk" "act act";
    }
    #adminPendingTableBody td:nth-child(1):not([colspan]) { grid-area: id; }
    #adminPendingTableBody td:nth-child(2):not([colspan]) { grid-area: br; justify-self: end; }
    #adminPendingTableBody td:nth-child(2) > div { flex-direction: row !important; align-items: center; gap: 4px; }
    #adminPendingTableBody td:nth-child(3):not([colspan]) { grid-area: nm; font-weight: 600; color: #0f172a; }
    #adminPendingTableBody td:nth-child(4):not([colspan]) { grid-area: tg; color: #64748b; font-size: .78rem; }
    #adminPendingTableBody td:nth-child(4):not([colspan])::before { content: "Selesai: "; }
    #adminPendingTableBody td:nth-child(5):not([colspan]) { grid-area: tt; justify-self: end; font-weight: 700; color: #0f172a; }
    #adminPendingTableBody td:nth-child(6):not([colspan]) { grid-area: bk; }
    #adminPendingTableBody td:nth-child(7):not([colspan]) { grid-area: act; }

    /* Arsip: cek, ID, Brand, Nama, Tgl Lunas, Total, Aksi */
    body[data-admin-role="admin2"] #adminArchiveTableBody tr {
        grid-template-columns: 26px 1fr auto;
        grid-template-areas: "chk id br" "chk nm nm" "chk tg tt" "act act act";
    }
    #adminArchiveTableBody td:nth-child(1):not([colspan]) { grid-area: chk; align-self: start; padding-top: 2px; }
    #adminArchiveTableBody td:nth-child(2):not([colspan]) { grid-area: id; }
    #adminArchiveTableBody td:nth-child(3):not([colspan]) { grid-area: br; justify-self: end; }
    #adminArchiveTableBody td:nth-child(3) > div { flex-direction: row !important; align-items: center; gap: 4px; }
    #adminArchiveTableBody td:nth-child(4):not([colspan]) { grid-area: nm; font-weight: 600; color: #0f172a; }
    #adminArchiveTableBody td:nth-child(5):not([colspan]) { grid-area: tg; color: #64748b; font-size: .78rem; }
    #adminArchiveTableBody td:nth-child(5):not([colspan])::before { content: "Lunas: "; }
    #adminArchiveTableBody td:nth-child(6):not([colspan]) { grid-area: tt; justify-self: end; font-weight: 700; color: #0f172a; }
    #adminArchiveTableBody td:nth-child(7):not([colspan]) { grid-area: act; }

    body[data-admin-role="admin2"] #adminOrderCount,
    body[data-admin-role="admin2"] #adminPendingCount,
    body[data-admin-role="admin2"] #adminArchiveCount { text-align: center; padding: 4px 0 0; font-size: .75rem; }

    /* ---------- menu bawah ---------- */
    body[data-admin-role="admin2"] #a2-bottomnav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid #e2e8f0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 18px rgba(15,23,42,.08);
    }
    #adminPage.hidden #a2-bottomnav { display: none !important; }
    #a2-bottomnav button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        min-height: 54px; border: 0; background: transparent; color: #64748b; font-size: .68rem; font-weight: 600;
        border-radius: 14px; position: relative; font-family: inherit;
    }
    #a2-bottomnav button svg { width: 22px; height: 22px; }
    #a2-bottomnav button.active { color: #1d4ed8; background: #eff6ff; }
    #a2-bottomnav button:active { transform: scale(.96); }
    #a2-bottomnav .a2-badge {
        position: absolute; top: 4px; left: 50%; margin-left: 8px; background: #ef4444; color: #fff;
        border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: .65rem; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; box-sizing: content-box;
    }

    /* ---------- inbox chat: layar penuh seperti aplikasi ---------- */
    body[data-admin-role="admin2"] .wa-app {
        height: calc(100dvh - var(--a2-hdr, 60px) - 84px - env(safe-area-inset-bottom, 0px)); min-height: 380px;
        border-radius: 16px; margin: 0;
    }
    body[data-admin-role="admin2"] .wa-app.chat-open {
        position: fixed; inset: 0; z-index: 60; height: 100dvh; min-height: 0; border-radius: 0; border: 0;
    }
    body[data-admin-role="admin2"] .wa-app.chat-open .wa-thread-head { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
    body[data-admin-role="admin2"] .wa-compose { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
    body[data-admin-role="admin2"] .wa-compose textarea { font-size: 16px; }
    body[data-admin-role="admin2"] .wa-side-head { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; }
    body[data-admin-role="admin2"] .wa-item { padding: 12px 14px; }
    body[data-admin-role="admin2"] .wa-avatar { width: 48px; height: 48px; }
    body[data-admin-role="admin2"] .wa-search input { font-size: 16px; padding: 10px 12px; }
    body[data-admin-role="admin2"] .wa-icon-btn { min-width: 40px; min-height: 40px; }
    body[data-admin-role="admin2"] .wa-back { font-size: 1.6rem; padding: 4px 10px 4px 2px; }

    /* ---------- modal & toast di HP ---------- */
    body[data-admin-role="admin2"] #toast-container { top: calc(8px + env(safe-area-inset-top, 0px)) !important; left: 8px !important; right: 8px !important; }
    body[data-admin-role="admin2"] #toast-container .toast { max-width: 100%; }
}