/* ===== BRAND CUSTOM PROPERTIES ===== */
/* Defined in ThemeConfiguration.BuildRootCssVariablesCss() and injected via ThemeRootStyles.razor */

/* ===== SHARED COMPONENT UTILITIES ===== */
/* Breadcrumb styles live in wwwroot/css/organization-pages.css */

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    flex-direction: column;
}

/* UI-2: prefer these over inline style= in Blazor markup */
.panel-loading-stack {
    min-height: 300px;
}

.ppe-page-loading {
    min-height: 50vh;
}

.flex-column-space-around {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}

.flex-center-full-height {
    display: flex;
    align-items: center;
    height: 100%;
}

.flex-grow-min-0 {
    flex: 1;
    min-width: 0;
}

.font-monospace {
    font-family: monospace;
}

/* Slot-host collapse (HAV2318): a wrapper whose only job is hosting optional
   razor-driven content (a RenderFragment slot or an @if block) must not reserve
   a flex/grid gap when the content rendered no elements. An empty host collapses
   and takes its gap with it; a populated host is unaffected. */
.havto-slot:not(:has(*)) {
    /* !important: MudBlazor ships .mud-container{display:block} etc. at the same
       (0,1,0) specificity but loads later -- without it an empty host stays a
       flex item and keeps the stack's gap alive on both sides. */
    display: none !important;
}

