/* /Components/Layout/GlobalSearchBox.razor.rz.scp.css */
.global-search-container[b-ttljh0m47d] {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.global-search-input-wrapper[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: var(--rz-base-200);
    border: 1px solid var(--rz-base-400);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.global-search-input-wrapper:focus-within[b-ttljh0m47d] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px var(--rz-primary-lighter);
}

.global-search-icon[b-ttljh0m47d] {
    color: var(--rz-text-tertiary-color);
    font-size: 1.1rem;
}

.global-search-input[b-ttljh0m47d] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--rz-text-color);
    min-width: 0;
}

.global-search-input[b-ttljh0m47d]::placeholder {
    color: var(--rz-text-tertiary-color);
}

.global-search-spinner[b-ttljh0m47d] {
    animation: spin-b-ttljh0m47d 1s linear infinite;
    color: var(--rz-primary);
    font-size: 1rem;
}

.global-search-clear[b-ttljh0m47d] {
    cursor: pointer;
    color: var(--rz-text-tertiary-color);
    font-size: 1rem;
}

.global-search-clear:hover[b-ttljh0m47d] {
    color: var(--rz-text-color);
}

.global-search-results[b-ttljh0m47d] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-400);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 480px;
    overflow-y: auto;
    min-width: 400px;
}

.global-search-empty[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--rz-text-tertiary-color);
    justify-content: center;
}

.global-search-facets[b-ttljh0m47d] {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-300);
    flex-wrap: wrap;
}

.global-search-facet-chip[b-ttljh0m47d] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    border: 1px solid var(--rz-base-400);
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: all 0.15s;
}

.global-search-facet-chip:hover[b-ttljh0m47d] {
    background: var(--rz-primary-lighter);
    border-color: var(--rz-primary);
}

.global-search-facet-chip.active[b-ttljh0m47d] {
    background: var(--rz-primary);
    color: var(--rz-on-primary-color);
    border-color: var(--rz-primary);
}

.facet-count[b-ttljh0m47d] {
    font-weight: 600;
}

.global-search-group[b-ttljh0m47d] {
    padding: 0.25rem 0;
}

.global-search-group-header[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color);
    letter-spacing: 0.03em;
}

.group-count[b-ttljh0m47d] {
    margin-left: auto;
    font-weight: normal;
}

.global-search-hit[b-ttljh0m47d] {
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    cursor: pointer;
    transition: background 0.1s;
}

.global-search-hit:hover[b-ttljh0m47d] {
    background: var(--rz-base-200);
}

.hit-title[b-ttljh0m47d] {
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.hit-title em[b-ttljh0m47d] {
    font-style: normal;
    font-weight: 700;
    color: var(--rz-primary);
}

.hit-subtitle[b-ttljh0m47d] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    margin-top: 0.15rem;
}

.global-search-footer[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--rz-base-300);
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
}

.fallback-badge[b-ttljh0m47d] {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.65rem;
}

.footer-hint[b-ttljh0m47d] {
    color: var(--rz-text-secondary-color);
    font-style: italic;
}

.hit-title[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.hit-matched-chip[b-ttljh0m47d] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary-darker);
    border: 1px solid var(--rz-primary-light);
}

.hit-source-badge[b-ttljh0m47d] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-left: auto;
    border: 1px solid transparent;
}

.hit-source-memory[b-ttljh0m47d] {
    background: var(--rz-success-lighter);
    color: var(--rz-success-darker);
    border-color: var(--rz-success-light);
}

.hit-source-es[b-ttljh0m47d] {
    background: var(--rz-info-lighter);
    color: var(--rz-info-darker);
    border-color: var(--rz-info-light);
}

.hit-source-sql[b-ttljh0m47d] {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
    border-color: var(--rz-warning-light);
}

@keyframes spin-b-ttljh0m47d {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* =============================================================================
   LoginLayout - Tela de login futurista SuaFibra
   - Cena 3D em CSS puro (cabos de fibra optica com pulsos de luz)
   - Cartao glassmorphism centralizado
   - Cores da marca: azul #4FB3FF, laranja #FFA61A
   ============================================================================= */

/* NOTA: o reset do .rz-layout/.rz-body para o login esta em
   wwwroot/css/site.css (selectors .rz-layout:has(> .rz-body.login-body)),
   pois esses elementos sao gerados pelos componentes Radzen e nao recebem
   o atributo de scope deste arquivo (b-XXXX). */

/* ==========================================================================
   Cena 3D - cabos e pulsos
   ========================================================================== */

[b-42fzhlr2p4] .fiber-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transform: perspective(1400px) rotateX(18deg) scale(1.15);
    transform-origin: 50% 60%;
}

[b-42fzhlr2p4] .fiber-grid {
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(rgba(148, 193, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 193, 255, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    opacity: 0.6;
}

[b-42fzhlr2p4] .fiber-cable {
    position: absolute;
    height: 2px;
    width: 140%;
    left: -20%;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(79, 179, 255, 0.18) 25%,
        rgba(255, 166, 26, 0.18) 75%,
        transparent 100%);
    box-shadow: 0 0 12px rgba(79, 179, 255, 0.15);
    overflow: hidden;
}

[b-42fzhlr2p4] .fiber-cable .pulse {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(79, 179, 255, 0) 30%,
        rgba(79, 179, 255, 0.95) 50%,
        rgba(255, 166, 26, 0.95) 60%,
        transparent 80%);
    filter: blur(2px);
    will-change: transform, opacity;
    animation: pulse-travel-b-42fzhlr2p4 5s linear infinite;
}

[b-42fzhlr2p4] .fiber-cable.cable-1 { top: 18%; transform: rotate(-8deg); }
[b-42fzhlr2p4] .fiber-cable.cable-2 { top: 38%; transform: rotate(6deg); }
[b-42fzhlr2p4] .fiber-cable.cable-3 { top: 62%; transform: rotate(-4deg); }
[b-42fzhlr2p4] .fiber-cable.cable-4 { top: 82%; transform: rotate(10deg); }

[b-42fzhlr2p4] .fiber-cable.cable-1 .pulse { animation-duration: 6s; animation-delay: 0s; }
[b-42fzhlr2p4] .fiber-cable.cable-2 .pulse { animation-duration: 4.5s; animation-delay: 1.2s; }
[b-42fzhlr2p4] .fiber-cable.cable-3 .pulse { animation-duration: 5.5s; animation-delay: 2.4s; }
[b-42fzhlr2p4] .fiber-cable.cable-4 .pulse { animation-duration: 4s;   animation-delay: 0.6s; }

[b-42fzhlr2p4] .fiber-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 0%,
        transparent 35%,
        rgba(6, 9, 15, 0.55) 75%,
        rgba(6, 9, 15, 0.85) 100%);
    pointer-events: none;
}

@keyframes pulse-travel-b-42fzhlr2p4 {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

/* ==========================================================================
   Shell + Card glassmorphism
   ========================================================================== */

[b-42fzhlr2p4] .login-shell {
    position: relative;
    z-index: 1;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

[b-42fzhlr2p4] .login-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 2.75rem 2.25rem 2rem;
    border-radius: 22px;
    background: linear-gradient(160deg,
        rgba(20, 28, 42, 0.78) 0%,
        rgba(12, 18, 28, 0.66) 100%);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(148, 193, 255, 0.18);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 166, 26, 0.04) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    isolation: isolate;
    animation: card-enter-b-42fzhlr2p4 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

[b-42fzhlr2p4] .login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(79, 179, 255, 0.55) 0%,
        rgba(79, 179, 255, 0) 35%,
        rgba(255, 166, 26, 0) 65%,
        rgba(255, 166, 26, 0.55) 100%);
    background-size: 200% 200%;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: border-shimmer-b-42fzhlr2p4 8s ease-in-out infinite;
}

@keyframes card-enter-b-42fzhlr2p4 {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes border-shimmer-b-42fzhlr2p4 {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ==========================================================================
   Header do card (logo + titulo + subtitulo)
   ========================================================================== */

[b-42fzhlr2p4] .login-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.75rem;
}

[b-42fzhlr2p4] .login-card__logo {
    max-width: 220px;
    width: 80%;
    height: auto;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 6px 20px rgba(79, 179, 255, 0.35));
    animation: logo-float-b-42fzhlr2p4 6s ease-in-out infinite;
}

@keyframes logo-float-b-42fzhlr2p4 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

