/**
 * Dark Mode CSS for Monitoring App
 *
 * Color Palette:
 * - Background: #1a1a2e, #16213e
 * - Card: #0f3460, #1f4068
 * - Sidebar: #16213e
 * - Text: #e8e8e8, #a8a8a8
 * - Border: #2a2a4a
 *
 * Bootstrap colors are preserved
 */

/* ============================================
   BODY & GLOBAL
   ============================================ */
html.dark-mode {
    background-color: #1a1a2e !important;
    color: #e8e8e8 !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ============================================
   TOPBAR / NAVBAR
   ============================================ */
html.dark-mode .navbar {
    background-color: #16213e !important;
    border-bottom: 1px solid #2a2a4a;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

html.dark-mode .topbar {
    background-color: #16213e !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

html.dark-mode .navbar-light .navbar-nav .nav-link,
html.dark-mode .navbar-dark .navbar-nav .nav-link {
    color: #e8e8e8 !important;
}

html.dark-mode .navbar-light .navbar-toggler-icon,
html.dark-mode .navbar-dark .navbar-toggler-icon {
    filter: invert(1);
}

html.dark-mode .topbar-divider {
    background-color: #2a2a4a;
}

/* ============================================
   SIDEBAR
   ============================================ */
html.dark-mode .sidebar {
    background-color: #16213e !important;
    border-right: 1px solid #2a2a4a;
}

html.dark-mode .sidebar-brand {
    color: #e8e8e8 !important;
}

html.dark-mode .sidebar .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.25s ease, background-color 0.25s ease;
}

html.dark-mode .sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

html.dark-mode .sidebar .nav-item.active .nav-link {
    background-color: rgba(78, 115, 223, 0.3) !important;
    color: #ffffff !important;
}

html.dark-mode .sidebar-heading {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Collapse Menu in Sidebar */
html.dark-mode .sidebar .collapse {
    background-color: rgba(0, 0, 0, 0.1);
}

html.dark-mode .sidebar .collapse-inner {
    background-color: #1f4068 !important;
    border: 1px solid #2a2a4a;
}

html.dark-mode .sidebar .collapse-item {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html.dark-mode .sidebar .collapse-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

html.dark-mode .sidebar .collapse-item.active {
    background-color: rgba(78, 115, 223, 0.3) !important;
    color: #ffffff !important;
}

/* Sidebar Search */
html.dark-mode #sidebarSearch {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #ffffff !important;
}

html.dark-mode #sidebarSearch::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

html.dark-mode #sidebarSearch:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

/* ============================================
   CONTENT AREA
   ============================================ */
html.dark-mode #content-wrapper {
    background-color: #1a1a2e !important;
}

html.dark-mode #content {
    background-color: #1a1a2e !important;
}

/* ============================================
   CARDS
   ============================================ */
html.dark-mode .card {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a;
    color: #e8e8e8;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

html.dark-mode .card-header {
    background-color: #1f4068 !important;
    border-bottom: 1px solid #2a2a4a;
    color: #e8e8e8;
}

html.dark-mode .card-body {
    color: #e8e8e8;
}

html.dark-mode .card-footer {
    background-color: #1f4068 !important;
    border-top: 1px solid #2a2a4a;
    color: #e8e8e8;
}

html.dark-mode .card shadow mb-4 {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Card borders */
html.dark-mode .card.border-left-primary {
    border-left-color: #4e73df !important;
}

html.dark-mode .card.border-left-success {
    border-left-color: #1cc88a !important;
}

html.dark-mode .card.border-left-info {
    border-left-color: #36b9cc !important;
}

html.dark-mode .card.border-left-warning {
    border-left-color: #f6c23e !important;
}

html.dark-mode .card.border-left-danger {
    border-left-color: #e74a3b !important;
}

/* ============================================
   TABLES
   ============================================ */
html.dark-mode .table {
    color: #e8e8e8 !important;
    transition: color 0.25s ease;
}

html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(78, 115, 223, 0.1) !important;
    color: #ffffff !important;
}

html.dark-mode .table thead th {
    background-color: #1f4068 !important;
    border-color: #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .table td {
    border-color: #2a2a4a !important;
    background-color: transparent !important;
}

html.dark-mode .table-bordered {
    border-color: #2a2a4a !important;
}

html.dark-mode .table-bordered td,
html.dark-mode .table-bordered th {
    border-color: #2a2a4a !important;
}

/* ============================================
   DATA TABLES
   ============================================ */
html.dark-mode .dataTables_wrapper {
    color: #e8e8e8 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #e8e8e8 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter input:focus {
    background-color: #1f4068 !important;
    border-color: #4e73df !important;
    outline: none;
}

html.dark-mode .paginate_button.page-item a {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .paginate_button.page-item:hover a {
    background-color: #1f4068 !important;
    border-color: #4e73df !important;
    color: #ffffff !important;
}

html.dark-mode .paginate_button.page-item.active a {
    background-color: #4e73df !important;
    border-color: #4e73df !important;
    color: #ffffff !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #666 !important;
}

/* ============================================
   FORMS
   ============================================ */
html.dark-mode .form-control {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

html.dark-mode .form-control:focus {
    background-color: #1f4068 !important;
    border-color: #4e73df !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

html.dark-mode .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly] {
    background-color: #0f3460 !important;
    color: #a8a8a8 !important;
}

/* Custom File Input */
html.dark-mode .custom-file-label {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .custom-file-input:focus ~ .custom-file-label {
    border-color: #4e73df !important;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

/* ============================================
   SELECT2
   ============================================ */
html.dark-mode .select2-container--default .select2-selection--single {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e8e8e8 !important;
}

html.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .select2-container--default .select2-dropdown {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
}

html.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #1f4068 !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #4e73df !important;
    outline: none;
}

html.dark-mode .select2-container--default .select2-results__option {
    background-color: #16213e !important;
    color: #e8e8e8 !important;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #4e73df !important;
    color: #ffffff !important;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #1f4068 !important;
    color: #ffffff !important;
}

html.dark-mode .select2-container--default .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

html.dark-mode .select2-container--default .select2-selection__arrow b {
    border-color: #e8e8e8 transparent transparent transparent !important;
}

/* Select2 Focus State */
html.dark-mode .select2-container--default.select2-container--focus .select2-selection--single,
html.dark-mode .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #4e73df !important;
}

/* ============================================
   BUTTONS
   ============================================ */
html.dark-mode .btn {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

html.dark-mode .btn-link {
    color: #4e73df !important;
}

html.dark-mode .btn-outline-secondary {
    border-color: #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .btn-outline-secondary:hover {
    background-color: #2a2a4a !important;
    color: #ffffff !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */
html.dark-mode .dropdown-menu {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .dropdown-item {
    color: #e8e8e8 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: #1f4068 !important;
    color: #ffffff !important;
}

html.dark-mode .dropdown-item.active,
html.dark-mode .dropdown-item:active {
    background-color: #4e73df !important;
    color: #ffffff !important;
}

html.dark-mode .dropdown-divider {
    border-color: #2a2a4a !important;
}

/* User Dropdown */
html.dark-mode .dropdown-menu.shadow {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* ============================================
   MODALS (Bootstrap Modal Dark Mode)
   ============================================ */

/* Modal Backdrop - overlay behind modal */
html.dark-mode .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .modal-backdrop.show {
    opacity: 0.6 !important;
}

/* Modal Container */
html.dark-mode .modal {
    background-color: rgba(0, 0, 0, 0.5);
}

html.dark-mode .modal.show {
    display: flex !important;
    align-items: center;
}

/* Modal Dialog */
html.dark-mode .modal-dialog {
    color: #e8e8e8;
}

/* Modal Content - main container */
html.dark-mode .modal-content {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Modal Header */
html.dark-mode .modal-header {
    background-color: #1f4068 !important;
    border-bottom: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
    padding: 1rem 1.5rem;
}

/* Modal Title */
html.dark-mode .modal-title {
    color: #f8f9fa !important;
    font-weight: 600;
}

/* Close Button (Bootstrap 4 style: <button class="close">) */
html.dark-mode .modal-header .close {
    color: #e8e8e8 !important;
    text-shadow: none !important;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}

html.dark-mode .modal-header .close:hover {
    color: #ffffff !important;
    opacity: 1;
}

html.dark-mode .modal-header .close:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.3);
}

/* Bootstrap 5 Close Button (.btn-close) */
html.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

html.dark-mode .btn-close:hover {
    opacity: 1;
}

html.dark-mode .btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.3);
    opacity: 1;
}

/* Modal Body */
html.dark-mode .modal-body {
    color: #e8e8e8 !important;
    padding: 1.5rem;
}

/* Modal Body - Text Elements */
html.dark-mode .modal-body p {
    color: #e8e8e8 !important;
    margin-bottom: 0.5rem;
}

html.dark-mode .modal-body strong {
    color: #f8f9fa !important;
}

html.dark-mode .modal-body label {
    color: #e8e8e8 !important;
}

/* Modal Body - Border/HR */
html.dark-mode .modal-body .border,
html.dark-mode .modal-body hr {
    border-color: #2a2a4a !important;
}

/* Modal Body - Custom Content Styling (e.g., note content area) */
html.dark-mode .modal-body .border.rounded {
    background-color: #1a1a2e !important;
    border-color: #2a2a4a !important;
}

/* Modal Footer */
html.dark-mode .modal-footer {
    background-color: #1f4068 !important;
    border-top: 1px solid #2a2a4a !important;
    padding: 1rem 1.5rem;
}

/* Modal Footer - Buttons */
html.dark-mode .modal-footer .btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html.dark-mode .modal-footer .btn-secondary {
    background-color: #2a2a4a !important;
    border-color: #3a3a5a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .modal-footer .btn-secondary:hover {
    background-color: #3a3a5a !important;
    border-color: #4a4a6a !important;
    color: #ffffff !important;
}

/* Modal Size Variations */
html.dark-mode .modal-sm .modal-content {
    max-width: 300px;
}

html.dark-mode .modal-lg .modal-content,
html.dark-mode .modal-xl .modal-content {
    max-width: 90%;
}

/* Scrollable Modal */
html.dark-mode .modal.modal-dialog-scrollable .modal-content {
    max-height: 80vh;
}

/* Centered Modal */
html.dark-mode .modal.modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
}

/* ============================================
   ALERTS
   ============================================ */
html.dark-mode .alert {
    border-color: #2a2a4a !important;
}

html.dark-mode .alert-secondary {
    background-color: #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .alert-light {
    background-color: #1f4068 !important;
    color: #e8e8e8 !important;
    border-color: #2a2a4a !important;
}

html.dark-mode .alert-dark {
    background-color: #0f3460 !important;
    color: #e8e8e8 !important;
    border-color: #2a2a4a !important;
}

/* ============================================
   BADGES
   ============================================ */
html.dark-mode .badge {
    color: #ffffff !important;
}

html.dark-mode .badge-secondary {
    background-color: #2a2a4a !important;
    color: #e8e8e8 !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
html.dark-mode .breadcrumb {
    background-color: transparent !important;
    color: #a8a8a8 !important;
}

html.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #666 !important;
}

html.dark-mode .breadcrumb-item a {
    color: #a8a8a8 !important;
}

html.dark-mode .breadcrumb-item a:hover {
    color: #ffffff !important;
}

html.dark-mode .breadcrumb-item.active {
    color: #e8e8e8 !important;
}

/* ============================================
   FOOTER
   ============================================ */
html.dark-mode .sticky-footer {
    background-color: #16213e !important;
    border-top: 1px solid #2a2a4a !important;
}

html.dark-mode .sticky-footer .copyright {
    color: #a8a8a8 !important;
}

/* ============================================
   PAGINATION
   ============================================ */
html.dark-mode .pagination {
    color: #e8e8e8 !important;
}

html.dark-mode .page-link {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .page-link:hover {
    background-color: #1f4068 !important;
    border-color: #4e73df !important;
    color: #ffffff !important;
}

html.dark-mode .page-item.active .page-link {
    background-color: #4e73df !important;
    border-color: #4e73df !important;
}

html.dark-mode .page-item.disabled .page-link {
    background-color: #0f3460 !important;
    border-color: #2a2a4a !important;
    color: #666 !important;
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
html.dark-mode .scroll-to-top {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .scroll-to-top:hover {
    background-color: #1f4068 !important;
    color: #ffffff !important;
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */
html.dark-mode .tooltip {
    color: #ffffff !important;
}

html.dark-mode .tooltip-inner {
    background-color: #1f4068 !important;
    color: #ffffff !important;
}

html.dark-mode .popover {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
}

html.dark-mode .popover-header {
    background-color: #1f4068 !important;
    border-bottom: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .popover-body {
    color: #e8e8e8 !important;
}

/* ============================================
   INPUT GROUPS
   ============================================ */
html.dark-mode .input-group-text {
    background-color: #1f4068 !important;
    border: 1px solid #2a2a4a !important;
    color: #e8e8e8 !important;
}

html.dark-mode .input-group-text .fa,
html.dark-mode .input-group-text .fas {
    color: #e8e8e8 !important;
}

/* ============================================
   CUSTOM CHECKBOX & RADIO
   ============================================ */
html.dark-mode .custom-control-label::before {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
}

html.dark-mode .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #4e73df !important;
    border-color: #4e73df !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
html.dark-mode .progress {
    background-color: #0f3460 !important;
}

/* ============================================
   TABS & NAVS
   ============================================ */
html.dark-mode .nav-tabs {
    border-color: #2a2a4a !important;
}

html.dark-mode .nav-tabs .nav-link {
    color: #a8a8a8 !important;
    border-color: transparent transparent #2a2a4a transparent;
}

html.dark-mode .nav-tabs .nav-link:hover {
    color: #ffffff !important;
    border-color: transparent transparent #2a2a4a transparent;
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: #16213e !important;
    border-color: #2a2a4a #2a2a4a #16213e #2a2a4a !important;
    color: #ffffff !important;
}

html.dark-mode .nav-pills .nav-link {
    color: #a8a8a8 !important;
}

html.dark-mode .nav-pills .nav-link.active,
html.dark-mode .nav-pills .show > .nav-link {
    background-color: #4e73df !important;
    color: #ffffff !important;
}

/* ============================================
   TEXT COLORS HELPERS
   ============================================ */
html.dark-mode .text-gray-100 { color: #ffffff !important; }
html.dark-mode .text-gray-200 { color: #f8f9fa !important; }
html.dark-mode .text-gray-300 { color: #e9ecef !important; }
html.dark-mode .text-gray-400 { color: #dee2e6 !important; }
html.dark-mode .text-gray-500 { color: #ced4da !important; }
html.dark-mode .text-gray-600 { color: #adb5bd !important; }
html.dark-mode .text-gray-700 { color: #f1f3f5 !important; }
html.dark-mode .text-gray-800 { color: #ffffff !important; }
html.dark-mode .text-gray-900 { color: #ffffff !important; }

/* ============================================
   BACKGROUND COLORS HELPERS
   ============================================ */
html.dark-mode .bg-gray-100 { background-color: #0f3460 !important; }
html.dark-mode .bg-gray-200 { background-color: #16213e !important; }
html.dark-mode .bg-gray-300 { background-color: #1f4068 !important; }
html.dark-mode .bg-gray-400 { background-color: #2a2a4a !important; }
html.dark-mode .bg-gray-500 { background-color: #333355 !important; }
html.dark-mode .bg-gray-600 { background-color: #3d3d5c !important; }
html.dark-mode .bg-gray-700 { background-color: #4a4a6a !important; }
html.dark-mode .bg-gray-800 { background-color: #555577 !important; }
html.dark-mode .bg-gray-900 { background-color: #666699 !important; }

/* ============================================
   BORDER COLORS HELPERS
   ============================================ */
html.dark-mode .border-gray-100 { border-color: #2a2a4a !important; }
html.dark-mode .border-gray-200 { border-color: #3a3a5a !important; }
html.dark-mode .border-gray-300 { border-color: #4a4a6a !important; }
html.dark-mode .border-gray-400 { border-color: #5a5a7a !important; }

/* ============================================
   SWEETALERT
   ============================================ */
html.dark-mode .swal2-popup {
    background-color: #16213e !important;
    border: 1px solid #2a2a4a !important;
}

html.dark-mode .swal2-title {
    color: #e8e8e8 !important;
}

html.dark-mode .swal2-content {
    color: #e8e8e8 !important;
}

html.dark-mode .swal2-html-container {
    color: #e8e8e8 !important;
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
html.dark-mode .btn-dark-mode {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

html.dark-mode .btn-dark-mode:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

html.dark-mode .btn-dark-mode:focus {
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
}

/* Light mode icon when in dark mode */
html.dark-mode .dark-mode-icon-light {
    display: inline-block;
}

html.dark-mode .dark-mode-icon-dark {
    display: none;
}

body:not(.dark-mode) .dark-mode-icon-light {
    display: none;
}

body:not(.dark-mode) .dark-mode-icon-dark {
    display: inline-block;
}

/* ============================================
   OVERFLOW & SCROLLBAR
   ============================================ */
html.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: #16213e;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #2a2a4a;
    border-radius: 5px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #3a3a5a;
}

/* Switch OFF */
html.dark-mode .custom-switch .custom-control-label::before {
    background-color: #495057 !important;
    border-color: #6c757d !important;
}

/* Bulatan switch */
html.dark-mode .custom-switch .custom-control-label::after {
    background-color: #ffffff !important;
}

/* Switch ON */
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745 !important;   /* hijau */
    border-color: #28a745 !important;
}

/* Fokus */
html.dark-mode .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.25) !important;
}

/* ============================================
   UTILITIES
   ============================================ */
html.dark-mode .border { border-color: #2a2a4a !important; }
html.dark-mode .border-top { border-top-color: #2a2a4a !important; }
html.dark-mode .border-right { border-right-color: #2a2a4a !important; }
html.dark-mode .border-bottom { border-bottom-color: #2a2a4a !important; }
html.dark-mode .border-left { border-left-color: #2a2a4a !important; }

/* Shadow helpers */
html.dark-mode .shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; }
html.dark-mode .shadow { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; }
html.dark-mode .shadow-lg { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important; }

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    html.dark-mode .sidebar {
        background-color: #16213e !important;
    }
}

/* ============================================
   STICKY ACTION COLUMN
   ============================================ */

/* Base sticky styling for both th and td */
.sticky-action,
th.sticky-action,
td.sticky-action {
    position: sticky !important;
    right: 0;
    z-index: 10;
}

/* Header cells - higher z-index */
thead th.sticky-action,
.table thead th.sticky-action {
    z-index: 20;
}

/* Body cells */
tbody td.sticky-action,
.table tbody td.sticky-action {
    z-index: 10;
}

/* Light Mode - Action column styling (when html does NOT have dark-mode class) */
html:not(.dark-mode) .sticky-action,
html:not(.dark-mode) th.sticky-action,
html:not(.dark-mode) td.sticky-action {
    background-color: #ffffff !important;
    border-left: 1px solid #dee2e6 !important;
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.08);
}

html:not(.dark-mode) thead th.sticky-action,
html:not(.dark-mode) .table thead th.sticky-action {
    background-color: #f8f9fa !important;
}

html:not(.dark-mode) table.dataTable thead th.sticky-action {
    background-color: #f8f9fa !important;
}

html:not(.dark-mode) table.dataTable tbody td.sticky-action {
    background-color: #ffffff !important;
}

/* Dark Mode - Action column styling (APPLIED via html.dark-mode) */
html.dark-mode .sticky-action,
html.dark-mode th.sticky-action,
html.dark-mode td.sticky-action,
html.dark-mode thead th.sticky-action,
html.dark-mode tbody td.sticky-action {
    background-color: #1f4068 !important;
    border-left: 1px solid #2a2a4a !important;
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.3);
    color: #e8e8e8 !important;
}

/* Dark Mode - Header specifically (darker for header row) */
html.dark-mode thead th.sticky-action,
html.dark-mode .table thead th.sticky-action {
    background-color: #16213e !important;
}

/* Dark Mode - Body cells */
html.dark-mode tbody td.sticky-action,
html.dark-mode .table tbody td.sticky-action {
    background-color: #1a1a2e !important;
}

/* Dark Mode - DataTables specific */
html.dark-mode table.dataTable thead th.sticky-action {
    background-color: #16213e !important;
}

html.dark-mode table.dataTable tbody td.sticky-action {
    background-color: #1a1a2e !important;
}

/* Ensure buttons inside sticky column are visible */
.sticky-action .btn,
.sticky-action button,
.sticky-action a {
    position: relative;
    z-index: 1;
}

/* Ensure form inside sticky column is visible */
.sticky-action form,
.sticky-action .d-flex {
    position: relative;
    z-index: 1;
}

/* Ensure text color inside sticky-action is visible in dark mode */
html.dark-mode .sticky-action,
html.dark-mode .sticky-action * {
    color: #e8e8e8 !important;
}

html.dark-mode .sticky-action .btn {
    color: inherit !important;
}

/* Mobile optimization - Dark Mode */
@media (max-width: 768px) {
    html.dark-mode .sticky-action,
    html.dark-mode th.sticky-action,
    html.dark-mode td.sticky-action {
        box-shadow: -4px 0 8px rgba(0, 0, 0, 0.4);
        min-width: 120px;
    }

    html.dark-mode thead th.sticky-action {
        z-index: 30 !important;
        background-color: #16213e !important;
    }

    html.dark-mode tbody td.sticky-action {
        z-index: 20 !important;
        background-color: #1a1a2e !important;
    }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    html.dark-mode .sticky-action,
    html.dark-mode th.sticky-action,
    html.dark-mode td.sticky-action {
        min-width: 100px;
    }
}

/* Ensure table container scrolls properly */
.table-responsive {
    overflow-x: auto;
    position: relative;
}

/* For non-DataTables tables */
.table:not(.dataTable) th.sticky-action,
.table:not(.dataTable) td.sticky-action {
    position: sticky !important;
    right: 0;
}