/* ==============================================================================
 * CV SETUJU BERKAH SARAMA - SISTEM KASIR & INVENTARIS TOKO BANGUNAN
 * File Name      : assets/css/global.css
 * Status Rilis   : Core Universal Design Tokens & 7 Universal Components
 * Deskripsi      : Menyimpan bank variabel :root terpusat, reset dokumen dasar,
 *                  dan 7 komponen universal (Searchbox, Form Input, Tombol Aksi,
 *                  Trio Aksi Tabel, Kapsul Status, Modal Popup, & Empty State).
 * ==============================================================================
 * 📖 DAFTAR ISI (TABLE OF CONTENTS) - Gunakan Ctrl+F untuk pencarian cepat
 * ==============================================================================
 * 
 * [1.0] VENDOR OFFLINE LIBRARIES
 *       [1.1] Pustaka Luring Pihak Ketiga (FontAwesome, SweetAlert2)
 *       
 * [2.0] PUSAT BANK DESAIN TOKEN TERPUSAT (:ROOT & ATOMIC TOKENS)
 *       [2.1] Tipografi & Identitas Merek Toko SBS
 *       [2.2] Warna Teks & Tipografi Terpusat (Hierarki Baca)
 *       [2.3] Warna Status Bisnis ERP Toko Bangunan (Lampu Indikator)
 *       [2.4] Permukaan & Garis Pembatas (Surfaces & Borders)
 *       [2.5] Resep Gradasi Tema & Ikon Metrik Telemetri KPI
 *       [2.6] Standar Sudut Melengkung (Border Radius Tokens)
 *       [2.7] Standar Efek Bayangan Timbul (Box Shadow Tokens)
 *       [2.8] Ukuran Baku Dimensi Ruang Kerja (Layout Constraints)
 * 
 * [3.0] RESET DASAR & TATA LETAK DOKUMEN UNIVERSAL
 *       [3.1] Global Reset (* { box-sizing: border-box })
 *       [3.2] Batasan Dokumen HTML & Body
 * 
 * [4.0] KOMPONEN 1 & 2: FORM CONTROLS, KOLOM INPUT & SEARCHBOX PENCARIAN
 *       [4.1] Form Group & Label Baku Formulir
 *       [4.2] Kotak Input, Textarea & Select Standar 50 Modul
 *       [4.3] Input Wrapper dengan Ikon di Kiri (Inline Icons)
 *       [4.4] KOMPONEN 1: Kotak Pencarian Universal (Search Box Filter)
 * 
 * [5.0] KOMPONEN 3: TOMBOL EKSEKUTIF UNIVERSAL (SIMPAN, BATAL & TAMBAH)
 *       [5.1] Kelas Dasar Seluruh Tombol (.btn)
 *       [5.2] Varian Warna Tombol Eksekutif Toko SBS
 * 
 * [6.0] KOMPONEN 4, 5 & 7: TABEL DATA, TRIO TOMBOL AKSI, BADGES & EMPTY STATE
 *       [6.1] Wadah & Kerangka Dasar Tabel Transaksi
 *       [6.2] KOMPONEN 4: Trio Tombol Aksi di Baris Tabel (Detail, Edit, Hapus)
 *       [6.3] KOMPONEN 5: Kapsul Status Bisnis Universal (Status & Sync Pills)
 *       [6.4] KOMPONEN 7: Tampilan Data Kosong & Paginasi Tabel (Empty State)
 * 
* [7.0] KOMPONEN 6: BINGKAI MODAL FORM POP-UP KACA & TELEMETRI DETAK JANTUNG
 *       [7.1] Tirai Latar Belakang Buram (.modal-backdrop)
 *       [7.2] Jendela Modal Kaca Safir Dark Navy (.modal-dialog-ultra-wide)
 *       [7.3] Header Modal Kaca & Tombol Tutup (.modal-header & .btn-modal-close)
 *       [7.4] Bilah Tab Kapsul & Status Tab Aktif (.modal-tabs-nav & .modal-tab-btn)
 *       [7.5] Ikon Form Tematik Neon (Merek, Kategori, Supplier, Gudang, Satuan)
 *       [7.6] Tombol Pintas Tambah (+) Tematik Berwarna (.btn-add-quick)
 *       [7.7] Kartu Sub-Unit Garis Putus & Frame Foto Produk (.sub-card-dashed)
 *       [7.8] Lampu Indikator Margin Berdenyut (.margin-dot & @keyframes ecgHeartbeat)
 *       [7.9] Tabel Simulasi Harga & Animasi Border Redup-Terang (5 Status Margin)
 *       [7.10] Baris Kaki Modal Kaca (.modal-footer)
 *       [7.11] Visual Kaca & Identitas Modal Detail Universal (Standar Baku 50 Modul)
 *       [7.12] KHUSUS MODAL FORM BAGAN AKUN & KAPSUL IDENTITAS BANK/KAS
 *       [7.13] UTILITAS WARNA TEKS & BADGE KONTEN UNIVERSAL (MURNI TANPA INLINE STYLE)
 *       [7.14] KOMPONEN PUSAT KOMANDO NOTIFIKASI LONCENG NAVBAR (100% TOKEN BAKU SBS)
 *       
 * ==============================================================================
 */


/* ==============================================================================
   [1.0] VENDOR OFFLINE LIBRARIES
   ============================================================================== */

/* [1.1] Third-Party Stylesheets */
@import "../vendor/fontawesome/css/all.min.css";
@import "../vendor/sweetalert2/css/sweetalert2.min.css";


/* ==============================================================================
   [2.0] PUSAT BANK DESAIN TOKEN TERPUSAT (:ROOT & ATOMIC TOKENS)
   ============================================================================== */
