/* (C) Zyra 2026. Class Z proprietary component.
   Component ID: Z-30    Name: Platform Console (glue styles)
   License: Non-exclusive, MeayarAI platform operation/maintenance only (per MFA Art. 9.2)
   Console-local glue styles layered on top of the shared design system
   (tokens.css + components.css, byte-identical copies of src/web). */

/* Fail-closed session mask: console.js removes .pre-auth from <html> only
   after the operator gate passes. Static chrome stays painted for a fast
   first frame; data-bearing regions stay hidden until then. */
html.pre-auth .content,
html.pre-auth .topbar-actions {
  visibility: hidden;
}

/* Muted helper text (mirrors the tenant console's ac-muted/ac-note). */
.c-muted { color: var(--muted, #667085); font-size: 12.5px; }
.c-note { color: var(--muted, #667085); font-size: 12.5px; margin: 6px 0 0; }
.c-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.c-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Monospace chip for aliases, source codes and cron expressions. */
.c-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: var(--primary-soft, #eef2ff);
  color: var(--primary, #0d33ff);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* In-card header row: title + subtitle left, primary action right. */
.c-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
}
/* Table-card footer row holding the card-level save action. */
.c-card-foot { display: flex; justify-content: flex-end; padding: 12px 20px 16px; }

/* Two-column form grids collapse on narrow viewports. */
.c-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* Overview stat cards double as quick links. */
.stat-card a { color: inherit; text-decoration: none; }
.stat-card:hover { border-color: var(--primary, #0d33ff); }

/* Gate card (denial / MFA block / retry) centred in the content sheet. */
.gate-card { max-width: 560px; margin: 48px auto; }
.gate-card h2 { margin: 0 0 6px; font-size: 17px; }

/* AI Supply mode cards: two big selectable cards; the active one carries
   the primary border and a status pill. */
.supply-card {
  border: 1.5px solid var(--line, #e4e9f2);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.supply-card.is-active {
  border-color: var(--primary, #0d33ff);
  box-shadow: 0 6px 18px rgba(13, 51, 255, 0.10);
}
.supply-card h3 { margin: 0; font-size: 15.5px; }
.supply-card p { margin: 0; color: var(--muted, #667085); font-size: 13px; line-height: 1.55; }
.supply-card .c-actions { margin-top: auto; }
/* A gated CTA must LOOK gated: the BYOK switch renders disabled until
   readiness passes. */
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Scenario routing rows: label column + alias select. */
.c-route-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line, #e4e9f2);
}
.c-route-row:first-child { border-top: 0; }

/* Feature flag rows: name + description left, native switch right. */
.c-flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line, #e4e9f2);
}
.c-flag:first-child { border-top: 0; padding-top: 4px; }
.c-switch {
  width: 40px;
  height: 22px;
  accent-color: var(--primary, #0d33ff);
  cursor: pointer;
  flex: none;
}
.c-switch-cell { text-align: center; }

/* Small inline cron editor inside the jobs table. */
.c-cron {
  max-width: 160px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Disabled rows stay visible but dimmed. */
.c-row-off { opacity: 0.55; }

/* Run-history rows under the jobs table. */
.c-hrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--line, #e4e9f2);
  font-size: 13px;
}
.c-hrow:first-child { border-top: 0; }
.c-hgrow { flex: 1; min-width: 200px; }

/* Announcement compose: textareas inherit the input look plus resize. */
textarea.input { resize: vertical; min-height: 72px; font: inherit; line-height: 1.5; }
/* Audience user picker: checkbox list with its own scroll. */
.c-user-pick {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line, #e4e9f2);
  border-radius: 10px;
  padding: 10px 12px;
}
.c-user-pick label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Login page: centred card over the dark chrome frame. */
.console-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
}
.console-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--canvas, #fff);
  border-radius: var(--radius, 12px);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-lg, 0 18px 44px rgba(9, 14, 34, 0.35));
}
.console-login-card .brand-lockup { display: flex; justify-content: center; }
.console-login-card .brand-lockup img { height: 64px; width: auto; }
.console-login-title { margin: 4px 0 0; font-size: 20px; font-weight: 700; text-align: center; }
.console-login-sub { margin: 0; text-align: center; color: var(--muted, #667085); font-size: 13.5px; }
.console-login form { display: flex; flex-direction: column; gap: 14px; }
/* MFA enrollment block on the login card. */
.enroll-secret-label { font-size: 13px; color: var(--muted, #667085); }
.enroll-secret { display: flex; align-items: center; gap: 8px; }
.enroll-secret code {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line, #e4e9f2);
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-soft, #eef2ff);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  word-break: break-all;
}
.enroll-qr {
  align-self: center;
  background: #fff;
  border: 1px solid var(--line, #e4e9f2);
  border-radius: 12px;
  padding: 8px;
}
.enroll-savenote {
  margin: 0;
  font-size: 12.5px;
  color: #8a5a00;
  background: #fff7e6;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  padding: 8px 10px;
}
/* Session-expired / error notice on the login card. */
.console-login-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line, #e4e9f2);
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-soft, #eef2ff);
  color: var(--ink, #101828);
  font-size: 14px;
  font-weight: 600;
}
.console-login-notice[hidden] { display: none; }

@media (max-width: 640px) {
  .c-route-row { grid-template-columns: 1fr; gap: 6px; }
  /* The shared card conversion hides first cells (checkbox columns on other
     pages) — here they are identity columns and must stay visible. */
  .table-scroll .data td:first-child { display: flex; }
  .console-login-card { padding: 24px 20px; }
}

/* Gate states (denial / MFA block / retry): the sidebar shows brand chrome
   only — feature links are hidden so a gated console leaks no navigation
   (the [hidden] attribute alone loses to the .nav display:flex rule). */
.sidebar .nav[hidden] { display: none; }

/* D-2 (IMPL-249 W-B): the overview grid opts out of the shared ≤640px 2-up
   KPI compression — at 390px the half-width cards shattered the longer
   English labels mid-word ("Provider channel s"). One column, vertical card
   content, and word-boundary wrapping keep every label whole. The shared
   rule carries !important, so the column reset must carry it too. */
@media (max-width: 640px) {
  .content #ov-grid { grid-template-columns: 1fr !important; }
  #ov-grid .stat-card { flex-direction: column; align-items: stretch; }
  #ov-grid .stat-label,
  #ov-grid .stat-note {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* D-3 (IMPL-249 W-B): the sources register must fit a 1440px desktop
   without clipping the Actions column — the Name cell's URL may wrap
   mid-string (its unbroken min-content was the widest floor in the table)
   and the per-row action cluster packs tighter; the .table-scroll
   horizontal scroll remains the honest fallback on narrower widths. */
#source-rows td .c-muted { overflow-wrap: anywhere; }
#source-rows .c-btns { gap: 4px; }
#source-rows .c-btns .btn { padding-inline: 8px; white-space: nowrap; }

/* D-1 (IMPL-249 W-B): in drawer mode (≤1280px) the sidebar floats over the
   light content sheet and can no longer borrow the body chrome gradient —
   the drawer carries the gradient itself (same rule the tenant shell gets
   from meyar-refresh.css, which this self-contained root does not load).
   Desktop is untouched: the sidebar there still sits on the body gradient. */
@media (max-width: 1280px) {
  .sidebar {
    background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
    overflow-y: auto;
  }
}

/* ---------------------------------------------------------------- */
/* Platform Audit page (IMPL-250 W-C)                                */
/* ---------------------------------------------------------------- */

/* Step-up modal: the shared 620px modal card is built for editors; the
   TOTP confirmation reads better at the login card's measure. */
.stepup-card { max-width: 420px; }

/* Fixed audit columns (≥1100px): gutters stay identical no matter which
   filters are active or how long the cell values are. Below that the
   .table-scroll horizontal scroll is the honest fallback (same stance as
   the sources register), and ≤640 the shared card conversion applies. */
#audit-table td { overflow-wrap: anywhere; }
@media (min-width: 1100px) {
  #audit-table { table-layout: fixed; }
  #audit-table th:nth-child(1), #audit-table td:nth-child(1) { width: 210px; }
  #audit-table th:nth-child(2), #audit-table td:nth-child(2) { width: 210px; }
  #audit-table th:nth-child(3), #audit-table td:nth-child(3) { width: 140px; }
  #audit-table th:nth-child(4), #audit-table td:nth-child(4) { width: 120px; }
}

/* Collapsed detail cell: single-line summary with an honest ellipsis; the
   full line rides the title tooltip and the expanded row carries the
   pretty-printed JSON. */
#audit-table td.audit-sum {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stream-generated rows carry no actor id; label them instead of a dash. */
.audit-actor-sys { color: var(--muted, #667085); font-size: 13px; }

/* Expandable detail rows — chevron in the first cell, detail panel spans
   the table width beneath its event row (tenant audit page pattern). */
.audit-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-inline-end: 4px;
  border: none; background: transparent; border-radius: 6px;
  color: var(--muted, #667085); cursor: pointer; vertical-align: middle;
  transition: transform 0.15s ease;
}
.audit-chevron:hover { background: var(--surface, #f4f6fa); color: var(--ink, #101828); }
.audit-chevron.is-open { transform: rotate(90deg); }
tr.audit-detail-row > td {
  background: var(--surface-2, #f8fafc);
  border-top: 1px dashed var(--line, #e4e9f2);
  padding: 10px 14px;
}
.audit-detail-grid {
  display: grid; grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 4px 16px; font-size: 13px; margin: 0 0 10px;
}
.audit-detail-grid dt { color: var(--muted, #667085); }
.audit-detail-grid dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Full detail payload: preformatted JSON, horizontally scrollable so long
   values never stretch the table. */
.audit-json {
  margin: 0;
  padding: 10px 12px;
  background: var(--surface, #f4f6fa);
  border: 1px solid var(--line, #e4e9f2);
  border-radius: var(--radius-sm, 8px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

/* Chain verification report card: sits between the filter bar and the
   table; the verdict badge reads ahead of the detail grid. */
.chain-report { padding: 12px 16px; margin-bottom: 14px; }
.chain-report-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chain-report .cell-sub { display: inline; color: var(--muted, #667085); overflow-wrap: anywhere; }

/* QA feedback snapshot card. */
.fb-totals { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-h { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted, #667085); text-transform: uppercase; letter-spacing: 0.04em; }
.fb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-entry {
  padding: 10px 0;
  border-top: 1px solid var(--line, #e4e9f2);
}
.fb-entry:first-of-type { border-top: 0; }
.fb-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-q { margin: 6px 0 0; font-size: 13.5px; }
.fb-comment { margin: 4px 0 0; font-size: 13px; color: var(--muted, #667085); font-style: italic; }

/* ---------------------------------------------------------------- */
/* Tenants page (IMPL-251 W-D)                                       */
/* ---------------------------------------------------------------- */

/* The registry table fits desktop widths; long slugs/names may wrap and the
   .table-scroll horizontal scroll stays the honest fallback on narrower
   widths (same stance as the sources register, D-3). */
#tn-table td { overflow-wrap: anywhere; }
#tn-table .c-btns { gap: 4px; }
#tn-table .c-btns .btn { padding-inline: 8px; white-space: nowrap; }

/* One-time invite URL panel: the warning reads ahead of the copy box. */
.invite-once-warn {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #8a5a00;
  background: #fff7e6;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  padding: 8px 10px;
}
.invite-once-box { display: flex; align-items: center; gap: 8px; }
.invite-once-url {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  word-break: break-all;
}

/* Invite ledger under the issuance form inside the same modal. */
.invite-ledger { margin-top: 16px; border-top: 1px solid var(--line, #e4e9f2); padding-top: 12px; }
.invite-ledger-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted, #667085); text-transform: uppercase; letter-spacing: 0.04em; }
#tn-invite-table td { overflow-wrap: anywhere; }