/* Modern dark theme with blue accents */
:root {
    --bg-dark: #000000;
    --bg-dark2: #1a202c;
    --primary-blue: #3b82f6;
    --text-light: #e5e7eb;
/* Add dark blue variable */
    --bg-darkblue: #0f172a;
    --container-bg-start: #2b2b2b;
    --container-border: var(--primary-blue);
}

body {
    background: linear-gradient(135deg, var(--container-bg-start), var(--bg-darkblue));
    color: var(--text-light);
    min-height: 100vh;
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

a, .nav-link {
    color: var(--primary-blue) !important;
    transition: opacity .2s ease-in-out;
}


a:hover, .btn:hover, .nav-link:hover {
    opacity: 0.85;
}

.dark-box {
    background: rgba(0,0,0,0.6);
    border-radius: var(--border-radius);
    padding: 1rem;
    backdrop-filter: blur(8px);
}

.modal-content {
    background: rgba(20, 20, 30, 0.9) !important;
    color: var(--text-light) !important;
    border: none;
}

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

 .table th, .table td {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Main window styling (window within window) */
.custom-container.dark-box {
    margin: 2rem;
    background: linear-gradient(135deg, var(--container-bg-start), var(--bg-darkblue));
    border: 2px solid var(--container-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    backdrop-filter: blur(6px);
}

/* Light mode overrides */
html[data-bs-theme="light"] {
    --bg-light: #f8f9fa;
    --bg-light2: #ffffff;
    --container-bg: rgba(255,255,255,0.85);
    --container-border: var(--primary-blue);
    --text-dark: #212529;
}
html[data-bs-theme="light"] body {
    background: var(--bg-light);
    color: var(--text-dark);
}
html[data-bs-theme="light"] .dark-box {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-dark);
}
html[data-bs-theme="light"] .modal-content {
    background: #fff !important;
    color: var(--text-dark) !important;
}
html[data-bs-theme="light"] .table {
    color: var(--text-dark) !important;
}