/* ==========================================================
   Counter Doodle — Layar kecil (tablet & HP)
   Dimuat paling akhir supaya bisa menimpa aturan halaman.
   Sidebar off-canvas ada di layout/app.css.
   ========================================================== */

/* tabel lebar di-scroll di dalam kartunya sendiri, bukan seluruh halaman */
.table-wrap {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1000px) {

    /* Bundle: atur isi + ringkasan harga jadi satu kolom */
    .bundle-config { grid-template-columns: minmax(0, 1fr); }
    .bundle-right { position: static; }
}

@media (max-width: 768px) {

    .card {
        padding: var(--space-14);
    }

    /* isi tabel satu baris; tabel di-scroll ke samping di dalam .table-wrap */
    .table-wrap th,
    .table-wrap td {
        white-space: nowrap;
    }

    /* header halaman: judul di atas, tombol aksi turun ke bawah */
    .crud-header,
    .page-header,
    .event-head,
    .section-head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-10);
    }

    .crud-header > div:first-child,
    .page-header > div:first-child {
        flex: 1 1 100%;
    }

    .event-head h2 { flex-wrap: wrap; }

    .event-actions {
        flex-wrap: wrap;
        flex-shrink: 1;
        width: 100%;
    }

    .event-actions > .btn,
    .event-actions > form,
    .event-actions > form .btn {
        flex: 1 1 auto;
    }

    /* filter: kontrol isi selebar layar (abaikan width inline) */
    .crud-filter,
    .crud-filter form,
    .sales-filter {
        gap: var(--space-8) !important;
    }

    .crud-filter .form-control,
    .crud-filter .search-box,
    .product-filter .form-control,
    .filter-row select,
    .filter-row .form-control,
    .sales-filter .form-control {
        flex: 1 1 100%;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none;
    }

    .crud-filter .btn,
    .product-filter .btn,
    .sales-filter .btn {
        flex: 1 1 auto;
    }

    /* form */
    .event-form { grid-template-columns: minmax(0, 1fr); }
    .event-form .span-2 { grid-column: auto; }
    .adj-form { grid-template-columns: minmax(0, 1fr); }

    .event-form-actions > .btn { flex: 1 1 auto; }

    /* kotak ringkasan */
    .event-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }

    .event-stat { padding: var(--space-8) var(--space-10); }
    .event-stat strong { font-size: var(--font-size-lg); }

    /* elemen yang menempel ke tepi kartu ikut padding kartu baru */
    .pos-total { margin: calc(var(--space-14) * -1) calc(var(--space-14) * -1) var(--space-14); padding: var(--space-14); }
    .pos-total strong { font-size: var(--font-size-3xl); }

    .sticky-actions {
        flex-wrap: wrap;
        margin: var(--space-14) calc(var(--space-14) * -1) calc(var(--space-14) * -1);
        padding: var(--space-10) var(--space-14);
    }

    .sticky-actions .btn { flex: 1 1 auto; }

    .pos-event { flex-wrap: wrap; }

    /* keranjang POS: sembunyikan kolom Harga supaya qty, subtotal,
       dan tombol hapus tetap kelihatan tanpa geser */
    .pos-cart th:nth-child(3),
    .pos-cart td:nth-child(3) {
        display: none;
    }

    .table-wrap .pos-cart td:nth-child(1) {
        white-space: normal;
    }

    .pos-cart th,
    .pos-cart td {
        width: auto !important;
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .pos-cart th:nth-child(1) { width: 100% !important; }

    /* popup detail produk */
    .product-popup {
        flex-direction: column;
        gap: var(--space-16);
    }

    .product-popup-left,
    .product-popup-image,
    .product-popup-noimage {
        width: 100%;
    }

    .product-popup-image,
    .product-popup-noimage {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .product-popup-table td:first-child { width: 42%; }

    .footer { text-align: center; }
}