/*
 * Operator console styles.
 *
 * Hand-written and served straight from `public/`, rather than compiled from
 * the Vite/Tailwind pipeline the skeleton shipped with. The console is one
 * internal tool used by a handful of people, and Livewire serves its own
 * JavaScript from its own route, so this is the last asset standing between
 * the deploy in Phase 7 and not needing Node on the server at all. That is
 * worth more here than utility classes.
 *
 * Colours are the ones in the design mockups.
 */

:root {
  --ink: #182230;
  --ink-soft: #475467;
  --ink-faint: #667085;
  --page: #f7f8fa;
  --surface: #ffffff;
  --line: #dddddd;
  --line-soft: #eaecf0;
  --brand: #175cd3;
  --brand-dark: #12468f;
  --good: #067647;
  --warn: #b54708;
  --bad: #b42318;
  --focus: #175cd3;
  --radius: 6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-size: 15px;
  line-height: 1.5;
}

/* Every interactive element gets the same clearly visible ring. Relying on
   the browser default means the outline disappears wherever a background
   happens to match it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 16px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- shell -- */

.shell {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--ink);
  color: #fff;
  padding: 22px 18px;
}

.sidebar__brand {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  display: block;
}

.sidebar__nav {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__link {
  color: #cfd6e4;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: var(--radius);
  display: block;
}
.sidebar__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sidebar__link[aria-current="page"] { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }

.sidebar__footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  color: #aab4c5;
}
.sidebar__footer strong { color: #fff; display: block; font-weight: 600; }

.content { padding: 28px; min-width: 0; }

@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; margin-top: 16px; }
  .content { padding: 18px 14px; }
}

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

h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 8px; }
h3 { font-size: 15px; margin: 0 0 6px; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.muted { color: var(--ink-faint); }
.small { font-size: 13px; }
.numeric { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.card small { color: var(--ink-faint); display: block; }
.card .figure { font-size: 26px; font-weight: 600; margin: 6px 0 0; font-variant-numeric: tabular-nums; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}
.panel--flush { padding: 0; overflow: hidden; }

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

.status { font-weight: 600; }
/* Two vocabularies reach this class: the console's own operational/degraded/down
   and the health probe's ok/degraded/down. Each reads correctly where it is
   shown, so `ok` gets an alias rather than a translation at the call site. */
.status--ok,
.status--operational { color: var(--good); }
.status--degraded { color: var(--warn); }
.status--down { color: var(--bad); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid currentColor;
}
.badge--good { color: var(--good); }
.badge--warn { color: var(--warn); }
.badge--bad { color: var(--bad); }
.badge--neutral { color: var(--ink-faint); }

/* -------------------------------------------------------------- tables -- */

table { width: 100%; border-collapse: collapse; text-align: left; background: var(--surface); }
caption { text-align: left; padding: 12px 14px; color: var(--ink-faint); font-size: 13px; }
th, td { padding: 11px 14px; vertical-align: top; }
thead th { font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-weight: 600; }
tbody tr + tr td { border-top: 1px solid var(--line-soft); }
tbody tr:hover { background: #fbfcfd; }

.table-wrap { overflow-x: auto; }

.empty { padding: 28px 14px; text-align: center; color: var(--ink-faint); }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 14px 0 0;
}
.detail-grid div { min-width: 0; }
.detail-grid dt { color: var(--ink-faint); font-size: 13px; }
.detail-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; }

.conversation-turn + .conversation-turn { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 14px; }
.content-dump {
  margin: 8px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 36rem;
  overflow: auto;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f8fafc;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
}

/* ------------------------------------------------------------ progress -- */

progress {
  width: 100%;
  max-width: 160px;
  height: 8px;
  margin-top: 4px;
  display: block;
}

.allowance { white-space: nowrap; }
.allowance--exhausted { color: var(--warn); font-weight: 600; }

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

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #c3c9d4;
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--bad);
}

.error { color: var(--bad); font-size: 13px; margin-top: 4px; }

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 14px;
}

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  padding: 9px 15px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: #c3c9d4; }
.btn--secondary:hover { background: #f2f4f7; }

.btn--danger { background: var(--bad); border-color: var(--bad); }
.btn--danger:hover { background: #912018; border-color: #912018; }

.btn--small { padding: 5px 10px; font-size: 13px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* -------------------------------------------------------------- notice -- */

.notice {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.notice--good { border-left-color: var(--good); }
.notice--warn { border-left-color: var(--warn); }
.notice--bad { border-left-color: var(--bad); }

.secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f2f4f7;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  word-break: break-all;
  display: block;
}

.secret-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.secret-copy__button { min-width: 74px; }

[x-cloak] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------- confirm dialog -- */

/* Destructive actions open this rather than acting on click. The confirmation
   restates what is about to happen in words, because "Are you sure?" tells an
   operator nothing they did not already believe when they clicked. */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}

.confirm {
  background: var(--surface);
  border-radius: 8px;
  padding: 22px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(16, 24, 40, 0.24);
}
.confirm h2 { margin-top: 0; }

/* --------------------------------------------------------------- guest -- */

.guest {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.guest__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
}
.guest__brand { font-weight: 700; margin-bottom: 18px; display: block; }

.qr { background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); display: inline-block; }
.qr svg { display: block; width: 200px; height: 200px; }

.codes { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.codes li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f2f4f7; padding: 6px 8px; border-radius: 4px; }

/* ---------------------------------------------------------- pagination -- */

.pagination { margin-top: 14px; }
.pagination nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pagination a, .pagination span { padding: 6px 10px; border-radius: 4px; text-decoration: none; color: var(--brand); }
.pagination [aria-current="page"] span { background: var(--brand); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}