[b-42fzhlr2p4] .login-card__title {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--rz-text-color, #ffffff);
    background: linear-gradient(90deg, #ffffff 0%, #cfe1ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[b-42fzhlr2p4] .login-card__subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65));
    letter-spacing: 0.01em;
}

[b-42fzhlr2p4] .login-card__footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   Estilizacao do RadzenLogin / RadzenFormField via ::deep
   ========================================================================== */

[b-42fzhlr2p4] .rz-row {
    margin: 0;
}

[b-42fzhlr2p4] .rz-col {
    padding: 0;
}

[b-42fzhlr2p4] .rz-alert {
    border-radius: 10px;
    margin-bottom: 0.75rem;
    backdrop-filter: blur(8px);
}

[b-42fzhlr2p4] .rz-form-field {
    width: 100%;
    margin-bottom: 0.75rem;
}

[b-42fzhlr2p4] .rz-form-field-content {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    transition: background 200ms ease, box-shadow 200ms ease;
}

[b-42fzhlr2p4] .rz-form-field-content:hover {
    background: rgba(255, 255, 255, 0.06);
}

[b-42fzhlr2p4] .rz-form-field.rz-state-focused .rz-form-field-content {
    background: rgba(79, 179, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(79, 179, 255, 0.35), 0 0 18px rgba(79, 179, 255, 0.18);
}

[b-42fzhlr2p4] .rz-form-field input {
    color: var(--rz-text-color, #ffffff);
}

[b-42fzhlr2p4] .rz-form-field-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

[b-42fzhlr2p4] .rz-form-field.rz-state-focused .rz-form-field-label,
[b-42fzhlr2p4] .rz-form-field.rz-state-filled .rz-form-field-label {
    color: var(--brand-blue, #4FB3FF);
}

/* RememberMe row + botao Entrar */
[b-42fzhlr2p4] .rz-login {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary,
[b-42fzhlr2p4] .rz-login button[type="submit"] {
    position: relative;
    width: 100%;
    height: 46px;
    margin-top: 0.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #06121F;
    background: linear-gradient(135deg, #4FB3FF 0%, #94C1FF 50%, #FFA61A 100%);
    background-size: 200% 200%;
    box-shadow:
        0 10px 30px rgba(79, 179, 255, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    overflow: hidden;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 220ms ease, background-position 600ms ease;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary::after,
[b-42fzhlr2p4] .rz-login button[type="submit"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    transition: left 700ms ease;
    pointer-events: none;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary:hover,
[b-42fzhlr2p4] .rz-login button[type="submit"]:hover {
    transform: translateY(-1px);
    background-position: 100% 50%;
    box-shadow:
        0 14px 36px rgba(79, 179, 255, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary:hover::after,
[b-42fzhlr2p4] .rz-login button[type="submit"]:hover::after {
    left: 130%;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary:active,
[b-42fzhlr2p4] .rz-login button[type="submit"]:active {
    transform: translateY(0);
}

/* ==========================================================================
   Acessibilidade - prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [b-42fzhlr2p4] .fiber-cable .pulse,
    [b-42fzhlr2p4] .login-card,
    [b-42fzhlr2p4] .login-card::before,
    [b-42fzhlr2p4] .login-card__logo,
    [b-42fzhlr2p4] .rz-login .rz-button-primary,
    [b-42fzhlr2p4] .rz-login button[type="submit"] {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 480px) {
    [b-42fzhlr2p4] .login-card {
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 18px;
    }

    [b-42fzhlr2p4] .fiber-grid {
        display: none;
    }

    [b-42fzhlr2p4] .fiber-cable {
        opacity: 0.55;
    }

    [b-42fzhlr2p4] .login-card__logo {
        max-width: 180px;
    }
}
/* /Components/OnuManager/Cards/OnuCard.razor.rz.scp.css */
.onu-card[b-zuxm86pnh7] {
    padding: 0.65rem;
    padding-left: calc(0.5rem + var(--onu-status-bar-w, 4px));
    border-radius: var(--onu-card-radius-modern, 14px);
    background:
        linear-gradient(135deg, rgba(var(--rz-secondary-rgb, 30,30,46), 0.45), transparent),
        var(--onu-decor-pattern) repeat;
    background-blend-mode: normal, overlay;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    margin-bottom: 0.4rem;
    cursor: pointer;
    transition: transform var(--onu-anim-medium, 200ms) var(--onu-ease, cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--onu-anim-medium, 200ms) var(--onu-ease, cubic-bezier(0.4, 0, 0.2, 1)),
                background var(--onu-anim-medium, 200ms) var(--onu-ease, cubic-bezier(0.4, 0, 0.2, 1));
    border: 1px solid rgba(var(--rz-base-rgb, 200,200,200), 0.15);
    position: relative;
    overflow: hidden;
    box-shadow: var(--onu-elevation-1, 0 1px 3px rgba(0,0,0,0.12));
    display: block;
}

/*
 * Estado "focused" - aplicado pela Busca Universal via deep-link.
 * Combina ring estatico (box-shadow) + animacao de pulse (3 ciclos ~3.6s).
 * O JS interop remove a classe apos 6s ou no primeiro click global.
 */
.onu-card.focused[b-zuxm86pnh7] {
    box-shadow:
        0 0 0 3px var(--rz-primary),
        0 0 22px 6px rgba(13, 110, 253, 0.45),
        var(--onu-elevation-2, 0 4px 12px rgba(0,0,0,0.18));
    border-color: var(--rz-primary);
    animation: onuFocusPulse-b-zuxm86pnh7 1.2s ease-in-out 3;
    z-index: 5;
}

@keyframes onuFocusPulse-b-zuxm86pnh7 {
    0% {
        box-shadow:
            0 0 0 3px var(--rz-primary),
            0 0 0 0 rgba(13, 110, 253, 0.65);
    }
    50% {
        box-shadow:
            0 0 0 4px var(--rz-primary),
            0 0 30px 14px rgba(13, 110, 253, 0.35);
    }
    100% {
        box-shadow:
            0 0 0 3px var(--rz-primary),
            0 0 22px 6px rgba(13, 110, 253, 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .onu-card.focused[b-zuxm86pnh7] {
        animation: none;
    }
}

/* Grid operacional: coluna principal (identificacao + servico) | saude optica/acoes */
.onu-card-grid[b-zuxm86pnh7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--onu-gap-lg, 12px);
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.onu-card-section[b-zuxm86pnh7] {
    min-width: 0;
    border-radius: var(--onu-radius-panel, 10px);
}

.onu-card-identity[b-zuxm86pnh7] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.35rem 0.45rem;
    background: var(--onu-panel-bg-soft, rgba(var(--rz-base-rgb, 200,200,200), 0.05));
    border: 1px solid var(--onu-panel-border, rgba(var(--rz-base-rgb, 200,200,200), 0.10));
}

.onu-card-service[b-zuxm86pnh7] {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-md, 8px);
    min-width: 0;
}

/* Painel direito: saude optica, metricas e acoes ficam em grupos separados. */
.onu-side-rail[b-zuxm86pnh7] {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    align-content: start;
    gap: var(--onu-gap-md, 8px);
    min-width: 0;
    align-self: stretch;
    padding: 0.55rem;
    border-radius: var(--onu-radius-panel, 10px);
    background:
        linear-gradient(180deg, rgba(var(--rz-base-rgb, 200, 200, 200), 0.08), transparent),
        var(--onu-panel-bg, rgba(var(--rz-base-rgb, 20, 28, 44), 0.26));
    border: 1px solid var(--onu-panel-border, rgba(var(--rz-base-rgb, 200, 200, 200), 0.14));
    box-shadow: inset 0 1px 0 rgba(var(--rz-base-rgb, 255, 255, 255), 0.06);
}

/* Barra de status vertical com gradient (substitui border-left rigido).
   Evita repaint do border ao trocar estado (so o ::before muda). */
.onu-card[b-zuxm86pnh7]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--onu-status-bar-w, 4px);
    background: linear-gradient(180deg,
        var(--rz-base-500) 0%,
        rgba(var(--rz-base-rgb, 200,200,200), 0.05) 100%);
    transition: background var(--onu-anim-medium, 200ms) var(--onu-ease);
}

/* Camada decorativa do pattern com opacidade controlada. */
.onu-card[b-zuxm86pnh7]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--onu-decor-pattern) repeat;
    opacity: var(--onu-decor-opacity, 0.05);
    pointer-events: none;
    color: currentColor;
}

/* Slot top-right do card para badge "evento recente" e botao reassign (T4/T8) */
.onu-recent-event-slot[b-zuxm86pnh7] {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 5;
}

.onu-recent-event-slot .reassign-btn[b-zuxm86pnh7] {
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.onu-recent-event-slot .reassign-btn .reassign-svg[b-zuxm86pnh7] {
    width: 14px;
    height: 14px;
    color: currentColor;
    display: inline-block;
}

.reassign-pending[b-zuxm86pnh7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.18);
    color: var(--rz-warning-darker);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: help;
    user-select: none;
    border: 1px dashed currentColor;
    animation: reassignPendingPulse-b-zuxm86pnh7 2.4s ease-in-out infinite;
}

.reassign-pending .reassign-pending-svg[b-zuxm86pnh7] {
    width: 14px;
    height: 14px;
    color: currentColor;
    display: inline-block;
    animation: reassignHourglassFlip-b-zuxm86pnh7 3s ease-in-out infinite;
}

@keyframes reassignPendingPulse-b-zuxm86pnh7 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rz-warning-rgb, 255, 152, 0), 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(var(--rz-warning-rgb, 255, 152, 0), 0.12); }
}

@keyframes reassignHourglassFlip-b-zuxm86pnh7 {
    0%, 90%, 100% { transform: rotate(0deg); }
    95%           { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    .reassign-pending[b-zuxm86pnh7],
    .reassign-pending .reassign-pending-svg[b-zuxm86pnh7] {
        animation: none;
    }
}

.onu-card.connected[b-zuxm86pnh7]::before {
    background: linear-gradient(180deg,
        var(--rz-success) 0%,
        rgba(var(--rz-success-rgb, 76,175,80), 0.10) 100%);
}

.onu-card.disconnected[b-zuxm86pnh7]::before {
    background: linear-gradient(180deg,
        var(--rz-danger) 0%,
        rgba(var(--rz-danger-rgb, 244,67,54), 0.10) 100%);
}

.onu-card:hover[b-zuxm86pnh7] {
    transform: translateY(-2px);
    box-shadow: var(--onu-elevation-hover, 0 4px 12px rgba(0,0,0,0.18));
    background:
        linear-gradient(135deg, rgba(var(--rz-secondary-rgb, 30,30,46), 0.6), rgba(var(--rz-base-rgb, 200,200,200), 0.08));
}

.onu-card:hover[b-zuxm86pnh7]::before {
    width: calc(var(--onu-status-bar-w, 4px) + 1px);
}

/* status indicator agora vive no .onu-card::before com gradient. */

.onu-content[b-zuxm86pnh7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-left: 2px;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.onu-main[b-zuxm86pnh7] {
    display: block;
}

.onu-info[b-zuxm86pnh7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    /* container query: permite que .onu-name encolha a fonte conforme largura cai */
    container-type: inline-size;
}

/* --- Header --- */
[b-zuxm86pnh7] .onu-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[b-zuxm86pnh7] .onu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.connected[b-zuxm86pnh7]  .onu-icon {
    background: var(--rz-success-lighter);
    color: var(--rz-success);
}

.disconnected[b-zuxm86pnh7]  .onu-icon {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger);
}

/* Auto-shrink hibrido:
   - Em containers largos (>= 360px): font-size 0.85rem, 1 linha.
   - Conforme container encolhe: cqi reduz proporcionalmente ate 0.7rem.
   - Se ainda nao couber: quebra ate 2 linhas (line-clamp).
   - Tooltip nativo (title) preserva nome completo. */
[b-zuxm86pnh7] .onu-name {
    color: var(--rz-primary-light);
    font-weight: 500;
    font-size: clamp(0.7rem, 2.4cqi, 0.85rem);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
}

.onu-sn[b-zuxm86pnh7] {
    color: var(--rz-text-secondary);
    font-size: 0.7rem;
    margin-left: 28px;
    opacity: 0.8;
}

[b-zuxm86pnh7] .onu-time {
    font-size: 0.65rem;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    font-weight: 500;
}

[b-zuxm86pnh7] .time-success {
    background: var(--rz-success-lighter);
    color: var(--rz-success-light);
}

[b-zuxm86pnh7] .time-danger {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger-light);
}

[b-zuxm86pnh7] .event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--rz-info-rgb, 59,130,246), 0.25), rgba(var(--rz-primary-rgb, 59,130,246), 0.15));
    color: var(--rz-primary-light);
    border-radius: 4px;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: bold;
    animation: pulse-light-b-zuxm86pnh7 2s infinite;
}

@keyframes pulse-light-b-zuxm86pnh7 {
    0%   { box-shadow: 0 0 0 0 var(--rz-info-lighter); }
    70%  { box-shadow: 0 0 0 3px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Meta chips --- */
[b-zuxm86pnh7] .onu-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: 28px;
}

[b-zuxm86pnh7] .onu-meta-chip {
    font-size: 0.64rem;
    padding: 0.06rem 0.34rem;
    border-radius: 3px;
    background: rgba(var(--rz-base-rgb, 20,28,44), 0.55);
    color: var(--rz-text-color);
    border: 1px solid var(--onu-panel-border, rgba(var(--rz-base-rgb, 200,200,200), 0.14));
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

[b-zuxm86pnh7] .onu-meta-chip.circuito {
    background: rgba(var(--rz-primary-rgb, 59,130,246), 0.3);
    color: var(--rz-primary-light);
    font-weight: 600;
    border-color: rgba(var(--rz-primary-rgb, 59,130,246), 0.45);
}

[b-zuxm86pnh7] .onu-meta-chip.stale {
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.25);
    color: var(--rz-warning-lighter);
    font-weight: 700;
    border-color: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.55);
}

/* --- Signal (no side-rail) --- */
[b-zuxm86pnh7] .onu-signal {
    display: grid;
    width: 100%;
}

/* --- Cliente info (Algar) — collapsible <details> --- */
[b-zuxm86pnh7] .onu-cliente-info {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--rz-base-500);
    display: block;
}

/* Summary: linha unica clicavel com nome + status badge + caret. */
[b-zuxm86pnh7] .cliente-summary {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.05rem 0;
    border-radius: 4px;
}

[b-zuxm86pnh7] .cliente-summary:hover {
    background: rgba(var(--rz-base-rgb, 200,200,200), 0.06);
}

[b-zuxm86pnh7] .cliente-summary::-webkit-details-marker { display: none; }
[b-zuxm86pnh7] .cliente-summary::marker { content: ''; }

/* Caret apontando para baixo / direita conforme estado open. */
[b-zuxm86pnh7] .cliente-summary-marker {
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    color: var(--rz-text-tertiary, rgba(255,255,255,0.5));
    transition: transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

[b-zuxm86pnh7] details.onu-cliente-info[open] .cliente-summary-marker {
    transform: rotate(45deg);
}

[b-zuxm86pnh7] .cliente-status-chip {
    flex-shrink: 0;
}

[b-zuxm86pnh7] .cliente-body {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    animation: clienteBodyIn-b-zuxm86pnh7 var(--onu-anim-medium, 180ms) var(--onu-ease, ease);
}

@keyframes clienteBodyIn-b-zuxm86pnh7 {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [b-zuxm86pnh7] .cliente-body { animation: none; }
}

/* Link Google Maps com lat/long. Chip pill clicavel. */
[b-zuxm86pnh7] .cliente-maps-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    margin-left: 1.1rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.18);
    color: var(--rz-info);
    font-size: 0.65rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(var(--rz-info-rgb, 33, 150, 243), 0.35);
    transition: background var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
                transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

[b-zuxm86pnh7] .cliente-maps-link:hover {
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.30);
    transform: translateY(-1px);
}

[b-zuxm86pnh7] .cliente-maps-link .rzi {
    font-size: 0.85rem;
}

[b-zuxm86pnh7] .cliente-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

[b-zuxm86pnh7] .cliente-icon {
    font-size: 0.8rem;
    color: var(--rz-primary-light);
}

[b-zuxm86pnh7] .cliente-nome {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-zuxm86pnh7] .cliente-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-left: 1.1rem;
}

[b-zuxm86pnh7] .cliente-badges .rz-badge,
[b-zuxm86pnh7] .cliente-badge .rz-badge {
    font-size: 0.62rem !important;
    padding: 0.05rem 0.34rem !important;
    border-radius: 3px !important;
    color: var(--rz-text-color) !important;
    border: 1px solid var(--onu-panel-border, rgba(var(--rz-base-rgb, 200,200,200), 0.14)) !important;
}

