@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-500.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-600.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-700.ttf') format('truetype');
}

/* Hostport design tokens — blue brand palette as global dark theme */

:root {
    /* Brand */

--hp-primary: #6e92c0;
--hp-primary-dark: #5579a7;
--hp-primary-light: #88a8cf;
--hp-primary-accent: #a6bfe0;
--hp-primary-muted: rgba(110, 146, 192, 0.18);

/* Backgrounds */

--hp-bg-deepest: #131922;
--hp-bg-dark: #18212c;
--hp-bg-base: #202c3a;

--hp-surface: #263444;
--hp-surface-raised: #2d3e50;
--hp-surface-overlay: #34495d;
--hp-surface-highlight: #3e566d;
/* Translucent rather than flat: it backs table headers that sit on several different
   surface steps, so it must tint whatever is underneath instead of picking one. */
--hp-surface-muted: rgba(110, 146, 192, 0.06);

/* Borders */

--hp-border: rgba(110, 146, 192, 0.28);
--hp-border-subtle: rgba(110, 146, 192, 0.14);

/* Text */

--hp-text: #edf2f8;
--hp-text-secondary: #d6e0ec;
--hp-text-muted: #b8c7d8;
--hp-text-disabled: #8fa2b8;

/* Semantic */

--hp-success: #63c27d;
--hp-warning: #f7c25c;
--hp-danger: #f37c84;
--hp-danger-light: #f7a3a9;
--hp-info: var(--hp-primary-light);

/* Terminal */

--hp-terminal-bg: #161a20;
--hp-terminal-text: #d4d4d4;
--hp-terminal-muted: #8d94a0;
--hp-terminal-border: rgba(110, 146, 192, 0.35);
--hp-terminal-error: var(--hp-danger);
--hp-terminal-warn: var(--hp-warning);
--hp-terminal-info: var(--hp-primary-accent);

/* Gradients */

--hp-gradient-brand:
    linear-gradient(
        145deg,
        #18212c 0%,
        #2d3e50 45%,
        #202c3a 100%
    );

--hp-gradient-primary:
    linear-gradient(
        135deg,
        #6e92c0 0%,
        #5579a7 100%
    );

--hp-gradient-header:
    linear-gradient(
        135deg,
        #88a8cf 0%,
        #6e92c0 55%,
        #5579a7 100%
    );

--hp-gradient-content:
    radial-gradient(
        ellipse 90% 55% at 100% -5%,
        rgba(110,146,192,.15) 0%,
        transparent 58%
    ),
    radial-gradient(
        ellipse 70% 45% at -5% 105%,
        rgba(52,73,93,.35) 0%,
        transparent 52%
    ),
    linear-gradient(
        168deg,
        #18212c 0%,
        #202c3a 42%,
        #131922 100%
    );

--hp-gradient-shell:
    radial-gradient(
        ellipse 120% 80% at 50% -20%,
        rgba(110,146,192,.08) 0%,
        transparent 55%
    ),
    var(--hp-gradient-content);

/* Effects */

--hp-glow: rgba(110,146,192,.38);
--hp-glow-subtle: rgba(110,146,192,.20);

--hp-shadow:
    0 8px 32px rgba(5,10,18,.45),
    0 0 0 1px rgba(110,146,192,.10);

--hp-shadow-sm:
    0 2px 8px rgba(5,10,18,.30),
    0 0 0 1px rgba(110,146,192,.08);

--hp-shadow-md:
    0 4px 16px rgba(5,10,18,.38),
    0 0 0 1px rgba(110,146,192,.09);

--hp-focus-ring:
    0 0 0 3px rgba(110,146,192,.32);

/* Radius
   These were referenced 59 times across Hostport and Lib/Ui while being defined only in
   Cupo — so 52 declarations computed to border-radius: 0, including .hp-card. Every card
   built on the shared primitive rendered square next to every raw RadzenCard at 4px.
   Never reintroduce a var(--hp-radius*, <literal>) fallback: the seven that existed
   disagreed with each other (8/10/12/16px), which is what kept the gap invisible. */

--hp-radius-xs: 4px;
--hp-radius-sm: 8px;
--hp-radius: 10px;
--hp-radius-lg: 16px;
--hp-radius-pill: 999px;
--hp-radius-round: 50%;

/* Stated, not inherited: Radzen's own default is 4px, and binding it here is what keeps
   RadzenCard and HpCard visually indistinguishable. */
--rz-border-radius: var(--hp-radius-xs);

/* Type scale — fixed rem, never clamp()/vw.
   Radzen's own heading scale is fluid, so before this bridge existed the portal ran two
   scales at once: a RadzenText H6 (clamp(1rem, 1.667vw, 1.25rem)) rendered 25% LARGER on a
   wide screen than the HpSection <h2> above it (1rem), inverting the hierarchy as the
   browser widened and contradicting the DOM order. Restating Radzen's tokens on this scale
   is the only fix that does not touch 678 RadzenText call sites. */

--hp-font-3xs: 0.625rem;
--hp-font-2xs: 0.75rem;
--hp-font-xs: 0.8125rem;
--hp-font-sm: 0.875rem;
--hp-font-md: 1rem;
--hp-font-lg: 1.125rem;
--hp-font-xl: 1.25rem;
--hp-font-2xl: 1.5rem;
--hp-font-3xl: 1.75rem;
--hp-font-4xl: 2rem;
--hp-font-5xl: 2.25rem;
--hp-font-6xl: 2.5rem;

/* Radzen bridge. Body/subtitle/caption/overline are restated, not changed — Radzen's
   values are already identical to this scale, so those (the large majority of call sites)
   move by exactly 0px. Only the six heading steps actually change. H4 lands on the same
   1.75rem as HpPageHeader so the RadzenText page titles that still exist match the
   design-system header instead of out-sizing it. */
--rz-text-h1-font-size: var(--hp-font-6xl);
--rz-text-h2-font-size: var(--hp-font-5xl);
--rz-text-h3-font-size: var(--hp-font-4xl);
--rz-text-h4-font-size: var(--hp-font-3xl);
--rz-text-h5-font-size: var(--hp-font-xl);
--rz-text-h6-font-size: var(--hp-font-md);
--rz-text-body1-font-size: var(--hp-font-md);
--rz-text-body2-font-size: var(--hp-font-sm);
--rz-text-subtitle1-font-size: var(--hp-font-md);
--rz-text-subtitle2-font-size: var(--hp-font-sm);
--rz-text-caption-font-size: var(--hp-font-2xs);
--rz-text-overline-font-size: var(--hp-font-3xs);

/* Shared Hp* component tokens (Lib/Ui, _content/Ui/hp-ui.css) — Hostport values */

/* Content width cap for the authenticated shell (app.css .main-content). */
--hp-page-max: 1440px;

--hp-page-header-gap-bottom: 1.5rem;
--hp-page-header-title-size: var(--hp-font-3xl);
--hp-page-header-subtitle-size: 0.95rem;

--hp-card-bg: linear-gradient(165deg, var(--hp-surface-raised) 0%, var(--hp-surface) 100%);
--hp-card-header-padding: 1.25rem 1.5rem;
--hp-card-header-bg: var(--hp-gradient-header);
--hp-card-header-font-size: var(--hp-font-md);
--hp-card-header-border: none;

--hp-stat-card-bg: linear-gradient(165deg, var(--hp-surface-raised) 0%, var(--hp-surface) 100%);
--hp-stat-value-size: var(--hp-font-2xl);
--hp-stat-label-weight: 400;
--hp-stat-label-transform: none;
--hp-stat-label-letter-spacing: normal;
--hp-stat-label-margin: 0 0 0.25rem;

--hp-empty-state-padding: 2.5rem 1.5rem;
--hp-empty-state-icon-size: 3.5rem;
--hp-empty-state-title-size: var(--hp-font-lg);
--hp-empty-state-description-size: 0.9375rem;
--hp-empty-state-actions-margin-top: 0.5rem;

--hp-section-margin-bottom: 1.5rem;
--hp-section-title-size: var(--hp-font-md);

    --hp-brand-font: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --hp-logo-filter: brightness(1.06) saturate(1.15) hue-rotate(10deg);

    --rz-primary: var(--hp-primary);
    --rz-primary-light: var(--hp-primary-light);
    --rz-primary-lighter: var(--hp-primary-muted);
    --rz-primary-dark: var(--hp-primary-dark);
    --rz-primary-darker: #3a555b;
    --rz-body-background-color: var(--hp-bg-dark);
    --rz-base-background-color: var(--hp-surface);

    --rz-base-50: #e8f0f2;
    --rz-base-100: #e8f0f2;
    --rz-base-200: #dce8eb;
    --rz-base-300: #d4e3e6;
    --rz-base-400: #c5d8dc;
    --rz-base-500: #a8bcc1;
    --rz-base-600: #9fb4b9;
    --rz-base-700: var(--hp-surface-highlight);
    --rz-base-800: var(--hp-surface-raised);
    --rz-base-900: var(--hp-surface);
    --rz-base-dark: var(--hp-bg-base);
    --rz-base-darker: var(--hp-bg-dark);

    --rz-text-color: var(--hp-text);
    --rz-text-title-color: var(--hp-text);
    --rz-text-secondary-color: var(--hp-text-secondary);
    --rz-text-tertiary-color: var(--hp-text-muted);
    --rz-text-disabled-color: var(--hp-text-disabled);
    --rz-text-contrast-color: var(--hp-text);

    --rz-input-value-color: var(--hp-text);
    --rz-input-placeholder-color: var(--hp-text-muted);
    --rz-input-disabled-color: var(--hp-text-disabled);
    --rz-form-field-label-color: var(--hp-text-secondary);
    --rz-form-field-label-focus-color: var(--hp-primary-accent);

    --rz-grid-header-color: var(--hp-text-secondary);
    --rz-grid-cell-color: var(--hp-text);
    --rz-grid-footer-color: var(--hp-text-muted);

    --rz-breadcrumb-item-color: var(--hp-text-muted);
    --rz-breadcrumb-item-active-color: var(--hp-text);
    --rz-breadcrumb-item-hover-color: var(--hp-text-secondary);

    --rz-tabs-tab-color: var(--hp-text-muted);
    --rz-tabs-tab-hover-color: var(--hp-text);
    --rz-tabs-tab-selected-color: var(--hp-text);
    --rz-tabs-tab-focus-color: var(--hp-text);

    --rz-panel-menu-item-color: var(--hp-text-secondary);
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-hover-color: var(--hp-text);
    --rz-panel-menu-item-hover-background-color: var(--hp-primary-muted);
    --rz-panel-menu-item-active-color: var(--hp-primary-accent);
    --rz-panel-menu-item-active-background-color: var(--hp-primary-muted);
    --rz-panel-menu-item-2nd-level-color: var(--hp-text-muted);
    --rz-panel-menu-item-2nd-level-background-color: transparent;
    --rz-panel-menu-item-2nd-level-hover-color: var(--hp-text);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--hp-primary-muted);
    --rz-panel-menu-item-2nd-level-active-color: var(--hp-primary-accent);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--hp-primary-muted);

    --rz-listbox-item-color: var(--hp-text-secondary);

    --rz-menu-item-color: var(--hp-text-secondary);
    --rz-menu-item-icon-color: var(--hp-text-muted);
    --rz-menu-top-item-color: var(--hp-text-secondary);

    --rz-pager-summary-color: var(--hp-text-muted);
    --rz-pager-numeric-button-color: var(--hp-text-secondary);
    --rz-steps-title-color: var(--hp-text-muted);
    --rz-steps-number-color: var(--hp-text-secondary);

    --hp-alert-surface: var(--hp-surface-raised);
    --hp-alert-info-bg: rgba(89, 128, 135, 0.22);
    --hp-alert-success-bg: rgba(93, 191, 116, 0.16);
    --hp-alert-warning-bg: rgba(250, 193, 82, 0.16);
    --hp-alert-danger-bg: rgba(249, 119, 127, 0.16);

    --rz-success: var(--hp-success);
    --rz-success-lighter: var(--hp-alert-success-bg);
    --rz-warning: var(--hp-warning);
    --rz-warning-lighter: var(--hp-alert-warning-bg);
    --rz-danger: var(--hp-danger);
    --rz-danger-lighter: var(--hp-alert-danger-bg);
    --rz-info: var(--hp-info);
    --rz-info-lighter: var(--hp-alert-info-bg);

    --rz-on-success-lighter: var(--hp-text);
    --rz-on-warning-lighter: var(--hp-text);
    --rz-on-danger-lighter: var(--hp-text);
    --rz-on-info-lighter: var(--hp-text);
    --rz-on-primary-lighter: var(--hp-text);

    --rz-alert-background-color: var(--hp-alert-surface);
    --rz-alert-color: var(--hp-text);
    --rz-alert-title-color: var(--hp-text);
    --rz-alert-icon-color: var(--hp-text-secondary);

    --rz-dialog-background-color: var(--hp-surface-raised);
    --rz-dialog-title-background-color: var(--hp-surface);
    --rz-dialog-title-color: var(--hp-text);
    --rz-dialog-close-color: var(--hp-text-muted);
    --rz-dialog-close-hover-color: var(--hp-text);
    --rz-dialog-mask-background-color: rgba(8, 18, 20, 0.72);
    --rz-dialog-shadow: var(--hp-shadow);
    --rz-dialog-border-radius: var(--hp-radius);

    --rz-notification-shadow: var(--hp-shadow-sm);
    --rz-notification-border-radius: var(--hp-radius-sm);
    --rz-notification-success-background-color: var(--hp-surface-raised);
    --rz-notification-success-color: var(--hp-text);
    --rz-notification-success-icon-color: var(--hp-success);
    --rz-notification-warning-background-color: var(--hp-surface-raised);
    --rz-notification-warning-color: var(--hp-text);
    --rz-notification-warning-icon-color: var(--hp-warning);
    --rz-notification-error-background-color: var(--hp-surface-raised);
    --rz-notification-error-color: var(--hp-text);
    --rz-notification-error-icon-color: var(--hp-danger);
    --rz-notification-info-background-color: var(--hp-surface-raised);
    --rz-notification-info-color: var(--hp-text);
    --rz-notification-info-icon-color: var(--hp-primary-accent);

    --rz-form-error-color: var(--hp-danger);
    --rz-validator-background-color: var(--hp-surface-overlay);
    --rz-validator-color: var(--hp-text);

    --rz-tooltip-background-color: var(--hp-surface-overlay);
    --rz-tooltip-color: var(--hp-text);

    --rz-outline-color: var(--hp-primary-accent);
    --rz-link-color: var(--hp-primary-accent);
    --rz-focus-outline-color: var(--hp-primary);
}

