/* ──────────────────────────────────────────────────────────────────────────
 * AZDAN status page. Same brand tokens as the public website
 * (deploy/landing/assets/site.css) and the consoles' status tints; IBM Plex
 * Sans / IBM Plex Sans Arabic / IBM Plex Mono like the consoles. Light and
 * dark, chosen before first paint (inline script in <head>, remembered per
 * browser). Logical properties only, so Arabic (dir="rtl") mirrors itself.
 * ────────────────────────────────────────────────────────────────────────── */

:root {
    --green: #24b167;
    --font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --container: 1120px;
    --gutter: clamp(16px, 4vw, 32px);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
}

:root,
[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f3ec;
    --surface: #ffffff;
    --surface-2: #f8f5ef;
    --text: #15130f;
    --text-2: #4b4539;
    --muted: #6d6658;
    --line: rgba(31, 26, 18, 0.10);
    --line-strong: rgba(31, 26, 18, 0.18);
    --accent: #13814a;
    --accent-soft: rgba(36, 177, 103, 0.12);
    --on-accent: #0a0a0a;
    --header-bg: rgba(246, 243, 236, 0.92);
    --shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.06);
    --shadow-md: 0 1px 2px rgba(40, 30, 10, 0.05), 0 12px 32px -18px rgba(40, 30, 10, 0.28);
    --tint-success-bg: #e7f6ee;
    --tint-success-fg: #11774a;
    --tint-info-bg: #eaeefb;
    --tint-info-fg: #2f3f9e;
    --tint-warning-bg: #fdf1dd;
    --tint-warning-fg: #8a5a13;
    --tint-danger-bg: #fdecea;
    --tint-danger-fg: #b4291d;
    --tint-neutral-bg: #eef0f3;
    --tint-neutral-fg: #565d66;
    --viz-1: #24b167;
    --viz-2: #4054b2;
    --viz-3: #eb6834;
    --viz-4: #6250d6;
    --viz-5: #eda100;
    --viz-6: #e87ba4;
    --viz-7: #2a9d9f;
    --viz-good: #1f9a59;
    --viz-warn: #d99400;
    --viz-bad: #d13b2e;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #090b0a;
    --surface: #121513;
    --surface-2: #171b18;
    --text: #f2f0e9;
    --text-2: #cdc7b9;
    --muted: #9a9486;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --accent: #3ccf82;
    --accent-soft: rgba(36, 177, 103, 0.14);
    --on-accent: #0a0a0a;
    --header-bg: rgba(9, 11, 10, 0.9);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px -18px rgba(0, 0, 0, 0.8);
    --tint-success-bg: rgba(36, 177, 103, 0.16);
    --tint-success-fg: #46d98a;
    --tint-info-bg: rgba(64, 84, 178, 0.20);
    --tint-info-fg: #93a3f2;
    --tint-warning-bg: rgba(240, 177, 64, 0.16);
    --tint-warning-fg: #f2c76e;
    --tint-danger-bg: rgba(255, 107, 87, 0.16);
    --tint-danger-fg: #ff9182;
    --tint-neutral-bg: rgba(227, 221, 207, 0.08);
    --tint-neutral-fg: #c9c3b4;
    --viz-good: #3ccf82;
    --viz-warn: #f2c76e;
    --viz-bad: #ff7b6b;
}

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

/* Keyboard focus, as in the consoles and on the website. */
:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 4px;
}

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 15px/1.6 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, system-ui, Arial, sans-serif; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
time { font-variant-numeric: tabular-nums; }

.wrap { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ── Header ───────────────────────────────────────────────────────────── */

.hdr { position: sticky; top: 0; z-index: 10; background: var(--header-bg); border-block-end: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { height: 28px; width: auto; }
.brand-tag { font-size: 12px; line-height: 1.2; color: var(--text-2); max-width: 13ch; border-inline-start: 1px solid var(--line-strong); padding-inline-start: 12px; }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.lang { font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-strong); }
.lang:hover { text-decoration: none; background: var(--surface-2); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: inherit; cursor: pointer; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--surface-2); }
[data-theme="light"] .theme-toggle .sun, [data-theme="dark"] .theme-toggle .moon { display: none; }

