/* =========================================================
   IT WILAYAH - TEMA "OPS DASHBOARD" (navy + cyan, ala referensi
   "Supply Chain Dashboard"). Menggantikan tema "Dashtreme"
   (kaca/gradasi indigo) sebelumnya. Filosofinya tetap sama:
   dipasang lewat master layout supaya otomatis berlaku ke semua
   halaman, HANYA mengubah tampilan - markup/JS/modal/DataTables
   tiap halaman tidak disentuh.

   NAMA variabel --noc-* SENGAJA DIPERTAHANKAN (tidak diganti jadi
   --dash-* dsb) karena puluhan file blade sudah lebih dulu memakai
   nama-nama ini di <style> masing-masing. Dengan hanya mengganti
   NILAI-nya di sini, seluruh halaman tersebut otomatis ikut tema
   baru tanpa perlu disentuh satu per satu.

   STRUKTUR DUA TEMA:
   - :root                -> palet MODE TERANG (default kalau
                              atribut data-theme belum di-set sama
                              sekali, mis. sebelum JS toggle jalan)
   - [data-theme="dark"]   -> override MODE GELAP. Ini yang dipakai
                              sebagai default aplikasi (lihat script
                              di master/css.blade.php yang langsung
                              memasang data-theme="dark" kalau user
                              belum pernah memilih sebelumnya).

   Referensi background-nya navy SOLID (bukan foto/kaca tebal), jadi
   --noc-panel dibikin lebih opaque dibanding versi "Dashtreme"
   sebelumnya - kartu terlihat padat, bukan tembus pandang.

   Font monospace "ala terminal" dari tema lama tetap dihilangkan -
   variabel --noc-mono isinya font UI biasa (font SISTEM, bukan
   Google Fonts, supaya tidak ada dependensi internet/CDN yang bisa
   bikin lemot kalau server tidak selalu online).
   ========================================================= */

