﻿.validation-message {
    color: #f44336;
    margin: 0;
    font-size: .8rem;
    margin-top: 3px;
    text-align: start;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: .03333em;
}

.mud-snackbar-location-bottom-left {
    bottom: 50px !important;
}

.mud-snackbar-location-bottom-right {
    bottom: 50px !important;
}

/* Aegaeon Forge CSS Variables */
:root {
    --af-bg-primary: #071520;
    --af-surface-primary: #0B2030;
    --af-accent-ember: #FF6B1A;
    --af-text-light: #E8E6E2;

    --af-bg-secondary: #1A3A52;
    --af-accent-cerulean: #007B9E;
    --af-grad-start: #3C6B8C;
    --af-grad-end: #91B7CC;
    --af-text-muted: #B5BFC8;

    --af-card-bg: #0E1B26;
    --af-divider: #343B45;
    --af-input-bg: #1C2A36;
    --af-placeholder: #5A6773;
    --af-inactive: #445160;

    --af-cta-hover: #FF9333;
    --af-success: #00C896;
    --af-warning: #FFC166;
    --af-error: #D44A14;
    --af-info: #3C6B8C;

    /* Light mode variants */
    --af-light-bg: #F5F7FA;
    --af-light-surface: #E8E6E2;
    --af-light-text: #1E2B36;
}

/* Ember/amber global progress bar brand alignment */
.af-global-progress .mud-progress-linear-bar {
    background-color: var(--af-ember, #f65914) !important;
}
.af-global-progress .mud-progress-linear-buffer {
    /* soft buffer tint using ember */
    background-color: rgba(246, 89, 20, 0.2);
}

/* Utility classes */
.af-bg-primary { background-color: var(--af-bg-primary) !important; }
.af-surface { background-color: var(--af-surface-primary) !important; }
.af-card { background-color: var(--af-card-bg) !important; }
.af-text-light { color: var(--af-text-light) !important; }
.af-text-muted { color: var(--af-text-muted) !important; }
.af-divider { border-color: var(--af-divider) !important; }
.af-input-bg input, .af-input-bg textarea, .af-input-bg .mud-input-root {
    background-color: var(--af-input-bg) !important;
}

/* Gradients */
.af-hero-gradient {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(156, 39, 176, 0.06));
}
/* Panel header with theme-aware contrast similar to NavMenu */
.af-panel-header {
    background: linear-gradient(135deg, rgba(33,150,243,.18), rgba(156,39,176,.14));
    color: #1A202C;
}
.mud-theme-dark .af-panel-header,
.af-drawer.af-dark .af-panel-header {
    background: linear-gradient(135deg, rgba(33,150,243,.28), rgba(156,39,176,.24));
    color: #F9FAFB;
}

/* Section cards readable against background for both themes */
.af-section-card {
    background-color: rgba(255,255,255,.92);
}
.mud-theme-dark .af-section-card,
.af-drawer.af-dark .af-section-card,
.af-main-content.af-dark .af-section-card,
.mud-container.af-dark .af-section-card {
    background-color: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #E8E6E2 !important;
}

/* Ensure text inside section cards is light in dark mode */
.mud-theme-dark .af-section-card *,
.af-drawer.af-dark .af-section-card *,
.af-main-content.af-dark .af-section-card *,
.mud-container.af-dark .af-section-card * {
    color: #E8E6E2 !important;
}

/* Override MudBlazor's text secondary color in dark mode cards */
.mud-theme-dark .af-section-card .mud-text-secondary,
.af-main-content.af-dark .af-section-card .mud-text-secondary,
.mud-container.af-dark .af-section-card .mud-text-secondary {
    color: #B5BFC8 !important;
}

/* Expansion panels container - prevent jumping on expand/collapse */
.af-panels {
    position: relative;
    min-height: 600px;
    overflow: visible;
}

.af-panels .mud-expansion-panel {
    transform: translateZ(0); /* GPU acceleration for smoother transitions */
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 6px;
    margin-bottom: 8px;
}

.mud-theme-dark .af-panels .mud-expansion-panel,
.af-main-content.af-dark .af-panels .mud-expansion-panel,
.mud-container.af-dark .af-panels .mud-expansion-panel {
    border: 1px solid rgba(255,255,255,.1);
}