:root {
    /* --------------------------------------------------------------------------
       [2.1] TIPOGRAFI & IDENTITAS MEREK TOKO SBS
       -------------------------------------------------------------------------- */
    --font-primary        : 'Century Gothic', 'Tw Cen MT', Futura, 'Trebuchet MS', sans-serif;
    --font-mono           : ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    

    /* Standar Ketebalan Teks (Font Weight Tokens) */
    --fw-normal           : 400; /* Teks paragraf biasa */
    --fw-medium           : 500; /* Teks input & opsi select */
    --fw-semibold         : 600; /* Keterangan & sub-header */
    --fw-bold             : 700; /* Label formulir & tombol utama */
    --fw-extrabold        : 800; /* Header tabel & label KPI */
    --fw-black            : 900; /* Nominal angka Rupiah & badge khusus */
    
    --color-primary       : #0052d4; /* Biru Elektrik Toko SBS */
    --color-primary-hover : #0037a5; /* Biru Gelap Saat Kursor Hover */
    --color-primary-soft  : #eff6ff; /* Biru Sangat Muda untuk Latar Badge/Input */
    --color-primary-border: #bfdbfe; /* Border Biru Muda Pembatas */

    /* --------------------------------------------------------------------------
       [2.2] WARNA TEKS & TIPOGRAFI TERPUSAT (HIERARKI BACA LENGKAP & ANTI-GELAP)
       -------------------------------------------------------------------------- */
    /* Standar Latar Terang (Bebas dari Hitam Pekat Mentah #000000) */
    --text-main           : #0f172a; /* Slate 900: Judul Utama & Nominal Kasir */
    --text-body           : #334155; /* Slate 700: Isi Paragraf & Data Baris Tabel */
    --text-muted          : #64748b; /* Slate 500: Sub-keterangan & Meta Data */
    --text-placeholder    : #94a3b8; /* Slate 400: Hint Input Form */
    --text-disabled       : #cbd5e1; /* Slate 300: Teks Elemen Non-Aktif/Terkunci */

    /* Standar Latar Gelap & Kaca Frosted (Anti-Blackout Pada Card, Modal & POS) */
    --text-light-main     : #f8fafc; /* Slate 50: Teks Judul di Meja Kerja Kaca/Modal */
    --text-light-body     : #e2e8f0; /* Slate 200: Teks Deskripsi di Latar Gelap */
    --text-light-muted    : #94a3b8; /* Slate 400: Keterangan Abu Terang di Latar Gelap */
    --text-white          : #ffffff; /* Putih Solid Bersih */

    /* Teks Semantik Indikator Finansial & POS */
    --text-primary        : #38bdf8; /* Cyan Terang: No. Faktur & ID SKU */
    --text-success        : #4ade80; /* Hijau Terang: Status Lunas & Kas Masuk */
    --text-danger         : #f87171; /* Merah Terang: Jatuh Tempo & Stok Minus */
    --text-warning        : #fbbf24; /* Amber Terang: Menunggu Verifikasi */
    --text-info           : #60a5fa; /* Biru Terang: Info Pengiriman Armada */
    --text-link           : #60a5fa; /* Tautan Navigasi Interaktif */
    --text-link-hover     : #93c5fd; /* Tautan Saat Kursor Menempel */

    /* --------------------------------------------------------------------------
       [2.3] WARNA STATUS BISNIS ERP TOKO BANGUNAN (LAMPU INDIKATOR)
       -------------------------------------------------------------------------- */
    --color-success       : #10b981; /* Hijau: Lunas, Transaksi Sukses, Stok Aman */
    --color-success-soft  : #ecfdf5; /* Latar Hijau Muda */
    --color-danger        : #ef4444; /* Merah: Jatuh Tempo, Batal, Stok Minus */
    --color-danger-soft   : #fff1f2; /* Latar Merah Muda */
    --color-warning       : #f59e0b; /* Amber/Oranye: Menunggu DP, Waspada Stok */
    --color-warning-soft  : #fffbeb; /* Latar Oranye Muda */
    --color-purple        : #8b5cf6; /* Ungu: Relasi Bisnis, Kontraktor, Supplier */
    --color-purple-soft   : #f5f3ff; /* Latar Ungu Muda */
    --color-teal          : #0d9488; /* Toska: Manajemen Armada & Supir */

    /* --------------------------------------------------------------------------
       [2.4] PERMUKAAN & GARIS PEMBATAS (SURFACES & BORDERS)
       -------------------------------------------------------------------------- */
    --bg-main             : #f8fafc; /* Latar Belakang Dasar Aplikasi & Header Tabel */
    --bg-card             : #ffffff; /* Latar Belakang Kartu Konten & Meja Kerja */
    --bg-disabled         : #f1f5f9; /* Latar Belakang Input Readonly/Terkunci */
    --bg-backdrop         : rgba(15, 23, 42, 0.65); /* Tirai Gelap Modal Pop-up */
    --bg-glass-white      : rgba(255, 255, 255, 0.18); /* Kaca Transparan Putih (Ikon Logo Navbar) */
    --bg-glass-dark       : rgba(0, 0, 0, 0.18);       /* Kaca Transparan Gelap (Badge Nama User) */
    --border-color        : #e2e8f0; /* Garis Pembatas Lembut Standar */
    --border-hover        : #cbd5e1; /* Garis Pembatas Saat Kursor Mendekat */
    --border-card-glow    : rgba(255, 255, 255, 0.35); /* Garis Kilau Kartu Mengambang */
    --focus-ring          : 0 0 0 3px rgba(0, 82, 212, 0.15); /* Pendaran Biru Saat Kolom Diklik */

    /* Token Khusus Lemari Sidebar Dark Navy Executive */
    --bg-sidebar-dark     : #041338; /* Biru Dongker Pekat Eksekutif (Menyatu dengan Meja Kerja) */
    --bg-sidebar-glass    : rgba(4, 19, 56, 0.88); /* Kaca Dark Navy Transparan Mewah HP & Tablet */
    --bg-sidebar-card     : rgba(255, 255, 255, 0.06); /* Kaca Tombol Menu Semi-Transparan */

    /* Token Glassmorphism Meja Kerja & Kapsul Toolbar */
    --bg-glass-card       : rgba(255, 255, 255, 0.12); /* Kaca Transparan Kartu KPI */
    --bg-glass-toolbar    : rgba(255, 255, 255, 0.08); /* Kaca Transparan Toolbar */
    --bg-glass-input      : rgba(255, 255, 255, 0.14); /* Kaca Transparan Search & Filter */
    --bg-glass-input-focus: rgba(255, 255, 255, 0.22); /* Pendaran Kaca Saat Input Fokus */
    --border-glass-subtle : rgba(255, 255, 255, 0.22); /* Garis Pembatas Kaca Lembut */
    --border-glass-input  : rgba(255, 255, 255, 0.28); /* Garis Kaca Input Kapsul */
    --glow-neon-cyan      : 0 0 0 3px rgba(56, 189, 248, 0.35), 0 0 20px rgba(56, 189, 248, 0.6);
    --glow-btn-hover      : 0 0 16px rgba(255, 255, 255, 0.75), 0 0 8px #38bdf8;
    --grad-orange         : linear-gradient(135deg, #ea580c, #c2410c);

    /* Token Khusus Tabel Kaca Dark Frosted Glass (Universal 50 Modul) */
    --bg-glass-table      : rgba(255, 255, 255, 0.08); /* Latar Wadah Tabel Kaca */
    --bg-glass-th         : rgba(255, 255, 255, 0.12); /* Header Kolom Tabel */
    --bg-glass-tr-hover   : rgba(56, 189, 248, 0.18);  /* Sorot Baris Kursor Neon */
    --border-glass-td     : rgba(255, 255, 255, 0.08); /* Garis Halus Antar Baris */
    --text-gold-soft      : #fef08a;                   /* Kuning Emas Adem Pengganti Teks Biru */
    --color-alert-neon    : #ff334b;                   /* Segitiga Bahaya Merah Menyala */
    --btn-view-bg         : rgba(56, 189, 248, 0.30);  /* Tombol Lihat Detail */
    --btn-edit-bg         : rgba(245, 158, 11, 0.30);  /* Tombol Edit */
    --btn-delete-bg       : rgba(239, 68, 68, 0.30);   /* Tombol Hapus */
    --bg-sidebar-hover    : rgba(255, 255, 255, 0.12); /* Kaca Tombol Saat Kursor Menempel */
    --border-sidebar-dark : rgba(255, 255, 255, 0.10); /* Garis Batas Kaca Lembut */
    --text-sidebar-nav    : #e2e8f0; /* Teks Menu Putih Keperakan Tajam */
    --text-sidebar-muted  : #94a3b8; /* Teks Sub-Menu Abu Terang */

    /* --------------------------------------------------------------------------
       [2.5] RESEP GRADASI TEMA & IKON METRIK TELEMETRI KPI
       -------------------------------------------------------------------------- */
    --bg-tech-blueprint   : radial-gradient(circle at 50% 30%, #0052d4 0%, #00227a 60%, #001040 100%),
                            radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    
    --grad-navbar         : linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
    --grad-btn-hero       : linear-gradient(135deg, #0052d4 0%, #0037a5 60%, #001f66 100%);

    --grad-blue           : linear-gradient(135deg, #0284c7, #0369a1);
    --grad-amber          : linear-gradient(135deg, #f59e0b, #d97706);
    --grad-red            : linear-gradient(135deg, #ef4444, #dc2626);
    --grad-green          : linear-gradient(135deg, #10b981, #059669);
    --grad-purple         : linear-gradient(135deg, #8b5cf6, #7c3aed);
    --grad-teal           : linear-gradient(135deg, #0d9488, #0f766e);

    /* --------------------------------------------------------------------------
       [2.6] STANDAR SUDUT MELENGKUNG (BORDER RADIUS TOKENS)
       -------------------------------------------------------------------------- */
    --radius-xs           : 4px;   /* Tag kecil & tombol mini tabel */
    --radius-sm           : 6px;   /* Badge status angka & pill kecil */
    --radius-md           : 10px;  /* Kolom input, textarea, tombol navigasi */
    --radius-lg           : 14px;  /* Wadah kolom form, kartu modul */
    --radius-card         : 18px;  /* Kartu KPI telemetri & modal box */
    --radius-window       : 24px;  /* Jendela mengambang login */
    --radius-pill         : 50px;  /* Kapsul lampu online & pill status */

    /* --------------------------------------------------------------------------
       [2.7] STANDAR EFEK BAYANGAN TIMBUL (BOX SHADOW TOKENS)
       -------------------------------------------------------------------------- */
    --shadow-subtle       : 0 2px 6px rgba(15, 23, 42, 0.04);
    --shadow-btn          : 0 4px 14px rgba(0, 82, 212, 0.25);
    --shadow-card-float   : 0 12px 30px -5px rgba(0, 10, 45, 0.35);
    --shadow-window-deep  : 0 30px 70px -15px rgba(0, 10, 45, 0.55);
    --shadow-icon-timbul  : drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    --glow-table-action   : 0 0 8px rgba(255, 255, 255, 0.6);

    /* --------------------------------------------------------------------------
       [2.8] UKURAN BAKU DIMENSI & TUMPUKAN TAMPILAN (LAYOUT & Z-INDEX TOKENS)
       -------------------------------------------------------------------------- */
    --navbar-height       : 64px;  /* Kunci Tinggi Navbar Atas */
    --sidebar-width       : 265px; /* Kunci Lebar Lemari Sidebar Kiri */
    
    /* Hierarki Tumpukan Layer Terpusat (Bebas Inline Style z-index) */
    --z-base              : 1;     /* Konten Tabel & Meja Kerja */
    --z-sticky            : 100;   /* Header Kolom Tabel Menempel (Sticky Th) */
    --z-navbar            : 500;   /* Bilah Atas Navbar */
    --z-sidebar           : 600;   /* Lemari Menu Samping */
    --z-backdrop          : 1000;  /* Tirai Gelap Modal Pop-up */
    --z-modal             : 1100;  /* Wadah Modal Dialog SaaS */
    --z-popover           : 1200;  /* Panel Auto-complete & Lookup Barang */
    --z-toast             : 2000;  /* Notifikasi Mengambang SweetAlert2 */

    /* --------------------------------------------------------------------------
       [2.9] KECEPATAN GERAK & ANIMASI (TRANSITION TOKENS)
       -------------------------------------------------------------------------- */
    --transition-fast     : 0.15s ease-in-out; /* Hover tombol & badge */
    --transition-normal   : 0.25s ease-in-out; /* Buka modal & dropdown */
    --transition-slow     : 0.40s cubic-bezier(0.4, 0, 0.2, 1); /* Slide lemari sidebar */

    /* --------------------------------------------------------------------------
       [2.10] TOKEN MODAL FROSTED GLASS & TELEMETRI DETAK JANTUNG (SULTAN SBS)
       -------------------------------------------------------------------------- */
    --modal-backdrop-deep : rgba(3, 10, 30, 0.76);
    --modal-bg-glass      : radial-gradient(circle at 50% 0%, #0052d4 0%, #00227a 55%, #041338 100%);
    --modal-surface-glass : rgba(255, 255, 255, 0.06);
    --modal-border-subtle : rgba(255, 255, 255, 0.15);
    --modal-border-card   : rgba(255, 255, 255, 0.22);
    --modal-nav-bg        : rgba(0, 0, 0, 0.22);
    --modal-nav-btn-bg    : rgba(255, 255, 255, 0.08);
    --modal-nav-btn-hover : rgba(255, 255, 255, 0.18);
    --modal-card-dashed-bg: rgba(255, 255, 255, 0.05);
    --modal-input-bg      : rgba(255, 255, 255, 0.12);
    --modal-input-focus-bg: rgba(255, 255, 255, 0.22);
    --modal-input-border  : rgba(255, 255, 255, 0.25);
    --modal-readonly-bg   : rgba(0, 0, 0, 0.30);
    --modal-table-sim-bg  : rgba(0, 0, 0, 0.22);
    --modal-table-th-bg   : rgba(255, 255, 255, 0.08);
    --modal-table-td-border: rgba(255, 255, 255, 0.06);

    /* Warna Tipografi & Label Kaca */
    --text-label-form     : #93c5fd; /* Biru Langit Lembut */
    --text-tab-muted      : #cbd5e1; /* Abu Perak Terang */
    --text-mark-required  : #ff4d6d; /* Merah Tanda Wajib */

    /* Warna Neon Tematik Master Barang */
    --neon-cyan           : #38bdf8;
    --neon-cyan-soft      : rgba(56, 189, 248, 0.22);
    --neon-cyan-border    : rgba(56, 189, 248, 0.50);
    --neon-cyan-glow      : 0 0 14px rgba(56, 189, 248, 0.6);

    --neon-purple         : #c084fc;
    --neon-purple-soft    : rgba(192, 132, 252, 0.22);
    --neon-purple-border  : rgba(192, 132, 252, 0.50);
    --neon-purple-glow    : 0 0 12px rgba(192, 132, 252, 0.7);

    --neon-teal           : #2dd4bf;
    --neon-teal-dim       : rgba(45, 212, 191, 0.06);
    --neon-teal-soft      : rgba(45, 212, 191, 0.22);
    --neon-teal-border    : rgba(45, 212, 191, 0.50);
    --neon-teal-glow      : 0 0 12px rgba(45, 212, 191, 0.7);

    --neon-amber          : #fbbf24;
    --neon-amber-dim      : rgba(251, 191, 36, 0.06);
    --neon-amber-soft     : rgba(251, 191, 36, 0.22);
    --neon-amber-border   : rgba(251, 191, 36, 0.50);
    --neon-amber-glow     : 0 0 12px rgba(251, 191, 36, 0.7);

    --neon-orange         : #fb923c;
    --neon-orange-dim     : rgba(251, 146, 60, 0.06);
    --neon-orange-soft    : rgba(251, 146, 60, 0.25);
    --neon-orange-glow    : 0 0 14px rgba(251, 146, 60, 0.8);

    --neon-green          : #4ade80;
    --neon-green-dim      : rgba(74, 222, 128, 0.06);
    --neon-green-soft     : rgba(74, 222, 128, 0.22);
    --neon-green-glow     : 0 0 14px rgba(74, 222, 128, 0.75);

    --neon-red            : #ef4444;
    --neon-red-dim        : rgba(239, 68, 68, 0.10);
    --neon-red-soft       : rgba(239, 68, 68, 0.25);
    --neon-red-glow       : 0 0 18px rgba(239, 68, 68, 0.95);
    --neon-red-text       : #ff6b6b;

    /* Warna Neon Tematik Tambahan (Blue Azure & White Crystal) */
    --neon-blue           : #60a5fa;
    --neon-blue-dim       : rgba(96, 165, 250, 0.06);
    --neon-blue-soft      : rgba(96, 165, 250, 0.22);
    --neon-blue-border    : rgba(96, 165, 250, 0.45);
    --neon-blue-glow      : 0 0 14px rgba(96, 165, 250, 0.75);

    --neon-white          : #ffffff;
    --neon-white-soft     : rgba(255, 255, 255, 0.12);
    --neon-white-border   : rgba(255, 255, 255, 0.45);
    --neon-white-glow     : 0 0 10px rgba(255, 255, 255, 0.35);
}

/* ==============================================================================
   [3.0] RESET DASAR & TATA LETAK DOKUMEN UNIVERSAL
   ============================================================================== */

/* [3.1] Global Reset: Box-Sizing, Scrollbar Kaca Universal & Pendaran Seleksi */
* {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
}

/* Warna Saat Teks/Nominal Diblok Kursor (Standar Quiet Luxury & Kontras Tajam) */
::selection {
    background: var(--color-primary) !important;
    color: var(--text-white) !important;
    text-shadow: none !important;
}

/* Scrollbar Ramping Transparan Seluruh Aplikasi (Universal 50 Modul) */
*::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

*::-webkit-scrollbar-track {
    background: transparent !important;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-sidebar-dark) !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid transparent !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan-border) !important;
    box-shadow: 0 0 6px var(--neon-cyan) !important;
}

/* Hilangkan Spinner / Stepper Panah Atas-Bawah Browser pada Seluruh Input Angka */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* [3.2] Batasan Dokumen HTML & Body */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body,
body.app-body,
body.dashboard-body,
body.module-body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    min-height: 100vh;
}

/* ==============================================================================
   [4.0] KOMPONEN 1 & 2: FORM CONTROLS, KOLOM INPUT & SEARCHBOX PENCARIAN
   ============================================================================== */

/* [4.1] Form Group & Label Baku Formulir */
.form-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.2px !important;
}

/* [4.2] Kotak Input, Textarea & Select Standar 50 Modul */


.form-group input,
.form-group textarea,
.form-group select {
    width: 100% !important;
    height: 40px !important;
    padding: 6px 12px !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}

.form-group textarea {
    height: 84px !important;
    resize: none !important;
}

/* Status Hover, Focus & Readonly Kolom Input */
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--color-primary-border) !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.form-group input[readonly],
.form-group select[disabled] {
    background: var(--bg-disabled) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    border-style: dashed !important;
}

/* Proteksi Anti-Background Putih saat Autocomplete / Datalist Terpilih di Electron (Universal 50 Modul) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--modal-input-focus-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--modal-input-focus-bg) inset !important;
    -webkit-text-fill-color: var(--text-white) !important;
    caret-color: var(--neon-cyan) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Proteksi Latar Belakang Opsi Dropdown Seleksi Dark Theme */
select option {
    background-color: var(--bg-card ) !important;
    color: var(--text-white) !important;
    padding: 8px 12px !important;
}

/* [4.3] Input Wrapper dengan Ikon di Kiri (Inline Icons) */
.input-with-icon {
    position: relative !important;
    width: 100% !important;
}

.input-with-icon .field-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.input-with-icon input,
.input-with-icon select {
    padding-left: 38px !important;
}

/* [4.4] KOMPONEN 1: Kotak Pencarian Universal (Search Box Filter) */
.search-box {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
}

.search-box.search-compact {
    max-width: 360px !important;
}

.search-box .search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    color: var(--text-placeholder) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.search-box input {
    width: 100% !important;
    height: 38px !important;
    padding: 6px 14px 6px 38px !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    font-size: 12.5px !important;
    color: var(--text-main) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.search-box input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--focus-ring) !important;
}


/* ==============================================================================
   [5.0] KOMPONEN 3: TOMBOL EKSEKUTIF UNIVERSAL (SIMPAN, BATAL & TAMBAH)
   ============================================================================== */

/* [5.1] Kelas Dasar Seluruh Tombol (.btn) */
.btn {
    border: 1.5px solid transparent !important;
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    cursor: pointer !important;
    color: var(--text-white) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    box-shadow: var(--shadow-subtle) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

/* Efek Hover Mengangkat & Lebih Terang Universal */
.btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.15) !important;
}

.btn:active {
    transform: translateY(0) !important;
    filter: brightness(0.95) !important;
}

/* Tombol Hamburger Buka Sidebar Navbar (Desain Kaca Bersahaja SBS) */
.btn-mobile-toggle {
    display: none;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: var(--bg-glass-white) !important;
    border: 1px solid var(--border-card-glow) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-white) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.btn-mobile-toggle:hover {
    background: var(--modal-nav-btn-hover) !important;
    border-color: var(--neon-cyan) !important;
    color: var(--neon-cyan) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5), 0 0 16px rgba(56, 189, 248, 0.75) !important;
}

/* [5.2] Varian Warna Tombol Eksekutif Toko SBS (Lengkap 50 Modul) */
/* 1. Tombol Utama / Simpan / Cetak PO (Menyala Cincin Safir & Aura Cyan Neon) */
.btn-primary,
.btn-save,
.btn-submit-tambah {
    background: var(--grad-btn-hero) !important;
    color: var(--text-white) !important;
    box-shadow: var(--shadow-btn) !important;
}
.btn-primary:hover,
.btn-save:hover,
.btn-submit-tambah:hover {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5), 0 0 18px rgba(56, 189, 248, 0.75) !important;
}

/* 2. Tombol Setujui / Excel / Bayar (Menyala Cincin Hijau Emerald Neon) */
.btn-success,
.btn-pay,
.btn-excel-export {
    background: var(--grad-green) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}
.btn-success:hover,
.btn-pay:hover,
.btn-excel-export:hover {
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.5), 0 0 18px rgba(74, 222, 128, 0.8) !important;
}

