/* ============================================================
   DreamsPos — Modern UI overrides (global)
   Membuat input, select, dan tombol lebih modern (tidak kaku).
   Dimuat di semua halaman via layouts/partials/css.blade.php
   ============================================================ */

/* ============================================================
   SKEMA WARNA TERANG (anti "Auto Dark Theme")
   ------------------------------------------------------------
   Chrome/Edge di Android maupun desktop punya fitur yang memaksa
   halaman terang menjadi gelap. Fitur itu mewarnai ulang kontrol
   form bawaan — akibatnya kotak pencarian Select2 menjadi hitam
   pekat dan tulisannya tidak terbaca.

   Aplikasi ini memang dirancang terang, jadi kita nyatakan secara
   tegas: jangan digelapkan.
   ============================================================ */
:root { color-scheme: light only; }

input, textarea, select, button,
.form-control, .select2-container { color-scheme: light; }

/* Warna dasar dipastikan, bukan diserahkan ke bawaan peramban */
.form-control,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select {
    background-color: #fff;
    color: #1f2937;
}
.form-control[disabled], .form-control[readonly],
fieldset[disabled] .form-control { background-color: #f1f5f9; color: #64748b; }

/* Kotak pencarian di dalam Select2 — sumber masalah pada tangkapan layar */
.select2-container .select2-search--dropdown .select2-search__field,
.select2-container .select2-search--inline .select2-search__field,
.select2-search__field {
    background-color: #fff !important;
    color: #1f2937 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px;
}
.select2-dropdown,
.select2-results,
.select2-results__options,
.select2-container--default .select2-results__option {
    background-color: #fff !important;
    color: #1f2937 !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #eef2ff !important;
    color: #3730a3 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #6366f1 !important;
    color: #fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af; }

/* ---------- Input & textarea ---------- */
.form-control {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: none;
    height: 38px;
    padding: 8px 12px;
    color: #1f2937;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::-webkit-input-placeholder { color: #9ca3af; }
.form-control::placeholder { color: #9ca3af; }
.form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
    outline: none;
}
textarea.form-control { height: auto; min-height: 90px; }
select[multiple].form-control,
select[size].form-control { height: auto; }

/* ukuran kecil / besar */
.input-sm,
.form-control.input-sm,
.form-group-sm .form-control { height: 32px; border-radius: 7px; padding: 5px 10px; }
.input-lg,
.form-control.input-lg { height: 46px; border-radius: 10px; }

/* ---------- Input group & addon ---------- */
.input-group-addon {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #6b7280;
    border-radius: 8px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ---------- Select2 agar sejajar & modern ---------- */
.select2-container--default .select2-selection--single {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    color: #1f2937;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-height: 38px;
}
.select2-dropdown {
    border-color: #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px -12px rgba(15, 23, 42, .25);
}

/* ---------- Tombol lebih lembut ---------- */
.btn { border-radius: 8px; transition: all .15s ease; }
.btn-flat { border-radius: 8px !important; }
.btn:active,
.btn.active { box-shadow: none; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---------- Ukuran tombol daisyUI lebih proporsional ----------
   Dipakai di tombol "Add" index & footer form (Save & Add ...).
   POS memakai .btn biasa, jadi tidak terpengaruh. */
.tw-dw-btn {
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}
.tw-dw-btn-lg {
    height: auto !important;
    min-height: 0 !important;
    padding: 11px 22px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}
.tw-dw-btn-sm {
    padding: 6px 13px !important;
    font-size: 13px !important;
}

/* ---------- Lapisan (z-index) ----------
   Nav modul (Accounting, CRM, Project, Repair, dll) berada di dalam area
   konten dan muncul SETELAH header pada DOM. Tanpa aturan ini, nav tersebut
   menimpa dropdown profil/notifikasi di header aplikasi. */
.content .navbar,
.content-wrapper .navbar,
section.no-print > .navbar {
    position: relative;
    z-index: 0;
}
/* Dropdown pada header aplikasi harus selalu berada paling atas */
header .dropdown-menu,
.main-header .dropdown-menu,
.navbar-custom-menu .dropdown-menu,
.navbar-top .dropdown-menu {
    z-index: 1600 !important;
}

/* Catatan: gaya menu tab modul Accounting (.acc-tab-nav) kini ditulis inline
   di Modules/Accounting/Resources/views/layouts/partials/tab_nav_style.blade.php
   agar tidak bergantung pada cache CSS browser. */

/* ============================================================
   MENU PENGATURAN (pos-tab) — tombol mendatar, isi selebar halaman
   ------------------------------------------------------------
   Dipakai oleh: Pengaturan Bisnis, Superadmin, CMS, Essentials,
   Manufacturing, Asset Management, WooCommerce.

   Kelas kolom di template sudah diubah menjadi col-xs-12 (menu &
   isi sama-sama selebar penuh), sehingga di sini cukup mengatur
   TAMPILAN saja — tidak perlu memaksa lebar dengan !important.
   ============================================================ */

/* Baris menu: bisa digeser mendatar bila tidak muat */
.pos-tab-menu {
    margin-bottom: 16px;
    padding: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.pos-tab-menu::-webkit-scrollbar { height: 5px; }
.pos-tab-menu::-webkit-scrollbar-track { background: transparent; }
.pos-tab-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.pos-tab-menu .list-group,
.pos-tab-menu .list-group-link {
    display: flex;
    flex-wrap: wrap;              /* desktop: membungkus rapi */
    gap: 8px;
    margin: 0;
    padding: 0 0 4px;
    border: 0;
    box-shadow: none;
}

/* Tiap menu tampil sebagai tombol */
.pos-tab-menu .list-group-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    scroll-snap-align: start;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: all .15s ease;
}

.pos-tab-menu .list-group-item:hover,
.pos-tab-menu .list-group-item:focus {
    background: #f5f7ff;
    border-color: #c7d2fe !important;
    color: #4338ca;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(79, 70, 229, .25);
}

.pos-tab-menu .list-group-item.active,
.pos-tab-menu .list-group-item.active:hover,
.pos-tab-menu .list-group-item.active:focus {
    background: linear-gradient(to right, #6366f1, #3b82f6) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(59, 130, 246, .6);
}

/* Hilangkan sisa jarak dari layout kolom samping yang lama */
.pos-tab-content {
    padding-left: 0 !important;
    padding-top: 4px !important;
}

/* Beri jarak antar isian agar tidak berdempetan */
.pos-tab-content .form-group { margin-bottom: 16px; }
.pos-tab-content label { margin-bottom: 6px; line-height: 1.4; }

/* ------------------------------------------------------------
   Isi form di halaman pengaturan memakai col-xs-3 / col-xs-4,
   yang artinya "tetap sempit walau di layar terkecil". Akibatnya
   di HP label terpotong dan saling bertumpuk.
   Di bawah 768px kolom-kolom itu dijadikan selebar penuh.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .pos-tab-content [class*="col-xs-"],
    .pos-tab-content [class*="col-sm-"],
    .pos-tab-content [class*="col-md-"],
    .pos-tab-content [class*="col-lg-"] {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .pos-tab-content .form-group { margin-bottom: 14px; }
}

/* Tablet: kolom yang sangat sempit dijadikan setengah lebar */
@media (min-width: 768px) and (max-width: 991px) {
    .pos-tab-content .col-xs-3,
    .pos-tab-content .col-xs-4 {
        width: 50% !important;
    }
}

/* Layar kecil: satu baris yang bisa digeser + tepi kanan memudar */
@media (max-width: 767px) {
    .pos-tab-menu .list-group,
    .pos-tab-menu .list-group-link {
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }
    .pos-tab-menu .list-group-item {
        padding: 9px 14px !important;
        font-size: 13px;
    }
    .pos-tab-menu {
        -webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, .2) 100%);
        mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, .2) 100%);
    }
}

@media print {
    .pos-tab-menu { display: none !important; }
}

/* ============================================================
   BILAH ATAS LAYAR POS DI HP
   ------------------------------------------------------------
   Bawaannya, menu hamburger hanya membuka sebuah kolom flex biasa
   yang MENDORONG isi halaman ke bawah — sehingga muncul deretan
   tombol memanjang yang memenuhi layar.

   Di sini menu itu diubah menjadi panel mengambang di pojok kanan
   yang bisa digulir sendiri, sehingga kasir tidak kehilangan
   pandangan atas keranjang penjualan.

   Hanya berlaku di bawah 768px. Tampilan desktop tidak tersentuh.
   ============================================================ */
@media (max-width: 767px) {
    .pos-header { position: relative; }

    #pos_header_more_options {
        position: absolute;
        top: calc(100% - 2px);
        right: 10px;
        left: auto;
        width: 268px;
        max-width: calc(100vw - 28px);
        max-height: 68vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 1050;

        padding: 8px !important;
        gap: 4px !important;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .35);

        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    /* Kelas tw-hidden dari tombol hamburger tetap yang menentukan
       buka/tutup; id di sini hanya memastikan modelnya kolom. */
    #pos_header_more_options:not(.tw-hidden) { display: flex !important; }

    /* Setiap menu jadi satu baris penuh, rata kiri, mudah disentuh */
    #pos_header_more_options > a,
    #pos_header_more_options > button {
        width: 100% !important;
        height: auto !important;
        min-height: 42px;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left;
        padding: 4px 10px !important;
        border: 0 !important;
        border-radius: 9px !important;
        box-shadow: none !important;
        background: transparent !important;
        color: #334155 !important;
    }
    #pos_header_more_options > a:hover,
    #pos_header_more_options > button:hover,
    #pos_header_more_options > a:active,
    #pos_header_more_options > button:active { background: #f1f5f9 !important; }

    /* Bawaan memberi margin 12px di sekeliling label sehingga
       tombolnya jadi sangat tinggi dan tidak sejajar. */
    #pos_header_more_options > a > strong,
    #pos_header_more_options > button > strong {
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.3;
    }
    #pos_header_more_options i { width: 18px; text-align: center; flex: 0 0 18px; }

    /* Pemisah tipis antar menu agar mudah dibedakan */
    #pos_header_more_options > a + a,
    #pos_header_more_options > a + button,
    #pos_header_more_options > button + a,
    #pos_header_more_options > button + button { border-top: 1px solid #f1f5f9 !important; }

    /* Ikon hamburger diberi bidang sentuh yang layak */
    #pos_more_toggle .hamburger {
        font-size: 20px;
        padding: 6px;
        margin: 0 !important;
        color: #334155;
    }
}