html,
body {
    background: var(--hp-bg-deepest);
    color: var(--hp-text);
    font-family: var(--hp-brand-font);
}

.hostport-layout.rz-layout {
    background: var(--hp-gradient-shell);
    min-height: 100vh;
}

.hostport-header.rz-header {
    background: var(--hp-gradient-brand);
    border-bottom: 1px solid var(--hp-border);
    color: var(--hp-text);
    box-shadow: var(--hp-shadow-sm);
}

.hp-app-header.rz-header > .rz-stack,
.hp-app-header.rz-header > div {
    width: 100%;
}

.hostport-header .rz-label {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    color: var(--hp-text);
}

.hostport-header .rz-menu-item {
    color: var(--hp-text-secondary);
}

.hostport-header .rz-menu-item:hover,
.hostport-header .rz-menu-item.rz-state-focused {
    color: var(--hp-text);
    background: rgba(255, 255, 255, 0.08);
}

.hostport-main.rz-body {
    background: transparent;
}

.hp-site-footer {
    padding: 1rem 1.5rem 1.25rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hp-site-footer-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.hp-site-footer-nav .rz-link {
    color: var(--hp-text-muted, #94a3b8);
}

.hp-site-footer-nav .rz-link:hover {
    color: var(--hp-text, #f8fafc);
}

.hp-site-footer-sep {
    color: var(--hp-text-muted, #64748b);
    user-select: none;
}

.main-content {
    position: relative;
    isolation: isolate;
    /* The decorative glows below are deliberately positioned outside this box (right: -80px,
       left: -60px). Without containment that leaks ~64px of horizontal scroll onto
       .hostport-main, and because the gradient is transparent past 68% of its radius, ~51px
       of it is blank — a scrollbar with nothing at the end of it. auth.css:49 contains the
       same decoration with overflow: hidden; this shell was missing the equivalent.
       clip, not hidden: it is the only non-visible value that pairs with overflow-y: visible,
       so it does not create a scroll container and does not break sticky descendants. */
    overflow-x: clip;
}

.main-content::before,
.main-content::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.main-content::before {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, var(--hp-glow) 0%, transparent 68%);
    top: -100px;
    right: -80px;
    opacity: 0.28;
}

.main-content::after {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, var(--hp-glow-subtle) 0%, transparent 70%);
    bottom: 10%;
    left: -60px;
    opacity: 0.35;
}

.main-content > * {
    position: relative;
    z-index: 1;
}

.text-muted,
.hp-text-muted {
    color: var(--hp-text-muted) !important;
}

.hp-text-secondary {
    color: var(--hp-text-secondary);
}

/* App shell header */

.hp-app-header.rz-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    overflow: visible;
    background: var(--hp-bg-deepest);
    border-bottom: 1px solid var(--hp-border);
    box-shadow:
        0 1px 0 rgba(89, 128, 135, 0.1),
        0 4px 16px rgba(8, 18, 20, 0.22);
    padding: 0;
    min-height: auto;
}

.hp-app-header.rz-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--hp-primary) 40%, var(--hp-primary-accent) 60%, transparent 100%);
    opacity: 0.45;
    pointer-events: none;
}

