/*!
 * mydc Netzwerkstatus — Uptime-Kuma-Style Status-Dashboard
 * Gehoert zur serverstatus "MyDC" page-Variante (core/pages/serverstatus/mydc/).
 * Frontend-Stufe: Layout + Mock-Daten. Reale Daten via $mon_data folgen.
 */

.mydc-status {
    /* Lokale Status-Tokens (leiten sich aus den Theme-Brand-Farben ab,
       damit Light-/Dark-Mode automatisch passen). */
    --mydc-up:            var(--brand-success-lighter, #6bc780);
    --mydc-up-strong:     var(--brand-success, #1e7b32);
    --mydc-up-bg:         var(--brand-success-lighter-4, #e8f7ec);
    --mydc-down:          var(--brand-danger, #ca202c);
    --mydc-down-bg:       var(--brand-danger-lighter-4, #fceeef);
    --mydc-degraded:      var(--brand-warning-lighter, #fe8d0b);
    --mydc-degraded-strong: var(--brand-warning, #b84b00);
    --mydc-degraded-bg:   var(--brand-warning-lighter-4, #fff3e5);
    --mydc-maint:         var(--brand-info-lighter, #009aff);
    --mydc-maint-bg:      var(--brand-info-lighter-4, #e5eeff);
    --mydc-empty:         var(--gray-lighter-3, #dee0e3);

    --mydc-card-bg:       var(--card-bg, #fff);
    --mydc-border:        var(--panel-border-divider-color, var(--gray-lighter-3, #dee0e3));
    --mydc-text:          var(--gray-base, #4b4f58);
    --mydc-text-muted:    var(--gray-lighter-2, #6d7482);
    --mydc-radius:        var(--border-radius-lg, 8px);
    --mydc-shadow:        var(--box-shadow-sm, 0 2px 16px rgba(0,0,0,.08));

    display: block;
    max-width: 960px;
    margin: 0 auto;
}

/* ============================ Overall hero ============================ */

.mydc-status__hero {
    display: flex;
    align-items: center;
    gap: var(--spacing-2x, 16px);
    padding: var(--spacing-3x, 24px);
    border-radius: var(--mydc-radius);
    background: var(--mydc-card-bg);
    border: 1px solid var(--mydc-border);
    box-shadow: var(--mydc-shadow);
    margin-bottom: var(--spacing-3x, 24px);
    border-left: 4px solid var(--mydc-up-strong);
}
.mydc-status__hero--operational { border-left-color: var(--mydc-up-strong); }
.mydc-status__hero--degraded    { border-left-color: var(--mydc-degraded-strong); }
.mydc-status__hero--down        { border-left-color: var(--mydc-down); }
.mydc-status__hero--maintenance { border-left-color: var(--mydc-maint); }

.mydc-status__hero-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    background: var(--mydc-up-bg);
    color: var(--mydc-up-strong);
}
.mydc-status__hero--degraded    .mydc-status__hero-icon { background: var(--mydc-degraded-bg); color: var(--mydc-degraded-strong); }
.mydc-status__hero--down        .mydc-status__hero-icon { background: var(--mydc-down-bg);     color: var(--mydc-down); }
.mydc-status__hero--maintenance .mydc-status__hero-icon { background: var(--mydc-maint-bg);    color: var(--mydc-maint); }

.mydc-status__hero-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mydc-status__hero-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--headings-color, var(--gray-darker, #17191c));
    margin: 0;
    line-height: 1.25;
}
.mydc-status__hero-sub {
    font-size: 13px;
    color: var(--mydc-text-muted);
    margin: 0;
}

/* ============================ Incidents (echte $issues) ============================ */

.mydc-status__incidents { margin-bottom: var(--spacing-3x, 24px); }
.mydc-status__incidents-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mydc-text-muted);
    margin: 0 0 var(--spacing-1x, 8px);
}
.mydc-status__incidents .panel { margin-bottom: var(--spacing-1x, 8px); }

/* ============================ Zeitraum-Selektor ============================ */

.mydc-status__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-2x, 16px);
}
.mydc-status__tfgroup {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--mydc-card-bg);
    border: 1px solid var(--mydc-border);
    border-radius: 999px;
    box-shadow: var(--mydc-shadow);
}
.mydc-status__tf {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 14px;
    border: 0;
    background: transparent;
    color: var(--mydc-text-muted);
    border-radius: 999px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background-color .15s ease, color .15s ease;
}
.mydc-status__tf:hover { color: var(--mydc-text); }
.mydc-status__tf[aria-pressed="true"] {
    background: var(--brand-primary, #065cfe);
    color: #fff;
}
.mydc-status__tf:focus-visible { outline: 2px solid var(--brand-primary, #065cfe); outline-offset: 2px; }

@media (max-width: 480px) {
    .mydc-status__toolbar { justify-content: stretch; }
    .mydc-status__tfgroup { flex: 1 1 auto; justify-content: space-between; }
    .mydc-status__tf { padding: 7px 10px; }
}

/* ============================ Group card ============================ */

.mydc-status__group {
    background: var(--mydc-card-bg);
    border: 1px solid var(--mydc-border);
    border-radius: var(--mydc-radius);
    box-shadow: var(--mydc-shadow);
    margin-bottom: var(--spacing-2x, 16px);
    overflow: hidden;
}

.mydc-status__group-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-2x, 16px);
    width: 100%;
    padding: var(--spacing-2x, 16px) var(--spacing-3x, 24px);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: background-color .15s ease;
}
.mydc-status__group-head:hover { background: var(--gray-faded, #f7f7f8); }
.mydc-status__group-head:focus-visible { outline: 2px solid var(--brand-primary, #065cfe); outline-offset: -2px; }

.mydc-status__chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--mydc-text-muted);
    transition: transform .2s ease;
}
.mydc-status__group[aria-expanded="false"] .mydc-status__chevron { transform: rotate(-90deg); }

.mydc-status__group-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Navbar-svg-icons auf feste Größe zwingen (schlägt Theme .svg-icon{width/height:50px}).
   Behalten ihr --svg-icon-color-* Theming. */
.mydc-status__group-icon .svg-icon,
.mydc-status__group-icon svg {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 auto;
    display: block;
}

.mydc-status__group-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mydc-status__group-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--headings-color, var(--gray-darker, #17191c));
    line-height: 1.3;
}
.mydc-status__group-meta {
    font-size: 12.5px;
    color: var(--mydc-text-muted);
}

.mydc-status__group-aside {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-2x, 16px);
}

/* collapsible body */
.mydc-status__group[aria-expanded="false"] .mydc-status__group-body { display: none; }
.mydc-status__group-body { border-top: 1px solid var(--mydc-border); }

/* ============================ Monitor row ============================ */

.mydc-status__monitor {
    display: flex;
    align-items: center;
    gap: var(--spacing-2x, 16px);
    padding: 14px var(--spacing-3x, 24px);
}
.mydc-status__monitor + .mydc-status__monitor { border-top: 1px solid var(--mydc-border); }

.mydc-status__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mydc-up);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mydc-up) 22%, transparent);
}
.mydc-status__monitor--down     .mydc-status__dot { background: var(--mydc-down);     box-shadow: 0 0 0 3px color-mix(in srgb, var(--mydc-down) 22%, transparent); }
.mydc-status__monitor--degraded .mydc-status__dot { background: var(--mydc-degraded); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mydc-degraded) 22%, transparent); }
.mydc-status__monitor--maintenance .mydc-status__dot { background: var(--mydc-maint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mydc-maint) 22%, transparent); }

.mydc-status__monitor-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mydc-status__monitor-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--mydc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mydc-status__monitor-sub {
    font-size: 12px;
    color: var(--mydc-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* heartbeat bar */
.mydc-status__beats {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 26px;
}
.mydc-status__beat {
    width: 5px;
    height: 100%;
    border-radius: 3px;
    background: var(--mydc-empty);
}
.mydc-status__beat--up       { background: var(--mydc-up); }
.mydc-status__beat--down     { background: var(--mydc-down); }
.mydc-status__beat--degraded { background: var(--mydc-degraded); }
.mydc-status__beat--maint    { background: var(--mydc-maint); }

.mydc-status__uptime {
    flex: 0 0 auto;
    text-align: right;
    min-width: 66px;
}
.mydc-status__uptime-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--mydc-up-strong);
    display: block;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.mydc-status__monitor--down     .mydc-status__uptime-val { color: var(--mydc-down); }
.mydc-status__monitor--degraded .mydc-status__uptime-val { color: var(--mydc-degraded-strong); }
.mydc-status__uptime-cap {
    font-size: 11px;
    color: var(--mydc-text-muted);
}

/* ============================ Status pill ============================ */

.mydc-status__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--mydc-up-bg);
    color: var(--mydc-up-strong);
}
.mydc-status__pill--down        { background: var(--mydc-down-bg);     color: var(--mydc-down); }
.mydc-status__pill--degraded    { background: var(--mydc-degraded-bg); color: var(--mydc-degraded-strong); }
.mydc-status__pill--maintenance { background: var(--mydc-maint-bg);    color: var(--mydc-maint); }

/* ============================ Responsive ============================ */

@media (max-width: 640px) {
    .mydc-status__monitor {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .mydc-status__monitor-name { flex: 1 1 60%; }
    .mydc-status__uptime { order: 2; }
    .mydc-status__beats { order: 3; flex: 1 1 100%; justify-content: space-between; }
    .mydc-status__beat { flex: 1 1 auto; max-width: 6px; }
    .mydc-status__group-aside .mydc-status__group-uptime { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mydc-status__chevron, .mydc-status__group-head { transition: none; }
}

/* Dark-Mode Feinschliff (Theme setzt html.lagom-dark-mode) */
html.lagom-dark-mode .mydc-status__group-head:hover,
.dark-mode .mydc-status__group-head:hover {
    background: rgba(255, 255, 255, .04);
}