/* Platform-owner console stylesheet. Neutral platform palette, DM Sans only — never a tenant's
   brand. Ported from White-Label-Coaching-Handoff/designs/platform-owner/owner.css; reviewer
   scaffolding was not ported. Owner pages carry no theme, so colors are literal here (not
   --brand-* custom properties, which only tenant pages receive). */

:root {
  --owner-primary: #2a425c;
  --owner-ink: #273646;
  --owner-soft: #e8edf2;
  --owner-bg: #f6f8fa;
  --owner-border: #cdd6df;
  --owner-muted: #5e6d7c;
  --sans: 'DM Sans', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--owner-bg);
  color: var(--owner-ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  letter-spacing: -0.035em;
  font-weight: 500;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 24px;
}
p {
  margin: 16px 0;
}
code {
  font-size: 13px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.skip {
  position: absolute;
  top: -80px;
  left: 20px;
  background: #fff;
  color: #111;
  padding: 10px 14px;
  z-index: 20;
}
.skip:focus {
  top: 10px;
}

/* ---- Header / nav --------------------------------------------------------------------------- */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 5vw;
  gap: 20px;
  background: #fff;
  border-bottom: 1px solid var(--owner-border);
}
.app-header nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  flex-wrap: wrap;
}
.platform-wordmark {
  font-size: 18px;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.platform-wordmark small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  margin-top: 3px;
  color: var(--owner-muted);
}
.inline-form {
  display: inline-flex;
  margin: 0;
}
.link-button {
  font: inherit;
  font-size: inherit;
  padding: 0;
  text-decoration: none;
}
.link-button:hover {
  text-decoration: underline;
}

/* ---- Layout ----------------------------------------------------------------------------------- */

.owner-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
}
.owner-nav {
  background: var(--owner-soft);
  border-right: 1px solid var(--owner-border);
  padding: 28px 18px;
}
.owner-nav a {
  display: block;
  font-size: 14px;
  padding: 11px 14px;
  margin-bottom: 5px;
}
.owner-nav a.active {
  background: #d9e2ec;
}
.owner-nav .eyebrow {
  font-size: 11px;
  padding-left: 14px;
  margin-top: 10px;
}
.owner-main {
  padding: 36px 4vw;
  max-width: 1350px;
  width: 100%;
}
.owner-main h1 {
  font-size: 34px;
}
.owner-main h2 {
  font-size: 22px;
}
.owner-main .box h3 {
  font-size: 19px;
}
.owner-main .page-top p {
  max-width: 720px;
}
.owner-main .tag {
  font-size: 11px;
}
.owner-main .button {
  font-size: 14px;
}
.owner-main code {
  font-size: 13px;
}
.owner-main .label input {
  background: #fff;
}
.owner-main .key-value strong {
  overflow-wrap: anywhere;
  max-width: 65%;
}
.owner-main .error-text {
  font-size: 14px;
}
.owner-main .account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.owner-main .notice-row {
  background: var(--owner-soft);
}

.owner-login {
  max-width: 460px;
  margin: 60px auto;
  padding: 28px;
}
.owner-login h1 {
  font-size: 38px;
}
.owner-login p {
  font-size: 15px;
}

/* ---- Typography helpers, buttons, forms -------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  margin-bottom: 16px;
}
.page-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--owner-primary);
  color: #fff;
  border: 1px solid var(--owner-primary);
  padding: 13px 20px;
  font-size: 14px;
  line-height: 1.5;
  transition:
    transform 0.2s,
    filter 0.2s;
}
.button:hover {
  transform: translateY(-2px);
  filter: brightness(0.94);
}
.button.outline {
  background: transparent;
  color: var(--owner-primary);
}
.button.outline:hover {
  background: var(--owner-soft);
}
.button.full {
  width: 100%;
}
a.button {
  line-height: 1.5;
}
.tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 20px;
  background: var(--owner-soft);
  color: var(--owner-ink);
  font: 12px var(--sans);
}
.tag.neutral {
  background: #e3e8ed;
  color: #56636f;
}
.quiet-link {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.suspend {
  color: #844533;
  font-size: 14px;
  text-decoration: underline;
}

.label {
  display: block;
  font-size: 14px;
  margin-bottom: 18px;
}
.label input,
.label textarea,
.label select {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--owner-border);
  border-radius: 3px;
  padding: 12px 13px;
  color: var(--owner-ink);
  font: 16px/1.5 var(--sans);
  margin-top: 6px;
}
.hint {
  font-size: 13px;
  color: var(--owner-muted);
  display: block;
  margin-top: 6px;
}
.notice {
  background: var(--owner-soft);
  padding: 15px;
  font-size: 14px;
  margin: 18px 0;
}
.notice-row {
  padding: 20px 22px;
  background: var(--owner-soft);
  margin: 22px 0;
  font-size: 14px;
}
.error-text {
  color: #8b3e29;
  font-size: 14px;
  margin-top: 12px;
}
ul.error-text {
  margin: 12px 0 0;
  padding-left: 20px;
}
ul.error-text li {
  margin-bottom: 6px;
}
.check {
  display: flex;
  gap: 12px;
  margin: 18px 0;
  font-size: 14px;
  align-items: flex-start;
}
.check input {
  margin-top: 5px;
}
.box {
  /* Matches `app.css`'s own `.box` (used inside `.owner-main .account-grid`, a grid whose items
     default to `min-width: auto`): without this, a wide child (e.g. `.table-wrap`'s table) would
     stretch the grid track instead of being clipped by the child's own `overflow: auto`
     (REV-0001-06-design Finding 2, same root cause fixed on the trainer console). */
  min-width: 0;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--owner-border);
}
.box h2 {
  font-size: 24px;
  margin-bottom: 18px;
}
/* Admin tables (`.admin-table`/`.table-wrap`) — the standard tabular-list pattern
   (`docs/design-system.md` "Admin tables"), ported from `app.css` onto the owner palette
   (`--owner-*` tokens) so an owner-console table (e.g. `ClientDomainsPage`'s "Listed hostnames")
   gets the same header shading, cell padding and row-border treatment as the trainer console's,
   instead of rendering as a bare, unbranded HTML table (REV-0001-06-design Finding 4). */