/* 3. Tombol Warning / Hold (Menyala Cincin Emas Amber) */
.btn-warning,
.btn-hold {
    background: var(--grad-amber) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
}
.btn-warning:hover,
.btn-hold:hover {
    border-color: var(--neon-amber) !important;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5), 0 0 18px rgba(251, 191, 36, 0.8) !important;
}

/* 4. Tombol Cetak Surat Jalan / Download Server / Info (Menyala Cincin Cyan Laut) */
.btn-info,
.btn-sync-download {
    background: var(--grad-blue) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}
.btn-info:hover,
.btn-sync-download:hover {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5), 0 0 18px rgba(56, 189, 248, 0.75) !important;
}

/* 5. Tombol Tolak PO / Hapus Sampah (Menyala Cincin Merah Crimson Neon) */
.btn-danger,
.btn-trash,
.btn-delete {
    background: var(--grad-red) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}
.btn-danger:hover,
.btn-trash:hover,
.btn-delete:hover {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5), 0 0 18px rgba(239, 68, 68, 0.8) !important;
}

/* 6. Tombol Tutup Modal / Batal (Menyala Cincin Perak Kaca Kristal) */
.btn-secondary,
.btn-cancel,
.btn-close-modal,
#btnCloseUniversalDetail {
    background: var(--modal-nav-btn-bg) !important;
    border: 1.5px solid var(--border-glass-subtle) !important;
    color: var(--text-tab-muted) !important;
}
.btn-secondary:hover,
.btn-cancel:hover,
.btn-close-modal:hover,
#btnCloseUniversalDetail:hover {
    background: var(--modal-nav-btn-hover) !important;
    color: var(--text-white) !important;
    border-color: var(--text-white) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 18px rgba(255, 255, 255, 0.5) !important;
}

/* 7. Tombol WhatsApp Resmi (Menyala Cincin Hijau WhatsApp Terang) */
#btnKirimEmailOwner,
#btnKirimWaSuratJalan,
.btn-whatsapp {
    border: 1.5px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#btnKirimEmailOwner:hover,
#btnKirimWaSuratJalan:hover,
.btn-whatsapp:hover {
    border-color: #25d366 !important;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.5), 0 0 20px rgba(37, 211, 102, 0.85) !important;
    filter: brightness(1.15) !important;
}

/* ==============================================================================
   [6.0] KOMPONEN 4, 5 & 7: TABEL DATA KACA, TRIO AKSI, BADGES & EMPTY STATE
   ============================================================================== */

/* [6.1] Wadah Tabel Kaca Tembus Pandang Menyatu (Dark Frosted Glass) */
.table-responsive-wrapper {
    background: var(--bg-glass-table) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-radius: var(--radius-card) !important;
    border: 1px solid var(--border-glass-subtle) !important;
    box-shadow: var(--shadow-window-deep) !important;
    overflow-x: auto !important;
    width: 100% !important;
}

.data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 11.5px !important;
    color: var(--text-white) !important;
    text-align: left !important;
}

.data-table thead th {
    background: var(--bg-glass-th) !important;
    color: var(--text-sidebar-nav) !important;
    font-weight: var(--fw-extrabold) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 12px !important;
    border-bottom: 1.5px solid var(--border-glass-subtle) !important;
    white-space: nowrap !important;
}