.hp-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 1.25rem;
    box-sizing: border-box;
    overflow: visible;
}

.hp-header-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.hp-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--hp-text);
}

.hp-brand-logo {
    display: block;
    height: 2.5rem;
    width: auto;
    filter: var(--hp-logo-filter);
}

.hp-header-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.hp-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.hp-mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.35rem;
    border: 1px solid var(--hp-border-subtle);
    border-radius: var(--hp-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.hp-mobile-nav-bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--hp-text-secondary);
    border-radius: 1px;
}

.hp-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 1024px) {
    .hp-header-inner {
        flex-wrap: wrap;
        padding: 0.5rem 1rem;
    }

    .hp-mobile-nav-toggle {
        display: flex;
    }

    .hp-header-nav {
        display: none;
        position: fixed;
        top: 3.75rem;
        left: 0.75rem;
        right: 0.75rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.75rem;
        background: var(--hp-surface);
        border: 1px solid var(--hp-border);
        border-radius: var(--hp-radius);
        box-shadow: var(--hp-shadow);
        z-index: 1101;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }

    .hp-header-nav.hp-header-nav-open {
        display: flex;
    }

    .hp-header-actions {
        order: 2;
        margin-left: auto;
    }

    .hp-header-start {
        flex: 1;
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .hp-header-action-label,
    .hp-header-action-chevron {
        display: none;
    }

    .hp-header-inner {
        gap: 0.5rem;
    }
}

/* Radzen + global brand enforcement (#598087) */

.rz-button.rz-button-primary,
.rz-button.rz-primary {
    background: var(--hp-gradient-primary);
    border-color: var(--hp-primary);
    color: var(--hp-text);
}

.rz-button.rz-button-primary:not(:disabled):not(.rz-state-disabled):hover,
.rz-button.rz-primary:not(:disabled):not(.rz-state-disabled):hover {
    background: linear-gradient(135deg, var(--hp-primary-light) 0%, var(--hp-primary) 100%);
    border-color: var(--hp-primary-light);
}

.rz-button.rz-button-primary:not(:disabled):not(.rz-state-disabled):active,
.rz-button.rz-primary:not(:disabled):not(.rz-state-disabled):active {
    background: var(--hp-primary-dark);
    border-color: var(--hp-primary-dark);
}

.rz-button.rz-button-secondary,
.rz-button.rz-secondary {
    border-color: var(--hp-border);
    color: var(--hp-text-secondary);
}

.rz-button.rz-button-secondary:not(:disabled):not(.rz-state-disabled):hover,
.rz-button.rz-secondary:not(:disabled):not(.rz-state-disabled):hover {
    border-color: var(--hp-primary);
    color: var(--hp-primary-accent);
}

.rz-link,
a.rz-link {
    color: var(--hp-primary-accent);
}

.rz-link:hover,
a.rz-link:hover {
    color: var(--hp-primary-light);
}

.rz-steps-item.rz-state-highlight .rz-steps-number {
    background: var(--hp-gradient-primary);
    border-color: var(--hp-primary);
    color: var(--hp-text);
}

.rz-steps-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
}

