/* ============================================================
   Awall surface stylesheet: settings.css
   Split from styles.css (F1, issue #186) — NO rule changes.
   Owns: settings tabs/flow diagram + api-key management (S7 / S5)
   Concatenating every surfaces/*.css in base.html <link> order
   reproduces the original styles.css byte-for-byte.
   ============================================================ */
.settings-card {
  max-width: 640px;
}

.account-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.account-sections .settings-card {
  scroll-margin-top: var(--space-6);
}

/* Quiet variant for the recovery card — secondary path, lighter weight.
   No background override: stays on the same surface as primary cards so the
   contrast direction does not flip between light and dark themes. */
.settings-card--quiet {
  box-shadow: none;
  border-color: var(--color-border-soft);
}
.settings-card--quiet .card-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.settings-card--quiet .card-section-desc {
  margin-bottom: var(--space-4);
}
.settings-card--quiet .form-actions {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Inline status line in a settings card (e.g. the 2FA card's
   "2FA is enabled on this account."). The universal margin reset zeroes
   <p>, so it needs its own spacing before the form/actions below it. */
.settings-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  margin-bottom: var(--space-4);
}

.settings-status--ok {
  color: var(--color-success-strong);
  font-weight: 500;
}

/* ---------------------------------------------------------
   Account page (S8, #199)
   Owner-facing key list, in-card sub-sections, and the
   destructive-action danger zone. Tokens only; reuses the
   shared .status-tag + .card vocabulary.
   --------------------------------------------------------- */

/* Owner-facing API key list (#145 deferred reveal). One row per key:
   name + masked prefix on the left, status/note beneath, and the
   one-time reveal action on the right. */
.account-key-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.account-key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) 0;
  min-height: var(--touch-target-min);
}

.account-key-row + .account-key-row {
  border-top: 1px solid var(--color-border-soft);
}

.account-key-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;          /* let long names truncate instead of overflowing */
  flex: 1 1 0;
}

.account-key-id {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.account-key-name {
  font-weight: 500;
  color: var(--color-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-key-id .api-key-prefix {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.account-key-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.account-key-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.account-key-action {
  flex-shrink: 0;
}

/* Keep the one-time reveal action a comfortable tap target at .btn-sm size. */
.account-key-action .btn {
  min-height: var(--touch-target-min);
}

/* Sub-section heading inside an account card (e.g. "Backup codes") — lighter
   than .card-section-title, which is reserved for the section header. */
.account-subsection-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: var(--space-1);
}

.account-subsection-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

/* In-card danger zone: separates a destructive action from the benign ones
   above it with a danger-tinted hairline (within the 1px Hairline Rule; no
   nested card). Used for "Disable 2FA". */
.account-danger-zone {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-danger-border-soft);
}

.account-danger-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-danger-strong);
  margin-bottom: var(--space-1);
}

.account-danger-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

/* Backup codes — one-time reveal, shown as a monospace grid that matches
   the API-key secret-display language. */
.backup-code-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.backup-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-text-heading);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tag);
  padding: var(--space-2) var(--space-3);
}

/* Acknowledgment gate: the divider sits above the checkbox so the gate and
   its buttons read as one section below the codes. */
.two-factor-ack {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Action row whose divider lives above it (on .two-factor-ack), not on the
   row itself. */
.form-actions--flush {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Settings tabs */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0;
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.settings-tab:hover {
  color: var(--color-text-heading);
}

.settings-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.settings-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-btn);
}

.settings-tab svg {
  opacity: 0.6;
}

.settings-tab.active svg {
  opacity: 1;
}

/* Tab panels */
.settings-tab-panel {
  display: none;
}

.settings-tab-panel.active {
  display: block;
}

/* Block-message live preview pane.
   GLOBAL classes shared by the Settings Messages-tab preview and the
   API-keys per-key message preview (S5 scopes its own panel separately).
   Uses --color-surface (recessed) so it reads as a sunken panel and stays
   legible in dark mode. */
.preview-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

.preview-row {
  font-family: var(--font-mono);
}

.preview-row + .preview-row {
  margin-top: var(--space-2);
}

/* Flow diagram */
.flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  min-width: 140px;
  max-width: 180px;
}

.flow-step--highlight {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.flow-step-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.flow-step--highlight .flow-step-icon {
  color: var(--color-primary);
}

.flow-step-label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  margin-bottom: 4px;
}