[b-zuxm86pnh7] .cliente-badges .rz-badge.rz-badge-pill,
[b-zuxm86pnh7] .cliente-badge .rz-badge.rz-badge-pill {
    border-radius: 3px !important;
}

[b-zuxm86pnh7] .cliente-endereco {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    color: var(--rz-text-secondary);
    margin-left: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- IXC indicators --- */
[b-zuxm86pnh7] .onu-ixc-indicators {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--rz-base-500);
}

[b-zuxm86pnh7] .onu-ixc-indicators .rzi {
    font-size: 1rem;
    cursor: help;
    transition: transform 0.2s;
}

[b-zuxm86pnh7] .onu-ixc-indicators .rzi:hover {
    transform: scale(1.15);
}

[b-zuxm86pnh7] .onu-svg-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
    cursor: help;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
    transition: transform 0.18s ease, opacity 0.18s ease;
}

[b-zuxm86pnh7] .onu-svg-icon:hover {
    transform: translateY(-1px) scale(1.06);
    opacity: 0.96;
}

[b-zuxm86pnh7] .remote-access-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s;
}

[b-zuxm86pnh7] .remote-access-link:hover {
    transform: scale(1.15);
}

[b-zuxm86pnh7] .remote-access-link .rzi {
    cursor: pointer;
}

[b-zuxm86pnh7] .remote-access-link .onu-svg-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* SVGs renderizados via mask-image herdam currentColor do botao Radzen.
   Funciona para light/warning/info via background-color: currentColor. */
[b-zuxm86pnh7] .onu-action-svg {
    width: var(--onu-icon-size-sm, 16px);
    height: var(--onu-icon-size-sm, 16px);
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: transform var(--onu-anim-fast, 120ms) var(--onu-ease),
                opacity var(--onu-anim-fast, 120ms) var(--onu-ease);
    opacity: 0.88;
}

[b-zuxm86pnh7] .onu-action-btn:hover .onu-action-svg {
    transform: scale(1.14);
    opacity: 1;
}

[b-zuxm86pnh7] .onu-action-btn:active .onu-action-svg {
    transform: scale(0.94);
}

[b-zuxm86pnh7] .onu-action-text {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

[b-zuxm86pnh7] .onu-action-svg.icon-check-state {
    -webkit-mask-image: url("/icons/onu/actions/check-state.svg");
            mask-image: url("/icons/onu/actions/check-state.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-check-signal {
    -webkit-mask-image: url("/icons/onu/actions/check-signal.svg");
            mask-image: url("/icons/onu/actions/check-signal.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-refresh-macs {
    -webkit-mask-image: url("/icons/onu/actions/refresh-macs.svg");
            mask-image: url("/icons/onu/actions/refresh-macs.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-reboot {
    -webkit-mask-image: url("/icons/onu/actions/reboot.svg");
            mask-image: url("/icons/onu/actions/reboot.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-reprovision {
    -webkit-mask-image: url("/icons/onu/actions/reprovision.svg");
            mask-image: url("/icons/onu/actions/reprovision.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-batimento {
    -webkit-mask-image: url("/icons/onu/actions/batimento.svg");
            mask-image: url("/icons/onu/actions/batimento.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-swap-cto {
    -webkit-mask-image: url("/icons/onu/actions/swap-cto.svg");
            mask-image: url("/icons/onu/actions/swap-cto.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-hourglass-pending {
    -webkit-mask-image: url("/icons/onu/actions/hourglass-pending.svg");
            mask-image: url("/icons/onu/actions/hourglass-pending.svg");
}

/* --- Progress bar --- */
[b-zuxm86pnh7] .onu-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    margin: 0;
}

[b-zuxm86pnh7] .onu-progress .rz-progressbar {
    height: 2px;
    border-radius: 0;
}

/* --- Pulse de borda em update realtime ---
   Trigger: atributo data-pulse no .onu-card setado pelo C# (PulseKind()).
   CSS puro: roda no proximo render do grid (debounced); sem extra StateHasChanged. */
.onu-card[data-pulse="signal"][b-zuxm86pnh7] {
    animation: onuPulseSignal-b-zuxm86pnh7 var(--onu-anim-fast) var(--onu-ease) 1;
}

.onu-card[data-pulse="state"][b-zuxm86pnh7] {
    animation: onuPulseState-b-zuxm86pnh7 var(--onu-anim-fast) var(--onu-ease) 1;
}

.onu-card[data-pulse="mac"][b-zuxm86pnh7] {
    animation: onuPulseMac-b-zuxm86pnh7 var(--onu-anim-fast) var(--onu-ease) 1;
}

@keyframes onuPulseSignal-b-zuxm86pnh7 {
    0%   { box-shadow: 0 0 0 0 var(--onu-pulse-color-signal), 0 1px 3px rgba(0, 0, 0, 0.12); }
    100% { box-shadow: 0 0 0 6px transparent, 0 1px 3px rgba(0, 0, 0, 0.12); }
}

@keyframes onuPulseState-b-zuxm86pnh7 {
    0%   { box-shadow: 0 0 0 0 var(--onu-pulse-color-state), 0 1px 3px rgba(0, 0, 0, 0.12); }
    100% { box-shadow: 0 0 0 6px transparent, 0 1px 3px rgba(0, 0, 0, 0.12); }
}

@keyframes onuPulseMac-b-zuxm86pnh7 {
    0%   { box-shadow: 0 0 0 0 var(--onu-pulse-color-mac), 0 1px 3px rgba(0, 0, 0, 0.12); }
    100% { box-shadow: 0 0 0 6px transparent, 0 1px 3px rgba(0, 0, 0, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
    .onu-card[data-pulse][b-zuxm86pnh7] {
        animation: none;
    }
}

/* --- Chip flash --- */
[b-zuxm86pnh7] .chip-flash {
    animation: chipFlash-b-zuxm86pnh7 var(--onu-anim-medium) var(--onu-ease) 1;
}

@keyframes chipFlash-b-zuxm86pnh7 {
    0%   { background-color: var(--onu-pulse-color-signal); }
    100% { background-color: transparent; }
}

/* --- Actions bar --- */
.onu-actions-bar[b-zuxm86pnh7] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.22rem;
    padding: 0.35rem;
    border-radius: var(--onu-radius-panel, 10px);
    background: var(--onu-panel-bg-soft, rgba(var(--rz-base-rgb, 200,200,200), 0.06));
    position: static;
    z-index: 4;
    border: 1px solid var(--onu-panel-border, rgba(var(--rz-base-rgb, 200,200,200), 0.12));
}

.onu-actions-bar[b-zuxm86pnh7]  .rz-button {
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    overflow: hidden;
    gap: 0.25rem;
    border-radius: var(--onu-radius-pill, 999px);
    transition:
        width var(--onu-anim-medium, 200ms) var(--onu-ease),
        background var(--onu-anim-fast, 120ms) var(--onu-ease),
        color var(--onu-anim-fast, 120ms) var(--onu-ease),
        box-shadow var(--onu-anim-fast, 120ms) var(--onu-ease);
}

.onu-actions-bar[b-zuxm86pnh7]  .rz-button:hover,
.onu-actions-bar[b-zuxm86pnh7]  .rz-button:focus-visible {
    width: 5.4rem;
    background: rgba(var(--rz-primary-rgb, 0, 235, 176), 0.12);
    box-shadow: 0 0 0 1px rgba(var(--rz-primary-rgb, 0, 235, 176), 0.22);
}

.onu-actions-bar[b-zuxm86pnh7]  .rz-button.action-reboot:hover,
.onu-actions-bar[b-zuxm86pnh7]  .rz-button.action-reboot:focus-visible {
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.16);
    box-shadow: 0 0 0 1px rgba(var(--rz-warning-rgb, 255, 152, 0), 0.26);
}

[b-zuxm86pnh7] .onu-action-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    color: currentColor;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition:
        max-width var(--onu-anim-medium, 200ms) var(--onu-ease),
        opacity var(--onu-anim-fast, 120ms) var(--onu-ease);
}

.onu-actions-bar[b-zuxm86pnh7]  .rz-button:hover .onu-action-label,
.onu-actions-bar[b-zuxm86pnh7]  .rz-button:focus-visible .onu-action-label {
    max-width: 3.8rem;
    opacity: 1;
}

.onu-actions-bar[b-zuxm86pnh7]  .onu-action-btn.action-batimento.armed {
    color: var(--rz-warning);
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.14);
}

/* Header: SVGs custom para cloud-on/off via mask-image para herdar cor do
   contexto (.connected -> success / .disconnected -> danger).
   <img> nao herda currentColor; mask + background-color: currentColor herda. */
[b-zuxm86pnh7] .onu-header-svg {
    width: var(--onu-icon-size-md, 20px);
    height: var(--onu-icon-size-md, 20px);
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

[b-zuxm86pnh7] .onu-header-svg.icon-cloud-on {
    -webkit-mask-image: url("/icons/onu/state/cloud-on.svg");
            mask-image: url("/icons/onu/state/cloud-on.svg");
}

[b-zuxm86pnh7] .onu-header-svg.icon-cloud-off {
    -webkit-mask-image: url("/icons/onu/state/cloud-off.svg");
            mask-image: url("/icons/onu/state/cloud-off.svg");
}

/* MAC e ServicePort styles foram migrados para componentes scoped:
   - .onu-vport / .onu-sp / .onu-mac → OnuCardVportSection.razor.css
   - .onu-orphan-mac → OnuCardHierarchy.razor.css
   - .onu-wan-* → OnuCardWanSection.razor.css
   Tokens: wwwroot/css/onu-card-tokens.css */

/* --- Responsive --- */
@media (max-width: 1180px) {
    .onu-card-grid[b-zuxm86pnh7] {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
    }
}

@media (max-width: 980px) {
    .onu-card-grid[b-zuxm86pnh7] {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    }

    .onu-card-identity[b-zuxm86pnh7] {
        grid-column: 1;
        grid-row: 1;
    }

    .onu-card-service[b-zuxm86pnh7] {
        grid-column: 1;
        grid-row: 2;
    }

    .onu-side-rail[b-zuxm86pnh7] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 576px) {
    .onu-card[b-zuxm86pnh7] {
        padding: 0.4rem;
        padding-left: calc(0.4rem + var(--onu-status-bar-w, 4px));
    }

    .onu-card-grid[b-zuxm86pnh7] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 0.4rem;
    }

    .onu-card-identity[b-zuxm86pnh7],
    .onu-card-service[b-zuxm86pnh7],
    .onu-side-rail[b-zuxm86pnh7] {
        grid-column: 1;
        grid-row: auto;
    }

    .onu-side-rail[b-zuxm86pnh7] {
        min-width: 0;
        width: 100%;
        padding: 0.45rem;
        gap: var(--onu-gap-md, 8px);
    }

    .onu-actions-bar[b-zuxm86pnh7] {
        justify-content: flex-start;
        padding: 0.28rem;
    }

    .onu-actions-bar[b-zuxm86pnh7]  .rz-button,
    .onu-actions-bar[b-zuxm86pnh7]  .rz-button:hover,
    .onu-actions-bar[b-zuxm86pnh7]  .rz-button:focus-visible {
        width: 2rem;
    }

    [b-zuxm86pnh7] .onu-action-label {
        display: none;
    }
}
/* /Components/OnuManager/Cards/OnuCardClienteDetalhado.razor.rz.scp.css */
/*
   Bloco "Detalhes do Cliente" no card da ONU.
   Inspirado em OnuCardClienteInfo, com tab strip CSS-only e
   sub-paineis (Cliente | Circuito | SPS).
   Tudo escopado via Blazor component CSS isolation.
*/

.onu-cliente-detalhado[b-aj1e2kwb4g] {
    margin-top: 0.4rem;
    border-top: 1px dashed var(--rz-border, rgba(255, 255, 255, 0.08));
    padding-top: 0.35rem;
    cursor: pointer;
}

.onu-cliente-detalhado[open][b-aj1e2kwb4g] {
    border-top-style: solid;
}

/* Resumo (linha clicavel) */
.cliente-det-summary[b-aj1e2kwb4g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    user-select: none;
    padding: 0.18rem 0.2rem;
    border-radius: 6px;
    transition: background-color 120ms ease;
}

.cliente-det-summary:hover[b-aj1e2kwb4g] {
    background-color: rgba(var(--rz-primary-rgb, 0, 120, 215), 0.06);
}

.cliente-det-summary[b-aj1e2kwb4g]::-webkit-details-marker { display: none; }
.cliente-det-summary[b-aj1e2kwb4g]::marker { content: ''; }

.cliente-det-icon[b-aj1e2kwb4g] {
    font-size: 0.85rem;
    color: var(--rz-primary, #0078d7);
}

.cliente-det-nome[b-aj1e2kwb4g] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-text-color, var(--rz-text-light, #e6eef7));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip de status (CRM/Algar) - bordas quadradas e cores mais vivas */
.cliente-det-status[b-aj1e2kwb4g] {
    flex-shrink: 0;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.28rem;
    border-radius: 3px;
    border: 1px solid transparent;
    line-height: 1;
}

.cliente-det-status.status-ok[b-aj1e2kwb4g] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.28);
    color: #7bdc83;
    border-color: rgba(var(--rz-success-rgb, 76, 175, 80), 0.55);
}

.cliente-det-status.status-warn[b-aj1e2kwb4g] {
    background: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.30);
    color: #ffd24a;
    border-color: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.6);
}

.cliente-det-status.status-danger[b-aj1e2kwb4g] {
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.28);
    color: #ff7b72;
    border-color: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.55);
}

.cliente-det-status.status-muted[b-aj1e2kwb4g] {
    background: rgba(150, 160, 175, 0.24);
    color: #c5cdd9;
    border-color: rgba(150, 160, 175, 0.42);
}

/* Chip "divergencia" e "ok" - mesmo padrao quadrado */
.cliente-det-divergencia[b-aj1e2kwb4g],
.cliente-det-ok[b-aj1e2kwb4g] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    font-size: 0.56rem;
    font-weight: 700;
    padding: 0.1rem 0.36rem;
    border-radius: 3px;
    line-height: 1;
}

