/* ============================================================
   MOBILE ENHANCEMENT — My 0D1'$ 
   Membuat form & card grid lebih rapi di smartphone
   Breakpoints: 768px (tablet), 600px (phone), 400px (small)
   ============================================================ */

/* ---------- BASE MOBILE RESET ---------- */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 14px; line-height: 1.6; overflow-x: hidden; }
  img { max-width: 100%; height: auto; }
  .container { padding: 20px 14px !important; max-width: 100% !important; }
  /* cegah horizontal scroll pada grid/card */
  .grid, .alamat-grid, .settings-grid, .stats-section, .breakdown-grid, .stat-grid, .checkout-grid, .kontak-grid, .doc-layout {
    width: 100%;
    max-width: 100%;
  }
  /* grup tombol boleh turun baris */
  .btn-group { flex-wrap: wrap !important; }
}

/* ---------- PAGE HEADER — lebih jelas ---------- */
@media (max-width: 768px) {
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 18px !important; }
  .page-title { width: 100%; gap: 12px !important; }
  .page-title .icon, .page-header .icon { width: 44px !important; height: 44px !important; font-size: 20px !important; flex-shrink: 0; }
  .page-title h1, .page-header h1 { font-size: 19px !important; line-height: 1.3 !important; letter-spacing: -0.4px !important; }
  .page-title .subtitle, .page-header .subtitle { font-size: 12px !important; color: #888 !important; line-height: 1.5; }
  .page-header .header-actions, .search-btns, .bulk-actions { width: 100%; }
}

