/* NerveCentral portal — the intentional layer over Oat CSS (plan §4).
   Order of work: colours → typography → spacing → components.
   One dominant colour (orange), warm paper, electric blue for links only.
   Weight extremes: 200 display / 400 body / 800 emphasis — nothing between.
   Geometry: everything sharp-cornered EXCEPT pill buttons (brand spec). */

/* ---- colours + Oat token overrides ---- */

:root {
  color-scheme: light; /* the portal is a light product — no auto dark theme */

  --nc-orange: #ff572f;
  --nc-orange-deep: #e8431f;
  --nc-orange-dark: #c23a17;
  --nc-paper: #fffefc;
  --nc-ink: #343a40;
  --nc-accent: #0000ee; /* links + exactly one thing per screen */
  --nc-muted: #7a7268;
  --nc-line: #eae3dc;
  --nc-panel: #ffffff;
  --nc-wash: #fff3ed;

  /* Oat tokens */
  --background: var(--nc-paper);
  --foreground: var(--nc-ink);
  --primary: var(--nc-orange);
  --primary-foreground: #ffffff;
  --secondary: #f6f3f0;
  --secondary-foreground: var(--nc-ink);
  --muted-foreground: var(--nc-muted);
  --border: var(--nc-line);
  --input: #d9d1c9;
  --ring: var(--nc-orange);
  --danger: #c62828;
  --success: #0b7a3b;
  --warning: #a65b00;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Only 200/400/800 are loaded — map Oat's intermediate weights onto them */
  --font-normal: 400;
  --font-medium: 400;
  --font-semibold: 800;
  --font-bold: 800;
  --radius-small: 0;
  --radius-medium: 0;
  --radius-large: 0;
}

::selection {
  background: var(--nc-orange);
  color: #fff;
}

/* ---- typography ---- */

body {
  font-size: 16px;
  letter-spacing: 0.01em;
}

a {
  color: var(--nc-accent);
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--nc-orange-dark);
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nc-display {
  font-size: clamp(2.75rem, 2rem + 3.5vw, 4rem); /* 44 → 64px: the 3×+ jump */
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}

.nc-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nc-orange-dark);
}

/* ---- layout shell: fixed sidebar left, content column right ---- */

.nc-shell {
  display: flex;
  align-items: stretch;
  min-height: 100dvh;
}

.nc-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nc-main {
  width: min(1080px, 100% - 3rem);
  margin-inline: auto;
  padding-block: 0 4rem;
  flex: 1;
}

.nc-bare .nc-main {
  width: 100%;
  padding: 0;
}

.nc-footer {
  padding: 1.25rem 1.5rem 2rem;
  text-align: center;
}
.nc-footer p {
  font-size: 0.8125rem;
  color: var(--nc-muted);
}

/* ---- sidebar navigation ---- */

.nc-sidebar {
  width: 232px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: 1.6rem 1.25rem 1.5rem;
}

.nc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--nc-ink);
}
.nc-brand img {
  display: block;
}
.nc-brand-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nc-brand-thin {
  font-weight: 200;
}

.nc-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nc-nav li {
  margin: 0;
}
.nc-nav a,
button.nc-linklike {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.9375rem;
  color: var(--nc-ink);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
}
.nc-nav a:hover,
button.nc-linklike:hover {
  background: #f6f1ec;
  color: var(--nc-orange-dark);
  text-decoration: none;
}
.nc-nav a[aria-current="page"] {
  font-weight: 800;
  background: var(--nc-wash);
  color: var(--nc-orange-dark);
}

/* logout button disguised as a nav link — button.nc-linklike outguns the
   [type=submit] pill styling below */
button.nc-linklike {
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  border-radius: 0;
}

/* narrow screens: sidebar becomes a top row again */
@media (max-width: 760px) {
  .nc-shell {
    flex-direction: column;
  }
  .nc-sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.9rem 1rem;
  }
  .nc-nav ul {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }
  .nc-nav a,
  button.nc-linklike {
    width: auto;
    padding: 0.35rem 0.6rem;
  }
}

/* ---- page header: calm, airy, no rules ---- */

.nc-page-header {
  padding: 3.25rem 0 1.25rem;
  margin-bottom: 2rem;
}

/* ---- buttons: pills, orange, white text (brand spec) ---- */

button,
[type="submit"],
a.button {
  border-radius: 50px;
  padding: 0.55rem 1.4rem;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff; /* beats the global blue link colour */
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
button:hover,
[type="submit"]:hover,
a.button:hover {
  background-color: var(--nc-orange-deep);
  color: #fff;
}
button:active,
[type="submit"]:active,
a.button:active {
  transform: translateY(1px);
}

.nc-btn-secondary,
a.button.nc-btn-secondary {
  background-color: #f6f3f0;
  color: var(--nc-ink);
}
.nc-btn-secondary:hover,
a.button.nc-btn-secondary:hover {
  background-color: #ece7e1;
  color: var(--nc-ink);
}

:focus-visible {
  outline: 2px solid var(--nc-orange);
  outline-offset: 2px;
}

/* ---- login hero: the one screen that goes full-atmosphere ---- */

.nc-login-hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 1.5rem 4rem;
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(255, 170, 130, 0.55), transparent 60%),
    radial-gradient(900px 650px at 108% 12%, rgba(255, 220, 200, 0.32), transparent 55%),
    radial-gradient(1300px 800px at 50% 118%, rgba(140, 30, 5, 0.55), transparent 65%),
    linear-gradient(165deg, #ff6a3d 0%, var(--nc-orange) 38%, var(--nc-orange-deep) 70%, var(--nc-orange-dark) 100%);
}