.cliente-det-divergencia[b-aj1e2kwb4g] {
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.16);
    color: #ff7b72;
    border: 1px solid rgba(var(--rz-danger-rgb, 244, 67, 54), 0.42);
    gap: 0.12rem;
    font-size: 0.52rem;
    padding: 0.06rem 0.28rem;
}

.cliente-det-ok[b-aj1e2kwb4g] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.14);
    color: #7bdc83;
    border: 1px solid rgba(var(--rz-success-rgb, 76, 175, 80), 0.36);
}

.cliente-det-divergencia .rzi[b-aj1e2kwb4g],
.cliente-det-ok .rzi[b-aj1e2kwb4g] {
    font-size: 0.66rem;
}

.cliente-det-divergencia .rzi[b-aj1e2kwb4g] {
    font-size: 0.58rem;
}

/* Caret a direita rotaciona quando aberto */
.cliente-det-marker[b-aj1e2kwb4g] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    color: var(--rz-text-tertiary, rgba(255, 255, 255, 0.5));
    transition: transform 140ms ease;
}

.onu-cliente-detalhado[open] .cliente-det-marker[b-aj1e2kwb4g] {
    transform: rotate(45deg);
}

/* Corpo expandido */
.cliente-det-body[b-aj1e2kwb4g] {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem 0.6rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    animation: clienteDetIn-b-aj1e2kwb4g 180ms ease;
}

@keyframes clienteDetIn-b-aj1e2kwb4g {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cliente-det-body[b-aj1e2kwb4g] { animation: none; }
}

/* Tab strip - bordas mais quadradas, contraste reforcado */
.cliente-det-tabs[b-aj1e2kwb4g] {
    display: inline-flex;
    align-self: stretch;
    gap: 2px;
    padding: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cliente-det-tab[b-aj1e2kwb4g] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    padding: 0.36rem 0.6rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #d2d9e3;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.cliente-det-tab .rzi[b-aj1e2kwb4g] {
    font-size: 0.9rem;
}

.cliente-det-tab:hover:not(.disabled):not(.active)[b-aj1e2kwb4g] {
    background: rgba(var(--rz-primary-rgb, 0, 120, 215), 0.18);
    color: #ffffff;
    transform: translateY(-1px);
}

.cliente-det-tab.active[b-aj1e2kwb4g] {
    background: var(--rz-primary, #0078d7);
    color: var(--rz-on-primary, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

.cliente-det-tab.disabled[b-aj1e2kwb4g] {
    opacity: 0.45;
    cursor: not-allowed;
}

.cliente-det-tab-dot[b-aj1e2kwb4g] {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rz-danger, #f44336);
    box-shadow: 0 0 0 2px var(--rz-base-200, rgba(0, 0, 0, 0.2));
}

/* Tab pane (container) */
.cliente-det-tabpane[b-aj1e2kwb4g] {
    min-height: 36px;
}

.cliente-det-pane[b-aj1e2kwb4g] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    animation: tabPaneIn-b-aj1e2kwb4g 160ms ease;
}

@keyframes tabPaneIn-b-aj1e2kwb4g {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Aba Cliente */
.cliente-det-badges[b-aj1e2kwb4g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
}

.cliente-det-row[b-aj1e2kwb4g] {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.7rem;
    color: #c5cdd9;
    min-width: 0;
}

.cliente-det-row .rzi[b-aj1e2kwb4g] {
    font-size: 0.78rem;
    color: var(--rz-primary-light, #4ea1f0);
    flex-shrink: 0;
}

.cliente-det-row-text[b-aj1e2kwb4g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cliente-det-maps[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.22rem 0.6rem;
    border-radius: 4px;
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.24);
    color: #6cc1ff;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(var(--rz-info-rgb, 33, 150, 243), 0.5);
    transition: background 140ms ease, transform 140ms ease;
}

.cliente-det-maps:hover[b-aj1e2kwb4g] {
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.40);
    color: #ffffff;
    transform: translateY(-1px);
}

.cliente-det-maps .rzi[b-aj1e2kwb4g] {
    font-size: 0.85rem;
}

/* Aba Circuito - key/value */
.cliente-det-kv[b-aj1e2kwb4g] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.18rem;
    margin: 0;
}

.cliente-det-kv .kv-row[b-aj1e2kwb4g] {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.7rem;
    padding: 0.18rem 0.35rem;
    border-radius: 3px;
    transition: background-color 120ms ease;
}

.cliente-det-kv .kv-row:hover[b-aj1e2kwb4g] {
    background: rgba(var(--rz-primary-rgb, 0, 120, 215), 0.10);
}

.cliente-det-kv dt[b-aj1e2kwb4g] {
    color: #b6c0cf;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
    margin: 0;
}

.cliente-det-kv dd[b-aj1e2kwb4g] {
    margin: 0;
    color: #f0f4fa;
    word-break: break-word;
    font-weight: 500;
}

.cliente-det-kv .kv-mono[b-aj1e2kwb4g] {
    font-family: var(--rz-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.66rem;
}

.cliente-det-kv .kv-aux[b-aj1e2kwb4g] {
    color: #d2d9e3;
    background: rgba(120, 130, 145, 0.18);
    border: 1px solid rgba(150, 160, 175, 0.30);
    border-radius: 3px;
    padding: 0.04rem 0.32rem;
    font-size: 0.6rem;
    font-weight: 700;
    margin-left: 0.32rem;
    letter-spacing: 0.02em;
}

/* Flags has_contexto_* */
.cliente-det-flags[b-aj1e2kwb4g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.ctx-flag[b-aj1e2kwb4g] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.16rem 0.45rem;
    border-radius: 3px;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1;
}

.ctx-flag.on[b-aj1e2kwb4g] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.26);
    color: #7bdc83;
    border-color: rgba(var(--rz-success-rgb, 76, 175, 80), 0.5);
}

.ctx-flag.off[b-aj1e2kwb4g] {
    background: rgba(120, 130, 145, 0.18);
    color: #9aa4b1;
    border-color: rgba(150, 160, 175, 0.32);
    text-decoration: line-through;
}

/* Aba SPS - tabela comparativa */
.cliente-det-cmp[b-aj1e2kwb4g] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.7rem;
}

.cliente-det-cmp th[b-aj1e2kwb4g],
.cliente-det-cmp td[b-aj1e2kwb4g] {
    padding: 0.28rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    white-space: nowrap;
}

.cliente-det-cmp tbody tr:last-child td[b-aj1e2kwb4g] {
    border-bottom: none;
}

.cliente-det-cmp thead th[b-aj1e2kwb4g] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b6c0cf;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.cliente-det-cmp .cmp-campo[b-aj1e2kwb4g] {
    font-weight: 800;
    color: #c5cdd9;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.62rem;
}

.cliente-det-cmp .cmp-crm[b-aj1e2kwb4g],
.cliente-det-cmp .cmp-rad[b-aj1e2kwb4g] {
    color: #f0f4fa;
    font-family: var(--rz-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-weight: 500;
}

.cliente-det-cmp .cmp-dif[b-aj1e2kwb4g] {
    color: #ff7b72;
    font-weight: 800;
}

.cliente-det-cmp tr.row-dif[b-aj1e2kwb4g] {
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.14);
}

.cliente-det-cmp tr.row-dif:hover[b-aj1e2kwb4g] {
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.20);
}

.cliente-det-sps-foot[b-aj1e2kwb4g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.66rem;
    color: #c5cdd9;
}

.cliente-det-sps-foot .rzi[b-aj1e2kwb4g] {
    font-size: 0.78rem;
    margin-right: 0.18rem;
    vertical-align: -2px;
}

.sps-foot-flag[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6rem;
}

.sps-foot-flag.flag-ok[b-aj1e2kwb4g] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.26);
    color: #7bdc83;
    border: 1px solid rgba(var(--rz-success-rgb, 76, 175, 80), 0.5);
}

.sps-foot-flag.flag-warning[b-aj1e2kwb4g] {
    background: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.30);
    color: #ffd24a;
    border: 1px solid rgba(var(--rz-warning-rgb, 255, 193, 7), 0.55);
}

/* Bloco VLAN (Outer/Inner) - aba Circuito */
.cliente-det-vlan[b-aj1e2kwb4g] {
    margin-top: 0.45rem;
    padding: 0.5rem 0.55rem 0.55rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cliente-det-vlan-head[b-aj1e2kwb4g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.vlan-head-title[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    color: #c5cdd9;
}

.vlan-head-title .rzi[b-aj1e2kwb4g] {
    font-size: 0.9rem;
    color: #6cc1ff;
}

.vlan-head-flag[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6rem;
    line-height: 1;
}

.vlan-head-flag.flag-ok[b-aj1e2kwb4g] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.26);
    color: #7bdc83;
    border: 1px solid rgba(var(--rz-success-rgb, 76, 175, 80), 0.5);
}

.vlan-head-flag.flag-warning[b-aj1e2kwb4g] {
    background: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.30);
    color: #ffd24a;
    border: 1px solid rgba(var(--rz-warning-rgb, 255, 193, 7), 0.55);
}

.vlan-head-flag .rzi[b-aj1e2kwb4g] {
    font-size: 0.78rem;
}

.cliente-det-vlan-table[b-aj1e2kwb4g] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.7rem;
}

.cliente-det-vlan-table thead th[b-aj1e2kwb4g] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b6c0cf;
    font-weight: 800;
    text-align: left;
    padding: 0.22rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
}

.cliente-det-vlan-table tbody td[b-aj1e2kwb4g] {
    padding: 0.28rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    text-align: left;
    white-space: nowrap;
}

.cliente-det-vlan-table tbody tr:last-child td[b-aj1e2kwb4g] {
    border-bottom: none;
}

.cliente-det-vlan-table .vlan-campo[b-aj1e2kwb4g] {
    font-weight: 800;
    color: #c5cdd9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
}

.cliente-det-vlan-table .vlan-cell[b-aj1e2kwb4g] {
    color: #f0f4fa;
    font-family: var(--rz-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.72rem;
    font-weight: 600;
}

.cliente-det-vlan-table .vlan-dif[b-aj1e2kwb4g] {
    color: #ffd24a;
    font-weight: 800;
}

.cliente-det-vlan-table tr.row-dif[b-aj1e2kwb4g] {
    background: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.16);
}

.cliente-det-vlan-table tr.row-dif:hover[b-aj1e2kwb4g] {
    background: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.24);
}

/* Hint informativo na aba SPS */
.cliente-det-sps-hint[b-aj1e2kwb4g] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.16);
    border: 1px solid rgba(var(--rz-info-rgb, 33, 150, 243), 0.36);
    font-size: 0.66rem;
    color: #d2d9e3;
    line-height: 1.4;
}

.cliente-det-sps-hint .rzi[b-aj1e2kwb4g] {
    font-size: 0.9rem;
    color: #6cc1ff;
    flex-shrink: 0;
}

.cliente-det-sps-hint strong[b-aj1e2kwb4g] {
    color: #ffffff;
    font-weight: 800;
}

