body {
  /* font-family: 'Courier New', sans-serif;
  Pastikan Font Inter digunakan */
  font-family: 'Inter', monospace;
  background-color: #121212;
  color: #00ffcc;
}

.navbar {
  background-color: #0d0d0d;
  border-bottom: 2px solid #00ffcc;
}

.sidebar {
  background-color: #1a1a1a;
  border-right: 1px solid #00ffcc;
  height: 100vh;
  padding-top: 20px;
}

.sidebar .nav-link {
  color: #00ffcc;
  transition: 0.2s;
}
.sidebar .nav-link:hover {
  background-color: #00ffcc22;
  color: #fff;
}

h1, h2, h3 {
  color: #00ffcc;
  text-shadow: 0 0 5px #00ffcc;
}

.glow-box {
  background-color: #1f1f1f;
  border: 1px solid #00ffcc55;
  box-shadow: 0 0 8px #00ffcc55;
  padding: 20px;
  border-radius: 8px;
}

/* Fix font warna di tabel dark */
table {
  color: #00ffcc !important;
  background-color: #1a1a1a;
}

table th,
table td {
  color: #00ffcc !important;
  border-color: #00ffcc44;
}

table thead {
  background-color: #111;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #222;
}

.table-hover tbody tr:hover {
  background-color: #333;
}

.table-dark {
  background-color: #1a1a1a;
  color: #00ffcc;
}

/* glicth techno.js */
.glitch {
  position: relative;
  color: #00ffcc;
  font-weight: bold;
  display: inline-block;
  overflow: hidden;
}
.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}
.glitch span:first-child {
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitchTop 2s infinite linear alternate-reverse;
}
.glitch span:last-child {
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitchBottom 2s infinite linear alternate-reverse;
}
@keyframes glitchTop {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(-1px, -1px); }
  40% { transform: translate(1px, -2px); }
  60% { transform: translate(0px, 1px); }
  80% { transform: translate(1px, 0px); }
  100% { transform: translate(-1px, -1px); }
}
@keyframes glitchBottom {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(1px, 1px); }
  40% { transform: translate(-1px, 2px); }
  60% { transform: translate(0px, -1px); }
  80% { transform: translate(-1px, 0px); }
  100% { transform: translate(1px, 1px); }
}

/* Techno Card Styles */

.techno-card {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  border-radius: 15px;
  transition: 0.3s ease;
}

.techno-glow-sm {
  border-radius: 8px;
  border: 1px solid #1f1f1f;
  box-shadow: 0 0 4px rgba(0,255,180,0.3);
  background-color: #111 !important;
}

