/* sales_eyd.css */

/* ===================================================
TABEL
=================================================== */
/* default: kecil → tidak ada margin kanan */
.flex-custom {
  margin-right: 0;
  margin-top: 0;
}

/* layar lg ke atas (≥992px) → beri margin kanan 20px */
@media (min-width: 992px) {
  .flex-custom {
  }
}
            
/* -- Search Produk */
.action-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff; /* kotak putih */
  color: #000;      /* icon hitam */
  transition: background 0.2s, transform 0.2s;
}

.action-icon:hover {
  background: #8e4a00; /* kotak coklat gelap saat hover */
  transform: scale(1.05);
  color: #fff; /* biar icon jadi putih saat hover */
}

/* Search Produk */
#searchWrapper {
  position: relative;
  width: 32px;       /* lebar default sama kayak .action-icon */
  height: 32px;      /* tinggi kotak sama */
  transition: width 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-left: 28px;
  cursor: text;

  background: #fff; /* kotak putih */
  color: #000;      /* default isi & icon hitam */
}

#searchWrapper.expanded {
  width: 180px;  /* kalau diklik/expand jadi lebar */
  height: 32px;  /* tinggi tetap konsisten */
}

#searchWrapper input {
  width: 100%;
  border: none;
  outline: none;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  box-sizing: border-box;
  background: transparent;
  color: #000;
}

#searchWrapper i {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  transition: color 0.3s ease;
  color: #000; /* icon hitam default */
}

/* Input Scan Barcode */
#input-barcode {
  width: 150px;
  display: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}

/* ===================================================
<!-- Gird Produk -->
=================================================== */
.selectProduct {
    cursor: pointer; /* ubah cursor jadi telunjuk */
    transition: transform 0.15s, box-shadow 0.15s;
}

.selectProduct:hover {
    transform: translateY(-2px); /* card naik sedikit saat hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* shadow lebih jelas */
}

/* Default: Desktop besar = 5 kolom */
.col-lg-5per {
    flex: 0 0 20%;
    max-width: 20%;
}

/* ≤1200px = 4 kolom */
@media (max-width: 1200px) { 
    .col-lg-5per { 
        flex: 0 0 25%;
        max-width: 25%;
    } 
}

/* ≤992px = 3 kolom */
@media (max-width: 992px) { 
    .col-lg-5per { 
        flex: 0 0 33.333%;
        max-width: 33.333%;
    } 
}

/* ≤768px = tetap 3 kolom */
@media (max-width: 768px) { 
    .col-lg-5per { 
        flex: 0 0 33.333%;
        max-width: 33.333%;
    } 
}

/* **≤576px (HP kecil)** = tetap 3 kolom */
@media (max-width: 576px) { 
    .col-lg-5per { 
        flex: 0 0 33.333%;
        max-width: 33.333%;
    } 
}

