/* Dark theme overrides */
:root {
    --dark-bg: #121212;
    --dark-bg-elevated: #1e1e1e;
    --dark-text: #e0e0e0;
    --dark-text-secondary: #a0a0a0;
    --dark-border: #333;
    --dark-accent: #bb86fc;
    --dark-accent-secondary: #03dac6;
    --dark-error: #cf6679;
}

body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* Navbar */
.navbar {
    background-color: var(--dark-bg-elevated) !important;
    border-bottom: 1px solid var(--dark-border);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--dark-text);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--dark-accent);
}

.navbar-dark .navbar-nav .active > .nav-link {
    color: var(--dark-accent) !important;
}

/* Cards */
.card {
    background-color: var(--dark-bg-elevated);
    border: 1px solid var(--dark-border);
}

.card-header {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--dark-border);
}

/* Tables */
.table {
    color: var(--dark-text);
}

.table td, .table th {
    border-top: 1px solid var(--dark-border);
}

.table thead th {
    border-bottom: 2px solid var(--dark-border);
    background-color: var(--dark-bg-elevated);
}

/* Forms */
.form-control {
    background-color: var(--dark-bg-elevated);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}

.form-control:focus {
    background-color: var(--dark-bg-elevated);
    border-color: var(--dark-accent);
    color: var(--dark-text);
    box-shadow: 0 0 0 0.2rem rgba(187, 134, 252, 0.25);
}

/* Buttons */
.btn-primary {
    background-color: var(--dark-accent);
    border-color: var(--dark-accent);
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--dark-accent) 90%, white);
    border-color: var(--dark-accent);
}

.btn-secondary {
    background-color: var(--dark-accent-secondary);
    border-color: var(--dark-accent-secondary);
}

/* Alerts */
.alert {
    background-color: var(--dark-bg-elevated);
    border: 1px solid var(--dark-border);
}

.alert-danger {
    background-color: rgba(207, 102, 121, 0.1);
    border-color: var(--dark-error);
    color: var(--dark-error);
}

.alert-success {
    background-color: rgba(3, 218, 198, 0.1);
    border-color: var(--dark-accent-secondary);
    color: var(--dark-accent-secondary);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dark-bg-elevated);
    border: 1px solid var(--dark-border);
}

.dropdown-item {
    color: var(--dark-text);
}

.dropdown-item:hover {
    background-color: rgba(187, 134, 252, 0.1);
    color: var(--dark-accent);
}

/* Modals */
.modal-content {
    background-color: var(--dark-bg-elevated);
    border: 1px solid var(--dark-border);
}

.modal-header {
    border-bottom: 1px solid var(--dark-border);
}

.modal-footer {
    border-top: 1px solid var(--dark-border);
}

/* List groups */
.list-group-item {
    background-color: var(--dark-bg-elevated);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}

/* Container width adjustment */
.container {
    max-width: 75%;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

/* For mobile devices, use full width to prevent content from being too cramped */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Custom classes */
.bg-mgray {
    background-color: var(--dark-bg-elevated) !important;
}

.bg-mwhite {
    background-color: var(--dark-bg) !important;
}