.data-table tbody td {
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--border-glass-td) !important;
    color: var(--text-white) !important;
    vertical-align: middle !important;
    font-size: 11.5px !important;
}

.data-table tbody tr {
    transition: background-color 0.2s ease !important;
}

.data-table tbody tr:hover {
    background-color: var(--bg-glass-tr-hover) !important;
}

/* Penyesuaian Warna Teks Di Tabel Agar Adem di Mata */
.data-table tbody td a,
.data-table tbody td .text-primary,
.data-table tbody td a.text-primary,
.data-table tbody td [class*="text-primary"] {
    color: var(--text-gold-soft) !important; /* Kuning Emas Adem Pengganti Biru */
    font-weight: 700 !important;
    text-decoration: none !important;
}
.data-table tbody td .text-success { color: var(--neon-green) !important; }
.data-table tbody td .text-danger  { color: var(--color-danger) !important; }
.data-table tbody td .text-muted,
.data-table tbody td small         { color: var(--text-sidebar-muted) !important; }

/* Segitiga Bahaya Peringatan Stok Menyala Merah Neon di Tabel */
.data-table .fa-triangle-exclamation,
.data-table i.fa-triangle-exclamation,
.badge-stock-danger i {
    color: var(--color-alert-neon) !important;
    font-size: 13px !important;
    filter: drop-shadow(0 0 6px rgba(255, 51, 75, 0.9)) !important;
}

/* Sakelar Kapsul Mini Pabrik vs Nett (Harga Beli) */
.th-hpp-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.btn-toggle-group-mini {
    display: inline-flex !important;
    border-radius: var(--radius-pill) !important;
    background: var(--bg-glass-input) !important;
    padding: 2px !important;
    gap: 2px !important;
    border: 1px solid var(--border-glass-input) !important;
}

.btn-mode-pill {
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: transparent !important;
    color: var(--text-sidebar-muted) !important;
    transition: all 0.2s ease !important;
}

/* Status Aktif: Menyala Biru Elektrik SBS */
.btn-mode-pill.active {
    background: var(--color-primary) !important;
    color: var(--text-white) !important;
    box-shadow: var(--shadow-btn) !important;
}

/* [6.2] KOMPONEN 4: Trio Tombol Aksi di Baris Tabel (Detail, Edit, Hapus) */
.btn-row-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
    margin-right: 4px !important;
}

.btn-row-action:hover {
    transform: translateY(-2px) !important;
}

/* Tombol 1: Detail / Lihat (Mata) */
.btn-row-detail,
.btn-table-view {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
}
.btn-row-detail:hover,
.btn-table-view:hover {
    background: var(--color-primary) !important;
    color: var(--text-white) !important;
}

/* Tombol 2: Edit / Ubah (Pensil) */
.btn-row-edit,
.btn-table-edit {
    background: var(--color-warning-soft) !important;
    color: var(--color-warning) !important;
}
.btn-row-edit:hover,
.btn-table-edit:hover {
    background: var(--color-warning) !important;
    color: var(--text-white) !important;
}

/* Tombol 3: Hapus / Sampah (Trash) */
.btn-row-delete,
.btn-table-delete {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger) !important;
}
.btn-row-delete:hover,
.btn-table-delete:hover {
    background: var(--color-danger) !important;
    color: var(--text-white) !important;
}

/* [6.3] KOMPONEN 5: Kapsul Status Bisnis Universal (Status & Sync Pills) */
.status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 7px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

/* 1. Status Lunas / Selesai (Hijau Neon Cuan Menyala) */
.status-active,
.status-lunas,
.status-selesai { 
    background: var(--neon-green-dim) !important; 
    border: 1px solid var(--neon-green-border) !important; 
    color: var(--neon-green) !important; 
    box-shadow: var(--neon-green-glow) !important; 
}

/* 2. Status Tempo / Kredit / Menunggu / Muat (Emas Amber Menyala) */
.status-warning,
.status-tempo,
.status-menunggu { 
    background: var(--neon-amber-soft) !important; 
    border: 1px solid var(--neon-amber-border) !important; 
    color: var(--neon-amber) !important; 
    box-shadow: var(--neon-amber-glow) !important; 
}

/* 3. Status DP / Parsial / Info / Semua (Cyan Safir Neon Menyala) */
.status-info,
.status-dp,
.status-partial { 
    background: var(--neon-cyan-soft) !important; 
    border: 1px solid var(--neon-cyan-border) !important; 
    color: var(--neon-cyan) !important; 
    box-shadow: var(--neon-cyan-glow) !important; 
}

/* 4. Status Batal / Service Berat / Ditolak (Merah Alarm) */
.status-inactive,
.status-batal,
.status-macet,
.status-danger { 
    background: var(--neon-red-dim) !important; 
    border: 1px solid var(--neon-red-border) !important; 
    color: var(--neon-red-text) !important; 
    box-shadow: var(--neon-red-glow) !important; 
}

/* 5. Status Retur Barang / Service Ringan (Ungu Eksekutif) */
.status-retur,
.status-purple { 
    background: var(--neon-purple-soft) !important; 
    border: 1px solid var(--neon-purple-border) !important; 
    color: var(--neon-purple) !important; 
    box-shadow: var(--neon-purple-glow) !important; 
}

/* 6. Status Draft / Belum Diproses (Kaca Redup Halus) */
.status-draft { 
    background: var(--bg-glass-input) !important; 
    border: 1px solid var(--border-sidebar-dark) !important; 
    color: var(--text-sidebar-muted) !important; 
}

/* 7. Status Netral / Lain-lain / Kategori Umum (Putih Kristal Kaca Mewah) */
.status-white,
.badge-white { 
    background: var(--neon-white-soft) !important; 
    border: 1px solid var(--neon-white-border) !important; 
    color: var(--neon-white) !important; 
    box-shadow: var(--neon-white-glow) !important; 
}

/* 8. Status Kirim / Muat / Operasional Utama (Biru Azure Neon Menyala) */
.status-blue,
.status-primary { 
    background: var(--neon-blue-dim) !important; 
    border: 1px solid var(--neon-blue-border) !important; 
    color: var(--neon-blue) !important; 
    box-shadow: var(--neon-blue-glow) !important; 
}

/* Kapsul Sinkronisasi Cloud Offline/Online (Dark Frosted Glass Sultan SBS) */
.sync-pill,
.badge-sync {
    display: flex !important;
    width: fit-content !important;
    margin: 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 3px 11px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 10.5px !important;
    font-weight: var(--fw-black) !important;
    letter-spacing: 0.5px !important;
    border: 1px solid transparent !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
}

/* 1. Kondisi SYNCED: Kaca Transparan Zamrud + Teks Hijau Neon Menyala (Sultan SBS) */
.sync-synced { 
    background: var(--neon-green-soft, rgba(16, 185, 129, 0.15)) !important; 
    border-color: var(--neon-green-border, rgba(16, 185, 129, 0.45)) !important;
    color: var(--neon-green, #10b981) !important; 
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
}

/* 2. Kondisi PENDING: Kaca Transparan Amber + Teks Kuning Waspada Berdenyut */
.sync-pending { 
    background: var(--neon-amber-dim) !important; 
    border-color: var(--neon-amber-border) !important;
    color: var(--neon-amber) !important; 
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.35) !important;
    animation: pulseAlert 1.5s infinite ease-in-out !important; 
}

/* [6.4] KOMPONEN 7: Tampilan Data Kosong & Paginasi Tabel (Empty State) */
.table-empty-state {
    text-align: center !important;
    padding: 40px 16px !important;
    color: var(--text-muted) !important;
}

.table-empty-state i {
    font-size: 42px !important;
    color: var(--text-placeholder) !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.table-empty-state p {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
}

.table-pagination-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 18px !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

/* ==============================================================================
   [7.0] KOMPONEN 6: BINGKAI MODAL FORM POP-UP KACA & TELEMETRI DETAK JANTUNG
   Fungsi: Mengatur visual mewah Dark Navy Frosted Glass, pendaran neon ikon,
           dan animasi detak jantung redup-terang pada simulasi laba/margin.
   Aturan: 100% MURNI KELAS UNIVERSAL (ZERO '#' & ZERO DUPLIKASI!)
   ============================================================================== */

/* [7.1] Tirai Latar Belakang Buram Gelap (Universal 50 Modul) */
.modal-backdrop {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--modal-backdrop-deep) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
    padding: 16px !important;
}

/* [7.2] Jendela Modal Kaca Safir Dark Navy Universal */
.modal-dialog {
    background: var(--modal-bg-glass) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border-radius: var(--radius-window) !important;
    border: 1.5px solid var(--border-glass-subtle) !important;
    box-shadow: var(--shadow-window-deep), inset 0 1px 0 var(--border-card-glow) !important;
}

/* [7.3] Header Modal Kaca Universal & Tombol Tutup */
.modal-header {
    background: var(--modal-surface-glass) !important;
    border-bottom: 1.5px solid var(--modal-border-subtle) !important;
}

.modal-header h3 {
    font-size: 16px !important;
    font-weight: var(--fw-extrabold) !important;
    color: var(--text-white) !important;
    letter-spacing: 0.3px !important;
}

.modal-header h3 i {
    color: var(--neon-cyan) !important;
    filter: drop-shadow(0 0 10px var(--neon-cyan)) !important;
}

.modal-header h3 i.text-danger {
    color: var(--color-danger) !important;
    filter: drop-shadow(0 0 10px var(--color-danger)) !important;
}

/* Tombol Silang [x] Kaca Universal */
.btn-modal-close {
    background: transparent !important;
    border: none !important;
    color: var(--text-sidebar-muted) !important;
    font-size: 26px !important;
    cursor: pointer !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.2s ease !important;
}

.btn-modal-close:hover {
    color: var(--color-danger) !important;
    background: var(--neon-red-soft) !important;
    transform: scale(1.1) !important;
}

/* [7.4] Bilah Tab Kapsul & Status Tab Aktif */
.modal-tabs-nav {
    background: var(--modal-nav-bg) !important;
    border-bottom: 1.5px solid var(--border-sidebar-dark) !important;
}