:root {
    color-scheme: light;

    /* --- gradasi background halaman (biru-putih lembut) --- */
    --noc-bg-1: #eef4fb;
    --noc-bg-2: #f3f8fd;
    --noc-bg-3: #eaf3fb;

    /* --- permukaan kartu, dibikin cukup opaque (solid) sesuai
       referensi, bukan efek kaca tebal --- */
    --noc-panel: rgba(255, 255, 255, 0.86);
    --noc-panel-strong: rgba(255, 255, 255, 0.96);
    --noc-border: rgba(2, 132, 199, 0.16);

    /* --- permukaan berblur, khusus dipakai internal file ini
       untuk navbar/sidebar/dropdown/modal --- */
    --noc-chrome: rgba(255, 255, 255, 0.70);
    --noc-chrome-strong: rgba(255, 255, 255, 0.95);

    /* solid/opaque, dipakai untuk popup kecil (select2 dsb) yang
       tidak enak kalau tembus pandang */
    --noc-surface-solid: #ffffff;

    /* --- teks --- */
    --noc-text: #0f1f33;
    --noc-muted: #5b6b82;

    /* --- warna brand/aksen: biru-cyan ala referensi (angka besar
       "SSR 99.01%" dkk). Mode terang pakai nuansa lebih gelap supaya
       tetap kontras dengan teks putih di tombol --- */
    --noc-accent: #0284c7;
    --noc-accent-soft: #0369a1;
    --noc-accent-rgb: 2, 132, 199;
    --noc-on-accent: #ffffff;

    /* --- status/kategori (dipakai juga utk variasi warna badge ikon
       KPI, mengikuti referensi yang pakai banyak warna berbeda) --- */
    --noc-success: #059669;
    --noc-success-soft: #047857;
    --noc-success-rgb: 5, 150, 105;

    --noc-warn: #d97706;
    --noc-warn-soft: #b45309;
    --noc-warn-rgb: 217, 119, 6;
    --noc-on-warn: #2a1400;

    --noc-danger: #dc2626;
    --noc-danger-soft: #b91c1c;
    --noc-danger-rgb: 220, 38, 38;

    --noc-info: #2563eb;
    --noc-info-soft: #1d4ed8;
    --noc-info-rgb: 37, 99, 235;

    --noc-purple: #7c3aed;
    --noc-purple-soft: #6d28d9;
    --noc-purple-rgb: 124, 58, 237;

    --noc-pink: #db2777;
    --noc-pink-soft: #be185d;
    --noc-pink-rgb: 219, 39, 119;

    --noc-text-rgb: 15, 31, 51;

    /* nama variabel dipertahankan (banyak file sudah pakai var ini
       utk font-family), isinya font UI biasa - bukan monospace */
    --noc-mono: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Mode gelap: dipasang lewat atribut data-theme di <html>, diatur
   oleh public/template/js/theme-toggle.js + script kecil di
   master/css.blade.php (defaultnya "dark" kalau belum pernah dipilih). */
[data-theme="dark"] {
    color-scheme: dark;

    /* navy solid, bukan lagi gradasi indigo-kaca */
    --noc-bg-1: #071120;
    --noc-bg-2: #0d1f35;
    --noc-bg-3: #0a1628;

    /* dibikin lebih opaque/kontras dibanding versi "Dashtreme" supaya
       kartu terlihat padat/solid & menonjol dari background, bukan
       tembus pandang/nge-blend - ini yang bikin dashboard kerasa hidup */
    --noc-panel: rgba(148, 197, 255, 0.09);
    --noc-panel-strong: rgba(148, 197, 255, 0.16);
    --noc-border: rgba(103, 232, 249, 0.24);

    --noc-chrome: rgba(6, 13, 24, 0.75);
    --noc-chrome-strong: rgba(5, 10, 19, 0.96);

    --noc-surface-solid: #0d1b2e;

    --noc-text: #e6edf7;
    --noc-muted: #7c8aa3;

    /* aksen cyan terang ala referensi - teks di atasnya dibikin gelap
       (--noc-on-accent) karena cyan terang kontras buruk dgn putih */
    --noc-accent: #22d3ee;
    --noc-accent-soft: #67e8f9;
    --noc-accent-rgb: 34, 211, 238;
    --noc-on-accent: #04222b;

    --noc-success: #34d399;
    --noc-success-soft: #6ee7b7;
    --noc-success-rgb: 52, 211, 153;

    --noc-warn: #fbbf24;
    --noc-warn-soft: #fcd34d;
    --noc-warn-rgb: 251, 191, 36;
    --noc-on-warn: #2a1400;

    --noc-danger: #f87171;
    --noc-danger-soft: #fca5a5;
    --noc-danger-rgb: 248, 113, 113;

    --noc-info: #60a5fa;
    --noc-info-soft: #93c5fd;
    --noc-info-rgb: 96, 165, 250;

    --noc-purple: #a78bfa;
    --noc-purple-soft: #c4b5fd;
    --noc-purple-rgb: 167, 139, 250;

    --noc-pink: #f472b6;
    --noc-pink-soft: #f9a8d4;
    --noc-pink-rgb: 244, 114, 182;

    --noc-text-rgb: 230, 237, 247;
}

body {
    background:
        radial-gradient(circle at 15% 0%, rgba(var(--noc-accent-rgb), 0.10), transparent 45%),
        linear-gradient(135deg, var(--noc-bg-1) 0%, var(--noc-bg-2) 55%, var(--noc-bg-3) 100%) fixed;
    color: var(--noc-text);
    font-family: var(--noc-mono);
    transition: background .25s ease, color .25s ease;
}

.page-body-wrapper,
.main-panel,
.content-wrapper {
    background: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--noc-text);
    font-family: var(--noc-mono);
}

.text-muted {
    color: var(--noc-muted) !important;
}

/* ===== Navbar & Sidebar lama (Bootstrap admin template) =====
   Dihapus - markup navbar/sidebar ini sudah diganti total oleh shell
   baru ala "Vault" (lihat public/template/css/vault-theme.css +
   master/navbar.blade.php + master/sidebar.blade.php), jadi rule-rule
   di atas sudah tidak match elemen apa pun lagi. */

