/* ========================================================================== */
/* GASSNET CORE V1.0 - MASTER THEME CSS (ENTERPRISE OPTIMIZED ARCHITECTURE)   */
/* Refactored, Grouped, and Bug-Fixed for Perfect Layout                      */
/* ========================================================================== */

/* ========================================================================== */
/* CHAPTER 01: COLOR PALETTE & CSS VARIABLES                                  */
/* ========================================================================== */
:root {
    --accent-color: #6366f1;
    --neon-green: #22c55e;
    --neon-red: #ef4444;
    --neon-orange: #f59e0b;
    --neon-blue: #0ea5e9;

    /* LIGHT MODE */
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --bg-topbar: rgba(255, 255, 255, 0.85);
    --text-main: #1e293b;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --table-header: #f8fafc;
    --table-hover: #f1f5f9;
    --input-bg: #f8fafc;
    --badge-bg: #e0e7ff;
    --badge-text: #4338ca;
    --sidebar-bg: #0f172a;

    /* VARIABLE KUSTOMISASI (Default - Diisi oleh JS) */
    --user-bg-color: transparent; 
    --user-sidebar-color-1: #0f172a; 
    --user-sidebar-color-2: #1e1b4b; 
    --user-card-bg: transparent;
    --user-table-head: transparent;
}

[data-theme="dark"] {
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-topbar: rgba(30, 41, 59, 0.85);
    --text-main: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --table-header: #152033;
    --table-hover: #27354f;
    --input-bg: #0f172a;
    --badge-bg: rgba(99, 102, 241, 0.15);
    --badge-text: #818cf8;
    --sidebar-bg: #020617;
}

/* ========================================================================== */
/* CHAPTER 02: GLOBAL LAYOUT, TYPOGRAPHY & SCROLLING                          */
/* ========================================================================== */
/* 🟢 SKALA DINAMIS BASE FONT (FLUID TYPOGRAPHY MURNI) */
/* Rumus: clamp(Ukuran Terkecil, Ukuran Dinamis VW, Ukuran Terbesar) */
html { font-size: 15px !important; } /* Khusus Mobile Default */
@media (min-width: 768px) { html { font-size: clamp(12px, 0.8vw + 4px, 15px) !important; } } /* Tablet & Laptop Standar */
@media (min-width: 1440px) { html { font-size: clamp(14px, 0.9vw + 2px, 18px) !important; } } /* Layar Lebar (Widescreen) */
@media (min-width: 2560px) { html { font-size: clamp(18px, 1vw + 5px, 26px) !important; } } /* Monitor 2K & TV 4K UHD */

html, body { 
    font-family: 'Plus Jakarta Sans', sans-serif !important; 
    background-color: var(--bg-body); 
    color: var(--text-main); 
    display: flex; flex-direction: column; 
    height: 100vh !important; 
    margin: 0; padding: 0;
    overflow: hidden !important; 
    width: 100% !important; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

#wrapper { 
    flex: 1; display: flex; 
    width: 100vw !important; height: 100vh !important; 
    overflow: hidden !important; 
}

#content-wrapper { 
    background-color: var(--user-bg-color) !important; 
    flex: 1; display: flex; flex-direction: column; 
    width: 100%; min-width: 0; height: 100vh !important; 
    overflow-x: hidden; overflow-y: auto !important; 
    transition: background-color 0.3s ease, color 0.3s ease; 
}

#content { background-color: transparent !important; flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Overlay Background untuk Mobile */
#overlayHitam { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: rgba(15, 23, 42, 0.6); z-index: 1035; opacity: 0; 
    visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(2px); 
}
#overlayHitam.mobile-open { opacity: 1; visibility: visible; }

/* Global Gutter & Spacing (Diperbaiki agar padat vertikal) */
.container-fluid > .row { margin-left: -0.75rem !important; margin-right: -0.75rem !important; margin-bottom: 0.5rem !important; } /* 🟢 DIPANGKAS DARI 1.25rem ke 0.5rem */
.container-fluid > .row > [class*="col-"] { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* 100VH Fixed Layout Mode */
body.layout-fixed-100vh { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; margin: 0; padding: 0; display: flex; flex-direction: column; }
body.layout-fixed-100vh #wrapper { flex: 1 1 0; height: 100%; min-height: 0; overflow: hidden; display: flex; }
body.layout-fixed-100vh #content-wrapper { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; width: 100%; }
body.layout-fixed-100vh #content { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
body.layout-fixed-100vh .container-fluid { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: 1rem; }
.flex-grid-100vh { flex: 1 1 0; display: flex; flex-wrap: wrap; min-height: 0; margin-bottom: 0; overflow: hidden; }
.flex-grid-100vh > [class*="col-"] { display: flex; flex-direction: column; min-height: 0; max-height: 100%; height: 100%; }
.card-flex-item { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; margin-bottom: 0 !important; overflow: hidden !important; border-radius: 20px !important;}
.card-flex-item > .card-header { flex-shrink: 0 !important; padding: 1.5rem !important; }
.panel-content { display: none !important; }
.panel-content.active-panel { display: flex !important; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; animation: fadeIn 0.3s ease-in-out; }
.scrollable-card-body { flex: 1 1 0 !important; overflow-y: auto !important; min-height: 0 !important; padding: 1.5rem; display: block; }
.scrollable-card-body::-webkit-scrollbar { width: 8px; }
.scrollable-card-body::-webkit-scrollbar-track { background: transparent; }
.scrollable-card-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

/* ========================================================================== */
/* 💥 PENGECUALIAN HALAMAN BERAT (SCROLL NORMAL FULL KE BAWAH)                */
/* ========================================================================== */

/* 1. Kembalikan hak scroll utama murni pada #content-wrapper */
body.page-scrollable, 
body.page-scrollable #wrapper {
    height: 100vh !important;
    overflow: hidden !important; 
}
body.page-scrollable #content-wrapper {
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 2. 💥 KUNCI SAKTI: Hancurkan limitasi tinggi dengan SPESIFISITAS SUPER TINGGI! */
/* Kita tembak tepat ke jantung selector aslinya agar menang mutlak */
body.page-scrollable #content,
body.page-scrollable .container-fluid,
body.page-scrollable .row-auto-stretch,
body.page-scrollable .row-auto-stretch > [class*="col-"],
body.page-scrollable .row-auto-stretch > [class*="col-"] > .card-smart,
body.page-scrollable .row-auto-stretch > [class*="col-"] > .card-smart > .card-body,
body.page-scrollable .table-responsive-custom,
body.page-scrollable .table-responsive-custom .dataTables_wrapper,
body.page-scrollable .custom-vscroll {
    flex: none !important;        /* Matikan sifat karet */
    height: auto !important;      /* Biarkan tinggi merentang mengikuti isi */
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important; /* Pantang ada yang dipotong/disembunyikan */
}

/* 3. Khusus wadah tabel, izinkan scroll horizontal untuk layar HP */
body.page-scrollable .custom-vscroll {
    overflow-x: auto !important;
}

/* 🟢 FOOTER GLOBAL (SUPER TIPIS & COMPACT SEMUA RESOLUSI) */
footer.sticky-footer {
    padding: 1.5rem 0 !important; /* Ruang napas natural */
    background: transparent;
    margin-top: auto !important; /* Rahasia agar footer otomatis selalu terdorong ke dasar terendah */
    flex-shrink: 0 !important; /* Mencegah footer gepeng */
}
footer.sticky-footer .copyright {
    font-size: 0.65rem !important;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* 🟢 FIX FOOTER MOBILE: Dinamis Mengikuti Bezel/Nav-Bar HP Modern */
@media (max-width: 768px) {
    #content > .container-fluid {
        padding-bottom: 0.5rem !important; 
    }
    
    /* 💡 KUNCI 1: Hapus paksaan tinggi 100% di HP agar ruang kosong lenyap */
    #wrapper, #content-wrapper, #content {
        min-height: auto !important; 
    }
    
    /* 💡 KUNCI 2: Ganti margin 'auto' menjadi ukuran pasti agar Footer memeluk kartu */
    footer.sticky-footer {
        margin-top: 4.5rem !important; 
        padding-top: 0.5rem !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; 
    }
}

/* 🟢 FIX PULL-TO-REFRESH MOBILE (Kembalikan hak scroll ke Body) */
@media (max-width: 768px) {
    html, body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: auto !important; /* 👈 Kunci utama pemicu Pull-to-refresh */
        -webkit-overflow-scrolling: touch !important; /* Agar scroll di iOS/iPhone mulus */
    }
    #wrapper, #content-wrapper, #content {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important; /* 👈 Matikan scroll internal, paksa body yang bekerja */
        overscroll-behavior-y: auto !important;
    }
}

/* ========================================================================== */
/* CHAPTER 03: TOPBAR, HEADER & THEME TOGGLE                                  */
/* ========================================================================== */
.topbar { 
    background: var(--bg-card) !important; 
    border-bottom: 1px solid var(--border-color) !important; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.02) !important;
    position: sticky !important; 
    top: 0 !important; 
    z-index: 1040 !important;
    height: 3.2rem !important; 
    min-height: 3.2rem !important; 
    margin-bottom: 0.75rem !important; 
}

