/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

/* Nothing else in the app constrains horizontal overflow, so a single element
   wider than the viewport (e.g. a rich-text editor toolbar, or a body-level
   Syncfusion/MudBlazor popup portal that outlives the page that opened it)
   stretches the document's scroll width and the WHOLE site scrolls sideways.

   `clip` rather than `hidden`: `hidden` would make this a scroll container,
   which breaks `position: sticky` descendants and the app's programmatic
   scrolling (scrollToElement, elevateKeyboard.ensureVisible). `clip` clips
   without creating one. The fixed app bar is unaffected -- body has no
   transform, so fixed descendants are not clipped by it. */
html, body {
    overflow-x: clip;
}

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}


.a {
    text-decoration: none;
    color: var(--mud-palette-text-tertiary)
}

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

.mention-tag {
    background-color: #e0f0ff;
    border-radius: 3px;
    padding: 0 4px;
    cursor: pointer;
    color: #007acc;
    font-weight: 600;
    margin-right: 2px;
    text-decoration: none;
}

.mention-tag:hover {
    text-decoration: underline;
}

/* Dark-mode variant: keep the tinted pill legible on dark surfaces. */
html.elevate-theme-dark .mention-tag {
    background-color: rgba(96, 165, 250, 0.16);
    color: #93c5fd;
}

/* Example highlight style for matched text in suggestions */
.mention-highlight {
    font-weight: bold;
    color: var(--mud-palette-secondary);
}

/* Profile Group Colors - Centralized color definitions for different member tiers */
:root {
    /* Shared accent for marketing/feature pages: brand blue in light, lightened for dark (see html.elevate-theme-dark below). */
    --elevate-accent: var(--mud-palette-secondary);

    /* Dark marketing bands (hero/CTA sections that keep white text in BOTH themes). Pinned to the
       light-palette navy/blue on purpose: the dark palette's primary/secondary are bright blues, and
       tracking them turns these bands into glowing slabs where the white copy loses contrast. */
    --elevate-band-navy: #262b40;
    --elevate-band-navy-deep: #1b1f30;
    --elevate-band-blue: #1565c0;

    /* Supporter/Premium Member Color */
    --profile-group-supporter: var(--mud-palette-tertiary);
    --profile-group-supporter-rgb: var(--mud-palette-tertiary-rgb);

    /* Admin Color (uses existing error palette) */
    --profile-group-admin: var(--mud-palette-error);

    /* Moderator Color (uses existing success palette) */
    --profile-group-moderator: var(--mud-palette-success);

    /* Professional Pyrotechnic Color */
    --profile-group-professional: #2e86c1;
    --profile-group-professional-rgb: 46, 134, 193;

    /* Spark (like) flame brand colors */
    --spark-flame: #ff6500;
    --spark-flame-rgb: 255, 101, 0;
    --spark-flame-hover: #ff6b3d;
    --spark-flame-hover-rgb: 255, 107, 61;
    --spark-flame-accent: #ff9e00;

    /* Future: Add more profile group colors here as needed */
    /* --profile-group-vip: var(--mud-palette-warning); */
    /* --profile-group-developer: var(--mud-palette-info); */
}

/* Lighten the shared accent in dark mode so it stays legible on the dark navy surfaces. */
html.elevate-theme-dark {
    --elevate-accent: #93C5FD;
}

/* Accessible text using secondary brand color (WCAG AA compliant) */
.text-secondary-accessible {
    color: var(--mud-palette-secondary-darken) !important;
}

/* Phone Number Field Format Feedback Styles */
.phone-format-feedback {
    margin-top: 4px;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}

.phone-format-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.phone-format-status::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.phone-format-status.valid {
    color: var(--mud-palette-success);
}

.phone-format-status.valid::before {
    content: "\f058"; /* fa-check-circle */
}

.phone-format-status.warning {
    color: var(--mud-palette-warning);
}

.phone-format-status.warning::before {
    content: "\f071"; /* fa-exclamation-triangle */
}

.phone-format-status.info {
    color: var(--mud-palette-info);
}

.phone-format-status.info::before {
    content: "\f05a"; /* fa-info-circle */
}

/* ============================================================================
   Syncfusion Rich Text Editor dark-mode bridge
   Only the LIGHT bootstrap5.css is loaded (App.razor) and in v32 it is the
   legacy compiled theme (hardcoded hex, no CSS vars). The wrapper's own <style>
   (SyncfusionRichTextEditor.razor) remaps the editor frame, toolbar, icon
   buttons, content, source view, placeholder and char count; the rules below
   fill the gaps: the Formats/Alignments dropdown BUTTONS and every body-level
   portal popup (menus, dialogs, quick toolbar, table chooser) that renders
   OUTSIDE .syncfusion-rte-container. Gated under html.elevate-theme-dark so
   Syncfusion's already-correct light theme is left untouched. !important is kept
   only where it must beat Syncfusion's deep 0,8,0 / 0,5,0 selector chains. Each
   body-level rule is anchored on an RTE-specific class so the app's other
   Syncfusion components (Charts, Navigations) are not affected. */

