/* tokens.css */
/* Saads brand tokens (spec §4) — source: services/sso/theme/saads/login/resources/css/saads.css */
:root {
  --saads-red: #c60000;
  --saads-red-strong: #b30000;
  --saads-red-deep: #990000;
  --saads-crimson: #7f1d1d;
  --saads-surface: #f6f6f7;
  --saads-surface-2: #ffffff;
  --saads-fg: #17171a;
  --saads-muted-fg: #4b4b52;
  --saads-heading: #b30000;
  --saads-link: #b30000;
  --saads-glow: #fbeeee;
  --saads-glass-bg: rgb(255 255 255 / 0.6);
  --saads-glass-border: rgb(255 255 255 / 0.9);
  --saads-glass-shadow: 0 4px 16px rgb(179 0 0 / 0.07);
  --saads-menu-bg: rgb(255 255 255 / 0.95);
  --saads-status-up: #22c55e;
  --saads-status-degraded: #f59e0b;
  --saads-status-down: #7f1d1d;
  --saads-status-down-accent: #dc2626;
  --saads-status-empty: rgb(113 113 122 / 0.25);
  --saads-badge-down-bg: #dc2626;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --saads-surface: #111114;
    --saads-surface-2: #18181b;
    --saads-fg: #f4f4f5;
    --saads-muted-fg: #c3c3c8;
    --saads-heading: #ff7a7a;
    --saads-link: #ff6b6b;
    --saads-glow: #1d1112;
    --saads-glass-bg: rgb(255 255 255 / 0.06);
    --saads-glass-border: rgb(255 255 255 / 0.1);
    --saads-glass-shadow: none;
    --saads-menu-bg: rgb(24 24 27 / 0.95);
    --saads-status-empty: rgb(255 255 255 / 0.12);
    color-scheme: dark;
  }
}
:root.dark,
:root[data-theme="dark"] {
  --saads-surface: #111114;
  --saads-surface-2: #18181b;
  --saads-fg: #f4f4f5;
  --saads-muted-fg: #c3c3c8;
  --saads-heading: #ff7a7a;
  --saads-link: #ff6b6b;
  --saads-glow: #1d1112;
  --saads-glass-bg: rgb(255 255 255 / 0.06);
  --saads-glass-border: rgb(255 255 255 / 0.1);
  --saads-glass-shadow: none;
  --saads-menu-bg: rgb(24 24 27 / 0.95);
  --saads-status-empty: rgb(255 255 255 / 0.12);
  color-scheme: dark;
}