/* ---------- CARD GRID — rapi & konsisten ---------- */
@media (max-width: 768px) {
  /* Dashboard & umum: 2 kolom di tablet, 1 kolom di HP */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .stats-section { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .alamat-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .settings-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .breakdown-grid, .stat-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .checkout-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sticky-card { position: static !important; }

  /* Card style mobile */
  .card, .stat-card, .menu-card, .table-card, .alamat-card, .settings-card {
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
  }
  .card { padding: 16px 14px !important; }
  .table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table-card table { min-width: 620px; }

  /* Menu card khusus */
  .card-img-wrap { height: 140px !important; }
  .card-body { padding: 12px 12px 14px !important; }
  .card-body h3 { font-size: 14px !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  .card-body .desc { font-size: 11.5px !important; line-height: 1.5 !important; margin-bottom: 8px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card-body .harga { font-size: 15px !important; margin-bottom: 10px !important; }
  .btn, .card .btn { padding: 10px 14px !important; font-size: 13px !important; border-radius: 10px !important; min-height: 40px; justify-content: center; }

  /* Dashboard menu-card ikon lebih proporsional */
  .menu-card { padding: 16px 12px 14px !important; min-height: 150px !important; gap: 8px !important; }
  .menu-icon { width: 48px !important; height: 48px !important; font-size: 22px !important; border-radius: 12px !important; margin-bottom: 8px !important; }
  .menu-card h3 { font-size: 12.5px !important; }
  .menu-card p { font-size: 11px !important; line-height: 1.4 !important; }
  /* POS: keranjang tidak menutupi konten */
  .cart-col { z-index: 50; box-shadow: 0 -6px 20px rgba(0,0,0,0.1) !important; max-height: 62vh; overflow-y: auto; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  /* POS: tetap 2 kolom menu di HP kecil */
  .menu-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stats-section { gap: 8px !important; }
  .stat-card { padding: 10px 8px !important; }
  .stat-num { font-size: 16px !important; }
  .stat-lbl { font-size: 8.5px !important; }
  .settings-grid { grid-template-columns: 1fr !important; }
  .settings-card { flex-direction: row !important; text-align: left !important; min-height: auto !important; padding: 14px 14px !important; gap: 12px !important; align-items: center !important; }
  .settings-card .settings-icon { margin-bottom: 0 !important; flex-shrink: 0; width: 44px !important; height: 44px !important; font-size: 20px !important; }
  .card-img-wrap { height: 160px !important; }
  /* Banner slider lebih kecil */
  .banner-slider { height: 100px !important; border-radius: 12px !important; }
}

/* ---------- FORM — lebih gampang dimengerti ---------- */
@media (max-width: 768px) {
  .form-group { margin-bottom: 14px !important; }
  .form-group label, label { font-size: 13px !important; font-weight: 600 !important; color: #444 !important; margin-bottom: 6px !important; display: block !important; line-height: 1.4; }
  .form-group label .req { color: #dc2626; }
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="password"],
  .form-group input[type="number"],
  .form-group input[type="date"],
  .form-group select,
  .form-group textarea,
  .form-group input,
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    border-width: 1.5px !important;
    background: #fafafa !important;
  }
  .form-group textarea, textarea { min-height: 90px !important; padding: 11px 14px !important; resize: vertical; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus,
  input:focus, select:focus, textarea:focus {
    background: white !important;
    border-color: var(--warna-primer) !important;
    box-shadow: 0 0 0 4px rgba(var(--rgb-primer), 0.1) !important;
  }
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .form-row .form-group { margin-bottom: 14px !important; }
  .input-hint, .form-group .input-hint { font-size: 11.5px !important; color: #999 !important; margin-top: 5px !important; line-height: 1.5; }

  /* file input */
  .file-input-wrap input[type="file"] { padding: 10px !important; font-size: 13px !important; }
  .file-input-wrap input[type="file"]::file-selector-button { padding: 8px 14px !important; font-size: 12.5px !important; }

  /* checkbox/radio area */
  .check-row { padding: 8px 10px !important; background: #fafafa; border-radius: 8px; border: 1px solid #f0f0f0; margin-top: 8px !important; font-size: 13px !important; }
  .check-row input { width: 18px !important; height: 18px !important; min-height: auto !important; accent-color: var(--warna-primer); }

  /* Buttons di form — full width di HP, lebih mudah tap */
  .card .btn:not(.btn-sm):not(.btn-detail):not(.btn-outline):not(.btn-secondary),
  .btn-submit, .btn-search, .modal-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }
  .modal-actions { flex-direction: column !important; gap: 10px !important; }
  .modal-actions .btn { width: 100% !important; margin: 0 !important; }

  /* Aksi grup di card/table — tetap 2 kolom tapi lebih rapi */
  .aksi-group { gap: 8px !important; flex-wrap: wrap !important; }
  .aksi-group .btn-sm { flex: 1 1 48%; min-width: 0; justify-content: center !important; padding: 10px 10px !important; font-size: 12.5px !important; }
  .card-actions { gap: 8px !important; }
  .card-actions .btn-sm { flex: 1; min-height: 38px; }
  .item-card-actions { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .item-card-actions .btn-sm { padding: 10px !important; font-size: 12.5px !important; }
}

/* ---------- SEARCH & FILTER — stack rapih ---------- */
@media (max-width: 768px) {
  .search-wrap { flex-direction: column !important; align-items: stretch !important; padding: 14px !important; gap: 10px !important; border-radius: 14px !important; }
  .search-input-wrap { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; min-width: 0 !important; width: 100% !important; }
  .search-input-wrap .search-icon { display: none !important; }
  .search-input-wrap input[type="text"] { padding-left: 14px !important; }
  .search-input-wrap select, .search-select { width: 100% !important; min-width: 0 !important; }
  .search-btns { width: 100% !important; flex-direction: column !important; }
  .search-btns .btn, .search-btns .btn-reset, .search-btns .btn-search, .search-btns .btn-reset-search { width: 100% !important; justify-content: center !important; }
  .search-info { font-size: 12.5px !important; padding: 10px 12px !important; line-height: 1.5; }
  .filter-bar { padding: 14px !important; gap: 8px !important; }
  .filter-pill { padding: 8px 14px !important; font-size: 12.5px !important; }
}

/* ---------- MODAL — tidak kepotong di HP ---------- */
@media (max-width: 768px) {
  .modal-overlay { padding: 12px !important; align-items: flex-end !important; }
  .modal-box { max-width: 100% !important; width: 100% !important; max-height: 92vh !important; border-radius: 16px 16px 0 0 !important; padding: 20px 16px !important; margin: 0 !important; }
  .modal-head { gap: 10px !important; margin-bottom: 14px !important; padding-bottom: 12px !important; }
  .modal-head .icon { width: 38px !important; height: 38px !important; font-size: 18px !important; }
  .modal-head h3 { font-size: 15px !important; }
}

/* ---------- CHECKOUT KHUSUS — alamat picker & ringkasan ---------- */
@media (max-width: 768px) {
  .checkout-grid { gap: 16px !important; }
  .card-header { gap: 10px !important; margin-bottom: 14px !important; padding-bottom: 12px !important; }
  .card-header .icon { width: 38px !important; height: 38px !important; font-size: 18px !important; }
  .card-header h3 { font-size: 15px !important; }
  .alamat-picker { gap: 10px !important; }
  .alamat-option { padding: 12px 14px !important; gap: 10px !important; border-radius: 12px !important; }
  .alamat-option .nama { font-size: 13px !important; }
  .alamat-option .teks { font-size: 12px !important; line-height: 1.5 !important; }
  .ringkasan { padding: 14px !important; border-radius: 14px !important; }
  .ringkasan-total .nilai { font-size: 20px !important; }
  .back-link { font-size: 13px !important; padding: 7px 12px !important; }
}

/* ---------- TYPOGRAPHY & SPACING — lebih lega ---------- */
@media (max-width: 768px) {
  .section-title { font-size: 15px !important; margin: 18px 0 12px !important; gap: 8px !important; }
  .section-title::before { width: 3px !important; height: 18px !important; }
  .section-head h2 { font-size: 16px !important; }
  .welcome, .welcome-card, .profile-header, .lg-wrapper { border-radius: 14px !important; }
  .welcome h2, .welcome-card h1 { font-size: 17px !important; }
  .welcome p, .welcome-card p { font-size: 12.5px !important; line-height: 1.6 !important; }
  .empty { padding: 40px 18px !important; }
  .empty-icon { font-size: 52px !important; margin-bottom: 14px !important; }
  .empty h3 { font-size: 16px !important; }
  .empty p { font-size: 13px !important; line-height: 1.6; }
  /* Alert lebih terbaca */
  .alert, .alert-error, .alert-success, .alert-verify, .alert-warning, .search-info, .info-box { font-size: 12.5px !important; line-height: 1.6 !important; padding: 11px 13px !important; border-radius: 10px !important; }
}

/* ---------- TABLE DI HP — scroll dalam kotak, JANGAN sembunyikan ----------
   Hanya halaman yang punya kartu mobile sendiri (admin_menu, keranjang)
   yang menyembunyikan tabelnya lewat CSS masing-masing. */
@media (max-width: 768px) {
  table { max-width: 100%; }
  .tbl-wrap, .table-card, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* tabel telanjang (tanpa pembungkus): jadi blok scroll agar halaman tak melebar */
  .card-b > table:only-child, .card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: normal; }
  th { font-size: 11px !important; padding: 10px 10px !important; }
  td { font-size: 12.5px !important; padding: 10px !important; }
  .item-card { padding: 14px !important; border-radius: 12px !important; margin-bottom: 10px !important; border: 1px solid #f0f0f0 !important; box-shadow: 0 3px 10px rgba(0,0,0,0.04) !important; }
  .item-card-top { gap: 10px !important; margin-bottom: 10px !important; }
  .item-card-thumb, .item-card-thumb-placeholder { width: 64px !important; height: 64px !important; border-radius: 10px !important; font-size: 26px !important; }
  .item-card-nama { font-size: 13.5px !important; line-height: 1.3 !important; }
  .item-card-desc { font-size: 11.5px !important; -webkit-line-clamp: 2 !important; }
  .item-card-harga { font-size: 14px !important; }
  /* bulk toolbar sticky lebih kecil */
  .bulk-toolbar { top: 64px !important; padding: 10px 12px !important; gap: 8px !important; border-radius: 12px !important; }
  .btn-bulk { padding: 8px 12px !important; font-size: 12px !important; }
}

/* ---------- NAVBAR & FOOTER — tetap nyaman ---------- */
@media (max-width: 768px) {
  .navbar { padding: 10px 12px !important; gap: 8px !important; }
  .nav-logo { gap: 8px !important; }
  .nav-logo-img { height: 32px !important; width: 32px !important; }
  .nav-logo-text-img { height: 26px !important; }
  .footer-my0d1s { padding: 12px 14px !important; }
  .footer-inner { gap: 10px !important; }
}

/* ---------- AUTH PAGES (login/register) — form lebih lega ---------- */
@media (max-width: 768px) {
  .auth-container { flex-direction: column !important; min-height: auto !important; }
  .auth-form-side { padding: 24px 14px !important; }
  .auth-form-box { max-width: 100% !important; }
  .logo-img, .logo-icon { height: 160px !important; width: 160px !important; }
  .auth-title { font-size: 20px !important; }
  .auth-subtitle { font-size: 13px !important; margin-bottom: 18px !important; }
  .form-input-wrap input[type="email"], .form-input-wrap input[type="password"] { padding: 12px 14px 12px 40px !important; font-size: 14px !important; }
}

/* ---------- SMALL PHONE 400px — lebih kompak ---------- */
@media (max-width: 400px) {
  .container { padding: 16px 12px !important; }
  .page-title h1, .page-header h1 { font-size: 17px !important; }
  .card { padding: 14px 12px !important; border-radius: 12px !important; }
  .btn { font-size: 13px !important; padding: 10px 14px !important; }
  .modal-box { padding: 16px 12px !important; }
  .search-wrap { padding: 12px !important; }
}