/* 1. Toolbar dropdown buttons: "Paragraph" (Formats) + Alignments */
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu {
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-divider) !important;
}
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu,
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu .e-rte-dropdown-btn-text,
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu .e-icons {
    color: var(--mud-palette-text-primary) !important;
}
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu:hover,
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu:focus {
    background-color: var(--mud-palette-action-default-hover) !important;
}
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu.e-active {
    background-color: var(--mud-palette-primary) !important;
}
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu.e-active,
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu.e-active .e-rte-dropdown-btn-text,
html.elevate-theme-dark .syncfusion-rte-container .e-rte-dropdown-menu.e-active .e-icons {
    color: var(--mud-palette-primary-text) !important;
}

/* 1b. Resting toolbar glyphs (Bold/Italic/etc.): Syncfusion paints them #212529
   at 0,5,0, which the wrapper's .e-tbar-btn color (0,3,0) does not beat. */
html.elevate-theme-dark .syncfusion-rte-container .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--mud-palette-text-primary) !important;
}

/* 1c. Disabled toolbar buttons (e.g. Undo/Redo on a fresh editor). The light
   bootstrap5 theme paints .e-overlay with a #f8f9fa background, which reads as a
   grey box on the dark toolbar. Drop the background so the inherited opacity:.5
   dims the glyph in place, matching the disabled look used elsewhere. */
html.elevate-theme-dark .syncfusion-rte-container .e-toolbar-item.e-overlay {
    background: transparent !important;
}

/* 2. Dropdown menu POPUP (body-level). Anchored on RTE-specific
   .e-rte-dropdown-popup so the generic .e-dropdown-popup of other components is
   untouched. */
