/* ── Atkinson Hyperlegible everywhere ── */
body, .navbar, button, input, select, textarea, .form-control,
.form-select, .btn, .table, .badge, .card, h1, h2, h3, h4, h5, h6 {
    font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

/* ── Brand: teal as Bootstrap primary ── */
:root {
    --bs-primary:              #0d9488;
    --bs-primary-rgb:          13, 148, 136;
    --bs-link-color:           #0d9488;
    --bs-link-color-rgb:       13, 148, 136;
    --bs-link-hover-color:     #0f766e;

    /* Navbar / footer always slate — same hue in both modes */
    --ah-navbar-bg:            #1e293b;
    --ah-navbar-active-border: #0d9488;
    --ah-footer-bg:            #1e293b;
    --ah-footer-color:         #475569;

    /* Body */
    --ah-body-bg:              #f8fafc;
}

/* ── table-primary → teal (Bootstrap 5.3 hardcodes blue; target <td> directly
       to override both background-color AND the striped box-shadow overlay) ── */
.table > tbody > tr.table-primary > * {
    background-color: rgba(13, 148, 136, 0.15) !important;
    color: #0c4a4e !important;
    box-shadow: none !important;
}
[data-bs-theme="dark"] .table > tbody > tr.table-primary > * {
    background-color: rgba(13, 148, 136, 0.25) !important;
    color: #f0fdfa !important;
    box-shadow: none !important;
}

/* ── Bootstrap btn-primary → teal ── */
.btn-primary {
    --bs-btn-bg:                 #0d9488;
    --bs-btn-border-color:       #0d9488;
    --bs-btn-hover-bg:           #0f766e;
    --bs-btn-hover-border-color: #0f766e;
    --bs-btn-active-bg:          #115e59;
    --bs-btn-active-border-color:#115e59;
    --bs-btn-disabled-bg:        #0d9488;
    --bs-btn-disabled-border-color:#0d9488;
}

.btn-outline-primary {
    --bs-btn-color:              #0d9488;
    --bs-btn-border-color:       #0d9488;
    --bs-btn-hover-bg:           #0d9488;
    --bs-btn-hover-border-color: #0d9488;
    --bs-btn-active-bg:          #0f766e;
    --bs-btn-active-border-color:#0f766e;
}

/* ── Navbar — always dark slate ── */
.navbar-ah {
    background-color: var(--ah-navbar-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.navbar-ah .navbar-brand {
    color: #f1f5f9 !important;
    font-weight: 700;
    letter-spacing: .01em;
}

.navbar-ah .nav-link {
    color: #94a3b8 !important;
    font-size: .9rem;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

.navbar-ah .nav-link:hover {
    color: #f1f5f9 !important;
}

.navbar-ah .nav-link.active {
    color: #f1f5f9 !important;
    border-bottom-color: var(--ah-navbar-active-border);
}

/* ── Footer ── */
.footer-ah {
    background-color: var(--ah-footer-bg) !important;
    color: var(--ah-footer-color) !important;
    border-top: 1px solid rgba(255,255,255,.05);
}

/* ── App wrapper handles body bg ── */
.app-wrapper {
    background-color: var(--ah-body-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-wrapper > main {
    flex: 1;
}

/* ── Dark mode overrides (Bootstrap data-bs-theme="dark") ── */
[data-bs-theme="dark"] {
    --ah-navbar-bg:         #0f172a;
    --ah-footer-bg:         #0f172a;
    --ah-footer-color:      #334155;
    --ah-body-bg:           #0f172a;

    --bs-body-bg:           #0f172a;
    --bs-body-color:        #cbd5e1;

    /* Slightly lighter surface for cards / panels */
    --bs-secondary-bg:      #1e293b;
    --bs-tertiary-bg:       #162032;

    /* Borders */
    --bs-border-color:      #334155;
    --bs-border-color-translucent: rgba(51,65,85,.5);

    /* Table */
    --bs-table-color:       #cbd5e1;
    --bs-table-striped-bg:  rgba(255,255,255,.03);
    --bs-table-striped-color: #cbd5e1;
    --bs-table-hover-bg:    rgba(255,255,255,.05);
    --bs-table-hover-color: #e2e8f0;

    /* Form controls */
    --bs-form-control-bg:   #1e293b;

    /* data-bs-theme on a div doesn't cascade color to children the way body does —
       set it explicitly so headings and paragraphs inherit the right value */
    color: #cbd5e1;
}

[data-bs-theme="dark"] .card {
    background-color: #1e293b;
    border-color: #334155;
}

/* Headings don't inherit color when data-bs-theme is on a wrapper div */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: #334155;
    --bs-table-color: #cbd5e1;
    --bs-table-striped-color: #cbd5e1;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.03);
}

[data-bs-theme="dark"] .table-dark {
    --bs-table-bg: #162032;
    --bs-table-border-color: #334155;
}

[data-bs-theme="dark"] .alert-success {
    background-color: #14532d;
    border-color: #166534;
    color: #bbf7d0;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #1e293b;
    border-color: #0d9488;
    color: #e2e8f0;
    box-shadow: 0 0 0 .2rem rgba(13,148,136,.25);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #475569;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #162032;
    border-color: #334155;
    color: #94a3b8;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #1e293b;
    border-color: #334155;
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1e293b;
    border-color: #334155;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: #334155;
}

[data-bs-theme="dark"] .text-muted {
    color: #64748b !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: #1e293b !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: #162032;
    color: #94a3b8;
}

/* (table-primary dark mode handled by the shared rule above) */

[data-bs-theme="dark"] hr {
    border-color: #334155;
}

/* ── Blazor circuit error banner ── */
/* Shown by the Blazor runtime when the SignalR connection is lost or the
   server throws an unrecoverable error. Hidden by default; Blazor shows it. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    background: #7f1d1d;
    color: #fecaca;
    padding: .75rem 1.25rem;
    font-size: .9rem;
    text-align: center;
}

#blazor-error-ui a {
    color: #fca5a5;
    font-weight: 600;
    text-decoration: underline;
    margin: 0 .35rem;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1rem;
    opacity: .7;
}

#blazor-error-ui .dismiss:hover {
    opacity: 1;
}