.rz-steps-item.rz-state-highlight .rz-steps-title {
    color: var(--hp-primary-accent);
}

.rz-steps-item.rz-state-complete .rz-steps-number {
    background: var(--hp-primary-dark);
    border-color: var(--hp-primary-dark);
}

.rz-progressbar-value {
    background: var(--hp-gradient-primary);
}

.rz-progressbar-circular-value {
    stroke: var(--hp-primary);
}

.rz-checkbox-checked .rz-checkbox-box,
.rz-radiobutton-checked .rz-radiobutton-circle {
    background: var(--hp-primary);
    border-color: var(--hp-primary);
}

.rz-switch-checked .rz-switch-circle {
    background: var(--hp-primary);
}

.rz-slider-handle,
.rz-slider-range {
    background: var(--hp-primary);
}

.rz-tabview-nav li.rz-tabview-selected a {
    border-bottom-color: var(--hp-primary);
    color: var(--hp-primary-accent);
}

.rz-panel-menu-item-link.rz-state-active {
    background: var(--hp-primary-muted);
    color: var(--hp-primary-accent);
}

.rz-listbox .rz-listbox-item.rz-state-highlight {
    background: var(--hp-primary-muted);
    color: var(--hp-primary-accent);
}

.rz-datepicker-calendar td .rz-state-active,
.rz-datepicker-calendar td .rz-state-highlight {
    background: var(--hp-primary);
    color: var(--hp-text);
}

