/* Load LAST, after Bootstrap, MudBlazor, scoped styles, and site.css.
   Edit these tokens for future branding changes. */
:root {
    --keyo-primary: #0d7d7e;
    --keyo-primary-rgb: 13, 125, 126;
    --keyo-primary-hover: #096364;
    --keyo-navy: #17324f;
    --keyo-navy-rgb: 23, 50, 79;
    --keyo-link: var(--keyo-primary);
    --keyo-focus: var(--keyo-primary);
    --keyo-surface: #ffffff;
    --keyo-background: #f5f8f7;
    --keyo-surface-tint: #edf6f5;
    --keyo-surface-hover: #dcefee;
    --keyo-border: #bed8d6;
    --keyo-muted: #6b7280;
    --keyo-on-primary: #ffffff;
    --keyo-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --keyo-radius: 8px;
    --keyo-intro-size: 1.25rem;
    --keyo-agent-photo-height: 150px;
    --keyo-hero-text: #ffffff;
    --keyo-nav-background: var(--keyo-navy);
    --keyo-nav-text: var(--keyo-on-primary);
    --keyo-nav-active: var(--keyo-primary);
    --keyo-nav-logo-width: 160px;
    --keyo-nav-logo-height: 80px;
    --keyo-nav-mission-size: 1rem;
    --keyo-header-radius: 12px;
    --keyo-card-radius: 14px;
    --keyo-success: #157347;
    --keyo-error: #b32121;
    --keyo-hero-background: linear-gradient(90deg, rgba(23,50,79,.88), rgba(13,125,126,.75)), url('/images/banners/happycouple2.jpg') center / cover;

    /* !important beats MudThemeProvider's generated :root variables,
       including when its style element is emitted after this stylesheet.
       Global scope also covers dialogs, snackbars and popover portals. */
    --mud-palette-primary: var(--keyo-primary) !important;
    --mud-palette-primary-rgb: var(--keyo-primary-rgb) !important;
    --mud-palette-primary-darken: var(--keyo-primary-hover) !important;
    --mud-palette-primary-lighten: var(--keyo-primary) !important;
    --mud-palette-primary-hover: rgba(var(--keyo-primary-rgb), .10) !important;
    --mud-palette-primary-text: var(--keyo-on-primary) !important;
    --mud-palette-secondary: var(--keyo-navy) !important;
    --mud-palette-secondary-rgb: var(--keyo-navy-rgb) !important;
    --mud-palette-secondary-text: var(--keyo-on-primary) !important;
    --mud-palette-secondary-darken: var(--keyo-navy) !important;
    --mud-palette-secondary-lighten: var(--keyo-navy) !important;
    --mud-palette-secondary-hover: rgba(var(--keyo-navy-rgb), .10) !important;
    --mud-palette-surface: var(--keyo-surface) !important;
    --mud-palette-background: var(--keyo-background) !important;
    --mud-palette-background-gray: var(--keyo-surface-tint) !important;
    --mud-palette-text-primary: var(--keyo-navy) !important;
    --mud-palette-text-secondary: var(--keyo-muted) !important;
    --mud-palette-divider: var(--keyo-border) !important;
    --mud-palette-lines-default: var(--keyo-border) !important;
    --mud-palette-table-lines: var(--keyo-border) !important;
    --mud-palette-appbar-background: var(--keyo-navy) !important;
    --mud-palette-appbar-text: var(--keyo-on-primary) !important;
    --mud-palette-drawer-background: var(--keyo-navy) !important;
    --mud-palette-drawer-text: var(--keyo-on-primary) !important;
    --mud-palette-drawer-icon: var(--keyo-on-primary) !important;
    --mud-typography-default-family: var(--keyo-font) !important;
    --mud-typography-body1-family: var(--keyo-font) !important;
    --mud-typography-body2-family: var(--keyo-font) !important;
    --mud-typography-button-family: var(--keyo-font) !important;
    --mud-typography-h1-family: var(--keyo-font) !important;
    --mud-typography-h2-family: var(--keyo-font) !important;
    --mud-typography-h3-family: var(--keyo-font) !important;
    --mud-typography-h4-family: var(--keyo-font) !important;
    --mud-typography-h5-family: var(--keyo-font) !important;
    --mud-typography-h6-family: var(--keyo-font) !important;
    --mud-default-borderradius: var(--keyo-radius) !important;
    --bs-body-font-family: var(--keyo-font);
    --bs-body-color: var(--keyo-navy);
    --bs-body-bg: var(--keyo-background);
    --bs-primary: var(--keyo-primary);
    --bs-primary-rgb: var(--keyo-primary-rgb);
    --bs-link-color: var(--keyo-link);
    --bs-link-hover-color: var(--keyo-primary-hover);
}

