/* nx status page: nx-fe design system for Statuspage (plain CSS).
   Tokens: src/styles/tokens/_semantic.scss, _primitives.scss, _feedback.scss
   Type:   src/styles/base/_ds-typography.scss (high 800 / mid 600 / default 400)
   Radius & spacing: src/styles/spacing/_variables.scss
   Buttons: src/app/design-system/button; cards/alerts use 2px borders with a thicker bottom edge. */

@font-face {
  font-family: "Nunito";
  src: url("https://app.nx.edu.sa/assets/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lama Rounded";
  src: url("https://app.nx.edu.sa/assets/fonts/LamaRounded-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lama Rounded";
  src: url("https://app.nx.edu.sa/assets/fonts/LamaRounded-Medium.ttf") format("truetype");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Lama Rounded";
  src: url("https://app.nx.edu.sa/assets/fonts/LamaRounded-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}

:root {
  /* surfaces */
  --nx-page: #faf8f3;
  --nx-surface: #ffffff;
  --nx-surface-secondary: #f2f3f3;
  --nx-brand-40: #f4f1e7;
  /* content */
  --nx-high: #131517;
  --nx-mid: #727688;
  --nx-low: #b2b5b8;
  --nx-action: #926f01;
  --nx-success: #0f7b3d;
  --nx-warning: #a05800;
  --nx-error: #c22207;
  --nx-info: #5822bd;
  /* strokes */
  --nx-stroke-mid: #e5e6e7;
  --nx-stroke-low: #f2f3f3;
  --nx-stroke-page: #e7e4dd;
  /* brand */
  --nx-brand-100: #fff7dd;
  --nx-brand-200: #ffeebb;
  --nx-brand-300: #fee287;
  --nx-brand-500: #fed143;
  --nx-brand-600: #d2a61b;
  /* feedback (alerts, toasts) */
  --nx-success-stroke: #18aa5c;
  --nx-success-fill: #e4fde9;
  --nx-warn-stroke: #fd8f08;
  --nx-warn-fill: #fdf0e0;
  --nx-danger-stroke: #ec2001;
  --nx-danger-fill: #fef3f2;
  --nx-info-stroke: #3093ff;
  --nx-info-fill: #eff8ff;
  /* radius & spacing (mobile; larger screens below) */
  --nx-r-md: 8px;
  --nx-r-lg: 12px;
  --nx-r-xl: 16px;
  --nx-sp-md: 8px;
  --nx-sp-lg: 12px;
  --nx-sp-xl: 16px;
  --nx-sp-2xl: 20px;
  --nx-shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  --nx-font: "Nunito", "Lama Rounded", -apple-system, "Segoe UI", Tahoma, sans-serif;
}
@media (min-width: 768px) {
  :root {
    --nx-sp-md: 10px;
    --nx-sp-lg: 16px;
    --nx-sp-xl: 20px;
    --nx-sp-2xl: 24px;
  }
}
@media (min-width: 1280px) {
  :root {
    --nx-r-md: 12px;
    --nx-r-lg: 16px;
    --nx-r-xl: 24px;
    --nx-sp-md: 12px;
    --nx-sp-lg: 18px;
    --nx-sp-xl: 24px;
    --nx-sp-2xl: 32px;
  }
}

/* ---------- base ---------- */
html,
body {
  background-color: var(--nx-page) !important;
}
body,
.layout-content,
.layout-content * {
  font-family: var(--nx-font) !important;
}
.layout-content .fa,
.layout-content [class^="fa-"],
.layout-content [class*=" fa-"] {
  font-family: FontAwesome !important;
}
body {
  color: var(--nx-high);
  -webkit-font-smoothing: antialiased;
}
a,
a:visited {
  color: var(--nx-action);
}
.color-primary {
  color: var(--nx-high) !important;
}
.color-secondary {
  color: var(--nx-mid) !important;
}
.border-color {
  border-color: var(--nx-stroke-low) !important;
}
.layout-content .container {
  padding-top: 32px;
}

/* ---------- top bar (the standard masthead, restyled as the nx app header) ---------- */
.layout-content.status .masthead-container,
.layout-content .masthead-container.basic {
  background: var(--nx-surface) !important;
  border-bottom: 1px solid var(--nx-stroke-low) !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.layout-content.status .masthead-container .masthead,
.layout-content .masthead-container.basic .masthead {
  /* same box as the page content below (90% wide, 850px max) so edges line up */
  width: 90% !important;
  max-width: 850px !important;
  margin: 0 auto !important;
  padding: 12px 0 !important;
  height: 72px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
}
.masthead .clearfix {
  display: none;
}
.masthead .logo-container {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}
.masthead .logo-container img {
  height: 32px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}
.masthead .logo-container::after {
  content: "Status · حالة الأنظمة";
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--nx-high);
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--nx-stroke-mid);
  white-space: nowrap;
}
.masthead .page-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--nx-high) !important;
}
/* Subscriptions are switched off, so the Subscribe button is hidden.
   Remove this rule if email/SMS subscriptions are turned on later. */
.masthead .updates-dropdown-container,
#show-updates-dropdown,
#updates-dropdown {
  display: none !important;
}

