/* ============================================================
   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 ───────────────────────────────── */
.pg-status .stx-state {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 860px;
    margin-inline: auto;
    padding: 22px 24px;
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
}

.pg-status .stx-dot {
    flex: none;
    inline-size: 12px;
    block-size: 12px;
    border-radius: var(--r-round);
    background: var(--slate);
}

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

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

.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);
}

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

.pg-status .stx-state--operational { background: var(--green-l); border-color: var(--green-xl); }
.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--degraded { background: var(--amber-l); border-color: var(--amber-xl); }
.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--maintenance { background: var(--blue-l); border-color: var(--blue-xl); }
.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--incident { background: var(--red-l); border-color: var(--red-xl); }
.pg-status .stx-state--incident .stx-dot { background: var(--red); }
.pg-status .stx-state--incident .stx-state-t { color: var(--red-d); }

/* ── 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);
}