*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
}

body {
    background: var(--surface-0);
    color: var(--text-main);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    min-height: 100%;
}




img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

/* =========================
   Form controls: dark theme (override Bootstrap defaults)
   Strong contrast: input bg darker than card, visible border, clear labels
========================= */
.form-control,
.form-select {
    background-color: var(--surface-1);
    color: var(--text-main);
    border: 1px solid var(--border-strong);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-1);
    color: var(--text-main);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem var(--brand-primary-alpha);
}

.form-control::placeholder {
    color: var(--text-faint);
}

/* Form labels: high contrast so they don't blend with body text */
.form-label {
    color: var(--text-strong);
    font-weight: 600;
}

/* Bootstrap .text-muted is dark gray; override for readable muted text on dark */
.text-muted,
.form-text.text-muted {
    color: var(--text-muted) !important;
}

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

/* =========================
   Card + accordion + alert: force light text in dark theme
========================= */
.card .card-body {
    color: var(--text-main);
}

.card .accordion-item {
    background-color: var(--surface-2);
    border-color: var(--border-subtle);
}

.card .accordion-button {
    background-color: var(--surface-2) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-subtle);
}

.card .accordion-button:not(.collapsed) {
    background-color: var(--surface-3) !important;
    color: var(--text-strong) !important;
}

.card .accordion-button::after {
    filter: invert(1);
}

.card .accordion-body {
    background-color: var(--surface-2);
    color: var(--text-main);
}

.card .alert {
    color: var(--text-main);
    border-color: var(--border-subtle);
}

.card .alert-info {
    background-color: rgba(12, 141, 189, 0.2);
    color: var(--text-main);
}

.card .alert-success {
    background-color: rgba(31, 122, 62, 0.2);
    color: var(--text-main);
}

.card .alert-warning {
    background-color: rgba(178, 143, 26, 0.2);
    color: var(--text-main);
}

.card .alert-danger {
    background-color: rgba(180, 92, 92, 0.2);
    color: var(--text-main);
}