.modal-tab-btn {
    border: 1px solid var(--modal-nav-btn-hover) !important;
    background: var(--modal-nav-btn-bg) !important;
    color: var(--text-tab-muted) !important;
    border-radius: var(--radius-pill) !important;
    font-size: 12px !important;
    font-weight: var(--fw-bold) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-tab-btn:hover {
    background: var(--modal-nav-btn-hover) !important;
    color: var(--text-white) !important;
    border-color: var(--neon-cyan) !important;
    transform: translateY(-1px) !important;
}

.modal-tab-btn.active {
    background: var(--grad-btn-hero) !important;
    color: var(--text-white) !important;
    border-color: var(--border-card-glow) !important;
    box-shadow: var(--neon-cyan-glow) !important;
}

/* Animasi Muncul Halus Tab Pane */
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tab-pane.active {
    animation: tabFadeIn 0.2s ease !important;
}

/* [7.5] Label, Input Kaca Safir, & Ikon Form Tematik (Universal 50 Modul) */
.modal-dialog .form-group label {
    font-size: 11.5px !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--text-tab-muted) !important; /* Titanium Silver Slate 300 #cbd5e1 */
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    margin-bottom: 3px !important;
}

.modal-dialog .required-mark {
    color: var(--text-mark-required) !important;
}

.modal-dialog .form-group input,
.modal-dialog .form-group select,
.modal-dialog .form-group textarea,
.modal-dialog .input-compact {
    background: var(--modal-input-bg) !important;
    border: 1.5px solid var(--modal-input-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-white) !important;
    font-size: 12.5px !important;
    font-weight: var(--fw-semibold) !important;
    padding: 6px 12px !important;
    outline: none !important;
    color-scheme: dark !important;
    transition: all 0.2s ease !important;
}

.modal-dialog input::placeholder {
    color: var(--text-placeholder) !important;
}

.modal-dialog input:focus,
.modal-dialog select:focus {
    background: var(--modal-input-focus-bg) !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: var(--neon-cyan-glow) !important;
}

/* Kotak Readonly (Kode Supplier): Putih Bersih Monospasi (Bebas Kuning) */
.modal-dialog input[readonly]:not([data-status]) {
    background: var(--modal-readonly-bg) !important;
    color: var(--text-white) !important;
    font-family: var(--font-mono) !important;
    font-weight: var(--fw-bold) !important;
    border-style: dashed !important;
    border-color: var(--modal-border-subtle) !important;
}

.modal-dialog select option {
    background: var(--bg-sidebar-dark) !important;
    color: var(--text-white) !important;
}

/* 1. Standar Seluruh Ikon Input Modal: Cyan Safir Halus Senada Judul */
.modal-dialog .input-with-icon .field-icon {
    font-size: 13px !important;
    color: var(--neon-cyan) !important;
    opacity: 0.85 !important;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.4)) !important;
}
.modal-dialog .input-with-icon input,
.modal-dialog .input-with-icon select {
    padding-left: 36px !important;
}

/* 2. PENGECUALIAN SAKRAL: Status Operasional (Active = Hijau Neon, Inactive = Merah Alarm) */
.modal-dialog .input-with-icon .field-icon.icon-status,
.modal-dialog .input-with-icon .field-icon.text-success,
.modal-dialog .input-with-icon .field-icon.text-green {
    color: var(--neon-green) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px var(--neon-green)) !important;
}

.modal-dialog .input-with-icon .field-icon.text-danger,
.modal-dialog .input-with-icon .field-icon.text-red {
    color: var(--color-danger) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px var(--color-danger)) !important;
}

/* ==============================================================================
   PALET IKON FORMULIR TEMATIK NEON (100% MURNI KELAS UNIVERSAL 50 MODUL SBS)
   ============================================================================== */
/* 1. Identifikasi Master & Barcode */
.field-icon.icon-code         { color: var(--text-gold-soft) !important; filter: drop-shadow(0 0 6px var(--text-gold-soft)) !important; }
.field-icon.icon-barcode      { color: var(--neon-cyan) !important; filter: drop-shadow(0 0 5px var(--neon-cyan)) !important; }
.field-icon.icon-category     { color: var(--neon-cyan) !important; filter: drop-shadow(0 0 6px var(--neon-cyan)) !important; }
.field-icon.icon-brand        { color: var(--neon-purple) !important; filter: drop-shadow(0 0 6px var(--neon-purple)) !important; }

/* 2. Kuantitas, Satuan & Stok Fisik */
.field-icon.icon-qty,
.field-icon.icon-stock,
.field-icon.icon-unit         { color: var(--neon-cyan) !important; filter: drop-shadow(0 0 6px var(--neon-cyan)) !important; }

/* 3. Harga, Finansial & Kasir Cuan */
.field-icon.icon-price,
.field-icon.icon-money,
.field-icon.icon-cost,
.field-icon.icon-cash         { color: var(--neon-green) !important; filter: drop-shadow(0 0 6px var(--neon-green)) !important; }

/* 4. Diskon, Pajak & Margin */
.field-icon.icon-discount,
.field-icon.icon-percent,
.field-icon.icon-tax          { color: var(--neon-orange) !important; filter: drop-shadow(0 0 6px var(--neon-orange)) !important; }

/* 5. Relasi Bisnis (Supplier, Pelanggan, User) */
.field-icon.icon-supplier,
.field-icon.icon-user         { color: var(--neon-teal) !important; filter: drop-shadow(0 0 6px var(--neon-teal)) !important; }
.field-icon.icon-customer,
.field-icon.icon-member,
.field-icon.icon-contractor   { color: var(--neon-purple) !important; filter: drop-shadow(0 0 6px var(--neon-purple)) !important; }

/* 6. Gedung, Gudang & Lokasi */
.field-icon.icon-warehouse,
.field-icon.icon-building     { color: var(--neon-amber) !important; filter: drop-shadow(0 0 6px var(--neon-amber)) !important; }
.field-icon.icon-address,
.field-icon.icon-location     { color: var(--neon-teal) !important; filter: drop-shadow(0 0 5px var(--neon-teal)) !important; }

/* 7. Logistik, Truk & Ekspedisi Pengiriman */
.field-icon.icon-truck,
.field-icon.icon-driver,
.field-icon.icon-shipping     { color: var(--neon-teal) !important; filter: drop-shadow(0 0 7px var(--neon-teal)) !important; }

/* 8. Waktu, Tanggal & Jatuh Tempo */
.field-icon.icon-date,
.field-icon.icon-calendar,
.field-icon.icon-time,
.field-icon.icon-tempo        { color: var(--neon-amber) !important; filter: drop-shadow(0 0 6px var(--neon-amber)) !important; }

/* 9. Komunikasi (WhatsApp & Telepon) */
.field-icon.icon-phone,
.field-icon.icon-whatsapp     { color: var(--neon-green) !important; filter: drop-shadow(0 0 7px var(--neon-green)) !important; }

/* 10. Catatan, Deskripsi & Lampiran */
.field-icon.icon-notes,
.field-icon.icon-desc         { color: var(--text-label-form) !important; filter: drop-shadow(0 0 5px var(--text-label-form)) !important; }

/* 11. Status Operasional & Keamanan */
.field-icon.icon-status,
.field-icon.icon-active       { color: var(--neon-green) !important; filter: drop-shadow(0 0 8px var(--neon-green)) !important; }
.field-icon.icon-lock,
.field-icon.icon-shield       { color: var(--neon-amber) !important; filter: drop-shadow(0 0 6px var(--neon-amber)) !important; }

/* 12. Pendaran Ikon Khusus Parameter Kelas Form Modal (Lengkap Bebas Typo) */
.modal-dialog .field-icon.text-primary,
.modal-dialog .field-icon.text-cyan    { color: var(--neon-cyan) !important; filter: drop-shadow(0 0 6px var(--neon-cyan)) !important; }
.modal-dialog .field-icon.text-purple  { color: var(--neon-purple) !important; filter: drop-shadow(0 0 6px var(--neon-purple)) !important; }
.modal-dialog .field-icon.text-teal    { color: var(--neon-teal) !important; filter: drop-shadow(0 0 6px var(--neon-teal)) !important; }
.modal-dialog .field-icon.text-warning,
.modal-dialog .field-icon.text-amber   { color: var(--neon-amber) !important; filter: drop-shadow(0 0 6px var(--neon-amber)) !important; }
.modal-dialog .field-icon.text-orange  { color: var(--neon-orange) !important; filter: drop-shadow(0 0 6px var(--neon-orange)) !important; }
.modal-dialog .field-icon.text-success,
.modal-dialog .field-icon.text-green   { color: var(--neon-green) !important; filter: drop-shadow(0 0 8px var(--neon-green)) !important; }
.modal-dialog .field-icon.text-danger,
.modal-dialog .field-icon.text-red     { color: var(--color-danger) !important; filter: drop-shadow(0 0 6px var(--color-danger)) !important; }
.modal-dialog .field-icon.text-gold    { color: var(--text-gold-soft) !important; filter: drop-shadow(0 0 6px var(--text-gold-soft)) !important; }

/* [7.6] Tombol Pintas Tambah (+) Terpusat Safir Cyan SBS (Universal 50 Modul) */
.btn-add-quick,
button[data-ref-target] {
    background: var(--neon-cyan-soft) !important;
    border: 1.5px solid var(--neon-cyan-border) !important;
    color: var(--neon-cyan) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}

.btn-add-quick:hover,
button[data-ref-target]:hover {
    background: var(--color-primary-hover) !important;
    color: var(--text-white) !important;
    box-shadow: var(--neon-cyan-glow) !important;
    transform: scale(1.05) !important;
}

/* [7.7] Kartu Sub-Unit Garis Putus & Frame Foto Produk (Universal 50 Modul) */
.sub-card-dashed {
    background: var(--modal-card-dashed-bg) !important;
    border: 1.5px dashed var(--modal-border-card) !important;
    border-radius: var(--radius-lg) !important;
}

.sub-card-title {
    font-size: 12.5px !important;
    font-weight: var(--fw-bold) !important;
    color: var(--text-light-body) !important; /* Silver Perak Titanium Slate 200 #e2e8f0 */
    text-transform: none !important; /* Proper Case */
    letter-spacing: 0.3px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--modal-border-subtle) !important;
}

/* Pemanis Ikon Sub-Judul: Cyan Safir Halus */
.sub-card-title i {
    color: var(--neon-cyan) !important;
    margin-right: 6px !important;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.4)) !important;
}
.unit-primary   { color: var(--neon-cyan) !important; }
.unit-secondary { color: var(--neon-purple) !important; }

/* Sorot Harga Jual Hijau Neon (Murni Kelas) */
input[name*="selling_price"],
.input-selling-price {
    color: var(--neon-green) !important;
    font-size: 13.5px !important;
    font-weight: var(--fw-extrabold) !important;
    border-color: var(--neon-green-soft) !important;
}

