/* Shared visual language from the approved blue navigation reference. */
@media screen {
    :root, html[data-theme="azul"] {
        --ux-navy-950: #0b3653;
        --ux-navy-900: #0d4061;
        --ux-blue-700: #205c7d;
        --ux-blue-600: #286d90;
        --ux-blue-500: #7cc9e7;
        --ux-blue-100: #dfeff7;
        --ux-blue-50: #f1f7fb;
        --ux-page: #eef3f7;
        --ux-line: #d5e2eb;
        --ux-focus: #3685ac;
        --ux-radius-sm: 8px;
        --ux-radius: 10px;
        --ux-radius-lg: 14px;
    }
    html { --reference-accent: #8fd1eb; }
    body.app-portal .portal-topbar,
    body.app-portal .portal-workspace-tabs,
    body.app-portal .portal-sidebar {
        background: var(--ux-navy-900);
        color: #f5faff;
        border-color: rgba(166, 211, 234, .22);
    }
    body.app-portal .portal-topbar h1,
    body.app-portal .portal-user strong { color: #f5faff; }
    body.app-portal .portal-topbar .portal-eyebrow,
    body.app-portal .portal-user small { color: #b9d9e9; }
    body.app-portal .portal-topbar :is(.portal-menu-toggle, .portal-user > a, .portal-user form button),
    body.app-portal .portal-topbar :is(.portal-user, .theme-picker) {
        background: rgba(166, 211, 234, .1);
        border: 1px solid rgba(166, 211, 234, .24);
        color: #f5faff;
    }
    body.app-portal .portal-topbar .theme-picker select { color: #f5faff; }
    .theme-picker select option { color: #142234; background: #fff; }
    body.app-portal .portal-topbar i,
    body.app-portal .portal-sidebar .portal-nav a i { color: var(--reference-accent); }
    body.app-portal .portal-sidebar .portal-nav a {
        color: #f5faff;
        border: 1px solid transparent;
        border-radius: 8px;
        box-shadow: none;
    }
    body.app-portal .portal-sidebar .portal-nav a:is(:hover, :focus-visible, .is-active) {
        background: rgba(166, 211, 234, .12);
        border-color: rgba(166, 211, 234, .26);
    }
    body.app-portal .portal-sidebar .portal-nav a.is-active {
        box-shadow: inset 0 -2px var(--reference-accent);
    }
    body.app-portal .portal-workspace-tab {
        background: transparent;
        color: #f5faff;
        border: 1px solid transparent;
        border-radius: 8px;
    }
    body.app-portal .portal-workspace-tab:is(:hover, .is-active) {
        background: rgba(166, 211, 234, .12);
        border-color: rgba(166, 211, 234, .26);
    }
    body.app-portal .portal-workspace-tab.is-active {
        background: var(--ux-blue-700);
        border-color: var(--reference-accent);
        color: #fff;
    }
    body.app-portal .portal-workspace-tab.is-active::after {
        background: var(--reference-accent);
        height: 2px;
    }
    body.app-portal .portal-workspace-tab :is(.portal-workspace-tab-select, .portal-workspace-tab-close) {
        color: #f5faff;
        background: transparent;
    }
    body.app-portal .portal-workspace-tab .portal-workspace-tab-select i {
        background: transparent;
        color: var(--reference-accent);
        box-shadow: none;
    }
    html body .btn-primary {
        background: var(--ux-navy-900);
        border-color: var(--ux-blue-700);
        color: #fff;
        border-radius: 8px;
        box-shadow: inset 0 -2px rgba(143, 209, 235, .65);
    }
    html body .btn-primary:is(:hover, :focus-visible) {
        background: var(--ux-blue-700);
        border-color: var(--ux-blue-600);
        color: #fff;
    }
    html body .btn-primary:is(:disabled, .disabled) { opacity: .55; box-shadow: none; }
    html body :is(.form-control, .form-select) {
        border-radius: 8px;
        border-color: var(--ux-line);
    }
    html body :is(.form-control, .form-select):focus {
        border-color: var(--ux-focus);
        box-shadow: 0 0 0 3px rgba(54, 133, 172, .16);
    }
    html body :is(.table, table.table) thead th {
        background: var(--ux-navy-900);
        color: #f5faff;
        border-color: var(--ux-blue-700);
    }
    html body :is(.nav-tabs, .nav-pills) .nav-link {
        border-radius: 8px;
        color: var(--ux-navy-900);
    }
    html body :is(.nav-tabs, .nav-pills) .nav-link.active {
        background: var(--ux-navy-900);
        border-color: var(--ux-blue-700);
        color: #fff;
        box-shadow: inset 0 -2px var(--reference-accent);
    }
}