/* ============================================================================
   MOBILE.CSS
   Override responsif untuk layar kecil (iPhone dkk). File ini SENGAJA
   dipisah dari style.css supaya style.css asli (dipakai juga sebagai
   referensi tampilan desktop) tidak perlu diubah sama sekali.
   ============================================================================ */

/* Bottom nav (mobile) & popup grup - disembunyikan by default (desktop),
   dimunculkan lewat media query di bawah. */
#bottom-nav {
    display: none;
}

/* Header atas mobile (logo + nama app) - disembunyikan by default (desktop),
   dimunculkan lewat media query di bawah, sama seperti #bottom-nav. */
#mobile-header {
    display: none;
}

#bottom-nav-popup-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 30, 0.35);
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

#bottom-nav-popup-backdrop.bottom-nav-popup-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

#bottom-nav-popup {
    display: none;
    position: fixed;
    width: 200px;
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(36, 23, 72, 0.25);
    padding: 8px;
    z-index: 50;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    flex-direction: column;
}

#bottom-nav-popup a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--color-ink);
    text-decoration: none;
    font-size: 14px;
}

#bottom-nav-popup a:hover,
#bottom-nav-popup a.active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

#bottom-nav-popup.bottom-nav-popup--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 860px) {
    /* ---------- Layout dasar: sidebar disembunyikan, ganti bottom nav ---------- */
    .app-shell {
        display: block;
        height: auto;
        min-height: 100vh;
    }

    .sidebar {
        display: none;
    }

    #bottom-nav {
        display: flex;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 12px rgba(36, 23, 72, 0.08);
        /* Tinggi bar fixed 64px (persis h-16 Tailwind di referensi Panorama
           Halimpu), konten di-center vertikal - ganti dari padding manual
           yang sebelumnya numpuk (nav padding + item padding) dan bikin
           bar jadi lebih tinggi dari seharusnya.
           box-sizing content-box di sini biar padding-bottom safe-area di
           bawah nambah DI LUAR 64px, bukan makan ke dalam tinggi kontennya -
           sama seperti struktur 2 layer (nav + grid h-16) di referensi. */
        box-sizing: content-box;
        height: 64px;
        padding: 0 4px max(20px, env(safe-area-inset-bottom));
    }

    .bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: 11px;
        padding: 0;
        cursor: pointer;
    }

    /* Ikon sekarang SVG lineart (inline, lihat ICONS di sidebar.js), bukan
       emoji lagi - svg mewarisi warna teks (currentColor) jadi otomatis
       ikut state aktif/nonaktif tanpa aset terpisah. */
    .bottom-nav__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .bottom-nav__icon svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .bottom-nav__label {
        font-size: 11px;
        white-space: nowrap;
    }

    .bottom-nav__item.active {
        color: var(--color-primary);
    }

    .bottom-nav__item.active .bottom-nav__icon svg {
        stroke-width: 2.1;
    }

    /* Tombol "Order" - tampilan sama seperti sebelumnya (lingkaran nongol
       lewat margin-top negatif di icon, label tetap sejajar item lain).
       Area klik/tap diperluas eksplisit lewat ::before yang ukurannya
       menutupi seluruh lingkaran (termasuk yang nongol ke atas garis bar) -
       jadi area tap-nya dijamin utuh mengikuti bentuk lingkaran, terpisah
       dari kotak <a> yang aslinya cuma setinggi bar. */
    .bottom-nav__item--center {
        position: relative;
    }

    .bottom-nav__item--center::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 64px;
        height: 72px;
    }

    .bottom-nav__item--center .bottom-nav__icon {
        position: relative;
        width: 56px;
        height: 56px;
        margin-top: -24px;
        border-radius: 50%;
        background: var(--color-primary);
        color: #fff;
        /* Ring putih 4px pemisah dari background bar, ala ring-4 ring-white
           di referensi Panorama Halimpu. */
        box-shadow: 0 5px 14px rgba(140, 82, 255, 0.4), 0 0 0 4px var(--color-surface);
    }

    .bottom-nav__item--center .bottom-nav__icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 2;
    }

    .bottom-nav__item--center.active .bottom-nav__icon {
        background: var(--color-primary-dark);
    }

    .bottom-nav__item--center .bottom-nav__label {
        position: relative;
        color: var(--color-ink);
        font-weight: 600;
    }

    #bottom-nav-popup-backdrop {
        display: block;
    }

    #bottom-nav-popup {
        display: flex;
        bottom: 80px;
    }

    /* ---------- Header atas: logo + nama app ----------
       Bar warna solid nempel di atas, latar ikut naik sampai belakang status
       bar (padding-top pakai safe-area-inset-top) supaya area status bar
       ikut ketutup warna brand - senada sama referensi Panorama Halimpu. */
    #mobile-header {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 41;
        background: radial-gradient(circle at 30% 20%, #a476ff 0%, var(--color-ink) 65%);
        padding: calc(env(safe-area-inset-top, 20px) + 10px) 16px 10px;
        box-shadow: 0 2px 8px rgba(36, 23, 72, 0.15);
    }

    #mobile-header img {
        width: 32px;
        height: 32px;
        object-fit: contain;
        flex-shrink: 0;
    }

    #mobile-header span {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
    }

    .content {
        height: auto;
        min-height: 100vh;
        /* Bottom nav mobile menggantikan hamburger - konten mulai dari
           bawah header atas (logo+nama app, lihat #mobile-header) yang kini
           fixed nempel di atas termasuk area status bar, dan diberi jarak
           bawah supaya tidak ketiban bottom nav yang fixed. */
        padding: calc(env(safe-area-inset-top, 20px) + 64px) 16px 104px;
    }

    /* Chat AI mengambang digeser ke atas biar tidak numpuk sama bottom nav */
    #ai-chat-widget {
        bottom: 100px;
    }

    /* ---------- Konten umum ---------- */
    h1 {
        font-size: 18px;
    }

    .card {
        padding: 14px;
    }

    .toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Heading tetap full-width di baris sendiri, tapi tombol/checkbox
       biarkan seukuran isinya - jangan dipaksa melebar penuh supaya
       tidak terasa raksasa dan bisa berdampingan kalau muat. */
    .toolbar h1,
    .toolbar h2 {
        width: 100%;
    }

    .toolbar button,
    .toolbar label {
        width: auto;
        flex: 0 0 auto;
    }

    /* Tombol "Cetak Invoice PDF" dan "Kirim Invoice" di panel Detail
       Order disejajarkan (bukan ditumpuk), muat berdampingan di layar HP. */
    .order-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---------- Baris filter/panel berdampingan: satu per baris di mobile ----------
       Berlaku generik untuk semua halaman yang pakai pola flex-wrap ini
       (List Belanja, Order, Dashboard, Brand & Kategori, dst) tanpa perlu
       ubah HTML tiap halaman satu-satu. */
    div[style*="flex-wrap"] > * {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Kartu produk: judul dan tombol aksi ditumpuk (bukan berdampingan)
       supaya tidak saling ketiban di layar sempit. */
    .product-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* ---------- Kartu produk: ringkas -> tap -> buka di tengah ----------
       Defaultnya cuma nampilin nama produk + jumlah varian (baris
       ringkas). Tap kartunya buka detail lengkap (body: header + tabel
       varian) mengambang di tengah layar, mirip modal. */
    .product-card {
        cursor: pointer;
        padding: 14px 16px;
    }

    .product-card__compact-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .product-card__body {
        display: none;
    }

    .product-card.is-expanded {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Sengaja lebih rendah dari .floating-form-card (z-index 1000, dipakai
           form Tambah/Edit Produk & Tambah/Edit Varian) - supaya kalau form
           itu dibuka SAAT card produk lagi expanded (misal tap "+ Tambah
           Varian"), form-nya selalu tampil bersih di atas, bukan numpuk
           berantakan sejajar dengan card produk di belakangnya. */
        z-index: 500;
        width: 90%;
        max-width: 640px;
        max-height: 85vh;
        overflow-y: auto;
        cursor: default;
    }

    .product-card.is-expanded .product-card__compact-row {
        display: none;
    }

    .product-card.is-expanded .product-card__body {
        display: block;
    }

    #product-card-backdrop {
        /* Ikut direndahkan bareng .is-expanded di atas, dengan alasan yang
           sama - lihat komentar di .product-card.is-expanded. */
        z-index: 499;
    }

    /* ---------- Kartu Brand/Kategori/Event: ringkas -> tap -> buka di
       tengah (beda dari desktop yang selalu satu baris padat - lihat
       style.css) ---------- */
    .master-card {
        display: block; /* override flex-row desktop */
        cursor: pointer;
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    .master-card__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .master-card__extra {
        display: none;
    }

    .master-card.is-expanded {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 500;
        width: 90%;
        max-width: 640px;
        max-height: 85vh;
        overflow-y: auto;
        cursor: default;
    }

    .master-card.is-expanded .master-card__row {
        margin-bottom: 14px;
    }

    .master-card.is-expanded .master-card__extra {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    #master-card-backdrop {
        z-index: 499;
    }

    /* ---------- Kartu Brand di List Belanja: pola SAMA PERSIS
       dengan .master-card di atas ---------- */
    .shopping-card {
        cursor: pointer;
        padding: 14px 16px;
    }

    .shopping-card__compact-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .shopping-card__body {
        display: none;
    }

    .shopping-card.is-expanded {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 500;
        width: 90%;
        max-width: 640px;
        max-height: 85vh;
        overflow-y: auto;
        cursor: default;
    }

    .shopping-card.is-expanded .shopping-card__compact-row {
        display: none;
    }

    .shopping-card.is-expanded .shopping-card__body {
        display: block;
    }

    #shopping-card-backdrop {
        z-index: 499;
    }

    /* ---------- Tabel jadi kartu bertumpuk di mobile ----------
       Header tabel disembunyikan (tapi tetap ada untuk screen reader),
       tiap baris jadi 1 "kartu" dengan label di depan tiap nilai
       (diambil dari atribut data-label per <td>). Jauh lebih rapi
       dibanding scroll horizontal untuk tabel padat kolom. */
    table {
        display: block;
        width: 100%;
        border: none;
    }

    thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    tbody {
        display: block;
        width: 100%;
    }

    tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: #fff;
    }

    /* Baris kosong/empty-state (colspan) biar tidak ikut dibingkai kartu */
    tr:has(td[colspan]) {
        border: none;
        padding: 0;
        margin-bottom: 0;
        background: transparent;
    }

    /* Tabel Order: urutan baris di mobile SENGAJA beda dari urutan kolom
       di desktop (Customer, Status, Grand Total, Tanggal, Event - bukan
       Tanggal duluan seperti di desktop). Di-scope ke #orders-table biar
       tidak ikut ngubah urutan tabel lain. */
    #orders-table td[data-label="Customer"] { order: 1; }
    #orders-table td[data-label="Status"] { order: 2; }
    #orders-table td[data-label="Grand Total"] { order: 3; }
    #orders-table td[data-label="Tanggal"] { order: 4; }
    #orders-table td[data-label="Event"] { order: 5; }
    #orders-table td.col-detail-link { order: 6; }

    td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid #f0f0f3;
        text-align: right;
        font-size: 13px;
    }

    td:last-child {
        border-bottom: none;
    }

    /* Kolom aksi (tombol Edit/Chat di Customers, dst) - dorong semua
       tombolnya jadi satu grup nempel di kanan, bukan dipisah ke ujung
       kiri & kanan seperti kolom data biasa (Nama/Telepon/dll). */
    .actions-cell {
        /* !important: sel ini juga match ".actions-cell" TAPI "td:not([data-label])"
           di bawah (baris ~287) punya specificity lebih tinggi (elemen+pseudo-class)
           dan akan menang tanpa !important - override paksa di sini. */
        justify-content: flex-end !important;
    }

    td[colspan] {
        display: block;
        text-align: left;
        border-bottom: none;
    }

    /* Halaman Order: tombol "Detail" disembunyikan di mobile - seluruh
       kartu order sudah bisa langsung di-tap untuk buka Detail. */
    #orders-table .col-detail-link {
        display: none;
    }

    /* Label kolom (dari data-label) muncul di kiri, rata kiri, tebal -
       menggantikan header tabel yang disembunyikan di mobile. */
    td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        text-align: left;
        flex-shrink: 0;
    }

    /* Sel tanpa data-label (biasanya kolom Aksi/tombol) full-width,
       tombolnya rata kiri berdampingan. */
    td:not([data-label]) {
        justify-content: flex-start;
    }

    /* ---------- Modal: full-width, lebih mepet ke tepi ---------- */
    .modal-box {
        width: calc(100vw - 32px) !important;
        max-width: 420px;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* ---------- Form: input tetap besar, gampang di-tap ---------- */
    input, select, textarea {
        font-size: 16px; /* mencegah auto-zoom Safari saat fokus input */
    }

    /* Safari iOS suka render <input type="date"> jadi kotak kosong yang
       TINGGI BANGET kalau belum ada tanggal terisi (beda dari browser lain
       yang nampilin placeholder "dd/mm/yyyy" dan ukurannya normal). Paksa
       tinggi & padding-nya sama kayak input/select biasa - date picker
       bawaan iOS (tap untuk buka kalender) tetap jalan normal, cuma
       tampilan boxnya yang dirapikan. */
    input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        height: auto;
        min-height: 0;
        line-height: normal;
        padding: 12px 10px;
    }

    /* Tombol TIDAK perlu font-size 16px (auto-zoom Safari cuma kejadian
       pas fokus INPUT TEKS, bukan pas tap tombol) - dikecilkan supaya
       proporsional, tidak terlihat kebesaran. */
    button {
        font-size: 13px;
        padding: 7px 14px;
    }

    /* ---------- Bar aksi massal Order: tumpuk & rata kanan ----------
       Row 1 (Pilih Semua + jumlah terpilih) dibiarkan sejajar kiri-kanan
       satu baris. Select "Ubah status ke..." dan tombol Batal/Terapkan
       disejajarkan satu baris juga, didorong ke pojok kanan supaya
       konsisten sama posisi jempol saat pegang HP - select dikecilkan
       (flex-shrink) biar ketiganya cukup di lebar layar iPhone biasa;
       kalaupun kepepet, flex-wrap tetap jaga-jaga biar Terapkan nggak
       kepotong keluar layar. */
    .orders-bulk-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .orders-bulk-select-row {
        justify-content: space-between; 
    }

    .orders-bulk-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .orders-bulk-actions #bulk-status-select {
        flex: 0 1 150px;
        min-width: 0;
    }

    .orders-bulk-actions__buttons {
        flex-shrink: 0;
    }

    .order-item-row {
        flex-wrap: wrap;
    }

    .order-item-row select,
    .order-item-row .searchable-select {
        flex: 1 1 100%;
    }

    /* ---------- Login page: logo & card lebih kecil di layar sempit ---------- */
    .login-card {
        width: calc(100vw - 48px);
        max-width: 320px;
        padding: 24px;
    }
}

/* Aman untuk notch/home indicator iPhone */
@supports (padding: max(0px)) {
    .content {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* padding-bottom safe-area #bottom-nav sudah diatur langsung di rule
       utamanya (env(safe-area-inset-bottom) tanpa floor 8px, sama seperti
       referensi Panorama Halimpu) - tidak perlu override di sini lagi. */
}