/* =====================================================================
   responsive.css — lapisan responsif Gor Marga Jaya
   ---------------------------------------------------------------------
   SIFAT: ADITIF. Dimuat PALING AKHIR, sesudah Style-Light/Dark.css.
   Tidak ada satu pun aturan lama yang dihapus, tidak ada markup yang
   dipindah, tidak ada alur yang berubah — hanya ukuran, pembungkusan,
   dan penggeseran supaya muat di layar mana pun.

   Kenapa file terpisah: media query bawaan Style-Light.css memakai
   `device-width` + `-webkit-min-device-pixel-ratio`, yaitu sintaks lama
   yang mengacu pada layar FISIK, bukan lebar viewport. Akibatnya pada
   sebagian besar perangkat modern aturan mobile-nya TIDAK PERNAH menyala.
   Semua aturan di bawah memakai `max-width` biasa yang selalu bekerja.

   Titik henti:
      <= 1199px  laptop kecil / tablet mendatar
      <= 991px   tablet
      <= 767px   ponsel besar
      <= 479px   ponsel kecil
   ===================================================================== */


/* =====================================================================
   1. DASAR — berlaku di semua lebar
   ===================================================================== */

/* Gambar tidak boleh melebar melewati wadahnya.
   Kartu produk POS dikecualikan: gambarnya diposisikan absolut dengan
   ukuran tetap dan akan rusak bila tingginya dibuat otomatis. */
img:not(.product img),
svg:not(.product svg),
video {
   max-width: 100%;
}

/* Kata yang sangat panjang (nama produk, email, order id) memaksa halaman
   melebar. Biarkan memutus baris daripada mendorong tata letak. */
td, th, .textPD, .jl-nama, .store_info, .modal-body p {
   word-wrap: break-word;
   overflow-wrap: break-word;
}

/* Tabel apa pun yang lebih lebar dari layar digulung di dalam wadahnya
   sendiri (lihat responsive.js) — bukan mendorong seluruh halaman. */
.tbl-scroll,
.dataTables_wrapper {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}
.tbl-scroll > table {
   margin-bottom: 0;
}

/* Kanvas grafik ikut lebar induknya. */
canvas {
   max-width: 100%;
}


/* =====================================================================
   2. <= 1199px — navbar tetap satu-dua baris, bukan tiga
   ===================================================================== */
/* Laptop 1200-1439px: menu butuh ± 1377px sementara ruangnya 1336px, hanya
   kurang ± 40px, sehingga kelompok kanan turun ke baris kedua. Pengetatan
   ringan sudah cukup untuk mengembalikannya ke satu baris — ukuran huruf
   nyaris tidak berubah. */
@media (min-width: 1200px) and (max-width: 1439px) {
   .navbar-nav > li > a {
      padding-left: 11px;
      padding-right: 11px;
      font-size: 13.5px;
   }
   .navbar-brand {
      padding-left: 10px;
      padding-right: 10px;
   }
}

@media (min-width: 768px) and (max-width: 1199px) {

   /* Di lebar ini menu terpaksa turun ke baris kedua/ketiga. Semua item
      TETAP tampil — tidak ada yang disembunyikan di balik tombol — tetapi
      tiap barisnya dirapatkan supaya menu tidak memakan sepertiga layar.
      Diukur pada 768px: 223px -> ± 150px. */
   .navbar-nav > li > a {
      padding: 9px 9px;
      font-size: 12.5px;
      line-height: 1.35;
   }
   .navbar-nav > li > a i.fa {
      margin-right: 3px;
   }
   .navbar-brand {
      padding: 6px 12px;
      height: auto;
   }
   .navbar-brand img {
      max-height: 32px !important;
   }
   .navbar-nav > li > a > img.flag,
   .navbar-nav > li > a > img {
      max-height: 22px;
   }
   .navbar-default .navbar-nav > li > a {
      border-radius: 3px;
   }

   /* Kelompok kanan (nama pengguna + keluar) mengambang ke kanan, sehingga
      SELALU memaksa baris baru begitu menu kiri meluap — menu jadi tiga
      baris padahal isinya cukup untuk dua. Dijadikan satu aliran flex agar
      kelompok kanan mengisi sisa baris kedua.
      Tidak memakai overflow apa pun, supaya dropdown "Kategori" tetap bisa
      keluar dari batas navbar. */
   .navbar-collapse {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      align-items: center;
   }
   .navbar-collapse > .navbar-nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      float: none;
      margin-top: 0;
      margin-bottom: 0;
   }
   .navbar-collapse > .navbar-nav.navbar-right {
      margin-left: auto;
      margin-right: 0;
   }
   .navbar-nav > li {
      float: none;
   }
}


