/**
 * ConfDay Portal — Site-Specific CSS Overrides
 * Supplements AppStack 4.0.0 app.css with ConfDay-specific adjustments.
 *
 * S-0040-005: Light Mode Contrast Hardening
 * Improves form field border visibility in light mode for accessibility.
 * AppStack default light-mode borders are very subtle (#dee2e6 on white).
 * These overrides increase contrast without breaking dark mode visuals.
 */

/* ── Light Mode Form Border Contrast ──────────────────────────────────────── */
/* Increase border contrast on form controls in light mode only.
   Uses [data-bs-theme=light] scoping so dark mode is unaffected. */

[data-bs-theme="light"] .form-control,
:root:not([data-bs-theme="dark"]) .form-control {
    border-color: #adb5bd; /* Bootstrap gray-500, WCAG-compliant contrast ratio */
}

[data-bs-theme="light"] .form-select,
:root:not([data-bs-theme="dark"]) .form-select {
    border-color: #adb5bd;
}

[data-bs-theme="light"] .form-control:focus,
:root:not([data-bs-theme="dark"]) .form-control:focus {
    border-color: #6ea8fe; /* Bootstrap primary-subtle focus ring */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="light"] .form-select:focus,
:root:not([data-bs-theme="dark"]) .form-select:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Input group addons in light mode */
[data-bs-theme="light"] .input-group-text,
:root:not([data-bs-theme="dark"]) .input-group-text {
    border-color: #adb5bd;
}

/* ── Card Border Visibility ───────────────────────────────────────────────── */
/* Slightly stronger card borders in light mode for visual separation */
[data-bs-theme="light"] .card,
:root:not([data-bs-theme="dark"]) .card {
    border-color: #dee2e6;
}

/* ── Table Border Visibility ──────────────────────────────────────────────── */
/* Ensure table borders are visible in light mode */
[data-bs-theme="light"] .table-bordered > :not(caption) > * > *,
:root:not([data-bs-theme="dark"]) .table-bordered > :not(caption) > * > * {
    border-color: #dee2e6;
}

/* ── Auth Login Background ─────────────────────────────────────────────────── */
/* The login page now uses the AppStack auth-sign-in-cover layout with a
   split-screen: left panel = cover image, right panel = form.
   The auth-full-page, auth-bg, auth-form, and auth-quote classes come from
   AppStack app.css. Custom overrides below handle ConfDay-specific tweaks. */

/* ── Navigation Focus Outline Fix ─────────────────────────────────────────── */
/* Blazor's <FocusOnNavigate Selector="h1" /> auto-focuses the first h1 after
   every page navigation for accessibility (screen readers). This causes the
   browser to render its default focus outline (a visible border/box) around
   headings and containers. Suppress the outline on non-interactive elements
   since it is purely cosmetic — screen readers still receive the focus event. */
h1:focus,
h1:focus-visible,
h2:focus,
h2:focus-visible,
h3:focus,
h3:focus-visible,
.auth-full-page:focus,
.auth-full-page:focus-visible,
.auth-form:focus,
.auth-form:focus-visible,
main:focus,
main:focus-visible {
    outline: none;
}

/* ── S-0050-003: Dashboard Layout Consistency + Light Mode Contrast ──────── */
/* Improve readability of muted helper text in light mode.
   AppStack default .text-muted (#6c757d) can be hard to read on white. */
[data-bs-theme="light"] .card .text-muted,
:root:not([data-bs-theme="dark"]) .card .text-muted {
    color: #495057 !important; /* gray-700 for stronger contrast */
}

/* Ensure stat icon circles maintain visual weight in light mode */
[data-bs-theme="light"] .stat,
:root:not([data-bs-theme="dark"]) .stat {
    opacity: 0.85;
}

/* Strengthen badge legibility in light mode cards */
[data-bs-theme="light"] .badge.bg-secondary,
:root:not([data-bs-theme="dark"]) .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}

[data-bs-theme="light"] .badge.bg-dark,
:root:not([data-bs-theme="dark"]) .badge.bg-dark {
    background-color: #343a40 !important;
    color: #fff !important;
}

/* Dashboard stat cards — consistent min-height for visual rhythm */
[data-bs-theme="light"] .card .card-body .h1,
[data-bs-theme="light"] .card .card-body h1,
:root:not([data-bs-theme="dark"]) .card .card-body .h1,
:root:not([data-bs-theme="dark"]) .card .card-body h1 {
    color: #212529; /* Ensure stat numbers are fully opaque in light mode */
}
/* ── Legal Content Styles ─────────────────────────────────────────────── */
/* Styles for markdown-rendered legal documents (Privacy, Terms, DPA). */

.legal-content h2 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
}

.legal-content h3 {
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.legal-content p {
    line-height: 1.75;
    margin-bottom: 1rem;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-content li {
    margin-bottom: 0.3rem;
    line-height: 1.7;
}

.legal-content hr {
    margin: 2rem 0;
}

.legal-content a {
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

/* ── S-0060-008: Dark Mode — Auth Page Hardening (BUG-031) ───────────────── */
/* Dark mode overrides for the auth cover layout right panel. */

/* Auth form card/panel background for dark mode */
[data-bs-theme="dark"] .auth-form {
    background-color: var(--bs-body-bg, #202634);
    color: var(--bs-body-color, #adb5bd);
    border-radius: 0.5rem;
}

/* Headings and lead text on auth pages */
[data-bs-theme="dark"] .auth-form h1,
[data-bs-theme="dark"] .auth-form .h1,
[data-bs-theme="dark"] .auth-form .h2,
[data-bs-theme="dark"] .auth-form h2 {
    color: #e9ecef;
}

/* ── Blazor Error UI (global fallback) ────────────────────────────────────── */
/* Ensures the error bar is hidden by default even if scoped CSS hasn't loaded yet. */
#blazor-error-ui {
    display: none;
}

[data-bs-theme="dark"] .auth-form .lead {
    color: #adb5bd;
}

/* Form controls in dark mode auth pages — ensure borders and background visible */
[data-bs-theme="dark"] .auth-form .form-control {
    background-color: var(--bs-secondary-bg, #293042);
    border-color: var(--bs-border-color, #495057);
    color: var(--bs-body-color, #adb5bd);
}

[data-bs-theme="dark"] .auth-form .form-control:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

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

/* Links on auth pages */
[data-bs-theme="dark"] .auth-form a {
    color: #6ea8fe;
}

/* Alert boxes (error messages) on auth pages */
[data-bs-theme="dark"] .auth-form .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
    color: #f1aeb5;
}

/* ── BUG-035: Theme Transition Suppression ────────────────────────────────── */
/* Suppress all CSS transitions during Blazor enhanced navigation theme
   re-application. Without this, Bootstrap/AppStack transitions on
   form-control, form-select, etc. cause a visible visual 'shake' when
   data-bs-theme is re-set on the <html> element during SPA navigation.
   Applied momentarily by blazor-interop.js before initTheme() runs. */
.theme-no-transition,
.theme-no-transition * {
    transition: none !important;
}