.image-preview-card {
    border-radius: var(--radius-lg) !important;
    background: var(--modal-card-dashed-bg) !important;
    border: 2px dashed var(--modal-input-border) !important;
    transition: all 0.25s ease !important;
}
.image-preview-card:hover {
    border-color: var(--neon-cyan) !important;
    background: var(--neon-cyan-soft) !important;
    box-shadow: var(--neon-cyan-glow) !important;
}
.image-preview-card img,
.image-preview-img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
.image-preview-placeholder i {
    font-size: 44px !important;
    color: var(--neon-cyan) !important;
    filter: drop-shadow(0 0 10px var(--neon-cyan)) !important;
}
.upload-text-main { font-size: 13px !important; font-weight: var(--fw-bold) !important; color: var(--text-white) !important; margin-top: 6px !important; }
.upload-text-sub  { font-size: 11px !important; color: var(--text-placeholder) !important; }

/* [7.8] Titik Lampu Indikator Margin Berdenyut Jantung */
@keyframes ecgHeartbeat {
    0%   { transform: scale(1); opacity: 0.85; }
    14%  { transform: scale(1.35); opacity: 1; filter: drop-shadow(0 0 8px currentColor); }
    28%  { transform: scale(1); opacity: 0.85; }
    42%  { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
    70%  { transform: scale(1); opacity: 0.85; }
    100% { transform: scale(1); opacity: 0.85; }
}

.margin-dot {
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: var(--radius-pill) !important;
    margin-right: 5px !important;
    animation: ecgHeartbeat 1.8s infinite ease-in-out !important;
}
.dot-sangat-aman { background: var(--neon-green) !important; color: var(--neon-green) !important; }
.dot-aman        { background: var(--neon-teal) !important; color: var(--neon-teal) !important; }
.dot-waspada     { background: var(--neon-amber) !important; color: var(--neon-amber) !important; }
.dot-kritis      { background: var(--neon-orange) !important; color: var(--neon-orange) !important; }
.dot-minus       { background: var(--neon-red) !important; color: var(--neon-red) !important; animation-duration: 1.1s !important; }

/* [7.9] Tabel Simulasi Harga & Animasi Border Redup-Terang (Universal 50 Modul) */
.table-sim-compact {
    background: var(--modal-table-sim-bg) !important;
    border: 1px solid var(--border-glass-subtle) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}
.table-sim-compact .data-table thead th {
    background: var(--modal-table-th-bg) !important;
    color: var(--text-sidebar-nav) !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    border-bottom: 1.5px solid var(--modal-border-subtle) !important;
}
.table-sim-compact .data-table tbody td {
    padding: 5px 6px !important;
    border-bottom: 1px solid var(--modal-table-td-border) !important;
    background: transparent !important;
}
.table-sim-compact input.input-compact:not([data-status]) {
    height: 32px !important;
    font-size: 11.5px !important;
    border-radius: var(--radius-sm) !important;
    text-align: right !important;
    font-weight: var(--fw-bold) !important;
    color: var(--text-white) !important;
    background: var(--modal-table-th-bg) !important;
    border: 1px solid var(--modal-nav-btn-hover) !important;
}

/* ANIMASI BORDER DETAK JANTUNG REDUP-TERANG PER STATUS (100% MURNI KELAS) */
/* 1. Sangat Aman (> 20%): Hijau Neon Cuan */
@keyframes ecgGreenGlow {
    0%, 100% {
        border-color: var(--neon-green-soft) !important;
        background: var(--neon-green-dim) !important;
        box-shadow: 0 0 2px var(--neon-green-soft) !important;
        transform: scale(1) !important;
    }
    18% {
        border-color: var(--neon-green) !important;
        background: var(--neon-green-soft) !important;
        box-shadow: var(--neon-green-glow), inset 0 0 6px var(--neon-green-soft) !important;
        transform: scale(1.02) !important;
    }
    36% {
        border-color: var(--neon-green-soft) !important;
        background: var(--neon-green-soft) !important;
        box-shadow: 0 0 4px var(--neon-green-soft) !important;
        transform: scale(1) !important;
    }
    54% {
        border-color: var(--neon-green) !important;
        background: var(--neon-green-soft) !important;
        box-shadow: var(--neon-green-glow), inset 0 0 8px var(--neon-green-soft) !important;
        transform: scale(1.025) !important;
    }
    72% {
        border-color: var(--neon-green-soft) !important;
        background: var(--neon-green-dim) !important;
        transform: scale(1) !important;
    }
}
.table-sim-compact input[data-status="sangat-aman"] {
    color: var(--neon-green) !important; font-weight: var(--fw-extrabold) !important; border: 2px solid var(--neon-green) !important;
    border-style: solid !important; animation: ecgGreenGlow 2.2s infinite ease-in-out !important;
}

/* 2. Aman (15% - 20%): Toska Segar */
@keyframes ecgTealGlow {
    0%, 100% {
        border-color: var(--neon-teal-soft) !important;
        background: var(--neon-teal-dim) !important;
        box-shadow: 0 0 2px var(--neon-teal-soft) !important;
        transform: scale(1) !important;
    }
    18% {
        border-color: var(--neon-teal) !important;
        background: var(--neon-teal-soft) !important;
        box-shadow: var(--neon-teal-glow), inset 0 0 6px var(--neon-teal-soft) !important;
        transform: scale(1.02) !important;
    }
    36% {
        border-color: var(--neon-teal-soft) !important;
        background: var(--neon-teal-soft) !important;
        box-shadow: 0 0 4px var(--neon-teal-soft) !important;
        transform: scale(1) !important;
    }
    54% {
        border-color: var(--neon-teal) !important;
        background: var(--neon-teal-soft) !important;
        box-shadow: var(--neon-teal-glow), inset 0 0 8px var(--neon-teal-soft) !important;
        transform: scale(1.025) !important;
    }
    72% {
        border-color: var(--neon-teal-soft) !important;
        background: var(--neon-teal-dim) !important;
        transform: scale(1) !important;
    }
}
.table-sim-compact input[data-status="aman"] {
    color: var(--neon-teal) !important; font-weight: var(--fw-extrabold) !important; border: 2px solid var(--neon-teal) !important;
    border-style: solid !important; animation: ecgTealGlow 2.4s infinite ease-in-out !important;
}

/* 3. Waspada (10% - 15%): Amber Kuning */
@keyframes ecgAmberGlow {
    0%, 100% {
        border-color: var(--neon-amber-soft) !important;
        background: var(--neon-amber-dim) !important;
        box-shadow: 0 0 2px var(--neon-amber-soft) !important;
        transform: scale(1) !important;
    }
    18% {
        border-color: var(--neon-amber) !important;
        background: var(--neon-amber-soft) !important;
        box-shadow: var(--neon-amber-glow), inset 0 0 6px var(--neon-amber-soft) !important;
        transform: scale(1.02) !important;
    }
    36% {
        border-color: var(--neon-amber-soft) !important;
        background: var(--neon-amber-soft) !important;
        box-shadow: 0 0 4px var(--neon-amber-soft) !important;
        transform: scale(1) !important;
    }
    54% {
        border-color: var(--neon-amber) !important;
        background: var(--neon-amber-soft) !important;
        box-shadow: var(--neon-amber-glow), inset 0 0 8px var(--neon-amber-soft) !important;
        transform: scale(1.025) !important;
    }
    72% {
        border-color: var(--neon-amber-soft) !important;
        background: var(--neon-amber-dim) !important;
        transform: scale(1) !important;
    }
}
.table-sim-compact input[data-status="waspada"] {
    color: var(--neon-amber) !important; font-weight: var(--fw-extrabold) !important; border: 2px solid var(--neon-amber) !important;
    border-style: solid !important; animation: ecgAmberGlow 2.0s infinite ease-in-out !important;
}

/* 4. Kritis (0% - 10%): Oranye Waspada */
@keyframes ecgOrangeGlow {
    0%, 100% {
        border-color: var(--neon-orange-soft) !important;
        background: var(--neon-orange-dim) !important;
        box-shadow: 0 0 2px var(--neon-orange-soft) !important;
        transform: scale(1) !important;
    }
    18% {
        border-color: var(--neon-orange) !important;
        background: var(--neon-orange-soft) !important;
        box-shadow: var(--neon-orange-glow), inset 0 0 6px var(--neon-orange-soft) !important;
        transform: scale(1.02) !important;
    }
    36% {
        border-color: var(--neon-orange-soft) !important;
        background: var(--neon-orange-soft) !important;
        box-shadow: 0 0 4px var(--neon-orange-soft) !important;
        transform: scale(1) !important;
    }
    54% {
        border-color: var(--neon-orange) !important;
        background: var(--neon-orange-soft) !important;
        box-shadow: var(--neon-orange-glow), inset 0 0 8px var(--neon-orange-soft) !important;
        transform: scale(1.025) !important;
    }
    72% {
        border-color: var(--neon-orange-soft) !important;
        background: var(--neon-orange-dim) !important;
        transform: scale(1) !important;
    }
}
.table-sim-compact input[data-status="kritis"] {
    color: var(--neon-orange) !important; font-weight: var(--fw-extrabold) !important; border: 2px solid var(--neon-orange) !important;
    border-style: solid !important; animation: ecgOrangeGlow 1.6s infinite ease-in-out !important;
}

/* 5. Minus / Rugi (<= 0%): Merah Alarm Bahaya Nombok! */
@keyframes ecgRedAlarm {
    0%, 100% {
        border-color: var(--neon-red-soft) !important;
        background: var(--neon-red-dim) !important;
        box-shadow: 0 0 3px var(--neon-red-soft) !important;
        transform: scale(1) !important;
    }
    15% {
        border-color: var(--neon-red) !important;
        background: var(--neon-red-soft) !important;
        box-shadow: var(--neon-red-glow), inset 0 0 8px var(--neon-red-soft) !important;
        transform: scale(1.025) !important;
    }
    30% {
        border-color: var(--neon-red-soft) !important;
        background: var(--neon-red-soft) !important;
        transform: scale(1) !important;
    }
    45% {
        border-color: var(--neon-red) !important;
        background: var(--neon-red-soft) !important;
        box-shadow: var(--neon-red-glow), inset 0 0 10px var(--neon-red-soft) !important;
        transform: scale(1.03) !important;
    }
    60% {
        border-color: var(--neon-red-soft) !important;
        background: var(--neon-red-dim) !important;
        transform: scale(1) !important;
    }
}
.table-sim-compact input[data-status="minus"] {
    color: var(--neon-red-text) !important; font-weight: var(--fw-extrabold) !important; border: 2px solid var(--neon-red) !important;
    border-style: solid !important; animation: ecgRedAlarm 1.1s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

/* [7.10] Baris Kaki Modal Kaca Form (Universal 50 Modul) */
.modal-footer {
    background: var(--modal-surface-glass) !important;
    padding: 12px 24px !important;
    border-top: 1.5px solid var(--modal-border-subtle) !important;
}
/* ==============================================================================
   [7.11] VISUAL KACA & IDENTITAS MODAL DETAIL UNIVERSAL (STANDAR BAKU 50 MODUL)
   Fungsi: Mengatur latar Luminous Safir Glass, kartu kaca transparan, teks
           menyala (Emas, Cyan, Hijau), dan tombol close [x] tematik neon.
   Aturan: 100% MURNI KELAS UNIVERSAL (ZERO '#' & ZERO DUPLIKASI!)
   ============================================================================== */

/* Jendela Modal Detail Safir Luminous Glass (Universal Seluruh 50 Modul) */
.modal-dialog-fullscreen,
.modal-dialog-detail {
    background: var(--modal-bg-glass) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1.5px solid var(--border-glass-subtle) !important;
    box-shadow: var(--shadow-window-deep), inset 0 1px 0 var(--border-card-glow) !important;
}

/* Header Modal Detail & Ikon Logo */
.modal-header-saas {
    background: var(--modal-surface-glass) !important;
    border-bottom: 1.5px solid var(--modal-border-subtle) !important;
}

.brand-icon-mewah {
    background: var(--grad-btn-hero) !important;
    color: var(--text-white) !important;
    border: 1px solid var(--border-card-glow) !important;
    box-shadow: var(--shadow-btn) !important;
}

/* Judul Modal Jumbo & Berwibawa */
.modal-product-title {
    font-size: 21px !important;
    font-weight: var(--fw-black) !important;
    color: var(--text-white) !important;
    letter-spacing: 0.4px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Badge Status PPN & Non PPN Menyala */
.badge-ppn-ya,
.tax-ppn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 11px !important;
    font-weight: var(--fw-black) !important;
    letter-spacing: 0.5px !important;
    background: var(--neon-amber-soft) !important;
    color: var(--neon-amber) !important;
    border: 1.5px solid var(--neon-amber-border) !important;
    box-shadow: var(--neon-amber-glow) !important;
}

.badge-ppn-tidak,
.tax-non-ppn {
    background: var(--neon-cyan-soft) !important;
    color: var(--neon-cyan) !important;
    border: 1.5px solid var(--neon-cyan-border) !important;
    box-shadow: var(--neon-cyan-glow) !important;
}

/* Baris Metadata (Kode, Gudang, Tanggal) Kapsul Horisontal Elegan */
.header-meta-sub {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 6px !important;
}

.header-meta-sub > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--modal-nav-btn-bg) !important;
    border: 1px solid var(--border-glass-subtle) !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 11.5px !important;
    color: var(--text-tab-muted) !important;
    white-space: nowrap !important;
}