/* =====================================================================
   3. <= 991px — tablet
   ===================================================================== */
/* ---------------------------------------------------------------------
   Menu "Aksi" di dalam tabel yang bisa digulung.

   Wadah bergulir memotong menu yang mengambang, sehingga pilihan Edit /
   Pembayaran / Hapus tidak terjangkau. Di lebar yang berpotensi membuat
   tabel meluber (<= 1199px), menu dibuat mengalir ke bawah barisnya —
   isinya sama, urutannya sama, cara klik-nya sama, hanya posisi munculnya
   yang berubah. Di layar lebar menu tetap mengambang seperti semula.
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
   .tbl-scroll .dropdown-menu,
   .dataTables_wrapper .dropdown-menu {
      position: static;
      float: none;
      display: none;
      width: auto;
      margin: 4px 0 0;
      border: 1px solid #d5dbd8;
      box-shadow: none;
   }
   .tbl-scroll .open > .dropdown-menu,
   .dataTables_wrapper .open > .dropdown-menu {
      display: block;
   }
   .tbl-scroll .btn-group,
   .dataTables_wrapper .btn-group {
      position: static;
   }
}


@media (max-width: 991px) {

   /* --- POS ---------------------------------------------------------- */
   /* Jarak bawah 150px dirancang untuk layar lebar; di tablet hanya
      menyisakan ruang kosong panjang sebelum daftar produk. */
   .left-side {
      margin-bottom: 20px;
   }

   /* Panel kiri & kanan sudah menumpuk sendiri di lebar ini (kolom
      col-md-*). Rapikan jaraknya saja. */
   .right-side {
      margin-bottom: 20px;
   }

   /* --- Tab pengaturan tetap satu baris, digulung mendatar ----------- */
   .nav-tabs {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-bottom: 1px solid #ddd;
   }
   .nav-tabs > li {
      float: none;
      flex: 0 0 auto;
      white-space: nowrap;
   }
}


/* =====================================================================
   4. <= 767px — ponsel
   ===================================================================== */