/* Card styling */
.card { position: relative; border-radius: 6px; overflow: hidden; }
.card-img-wrapper { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; background: #f8f8f8; }
.card-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Card body */
.card-body { padding: 5px; text-align: center; }
.card-title { font-size: 0.85rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-brand { font-size: 0.75rem; color: #666; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-price { font-size: 0.8rem; color: #007bff; margin-bottom: 2px; }

.product-scroll {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden; /* ⛔ cegah scroll horizontal */
    padding-top: 5px;
    margin-top: 0;
}

/* TABLET */
@media (max-width: 992px) {
    .product-scroll {
        max-height: 600px;
    }
}

/* HP */
@media (max-width: 576px) {
    .product-scroll {
        max-height: 360px;
    }
}

/* Card body rata tengah horizontal */
.card-body {
    text-align: center;            /* Semua teks dan elemen inline di dalam card-body rata tengah */
}

/* Judul dan teks card */
.card-body h6,
.card-body p {
    margin: 0;                     /* Menghapus jarak default antar teks agar rapat */
    line-height: 1.1;              /* Membuat jarak antar baris sangat rapat */
    text-align: center;            /* Memastikan teks tetap rata tengah */
}

.card-body h6 {
    font-size: 11px;           /* Ukuran font teks */
    white-space: nowrap;        /* Membuat teks tetap di satu baris, tidak turun ke baris berikutnya */
    overflow: hidden;           /* Sembunyikan teks yang melampaui lebar container */
    text-overflow: ellipsis;    /* Tambahkan "..." di akhir teks yang terpotong */
}

.card-body h6:hover {
    white-space: normal;   /* Mengizinkan teks untuk membungkus ke baris baru, tidak tetap di satu baris */
    overflow: visible;     /* Memastikan teks yang panjang tidak terpotong dan bisa terlihat */
    text-overflow: unset;  /* Menonaktifkan efek '…' pada teks yang terpotong */
    position: relative;    /* Membuat elemen bisa memiliki z-index dan menempati posisi relatif */
    z-index: 10;           /* Membuat teks muncul di atas elemen lain jika diperlukan */
}

/* ---------------------------------------------------------------------------------------------- */

/* Wrapper gambar supaya selalu di tengah */
.card-img-wrapper {
    display: flex;                 /* Menggunakan flexbox */
    justify-content: center;       /* Tengah horizontal */
    align-items: center;           /* Tengah vertikal */
    height: 90px;                  /* Tinggi wrapper seragam */
}

/* Gambar produk maksimal sesuai wrapper */
.card-img-top {
    max-width: 100%;               /* Lebar maksimal sesuai wrapper */
    max-height: 100%;              /* Tinggi maksimal sesuai wrapper */
    object-fit: contain;           /* Gambar tetap proporsional dan tidak terpotong */
}

/* Semua card fix tinggi */
.card.h-100 {
    height: 220px;                 /* Tinggi card seragam */
    display: flex;
    flex-direction: column;        /* Agar isi card tersusun vertikal */
}

/* Hapus paksa tinggi penuh */
#productGrid .card {
    height: auto !important;       /* Biarkan card menyesuaikan tinggi isi */
    min-height: unset !important;
}

.card-img-wrapper {
    position: relative;      /* Agar gambar absolut di dalamnya bisa diatur */
    width: 100%;             /* Lebar wrapper mengikuti lebar card */
    height: auto;            /* Tinggi menyesuaikan konten (tetapi nanti dikontrol aspect-ratio) */
    aspect-ratio: 1 / 1;     /* Memaksa wrapper berbentuk kotak (perbandingan 1:1) */
    overflow: hidden;        /* Memotong bagian gambar yang keluar wrapper */
    background: #f8f8f8;     /* Warna latar saat gambar belum muncul */
}

.card-img-wrapper img {
    position: absolute;      /* Memposisikan gambar relatif terhadap wrapper */
    inset: 0;                /* Setara top:0; right:0; bottom:0; left:0 */
    width: 100%;             /* Lebar gambar sesuai wrapper */
    height: 100%;            /* Tinggi gambar sesuai wrapper */
    object-fit: cover;       /* Gambar menutupi wrapper tanpa merusak proporsi, bisa terpotong */
}

/* ---------------------------------------------------------------------------------------------- */
/* Harga */
.card-price {
    background-color: #FFC300;     /* Warna latar harga (kuning cerah) */
    color: #000000ff;              /* Warna teks (hitam) */
    border-radius: 6px;            /* Membuat sudut membulat */
    padding: 2px 6px;              /* Ruang di sekitar teks */
    font-size: 12px;                /* Ukuran font kecil dan tetap */
    width: 100%;                    /* Lebar mengikuti card */
    height: auto;                   /* Tinggi menyesuaikan isi */
    display: flex;                  /* Agar bisa men-center teks */
    align-items: center;            /* Tengah vertikal */
    justify-content: center;        /* Tengah horizontal */
    text-align: center;             /* Teks rata tengah */
    margin-top: 3px;                /* Jarak atas dari elemen sebelumnya */
    line-height: 1.2;               /* Jarak antar baris rapat */
    white-space: nowrap;            /* Mencegah teks turun ke baris kedua */
    overflow: hidden;               /* Teks yang terlalu panjang disembunyikan */
    text-overflow: ellipsis;        /* Tambahkan "..." jika teks terlalu panjang */
}

/* ---------------------------------------------------------------------------------------------- */
/* SN/Non-SN Badge di atas gambar */
.sn-badge {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 8px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 10;
}

/* Warna SN */
.sn-badge.sn {
    background-color: #8e4a00; /* kuning */
    color: #fff;
}

/* Warna Non-SN */
.sn-badge.nonsn {
    background-color: #FFC300; /* abu-abu */
    color: #000;
}

/* Category badge di bawah gambar */
.category-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    background-color: #FFC300;
    color: #000;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 15;
}
/* ------------------------------------------------------- */
/* Container stok + dropdown agar tetap satu kotak */
.satuan-stok-box {
    display: flex;
    align-items: center;
    justify-content: space-between; /* stok kiri, dropdown kanan */
    gap: 2px;                  /* hilangkan jarak antar elemen */
    border: 2px solid #a9a9a9;
    border-radius: 4px;
    padding: 0;              /* hilangkan padding box */
    background-color: #a9a9a9;
    box-sizing: border-box;
    min-width: fit-content;
    width: auto;
    white-space: nowrap;
}

/* Label stok mentok kiri */
.satuan-stok-box .stok-badge {
    font-size: 0.85rem;
    color: #000;
    margin: 0 !important;      /* pastikan tidak ada margin */
    padding: 0 !important;     /* hilangkan padding */
    text-align: left;
    flex-shrink: 0;
    flex-grow: 0;
}

/* Dropdown tetap di kanan */
.satuan-stok-box .satuan-dropdown {
    margin-left: auto;   /* dorong ke kanan */
}

/* Efek hover & klik */
/* Efek hover & klik */
.satuan-stok-box:hover {
    background-color: #8e4a00;
    border-color: #8e4a00; /* warna border saat hover */
    box-shadow: 0 2px 6px rgba(255, 195, 0, 0.4);
    transform: translateY(-1px);
}

.satuan-stok-box:active {
    background-color: #8e4a00;
    border-color: #8e4a00; /* bisa beda warna saat klik */
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(255, 195, 0, 0.3);
}

/* ===================================================
<!-- Tabel keranjang Produk -->
=================================================== */
/* Default untuk layar besar */
.w-lg-35 {
  max-width: 25% !important;
}

/* Layar kecil (mobile) hapus max-width */
@media (max-width: 768px) {
  .w-lg-35 {
    max-width: 100% !important;
  }
}

/* Styling khusus buat tabel keranjang */
.table.table-bordered th,
.table.table-bordered td {
  padding: 6px 8px;   /* ruang atas-bawah & kiri-kanan */
  height: 40px;        /* fix tinggi biar seragam */
  vertical-align: top; /* teks berada di atas */
}

/* Pastikan baris kedua dan seterusnya tidak terpotong */
.keranjang-nama {
    overflow: visible !important; /* biarkan teks membungkus penuh */
    word-break: break-word;        /* pecah kata panjang jika perlu */
}

/* Hover nama produk di keranjang (tetap pakai <b> inline) */
.keranjang-nama b:hover {
    white-space: normal !important;   /* biarkan membungkus ke beberapa baris */
    overflow: visible !important;     /* tampilkan seluruh teks */
    text-overflow: unset !important;  /* hilangkan ... */
    position: relative;               /* supaya muncul di atas elemen lain */
    z-index: 10;                      /* agar tidak tertutup */
    padding: 2px 4px;                 /* opsional */
}

/* Sembunyikan tombol delete saat hover nama */
.keranjang-nama b:hover + div,
.keranjang-nama b:hover ~ div {
    display: none !important;
}

/* Batasi lebar dropdown agar tidak keluar tabel */
.keranjang-harga .satuan-input {
    max-width: 100px;   /* sesuaikan dengan kolom tabel */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================================================
<!-- Tombol Cepat Produk -->
=================================================== */
/* Grid container tombol cepat */
.tombol-cepat-grid {
    display: flex;          
    flex-wrap: wrap;        
    gap: 3px;               /* jarak antar tombol — kecil banget biar rapat */
    margin-bottom: 0;       
}

/* Style tombol cepat */
.tombol-cepat-grid .tombol-cepat {
    font-size: 12px;
    min-width: 50px;
    height: auto;
    text-align: center;
    border-radius: 6px;
    transition: all 0.2s;
}

/* ✅ CARD tombol cepat (nama produk) */
.tombol-cepat-grid .tombol-cepat .card {
    background-color: #fff;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    color: #000;
}

/* 🟡 Tambahkan jarak bawah setelah teks stok */
.tombol-cepat-grid .tombol-cepat .stokProduk {
    padding-bottom: 4px; /* ✅ jarak bawah setelah tulisan "Stok" */
}

/* 🟤 Efek hover hanya untuk CARD di dalam tombol cepat */
.tombol-cepat-grid .tombol-cepat .card:hover {
    background-color: #8e4a00;
    color: #fff;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 576px) {
    .tombol-cepat-grid .tombol-cepat {
        flex: 0 1 auto;     /* biar lebarnya sesuai konten, bukan 100% */
        min-width: 45px;    /* sedikit lebih kecil di HP */
    }
}

#tombolCepatContainer {
    margin-top: 5px; /* tetap geser ke bawah */
    margin-left: 7px; /* geser ke kanan */
}

/* ===================================================
<!-- nota form -->
=================================================== */
/* Supaya select2 responsive di mobile */
.select2-container {
  width: 100% !important;
}

/* ===================================================
<!-- tambah catatan -->
=================================================== */
/* Checkbox tambahCatatan */
#tambahCatatan {
    width: 18px;
    height: 18px;
    accent-color: #FFC300; /* warna default */
    cursor: pointer;
    transition: all 0.2s;  /* animasi halus */
}
#tambahCatatan:hover { 
    accent-color: #8e4a00; 
}