/* "Website" button in its place. It is drawn on the logo link, which goes to the
   Company website URL (Page info). Custom CSS cannot make it open a new tab. */
.layout-content .masthead {
  position: relative !important;
}
.masthead .logo-container > a::after {
  content: "Website \f08e";
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 128px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nx-brand-500);
  color: var(--nx-high);
  border: 2px solid var(--nx-brand-200);
  border-radius: var(--nx-r-lg);
  font-family: "Nunito", "Lama Rounded", FontAwesome, sans-serif !important;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  white-space: pre;
  transition: border-color 0.2s;
}
.masthead .logo-container > a:hover::after {
  border-color: var(--nx-brand-600);
}

/* Subpages (history, uptime, incident): "← Current Status" moves from the
   footer into the top bar, next to the Website button.
   The container starts right under the 72px bar (73px with its border). */
.layout-content > .container > .page-footer {
  position: static !important;
}
.layout-content > .container > .page-footer > a:not(.color-secondary) {
  position: absolute;
  top: -57px;
  inset-inline-end: 140px;
  z-index: 2;
  height: 40px;
  box-sizing: border-box;
  margin: 0 !important;
}

/* ---------- buttons (DS primary / secondary) ---------- */
a.show-updates-dropdown,
.show-updates-dropdown,
.updates-dropdown button,
.updates-dropdown input[type="submit"],
.flat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--nx-brand-500) !important;
  color: var(--nx-high) !important;
  border: 2px solid var(--nx-brand-200) !important;
  border-radius: var(--nx-r-lg) !important;
  padding: var(--nx-sp-md) var(--nx-sp-lg) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s, border-color 0.2s;
}
@media (min-width: 768px) {
  a.show-updates-dropdown,
  .show-updates-dropdown,
  .updates-dropdown button,
  .updates-dropdown input[type="submit"],
  .flat-button {
    font-size: 16px !important;
  }
  a.show-updates-dropdown:hover,
  .show-updates-dropdown:hover,
  .updates-dropdown button:hover,
  .updates-dropdown input[type="submit"]:hover,
  .flat-button:hover {
    border-color: var(--nx-brand-600) !important;
  }
}
.show-updates-dropdown:focus-visible,
.history-footer-link a:focus-visible {
  outline: 2px solid var(--nx-brand-500);
  outline-offset: 2px;
}

/* subscribe menu */
.updates-dropdown {
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-bottom-width: 4px !important;
  border-radius: var(--nx-r-xl) !important;
  box-shadow: var(--nx-shadow-lg) !important;
  overflow: hidden;
}
.updates-dropdown .updates-dropdown-nav {
  background: var(--nx-brand-100) !important;
  border-color: var(--nx-stroke-low) !important;
}
.updates-dropdown .updates-dropdown-nav a {
  color: var(--nx-mid) !important;
  font-weight: 800 !important;
}
.updates-dropdown .updates-dropdown-nav a.active,
.updates-dropdown .updates-dropdown-nav a:hover {
  color: var(--nx-high) !important;
  background: var(--nx-brand-500) !important;
}
.updates-dropdown input[type="text"],
.updates-dropdown input[type="email"],
.updates-dropdown input[type="tel"],
.updates-dropdown select {
  border: 2px solid var(--nx-stroke-mid) !important;
  border-radius: var(--nx-r-lg) !important;
  box-shadow: none !important;
  color: var(--nx-high) !important;
}
.updates-dropdown-section,
.updates-dropdown-section p {
  color: var(--nx-mid) !important;
  font-size: 14px !important;
}