/* ===== Card ===== */
/* PENTING: .card SENGAJA TIDAK diberi backdrop-filter/filter/transform.
   Hampir semua modal di aplikasi ini nempel di dalam .card (card > table
   > baris > modal). CSS filter/backdrop-filter pada elemen manapun akan
   membuat elemen itu jadi "containing block" baru untuk descendant yang
   position:fixed - sementara .modal Bootstrap itu position:fixed. Akibatnya
   modal yang nempel di dalam .card jadi ke-render/ke-klik relatif ke kotak
   card (bukan ke seluruh layar), jadi sebagian tombolnya (Simpan dkk)
   ketutup/kepotong dan berasa "gak bisa diklik". Ini sumber bug modalnya -
   makanya efek "kaca" di sini dicapai lewat opacity/warna saja (TANPA
   backdrop-filter), bukan blur asli seperti di navbar/sidebar/modal. */
.card {
    background: var(--noc-panel) !important;
    border: 1px solid var(--noc-border) !important;
    border-radius: 14px !important;
    color: var(--noc-text);
    box-shadow: 0 10px 30px rgba(var(--noc-text-rgb), 0.06);
}

.card .wrapper {
    background: transparent;
}

.page-header-title,
.card-title {
    color: var(--noc-text) !important;
    font-family: var(--noc-mono);
    letter-spacing: 0.1px;
}

/* ===== Tabel ===== */
.table {
    color: var(--noc-text) !important;
    font-family: var(--noc-mono);
    font-size: 13px;
}

.table thead th,
.table .thead-light th {
    color: var(--noc-accent) !important;
    border-color: var(--noc-border) !important;
    background: rgba(var(--noc-accent-rgb), 0.06) !important;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
}

.table td,
.table th {
    border-color: rgba(var(--noc-text-rgb), 0.08) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(var(--noc-accent-rgb), 0.03) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(var(--noc-accent-rgb), 0.09) !important;
    color: var(--noc-text) !important;
}

/* DataTables plugin */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
    color: var(--noc-muted) !important;
    font-family: var(--noc-mono);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--noc-muted) !important;
    font-family: var(--noc-mono);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--noc-accent) !important;
    border-color: var(--noc-accent) !important;
    color: var(--noc-on-accent) !important;
}

/* ===== Form ===== */
.form-control,
select.form-control,
.custom-select,
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"] {
    background: rgba(var(--noc-text-rgb), 0.04) !important;
    border: 1px solid var(--noc-border) !important;
    color: var(--noc-text) !important;
    font-family: var(--noc-mono);
    border-radius: 8px !important;
}

/* beberapa halaman laporan pakai <input type="date"> polos tanpa class
   .form-control - kasih padding minimal biar tidak mepet sama teks/ikon.
   Ikon kalender & popup date picker-nya sendiri otomatis mengikuti
   terang/gelap berkat "color-scheme" di :root / [data-theme="dark"],
   tidak perlu di-invert manual. */
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"] {
    padding: 4px 8px !important;
}

/* beberapa halaman kasih class "text-dark" bawaan Bootstrap langsung di
   <select>/<option> (utility class-nya sendiri pakai !important) - kalau
   tidak ditarget lebih spesifik di sini, teks di dropdown jadi tidak
   kontras dengan background-nya */
select.form-control.text-dark,
.custom-select.text-dark,
select.form-control option,
.custom-select option,
select.form-control option.text-dark,
.custom-select option.text-dark {
    background: var(--noc-surface-solid) !important;
    color: var(--noc-text) !important;
}

.form-control::placeholder {
    color: rgba(var(--noc-text-rgb), 0.35) !important;
}

.form-control:focus,
.custom-select:focus {
    background: rgba(var(--noc-text-rgb), 0.06) !important;
    border-color: var(--noc-accent) !important;
    color: var(--noc-text) !important;
    box-shadow: 0 0 0 3px rgba(var(--noc-accent-rgb), 0.15) !important;
}

label,
.form-check-label {
    color: var(--noc-muted);
    font-family: var(--noc-mono);
    font-size: 12.5px;
}

