:root {
    --primary-gradient: linear-gradient(135deg, #566d8f 0%, #2563eb 50%, #2348ae 100%);
    /* --primary-gradient: linear-gradient(135deg, #475569 0%, #2563eb 50%, #1e3a8a 100%); */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --dark-bg: rgb(9, 13, 26);
    --text-light: #f8fafc;
    --text-muted: #64748b;
    --bg-gradient: radial-gradient(circle at top right, #1e293b, rgb(9, 13, 26));
    --navbar-bg: rgba(9, 13, 26, 0.8);
    --card-hover-bg: rgba(255, 255, 255, 0.1);
    --card-hover-border: rgba(255, 255, 255, 0.2);
    --btn-outline-color: var(--text-light);
    --table-border: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .glass-card h4,
[data-theme="dark"] .table,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table tbody td {
    color: #ffffff !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .card-text {
    color: #cbd5e1 !important;
    /* Lighter grey for better contrast */
    opacity: 1 !important;
}

[data-theme="light"] {
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.08);
    --dark-bg: #f8fafc;
    --text-light: #0f172a;
    --text-muted: #64748b;
    --bg-gradient: radial-gradient(circle at top right, #cbd5e1, #f8fafc);
    --navbar-bg: rgba(248, 250, 252, 0.8);
    --card-hover-bg: rgba(255, 255, 255, 0.45);
    --card-hover-border: rgba(0, 0, 0, 0.15);
    --btn-outline-color: #0f172a;
    --table-border: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .table {
    color: #0f172a !important;
}

[data-theme="light"] .text-muted,
[data-theme="light"] .card-text {
    color: #64748b !important;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: var(--bg-gradient);
    transition: background 0.3s, color 0.3s;
}

/* Glassmorphism Navbar */
.navbar {
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    padding: 1rem 2rem;
    transition: background 0.3s, border-color 0.3s;
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.5rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.nav-link {
    color: var(--text-light) !important;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--text-muted) !important;
}

/* Hero Section */
.hero {
    padding: 4rem 0 2rem;
    text-align: center;
    position: relative;
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(to right, var(--text-light), var(--text-muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 0.5rem;
    font-weight: 300;
}

.btn-custom {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
    color: white;
}

.btn-outline-custom {
    background: transparent;
    color: var(--btn-outline-color);
    border: 1px solid var(--glass-border);
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-outline-custom:hover {
    background: var(--glass-bg);
    color: var(--text-light);
    border-color: var(--text-light);
}

.bg-custom {
    background: var(--primary-gradient) !important;
}

/* Features Section */
.features {
    padding: 4rem 0;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.glass-card:hover {
    transform: translateY(-10px);
    background: var(--card-hover-bg);
    border-color: var(--card-hover-border);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: var(--primary-gradient);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.card-title {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.card-text {
    color: var(--text-muted);
    font-weight: 300;
    font-size: 0.95rem;
}

/* Footer */
footer {
    margin-top: auto;
    padding: 2rem 0;
    border-top: 1px solid var(--glass-border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* SweetAlert2 Theme Overrides */
.swal2-popup {
    background: var(--dark-bg) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
}

.swal2-title,
.swal2-html-container {
    color: var(--text-light) !important;
}

.swal2-confirm {
    background: var(--primary-gradient) !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4) !important;
}

.swal2-cancel {
    background: var(--glass-bg) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Global Table Styles */
.table {
    color: var(--text-light) !important;
    border-color: var(--table-border) !important;
}

.table thead th {
    border-bottom: 2px solid var(--table-border) !important;
    color: var(--text-light) !important;
}

.table tbody td {
    border-bottom: 1px solid var(--table-border) !important;
    color: var(--text-light) !important;
}

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

.progress-container {
    background: var(--table-border) !important;
    border-radius: 10px;
    overflow: hidden;
}

/* Forms & Input Styling */
.form-control,
.form-select {
    background-color: var(--glass-bg) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--glass-border) !important;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--card-hover-bg) !important;
    color: var(--text-light) !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25) !important;
}

/* Grid.js Custom Styling for Light/Dark Mode */
.gridjs-container {
    color: var(--text-light) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.gridjs-wrapper {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.gridjs-head {
    background-color: transparent !important;
    border: none !important;
    padding-bottom: 12px !important;
}

.gridjs-table {
    background-color: #ffffff !important;
    border-collapse: collapse !important;
    border: none !important;
    width: 100% !important;
}

[data-theme="dark"] .gridjs-table {
    background-color: transparent !important;
}

input.gridjs-input {
    background-color: #ffffff !important;
    color: var(--text-light) !important;
    border: 1px solid var(--glass-border) !important;
}

input.gridjs-input:focus {
    background-color: #ffffff !important;
    color: var(--text-light) !important;
    border-color: #2563eb !important;
}

[data-theme="dark"] input.gridjs-input {
    background-color: var(--glass-bg) !important;
}

[data-theme="dark"] input.gridjs-input:focus {
    background-color: var(--card-hover-bg) !important;
}

.gridjs-tbody {
    background-color: transparent !important;
}

.gridjs-tr {
    background-color: transparent !important;
}

.gridjs-th {
    background-color: #f1f5f9 !important;
    /* Solid light grey for light mode */
    color: var(--text-light) !important;
    border: 1px solid var(--glass-border) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    padding: 12px 24px !important;
}

[data-theme="dark"] .gridjs-th {
    background-color: rgb(21, 28, 47) !important;
    /* Solid dark grey/blue for dark mode */
}

.gridjs-td {
    background-color: transparent !important;
    color: var(--text-light) !important;
    border: 1px solid var(--glass-border) !important;
    padding: 12px 24px !important;
}

.gridjs-tr:hover .gridjs-td {
    background-color: var(--card-hover-bg) !important;
}

.gridjs-footer {
    background-color: transparent !important;
    color: var(--text-light) !important;
    border: none !important;
    border-top: 1px solid var(--glass-border) !important;
    box-shadow: none !important;
    padding: 12px 24px !important;
}

.gridjs-pagination {
    color: var(--text-light) !important;
}

.gridjs-pagination .gridjs-summary {
    color: var(--text-muted) !important;
}

.gridjs-pagination .gridjs-pages button {
    background-color: #ffffff !important;
    color: var(--text-light) !important;
    border: 1px solid var(--glass-border) !important;
    transition: all 0.2s ease !important;
}

.gridjs-pagination .gridjs-pages button:hover:not(:disabled) {
    background-color: #f1f5f9 !important;
    color: var(--text-light) !important;
}

[data-theme="dark"] .gridjs-pagination .gridjs-pages button {
    background-color: var(--glass-bg) !important;
}

[data-theme="dark"] .gridjs-pagination .gridjs-pages button:hover:not(:disabled) {
    background-color: var(--card-hover-bg) !important;
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}