.cliente-det-sps-hint em[b-aj1e2kwb4g] {
    font-style: normal;
    color: #6cc1ff;
    font-weight: 700;
}

/* Light mode override quando o app esta em tema claro */
:host-context(.rz-theme-default) .cliente-det-body[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-body[b-aj1e2kwb4g] {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.14);
}

:host-context(.rz-theme-default) .cliente-det-tabs[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-tabs[b-aj1e2kwb4g] {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.10);
}

:host-context(.rz-theme-default) .cliente-det-tab[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-tab[b-aj1e2kwb4g] {
    color: #2a3441;
}

:host-context(.rz-theme-default) .cliente-det-tab:hover:not(.disabled):not(.active)[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-tab:hover:not(.disabled):not(.active)[b-aj1e2kwb4g] {
    color: #0a1019;
}

:host-context(.rz-theme-default) .cliente-det-cmp thead th[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-cmp thead th[b-aj1e2kwb4g] {
    background: rgba(0, 0, 0, 0.06);
    color: #3a4555;
    border-bottom-color: rgba(0, 0, 0, 0.18);
}

:host-context(.rz-theme-default) .cliente-det-cmp .cmp-campo[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-cmp .cmp-campo[b-aj1e2kwb4g] {
    color: #3a4555;
}

:host-context(.rz-theme-default) .cliente-det-cmp .cmp-crm[b-aj1e2kwb4g],
:host-context(.rz-theme-default) .cliente-det-cmp .cmp-rad[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-cmp .cmp-crm[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-cmp .cmp-rad[b-aj1e2kwb4g] {
    color: #1a2230;
}

:host-context(.rz-theme-default) .cliente-det-cmp .cmp-dif[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-cmp .cmp-dif[b-aj1e2kwb4g] {
    color: #c62828;
}

:host-context(.rz-theme-default) .cliente-det-vlan[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-vlan[b-aj1e2kwb4g] {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.16);
}

:host-context(.rz-theme-default) .cliente-det-vlan-table thead th[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-vlan-table thead th[b-aj1e2kwb4g] {
    background: rgba(0, 0, 0, 0.06);
    color: #3a4555;
    border-bottom-color: rgba(0, 0, 0, 0.20);
}

:host-context(.rz-theme-default) .cliente-det-vlan-table .vlan-cell[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-vlan-table .vlan-cell[b-aj1e2kwb4g] {
    color: #1a2230;
}

:host-context(.rz-theme-default) .cliente-det-vlan-table .vlan-campo[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-vlan-table .vlan-campo[b-aj1e2kwb4g] {
    color: #3a4555;
}

:host-context(.rz-theme-default) .cliente-det-vlan-table .vlan-dif[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-vlan-table .vlan-dif[b-aj1e2kwb4g] {
    color: #b85800;
}

:host-context(.rz-theme-default) .vlan-head-title[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .vlan-head-title[b-aj1e2kwb4g] {
    color: #3a4555;
}

:host-context(.rz-theme-default) .cliente-det-kv dt[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-kv dt[b-aj1e2kwb4g] {
    color: #3a4555;
}

:host-context(.rz-theme-default) .cliente-det-kv dd[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-kv dd[b-aj1e2kwb4g] {
    color: #1a2230;
}

:host-context(.rz-theme-default) .cliente-det-kv .kv-aux[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-kv .kv-aux[b-aj1e2kwb4g] {
    background: rgba(0, 0, 0, 0.06);
    color: #2a3441;
    border-color: rgba(0, 0, 0, 0.16);
}

:host-context(.rz-theme-default) .cliente-det-row[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-row[b-aj1e2kwb4g] {
    color: #2a3441;
}

:host-context(.rz-theme-default) .cliente-det-sps-foot[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-sps-foot[b-aj1e2kwb4g] {
    color: #3a4555;
    border-top-color: rgba(0, 0, 0, 0.16);
}

:host-context(.rz-theme-default) .cliente-det-sps-hint[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-sps-hint[b-aj1e2kwb4g] {
    background: rgba(33, 150, 243, 0.10);
    border-color: rgba(33, 150, 243, 0.32);
    color: #2a3441;
}

:host-context(.rz-theme-default) .cliente-det-sps-hint strong[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-sps-hint strong[b-aj1e2kwb4g] {
    color: #0a1019;
}

:host-context(.rz-theme-default) .ctx-flag.off[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .ctx-flag.off[b-aj1e2kwb4g] {
    color: #5b6470;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.16);
}

:host-context(.rz-theme-default) .cliente-det-status.status-ok[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-status.status-ok[b-aj1e2kwb4g] {
    color: #1b5e20;
    background: rgba(76, 175, 80, 0.18);
    border-color: rgba(76, 175, 80, 0.45);
}

:host-context(.rz-theme-default) .cliente-det-status.status-warn[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-status.status-warn[b-aj1e2kwb4g] {
    color: #8c6d00;
    background: rgba(255, 193, 7, 0.20);
    border-color: rgba(255, 193, 7, 0.50);
}

:host-context(.rz-theme-default) .cliente-det-status.status-danger[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-status.status-danger[b-aj1e2kwb4g] {
    color: #b71c1c;
    background: rgba(244, 67, 54, 0.18);
    border-color: rgba(244, 67, 54, 0.45);
}

:host-context(.rz-theme-default) .cliente-det-ok[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-ok[b-aj1e2kwb4g] {
    color: #1b5e20;
    background: rgba(76, 175, 80, 0.18);
    border-color: rgba(76, 175, 80, 0.42);
}

:host-context(.rz-theme-default) .cliente-det-divergencia[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .cliente-det-divergencia[b-aj1e2kwb4g] {
    color: #b71c1c;
    background: rgba(244, 67, 54, 0.18);
    border-color: rgba(244, 67, 54, 0.50);
}

:host-context(.rz-theme-default) .ctx-flag.on[b-aj1e2kwb4g],
:host-context([data-bs-theme="light"]) .ctx-flag.on[b-aj1e2kwb4g] {
    color: #1b5e20;
    background: rgba(76, 175, 80, 0.16);
    border-color: rgba(76, 175, 80, 0.40);
}
/* /Components/OnuManager/Cards/OnuCardHierarchy.razor.rz.scp.css */
/* =============================================================================
   OnuCardHierarchy — orquestrador da hierarquia ONU -> VPort -> SP -> MAC
   - Container leve (sem glass proprio: cada vport tem o seu)
   - Bloco residual "MACs sem VPort" para auditoria visual
   - Estado vazio com hint elegante
   ============================================================================= */

.onu-hierarchy[b-7ykv6dmdm9] {
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-sm);
    margin-top: var(--onu-gap-sm);
}

/* ---------- Estado vazio ---------- */

.onu-hierarchy-empty[b-7ykv6dmdm9] {
    display: inline-flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    margin-top: var(--onu-gap-sm);
    padding: 4px 8px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg);
    border: 1px dashed var(--onu-glass-border);
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.55));
    font-size: 0.62rem;
    font-style: italic;
}

.onu-hierarchy-empty .rzi[b-7ykv6dmdm9] {
    font-size: 0.75rem;
}

.onu-hierarchy-empty-hint[b-7ykv6dmdm9] {
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.4));
    font-size: 0.58rem;
    margin-left: 4px;
}

/* ---------- Bloco residual: MACs sem VPort ---------- */

.onu-hierarchy-orphans[b-7ykv6dmdm9] {
    margin-top: var(--onu-gap-xs);
    padding: var(--onu-gap-xs) var(--onu-gap-md);
    border-radius: var(--onu-radius-section);
    background: var(--onu-glass-bg);
    border: 1px dashed var(--onu-glass-border);
    -webkit-backdrop-filter: blur(calc(var(--onu-glass-blur) * 0.5));
    backdrop-filter: blur(calc(var(--onu-glass-blur) * 0.5));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .onu-hierarchy-orphans[b-7ykv6dmdm9] {
        background: var(--onu-glass-bg-solid);
    }
}

.onu-hierarchy-orphans-header[b-7ykv6dmdm9] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.55));
    margin-bottom: 2px;
}

.onu-hierarchy-orphans-header .rzi[b-7ykv6dmdm9] {
    font-size: 0.7rem;
}

.onu-hierarchy-orphans-count[b-7ykv6dmdm9] {
    margin-left: auto;
    font-size: 0.58rem;
    padding: 0 5px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
}

.onu-hierarchy-orphans-list[b-7ykv6dmdm9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onu-orphan-mac[b-7ykv6dmdm9] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    padding: 2px 4px;
    border-radius: var(--onu-radius-chip);
    font-size: 0.62rem;
    line-height: 1.4;
    transition: background var(--onu-anim-fast) var(--onu-ease);
}

.onu-orphan-mac:hover[b-7ykv6dmdm9] {
    background: var(--onu-glass-bg-strong);
}

.onu-orphan-mac.mac-disconnected[b-7ykv6dmdm9] {
    opacity: 0.6;
}

.onu-orphan-mac-dot[b-7ykv6dmdm9] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--onu-color-sp-up);
}

.onu-orphan-mac.mac-disconnected .onu-orphan-mac-dot[b-7ykv6dmdm9] {
    background: var(--onu-color-sp-down);
}

.onu-orphan-mac-address[b-7ykv6dmdm9] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.85));
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.onu-orphan-mac-chip[b-7ykv6dmdm9] {
    font-size: 0.55rem;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65));
    background: var(--onu-glass-bg-strong);
    white-space: nowrap;
}

.onu-orphan-mac-chip.vlan-tag[b-7ykv6dmdm9] {
    background: rgba(var(--rz-info-rgb, 59, 130, 246), 0.12);
    color: var(--rz-info, #2196f3);
    font-variant-numeric: tabular-nums;
}

.onu-orphan-mac-chip.ip-pppoe[b-7ykv6dmdm9] {
    background: rgba(var(--rz-info-rgb, 59, 130, 246), 0.18);
    color: var(--onu-color-ip-pppoe);
    font-weight: 600;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}
/* /Components/OnuManager/Cards/OnuCardSignal.razor.rz.scp.css */
.onu-signal[b-q4j09qt40a] {
    --signal-accent: var(--rz-success);
    --signal-accent-rgb: var(--rz-success-rgb, 76, 175, 80);
    display: grid;
    gap: var(--onu-gap-md, 8px);
    width: 100%;
    min-width: 0;
}

.onu-signal.signal-tone-warning[b-q4j09qt40a] {
    --signal-accent: var(--rz-warning);
    --signal-accent-rgb: var(--rz-warning-rgb, 255, 152, 0);
}

.onu-signal.signal-tone-critical[b-q4j09qt40a] {
    --signal-accent: var(--rz-danger);
    --signal-accent-rgb: var(--rz-danger-rgb, 244, 67, 54);
}

.signal-hero[b-q4j09qt40a] {
    display: grid;
    gap: var(--onu-gap-sm, 4px);
    padding: 0.7rem 0.75rem;
    border-radius: var(--onu-radius-panel, 10px);
    background:
        linear-gradient(145deg, rgba(var(--signal-accent-rgb), 0.14), transparent 58%),
        var(--onu-panel-bg, rgba(var(--rz-base-rgb, 20, 28, 44), 0.34));
    border: 1px solid rgba(var(--signal-accent-rgb), 0.38);
    box-shadow: inset 0 1px 0 rgba(var(--rz-base-rgb, 255, 255, 255), 0.08);
}

.signal-hero-head[b-q4j09qt40a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--onu-gap-sm, 4px);
    color: var(--rz-text-secondary-color);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.signal-title[b-q4j09qt40a] {
    font-weight: 700;
}

.signal-hero-head .rzi[b-q4j09qt40a] {
    color: var(--signal-accent);
    font-size: 1.15rem;
}

.signal-reading[b-q4j09qt40a] {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.15rem 0 0.1rem;
}

.signal-value[b-q4j09qt40a] {
    color: var(--signal-accent);
    font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.signal-range[b-q4j09qt40a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    padding: 0.1rem 0.55rem;
    border-radius: var(--onu-radius-pill, 999px);
    color: var(--rz-text-color);
    background: rgba(var(--signal-accent-rgb), 0.15);
    border: 1px solid rgba(var(--signal-accent-rgb), 0.30);
    font-size: 0.72rem;
    font-weight: 700;
}

.signal-trend[b-q4j09qt40a] {
    min-width: 0;
    color: var(--signal-accent);
    opacity: 0.86;
}

.ani-metric-grid[b-q4j09qt40a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--onu-gap-sm, 4px);
}

.ani-metric-chip[b-q4j09qt40a],
.ani-extra-chip[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-info);
    --ani-metric-accent-rgb: var(--rz-info-rgb, 33, 150, 243);
    position: relative;
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 3rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--onu-radius-section, 6px);
    background: var(--onu-panel-bg-soft, rgba(var(--rz-base-rgb, 200, 200, 200), 0.07));
    color: var(--rz-text-color);
    border: 1px solid var(--onu-panel-border, rgba(var(--rz-base-rgb, 200, 200, 200), 0.12));
    transition:
        transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
        border-color var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
        background var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
        box-shadow var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

.ani-metric-chip:hover[b-q4j09qt40a],
.ani-metric-chip:focus-visible[b-q4j09qt40a],
.ani-extra-chip:hover[b-q4j09qt40a],
.ani-extra-chip:focus-visible[b-q4j09qt40a] {
    transform: translateY(-1px);
    border-color: rgba(var(--ani-metric-accent-rgb), 0.44);
    box-shadow: 0 0 0 2px rgba(var(--ani-metric-accent-rgb), 0.10);
}

.ani-metric-chip[b-q4j09qt40a]::after,
.ani-extra-chip[b-q4j09qt40a]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.35rem);
    z-index: 20;
    width: max-content;
    max-width: 240px;
    padding: 0.42rem 0.55rem;
    border-radius: 8px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    border: 1px solid rgba(var(--ani-metric-accent-rgb), 0.34);
    box-shadow: var(--rz-shadow-4);
    font-size: 0.66rem;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.25rem) scale(0.98);
    transition:
        opacity var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
        transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

.ani-metric-chip:hover[b-q4j09qt40a]::after,
.ani-metric-chip:focus-visible[b-q4j09qt40a]::after,
.ani-extra-chip:hover[b-q4j09qt40a]::after,
.ani-extra-chip:focus-visible[b-q4j09qt40a]::after {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ani-metric-label[b-q4j09qt40a] {
    color: var(--rz-text-secondary-color);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ani-metric-value[b-q4j09qt40a] {
    color: var(--rz-text-color);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.metric-bias[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-info);
    --ani-metric-accent-rgb: var(--rz-info-rgb, 33, 150, 243);
}

.metric-temp[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-warning);
    --ani-metric-accent-rgb: var(--rz-warning-rgb, 255, 152, 0);
}

.metric-volt[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-success);
    --ani-metric-accent-rgb: var(--rz-success-rgb, 76, 175, 80);
}

.metric-rsp[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-primary);
    --ani-metric-accent-rgb: var(--rz-primary-rgb, 0, 235, 176);
}

.metric-threshold[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-secondary);
    --ani-metric-accent-rgb: var(--rz-secondary-rgb, 96, 125, 139);
}

.ani-extra-row[b-q4j09qt40a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--onu-gap-sm, 4px);
}

.ani-extra-chip[b-q4j09qt40a] {
    flex: 1 1 7.5rem;
    min-height: 2.35rem;
    padding-block: 0.35rem;
}

.ani-extra-chip .ani-metric-value[b-q4j09qt40a] {
    font-size: 0.72rem;
}

.ani-extra-row .batimento-armed[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-warning);
    --ani-metric-accent-rgb: var(--rz-warning-rgb, 255, 152, 0);
    background:
        linear-gradient(135deg, rgba(var(--ani-metric-accent-rgb), 0.18), transparent 66%),
        var(--onu-panel-bg-soft, rgba(var(--rz-base-rgb, 200, 200, 200), 0.07));
    border-color: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.32);
}

@media (prefers-reduced-motion: reduce) {
    .ani-metric-chip[b-q4j09qt40a],
    .ani-metric-chip[b-q4j09qt40a]::after,
    .ani-extra-chip[b-q4j09qt40a],
    .ani-extra-chip[b-q4j09qt40a]::after {
        transition: none;
    }
}
/* /Components/OnuManager/Cards/OnuCardVportSection.razor.rz.scp.css */
/* =============================================================================
   OnuCardVportSection — uma fatia da hierarquia ONU
   - Glass nivel 2 (mais sutil que o WAN/Hierarchy)
   - Borda esquerda colorida pelo tipo do vport
   - Smart collapse via <details>: header sempre visivel; body so quando aberto
   - Service ports e MACs aninhados dentro do mesmo cartao para reforcar parentesco
   ============================================================================= */

.onu-vport[b-296rwh2klf] {
    margin-top: var(--onu-gap-sm);
    padding: 0;
    border-radius: var(--onu-radius-section);
    background: var(--onu-glass-bg);
    border: 1px solid var(--onu-glass-border);
    border-left: 3px solid var(--onu-color-vport-other);
    -webkit-backdrop-filter: blur(calc(var(--onu-glass-blur) * 0.6)) saturate(var(--onu-glass-saturation));
    backdrop-filter: blur(calc(var(--onu-glass-blur) * 0.6)) saturate(var(--onu-glass-saturation));
    overflow: hidden;
    transition: background var(--onu-anim-medium) var(--onu-ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .onu-vport[b-296rwh2klf] {
        background: var(--onu-glass-bg-solid);
    }
}

.onu-vport.vport-pppoe[b-296rwh2klf] { border-left-color: var(--onu-color-vport-pppoe); }
.onu-vport.vport-ipoe[b-296rwh2klf]  { border-left-color: var(--onu-color-vport-ipoe); }
.onu-vport.vport-wifi[b-296rwh2klf]  { border-left-color: var(--onu-color-vport-wifi); }
.onu-vport.vport-mixed[b-296rwh2klf] {
    border-left-color: var(--onu-color-vport-pppoe);
    border-image: linear-gradient(to bottom,
        var(--onu-color-vport-pppoe),
        var(--onu-color-vport-ipoe)) 1;
}

.onu-vport.is-collapsed[b-296rwh2klf] {
    opacity: 0.78;
}

/* ---------- Summary (sempre visivel) ---------- */

.onu-vport-summary[b-296rwh2klf] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    padding: 4px var(--onu-gap-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.66rem;
    line-height: 1.4;
    min-width: 0;
}

/* Esconde o disclosure default em todos os browsers */
.onu-vport-summary[b-296rwh2klf]::-webkit-details-marker { display: none; }
.onu-vport-summary[b-296rwh2klf]::marker { content: ''; }

.onu-vport-summary:focus-visible[b-296rwh2klf] {
    outline: 2px solid var(--rz-primary, #1976d2);
    outline-offset: -2px;
}

.onu-vport-marker[b-296rwh2klf] {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--onu-anim-fast) var(--onu-ease);
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.5));
}

.onu-vport.is-open .onu-vport-marker[b-296rwh2klf] {
    transform: rotate(45deg);
}

.onu-vport-title[b-296rwh2klf] {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.92));
    flex-shrink: 0;
}