.card-header {
  background: linear-gradient(90deg, #111, #222);
  border-bottom: 1px solid #444;
}

.card-body {
  background-color: #101010;
}

.status-card:hover {
  box-shadow: 0 0 20px #00ff99cc;
  transition: box-shadow 0.2s ease-in-out;
}

.glitch {
  text-shadow: 2px 2px red, -2px -2px cyan;
  animation: glitch 0.8s infinite alternate;
}

@keyframes glitch {
  0% { text-shadow: 2px 2px red, -2px -2px cyan; }
  50% { text-shadow: -2px -2px red, 2px 2px cyan; }
  100% { text-shadow: 2px 0 red, -2px 0 cyan; }
}

.text-glow {
  color: #0ff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}

/* Status Panel Styles */
.status-panel {
  background-color: #1e1e2f;
  border-left: 4px solid #00ffcc;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 0 10px #00ffcc44;
  font-family: 'Courier New', monospace;
  color: #e0e0e0;
}

.status-panel h5.text-glow {
  color: #00ffcc;
  text-shadow: 0 0 5px #00ffcc;
  font-weight: bold;
}

.status-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.status-list li {
  margin-bottom: 6px;
}

.label {
  width: 160px;
  display: inline-block;
  color: #aaa;
}

.value {
  font-weight: bold;
}

.text-success {
  color: #00ff00 !important;
}

.text-danger {
  color: #ff5555 !important;
}

.text-warning {
  color: #ffaa00 !important;
}

.text-info {
  color: #00ccff !important;
}
/* public/css/style.css */
@media (max-width: 767.98px) { /* Breakpoint untuk layar di bawah medium (sm) */
  .card-header .badge.bg-light.text-dark {
    font-size: 0.75rem; /* Ukuran font lebih kecil */
    padding: 0.15em 0.4em; /* Padding lebih kecil */
    /* Anda juga bisa menambahkan margin jika perlu */
    /* margin-left: 2px; */
  }
}

/* public/css/style.css */
@media (max-width: 991.98px) { /* Target screens below lg (tablet and mobile) */
  /* Override margin-left added by Bootstrap's ms-sm-auto on <main> tags */
  /* This targets <main> elements that have the ms-sm-auto class */
  main.ms-sm-auto {
    margin-left: 0 !important;
  }

  /* If you used a specific class like main-content-mobile-padding on a div or main */
  /* .main-content-mobile-padding {
      margin-left: 0 !important;
  } */

  /* Add padding-top to standard Bootstrap containers to clear fixed navbar */
  .container,
  .container-fluid {
       /*padding-top: 60px !important; */ /* Adjust value as needed to clear your navbar */
  }
}

.bg-purple-techno { /* Contoh warna header kartu */
    background: linear-gradient(135deg, #4c2a85 0%, #7c0101 100%) !important;
    /* Ganti dengan warna tema Anda */
}

.info-group {
    margin-bottom: 0.75rem;
}
.info-group label {
    display: block;
    color: var(--text-secondary, #aaaaaa); /* Gunakan variabel CSS Anda */
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
}
.info-group .value {
    font-weight: 500;
    font-size: 0.95rem;
    /* color: var(--text-primary, #ffffff); */ /* Biarkan warna default atau sesuaikan */
}
.text-glow { /* Anda sudah memiliki ini, pastikan konsisten */
  color: #0ff; /* Contoh */
  text-shadow: 0 0 8px #0ff; /* Contoh */
}

/* Add padding to main content wrapper to clear fixed navbar */
.main-content-wrapper {
  padding-top: 10px; /* Sesuaikan sesuai tinggi navbar Anda, tinggi navbar fixed umumnya sekitar 56px */
}

/* --- Penyesuaian Umum untuk Select2 agar rapi dengan Bootstrap --- */

/* Memastikan container Select2 memiliki lebar penuh dan tampil sebagai block */
.select2-container {
    display: block !important; /* Memaksa tampilan block */
    width: 100% !important;   /* Memaksa lebar 100% */
}

/* Memastikan semua elemen di dalam Select2 mengikuti model box yang benar */
.select2-container * {
    box-sizing: border-box;
}

/* Jika dropdown muncul di belakang modal atau elemen lain */
/* Z-index modal Bootstrap 5 biasanya 1055. Pastikan Select2 lebih tinggi. */
.select2-container--open {
    z-index: 1060 !important; 
}

/* Memastikan dropdown itu sendiri tidak terpotong */
.select2-dropdown {
    z-index: 1061 !important; /* Pastikan elemen dropdown itu sendiri lebih tinggi dari container */
    /* overflow: auto !important; */ /* Aktifkan jika daftar pilihan terlalu panjang dan terpotong */
}

/* Menyesuaikan tinggi elemen Select2 agar konsisten dengan input form Bootstrap */
/* Ini berlaku untuk mode single select dan multiple select */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    /*height: calc(1.5em + 0.75rem + 2px);*/ /* Tinggi standar form-control Bootstrap 5 */
    padding: 0.375rem 0.75rem;          /* Padding standar form-control Bootstrap 5 */
    /*display: flex;*/ /* Gunakan flexbox untuk alignment vertikal */
    align-items: center; /* Pusatkan secara vertikal */
}

/* Menyesuaikan tinggi baris teks di dalam Select2 */
.select2-container .select2-selection__rendered {
    line-height: normal; /* Biarkan line-height normal agar flexbox bekerja */
    padding-left: 0; 
    padding-right: 0;
}

/* Penyesuaian untuk border-radius agar sesuai dengan tema Bootstrap 5 */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: 0.375rem; /* Standard Bootstrap 5 border-radius */
}

/* Penyesuaian padding untuk teks pilihan yang dipilih di multiple select */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    padding: 0.25rem 0.5rem; /* Padding kecil untuk setiap tag pilihan */
    margin-top: 0.25rem;
    margin-left: 0.25rem;
    border-radius: 0.25rem;
    display: inline-flex; /* Agar icon 'x' juga rapi */
    align-items: center;
}

/* Jika ada tombol 'x' untuk menghapus pilihan di multiple select */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0.25rem;
    color: inherit;
    line-height: 1; /* Reset line height */
}

/* --- AKHIR PENYESUAIAN SELECT2 --- */


/* --- Tambahan CSS Krusial untuk Modal (Agar Dropdown Tidak Terpotong/Meluap) --- */
/* Ini penting agar dropdown Select2 yang biasanya meluap dari modal tidak terpotong */
.modal {
    overflow: visible !important; /* Izinkan konten modal meluap jika diperlukan oleh dropdown */
}

.modal-dialog {
    overflow: visible !important;
}

.modal-content {
    overflow: visible !important;
}

.modal-body {
    overflow: visible !important;
}

