/**
 * Wedu Media Uptime Status — front-end styles.
 * Theme system based on CSS custom properties. Three preset themes (light,
 * dark, auto) and a "custom" mode that lets the Elementor widget override
 * any token directly.
 */

/* ==========================================================================
   Theme tokens
   ========================================================================== */
.wedu-status {
    --wedu-brand: #f15f22;
    --wedu-brand-soft: rgba(241, 95, 34, 0.14);
    --wedu-brand-strong: #d54a14;

    --wedu-amber:    #f59e0b;
    --wedu-red:      #dc2626;
    --wedu-deep-red: #991b1b;
    --wedu-slate:    #64748b;

    /* Surface + content (light defaults) */
    --wedu-bg:           #f8fafc;
    --wedu-surface:      #ffffff;
    --wedu-surface-2:    #f1f5f9;
    --wedu-text:         #0f172a;
    --wedu-text-muted:   #64748b;
    --wedu-border:       #e2e8f0;
    --wedu-border-soft:  #eef2f7;
    --wedu-divider:      #e8edf3;

    /* Map */
    --wedu-map-bg:        #0f172a;
    --wedu-map-grid:      rgba(255, 255, 255, 0.07);
    --wedu-map-grid-land: rgba(255, 255, 255, 0.18);

    /* Typography (overridable per instance via Elementor) */
    --wedu-font-body:    inherit;
    --wedu-font-heading: inherit;
    --wedu-h1:           clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
    --wedu-h2:           clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
    --wedu-h3:           0.85rem;
    --wedu-body:         0.95rem;
    --wedu-small:        0.8rem;
    --wedu-tiny:         0.72rem;

    --wedu-radius-sm: 6px;
    --wedu-radius:    10px;
    --wedu-radius-lg: 14px;

    --wedu-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --wedu-shadow:    0 4px 12px rgba(15, 23, 42, 0.06);

    --wedu-gap-tight: 8px;
    --wedu-gap:       16px;
    --wedu-gap-wide:  28px;

    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
    color: var(--wedu-text);
    background: var(--wedu-bg);
    border-radius: var(--wedu-radius-lg);
    font-family: var(--wedu-font-body);
    font-size: var(--wedu-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wedu-status *,
.wedu-status *::before,
.wedu-status *::after { box-sizing: border-box; }

/* Global SVG safety rail. Themes sometimes set `svg { width: 100%; height: auto; }`
   on their global selectors, which makes any SVG without explicit width/height
   attributes balloon to the container width. We force inline-block layout and
   block any SVG inside an "icon" wrapper from exceeding its parent. The map
   SVG opts out via its own selector below. */
.wedu-status svg { display: inline-block; vertical-align: middle; }
.wedu-status [class*="__icon"] svg,
.wedu-status [class*="__flag"] svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.wedu-status .wedu-map__svg { display: block; max-width: none; max-height: none; }

/* Dark theme */
.wedu-status.wedu-status--theme-dark {
    --wedu-bg:           #0b1220;
    --wedu-surface:      #111a2e;
    --wedu-surface-2:    #18243e;
    --wedu-text:         #e6edf7;
    --wedu-text-muted:   #94a3b8;
    --wedu-border:       #1f2c47;
    --wedu-border-soft:  #1a2742;
    --wedu-divider:      #1f2c47;

    --wedu-map-bg:        #060a14;
    --wedu-map-grid:      rgba(255, 255, 255, 0.05);
    --wedu-map-grid-land: rgba(255, 255, 255, 0.18);

    --wedu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --wedu-shadow:    0 8px 22px rgba(0, 0, 0, 0.45);
}

/* Auto theme — follows OS preference */
@media (prefers-color-scheme: dark) {
    .wedu-status.wedu-status--theme-auto {
        --wedu-bg:           #0b1220;
        --wedu-surface:      #111a2e;
        --wedu-surface-2:    #18243e;
        --wedu-text:         #e6edf7;
        --wedu-text-muted:   #94a3b8;
        --wedu-border:       #1f2c47;
        --wedu-border-soft:  #1a2742;
        --wedu-divider:      #1f2c47;

        --wedu-map-bg:        #060a14;
        --wedu-map-grid:      rgba(255, 255, 255, 0.05);
        --wedu-map-grid-land: rgba(255, 255, 255, 0.18);

        --wedu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --wedu-shadow:    0 8px 22px rgba(0, 0, 0, 0.45);
    }
}

/* ==========================================================================
   Top bar
   ========================================================================== */
.wedu-status__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--wedu-divider);
}