/* glass.css */
.saads-aurora {
  background:
    radial-gradient(120% 28% at 50% 0%, var(--saads-glow) 0%, transparent 70%),
    var(--saads-surface);
  background-attachment: fixed;
  color: var(--saads-fg);
}
.saads-glass {
  background: var(--saads-glass-bg);
  border: 1px solid var(--saads-glass-border);
  box-shadow: var(--saads-glass-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.saads-section-title {
  color: var(--saads-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
:root[dir="rtl"] .saads-section-title { letter-spacing: 0; font-size: 12px; text-transform: none; }
.saads-ltr { direction: ltr; unicode-bidi: isolate; }
:root[dir="rtl"] .saads-flip { transform: scaleX(-1); }

/* band.css */
.saads-band {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 8px 16px;
  background: var(--saads-red);
  color: #fff;
  box-shadow: 0 6px 24px rgb(198 0 0 / 0.35);
}
.saads-band__brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.saads-band__wordmark { display: block; height: 20px; width: auto; }
.saads-band__name { font-weight: 600; font-size: 15px; }
.saads-band__tabs { display: flex; gap: 3px; }
.saads-band__tab { padding: 6px 10px; border-radius: 8px; color: #fff; text-decoration: none; font-size: 14px; }
.saads-band__tab:hover { background: rgb(0 0 0 / 0.12); }
.saads-band__tab[aria-current="page"] { background: rgb(0 0 0 / 0.22); }
.saads-band__spacer { margin-inline-start: auto; }
.saads-band__hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #fff; cursor: pointer;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 0.45); background: rgb(0 0 0 / 0.14);
}
.saads-band__hint kbd { font: inherit; font-size: 10px; opacity: 0.85; }
.saads-band__search-icon {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; cursor: pointer;
  border: 1px solid rgb(255 255 255 / 0.45); border-radius: 8px;
  background: rgb(0 0 0 / 0.14); color: #fff;
}
.saads-band__chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #fff; cursor: pointer;
  padding: 5px 9px; border: 0; border-radius: 8px; background: rgb(0 0 0 / 0.14);
}
.saads-band a:focus-visible,
.saads-band button:focus-visible,
.saads-band summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .saads-band { flex-wrap: wrap; gap: 8px 10px; }
  .saads-band__hint { display: none; }
  .saads-band__search-icon { display: inline-flex; }
}
.saads-menu { position: relative; }
.saads-menu > summary { list-style: none; }
.saads-menu > summary::-webkit-details-marker { display: none; }
.saads-menu__list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 180px; margin: 0; padding: 5px; list-style: none;
  border-radius: 12px; border: 1px solid var(--saads-glass-border);
  background: var(--saads-menu-bg); color: var(--saads-fg);
  box-shadow: 0 16px 40px rgb(179 0 0 / 0.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.saads-menu__list a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 8px; color: inherit; text-decoration: none;
}
.saads-menu__list a:hover, .saads-menu__list a:focus-visible { background: rgb(198 0 0 / 0.08); outline: none; }
.saads-menu__list a[aria-current="true"] { background: rgb(198 0 0 / 0.12); box-shadow: inset 3px 0 0 var(--saads-red); font-weight: 600; }
:root[dir="rtl"] .saads-menu__list a[aria-current="true"] { box-shadow: inset -3px 0 0 var(--saads-red); }
.saads-menu__list small { opacity: 0.6; }
.saads-switcher > summary { display: inline-flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; padding: 0; }
.saads-switcher__panel { inset-inline-start: 0; inset-inline-end: auto; min-inline-size: 280px; padding: 10px; }
.saads-switcher__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.saads-switcher__app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 12px; text-align: center; }
.saads-switcher__app:hover, .saads-switcher__app:focus-visible { background: var(--saads-glass-bg); }
.saads-switcher__icon { inline-size: 36px; block-size: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--tile-color); }
.saads-switcher__empty { margin: 4px 6px 8px; font-size: 13px; color: var(--saads-muted-fg); }
.saads-switcher__all { display: block; margin-block-start: 8px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; border-block-start: 1px solid var(--saads-glass-border); }

/* status.css */
.saads-bars { display: flex; gap: 1.5px; direction: ltr; }
.saads-bar { flex: 1 1 0; min-width: 2px; height: 14px; border-radius: 2px; background: var(--saads-status-empty); }
.saads-bar--up { background: var(--saads-status-up); }
.saads-bar--degraded { background: var(--saads-status-degraded); }
.saads-bar--down { background: var(--saads-status-down); }
.saads-bar--empty { background: var(--saads-status-empty); }
.saads-down { outline: 2px solid var(--saads-status-down-accent); outline-offset: -1px; }
.saads-badge-down {
  font-size: 10.5px; font-weight: 600; line-height: 1.5;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--saads-badge-down-bg); color: #fff;
}

/* public-status */

html { background: var(--saads-surface); }
body { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Geeza Pro", sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.banner { border-radius: 12px; padding: 14px 16px; font-weight: 600; margin-bottom: 24px; color: #fff; }
.banner-operational { background: #15803d; }
.banner-degraded { background: #b45309; }
.banner-partial_outage { background: #c2410c; }
.banner-major_outage { background: #b91c1c; }
.banner-unknown { background: #52525b; }
.group { border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.group h2, .incidents-section h2 { margin: 0 0 8px; }
ul.services, ul.incidents { list-style: none; margin: 0; padding: 0; }
.service { padding: 8px; border-radius: 10px; margin-top: 4px; }
.service-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.service-name { font-weight: 600; margin-inline-end: auto; }
.uptime { color: var(--saads-muted-fg); font-size: 0.85rem; }
.pill { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }
.pill-up { background: #15803d; }
.pill-degraded { background: #b45309; }
.pill-unknown { background: #52525b; }
.saads-bars { margin-top: 8px; }
.saads-bar { height: 24px; }
.incident { border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.incident-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.incident-service { font-weight: 600; }
.incident-when { color: var(--saads-muted-fg); }
.incident-note { margin: 8px 0 0; white-space: pre-wrap; }
.empty { color: var(--saads-muted-fg); }
footer { color: var(--saads-muted-fg); font-size: 0.8rem; margin-top: 32px; }
footer p { margin: 0 0 4px; }
.icon-to-light { display: none; }
:root[data-theme="dark"] .icon-to-light { display: inline; }
:root[data-theme="dark"] .icon-to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-to-light { display: inline; }
  :root:not([data-theme="light"]) .icon-to-dark { display: none; }
}