#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

:root {
    font-size: var(--rz-root-font-size);
    --rz-success-light: #baffaa;
    --rz-success-lighter: rgba(186,255,170,0.24);
    --rz-success-dark: #359108;
    --rz-success-darker: #154100;
    --rz-on-success-light: #154100;
    --rz-on-success-lighter: #baffaa;
    --rz-on-success-dark: #baffaa;
    --rz-on-success-darker: #baffaa;
    --rz-success: #c0ffaa;
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #45494f;
    --rz-base-50: #e0e0e9;
    --rz-base-100: #c4c9d0;
    --rz-base-200: #8f9399;
    --rz-base-300: #45494f;
    --rz-base-400: #383b3e;
    --rz-base-500: #34373b;
    --rz-base-600: #292c30;
    --rz-base-700: #1f2226;
    --rz-base-800: #1b1d20;
    --rz-base-900: #121518;
    --rz-base-light: #8f9399;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #121518;
    --rz-base-darker: #000000;
    --rz-primary: #94c1ff;
    --rz-primary-light: #bcd7ff;
    --rz-primary-lighter: rgba(148, 193, 255, 0.24);
    --rz-primary-dark: #37598b;
    --rz-primary-darker: #001f5d;
    --rz-secondary: #c2cbdc;
    --rz-secondary-light: #c2cbdc;
    --rz-secondary-lighter: rgba(144, 181, 255, 0.28);
    --rz-secondary-dark: #444b58;
    --rz-secondary-darker: #191f2b;
    --rz-info: #085786;
    --rz-info-light: #aadaff;
    --rz-info-lighter: rgba(170, 218, 255, 0.24);
    --rz-info-dark: #086791;
    --rz-info-darker: #002d41;
    --rz-warning: #e8e971;
    --rz-warning-light: #f9ffaa;
    --rz-warning-lighter: rgba(249, 255, 170, 0.24);
    --rz-warning-dark: #918908;
    --rz-warning-darker: #413d00;
    --rz-danger: #b3261e;
    --rz-danger-light: #ffb4aa;
    --rz-danger-lighter: rgba(255, 180, 170, 0.24);
    --rz-danger-dark: #91080a;
    --rz-danger-darker: #410001;
    --rz-on-base: #ffffff;
    --rz-on-base-light: #121518;
    --rz-on-base-lighter: #121518;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    --rz-on-primary: #001f5d;
    --rz-on-primary-light: #001f5d;
    --rz-on-primary-lighter: #bcd7ff;
    --rz-on-primary-dark: #bcd7ff;
    --rz-on-primary-darker: #bcd7ff;
    --rz-on-secondary: #191f2b;
    --rz-on-secondary-light: #191f2b;
    --rz-on-secondary-lighter: #c2cbdc;
    --rz-on-secondary-dark: #c2cbdc;
    --rz-on-secondary-darker: #c2cbdc;
    --rz-on-info: #ffffff;
    --rz-on-info-light: #002d41;
    --rz-on-info-lighter: #aadaff;
    --rz-on-info-dark: #aadaff;
    --rz-on-info-darker: #aadaff;
    --rz-on-warning: #121518;
    --rz-on-warning-light: #413d00;
    --rz-on-warning-lighter: #f9ffaa;
    --rz-on-warning-dark: #f9ffaa;
    --rz-on-warning-darker: #f9ffaa;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: #410001;
    --rz-on-danger-lighter: #ffb4aa;
    --rz-on-danger-dark: #ffb4aa;
    --rz-on-danger-darker: #ffb4aa;
    --rz-series-1: #3d71b8;
    --rz-series-2: #663db8;
    --rz-series-3: #b83dae;
    --rz-series-4: #b83d52;
    --rz-series-5: #b8843d;
    --rz-series-6: #8fb83d;
    --rz-series-7: #3db847;
    --rz-series-8: #3db8a3;
    --rz-series-9: #478ceb;
    --rz-series-10: #7d47eb;
    --rz-series-11: #eb47de;
    --rz-series-12: #eb4763;
    --rz-series-13: #eba647;
    --rz-series-14: #b5eb47;
    --rz-series-15: #47eb54;
    --rz-series-16: #47ebcf;
    --rz-series-17: #a3c6f5;
    --rz-series-18: #bea3f5;
    --rz-series-19: #f5a3ee;
    --rz-series-20: #f5a3b1;
    --rz-series-21: #f5d2a3;
    --rz-series-22: #daf5a3;
    --rz-series-23: #a3f5aa;
    --rz-series-24: #a3f5e7;
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

.rz-body {
    --rz-body-padding: 0;
}

a {
    color: var(--rz-link-color);
}

a:hover,
a:focus {
    color: var(--rz-link-hover-color);
}

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

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Full-width layout for wide routes (e.g. ONU Manager) */
.layout-content-wide {
    max-width: none !important;
    width: 100%;
}

.rz-body > .rz-row.layout-content-wide {
    max-width: none !important;
    width: 100% !important;
}

.rz-body > .rz-row.layout-content-wide > .rz-col-12 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* OnuManager reusable layout */
.onu-manager-page {
    width: 100%;
}

.onu-manager-filter-card {
    border: 1px solid var(--brand-divider);
}

.onu-manager-toolbar {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.onu-manager-toolbar .rz-button,
.onu-manager-toolbar .rz-toggle-button {
    border-radius: 4px !important;
}

.onu-grouping-selectbar {
    border-radius: 4px;
}

.onu-grouping-selectbar .rz-button {
    border-radius: 4px !important;
}

.onu-grouping-selectbar .rz-button[aria-label="CTO"] .rz-button-text {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.onu-grouping-selectbar .rz-button[aria-label="CTO"] .rz-button-text::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url("/img/onu-map/cto-0.svg") center / contain no-repeat;
}

.onu-grid-card {
    height: 100%;
}

.onu-manager-skeleton .rz-card {
    border: 1px solid var(--brand-divider);
}

.onu-manager-skeleton .onu-skel {
    background: var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    animation: onu-skel-pulse 1.5s ease-in-out infinite;
}

.onu-manager-skeleton .onu-skel-text {
    height: 1rem;
    border-radius: 2px;
}

@keyframes onu-skel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* ONU card styles are now scoped in OnuCard.razor.css */

/* Insight chart cards */
.chart-card {
    border: 1px solid var(--rz-base-200);
}

.chart-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem !important;
}

.chart-empty {
    padding: 2rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    font-size: 0.9rem;
}

/* =============================================================================
   LoginLayout - reset global do RadzenLayout/RadzenBody na tela de login
   (esses elementos sao gerados pelos componentes Radzen e nao recebem o
    atributo de CSS scope b-XXXX do LoginLayout.razor.css)
   ============================================================================= */
.rz-layout:has(> .rz-body.login-body) {
    display: block;
    grid-template-areas: none;
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 100dvh;
    margin: 0;
}

.rz-body.login-body {
    --login-ink: var(--brand-ink, #0A645A);
    --login-verde: var(--brand-verde, #00EBB0);
    --login-azul: var(--brand-azul, #00BEFF);
    --login-azul-claro: var(--brand-azul-claro, #00E6FF);
    position: relative;
    grid-area: auto;
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--login-ink);
    background-image:
        linear-gradient(color-mix(in srgb, var(--login-azul) 16%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--login-verde) 14%, transparent) 1px, transparent 1px),
        radial-gradient(ellipse 80% 60% at 12% 10%, color-mix(in srgb, var(--login-verde) 42%, transparent), transparent 58%),
        radial-gradient(ellipse 75% 55% at 88% 88%, color-mix(in srgb, var(--login-azul-claro) 36%, transparent), transparent 60%);
    background-size: 56px 56px, 56px 56px, auto, auto;
}

/* Cena e shell no site.css: ::deep do scoped NAO aplica position no proprio .fiber-scene */
.fiber-scene {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5.5rem 1.25rem 2rem;
    box-sizing: border-box;
}

.login-brand {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 2;
}

.login-brand__plate {
    background: var(--brand-ink, #0A645A);
    border: 1px solid color-mix(in srgb, var(--brand-teal, #28BEA5) 55%, transparent);
    border-radius: 14px;
    padding: 0.55rem 0.8rem;
    box-shadow: 0 10px 28px rgba(10, 100, 90, 0.28);
}

.login-brand__logo {
    display: block;
    width: clamp(140px, 18vw, 196px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(10, 100, 90, 0.45));
}

html:has(.rz-body.login-body),
body:has(.rz-body.login-body) {
    overflow-x: hidden;
    min-height: 100dvh;
    background-color: #0A645A;
}

@media (max-width: 480px) {
    .login-shell {
        padding: 4.6rem 1rem 1.25rem;
        align-items: flex-start;
    }

    .login-brand {
        top: 0.75rem;
        left: 0.75rem;
    }

    .login-brand__plate {
        padding: 0.4rem 0.55rem;
    }

    .login-brand__logo {
        width: 124px;
    }
}

/* =============================================================================
   OnuManager - abas principais (Provisionadas / Nao configuradas)
   Estilo "underline accent" moderno: icone bem dimensionado e alinhado ao
   rotulo (sem parecer elemento solto/duplicado) e destaque de marca no ativo.
   ============================================================================= */
.onu-manager-main-tabs > .rz-tabview-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--brand-divider);
    padding: 0;
    background: transparent;
}

.onu-manager-main-tabs > .rz-tabview-nav li {
    margin: 0;
    background: transparent;
    border: none;
}

.onu-manager-main-tabs > .rz-tabview-nav li > button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

/* Icone do tab: tamanho proporcional ao rotulo e alinhado (1em), em vez do
   24px default que destacava o glifo como se fosse texto solto. */
.onu-manager-main-tabs > .rz-tabview-nav li > button > .rz-tabview-icon {
    font-size: 1.15rem;
    width: auto;
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.18s ease;
}

.rz-tabview.onu-manager-main-tabs > .rz-tabview-nav li > button:hover {
    color: var(--rz-text-color) !important;
    background: var(--brand-hover) !important;
}

.rz-tabview.onu-manager-main-tabs > .rz-tabview-nav li.rz-tabview-selected > button {
    color: var(--brand-teal) !important;
    border-bottom-color: var(--brand-teal) !important;
    font-weight: 600;
    background: transparent !important;
}

.rz-tabview.onu-manager-main-tabs > .rz-tabview-nav li.rz-tabview-selected > button > .rz-tabview-title {
    color: var(--brand-teal) !important;
}

.rz-tabview.onu-manager-main-tabs > .rz-tabview-nav li.rz-tabview-selected > button > .rz-tabview-icon {
    opacity: 1;
}

.onu-manager-main-tabs > .rz-tabview-nav li > button:focus-visible {
    outline: 2px solid var(--brand-border-focus);
    outline-offset: 2px;
}

/* OnuManager - esconde o painel de agrupamento vazio do Radzen
   ("Drag a column header here and drop it to group by that column").
   O agrupamento e fixo (OLT/PON/CTO/CONNECTION) e os cabecalhos de grupo sao
   renderizados pelo GroupHeaderTemplate proprio; o drop-zone default so polui a UI.
   O seletor :has(> .rz-group-header-drop) atinge SOMENTE o painel, preservando
   os cabecalhos de grupo (OLT/PON/CTO) que nao possuem esse filho. */
.onu-grid-fluid .rz-group-header:has(> .rz-group-header-drop) {
    display: none !important;
}