/* App styles. Open Props (open-props.min.css) supplies the design tokens; this file maps them to a
   small set of semantic roles and styles the handful of components the app actually uses. Both light
   and dark are supported via prefers-color-scheme. Keep it lean — no decoration without a job. */

:root {
  --surface: var(--gray-0);
  --surface-raised: #fff;
  --border: var(--gray-3);
  --text: var(--gray-9);
  --text-muted: var(--gray-6);
  --brand: var(--indigo-7);
  --brand-text: var(--gray-0);

  --status-up: var(--green-7);
  --status-down: var(--red-7);
  --status-blocked: var(--orange-7);

  --radius: var(--radius-2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: var(--gray-10);
    --surface-raised: var(--gray-9);
    --border: var(--gray-8);
    --text: var(--gray-1);
    --text-muted: var(--gray-5);
    --brand: var(--indigo-5);
    --brand-text: var(--gray-10);

    --status-up: var(--green-5);
    --status-down: var(--red-5);
    --status-blocked: var(--orange-5);
  }
}

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

body {
  margin: 0;
  font-family: var(--font-system-ui);
  color: var(--text);
  background: var(--surface);
  line-height: var(--font-lineheight-3);
}

a { color: var(--brand); }

/* Layout */

.container {
  max-width: 60rem;
  margin-inline: auto;
  padding: var(--size-5) var(--size-4);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--size-4);
  flex-wrap: wrap;
  padding: var(--size-3) var(--size-4);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.site-nav__brand {
  font-weight: var(--font-weight-7);
  color: var(--text);
  text-decoration: none;
}

.site-nav__spacer { margin-inline-start: auto; }

.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* Page header with an action on the right */

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--size-3);
  flex-wrap: wrap;
  margin-block-end: var(--size-4);
}

.page-header h1 { margin: 0; }

/* Cards */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--size-4);
}

.stack > * + * { margin-block-start: var(--size-3); }

/* Tables */

table.data {
  width: 100%;
  border-collapse: collapse;
}

table.data th,
table.data td {
  text-align: start;
  padding: var(--size-2) var(--size-3);
  border-bottom: 1px solid var(--border);
}

table.data th {
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-1);
  color: var(--text-muted);
}

/* Status badge */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-6);
  padding: var(--size-1) var(--size-2);
  border-radius: var(--radius-round);
  color: var(--gray-0);
}

.status--up { background: var(--status-up); }
.status--down { background: var(--status-down); }
.status--blocked { background: var(--status-blocked); }
.status--disabled { background: var(--gray-6); }

/* Forms */

form .field { margin-block-end: var(--size-3); }

label {
  display: block;
  font-weight: var(--font-weight-6);
  margin-block-end: var(--size-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
select {
  width: 100%;
  padding: var(--size-2) var(--size-3);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.hint { color: var(--text-muted); font-size: var(--font-size-0); }

/* Buttons */

.btn,
input[type="submit"],
button {
  display: inline-block;
  font: inherit;
  font-weight: var(--font-weight-6);
  padding: var(--size-2) var(--size-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--brand-text);
  cursor: pointer;
  text-decoration: none;
}

.btn--secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--border);
}

.btn--danger { background: var(--status-down); color: var(--gray-0); }

/* Flash + errors */

.flash {
  padding: var(--size-3) var(--size-4);
  border-radius: var(--radius);
  margin-block-end: var(--size-4);
}

.flash--notice { background: var(--green-2); color: var(--green-9); }
.flash--alert { background: var(--red-2); color: var(--red-9); }

@media (prefers-color-scheme: dark) {
  .flash--notice { background: var(--green-11); color: var(--green-2); }
  .flash--alert { background: var(--red-11); color: var(--red-2); }
}

.errors {
  border: 1px solid var(--status-down);
  border-radius: var(--radius);
  padding: var(--size-3);
  margin-block-end: var(--size-4);
}

.empty {
  color: var(--text-muted);
  text-align: center;
  padding: var(--size-6) var(--size-4);
}

/* Definition list for a check's config */

dl.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--size-2) var(--size-5);
  margin: 0;
}

dl.details > div { display: contents; }
dl.details dt { color: var(--text-muted); }
dl.details dd { margin: 0; word-break: break-all; }

/* Dashboard status tiles */

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--size-3);
}

.status-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-3);
  text-decoration: none;
  color: var(--text);
}

.status-tile:hover { border-color: var(--brand); }
.status-tile__name { font-weight: var(--font-weight-6); }