/* Teks Nilai (Kode, Andre, Semen): Putih Bersih Seragam */
.header-meta-sub strong {
    color: var(--text-white) !important;
    font-weight: var(--fw-bold) !important;
}

/* 1. Penyeragaman Seluruh Ikon Header (#, User, Kategori, Jam): Cyan Safir Elegan */
.header-meta-sub i {
    color: var(--neon-cyan) !important;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.35)) !important;
    font-size: 11.5px !important;
}

/* 2. Teks Tanggal Update: Putih Bersih Seragam (Matikan Lampu Silau) */
.header-meta-sub span:has(.fa-clock) span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--text-white) !important;
    font-weight: var(--fw-semibold) !important;
    white-space: nowrap !important;
    text-shadow: none !important;
}

.header-meta-sub span:has(.fa-clock) span br {
    display: inline !important;
    content: " \00a0•\00a0 " !important;
}

/* Area Isi Modal Detail */
.saas-body-bg {
    background: transparent !important;
}

/* Kartu Telemetri KPI Kaca Dark Frosted Universal */
.kpi-card-saas {
    background: var(--bg-glass-card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass-subtle) !important;
    box-shadow: var(--shadow-subtle) !important;
}

.kpi-card-saas:hover {
    transform: translateY(-2px) !important;
    border-color: var(--border-card-glow) !important;
}

/* Garis Batas Sisi Kiri Kartu KPI */
.card-border-blue   { border-left: 4px solid var(--neon-cyan) !important; }
.card-border-purple { border-left: 4px solid var(--neon-purple) !important; }
.card-border-teal   { border-left: 4px solid var(--neon-teal) !important; }
.card-border-rose   { border-left: 4px solid var(--color-danger) !important; }
.card-border-amber  { border-left: 4px solid var(--neon-amber) !important; }
.card-border-green  { border-left: 4px solid var(--neon-green) !important; }

/* Warna Ikon KPI */
.bg-gradient-blue   { background: var(--grad-blue) !important; }
.bg-gradient-purple { background: var(--grad-purple) !important; }
.bg-gradient-teal   { background: var(--grad-teal) !important; }
.bg-gradient-rose   { background: var(--grad-red) !important; }
.bg-gradient-amber  { background: var(--grad-amber) !important; }
.bg-gradient-green  { background: var(--grad-green) !important; }

.kpi-icon-saas i {
    color: var(--text-white) !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}

.kpi-title {
    color: var(--border-color) !important;
}

/* ==============================================================================
   STANDAR INTERNASIONAL EKSEKUTIF: ANGKA MONOLITIK PUTIH BERSIH BRANKAS SWISS
   ============================================================================== */
.kpi-card-saas .kpi-num { 
    color: var(--text-white) !important; 
    font-weight: var(--fw-black) !important;
    letter-spacing: -0.5px !important;
    text-shadow: none !important; /* Matikan Lampu Kelap-Kelip */
}

/* Kompartemen Spesifikasi Kaca Universal */
.saas-card {
    background: var(--modal-surface-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-glass-subtle) !important;
    box-shadow: var(--shadow-subtle) !important;
}

.card-header-clean {
    background: var(--modal-table-th-bg) !important;
    border-bottom: 1.5px solid var(--modal-border-subtle) !important;
}

.card-header-clean h5 {
    color: var(--text-white) !important;
    font-weight: var(--fw-extrabold) !important;
    letter-spacing: 0.4px !important;
}

/* Label Spesifikasi Modal Detail: Titanium Silver Slate 300 #cbd5e1 */
.kv-label {
    color: var(--text-tab-muted) !important;
    font-weight: var(--fw-semibold) !important;
}

.kv-value {
    color: var(--text-white) !important;
}

/* Ikon Judul Kartu Spesifikasi */
.card-header-clean h5 i.fa-tags             { color: var(--neon-cyan) !important; filter: drop-shadow(0 0 8px var(--neon-cyan)) !important; }
.card-header-clean h5 i.fa-calculator       { color: var(--neon-amber) !important; filter: drop-shadow(0 0 8px var(--neon-amber)) !important; }
.card-header-clean h5 i.fa-money-bill-wave  { color: var(--neon-green) !important; filter: drop-shadow(0 0 8px var(--neon-green)) !important; }
.card-header-clean h5 i.fa-user             { color: var(--neon-cyan) !important; filter: drop-shadow(0 0 8px var(--neon-cyan)) !important; }
.card-header-clean h5 i.fa-truck-ramp-box   { color: var(--neon-green) !important; filter: drop-shadow(0 0 8px var(--neon-green)) !important; }
.card-header-clean h5 i.fa-building-columns { color: var(--neon-cyan) !important; filter: drop-shadow(0 0 8px var(--neon-cyan)) !important; }
.card-header-clean h5 i.fa-shield-halved    { color: var(--neon-cyan) !important; filter: drop-shadow(0 0 8px var(--neon-cyan)) !important; }

/* Pratinjau Foto Produk */
.mini-photo-container {
    background: var(--modal-card-dashed-bg) !important;
    border: 1.5px dashed var(--modal-input-border) !important;
}
.mini-photo-placeholder {
    color: var(--text-placeholder) !important;
}
.mini-photo-placeholder i {
    color: var(--neon-cyan) !important;
    filter: drop-shadow(0 0 8px var(--neon-cyan)) !important;
}

/* List Key-Value Teks Terang */
.detail-kv-item {
    border-bottom: 1px dashed var(--border-glass-td) !important;
}

/* Penyeragaman Ikon Baris Data: Biru Langit Lembut Elegan (Quiet Luxury Standard) */
.kv-label i {
    color: var(--neon-cyan) !important;
    opacity: 0.85 !important;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.35)) !important;
    font-size: 12px !important;
}
/* Warna Teks Nilai (KV Value) */
.kv-value.text-primary { color: var(--neon-cyan) !important; }
.kv-value.text-warning { color: var(--neon-amber) !important; }
.kv-value.text-cyan    { color: var(--neon-cyan) !important; }

/* Tabel di Dalam Modal Detail (Universal) */
.modal-dialog .data-table thead th {
    background: var(--modal-table-th-bg) !important;
    color: var(--text-sidebar-nav) !important;
    border-bottom: 1.5px solid var(--modal-border-subtle) !important;
}

.modal-dialog .data-table tbody td {
    background: transparent !important;
    color: var(--text-white) !important;
    border-bottom: 1px solid var(--modal-table-td-border) !important;
}

.modal-dialog .data-table tbody td.text-success,
.modal-dialog .data-table tbody td .text-success {
    color: var(--neon-green) !important;
    font-weight: var(--fw-black) !important;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.45) !important;
}

.modal-dialog .data-table tbody td.text-warning,
.modal-dialog .data-table tbody td .text-warning {
    color: var(--neon-amber) !important;
    font-weight: var(--fw-black) !important;
}

.modal-dialog .data-table tbody td.text-danger,
.modal-dialog .data-table tbody td .text-danger {
    color: var(--color-danger) !important;
    font-weight: var(--fw-black) !important;
}

/* Kapsul Satuan di Baris Tabel */
.modal-dialog .badge-unit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 11px !important;
    font-weight: var(--fw-black) !important;
    background: var(--neon-cyan-soft) !important;
    color: var(--neon-cyan) !important;
    border: 1.5px solid var(--neon-cyan-border) !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}

.modal-dialog .badge-unit.has-qty-tier {
    background: var(--neon-amber-soft) !important;
    color: var(--neon-amber) !important;
    border: 1.5px solid var(--neon-amber-border) !important;
    box-shadow: var(--neon-amber-glow) !important;
}

