/* FlowerCore Bootstrap Dark Theme Overrides
 * ──────────────────────────────────────────
 * Import AFTER bootstrap.min.css and flowercore-theme.css.
 * Overrides Bootstrap 5 component colors to match the Blue Jay dark theme.
 * 
 * Usage in App.razor:
 *   <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
 *   <link rel="stylesheet" href="css/flowercore-theme.css" />
 *   <link rel="stylesheet" href="css/flowercore-bootstrap-dark.css" />
 */

/* ── Base ──────────────────────────────────────────────────── */

html, body {
    color-scheme: dark;
    background: var(--fc-primary-navy-dark, #111b30);
    color: var(--fc-text-primary, #e8edf4);
}

h1, h2, h3, h4, h5, h6 { color: var(--fc-text-primary); }

a, .btn-link { color: var(--fc-accent-glow, #8ec8ff); text-decoration: none; }
a:hover, .btn-link:hover { color: var(--fc-info, #60a5fa); text-decoration: none; }

/* ── Text Utilities ───────────────────────────────────────── */

.text-success { color: var(--fc-success, #4ade80) !important; }
.text-warning { color: var(--fc-warning, #fbbf24) !important; }
.text-danger  { color: var(--fc-error, #f87171) !important; }
.text-info    { color: var(--fc-info, #60a5fa) !important; }
.text-primary { color: var(--fc-accent-glow, #8ec8ff) !important; }
.text-muted   { color: var(--fc-text-muted, #6b839e) !important; }
.text-body    { color: var(--fc-text-primary, #e8edf4) !important; }
.text-dark    { color: var(--fc-text-primary, #e8edf4) !important; }
.text-secondary { color: var(--fc-text-secondary, #9ab0cc) !important; }
.text-black, .text-black-50 { color: var(--fc-text-primary, #e8edf4) !important; }
small, .small { color: var(--fc-text-secondary, #9ab0cc); }

/* ── Backgrounds ──────────────────────────────────────────── */

.bg-light { background-color: var(--fc-surface-raised, #253751) !important; }
.bg-white { background-color: var(--fc-surface, #1e2d47) !important; }
.bg-body  { background-color: var(--fc-primary-navy-dark, #111b30) !important; }

/* ── Buttons ──────────────────────────────────────────────── */

.btn-primary {
    color: var(--fc-primary-navy-dark, #111b30);
    background-color: var(--fc-accent-glow, #8ec8ff);
    border-color: var(--fc-accent-glow, #8ec8ff);
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--fc-info, #60a5fa);
    border-color: var(--fc-info, #60a5fa);
}

.btn-secondary {
    background-color: var(--fc-surface-raised, #253751);
    border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-text-primary, #e8edf4);
}
.btn-secondary:hover { background-color: var(--fc-surface-overlay, #2c4060); }

.btn-outline-primary {
    color: var(--fc-accent-glow, #8ec8ff);
    border-color: var(--fc-accent-glow, #8ec8ff);
}
.btn-outline-primary:hover {
    background-color: var(--fc-accent-glow, #8ec8ff);
    color: var(--fc-primary-navy-dark, #111b30);
}

.btn-outline-secondary {
    color: var(--fc-text-secondary, #9ab0cc);
    border-color: var(--fc-surface-border, #364b6b);
}
.btn-outline-secondary:hover {
    background-color: var(--fc-surface-raised, #253751);
    color: var(--fc-text-primary);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(142, 200, 255, 0.2);
}

.btn-check + .btn {
    color: var(--fc-text-primary, #e8edf4);
    border-color: var(--fc-surface-border, #364b6b);
    background: var(--fc-surface, #1e2d47);
}
.btn-check:checked + .btn { color: #fff; }

/* ── Cards ────────────────────────────────────────────────── */

.card {
    background: var(--fc-surface, #1e2d47);
    border-color: var(--fc-surface-border, #364b6b);
    border-top: 3px solid var(--fc-gold, #FFB300);
    color: var(--fc-text-primary);
}
.card-header {
    background: var(--fc-surface-raised, #253751);
    border-bottom-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-gold, #FFB300);
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.card-footer {
    background: var(--fc-surface-raised, #253751);
    border-top-color: var(--fc-surface-border, #364b6b);
}

/* ── Tables ───────────────────────────────────────────────── */

.table {
    --bs-table-color: var(--fc-text-primary, #e8edf4);
    --bs-table-bg: transparent;
    --bs-table-striped-color: var(--fc-text-primary, #e8edf4);
    --bs-table-striped-bg: var(--fc-surface-raised, #253751);
    --bs-table-hover-color: var(--fc-text-primary, #e8edf4);
    --bs-table-hover-bg: var(--fc-surface-overlay, #2c4060);
    --bs-table-active-color: var(--fc-text-primary, #e8edf4);
    --bs-table-active-bg: var(--fc-surface-overlay, #2c4060);
    --bs-table-border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-text-primary, #e8edf4);
}
.table thead th {
    background: var(--fc-primary-navy-dark, #111b30);
    color: var(--fc-gold, #FFB300);
    font-weight: 700; font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table td, .table th { color: var(--fc-text-primary, #e8edf4) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--fc-text-primary) !important; }
.table-active, .table-active > td { color: var(--fc-text-primary) !important; }
.table tr:hover td { color: var(--fc-text-primary) !important; }

/* ── Forms ────────────────────────────────────────────────── */

.form-control, .form-select {
    background-color: var(--fc-surface, #1e2d47);
    border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-text-primary, #e8edf4);
}
.form-control:focus, .form-select:focus {
    background-color: var(--fc-surface-raised, #253751);
    border-color: var(--fc-accent-glow-dim, rgba(142, 200, 255, 0.4));
    color: var(--fc-text-primary);
    box-shadow: 0 0 0 0.25rem rgba(142, 200, 255, 0.15);
}
.form-control::placeholder { color: var(--fc-text-muted, #6b839e); }
.form-label { color: var(--fc-text-secondary, #9ab0cc); font-weight: 500; }
.form-control-sm, .form-select-sm {
    background-color: var(--fc-surface, #1e2d47);
    border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-text-primary, #e8edf4);
}
.input-group-text {
    background-color: var(--fc-surface-raised, #253751);
    border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-text-secondary, #9ab0cc);
}
.form-select option {
    background-color: var(--fc-surface, #1e2d47);
    color: var(--fc-text-primary, #e8edf4);
}
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: dark; }
.form-check-input {
    background-color: var(--fc-surface-border, #364b6b);
    border-color: var(--fc-surface-border);
}
.form-check-input:checked {
    background-color: var(--fc-accent-glow, #8ec8ff);
    border-color: var(--fc-accent-glow, #8ec8ff);
}
.form-check-label, .form-switch label { color: var(--fc-text-primary, #e8edf4) !important; }
.form-switch .form-check-input { background-color: var(--fc-surface-border, #364b6b); }
.form-switch .form-check-input:checked { background-color: var(--fc-accent-glow, #8ec8ff); }

/* ── Badges ───────────────────────────────────────────────── */

.badge.bg-success, .badge.bg-info, .badge.bg-warning, .badge.bg-danger,
.badge.bg-secondary, .badge.bg-primary { color: #fff !important; }

/* ── Modals & Dialogs ─────────────────────────────────────── */

.modal-content {
    background: var(--fc-surface, #1e2d47);
    border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-text-primary);
}
.modal-header { border-bottom-color: var(--fc-surface-border); }
.modal-footer { border-top-color: var(--fc-surface-border); }
.btn-close { filter: invert(1) grayscale(1) brightness(2); }

dialog, dialog[open] {
    background: #1e2d47 !important; color: #e8edf4 !important;
    border: 1px solid #364b6b !important; border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}
dialog::backdrop { background: rgba(10,15,30,0.85) !important; }
dialog p, dialog span, dialog div { color: #9ab0cc !important; }
dialog button {
    background: #8ec8ff !important; color: #111b30 !important;
    border: none !important; border-radius: 6px !important;
    padding: 0.5rem 1.5rem !important; font-weight: 600 !important;
}

/* ── Dropdowns ────────────────────────────────────────────── */

.dropdown-menu {
    background: var(--fc-surface, #1e2d47);
    border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-text-primary);
}
.dropdown-item { color: var(--fc-text-primary, #e8edf4); }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--fc-surface-raised, #253751);
    color: var(--fc-text-primary);
}
.dropdown-divider { border-top-color: var(--fc-surface-border, #364b6b); }

/* ── Lists & Pagination ──────────────────────────────────── */

.list-group-item {
    background: var(--fc-surface, #1e2d47);
    border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-text-primary);
}
.page-link {
    background: var(--fc-surface, #1e2d47);
    border-color: var(--fc-surface-border, #364b6b);
    color: var(--fc-accent-glow, #8ec8ff);
}
.page-link:hover { background: var(--fc-surface-raised, #253751); }
.page-item.active .page-link {
    background-color: var(--fc-accent-glow, #8ec8ff);
    border-color: var(--fc-accent-glow);
    color: var(--fc-primary-navy-dark, #111b30);
}

/* ── Progress ─────────────────────────────────────────────── */

.progress {
    background-color: var(--fc-surface-raised, #253751);
    border: 1px solid var(--fc-surface-border, #364b6b);
}
.progress-bar {
    background-color: var(--fc-accent-glow, #8ec8ff);
    color: var(--fc-primary-navy-dark, #111b30);
}

/* ── Alerts ───────────────────────────────────────────────── */

.alert { border-radius: var(--fc-radius-md, 6px); }
.alert-success { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.25); color: var(--fc-success); }
.alert-warning { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.25); color: var(--fc-warning); }
.alert-danger  { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); color: var(--fc-error); }
.alert-info    { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.25); color: var(--fc-info); }

/* ── Nav Tabs ─────────────────────────────────────────────── */

.nav-tabs { border-bottom-color: var(--fc-surface-border, #364b6b); }
.nav-tabs .nav-link { color: var(--fc-text-muted, #6b839e); border: none; }
.nav-tabs .nav-link:hover { color: var(--fc-text-primary); border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--fc-accent-glow, #8ec8ff);
    background: transparent;
    border-bottom: 2px solid var(--fc-accent-glow);
}

/* ── Code ─────────────────────────────────────────────────── */

code, pre {
    color: var(--fc-accent-glow, #8ec8ff);
    background: var(--fc-primary-navy-dark, #111b30);
    border-radius: 4px; padding: 0.1rem 0.35rem;
}
pre { padding: 1rem; border: 1px solid var(--fc-surface-border); }

/* ── Scrollbar ────────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--fc-primary-navy-dark, #111b30); }
::-webkit-scrollbar-thumb { background: var(--fc-surface-border, #364b6b); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fc-text-muted, #6b839e); }

/* ── Blazor Error/Reconnect ──────────────────────────────── */

.blazor-error-boundary { background: rgba(248,113,113,0.08); padding: 1rem; }
.blazor-error-boundary::after { content: "An error occurred."; color: var(--fc-error); }
.components-rejoining-animation div { background: var(--fc-accent-glow, #8ec8ff) !important; }