@media (max-width: 767px) {

   /* --- Sasaran sentuh ----------------------------------------------
      Jari butuh ± 40px. Kontrol yang lebih pendek dari itu sulit ditekan
      dan sering salah tekan. */
   .btn,
   .form-control,
   select.form-control,
   .navbar-nav > li > a {
      min-height: 40px;
   }
   .btn {
      padding-top: 9px;
      padding-bottom: 9px;
   }

   /* Ponsel iOS otomatis memperbesar halaman bila font input < 16px,
      lalu halaman tidak kembali ke posisi semula. */
   input.form-control,
   select.form-control,
   textarea.form-control,
   .total-input,
   input[type="text"],
   input[type="number"],
   input[type="tel"],
   input[type="email"],
   input[type="password"] {
      font-size: 16px;
   }

   /* --- Navbar ------------------------------------------------------- */
   .navbar-nav > li > a {
      font-size: 15px;
      padding-top: 11px;
      padding-bottom: 11px;
   }

   /* --- Judul halaman ------------------------------------------------ */
   h1 { font-size: 26px; }
   h2 { font-size: 22px; }
   h3 { font-size: 19px; }

   /* --- Tabel: rapatkan sel supaya lebih banyak kolom terlihat ------- */
   .table > thead > tr > th,
   .table > tbody > tr > td {
      padding: 7px 8px;
      font-size: 13px;
   }

   /* Kontrol DataTables (cari / jumlah baris / halaman) menumpuk rapi. */
   .dataTables_length,
   .dataTables_filter,
   .dataTables_info,
   .dataTables_paginate {
      float: none !important;
      width: 100%;
      text-align: left;
      margin-bottom: 8px;
   }
   .dataTables_filter label,
   .dataTables_length label {
      display: block;
      width: 100%;
      font-weight: 600;
   }
   .dataTables_filter input {
      display: block;
      width: 100%;
      margin: 4px 0 0;
   }
   .dataTables_length select {
      display: inline-block;
      width: auto;
      min-width: 80px;
      margin: 4px 0 0;
   }

   /* --- Modal -------------------------------------------------------- */
   .modal-dialog {
      margin: 10px;
      width: auto;
   }
   /* Struk dipatok 380px di Style-*.css; di layar 375px lebarnya melewati
      tepi. Selector ber-id dipakai agar cukup spesifik untuk menimpanya. */
   #ticketModal.modal-dialog {
      width: auto;
      margin: 10px;
   }
   .modal-body {
      max-height: 74vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
   }
   .modal-footer .btn {
      margin-bottom: 6px;
   }

   /* --- POS: kartu produk ------------------------------------------- */
   /* Kartu mengisi lebar kolomnya (col-xs-4) alih-alih terpaku 120px,
      sehingga tiga kartu per baris selalu rapat tanpa celah ganjil. */
   .product {
      width: 100%;
      max-width: 120px;
      height: 96px;
      margin: 8px auto 0;
   }
   .product img {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      margin-top: 0;
   }
   .product h3 {
      font-size: 0.72em;
      line-height: 1.15;
   }
   .addPct .price-tag { font-size: 11px; padding: 3px 5px; }
   .addPct .stock-tag { font-size: 9px; }

   /* Papan TOTAL besar: kecilkan supaya tidak memakan satu layar penuh. */
   .left-side font[face="digital"] {
      font-size: 30px !important;
   }

   /* Baris keranjang: header kolom disembunyikan (sudah ada di aturan
      lama), pastikan angka & tombol tetap terbaca. */
   .textPD { font-size: 12px; }
   .product-details .panel-body { padding: 8px 6px; }
   .productNum input[type="text"] {
      width: 2.4em;
      height: 32px;
      padding: 2px;
      text-align: center;
   }

   /* Kategori & daftar hold: gulung mendatar, satu baris. */
   .row-horizon {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
   }
   .categories {
      padding: 9px 14px;
      font-size: 12px;
   }

   /* --- Jadwal Lapangan --------------------------------------------- */
   .jl-rekap { margin-top: 10px; }
   .jl-box { flex: 1 1 calc(50% - 5px); }
   .jl-card { padding: 14px 12px; }

   /* --- Pengaturan > Integrasi --------------------------------------- */
   .int-card { padding: 14px 12px; }
   .int-code { font-size: 11px; }

   /* --- Struk: biar muat dilihat sebelum dicetak --------------------- */
   #printSection { font-size: 12px; }
   #printSection table td { padding: 2px 3px; }
}


/* =====================================================================
   5. <= 479px — ponsel kecil
   ===================================================================== */
@media (max-width: 479px) {

   .product { height: 84px; }
   .product h3 { font-size: 0.66em; }

   .left-side font[face="digital"] { font-size: 24px !important; }

   .table > thead > tr > th,
   .table > tbody > tr > td {
      padding: 6px 6px;
      font-size: 12.5px;
   }

   /* Empat kotak rekap jadwal jadi dua baris berisi dua. */
   .jl-box { flex: 1 1 calc(50% - 5px); padding: 8px 6px; }
   .jl-box .n { font-size: 18px; }
   .jl-cell { height: 54px; }
   .jl-cell .tgl { font-size: 13px; }
   .jl-cell .dot { font-size: 8px; }

   .modal-dialog { margin: 6px; }

   /* Tombol aksi di bawah keranjang jadi dua kolom penuh. */
   .flat-box-btn h5 { font-size: 13px; }
}


/* =====================================================================
   6. Layar sentuh — tanpa hover
   ---------------------------------------------------------------------
   Tombol "Tambah" pada sel jadwal kosong hanya muncul saat kursor lewat.
   Di layar sentuh tidak ada hover, jadi tombolnya perlu tetap terlihat.
   ===================================================================== */
@media (hover: none) {
   .btn-add-jl { opacity: .6; }
   .addPct .mask { display: none; }
}