html, body { font-family: var(--keyo-font); color: var(--keyo-navy); background: var(--keyo-background); }
a, .btn-link { color: var(--keyo-link); }
.btn-primary, .hero .btn {
    color: var(--keyo-on-primary);
    background: var(--keyo-primary);
    border-color: var(--keyo-primary);
}
.btn-primary:hover, .btn-primary:active, .hero .btn:hover {
    color: var(--keyo-on-primary);
    background: var(--keyo-primary-hover);
    border-color: var(--keyo-primary-hover);
}
.btn-outline-primary { color: var(--keyo-primary); border-color: var(--keyo-primary); }
.btn-outline-primary:hover { color: var(--keyo-on-primary); background: var(--keyo-primary); }
.hero {
    background: var(--keyo-hero-background);
    color: var(--keyo-hero-text);
    font-family: var(--keyo-font);
    padding: 1.5rem;
    border-radius: var(--keyo-radius);
}
/* Explicit foregrounds also override typography utilities or saved rich-text
   colors that would otherwise make the mission unreadable on the banner. */
.hero .keyo-intro,
.hero .keyo-intro *,
.hero .hero__text {
    color: var(--keyo-hero-text) !important;
}
.hero .keyo-intro {
    min-width: 0;
    font-size: var(--keyo-intro-size);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.hero .keyo-mission {
    display: block;
    white-space: normal;
}
.hero .keyo-mission p:last-child { margin-bottom: 0; }
.hero .keyo-mission a { text-decoration: underline; }
.hero__logo { max-width: 100%; object-fit: contain; }
/* The thumbnail selector also supports the previously delivered layout. */
.hero img.keyo-agent-photo,
.hero img.img-thumbnail {
    display: block;
    height: var(--keyo-agent-photo-height);
    max-height: var(--keyo-agent-photo-height);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex: 0 0 auto;
    align-self: flex-start;
}
.hero > .container { flex-wrap: wrap; }
.app-footer { background: var(--keyo-navy); }
.keyo-field { color: var(--keyo-navy); background: var(--keyo-surface); }
.keyo-field {
    border: 1px solid var(--keyo-primary);
    border-radius: var(--keyo-radius);
}
.keyo-page-header {
    background: var(--keyo-primary);
    color: var(--keyo-on-primary);
    border-radius: var(--keyo-header-radius);
    font-family: var(--keyo-font);
}
.keyo-page-header h2 { color: inherit; }
.keyo-card { border-radius: var(--keyo-card-radius); }
.keyo-field:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid var(--keyo-focus); outline-offset: 3px;
}
.keyo-field.invalid { border-color: var(--keyo-error); }
.keyo-field.valid.modified:not([type=checkbox]) { border-color: var(--keyo-success); }
/* Primary actions remain distinguishable against the teal entity header. */
.entity-shell-header-actions .mud-button-filled-primary {
    background: var(--keyo-on-primary); color: var(--keyo-primary);
}
.entity-shell-header-actions .mud-button-outlined-primary {
    color: var(--keyo-on-primary); border-color: currentColor;
}
.entity-shell-header-actions .mud-button:disabled { opacity: .5; }
/* Theme ownership: override legacy component/scoped colors without changing
   their layout, permissions, tab selection or mobile menu visibility. */