.rz-chkbox-box.rz-state-active,
.rz-chkbox-box.rz-state-focused {
    border-color: var(--hp-primary);
}

*:focus-visible {
    outline: 2px solid var(--hp-primary-accent);
    outline-offset: 2px;
}

.rz-card,
.rz-dialog,
.rz-panel {
    background-color: var(--hp-surface);
    border-color: var(--hp-border-subtle);
}

.rz-datatable,
.rz-grid-table {
    background-color: var(--hp-surface);
}


.hostport-layout .rz-data-grid-data tr:not(.rz-expanded-row-content):hover > td,
.hostport-layout .rz-datatable-data tr:not(.rz-expanded-row-content):hover > td {
    background-color: var(--hp-primary-muted) !important;
}

.hostport-layout .rz-data-grid-data tr.rz-state-highlight:not(.rz-expanded-row-content) > td,
.hostport-layout .rz-datatable-data tr.rz-state-highlight:not(.rz-expanded-row-content) > td {
    background-color: rgba(89, 128, 135, 0.32) !important;
    color: var(--hp-primary-accent);
}

.hostport-layout .rz-text-body1,
.hostport-layout .rz-text-body2,
.hostport-layout .rz-text-caption,
.hostport-layout .rz-text-overline,
.hostport-layout .rz-text-subtitle1,
.hostport-layout .rz-text-subtitle2 {
    color: var(--hp-text);
}

