/* * Twenty-One Dark Mode Custom Styles
 * Perustuu Twenty-One -teeman Bootstrap 4 -rakenteeseen [cite: 53012, 53013]
 */

:root {
    --dark-bg: #121212;
    --dark-card: #1e1e1e;
    --dark-border: #333333;
    --text-main: #e0e0e0;
    --text-muted: #b0b0b0;
    --accent-blue: #336699;
}

/* Yleiset taustat ja tekstit */
body {
    background-color: var(--dark-bg) !important;
    color: var(--text-main) !important;
}

/* Kortit (Cards) - käytetty laajasti Twenty-Onessa [cite: 53012, 53013] */
.card {
    background-color: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
}

.card-title, .card-header {
    color: #ffffff !important;
    border-bottom-color: var(--dark-border) !important;
}

/* Taulukot - Twenty-One käyttää .table-striped luokkaa [cite: 53013, 53014] */
.table {
    color: var(--text-main) !important;
}

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

.table td, .table th {
    border-top-color: var(--dark-border) !important;
}

/* Lomakkeet ja syötteet [cite: 53030] */
.form-control {
    background-color: #2a2a2a !important;
    border-color: var(--dark-border) !important;
    color: #ffffff !important;
}

.form-control:focus {
    background-color: #333333 !important;
    border-color: var(--accent-blue) !important;
}

/* Painikkeet - .btn-default ja .btn-primary tyylittely [cite: 53020, 53021, 53026] */
.btn-default {
    background-color: #2a2a2a !important;
    border-color: var(--dark-border) !important;
    color: var(--text-main) !important;
}

.btn-default:hover {
    background-color: #3a3a3a !important;
}

/* Sivupalkit ja listat [cite: 33978, 53015] */
.list-group-item {
    background-color: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--text-main) !important;
}

.list-group-item.active {
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

/* Alapalkki ja apu-tekstit */
footer, .footer {
    background-color: #0a0a0a !important;
    border-top: 1px solid var(--dark-border) !important;
}

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