.input-group-text {
    background: rgba(var(--noc-text-rgb), 0.06) !important;
    border: 1px solid var(--noc-border) !important;
    color: var(--noc-muted) !important;
}

/* ===== Select2 =====
   Dipasang global karena dipakai di banyak halaman (data-pos, data_update,
   rekap_update, lap_update, cabang_update dst) - beberapa di antaranya
   belum kasih override sendiri jadi masih ikut tema putih bawaan plugin. */
.select2-container--default .select2-selection--single {
    height: 38px !important;
    border: 1px solid var(--noc-border) !important;
    border-radius: 8px !important;
    background: rgba(var(--noc-text-rgb), 0.04) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 38px !important;
    color: var(--noc-text) !important;
    font-family: var(--noc-mono);
    line-height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(var(--noc-text-rgb), 0.35) !important;
}

.select2-container--default .select2-selection--multiple {
    min-height: 38px !important;
    border: 1px solid var(--noc-border) !important;
    border-radius: 8px !important;
    background: rgba(var(--noc-text-rgb), 0.04) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(var(--noc-accent-rgb), 0.16) !important;
    border: 1px solid rgba(var(--noc-accent-rgb), 0.35) !important;
    color: var(--noc-accent-soft) !important;
    font-family: var(--noc-mono);
    border-radius: 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--noc-accent-soft) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--noc-danger) !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--noc-text) !important;
    font-family: var(--noc-mono);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--noc-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--noc-accent-rgb), 0.15) !important;
}

.select2-container--open {
    z-index: 99999 !important;
}

.select2-dropdown {
    overflow: hidden !important;
    background: var(--noc-surface-solid) !important;
    border: 1px solid var(--noc-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(var(--noc-text-rgb), 0.18) !important;
}

.select2-search--dropdown {
    background: var(--noc-surface-solid) !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--noc-border) !important;
    border-radius: 7px !important;
    outline: none !important;
    background: rgba(var(--noc-text-rgb), 0.04) !important;
    color: var(--noc-text) !important;
    font-family: var(--noc-mono);
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--noc-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--noc-accent-rgb), 0.15) !important;
}

.select2-results__options {
    background: var(--noc-surface-solid) !important;
}

.select2-results__option {
    color: var(--noc-text) !important;
    font-family: var(--noc-mono);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--noc-accent) !important;
    color: var(--noc-on-accent) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: rgba(var(--noc-accent-rgb), 0.16) !important;
    color: var(--noc-accent-soft) !important;
}

/* ===== Tombol ===== */
.btn {
    font-family: var(--noc-mono);
    letter-spacing: 0.2px;
    border-radius: 8px !important;
}

.btn-primary {
    background: var(--noc-accent) !important;
    border-color: var(--noc-accent) !important;
    color: var(--noc-on-accent) !important;
    font-weight: 600;
}

.btn-info,
.btn-outline-info {
    border-color: var(--noc-info) !important;
    color: var(--noc-info) !important;
    background: transparent !important;
}

.btn-info:hover,
.btn-outline-info:hover {
    background: var(--noc-info) !important;
    color: var(--noc-on-accent) !important;
}

.btn-success {
    background: var(--noc-success) !important;
    border-color: var(--noc-success) !important;
    color: var(--noc-on-accent) !important;
}

.btn-warning {
    background: var(--noc-warn) !important;
    border-color: var(--noc-warn) !important;
    color: var(--noc-on-warn) !important;
}

.btn-danger {
    background: var(--noc-danger) !important;
    border-color: var(--noc-danger) !important;
    color: var(--noc-on-accent) !important;
}

.btn-outline-danger {
    color: var(--noc-danger) !important;
    border-color: var(--noc-danger) !important;
    background: transparent !important;
}

.btn-secondary {
    background: rgba(var(--noc-text-rgb), 0.08) !important;
    border-color: rgba(var(--noc-text-rgb), 0.18) !important;
    color: var(--noc-text) !important;
}

.btn-light {
    background: rgba(var(--noc-text-rgb), 0.06) !important;
    border-color: var(--noc-border) !important;
    color: var(--noc-text) !important;
}