/* Expansion header contrast similar to navmenu */
.af-panels .mud-expand-panel-header {
    background-color: rgba(0,0,0,.04);
    border-radius: 6px;
    border: none;
}
.af-panels .mud-expand-panel-header:hover,
.af-panels .mud-expand-panel-header:focus {
    background-color: rgba(0,0,0,.08);
}
.mud-theme-dark .af-panels .mud-expand-panel-header,
.af-main-content.af-dark .af-panels .mud-expand-panel-header,
.mud-container.af-dark .af-panels .mud-expand-panel-header {
    background-color: rgba(255,255,255,.14) !important;
    border: none !important;
}
.mud-theme-dark .af-panels .mud-expand-panel-header:hover,
.mud-theme-dark .af-panels .mud-expand-panel-header:focus,
.af-main-content.af-dark .af-panels .mud-expand-panel-header:hover,
.af-main-content.af-dark .af-panels .mud-expand-panel-header:focus,
.mud-container.af-dark .af-panels .mud-expand-panel-header:hover,
.mud-container.af-dark .af-panels .mud-expand-panel-header:focus {
    background-color: rgba(255,255,255,.20) !important;
    border: none !important;
}

/* Add spacing between panel header and content cards */
.af-panels .mud-expand-panel-content {
    padding-top: 24px;
    padding-bottom: 16px;
}

.af-panels .mud-expand-panel-content .mud-grid {
    margin-top: 0;
}