/* ── Sections ─────────────────────────────────────────────────────────── */

main { padding-block: 32px 48px; }
.intro h1 { font-size: clamp(26px, 3.6vw, 36px); }
.lede { margin-block-start: 8px; color: var(--text-2); max-width: 70ch; }
.section { margin-block-start: 36px; }
.section > h2, .section-head h2 { font-size: 20px; }
.section-head { margin-block-end: 12px; }
.section-head p { color: var(--muted); font-size: 13.5px; margin-block-start: 4px; }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }

.notice { margin-block-start: 16px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; border: 1px solid transparent; }
.notice-warn { background: var(--tint-warning-bg); color: var(--tint-warning-fg); border-color: color-mix(in srgb, var(--tint-warning-fg) 30%, transparent); }
.notice-offline { background: var(--tint-danger-bg); color: var(--tint-danger-fg); }
.notice-info { background: var(--tint-info-bg); color: var(--tint-info-fg); margin-block: 0 12px; }

/* ── Overall banner ───────────────────────────────────────────────────── */

.overall { margin-block-start: 24px; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md); }
.overall h2 { font-size: clamp(20px, 2.6vw, 26px); }
.overall-meta { color: var(--muted); font-size: 13.5px; margin-block-start: 4px; }
.overall-dot { flex: none; width: 18px; height: 18px; border-radius: 999px; background: var(--tint-neutral-fg); box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 14%, transparent); color: var(--tint-neutral-fg); }
.overall.is-operational { border-color: color-mix(in srgb, var(--tint-success-fg) 35%, transparent); }
.overall.is-operational .overall-dot { background: var(--green); color: var(--green); }
.overall.is-degraded .overall-dot { background: var(--tint-warning-fg); color: var(--tint-warning-fg); }
.overall.is-partial_outage .overall-dot, .overall.is-major_outage .overall-dot { background: var(--tint-danger-fg); color: var(--tint-danger-fg); }
.overall.is-major_outage { border-color: color-mix(in srgb, var(--tint-danger-fg) 45%, transparent); }
.overall.is-maintenance .overall-dot { background: var(--tint-info-fg); color: var(--tint-info-fg); }

/* ── Badges and chips ─────────────────────────────────────────────────── */

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }
.badge-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.badge.is-operational { background: var(--tint-success-bg); color: var(--tint-success-fg); }
.badge.is-degraded { background: var(--tint-warning-bg); color: var(--tint-warning-fg); }
.badge.is-partial_outage, .badge.is-major_outage { background: var(--tint-danger-bg); color: var(--tint-danger-fg); }
.badge.is-maintenance { background: var(--tint-info-bg); color: var(--tint-info-fg); }
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }
.chip-incident { background: var(--tint-danger-bg); color: var(--tint-danger-fg); }
.chip-maintenance, .chip-detected { background: var(--tint-info-bg); color: var(--tint-info-fg); }
.chip-impact.is-minor { background: var(--tint-warning-bg); color: var(--tint-warning-fg); }
.chip-impact.is-major, .chip-impact.is-critical { background: var(--tint-danger-bg); color: var(--tint-danger-fg); }

/* ── Components ───────────────────────────────────────────────────────── */