.page-loading-min-h { min-height: 50vh; }
.w-100px { width: 100px; }
.w-200px { width: 200px; }
.min-w-200 { min-width: 200px; }
.min-w-160 { min-width: 160px; }
.text-right-nowrap { text-align: right; white-space: nowrap; }
.chat-messages-scroll { max-height: 300px; overflow-y: auto; }
.timeline-shell { max-height: 70vh; overflow-y: auto; }
.contractor-branch-sharing-flyout { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); z-index: 1400; min-width: 360px; max-width: 90vw; }
.role-accent-primary { --role-accent: var(--hav-accent); }
.role-accent-success { --role-accent: var(--hav-success); }
.role-accent-info { --role-accent: var(--hav-info); }
.role-accent-warning { --role-accent: var(--hav-warning); }
.role-accent-default { --role-accent: var(--hav-text); }
.hazard-risk-primary { background-color: color-mix(in srgb, var(--hav-accent) 10%, transparent); border: 1px solid var(--hav-accent); }
.hazard-risk-success { background-color: color-mix(in srgb, var(--hav-success) 10%, transparent); border: 1px solid var(--hav-success); }
.hazard-risk-info { background-color: color-mix(in srgb, var(--hav-info) 10%, transparent); border: 1px solid var(--hav-info); }
.hazard-risk-warning { background-color: color-mix(in srgb, var(--hav-warning) 10%, transparent); border: 1px solid var(--hav-warning); }
.hazard-risk-error { background-color: color-mix(in srgb, var(--hav-error) 10%, transparent); border: 1px solid var(--hav-error); }
.hazard-risk-default { background-color: color-mix(in srgb, var(--hav-text-muted) 10%, transparent); border: 1px solid var(--hav-line); }
.due-date-border-error { border-left: 4px solid var(--hav-error); }
.due-date-border-warning { border-left: 4px solid var(--hav-warning); }
.due-date-border-info { border-left: 4px solid var(--hav-info); }
.checklist-item-satisfied { background-color: color-mix(in srgb, var(--hav-success) 20%, var(--hav-panel)); }
.checklist-item-mandatory { background-color: color-mix(in srgb, var(--hav-warning) 20%, var(--hav-panel)); border-left: 4px solid var(--hav-warning); }
.checklist-item-default { background-color: var(--hav-surface-raised); border-left: 4px solid var(--hav-line); }
.assignment-overdue { border: 1px solid var(--hav-error); }
.assignment-due-soon { border: 1px solid var(--hav-warning); }
.assignment-default { border: 1px solid var(--hav-line); }
.organization-card-selected { border: 3px solid var(--hav-success); background: var(--hav-panel); }
.organization-card-unselected { border: 2px solid var(--hav-line); background: var(--hav-panel); }
.campaign-banner { border-radius: 8px; padding: 16px; }
.campaign-bg-primaryblue { background: #1976D2; --campaign-bg: #1976D2; }
.campaign-bg-successgreen { background: #4CAF50; --campaign-bg: #4CAF50; }
.campaign-bg-warningorange { background: #FF9800; --campaign-bg: #FF9800; }
.campaign-bg-errorred { background: #F44336; --campaign-bg: #F44336; }
.campaign-bg-infocyan { background: #00BCD4; --campaign-bg: #00BCD4; }
.campaign-bg-neutralgray { background: #757575; --campaign-bg: #757575; }
.campaign-bg-darkslate { background: #455A64; --campaign-bg: #455A64; }
.campaign-bg-premiumgold { background: #FFD700; --campaign-bg: #FFD700; }
.campaign-bg-lightbackground { background: #F5F5F5; --campaign-bg: #F5F5F5; }
.campaign-bg-darkbackground { background: #212121; --campaign-bg: #212121; }
.campaign-text-primaryblue { color: #1976D2; --campaign-text: #1976D2; }
.campaign-text-successgreen { color: #4CAF50; --campaign-text: #4CAF50; }
.campaign-text-warningorange { color: #FF9800; --campaign-text: #FF9800; }
.campaign-text-errorred { color: #F44336; --campaign-text: #F44336; }
.campaign-text-infocyan { color: #00BCD4; --campaign-text: #00BCD4; }
.campaign-text-neutralgray { color: #757575; --campaign-text: #757575; }
.campaign-text-darkslate { color: #455A64; --campaign-text: #455A64; }
.campaign-text-premiumgold { color: #FFD700; --campaign-text: #FFD700; }
.campaign-text-lightbackground { color: #F5F5F5; --campaign-text: #F5F5F5; }
.campaign-text-darkbackground { color: #212121; --campaign-text: #212121; }
.prediction-timeline { border: 1px solid var(--hav-line); }
.hav-step-progress > .step-progress-0 { width: 0; }
.hav-step-progress > .step-progress-20 { width: 20%; }
.hav-step-progress > .step-progress-25 { width: 25%; }
.hav-step-progress > .step-progress-40 { width: 40%; }
.hav-step-progress > .step-progress-33 { width: 33.33%; }
.hav-step-progress > .step-progress-50 { width: 50%; }
.hav-step-progress > .step-progress-60 { width: 60%; }
.hav-step-progress > .step-progress-67 { width: 67%; }
.hav-step-progress > .step-progress-80 { width: 80%; }
.hav-step-progress > .step-progress-100 { width: 100%; }
.record-timeline-scroll { overflow-y: visible; }
.record-timeline-scroll-contained { max-height: min(70vh, 28rem); overflow-y: auto; }
.record-timeline-scroll-contained-wide { max-height: min(70vh, 32rem); overflow-y: auto; }

.hierarchy-indent-0 { margin-left: 0; }
.hierarchy-indent-1 { margin-left: 20px; }
.hierarchy-indent-2 { margin-left: 40px; }
.hierarchy-indent-3 { margin-left: 60px; }
.hierarchy-indent-4 { margin-left: 80px; }
.hierarchy-indent-5 { margin-left: 100px; }
.hierarchy-indent-6 { margin-left: 120px; }
.hierarchy-indent-7 { margin-left: 140px; }
.hierarchy-indent-8 { margin-left: 160px; }
.hierarchy-indent-9 { margin-left: 180px; }
.hierarchy-indent-10 { margin-left: 200px; }
.confined-space-selected { border: 2px solid var(--hav-accent); }
.min-w-120 { min-width: 120px; }
.min-w-140 { min-width: 140px; }
.min-h-600 { min-height: 600px; }
.min-h-200 { min-height: 200px; }
.bg-surface-grey { background-color: var(--hav-surface-raised); }
.bg-surface-default { background-color: var(--hav-ground); }
.bg-transparent { background: transparent !important; }
.invisible { visibility: hidden; }
.overflow-y-auto { overflow-y: auto; }
.break-all { word-break: break-all; }
.border-lines { border: 1px solid var(--hav-line); }
.border-hav { border: 1px solid var(--hav-border, var(--hav-line)); }
.flex-1-300 { flex: 1 1 300px; }
.flex-0-0-auto { flex: 0 0 auto; }
.pre-wrap-mono { white-space: pre-wrap; font-family: 'Courier New', monospace; font-size: 0.9rem; }
.panel-section {
    background-color: var(--hav-surface-raised);
}

/* Flat expansion panels - pair with Outlined="false" Elevation="0" on page backgrounds (MudBlazor borders example) */
.havto-expansion-panels.mud-expansion-panels .mud-expand-panel {
    background: var(--hav-panel);
    border: 1px solid var(--hav-line);
    border-radius: 0;
}

.havto-expansion-panels.mud-expansion-panels .mud-expand-panel + .mud-expand-panel {
    margin-top: 8px;
}

.havto-expansion-panels.mud-expansion-panels .mud-expand-panel.mud-panel-expanded {
    margin-top: 8px;
    margin-bottom: 8px;
}

.havto-expansion-panels.mud-expansion-panels .mud-expand-panel.mud-panel-expanded:first-child {
    margin-top: 0;
}

.havto-expansion-panels-nested.mud-expansion-panels .mud-expand-panel {
    border-color: var(--hav-line);
}

.havto-expansion-panels-nested.mud-expansion-panels .mud-expand-panel + .mud-expand-panel {
    margin-top: 0;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.havto-expansion-panels-nested.mud-expansion-panels .mud-expand-panel:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Shared base layouts - MudStack Section spacing owns vertical rhythm; section surfaces use ma-0. */
.list-page-stack {
    width: 100%;
}

@media (min-width: 960px) {
    .list-page-stats-grid > .mud-grid-item.flex-md-1 {
        max-width: none;
    }
}

/* Clickable KPI tiles on register pages */
.register-stat-card-link {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.register-stat-card-link:hover {
    opacity: 0.92;
}

/* Register / list page filter toolbar - pair with RegisterFilterBar */
.register-filter-bar {
    width: 100%;
}

.register-filter-bar ::deep .register-filter-switch {
    flex: 0 0 auto;
}

.register-filter-bar .register-filter-leading {
    flex: 0 0 auto;
}

.register-filter-bar .register-filter-trailing {
    flex: 0 0 auto;
    margin-left: auto;
}

.register-filter-bar .register-filter-controls {
    flex: 1 1 auto;
    min-width: 0;
}

.register-filter-bar .register-filter-chips {
    padding-top: 2px;
}

.register-filter-bar ::deep .register-filter-search,
.register-filter-bar ::deep .incident-filter-search {
    min-width: 280px;
    flex: 1 1 280px;
    max-width: 360px;
}

.register-filter-bar ::deep .register-filter-select,
.register-filter-bar ::deep .incident-filter-select {
    min-width: 180px;
    flex: 0 1 200px;
}

.register-filter-bar ::deep .register-filter-date {
    min-width: 240px;
    flex: 0 1 280px;
}

.register-filter-bar ::deep .register-filter-switch {
    flex: 0 0 auto;
    align-self: center;
    margin-bottom: 4px;
}

.border-subtle { border: 1px solid rgba(0, 0, 0, 0.12); }
.border-lines-default { border: 1px solid var(--hav-line); }
.stack-tight-gap { column-gap: 4px; row-gap: 0; }
.signature-script { font-family: 'Brush Script MT', cursive; font-size: 1.5rem; }
.sticky-top-20 { position: sticky; top: 20px; }
.mt-4px { margin-top: 4px; }

/* Intelligence / AI dashboards (UI-2) - pair with MudCard Outlined; see IncidentIntelligencePanel */
.intelligence-panel-card-header {
    border-bottom: 1px solid var(--hav-line);
}
/* Compact collapsed-panel header for register list pages (UX-2 density): slimmer than the
   MudCardHeader default (~16px). Two-class specificity beats MudBlazor's .mud-card-header. */
.compact-panel-header.mud-card-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.intelligence-panel-table {
    border-top: 1px solid var(--hav-line);
}
.intelligence-panel-table-header-row {
    border-bottom: 1px solid var(--hav-line);
}
.intelligence-panel-table-row {
    border-bottom: 1px solid var(--hav-line);
}
.intelligence-panel-divider.mud-divider {
    border-color: var(--hav-line);
}
/* Keeps the right-column panel compact and in-view while the left column scrolls,
   preventing a tall empty gutter below short system-health/timeline cards. */
.intelligence-right-sticky {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}
.intelligence-metric-card {
    min-height: 120px;
}
.intelligence-metric-card-lg {
    min-height: 140px;
}
.dashboard-loading-progress-track.mud-progress-linear {
    background: transparent;
}
.dashboard-progress-narrow {
    max-width: 16rem;
}
.min-h-60vh {
    min-height: 60vh;
}
.max-w-600 {
    max-width: 600px;
}
.mud-icon-root.mud-icon-display-xl {
    font-size: 5rem;
}
.mud-icon-inline-middle {
    vertical-align: middle;
}
.flex-wrap-gap-2 {
    gap: 0.5rem;
}
.ai-metric-card {
    min-height: 156px;
}
.ai-metric-stack-label {
    min-width: 0;
    max-width: 75%;
}
.ai-metric-label-truncate {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-metric-text-clamp {
    line-height: 1.15;
    min-height: 2.3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.chart-legend-box {
    width: 150px;
    height: 150px;
}
.chart-empty-icon {
    font-size: 80px;
}
.insight-alert-action-btn {
    background-color: var(--hav-panel);
    background-color: color-mix(in srgb, var(--hav-panel) 15%, transparent);
    flex-shrink: 0;
}
.ai-help-chat-tab {
    height: 600px;
}
.ai-help-chat-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.ai-help-status-spinner {
    width: 14px;
    height: 14px;
}

.w-80px { width: 80px; }
.w-60px { width: 60px; }
.min-w-80 { min-width: 80px; }
.pointer-events-none { pointer-events: none; }
.border-dashed-subtle {
    border: 2px dashed var(--hav-line);
}
.bg-surface-subtle {
    background: color-mix(in srgb, var(--hav-panel) 2%, transparent);
}
.empty-state-panel-min {
    min-height: 220px;
    border: 2px dashed var(--hav-line);
    border-radius: 0;
}
.ai-help-text-pre-line {
    white-space: pre-line;
}
.font-size-875 { font-size: 0.875rem; }
.chart-placeholder-surface {
    height: 250px;
    background: var(--hav-surface-raised);
}

.chart-placeholder-surface--bordered {
    border: 1px solid var(--hav-line);
    background: transparent;
    border-radius: 0;
}
.info-accent-border { border-left: 4px solid var(--hav-info); }

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--hav-text-muted);
}

.empty-state-icon {
    opacity: 0.5;
    margin-bottom: 1rem;
}

.empty-state-text {
    opacity: 0.7;
}

.empty-state-dashed {
    border: 2px dashed var(--hav-line);
    border-radius: 0;
}

/* UI-2 final - Mud-first companions (pair with Outlined / Color / Align) */
.dashboard-min-h-0 { min-height: 0; }
.min-h-100vh { min-height: 100vh; }
.min-h-400 { min-height: 400px; }
.min-h-120 { min-height: 120px; }
.min-h-140 { min-height: 140px; }
.min-h-280 { min-height: 280px; }
.min-w-180 { min-width: 180px; }
.min-w-250 { min-width: 250px; }
.min-w-280 { min-width: 280px; }
.min-w-300 { min-width: 300px; }
.max-w-120 { max-width: 120px; }
.max-w-260 { max-width: 260px; }
.max-w-300 { max-width: 300px; }
.max-w-340 { max-width: 340px; }
.max-w-400 { max-width: 400px; }
.max-w-480 { max-width: 480px; }
.max-w-500 { max-width: 500px; }
.max-w-720 { max-width: 720px; }
.max-h-180 { max-height: 180px; }
.max-h-220 { max-height: 220px; }
.max-h-300 { max-height: 300px; }
.max-h-350 { max-height: 350px; }
.scroll-max-300 { max-height: 300px; overflow-y: auto; }
.scroll-max-350 { max-height: 350px; overflow-y: auto; }
.scroll-max-400 { max-height: 400px; overflow-y: auto; }
.scroll-max-220 { max-height: 220px; overflow-y: auto; }
.mud-icon-root.mud-icon-4rem { font-size: 4rem; }
.mud-icon-root.mud-icon-3-5rem { font-size: 3.5rem; }
.qr-img-responsive { max-width: 260px; width: 100%; height: auto; }
.qr-img-fluid { max-width: 100%; height: auto; max-height: 300px; }
.flex-1-min-0 { flex: 1; min-width: 0; }
.text-pre-wrap { white-space: pre-wrap; }
.word-break-all { word-break: break-all; }
.font-mono-pre { font-family: monospace; white-space: pre-wrap; }
.font-mono-pre-all { font-family: monospace; white-space: pre-wrap; word-break: break-all; }
.font-mono-sm { font-family: monospace; font-size: 0.875rem; }
.font-mono-courier { font-family: 'Courier New', monospace; white-space: pre-wrap; word-break: break-all; }
.list-pl-16 { padding-left: 16px; }
.border-divider { border: 1px solid var(--hav-line); }

.panel-info-bg { background-color: color-mix(in srgb, var(--hav-info) 20%, var(--hav-panel)); }
.panel-success-bg { background-color: color-mix(in srgb, var(--hav-success) 20%, var(--hav-panel)); }
.panel-info-accent { background-color: color-mix(in srgb, var(--hav-info) 20%, var(--hav-panel)); border-left: 4px solid var(--hav-info); }
.panel-success-accent { background-color: color-mix(in srgb, var(--hav-success) 20%, var(--hav-panel)); border-left: 4px solid var(--hav-success); }
.bg-primary-tint { background: color-mix(in srgb, var(--hav-accent) 10%, transparent); }
.bg-success-tint { background-color: color-mix(in srgb, var(--hav-success) 10%, transparent); border: 1px solid var(--hav-success); }

/* .hav-section / MudPaper tint/accent overrides -- keep the blueprint .hav-section base in havto-blueprint.css,
   but allow these utility classes to override the default surface and border on a section. */
.hav-section.bg-surface-grey, .mud-paper.bg-surface-grey { background-color: var(--hav-surface-raised); }
.hav-section.bg-surface-default, .mud-paper.bg-surface-default { background-color: var(--hav-ground); }
.hav-section.bg-primary-tint, .mud-paper.bg-primary-tint { background: color-mix(in srgb, var(--hav-accent) 10%, transparent) !important; border: 1px solid var(--hav-accent) !important; }
.hav-section.bg-success-tint, .mud-paper.bg-success-tint { background-color: color-mix(in srgb, var(--hav-success) 10%, transparent) !important; border: 1px solid var(--hav-success) !important; }
.hav-section.panel-info-bg, .mud-paper.panel-info-bg { background-color: color-mix(in srgb, var(--hav-info) 20%, var(--hav-panel)) !important; }
.hav-section.panel-success-bg, .mud-paper.panel-success-bg { background-color: color-mix(in srgb, var(--hav-success) 20%, var(--hav-panel)) !important; }
.hav-section.panel-info-accent, .mud-paper.panel-info-accent { background-color: color-mix(in srgb, var(--hav-info) 20%, var(--hav-panel)) !important; border-left: 4px solid var(--hav-info) !important; }
.hav-section.panel-success-accent, .mud-paper.panel-success-accent { background-color: color-mix(in srgb, var(--hav-success) 20%, var(--hav-panel)) !important; border-left: 4px solid var(--hav-success) !important; }
.hav-section.info-accent-border, .mud-paper.info-accent-border { border-left: 4px solid var(--hav-info) !important; }

.hav-section.border-primary, .mud-paper.border-primary { border: 2px solid var(--hav-accent) !important; }

.table-col-50 { width: 50px; }
.table-col-60 { width: 60px; }
.table-col-120 { width: 120px; }
.table-col-140 { width: 140px; }
.table-col-150 { width: 150px; }
.text-truncate-200 { max-width: 200px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.text-clamp-2 { min-height: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.cursor-help-underline { text-decoration: underline dotted; cursor: help; }
.display-none { display: none; }
.opacity-30 { opacity: 0.3; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.bulk-action-card { cursor: pointer; transition: background-color 0.2s ease; }
.export-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 520px) { .export-format-grid { grid-template-columns: 1fr; } }
.export-option-card { cursor: pointer; height: 100%; position: relative; }
/* The .hav-app .mud-paper-outlined normalizer (0,4,0 + !important) pins outlined-paper
   borders/background; these selectors must outrank it to show selection. */
.hav-app .mud-paper.mud-paper-outlined.export-option-card:hover:not(.export-option-card--selected) { border-color: var(--hav-accent) !important; }
.export-option-card:focus-visible { outline: 2px solid var(--hav-accent); outline-offset: 2px; }
.hav-app .mud-paper.mud-paper-outlined.export-option-card.export-option-card--selected {
    border-color: var(--hav-accent) !important;
    box-shadow: inset 0 0 0 1px var(--hav-accent);
    background: color-mix(in srgb, var(--hav-accent) 8%, var(--hav-panel)) !important;
}
.export-option-card__check { position: absolute; top: 10px; right: 10px; color: var(--hav-accent); }
.password-meter-bar { height: 6px; border-radius: 0; }
.progress-h-4 { height: 4px; }
.notification-panel-min { min-width: 320px; padding: 4px 12px; }
.notification-panel-full { width: 100%; min-width: 0; }
.notification-list-full { width: 100%; }
.object-fit-cover { object-fit: cover; }
.img-evidence-preview { max-width: 100%; max-height: 180px; }
.w-full { width: 100%; }
.font-weight-semibold-conditional { font-weight: 600; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-italic { font-style: italic; }
.text-italic-error { font-style: italic; color: var(--hav-error-text); }
.text-italic-warning { font-style: italic; color: var(--hav-warning-text); }
.text-italic-secondary { font-style: italic; color: var(--hav-text-muted); }
.text-italic-info { font-style: italic; color: var(--hav-info-text); }
.chip-compact { font-size: 0.75rem; padding: 4px 8px; }
.chip-height-auto { height: auto; }
.min-w-100 { min-width: 100px; }
.min-w-50 { min-width: 50px; }
.w-150 { width: 150px; }
.side-panel-scroll { overflow-y: auto; }
.release-notes-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.evidence-drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.hidden-file-input { display: none; }
.iframe-embed { width: 100%; height: 900px; border: none; display: block; }
.font-size-065 { font-size: 0.65rem; }

.qr-code-surface {
    /* QR codes need a light canvas for reliable scanning in any theme */
    background: #ffffff;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--hav-accent);
}

.btn-primary {
    color: var(--hav-on-accent);
    background-color: var(--hav-accent);
    border-color: var(--hav-accent-strong);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    outline: 2px solid var(--hav-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--hav-success);
}

.invalid {
    outline: 1px solid var(--hav-error);
}

.validation-message {
    color: var(--hav-error);
    font-size: 0.875rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIFpNMjYzLjU3NiA4Ni4wNTQ3QzI2MS4wNDkgODYuMDU0NyAyNTkuNzg2IDg3LjMwMDUgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--hav-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--hav-on-error);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

body #blazor-error-ui {
    background: color-mix(in srgb, var(--hav-warning) 20%, var(--hav-panel));
    border-top: 1px solid var(--hav-warning);
    bottom: 0;
    box-shadow: none;
    color: var(--hav-text);
    display: none;
    font-size: 0.875rem;
    left: 0;
    padding: 0.75rem 3rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

    body #blazor-error-ui .reload {
        color: var(--hav-accent);
        font-weight: 600;
        margin-left: 0.5rem;
        text-decoration: underline;
    }

    body #blazor-error-ui .dismiss {
        background: transparent;
        border: none;
        color: var(--hav-text-muted);
        cursor: pointer;
        font-size: 1.25rem;
        line-height: 1;
        padding: 0.25rem 0.5rem;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }

    body #blazor-error-ui .dismiss:hover {
        color: var(--hav-text);
    }

/* ===== ESSENTIAL AI ANIMATIONS ===== */

/* AI icon pulse animation - subtle and smooth */
.ai-icon-pulse {
    animation: aiIconPulse 2s ease-in-out infinite;
}

@keyframes aiIconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* AI avatar -- flat design, no glow */
.ai-avatar-glow {
    box-shadow: none;
}

/* Welcome section shimmer effect */
.welcome-header {
    position: relative;
    overflow: hidden;
}

    .welcome-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
        animation: shimmerWelcome 3s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes shimmerWelcome {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* AI thinking animation for loading states */
.ai-thinking-animation {
    animation: aiThinking 2s ease-in-out infinite;
}

@keyframes aiThinking {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Streaming text glow effect */
.streaming-text {
    animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Loading shimmer for various elements */
.loading-shimmer {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ===== FLOATING ACTION BUTTONS ===== */

/* AI Help Button and Feedback Button - consistent simple styling */
.ai-help-button,
.feedback-button {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInUp 0.5s ease-out;
}

    .ai-help-button:hover,
    .feedback-button:hover {
        opacity: 0.85;
    }

/* Button animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* ===== SHARED ANIMATIONS ===== */
/* Blazor CSS isolation does NOT scope @keyframes - they compile as global names.
   Define canonical versions here; remove per-file duplicates to prevent collisions. */

/* Validation error shake - used across form panels */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* Generic opacity pulse - loading indicators, badges */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* 360deg spin - loading spinners */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Fade in with upward slide (10px) - cards, panels, list items */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alias: identical to fadeInUp - kept for backward compatibility */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in with larger upward slide (20px) - page sections, headers */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Skeleton loading shimmer */
@keyframes loading {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ===== SHARED AUTH PAGE ANIMATIONS ===== */
/* Used by RegisterConfirmation + ConfirmEmail - must live here
   because Blazor CSS isolation does NOT scope @keyframes names. */

/* Card entrance with slight scale */
@keyframes slideInUpBrand {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Floating bob effect for icons */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Success celebration pop */
@keyframes celebration {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1.1);
    }
}

/* Elastic bounce-in for checkmarks */
@keyframes bounceIn {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.3) rotate(-90deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Subtle brightness glow for gradient text */
@keyframes titleGlow {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.1);
    }
}

/* Scale-in fade for sections */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Gentle pulsing scale for active step indicators */
@keyframes currentPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Respect reduced-motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ai-icon-pulse,
    .ai-avatar-glow,
    .welcome-header::before,
    .ai-thinking-animation,
    .streaming-text,
    .loading-shimmer,
    .ai-help-button,
    .feedback-button {
        animation: none !important;
    }
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .ai-help-button {
        bottom: 70px;
        right: 16px;
        transform: scale(0.9);
    }

    .feedback-button {
        bottom: 16px;
        right: 16px;
        transform: scale(0.9);
    }

        .ai-help-button:hover,
        .feedback-button:hover {
            opacity: 0.85;
        }
}

/* ===== AI CHAT SPECIFIC ENHANCEMENTS ===== */

/* Enhanced AI chat input styling */
.ai-chat-input-container {
    border-top: 1px solid var(--hav-line);
    background-color: var(--hav-panel);
}

/* Custom scrollbar for chat messages */
.chat-messages-container::-webkit-scrollbar {
    width: 6px;
}

.chat-messages-container::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages-container::-webkit-scrollbar-thumb {
    background: var(--hav-text-muted);
    border-radius: 0;
}

    .chat-messages-container::-webkit-scrollbar-thumb:hover {
        background: var(--hav-surface-raised);
    }

/* ===== DIGITAL SIGNATURE THEMING ===== */

/* Responsive signature pad styling - fills available width */
.signature-pad-responsive {
    width: 100%;
    display: block;
    margin: 0;
}

/* Signature pad canvas - responsive with no width restrictions */
.signature-pad-responsive canvas {
    width: 100%;
    height: auto;
    display: block;
    cursor: crosshair;
    touch-action: none; /* Prevent scrolling on touch devices */
    border-radius: 0;
}

/* Signature pad focus state - prominent visual feedback */
.signature-pad-responsive:focus-within canvas {
    outline: 2px solid var(--hav-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .signature-pad-responsive canvas {
        min-height: 220px; /* Touch-friendly size on mobile */
    }
}

/* Tablet and up - larger signature area */
@media (min-width: 769px) {
    .signature-pad-responsive canvas {
        min-height: 280px; /* Comfortable size for desktop */
    }
}

/* Large desktop - even more space */
@media (min-width: 1200px) {
    .signature-pad-responsive canvas {
        min-height: 320px; /* Generous signing area */
    }
}

/* WCAG 2.4.1 - skip link visible on keyboard focus (Pack K) */
.skip-to-main {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    padding: 0.75rem 1rem;
    background: var(--hav-accent-strong);
    color: var(--hav-on-accent);
    text-decoration: none;
    border-radius: 0;
}

.skip-to-main:focus {
    left: 0.5rem;
    top: 0.5rem;
    width: auto;
    height: auto;
}
.w-fit { width: fit-content; }
.max-w-200 { max-width: 200px; }
.w-90px { width: 90px; }
.qr-code-200 { width: 200px; height: 200px; }
.bg-success-subtle { background-color: color-mix(in srgb, var(--hav-success) 8%, transparent); }
.border-primary { border: 2px solid var(--hav-accent); }
.compliance-module-card { border: 1px solid var(--hav-line); height: 100%; }
.policy-card-surface { border: 1px solid var(--hav-line); }
.attachment-drop-zone { min-height: 150px; border: 2px dashed var(--hav-accent); position: relative; }
.attachment-drop-inner { height: 150px; }
.campaign-slide-h-200 { height: 200px; }
.icon-color-info { color: var(--hav-info); }
.icon-color-success { color: var(--hav-success); }
.ai-help-fab { position: fixed; bottom: 80px; right: 20px; z-index: 1000; }
.nav-module-tier-disabled { opacity: 0.55; }
.nav-module-tier-disabled .mud-nav-link.mud-disabled { cursor: not-allowed; }

/* Side menu layout: ensure the menu body is a flex column so the footer is pushed
   to the bottom and the menu fills the drawer even when the nav list is short. */
.side-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.side-menu-footer {
    margin-top: auto !important;
}

/* Side menu count badges: in-flow at row end (MudBadge defaults to absolute overlay) */
.havto-side-menu .mud-navmenu .mud-nav-link:has(.mud-badge-root) {
    display: flex;
    align-items: center;
}

.havto-side-menu .mud-navmenu .mud-nav-link:has(.mud-badge-root) .mud-nav-link-text {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    gap: 0.375rem;
    min-width: 0;
}

.havto-side-menu .mud-navmenu .mud-nav-link .mud-badge-root {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.havto-side-menu .mud-navmenu .mud-nav-link .mud-badge-root .mud-badge-wrapper {
    position: static;
    width: auto;
    height: auto;
    pointer-events: auto;
}

.havto-side-menu .mud-navmenu .mud-nav-link .mud-badge-root .mud-badge {
    position: static;
}
.hierarchy-label { font-weight: 500; font-size: 0.75rem; }
.live-dot-success { width: 8px; height: 8px; border-radius: 50%; background-color: var(--hav-success); }
.help-amate-gradient { background: var(--havto-brand-gradient); }
.help-amate-gradient .help-amate-text { color: var(--hav-on-accent); }
.auth-brand-logo { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.auth-brand-logo-primary { background: var(--havto-brand-gradient); }
.auth-brand-logo-warning { background: linear-gradient(135deg, var(--hav-warning) 0%, color-mix(in srgb, var(--hav-warning) 80%, black) 100%); }
.auth-brand-logo-primary .auth-brand-letter, .auth-brand-logo-warning .auth-brand-letter { color: var(--hav-on-accent); font-weight: bold; }
.register-icon-ring { position: relative; padding: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.register-icon-stack { position: relative; width: 100%; height: 100%; }
.register-check-badge { position: absolute; top: -8px; right: -8px; padding: 4px; border-radius: 50%; }
.confirm-email-stack { position: relative; width: 80px; height: 80px; }
.confirm-email-stack-plain { width: 80px; height: 80px; }
.template-measure-selected {
    border: 2px solid var(--hav-accent);
    background-color: color-mix(in srgb, var(--hav-accent) 8%, transparent);
}
.template-measure-selectable { cursor: pointer; }
.max-w-800 { max-width: 800px; }
.drawer-footer-pad { padding: 16px; }
.drawer-body-pad { max-width: 100%; padding: 24px; }
.mobile-redirect-muted { color: var(--hav-text-muted); font-size: 14px; }
.address-suggest-panel { position: relative; z-index: 1000; }
.qr-reader-host { width: 100%; min-height: 300px; border-radius: 0; overflow: hidden; background: #000000; }

/* QR scanner dialog / narrow panels - prevent empty horizontal scroll */
.qr-barcode-scanner {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
.qr-barcode-scanner__or {
    width: 100%;
    max-width: 100%;
}
.qr-barcode-scanner__video {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.qr-barcode-scanner__video video,
.qr-barcode-scanner__video canvas,
.qr-barcode-scanner__video img {
    max-width: 100%;
    height: auto;
}
.qr-scanner-dialog-content {
    overflow-x: hidden;
    max-width: 100%;
}
.qr-scanner-dialog-content .qr-scanner-dialog-grid {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}
.checklist-template-list { max-height: 200px; overflow: auto; }
.role-accent-card { border-left: 4px solid var(--role-accent, var(--hav-accent)); min-height: 280px; }
.role-accent-border { border-left: 4px solid var(--role-accent, var(--hav-accent)); }
.campaign-slide-text { color: var(--campaign-text, inherit); }
.campaign-slide-text-muted { color: var(--campaign-text, inherit); opacity: 0.9; }
.campaign-deco-icon {
    color: var(--campaign-text, inherit);
    opacity: 0.3;
    font-size: 120px;
    position: absolute;
    right: 20px;
    pointer-events: none;
}

.mud-alert .mud-alert-message {
    width: 100%;
}

.havto-text-alert .mud-alert-message {
    align-self: center;
}

.havto-alert-inline-action {
    text-transform: none;
    font-weight: inherit;
    vertical-align: baseline;
    min-height: unset;
    line-height: inherit;
}

/* Session unlock dialog - MudBlazor blurry backdrop (DialogOptions.BackgroundClass). */
.session-unlock-blur-backdrop {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.session-inactivity-countdown {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* MudTabs: full-width baseline; active slider sits on top */
.mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-content {
    border-bottom: 1px solid var(--hav-line);
}

.mud-tabs:not(.mud-tabs-vertical) .mud-tab-slider.mud-tab-slider-horizontal {
    z-index: 1;
}

/* Landing auth uses pill-style tabs without a baseline strip */
.landing-auth-panel .auth-tabs.mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-content {
    border-bottom: none;
}

/* Command palette search bar wrapper (controls the outer width; MudAutocomplete renders inside a child component) */
.custom-search-bar-wrapper {
    width: 130px;
    max-width: 320px;
    min-width: 0;
    flex: none !important;
    transition: width 0.2s ease;
}

    .custom-search-bar-wrapper:hover,
    .custom-search-bar-wrapper:focus-within {
        width: 320px;
        max-width: 320px;
    }

.custom-search-bar-wrapper > .custom-search-bar {
    min-width: 0;
}

.custom-search-bar {
    width: 100%;
    max-width: 320px;
    height: 42px;
    background-color: var(--hav-surface-raised);
    color: var(--hav-text);
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.custom-search-bar .mud-input-adornment-start {
    padding-left: 0.5rem;
    margin-right: 0;
    margin-inline-end: 0;
}

.custom-search-bar .mud-input-root-adorned-start {
    padding-left: 0.25rem !important;
}

    .custom-search-bar .mud-input-underline::before,
    .custom-search-bar .mud-input-underline::after,
    .custom-search-bar .mud-input-outlined-border {
        display: none;
    }

    .custom-search-bar .mud-input {
        height: 42px;
        width: 100%;
        min-width: 0;
    }

    .custom-search-bar input {
        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    }

    .custom-search-bar input::placeholder {
        color: var(--hav-text-muted);
        opacity: 1;
    }

/* MudBlazor docs-style command palette autocomplete dropdown (MudPopover is portaled) */
.custom-search-popover {
    margin-top: 2px;
    border-radius: 0;
    overflow: hidden;
    min-width: 320px !important;
    max-width: 320px !important;
    width: 320px !important;
}

/* Highlight the keyboard-focused / auto-selected first item like MudBlazor docs search */
.custom-search-popover .mud-list-item.mud-selected-item,
.custom-search-popover .mud-list-item:focus-visible {
    background-color: var(--hav-surface-raised);
    border-left: 3px solid var(--hav-accent);
}

.command-palette-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.command-palette-autocomplete-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.command-palette-autocomplete-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:has(.landing-page) .mud-main-content { padding: 0; overflow: hidden; }

/* ========================================
 MUDBLAZOR LANDING PAGE STYLES
 Fully leveraging MudBlazor theming and components
======================================== */

/* ========================================
 CONTAINER & GRID LAYOUT
======================================== */
.landing-container {
 height: 100vh ; width: 100%; overflow: hidden; }

.landing-grid {
 height: 100vh ; margin: 0 ; }

 .landing-grid > .mud-grid-item {
 height: 100vh; }

/* ========================================
 LEFT PANEL - BRAND & FEATURES
======================================== */
.left-panel {
 background: var(--havto-landing-panel-gradient); color: var(--havto-landing-text-on-dark); display: flex ; flex-direction: column; overflow: hidden; /* no independent scroll - content designed to fit */
 height: 100vh ; }

 /* MudStack must fill the column so MudSpacer pushes footer nav down */
 .left-panel > .mud-stack {
 flex: 1 1 auto; min-height: 0; width: 100%; }

/* Brand */
.brand-icon {
 color: var(--havto-landing-text-on-dark); font-size: 2rem; }

.brand-name {
 color: var(--havto-landing-text-on-dark); font-weight: 600; font-size: 1.125rem; }

.brand-highlight {
 color: var(--havto-landing-highlight); }

.brand-title {
 color: var(--havto-landing-text-on-dark); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }

.brand-lead {
 color: var(--havto-landing-text-muted-on-dark); font-size: clamp(0.9rem, 1.25vw, 1.05rem); line-height: 1.5; }

.left-panel .mud-typography-caption {
 color: var(--havto-landing-caption-on-dark); }

.bullet-text {
 color: var(--havto-landing-text-subtle-on-dark); }

.bullet-text b {
 color: var(--havto-landing-text-on-dark); }

/* Compliance alert on dark gradient */
.compliance-alert {
 border-color: var(--havto-landing-overlay-border) ; background: var(--havto-landing-overlay-surface) ; }

.compliance-alert-text {
 color: var(--havto-landing-text-on-dark) ; }

/* ISO chips on dark gradient */
.badge-chip {
 border-color: var(--havto-landing-overlay-border-strong) ; color: var(--havto-landing-text-on-dark) ; }

/* Footer Navigation */
.footer-navigation .footer-nav-button {
 color: var(--havto-landing-text-soft-on-dark); text-transform: none; }

 .footer-navigation .footer-nav-button:hover {
 color: var(--havto-landing-text-on-dark); background: var(--havto-landing-hover-surface); }

/* ========================================
 RIGHT PANEL - AUTHENTICATION
======================================== */
.right-panel {
 background: var(--hav-surface-raised); display: flex ; flex-direction: column; box-shadow: none; height: 100vh ; overflow: hidden; /* scroll lives inside tab panels on desktop */
 min-height: 0; }

 .right-panel > .landing-auth-panel {
 flex: 1 1 auto; min-height: 0; }

/* MudPaper auth column - min-height:0 lets MudTabs flex child scroll */
.landing-auth-panel {
 display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* Theme toggle is in MudTabs <Header /> (mud-tabs-header-after), same flex row as tab labels */
.landing-auth-panel .mud-tabs-header-after {
 display: flex; align-items: center; flex-shrink: 0; align-self: center; padding-inline-start: var(--mud-spacing-2); }

/* Let MudTabs fill the column; panel area scrolls when needed */
.auth-tabs-stretch {
 flex: 1; min-height: 0; display: flex; flex-direction: column; }

 .landing-auth-panel .auth-tabs-stretch.mud-tabs {
 flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

 .landing-auth-panel .auth-tabs-stretch .mud-tabs-tabbar-wrapper {
 flex-shrink: 0; }

 .landing-auth-panel .auth-tabs-stretch .mud-tabs-panels {
 flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

 .landing-auth-panel .auth-tab-panels {
 flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-padding-bottom: var(--mud-spacing-4); display: flex; flex-direction: column; }

 .landing-auth-panel .auth-tab-panels::-webkit-scrollbar {
 width: 8px; }

 .landing-auth-panel .auth-tab-panels::-webkit-scrollbar-track {
 background: var(--hav-surface-raised); }

 .landing-auth-panel .auth-tab-panels::-webkit-scrollbar-thumb {
 background: var(--hav-line); border-radius: 0; }

 .landing-auth-panel .auth-tab-panels::-webkit-scrollbar-thumb:hover {
 background: var(--hav-text-muted); }

.auth-tab-panel-stack {
 padding-top: 0; padding-bottom: var(--mud-spacing-4); }

.landing-auth-panel .auth-tabs.mud-tabs > .mud-tabs-tabbar {
 background: var(--hav-surface-raised); border-radius: 0; padding: 4px; }

.landing-auth-panel .auth-tabs.mud-tabs .mud-tab {
 border-radius: 0; transition: background-color 0.2s ease, color 0.2s ease; text-transform: none; font-weight: 500; }

 .landing-auth-panel .auth-tabs.mud-tabs .mud-tab.mud-tab-active {
 background: var(--hav-panel); color: var(--hav-accent); }

 .landing-auth-panel .auth-tabs.mud-tabs .mud-tab:not(.mud-tab-active) {
 color: var(--hav-text-muted); }

 .landing-auth-panel .auth-tabs.mud-tabs .mud-tab:not(.mud-tab-active):hover {
 background: color-mix(in srgb, var(--hav-accent) 8%, transparent); }

/* Auth Headers */
.auth-title {
 color: var(--hav-text); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

.auth-subtitle {
 color: var(--hav-text-muted); line-height: 1.5; font-size: clamp(0.875rem, 1.5vw, 1rem); }

/* Auth Form Elements */
 .auth-submit-button:hover:not(:disabled) {
 opacity: 0.9; }

/* MudTextField Overrides */
.right-panel .mud-input-outlined .mud-input-slot {
 padding: var(--mud-spacing-2) var(--mud-spacing-3); min-height: 48px; }

.right-panel .mud-input-outlined.mud-input-adorned-start .mud-input-slot {
 padding-left: var(--mud-spacing-2); }

/* Ensure form placeholders are visible in light mode */
.right-panel .mud-input-outlined input::placeholder {
 color: var(--hav-text-muted); opacity: 0.7; }

/* Ensure checkbox labels are visible */
.right-panel .mud-checkbox .mud-typography {
 color: var(--hav-text); }

/* Ensure links are visible in auth panel */
.right-panel .mud-link {
 color: var(--hav-accent); }

/* ========================================
 RESPONSIVE DESIGN
======================================== */

/* Large Desktop (optimize spacing) */
@media (min-width: 1920px){
 .landing-auth-panel .auth-tabs.mud-tabs {
 max-width: 600px; margin: 0 auto; width: 100%; }

 .left-panel > .mud-stack {
 max-width: 1200px; margin: 0 auto; width: 100%; }
}

/* Desktop */
@media (min-width: 1280px) and (max-width: 1919px){
 .left-panel > .mud-stack {
 padding: var(--mud-spacing-6); }

 .landing-auth-panel {
 padding-left: var(--mud-spacing-5); padding-right: var(--mud-spacing-5); }
}

/* Tablet */
@media (max-width: 1280px) and (min-width: 961px){
 body:has(.landing-page) .mud-main-content {
 overflow: visible; }

 .landing-container,
 .landing-grid {
 height: auto ; min-height: 100vh ; overflow: visible; }

 .landing-grid > .mud-grid-item {
 height: auto ; }

 .left-panel,
 .right-panel {
 height: auto ; overflow: visible ; }

 .landing-auth-panel {
 padding: var(--mud-spacing-4); min-height: 50vh; }

 .left-panel {
 padding: var(--mud-spacing-4); min-height: 50vh; }

 .brand-title {
 font-size: 2rem; }

 .auth-title {
 font-size: 1.375rem; }
}

/* Mobile */
@media (max-width: 960px){
 body:has(.landing-page) .mud-main-content {
 overflow: visible; }

 .landing-container,
 .landing-grid {
 height: auto ; min-height: 100vh ; overflow: visible; }

 .landing-grid {
 flex-direction: column; }

 .landing-grid > .mud-grid-item {
 height: auto ; }

 .left-panel {
 min-height: 50vh; height: auto ; max-height: none ; padding: var(--mud-spacing-4); overflow: visible; }

 .right-panel {
 box-shadow: none; height: auto ; max-height: none ; overflow: visible; }

 .landing-auth-panel {
 padding: var(--mud-spacing-3); height: auto; min-height: 50vh; overflow: visible; }

 /* Natural page scroll on small viewports */
 .landing-auth-panel .auth-tabs-stretch.mud-tabs {
 overflow: visible; }

 .landing-auth-panel .auth-tabs-stretch .mud-tabs-panels {
 overflow: visible; }

 .landing-auth-panel .auth-tab-panels {
 overflow: visible; }

 .footer-navigation {
 flex-wrap: wrap; justify-content: center; }

 .brand-title {
 font-size: 2rem; }

 .auth-title {
 font-size: 1.25rem; }
}

/* Small Mobile */
@media (max-width: 600px){
 .left-panel {
 min-height: 40vh; padding: var(--mud-spacing-3); }

 .landing-auth-panel {
 padding: var(--mud-spacing-2); }

 .brand-title {
 font-size: 1.75rem; }

 .auth-title {
 font-size: 1.125rem; }

 .footer-navigation {
 flex-direction: column; align-items: center; gap: var(--mud-spacing-2); }
}

/* ========================================
 ACCESSIBILITY
======================================== */
.auth-submit-button:focus,
.footer-nav-button:focus {
 outline: 3px solid color-mix(in srgb, var(--hav-accent) 50%, transparent); outline-offset: 2px; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms ; animation-iteration-count: 1 ; transition-duration: 0.01ms ; }
}

/* ========================================
 PRINT STYLES
======================================== */
@media print{
 .landing-grid {
 flex-direction: column; min-height: 0; height: auto; }

 .landing-auth-panel .mud-tabs-header-after,
 .footer-navigation {
 display: none; }

 .left-panel {
 background: white; color: black; height: auto; max-height: none; }

 .right-panel {
 height: auto; max-height: none; }
}

/* Shared utility for a row with a hairline bottom border in lists/panels */
.hav-list-row { border-bottom: 1px solid var(--hav-line); }

/* ========================================
 CROSS-TAB SESSION END (S11.66 / HAV2306)
 A session change that arrived from another tab replaces the surface. The stale
 view stays mounted behind this layer (inert on the shell) so the reader can
 see what they were doing; the plate names the cause and the one route forward.
======================================== */
.hav-session-end {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    /* Ground veil: the stale view remains readable behind, never interactable. */
    background: color-mix(in srgb, var(--hav-ground) 72%, transparent);
}

.hav-session-end__card {
    max-width: 460px;
    margin: 0;
    text-align: center;
}

.hav-session-end__card:focus {
    outline: none;
}

.hav-session-end__drafts {
    color: var(--hav-text-label);
}

/* Marketing figure imagery: real product screenshots filling blueprint figure slots */
.marketing-figure-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}