/* ============================================================
   TABEL KERANJANG POS
   ------------------------------------------------------------
   Lebar kolomnya semata-mata diatur kelas Bootstrap col-md-*
   pada <th>, dan kelas itu baru aktif mulai lebar 992px.
   Di bawah itu tabel jatuh ke penataan otomatis: sel Kwantitas —
   yang isinya paling panjang (tombol −, kotak angka, tombol +,
   lalu dropdown satuan) — merebut ruang, sementara kolom Staf
   layanan terjepit sampai hampir tidak terbaca.

   Akar teknisnya: input kwantitas diberi `style="width:auto"`
   sebaris, yang membatalkan lebar 100% bawaan input-group,
   sehingga kotaknya melar mengikuti isi.

   PENTING — id "pos_table" TIDAK eksklusif milik layar kasir. Id yang
   sama dipakai halaman Penjualan biasa, Repair, CRM Order Request, dan
   layar tampilan pelanggan. Karena itu semua aturan di bawah dibatasi
   ke pembungkus .pos-cart, yang hanya dipasang pada keranjang POS
   (resources/views/sale_pos/partials/pos_form.blade.php dan
   pos_form_edit.blade.php).
   ============================================================ */

/* Berlaku di semua ukuran layar: kwantitas tidak boleh melar */
.pos-cart #pos_table td .input-number {
    max-width: 190px;
    margin-left: auto;
    margin-right: auto;
}
.pos-cart #pos_table td input.pos_quantity {
    width: 100% !important;      /* menimpa style="width:auto" sebaris */
    min-width: 0;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}
