/* ===========
   DARK MODE
============== */

/* Override inline loading styles */
html, html[data-theme="dark"] {
    background: linear-gradient(135deg, #0c1829 0%, #0a2540 50%, #0d2847 100%) !important;
    color: #f1f5f9 !important;
}

body {
    background: linear-gradient(135deg, #0c1829 0%, #0a2540 50%, #0d2847 100%);
    color: #f1f5f9;
}

body::before {
    background: 
        radial-gradient(circle at 15% 20%, rgba(14, 165, 233, 0.2), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(6, 182, 212, 0.18), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.15), transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.18), transparent 45%);
}

/* Liquid Glass Effects for Dark Mode */
:root {
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(148, 163, 184, 0.2);
    --card-gradient: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.7) 0%, 
        rgba(15, 23, 42, 0.6) 100%);
    --card-gradient-hover: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.85) 0%, 
        rgba(15, 23, 42, 0.7) 100%);
    --card-header-gradient: linear-gradient(135deg,
        rgba(14, 165, 233, 0.25) 0%,
        rgba(6, 182, 212, 0.2) 50%,
        rgba(20, 184, 166, 0.25) 100%);
}

.text-primary {
    color: #38bdf8 !important;
}

.card {
    background: var(--card-gradient) !important;
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.card-header {
    background: var(--card-header-gradient) !important;
    color: #f1f5f9;
}

.card-body {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.3) 0%,
        rgba(15, 23, 42, 0.1) 100%) !important;
    color: #f1f5f9;
}

/* Navbar Dark */
.navbar {
    background: linear-gradient(135deg,
        rgba(15, 23, 42, 0.9) 0%,
        rgba(30, 41, 59, 0.8) 100%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.navbar-nav .nav-link {
    color: #cbd5e1 !important;
}

.navbar-nav .nav-link:hover {
    color: #38bdf8 !important;
    background: rgba(14, 165, 233, 0.1);
}

/* Fix hamburger menu icon visibility in dark mode */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.5) !important;
}

/* Form Controls */
.form-control, .form-select {
    background: rgba(30, 41, 59, 0.7) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.form-control::placeholder {
    color: #64748b;
}

.form-control:focus, .form-select:focus {
    background: rgba(30, 41, 59, 0.9) !important;
    color: #f1f5f9 !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
}

/* Tables */
.table {
    color: #e2e8f0;
}

.table thead th {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.4), rgba(6, 182, 212, 0.4)) !important;
    color: #f1f5f9 !important;
}

.table tbody tr {
    background: rgba(30, 41, 59, 0.6);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.1);
}

.table tbody tr:hover {
    background: rgba(14, 165, 233, 0.3);
    color: #ffffff !important;
}

.table tbody tr:hover td {
    color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(14, 165, 233, 0.1);
}

.table tbody td {
    border-color: rgba(148, 163, 184, 0.1) !important;
}

/* DataTables */
.dataTables_wrapper {
    background: rgba(30, 41, 59, 0.6);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.2);
}

.dataTables_length label,
.dataTables_filter label,
.dataTables_info,
.dataTables_paginate {
    color: #cbd5e1 !important;
}

.dataTables_length select,
.dataTables_filter input {
    background: rgba(15, 23, 42, 0.8) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

.dataTables_length select option {
    background: #1e293b;
    color: #e2e8f0;
}

.dataTables_paginate .paginate_button {
    color: #cbd5e1 !important;
    background: transparent;
}

.dataTables_paginate .paginate_button.current {
    background: var(--primary-gradient) !important;
    color: white !important;
    border-color: transparent !important;
}

.dataTables_paginate .paginate_button:hover {
    color: #38bdf8 !important;
    background: rgba(14, 165, 233, 0.2) !important;
    border-color: transparent !important;
}

.dataTables_paginate .paginate_button.disabled {
    color: #475569 !important;
}

/* Tabs */
.nav-tabs {
    border-bottom-color: rgba(148, 163, 184, 0.2) !important;
}

.nav-tabs .nav-link {
    color: #cbd5e1 !important;
}

.nav-tabs .nav-link:hover {
    color: #38bdf8 !important;
    background: rgba(14, 165, 233, 0.1);
}

.nav-tabs .nav-link.active {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #38bdf8 !important;
    border-bottom-color: #38bdf8 !important;
}

/* Modal */
.modal-content {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.modal-header {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(6, 182, 212, 0.3)) !important;
    color: #f1f5f9;
    border-bottom-color: rgba(148, 163, 184, 0.2) !important;
}

.modal-body {
    color: #e2e8f0;
}

.modal-footer {
    border-top-color: rgba(148, 163, 184, 0.2) !important;
}

.btn-close {
    filter: invert(1);
}

/* Footer */
footer {
    background: rgba(15, 23, 42, 0.8) !important;
    color: #cbd5e1;
    border-top-color: rgba(148, 163, 184, 0.2);
}

/* Input Group */
.input-group-text {
    background: rgba(30, 41, 59, 0.7) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Alerts Dark Mode */
.alert {
    color: #f1f5f9;
}

.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2)) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 179, 8, 0.2)) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d;
}

.alert-info {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(6, 182, 212, 0.2)) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #7dd3fc;
}

/* Scrollbar Dark */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

/* Dark Mode Toggle Icon */
#darkModeToggle {
    filter: invert(0.8) brightness(1.2);
}

/* Text Colors */
.text-muted {
    color: #64748b !important;
}

/* Form Check */
.form-check-input {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.5);
}

.form-check-input:checked {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
}

.form-check-label {
    color: #cbd5e1;
}

/* Badge Dark */
.badge {
    background: rgba(14, 165, 233, 0.3);
    /* color: #7dd3fc; */
}

/* Status Colors for Dark Mode */
.status-active {
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

.status-expired {
    color: #64748b;
}

/* Borders */
.border,
.border-1,
.border-2,
.border-3 {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Dropdown */
.dropdown-menu {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    color: #e2e8f0;
}

.dropdown-item {
    color: #cbd5e1;
}

.dropdown-item:hover {
    background: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8;
}

/* List Group */
.list-group-item {
    background: rgba(30, 41, 59, 0.6) !important;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.list-group-item:hover {
    background: rgba(14, 165, 233, 0.2) !important;
}

/* Pagination */
.page-link {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
}

.page-link:hover {
    background: rgba(14, 165, 233, 0.3);
    border-color: rgba(14, 165, 233, 0.5);
    color: #38bdf8;
}

.page-item.active .page-link {
    background: var(--primary-gradient);
    border-color: transparent;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #f1f5f9;
}

/* Links */
a {
    color: #38bdf8;
}

a:hover {
    color: #7dd3fc;
}