/* Pastikan elemen `form-group` yang membungkus Select2 juga tidak memotong */
.form-group {
    overflow: visible !important;
}
/* --- AKHIR CSS KRUSIAL MODAL --- */
/* Custom SweetAlert2 Dark Theme (untuk popup putih) */
.swal2-popup {
    background-color: #282828 !important; /* Latar belakang gelap */
    color: #e0e0e0 !important; /* Teks terang */
    border: 1px solid #444 !important; /* Border halus */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important; /* Bayangan */
}

.swal2-title {
    color: #f8f9fa !important; /* Judul lebih terang */
}

.swal2-html-container {
    color: #cccccc !important; /* Teks body */
}

.swal2-styled.swal2-confirm {
    background-color: #007bff !important; /* Tombol konfirmasi utama */
    color: rgb(29, 27, 27) !important;
    border: 1px solid #0056b3 !important;
}

.swal2-styled.swal2-confirm:hover {
    background-color: #0056b3 !important;
}

.swal2-styled.swal2-cancel {
    background-color: #6c757d !important; /* Tombol cancel */
    color: rgb(44, 42, 42) !important;
    border: 1px solid #5a6268 !important;
}

.swal2-styled.swal2-cancel:hover {
    background-color: #5a6268 !important;
}

/* Untuk ikon (jika perlu penyesuaian warna) */
.swal2-icon.swal2-success {
    border-color: #28a745 !important;
}
.swal2-icon.swal2-success .swal2-success-line-long,
.swal2-icon.swal2-success .swal2-success-line-tip {
    background-color: #28a745 !important;
}

.swal2-icon.swal2-error {
    border-color: #dc3545 !important;
}
.swal2-icon.swal2-error .swal2-x-mark {
    background-color: #dc3545 !important;
}

.swal2-icon.swal2-warning {
    border-color: #ffc107 !important;
}
.swal2-icon.swal2-warning .swal2-icon-content {
    color: #ffc107 !important;
}


/* Pastikan semua elemen memiliki sudut membulat secara default jika belum ada */
/* Ini adalah praktik umum Tailwind, jadi mungkin tidak perlu ditambahkan secara eksplisit */
/* .rounded-md {
    border-radius: 0.375rem;
} */

/* Kustomisasi untuk scrollbar*/
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a; /* Sangat gelap */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #00FFFF; /* Warna neon */
    border-radius: 10px;
    border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: #00E0E0; /* Sedikit lebih gelap saat hover */
}

/* Efek glow pada elemen tertentu (opsional, bisa ditambahkan ke komponen spesifik) */
.glow-text {
    text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF;
}

.glow-border {
    box-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, inset 0 0 5px #00FFFF;
}

/* Gaya untuk ikon chevron di menu yang dapat dilipat */
.menu-parent .fa-chevron-down {
    transition: transform 0.2s ease-in-out;
}
.menu-parent .fa-chevron-down.rotate-180 {
    transform: rotate(180deg);
}

/* Gaya untuk header menu seperti "=== Laporan ===" */
.text-gray-400.text-xs.uppercase.font-semibold.px-4.pt-4.pb-2 {
    /* Warna diatur di Tailwind, ini hanya untuk memastikan konsistensi */
    /* color: #a0aec0; */
    /* font-size: 0.75rem; */
    /* text-transform: uppercase; */
    /* font-weight: 600; */
    /* padding: 1rem 1rem 0.5rem 1rem; */
}

/* Gaya untuk sub-menu yang merupakan anak dari header "===" */
#main-sidebar .pl-2 {
    padding-left: 0.5rem; /* Indentasi lebih sedikit */
}
#main-sidebar .pl-6 {
    padding-left: 1.5rem; /* Indentasi untuk sub-menu biasa */
}

/* Pastikan main-content selalu memiliki lebar yang benar */
#main-content {
    /* Pada desktop, flex-1 akan mengambil sisa ruang */
    /* Pada mobile, saat sidebar fixed, ini akan memastikan main-content mengambil 100% lebar yang tersedia */
    width: 100%; /* Pastikan lebar penuh */
    min-width: 0; /* Penting untuk flexbox agar tidak meluap */
}