.pos-cart #pos_table td select.sub_unit {
    max-width: 190px;
    margin-left: auto;
    margin-right: auto;
}
/* Select2 di dalam sel tabel kerap memakai lebar bawaan <select> */
.pos-cart #pos_table td .select2-container { width: 100% !important; }

/* Jaring pengaman: bila tetap tidak muat, geser mendatar —
   jangan sampai ada kolom yang terpotong tanpa jalan keluar. */
.pos-cart { overflow-x: auto; }

/* ------------------------------------------------------------
   TABLET (768–1199px) — rentang yang selama ini tidak terurus
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) {
    .pos-cart #pos_table th,
    .pos-cart #pos_table td {
        padding: 6px 4px !important;
        font-size: 13px;
        vertical-align: middle;
    }
    .pos-cart #pos_table th { font-size: 13px !important; }

    /* Kwantitas dipadatkan supaya ruangnya kembali ke kolom lain */
    .pos-cart #pos_table td .input-number { max-width: 132px; }
    .pos-cart #pos_table td select.sub_unit { max-width: 132px; font-size: 12px; height: 30px; }
    .pos-cart #pos_table td .input-number .btn-default { padding: 5px 7px; }

    /* Kolom Staf layanan & Subtotal dijamin punya ruang minimal */
    .pos-cart #pos_table th.col-md-2:not(.hide) { min-width: 104px; }

    /* Nama produk boleh membungkus, jangan memaksa tabel melebar */
    .pos-cart #pos_table td:first-child { word-break: break-word; }
    .pos-cart #pos_table td img { height: 34px !important; width: 34px !important; }

    /* Ikon hapus 30px terlalu besar untuk baris yang dipadatkan */
    .pos-cart #pos_table .fa-times { font-size: 20px; }

    /* Bilah atas: tombol pilihan membungkus, bukan meluber keluar layar */
    .pos-header #pos_header_more_options {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }
    .pos-header .curr_datetime { font-size: 12px; }
    .pos-header p { white-space: nowrap; }
}

