/* Tambahan kecil untuk halaman baru (Statistik, Penjualan Detail, Pengaturan).
   styles.css & report.css TIDAK diubah; memakai variabel warna yang sama. */
.badge.info{color:#1f5f99;background:#dceeff}
th.num,td.num{text-align:right}
.empty-row{text-align:center;color:var(--muted);padding:28px 16px}
.detail-filters{padding:0 16px;border-bottom:1px solid var(--line)}
.detail-filters .quick-filters{padding:12px 0}
.detail-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:12px;color:var(--muted)}
.detail-foot b{color:var(--green);font-size:15px}
.top-list .alert-stock em{color:var(--green);background:var(--mint)}
.top-list .alert-stock>span{background:var(--mint)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1280px;align-items:start}
.settings-grid h2{font-size:15px;margin:0}
.settings-grid .card>p{font-size:11px;color:var(--muted);margin:5px 0 16px}
.fields{display:grid;gap:14px}
.toggle-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.toggle-row:last-child{border-bottom:0}
.toggle-row b{display:block;font-size:13px;color:var(--ink)}
.toggle-row small{display:block;font-size:10px;font-weight:500;color:var(--muted);margin-top:4px}
.toggle-row input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;border:0}
.toggle-row i{flex:none;width:38px;height:22px;border-radius:20px;background:#d8e1dc;position:relative;transition:.2s}
.toggle-row i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.toggle-row input:checked+i{background:var(--green)}
.toggle-row input:checked+i::after{left:19px}
.toggle-row input:focus-visible+i{outline:2px solid #9ccfb4;outline-offset:2px}
.save-note{font-size:12px;color:var(--green);font-weight:700;margin-right:10px}
.page-heading .save-wrap{display:flex;align-items:center}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}}

/* Kursor tangan untuk semua elemen yang bisa diklik (di semua halaman) */
button,a[href],label.toggle-row,.notification,.menu-button,.mobile-nav a,.mobile-nav button{cursor:pointer}
button:disabled{cursor:not-allowed}

/* Statistik: pemilih rentang tanggal */
.date-range{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;max-width:1280px;margin:-6px 0 18px}
.date-range label{display:grid;gap:5px;font-size:11px;font-weight:700;color:var(--muted)}
.date-range input{border:1px solid #d8e1dc;background:#fff;border-radius:9px;padding:10px 12px;font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
.date-range input:focus{outline:2px solid #9ccfb4;outline-offset:1px}
.date-range .dash{color:var(--muted);padding-bottom:10px}
.date-range p{margin:0 0 0 auto;padding-bottom:10px;font-size:12px;color:var(--muted)}
@media(max-width:600px){.date-range{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}.date-range input{width:100%}.date-range p{grid-column:1/-1;margin:0;padding:0}}

/* Notifikasi kecil (mis. batas stok di keranjang) */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(8px);background:var(--dark);color:#fff;padding:11px 16px;border-radius:12px;font-size:12px;font-weight:600;z-index:80;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 32px);text-align:center;box-shadow:0 8px 24px rgba(23,58,44,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.qty button:disabled{opacity:.35}

/* ================================================================
   RAMAH HP — semua halaman (tambahan, tidak mengubah file lain)
   ================================================================ */
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}                       /* tidak ada geser kiri-kanan */
.title{min-width:0;flex:1}
.title h1,.title p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Modal bisa digeser saat form lebih tinggi dari layar */
.modal{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;place-items:start center;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.modal-panel{margin:auto 0}

@media(max-width:900px){
  /* Ikon menu: 3 garis bertumpuk, bukan berjajar */
  .menu-button{display:inline-grid;grid-template-columns:18px auto;column-gap:7px;row-gap:3px;align-items:center;flex:none}
  .menu-button i{grid-column:1;width:18px}
  .menu-button span{grid-column:2;grid-row:1/4;margin:0}
}

@media(max-width:600px){
  /* iPhone tidak zoom otomatis saat mengetik (font input min. 16px) */
  input,select,textarea,.search input,form input,.date-range input{font-size:16px!important}
  form input{padding:12px}
  .search{height:46px}

  /* Topbar ringkas */
  .topbar{gap:8px}
  .menu-button span{display:none}
  .menu-button{grid-template-columns:18px;padding:10px}
  .notification{flex:none}
  .title p{max-width:none}

  /* Judul halaman + tombol tidak berdesakan */
  .page-heading{flex-wrap:wrap;gap:10px}
  .page-heading>div:first-child{flex:1 1 180px;min-width:0}
  .report-actions{display:flex;width:100%}
  .report-actions>*{flex:1}
  .report-actions .primary,.report-actions .date-button{padding:12px 9px;font-size:12px}
  .date-range label{min-width:0}
  .date-range input{min-width:0;width:100%;padding:10px 8px}

  /* Target sentuh minimal ±40px */
  .qty{gap:4px}
  .qty button{width:34px;height:34px;font-size:16px;border-radius:8px}
  .scan,.clear{padding:10px 6px}
  .quick-filters button{padding:10px 14px}
  .pay{padding:12px 5px;font-size:12px}
  .more{padding:10px 12px}
  .cart-summary button{padding:8px 0}
  .modal-close{width:40px;height:40px;right:8px;top:6px}
  .panel-title>a{padding:8px 0}
  .mobile-nav{height:calc(65px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .mobile-nav a,.mobile-nav button{min-height:52px}

  /* Modal di HP: ruang untuk keyboard & nav bawah, tombol × tetap terlihat */
  .modal{padding:10px 10px calc(90px + env(safe-area-inset-bottom))}
  .modal-panel{padding:18px 16px}
  .modal-close{position:sticky;top:0;float:right;margin:-8px -8px 0 0;z-index:1;background:#fff;border-radius:50%}

  /* Pengaturan: tombol Simpan selalu terlihat di atas menu bawah */
  #pengaturanView{padding-bottom:84px}
  #pengaturanView .save-wrap{position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:3;justify-content:flex-end;background:rgba(246,248,247,.94);padding:8px;border-radius:12px;box-shadow:0 4px 18px rgba(23,58,44,.12)}
  #pengaturanView .save-wrap .primary{flex:1;padding:13px;font-size:14px}

  /* Tabel → kartu bertumpuk (tidak perlu geser ke samping) */
  .table-wrap table{min-width:0}
  .table-wrap thead{display:none}
  .table-wrap tbody,.table-wrap tr,.table-wrap td{display:block}
  .table-wrap tr{position:relative;padding:12px 14px;border-bottom:1px solid var(--line)}
  .table-wrap td{display:flex;justify-content:space-between;align-items:baseline;gap:6px;justify-content:flex-end;border:0;padding:4px 0;text-align:right}
  .table-wrap td::before{content:attr(data-label);flex:none;color:var(--muted);font-size:11px;font-weight:600;text-align:left;margin-right:auto;padding-right:10px}
  .table-wrap td:first-child{display:block;text-align:left;padding:0 36px 6px 0}
  .table-wrap td:first-child::before{content:none}
  .table-wrap td:first-child b{font-size:13px}
  .table-wrap td>small{display:inline;margin:0}
  .table-wrap td:empty,.table-wrap td[data-label=""]::before{content:none}
  .table-wrap td:has(>.more){position:absolute;top:6px;right:4px;padding:0}
  .table-wrap td.empty-row{display:block;text-align:center}
  .table-wrap td.empty-row::before{content:none}
  .profit-table .table-wrap{margin:0 -14px}
  .detail-foot{position:sticky;bottom:calc(65px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);border-radius:0 0 12px 12px}
}