.page > .sidebar {
    background: var(--keyo-nav-background) !important;
    color: var(--keyo-nav-text);
    font-family: var(--keyo-font);
}
.sidebar .keyo-nav-brand-row {
    /* Override fixed .top-row heights from legacy isolated layout CSS. */
    height: auto !important;
    min-height: 105px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: .75rem !important;
    background: var(--keyo-surface) !important;
    border-bottom: 1px solid var(--keyo-border);
}
.sidebar .keyo-nav-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.sidebar .keyo-nav-logo {
    display: block;
    width: var(--keyo-nav-logo-width);
    max-width: 100%;
    height: var(--keyo-nav-logo-height);
    max-height: var(--keyo-nav-logo-height);
    object-fit: contain;
}
.sidebar #app-nav {
    width: 100%;
    background: var(--keyo-nav-background);
    padding-top: .75rem;
    box-sizing: border-box;
}
.sidebar .keyo-nav-mission {
    max-width: 100%;
    margin-top: .5rem;
    font-family: var(--keyo-font);
    font-size: var(--keyo-nav-mission-size);
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--keyo-navy);
}
.sidebar .keyo-nav-mission:empty { display: none; }
.sidebar .keyo-nav-mission * {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
.sidebar .keyo-nav-mission > :first-child { margin-top: 0; }
.sidebar .keyo-nav-mission > :last-child { margin-bottom: 0; }
.sidebar #app-nav .nav-link {
    color: var(--keyo-nav-text) !important;
    background: transparent;
    font-family: var(--keyo-font);
    border-radius: var(--keyo-radius);
}
.sidebar #app-nav .nav-link:hover,
.sidebar #app-nav .nav-link:focus-visible {
    background: var(--keyo-primary-hover) !important;
}
.sidebar #app-nav .nav-link.active {
    background: var(--keyo-nav-active) !important;
    color: var(--keyo-on-primary) !important;
}
.sidebar #app-nav .nav-link:focus-visible {
    outline: 2px solid var(--keyo-on-primary);
    outline-offset: 2px;
}
.sidebar .navbar-toggler { background-color: var(--keyo-primary) !important; }
.entity-tabs-shell { font-family: var(--keyo-font); }
.entity-shell-header,
.entity-header,
.entity-section-header,
.entity-section-header.light {
    background: var(--keyo-primary) !important;
    color: var(--keyo-on-primary) !important;
    border-color: var(--keyo-primary-hover) !important;
    font-family: var(--keyo-font);
}
.entity-shell-header-title,
.entity-header-title,
.entity-header-subtitle,
.entity-shell-header-subtitle { color: var(--keyo-on-primary) !important; }
.entity-tabs-shell .nav-tabs { border-color: var(--keyo-border) !important; }
.entity-tabs-shell .nav-tabs .nav-link {
    color: var(--keyo-navy) !important;
    background: var(--keyo-surface-tint) !important;
    border-color: var(--keyo-border) !important;
    font-family: var(--keyo-font);
}
.entity-tabs-shell .nav-tabs .nav-link:hover {
    color: var(--keyo-navy) !important;
    background: var(--keyo-surface-hover) !important;
}
.entity-tabs-shell .nav-tabs .nav-link.active {
    color: var(--keyo-on-primary) !important;
    background: var(--keyo-primary) !important;
    border-color: var(--keyo-primary) !important;
}
.entity-mobile-selector { background: var(--keyo-surface-tint) !important; border-color: var(--keyo-border) !important; }
.entity-mobile-label { color: var(--keyo-navy) !important; }
.entity-mobile-dropdown { color: var(--keyo-navy) !important; background: var(--keyo-surface) !important; border-color: var(--keyo-primary) !important; }
@media (max-width: 640px) {
    .sidebar .keyo-nav-brand-row { min-height: 70px; }
    .sidebar .keyo-nav-logo { width: auto; max-height: 52px; }
}
@media (max-width: 991.98px) {
    .page > .sidebar { grid-column: 1; grid-row: 1; }
    .page > main { grid-column: 1; grid-row: 2; min-width: 0; }
}
@media (max-width: 575.98px) {
    .hero { padding: 1rem; }
    .hero__logo, .keyo-brand-image { height: auto; max-height: 150px; }
    .entity-shell-header-actions { flex-wrap: wrap; }
}