.btn-light:hover {
    background: rgba(var(--noc-text-rgb), 0.12) !important;
}

/* ===== Badge ===== */
.badge {
    font-family: var(--noc-mono);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 10.5px;
    border-radius: 6px;
}

.badge-success { background: rgba(var(--noc-success-rgb), 0.16) !important; color: var(--noc-success-soft) !important; }
.badge-warning { background: rgba(var(--noc-warn-rgb), 0.16) !important; color: var(--noc-warn-soft) !important; }
.badge-danger { background: rgba(var(--noc-danger-rgb), 0.16) !important; color: var(--noc-danger-soft) !important; }
.badge-info { background: rgba(var(--noc-info-rgb), 0.16) !important; color: var(--noc-info-soft) !important; }

/* ===== Modal ===== */
.modal-content {
    background: var(--noc-chrome-strong) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--noc-border) !important;
    border-radius: 14px !important;
    color: var(--noc-text);
    font-family: var(--noc-mono);
}

.modal-header,
.modal-footer {
    border-color: rgba(var(--noc-text-rgb), 0.08) !important;
}

.modal .close {
    color: var(--noc-text) !important;
    text-shadow: none !important;
    opacity: 0.7;
}

.modal .close:hover {
    opacity: 1;
}

/* ===== Alert ===== */
.alert {
    font-family: var(--noc-mono);
    border-radius: 8px !important;
    font-size: 13px;
}

.alert-success {
    background: rgba(var(--noc-success-rgb), 0.12) !important;
    border-color: rgba(var(--noc-success-rgb), 0.35) !important;
    color: var(--noc-success-soft) !important;
}

.alert-info {
    background: rgba(var(--noc-info-rgb), 0.12) !important;
    border-color: rgba(var(--noc-info-rgb), 0.35) !important;
    color: var(--noc-info-soft) !important;
}

.alert-warning {
    background: rgba(var(--noc-warn-rgb), 0.12) !important;
    border-color: rgba(var(--noc-warn-rgb), 0.35) !important;
    color: var(--noc-warn-soft) !important;
}

.alert-danger {
    background: rgba(var(--noc-danger-rgb), 0.12) !important;
    border-color: rgba(var(--noc-danger-rgb), 0.35) !important;
    color: var(--noc-danger-soft) !important;
}

.alert-primary {
    background: rgba(var(--noc-accent-rgb), 0.10) !important;
    border-color: rgba(var(--noc-accent-rgb), 0.3) !important;
    color: var(--noc-accent) !important;
}

/* ===== Lain-lain ===== */
a {
    color: var(--noc-accent);
}

a:hover {
    color: var(--noc-accent-soft);
}

.footer {
    background: transparent !important;
    color: var(--noc-muted) !important;
    font-family: var(--noc-mono);
    font-size: 12px;
}

.dropdown-menu {
    background: var(--noc-chrome-strong) !important;
    border: 1px solid var(--noc-border) !important;
    border-radius: 10px !important;
}

.dropdown-item {
    color: var(--noc-muted) !important;
    font-family: var(--noc-mono);
}

.dropdown-item:hover {
    background: rgba(var(--noc-accent-rgb), 0.12) !important;
    color: var(--noc-accent) !important;
}

/* dipakai berulang di banyak halaman (kas/*, keluhan) untuk kotak
   hasil pencarian cabang - sebelumnya di-duplikasi persis di 5 file,
   sekarang cukup satu definisi di sini */
.dropdown-search {
    position: absolute;
    z-index: 1000;
    width: 100%;
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(var(--noc-text-rgb), 0.18);
}

.dropdown-search ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.dropdown-search li {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--noc-text);
    font-family: var(--noc-mono);
    font-size: 13px;
}

.dropdown-search li:hover {
    background-color: rgba(var(--noc-accent-rgb), 0.12);
    color: var(--noc-accent);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(var(--noc-text-rgb), 0.03);
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--noc-accent-rgb), 0.35);
    border-radius: 10px;
}