.hostport-layout .rz-form-field-label,
.hostport-layout .rz-label,
.hostport-layout .rz-chkbox-label,
.hostport-layout .rz-radiobutton-label {
    color: var(--hp-text-secondary);
}

.rz-form-field-content > .rz-dropdown > .rz-dropdown-panel,
.rz-form-field-content > .rz-multiselect > .rz-multiselect-panel {
    display: none !important;
}

.hostport-layout .rz-inputtext,
.hostport-layout .rz-textarea,
.hostport-layout .rz-numeric,
.hostport-layout .rz-colorpicker,
.hostport-layout .rz-autocomplete-input {
    color: var(--hp-text);
}

.hostport-layout .rz-inputtext::placeholder,
.hostport-layout .rz-textarea::placeholder {
    color: var(--hp-text-muted);
    opacity: 1;
}

.hostport-layout .rz-data-grid-data td,
.hostport-layout .rz-data-grid-data .rz-cell-data,
.hostport-layout .rz-datatable-data td,
.hostport-layout .rz-datatable-data .rz-cell-data {
    color: var(--hp-text);
}

.hostport-layout .rz-grid-table thead th,
.hostport-layout .rz-data-grid-header .rz-column-title,
.hostport-layout .rz-datatable-thead th {
    color: var(--hp-text-secondary);
}

.hostport-layout .rz-breadcrumb-item,
.hostport-layout .rz-breadcrumb-item a {
    color: var(--hp-text-muted);
}

.hostport-layout .rz-breadcrumb-item.rz-state-active,
.hostport-layout .rz-breadcrumb-item.rz-state-active a {
    color: var(--hp-text);
}

