:root {
  --up: #1a9c5e;
  --up-bg: #1a9c5e;
  --down: #de5246;
  --degraded: #e2a33d;
  --investigating: #8a94a6;
  --minor: #f5c26b;
  --partial: #e6893a;
  --no-data: #e3e6e8;
  --bg: #ffffff;
  --border: #ebeef0;
  --text: #16181d;
  --muted: #6b7280;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* The admin page has much denser content (editable tables/forms with long
   URLs) than the public page's simple status list, so it gets a lot more
   width to work with rather than cramming everything into 800px. */
.admin-page {
  max-width: 1200px;
}

.top-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* the logo below is a wide (1628x178) wordmark - on a narrow screen it can eat the whole row, so let the far-right link drop to its own line instead of getting squeezed off it */
  row-gap: 0.6rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0; /* lets .brand-logo's height-based shrink (below) actually take effect instead of the image's intrinsic width forcing this flex item wider than the row */
}

.brand-logo {
  height: 32px;
  width: auto;
  max-width: 100%;
  display: block;
}

.helpdesk-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-left: auto; /* stays pinned to the row's right edge whether it's sharing the first line with .brand or has wrapped onto its own */
}

.helpdesk-link:hover {
  background: var(--border);
}

.brand-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted);
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}

/* The logo file itself is a wide wordmark (1628x178, ~9:1) - at the
   default 32px height that's ~290px wide before the "Status" label or
   either top-bar button even enter the picture. Shrinking it here means
   most phones don't need the flex-wrap fallback above at all; the ones
   narrow enough that they still do get a smaller wrapped row instead of
   a very large one. */
@media (max-width: 480px) {
  .brand-logo {
    height: 22px;
  }
  .brand-label {
    font-size: 0.92rem;
    padding-left: 0.5rem;
  }
}

.announcement-banner {
  background: #eaf2fb;
  color: #1c4e80;
  border: 1px solid #cfe0f3;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.banner {
  padding: 1.1rem 1rem;
  border-radius: 6px;
  color: #fff;
  margin-bottom: 2.5rem;
}

.banner-operational { background: var(--up); }
.banner-investigating { background: var(--investigating); }
.banner-degraded { background: var(--degraded); }
.banner-outage { background: var(--down); }

.banner-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.15rem;
}

.banner-detail {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.95;
}

.banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.group {
  margin-bottom: 2rem;
}

.group h2 {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}

.component-list {
  border: 1px solid var(--border);
  border-radius: 8px;
}