.theme-toggle-btn { 
    background: var(--input-bg) !important; border: 1px solid var(--border-color) !important; 
    color: var(--text-muted) !important; 
    width: 42px !important; height: 42px !important; /* 🟢 KUNCI DIMENSI */
    min-width: 42px !important; max-width: 42px !important; 
    min-height: 42px !important; max-height: 42px !important; 
    flex-shrink: 0 !important; /* 🟢 CEGAH EFEK GEPENG DARI FLEXBOX BOOTSTRAP */
    border-radius: 50% !important; 
    display: flex !important; align-items: center !important; justify-content: center !important; 
    cursor: pointer; transition: all 0.3s ease; outline: none; font-size: 1.15rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    padding: 0 !important; 
    box-sizing: border-box !important;
}
.theme-toggle-btn:hover { background-color: var(--table-hover) !important; transform: rotate(15deg); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* 💥 BUNUH PANAH DROPDOWN BAWAAN BOOTSTRAP AGAR TETAP BULAT 💥 */
.theme-toggle-btn.dropdown-toggle::after { display: none !important; }

/* Warna Warni Ikon Topbar */
.theme-toggle-btn .color-palette { color: #8b5cf6 !important; }
html[data-theme="dark"] .theme-toggle-btn .color-palette { color: #a78bfa !important; }
.theme-toggle-btn .color-moon { color: #f59e0b !important; }
.theme-toggle-btn .fa-sun.color-moon { color: #fbbf24 !important; }
.theme-toggle-btn .color-sidebar { color: #0ea5e9 !important; transition: transform 0.3s ease; }
html[data-theme="dark"] .theme-toggle-btn .color-sidebar { color: #38bdf8 !important; }

/* Dropdown Topbar (Profil) - COMPACT ENTERPRISE */
.dropdown-menu { background-color: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; z-index: 9999 !important; border-radius: 10px; padding: 0.4rem 0 !important; min-width: 140px !important; }
.dropdown-item { color: var(--text-main) !important; transition: background-color 0.2s; font-weight: 700; padding: 0.5rem 1.2rem !important; font-size: 0.75rem !important; display: flex; align-items: center; }
.dropdown-item:hover { background-color: var(--table-hover) !important; color: var(--accent-color) !important; }
.dropdown-item i { color: var(--text-muted) !important; font-size: 0.85rem !important; width: 18px; text-align: center; margin-right: 8px !important; }
.dropdown-item:hover i { color: var(--accent-color) !important; }
.dropdown-divider { border-top-color: var(--border-color) !important; margin: 0.3rem 0 !important; }
.dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--neon-red) !important; }
.img-profile { object-fit: cover; border: 2px solid var(--border-color); }

/* ========================================================================== */
/* CHAPTER 04: SIDEBAR NAVIGATION & CONTROLS (RESTORED TO ORIGINAL)           */
/* ========================================================================== */
.sidebar { 
    background: var(--sidebar-bg) !important; border-right: none; 
    transition: all 0.3s ease-in-out; z-index: 1040;
    display: flex !important; flex-direction: column !important; 
    height: 100vh !important; max-height: 100vh !important; 
    overflow-y: auto !important; overflow-x: hidden !important;
    flex-wrap: nowrap !important; position: relative !important;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

.sidebar.toggled { overflow-y: auto !important; overflow-x: hidden !important; }

.sidebar .sidebar-brand { flex-shrink: 0 !important; height: 5.5rem !important; margin: 0 !important; padding: 0 1rem; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.sidebar-brand-icon { display: flex; align-items: center; justify-content: center; width: 100%; }
.sidebar-brand-icon img { max-height: 45px !important; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.3)); }
#dynamicSidebarContainer { flex: 1 1 auto !important; overflow-y: auto; overflow-x: hidden; }
.sidebar.toggled #dynamicSidebarContainer { overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 2rem !important; }

#dynamicSidebarContainer::-webkit-scrollbar { width: 4px; }
#dynamicSidebarContainer::-webkit-scrollbar-track { background: transparent; }
#dynamicSidebarContainer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }

.sidebar .text-center { flex-shrink: 0 !important; margin-bottom: 0.5rem !important; }

.sidebar-dark { background: linear-gradient(180deg, var(--sidebar-bg-1, #0f172a) 0%, var(--sidebar-bg-2, #1e1b4b) 100%) !important; position: relative; transition: background 0.3s ease; }.sidebar-dark::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(to bottom, #0ea5e9, #6366f1, #ec4899, #f59e0b); z-index: 99; }

.sidebar-dark .nav-item .nav-link { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 14px 15px !important; margin: 4px 15px 4px 0; border-radius: 0 20px 20px 0; color: rgba(255, 255, 255, 0.7) !important; font-size: 1.05rem; }
.sidebar-dark .nav-item .nav-link i { color: rgba(255, 255, 255, 0.6) !important; font-size: 1.3rem !important; margin-right: 12px; }
.sidebar-dark .nav-item:not(.active) .nav-link:hover { background: rgba(255,255,255,0.05); transform: translateX(5px); color: rgba(255, 255, 255, 0.8) !important; }
.sidebar-dark .nav-item:not(.active) .nav-link:hover i { color: rgba(255, 255, 255, 0.6) !important; }
.sidebar-dark .nav-item.active .nav-link { background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%) !important; color: white !important; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); font-weight: 700; }
.sidebar-dark .nav-item.active .nav-link i { color: #ffffff !important; }

.sidebar-dark .collapse-inner { background: rgba(255, 255, 255, 0.03) !important; border-left: 2px solid #6366f1; border-radius: 0 15px 15px 0 !important; margin: 0 15px 0 10px; backdrop-filter: blur(10px); }
.sidebar-dark .collapse-inner .collapse-item { color: #94a3b8 !important; transition: 0.3s; }
.sidebar-dark .collapse-inner .collapse-item:hover { background: transparent !important; color: #fff !important; transform: translateX(5px); }
.sidebar-dark .collapse-inner .collapse-item.active { color: #ec4899 !important; background: transparent !important; font-weight: 800; }
.sidebar-dark hr.sidebar-divider { border-top: 1px solid rgba(255,255,255,0.05); }

/* ========================================================================== */
/* 🟢 SINKRONISASI WARNA AKTIF SIDEBAR DENGAN ADVANCE THEME CUSTOMIZER        */
/* ========================================================================== */
/* 1. Paksa Menu Aktif memakai --accent-color */
.sidebar-dark .nav-item.active .nav-link { 
    background: var(--accent-color) !important; 
    color: #ffffff !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; 
    font-weight: 700 !important; 
}

/* 2. Paksa Garis Kiri Sub-Menu memakai --accent-color */
.sidebar-dark .collapse-inner { 
    border-left: 2px solid var(--accent-color) !important; 
}
ul.sidebar:not(.toggled) .nav-item .collapse .collapse-inner {
    border-left: 2px solid var(--accent-color) !important; 
}

/* 3. Paksa Sub-Menu yang Aktif memakai --accent-color */
.sidebar-dark .collapse-inner .collapse-item.active { 
    color: var(--accent-color) !important; 
    font-weight: 800 !important; 
}

/* ========================================================================== */
/* 🟢 SINKRONISASI TEKS & IKON SIDEBAR DENGAN ADVANCE THEME CUSTOMIZER        */
/* ========================================================================== */
/* 1. Paksa Warna Teks Menu Utama & Sub-Menu */
.sidebar-dark .nav-item .nav-link,
.sidebar-dark .nav-item .nav-link span,
ul.sidebar.toggled .nav-item .nav-link span,
ul.sidebar:not(.toggled) .nav-item .nav-link span,
.sidebar-dark .collapse-inner .collapse-item,
ul.sidebar:not(.toggled) .nav-item .collapse .collapse-item { 
    color: var(--sidebar-text, rgba(255, 255, 255, 0.7)) !important; 
}

/* 2. Paksa Warna Ikon Menu Utama */
.sidebar-dark .nav-item .nav-link i,
ul.sidebar.toggled .nav-item .nav-link i,
ul.sidebar:not(.toggled) .nav-item .nav-link i { 
    color: var(--sidebar-icon, rgba(255, 255, 255, 0.6)) !important; 
}

/* 3. Efek Hover: Berubah menjadi Warna Aksen Global */
.sidebar-dark .nav-item:not(.active) .nav-link:hover,
.sidebar-dark .nav-item:not(.active) .nav-link:hover span,
.sidebar-dark .collapse-inner .collapse-item:hover,
ul.sidebar:not(.toggled) .nav-item .collapse .collapse-item:hover { 
    color: var(--accent-color) !important; 
}
.sidebar-dark .nav-item:not(.active) .nav-link:hover i {
    color: var(--accent-color) !important; 
}

/* --- SIDEBAR DESKTOP --- */
@media (min-width: 768px) {
    .sidebar { width: 17rem !important; }
    ul.sidebar.toggled { 
        width: 7rem !important; min-width: 7rem !important; max-width: 7rem !important; 
        overflow-y: auto !important; overflow-x: hidden !important; 
        transform: none !important; 
    }
    ul.sidebar.toggled .nav-item .nav-link { text-align: center !important; padding: 0.85rem 1rem !important; width: 7rem; }
    ul.sidebar.toggled .nav-item .nav-link span { font-size: 0.75rem; display: block; }
    ul.sidebar.toggled .nav-item .nav-link i { font-size: 1.4rem; margin: 0 auto 0.35rem auto !important; display: block !important; text-align: center; }
    ul.sidebar.toggled .sidebar-brand .sidebar-brand-text { display: none; }
    ul.sidebar.toggled .sidebar-brand .sidebar-brand-icon { margin: 0 auto; }
    ul.sidebar.toggled hr.sidebar-divider { margin: 0.5rem 1rem; }
    
    .sidebar .nav-item .nav-link.collapsed[data-toggle="collapse"]::after { content: '\f105' !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; float: right !important; transform: rotate(0deg) !important; }
    .sidebar .nav-item .nav-link[data-toggle="collapse"]:not(.collapsed):after { content: '\f104' !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; float: right !important; transform: rotate(0deg) !important; }
    ul.sidebar.toggled .nav-item .nav-link[data-toggle="collapse"]::after { display: none !important; }
    
    .sidebar:not(.toggled) .nav-item .collapse { position: relative !important; width: auto !important; left: 0 !important; box-shadow: none !important; }
    .sidebar:not(.toggled) .nav-item .collapse .collapse-inner { background: #1e293b !important; border-radius: 8px !important; margin: 0 1rem 1rem 1rem !important; padding: 0.5rem 0 !important; border: 1px solid rgba(255,255,255,0.05) !important; }
    .sidebar:not(.toggled) .nav-item .collapse .collapse-header { display: none !important; }
    .sidebar:not(.toggled) .nav-item .collapse .collapse-item { color: #cbd5e1 !important; white-space: nowrap !important; text-align: left !important; padding: 0.7rem 1.2rem !important; font-size: 0.9rem !important; font-weight: 500 !important; border-bottom: none !important; }
    .sidebar:not(.toggled) .nav-item .collapse .collapse-item:hover { background: rgba(255,255,255,0.05) !important; color: #ffffff !important; }
    
    ul.sidebar.toggled .nav-item { position: relative !important; transform: none !important; }
    
    /* Dropdown Hover untuk Sidebar Minimized */
    ul.sidebar.toggled .nav-item .collapse { 
        display: none !important; 
        position: fixed !important; 
        left: 6.8rem !important; 
        padding-left: 0.5rem !important; 
        width: 240px !important; 
        z-index: 9999 !important; 
    }

    ul.sidebar.toggled .nav-item:hover .collapse { 
        display: block !important; 
        animation: slideInFadePremium 0.2s ease-out forwards; 
    }

    @keyframes slideInFadePremium {
        0% { opacity: 0; transform: translateX(-10px); }
        100% { opacity: 1; transform: translateX(0); }
    }

    ul.sidebar.toggled.is-scrolling .nav-item .collapse,
    ul.sidebar.toggled.is-scrolling .nav-item:hover .collapse {
        display: none !important;
        animation: none !important;
    }

    ul.sidebar.toggled .nav-item .collapse .collapse-inner { 
        background: var(--bg-card) !important; 
        border: 1px solid var(--border-color) !important; 
        border-radius: 14px !important; 
        margin: 0 !important; 
        padding: 0.5rem 0 !important; 
        box-shadow: 10px 10px 30px rgba(0,0,0,0.2) !important; 
    }

    ul.sidebar.toggled .nav-item .collapse .collapse-header { display: none !important; }

    ul.sidebar.toggled .nav-item .collapse .collapse-item { 
        color: var(--text-main) !important; 
        white-space: nowrap !important; 
        text-align: left !important; 
        padding: 0.85rem 1.4rem !important; 
        font-size: 0.95rem !important; 
        font-weight: 600 !important; 
        border-bottom: 1px solid var(--border-color) !important; 
    }
    
    ul.sidebar.toggled .nav-item .collapse .collapse-item:last-child { 
        border-bottom: none !important; 
    }
    
    ul.sidebar.toggled .nav-item .collapse .collapse-item:hover { 
        background: var(--table-hover) !important; 
        color: var(--accent-color) !important; 
    }
}

/* --- SIDEBAR MOBILE (HYBRID: MINI ICON & EXPANDABLE) --- */
@media (max-width: 768px) {
    /* Dasar Sidebar Mobile */
    ul.sidebar { 
        position: fixed !important; top: 0 !important; bottom: 0 !important; left: -300px !important; 
        height: 100vh !important; /* 💥 KEMBALIKAN KE 100VH AGAR TIDAK HILANG! */
        z-index: 9999 !important; 
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease !important; 
        /* 💥 KUNCI WARNA: Wajib ada fallback #0f172a jika variabel js telat loading */
        background: linear-gradient(180deg, var(--sidebar-bg-1, #0f172a) 0%, var(--sidebar-bg-2, #1e1b4b) 100%) !important;
        box-shadow: none !important;
    }
    
    ul.sidebar.mobile-open { left: 0 !important; box-shadow: 10px 0 25px rgba(0,0,0,0.5) !important; }
    .sidebar::-webkit-scrollbar { width: 0; background: transparent; }
    
    /* -------------------------------------------------------- */
    /* MODE 1: MINI ICON (.toggled) - Default saat masuk layar  */
    /* -------------------------------------------------------- */
    ul.sidebar.toggled { 
        width: 90px !important; min-width: 90px !important; 
        overflow: visible !important; /* 🟢 FIX POPOUT: Wajib visible agar dropdown tidak terpotong! */
    }
	ul.sidebar hr.sidebar-divider { 
        margin: 0.8rem 15px !important; 
        display: block !important; /* 🟢 FIX GARIS HILANG: Paksa tampil di semua resolusi HP */
        border-top: 1px solid rgba(255,255,255,0.15) !important; 
    }
    ul.sidebar.toggled .sidebar-brand { height: 5.5rem !important; padding: 0 5px !important; width: 90px !important; justify-content: center !important;}
    ul.sidebar.toggled .sidebar-brand-icon img { max-height: 40px !important; max-width: 60px !important; margin: 0 auto; }
    ul.sidebar.toggled .sidebar-brand-text { display: none !important; }

    ul.sidebar.toggled .nav-item .nav-link { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0.8rem 0.2rem !important; width: 90px !important; }
    ul.sidebar.toggled .nav-item .nav-link i { font-size: 1.25rem !important; margin: 0 0 0.3rem 0 !important; color: rgba(255, 255, 255, 0.6) !important; }
    ul.sidebar.toggled .nav-item .nav-link span { font-size: 0.65rem !important; display: block !important; white-space: normal !important; line-height: 1.2 !important; text-align: center; color: rgba(255, 255, 255, 0.7) !important;}
    ul.sidebar.toggled hr.sidebar-divider { margin: 0.5rem 10px !important; border-top: 1px solid rgba(255,255,255,0.05); }
    ul.sidebar.toggled .nav-item .nav-link[data-toggle="collapse"]::after { display: none !important; }

    /* 🟢 JS Popup Target (Disembunyikan default, JS yang atur popupnya) */
    ul.sidebar.toggled .nav-item .collapse { display: none !important; }
    ul.sidebar.toggled .nav-item .collapse.show-popout { display: block !important; animation: slideInMobile 0.2s ease-out forwards; }
    @keyframes slideInMobile { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }
    
    ul.sidebar.toggled .nav-item .collapse .collapse-inner { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 14px !important; margin: 0 !important; padding: 0.5rem 0 !important; box-shadow: 10px 10px 30px rgba(0,0,0,0.3) !important; }
    ul.sidebar.toggled .nav-item .collapse .collapse-header { display: none !important; }
    ul.sidebar.toggled .nav-item .collapse .collapse-item { color: var(--text-main) !important; padding: 0.85rem 1.4rem !important; font-size: 0.9rem !important; font-weight: 600 !important; border-bottom: 1px solid var(--border-color) !important; background: transparent !important; }
    ul.sidebar.toggled .nav-item .collapse .collapse-item:last-child { border-bottom: none !important; }

    /* -------------------------------------------------------- */
    /* MODE 2: EXPANDED (Full Width) */
    /* -------------------------------------------------------- */
    ul.sidebar:not(.toggled) { width: 260px !important; min-width: 260px !important; overflow-y: auto !important; overflow-x: hidden !important; }
    ul.sidebar:not(.toggled) .sidebar-brand { height: 5.5rem !important; padding: 0 1rem !important; width: 100% !important; justify-content: flex-start !important; }
    ul.sidebar:not(.toggled) .sidebar-brand-icon img { max-height: 40px !important; max-width: 100% !important; }
    ul.sidebar:not(.toggled) .sidebar-brand-text { display: block !important; margin-left: 10px !important; color: #fff !important; }

    /* 🟢 FIX SPACING: Jarak antar menu dirapatkan */
    ul.sidebar:not(.toggled) .nav-item .nav-link { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; padding: 10px 15px !important; width: 100% !important; }
    ul.sidebar:not(.toggled) .nav-item .nav-link i { font-size: 1.15rem !important; margin: 0 12px 0 0 !important; color: rgba(255, 255, 255, 0.6) !important; }
    ul.sidebar:not(.toggled) .nav-item .nav-link span { font-size: 0.95rem !important; display: inline-block !important; color: rgba(255, 255, 255, 0.7) !important; }
    ul.sidebar hr.sidebar-divider { margin: 0.4rem 15px !important; display: block !important; border-top: 1px solid rgba(255,255,255,0.15) !important; }
    ul.sidebar:not(.toggled) .nav-item .nav-link[data-toggle="collapse"]::after { display: inline-block !important; float: right !important; margin-left: auto; color: rgba(255, 255, 255, 0.5); }

    ul.sidebar:not(.toggled) .nav-item { position: relative !important; }
    ul.sidebar:not(.toggled) .nav-item .collapse { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; padding-left: 0 !important; display: none !important; background: transparent !important; box-shadow: none !important; margin-top: 0 !important;}
    ul.sidebar:not(.toggled) .nav-item .collapse.show { display: block !important; }
    ul.sidebar:not(.toggled) .nav-item .collapse .collapse-inner { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-left: 2px solid #6366f1 !important; border-radius: 0 14px 14px 0 !important; margin: 0 1rem 0.5rem 0.5rem !important; padding: 0.5rem 0 !important; box-shadow: none !important;}
    ul.sidebar:not(.toggled) .nav-item .collapse .collapse-header { display: none !important; }
    ul.sidebar:not(.toggled) .nav-item .collapse .collapse-item { color: #cbd5e1 !important; padding: 0.7rem 1.4rem !important; font-size: 0.9rem !important; font-weight: 600 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important; background: transparent !important;}
    ul.sidebar:not(.toggled) .nav-item .collapse .collapse-item:last-child { border-bottom: none !important; }
    ul.sidebar:not(.toggled) .nav-item .collapse .collapse-item:active { color: #ec4899 !important; font-weight: 800 !important; }
}

/* --- KONTROL BAWAH (PANAH & GEMBOK) --- */
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; height: 5.5rem; flex-shrink: 0; transition: all 0.3s ease; }
.sidebar.toggled .sidebar-header { padding: 1rem 0 0 0; flex-direction: column; justify-content: center; height: auto; }
.sidebar.toggled .sidebar-brand-text { display: none !important; }

.sidebar-bottom-controls {
    margin-top: auto !important; 
    padding-top: 1.5rem !important; 
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important; /* 🟢 FIX FOOTER TENGGELAM */
    display: flex !important;
    flex-direction: row !important; 
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0;
    gap: 15px; 
}
.sidebar.toggled .sidebar-bottom-controls { gap: 8px; padding-top: 1rem !important; }

#sidebarToggle { width: 36px !important; height: 36px !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.15) !important; }
#lockIconContainer { width: 36px !important; height: 36px !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: all 0.2s ease; }
#lockIconContainer:hover { background-color: rgba(255,255,255,0.08); }
#lockIcon { font-size: 1.15rem; color: rgba(255,255,255,0.4); transition: all 0.3s ease; }

.sidebar-user-card { transition: all 0.3s ease; }
.sidebar-user-card .dropdown-toggle::after { display: none; }
.sidebar-user-card .nav-link { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; transition: all 0.2s; padding: 10px !important; }
.sidebar-user-card .nav-link:hover { background: rgba(255,255,255,0.1); }

.sidebar.toggled .sidebar-user-card { margin: 0 15px 15px 15px !important; }
.sidebar.toggled .sidebar-user-card .nav-link { padding: 0 !important; justify-content: center !important; background: transparent !important; border: none !important; }
.sidebar.toggled .sidebar-user-card .sidebar-user-details { display: none !important; }
.sidebar.toggled .sidebar-user-card img { width: 40px !important; height: 40px !important; margin: 0 !important; }
.sidebar.toggled .sidebar-user-card .dropdown-menu { position: absolute !important; left: 100% !important; top: 0 !important; margin-left: 10px !important; width: 200px !important; box-shadow: 5px 5px 20px rgba(0,0,0,0.15) !important; }

/* ========================================================================== */
/* CHAPTER 05: MASTER DATATABLES (ULTRA COMPACT, COLVIS, EXPORT & SORTING)    */
/* ========================================================================== */

/* Container & Responsive */
.dataTables_wrapper { width: 100%; max-width: 100%; font-family: 'Plus Jakarta Sans', sans-serif; }
.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 🟢 FIX SCROLL CUSTOM KANAN: Membuat area tabel Mapping bisa di-scroll mandiri */
.custom-vscroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
}

/* 🟢 Kustomisasi Scrollbar Tabel agar tipis dan elegan (TERMASUK CUSTOM-VSCROLL) */
.table-responsive::-webkit-scrollbar, 
.dataTables_wrapper > .row:nth-child(2) > [class*="col-"]::-webkit-scrollbar,
.custom-vscroll::-webkit-scrollbar { width: 6px; height: 6px; }

.table-responsive::-webkit-scrollbar-track, 
.dataTables_wrapper > .row:nth-child(2) > [class*="col-"]::-webkit-scrollbar-track,
.custom-vscroll::-webkit-scrollbar-track { background: transparent; }

.table-responsive::-webkit-scrollbar-thumb, 
.dataTables_wrapper > .row:nth-child(2) > [class*="col-"]::-webkit-scrollbar-thumb,
.custom-vscroll::-webkit-scrollbar-thumb { background: rgba(150, 150, 150, 0.3); border-radius: 10px; }

.table-responsive::-webkit-scrollbar-thumb:hover, 
.dataTables_wrapper > .row:nth-child(2) > [class*="col-"]::-webkit-scrollbar-thumb:hover,
.custom-vscroll::-webkit-scrollbar-thumb:hover { background: rgba(150, 150, 150, 0.6); }

/* 🔴 KUNCI PERBAIKAN COLVIS TERPOTONG DI DALAM KARTU */
.dataTables_wrapper, .card-smart > .card-body {
    overflow: visible !important;
}

/* Search & Length Menu (Diperbesar Proporsional, IDENTIK DENGAN TOMBOL EXPORT) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 50px !important; border: 1px solid var(--border-color) !important;
    background: var(--input-bg) !important; color: var(--text-main) !important;
    
    /* 💥 KITA NAIKKAN UKURAN DASARNYA JADI 32px 💥 */
    height: clamp(32px, 4vh, 46px) !important; 
    min-height: 32px !important; 
    padding: 0 clamp(10px, 1.2vw, 16px) !important; 
    font-size: clamp(0.7rem, 1.2vh, 1.1rem) !important;
    
    background: var(--input-bg) !important; color: var(--text-main) !important; box-shadow: none !important;
    vertical-align: middle !important; box-sizing: border-box !important;
}
/* 🟢 Memusatkan angka pada dropdown Tampil Data */
.dataTables_wrapper .dataTables_length select {
    text-align: center !important;
    text-align-last: center !important; /* Memaksa rata tengah pada browser Chrome/Edge */
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent-color) !important; outline: none !important; }

/* Teks Label "Show ... entries" dan "Search" ikut melar */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info { 
    color: var(--text-main) !important; 
    font-size: clamp(0.65rem, 1.2vh, 1.1rem) !important; 
    font-weight: 600; 
}
.dataTables_filter input::placeholder { color: var(--text-muted) !important; }

/* Main Table (Ultra Compact) */
table.dataTable { white-space: nowrap; border-collapse: collapse !important; width: 100% !important; color: var(--text-main); margin: 0 !important;}

/* Header Tabel & Custom Sorting Icons (STICKY HEADER) */
table.dataTable thead th { 
    background-color: var(--bg-card) !important; 
    color: var(--text-secondary) !important; /* 💥 FIX: Warna adaptif! (Terang di Dark Mode, Gelap di Light Mode) */
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
    border-bottom: 1px solid var(--border-color) !important; 
    border-top: none !important; 
    padding: 6px 22px 6px 8px !important; 
    font-size: 0.7rem !important; 
    letter-spacing: 0.5px !important;
    position: sticky !important; 
    top: 0 !important; 
    z-index: 15 !important; 
    cursor: pointer; 
    white-space: nowrap !important;
    box-shadow: inset 0 -1px 0 var(--border-color); 
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-image: none !important; }
table.dataTable thead th.sorting:after, table.dataTable thead th.sorting_asc:after, table.dataTable thead th.sorting_desc:after {
    position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important;
    font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; font-size: 0.75rem !important; display: inline-block !important; transition: all 0.2s ease !important;
}
table.dataTable thead th.sorting:after { content: '\f0dc' !important; opacity: 0.2 !important; }
table.dataTable thead th.sorting_asc:after { content: '\f0de' !important; opacity: 1 !important; color: var(--accent-color) !important; }
table.dataTable thead th.sorting_desc:after { content: '\f0dd' !important; opacity: 1 !important; color: var(--accent-color) !important; }
table.dataTable thead th.sorting_disabled:after { display: none !important; }
table.dataTable thead th.sorting_disabled { cursor: default !important; padding-right: 8px !important; }

/* Body Tabel */
table.dataTable tbody td { 
    vertical-align: middle !important; 
    border-bottom: 1px solid var(--border-color) !important; 
    padding: 4px 8px !important; 
    color: var(--text-main) !important; 
    font-size: 0.7rem !important; 
    transition: background-color 0.2s ease; 
    white-space: normal !important; /* 💥 FIX: Izinkan teks turun baris agar tidak mendesak dinding! */
    word-break: break-word !important; /* 💥 FIX: Teks panjang akan ditekuk otomatis */
}

/* 💥 FIX: Menjinakkan class bawaan JS (.text-dark, .text-muted) di dalam tabel */
table.dataTable tbody td span:not(.badge), 
table.dataTable tbody td div,
table.dataTable tbody td b,
table.dataTable tbody td strong { 
    font-size: 0.7rem !important; 
    color: var(--text-main) !important; /* Angka seperti 1201 wajib terang */
}

/* Khusus label kecil di atas angka (seperti tulisan PPPOE, HOTSPOT) */
table.dataTable tbody td small,
table.dataTable tbody td span.text-muted,
table.dataTable tbody td div.text-muted {
    font-size: 0.6rem !important;
    color: var(--text-muted) !important; /* Abu-abu redup yang aman di Dark Mode */
    font-weight: 700 !important;
}

table.dataTable tbody td .badge { padding: 3px 8px !important; font-size: 0.65rem !important; font-weight: 700 !important; }
table.dataTable tbody td i { font-size: 0.7rem !important; }
table.dataTable tbody tr:hover td { background-color: var(--table-hover) !important; }

.group-row td { background-color: var(--table-hover) !important; color: var(--text-main) !important; font-weight: 700; padding: 6px 8px !important; border-bottom: 2px solid var(--border-color) !important; }

/* Export Buttons (Semua Ukuran Sama & Auto Bagi Rata) */
.dt-buttons { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 6px !important; 
    justify-content: center !important; 
    width: 100% !important;
    margin-bottom: 0 !important;
}
.dt-buttons .btn-export { 
    background: #8492a6 !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; 
    font-weight: 700 !important; letter-spacing: 0.3px; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; transition: all 0.2s ease !important; 
    
    /* 💥 KUNCI AUTO-SCALE (MELAR MENGIKUTI LAYAR) 💥 */
    height: clamp(26px, 3.5vh, 44px) !important; 
    min-height: 26px !important; 
    padding: 0 clamp(4px, 1vw, 12px) !important; 
    font-size: clamp(0.65rem, 1.2vh, 1.1rem) !important;
    
    line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; outline: none !important;
    
    /* 💥 KUNCI BAGI RATA DESKTOP (FLEXBOX) 💥 */
    flex: 1 1 0 !important; 
}
.dt-buttons .btn-export:hover { transform: translateY(-2px); filter: brightness(0.9); box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; }
.dt-buttons .buttons-excel i { color: #4ade80 !important; }
.dt-buttons .buttons-pdf i   { color: #f87171 !important; }
.dt-buttons .buttons-print i { color: #60a5fa !important; }
.dt-buttons .buttons-csv i   { color: #fbbf24 !important; }

/* Dropdown ColVis (Anti Potong & Memori Centang) */
html body div.dt-button-collection {
    position: absolute !important; padding: 4px !important; border-radius: 8px !important;
    background-color: var(--bg-card) !important; border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important; min-width: 140px !important; width: max-content !important; 
    z-index: 999999 !important; margin-top: 4px !important; max-height: 320px !important; overflow-y: auto !important;
}
/* 💥 MEMBUNUH POPUP COPY DEFAULT DATATABLES 💥 */
div.dt-button-info { display: none !important; }

div.dt-button-background { display: none !important; }
html body div.dt-button-collection::-webkit-scrollbar { width: 5px; }
html body div.dt-button-collection::-webkit-scrollbar-track { background: transparent; }
html body div.dt-button-collection::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

html body div.dt-button-collection a.dt-button {
    display: block !important; width: 100% !important; padding: 5px 8px !important; margin: 0 !important;
    font-size: 0.75rem !important; font-weight: 600 !important; border-radius: 4px !important;
    background: transparent !important; color: var(--text-secondary) !important; border: none !important;
    box-shadow: none !important; text-align: left !important; cursor: pointer !important; text-decoration: none !important;
}
html body div.dt-button-collection a.dt-button.active, html body div.dt-button-collection a.dt-button:active { background-color: transparent !important; background: none !important; color: var(--text-main) !important; box-shadow: none !important; outline: none !important; }
html body div.dt-button-collection a.dt-button:hover:not(.buttons-colvisRestore) { background-color: var(--table-hover) !important; color: var(--text-main) !important; }
html body div.dt-button-collection a.dt-button span { display: flex !important; align-items: center !important; pointer-events: none !important; width: 100% !important; }
html body div.dt-button-collection a.dt-button:not(.buttons-colvisRestore) span::before { content: '\f0c8' !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 400 !important; margin-right: 6px !important; font-size: 0.8rem !important; color: var(--text-muted) !important; width: 14px !important; text-align: center !important; flex-shrink: 0 !important; }
html body div.dt-button-collection a.dt-button.active:not(.buttons-colvisRestore) span::before { content: '\f14a' !important; font-weight: 900 !important; color: var(--neon-green) !important; }
html body div.dt-button-collection a.dt-button.buttons-colvisRestore { margin-top: 4px !important; padding: 6px 8px !important; border-top: 1px dashed var(--border-color) !important; border-radius: 0 0 4px 4px !important; color: var(--neon-red) !important; }
html body div.dt-button-collection a.dt-button.buttons-colvisRestore span { justify-content: center !important; }
html body div.dt-button-collection a.dt-button.buttons-colvisRestore span::before, html body div.dt-button-collection a.dt-button.buttons-colvisRestore::before { content: none !important; display: none !important; }
html body div.dt-button-collection a.dt-button.buttons-colvisRestore:hover { background-color: rgba(239, 68, 68, 0.05) !important; }

/* Pagination Bawah (Sticky & Minimalis) */
.dataTables_wrapper > .row:nth-child(2) { margin-bottom: 0 !important; }
.dataTables_wrapper > .row:last-child {
    position: sticky !important; bottom: -0.8rem !important; background-color: var(--bg-card) !important;
    margin-top: 0 !important; padding-top: 12px !important; padding-bottom: 0.8rem !important;
    border-top: 1px solid var(--border-color) !important; z-index: 20 !important;
}
.dataTables_wrapper .dataTables_paginate { margin-top: 0 !important; }
.dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background-color: var(--accent-color) !important; border-color: var(--accent-color) !important; box-shadow: 0 4px 10px rgba(99,102,241,0.3); border-radius: 6px !important; color: white !important; padding: 4px 10px !important; font-size: 0.75rem !important;}
.dataTables_wrapper .dataTables_paginate .page-item .page-link { border: none !important; color: var(--text-muted); border-radius: 6px !important; margin: 0 2px; background: transparent; transition: all 0.2s; font-weight: 600; font-size: 0.75rem !important; padding: 4px 10px !important;}
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover { background-color: var(--table-hover); color: var(--accent-color); }
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { opacity: 0.5; background: transparent; }

/* Action Buttons (Super Mini, Square) */
.btn-action-sq {
    width: 20px !important; height: 20px !important; min-height: 20px !important; padding: 0 !important;
    border-radius: 4px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 0.6rem !important; line-height: 1 !important; transition: all 0.2s ease; box-shadow: none !important;
}
.btn-action-sq:hover { transform: translateY(-2px); }

/* Regular Table (Non-Datatables, e.g., Bug Report / OLT Standard) */
.table { color: var(--text-main); margin-bottom: 0; }
.table thead th { border-bottom: 2px solid var(--border-color) !important; border-top: none !important; background-color: var(--table-header); color: var(--text-main) !important; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 1.2rem 1.5rem; white-space: nowrap; }
.table tbody td { border-bottom: 1px solid var(--border-color); padding: 1.4rem 1.5rem; vertical-align: middle; font-size: 0.95rem; font-weight: 500; color: var(--text-main) !important; }
[data-theme="dark"] .table tbody td { color: #e2e8f0; } 
[data-theme="light"] .table tbody td { color: #334155; }
.table tbody tr:hover { background-color: var(--table-hover); }
.table tbody tr:last-child td { border-bottom: none; }
tr[data-status="solved"] td { opacity: 0.8; transition: opacity 0.3s; }
tr[data-status="solved"]:hover td { opacity: 1; }

.table-enterprise { border-collapse: separate !important; border-spacing: 0 8px !important; background: transparent !important; width: 100%; margin-bottom: 0; }
.table-enterprise th { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; color: var(--text-muted); border: none !important; padding-bottom: 12px; font-weight: 800; }
.table-enterprise td { border: none !important; padding: 0.85rem 1.2rem; vertical-align: middle; background: var(--bg-card); transition: all 0.2s ease; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); font-size: 1rem; }
.table-enterprise tbody tr { box-shadow: 0 2px 4px rgba(0,0,0,0.03); }
.table-enterprise tbody tr:hover td { background: var(--table-hover); box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2); }
.table-enterprise tbody tr:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(99, 102, 241, 0.15); }
.table-enterprise tbody tr td:first-child { border-left: 1px solid var(--border-color); border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.table-enterprise tbody tr td:last-child { border-right: 1px solid var(--border-color); border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

/* -------------------------------------------------------------------------- */
/* 🟢 GLOBAL DATATABLES SCALING ENGINE (MOBILE TO 4K TV)                      */
/* Mengikat DOM Bootstrap Datatables secara langsung ke sistem 100vh Flexbox  */
/* -------------------------------------------------------------------------- */

/* 1. MOBILE & TABLET MODE (Default < 992px) */
@media (max-width: 991px) {
    /* 💥 KUNCI AUTO-FIT ELASTIS TANPA LIMIT TINGGI 💥 */
    /* Kartu diizinkan melar (flex-grow) untuk memakan ruang kosong sampai footer */
    .row-auto-stretch { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; margin-bottom: 1rem !important; }
    .row-auto-stretch > [class*="col-"] { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; }
    .row-auto-stretch > [class*="col-"] > .card-smart { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; margin-bottom: 0 !important; min-height: 0 !important; }
    .row-auto-stretch > [class*="col-"] > .card-smart > .card-body { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; padding: 0.6rem !important; min-height: 0 !important; }
    
    /* Modifikasi DOM Datatables */
    .table-responsive-custom { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; width: 100%; }
    .table-responsive-custom .dataTables_wrapper { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; width: 100%; }
    
    /* Baris Atas (Filter) & Bawah (Pagination) Dilarang Melar */
    .table-responsive-custom .dataTables_wrapper > .row:nth-child(1),
    .table-responsive-custom .dataTables_wrapper > .row:nth-child(3) { flex: 0 0 auto !important; margin-bottom: 5px !important; }
    
    /* 💥 FIX TABLET & IPAD: Pembebasan Tinggi Tabel (Height Auto) */
    .table-responsive-custom .dataTables_wrapper > :nth-child(2) {
        display: block !important; 
        flex: none !important; /* Bunuh sifat karet flexbox saat ditumpuk */
        width: 100% !important;
        height: auto !important; /* Bebaskan tinggi mengikuti isi data */
        max-height: none !important;
        margin: 0 !important;
        overflow-x: auto !important; /* Aktifkan geser horizontal pakai jari */
        overflow-y: visible !important; /* Matikan scroll internal vertikal */
        -webkit-overflow-scrolling: touch;
    }
    
    .table-responsive-custom .dataTables_wrapper > :nth-child(2) > [class*="col-"] { 
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    table.dataTable thead th, table.dataTable tbody td { white-space: nowrap !important; font-size: 0.7rem !important; padding: 6px 8px !important; }
}

/* 2. LAPTOP 13" - 15" INCH (min-width: 992px) */
@media (min-width: 992px) {
    /* Jadikan Wrapper Utama sebagai Flex Column */
    .table-responsive-custom {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Paksa Datatables untuk ikut melar 100% ke wadahnya */
    .table-responsive-custom .dataTables_wrapper {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 🔴 KUNCI: Baris Atas (Filter) & Bawah (Pagination) DILARANG melar */
    .table-responsive-custom .dataTables_wrapper > .row:nth-child(1),
    .table-responsive-custom .dataTables_wrapper > .row:nth-child(3) {
        flex: 0 0 auto !important;
    }
    
    /* 🔴 KUNCI: Baris Tengah (Tabel) DIBIARKAN melar menyedot sisa ruang */
    .table-responsive-custom .dataTables_wrapper > .row:nth-child(2) {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        overflow: hidden !important;
    }
    
    /* 🔴 KUNCI: Berikan Scroll Internal hanya pada Kolom Tabelnya saja! */
    .table-responsive-custom .dataTables_wrapper > .row:nth-child(2) > [class*="col-"] {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important; /* Scroll Vertikal Selalu Ada jika data banyak */
        overflow-x: auto !important; /* Scroll Horizontal MUNCUL JIKA ColVis Lebar */
        padding: 0 !important; /* Buang padding bawaan agar muat sempurna */
    }
    
    /* Font mengecil otomatis jika layar disempitkan */
    table.dataTable thead th, 
    table.dataTable tbody td { 
        padding: 4px 8px !important;
        font-size: clamp(0.6rem, 0.9vw, 0.8rem) !important; 
    }
	/* ========================================================================== */
    /* 💥 KHUSUS HALAMAN ONU: AKTIFKAN SCROLL HORIZONTAL DENGAN UKURAN TETAP      */
    /* ========================================================================== */
    /* Aktifkan scroll horizontal di wadah tabel khusus halaman ONU */
    body.page-scrollable .custom-vscroll {
        overflow-x: auto !important; 
    }
    
    /* Paksa tabel menyesuaikan lebar layar 100% */
    table#tableSemuaONU {
        width: 100% !important;
        table-layout: auto !important; 
    }
    
    /* Izinkan Header (Judul Kolom) memanjang (nowrap) dengan ukuran TETAP */
    table#tableSemuaONU thead th {
        white-space: nowrap !important; 
        padding: 8px 4px !important;
        font-size: 0.65rem !important;
        vertical-align: middle !important;
    }

    /* Tipiskan ruang di dalam isi sel tabel dengan ukuran TETAP */
    table#tableSemuaONU tbody td {
        white-space: nowrap !important; 
        padding: 6px 4px !important;
        vertical-align: middle !important;
    }

    /* Perkecil Badge & Code ID dengan ukuran TETAP */
    table#tableSemuaONU tbody td .badge,
    table#tableSemuaONU tbody td code {
        white-space: nowrap !important; 
        font-size: 0.65rem !important;
        padding: 4px 6px !important;
        line-height: 1.1 !important;
        display: inline-block !important;
        text-align: center !important;
    }
    
    /* Perkecil tombol aksi (Ikon Sync & Trafik) dengan ukuran TETAP */
    table#tableSemuaONU tbody td .btn-sm {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }
	
	/* ========================================================================== */
    /* 💥 EFEK HOVER BARIS TABEL PREMIUM (MENCEGAH CROSS-READING)                 */
    /* ========================================================================== */
    table#tableSemuaONU tbody tr {
        transition: background-color 0.2s ease;
    }

    table#tableSemuaONU tbody tr:hover {
        /* Memberikan highlight biru neon yang sangat tipis dan elegan saat dilewati mouse */
        box-shadow: inset 0 0 0 9999px rgba(14, 165, 233, 0.05) !important; 
        border-radius: 8px;
    }

    /* ========================================================================== */
    /* 💥 BEAUTIFY DATATABLES CONTROLS (EXPORT BUTTONS & SEARCH BOX)              */
    /* ========================================================================== */
    /* Menyulap tombol Copy, Excel, CSV menjadi kapsul premium */
    /* Menyulap tombol Copy, Excel, CSV menjadi kapsul premium (LEBIH TEGAS) */
	div.dt-buttons .btn {
		border-radius: 20px !important;
		font-size: 0.75rem !important;
		padding: 5px 16px !important;
		margin-right: 6px !important;
		font-weight: 700 !important;
		background: var(--bg-card) !important; /* Pakai warna latar card agar tidak tembus pandang */
		color: var(--text-main) !important;
		border: 1px solid rgba(14, 165, 233, 0.4) !important; /* Border biru tipis sebagai penegas */
		box-shadow: 0 2px 4px rgba(0,0,0,0.03);
		transition: all 0.2s ease;
	}

	div.dt-buttons .btn:hover {
		background: rgba(14, 165, 233, 0.1) !important;
		color: var(--neon-blue) !important;
		border-color: var(--neon-blue) !important; /* Menyala saat dilewati mouse */
		transform: translateY(-1px);
	}

    /* Menyulap kotak Search DataTables menjadi kapsul modern */
    div.dataTables_filter input {
        border-radius: 20px !important;
        border: 1px solid var(--border-color) !important;
        padding: 6px 16px !important;
        font-size: 0.8rem !important;
        background-color: var(--input-bg) !important;
        color: var(--text-main) !important;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
    }

    /* Memperkecil teks label "Cari Data ONU" agar tidak mendominasi */
    div.dataTables_filter label {
        font-size: 0.8rem !important;
        font-weight: 700;
        color: var(--text-muted);
    }
}

/* 3. MONITOR BESAR 24" (min-width: 1500px) */
@media (min-width: 1500px) {
    /* 💥 FIX: Font dikunci di 0.8rem dan padding dirapatkan agar tidak muncul scrollbar! */
    table.dataTable thead th { padding: 6px 10px 6px 6px !important; font-size: 0.8rem !important; }
    table.dataTable tbody td { padding: 6px 8px !important; font-size: 0.8rem !important; }
    table.dataTable tbody td span:not(.badge), table.dataTable tbody td div { font-size: 0.8rem !important; }
}

/* 4. RAKSASA MODE TV 4K / 8K (min-width: 2500px) */
@media (min-width: 2500px) {
    /* 💥 FIX: Font maksimal hanya 0.95rem agar tabel puluhan kolom tetap muat */
    table.dataTable thead th { padding: 8px 12px 8px 8px !important; font-size: 0.95rem !important; }
    table.dataTable tbody td { padding: 8px 10px !important; font-size: 0.95rem !important; }
    table.dataTable tbody td span:not(.badge), table.dataTable tbody td div { font-size: 0.95rem !important; }
}

/* ========================================================================== */
/* 🟢 DATATABLES SMART CONTROLS (FINAL ULTIMATE FIX)                          */
/* ========================================================================== */

/* 1. JADIKAN DATATABLES SEBAGAI WADAH PINTAR */
.dataTables_wrapper {
    container-type: inline-size;
    container-name: dtWrap;
}

/* 2. SIFAT DEFAULT (DESKTOP LEBAR - 1 BARIS SEJAJAR SEMPURNA) */
.dt-top-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; 
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
    margin-bottom: 1rem !important;
}

.dt-length-col { flex: 0 0 auto !important; order: 1 !important; display: flex !important; align-items: center !important; }
.dt-export-col { flex: 1 1 auto !important; order: 2 !important; display: flex !important; justify-content: center !important; }
.dt-search-col { flex: 0 0 auto !important; order: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; }

/* 3. FIX LABEL AGAR TEKS & KOTAK SEJAJAR */
.dataTables_length label, .dataTables_filter label {
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; 
    margin: 0 !important; 
    font-size: 0.75rem !important; 
    white-space: nowrap !important;
}
.dataTables_filter label { width: 100% !important; justify-content: flex-end !important; }

/* 4. SAMAKAN TINGGI KOTAK TAMPIL & PENCARIAN AGAR LURUS */
.dt-length-col select, .dt-search-col input {
    height: 32px !important; 
    min-height: 32px !important;
    box-sizing: border-box !important;
}
.dt-length-col select { width: auto !important; min-width: 60px !important; margin: 0 8px !important; }
.dt-search-col input { width: 100% !important; max-width: 180px !important; min-width: 100px !important; margin-left: 8px !important; }

/* 5. TOMBOL EXPORT DEFAULT (PROPORSI IDEAL UNTUK DESKTOP) */
.dt-export-col .dt-buttons { 
    display: flex !important; 
    flex-wrap: nowrap !important; /* Paksa mutlak 1 baris */
    justify-content: center !important; 
    gap: 8px !important; /* Jarak antar tombol dibuat lebih lega */
    
    /* 💥 FIX: Izinkan melar, TAPI berikan batas maksimal agar tidak norak di layar TV/Besar 💥 */
    width: 100% !important; 
    max-width: 650px !important; 
}
.dt-export-col .btn-export { 
    flex: 1 1 0 !important; /* 💥 FIX: Bagi rata sisa ruang di dalam batas 650px tadi */
    min-width: 0 !important; 
    padding: 7px 10px !important; /* Padding agak dibesarkan biar tidak terlalu kurus */
    font-size: 0.75rem !important; /* Font sedikit dibesarkan agar mudah dibaca */
    white-space: nowrap !important; 
}
.dt-buttons .buttons-colvis span { 
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; 
}

/* ========================================================================== */
/* 📱 6. OVERRIDE UNTUK MOBILE & IPAD (< 991px)                               */
/* ========================================================================== */
@media (max-width: 991px) {
    .dt-top-controls { flex-wrap: wrap !important; gap: 8px 0 !important; }
    
    .dt-export-col { order: 1 !important; flex: 0 0 100% !important; width: 100% !important; margin-bottom: 4px !important; }
    
    /* 💥 KEMBALIKAN SIFAT MELAR 100% GRID KHUSUS HP/IPAD 💥 */
    .dt-export-col .dt-buttons { 
        display: grid !important; 
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; 
        gap: 6px !important; 
        width: 100% !important; 
        max-width: 100% !important; /* 💥 FIX: Cabut batas 650px agar rata pinggir di iPad */
    }
    .dt-export-col .btn-export { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 8px 4px !important; font-size: 0.65rem !important; }
    
    .dt-length-col { order: 2 !important; flex: 0 0 50% !important; max-width: 50% !important; padding-right: 4px !important; }
    .dt-search-col { order: 3 !important; flex: 0 0 50% !important; max-width: 50% !important; padding-left: 4px !important; }
    .dt-search-col input { max-width: 100% !important; min-width: 0 !important; margin-left: 6px !important; }
}

/* ========================================================================== */
/* 💻 7. OVERRIDE UNTUK KARTU KIRI (MASTER VLAN) DI DESKTOP (< 580px)         */
/* ========================================================================== */
@container dtWrap (max-width: 580px) {
    .dt-top-controls { flex-wrap: wrap !important; gap: 8px 0 !important; }
    
    .dt-export-col { order: 1 !important; flex: 0 0 100% !important; width: 100% !important; margin-bottom: 4px !important; }
    
    /* 💥 KEMBALIKAN SIFAT MELAR 100% GRID KHUSUS KARTU KIRI SEMPIT 💥 */
    .dt-export-col .dt-buttons { 
        display: grid !important; 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 4px !important; 
        width: 100% !important; 
        max-width: 100% !important; /* 💥 FIX: Cabut batas 650px agar rata pinggir */
    }
    .dt-export-col .btn-export { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 6px 4px !important; font-size: 0.65rem !important; }
    
    .dt-length-col { order: 2 !important; flex: 0 0 50% !important; max-width: 50% !important; padding-right: 4px !important; }
    .dt-search-col { order: 3 !important; flex: 0 0 50% !important; max-width: 50% !important; padding-left: 4px !important; }
    .dt-search-col input { max-width: 100% !important; min-width: 0 !important; margin-left: 6px !important; }
}

/* ============================================================== */
/* 💥 8. KUNCI SCROLL HORIZONTAL TABEL MOBILE & KARTU SEMPIT 💥   */
/* ============================================================== */
@media (max-width: 991px) {
    .table-responsive-custom .dataTables_wrapper > :nth-child(2) { display: block !important; flex: none !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; }
    .table-responsive-custom .dataTables_wrapper > :nth-child(2) > [class*="col-"] { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
    table.dataTable, table.dataTable thead, table.dataTable tbody { display: table !important; width: 100% !important; }
}

/* ========================================================================== */
/* CHAPTER 06: DASHBOARD WIDGETS, CARDS & HARDWARE METRICS                    */
/* ========================================================================== */
.card-smart { 
    border: 1px solid var(--border-color) !important; border-radius: 12px !important; 
    background-color: var(--bg-card) !important; /* 💥 FIX: KEMBALIKAN KE --bg-card AGAR FRAME MUNCUL 💥 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; 
    overflow: visible !important; transition: all 0.3s ease; 
    margin-bottom: 8px !important; 
    display: flex; flex-direction: column; min-width: 0; word-wrap: break-word;
}
.card-smart:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important; }
.card-smart > .card-header { padding: 0.6rem 1rem !important; height: auto !important; max-height: none !important; display: flex; align-items: center; justify-content: space-between; background-color: transparent; border-bottom: 1px solid var(--border-color); }
.card-smart > .card-header h6 { font-size: 1.15rem !important; }
.card-smart > .card-header h6 i { font-size: 1.25rem !important; }
.card-smart > .card-body { padding: 0.8rem 1rem !important; flex: 1 1 auto; min-height: 0; overflow: visible !important; position: relative !important; /* 🔴 STICKY & COLVIS AMAN */ }
.stat-node { cursor: pointer; transition: all 0.2s ease; }
.stat-node:hover { background-color: var(--table-hover) !important; border-radius: 12px; }

/* ========================================================================== */
/* 💥 MASTER HERO BANNER (SINKRONISASI TEMA SIDEBAR & LOGO GASS) 💥           */
/* ========================================================================== */
.hero-premium {
    /* 💥 Gradien Identitas GASS: Navy (Sidebar) -> Indigo -> Crimson Red (Aksen G) -> Cyan 💥 */
    background: linear-gradient(-45deg, #0f172a, #3730a3, #e11d48, #0ea5e9) !important;
    
    background-size: 300% 300% !important;
    animation: auroraWave 8s ease infinite !important;
    
    border-radius: 16px !important;
    padding: clamp(1rem, 2vh, 1.5rem) clamp(1.2rem, 2vw, 2rem) !important;
    margin-bottom: 1rem !important;
    /* Shadow disesuaikan menjadi warna Indigo/Biru Keunguan */
    box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.4) !important; 
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 15px;
}

/* Keyframes Aurora Wave (Tetap sama) */
@keyframes auroraWave {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Animasi Cahaya Berputar (Tetap sama) */
.hero-premium::before { 
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; 
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); 
    animation: rotateGlow 20s linear infinite; pointer-events: none; 
}
@keyframes rotateGlow { 100% { transform: rotate(360deg); } }

/* 🟢 1. KOTAK IKON (Gaya Glassmorphism Disesuaikan agar Netral) */
.hero-icon-box {
    width: clamp(45px, 5vw, 55px);
    height: clamp(45px, 5vw, 55px);
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.02) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255,255,255,0.1) !important;
    flex-shrink: 0;
    animation: levitateBox 3s ease-in-out infinite;
    /* 💥 FIX GPU: Beritahu browser bahwa ini akan bergerak */
    will-change: transform;
}

/* 💥 Keyframes Levitate (Diringankan): HANYA gerakkan transform, JANGAN animasikan box-shadow! 💥 */
@keyframes levitateBox {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

/* 🟢 2. TEKS JUDUL & DESKRIPSI (High Contrast) */
.hero-title-group { flex: 1; min-width: 200px; z-index: 1; }
.hero-premium h1, .hero-premium h4, .hero-premium h6 {
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Bayangan agar teks menonjol */
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.hero-premium p {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem) !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    color: rgba(255, 255, 255, 0.95) !important; /* Putih terang, bukan abu-abu */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.3;
}

/* 🟢 3. TOMBOL AKSI PREMIUM (Putih Bersih dengan Hover Animasi) */
.btn-hero-add {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #4f46e5 !important; /* Warna teks ungu indigo agar kontras */
    border: none !important;
    border-radius: 50px !important; /* Bentuk Pil Oval */
    padding: clamp(8px, 1.5vh, 12px) clamp(16px, 2vw, 24px) !important;
    font-weight: 800 !important;
    font-size: clamp(0.8rem, 1.5vw, 0.95rem) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 -2px 0 rgba(0,0,0,0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    white-space: nowrap;
    z-index: 1;
}
.btn-hero-add:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(0,0,0,0.05) !important;
    color: #ec4899 !important; /* Teks berubah pink saat disentuh */
}
.btn-hero-add i { font-size: 1.1em; color: #f59e0b !important; } /* Warna ikon bintang/plus di dalam tombol */

/* ========================================================================== */
/* 💥 ANIMASI IKON CUSTOM (SPEEDOMETER & GRAFIK) 💥                           */
/* ========================================================================== */

/* 1. Animasi Ngegas (Speedometer bergetar ke kanan-kiri) */
@keyframes gaspol {
    0% { transform: rotate(0deg) scale(1); }
    15% { transform: rotate(15deg) scale(1.1); }
    30% { transform: rotate(-5deg) scale(1.1); }
    45% { transform: rotate(20deg) scale(1.15); }
    60% { transform: rotate(0deg) scale(1.1); }
    75% { transform: rotate(10deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}
.icon-gaspol { 
    display: inline-block; 
    animation: gaspol 2.5s ease-in-out infinite; 
    transform-origin: bottom center; /* Sumbu putaran di bawah */
}

/* 2. Animasi Grafik Live (Naik Turun) */
@keyframes grafikLive {
    0% { transform: scaleY(1) translateY(0); }
    50% { transform: scaleY(1.3) translateY(-2px); }
    100% { transform: scaleY(1) translateY(0); }
}
.icon-grafik { 
    display: inline-block; 
    animation: grafikLive 1.5s ease-in-out infinite; 
    transform-origin: bottom; 
}

/* Dashboard Typo & Icons */
.text-huge { font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; line-height: 1.2; color: var(--text-main); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.text-gradient-primary { background-image: linear-gradient(135deg, #6366f1, #a855f7); }
.text-gradient-info { background-image: linear-gradient(135deg, #0ea5e9, #3b82f6); }
.text-gradient-success { background-image: linear-gradient(135deg, #22c55e, #10b981); }
.text-gradient-warning { background-image: linear-gradient(135deg, #f59e0b, #ea580c); }

/* 🔴 DIPANGKAS: Watermark Icon ukurannya dikecilkan agar muat di kotak pipih */
.bg-icon-watermark { position: absolute; right: -5px; bottom: -10px; font-size: 3rem !important; opacity: 0.05; z-index: -1; transform: rotate(-15deg); transition: 0.3s; }
.card-smart:hover .bg-icon-watermark { transform: rotate(0deg) scale(1.1); opacity: 0.1; }

.bg-gradient-total { background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%) !important; border-bottom: 4px solid #6366f1 !important; }
.bg-gradient-offline { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; border-bottom: 4px solid #f59e0b !important; }
.bg-gradient-los { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; border-bottom: 4px solid #ef4444 !important; }
html[data-theme="dark"] .bg-gradient-total { background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, rgba(99,102,241,0.15) 100%) !important; }
html[data-theme="dark"] .bg-gradient-offline { background: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, rgba(245,158,11,0.15) 100%) !important; }
html[data-theme="dark"] .bg-gradient-los { background: linear-gradient(135deg, rgba(239,68,68,0.05) 0%, rgba(239,68,68,0.15) 100%) !important; }

/* Hardware Metrics Widget (Router/Server/OLT) */
.hw-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px; transition: all 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.hw-card:hover { background: var(--table-hover); border-color: var(--accent-color); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.hw-icon-box { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.progress-premium { height: 10px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--border-color); overflow: hidden; }
.progress-bar-glow { box-shadow: 0 0 12px rgba(0,0,0,0.3); }

/* Sensor Hardware Modal Detail (OLT) */
.sensor-widget { background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); height: 100%; position: relative; overflow: hidden; }
.sensor-widget::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--accent-color); opacity: 0.5; border-radius: 14px 0 0 14px; }
.sensor-widget.power::before { background: #1cc88a; }
.sensor-widget.temp::before { background: #f6c23e; }
.sensor-widget.cpu::before { background: #4e73df; }
.sensor-widget.fan::before { background: #36b9cc; }
.sensor-widget:hover { background: var(--bg-body); transform: translateY(-3px); border-color: var(--accent-color); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.sensor-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: inset 0 0 20px rgba(0,0,0,0.3); background: linear-gradient(135deg, #4e73df 0%, #224abe 100%); }
.icon-glow { filter: drop-shadow(0 0 10px currentColor); }

/* Recent Status Card (LOS, Dying, Uncfg) */
.card-recent-los, .card-recent-dying, .card-recent-uncfg { position: relative; border: none !important; box-shadow: 0 6px 15px rgba(0,0,0,0.05) !important; border-radius: 14px !important; overflow: hidden; background-color: var(--bg-card) !important; }
.card-recent-los::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to right, #ef4444, #f97316); }
.card-recent-dying::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to right, #f59e0b, #eab308); }
.card-recent-uncfg::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to right, #0ea5e9, #3b82f6); }
.btn-badge-recent { transition: all 0.2s ease; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.btn-badge-recent:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); filter: brightness(0.95); }
.recent-item-hover { transition: all 0.2s ease; cursor: default; }
.recent-item-hover:hover { transform: translateX(4px); box-shadow: 0 4px 8px -1px rgba(0,0,0,0.1) !important; background-color: var(--table-hover) !important; }

/* Dashboard Widgets Scrolls */
.widget-scroll-area::-webkit-scrollbar { width: 5px; }
.widget-scroll-area::-webkit-scrollbar-track { background: transparent; }
.widget-scroll-area::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.widget-scroll-area::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.widget-scroll-area { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; padding-right: 4px; overflow-y: auto !important; overflow-x: hidden !important; }

/* ========================================================================== */
/* 🟢 FIX PENYAKIT GEPENG DI MOBILE (HP) - SINGLE MEDIA QUERY                 */
/* ========================================================================== */
@media (max-width: 991px) {
    #realtime-scan-panels {
        flex: none !important;
        height: auto !important;
        flex-direction: column !important; 
        margin-bottom: 1rem !important; 
        margin-left: -0.5rem !important; 
        margin-right: -0.5rem !important;
    }
    #realtime-scan-panels > div[class*="col-"] {
        flex: none !important;
        height: auto !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 1rem !important; 
    }
    
    /* 💥 CABUT GEMBOK FLEX & TINGGI AGAR KARTU BISA BERNAPAS! 💥 */
    #realtime-scan-panels > div[class*="col-"] > .card-smart,
    .card-recent-los .card-body,
    .card-recent-dying .card-body,
    .card-recent-uncfg .card-body {
        flex: 1 1 auto !important; 
        height: auto !important;
    }
    
    /* Beri batas wajar di HP agar tidak kepanjangan! (FULL REM STANDARD) */
    #list-scan-los, #list-scan-power, #list-scan-uncfg {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 7.5rem !important; /* Setara ~120px */
        max-height: 11rem !important; /* Setara ~224px (Layar HP tidak akan penuh) */
    }
}

/* ========================================================================== */
/* 🟢 1. BASE DESKTOP (LAPTOP 13" - 15" INCH) -> SPACE-EVENLY ENGINE          */
/* ========================================================================== */
@media (min-width: 992px) {

	/* 💥 KEMBALIKAN AUTO-STRETCH RECENT BOX DI DESKTOP 💥 */
    #realtime-scan-panels { margin-left: -0.75rem !important; margin-right: -0.75rem !important; margin-bottom: 0.75rem !important; flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; }
    #realtime-scan-panels > div[class*="col-"] { padding-left: 0.75rem !important; padding-right: 0.75rem !important; display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-width: none !important; }
    #realtime-scan-panels > div[class*="col-"] > .card-smart { margin: 0 !important; flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; position: relative !important; }
    .card-recent-los .card-body, .card-recent-dying .card-body, .card-recent-uncfg .card-body { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; padding-bottom: 0.75rem !important; }
    #list-scan-los, #list-scan-power, #list-scan-uncfg { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; }

    /* Layout Inti */
    html, body, #wrapper, #content-wrapper { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; }
    #content { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; height: 100% !important; }
    
    .container-fluid { 
        display: flex !important; flex-direction: column !important; 
        flex: 1 1 0 !important; min-height: 0 !important; height: 100% !important;
        overflow: hidden !important; padding-bottom: 0.25rem !important; 
    }
    
    .hero-premium, .hero-premium-core {
        flex: 0 0 auto !important; flex-shrink: 0 !important;
        padding: clamp(0.4rem, 1.2vh, 1rem) 1.2rem !important; 
        margin-bottom: clamp(0.2rem, 0.8vh, 0.6rem) !important;
    }
    .hero-premium h1.h4, .hero-premium h1 { font-size: clamp(1rem, 2.8vh, 1.4rem) !important; margin-bottom: 0.1vh !important; }
    .hero-premium p { display: block !important; font-size: clamp(0.6rem, 1.4vh, 0.85rem) !important; margin-bottom: 0 !important; opacity: 0.85; }

    .container-fluid > .row:not(.row-auto-stretch):not(:has(.widget-scroll-area)) { 
        flex: 0 0 auto !important; margin-bottom: clamp(0.2rem, 0.8vh, 0.6rem) !important; 
    }
    
    .container-fluid > .row:has(.widget-scroll-area), .row-auto-stretch { 
        flex: 1 1 0 !important; min-height: 0 !important; height: 100% !important;
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; 
        align-items: stretch !important; overflow: hidden !important; margin-bottom: 0 !important; 
    }
    
    .row-auto-stretch > [class*="col-"] { 
        display: flex !important; flex-direction: column !important; 
        flex: 1 1 0 !important; min-height: 0 !important; height: 100% !important;
    }
    
    .row-auto-stretch > [class*="col-"] > .card-smart { 
        flex: 1 1 0 !important; min-height: 0 !important; height: 100% !important;
        display: flex !important; flex-direction: column !important; margin-bottom: 0 !important; 
    }
    
    .row-auto-stretch > [class*="col-"] > .card-smart > .card-header { 
        flex: 0 0 auto !important; flex-shrink: 0 !important;
        padding: clamp(0.25rem, 0.8vh, 0.6rem) 1rem !important; 
        height: auto !important; min-height: 0 !important;
    }
    .card-smart > .card-header h6 { font-size: clamp(0.7rem, 1.8vh, 0.95rem) !important; margin: 0 !important;}
    
    .row-auto-stretch > [class*="col-"] > .card-smart > .card-body { 
        display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
        flex: 1 1 0 !important; min-height: 0 !important; height: 100% !important; 
        overflow: hidden !important; 
        padding: clamp(0.2rem, 0.8vh, 0.8rem) 0.8rem !important; 
    }
    
    /* 💥 KEMBALI KE SPACE-EVENLY AGAR MEMBAGI RUANG DENGAN CANTIK 💥 */
    #formGenerate {
        height: 100% !important; display: flex !important; flex-direction: column !important;
        justify-content: space-evenly !important; overflow: hidden !important; margin: 0 !important;
    }
    
    #formGenerate > .row {
        flex: 1 1 auto !important; min-height: 0 !important; margin: 0 !important; 
        display: flex; align-items: center; 
    }
    
    #formGenerate > hr { display: none !important; }
    
    #formGenerate > .row > [class*="col-"] {
        display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 0 !important;
    }

    #formGenerate > .row:last-child {
        flex: 0 0 auto !important; margin-top: clamp(2px, 0.5vh, 6px) !important;
    }

    #formGenerate div[class*="mb-"], #formGenerate div[class*="mt-"] { 
        margin-bottom: clamp(1px, 0.2vh, 4px) !important; margin-top: 0 !important; 
    }
    
    /* UKURAN AMAN LAPTOP 15 INCH */
    .row-auto-stretch .form-control, .row-auto-stretch select.form-control, .row-auto-stretch .input-group-text, .row-auto-stretch .btn, .row-auto-stretch .db-input {
        height: clamp(22px, 3.5vh, 32px) !important; min-height: 0 !important; 
        font-size: clamp(0.55rem, 1.2vh, 0.8rem) !important; 
        padding: 0 0.4rem !important; border-radius: 0.25rem !important;
    }
    
    .row-auto-stretch label, .row-auto-stretch .text-xs, .row-auto-stretch .small { 
        font-size: clamp(0.5rem, 1.1vh, 0.75rem) !important; 
        margin-bottom: clamp(1px, 0.2vh, 3px) !important; line-height: 1 !important;
    }
    
    #btnCariUncfg, #btnCekSN { height: clamp(22px, 3.5vh, 32px) !important; min-height: 0 !important; font-size: clamp(0.55rem, 1.2vh, 0.8rem) !important; line-height: 1 !important; padding: 0 0.5rem !important;}
    #btnAddToQueue { height: clamp(26px, 4.2vh, 36px) !important; min-height: 0 !important; font-size: clamp(0.65rem, 1.4vh, 0.9rem) !important; line-height: 1 !important; margin-top: 0 !important;}
    #btnPreviewFull, #btnCopyScript, #btnCommitAll { height: clamp(22px, 3.5vh, 32px) !important; min-height: 0 !important; font-size: clamp(0.55rem, 1.1vh, 0.75rem) !important; }
    
    /* Kanan: Keranjang & CLI */
    #cli-container { overflow: hidden !important; }
    .queue-split-top { flex: 0 1 40% !important; min-height: 0 !important; margin-bottom: clamp(2px, 0.5vh, 6px) !important; overflow-y: auto !important; }
    .queue-split-bottom { flex: 1 1 60% !important; min-height: 0 !important; overflow-y: auto !important; }

    .theme-item { padding: clamp(4px, 0.8vh, 8px) 0.6rem !important; margin-bottom: clamp(2px, 0.5vh, 6px) !important; border-radius: 0.4rem !important; }
    .theme-item > div > span { font-size: clamp(0.65rem, 1.3vh, 0.85rem) !important; margin-bottom: 0 !important; }
    .theme-item small { font-size: clamp(0.55rem, 1.1vh, 0.7rem) !important; line-height: 1 !important; }
    .color-picker-premium { width: clamp(18px, 3vh, 24px) !important; height: clamp(18px, 3vh, 24px) !important; }
    
    table.dataTable thead th { padding: clamp(3px, 0.8vh, 6px) 1rem clamp(3px, 0.8vh, 6px) 0.4rem !important; font-size: clamp(0.6rem, 1.2vh, 0.75rem) !important; border-bottom: 1px solid var(--border-color) !important; }
    table.dataTable tbody td { padding: clamp(2px, 0.5vh, 5px) 0.4rem !important; font-size: clamp(0.6rem, 1.2vh, 0.75rem) !important; }
    .dataTables_wrapper .dataTables_paginate { margin-top: clamp(2px, 0.5vh, 6px) !important; }
    .dataTables_wrapper .dataTables_paginate .page-link { padding: clamp(2px, 0.4vh, 5px) 0.4rem !important; font-size: clamp(0.6rem, 1.2vh, 0.75rem) !important; }
}

/* ========================================================================== */
/* 🟢 2. MONITOR BESAR 1080p (24" INCH) -> ELEMEN MEMBESAR PROPORSIONAL       */
/* ========================================================================== */
@media (min-width: 1500px) {
    /* 💥 Di layar 24 inch, form TETAP space-evenly, TAPI input membesar jadi 42px agar menyedot ruang kosong! 💥 */
    .row-auto-stretch .form-control, .row-auto-stretch select.form-control, .row-auto-stretch .input-group-text, .row-auto-stretch .btn, .row-auto-stretch .db-input {
        height: 42px !important; font-size: 0.95rem !important; padding: 0 0.8rem !important; border-radius: 6px !important;
    }
    .row-auto-stretch label, .row-auto-stretch .text-xs, .row-auto-stretch .small { 
        font-size: 0.85rem !important; margin-bottom: 4px !important;
    }
    #btnCariUncfg, #btnCekSN { height: 42px !important; font-size: 0.9rem !important; }
    #btnAddToQueue { height: 50px !important; font-size: 1.1rem !important; margin-top: 8px !important; border-radius: 6px !important; }
    #btnPreviewFull, #btnCopyScript, #btnCommitAll { height: 38px !important; font-size: 0.85rem !important; }
    
    .hero-premium h1.h4, .hero-premium h1 { font-size: 1.8rem !important; margin-bottom: 0.5rem !important; }
    .hero-premium p { font-size: 1rem !important; }
    
    .card-smart > .card-header h6 { font-size: 1.1rem !important; }
    table.dataTable thead th { font-size: 0.9rem !important; padding: 8px 1rem 8px 0.6rem !important; }
    table.dataTable tbody td { font-size: 0.9rem !important; padding: 6px 0.6rem !important; }
    .dataTables_wrapper .dataTables_paginate .page-link { font-size: 0.9rem !important; padding: 6px 12px !important; }
}

/* ========================================================================== */
/* 🟢 3. RAKSASA MODE (TV 4K / 8K / 2560p KE ATAS)                            */
/* ========================================================================== */
@media (min-width: 2500px) {
    /* 💥 Di Layar Super Raksasa, ukuran membesar habis-habisan! 💥 */
    .row-auto-stretch .form-control, .row-auto-stretch select.form-control, .row-auto-stretch .input-group-text, .row-auto-stretch .btn, .row-auto-stretch .db-input {
        height: 60px !important; font-size: 1.25rem !important; padding: 0 1.2rem !important; border-radius: 10px !important;
    }
    .row-auto-stretch label, .row-auto-stretch .text-xs, .row-auto-stretch .small { 
        font-size: 1.15rem !important; margin-bottom: 8px !important;
    }
    #formGenerate div[class*="mb-"], #formGenerate div[class*="mt-"] { margin-bottom: 12px !important; }
    
    #btnCariUncfg, #btnCekSN { height: 60px !important; font-size: 1.15rem !important; }
    #btnAddToQueue { height: 80px !important; font-size: 1.6rem !important; margin-top: 15px !important; border-radius: 12px !important; }
    #btnPreviewFull, #btnCopyScript, #btnCommitAll { height: 55px !important; font-size: 1.1rem !important; }
    
    .hero-premium h1.h4, .hero-premium h1 { font-size: 2.5rem !important; margin-bottom: 1rem !important; }
    .hero-premium p { font-size: 1.4rem !important; }
    
    .card-smart > .card-header h6 { font-size: 1.5rem !important; }
    table.dataTable thead th { font-size: 1.2rem !important; padding: 12px !important; }
    table.dataTable tbody td { font-size: 1.2rem !important; padding: 10px !important; }
    .dataTables_wrapper .dataTables_paginate .page-link { font-size: 1.2rem !important; padding: 10px 18px !important; }
}

/* --- 2. MODE MOBILE & TABLET (SCROLL NATURAL) --- */
@media (max-width: 991px) {
    /* 📱 Di HP, layar TERLALU KECIL untuk menampung semua. 
       Maka kita biarkan body bisa di-scroll seperti web pada umumnya */
    body, #wrapper, #content-wrapper, #content { 
        height: auto !important; min-height: 100vh !important; 
        overflow-y: auto !important; overflow-x: hidden !important; 
    }
    
    /* Namun kotak log dibatasi maksimal 35% tinggi HP agar tak mendominasi layar */
    .widget-scroll-area { 
        min-height: 250px !important; max-height: 35vh !important; 
        height: auto !important; overflow-y: auto !important; 
    }
    .container-fluid > .row { margin-bottom: 1rem !important; }
}

/* 🔴 DIPANGKAS: Padding kotak atas (Bot & Summary) */
#zone-bot-status .card-smart.p-3, 
#zone-onu-summary .card-smart.p-3 {
    padding: 0.6rem 1rem !important; 
    min-height: auto !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 🟢 DIPANGKAS EKSTREM: Padding kotak paling bawah (Customer & Teknisi) */
#zone-customer-stats .card-smart,
#zone-teknisi-stats .card-smart {
    padding: 0.3rem 1rem !important; /* Atas-bawah sangat ditipiskan */
    min-height: auto !important;
    justify-content: center !important;
    align-items: center !important;
}

#zone-bot-status .mb-2, 
#zone-onu-summary .mb-3 {
    margin-top: 0 !important;
    margin-bottom: 0.35rem !important; /* 🟢 Jarak teks ke badge dikurangi sedikit */
    font-size: 0.7rem !important;
    letter-spacing: 0.5px !important;
}

#zone-bot-status .status-badge, 
#zone-onu-summary .status-badge {
    padding: 4px 12px !important; /* 🟢 Ruang di dalam badge dikurangi 1px atas-bawah */
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}

.card-recent-los .card-body,
.card-recent-dying .card-body,
.card-recent-uncfg .card-body {
	justify-content: flex-start !important;
    padding-top: 0.5rem !important; /* 🟢 Ruang atas diturunkan sedikit */
    padding-bottom: 0.3rem !important; /* 🟢 Ruang bawah diturunkan sedikit */
}

.card-recent-los h6, 
.card-recent-dying h6, 
.card-recent-uncfg h6 {
    margin-bottom: 0.3rem !important; /* 🟢 Jarak judul log ke list ONU dirapatkan sedikit */
}

/* Core Monitoring (Smokeping/Mac-Window) */
.hero-premium-core { background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%); padding: 0.8rem 1.2rem; border-radius: 18px; box-shadow: 0 12px 30px rgba(14, 165, 233, 0.25); margin-bottom: 1.8rem; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.hero-premium-core::before { content: ''; position: absolute; top: -50%; right: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%); border-radius: 50%; pointer-events: none; }
.btn-gradient-light { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); color: #0f172a; border: none; box-shadow: 0 6px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; font-weight: 700; font-size: 0.95rem; padding: 10px 20px;}
.btn-gradient-light:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); color: #2563eb; }

.mac-window { border-radius: 18px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 20px 50px rgba(0,0,0,0.15); background: var(--bg-card); position: relative; display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 650px; }
.mac-header { background: linear-gradient(to bottom, #f8fafc, #e2e8f0); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
[data-theme="dark"] .mac-header { background: linear-gradient(to bottom, #1e293b, #0f172a); border-bottom: 1px solid #020617; }
.mac-dots { display: flex; gap: 10px; }
.mac-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 1px 3px rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.2); }
.dot-red { background: #ef4444; } .dot-yellow { background: #f59e0b; } .dot-green { background: #22c55e; }

.iframe-container { position: relative; width: 100%; flex-grow: 1; background: #ffffff; transition: all 0.3s ease; }
.iframe-container iframe { width: 100%; height: 100%; border: none; opacity: 0; transition: opacity 0.5s ease-in-out; position: absolute; top: 0; left: 0; z-index: 2; }
[data-theme="dark"] .iframe-container { background-color: #111827; border-top: 1px solid #334155;}
[data-theme="dark"] .iframe-container iframe { filter: invert(0.92) hue-rotate(180deg) brightness(1.05) contrast(1.05); }

.iframe-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-card); z-index: 10; }

/* ========================================================================== */
/* CHAPTER 07: BADGES & STATUS INDICATORS                                     */
/* ========================================================================== */
.status-badge { padding: 6px 10px !important; font-size: 0.75rem !important; border-radius: 10px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; text-transform: uppercase; }
.status-online { background: rgba(34, 197, 94, 0.15); color: var(--neon-green); }
.status-offline { background: rgba(239, 68, 68, 0.15); color: var(--neon-red); }
.status-warning { background: rgba(245, 158, 11, 0.15); color: var(--neon-orange); }

.dot-pulse { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-online .dot-pulse { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
.status-offline .dot-pulse { background: var(--neon-red); box-shadow: 0 0 10px var(--neon-red); }
.status-warning .dot-pulse { background: var(--neon-orange); box-shadow: 0 0 10px var(--neon-orange); }

.badge-los { padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 800; background: rgba(239, 68, 68, 0.15); color: var(--neon-red); display: inline-block; }
.badge-off { padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 800; background: var(--input-bg); color: var(--text-muted); display: inline-block; border: 1px solid var(--border-color); }
.badge-dying { padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 800; background: rgba(245, 158, 11, 0.15); color: var(--neon-orange); display: inline-block; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-online { padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 800; background: rgba(34, 197, 94, 0.15); color: var(--neon-green); display: inline-block; }
.badge-cause { background: rgba(245, 158, 11, 0.1); color: var(--neon-orange); padding: 5px 12px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-odp { background: var(--badge-bg); color: var(--badge-text); padding: 5px 12px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; border: 1px solid var(--border-color); }

.badge-role { padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; }
.badge-superadmin { background-color: rgba(239, 68, 68, 0.15); color: var(--neon-red); border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-admin { background-color: rgba(245, 158, 11, 0.15); color: var(--neon-orange); border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-teknisi { background-color: rgba(99, 102, 241, 0.15); color: var(--accent-color); border: 1px solid rgba(99, 102, 241, 0.3); }
.badge-pelanggan { background-color: rgba(34, 197, 94, 0.15); color: var(--neon-green); border: 1px solid rgba(34, 197, 94, 0.3); }
.badge-unknown { background-color: var(--input-bg); color: var(--text-muted); border: 1px solid var(--border-color); }

.badge-status { padding: 5px 12px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
.status-active { background-color: rgba(34, 197, 94, 0.15); color: var(--neon-green); }
.status-inactive { background-color: rgba(239, 68, 68, 0.15); color: var(--neon-red); }
.badge-pending { background: rgba(245, 158, 11, 0.15); color: var(--neon-orange); border: 1px solid rgba(245, 158, 11, 0.2); }
.badge-solved { background: rgba(34, 197, 94, 0.15); color: var(--neon-green); border: 1px solid rgba(34, 197, 94, 0.2); }

.badge-area { background: var(--badge-bg); color: var(--badge-text); font-weight: 700; font-size: 0.8rem; padding: 8px 14px; border-radius: 8px; }
.badge-brand { background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; }
.badge-port { background: rgba(14, 165, 233, 0.15) !important; color: var(--neon-blue) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; font-weight: 800 !important; font-size: 0.75rem !important; padding: 4px 10px !important; border-radius: 6px !important; letter-spacing: 0.5px !important; }

/* Status Dot OLT / General */
.status-dot { height: 14px; width: 14px; border-radius: 50%; display: inline-block; margin: 0 auto; }
.dot-online { background-color: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, 0.6); }
.dot-offline { background-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.6); animation: pulse-red 1.5s infinite alternate; }
@keyframes pulse-red { from { opacity: 1; transform: scale(1); } to { opacity: 0.5; transform: scale(0.9); } }

/* Grup Notifikasi Gradient */
.bg-gradient-wa { background: linear-gradient(135deg, #25D366, #128C7E) !important; color: white !important; border: none; }
.bg-gradient-tg { background: linear-gradient(135deg, #0088cc, #005f8e) !important; color: white !important; border: none; }
.bg-gradient-area { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: white !important; border: none; }

#tableGroups tbody td .badge, #tableGroups tbody td .btn-sm {
    padding: 8px 12px !important; font-size: 0.8rem !important; font-weight: 700 !important;
    border-radius: 50px !important; cursor: pointer !important; user-select: none !important; 
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    display: inline-flex !important; align-items: center !important; margin: 4px 4px !important; 
}
#tableGroups tbody td .badge:active, #tableGroups tbody td .btn-sm:active { transform: scale(0.88) !important; box-shadow: 0 0 0 rgba(0,0,0,0) !important; filter: brightness(0.9); }

/* ========================================================================== */
/* 💥 FIX: MEMAKSA LENCANA DI KOLOM KE-3 (SFP PORT) MENJADI PREMIUM NEON      */
/* (DIKUNCI HANYA UNTUK TABEL VLAN AGAR TIDAK MERUSAK STATUS ROUTER/OLT)      */
/* ========================================================================== */
table#tableVlan tbody td:nth-child(3) .badge,
table#tableVlan tbody td:nth-child(3) span {
    background: rgba(14, 165, 233, 0.15) !important; 
    color: var(--neon-blue) !important; 
    border: 1px solid rgba(14, 165, 233, 0.3) !important; 
    font-weight: 800 !important; 
    font-size: 0.75rem !important; 
    padding: 5px 12px !important; 
    border-radius: 6px !important; 
    letter-spacing: 0.5px !important;
    box-shadow: none !important;
}

/* ========================================================================== */
/* CHAPTER 08: FORMS, BUTTONS & MODALS                                        */
/* ========================================================================== */
/* Modals */
.modal-content { background-color: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color) !important; border-radius: 20px !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important; }
.modal-header { border-bottom: 1px solid var(--border-color) !important; background: rgba(99, 102, 241, 0.05); border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 1rem 1.5rem !important; }
.modal-header-premium { background: linear-gradient(135deg, rgba(78, 115, 223, 0.1) 0%, rgba(34, 74, 190, 0.05) 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.modal-footer { border-top: 1px solid var(--border-color) !important; padding: 1rem 1.5rem !important; }
.modal-title { font-weight: 800; font-size: 1.25rem; color: var(--accent-color); }
.close { color: var(--text-muted); text-shadow: none; opacity: 1; font-size: 1.5rem;}
.close:hover { color: var(--neon-red); }

/* Forms Standard */
.form-control, .form-select { border-radius: 10px; border: 1px solid var(--border-color); padding: 0.6rem 1rem; font-size: 1rem; background-color: var(--input-bg); color: var(--text-main) !important; transition: all 0.3s ease; }
/* 💥 FIX: Terangkan teks bayangan (placeholder) LINTAS BROWSER */
.form-control::-webkit-input-placeholder, .form-control-sm::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--text-secondary) !important; opacity: 0.9 !important; }
.form-control::-moz-placeholder, .form-control-sm::-moz-placeholder, textarea::-moz-placeholder { color: var(--text-secondary) !important; opacity: 0.9 !important; }
.form-control::placeholder, .form-control-sm::placeholder, textarea::placeholder { color: var(--text-secondary) !important; opacity: 0.9 !important; }
.form-control:focus, .form-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); background-color: var(--bg-card); }
.form-control.border-left-0 { border-radius: 0 10px 10px 0; }
/* 💥 FIX: Matikan efek kusam bawaan browser pada input readonly/disabled */
.form-control[readonly], .form-control:disabled, .form-select:disabled { 
    background-color: var(--table-hover) !important; 
    opacity: 1 !important; /* Hilangkan efek transparan bawaan browser */
    font-weight: 700 !important; 
    color: var(--text-main) !important; /* Paksa teks menyala terang */
    cursor: not-allowed; 
}
.input-group-text { background-color: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 10px 0 0 10px; }
label { font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem; font-size: 0.95rem; }
label.small { font-size: 0.85rem !important; }

/* Forms Premium Addon */
.input-group-text.premium-addon { background-color: var(--input-bg); border: 1px solid var(--border-color); border-right: none; color: var(--text-muted); border-radius: 8px 0 0 8px; }
.form-control.premium-input { background-color: var(--input-bg) !important; border: 1px solid var(--border-color); border-left: none; color: var(--text-main) !important; border-radius: 0 8px 8px 0; transition: all 0.3s ease; }
.form-control.premium-input:focus { box-shadow: none; border-color: var(--accent-color); background-color: var(--bg-body) !important; }
.input-group:focus-within .premium-addon { border-color: var(--accent-color); color: var(--accent-color); }

/* 💥 STANDAR KOTAK INPUT COMPACT (GLOBAL UNTUK PROFILE & SETTINGS) 💥 */
.form-control-sm, .form-select-sm { 
    height: 32px !important; min-height: 32px !important; 
    padding: 0.2rem 0.6rem !important; font-size: 0.75rem !important; 
    border-radius: 6px !important; border: 1px solid var(--border-color) !important; 
    background-color: var(--input-bg) !important; box-shadow: none !important; 
    color: var(--text-main) !important; font-weight: 700 !important; 
}
.form-control-sm:focus, .form-select-sm:focus { 
    border-color: var(--accent-color) !important; background-color: var(--bg-card) !important; 
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important; outline: none !important;
}

/* Standarisasi Label Ikon (Anti-Kotor HTML) */
.label-compact {
    font-size: 0.65rem !important; margin-bottom: 4px !important; 
    text-transform: uppercase; letter-spacing: 0.5px; 
    font-weight: 800 !important; color: var(--text-secondary) !important; line-height: 1 !important;
}
.label-compact i { font-size: 0.75rem !important; width: 14px; text-align: center; }

/* ========================================================================== */
/* 🟢 PREMIUM LABEL ICON BOX (ULTRA COMPACT - REM SCALING)                    */
/* ========================================================================== */
.icon-box-sm {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 1.25rem !important; height: 1.25rem !important; border-radius: 0.25rem !important; /* 💥 FIX: Menggunakan REM agar elastis! */
    color: #ffffff !important; box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    flex-shrink: 0 !important;
}
.icon-box-sm i { font-size: 0.65rem !important; margin: 0 !important; } /* 💥 FIX: Ukuran ikon proporsional dengan REM */

.bg-grad-primary { background: linear-gradient(135deg, var(--accent-color), #a855f7) !important; }
.bg-grad-success { background: linear-gradient(135deg, var(--neon-green), #059669) !important; }
.bg-grad-warning { background: linear-gradient(135deg, var(--neon-orange), #ea580c) !important; }
.bg-grad-info { background: linear-gradient(135deg, var(--neon-blue), #2563eb) !important; }
.bg-grad-danger { background: linear-gradient(135deg, var(--neon-red), #e11d48) !important; }

/* 💥 Pengecualian Khusus Textarea agar bisa ditarik melar 💥 */
textarea.form-control-sm {
    height: auto !important; 
    min-height: 60px !important; 
    padding-top: 8px !important; 
    line-height: 1.4 !important;
    resize: none; /* Matikan resize manual karena akan melar otomatis */
}

/* Form Ultra-Compact (Modals) - BERLAKU UNTUK SEMUA HALAMAN */
.modal-lg { max-width: 750px !important; }

/* 💥 AUTO-FIT MODAL ENGINE (ANTI POTONG & ANTI GHOST SCROLLBAR) 💥 */
.modal-dialog { display: flex !important; align-items: center !important; min-height: calc(100% - 1rem) !important; margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.modal-content { height: auto !important; max-height: calc(100vh - 2rem) !important; flex: 0 1 auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }

/* 💥 KUNCI SAKTI: Jembatan Flexbox untuk tag <form> agar tombol Footer tidak tertelan! 💥 */
.modal-content form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; width: 100% !important; }

.modal-body { overflow-y: auto !important; flex: 1 1 auto !important; min-height: 0 !important; }

/* Pembunuh Padding Kuno Bootstrap di Modal */
.modal .modal-header { padding: 0.8rem 1.2rem !important; min-height: 0 !important; align-items: center !important; flex-shrink: 0 !important; }
.modal .modal-body { padding: 1rem 1.2rem !important; flex: 1 1 auto !important; }
.modal .modal-footer { padding: 0.8rem 1.2rem !important; flex-shrink: 0 !important; }

/* Rapatkan Jarak Antar Input */
.modal .form-group, .modal div[class*="mb-"] { margin-bottom: 0.4rem !important; }
.modal label.small { font-size: 0.65rem !important; margin-bottom: 2px !important; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800 !important; color: var(--text-secondary) !important; line-height: 1 !important;}

/* Desain Input Premium - SUPER PIPIH (TIDAK BERLAKU UNTUK MULTI-SELECT) */
.modal .form-control:not([multiple]):not(textarea), .modal select.form-control:not([multiple]), .modal .input-group-text { 
    height: 32px !important; min-height: 32px !important; 
    padding: 0.2rem 0.6rem !important; font-size: 0.75rem !important; 
    border-radius: 6px !important; border: 1px solid var(--border-color) !important; 
    background-color: var(--input-bg) !important; box-shadow: none !important; 
    color: var(--text-main) !important; font-weight: 700 !important; 
}
.modal .form-control:not([multiple]):not(textarea):focus { border-color: var(--accent-color) !important; background-color: var(--bg-card) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;}

/* 💥 KHUSUS MULTI-SELECT ZTNA (ANTI-GEPENG & KLIK MUDAH) 💥 */
.modal select[multiple].form-control {
    height: auto !important; 
    min-height: 100px !important;
    max-height: 140px !important;
    padding: 4px !important; 
    font-size: 0.75rem !important; 
    border-radius: 8px !important; 
    border: 1px solid var(--border-color) !important; 
    background-color: var(--input-bg) !important; 
    color: var(--text-main) !important; 
    font-weight: 700 !important; 
    overflow-y: auto !important;
}
.modal select[multiple] option {
    padding: 6px 10px !important;
    margin-bottom: 2px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: 0.1s !important;
}
.modal select[multiple] option:hover {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: var(--accent-color) !important;
}
.modal select[multiple] option:checked {
    background: linear-gradient(135deg, var(--accent-color), #818cf8) !important;
    color: white !important;
    font-weight: 800 !important;
}

/* 💥 KHUSUS TEXTAREA ALAMAT (LEBIH LEGA) 💥 */
.modal textarea.form-control { 
    height: auto !important; min-height: 50px !important; /* Pas untuk 2-3 baris teks */
    padding-top: 6px !important; line-height: 1.3 !important; resize: none; 
}

/* Ikon di dalam Kotak Input */
.modal .input-group-text { border-radius: 6px 0 0 6px !important; background-color: var(--bg-body) !important; border-right: none !important; padding: 0 10px !important; width: 36px !important; justify-content: center !important; }
.modal .input-group-text i { color: var(--text-muted); font-size: 0.8rem !important; } 
.modal .premium-input { border-radius: 0 6px 6px 0 !important; border-left: none !important; }
.modal .input-group:focus-within .input-group-text, .modal .input-group:focus-within .premium-input { border-color: var(--accent-color) !important; background-color: var(--bg-card) !important; color: var(--accent-color) !important;}

/* Penyesuaian Ikon di dalam Label agar sejajar presisi */
.modal label.small i {
    font-size: 0.75rem !important;
    width: 14px;
    text-align: center;
}

/* Buttons */
.btn { border-radius: 10px !important; font-weight: 700 !important; letter-spacing: 0.3px; transition: all 0.2s ease !important; font-size: 1rem; padding: 10px 24px; }
.btn-custom-save { background: linear-gradient(135deg, var(--accent-color), #818cf8); border: none; color: white; font-weight: 700; border-radius: 10px; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
.btn-custom-save:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); color: white; }
.btn-custom-cancel { background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); font-weight: 600; border-radius: 10px; transition: all 0.3s ease; }
.btn-custom-cancel:hover { background: var(--table-hover); color: var(--text-secondary); }

.btn-action { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; transition: all 0.2s; border: 1px solid var(--border-color) !important; background: var(--input-bg); color: var(--text-main); margin: 0 3px; font-size: 1.1rem; }
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.btn-test { background: var(--input-bg); color: #0ea5e9; }
.btn-test:hover { background: var(--table-hover); border-color: #0ea5e9; transform: scale(1.05); }
.btn-edit { background: var(--input-bg); color: var(--neon-orange); }
.btn-edit:hover { background: var(--table-hover); border-color: var(--neon-orange); transform: scale(1.05); }
.btn-delete { background: var(--input-bg); color: var(--neon-red); }
.btn-delete:hover { background: var(--table-hover); border-color: var(--neon-red); transform: scale(1.05); }

/* Hubungkan Tombol Primary dengan Aksen Global Kustomisasi */
.btn-primary { background-color: var(--accent-color) !important; border-color: var(--accent-color) !important; color: #ffffff !important;}
.btn-outline-primary { color: var(--accent-color) !important; border-color: var(--accent-color) !important; }
.btn-outline-primary:hover { background-color: var(--accent-color) !important; color: #ffffff !important; }

/* Filter & Settings UI */
.filter-select-premium { height: 42px !important; padding: 6px 14px !important; line-height: 1.5; -webkit-appearance: auto !important; -moz-appearance: auto !important; appearance: auto !important; font-size: 1rem !important;}
.color-picker-premium { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 36px; height: 36px; background-color: transparent; border: none; cursor: pointer; padding: 0; }
.color-picker-premium::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-premium::-webkit-color-swatch { border: 2px solid var(--border-color); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.color-picker-premium::-moz-color-swatch { border: 2px solid var(--border-color); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

/* ========================================================================== */
/* 🟢 GLOBAL HEADER FILTER SELECT (AUTO-FIT MOBILE & DESKTOP)                 */
/* ========================================================================== */
.header-filter-select {
    width: 100%;
    text-align-last: center;
    border-radius: 20px !important;
    background: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-filter-select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
    outline: none;
}

@media (min-width: 768px) {
    .header-filter-select {
        width: 250px;
        text-align-last: left;
    }
}

/* ========================================================================== */
/* KOTAK SETTINGS & ADVANCE THEME TABS                                        */
/* ========================================================================== */
.theme-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s ease-in-out; font-size: 0.95rem; font-weight: 600;}
.theme-item:hover { border-color: var(--accent-color); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.theme-item .text-main { color: var(--text-main); } /* 👈 Masuk di sini dengan manis */

.custom-theme-tabs .nav-link { color: var(--text-muted); border-radius: 12px; padding: 12px 16px; font-size: 0.85rem; transition: all 0.2s; border: 1px solid transparent; }
.custom-theme-tabs .nav-link:hover { background: var(--table-hover); color: var(--text-main); }
.custom-theme-tabs .nav-link.active { background: rgba(168, 85, 247, 0.1); color: #a855f7 !important; border: 1px solid rgba(168, 85, 247, 0.3); }

.db-form-group { margin-bottom: 0.5rem !important; }
.db-label { font-size: 0.7rem !important; margin-bottom: 2px !important; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; color: var(--text-muted); }
.db-input { height: 32px !important; min-height: 32px !important; padding: 0.2rem 0.6rem !important; font-size: 0.8rem !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; background-color: var(--input-bg) !important; color: var(--text-main) !important; font-weight: 700; }
.db-input:focus { border-color: var(--accent-color) !important; background-color: var(--bg-card) !important; outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important; }

/* ========================================================================== */
/* CHAPTER 09: CONFIG ONU, SCRIPT EDITOR & AUTOCOMPLETE                       */
/* ========================================================================== */

/* A. Autocomplete (Search Results) */
.search-results-container { 
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important;       
    background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; 
    border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; 
    max-height: 220px !important; overflow-y: auto !important; overflow-x: hidden !important;
    z-index: 1000 !important; display: none; margin-top: 4px !important;
}
.search-item { padding: 6px 10px !important; border-bottom: 1px solid var(--border-color) !important; cursor: pointer !important; transition: all 0.15s !important; line-height: 1.2 !important; }
.search-item:last-child { border-bottom: none !important; }
.search-item:hover { background: var(--table-hover) !important; padding-left: 14px !important; }
.search-item .name { font-size: 0.7rem !important; font-weight: 800 !important; color: var(--accent-color) !important; margin-bottom: 3px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.search-item .id { font-size: 0.6rem !important; font-weight: 700 !important; color: var(--text-muted) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.search-item .id i { font-size: 0.6rem !important; }
.search-results-container::-webkit-scrollbar { width: 6px; }
.search-results-container::-webkit-scrollbar-track { background: transparent; }
.search-results-container::-webkit-scrollbar-thumb { background: rgba(150,150,150,0.3); border-radius: 6px; }

/* B. Form Parameter Provisioning (Kiri) */
#form-container-scroll { padding: 0.5rem 0.8rem !important; overflow-y: auto; }
#formGenerate .mb-2, #formGenerate .mb-1 { margin-bottom: 0.25rem !important; }
#formGenerate hr { margin-top: 0.2rem !important; margin-bottom: 0.25rem !important; padding: 0 !important; }
#formGenerate label { font-size: 0.6rem !important; margin-bottom: 0.1rem !important; line-height: 1 !important; }
#formGenerate .form-control, #formGenerate select.form-control, #formGenerate .input-group-text, #formGenerate .btn {
    height: 24px !important; min-height: 24px !important; padding: 0px 8px !important; font-size: 0.7rem !important; border-radius: 4px !important;
}
#btnCariUncfg, #btnCekSN { height: 24px !important; min-height: 24px !important; padding: 0 8px !important; font-size: 0.65rem !important; line-height: 24px !important; display: inline-flex; align-items: center; }
#btnAddToQueue { height: 26px !important; min-height: 26px !important; padding: 0 !important; font-size: 0.65rem !important; line-height: 26px !important; margin-top: 0.3rem !important; }
#onu_stats { font-size: 0.5rem !important; margin-top: 2px !important; }

/* C. Cli-Container & Script Editor (Kanan Bawah) */
#cli-container { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; padding: 0.4rem 0.6rem !important; }
.queue-scroll-area { max-height: 150px !important; overflow-y: auto; margin-bottom: 0.5rem !important; border-radius: 6px; border: 1px solid var(--border-color); }
.table-queue th, .table-queue td { padding: 0.4rem 0.6rem !important; font-size: 0.7rem !important; vertical-align: middle !important; color: var(--text-main) !important; }

/* 💥 FIX: WADAH EDITOR BAWAH DIBUAT ADAPTIF 💥 */
#visual_script_editor { 
    flex-grow: 1 !important; height: 0 !important; min-height: 200px !important; max-height: none !important; 
    margin-bottom: 0 !important; padding: 12px 14px !important; border-radius: 6px !important; overflow-y: auto !important;
    font-size: 0.7rem !important; line-height: 1.4 !important;
    font-family: 'Consolas', 'JetBrains Mono', monospace !important; 
    background-color: var(--table-hover) !important; /* Terang di Light Mode */
    color: var(--text-main) !important; 
    border: 1px solid var(--border-color) !important; 
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05) !important;
    white-space: pre-wrap !important; word-wrap: break-word !important; word-break: break-word !important; overflow-x: hidden !important; resize: none !important;
}
[data-theme="dark"] #visual_script_editor { 
    background-color: #020617 !important; /* Hitam pekat di Dark Mode */
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5) !important; 
}

/* ========================================================================== */
/* 💥 TOMBOL CLOSE MODAL PREMIUM (LINGKARAN NEON MERAH) 💥                    */
/* ========================================================================== */
.modal-header .close {
    padding: 0 !important;
    margin: -0.2rem -0.2rem -0.2rem auto !important; 
    color: var(--neon-red, #ef4444) !important;
    opacity: 1 !important; /* 💥 FIX: Kembalikan ke 100% agar tidak pudar */
    text-shadow: none !important;
    background: rgba(239, 68, 68, 0.15) !important; 
    border: 1px solid rgba(239, 68, 68, 0.3) !important; /* 💥 FIX: Tambahkan garis tepi penegas */
    border-radius: 50% !important; 
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
}

/* Efek saat tombol disentuh atau di-hover */
.modal-header .close:hover,
.modal-header .close:active {
    background: var(--neon-red, #ef4444) !important; 
    color: #ffffff !important; 
    transform: scale(1.1) !important; 
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4) !important; 
}

/* Menyesuaikan ukuran silang (X) di tengah lingkaran */
.modal-header .close span {
    font-size: 1.5rem !important; /* 💥 FIX: Ukuran sedikit dibesarkan */
    font-weight: 900 !important; /* 💥 FIX: Dipaksa tebal maksimal (Bold) */
    line-height: 1 !important;
    margin-bottom: 3px !important; 
}

/* 💥 CLASS GLOBAL BARU UNTUK MODAL PREVIEW & LOG BALASAN OLT 💥 */
.gass-cli-panel {
    background-color: var(--table-hover) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}
[data-theme="dark"] .gass-cli-panel {
    background-color: #020617 !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

/* ========================================================================== */
/* 💥 SCRIPT EDITOR & TERMINAL VIEW (1 BARIS DENGAN SCROLL HORIZONTAL) 💥     */
/* ========================================================================== */
.gass-cli-panel, 
.gass-cli-panel pre, 
.gass-cli-panel code,
.modal pre,
.modal code,
#visual_script_editor,
.cli-editor-canvas {
    white-space: pre !important;            /* 💥 KUNCI: Paksa teks tetap memanjang 1 baris! */
    word-wrap: normal !important;           /* Kembalikan sifat asli kata */
    word-break: normal !important;          /* Jangan potong string di tengah jalan */
    overflow-wrap: normal !important;
    overflow-x: auto !important;            /* 💥 KUNCI: Aktifkan scroll horizontal khusus di dalam kotak ini */
    max-width: 100% !important;             /* Kunci kotak agar tidak menjebol modal */
    box-sizing: border-box !important;
}

/* Mempercantik Scrollbar Horizontal agar Tipis, Elegan & Premium */
.gass-cli-panel::-webkit-scrollbar,
.modal pre::-webkit-scrollbar,
#visual_script_editor::-webkit-scrollbar {
    height: 6px; /* Tinggi scrollbar horizontal */
    width: 6px;
}
.gass-cli-panel::-webkit-scrollbar-track,
.modal pre::-webkit-scrollbar-track,
#visual_script_editor::-webkit-scrollbar-track {
    background: transparent;
}
.gass-cli-panel::-webkit-scrollbar-thumb,
.modal pre::-webkit-scrollbar-thumb,
#visual_script_editor::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.3);
    border-radius: 10px;
}
.gass-cli-panel::-webkit-scrollbar-thumb:hover,
.modal pre::-webkit-scrollbar-thumb:hover,
#visual_script_editor::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color); /* Berubah menjadi warna aksen saat disentuh/digeser */
}

/* Padding lega di layar Mobile */
@media (max-width: 768px) {
    .gass-cli-panel {
        padding: 12px 10px !important;
        font-size: 0.7rem !important; 
        line-height: 1.6 !important;
    }
}

/* ========================================================================== */
/* 💥 SCROLLBAR PREMIUM & AUTO-FIT UNTUK MODAL LOG (DESKTOP) 💥               */
/* ========================================================================== */

/* 1. KUNCI SAKTI: BUKA BATAS LEBAR MODAL AGAR MELAR MAKSIMAL */
#modalDetailLog .modal-dialog {
    max-width: 98vw !important; 
    width: max-content !important; 
    min-width: 60vw !important; 
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Kunci Modal Body (Background Dinamis Mengikuti Tema) */
#modalDetailLog .modal-body {
    padding: 0 !important; 
    background: var(--bg-body) !important; /* 💥 FIX: Gunakan variabel background bawaan tema */
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
}

/* Pembunuh Kotak HTML Pengganggu */
#modalDetailLog .modal-body > div {
    padding: 0 !important; margin: 0 !important; border: none !important;
    background: transparent !important; max-height: none !important; box-shadow: none !important;
    border-radius: 0 !important; display: flex !important; flex-direction: column !important;
    flex: 1 1 auto !important; overflow: hidden !important;
}

/* 3. Sentralisasi Scroll (X dan Y) Hanya di Container Teks */
#detailLogContent {
    max-height: calc(100vh - 150px) !important; 
    overflow: auto !important; 
    padding: 1rem 1.2rem !important; 
    width: 100% !important;
    background: transparent !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 4. PELINDUNG TEKS & PENGEKANGAN LINE-HEIGHT AGAR SUPER RAMPING */
.gass-cli-panel-content {
    display: inline-block !important; 
    min-width: 100% !important;
    line-height: 1.25 !important; 
    font-size: 0.85rem !important;
    padding-right: 2rem !important; 
    padding-bottom: 1rem !important;  
    font-family: 'Consolas', 'JetBrains Mono', monospace !important;
    white-space: pre !important; 
    color: var(--text-main) !important; /* 💥 FIX: Teks otomatis adaptif tanpa perlu di-hardcode */
}

/* 5. SIHIR WEB-KIT SCROLLBAR (Batang Scroll Melayang Adaptif) */
#detailLogContent::-webkit-scrollbar { width: 14px !important; height: 14px !important; }
#detailLogContent::-webkit-scrollbar-track { background: var(--bg-body) !important; } /* 💥 FIX */
#detailLogContent::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4) !important; 
    border-radius: 10px !important;
    border: 4px solid var(--bg-body) !important; /* 💥 FIX: Samakan pinggiran scroll dengan background */
}
#detailLogContent::-webkit-scrollbar-thumb:hover { background-color: var(--accent-color) !important; }
#detailLogContent::-webkit-scrollbar-corner { background: var(--bg-body) !important; } /* 💥 FIX */

/* ========================================================================== */
/* 🟢 CLI SCRIPT EDITOR (SYNTAX HIGHLIGHTING ENGINE)                          */
/* ========================================================================== */
.cli-editor-wrapper {
    background-color: var(--input-bg) !important; 
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden; 
}

/* LAYER BAWAH (KANVAS WARNA) */
.modal pre.cli-editor-canvas,
pre.cli-editor-canvas {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 8px 10px !important;
    margin: 0 !important;
    font-family: 'Consolas', 'JetBrains Mono', monospace !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    color: var(--text-main) !important; 
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow: hidden !important; 
    pointer-events: none; 
    z-index: 1;
    background: transparent !important;
    border: none !important;
}

/* LAYER ATAS (KETIKAN & KURSOR) */
.modal textarea.cli-editor-textarea,
.modal textarea.cli-editor-textarea:focus,   /* 💥 FIX: Kebal saat diklik! */
textarea.cli-editor-textarea,
textarea.cli-editor-textarea:focus {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    font-family: 'Consolas', 'JetBrains Mono', monospace !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    color: transparent !important; /* Teks ketikan disembunyikan */
    caret-color: var(--text-main) !important; /* Warna kursor berkedip ikut tema */
    
    background-color: transparent !important; /* 💥 KUNCI MUTLAK: Tetap tembus pandang walau diklik */
    
    border: none !important;
    resize: none !important;
    z-index: 2;
    outline: none !important;
    box-shadow: none !important; /* 💥 FIX: Hilangkan glow biru bawaan bootstrap */
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-y: auto !important; 
}

/* 💥 FIX: Terangkan teks bayangan di kotak Script Editor */
.modal textarea.cli-editor-textarea::placeholder,
textarea.cli-editor-textarea::placeholder { 
    color: var(--text-secondary) !important; /* Naikkan 1 tingkat lebih terang */
    opacity: 0.7 !important;
}

/* 💥 PALET WARNA SYNTAX GLOBAL (KONTRAS DI LIGHT & DARK MODE) 💥 */
.hl-block { color: #8b5cf6 !important; font-weight: bold; } /* Ungu Utama */
.hl-cmd { color: #0ea5e9 !important; font-weight: bold; } /* Biru Perintah */
.hl-prof { color: #ef4444 !important; font-weight: bold; } /* Merah Profil */
.hl-param { color: #fbbf24 !important; font-weight: bold; } /* 💥 KUNING EMAS PARAMETER 💥 */
.hl-iface { color: #d97706 !important; font-style: italic; } /* Kuning Italic (Port) */
.hl-var { color: #ea580c !important; font-weight: bold; background: rgba(245, 158, 11, 0.1) !important; border-radius: 4px; padding: 0 3px; } /* Variabel Dinamis */
.hl-val { color: #10b981 !important; font-weight: bold; } /* Hijau Angka/IP */
.hl-comment { color: var(--text-muted) !important; font-style: italic; } /* Abu-abu Komentar */

/* Kembar Identik Tombol (FULL, COPY, COMMIT) */
#btnPreviewFull, #btnCopyScript, #btnCommitAll {
    height: 26px !important; min-height: 26px !important; max-height: 26px !important; width: 80px !important; min-width: 80px !important; max-width: 80px !important;
    padding: 0 !important; margin: 0 !important; font-size: 0.65rem !important; border-radius: 4px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border: none !important; outline: none !important; flex: 0 0 auto !important; box-sizing: border-box !important; line-height: 1 !important; vertical-align: middle !important;
}
#btnPreviewFull:hover { background-color: #0891b2 !important; transform: translateY(-2px); }

/* Ultra Compact Table Keranjang (Mobile) */
@media (max-width: 768px) {
    #cli-container { padding-left: 2px !important; padding-right: 2px !important; }
    .table-queue th, .table-queue td { padding: 4px 2px !important; vertical-align: middle !important; }
    .table-queue th { font-size: 0.55rem !important; letter-spacing: 0 !important; }
    .table-queue td b, .table-queue td span.font-weight-bold { font-size: 0.6rem !important; letter-spacing: 0 !important; }
    .table-queue td small.d-inline-block { max-width: 60px !important; font-size: 0.5rem !important; }
    .table-queue td .badge { padding: 3px 4px !important; font-size: 0.5rem !important; letter-spacing: 0 !important; }
    .table-queue td .btn { padding: 0 4px !important; height: 20px !important; min-height: 20px !important; font-size: 0.55rem !important; }
    .table-queue td .btn-danger[onclick*="removeQueue"] { width: 18px !important; height: 18px !important; min-height: 18px !important; padding: 0 !important; }
    .table-queue td .btn-danger[onclick*="removeQueue"] i { font-size: 0.5rem !important; }
}

/* 🟢 PEMBAGIAN RUANG KERANJANG DAN CLI (CONFIG ONU) */
.queue-split-top { flex: 0 1 45% !important; min-height: 150px !important; max-height: none !important; overflow-y: auto !important; }
.queue-split-bottom { flex: 1 1 55% !important; min-height: 150px !important; max-height: none !important; overflow-y: auto !important; }

/* ========================================================================== */
/* 🟢 OPTIMASI RUANG TABEL (MEMERAS RUANG KOSONG UNTUK TEKS PANJANG)          */
/* ========================================================================== */
table#tableVariable, table#tableProfile {
    table-layout: auto !important; /* Biarkan browser yang berhitung */
    width: 100% !important;
}

/* 1. PAKSA KOLOM KECIL MENYUSUT MAKSIMAL (Dilarang ada ruang putih berlebih) */
/* (Tabel Kiri: No & Aksi | Tabel Kanan: No, Tipe, Ver, Layanan, Aksi) */
table#tableVariable th:nth-child(1), table#tableVariable tbody td:nth-child(1),
table#tableVariable th:nth-child(3), table#tableVariable tbody td:nth-child(3),
table#tableProfile th:nth-child(1), table#tableProfile tbody td:nth-child(1),
table#tableProfile th:nth-child(3), table#tableProfile tbody td:nth-child(3),
table#tableProfile th:nth-child(4), table#tableProfile tbody td:nth-child(4),
table#tableProfile th:nth-child(5), table#tableProfile tbody td:nth-child(5),
table#tableProfile th:nth-child(7), table#tableProfile tbody td:nth-child(7) {
    white-space: nowrap !important; /* Teks dalam lencana tidak boleh turun baris */
    width: 1% !important; /* 💥 TRIK SAKTI: Memaksa kolom menyusut seukuran persis isinya */
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* 2. KUNCI SEMUA TEKS AGAR MUTLAK 1 BARIS (Sama persis sifatnya seperti Nama Profile) */
table#tableVariable th:nth-child(2), table#tableVariable tbody td:nth-child(2),
table#tableProfile th:nth-child(2), table#tableProfile tbody td:nth-child(2),
table#tableProfile th:nth-child(6), table#tableProfile tbody td:nth-child(6) {
    white-space: nowrap !important; 
}

/* ========================================================================== */
/* CHAPTER 10: SWEETALERT PREMIUM (ULTRA SLIM & COMPACT)                      */
/* ========================================================================== */
.swal2-container { z-index: 999999 !important; }

/* 💥 BINGKAI MODAL (FRAME DIBUAT SANGAT TIPIS) 💥 */
.swal2-popup { 
    background: var(--bg-card) !important; 
    color: var(--text-main) !important;
    border-radius: 16px !important; 
    /* Padding dipangkas ekstrem (Atas-Kanan-Bawah-Kiri) */
    padding: 1.25rem 1.25rem 1rem 1.25rem !important; 
    border: 1px solid var(--border-color) !important; 
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.2) !important; 
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    /* Lebar maksimal diperkecil agar tidak memanjang di layar Desktop */
    width: clamp(280px, 80vw, 340px) !important; 
}

/* Tipografi Judul dan Teks (Dibuat Lebih Padat) */
.swal2-title { 
    font-weight: 800 !important; 
    letter-spacing: -0.5px !important; 
    color: var(--text-main) !important; 
    font-size: 1.05rem !important; /* Susut dari 1.25rem */
    margin-bottom: 0 !important;
}
.swal2-html-container { 
    color: var(--text-secondary) !important; 
    font-size: 0.75rem !important; /* Susut dari 0.85rem */
    font-weight: 600 !important;
    margin-top: 0.4rem !important;
    line-height: 1.3 !important;
}

/* 💥 KOTAK INPUT (TEXT, PASSWORD, SELECT) - SUPER PIPIH 💥 */
.swal2-input, .swal2-select, .swal2-textarea {
    height: 32px !important; /* Dikunci setara form-control-sm */
    padding: 0.2rem 0.6rem !important; 
    font-size: 0.75rem !important; 
    border-radius: 6px !important; 
    border: 1px solid var(--border-color) !important; 
    background-color: var(--input-bg) !important; 
    color: var(--text-main) !important; 
    font-weight: 700 !important; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
    margin: 0.75rem auto 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus {
    border-color: var(--accent-color) !important; 
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important; 
    background-color: var(--bg-card) !important;
    outline: none !important;
}

/* 💥 FIX: Mengecilkan Teks Bayangan (Placeholder) SweetAlert 💥 */
.swal2-input::placeholder, .swal2-textarea::placeholder { 
    color: var(--text-muted) !important; 
    font-size: 0.65rem !important; 
    font-weight: 600 !important; 
    text-transform: none !important; /* Mencegah huruf besar (uppercase) otomatis */
    opacity: 0.8 !important; 
}

/* 💥 FIX: Merampingkan Kotak Pesan Error (Validation Message) 💥 */
div:where(.swal2-container) div:where(.swal2-validation-message) {
    align-items: center !important;
    justify-content: center !important;
    background: rgba(239, 68, 68, 0.1) !important; /* Latar merah transparan elegan */
    color: var(--neon-red) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    border: 1px dashed rgba(239, 68, 68, 0.4) !important;
}

/* Memperkecil ikon [!] bawaan di pesan error */
div:where(.swal2-container) div:where(.swal2-validation-message)::before {
    width: 14px !important;
    height: 14px !important;
    background-color: var(--neon-red) !important;
    color: #ffffff !important;
    font-size: 0.55rem !important;
    line-height: 14px !important;
    margin-right: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Jarak Antara Teks/Input dengan Tombol */
.swal2-actions {
    margin-top: 1rem !important;
    gap: 6px !important; /* Jarak antar tombol dirapatkan maksimal */
    width: 100% !important;
}

/* 💥 TOMBOL AKSI (SIMPAN / YA) - KAPSUL MINI 💥 */
.swal2-confirm { 
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%) !important; 
    box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.25) !important; 
    border-radius: 6px !important; 
    font-weight: 700 !important; 
    font-size: 0.75rem !important; 
    padding: 0 20px !important; 
    height: 30px !important; /* Dikunci sangat pipih */
    border: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important; /* Otomatis membagi rata ruang */
}
.swal2-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 12px -2px rgba(99, 102, 241, 0.35) !important; }

/* 💥 TOMBOL BATAL (NETRAL) - KAPSUL MINI 💥 */
.swal2-cancel { 
    background: var(--input-bg) !important; 
    border: 1px solid var(--border-color) !important; 
    color: var(--text-main) !important; 
    border-radius: 6px !important; 
    font-weight: 700 !important; 
    font-size: 0.75rem !important; 
    padding: 0 20px !important; 
    height: 30px !important; /* Dikunci sangat pipih */
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important; /* Otomatis membagi rata ruang */
}
.swal2-cancel:hover { background: var(--table-hover) !important; color: var(--neon-red) !important; border-color: rgba(239, 68, 68, 0.3) !important; }

/* ========================================================================== */
/* 💥 FIX GLOBAL: MENGHORMATI PERINTAH JAVASCRIPT "showConfirmButton: false"  */
/* ========================================================================== */
.swal2-actions[style*="display: none"],
.swal2-confirm[style*="display: none"],
.swal2-cancel[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    z-index: -999 !important;
}

/* 💥 KEMBALIKAN TOMBOL TUTUP KE UKURAN NORMAL (TENGAH) 💥 */
.gass-remote-swal-container .swal2-actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 !important;
}
.gass-remote-swal-container .swal2-confirm {
    width: auto !important; /* 👈 Dikembalikan ke auto */
    max-width: 100% !important;
    margin: 0 auto !important;
    flex: none !important;
}

/* Ikon Animasi (Menyesuaikan Tema) - Diperkecil Maksimal */
.swal2-icon {
    width: 3em !important; 
    height: 3em !important;
    margin: 0 auto 0.6rem auto !important; 
}
.swal2-icon .swal2-icon-content { font-size: 2em !important; }
.swal2-icon.swal2-warning { border-color: var(--neon-orange) !important; color: var(--neon-orange) !important; }
.swal2-icon.swal2-success { border-color: var(--neon-green) !important; color: var(--neon-green) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--neon-green) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34, 197, 94, 0.3) !important; }
.swal2-icon.swal2-error { border-color: var(--neon-red) !important; color: var(--neon-red) !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--neon-red) !important; }
.swal2-icon.swal2-info { border-color: var(--neon-blue) !important; color: var(--neon-blue) !important; }

/* SweetAlert Mobile Fit (Proporsional & Sejajar) */
@media (max-width: 768px) {
    body.swal2-shown .swal2-container { padding: 10px !important; }
    .swal2-popup { width: 100% !important; max-width: 320px !important; padding: 1.25rem !important; border-radius: 14px !important; }
    
    /* 💥 FIX: Paksa tombol aksi (Confirm & Cancel) Kanan-Kiri di HP 💥 */
    .swal2-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 8px !important;
    }
    div:where(.swal2-container) button:where(.swal2-styled) { 
        width: 100% !important; 
        max-width: 100% !important; 
        margin: 0 !important; 
        flex: 1 1 0 !important; /* Membagi sisa ruang sama rata */
    }
}

/* ========================================================================== */
/* 💥 TOAST NOTIFICATION PREMIUM (POJOK KANAN ATAS) 💥                        */
/* ========================================================================== */
body.swal2-toast-shown .swal2-container {
    z-index: 999999 !important;
}

.swal2-popup.swal2-toast {
    padding: 10px 16px !important;
    width: auto !important;
    max-width: 360px !important;
    border-radius: 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Merampingkan Teks dan Judul di dalam Toast */
.swal2-popup.swal2-toast .swal2-title,
.swal2-popup.swal2-toast .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* Memperkecil Ikon Bawaan SweetAlert Khusus di dalam Toast */
.swal2-popup.swal2-toast .swal2-icon {
    width: 2em !important;
    height: 2em !important;
    min-width: 2em !important;
    margin: 0 12px 0 0 !important;
}

.swal2-popup.swal2-toast .swal2-icon-content {
    font-size: 1.5em !important;
}

/* Menjinakkan progress bar timer di bawah Toast */
.swal2-popup.swal2-toast .swal2-timer-progress-bar {
    height: 3px !important;
    background: rgba(99, 102, 241, 0.4) !important;
}

/* ========================================================================== */
/* 💥 PUSAT DESAIN POP-UP GASSNET (LIVE SYNC, GANTI SN, UBAH WIFI, HAPUS) 💥  */
/* ========================================================================== */
/* 1. Kunci Ukuran Pop-up (Kompak & Elegan 260px) */
.gass-remote-swal { 
    width: 260px !important; 
    min-width: 260px !important; 
    max-width: 260px !important; 
    padding: 15px !important; 
    border-radius: 12px !important; 
    box-sizing: border-box !important; 
    text-align: center !important; 
}

/* 2. Format Teks Judul & Keterangan */
.gass-remote-swal .swal2-title { 
    font-size: 0.95rem !important; 
    font-weight: 800 !important; 
    margin: 0 0 10px 0 !important; 
    padding: 0 !important; 
    color: var(--text-main) !important; 
}
.gass-remote-swal .swal2-html-container { 
    margin: 0 !important; 
    padding: 0 !important; 
    font-size: 0.65rem !important; 
}

/* ========================================================================== */
/* 💥 GLOBAL CONFIG: PAKSA SEMUA TEKS POPUP SWEETALERT RATA TENGAH (CENTER) 💥 */
/* ========================================================================== */
.swal2-html-container,
.swal2-html-container div:not(.sync-card):not(.sn-info-card):not(.text-left):not(.dataTables_wrapper),
.swal2-html-container span:not(.text-left) {
    text-align: center !important;
}

.swal2-validation-message {
    justify-content: center !important;
    text-align: center !important;
}

/* 3. Pembagian Tombol 50:50 (Kanan & Kiri) */
.gass-remote-swal .swal2-actions { 
    width: 100% !important; 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    margin-top: 15px !important; 
    padding: 0 !important; 
}
.gass-remote-swal button.swal2-confirm, 
.gass-remote-swal button.swal2-cancel { 
    flex: 1 !important; 
    margin: 0 !important; 
    height: 36px !important; 
    font-size: 0.75rem !important; 
    font-weight: 800 !important; 
    border-radius: 8px !important; 
    padding: 0 !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
}

/* 4. Khusus Tombol Penuh (Full-Width) untuk Live Sync */
.gass-remote-swal.show-action-btn .swal2-actions { 
    display: flex !important; 
    width: 100% !important; 
    margin-top: 10px !important; 
    padding: 0 !important; 
}
.gass-remote-swal.show-action-btn .swal2-confirm { 
    width: 100% !important; 
    margin: 0 !important; 
    font-size: 0.75rem !important; 
    border-radius: 6px !important; 
}

/* 5. Kartu Data Live Sync */
.gass-btn-remote-onu {
    width: 100% !important;
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.gass-btn-remote-onu:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.18) !important;
}
.gass-btn-remote-onu:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: var(--table-hover) !important;
    color: var(--text-muted) !important;
}

.sync-card { 
    background: var(--bg-light, rgba(0, 0, 0, 0.03)); 
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)); 
    border-radius: 10px; 
    padding: 10px; 
    margin-top: 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    text-align: left; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); 
}
.sync-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom: 6px; 
    border-bottom: 1px dashed var(--border-color, rgba(0, 0, 0, 0.1)); 
    white-space: nowrap !important; 
}
.sync-row:last-child { 
    border-bottom: none; 
    padding-bottom: 0; 
}
.sync-label { 
    color: var(--text-muted, #64748b); 
    font-weight: 600; 
    font-size: 0.65rem; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    white-space: nowrap !important; 
}
.sync-value { 
    color: var(--text-main, #1e293b); 
    font-weight: 800; 
    font-size: 0.7rem; 
    text-align: right; 
    white-space: nowrap !important; 
}

/* 6. Warna Tombol Khusus Hapus / Danger */
.btn-hapus-merah { 
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; 
    color: white !important; 
    box-shadow: 0 4px 10px rgba(239,68,68,0.3) !important; 
    border: none !important; 
}

/* ========================================================================== */
/* CHAPTER 11: ROLE MANAGEMENT PREMIUM UI COMPONENT                           */
/* ========================================================================== */
.menu-kiri-container { padding: 15px; }
.menu-btn { display: flex; align-items: center; padding: 16px 24px; margin-bottom: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; color: var(--text-muted); font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.menu-btn i { font-size: 1.3rem; width: 32px; text-align: center; margin-right: 14px; transition: 0.3s; }
.menu-btn:hover { background: var(--table-hover); border-color: var(--accent-color); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1); color: var(--accent-color); }
.menu-btn.active-btn { background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%) !important; color: var(--accent-color) !important; border: 1px solid rgba(99, 102, 241, 0.3) !important; border-left: 6px solid var(--accent-color) !important; box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15); }
.menu-btn.active-btn i { transform: scale(1.15); color: var(--accent-color); }
.menu-list-item { padding: 18px 20px; border-bottom: 1px dashed var(--border-color); transition: background 0.2s; }
.menu-list-item:hover { background-color: var(--table-hover); }
.menu-list-item:last-child { border-bottom: none; }
.custom-switch .custom-control-label::before { height: 1.5rem; width: 2.75rem; border-radius: 2rem; background-color: var(--border-color); border: none; box-shadow: inset 0 2px 6px rgba(0,0,0,0.05); }
.custom-switch .custom-control-label::after { width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: linear-gradient(135deg, #22c55e, #10b981); }
.config-item { padding: 16px 20px; border: 1px solid var(--border-color); border-radius: 14px; margin-bottom: 14px; background-color: var(--input-bg); display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; }
.config-item:hover { border-color: var(--accent-color); box-shadow: 0 6px 18px rgba(99, 102, 241, 0.05); transform: translateY(-2px); }

/* ========================================================================== */
/* CHAPTER 12: ANIMASI GLOBAL GASSNET                                         */
/* ========================================================================== */

/* ========================================================================== */
/* 🟢 FIX BUG SB-ADMIN: DROPDOWN MENU JUMPING (POPPER.JS CONFLICT)            */
/* ========================================================================== */
.dropdown-menu.animated--grow-in {
    /* Ganti animasi scale bawaan dengan fade murni agar tidak berebut titik kordinat dengan Popper.js */
    animation: premiumDropdownFade 0.2s ease-out forwards !important;
}

@keyframes premiumDropdownFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.pulse-icon { animation: pulse-orange 2s infinite; }
@keyframes pulse-orange { 0% { transform: scale(0.95); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(0.95); opacity: 1; } }

/* Animasi Input Error */
.form-control.input-warning, .form-control[readonly].input-warning, select.form-control.input-warning, select.form-control[readonly].input-warning, .input-warning { border: 1px solid var(--neon-red) !important; box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important; background-color: rgba(239, 68, 68, 0.08) !important; color: var(--neon-red) !important; }
.shake-animation { animation: shake 0.4s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } }

/* Pulse Dot Khusus */
.sn-text { font-family: 'SFMono-Regular', Consolas, monospace; color: var(--text-main); font-weight: 700; letter-spacing: 1px; font-size: 1rem; }
.pulse-dot { height: 10px; width: 10px; background-color: #00ff88; border-radius: 50%; display: inline-block; box-shadow: 0 0 10px #00ff88; animation: pulse-glow 1.5s infinite; }
@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } }

/* Skeleton Shimmer Loading */
.skeleton-box { display: inline-block; position: relative; overflow: hidden; background-color: #e2e8f0; }
.skeleton-box::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0)); animation: shimmer 1.5s infinite; content: ''; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ========================================================================== */
/* CHAPTER 13: PREMIUM MODAL DATATABLES (ULTRA COMPACT & RESPONSIVE)          */
/* ========================================================================== */
#recentOnuModal .modal-content { border-radius: 20px !important; overflow: hidden; border: none !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important; }
#recentOnuModal .modal-header { border-bottom: none !important; padding: 0.8rem 1.2rem !important; } /* 🟢 DIPANGKAS: Header lebih tipis */
#recentOnuModal .modal-body { padding: 1rem 1.2rem !important; background: var(--bg-card); }

/* Kontrol Atas (Pencarian & Jumlah Baris) */
#recentOnuModal .dataTables_filter input { background: var(--input-bg) !important; border-radius: 50px !important; padding: 4px 12px !important; border: 1px solid var(--border-color) !important; height: 30px !important; font-size: 0.8rem !important; color: var(--text-main) !important; }
#recentOnuModal .dataTables_length select { background: var(--input-bg) !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; height: 30px !important; padding: 0 10px !important; font-size: 0.8rem !important; color: var(--text-main) !important; }

/* 🟢 ANTI-POTONG: Wrapper Responsif untuk Tabel */
#recentOnuModal .dataTables_wrapper { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* Tabel Ramping (Compact Rows) */
#recentOnuModal table.dataTable { border-collapse: separate !important; border-spacing: 0 4px !important; margin-top: 0 !important; border: none !important; width: 100% !important; white-space: nowrap !important; } /* 🟢 DIPANGKAS: Jarak antar baris hanya 4px */
#recentOnuModal table.dataTable thead th { border: none !important; background: transparent !important; font-size: 0.75rem !important; font-weight: 800 !important; color: var(--text-main) !important; padding: 4px 10px 6px 10px !important; } /* 🟢 DIPERJELAS: Font Header diperbesar & diterangkan */
#recentOnuModal table.dataTable tbody tr { box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: transform 0.2s ease; background: transparent !important; }
#recentOnuModal table.dataTable tbody tr:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

/* Sel Tabel Bersudut Lengkung & Ramping */
#recentOnuModal table.dataTable tbody td {
    background: var(--bg-body) !important; 
    border: 1px solid var(--border-color) !important;
    border-style: solid none !important; 
    padding: 6px 10px !important; /* 🟢 DIPANGKAS: Padding dalam sel ditipiskan drastis */
    vertical-align: middle !important;
}
#recentOnuModal table.dataTable tbody td:first-child { border-left-style: solid !important; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }
#recentOnuModal table.dataTable tbody td:last-child { border-right-style: solid !important; border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }

/* Gaya Lencana Premium (Solid & Jelas) */
.pill-soft {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 4px 10px !important; /* 🟢 DIPANGKAS */
    border-radius: 8px !important; /* 🟢 Sudut lebih kotak profesional, bukan bulat pil */
    font-size: 0.75rem !important; /* 🟢 DIPERJELAS */
    font-weight: 700 !important;
    display: inline-flex; align-items: center; justify-content: center;
}

/* 🟢 MOBILE ONLY FIX: Hilangkan header & renggangkan batas tabel di HP */
@media (max-width: 768px) {
    #recentOnuModal table.dataTable thead { display: none !important; }
    #recentOnuModal table.dataTable tbody td { padding: 0 !important; border: none !important; background: transparent !important; }
    #recentOnuModal table.dataTable tbody tr { box-shadow: none !important; background: transparent !important; }
    #recentOnuModal table.dataTable tbody tr:hover { transform: none !important; box-shadow: none !important; }
}

/* ========================================================================== */
/* CHAPTER 14: ADVANCE THEME CUSTOMIZER (GLOBAL COLOR OVERRIDES)              */
/* ========================================================================== */
:root {
    --neon-purple: #8b5cf6;
    --hero-bg-1: #0f172a; --hero-bg-2: #3730a3; --hero-bg-3: #e11d48; --hero-bg-4: #0ea5e9;
}

/* 1. Override Gradient Hero Banner (Dari Chapter 06) */
.hero-premium {
    background: linear-gradient(-45deg, var(--hero-bg-1), var(--hero-bg-2), var(--hero-bg-3), var(--hero-bg-4)) !important;
    background-size: 300% 300% !important;
}

/* 2. Override Utility Colors (Dari Framework) */
.text-success { color: var(--neon-green) !important; }
.text-info { color: var(--neon-blue) !important; }
.text-warning { color: var(--neon-orange) !important; }
.text-danger { color: var(--neon-red) !important; }

/* 3. Override Border Cards (Dari Chapter 06 & 07) */
.border-left-danger { border-left-color: var(--neon-red) !important; }
.border-left-warning { border-left-color: var(--neon-orange) !important; }
.border-left-info { border-left-color: var(--neon-blue) !important; }

/* 4. Override Status Badges & Dot Pulse (Dari Chapter 07) */
.status-online { color: var(--neon-green) !important; border-color: var(--neon-green) !important; }
.status-offline { color: var(--neon-red) !important; border-color: var(--neon-red) !important; }
.status-warning { color: var(--neon-orange) !important; border-color: var(--neon-orange) !important; }

.status-online .dot-pulse { background: var(--neon-green) !important; box-shadow: 0 0 10px var(--neon-green) !important; }
.status-offline .dot-pulse { background: var(--neon-red) !important; box-shadow: 0 0 10px var(--neon-red) !important; }
.status-warning .dot-pulse { background: var(--neon-orange) !important; box-shadow: 0 0 10px var(--neon-orange) !important; }

/* 5. Override Log Lines & Gradients (Dari Chapter 06) */
.card-recent-los::after { background: linear-gradient(to right, var(--neon-red), #f97316) !important; }
.card-recent-dying::after { background: linear-gradient(to right, var(--neon-orange), #eab308) !important; }
.card-recent-uncfg::after { background: linear-gradient(to right, var(--neon-blue), #3b82f6) !important; }

.bg-gradient-total { border-bottom-color: var(--accent-color) !important; }
.bg-gradient-offline { border-bottom-color: var(--neon-orange) !important; }
.bg-gradient-los { border-bottom-color: var(--neon-red) !important; }

/* ========================================================================== */
/* 🟢 FIX BENTROK WARNA KOTAK SUMMARY DASHBOARD (TOTAL, OFFLINE, LOS)         */
/* ========================================================================== */

/* 1. Pisahkan Total Inventaris agar memiliki Identitas Ungu/Biru (Bukan Hijau) */
#val_total_onu { 
    background: var(--badge-bg) !important; 
    color: var(--badge-text) !important; 
    border: 1px solid var(--border-color) !important; 
}
#val_total_onu .dot-pulse {
    background: var(--badge-text) !important;
    box-shadow: 0 0 8px var(--badge-text) !important;
}

/* 2. Selamatkan Teks yang Tenggelam di Kotak Offline & LOS (Paksa Putih) */
#val_offline_onu.status-warning {
    background: var(--neon-orange) !important;
    color: #ffffff !important;
    border-color: var(--neon-orange) !important;
}
#val_los_onu.status-offline {
    background: var(--neon-red) !important;
    color: #ffffff !important;
    border-color: var(--neon-red) !important;
}

/* 3. Putihkan animasi denyut (Dot Pulse) agar terlihat di atas warna solid */
#val_offline_onu.status-warning .dot-pulse,
#val_los_onu.status-offline .dot-pulse {
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

/* ========================================================================== */
/* 💥 FIX UTAMA: JINAKKAN WARNA HARDCODE BOOTSTRAP & SB-ADMIN DI DARK MODE    */
/* ========================================================================== */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-dark {
    color: var(--text-main) !important;
}

/* 💥 KUNCI SAKTI 1: Lebarkan jangkauan ke .text-muted yang selama ini luput! */
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important; /* Gunakan secondary agar lebih terang & menyala */
}

/* ========================================================================== */
/* 💥 FIX: TINGKATKAN KONTRAS LINK & WARNA PRIMER DI DARK MODE                */
/* ========================================================================== */
/* Ubah biru pekat menjadi Light Sky Blue yang sangat kontras di background gelap */
[data-theme="dark"] .text-primary,
[data-theme="dark"] a:not(.btn) {
    color: #38bdf8 !important; 
    font-weight: 700 !important;
}
[data-theme="dark"] a:not(.btn):hover {
    color: #7dd3fc !important;
    text-decoration: none !important;
}

/* 💥 KUNCI SAKTI 2: Jangan paksa B, SPAN, DIV berubah warna jika mereka SUDAH punya class warna sendiri (misal .text-primary) */
[data-theme="dark"] .table-queue td span:not([class*="text-"]),
[data-theme="dark"] .table-queue td div:not([class*="text-"]),
[data-theme="dark"] .table-queue td b:not([class*="text-"]) {
    color: var(--text-main) !important;
}

/* ========================================================================== */
/* 💥 PURE COLOR OVERRIDES: CONFIG ONU (MURNI WARNA TANPA UBAH UKURAN) 💥     */
/* ========================================================================== */

/* 1. LABEL & TEKS KETERANGAN */
#formGenerate label, #formGenerate .text-muted, #formGenerate small {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}
[data-theme="dark"] #formGenerate label, 
[data-theme="dark"] #formGenerate .text-muted, 
[data-theme="dark"] #formGenerate small {
    color: #cbd5e1 !important; 
}
#formGenerate label .text-danger { 
    color: var(--neon-red) !important; 
    text-shadow: 0 0 5px rgba(239,68,68,0.6) !important; 
}

/* 2. KOTAK INPUT TERKUNCI (READONLY / DISABLED) */
#formGenerate .form-control[readonly], 
#formGenerate .form-control:disabled, 
#formGenerate select:disabled, 
#formGenerate input:disabled {
    background-color: rgba(148, 163, 184, 0.1) !important; 
    border: 1px dashed var(--border-color) !important; 
    color: var(--neon-blue) !important; 
    -webkit-text-fill-color: var(--neon-blue) !important; 
    opacity: 1 !important;
    cursor: not-allowed;
}
[data-theme="dark"] #formGenerate .form-control[readonly], 
[data-theme="dark"] #formGenerate .form-control:disabled, 
[data-theme="dark"] #formGenerate select:disabled, 
[data-theme="dark"] #formGenerate input:disabled {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    color: #38bdf8 !important; 
    -webkit-text-fill-color: #38bdf8 !important; 
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

/* 3. KOTAK INPUT NORMAL (BISA DIKETIK) */
#formGenerate .form-control:not([readonly]):not(:disabled), 
#formGenerate input:not([readonly]):not(:disabled) {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--neon-blue) !important; /* 💥 FIX: Disamakan persis dengan kolom atas */
    -webkit-text-fill-color: var(--neon-blue) !important;
}
[data-theme="dark"] #formGenerate .form-control:not([readonly]):not(:disabled), 
[data-theme="dark"] #formGenerate input:not([readonly]):not(:disabled) {
    background-color: #020617 !important; 
    border: 1px solid #6366f1 !important;
    color: #38bdf8 !important; /* 💥 FIX: Neon Blue di Dark Mode */
    -webkit-text-fill-color: #38bdf8 !important;
    text-shadow: 0 0 4px rgba(56, 189, 248, 0.3) !important;
}

/* 4. DROPDOWN AKTIF (AREA VLAN & TEMPLATE SCRIPT) */
#formGenerate select.form-control:not(:disabled) {
    border: 1px solid var(--neon-blue) !important;
    background-color: rgba(14, 165, 233, 0.05) !important;
    color: var(--neon-blue) !important; /* 💥 FIX: Disamakan persis dengan kolom atas */
    -webkit-text-fill-color: var(--neon-blue) !important;
    cursor: pointer;
}
[data-theme="dark"] #formGenerate select.form-control:not(:disabled) {
    border: 1px solid #38bdf8 !important; 
    background-color: rgba(56, 189, 248, 0.05) !important; 
    color: #38bdf8 !important;
    -webkit-text-fill-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.15), inset 0 0 8px rgba(56, 189, 248, 0.1) !important;
}
[data-theme="dark"] #formGenerate select.form-control:not(:disabled):focus {
    border-color: #22d3ee !important; 
    color: #22d3ee !important;
    -webkit-text-fill-color: #22d3ee !important;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.4), inset 0 0 10px rgba(34, 211, 238, 0.2) !important;
}

/* 5. PLACEHOLDER */
#formGenerate .form-control::-webkit-input-placeholder { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; opacity: 1 !important; }
#formGenerate .form-control::-moz-placeholder { color: #94a3b8 !important; opacity: 1 !important; }
#formGenerate .form-control::placeholder { color: #94a3b8 !important; opacity: 1 !important; }

/* 6. STATISTIK ONU */
#stat_used { color: var(--neon-red) !important; -webkit-text-fill-color: var(--neon-red) !important; }
#stat_free { color: var(--neon-green) !important; -webkit-text-fill-color: var(--neon-green) !important; }
[data-theme="dark"] #stat_used { color: #f87171 !important; -webkit-text-fill-color: #f87171 !important; text-shadow: 0 0 8px rgba(248, 113, 113, 0.6) !important; }
[data-theme="dark"] #stat_free { color: #4ade80 !important; -webkit-text-fill-color: #4ade80 !important; text-shadow: 0 0 8px rgba(74, 222, 128, 0.6) !important; }

/* 7. AUTOCOMPLETE PENCARIAN */
.search-item .id .fa-box { color: var(--neon-green) !important; text-shadow: 0 0 5px rgba(34, 197, 94, 0.4) !important; }
.search-results-container { border: 2px solid var(--accent-color) !important; }
.search-item .name { color: var(--neon-blue) !important; }
.search-item .id { color: var(--neon-orange) !important; }
[data-theme="dark"] .search-item .name { color: #38bdf8 !important; } 
[data-theme="dark"] .search-item .id { color: #fbbf24 !important; } 

/* 8. TABEL KERANJANG */
.table-queue td small.text-muted { color: var(--text-secondary) !important; }
[data-theme="dark"] .table-queue td small.text-muted { color: #cbd5e1 !important; }
[data-theme="dark"] .table-queue td b { color: #ffffff !important; } 
[data-theme="dark"] .table-queue td span[style*="color: #059669"] { color: #4ade80 !important; text-shadow: 0 0 5px rgba(74, 222, 128, 0.4); } 
[data-theme="dark"] .table-queue td .text-info { color: #22d3ee !important; } 

/* 9. PANEL HASIL CEK SN */
/* 💥 FIX: Label diubah jadi Kuning */
#sn_result_panel [style*="var(--text-muted)"] { color: #d97706 !important; } /* Kuning Amber Pekat agar terbaca di Light Mode */
[data-theme="dark"] #sn_result_panel [style*="var(--text-muted)"] { color: #facc15 !important; text-shadow: 0 0 5px rgba(250, 204, 21, 0.4) !important;} /* Kuning Neon di Dark Mode */

#sn_result_panel [style*="var(--accent-color)"] { color: #4338ca !important; }
[data-theme="dark"] #sn_result_panel [style*="var(--accent-color)"] { color: #38bdf8 !important; text-shadow: 0 0 5px rgba(56, 189, 248, 0.4) !important; }
#sn_result_panel [style*="var(--neon-red)"] { color: #dc2626 !important; }
[data-theme="dark"] #sn_result_panel [style*="var(--neon-red)"] { color: #f87171 !important; text-shadow: 0 0 5px rgba(248, 113, 113, 0.4) !important; }

/* ========================================================================== */
/* CHAPTER 15: MOBILE OPTIMIZATION (TOUCH TARGETS & AUTO-FIT SPACING)         */
/* ========================================================================== */
@media (max-width: 768px) {
    /* 1. Melebarkan Kontainer agar "memakan" ruang kosong di pinggir HP */
    #content-wrapper .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .container-fluid > .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    .container-fluid > .row > [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* 🟢 OVERRIDE MOBILE COMPACT (MERAMPINGKAN FORM & TOMBOL DI HP) */
    /* Di HP, matikan Auto-Fit agar form panjang tidak tergencet/gepeng */
    .row-stretch { flex-direction: column !important; height: auto !important; flex: none !important; display: block !important; }
    .col-stretch, .card-stretch { flex: none !important; height: auto !important; display: block !important; margin-bottom: 1rem !important; }
    .card-stretch > .card-body { overflow: visible !important; }
    
    /* Merampingkan Input & Font Form agar teks tidak terpotong */
    #formGenerate .form-control, #formGenerate select.form-control, #formGenerate .input-group-text {
        height: 26px !important; min-height: 26px !important; font-size: 0.65rem !important; padding: 2px 6px !important; border-radius: 4px !important;
    }
    #formGenerate label { font-size: 0.55rem !important; margin-bottom: 2px !important; }
    
    /* Mengecilkan Tombol Mobile */
    #btnCariUncfg, #btnCekSN, #btnAddToQueue { height: 28px !important; min-height: 28px !important; font-size: 0.65rem !important; padding: 0 10px !important; line-height: 1 !important; }
    #btnPreviewFull, #btnCopyScript, #btnCommitAll { height: 28px !important; min-height: 28px !important; font-size: 0.6rem !important; }
    
    /* Perluas keranjang di HP agar lebih lega untuk discroll */
    .queue-split-top { min-height: 250px !important; flex: none !important; }
    .queue-split-bottom { min-height: 250px !important; flex: none !important; }

    /* 5. Typography Dashboard Card diperbesar proporsional */
    .text-xs, label.small { font-size: 0.8rem !important; }
    .status-badge { font-size: 0.85rem !important; padding: 8px 14px !important; }
    .hero-premium h1, .hero-premium-core h1 { font-size: 1.4rem !important; }
    .hero-premium p, .hero-premium-core p { font-size: 0.95rem !important; }
    
    /* 6. Ikon latar kartu diperbesar */
    .bg-icon-watermark { font-size: 4rem !important; bottom: -15px !important; right: -5px !important; }
	
    /* Turunkan min-height yang terlalu rakus di layar kecil */
    #helper_buttons_container {
        height: auto !important;
        min-height: 120px !important; 
        max-height: none !important;
    }
    .cli-editor-wrapper {
        height: auto !important;
        min-height: 180px !important; 
        max-height: none !important; 
        margin-bottom: 12px !important; 
    }
    .col-md-4.d-flex.flex-column > label {
        margin-top: 8px !important;
    }
}

/* ========================================================================== */
/* 🟢 FIX RESPONSIVE: LEBAR MODAL UNTUK TABLET (IPAD) & MOBILE                */
/* ========================================================================== */

/* 1. TABLET & LAPTOP KECIL (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .modal-xl {
        max-width: 95% !important; /* 💥 FIX: Modal melebar 95% mengisi layar Tablet */
        margin: 1.5rem auto !important;
    }
    .modal-lg {
        max-width: 90% !important; /* Modal Preview sedikit lebih ramping */
        margin: 1.5rem auto !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 7. MENU MELAYANG KEBAL CLIPPING (JURUS TELEPORTASI JS KHUSUS MOBILE)       */
/* -------------------------------------------------------------------------- */
#mobile-floating-menu {
    animation: slideInMobile 0.2s ease-out forwards;
}
#mobile-floating-menu .collapse-inner {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    padding: 0.5rem 0 !important;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.3) !important;
    margin: 0 !important;
}
#mobile-floating-menu .collapse-header { display: none !important; }
#mobile-floating-menu .collapse-item {
    display: block !important;
    color: var(--text-main) !important;
    padding: 0.85rem 1.4rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--border-color) !important;
    text-decoration: none !important;
}
#mobile-floating-menu .collapse-item:last-child { border-bottom: none !important; }
#mobile-floating-menu .collapse-item:active { background: var(--table-hover) !important; color: var(--accent-color) !important; }

/* ========================================================================== */
/* CHAPTER 16: LARGE SCREEN OPTIMIZATION (1440px - 4K TV)                     */
/* ========================================================================== */

/* Pelebaran Modal untuk Monitor 1440px (Laptop Lebar) */
@media (min-width: 1440px) {
    .modal-xl { max-width: 85% !important; }
    .modal-lg { max-width: 70% !important; }
    
    /* 💥 FIX: Cegah teks dropdown filter terpotong di layar besar */
    select.form-control:not([name*="_length"]), select.form-select:not([name*="_length"]) {
        min-width: 240px !important;
        width: max-content !important;
        padding-right: 2.5rem !important; /* Ruang lega untuk panah dropdown */
    }
}

/* Pelebaran Modal untuk Monitor Raksasa 1920px s/d 4K (TV/Monitor) */
@media (min-width: 1920px) {
    .modal-xl { max-width: 85% !important; }
    .modal-lg { max-width: 75% !important; }
    
    /* 💥 FIX: Cabut paksaan tinggi 88vh agar modal melengket rapat ke isi konten (Auto Fit) */
    .modal-xl .modal-content, .modal-lg .modal-content { 
        min-height: auto !important; 
        height: auto !important; 
    }
}

/* ========================================================================== */
/* CHAPTER 17: ROLE MANAGEMENT & COMPACT PANELS OVERRIDE                      */
/* ========================================================================== */

/* 1. Merampingkan Jarak Grid Utama (Hanya aktif di halaman ber-scroll) */
body.page-scrollable .row-auto-stretch { 
    margin-left: -0.3rem !important; 
    margin-right: -0.3rem !important; 
    margin-top: 0.2rem !important; 
    margin-bottom: 0.2rem !important; 
}
body.page-scrollable .row-auto-stretch > [class*="col-"] { 
    padding-left: 0.3rem !important; 
    padding-right: 0.3rem !important; 
}

/* 2. Merampingkan Tombol Menu Kiri */
.menu-kiri-container { padding: 6px !important; }
.menu-btn { 
    padding: 8px 12px !important; 
    margin-bottom: 4px !important; 
    font-size: 0.75rem !important; 
    border-radius: 8px !important; 
}
.menu-btn i { font-size: 0.85rem !important; width: 22px !important; margin-right: 6px !important; }

/* 3. Merampingkan Card Header di Panel Kanan */
.panel-content .card-header { padding: 0.4rem 0.8rem !important; }
.panel-content .card-header h6 { font-size: 0.8rem !important; }

/* 4. Merampingkan Toggle Privasi / Config Items */
.config-item { 
    padding: 6px 10px !important; 
    margin-bottom: 4px !important; 
    border-radius: 8px !important; 
}
.config-item .text-sm { font-size: 0.7rem !important; }
.config-item small { font-size: 0.6rem !important; }

/* 5. Merampingkan Padding Bawaan Bootstrap Khusus di Dalam Panel */
.panel-content .p-4 { padding: 0.6rem 0.8rem !important; }
.panel-content .p-3 { padding: 0.5rem !important; }
.panel-content .mb-4 { margin-bottom: 0.8rem !important; }
.panel-content .mt-5 { margin-top: 1rem !important; }

/* ========================================================================== */
/* 💥 KUNCI SAKTI: BEBASKAN TINGGI PANEL KANAN AGAR FOOTER MUNCUL 💥          */
/* ========================================================================== */
/* Membunuh sifat overflow:hidden & flex bawaan dari tab panel */
body.page-scrollable .col-lg-9 > .d-flex.flex-column,
body.page-scrollable .panel-content.active-panel,
body.page-scrollable .panel-content.active-panel > .card-body,
body.page-scrollable #panel-role .custom-vscroll,
body.page-scrollable #panel-menu .custom-vscroll {
    height: auto !important; 
    flex: none !important; 
    min-height: 0 !important; 
    max-height: none !important; 
    overflow: visible !important; 
}

/* 6. Optimasi List Master Menu (Hover Effects & Smart Wrap) */
.menu-master-row { transition: all 0.2s ease; }
.menu-master-row:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 15px rgba(0,0,0,0.05) !important; 
    border-color: var(--accent-color) !important; 
}
.menu-master-row .grip-icon { transition: all 0.2s ease; }
.menu-master-row:hover .grip-icon { 
    opacity: 1 !important; 
    color: var(--accent-color) !important; 
}

/* Lencana Hover Cerdas (URL Copy) */
.menu-master-row .copy-click:hover {
    background: var(--table-hover) !important;
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    transform: scale(1.02);
}

/* Garis Pemisah Adaptif */
.border-md-left { border-left: 1px dashed transparent; }

@media (min-width: 768px) {
    .border-md-left { border-left-color: var(--border-color) !important; }
}

@media (max-width: 767px) {
    /* Di layar HP, Lencana Turun ke Baris Bawah, Tombol Tetap Sejajar dengan Nama */
    .menu-master-row { position: relative; }
    .badge-container-master { 
        width: 100%; 
        order: 3; /* Turunkan ke urutan ke-3 */
        margin-top: 8px !important; 
        padding-left: 28px !important; /* Sejajarkan lencana dengan teks judul */
    }
    .btn-container-master { 
        order: 2; /* Pertahankan tombol sejajar dengan nama di atas */
        margin-top: 0 !important; 
    }
}

/* ========================================================================== */
/* CHAPTER 18: STANDALONE LOGIN PAGE                                          */
/* ========================================================================== */

body.login-page { 
    height: 100vh !important; 
    margin: 0 !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    background-color: var(--bg-body) !important;
}

.login-card { 
    background: rgba(23, 29, 43, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; 
    padding: 24px 28px; 
    width: 100%; 
    max-width: 380px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1); 
}

.login-title { font-weight: 800; letter-spacing: -1px; color: var(--text-main); }
.login-subtitle { letter-spacing: -0.5px; }
.text-accent { color: var(--accent-color) !important; }

.login-input { 
    border-radius: 6px !important; 
    padding: 6px 10px !important; 
    height: auto !important; 
    font-size: 0.8rem !important; 
    font-weight: 700 !important;
    background-color: var(--input-bg) !important; 
    border: 1px solid var(--border-color) !important; 
    color: var(--text-main) !important; 
    transition: all 0.3s ease !important; 
}
.login-input::placeholder { color: var(--text-muted) !important; opacity: 0.8 !important; }
.login-input:focus { 
    background-color: var(--bg-card) !important; 
    border-color: var(--accent-color) !important; 
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important; 
}

.btn-login { 
    background: linear-gradient(135deg, var(--accent-color), #ec4899); 
    color: white !important; border: none; border-radius: 6px; padding: 6px 24px; 
    font-weight: 800; font-size: 0.85rem; letter-spacing: 0.5px; width: auto; min-width: 120px;
    transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3); 
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6); }

.btn-login-warning { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); }

.forgot-link { font-size: 0.8rem; font-weight: 700; color: var(--accent-color); text-decoration: none; transition: 0.2s; cursor: pointer; }
.forgot-link:hover { color: #a5b4fc; text-decoration: underline; }

.alert-login { border-radius: 10px; }
.alert-warning-login { background-color: rgba(245, 158, 11, 0.15); color: var(--neon-orange); border-radius: 10px; border: 1px solid rgba(245, 158, 11, 0.3); }

.dropdown-dark-fix { background: var(--bg-card); color: var(--text-main); }
.btn-otp-send { background: var(--accent-color); color: white; border: none; transition: 0.3s; }
.btn-otp-verify { background-color: var(--neon-green); color: white; border: none; transition: 0.3s; }
.otp-code-input { font-size: 1.2rem !important; letter-spacing: 5px !important; }

/* ========================================================================== */
/* CHAPTER 19: PROFILE PAGE SPECIFICS & ZTNA STYLES                           */
/* ========================================================================== */

/* Border Kustom untuk Card Profil */
.border-top-primary { border-top: 4px solid var(--accent-color) !important; border-radius: 12px; }
.border-top-danger { border-top: 4px solid var(--neon-red) !important; border-radius: 12px; }
.border-top-info { border-top: 4px solid var(--neon-blue) !important; border-radius: 12px; }

/* 💥 Avatar Profil Wrapper & Glow Premium 💥 */
.profile-avatar-wrapper { 
    width: clamp(140px, 16vw, 240px); 
    aspect-ratio: 1/1; 
    cursor: pointer; 
}
.profile-avatar-img { 
    width: 100%; height: 100%; 
    border: 4px solid var(--bg-card); /* Border lebih tipis & rapi */
    object-fit: cover; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.25); /* Glow menyesuaikan background */
}
.profile-avatar-wrapper:hover .profile-avatar-img {
    transform: scale(1.03); /* Membesar perlahan saat disorot */
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5); /* Glow memancar cerah */
}
.profile-cam-btn { 
    bottom: 5%; right: 5%; width: clamp(36px, 4vw, 48px); height: clamp(36px, 4vw, 48px); 
    background: var(--accent-color); color: white; border-radius: 50%; 
    border: 3px solid var(--bg-card); transition: 0.3s; z-index: 5; 
}
.avatar-cam-icon { font-size: clamp(0.8rem, 1vw, 1.2rem); }

/* Tipografi Profil */
.profile-display-name { font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.profile-display-uname { font-size: clamp(0.8rem, 1vw, 0.95rem); }
.badge-role-profile { background-color: rgba(34, 197, 94, 0.15); color: var(--neon-green); font-size: 0.85rem; letter-spacing: 0.5px; }

/* Aksen Tombol Kecil */
.card-title-sm { font-size: 0.85rem; }
.btn-sm-action { font-size: 0.75rem; letter-spacing: 0.5px; }
.btn-mfa-save { background: linear-gradient(135deg, var(--neon-blue), #0284c7); border: none; }

.alert-compact { border-radius: 6px; font-size: 0.7rem; flex: 0 0 auto !important; }

/* 💥 KOTAK INPUT (EYE TOGGLE PASSWORD) 💥 */
.cursor-pointer { cursor: pointer !important; }
.toggle-password {
    background-color: var(--bg-card) !important;
    border-left: none !important;
    transition: 0.2s ease;
}
.toggle-password:hover {
    color: var(--accent-color) !important;
}
.toggle-password i { font-size: 0.85rem !important; }

/* Penyesuaian Radius Input-Group untuk Input-SM */
.input-group-sm .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.input-group-sm .input-group-text {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
/* Fokus form menular ke input-group-text sebelahnya */
.input-group:focus-within .toggle-password {
    border-color: var(--accent-color) !important;
}

/* Kotak Setup MFA (Google Authenticator) */
.totp-setup-box { background: var(--bg-body); border: 1px dashed var(--border-color); border-radius: 12px; }
.totp-title { font-size: 0.8rem; }
.totp-list { font-weight: 600; }
.totp-qr-img { width: 150px; height: 150px; border-radius: 12px; border: 4px solid var(--input-bg); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.totp-secret-code { background: var(--input-bg); color: var(--accent-color); border: 1px solid var(--border-color); font-size: 0.85rem; }
.totp-input-wrapper { max-width: 250px; }
.totp-input-box { font-size: 1.5rem !important; letter-spacing: 5px !important; color: var(--accent-color) !important; border-color: var(--border-color) !important; background: var(--input-bg) !important; }

/* Penyesuaian Ikon Hero untuk Profile */
.hero-icon-profile { background: rgba(14, 165, 233, 0.2); border-color: rgba(14, 165, 233, 0.4); box-shadow: 0 0 15px rgba(14, 165, 233, 0.4); }
.hero-icon-img { width: 35px; height: 35px; filter: drop-shadow(0 0 8px rgba(255,255,255,0.8)); }

/* ========================================================================== */
/* CHAPTER 20: NETWORK TOPOLOGY MAP                                           */
/* ========================================================================== */

/* Area Kanvas untuk menggambar Node Fisika */
#network-canvas {
    width: 100%;
    height: calc(100vh - 180px);
    background: var(--bg-body);
    border-radius: 12px;
    outline: none;
    contain: strict !important;
    overflow: hidden !important;
    z-index: 1;
}

/* Kotak Legenda di atas Kanvas */
.topology-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: var(--bg-card);
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Responsivitas Kanvas di Layar Kecil (Mobile) */
@media (max-width: 768px) {
    #network-canvas {
        height: 500px !important; /* Batasi tinggi di HP agar tidak terlalu panjang */
    }
    .topology-overlay {
        position: static !important; /* Lepas status melayang agar tidak menutupi bola di HP */
        margin: 10px;
        box-shadow: none;
        border-bottom: 1px dashed var(--border-color);
    }
}

/* ========================================================================== */
/* 💥 FIX: KONTROL LEAFLET, GEOMAN & LACI ADAPTIF TEMA (DARK/LIGHT) 💥        */
/* ========================================================================== */

/* 1. KOTAK KONTROL LEAFLET (Zoom, Layers, dll) */
.leaflet-bar,
.leaflet-control-layers {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    color: var(--text-main) !important;
}

/* 2. TEKS DI DALAM KOTAK LAYERS (Kanan Atas) */
.leaflet-control-layers-list {
    color: var(--text-main) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 4px !important;
}
.leaflet-control-layers-list label {
    color: var(--text-main) !important;
    margin-bottom: 4px !important;
    display: flex;
    align-items: center;
}

/* 3. TOMBOL ZOOM LEAFLET (+ / -) */
.leaflet-bar a,
.leaflet-bar a:hover {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color) !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-weight: bold;
}
.leaflet-bar a:last-child {
    border-bottom: none !important;
}
.leaflet-bar a:hover {
    background-color: var(--table-hover) !important;
    color: var(--accent-color) !important;
}

/* ========================================================================== */
/* 💥 JURUS PRESISI FINAL: IKON GEOMAN (PUTIH SOLID TANPA SILAU HOVER) 💥     */
/* ========================================================================== */

/* 1. Pastikan KOTAK TOMBOL bebas dari filter agar tidak silau saat di-hover */
.leaflet-pm-toolbar .button-container a {
    background-color: transparent !important;
    filter: none !important;
}
.leaflet-pm-toolbar .button-container a:hover {
    background-color: var(--table-hover) !important;
}

/* 2. Ikon Panah Bawaan Kita (Aman dari filter putih) */
#iconGeomanToggle { 
    color: var(--text-main) !important; 
    transition: all 0.2s ease; 
    filter: none !important;
}
.leaflet-pm-toolbar .button-container a:hover #iconGeomanToggle {
    color: var(--accent-color) !important;
}

/* 3. MODE GELAP (Dark Mode): Tembak Langsung Anak Elemen (Ikon) di dalam Tombol */
/* 💥 Sihir Bekerja Di Sini: Kita seleksi semua isi di dalam tag <a> kecuali ikon panah kita 💥 */
[data-theme="dark"] .leaflet-pm-toolbar .button-container a > *:not(#iconGeomanToggle),
[data-theme="dark"] .leaflet-control-layers-toggle {
    /* Matikan warna kusam jadi hitam(0), lalu balik jadi Putih Bersih(100%) */
    filter: brightness(0) saturate(100%) invert(100%) !important;
    opacity: 0.85 !important;
    transition: all 0.2s ease !important;
}

/* 4. EFEK HOVER DI MODE GELAP: Ikon Menyala Tanpa Bikin Kotak Silau */
[data-theme="dark"] .leaflet-pm-toolbar .button-container a:hover > *:not(#iconGeomanToggle),
[data-theme="dark"] .leaflet-bar a:hover .leaflet-control-layers-toggle {
    opacity: 1 !important;
    /* Efek Glow Tipis HANYA pada bentuk ikonnya */
    filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.7)) !important;
}

/* 5. MODE TERANG (Light Mode): Tajamkan Hitamnya */
[data-theme="light"] .leaflet-pm-toolbar .button-container a > *:not(#iconGeomanToggle),
[data-theme="light"] .leaflet-control-layers-toggle {
    filter: brightness(0) !important;
    opacity: 0.7 !important;
}
[data-theme="light"] .leaflet-pm-toolbar .button-container a:hover > *:not(#iconGeomanToggle),
[data-theme="light"] .leaflet-bar a:hover .leaflet-control-layers-toggle {
    opacity: 1 !important;
    filter: brightness(0) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3)) !important;
}

/* Lapisan Pengaman Ekstra Jika Geoman Memakai SVG Tanpa Bungkus */
[data-theme="dark"] .leaflet-pm-toolbar .button-container a svg,
[data-theme="dark"] .leaflet-pm-toolbar .button-container a path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* 5. WARNA TEKS MENU LACI "ALAT & FILTER" (KIRI ATAS) */
[data-theme="dark"] .gass-dropdown-item {
    color: #f8fafc !important; /* Putih terang di dark mode */
}
[data-theme="dark"] .gass-dropdown-header {
    color: #94a3b8 !important; /* Abu-abu terang agar jelas */
}

/* 6. WATERMARK/ATRIBUSI LEAFLET (Kanan Bawah) */
.leaflet-control-attribution {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important; 
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    margin: 0 12px 12px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
[data-theme="dark"] .leaflet-control-attribution {
    color: #e2e8f0 !important; /* Teks putih solid di mode gelap */
}
.leaflet-control-attribution a {
    color: var(--accent-color) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    margin: 0 2px !important;
}
.leaflet-control-attribution a:hover {
    color: var(--neon-blue) !important;
}

/* ========================================================================== */
/* 💥 FIX: KUSTOMISASI WARNA CLUSTER MARKER (MENGIKUTI STATUS ONU) 💥         */
/* ========================================================================== */
.custom-cluster { 
    background-clip: padding-box; 
    border-radius: 50%; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    font-weight: 800; 
    font-size: 0.85rem; 
}
.custom-cluster div { 
    width: 30px; 
    height: 30px; 
    margin-left: 5px; 
    margin-top: 5px; 
    text-align: center; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); 
}

/* 1. ONLINE (Hijau) */
.cluster-online { background-color: rgba(16, 185, 129, 0.4); }
.cluster-online div { background-color: var(--neon-green); color: white; }

/* 2. LOS / PUTUS (Merah) - Ditambah Efek Denyut Peringatan! */
.cluster-los { background-color: rgba(239, 68, 68, 0.4); animation: pulse-cluster-red 1.5s infinite; }
.cluster-los div { background-color: var(--neon-red); color: white; box-shadow: 0 0 10px var(--neon-red); }
@keyframes pulse-cluster-red { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }

/* 3. DYINGGASP (Oranye) */
.cluster-dying { background-color: rgba(245, 158, 11, 0.4); }
.cluster-dying div { background-color: var(--neon-orange); color: white; }

/* 4. OFFLINE (Abu-abu) */
.cluster-offline { background-color: rgba(100, 116, 139, 0.4); }
.cluster-offline div { background-color: #64748b; color: white; }

/* 5. ODP (Hitam/Abu Gelap) */
.cluster-odp { background-color: rgba(51, 65, 85, 0.4); }
.cluster-odp div { background-color: #1e293b; color: white; }
/* Perjelas Icon Sorting DataTables dan Header (Global) */
table.dataTable thead th {
    color: var(--text-main) !important;
    border-bottom: 2px solid var(--border-color) !important;
}
table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background-image: none !important; 
    position: relative;
}
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 0.2 !important;
    font-size: 0.9rem !important;
    color: var(--text-muted) !important;
    right: 0.5em !important;
}
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 1 !important;
    color: var(--neon-blue) !important;
    font-weight: 900 !important;
}

/* ========================================================================== */
/* PREMIUM ENTERPRISE DASHBOARD & UI FIXES                                    */
/* ========================================================================== */

/* 1. Fix Sidebar Width agar teks "Cloudflare" tidak terpotong */
.sidebar { width: 260px !important; }
@media (min-width: 768px) { .sidebar { width: 280px !important; } }
ul.navbar-nav.sidebar:not(.toggled) { width: 280px !important; }

/* 2. Glassmorphism & Enterprise Dashboard Cards */
.card-smart {
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), inset 0 2px 0 rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    overflow: hidden;
}

html[data-theme="dark"] .card-smart {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.7) 100%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.card-smart:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15), inset 0 2px 0 rgba(255, 255, 255, 1) !important;
}

html[data-theme="dark"] .card-smart:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.1) !important;
}

/* 3. Enhancing top pill summary cards */
#col_online_onu .card-smart { border-top: 4px solid var(--neon-green) !important; border-bottom: 0 !important; }
#col_offline_onu .card-smart { border-top: 4px solid var(--text-muted) !important; border-bottom: 0 !important; }
#col_dying_onu .card-smart { border-top: 4px solid var(--neon-orange) !important; border-bottom: 0 !important; }
#col_total_onu .card-smart { border-top: 4px solid var(--accent-color) !important; border-bottom: 0 !important; }
#col_los_onu .card-smart { border-top: 4px solid var(--neon-red) !important; border-bottom: 0 !important; }

/* 4. Subtly animated icons inside cards */
.card-smart i.bg-icon-watermark {
    font-size: 3.5rem !important;
    opacity: 0.1 !important;
    position: absolute;
    right: -10px;
    bottom: -15px;
    transition: all 0.5s ease;
    transform: rotate(-15deg);
}
.card-smart:hover i.bg-icon-watermark {
    transform: rotate(0deg) scale(1.1);
    opacity: 0.2 !important;
}

/* 5. Beautiful recent activity lists */
.empty-log-state {
    background: rgba(255,255,255,0.5);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}
html[data-theme="dark"] .empty-log-state { background: rgba(0,0,0,0.2); }