.onu-vport-kind[b-296rwh2klf] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65));
    padding: 1px 6px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    flex-shrink: 0;
}

.vport-pppoe .onu-vport-kind[b-296rwh2klf] { color: var(--onu-color-vport-pppoe); }
.vport-ipoe  .onu-vport-kind[b-296rwh2klf] { color: var(--onu-color-vport-ipoe); }
.vport-wifi  .onu-vport-kind[b-296rwh2klf] { color: var(--onu-color-vport-wifi); }
.vport-mixed .onu-vport-kind[b-296rwh2klf] {
    background: linear-gradient(90deg,
        rgba(var(--rz-primary-rgb, 25, 118, 210), 0.18),
        rgba(var(--rz-info-rgb, 2, 136, 209), 0.18));
    color: var(--rz-text-color, rgba(255, 255, 255, 0.92));
}

.onu-vport-spacer[b-296rwh2klf] {
    flex: 1 1 auto;
    min-width: 0;
}

.onu-vport-summary-chip[b-296rwh2klf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
    flex-shrink: 0;
}

.onu-vport-summary-chip .rzi[b-296rwh2klf] {
    font-size: 0.65rem;
}

/* Resumo WAN (login PPPoE / IP) exibido no header colapsado do vport.
   Aparece apos os chips de SP/MAC para que o usuario veja info relevante
   sem precisar expandir o vport. */
.onu-vport-summary-wan[b-296rwh2klf] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.56rem;
    font-weight: 500;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(var(--rz-base-rgb, 200, 200, 200), 0.08);
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.58));
    border: 1px solid rgba(var(--rz-base-rgb, 200, 200, 200), 0.10);
    flex: 1 1 clamp(72px, 28cqi, 220px);
    min-width: 0;
    max-width: clamp(72px, 38cqi, 220px);
    overflow: hidden;
    white-space: nowrap;
    cursor: help;
}

.onu-vport-summary-wan .vport-wan-kind[b-296rwh2klf] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.5rem;
    padding: 0 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.onu-vport-summary-wan.wan-kind-pppoe .vport-wan-kind[b-296rwh2klf] {
    background: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.22);
    color: var(--onu-color-vport-pppoe);
}

.onu-vport-summary-wan.wan-kind-ipoe .vport-wan-kind[b-296rwh2klf] {
    background: rgba(var(--rz-info-rgb, 2, 136, 209), 0.22);
    color: var(--onu-color-vport-ipoe);
}

.onu-vport-summary-wan .vport-wan-login[b-296rwh2klf] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.55rem;
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.72));
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.onu-vport-summary-wan .vport-wan-ip[b-296rwh2klf] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.55rem;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.58));
    font-weight: 500;
    flex-shrink: 0;
}

/* ---------- Body (visivel quando details[open]) ---------- */

.onu-vport-body[b-296rwh2klf] {
    padding: var(--onu-gap-xs) var(--onu-gap-md) var(--onu-gap-sm);
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-xs);
    animation: onuVportSlideFade-b-296rwh2klf var(--onu-anim-medium) var(--onu-ease);
}

@keyframes onuVportSlideFade-b-296rwh2klf {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Service Port ---------- */

.onu-sp[b-296rwh2klf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 5px;
    border-radius: var(--onu-radius-chip);
    background: rgba(0, 0, 0, 0.06);
    cursor: help;
    transition: background var(--onu-anim-fast) var(--onu-ease);
}

.dark-theme .onu-sp[b-296rwh2klf],
[data-bs-theme="dark"] .onu-sp[b-296rwh2klf],
:root:not(.light-theme):not([data-bs-theme="light"]) .onu-sp[b-296rwh2klf] {
    background: rgba(255, 255, 255, 0.04);
}

.onu-sp:hover[b-296rwh2klf] {
    background: var(--onu-glass-bg-strong);
}

.onu-sp.sp-down[b-296rwh2klf] {
    opacity: 0.55;
}

.onu-sp-header[b-296rwh2klf] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    flex-wrap: wrap;
    font-size: 0.64rem;
    line-height: 1.4;
}

.onu-sp-dot[b-296rwh2klf] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--onu-color-sp-up);
    box-shadow: 0 0 4px var(--onu-color-sp-up);
}

.onu-sp.sp-down .onu-sp-dot[b-296rwh2klf] {
    background: var(--onu-color-sp-down);
    box-shadow: none;
}

.onu-sp-id[b-296rwh2klf] {
    font-weight: 700;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.9));
    letter-spacing: 0.02em;
}

.onu-sp-kind[b-296rwh2klf] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
}

.onu-sp-kind-pppoe[b-296rwh2klf] {
    background: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.22);
    color: var(--onu-color-vport-pppoe);
}

.onu-sp-kind-ipoe[b-296rwh2klf] {
    background: rgba(var(--rz-info-rgb, 2, 136, 209), 0.22);
    color: var(--onu-color-vport-ipoe);
}

.onu-sp-kind-wifi[b-296rwh2klf] {
    background: rgba(var(--rz-series-7-rgb, 186, 104, 200), 0.22);
    color: var(--onu-color-vport-wifi);
}

.onu-sp.sp-pppoe[b-296rwh2klf] { box-shadow: inset 2px 0 0 0 rgba(var(--rz-primary-rgb, 25, 118, 210), 0.55); }
.onu-sp.sp-ipoe[b-296rwh2klf]  { box-shadow: inset 2px 0 0 0 rgba(var(--rz-info-rgb, 2, 136, 209), 0.55); }
.onu-sp.sp-wifi[b-296rwh2klf]  { box-shadow: inset 2px 0 0 0 rgba(var(--rz-series-7-rgb, 186, 104, 200), 0.55); }

.onu-sp-vlan-chip[b-296rwh2klf] {
    font-variant-numeric: tabular-nums;
    padding: 0 5px;
    border-radius: 2px;
    font-weight: 500;
    font-size: 0.62rem;
}