.hostport-layout .rz-tabview-nav a {
    color: var(--hp-text-muted);
}

.hostport-layout .rz-tabview-nav li.rz-tabview-selected a {
    color: var(--hp-text);
}

.hostport-layout .rz-listbox .rz-listbox-item {
    color: var(--hp-text-secondary);
}

.hostport-layout .rz-listbox .rz-listbox-item:hover {
    color: var(--hp-text);
}

.hostport-layout .rz-panel-menu .rz-navigation-item-text,
.hostport-layout .rz-panel-menu .rz-navigation-item-link {
    color: var(--hp-text-secondary);
}

.hostport-layout .rz-panel-menu .rz-navigation-item-link:hover {
    color: var(--hp-text);
}

.hostport-layout .rz-panel-menu .rz-navigation-item-link.rz-state-active {
    color: var(--hp-primary-accent);
}

.hostport-layout .rz-pager-summary,
.hostport-layout .rz-pager-pages .rz-pager-page {
    color: var(--hp-text-muted);
}

.hostport-layout .rz-steps-title {
    color: var(--hp-text-muted);
}

.hostport-layout .rz-steps-item.rz-state-highlight .rz-steps-title {
    color: var(--hp-text);
}

.hostport-layout .rz-fieldset-legend-text {
    color: var(--hp-text-secondary);
}

.hostport-layout .rz-dialog-title,
.hostport-layout .rz-sidebar-title {
    color: var(--hp-text);
}

.hostport-layout .rz-notification-content,
.hostport-layout .rz-alert-content {
    color: var(--hp-text);
}

/* Alerts, dialogs, notifications — global (Radzen portals to body) */

.rz-alert {
    border: 1px solid var(--hp-border-subtle);
}

.rz-alert .rz-alert-title {
    color: var(--hp-text);
    font-weight: 600;
}

.rz-alert .rz-alert-message,
.rz-alert .rz-alert-content {
    color: var(--hp-text-secondary);
}

.rz-alert .rz-alert-icon {
    color: var(--hp-text-secondary);
}

.rz-alert.rz-info,
.rz-alert.rz-info.rz-shade-lighter,
.rz-alert.rz-info.rz-shade-light {
    background: var(--hp-alert-info-bg);
    border-color: rgba(89, 128, 135, 0.42);
    border-inline-start: 3px solid var(--hp-primary-accent);
    color: var(--hp-text);
}

.rz-alert.rz-info .rz-alert-title,
.rz-alert.rz-info .rz-alert-icon {
    color: var(--hp-primary-accent);
}

.rz-alert.rz-info .rz-alert-message,
.rz-alert.rz-info .rz-alert-content {
    color: var(--hp-text);
}

.rz-alert.rz-success,
.rz-alert.rz-success.rz-shade-lighter,
.rz-alert.rz-success.rz-shade-light {
    background: var(--hp-alert-success-bg);
    border-color: rgba(93, 191, 116, 0.35);
    border-inline-start: 3px solid var(--hp-success);
    color: var(--hp-text);
}

.rz-alert.rz-success .rz-alert-title,
.rz-alert.rz-success .rz-alert-icon {
    color: var(--hp-success);
}

.rz-alert.rz-success .rz-alert-message,
.rz-alert.rz-success .rz-alert-content {
    color: var(--hp-text);
}

.rz-alert.rz-warning,
.rz-alert.rz-warning.rz-shade-lighter,
.rz-alert.rz-warning.rz-shade-light {
    background: var(--hp-alert-warning-bg);
    border-color: rgba(250, 193, 82, 0.35);
    border-inline-start: 3px solid var(--hp-warning);
    color: var(--hp-text);
}

.rz-alert.rz-warning .rz-alert-title,
.rz-alert.rz-warning .rz-alert-icon {
    color: var(--hp-warning);
}

.rz-alert.rz-warning .rz-alert-message,
.rz-alert.rz-warning .rz-alert-content {
    color: var(--hp-text);
}

.rz-alert.rz-danger,
.rz-alert.rz-error,
.rz-alert.rz-danger.rz-shade-lighter,
.rz-alert.rz-error.rz-shade-lighter,
.rz-alert.rz-danger.rz-shade-light,
.rz-alert.rz-error.rz-shade-light {
    background: var(--hp-alert-danger-bg);
    border-color: rgba(249, 119, 127, 0.35);
    border-inline-start: 3px solid var(--hp-danger);
    color: var(--hp-text);
}