.table-wrap {
  overflow: auto;
}
.admin-table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  font-size: 14px;
}
.admin-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--owner-muted);
  background: var(--owner-soft);
  white-space: nowrap;
}
.admin-table th,
.admin-table td {
  padding: 15px;
  border-bottom: 1px solid var(--owner-border);
}
/* Only the cell holding a long unbroken user-supplied value (hostname) wraps; every other cell
   (tags, action links) is short, fixed UI text that must never break mid-word, so it keeps
   ordinary `white-space: normal` word-wrapping; the row-action links themselves ("Make primary",
   "Remove") additionally never wrap between words, so each renders on one line, while the two
   action forms in a "Manage" cell may still stack onto separate lines relative to each other
   (REV-0001-06-design Finding 6). */
.admin-table td.wrap {
  overflow-wrap: anywhere;
}
.admin-table td .quiet-link {
  white-space: nowrap;
}
.admin-table td small {
  display: block;
  color: var(--owner-muted);
}
.key-value {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--owner-border);
  font-size: 14px;
}
.key-value:last-child {
  border-bottom: 0;
}
.key-value span {
  color: var(--owner-muted);
}
.billing-action {
  margin-top: 22px;
}
.save-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
  border-top: 1px solid var(--owner-border);
  margin-top: 28px;
}
.save-row span {
  font-size: 13px;
  color: var(--owner-muted);
}

/* ---- MFA (STORY-0003-04) ------------------------------------------------------------------------- */
/* Minimal additions: the recovery-codes grid (2 columns desktop, collapsed to 1 in the existing
   760px breakpoint below, same as `.account-grid`) and a plain button row. No QR/two-column secret
   layout is needed (CEO decision 2026-09-22 removed the QR panel entirely, so the enrolment screen
   is single-column throughout, already responsive via `.box`'s own stacking). */
.recovery-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}
.recovery-codes code {
  overflow-wrap: anywhere;
}
.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}

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

.owner-form {
  max-width: 1000px;
}
.owner-form .box {
  margin-bottom: 24px;
}
.owner-form .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ---- Clients ------------------------------------------------------------------------------------- */

.client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.client-card {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--owner-border);
  border-top: 4px solid var(--client-color, var(--owner-primary));
}
.client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.client-mark {
  width: 42px;
  height: 42px;
  background: var(--client-color, var(--owner-primary));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 20px;
  border-radius: 8px;
}
.client-card h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 20px 0 10px;
}
.client-card p {
  font-size: 14px;
  margin: 8px 0;
  color: var(--owner-muted);
  overflow-wrap: anywhere;
}
.client-card .button {
  margin-top: 20px;
}
.client-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--owner-border);
  margin-bottom: 28px;
}
.client-tabs a {
  font-size: 14px;
  padding: 10px 0 14px;
}
.client-tabs a.active {
  border-bottom: 2px solid var(--owner-primary);
}
.onboarding-list {
  padding: 0;
  list-style: none;
  margin: 0;
}
.onboarding-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--owner-border);
  font-size: 14px;
}
.dns-row {
  display: grid;
  grid-template-columns: 90px 1fr 1.4fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--owner-border);
  font-size: 14px;
}
.dns-row code {
  overflow-wrap: anywhere;
}
.domain-panel {
  border: 1px solid var(--owner-border);
  padding: 20px;
  margin-top: 18px;
}
.domain-panel code {
  overflow-wrap: anywhere;
}
.actions-inline {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.owner-note {
  background: var(--owner-soft);
  padding: 20px;
  font-size: 14px;
}
/* A listed hostname is a long unbroken value — REV-0001-06-design Finding 3: without this, it
   alone pushes the page past 375px, unlike its sibling patterns above (`.domain-panel code`,
   `.key-value strong` below). */
.owner-note code {
  overflow-wrap: anywhere;
}

/* ---- Activity / audit ----------------------------------------------------------------------------- */

.audit-list {
  background: #fff;
  border: 1px solid var(--owner-border);
}
.audit-list > div {
  padding: 16px 22px;
  border-bottom: 1px solid var(--owner-border);
}
.audit-list > div:last-child {
  border-bottom: 0;
}
.audit-list strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.audit-list small {
  font-size: 12px;
  color: var(--owner-muted);
}

/* ---- Accessibility ---------------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--owner-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* ---- Responsive --------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .client-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .owner-layout {
    display: block;
  }
  .owner-nav {
    display: flex;
    overflow: auto;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--owner-border);
  }
  .owner-nav a {
    white-space: nowrap;
    margin: 0;
  }
  .owner-nav .eyebrow {
    display: none;
  }
  .owner-main {
    padding: 26px 20px;
  }
  .client-grid,
  .owner-form .two,
  .owner-main .account-grid,
  .recovery-codes {
    grid-template-columns: 1fr;
  }
  .owner-main h1 {
    font-size: 30px;
  }
  .dns-row {
    grid-template-columns: 60px 1fr;
    font-size: 13px;
  }
  .dns-row > *:last-child {
    grid-column: 2;
  }
  .client-tabs {
    gap: 18px;
  }
  .owner-login {
    margin: 32px auto;
    padding: 22px;
  }
  .page-top {
    align-items: flex-start;
    flex-direction: column;
  }
}