/* Pastikan container-fluid di dalam main-content tidak terpengaruh oleh lebar sidebar yang fixed */
@media (max-width: 768px) {
    #main-content .container-fluid {
        /* Sesuaikan padding jika diperlukan untuk menghindari konten menempel ke tepi layar */
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* css clik indicator */
.clickable-card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.clickable-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.text-decoration-none {
    text-decoration: none !important;
}
/* Memastikan dropdown Select2 muncul di atas modal */
.select2-container--open {
    z-index: 1060 !important; /* Nilai ini harus lebih tinggi dari z-index modal Bootstrap (1055) */
}
/*whatsapp settings ejs script*/
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-connected { background-color: #28a745; }
        .status-connecting { background-color: #ffc107; animation: pulse 1.5s infinite; }
        .status-waiting_for_scan { background-color: #17a2b8; animation: pulse 1.5s infinite; }
        .status-disconnected, .status-logged-out { background-color: #dc3545; }
        .status-error, .status-max-reconnect-reached { background-color: #dc3545; animation: pulse 1.5s infinite; }
        .status-reconnecting { background-color: #fd7e14; animation: pulse 1.5s infinite; }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0.3; }
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-2px); }
            75% { transform: translateX(2px); }
        }
        
        .qr-container {
            min-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            background-color: #343a40;
        }
        
        .gateway-item {
            transition: all 0.3s ease;
        }

        .gateway-item:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        .toggle-password:hover {
            color: #0d6efd;
        }

        .techno-card {
            border: 1px solid rgba(13, 110, 253, 0.2);
            background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.02) 100%);
        }

        .progress-bar-animated {
            animation: progress-bar-stripes 1s linear infinite;
        }

        .session-info {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .action-buttons .btn {
            margin-right: 10px;
            margin-bottom: 10px;
        }
        
        .log-container {
            max-height: 200px;
            overflow-y: auto;
            background-color: #000;
            color: #00ff00;
            padding: 15px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
        }
        
        .gateway-card {
            border: 1px solid #dee2e6;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            background-color: #fff;
        }
        
        .test-message-form {
            background-color: #343a40;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #dee2e6;
        }
        
        .loading-spinner {
            display: none;
        }
        
        .connection-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: white;
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #dee2e6;
            text-align: center;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #495057;
        }
        
        .stat-label {
            font-size: 12px;
            color: #6c757d;
            text-transform: uppercase;
        }

/* Style untuk tombol kirim WA */
/* Custom styling untuk QRIS toggle */
.form-check-input:checked {
    background-color: #25d366;
    border-color: #25d366;
}

.badge.bg-success {
    background-color: #25d366 !important;
}

.alert-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* Styling untuk preview box */
.border.rounded.p-3.bg-light {
    border: 1px solid #dee2e6 !important;
    background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), 
                linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f8f9fa 75%), 
                linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Animation for status changes */
.badge {
    transition: all 0.3s ease;
}

.btn {
    transition: all 0.2s ease;
}

/* Loading spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spinner.fa-spin {
    animation: spin 1s linear infinite;
}

/* WhatsApp green theme */
.text-whatsapp {
    color: #25d366 !important;
}

.bg-whatsapp {
    background-color: #25d366 !important;
}

.border-whatsapp {
    border-color: #25d366 !important;
}

/* Responsive badges */
@media (max-width: 576px) {
    .badge {
        font-size: 0.7rem;
    }
    
    .btn-sm .badge {
        font-size: 0.6rem;
    }
}

/* Trouble Report Status Badges */
.status-badge {
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-transform: uppercase;
}

.status-badge.status-open {
    background-color: #dc3545; /* Red */
}
.status-badge.status-in_progress {
    background-color: #ffc107; /* Yellow */
    color: #000;
}
.status-badge.status-resolved {
    background-color: #198754; /* Green */
}
.status-badge.status-closed {
    background-color: #6c757d; /* Gray */
}

/* Futuristic Footer Styles */
.futuristic-footer {
    background: rgba(17, 24, 39, 0.8); /* Latar belakang gelap & semi-transparan */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #94a3b8; /* Warna teks abu-abu terang */
    font-size: 0.875rem;
}

.futuristic-footer .footer-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #00ccff; /* Warna cyan neon */
    text-shadow: 0 0 5px rgba(0, 204, 255, 0.5);
    margin: 0;
}

.futuristic-footer .footer-subtitle {
    font-size: 0.8rem;
    color: #94a3b8;
}

.futuristic-footer .footer-copyright {
    color: #6b7280; /* Abu-abu lebih gelap agar tidak terlalu menonjol */
}

.futuristic-footer .footer-status {
    display: flex;
    align-items: center;
}

.futuristic-footer .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.futuristic-footer .status-dot.live {
    background-color: #28a745; /* Hijau */
    box-shadow: 0 0 8px #28a745;
    animation: pulse-green 2s infinite; /* Menggunakan animasi denyut yang sudah ada */
}

.futuristic-footer .status-text {
    font-family: 'Monaco', 'Courier New', monospace;
    font-weight: bold;
    color: #28a745; /* Hijau */
    letter-spacing: 1px;
    font-size: 0.8rem;
}