.component-row {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.component-row:first-child {
  border-radius: 8px 8px 0 0;
}

.component-row:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.component-row:only-child {
  border-radius: 8px;
}

.component-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.status-icon-up { background: var(--up); }
.status-icon-investigating { background: var(--investigating); }
.status-icon-minor { background: var(--minor); }
.status-icon-partial { background: var(--partial); }
.status-icon-outage { background: var(--down); }
.status-icon-none { background: var(--no-data); color: var(--muted); }

.component-name {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  flex: 1;
}

.component-name:hover {
  text-decoration: underline;
}

.component-status {
  font-size: 0.85rem;
  font-weight: 600;
}

.status-text-up { color: var(--up); }
.status-text-investigating { color: var(--investigating); }
.status-text-minor { color: #a3660d; }
.status-text-partial { color: #b35900; }
.status-text-outage { color: var(--down); }
.status-text-none { color: var(--muted); }

.uptime-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.7rem;
}

.uptime-bar {
  display: flex;
  gap: 2px;
  flex: 1;
}

.bar {
  position: relative;
  flex: 1;
  min-width: 2px;
  height: 28px;
  border-radius: 1px;
  background: var(--no-data);
  cursor: default;
}

.bar-up { background: var(--up); }
.bar-minor { background: var(--minor); }
.bar-partial { background: var(--partial); }
.bar-outage { background: var(--down); }
.bar-none { background: var(--no-data); }

/* .uptime-bar renders one .bar per day of history - HISTORY_DAYS in
   db.py, currently 90 - all in a single un-scrolled flex row. At each
   bar's 2px min-width floor plus the 2px gaps between them, 90 of them
   need ~360px on their own before the uptime % text or any padding, which
   is already wider than most phones in portrait. Flexbox can't shrink
   past that floor, so instead of the whole page being forced to scroll
   sideways to fit one row, show a shorter (more recent) window instead -
   the oldest days are still in the page's data, just not usable "at a
   glance" on a screen this narrow anyway. Cutoffs count from the oldest
   (first) bar, since get_daily_history() returns oldest-first - keeping
   the *last* N children visible means hiding the first (90 - N).
   If HISTORY_DAYS ever changes, these need to move with it. */
@media (max-width: 700px) {
  .bar:nth-child(-n+60) { /* show the most recent 30 days */
    display: none;
  }
}

@media (max-width: 420px) {
  .bar:nth-child(-n+76) { /* show the most recent 14 days */
    display: none;
  }
}

.bar-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #16181d;
  color: #fff;
  padding: 0.55rem 0.7rem;
  border-radius: 5px;
  font-size: 0.72rem;
  line-height: 1.4;
  width: max-content;
  max-width: 220px;
  white-space: normal;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bar-tooltip strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.tooltip-detail {
  color: #b6bcc4;
  margin-top: 0.1rem;
}

.tooltip-related {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tooltip-related-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #9aa0a8;
  margin-bottom: 0.15rem;
}

.bar-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #16181d;
}

.bar:hover .bar-tooltip {
  display: block;
}

/* Keep tooltips on the outer bars from running off the page edge. */
.bar:first-child .bar-tooltip {
  left: 0;
  transform: none;
}

.bar:first-child .bar-tooltip::after {
  left: 10px;
  transform: none;
}

.bar:last-child .bar-tooltip {
  left: auto;
  right: 0;
  transform: none;
}

.bar:last-child .bar-tooltip::after {
  left: auto;
  right: 10px;
  transform: none;
}

.uptime-pct {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0; /* sits next to .uptime-bar (flex:1) in the same row - without this a crowded bar row could squeeze this nowrap text instead of the bars giving way first */
}

.row-meta {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.error-detail {
  color: var(--down);
}

footer {
  margin-top: 2.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

footer a {
  color: var(--muted);
}

.incident-log {
  margin-bottom: 2rem;
}

.incident-log h2 {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}

.incident-day {
  margin-bottom: 1.5rem;
}

.incident-day-date {
  font-size: 0.95rem;
  font-weight: 700;
  padding-bottom: 0.5rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid var(--border);
}

.incident-log-list {
  border: 1px solid var(--border);
  border-radius: 8px;
}

.incident-log-row {
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.incident-log-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.incident-log-notes {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.incident-log-row:first-child {
  border-radius: 8px 8px 0 0;
}

.incident-log-row:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.incident-log-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.incident-log-title {
  font-weight: 600;
}

.incident-log-service {
  color: var(--muted);
  font-size: 0.8rem;
}

.incident-log-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.incident-auto-tag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--no-data);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Admin pages */

.top-bar {
  justify-content: space-between;
}

.logout-link, .back-link {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
}

.logout-link {
  margin-left: auto; /* same reasoning as .helpdesk-link - stays pinned right whether or not the wide logo has pushed it onto its own wrapped line */
}

.logout-link:hover, .back-link:hover {
  text-decoration: underline;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.admin-quicknav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.admin-quicknav a {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--bg);
}

.admin-quicknav a:hover {
  background: var(--no-data);
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f8fa;
  padding: 2rem 1.5rem;
}

.login-box {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(22, 24, 29, 0.07);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}

.login-logo {
  height: 34px;
  width: auto;
  display: block;
  margin: 0 auto 1.75rem;
}

.login-box h1 {
  font-size: 1.15rem;
  margin: 0 0 1.5rem;
  color: var(--text);
}

.login-box form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.login-box label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.login-submit {
  width: 100%;
  padding: 0.65rem 1rem;
  margin-top: 0.5rem;
}

.login-box .back-link {
  display: inline-block;
  margin-top: 1.5rem;
}

input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], textarea, select {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  background: #fff;
}

textarea {
  resize: vertical;
}

.banner-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.banner-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.banner-column {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.banner-column label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.banner-column textarea {
  width: 100%;
}

.banner-column .hint {
  margin-top: 0;
}

.banner-form .btn {
  align-self: flex-start;
}

.notifications-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.notifications-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.notifications-column {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.notifications-column label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.notifications-column textarea {
  width: 100%;
}

.notifications-column .hint {
  margin-top: 0;
}

.notifications-form .btn {
  align-self: flex-start;
}

.form-error {
  background: #fdeeee;
  color: var(--down);
  padding: 0.6rem 0.8rem;
  border-radius: 5px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.form-success {
  background: #e6f4ea;
  color: var(--up);
  padding: 0.6rem 0.8rem;
  border-radius: 5px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(90vw, 380px);
}

.toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  animation: toast-in 0.15s ease-out;
}

.toast-success {
  background: #e6f4ea;
  color: var(--up);
}

.toast-error {
  background: #fdeeee;
  color: var(--down);
}

.toast-close {
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  padding: 0;
}

.toast-close:hover {
  opacity: 1;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn {
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  background: var(--text);
  color: #fff;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.85;
}

.btn-small {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
}

.btn-danger {
  background: var(--down);
}

.btn-warning {
  background: var(--partial);
}

.admin-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 5px solid var(--border);
}

.admin-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.admin-section h2 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.admin-section h3 {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 1.5rem 0 0.75rem;
}

.inline-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
  flex-wrap: wrap;
}

.inline-form label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

/* .back-link's own margin-bottom (meant for its usual standalone use as a
   "back to page" link) was fighting .inline-form's align-items: center
   when the "Clear" link sits inside the incidents search form. */
.inline-form .back-link {
  margin-bottom: 0;
}

.inline-form input[type="number"] {
  width: 80px;
}

.inline-form input[type="text"] {
  width: 220px;
}

.hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.service-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.service-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.service-table th {
  text-align: left;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.6rem 0.6rem;
}

.service-table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.service-table tbody tr:last-child td {
  border-bottom: none;
}

/* Alternating row tint (zebra striping) - purely a scanning aid for
   tracking a row across wide columns, not meaningful data. */
.service-table tbody tr:nth-child(even) {
  background: #f6f8fa;
}

/* table-layout: fixed above means these percentages are reliable - without
   it the browser sizes columns by content and the URL column (by far the
   longest text) ends up squeezed to whatever's left over. */
.service-table th:nth-child(1), .service-table td:nth-child(1) { width: 20%; }
.service-table th:nth-child(2), .service-table td:nth-child(2) { width: 42%; }
.service-table th:nth-child(3), .service-table td:nth-child(3) { width: 16%; }
.service-table th:nth-child(4), .service-table td:nth-child(4) { width: 22%; }

.service-table input {
  width: 100%;
  min-width: 0; /* inputs ignore table-layout:fixed's column width by default without this */
}

.row-actions {
  display: flex;
  gap: 0.4rem;
  white-space: nowrap;
  flex-wrap: wrap;
}

.group-order-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.group-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}

.group-order-row + .group-order-row {
  border-top: 1px solid var(--border);
}

.group-order-row .row-actions form {
  display: contents; /* forms can't be flex items directly without extra nesting - let their button size/position as if the form itself weren't there */
}

/* Column widths shared by the header row and every summary row, so
   Title/Service/Start/Status actually line up like a real table even
   though each row is a separately-collapsible <details> element. */
.incident-list-header, .incident-summary {
  grid-template-columns: 20px minmax(200px, 1fr) 140px 150px 220px;
  gap: 0.75rem;
}

.incident-list-header {
  display: grid;
  padding: 0 1rem 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.incident-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.incident-list .incident-card {
  border-bottom: 1px solid var(--border);
}

.incident-list .incident-card:last-of-type {
  border-bottom: none;
}

/* Same zebra striping as the servers table, for the same reason - makes
   it easier to track one row across the width of the page. */
.incident-list .incident-card:nth-child(even) {
  background: #f6f8fa;
}

/* The Add Incident form (a plain <form>, not a <details>) isn't part of
   .incident-list, so it needs its own full border/padding. */
form.incident-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.incident-summary {
  display: grid;
  align-items: center;
  padding: 0.7rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.incident-summary::-webkit-details-marker {
  display: none;
}

.incident-summary::before {
  content: "\25B8";
  display: inline-block;
  color: var(--muted);
  transition: transform 0.15s;
}

.incident-card[open] > .incident-summary::before {
  transform: rotate(90deg);
}

.incident-summary-title, .incident-summary-service, .incident-summary-date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-summary-service, .incident-summary-date {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}

.incident-summary .status-pill {
  justify-self: start;
}

/* Below this width the fixed columns stop having room to breathe - fall
   back to the same stacking behavior the cards used before the table
   layout, rather than squeezing five columns into a phone-width screen. */
@media (max-width: 760px) {
  .incident-list-header {
    display: none;
  }

  .incident-summary {
    display: flex;
    flex-wrap: wrap;
  }

  .incident-summary-title, .incident-summary-service, .incident-summary-date {
    overflow: visible;
    white-space: normal;
  }
}

.incident-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--border);
}

.incident-card-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.incident-title-edit-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.incident-title-input {
  flex: 1;
  min-width: 220px;
  font-weight: 600;
}

.incident-card-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.incident-card-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.incident-card-fields select,
.incident-card-fields input {
  min-width: 170px;
}

.end-time-field {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.end-time-field input {
  min-width: 140px;
}

.btn-clear {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.btn-clear:hover {
  background: var(--border);
}

.incident-notes-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.incident-notes-label textarea {
  width: 100%;
}

.incident-card-actions {
  display: flex;
  gap: 0.5rem;
}

.status-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Active incidents are colored by their effective severity (severity_override,
   or "minor" if left on auto) rather than a single flat "active" color - so
   the pill reads the same way the day-bars do: light orange/orange/red. */
.status-pill-minor {
  background: #fdf1dc;
  color: #a3660d;
}

.status-pill-partial {
  background: #fbe4d0;
  color: #b35900;
}

.status-pill-outage {
  background: #fdeeee;
  color: var(--down);
}

.status-pill-resolved {
  background: #e6f4ea;
  color: var(--up);
}

.status-pill-scheduled {
  background: var(--no-data);
  color: var(--muted);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  background: #fff;
}

.page-btn:hover {
  background: var(--no-data);
}

.page-btn-current {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

.page-btn-current:hover {
  background: var(--text);
}

.page-btn-disabled {
  color: var(--muted);
  pointer-events: none;
  opacity: 0.5;
}

.page-ellipsis {
  padding: 0 0.3rem;
  color: var(--muted);
}

.pagination-summary {
  margin-top: 0.5rem;
}

.add-service-form {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.add-service-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}