/* =============================================================================
   ONU Card design tokens
   ----------------------------------------------------------------------------
   Centraliza decisoes visuais do OnuCard hierarquico (ONU -> VPort -> SP -> MAC).
   - Glass morphism estilo Apple (blur + saturate + bordas translucidas)
   - Smart collapse para vports vazios
   - Footer dedicado para WAN/ACS
   - Pulse de borda + chip flash para feedback de update realtime

   Referencias preferenciais:
   - Cores semanticas devem usar `--rz-*` (success/warning/danger/info/primary)
     ja sobrescritas em `wwwroot/css/site.css`. Os tokens `--onu-color-*` apenas
     dao nome semantico ao no da hierarquia.
   - Light mode usa `prefers-color-scheme` E `.dark-theme`/`[data-bs-theme]`
     fallback, alinhado com o resto do app.
   ============================================================================= */

:root {
    /* ---------- Glass (default = dark) ---------- */
    --onu-glass-bg: rgba(255, 255, 255, 0.06);
    --onu-glass-bg-strong: rgba(255, 255, 255, 0.10);
    --onu-glass-border: rgba(255, 255, 255, 0.10);
    --onu-glass-border-strong: rgba(255, 255, 255, 0.16);
    --onu-glass-blur: 12px;
    --onu-glass-saturation: 140%;
    --onu-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);

    /* Fallback para navegadores sem backdrop-filter */
    --onu-glass-bg-solid: rgba(20, 24, 32, 0.78);

    /* ---------- Espacamento ---------- */
    --onu-gap-xs: 2px;
    --onu-gap-sm: 4px;
    --onu-gap-md: 8px;
    --onu-gap-lg: 12px;

    /* ---------- Raios ---------- */
    --onu-radius-chip: 3px;
    --onu-radius-section: 6px;
    --onu-radius-card: 4px;

    /* ---------- Animacao ---------- */
    --onu-anim-fast: 120ms;
    --onu-anim-medium: 200ms;
    --onu-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Cores semanticas por no da hierarquia ---------- */
    /* Vport */
    --onu-color-vport-pppoe: var(--rz-primary, #1976d2);
    --onu-color-vport-ipoe:  var(--rz-info, #0288d1);
    --onu-color-vport-wifi:  var(--rz-series-7, #ba68c8);
    --onu-color-vport-other: var(--rz-base-500, #6b7280);

    /* Service Port */
    --onu-color-sp-up:   var(--rz-success, #4caf50);
    --onu-color-sp-down: var(--rz-danger, #f44336);

    /* MAC / IP */
    --onu-color-mac:      var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65));
    --onu-color-ip-pppoe: var(--rz-info, #0288d1);
    --onu-color-ip-wan:   var(--rz-success, #4caf50);

    /* WAN ACS */
    --onu-color-wan-online:    var(--rz-success, #4caf50);
    --onu-color-wan-offline:   var(--rz-base-500, #9e9e9e);
    --onu-color-wan-secondary: var(--rz-warning, #ff9800);

    /* ---------- Pulse / flash (feedback realtime) ---------- */
    --onu-pulse-color-signal: var(--rz-info, #0288d1);
    --onu-pulse-color-mac:    var(--rz-warning, #ff9800);
    --onu-pulse-color-state:  var(--rz-success, #4caf50);
    --onu-pulse-color-error:  var(--rz-danger, #f44336);

    /* ---------- Visual Pro (Pilar 2) ----------
       Elevations e radius unificados consumidos por OnuCard, group headers
       e empty states. Mantemos os tokens originais acima para nao quebrar
       componentes legados; novos tokens vivem aqui. */
    --onu-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
    --onu-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.12);
    --onu-elevation-hover: 0 4px 8px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.16);

    --onu-status-bar-w: 4px;
    --onu-card-radius: 8px;
    --onu-card-radius-sm: 4px;
    --onu-header-radius: 8px;
    --onu-card-radius-modern: 14px;
    --onu-radius-panel: 10px;
    --onu-radius-pill: 999px;

    --onu-panel-bg: rgba(var(--rz-base-rgb, 20, 28, 44), 0.30);
    --onu-panel-bg-soft: rgba(var(--rz-base-rgb, 200, 200, 200), 0.07);
    --onu-panel-border: rgba(var(--rz-base-rgb, 200, 200, 200), 0.14);

    --onu-icon-size-sm: 16px;
    --onu-icon-size-md: 20px;
    --onu-icon-size-lg: 24px;

    --onu-header-bg: linear-gradient(180deg,
        rgba(var(--rz-base-rgb, 20, 28, 44), 0.55) 0%,
        rgba(var(--rz-base-rgb, 20, 28, 44), 0.32) 100%);
    --onu-header-border: rgba(255, 255, 255, 0.08);

    /* Pattern decorativo do card. Usado em background-image: url(...). */
    --onu-decor-pattern: url("/icons/onu/decor/grid-pattern.svg");
    --onu-decor-opacity: 0.05;
}

/* =============================================================================
   Light mode overrides
   - Detectado via media query (sistema) OU classe explicita do app
   ============================================================================= */
@media (prefers-color-scheme: light) {
    :root {
        --onu-glass-bg: rgba(0, 0, 0, 0.04);
        --onu-glass-bg-strong: rgba(0, 0, 0, 0.07);
        --onu-glass-border: rgba(0, 0, 0, 0.08);
        --onu-glass-border-strong: rgba(0, 0, 0, 0.14);
        --onu-glass-saturation: 120%;
        --onu-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
        --onu-glass-bg-solid: rgba(248, 250, 252, 0.85);
        --onu-color-mac: var(--rz-text-secondary-color, rgba(0, 0, 0, 0.62));

        /* Visual Pro overrides para light */
        --onu-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.07);
        --onu-elevation-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
        --onu-elevation-hover: 0 4px 8px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.12);
        --onu-header-bg: linear-gradient(180deg,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(255, 255, 255, 0.50) 100%);
        --onu-header-border: rgba(15, 23, 42, 0.10);
        --onu-decor-opacity: 0.06;
        --onu-panel-bg: rgba(255, 255, 255, 0.70);
        --onu-panel-bg-soft: rgba(15, 23, 42, 0.04);
        --onu-panel-border: rgba(15, 23, 42, 0.12);
    }
}

/* Override por classe (caso o app force tema independente do SO) */
.light-theme,
[data-bs-theme="light"] {
    --onu-glass-bg: rgba(0, 0, 0, 0.04);
    --onu-glass-bg-strong: rgba(0, 0, 0, 0.07);
    --onu-glass-border: rgba(0, 0, 0, 0.08);
    --onu-glass-border-strong: rgba(0, 0, 0, 0.14);
    --onu-glass-saturation: 120%;
    --onu-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    --onu-glass-bg-solid: rgba(248, 250, 252, 0.85);

    /* Visual Pro overrides para light forcado */
    --onu-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.07);
    --onu-elevation-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
    --onu-elevation-hover: 0 4px 8px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.12);
    --onu-header-bg: linear-gradient(180deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.50) 100%);
    --onu-header-border: rgba(15, 23, 42, 0.10);
    --onu-decor-opacity: 0.06;
    --onu-panel-bg: rgba(255, 255, 255, 0.70);
    --onu-panel-bg-soft: rgba(15, 23, 42, 0.04);
    --onu-panel-border: rgba(15, 23, 42, 0.12);
}

.dark-theme,
[data-bs-theme="dark"] {
    --onu-glass-bg: rgba(255, 255, 255, 0.06);
    --onu-glass-bg-strong: rgba(255, 255, 255, 0.10);
    --onu-glass-border: rgba(255, 255, 255, 0.10);
    --onu-glass-border-strong: rgba(255, 255, 255, 0.16);
    --onu-glass-saturation: 140%;
    --onu-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    --onu-glass-bg-solid: rgba(20, 24, 32, 0.78);
    --onu-panel-bg: rgba(var(--rz-base-rgb, 20, 28, 44), 0.30);
    --onu-panel-bg-soft: rgba(var(--rz-base-rgb, 200, 200, 200), 0.07);
    --onu-panel-border: rgba(var(--rz-base-rgb, 200, 200, 200), 0.14);
}

/* =============================================================================
   Reduced motion
   - Tokens viram instantaneos para usuarios com prefers-reduced-motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    :root {
        --onu-anim-fast: 1ms;
        --onu-anim-medium: 1ms;
    }
}