.comps { display: grid; gap: 10px; }
.comp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.comp-details > summary { list-style: none; cursor: pointer; }
.comp-details > summary::-webkit-details-marker { display: none; }
.comp-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 2fr) auto auto 20px; align-items: center; gap: 16px; padding: 14px 16px; }
.comp-name { font-weight: 600; font-size: 15px; }
.comp-desc { color: var(--muted); font-size: 12.5px; margin-block-start: 2px; }
.comp-uptime { text-align: end; }
.comp-uptime .num { display: block; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
.comp-uptime .lbl { display: block; color: var(--muted); font-size: 11.5px; }
.chev { width: 10px; height: 10px; border-inline-end: 2px solid var(--muted); border-block-end: 2px solid var(--muted); transform: rotate(45deg); justify-self: center; }
.comp-details[open] .chev { transform: rotate(-135deg); }
.comp-body { border-block-start: 1px solid var(--line); padding: 16px; }

.strip { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 26px; direction: ltr; }
.cell { border-radius: 2px; background: var(--tint-neutral-bg); min-width: 0; }
.cell.is-up { background: var(--viz-good); }
.cell.is-partial { background: var(--viz-warn); }
.cell.is-down { background: var(--viz-bad); }
.cell.is-none { background: var(--tint-neutral-bg); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 2px; }
.tile-l { font-size: 11.5px; color: var(--muted); }
.tile-v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-v.small { font-size: 13.5px; }
.tile-h { font-size: 12px; color: var(--muted); }
.checks-h { margin-block: 16px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.checks { display: grid; gap: 6px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.check-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tint-neutral-fg); flex: none; }
.check.is-up .check-dot { background: var(--viz-good); }
.check.is-down .check-dot { background: var(--viz-bad); }
.check-name { flex: 1; }
.check-crit { font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 6px; margin-inline-start: 4px; }
.check-val { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ECharts lays text out left to right; the axes are mirrored for Arabic in status.js. */
.chart { width: 100%; direction: ltr; }
.chart-sm { height: 180px; margin-block-start: 16px; }
.chart-lg { height: 320px; }
.charts { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .charts { grid-template-columns: 1fr 1fr; } }

/* ── Announcements ────────────────────────────────────────────────────── */

.ann-list { display: grid; gap: 12px; }
.ann { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); border-inline-start: 4px solid var(--tint-neutral-fg); }
.ann.is-incident { border-inline-start-color: var(--tint-danger-fg); }
.ann.is-incident.is-resolved { border-inline-start-color: var(--tint-success-fg); }
.ann.is-maintenance { border-inline-start-color: var(--tint-info-fg); }
.ann.is-detected.is-degraded { border-inline-start-color: var(--tint-warning-fg); }
.ann.is-detected.is-partial_outage, .ann.is-detected.is-major_outage { border-inline-start-color: var(--tint-danger-fg); }
.ann-head { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 8px; }
.ann h3 { font-size: 16px; }
.ann-window, .ann-affects { color: var(--text-2); font-size: 13.5px; margin-block-start: 4px; }
.ann-affects span { color: var(--muted); }
.updates { margin-block-start: 12px; display: grid; gap: 10px; border-inline-start: 2px solid var(--line); padding-inline-start: 14px; }
.upd-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--muted); }
.upd-status { font-weight: 600; color: var(--text-2); }
.updates p { margin-block-start: 2px; font-size: 14px; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.ftr { border-block-start: 1px solid var(--line); padding-block: 24px 32px; color: var(--muted); font-size: 13px; }
.ftr p + p { margin-block-start: 6px; }
.ftr a { color: var(--text-2); }
.ftr-links { display: flex; flex-wrap: wrap; gap: 16px; margin-block-start: 12px !important; }
.ftr-copy { margin-block-start: 12px !important; }

/* ── Phones ───────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
    .brand-tag { display: none; }
    .comp-row { grid-template-columns: 1fr auto; grid-template-areas: "main badge" "strip strip" "uptime chev"; }
    .comp-main { grid-area: main; }
    .comp-badge { grid-area: badge; }
    .comp-strip { grid-area: strip; }
    .comp-uptime { grid-area: uptime; text-align: start; }
    .chev { grid-area: chev; }
    .strip { height: 20px; gap: 1px; }
    .overall { align-items: flex-start; }
}

@media (prefers-reduced-motion: no-preference) {
    .comp, .ann, .lang, .icon-btn { transition: background-color 0.15s ease, border-color 0.15s ease; }
}

@media print {
    .hdr-actions, .chart { display: none; }
}