.flow-step-detail {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.flow-arrow {
  font-size: 20px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   21b. API Key management
   --------------------------------------------------------- */
.api-key-create-form {
  max-width: 400px;
}

.api-key-reveal-card {
  margin-bottom: var(--space-6);
  background: var(--color-success-bg);
  border-color: var(--color-success-border-soft);
}

.api-key-reveal-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-success-strong);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.api-key-reveal-warning {
  /* "Shown once" caution. Amber (warning family) rather than danger so it
     reads as an important notice instead of clashing red-on-green inside the
     success card. Bold keeps it urgent; warning-strong clears AA on both
     light and dark success-bg. */
  font-size: var(--font-size-xs);
  color: var(--color-warning-strong);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.api-key-reveal-value {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: var(--space-3) var(--space-4);
}

.api-key-reveal-value code {
  font-size: var(--font-size-sm);
  word-break: break-all;
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--color-text-heading);
}

.api-key-name {
  font-weight: 500;
  color: var(--color-text-heading);
}

.api-key-prefix {
  font-size: var(--font-size-sm);
}

/* "Awaiting reveal" pill: owner has not retrieved a key issued for them yet.
   Maps to the monitor/"in-progress, not yet resolved" vocabulary (amber) so it
   reads as pending rather than a bare un-tinted label; the monitor pair is the
   AA-verified combo across every palette + theme. */
.status-tag--pending {
  background: var(--color-monitor-bg);
  color: var(--color-monitor-text);
}

.api-key-actions {
  text-align: right;
  width: 60px;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   API Keys table — column widths + overflow safety
   --------------------------------------------------------- */
.data-table--api-keys col.col-name      { width: auto; }
.data-table--api-keys col.col-prefix    { width: 14ch; }
.data-table--api-keys col.col-status    { width: 10ch; }
.data-table--api-keys col.col-creator   { width: 14ch; }
.data-table--api-keys col.col-created   { width: 17ch; }
.data-table--api-keys col.col-lastused  { width: 17ch; }
.data-table--api-keys col.col-actions   { width: 64px; }

.data-table--api-keys tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table--api-keys tbody td.log-time {
  display: table-cell;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table--api-keys tbody td:has(.status-tag) {
  overflow: visible;
}

.data-table--api-keys tbody td.api-key-actions {
  overflow: visible;
}

.row-actions {
  position: relative;
  display: inline-block;
}

.row-actions-trigger {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* Extend pointer hit-area to 40 x 40 without changing the visual size,
   so the dense table row-action button still meets WCAG 2.5.5. */
.row-actions-trigger::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.row-actions-trigger:hover,
.row-actions-trigger[aria-expanded="true"] {
  background: var(--color-surface);
  color: var(--color-text-heading);
}

.row-actions-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-focus-ring);
  border-color: var(--color-primary);
  color: var(--color-text-heading);
}

.row-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: max-content;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-modal);
  padding: 4px;
  z-index: 100;
  display: none;
  transform-origin: top right;
}

.row-actions-menu.open {
  display: block;
  animation: row-actions-pop 140ms var(--ease-out, ease) both;
}

@keyframes row-actions-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.row-actions-menu form {
  margin: 0;
  display: block;
}

.row-actions-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 8px 20px 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-tag);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.row-actions-item-icon {
  flex-shrink: 0;
  opacity: 0.75;
  color: var(--color-text-muted);
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.row-actions-item:hover,
.row-actions-item:focus-visible {
  outline: none;
  background: var(--color-surface);
  color: var(--color-text-heading);
}

.row-actions-item:hover .row-actions-item-icon,
.row-actions-item:focus-visible .row-actions-item-icon {
  opacity: 1;
  color: var(--color-text-heading);
}

.row-actions-item--danger {
  color: var(--color-danger);
}

.row-actions-item--danger .row-actions-item-icon {
  color: var(--color-danger);
  opacity: 0.85;
}

.row-actions-item--danger:hover,
.row-actions-item--danger:focus-visible {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.row-actions-item--danger:hover .row-actions-item-icon,
.row-actions-item--danger:focus-visible .row-actions-item-icon {
  color: var(--color-danger);
  opacity: 1;
}

.row-actions-item--disabled,
.row-actions-item--disabled:hover,
.row-actions-item--disabled:focus-visible {
  color: var(--color-text-muted);
  background: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.row-actions-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .row-actions-menu.open { animation: none; }
}

/* Narrow-viewport safety: keep the right-anchored kebab menu and its longest
   label ("Regenerate secret") inside the viewport at ~375px (F5). */
.row-actions-menu {
  max-width: calc(100vw - var(--space-8));
}

.row-actions-item span {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   Per-key policies side panel (JS-rendered into #policies-panel)
   --------------------------------------------------------- */
/* Policy selects/number inputs fill the narrow side panel (label sits above
   via .form-group). Hide the native number-input spinners — they clash with
   the panel's tokenized selects and add no value to a "No limit / N" field. */
.policies-input {
  width: 100%;
  max-width: 100%;
}

.policies-input::-webkit-inner-spin-button,
.policies-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].policies-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Usage-limit fields: a comfortable vertical stack (each field is a
   .form-group of label + control + hint) inside the single detail-field. */
.policies-limits {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

/* "(inherits global template)" placeholder shown in the live message preview
   when no custom text is set: muted + italic via the AA-tuned muted-ink token
   (replaces the inline color/font-style toggled in JS). */
.policies-preview-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Live block-message preview box. Scoped to the panel so it does not collide
   with the Settings surface's global .preview-block. Reads as a recessed
   rendered-output box, consistent with the api-key reveal value. */
#policies-panel .preview-block {
  margin-top: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* Empty cell label: "never" / "—" placeholder shown when a value is absent.
   Same vocabulary as .log-time but flagged as muted + italic. */
.log-time-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.card-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border: 1px solid var(--color-border);
}

/* Small buttons */
.btn-sm {
  padding: 4px 12px;
  font-size: var(--font-size-xs);
}

/* Danger button */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: var(--color-danger-border-soft);
}

.btn-danger:hover {
  background: var(--color-danger);
  color: #ffffff;
}

.btn-danger.btn-sm {
  padding: 4px 12px;
  font-size: var(--font-size-xs);
}

/* Form field error */
.form-field-error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .flow-diagram {
    flex-direction: column;
  }
  .flow-arrow {
    transform: rotate(90deg);
  }
}