/* Dark-theme overrides for Bootstrap components the platform pages use.
   The legacy tooplate dark-mode block only covers the nav/headings; this file
   extends body.dark-mode to cards, forms, tables, tabs, modals, etc.
   Loaded after bootstrap + tooplate in base.html. */

.dark-mode {
    --dm-surface: #1a1a1e;
    --dm-surface-2: #232328;
    --dm-border: #3a3a42;
    --dm-ink: #e8e6e3;
    --dm-ink-muted: #a8a5a0;
    color: var(--dm-ink);
}

/* --- Cards / panels --- */
.dark-mode .card {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-ink);
}

.dark-mode .card .text-gray-900 {
    color: var(--dm-ink) !important;
}

/* --- Forms --- */
.dark-mode .form-control,
.dark-mode select.form-control,
.dark-mode textarea.form-control,
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode input[type="datetime-local"],
.dark-mode input[type="search"],
.dark-mode input[type="url"],
.dark-mode select,
.dark-mode textarea {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-ink);
}

.dark-mode .form-control:focus {
    background-color: var(--dm-surface-2);
    color: var(--dm-ink);
    border-color: #b08d57;
    box-shadow: 0 0 0 0.2rem rgba(176, 141, 87, 0.25);
}

.dark-mode .form-control::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--dm-ink-muted);
}

/* Chrome/Safari render native date/time pickers' icons dark by default */
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode input[type="datetime-local"] {
    color-scheme: dark;
}

.dark-mode label,
.dark-mode .form-check-label,
.dark-mode legend {
    color: var(--dm-ink);
}

/* --- Tables --- */
.dark-mode .table {
    color: var(--dm-ink);
}

.dark-mode .table th,
.dark-mode .table td,
.dark-mode .table thead th {
    border-color: var(--dm-border);
}

.dark-mode .table-bordered,
.dark-mode .table-bordered th,
.dark-mode .table-bordered td {
    border-color: var(--dm-border);
}

/* Calendar off-month cells & misc light backgrounds */
.dark-mode .bg-light {
    background-color: var(--dm-surface) !important;
    color: var(--dm-ink-muted) !important;
}

/* --- List groups (checklist, schedule, budget categories) --- */
.dark-mode .list-group-item {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-ink);
}

/* --- Workspace tab nav --- */
.dark-mode .nav-tabs {
    border-bottom-color: var(--dm-border);
}

.dark-mode .nav-tabs .nav-link {
    color: var(--dm-ink-muted);
}

.dark-mode .nav-tabs .nav-link:hover {
    border-color: var(--dm-border) var(--dm-border) transparent;
    color: var(--dm-ink);
}

.dark-mode .nav-tabs .nav-link.active {
    background-color: transparent;
    border-color: var(--dm-border) var(--dm-border) transparent;
    color: #ffc200;
}

/* --- Modals (logout confirm) --- */
.dark-mode .modal-content {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-ink);
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
    border-color: var(--dm-border);
}

.dark-mode .modal .close {
    color: var(--dm-ink);
    text-shadow: none;
}

/* --- Dropdowns (account menu) --- */
.dark-mode .dropdown-menu {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

.dark-mode .dropdown-item,
.dark-mode .dropdown-item.text-black {
    color: var(--dm-ink);
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--dm-surface-2);
    color: #ffc200;
}

.dark-mode .dropdown-menu hr {
    border-color: var(--dm-border);
}

/* --- Badges / progress / misc --- */
.dark-mode .badge-light {
    background-color: var(--dm-surface-2);
    color: var(--dm-ink);
}

.dark-mode .progress {
    background-color: var(--dm-surface-2);
}

.dark-mode hr {
    border-color: var(--dm-border);
}

.dark-mode .text-muted {
    color: var(--dm-ink-muted) !important;
}

/* --- Outline buttons: keep readable on dark --- */
.dark-mode .btn-outline-secondary {
    color: var(--dm-ink-muted);
    border-color: var(--dm-border);
}

.dark-mode .btn-outline-secondary:hover {
    background-color: var(--dm-surface-2);
    color: var(--dm-ink);
    border-color: var(--dm-border);
}

.dark-mode .btn-outline-primary {
    color: #8ab4f8;
    border-color: #8ab4f8;
}

.dark-mode .btn-outline-primary:hover {
    background-color: rgba(138, 180, 248, 0.15);
    color: #8ab4f8;
}

.dark-mode .btn-outline-danger:hover {
    color: #fff;
}

/* --- Generic body copy on platform pages --- */
.dark-mode .site-section,
.dark-mode .site-section p,
.dark-mode .site-section li,
.dark-mode .site-section td,
.dark-mode .site-section th,
.dark-mode .site-section span {
    color: var(--dm-ink);
}

.dark-mode .site-section .text-muted,
.dark-mode .site-section small.text-muted {
    color: var(--dm-ink-muted) !important;
}

.dark-mode a.small {
    color: #8ab4f8;
}