.wedu-status__topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wedu-small);
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
}
.wedu-status__topbar-mark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--wedu-brand);
    box-shadow: 0 0 0 4px var(--wedu-brand-soft);
    flex: 0 0 auto;
}
.wedu-status__topbar-name { font-weight: 700; letter-spacing: 0.01em; }
.wedu-status__topbar-divider { color: var(--wedu-text-muted); opacity: 0.6; }
.wedu-status__topbar-label { color: var(--wedu-text-muted); }

.wedu-status__topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wedu-status__updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--wedu-tiny);
    font-weight: 500;
    color: var(--wedu-text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wedu-surface-2);
    cursor: help;
    white-space: nowrap;
}
.wedu-status__updated-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wedu-brand);
    box-shadow: 0 0 0 0 var(--wedu-brand);
    animation: wedu-pulse 2.4s infinite;
}
@keyframes wedu-pulse {
    0%   { box-shadow: 0 0 0 0 var(--wedu-brand-soft); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.wedu-status__pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--wedu-tiny);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--wedu-brand-soft);
    color: var(--wedu-brand);
}
.wedu-status__pill--minor       { background: rgba(245,158,11,0.15); color: #b45309; }
.wedu-status__pill--major       { background: rgba(220,38,38,0.15); color: var(--wedu-red); }
.wedu-status__pill--critical    { background: var(--wedu-deep-red); color: #fff; }
.wedu-status__pill--maintenance { background: rgba(100,116,139,0.18); color: var(--wedu-slate); }

.wedu-status--theme-dark .wedu-status__pill--minor { color: #fcd34d; }

/* Pill that links to the Active Incidents section (advisory mode) */
a.wedu-status__pill--linked {
    text-decoration: none;
    cursor: pointer;
    gap: 6px;
    transition: filter 0.15s ease, transform 0.15s ease;
}
a.wedu-status__pill--linked:hover,
a.wedu-status__pill--linked:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
    outline: none;
}
.wedu-status__pill-caret {
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.8;
}

/* Inline link in the hero subtext when in advisory mode */
.wedu-status__hero-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    white-space: nowrap;
}
.wedu-status__hero-link:hover,
.wedu-status__hero-link:focus-visible {
    text-decoration-thickness: 2px;
    outline: none;
}

/* Make the scroll target sit a little below the viewport top so the section
   heading isn't kissing the edge after the scroll completes. */
.wedu-status__section--incidents { scroll-margin-top: 16px; }

/* ==========================================================================
   Hero banner
   ========================================================================== */
.wedu-status__hero {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 26px;
    border-radius: var(--wedu-radius-lg);
    background: linear-gradient(135deg, var(--wedu-brand) 0%, var(--wedu-brand-strong) 100%);
    color: #fff;
    margin-bottom: var(--wedu-gap);
    box-shadow: var(--wedu-shadow);
    position: relative;
    overflow: hidden;
}
.wedu-status__hero-main {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}
.wedu-status__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(at 80% 20%, rgba(255,255,255,0.16), transparent 55%);
    pointer-events: none;
}