.af-button-hover-gradient:hover {
    background: linear-gradient(90deg, #FF9333 0%, #FF6B1A 100%);
}
.af-card-accent-line {
    background: linear-gradient(90deg, #3C6B8C 0%, #91B7CC 100%);
    height: 2px;
}

/* Public pages illustration */
.af-hero-illustration {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Header / Navbar suggestions */
.af-header {
    background-color: var(--af-bg-primary) !important;
    color: var(--af-text-light) !important;
}
.af-header a:hover { color: var(--af-accent-ember) !important; }

/* Button helpers */
.af-btn-primary { background-color: var(--af-accent-ember) !important; color: #fff !important; }
.af-btn-primary:hover { background-color: var(--af-cta-hover) !important; }
.af-btn-secondary { background-color: var(--af-accent-cerulean) !important; color: #fff !important; }
.af-btn-secondary:hover { background-color: var(--af-grad-start) !important; }

/* Footer */
.af-footer { background-color: var(--af-surface-primary); }
.af-footer a { color: #91B7CC; }

/* Nav menu lightening */
.af-navmenu .mud-nav-link,
.af-navmenu .mud-nav-link .mud-nav-link-text {
    color: #2D3748 !important; /* stronger contrast in light mode */
}
.af-navmenu .mud-icon-root {
    color: #4A5568 !important;
}
.af-navmenu .mud-nav-link:hover,
.af-navmenu .mud-nav-link:focus {
    background-color: rgba(0,0,0,0.06) !important; /* clearer hover in light mode */
}
.af-navmenu .mud-nav-group .mud-nav-group-text {
    color: #1A202C !important; /* darker headers in light mode */
}
.af-navmenu .mud-nav-item .mud-ripple {
    background-color: rgba(0, 0, 0, 0.08) !important;
}



/* Explicit drawer class from MainLayout to guarantee override regardless of theme class presence */
.af-drawer.af-dark .af-navmenu,
.af-drawer.af-dark .af-navmenu * {
    color: #F9FAFB !important;
}
.af-drawer.af-dark .af-navmenu .mud-icon-root { color: #F9FAFB !important; }
.af-drawer.af-dark .af-navmenu .mud-nav-link:hover,
.af-drawer.af-dark .af-navmenu .mud-nav-link:focus { background-color: rgba(255,255,255,.14) !important; }
.af-drawer.af-dark .af-navmenu .mud-nav-link-active { background-color: rgba(255,255,255,.18) !important; font-weight: 600; }

/* Light-mode explicit drawer class (keeps previous light styles consistent) */
.af-drawer.af-light .af-navmenu .mud-nav-link,
.af-drawer.af-light .af-navmenu .mud-nav-link .mud-nav-link-text { color: #2D3748 !important; }
.af-drawer.af-light .af-navmenu .mud-icon-root { color: #4A5568 !important; }
.af-drawer.af-light .af-navmenu .mud-nav-group .mud-nav-group-text { color: #1A202C !important; }
.af-drawer.af-light .af-navmenu .mud-nav-link:hover,
.af-drawer.af-light .af-navmenu .mud-nav-link:focus { background-color: rgba(0,0,0,0.06) !important; }

/* Theme Selector Hover and Click Effects */
.af-theme-selector-list {
    min-width: 140px;
    padding: 4px 8px;
    overflow-x: hidden;
}

.af-theme-selector-list .mud-list-item {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 4px;
    margin: 2px 0;
    padding: 8px 12px;
}

.af-theme-selector-list .mud-list-item:hover {
    background-color: rgba(255, 107, 26, 0.08);
    transform: translateX(2px);
}

.af-theme-selector-list .mud-list-item:active {
    background-color: rgba(255, 107, 26, 0.15);
    transform: scale(0.98);
}

.af-theme-selector-list .mud-list-item.af-theme-selected {
    background-color: rgba(255, 107, 26, 0.12);
    font-weight: 600;
}

.af-theme-selector-list .mud-list-item.af-theme-selected:hover {
    background-color: rgba(255, 107, 26, 0.18);
}

/* Industries section text wrapping fixes */
.af-section-card .mud-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
}

/* Better text wrapping for industry names */
.af-section-card .mud-text b {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
}

/* Ensure proper spacing for industry cards */
.af-section-card {
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* Benefits cards styling - similar to expansion panel headers */
.af-benefits-card {
    background-color: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.08);
}

.mud-theme-dark .af-benefits-card,
.af-main-content.af-dark .af-benefits-card,
.mud-container.af-dark .af-benefits-card {
    background-color: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}

/* Benefits header text styling */
.af-benefits-header {
    color: #1A202C;
    font-weight: 600;
}

.mud-theme-dark .af-benefits-header,
.af-main-content.af-dark .af-benefits-header,
.mud-container.af-dark .af-benefits-header {
    color: #F9FAFB !important;
}

/* CTA card styling - theme-aware gradient */
.af-cta-card {
    background: linear-gradient(135deg, #3C6B8C 0%, #1A3A52 100%);
}

.mud-theme-dark .af-cta-card {
    background: linear-gradient(135deg, #1A3A52 0%, #071520 100%);
}

/* CTA button styling for better contrast against gradient background */
.af-cta-button {
    background-color: #FF6B1A !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(255, 107, 26, 0.3);
}

.af-cta-button:hover {
    background-color: #E55A0F !important;
    box-shadow: 0 6px 16px rgba(255, 107, 26, 0.4);
    transform: translateY(-1px);
}

/* Mobile AppBar Header Controls - only for mobile */
@media (max-width: 959px) {
    .af-main-appbar.mud-appbar {
        flex-wrap: wrap;
        min-height: 90px;
        height: auto;
        max-height: none;
        padding: 8px 8px 8px 0;
        padding-left: 0;
        overflow: visible;
        position: relative;
        z-index: 1100;
        margin-bottom: 0;
    }

    /* Ensure mobile layout container is visible - use higher specificity */
    .af-main-appbar.mud-appbar > .mud-hidden {
        display: flex;
    }

    .af-mobile-spacer {
        flex: 1 1 auto;
        min-width: 8px;
        display: block;
    }

    .af-header-controls-mobile {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
        flex: 0 0 auto;
        padding: 12px 0 4px 0;
        visibility: visible;
        opacity: 1;
        position: relative;
        z-index: 1101;
    }

    .af-header-buttons-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end;
        margin-top: 8px;
        visibility: visible;
        opacity: 1;
    }

    .af-header-selectors-row {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
        margin-bottom: 4px;
        visibility: visible;
        opacity: 1;
    }

    /* Ensure LoginLinks chips are visible */
    .af-header-buttons-row .mud-chip {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.813rem;
        display: inline-flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* Ensure ThemeSelector and LanguageSwitcher are visible */
    .af-header-selectors-row .mud-button,
    .af-header-selectors-row .mud-menu,
    .af-header-selectors-row .mud-menu-activator {
        font-size: 0.75rem;
        padding: 4px 8px;
        min-height: 32px;
        display: inline-flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        position: relative;
        z-index: 1102;
    }

    .af-header-selectors-row .mud-button-root {
        font-size: 0.75rem;
        padding: 4px 8px;
        display: inline-flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* Specifically target mobile language selector */
    .af-header-selectors-row #language-selector-mobile .mud-button-root {
        font-size: 0.75rem;
        padding: 4px 8px;
        min-height: 32px;
        height: auto;
        display: inline-flex;
        visibility: visible;
        opacity: 1;
    }

    .af-header-selectors-row #language-selector-mobile .mud-button-label {
        font-size: 0.75rem;
        visibility: visible;
        opacity: 1;
    }

    /* Increase logo size by 25% on mobile (72px -> 90px) and vertically center */
    .af-main-appbar.mud-appbar .mud-link:first-child,
    .af-main-appbar.mud-appbar > .mud-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 90px;
        margin-left: -16px;
        margin-top: 16px;
        padding-left: 0;
        margin-right: 0;
        padding-right: 0;
    }

    .af-main-appbar.mud-appbar .mud-link img {
        width: 109px;
        height: 109px;
    }

    /* Reduce spacing between AppBar and main content on mobile */
    .af-main-appbar.mud-appbar {
        margin-bottom: 0;
        padding-bottom: 4px;
    }

    /* Remove any spacing between AppBar and MainContent */
    .mud-layout > .mud-appbar + .mud-main-content {
        margin-top: 0;
        padding-top: 0;
    }

    .mud-main-content {
        padding-top: 0;
        margin-top: 0;
    }

    .mud-main-content .mud-container {
        margin-top: 0;
        padding-top: 0;
    }

    /* Reduce top padding on first content element */
    .mud-main-content .mud-container > .mud-paper:first-child {
        padding-top: 8px;
        margin-top: 0;
    }

    /* Target hero section specifically */
    .mud-main-content .mud-container > .mud-paper.af-hero-gradient:first-child {
        padding-top: 8px;
        margin-top: 0;
    }
}

/* Mobile language selector - minimal styling since MudHidden handles responsiveness */
@media (max-width: 959px) {
    .af-language-selector-mobile button {
        padding: 4px 8px;
        font-size: 0.75rem;
        min-height: 32px;
    }
}

@media (max-width: 600px) {
    .af-language-selector-mobile button {
        padding: 6px 12px;
        font-size: 0.875rem;
    }
}

/* Ensure body/html don't clip fixed elements */
@media (max-width: 960px) {
    body,
    html {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* Prevent horizontal overflow globally */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Chat FAB - Ensure visibility on mobile browsers */
#chat-fab-button,
.chat-fab,
.chat-fab.mud-fab,
button.chat-fab,
.mud-fab.chat-fab,
[class*="chat-fab"],
button[class*="chat-fab"] {
    position: fixed;
    /* Lift above overlays and browser UI */
    bottom: clamp(24px, 6vh, 96px);
    right: 24px;
    z-index: 1000001; /* above AppOverlay and drawers */
    display: inline-flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    transform: translateZ(0); /* promote to own layer on mobile */
}

/* Mobile safe area support - account for home indicator and notches */
@supports (padding: max(0px)) {
    #chat-fab-button,
    .chat-fab,
    .chat-fab.mud-fab,
    button.chat-fab,
    .mud-fab.chat-fab,
    [class*="chat-fab"],
    button[class*="chat-fab"] {
        bottom: max(clamp(24px, 6vh, 96px), env(safe-area-inset-bottom, 24px));
        right: max(24px, env(safe-area-inset-right, 24px));
    }
}

/* Ensure FAB is visible on all mobile devices */
@media (max-width: 960px) {
    #chat-fab-button,
    .chat-fab,
    .chat-fab.mud-fab,
    button.chat-fab,
    .mud-fab.chat-fab,
    [class*="chat-fab"],
    button[class*="chat-fab"] {
        bottom: clamp(16px, 6vh, 96px);
        right: 16px;
        z-index: 1000001;
        display: inline-flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        overflow: visible;
    }
    
    @supports (padding: max(0px)) {
        #chat-fab-button,
        .chat-fab,
        .chat-fab.mud-fab,
        button.chat-fab,
        .mud-fab.chat-fab,
        [class*="chat-fab"],
        button[class*="chat-fab"] {
            bottom: max(clamp(16px, 6vh, 96px), env(safe-area-inset-bottom, 16px));
            right: max(16px, env(safe-area-inset-right, 16px));
        }
    }
}

/* Ensure icon contrasts inside the FAB */
.mud-fab .mud-icon-root, 
button.chat-fab .mud-icon-root {
    color: var(--mud-palette-primary-contrast-text, #fff) !important;
}
