/* ============================================================
   PAGE: status — uses the shared .appx-* design system
   (defined in mani-globals-ltr.css) for hero, sections, grid,
   cards and CTA. Accent = brand blue.

   Three components have no .appx-* equivalent and live here:
     .stx-state  — the current-state banner (4 states)
     .stx-tbl    — the SLA response/resolution table
     .stx-inc / .stx-empty — incident log rows + empty state
   All of them reuse the unified card standard
   (--snow background, 2px --mist border, --r-xl radius) and only
   tokens from mani-colors-ltr.css. Logical properties throughout,
   so the page is RTL-safe without an rtl file.
   ============================================================ */
.pg-status { --app-accent: var(--blue); }

/* ── Current-state banner — a live status card, not a colour wash ─────────
   Was a full faint-tint fill (--green-l), which read as washed-out and empty.
   Now it is a clean WHITE card with a coloured state accent on the inline-start
   edge and a pulsing "live" dot — reads as a real status indicator, and the
   card stays white so the tint never dominates the page. */
.pg-status .stx-state {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    max-width: 860px;
    margin-inline: auto;
    padding: 24px 26px;
    background: var(--white);
    border: 2px solid var(--mist);
    border-inline-start: 5px solid var(--slate);   /* state accent edge */
    border-radius: var(--r-xl);
    box-shadow: 0 1px 2px rgba(11, 17, 32, .04), 0 14px 32px -20px rgba(11, 17, 32, .22);
}

/* Live pulsing dot */
.pg-status .stx-dot {
    position: relative;
    flex: none;
    inline-size: 14px;
    block-size: 14px;
    border-radius: var(--r-round);
    background: var(--slate);
}
.pg-status .stx-dot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: var(--r-round);
    background: inherit;
    opacity: .4;
    animation: stx-pulse 2.2s ease-out infinite;
}
@keyframes stx-pulse {
    0%   { transform: scale(.55); opacity: .5; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-status .stx-dot::after { animation: none; }
}

.pg-status .stx-state-body { flex: 1 1 320px; }

.pg-status .stx-state-t {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.2px;
}

.pg-status .stx-state-t i { margin-inline-end: 8px; }

.pg-status .stx-state-n {
    margin: 0;
    font-size: 15px;
    color: var(--slate);
}

.pg-status .stx-state-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate);
    margin-inline-start: auto;
}

.pg-status .stx-state-time i { margin-inline-end: 6px; }

/* Per-state: the accent edge, dot and title carry the colour; card stays white */
.pg-status .stx-state--operational { border-inline-start-color: var(--green); }
.pg-status .stx-state--operational .stx-dot { background: var(--green); }
.pg-status .stx-state--operational .stx-state-t { color: var(--green-d); }
.pg-status .stx-state--operational .stx-state-t i { color: var(--green); }

.pg-status .stx-state--degraded { border-inline-start-color: var(--amber); }
.pg-status .stx-state--degraded .stx-dot { background: var(--amber); }
.pg-status .stx-state--degraded .stx-state-t { color: var(--amber-d); }
.pg-status .stx-state--degraded .stx-state-t i { color: var(--amber); }

.pg-status .stx-state--maintenance { border-inline-start-color: var(--blue); }
.pg-status .stx-state--maintenance .stx-dot { background: var(--blue); }
.pg-status .stx-state--maintenance .stx-state-t { color: var(--blue-d); }
.pg-status .stx-state--maintenance .stx-state-t i { color: var(--blue); }

.pg-status .stx-state--incident { border-inline-start-color: var(--red); }
.pg-status .stx-state--incident .stx-dot { background: var(--red); }
.pg-status .stx-state--incident .stx-state-t { color: var(--red-d); }
.pg-status .stx-state--incident .stx-state-t i { color: var(--red); }

/* ── SLA table ──────────────────────────────────────────── */
.pg-status .stx-tbl-wrap {
    max-width: 860px;
    margin-inline: auto;
    overflow-x: auto;
    background: var(--white);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
}

.pg-status .stx-tbl {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.pg-status .stx-tbl-cap {
    caption-side: top;
    padding: 16px 20px 0;
    text-align: start;
    font-size: 13px;
    font-weight: 700;
    color: var(--slate);
}

.pg-status .stx-tbl th,
.pg-status .stx-tbl td {
    padding: 14px 20px;
    text-align: start;
    border-block-end: 1px solid var(--mist);
}

.pg-status .stx-tbl thead th {
    font-size: 13px;
    font-weight: 700;
    color: var(--slate);
    background: var(--snow);
}

.pg-status .stx-tbl tbody th {
    font-weight: 700;
    color: var(--ink);
}

.pg-status .stx-tbl tbody td {
    font-weight: 600;
    color: var(--slate);
}

.pg-status .stx-tbl tbody tr:last-child th,
.pg-status .stx-tbl tbody tr:last-child td { border-block-end: 0; }

/* ── Incident log ───────────────────────────────────────── */
.pg-status .stx-log {
    max-width: 860px;
    margin-inline: auto;
    display: grid;
    gap: 14px;
}

.pg-status .stx-inc {
    padding: 20px 22px;
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
}

.pg-status .stx-inc-t {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.pg-status .stx-inc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

.pg-status .stx-inc-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-round);
    background: var(--mist);
    color: var(--ink2);
}

.pg-status .stx-inc-badge--resolved { background: var(--green-xl); color: var(--green-d); }
.pg-status .stx-inc-badge--monitoring { background: var(--blue-xl); color: var(--blue-d); }
.pg-status .stx-inc-badge--investigating { background: var(--amber-xl); color: var(--amber-d); }

.pg-status .stx-inc-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate);
}

.pg-status .stx-inc-sum {
    margin: 0;
    font-size: 15px;
    color: var(--slate);
}

/* ── Empty state ────────────────────────────────────────── */
.pg-status .stx-empty {
    text-align: center;
    padding: 40px 24px;
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
}

.pg-status .stx-empty i {
    font-size: 28px;
    color: var(--green);
}

.pg-status .stx-empty-t {
    margin: 12px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.pg-status .stx-empty-n {
    margin: 0;
    font-size: 15px;
    color: var(--slate);
}