.onu-sp-vlan-chip.vlan-user[b-296rwh2klf]  { background: rgba(var(--rz-info-rgb, 59, 130, 246), 0.15);    color: var(--rz-info, #2196f3); }
.onu-sp-vlan-chip.vlan-inner[b-296rwh2klf] { background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.15);  color: var(--rz-success, #4caf50); }
.onu-sp-vlan-chip.vlan-outer[b-296rwh2klf] { background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.15);  color: var(--rz-warning, #ff9800); }
.onu-sp-vlan-chip.vlan-range[b-296rwh2klf] { background: rgba(var(--rz-primary-rgb, 156, 39, 176), 0.15); color: var(--rz-primary, #9c27b0); }

.onu-sp-mode[b-296rwh2klf] {
    margin-left: auto;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.45));
    font-style: italic;
    font-size: 0.6rem;
}

/* ---------- MACs aninhados no SP ---------- */

.onu-sp-mac-list[b-296rwh2klf] {
    list-style: none;
    margin: 2px 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px dashed var(--onu-glass-border);
    padding-left: var(--onu-gap-sm);
}

.onu-mac[b-296rwh2klf] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    flex-wrap: wrap;
    padding: 2px 4px;
    border-radius: var(--onu-radius-chip);
    font-size: 0.62rem;
    line-height: 1.4;
    min-width: 0;
    transition: background var(--onu-anim-fast) var(--onu-ease);
}

.onu-mac:hover[b-296rwh2klf] {
    background: var(--onu-glass-bg-strong);
}

.onu-mac.mac-disconnected[b-296rwh2klf] {
    opacity: 0.6;
}

.onu-mac-dot[b-296rwh2klf] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--onu-color-sp-up);
    box-shadow: 0 0 4px var(--onu-color-sp-up);
}

.onu-mac.mac-disconnected .onu-mac-dot[b-296rwh2klf] {
    background: var(--onu-color-sp-down);
    box-shadow: none;
}

.onu-mac-address[b-296rwh2klf] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.88));
    letter-spacing: 0.01em;
    flex: 1 1 11ch;
    min-width: 8ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onu-mac-chip[b-296rwh2klf] {
    font-size: 0.55rem;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65));
    background: var(--onu-glass-bg-strong);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.onu-mac-chip.vlan-tag[b-296rwh2klf] {
    background: rgba(var(--rz-info-rgb, 59, 130, 246), 0.12);
    color: var(--rz-info, #2196f3);
    font-variant-numeric: tabular-nums;
}

.onu-mac-chip.ip-pppoe[b-296rwh2klf] {
    background: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.12);
    color: var(--onu-color-vport-pppoe);
    font-weight: 500;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.onu-mac-chip.ip-ipoe[b-296rwh2klf] {
    background: rgba(var(--rz-info-rgb, 2, 136, 209), 0.12);
    color: var(--onu-color-vport-ipoe);
    font-weight: 500;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.onu-mac-chip.ip-pppoe .rzi[b-296rwh2klf],
.onu-mac-chip.ip-ipoe .rzi[b-296rwh2klf] {
    font-size: 0.6rem;
}

.onu-mac-chip.mac-time[b-296rwh2klf] {
    margin-left: auto;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.5));
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .onu-vport-body[b-296rwh2klf] {
        animation: none;
    }
}
/* /Components/OnuManager/Cards/OnuCardWanSection.razor.rz.scp.css */
/* =============================================================================
   OnuCardWanSection — bloco WAN/ACS no rodape do card
   - Glass nivel 1 (Apple-like): blur 12px + saturate 140%
   - Renderizado APENAS quando ha hits (lazy via @if no markup)
   - Cada device em uma linha com dot de status, CPE, IP, last_inform, tag
   ============================================================================= */

.onu-wan-section[b-x5rvdjkhm2] {
    margin-top: var(--onu-gap-md);
    padding: var(--onu-gap-sm) var(--onu-gap-md);
    border-radius: var(--onu-radius-section);
    background: var(--onu-glass-bg);
    border: 1px solid var(--onu-glass-border);
    -webkit-backdrop-filter: blur(var(--onu-glass-blur)) saturate(var(--onu-glass-saturation));
    backdrop-filter: blur(var(--onu-glass-blur)) saturate(var(--onu-glass-saturation));
    box-shadow: var(--onu-glass-shadow);
    transition: background var(--onu-anim-medium) var(--onu-ease),
                border-color var(--onu-anim-medium) var(--onu-ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .onu-wan-section[b-x5rvdjkhm2] {
        background: var(--onu-glass-bg-solid);
    }
}

.onu-wan-section-header[b-x5rvdjkhm2] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    margin-bottom: var(--onu-gap-xs);
}

.onu-wan-section-title[b-x5rvdjkhm2] {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.55));
}

.onu-wan-section-count[b-x5rvdjkhm2] {
    font-size: 0.6rem;
    padding: 0 var(--onu-gap-sm);
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
    line-height: 1.4;
}

.onu-wan-list[b-x5rvdjkhm2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-xs);
}

.onu-wan-item[b-x5rvdjkhm2] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    padding: var(--onu-gap-xs) var(--onu-gap-sm);
    border-radius: var(--onu-radius-chip);
    font-size: 0.66rem;
    line-height: 1.4;
    cursor: help;
    border-left: 2px solid transparent;
    min-width: 0;
    transition: background var(--onu-anim-fast) var(--onu-ease);
}

.onu-wan-item:hover[b-x5rvdjkhm2] {
    background: var(--onu-glass-bg-strong);
}

/* --- Hierarquia visual: online primary > online secondary > offline --- */

.onu-wan-item.wan-online[b-x5rvdjkhm2] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.06);
    border-left-color: var(--onu-color-wan-online);
}

.onu-wan-item.wan-online:hover[b-x5rvdjkhm2] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.12);
}

.onu-wan-item.wan-secondary[b-x5rvdjkhm2] {
    opacity: 0.7;
}

.onu-wan-item.wan-secondary .onu-wan-cpe[b-x5rvdjkhm2],
.onu-wan-item.wan-secondary .onu-wan-ip[b-x5rvdjkhm2] {
    font-weight: 400;
}

.onu-wan-item.wan-offline[b-x5rvdjkhm2] {
    opacity: 0.45;
}

.onu-wan-item.wan-offline .onu-wan-cpe[b-x5rvdjkhm2],
.onu-wan-item.wan-offline .onu-wan-ip[b-x5rvdjkhm2] {
    font-weight: 400;
}

.onu-wan-dot[b-x5rvdjkhm2] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.onu-wan-dot.dot-online[b-x5rvdjkhm2] {
    background: var(--onu-color-wan-online);
    box-shadow: 0 0 4px var(--onu-color-wan-online), 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.onu-wan-dot.dot-secondary[b-x5rvdjkhm2] {
    background: var(--onu-color-wan-secondary);
}

.onu-wan-dot.dot-offline[b-x5rvdjkhm2] {
    background: var(--onu-color-wan-offline);
    opacity: 0.7;
}

.onu-wan-kind[b-x5rvdjkhm2] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    flex-shrink: 0;
}

.onu-wan-kind-pppoe[b-x5rvdjkhm2] {
    background: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.22);
    color: var(--onu-color-vport-pppoe);
}

.onu-wan-kind-ipoe[b-x5rvdjkhm2] {
    background: rgba(var(--rz-info-rgb, 2, 136, 209), 0.22);
    color: var(--onu-color-vport-ipoe);
}

.onu-wan-cpe[b-x5rvdjkhm2] {
    flex: 1 1 10ch;
    min-width: 6ch;
    font-weight: 500;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.9));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onu-wan-ip[b-x5rvdjkhm2] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--onu-color-ip-wan);
    letter-spacing: 0.01em;
    flex: 0 0 auto;
    white-space: nowrap;
}

.onu-wan-item.wan-online .onu-wan-ip[b-x5rvdjkhm2] {
    font-size: 0.7rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(var(--rz-success-rgb, 76, 175, 80), 0.35);
}

.onu-wan-spacer[b-x5rvdjkhm2] {
    flex: 1 1 0;
    min-width: 0;
}

.onu-wan-time[b-x5rvdjkhm2] {
    font-size: 0.6rem;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.5));
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.onu-wan-tag[b-x5rvdjkhm2] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: var(--onu-radius-chip);
    flex-shrink: 0;
}

.onu-wan-tag-primary[b-x5rvdjkhm2] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.28);
    color: var(--onu-color-wan-online);
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(var(--rz-success-rgb, 76, 175, 80), 0.30);
}

/* Secondary discreto: sem fundo, sem peso extra, apenas marcador minimal */
.onu-wan-tag-sec[b-x5rvdjkhm2] {
    background: transparent;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.5));
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 1px 4px;
    border: 1px solid var(--onu-glass-border);
}

.onu-wan-tag-off[b-x5rvdjkhm2] {
    background: transparent;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.45));
    font-size: 0.5rem;
    font-weight: 500;
    padding: 1px 4px;
    border: 1px dashed var(--onu-glass-border);
}

