/*
 * Staff sign-in, the page tabs, Support, Audit and Settings. Built from the tokens in
 * styles.css (Slate), so light and dark follow the same switch; nothing here sets a colour
 * of its own except the QR code, which is dark on white in either theme so any camera reads it.
 */

/* ---------------------------------------------------------------- the door */

.gate-switch { margin-top: 10px; width: auto !important; min-height: 30px !important; font-size: 12.5px !important; }
.gate-box .gate-switch { color: var(--accent); }
.enrol-card { max-width: 460px; }
.qr {
  width: 200px; max-width: 100%; aspect-ratio: 1; margin: 10px auto; padding: 0;
  background: #ffffff; color: #000000; border-radius: var(--r); border: 1px solid var(--line);
}
.qr svg { display: block; width: 100%; height: 100%; }
.qr path { fill: #000000; }
/* `flex: none`: the box sits in the door's flex column, where .cred-val's 12rem basis is a height. */
.enrol-secret { flex: none; letter-spacing: .08em; text-align: center; word-spacing: .2em; }

/* ---------------------------------------------------------------- who is signed in */

.me-btn { text-decoration: none; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-btn[hidden] { display: none; }

/* ---------------------------------------------------------------- under the page tabs */

/* The tabs themselves are .nav in licensing.css (nav.js). */
.cnotice { max-width: 92rem; margin: 0 auto; padding: 10px 28px; font-size: 13px; }
.cnotice.warn { background: var(--warn-soft); color: var(--warn-ink); }
.cnotice[hidden] { display: none; }

.page-lead { max-width: 60rem; margin: -6px 0 16px; }
.head .btn { flex: none; }

/* Filter tabs over a list (Support's Active / Resolved / Closed / All). */
.ctabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ctab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
}
.ctab:hover { border-color: var(--line-strong); color: var(--ink); }
.ctab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ctab-n { font-family: var(--mono); font-size: 12px; }

/* ---------------------------------------------------------------- support */

.tickets-table { min-width: 44rem; }
.row-link { cursor: pointer; }
.row-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ticket-title { margin-top: 2px; color: var(--ink); font-size: 13.5px; overflow-wrap: anywhere; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.when { font-size: 12px; color: var(--faint); white-space: nowrap; }
.ticket-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.ticket-facts .usage { flex-basis: 100%; margin-top: 8px; grid-template-columns: auto minmax(0, 1fr); }
.ticket-facts .usage dd { white-space: normal; overflow-wrap: anywhere; font-family: var(--sans); }
.ticket-desc {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.thread { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.msg { padding: 10px 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.msg.vendor { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); margin-inline-start: 2rem; }
.msg.customer { margin-inline-end: 2rem; }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.msg-body { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.access-line { margin: 10px 0 0; font-size: 13.5px; color: var(--ink); }
.link-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.link-box .btn { text-decoration: none; }
#devSignInMsg .btn { text-decoration: none; }
.sheet-body textarea { width: 100%; }

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

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 14px; }
.filters label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12.5px; color: var(--faint); }
.filters input { width: 14rem; max-width: 100%; }
.audit-table { min-width: 52rem; }
.audit-meta { font-family: var(--mono); font-size: 11.5px; color: var(--faint); max-width: 28rem; overflow-wrap: anywhere; }
.chain { display: inline-flex; margin: 0 0 14px; white-space: normal; }
.chain[hidden] { display: none; }
.more { display: flex; justify-content: center; margin-top: 14px; }

/* ---------------------------------------------------------------- settings */

.card-section {
  margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-card); min-width: 0;
}
.card-section h2 { font-size: 16px; line-height: 1.3; }
.card-section h3 { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; margin: 4px 0 0; }
.card-section > .hint { margin-top: 4px; max-width: 60rem; }
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 12px 16px;
  margin-top: 14px; align-items: end; min-width: 0;
}
.form-grid label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12.5px; color: var(--faint); min-width: 0; }
.form-grid input, .form-grid select { width: 100%; max-width: 100%; }
.form-grid[hidden] { display: none; }
.form-acts { display: flex; justify-content: flex-start; }
.invite { padding-top: 14px; border-top: 1px solid var(--row); }
.role-pick { width: auto; min-height: 28px; padding: 2px 8px; font-size: 12px; }
#setMeFacts { margin-top: 12px; grid-template-columns: auto minmax(0, 1fr); }
#setMeFacts dd { white-space: normal; overflow-wrap: anywhere; }
#setAuthBox { margin-top: 14px; max-width: 28rem; }

@media (max-width: 52rem) {
  .cnotice { padding: 10px 16px; }
  .card-section { padding: 16px; }
}

@media (max-width: 40rem) {
  .head { flex-wrap: wrap; }
  /* Support and audit lists: one card per row, as the systems list. */
  .tickets-table, .audit-table { min-width: 0; }
  .tickets-table thead, .audit-table thead { display: none; }
  .tickets-table, .tickets-table tbody, .audit-table, .audit-table tbody { display: block; width: 100%; }
  .tickets-table tr, .audit-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 6px 0; border-bottom: 1px solid var(--line);
  }
  .tickets-table tbody td, .audit-table tbody td { display: block; min-width: 0; border: 0; padding: 6px 14px; }
  .tickets-table td:nth-child(1), .audit-table td:nth-child(4), .audit-table td:nth-child(6) { grid-column: 1 / -1; }
  .msg.vendor { margin-inline-start: 0.75rem; }
  .msg.customer { margin-inline-end: 0.75rem; }
}