.wedu-status__hero--minor       { background: linear-gradient(135deg, #f59e0b, #d97706); }
.wedu-status__hero--major       { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.wedu-status__hero--critical    { background: linear-gradient(135deg, #b91c1c, #7f1d1d); }
.wedu-status__hero--maintenance { background: linear-gradient(135deg, #475569, #334155); }

.wedu-status__hero-icon {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 9px;
}
.wedu-status__hero-icon svg { width: 24px; height: 24px; }

.wedu-status__hero-text { position: relative; z-index: 1; }

.wedu-status__overall {
    margin: 0;
    font-size: var(--wedu-h1);
    font-weight: 700;
    font-family: var(--wedu-font-heading);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: inherit;
}
.wedu-status__overall-sub {
    margin: 4px 0 0;
    font-size: var(--wedu-body);
    color: rgba(255, 255, 255, 0.86);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.wedu-status__section {
    margin-bottom: var(--wedu-gap-wide);
}

.wedu-status__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: var(--wedu-h3);
    font-weight: 700;
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.wedu-status__heading-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wedu-brand);
}
.wedu-status__heading-dot--alert       { background: var(--wedu-red); animation: wedu-pulse 1.6s infinite; }
.wedu-status__heading-dot--maintenance { background: var(--wedu-slate); }

.wedu-status__subheading {
    margin: 0 0 14px;
    font-size: var(--wedu-small);
    color: var(--wedu-text-muted);
}

.wedu-status__empty {
    color: var(--wedu-text-muted);
    font-style: italic;
    padding: 12px 0;
}

/* ==========================================================================
   Active incidents + maintenance cards
   ========================================================================== */
.wedu-incidents { display: grid; gap: 12px; }

.wedu-incident,
.wedu-maintenance {
    background: var(--wedu-surface);
    border: 1px solid var(--wedu-border);
    border-left: 4px solid var(--wedu-amber);
    border-radius: var(--wedu-radius);
    padding: 16px 20px;
    box-shadow: var(--wedu-shadow-sm);
}
.wedu-incident--major    { border-left-color: var(--wedu-red); }
.wedu-incident--critical { border-left-color: var(--wedu-deep-red); }
.wedu-maintenance        { border-left-color: var(--wedu-brand); }

.wedu-incident__header,
.wedu-maintenance__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.wedu-incident__title,
.wedu-maintenance__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
    line-height: 1.3;
}

.wedu-incident__status,
.wedu-maintenance__window {
    font-size: var(--wedu-tiny);
    font-weight: 500;
    color: var(--wedu-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.wedu-incident__updates {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.wedu-incident__updates li {
    padding: 12px 0;
    border-top: 1px solid var(--wedu-border-soft);
    font-size: var(--wedu-small);
}
.wedu-incident__updates li:first-child { border-top: none; padding-top: 4px; }

.wedu-incident__update-meta {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 4px;
}
.wedu-incident__update-meta strong { color: var(--wedu-text); }
.wedu-incident__update-meta time {
    color: var(--wedu-text-muted);
    font-size: var(--wedu-tiny);
}
.wedu-incident__updates p { margin: 0; color: var(--wedu-text); }

.wedu-maintenance__body { margin: 6px 0 0; font-size: var(--wedu-small); color: var(--wedu-text); }

/* ==========================================================================
   Map view + side panel
   ========================================================================== */
.wedu-mapview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
    margin-top: 14px;
}
@media (max-width: 860px) {
    .wedu-mapview { grid-template-columns: 1fr; }
}

.wedu-mapview__map {
    background: var(--wedu-map-bg);
    border-radius: var(--wedu-radius);
    overflow: hidden;
    position: relative;
    box-shadow: var(--wedu-shadow);
    aspect-ratio: 2 / 1;
}

.wedu-map { position: relative; width: 100%; height: 100%; }
.wedu-map__svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wedu-map__cell {
    fill: var(--wedu-map-grid);
}
.wedu-map__cell--land {
    fill: var(--wedu-map-grid-land);
}

/* Map dots */
.wedu-map__dot { cursor: pointer; outline: none; }
.wedu-map__dot:focus-visible .wedu-map__dot-halo {
    stroke: #fff;
    stroke-width: 1.6;
    stroke-dasharray: 3 3;
}

.wedu-map__dot-pulse {
    fill: var(--wedu-brand);
    opacity: 0.35;
    transform-origin: center;
    transform-box: fill-box;
    animation: wedu-dotpulse 2.4s ease-out infinite;
}
.wedu-map__dot--minor       .wedu-map__dot-pulse { fill: var(--wedu-amber); }
.wedu-map__dot--major       .wedu-map__dot-pulse { fill: var(--wedu-red); }
.wedu-map__dot--critical    .wedu-map__dot-pulse { fill: var(--wedu-deep-red); animation-duration: 1.2s; }
.wedu-map__dot--maintenance .wedu-map__dot-pulse { fill: var(--wedu-slate); }
.wedu-map__dot--none        .wedu-map__dot-pulse { animation-duration: 3s; opacity: 0.25; }

@keyframes wedu-dotpulse {
    0%   { transform: scale(0.6); opacity: 0.55; }
    100% { transform: scale(1.8); opacity: 0; }
}

.wedu-map__dot-halo {
    fill: var(--wedu-map-bg);
    stroke: var(--wedu-brand);
    stroke-width: 2;
}
.wedu-map__dot--minor       .wedu-map__dot-halo { stroke: var(--wedu-amber); }
.wedu-map__dot--major       .wedu-map__dot-halo { stroke: var(--wedu-red); }
.wedu-map__dot--critical    .wedu-map__dot-halo { stroke: var(--wedu-deep-red); }
.wedu-map__dot--maintenance .wedu-map__dot-halo { stroke: var(--wedu-slate); }

.wedu-map__dot-core {
    fill: var(--wedu-brand);
    transition: r 0.15s ease;
}
.wedu-map__dot--minor       .wedu-map__dot-core { fill: var(--wedu-amber); }
.wedu-map__dot--major       .wedu-map__dot-core { fill: var(--wedu-red); }
.wedu-map__dot--critical    .wedu-map__dot-core { fill: var(--wedu-deep-red); }
.wedu-map__dot--maintenance .wedu-map__dot-core { fill: var(--wedu-slate); }

.wedu-map__dot:hover .wedu-map__dot-core,
.wedu-map__dot.is-selected .wedu-map__dot-core { r: 7; }

.wedu-map__dot-label {
    fill: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.wedu-map__dot:hover .wedu-map__dot-label,
.wedu-map__dot:focus .wedu-map__dot-label,
.wedu-map__dot.is-selected .wedu-map__dot-label { opacity: 1; }

.wedu-map__legend {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    font-size: var(--wedu-tiny);
}
.wedu-map__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.wedu-map__legend-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--wedu-brand);
}
.wedu-map__legend-dot--minor       { background: var(--wedu-amber); }
.wedu-map__legend-dot--major       { background: var(--wedu-red); }
.wedu-map__legend-dot--maintenance { background: var(--wedu-slate); }

/* Side panel */
.wedu-mapview__panel {
    background: var(--wedu-surface);
    border: 1px solid var(--wedu-border);
    border-radius: var(--wedu-radius);
    padding: 18px 18px 16px;
    box-shadow: var(--wedu-shadow-sm);
}
/* When the user has selected a region and the detail content is long, scroll
   inside the panel rather than letting it push the layout — keeps the map
   anchored at its 2:1 aspect and prevents the page jumping. */
.wedu-status.is-detail-open .wedu-mapview__panel {
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (max-width: 860px) {
    .wedu-status.is-detail-open .wedu-mapview__panel {
        max-height: none;
        overflow-y: visible;
    }
}

.wedu-panel__header { margin-bottom: 14px; }
.wedu-panel__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
}
.wedu-panel__hint {
    margin: 4px 0 0;
    font-size: var(--wedu-tiny);
    color: var(--wedu-text-muted);
}
.wedu-panel__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--wedu-text-muted);
    font-size: var(--wedu-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0;
    margin-bottom: 8px;
    cursor: pointer;
}
.wedu-panel__back:hover { color: var(--wedu-brand); }

.wedu-panel__status {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--wedu-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wedu-brand-soft);
    color: var(--wedu-brand);
}
.wedu-panel__status--minor       { background: rgba(245,158,11,0.18); color: #b45309; }
.wedu-panel__status--major       { background: rgba(220,38,38,0.18); color: var(--wedu-red); }
.wedu-panel__status--critical    { background: var(--wedu-deep-red);   color: #fff; }
.wedu-panel__status--maintenance { background: rgba(100,116,139,0.18); color: var(--wedu-slate); }

.wedu-panel__feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wedu-panel__feed-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--wedu-surface-2);
    border-radius: var(--wedu-radius-sm);
    align-items: flex-start;
}
.wedu-panel__feed-marker {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--wedu-brand);
    margin-top: 6px;
    flex: 0 0 auto;
}
.wedu-panel__feed-marker--minor       { background: var(--wedu-amber); }
.wedu-panel__feed-marker--major       { background: var(--wedu-red); }
.wedu-panel__feed-marker--critical    { background: var(--wedu-deep-red); }
.wedu-panel__feed-marker--maintenance { background: var(--wedu-slate); }

.wedu-panel__feed-body { display: flex; flex-direction: column; gap: 2px; font-size: var(--wedu-small); }
.wedu-panel__feed-body strong { color: var(--wedu-text); font-weight: 600; }
.wedu-panel__feed-meta { color: var(--wedu-text-muted); font-size: var(--wedu-tiny); }
.wedu-panel__empty {
    color: var(--wedu-text-muted);
    font-size: var(--wedu-small);
    padding: 12px;
    background: var(--wedu-surface-2);
    border-radius: var(--wedu-radius-sm);
    text-align: center;
}

.wedu-panel__section { margin-top: 18px; }
.wedu-panel__section:first-of-type { margin-top: 0; }

.wedu-panel__section-title {
    margin: 0 0 10px;
    font-size: var(--wedu-h3);
    font-weight: 700;
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wedu-panel__component {
    padding: 10px 0;
    border-bottom: 1px solid var(--wedu-border-soft);
}
.wedu-panel__component:last-child { border-bottom: none; }

.wedu-panel__component-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.wedu-panel__component-name {
    font-size: var(--wedu-small);
    font-weight: 500;
    color: var(--wedu-text);
}

.wedu-panel__component-uptime {
    margin-top: 4px;
    font-size: var(--wedu-tiny);
    color: var(--wedu-text-muted);
}

.wedu-panel__maint {
    background: var(--wedu-surface-2);
    border-radius: var(--wedu-radius-sm);
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 3px solid var(--wedu-brand);
}
.wedu-panel__maint:last-child { margin-bottom: 0; }
.wedu-panel__maint-title { font-size: var(--wedu-small); font-weight: 600; color: var(--wedu-text); }
.wedu-panel__maint-window { font-size: var(--wedu-tiny); color: var(--wedu-text-muted); margin-top: 2px; }
.wedu-panel__maint-body { margin: 6px 0 0; font-size: var(--wedu-small); color: var(--wedu-text); }

.wedu-panel__incidents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wedu-panel__incident {
    background: var(--wedu-surface-2);
    border-radius: var(--wedu-radius-sm);
    padding: 10px 12px;
    border-left: 3px solid var(--wedu-amber);
}
.wedu-panel__incident--major    { border-left-color: var(--wedu-red); }
.wedu-panel__incident--critical { border-left-color: var(--wedu-deep-red); }
.wedu-panel__incident--none     { border-left-color: var(--wedu-slate); }

.wedu-panel__incident-head {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
}
.wedu-panel__incident-head strong { font-size: var(--wedu-small); color: var(--wedu-text); font-weight: 600; }
.wedu-panel__incident-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--wedu-amber);
    flex: 0 0 auto;
}
.wedu-panel__incident--major    .wedu-panel__incident-dot { background: var(--wedu-red); }
.wedu-panel__incident--critical .wedu-panel__incident-dot { background: var(--wedu-deep-red); }

.wedu-panel__incident-meta {
    display: block;
    font-size: var(--wedu-tiny);
    color: var(--wedu-text-muted);
    margin-bottom: 4px;
}
.wedu-panel__incident-live { color: var(--wedu-red); animation: wedu-pulse 1.4s infinite; }

.wedu-panel__incident-body { margin: 0; font-size: var(--wedu-small); color: var(--wedu-text); }
.wedu-panel__empty-small {
    color: var(--wedu-text-muted); font-size: var(--wedu-small); margin: 0;
    padding: 10px 0 4px;
}

/* ==========================================================================
   Component groups + bars
   ========================================================================== */
.wedu-component-group {
    background: var(--wedu-surface);
    border: 1px solid var(--wedu-border);
    border-radius: var(--wedu-radius);
    margin-bottom: 12px;
    box-shadow: var(--wedu-shadow-sm);
    overflow: hidden;
}
.wedu-component-group--flat { padding: 6px 20px; }

.wedu-component-group__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    cursor: pointer;
    font-size: 0.96rem;
    font-weight: 600;
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
    list-style: none;
    user-select: none;
}
.wedu-component-group__title::-webkit-details-marker { display: none; }
.wedu-component-group__title::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid var(--wedu-text-muted);
    border-bottom: 2px solid var(--wedu-text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-left: auto;
}
.wedu-component-group[open] .wedu-component-group__title::after {
    transform: rotate(-135deg);
}
.wedu-component-group__count {
    font-size: var(--wedu-tiny);
    color: var(--wedu-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wedu-component-group__body { padding: 0 20px 8px; }

.wedu-component {
    padding: 14px 0;
    border-bottom: 1px solid var(--wedu-border-soft);
}
.wedu-component:last-child { border-bottom: none; }

.wedu-component__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: var(--wedu-small);
}
.wedu-component__name { font-weight: 500; color: var(--wedu-text); }

.wedu-component__status {
    font-size: var(--wedu-tiny);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--wedu-surface-2);
    color: var(--wedu-text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wedu-component__status--operational          { color: #fff; background: var(--wedu-brand); }
.wedu-component__status--degraded_performance { color: #fff; background: var(--wedu-amber); }
.wedu-component__status--partial_outage       { color: #fff; background: var(--wedu-amber); }
.wedu-component__status--major_outage         { color: #fff; background: var(--wedu-red); }
.wedu-component__status--under_maintenance    { color: #fff; background: var(--wedu-slate); }

.wedu-component__bars {
    display: flex;
    gap: 2px;
    height: 30px;
    margin: 8px 0 6px;
}
.wedu-bar {
    flex: 1 1 0;
    background: var(--wedu-brand);
    border-radius: 2px;
    cursor: help;
    transition: opacity .15s ease, transform .15s ease;
    min-width: 0;
}
.wedu-bar:hover { opacity: 0.78; transform: scaleY(1.08); }
.wedu-bar--impact-minor       { background: var(--wedu-amber); }
.wedu-bar--impact-major       { background: var(--wedu-red); }
.wedu-bar--impact-critical    { background: var(--wedu-deep-red); }
.wedu-bar--impact-maintenance { background: var(--wedu-slate); }

.wedu-component__uptime {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--wedu-tiny);
    color: var(--wedu-text-muted);
}
.wedu-component__pct { font-weight: 700; color: var(--wedu-text); }

/* ==========================================================================
   History
   ========================================================================== */
.wedu-history__month { margin-bottom: 18px; }
.wedu-history__month-title {
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--wedu-divider);
}
.wedu-history__list { list-style: none; margin: 0; padding: 0; }
.wedu-history__row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    font-size: var(--wedu-small);
    border-bottom: 1px dashed var(--wedu-border-soft);
}
.wedu-history__row:last-child { border-bottom: none; }
.wedu-history__date { color: var(--wedu-text-muted); font-variant-numeric: tabular-nums; }
.wedu-history__name { color: var(--wedu-text); }
.wedu-history__impact {
    font-size: var(--wedu-tiny);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--wedu-surface-2);
    color: var(--wedu-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wedu-history__impact--minor    { color: #92400e; background: rgba(245,158,11,0.18); }
.wedu-history__impact--major    { color: #fff;    background: var(--wedu-red); }
.wedu-history__impact--critical { color: #fff;    background: var(--wedu-deep-red); }

.wedu-status--theme-dark .wedu-history__impact--minor { color: #fcd34d; }

/* ==========================================================================
   Footer
   ========================================================================== */
.wedu-status__footer {
    margin-top: var(--wedu-gap-wide);
    padding-top: 16px;
    border-top: 1px solid var(--wedu-divider);
    color: var(--wedu-text-muted);
    font-size: var(--wedu-tiny);
    text-align: center;
}
.wedu-status__footer p { margin: 0; }

/* Error fallback */
.wedu-status--error {
    padding: 18px;
    border: 1px solid #fecaca;
    border-radius: var(--wedu-radius);
    background: #fef2f2;
    color: var(--wedu-deep-red);
    text-align: center;
    font-size: var(--wedu-small);
}
.wedu-status--theme-dark.wedu-status--error {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

/* ==========================================================================
   Inline badge (separate from full page)
   ========================================================================== */
.wedu-status-badge {
    --wedu-brand: #f15f22;
    --wedu-amber: #f59e0b;
    --wedu-red:   #dc2626;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(241, 95, 34, 0.1);
    color: inherit;
    line-height: 1.2;
}
.wedu-status-badge__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--wedu-brand);
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px rgba(241, 95, 34, 0.25);
    animation: wedu-pulse 2.4s infinite;
}
.wedu-status-badge--minor          { background: rgba(245,158,11,0.12); }
.wedu-status-badge--minor    .wedu-status-badge__dot { background: var(--wedu-amber); box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.wedu-status-badge--major,
.wedu-status-badge--critical       { background: rgba(220,38,38,0.12); }
.wedu-status-badge--major    .wedu-status-badge__dot,
.wedu-status-badge--critical .wedu-status-badge__dot { background: var(--wedu-red); box-shadow: 0 0 0 3px rgba(220,38,38,0.25); }
.wedu-status-badge--unknown        { background: rgba(0,0,0,0.06); color: var(--wedu-slate); }
.wedu-status-badge--unknown  .wedu-status-badge__dot { background: var(--wedu-slate); box-shadow: none; animation: none; }
.wedu-status-badge-link { text-decoration: none; color: inherit; display: inline-block; }
.wedu-status-badge-link:hover .wedu-status-badge { filter: brightness(0.97); }
.wedu-status-badge-wrap { display: block; }

/* ==========================================================================
   Hero stat strip
   ========================================================================== */
.wedu-status__stats {
    list-style: none;
    margin: 0;
    padding: 14px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    position: relative;
    z-index: 1;
}
.wedu-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.wedu-stat__icon {
    width: 32px; height: 32px;
    max-width: 32px; max-height: 32px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.wedu-stat__icon svg { width: 18px; height: 18px; flex: 0 0 auto; }
.wedu-stat__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wedu-stat__value {
    font-size: 1.35rem;
    font-weight: 700;
    font-family: var(--wedu-font-heading);
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.wedu-stat__label {
    font-size: var(--wedu-tiny);
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* ==========================================================================
   Resilience callout
   ========================================================================== */
.wedu-resilience {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: var(--wedu-gap-wide);
    background: var(--wedu-surface);
    border: 1px solid var(--wedu-border);
    border-left: 3px solid var(--wedu-brand);
    border-radius: var(--wedu-radius);
    box-shadow: var(--wedu-shadow-sm);
}
.wedu-resilience__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    border-radius: 8px;
    background: var(--wedu-brand-soft);
    color: var(--wedu-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wedu-resilience__icon svg { width: 16px; height: 16px; flex: 0 0 auto; }
.wedu-resilience__text {
    margin: 0;
    font-size: var(--wedu-small);
    color: var(--wedu-text);
    line-height: 1.5;
}
.wedu-resilience__text strong { color: var(--wedu-text); font-weight: 700; }

/* ==========================================================================
   Region cards
   ========================================================================== */
.wedu-regions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
    width: 100%;
}
@media (max-width: 1000px) {
    .wedu-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .wedu-regions { grid-template-columns: 1fr; }
}
.wedu-region-card {
    appearance: none;
    text-align: left;
    background: var(--wedu-surface);
    border: 1px solid var(--wedu-border);
    border-radius: var(--wedu-radius);
    padding: 16px 18px 14px;
    box-shadow: var(--wedu-shadow-sm);
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wedu-region-card:hover,
.wedu-region-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--wedu-shadow);
    border-color: var(--wedu-brand);
    outline: none;
}
.wedu-region-card--featured {
    border-color: var(--wedu-brand);
    background: linear-gradient(180deg, var(--wedu-surface) 0%, var(--wedu-brand-soft) 220%);
    box-shadow: 0 0 0 3px var(--wedu-brand-soft), var(--wedu-shadow-sm);
}
.wedu-region-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wedu-region-card__flag {
    width: 28px; height: 28px;
    max-width: 28px; max-height: 28px;
    flex: 0 0 auto;
    color: var(--wedu-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wedu-region-card__flag svg { width: 20px; height: 20px; flex: 0 0 auto; }
.wedu-region-card__title {
    font-size: 0.98rem;
    font-weight: 700;
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
    flex: 1 1 auto;
    min-width: 0;
}
.wedu-region-card__pin {
    font-size: var(--wedu-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--wedu-brand);
    color: #fff;
    padding: 3px 8px;
    border-radius: 999px;
}
.wedu-region-card__sparkline {
    width: 100%;
    height: 36px;
    line-height: 0;
}
.wedu-sparkline { width: 100%; height: 100%; display: block; }
.wedu-sparkline__base { stroke: var(--wedu-border); stroke-width: 1; }
.wedu-sparkline__bar { fill: var(--wedu-brand); }
.wedu-sparkline__bar--bad { fill: var(--wedu-amber); }

.wedu-region-card__metrics {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.wedu-region-card__metric { margin: 0; }
.wedu-region-card__metric dt {
    font-size: var(--wedu-tiny);
    color: var(--wedu-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 2px;
}
.wedu-region-card__metric dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--wedu-font-heading);
    color: var(--wedu-text);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Service-list filters
   ========================================================================== */
.wedu-services__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.wedu-services__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.wedu-services__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wedu-chip {
    appearance: none;
    border: 1px solid var(--wedu-border);
    background: var(--wedu-surface);
    color: var(--wedu-text-muted);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--wedu-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wedu-chip:hover { color: var(--wedu-text); border-color: var(--wedu-brand); }
.wedu-chip.is-active {
    background: var(--wedu-brand);
    border-color: var(--wedu-brand);
    color: #fff;
}
.wedu-chip--alert.is-active { background: var(--wedu-red); border-color: var(--wedu-red); }
.wedu-chip__flag {
    width: 14px; height: 14px;
    max-width: 14px; max-height: 14px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wedu-chip__flag svg { width: 14px; height: 14px; flex: 0 0 auto; }

.wedu-services__search {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.wedu-services__search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wedu-text-muted);
    pointer-events: none;
}
.wedu-services__search input {
    appearance: none;
    border: 1px solid var(--wedu-border);
    background: var(--wedu-surface);
    color: var(--wedu-text);
    border-radius: 999px;
    padding: 6px 12px 6px 30px;
    font-size: var(--wedu-tiny);
    min-width: 180px;
    outline: none;
    transition: border-color 0.15s ease;
    font-family: inherit;
}
.wedu-services__search input:focus { border-color: var(--wedu-brand); }

.wedu-component-group__title-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.wedu-component-group__region {
    font-size: var(--wedu-tiny);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--wedu-surface-2);
    color: var(--wedu-text-muted);
    white-space: nowrap;
}
.wedu-component-group__region--na    { background: var(--wedu-brand-soft); color: var(--wedu-brand); }
.wedu-component-group__region--eu    { background: rgba(59,130,246,0.14);   color: #2563eb; }
.wedu-component-group__region--apac  { background: rgba(16,185,129,0.14);   color: #047857; }
.wedu-component-group__region--latam { background: rgba(168,85,247,0.14);   color: #7c3aed; }
.wedu-status--theme-dark .wedu-component-group__region--eu    { color: #93c5fd; }
.wedu-status--theme-dark .wedu-component-group__region--apac  { color: #6ee7b7; }
.wedu-status--theme-dark .wedu-component-group__region--latam { color: #d8b4fe; }

.wedu-services__empty {
    color: var(--wedu-text-muted);
    font-style: italic;
    padding: 14px;
    text-align: center;
    background: var(--wedu-surface-2);
    border-radius: var(--wedu-radius);
    margin: 0;
}

/* When a filter is active and a group has no visible children, hide the group itself. */
.wedu-component-group.is-hidden,
.wedu-component-wrap.is-hidden { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
    .wedu-status { padding: 18px; }
    .wedu-status__hero { padding: 18px 20px; gap: 14px; }
    .wedu-status__hero-icon { width: 38px; height: 38px; padding: 8px; }
    .wedu-mapview__panel { min-height: 0; }
    .wedu-map__legend { font-size: 10px; gap: 8px; padding: 6px 8px; }
    .wedu-status__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wedu-services__header { align-items: flex-start; }
    .wedu-services__search input { min-width: 0; width: 100%; }
    .wedu-services__search { width: 100%; }
}

@media (max-width: 600px) {
    .wedu-status { padding: 14px; border-radius: 12px; }
    .wedu-status__topbar { gap: 8px; }
    .wedu-status__topbar-label { display: none; }
    .wedu-component__bars { height: 22px; gap: 1px; }
    .wedu-component__header { font-size: 0.85rem; }
    .wedu-history__row { grid-template-columns: 56px 1fr auto; font-size: 0.85rem; }
    .wedu-component-group__title { padding: 12px 14px; font-size: 0.9rem; }
    .wedu-component-group__body  { padding: 0 14px 6px; }
    .wedu-component-group--flat  { padding: 4px 14px; }
    .wedu-incident, .wedu-maintenance { padding: 14px; }
    .wedu-mapview__map { aspect-ratio: 16 / 11; }
    .wedu-map__dot-label { font-size: 14px; }
    .wedu-map__dot-pulse { r: 18; }
    .wedu-map__dot-halo  { r: 12; }
    .wedu-map__dot-core  { r: 6; }
    .wedu-status__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .wedu-stat__value { font-size: 1.15rem; }
    .wedu-region-card__metrics { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .wedu-region-card__metric dd { font-size: 0.92rem; }
    .wedu-component-group__title-main { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 420px) {
    .wedu-component__bars .wedu-bar:nth-child(-n+30) { display: none; }
    .wedu-status__overall-sub { font-size: 0.85rem; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .wedu-map__dot-pulse,
    .wedu-status__updated-pulse,
    .wedu-status__heading-dot--alert,
    .wedu-panel__incident-live,
    .wedu-status-badge__dot {
        animation: none;
    }
    .wedu-bar,
    .wedu-region-card,
    .wedu-chip { transition: none; }
}

/* Screen reader only */
.wedu-status .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}