/* Bilah bawah dipadatkan agar tidak menutupi isi di layar sedang */
@media (max-width: 1199px) {
    .pos-form-actions { padding-top: 8px; padding-bottom: 12px; }
    .pos-form-actions .pos-total { padding: 4px 8px !important; }
    .pos-form-actions .pos-total span.number { font-size: 20px !important; }

}

/* Bilah pembayaran melayang di atas isi halaman (position:fixed mulai
   601px ke atas). Daftar produk diberi ruang di bawahnya agar baris
   terakhir tetap terjangkau. Di bawah 768px daftar ini muncul di dalam
   modal saran produk yang tidak punya bilah melayang, jadi dikecualikan. */
@media (min-width: 768px) and (max-width: 1199px) {
    #product_list_body { padding-bottom: 96px; }
}

/* ------------------------------------------------------------
   TABLET TEGAK (di bawah 1024px) — keranjang & kategori bertumpuk
   ------------------------------------------------------------
   Tinggi keranjang dipatok 40vh, sehingga saat masih kosong ia
   menyisakan ruang menganga dan mendorong daftar kategori jauh
   ke bawah. Di sini tingginya dibuat mengikuti isi, dengan batas
   atas agar tetap bisa digulir bila belanjaannya banyak.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    .pos-cart {
        height: auto !important;
        min-height: 90px;
        max-height: 46vh;
        overflow-y: auto;
    }
}

/* ---------- Dropdown menu umum ---------- */
.dropdown-menu {
    border-radius: 10px;
    border-color: #e5e7eb;
    box-shadow: 0 12px 30px -12px rgba(15, 23, 42, .22);
    padding: 6px;
}
.dropdown-menu > li > a { border-radius: 7px; padding: 8px 12px; }

/* ---------- Kartu / box sedikit lebih lembut ---------- */
.box { border-radius: 10px; }
.box.box-solid > .box-header,
.box > .box-header { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.modal-content { border-radius: 12px; }
.nav-tabs-custom { border-radius: 10px; }