.onu-wan-item:focus-visible[b-x5rvdjkhm2] {
    outline: 2px solid var(--rz-primary, #1976d2);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .onu-wan-cpe[b-x5rvdjkhm2] {
        max-width: 10ch;
    }

    .onu-wan-time[b-x5rvdjkhm2] {
        display: none;
    }
}
/* /Components/OnuManager/Cards/OnuReassignBanner.razor.rz.scp.css */
.onu-reassign-banner[b-vaa3vdwcqy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--onu-card-radius, 8px);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rz-success, #22c55e) 18%, transparent),
        color-mix(in srgb, var(--rz-success, #22c55e) 6%, transparent));
    border-left: 3px solid var(--rz-success, #22c55e);
    color: var(--rz-text-primary, #222);
    box-shadow: var(--onu-elevation-1, 0 1px 2px rgba(0,0,0,0.08));
    animation: reassignBannerIn-b-vaa3vdwcqy 220ms ease-out;
}

.banner-illust[b-vaa3vdwcqy] {
    width: 56px;
    height: 36px;
    color: var(--rz-success, #22c55e);
    flex-shrink: 0;
}

.banner-text[b-vaa3vdwcqy] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.banner-title[b-vaa3vdwcqy] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-success-dark, #15803d);
}

.banner-sub[b-vaa3vdwcqy] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary, #555);
}

@keyframes reassignBannerIn-b-vaa3vdwcqy {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .onu-reassign-banner[b-vaa3vdwcqy] { animation: none; }
}
/* /Components/OnuManager/Cards/OnuWifiConfigDialog.razor.rz.scp.css */
.onu-wifi-dialog[b-6z80qbbex9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 180px;
}

.wifi-form-grid[b-6z80qbbex9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.wifi-form-grid > span[b-6z80qbbex9] {
    color: var(--rz-text-secondary-color, #6b7280);
}

@media (max-width: 720px) {
    .wifi-form-grid[b-6z80qbbex9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/OnuManager/EmptyStates/OnuGridEmptyState.razor.rz.scp.css */
.onu-empty-state[b-0b00qez1iw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary, #777);
}

.onu-empty-illustration[b-0b00qez1iw] {
    width: 240px;
    max-width: 70vw;
    color: var(--rz-text-secondary, #777);
    opacity: 0.85;
}

.empty-svg[b-0b00qez1iw] {
    width: 100%;
    height: auto;
    display: block;
}

.empty-svg-pulse[b-0b00qez1iw] {
    animation: onuEmptyPulse-b-0b00qez1iw 2s ease-in-out infinite;
}

@keyframes onuEmptyPulse-b-0b00qez1iw {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.onu-empty-body[b-0b00qez1iw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 480px;
}

.onu-empty-title[b-0b00qez1iw] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--rz-text-primary, #333);
}

.onu-empty-subtitle[b-0b00qez1iw] {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--rz-text-secondary, #777);
}

.mode-noresults .onu-empty-title[b-0b00qez1iw] {
    color: var(--rz-warning-dark, #b45309);
}

.mode-selectolt .onu-empty-title[b-0b00qez1iw] {
    color: var(--rz-primary, #3b82f6);
}

@media (prefers-reduced-motion: reduce) {
    .empty-svg-pulse[b-0b00qez1iw] { animation: none; }
}

@media (max-width: 600px) {
    .onu-empty-illustration[b-0b00qez1iw] { width: 180px; }
    .onu-empty-state[b-0b00qez1iw] { padding: 1.5rem 0.75rem; }
}
/* /Components/OnuManager/Insights/NetworkGroupInsightDialog.razor.rz.scp.css */
.insight-dialog[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.insight-header[b-ses38l3h2e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.insight-title-row[b-ses38l3h2e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.insight-title[b-ses38l3h2e] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.insight-subtitle[b-ses38l3h2e] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

[b-ses38l3h2e] .insight-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-ses38l3h2e] .insight-tabs .rz-tabview-panels {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.tab-content[b-ses38l3h2e] {
    padding: 1rem;
}

.summary-grid[b-ses38l3h2e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    border-radius: 8px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    transition: transform 0.2s ease;
}

.summary-card:hover[b-ses38l3h2e] {
    transform: translateY(-2px);
}

.summary-card .rz-icon[b-ses38l3h2e] {
    font-size: 1.4rem;
}

.summary-online .rz-icon[b-ses38l3h2e],
.summary-online .summary-value[b-ses38l3h2e] { color: var(--rz-success); }

.summary-offline .rz-icon[b-ses38l3h2e],
.summary-offline .summary-value[b-ses38l3h2e] { color: var(--rz-danger); }

.summary-total .rz-icon[b-ses38l3h2e],
.summary-total .summary-value[b-ses38l3h2e] { color: var(--rz-info); }

.summary-signal .rz-icon[b-ses38l3h2e],
.summary-signal .summary-value[b-ses38l3h2e] { color: var(--rz-primary); }

.summary-min .rz-icon[b-ses38l3h2e],
.summary-min .summary-value[b-ses38l3h2e] { color: var(--rz-warning); }

.summary-max .rz-icon[b-ses38l3h2e],
.summary-max .summary-value[b-ses38l3h2e] { color: var(--rz-success); }

.summary-value[b-ses38l3h2e] {
    font-size: 1.25rem;
    font-weight: 700;
}

.summary-label[b-ses38l3h2e] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-section[b-ses38l3h2e] {
    margin-bottom: 1.25rem;
}

.summary-section h4[b-ses38l3h2e] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.state-chips[b-ses38l3h2e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.top-list[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.top-item[b-ses38l3h2e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.top-item.danger[b-ses38l3h2e] {
    background: var(--rz-danger-lighter);
    border-left: 3px solid var(--rz-danger);
}

.top-item.success[b-ses38l3h2e] {
    background: var(--rz-success-lighter);
    border-left: 3px solid var(--rz-success);
}

.top-name[b-ses38l3h2e] {
    font-weight: 500;
    color: var(--rz-text-color);
}

.top-value[b-ses38l3h2e] {
    font-weight: 600;
    font-family: monospace;
}

.summary-footer[b-ses38l3h2e] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--rz-info-lighter);
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

.charts-tab[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

[b-ses38l3h2e] .insight-grid {
    max-height: 60vh;
}

@media (max-width: 768px) {
    .summary-grid[b-ses38l3h2e] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/OnuManager/Insights/OnuInsightDialog.razor.rz.scp.css */
.onu-insight-dialog[b-nfgkau1fcc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.onu-insight-header[b-nfgkau1fcc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.onu-insight-title-row[b-nfgkau1fcc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.onu-insight-title[b-nfgkau1fcc] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.onu-insight-subtitle[b-nfgkau1fcc] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

[b-nfgkau1fcc] .onu-insight-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-nfgkau1fcc] .onu-insight-tabs .rz-tabview-panels {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.tab-content-scroll[b-nfgkau1fcc] {
    padding: 1rem;
    overflow-y: auto;
}

.trend-placeholder[b-nfgkau1fcc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

.trend-placeholder h4[b-nfgkau1fcc] {
    margin: 0;
    color: var(--rz-text-title-color);
}

.trend-placeholder p[b-nfgkau1fcc] {
    max-width: 400px;
    font-size: 0.9rem;
}

.onu-insight-empty[b-nfgkau1fcc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--rz-warning);
}
/* /Components/OnuManager/Insights/StateDonutChart.razor.rz.scp.css */
.donut-row[b-q5m2xud3jp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .donut-row[b-q5m2xud3jp] {
        grid-template-columns: 1fr;
    }
}
/* /Components/OnuManager/OnuConnectionStatusBadge.razor.rz.scp.css */
.onu-connection-status[b-76fpyzsrwi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.onu-connection-illust[b-76fpyzsrwi] {
    width: 28px;
    height: 28px;
    color: var(--rz-danger, #dc3545);
    opacity: 0.95;
    animation: connectionLostPulse-b-76fpyzsrwi 2.4s ease-in-out infinite;
}

@keyframes connectionLostPulse-b-76fpyzsrwi {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(-1px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .onu-connection-illust[b-76fpyzsrwi] { animation: none; }
}
/* /Components/Pages/SnmpAlarms.razor.rz.scp.css */
.snmp-alarms-page .snmp-metric-card[b-lb7h5y4td3] {
    height: 100%;
    border-left: 4px solid var(--rz-primary);
}

.snmp-alarms-page .snmp-metric-critical[b-lb7h5y4td3] {
    border-left-color: var(--rz-danger, #dc3545);
}

.snmp-alarms-page .snmp-metric-major[b-lb7h5y4td3] {
    border-left-color: var(--rz-warning, #ffb400);
}

.snmp-alarms-page .snmp-metric-minor[b-lb7h5y4td3] {
    border-left-color: var(--rz-info, #17a2b8);
}

.snmp-alarms-page .snmp-detail-section[b-lb7h5y4td3] {
    background: var(--rz-base-100);
    border-radius: 6px;
    padding: 0.75rem;
}

.snmp-alarms-page .snmp-cpu-badge[b-lb7h5y4td3] {
    font-weight: 700;
    letter-spacing: 0.02em;
}

[data-bs-theme="dark"] .snmp-alarms-page .snmp-detail-section[b-lb7h5y4td3],
.rz-dark .snmp-alarms-page .snmp-detail-section[b-lb7h5y4td3] {
    background: var(--rz-base-800, #1f1f1f);
}
/* /Components/Pages/SyslogObservability.razor.rz.scp.css */
.syslog-observability-page .syslog-metric-card[b-pbtdebu2bg] {
    height: 100%;
    border-left: 4px solid var(--rz-primary);
}

.syslog-observability-page .syslog-metric-card-ok[b-pbtdebu2bg] {
    border-left-color: var(--rz-success, #28a745);
}

.syslog-observability-page .syslog-metric-card-warn[b-pbtdebu2bg] {
    border-left-color: var(--rz-warning, #ffb400);
}

.syslog-observability-page .syslog-metric-card-alarm[b-pbtdebu2bg] {
    border-left-color: var(--rz-danger, #dc3545);
}

.syslog-observability-page .syslog-hb-card[b-pbtdebu2bg] {
    border-left: 4px solid var(--rz-success, #28a745);
}

.syslog-observability-page .syslog-hb-ok[b-pbtdebu2bg] {
    border-left-color: var(--rz-success, #28a745);
}

.syslog-observability-page .syslog-hb-warn[b-pbtdebu2bg] {
    border-left-color: var(--rz-warning, #ffb400);
}

.syslog-observability-page .syslog-hb-bad[b-pbtdebu2bg] {
    border-left-color: var(--rz-danger, #dc3545);
}

.syslog-observability-page .syslog-unmapped-msg[b-pbtdebu2bg] {
    display: block;
    background: var(--rz-base-100);
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.2;
    word-break: break-all;
    white-space: pre-wrap;
    color: var(--rz-text-color);
}

[data-bs-theme="dark"] .syslog-observability-page .syslog-unmapped-msg[b-pbtdebu2bg],
.rz-dark .syslog-observability-page .syslog-unmapped-msg[b-pbtdebu2bg] {
    background: var(--rz-base-800, #1f1f1f);
}
/* /Components/Shared/RecentEventBadge.razor.rz.scp.css */
/* Chip individual no card */
.recent-event-chip[b-n968ntwg24] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid currentColor;
    cursor: help;
    user-select: none;
    animation: recent-event-pulse-b-n968ntwg24 2s ease-in-out infinite;
    background: rgba(255, 255, 255, 0.45);
}

.recent-event-chip .rz-icon[b-n968ntwg24] {
    font-size: 0.95rem;
    line-height: 1;
}

/* SVGs custom (T5) renderizados via mask-image para herdar `currentColor`
   das classes kind-* que ja definem cor semantica. */
.recent-event-svg[b-n968ntwg24] {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    flex-shrink: 0;
}

.recent-event-svg-cloud-on[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/cloud-on.svg");
            mask-image: url("/icons/onu/state/cloud-on.svg");
}
.recent-event-svg-cloud-off[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/cloud-off.svg");
            mask-image: url("/icons/onu/state/cloud-off.svg");
}
.recent-event-svg-dying-gasp[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/dying-gasp.svg");
            mask-image: url("/icons/onu/state/dying-gasp.svg");
}
.recent-event-svg-signal-drop[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/signal-drop.svg");
            mask-image: url("/icons/onu/state/signal-drop.svg");
}
.recent-event-svg-router[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/router.svg");
            mask-image: url("/icons/onu/state/router.svg");
}
.recent-event-svg-bolt[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/bolt.svg");
            mask-image: url("/icons/onu/state/bolt.svg");
    width: 15px;
    height: 15px;
}

.recent-event-chip.kind-connected[b-n968ntwg24] {
    color: var(--rz-success);
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.12);
}

.recent-event-chip.kind-disconnected[b-n968ntwg24] {
    color: var(--rz-danger);
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.12);
}

.recent-event-chip.kind-dyingGasp[b-n968ntwg24] {
    color: var(--rz-warning);
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.18);
}

.recent-event-chip.kind-signalDrop[b-n968ntwg24] {
    color: var(--rz-warning);
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.12);
}

.recent-event-chip.kind-unconfigured[b-n968ntwg24] {
    color: var(--rz-info);
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.12);
}

.recent-event-text[b-n968ntwg24] {
    white-space: nowrap;
}

/* Badge agregado em headers */
.recent-event-aggregate[b-n968ntwg24] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--rz-warning-rgb, 255, 152, 0), 0.25), rgba(var(--rz-warning-rgb, 255, 152, 0), 0.15));
    color: var(--rz-warning-darker, #e65100);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: help;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    animation: recent-event-pulse-b-n968ntwg24 1.6s ease-in-out infinite;
}

.recent-event-aggregate .rz-icon[b-n968ntwg24] {
    font-size: 1rem;
    line-height: 1;
}

@keyframes recent-event-pulse-b-n968ntwg24 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* ============================================================
   batimento_por_atenuacao T06: badges paralelos.
   - .group-state       -> badge VERMELHO (queda).
   - .group-attenuation -> badge AMARELO  (atenuacao).
   Aplicado tanto no chip individual (.recent-event-chip) quanto no
   badge agregado (.recent-event-aggregate). Modificadores de cor por
   group-* sobrepoem os estilos genericos definidos acima.
   ============================================================ */

/* Aggregate: state -> vermelho */
.recent-event-aggregate.group-state[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(var(--rz-danger-rgb, 244, 67, 54), 0.25), rgba(var(--rz-danger-rgb, 244, 67, 54), 0.15));
    color: var(--rz-danger-darker, #b71c1c);
}

/* Aggregate: attenuation -> amarelo */
.recent-event-aggregate.group-attenuation[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(var(--rz-warning-rgb, 255, 193, 7), 0.30), rgba(var(--rz-warning-rgb, 255, 193, 7), 0.18));
    color: var(--rz-warning-darker, #f57f17);
}

/* Chip individual de atenuacao: amarelo (override do default). */
.recent-event-chip.group-attenuation[b-n968ntwg24] {
    color: var(--rz-warning-darker, #f57f17);
    background: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.18);
    border-color: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.55);
}

/* Dark mode contrast */
:global(.rz-dark) .recent-event-chip[b-n968ntwg24] {
    background: rgba(255, 255, 255, 0.08);
}

:global(.rz-dark) .recent-event-chip.kind-connected[b-n968ntwg24] {
    background: rgba(76, 175, 80, 0.22);
}

:global(.rz-dark) .recent-event-chip.kind-disconnected[b-n968ntwg24] {
    background: rgba(244, 67, 54, 0.22);
}

:global(.rz-dark) .recent-event-aggregate[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.35), rgba(255, 152, 0, 0.20));
    color: #ffcc80;
}

:global(.rz-dark) .recent-event-aggregate.group-state[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.40), rgba(244, 67, 54, 0.22));
    color: #ffab91;
}

:global(.rz-dark) .recent-event-aggregate.group-attenuation[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.42), rgba(255, 193, 7, 0.22));
    color: #ffe082;
}

:global(.rz-dark) .recent-event-chip.group-attenuation[b-n968ntwg24] {
    background: rgba(255, 193, 7, 0.22);
    color: #ffe082;
    border-color: rgba(255, 193, 7, 0.55);
}