html.elevate-theme-dark .e-rte-dropdown-popup.e-dropdown-popup {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}
html.elevate-theme-dark .e-rte-dropdown-popup ul {
    border-color: var(--mud-palette-divider);
}
html.elevate-theme-dark .e-rte-dropdown-popup ul .e-item {
    color: var(--mud-palette-text-primary);
}
html.elevate-theme-dark .e-rte-dropdown-popup ul .e-item:hover,
html.elevate-theme-dark .e-rte-dropdown-popup ul .e-item.e-focused {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}
html.elevate-theme-dark .e-rte-dropdown-popup ul .e-item.e-selected,
html.elevate-theme-dark .e-rte-dropdown-popup ul .e-item.e-active,
html.elevate-theme-dark .e-rte-dropdown-popup ul .e-item:active {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
html.elevate-theme-dark .e-rte-dropdown-popup ul .e-item.e-separator {
    border-bottom-color: var(--mud-palette-divider);
}

/* 3. Insert Link / Table DIALOGS (body-level). Root is .e-rte-elements.e-dialog
   (both classes on ONE element; .e-rte-elements is RTE-only). Surface alone is
   not enough: header/content/footer/inputs repaint white and need own rules. */
html.elevate-theme-dark .e-rte-elements.e-dialog {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-dlg-header-content {
    background-color: var(--mud-palette-surface);
    border-bottom-color: var(--mud-palette-divider);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-dlg-content {
    background-color: var(--mud-palette-surface);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-dlg-header,
html.elevate-theme-dark .e-rte-elements.e-dialog .e-dlg-content,
html.elevate-theme-dark .e-rte-elements.e-dialog .e-rte-label label {
    color: var(--mud-palette-text-primary);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-footer-content {
    background-color: var(--mud-palette-surface);
    border-top-color: var(--mud-palette-divider);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-dlg-closeicon-btn .e-btn-icon {
    color: var(--mud-palette-text-secondary);
}
/* Text inputs (URL, display text): theme paints them white */
html.elevate-theme-dark .e-rte-elements.e-dialog .e-input-group.e-control-wrapper {
    background-color: var(--mud-palette-background);
    border-color: var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-input-group.e-control-wrapper .e-input,
html.elevate-theme-dark .e-rte-elements.e-dialog input.e-input {
    background: transparent;
    color: var(--mud-palette-text-primary);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-input-group.e-control-wrapper input.e-input::placeholder {
    color: var(--mud-palette-text-disabled);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-input-group.e-control-wrapper .e-input-group-icon {
    color: var(--mud-palette-text-secondary);
}
html.elevate-theme-dark .e-rte-elements.e-dialog .e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--mud-palette-primary);
}
/* Brand polish: primary "Insert" button -> purple (already readable; optional) */
html.elevate-theme-dark .e-rte-elements.e-dialog .e-footer-content .e-btn.e-primary {
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* 4. Selection QUICK TOOLBAR (body-level), shown on link/image/table selection */
html.elevate-theme-dark .e-rte-quick-popup .e-rte-quick-toolbar,
html.elevate-theme-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items {
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-divider) !important;
}
html.elevate-theme-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-tbar-btn,
html.elevate-theme-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-rte-dropdown-menu {
    background-color: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}
html.elevate-theme-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-tbar-btn .e-icons {
    color: var(--mud-palette-text-primary) !important;
}
html.elevate-theme-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-tbar-btn:hover,
html.elevate-theme-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-rte-dropdown-menu:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* 5. Insert-table SIZE CHOOSER popup (body-level) */
html.elevate-theme-dark .e-rte-table-popup.e-popup.e-popup-open {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}
html.elevate-theme-dark .e-rte-table-popup .e-rte-popup-header {
    color: var(--mud-palette-text-secondary);
}
html.elevate-theme-dark .e-rte-table-popup .e-span-border {
    border-color: var(--mud-palette-divider);
}
html.elevate-theme-dark .e-rte-table-popup.e-popup-open .e-rte-tablecell {
    border-color: var(--mud-palette-divider);
}
html.elevate-theme-dark .e-rte-table-popup.e-popup-open .e-rte-tablecell.e-default {
    background-color: var(--mud-palette-background);
}
html.elevate-theme-dark .e-rte-table-popup.e-popup-open .e-rte-tablecell.e-active {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

/* 6. Tooltips: intentionally NOT overridden. .e-tooltip-wrap.e-popup is already
   dark (#212529), reads fine on navy, and is shared by ALL Syncfusion tooltips. */

/* ==========================================================================
   Pre-interactive loading overlay
   Shown over MainLayout while a page is prerendered but not yet hydrated
   (InteractiveWebAssembly). MainLayout toggles .app-loading-overlay--ready via
   RendererInfo.IsInteractive once the layout renders interactively, fading it out.
   Defined here (render-blocking <head> CSS) so it paints correctly on first paint.
   ========================================================================== */
.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above MudBlazor dialog/popover/snackbar/tooltip (<=1500) */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.55);     /* light scrim */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);                       /* light frosted */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* Applied once the layout renders interactively -> fade out. */
.app-loading-overlay--ready {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;                             /* let clicks reach the live page during/after fade */
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* Framed brand card floating on the frosted scrim. */
.app-loading-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0; /* explicit margins below control the vertical rhythm */
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    padding: 40px 52px;
    border-radius: 20px;
    background: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, 0.30), 0 4px 12px rgba(16, 24, 40, 0.08);
}
html.elevate-theme-dark .app-loading-overlay__content {
    box-shadow: 0 20px 52px -12px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.40);
}
@media (max-width: 480px) {
    .app-loading-overlay__content { padding: 32px 28px; }
}

/* Brand "comet" ring: a faint full-circle track (::before) plus a rotating
   blue->teal gradient arc (::after). Pure CSS so it animates during prerender,
   before WASM hydrates (the same principle the old MudProgressCircular relied on). */
.app-loading-overlay__spinner {
    --ring-c1: #1565C0;                      /* secondary blue (light) */
    --ring-c2: #15d9cd;                      /* tertiary teal  (light) */
    --ring-track: rgba(21, 101, 192, 0.15);
    position: relative;
    width: 64px;
    height: 64px;
}
.app-loading-overlay__spinner::before,
.app-loading-overlay__spinner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.app-loading-overlay__spinner::before {
    border: 4px solid var(--ring-track);
}
.app-loading-overlay__spinner::after {
    background: conic-gradient(from 0deg, transparent 0 18%, var(--ring-c1) 55%, var(--ring-c2) 100%);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - 4px));
    animation: app-loading-spin 0.9s linear infinite;
}
html.elevate-theme-dark .app-loading-overlay__spinner {
    --ring-c1: #60A5FA;                      /* secondary blue (dark) */
    --ring-c2: #2DE9DB;                      /* tertiary teal  (dark) */
    --ring-track: rgba(96, 165, 250, 0.18);
}

@keyframes app-loading-spin {
    to { transform: rotate(360deg); }
}

.app-loading-overlay__brand {
    margin-top: 24px;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--mud-palette-text-primary, #1f2440);
}
html.elevate-theme-dark .app-loading-overlay__brand {
    color: var(--mud-palette-text-primary, rgba(255, 255, 255, 0.92));
}

.app-loading-overlay__text {
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

/* Dark mode: html.elevate-theme-dark is set pre-paint by the anti-flash script, so this
   applies at first paint. Dark navy scrim instead of white. */
html.elevate-theme-dark .app-loading-overlay {
    background-color: rgba(13, 15, 26, 0.55);
}
html.elevate-theme-dark .app-loading-overlay__text {
    color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.64));
}

/* Respect reduced-motion: drop the fade, just hide. */
@media (prefers-reduced-motion: reduce) {
    .app-loading-overlay { transition: none; }
    .app-loading-overlay--ready { transition: visibility 0s linear 0s; }
    .app-loading-overlay__spinner::after { animation: none; opacity: 0; } /* drop the spin, show the static track ring only */
}