/* ---------- alert-style banners (overall status, open incidents, maintenance) ---------- */
.page-status,
.unresolved-incident,
.scheduled-maintenances-container .scheduled-maintenance {
  --nx-alert-stroke: var(--nx-success-stroke);
  --nx-alert-fill: var(--nx-success-fill);
  background: var(--nx-alert-fill) !important;
  border: 2px solid var(--nx-alert-stroke) !important;
  border-bottom-width: 8px !important;
  border-radius: var(--nx-r-xl) !important;
  box-shadow: none !important;
  color: var(--nx-high) !important;
}
.page-status {
  display: flex;
  align-items: center;
  gap: var(--nx-sp-lg);
  padding: var(--nx-sp-lg) var(--nx-sp-xl) !important;
  margin-bottom: 32px !important;
}
.page-status::before {
  font-family: FontAwesome !important;
  content: "\f058";
  font-size: 24px;
  line-height: 1;
  color: var(--nx-alert-stroke);
  flex: none;
}
.page-status .status {
  flex: 1;
  margin: 0 !important;
  color: var(--nx-high) !important;
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 800 !important;
}
.page-status .last-updated-stamp {
  float: none !important;
  color: var(--nx-mid) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.page-status.status-minor,
.unresolved-incident.impact-minor {
  --nx-alert-stroke: var(--nx-warn-stroke);
  --nx-alert-fill: var(--nx-warn-fill);
}
.page-status.status-minor::before {
  content: "\f071";
}
.page-status.status-major,
.page-status.status-critical,
.unresolved-incident.impact-major,
.unresolved-incident.impact-critical {
  --nx-alert-stroke: var(--nx-danger-stroke);
  --nx-alert-fill: var(--nx-danger-fill);
}
.page-status.status-major::before,
.page-status.status-critical::before {
  content: "\f06a";
}
.page-status.status-maintenance,
.unresolved-incident.impact-maintenance,
.scheduled-maintenances-container .scheduled-maintenance {
  --nx-alert-stroke: var(--nx-info-stroke);
  --nx-alert-fill: var(--nx-info-fill);
}
.page-status.status-maintenance::before {
  content: "\f0ad";
}
.unresolved-incident.impact-none {
  --nx-alert-stroke: var(--nx-stroke-mid);
  --nx-alert-fill: var(--nx-surface);
}
.unresolved-incidents {
  margin-bottom: 32px !important;
}
.unresolved-incident,
.scheduled-maintenances-container .scheduled-maintenance {
  padding: 0 !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}
.unresolved-incident .incident-title,
.scheduled-maintenance .incident-title {
  background: transparent !important;
  border: 0 !important;
  padding: var(--nx-sp-lg) var(--nx-sp-xl) 0 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 800 !important;
}
.unresolved-incident .incident-title a,
.unresolved-incident .incident-title .actual-title,
.scheduled-maintenance .incident-title a {
  color: var(--nx-high) !important;
  font-weight: 800 !important;
}
.unresolved-incident .updates,
.scheduled-maintenance .updates {
  background: transparent !important;
  border: 0 !important;
  padding: 4px var(--nx-sp-xl) var(--nx-sp-lg) !important;
  color: var(--nx-mid) !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
.unresolved-incident .updates strong,
.scheduled-maintenance .updates strong {
  color: var(--nx-high) !important;
  font-weight: 800 !important;
}

/* ---------- headings and text ---------- */
.layout-content h1,
.layout-content h2,
.layout-content .font-largest {
  color: var(--nx-high) !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.layout-content h3,
.layout-content .font-large {
  color: var(--nx-high);
  font-weight: 800;
  letter-spacing: 0;
}
.text-section {
  margin-bottom: 32px !important;
}
.text-section h2 {
  margin-bottom: 8px !important;
}
.text-section p {
  color: var(--nx-mid) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  /* English and Arabic paragraphs each keep their own direction */
  unicode-bidi: plaintext;
  text-align: start;
}
@media (min-width: 768px) {
  .layout-content h1,
  .layout-content h2,
  .layout-content .font-largest {
    font-size: 22px !important;
  }
  .text-section p {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}
@media (min-width: 1280px) {
  .layout-content h1,
  .layout-content h2,
  .layout-content .font-largest {
    font-size: 24px !important;
  }
}

/* ---------- components (nx card with rows) ---------- */
.components-section {
  margin-bottom: 40px !important;
}
.components-uptime-link {
  color: var(--nx-mid) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}
.components-uptime-link a {
  color: var(--nx-action) !important;
  font-weight: 800;
}
.components-container,
.components-container.one-column {
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-bottom-width: 4px !important;
  border-radius: var(--nx-r-xl) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.components-container .component-container {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nx-stroke-low) !important;
  border-radius: 0 !important;
  padding: var(--nx-sp-lg) var(--nx-sp-xl) !important;
  margin: 0 !important;
}
.components-container .component-container:last-child {
  border-bottom: 0 !important;
}
.component-container .name,
.component-container .name span {
  color: var(--nx-high) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 800 !important;
}
/* show full names on phones instead of "Content Delivery …" */
.component-inner-container .name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* groups are always expanded: Statuspage has no setting for this, so the
   children are kept visible and the +/- toggle is hidden */
.component-container.is-group .child-components-container {
  display: block !important;
}
.component-container .group-parent-indicator {
  display: none !important;
}
.component-container.is-group > .component-inner-container {
  cursor: default !important;
}
.component-container .component-status {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
}
.component-inner-container.status-green .component-status,
.component-inner-container.status-green .status-icon-button {
  color: var(--nx-success) !important;
}
.component-inner-container.status-yellow .component-status,
.component-inner-container.status-yellow .status-icon-button,
.component-inner-container.status-orange .component-status,
.component-inner-container.status-orange .status-icon-button {
  color: var(--nx-warning) !important;
}
.component-inner-container.status-red .component-status,
.component-inner-container.status-red .status-icon-button {
  color: var(--nx-error) !important;
}
.component-inner-container.status-blue .component-status,
.component-inner-container.status-blue .status-icon-button {
  color: var(--nx-info) !important;
}
.component-container .tooltip-base,
.component-container .component-description {
  color: var(--nx-low) !important;
}
@media (min-width: 768px) {
  .component-container .name,
  .component-container .name span {
    font-size: 16px !important;
  }
}
/* expanded group: children sit on the page tint, like nested app lists */
.child-components-container {
  background: var(--nx-page) !important;
  border-radius: var(--nx-r-lg) !important;
  margin-top: 12px !important;
  padding: var(--nx-sp-md) var(--nx-sp-lg) !important;
}
.child-components-container .component-inner-container {
  border-color: var(--nx-stroke-page) !important;
  padding: var(--nx-sp-md) 0 !important;
}
.child-components-container .component-inner-container + .component-inner-container {
  border-top: 1px solid var(--nx-stroke-page) !important;
}

/* 90-day bars */
.availability-time-line-graphic rect {
  rx: 1.5px;
  ry: 1.5px;
}
.shared-partial.uptime-90-days-wrapper {
  margin-top: 10px !important;
}
.legend,
.legend .legend-item {
  color: var(--nx-mid) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.legend .spacer {
  border-color: var(--nx-stroke-mid) !important;
  background: var(--nx-stroke-mid) !important;
}

/* bar tooltip */
#uptime-tooltip .tooltip-box {
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-bottom-width: 4px !important;
  border-radius: var(--nx-r-lg) !important;
  box-shadow: var(--nx-shadow-lg) !important;
}
#uptime-tooltip .pointer-larger {
  border-bottom-color: var(--nx-stroke-mid) !important;
}
#uptime-tooltip .pointer-smaller {
  border-bottom-color: var(--nx-surface) !important;
}
#uptime-tooltip .date {
  color: var(--nx-high) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
#uptime-tooltip .outages,
#uptime-tooltip .no-outages-msg,
#uptime-tooltip .no-data-msg,
#uptime-tooltip .related-events {
  color: var(--nx-mid) !important;
  font-size: 12px !important;
}
#uptime-tooltip .related-events h3,
#uptime-tooltip .related-events a {
  color: var(--nx-high) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* system metrics */
.metrics-container,
.system-metrics-container {
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-bottom-width: 4px !important;
  border-radius: var(--nx-r-xl) !important;
  overflow: hidden;
}

/* ---------- past incidents (one nx card per day) ---------- */
.incidents-list {
  margin-top: 8px;
}
.incidents-list > h2 {
  margin-bottom: 16px !important;
}
/* the days form one card: rows divided by a hairline, like the components card */
.incidents-list .status-day {
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--nx-stroke-low) !important;
  border-radius: 0 !important;
  padding: var(--nx-sp-lg) var(--nx-sp-xl) !important;
  margin: 0 !important;
}
.incidents-list > h2 + .status-day {
  border-top: 2px solid var(--nx-stroke-mid) !important;
  border-top-left-radius: var(--nx-r-xl) !important;
  border-top-right-radius: var(--nx-r-xl) !important;
}
.incidents-list .status-day:last-child {
  border-bottom: 4px solid var(--nx-stroke-mid) !important;
  border-bottom-left-radius: var(--nx-r-xl) !important;
  border-bottom-right-radius: var(--nx-r-xl) !important;
}
/* quiet days on one line: date at the start, note at the end */
.incidents-list .status-day.no-incidents {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.incidents-list .status-day.no-incidents .date {
  margin: 0 !important;
}
.incidents-list .status-day .date {
  color: var(--nx-high) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 800 !important;
}
.incidents-list .status-day p,
.incidents-list .status-day.no-incidents p {
  color: var(--nx-mid) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  margin: 0 !important;
}
.incidents-list .incident-container {
  border-top: 1px solid var(--nx-stroke-low) !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
}
.incidents-list .date + .incident-container {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 4px !important;
}
.incident-title,
.incident-title a,
.incident-name {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.incidents-list .incident-title,
.incidents-list .incident-title a {
  font-size: 16px !important;
  line-height: 24px !important;
}
.incident-title.impact-none a,
a.incident-title.impact-none,
.incident-name.impact-none {
  color: var(--nx-high) !important;
}
.incident-title.impact-minor a,
a.incident-title.impact-minor,
.incident-name.impact-minor {
  color: var(--nx-warning) !important;
}
.incident-title.impact-major a,
.incident-title.impact-critical a,
a.incident-title.impact-major,
a.incident-title.impact-critical,
.incident-name.impact-major,
.incident-name.impact-critical {
  color: var(--nx-error) !important;
}
.incident-title.impact-maintenance a,
a.incident-title.impact-maintenance,
.incident-name.impact-maintenance {
  color: var(--nx-info) !important;
}
.updates-container .update,
.incident-updates-container .update-body,
.update {
  color: var(--nx-high) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  unicode-bidi: plaintext;
  text-align: start;
}
.updates-container .update strong,
.update-title,
.incident-updates-container .update-title {
  color: var(--nx-high) !important;
  font-weight: 800 !important;
}
.updates-container small,
.update small,
.update-timestamp,
.incident-updates-container .update-timestamp,
.subheader {
  color: var(--nx-mid) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* "Incident History" / "View historical uptime" links -> DS secondary button */
.layout-content .history-footer-link {
  margin-top: 8px !important;
}
.incidents-list ~ .history-footer-link a,
.layout-content > .container > .history-footer-link a,
.page-footer > a:not(.color-secondary) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nx-surface) !important;
  color: var(--nx-high) !important;
  border: 2px solid var(--nx-brand-300) !important;
  border-radius: var(--nx-r-lg) !important;
  padding: var(--nx-sp-md) var(--nx-sp-lg) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.incidents-list ~ .history-footer-link a:hover,
.layout-content > .container > .history-footer-link a:hover,
.page-footer > a:not(.color-secondary):hover {
  background: var(--nx-brand-100) !important;
}

/* incident detail, history and uptime pages */
.incident-name {
  font-size: 24px !important;
  line-height: 32px !important;
}
.incident-updates-container .update-row {
  border-color: var(--nx-stroke-low) !important;
}
.incident-history .month,
.months-container .month {
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-bottom-width: 4px !important;
  border-radius: var(--nx-r-xl) !important;
  padding: var(--nx-sp-lg) var(--nx-sp-xl) !important;
  margin-bottom: 16px !important;
}
.month-title,
.months-container .month-title {
  color: var(--nx-high) !important;
  font-weight: 800 !important;
}
.incident-history .incident-data,
.months-container .incident-data {
  border-color: var(--nx-stroke-low) !important;
}
.components-affected,
.incident-data .secondary,
.incident-data small {
  color: var(--nx-mid) !important;
}
.uptime-page .component-uptime,
.layout-content.uptime .components-container {
  border-radius: var(--nx-r-xl) !important;
}

/* history page: Incidents / Uptime switch as nx tabs */
.history-nav {
  border: 0 !important;
  margin-bottom: 24px !important;
}
.history-nav ul {
  display: inline-flex !important;
  gap: 2px;
  padding: 4px !important;
  margin: 0 !important;
  list-style: none;
  background: var(--nx-brand-100);
  border: 2px solid rgba(19, 21, 23, 0.04);
  border-radius: 16px;
}
.history-nav li {
  margin: 0 !important;
  float: none !important;
}
.history-nav a.button {
  display: inline-block;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  color: var(--nx-mid) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.history-nav a.button.current {
  background: var(--nx-brand-500) !important;
  color: var(--nx-high) !important;
}
/* history page: month range and arrows */
.pagination {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.pagination .current {
  color: var(--nx-high) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.pagination a.previous-page,
.pagination a.next-page {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-brand-300) !important;
  border-radius: 999px !important;
  color: var(--nx-high) !important;
  text-decoration: none !important;
}
.pagination a.previous-page:not(.disabled):hover,
.pagination a.next-page:not(.disabled):hover {
  background: var(--nx-brand-100) !important;
}
/* chevrons drawn with borders so they sit exactly in the middle of the circle */
.pagination a.previous-page i,
.pagination a.next-page i {
  position: static !important;
  display: block !important;
  width: 8px;
  height: 8px;
  margin: 0 !important;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  border-radius: 1px;
  transform: translateX(1.5px) rotate(45deg);
}
.pagination a.next-page i {
  border-width: 2px 2px 0 0;
  transform: translateX(-1.5px) rotate(45deg);
}
.pagination a.previous-page i::before,
.pagination a.next-page i::before {
  content: none !important;
}
.pagination a.disabled {
  opacity: 0.4;
  cursor: default;
}
.months-container .month-title {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.incident-history .incident-container {
  border-top: 1px solid var(--nx-stroke-low) !important;
  padding: 12px 0 0 !important;
  margin: 12px 0 0 !important;
}
.incident-history .incident-container:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.incident-history .incident-title {
  font-size: 16px !important;
  line-height: 24px !important;
}
.incident-history .incident-body {
  color: var(--nx-high) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  unicode-bidi: plaintext;
  text-align: start;
}
.incident-history .secondary {
  color: var(--nx-mid) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.history-backpage .no-incidents,
.month .no-incidents {
  color: var(--nx-mid) !important;
  font-size: 14px !important;
}

/* uptime page: component picker as a DS select, rounded day tiles.
   The picker is react-select; its menu is rendered at the end of <body>. */
.uptime-calendar .component-selector {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-width: 280px;
}
.uptime-calendar .component-selector .control-group {
  margin: 0 !important;
}
.select-input__control {
  min-height: 44px !important;
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-radius: var(--nx-r-lg) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.select-input__control:hover {
  border-color: var(--nx-brand-300) !important;
}
.select-input__control--is-focused,
.select-input__control--menu-is-open {
  border-color: var(--nx-brand-500) !important;
  box-shadow: 0 0 0 3px var(--nx-brand-100) !important;
}
.select-input__value-container {
  padding: 0 12px !important;
}
.select-input__single-value,
.select-input__placeholder {
  color: var(--nx-high) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.select-input__indicator-separator {
  display: none !important;
}
.select-input__dropdown-indicator {
  color: var(--nx-mid) !important;
  padding: 0 12px !important;
}
.select-input__dropdown-indicator svg {
  transition: transform 0.2s;
}
.select-input__control--menu-is-open .select-input__dropdown-indicator svg {
  transform: rotate(180deg);
}
.select-input__menu {
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-bottom-width: 4px !important;
  border-radius: var(--nx-r-xl) !important;
  box-shadow: var(--nx-shadow-lg) !important;
  margin-top: 8px !important;
  overflow: hidden;
  font-family: var(--nx-font) !important;
}
.select-input__menu-list {
  padding: 6px !important;
}
.select-input__option {
  border-radius: var(--nx-r-md) !important;
  padding: 10px 12px !important;
  background: transparent !important;
  color: var(--nx-high) !important;
  font-family: var(--nx-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.select-input__option + .select-input__option {
  margin-top: 2px;
}
.select-input__option--is-focused {
  background: var(--nx-brand-100) !important;
}
.select-input__option--is-selected {
  background: var(--nx-brand-500) !important;
  font-weight: 800 !important;
}
.uptime-calendar svg.day rect {
  rx: 4px;
  ry: 4px;
}

/* loading skeletons: the Uptime and History pages are drawn in the browser,
   so their (empty) mount point shows placeholder blocks until the content arrives */
@keyframes nx-skeleton-pulse {
  50% {
    opacity: 0.45;
  }
}
[data-react-class="UptimeCalendar"]:empty,
[data-react-class="HistoryIndex"]:empty {
  position: relative;
  display: block;
  animation: nx-skeleton-pulse 1.4s ease-in-out infinite;
}
[data-react-class="UptimeCalendar"]:empty::before,
[data-react-class="UptimeCalendar"]:empty::after,
[data-react-class="HistoryIndex"]:empty::before,
[data-react-class="HistoryIndex"]:empty::after {
  content: "";
  position: absolute;
  left: 0;
  background: rgba(19, 21, 23, 0.06);
}
/* uptime: component picker, then the calendar */
[data-react-class="UptimeCalendar"]:empty {
  min-height: 340px;
}
[data-react-class="UptimeCalendar"]:empty::before {
  top: 0;
  width: min(320px, 100%);
  height: 44px;
  border-radius: var(--nx-r-lg);
}
[data-react-class="UptimeCalendar"]:empty::after {
  top: 76px;
  width: 100%;
  height: 264px;
  border-radius: var(--nx-r-xl);
}
/* history: month range, then month cards */
[data-react-class="HistoryIndex"]:empty {
  min-height: 280px;
}
[data-react-class="HistoryIndex"]:empty::before {
  top: 0;
  left: auto;
  right: 0;
  width: min(280px, 100%);
  height: 36px;
  border-radius: 999px;
}
[data-react-class="HistoryIndex"]:empty::after {
  top: 60px;
  width: 100%;
  height: 96px;
  border-radius: var(--nx-r-xl);
  /* a second month card below the first one */
  box-shadow: 0 112px 0 rgba(19, 21, 23, 0.06);
}
@media (prefers-reduced-motion: reduce) {
  [data-react-class="UptimeCalendar"]:empty,
  [data-react-class="HistoryIndex"]:empty {
    animation: none;
  }
}

/* incident page: title, then the updates in one nx card */
.page-title {
  margin-bottom: 24px !important;
}
.page-title .subheader,
.page-title .subheader a {
  color: var(--nx-mid) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.incident-updates-container {
  background: var(--nx-surface) !important;
  border: 2px solid var(--nx-stroke-mid) !important;
  border-bottom-width: 4px !important;
  border-radius: var(--nx-r-xl) !important;
  padding: 0 var(--nx-sp-xl) !important;
}
.incident-updates-container .update-row {
  margin: 0 !important;
  padding: var(--nx-sp-lg) 0 !important;
  border-top: 1px solid var(--nx-stroke-low) !important;
}
.incident-updates-container .update-row:first-child {
  border-top: 0 !important;
}
.layout-content .incident-updates-container h2.update-title {
  font-size: 16px !important;
  line-height: 24px !important;
  margin: 0 !important;
}
.incident-updates-container .update-body {
  font-size: 14px !important;
  line-height: 20px !important;
}
.components-affected {
  margin-top: 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ---------- footer ---------- */
.page-footer {
  border: 0 !important;
  margin-top: 24px !important;
  padding: 24px 0 40px !important;
  border-top: 1px solid var(--nx-stroke-page) !important;
  color: var(--nx-low) !important;
  font-size: 12px !important;
}
.page-footer::before {
  content: "nx · nx.edu.sa";
  display: block;
  margin-bottom: 6px;
  color: var(--nx-mid);
  font-size: 14px;
  font-weight: 800;
}
.page-footer .powered-by,
.page-footer .powered-by a {
  color: var(--nx-low) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ---------- custom header/footer HTML (only rendered on the Business plan) ---------- */
body:has(.nx-topbar) .masthead .logo-container {
  display: none !important;
}
.nx-topbar {
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-stroke-low);
}
.nx-topbar-inner {
  max-width: 850px;
  margin: 0 auto;
  padding: 12px 20px;
  min-height: 72px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nx-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none !important;
}
.nx-brand svg,
.nx-logo {
  height: 32px;
  width: auto;
  display: block;
}
.nx-topbar-title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--nx-high);
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--nx-stroke-mid);
  white-space: nowrap;
}
.nx-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nx-btn,
.nx-btn-tertiary {
  display: inline-flex;
  align-items: center;
  padding: var(--nx-sp-md) var(--nx-sp-lg);
  border: 2px solid var(--nx-brand-200);
  border-radius: var(--nx-r-lg);
  background: var(--nx-brand-500);
  color: var(--nx-high) !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
}
.nx-btn-tertiary {
  background: #f6f3fb;
  border-color: #ba8df8;
}
@media (min-width: 768px) {
  .nx-btn:hover {
    border-color: var(--nx-brand-600);
  }
  .nx-btn-tertiary:hover {
    background: var(--nx-surface);
  }
}
.nx-footer {
  max-width: 850px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--nx-stroke-page);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--nx-mid);
}
.nx-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.nx-footer a {
  color: var(--nx-mid) !important;
  font-weight: 600;
  text-decoration: none;
}
.nx-footer a:hover {
  color: var(--nx-action) !important;
}

/* ---------- small screens ---------- */
@media (max-width: 599px) {
  .layout-content.status .masthead-container .masthead,
  .layout-content .masthead-container.basic .masthead {
    height: 64px;
    padding: 10px 0 !important;
  }
  /* Website and the back link become round icon buttons in the 64px bar */
  .layout-content .masthead .logo-container > a::after {
    content: "\f08e";
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 16px;
  }
  .layout-content > .container > .page-footer > a:not(.color-secondary) {
    top: -51px;
    inset-inline-end: 44px;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    justify-content: center;
    gap: 0;
    border-radius: 999px !important;
    font-size: 0 !important;
  }
  .page-footer > a .current-status-arrow {
    font-size: 16px;
  }
  .masthead .logo-container img,
  .nx-brand svg {
    height: 26px !important;
  }
  .masthead .logo-container::after {
    content: "Status";
    font-size: 16px;
    padding-inline-start: 10px;
  }
  .nx-topbar-title .nx-ar,
  .nx-topbar-actions .nx-btn-tertiary {
    display: none;
  }
  .page-status {
    flex-wrap: wrap;
  }
  .page-status .last-updated-stamp {
    flex-basis: 100%;
    padding-inline-start: 36px;
  }
  .nx-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}