.nc-login-brand {
  text-align: center;
  color: #fff;
}
.nc-login-brand img {
  margin-inline: auto;
  filter: drop-shadow(0 6px 18px rgba(120, 25, 0, 0.35));
}
.nc-login-wordmark {
  margin: 0.9rem 0 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.nc-login-title {
  margin: 0.4rem 0 0;
  font-size: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
}
.nc-login-sub {
  margin: 0.9rem auto 0;
  max-width: 30rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.88);
}

.nc-login-card {
  width: min(26rem, 100%);
  background: var(--nc-paper);
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 24px 60px rgba(120, 25, 0, 0.35);
}
.nc-login-help {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--nc-muted);
}

/* ---- dashboard cards + the one orchestrated reveal ---- */

.nc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1.25rem;
}

@keyframes nc-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.nc-card {
  background: var(--nc-panel);
  border: 1px solid var(--nc-line);
  border-top: 3px solid var(--nc-orange);
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-small);
  animation: nc-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--nc-reveal-index, 0) * 80ms);
}

.nc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.nc-card-type {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nc-muted);
}
.nc-card-title {
  margin: 0.55rem 0 0.3rem;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.nc-card-meta {
  margin: 0 0 1.1rem;
  font-size: 0.875rem;
  color: var(--nc-muted);
}
.nc-card-meta-bad {
  color: var(--danger);
  font-weight: 800;
}
.nc-card-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
/* the manual-run trigger is a form; let its button join the action row directly */
.nc-run-form {
  display: contents;
}

/* ---- status pills ---- */

.nc-pill {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 50px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.nc-pill-active { background: #e7f6ec; color: #0b7a3b; }
.nc-pill-paused { background: #f1f0ee; color: #6d675f; }
.nc-pill-needs_config { background: #fff3e0; color: #a65b00; }
.nc-pill-error { background: #fdecea; color: #c62828; }
.nc-pill-unknown { background: #f1f0ee; color: #6d675f; }

/* ---- forms ---- */

.nc-form-section {
  background: var(--nc-panel);
  border: 1px solid var(--nc-line);
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 46rem;
}
.nc-form-section h2 {
  margin: 0 0 0.4rem;
  font-size: 1.125rem;
}
.nc-section-note {
  font-size: 0.875rem;
  color: var(--nc-muted);
  margin-bottom: 1.25rem;
}

.nc-field {
  margin-bottom: 1.1rem;
}
.nc-field label {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--nc-ink);
}
.nc-optional {
  font-weight: 400;
  color: var(--nc-muted);
  letter-spacing: 0;
}
.nc-field input:not([type="checkbox"]),
.nc-field select,
.nc-field textarea {
  font-size: 1rem;
  background: #fff;
}
.nc-field input:focus,
.nc-field select:focus,
.nc-field textarea:focus {
  border-color: var(--nc-orange);
}
.nc-field-invalid input,
.nc-field-invalid select,
.nc-field-invalid textarea {
  border-color: var(--danger);
}
.nc-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--nc-muted);
}
.nc-error {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--danger);
}

.nc-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* primary action bottom-right (plan §4) */
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.nc-cancel {
  margin-right: auto;
  font-size: 0.875rem;
}

.nc-settings-form {
  margin-top: 1.5rem;
}
.nc-settings-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.nc-status-form {
  display: flex;
  gap: 0.6rem;
}

.nc-thresholds summary {
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  padding: 0.25rem 0;
}
.nc-thresholds[open] summary {
  margin-bottom: 0.9rem;
}
.nc-threshold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  column-gap: 1.25rem;
}

/* ---- alerts ---- */

.nc-alert {
  margin-bottom: 1.25rem;
  border-radius: 0;
  max-width: 46rem;
}
.nc-alert[data-variant="success"] { background: #e7f6ec; color: #0b5c2e; }
.nc-alert[data-variant="error"] { background: #fdecea; color: #a02121; }
.nc-alert[data-variant="info"] { background: var(--nc-wash); color: #8a4a12; }
.nc-alert p { margin: 0; }

/* ---- run history table (collapses to cards on small screens) ---- */

.nc-backlink {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.nc-table-wrap {
  background: var(--nc-panel);
  border: 1px solid var(--nc-line);
  padding: 0.25rem 1.25rem;
  overflow-x: auto;
}
.nc-runs th {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nc-muted);
}
.nc-runs td {
  font-size: 0.9375rem;
  vertical-align: top;
}
.nc-run-summary {
  color: var(--nc-muted);
}

.nc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
}
.nc-page-count {
  font-size: 0.8125rem;
  color: var(--nc-muted);
}

@media (max-width: 640px) {
  .nc-runs thead {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .nc-runs,
  .nc-runs tbody,
  .nc-runs tr,
  .nc-runs td {
    display: block;
    width: 100%;
  }
  .nc-runs tr {
    border-bottom: 1px solid var(--nc-line);
    padding: 0.75rem 0;
  }
  .nc-runs td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border: none;
    text-align: right;
  }
  .nc-runs td::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nc-muted);
    text-align: left;
  }
}

/* ---- empty states ---- */

.nc-empty {
  border: 1px dashed #dcd3ca;
  background: #fffdfa;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.nc-empty h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}
.nc-empty p {
  color: var(--nc-muted);
  margin: 0;
}