.rz-alert.rz-danger .rz-alert-title,
.rz-alert.rz-error .rz-alert-title,
.rz-alert.rz-danger .rz-alert-icon,
.rz-alert.rz-error .rz-alert-icon {
    color: var(--hp-danger);
}

.rz-alert.rz-danger .rz-alert-message,
.rz-alert.rz-error .rz-alert-message,
.rz-alert.rz-danger .rz-alert-content,
.rz-alert.rz-error .rz-alert-content {
    color: var(--hp-text);
}

.rz-alert.rz-light,
.rz-alert.rz-base {
    background: var(--hp-surface);
    border-color: var(--hp-border);
    color: var(--hp-text);
}

.rz-alert.rz-light .rz-alert-title,
.rz-alert.rz-light .rz-alert-message,
.rz-alert.rz-light .rz-alert-content,
.rz-alert.rz-light .rz-alert-icon {
    color: var(--hp-text);
}

.rz-notification {
    inset-block-start: auto;
    inset-block-end: 1rem;
}

.rz-notification-item {
    border: 1px solid var(--hp-border-subtle);
    border-radius: var(--hp-radius-sm);
    box-shadow: var(--hp-shadow-sm);
}

.rz-notification-success .rz-notification-item {
    border-inline-start: 3px solid var(--hp-success);
}

.rz-notification-warn .rz-notification-item {
    border-inline-start: 3px solid var(--hp-warning);
}

.rz-notification-error .rz-notification-item {
    border-inline-start: 3px solid var(--hp-danger);
}

.rz-notification-info .rz-notification-item {
    border-inline-start: 3px solid var(--hp-primary-accent);
}

.rz-notification-content {
    color: var(--hp-text);
}

.rz-notification-close {
    color: var(--hp-text-muted);
}

.rz-notification-close:hover {
    color: var(--hp-text);
}

.rz-dialog,
.rz-dialog-side {
    background: var(--hp-surface-raised);
    border: 1px solid var(--hp-border);
    color: var(--hp-text);
}

.rz-dialog-titlebar,
.rz-dialog-side-titlebar {
    background: var(--hp-surface);
    border-block-end: 1px solid var(--hp-border-subtle);
}

.rz-dialog-title,
.rz-dialog-side-title {
    color: var(--hp-text);
}

.rz-dialog-content,
.rz-dialog-side-content {
    color: var(--hp-text);
    background: var(--hp-surface-raised);
}

.rz-dialog-content .rz-text-body1,
.rz-dialog-content .rz-text-body2,
.rz-dialog-content .rz-text-caption,
.rz-dialog-content .rz-label,
.rz-dialog-content .rz-form-field-label {
    color: var(--hp-text-secondary);
}

.rz-dialog-content .rz-text-subtitle1,
.rz-dialog-content .rz-text-subtitle2,
.rz-dialog-content .rz-text-h6 {
    color: var(--hp-text);
}

.rz-dialog-mask {
    background-color: rgba(8, 18, 20, 0.72);
    opacity: 1;
}

.rz-dialog-confirm-message,
.rz-dialog-alert-message {
    color: var(--hp-text-secondary);
}

.rz-dialog-confirm .rz-button.rz-button-light,
.rz-dialog-alert .rz-button.rz-button-light {
    color: var(--hp-text-secondary);
    border-color: var(--hp-border);
    background: rgba(255, 255, 255, 0.04);
}

.rz-message-popup,
.rz-form-field-error,
.rz-validator {
    background: var(--hp-surface-overlay);
    color: var(--hp-text);
    border: 1px solid var(--hp-border);
}

.rz-form-field-error-message,
.rz-validator-text {
    color: var(--hp-danger);
}

.rz-tooltip {
    background: var(--hp-surface-overlay);
    color: var(--hp-text);
    border: 1px solid var(--hp-border);
}

.hp-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10001;
    padding: 0.75rem 1rem;
    border-radius: var(--hp-radius-sm);
    background: var(--hp-surface-raised);
    color: var(--hp-text);
    border: 1px solid var(--hp-border);
    font-weight: 600;
    text-decoration: none;
}

.hp-skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    overflow: visible;
}

@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;
    }
}