/* Pil Diskon Kuantiti Bertingkat (Urutan Kapsul Universal Tanpa Pagar) */
.pill-tier-qty {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 11px !important;
    margin-right: 6px !important;
    margin-bottom: 4px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.pill-tier-qty:nth-child(1) { background: var(--neon-cyan-soft) !important; border: 1.5px solid var(--neon-cyan-border) !important; color: var(--neon-cyan) !important; }
.pill-tier-qty:nth-child(2) { background: var(--neon-amber-soft) !important; border: 1.5px solid var(--neon-amber-border) !important; color: var(--neon-amber) !important; }
.pill-tier-qty:nth-child(3) { background: var(--neon-purple-soft) !important; border: 1.5px solid var(--neon-purple-border) !important; color: var(--neon-purple) !important; }

.pill-tier-qty.is-active {
    box-shadow: var(--neon-cyan-glow) !important;
    transform: scale(1.04) !important;
    filter: brightness(1.2) !important;
}

/* Kaki Modal Detail Bersih */
.modal-footer-clean {
    background: var(--modal-surface-glass) !important;
    border-top: 1.5px solid var(--modal-border-subtle) !important;
}

/* ==============================================================================
   [7.12] KELAS UNIVERSAL DIALOG SEDANG & KAPSUL IDENTITAS BANK/KAS
   ============================================================================== */
/* Jendela Dialog Sedang / Kompak (Maks 680px Proporsional) */
.modal-dialog-compact,
.modal-dialog-form {
    width: 95vw !important;
    max-width: 680px !important;
}

/* Badge Status Kapsul Transaksi Safir Glass (Universal 7 Status) */
.status-pill.status-active,
.status-pill.status-closed {
    background: var(--neon-green-dim) !important;
    color: var(--neon-green) !important;
    border: 1px solid var(--neon-green-border) !important;
    box-shadow: var(--neon-green-glow) !important;
}

.status-pill.status-approved {
    background: var(--neon-purple-soft) !important;
    color: var(--neon-purple) !important;
    border: 1px solid var(--neon-purple-border) !important;
    box-shadow: var(--neon-purple-glow) !important;
}

.status-pill.status-waiting {
    background: var(--neon-orange-soft) !important;
    color: var(--neon-orange) !important;
    border: 1px solid var(--neon-orange-soft) !important;
    box-shadow: var(--neon-orange-glow) !important;
}

.status-pill.status-pending {
    background: var(--neon-amber-soft) !important;
    color: var(--neon-amber) !important;
    border: 1px solid var(--neon-amber-border) !important;
    box-shadow: var(--neon-amber-glow) !important;
}

.status-pill.status-partial {
    background: var(--neon-cyan-soft) !important;
    color: var(--neon-cyan) !important;
    border: 1px solid var(--neon-cyan-border) !important;
    box-shadow: var(--neon-cyan-glow) !important;
}

.status-pill.status-rejected,
.status-pill.status-inactive {
    background: var(--neon-red-dim) !important;
    color: var(--neon-red-text) !important;
    border: 1px solid var(--neon-red-border) !important;
    box-shadow: var(--neon-red-glow) !important;
}

.status-pill.status-cancelled {
    background: var(--bg-glass-input) !important;
    color: var(--text-sidebar-muted) !important;
    border: 1px solid var(--border-sidebar-dark) !important;
}

/* Kapsul Kas Fisik & Bank di Kolom Tabel */
.badge-cash-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--neon-green-dim) !important;
    color: var(--neon-green) !important;
    border: 1px solid var(--neon-green-border) !important;
    padding: 3px 9px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.badge-bank-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--neon-cyan) !important;
    font-size: 11.5px !important;
}

.badge-bank-pill strong {
    color: var(--text-white) !important;
}

.badge-bank-pill code {
    background: var(--modal-readonly-bg) !important;
    border: 1px solid var(--border-glass-input) !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-xs) !important;
    color: var(--text-white) !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.5px !important;
}

/* ==============================================================================
   [7.13] UTILITAS WARNA TEKS & BADGE KONTEN UNIVERSAL (MURNI TANPA INLINE STYLE)
   ============================================================================== */

   /* Utilitas Format Teks (Tambahkan di bawah daftar warna) */
.font-italic,
.text-italic {font-style: italic !important;}

.text-underline { text-decoration: underline !important;}

/* 1. Palet Warna Fisik & Alias Neon (Bebas Salah Ketik) */
.text-cyan,
.text-neon-cyan     { color: var(--neon-cyan) !important; }

.text-teal,
.text-neon-teal     { color: var(--neon-teal) !important; }

.text-green,
.text-neon-green    { color: var(--neon-green) !important; }

.text-amber,
.text-neon-amber    { color: var(--neon-amber) !important; }

.text-orange,
.text-neon-orange   { color: var(--neon-orange) !important; }

.text-purple,
.text-neon-purple   { color: var(--neon-purple) !important; }

.text-red,
.text-neon-red      { color: var(--color-danger) !important; }

.text-gold,
.text-gold-soft     { color: var(--text-gold-soft) !important; }

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

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

/* 2. Palet Status Bisnis ERP Terpusat */
.text-primary       { color: var(--text-primary) !important; }  /* Biru/Cyan Sorotan */
.text-success       { color: var(--text-success) !important; }  /* Lunas / Masuk / Aman */
.text-danger        { color: var(--text-danger) !important; }   /* Jatuh Tempo / Batal */
.text-warning       { color: var(--text-warning) !important; }  /* Pending / Waspada */
.text-info          { color: var(--text-info) !important; }     /* Info Distribusi */

/* 3. Teks Keterangan Sekunder di Latar Kaca/Gelap (Anti-Blackout) */
.text-muted-light   { color: var(--text-tab-muted) !important; }

/* Ikon Hijau Neon di Dalam Kolom Input Modal */
.modal-dialog .field-icon.text-green { 
    color: var(--neon-green) !important; 
    filter: drop-shadow(0 0 8px var(--neon-green)) !important; 
}

/* Kunci warna teks pada angka contekan stok (mengalahkan warna emas default) */
.header-meta-sub strong.text-cyan    { color: var(--neon-cyan) !important; }
.header-meta-sub strong.text-purple  { color: var(--neon-purple) !important; }
.header-meta-sub strong.text-amber   { color: var(--neon-amber) !important; }
.header-meta-sub strong.text-green   { color: var(--neon-green) !important; }
.header-meta-sub strong.text-teal    { color: var(--neon-teal) !important; }
.header-meta-sub strong.text-red     { color: var(--color-danger) !important; }

/* Tombol Cari Kaca Pembesar F7 (Cyan Neon Glass Khas SBS) */
.btn-lookup-cyan {
    background: var(--neon-cyan-soft) !important;
    border: 1.5px solid var(--neon-cyan-border) !important;
    color: var(--neon-cyan) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}
.btn-lookup-cyan:hover {
    background: var(--color-primary-hover) !important;
    color: var(--text-white) !important;
    box-shadow: var(--neon-cyan-glow) !important;
    transform: scale(1.08) !important;
}

/* Kapsul Satuan Aktif Contekan Stok (Border Seragam Khas Safir Glass) */
.header-meta-sub > span.badge-unit-satuan1,
.badge-unit-satuan1 {
    color: var(--neon-cyan) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    box-shadow: none !important;
}
.header-meta-sub > span.badge-unit-satuan1 i {
    color: var(--neon-cyan) !important;
}

.header-meta-sub > span.badge-unit-satuan2,
.badge-unit-satuan2 {
    color: var(--neon-purple) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    box-shadow: none !important;
}
.header-meta-sub > span.badge-unit-satuan2 i {
    color: var(--neon-purple) !important;
}

.badge-recom-highlight {
    background: var(--neon-green-soft) !important;
    border-color: var(--neon-green-border) !important;
}

/* Input & Dropdown Kaca Gelap di Baris Tabel Transaksi (Anti Kotak Putih) */
.table-input-compact {
    background: var(--modal-input-bg) !important;
    border: 1px solid var(--modal-input-border) !important;
    color: var(--text-white) !important;
    transition: all 0.2s ease !important;
}

.table-input-compact:focus {
    background: var(--modal-input-focus-bg) !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: var(--neon-cyan-glow) !important;
}

.table-input-compact option {
    background: var(--bg-sidebar-dark) !important;
    color: var(--text-white) !important;
}


/* ==============================================================================
   [7.14] KOMPONEN PUSAT KOMANDO NOTIFIKASI LONCENG NAVBAR (100% TOKEN BAKU SBS)
   ============================================================================== */
.nav-notification-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Tombol Lonceng Kaca Menyatu dengan Navbar */
.btn-nav-action.btn-bell {
    background: var(--bg-glass-white) !important;
    border: 1px solid var(--border-card-glow) !important;
    color: var(--text-white) !important;
    cursor: pointer !important;
    position: relative !important;
}

.btn-nav-action.btn-bell:hover {
    background: var(--modal-nav-btn-hover) !important;
    border-color: var(--neon-cyan) !important;
    color: var(--neon-cyan) !important;
    transform: translateY(-2px) !important;
}

/* Bulatan Merah Notifikasi Menyala di Sudut Kanan Atas Lonceng */
.badge-bell-counter {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: var(--color-danger) !important;
    color: var(--text-white) !important;
    font-size: 10px !important;
    font-weight: var(--fw-black) !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-pill) !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    border: 2px solid var(--bg-sidebar-dark) !important;
    box-shadow: 0 0 8px var(--color-danger) !important;
    z-index: 10 !important;
}

/* Jendela Dropdown Mengambang Kaca Safir Dark Navy (Anti-Tembus Pandang) */
.notification-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    width: 360px !important;
    max-width: 92vw !important;
    background: var(--modal-bg-glass) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1.5px solid var(--border-glass-subtle) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-window-deep), inset 0 1px 0 var(--border-card-glow) !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Sembunyikan Dropdown Saat Tidak Diklik */
.notification-dropdown-menu.hidden {
    display: none !important;
}

/* Header Notifikasi */
.notif-header {
    background: var(--modal-surface-glass) !important;
    border-bottom: 1.5px solid var(--modal-border-subtle) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.notif-header-title {
    font-size: 12.5px !important;
    font-weight: var(--fw-extrabold) !important;
    color: var(--text-white) !important;
    letter-spacing: 0.3px !important;
}

/* Wadah List Notifikasi */
.notif-body-list {
    max-height: 360px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Footer Notifikasi */
.notif-footer {
    background: var(--modal-surface-glass) !important;
    border-top: 1px solid var(--modal-border-subtle) !important;
    padding: 8px 12px !important;
    text-align: center !important;
}