/* Design tokens (light theme only) */
:root {
  color-scheme: light;

  /* Responsive breakpoints (documented here, used in @media queries).
     CSS custom properties cannot be used inside @media conditions, but
     keeping the values in one place makes auditing easier. */
  /* --bp-phone:  480px   Small phones, tight padding */
  /* --bp-tablet: 768px   Tablets, grids collapse   */
  /* --bp-nav:    959px   Sidebar becomes drawer    */

  --bg: #f6f8fa;
  --surface: #ffffff;
  --border: #c9d1d9;
  --border-muted: #d8dee4;
  --text: #1f2328;
  --muted: #57606a;
  --input-bg: #ffffff;
  --table-header-bg: #f6f8fa;
  --shadow-card: 0 1px 3px rgba(31, 35, 40, 0.08), 0 0 0 1px rgba(31, 35, 40, 0.04);
  --accent: #0969da;
  --accent-hover: #0550ae;
  --error: #cf222e;
  --success: #1a7f37;
  --text-muted: #6e7781;

  --accent-subtle: rgba(9, 105, 218, 0.06);
  --accent-muted: rgba(9, 105, 218, 0.08);
  --accent-strong: rgba(9, 105, 218, 0.12);
  --accent-focus-ring: rgba(9, 105, 218, 0.25);
  --accent-pill-active: rgba(9, 105, 218, 0.15);
  --surface-hover: rgba(31, 35, 40, 0.04);

  --link-inline: #57606a;
  --link-underline: rgba(101, 109, 118, 0.55);

  --flash-error-bg: rgba(207, 34, 46, 0.1);
  --flash-success-bg: rgba(26, 127, 55, 0.1);

  --warning-bg: rgba(191, 135, 0, 0.12);
  --warning-bg-hover: rgba(191, 135, 0, 0.2);
  --warning-border: #9a6700;
  --warning-border-hover: #bf8700;
  --warning-text: #9a6700;
  --warning-text-hover: #7d4e00;

  --tag-read-border: rgba(9, 105, 218, 0.35);
  --tag-read-bg: rgba(9, 105, 218, 0.1);
  --tag-read-text: #0550ae;
  --tag-organize-border: rgba(130, 80, 223, 0.35);
  --tag-organize-bg: rgba(130, 80, 223, 0.1);
  --tag-organize-text: #6639ba;
  --tag-propose-border: rgba(26, 127, 55, 0.35);
  --tag-propose-bg: rgba(26, 127, 55, 0.1);
  --tag-propose-text: #1a7f37;

  --panel-error-bg: rgba(207, 34, 46, 0.08);
  --panel-error-border: rgba(207, 34, 46, 0.35);
  --status-4xx: #9a6700;

  --btn-on-accent-fg: #ffffff;

  --link: #0969da;
  --link-hover: #0550ae;
  --btn-primary-bg: #0969da;
  --btn-primary-hover: #0550ae;
  --btn-primary-fg: #ffffff;
  --btn-danger-bg: #cf222e;
  --btn-danger-hover: #a40e26;
  --btn-danger-border: #cf222e;
  --btn-danger-fg: #ffffff;

  --brand-openterface: #c26a0a;
  --brand-openterface-text: #9a5500;
  --brand-openterface-bg: color-mix(in srgb, var(--brand-openterface) 8%, transparent);
  --brand-openterface-border: color-mix(in srgb, var(--brand-openterface) 45%, transparent);

  --brand-techxartisan: #8250df;
  --brand-techxartisan-text: #6639ba;
  --brand-techxartisan-bg: color-mix(in srgb, var(--brand-techxartisan) 8%, transparent);
  --brand-techxartisan-border: color-mix(in srgb, var(--brand-techxartisan) 45%, transparent);

  --brand-external-bg: var(--surface-hover);
  --brand-external-border: var(--border-muted, var(--border));
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
}

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
}

.subtitle {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 0;
  box-shadow: var(--shadow-card, none);
}

.admin-main > .card {
  margin-bottom: 1rem;
}

.admin-page-stack > .card:last-child,
.admin-page-stack > .outbox-split:last-child {
  margin-bottom: 0;
}

.card h2,
.admin-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem 0;
}

.step-card {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.step-card a {
  color: var(--accent);
  text-decoration: none;
}

.step-card a:hover {
  text-decoration: underline;
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.form-field {
  margin-bottom: 0;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.field-label-row label {
  margin-bottom: 0;
}

.btn-copy {
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-copy:hover {
  background: var(--accent-strong);
  color: var(--accent-hover);
  border-color: var(--accent);
}

input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="month"],
input[type="tel"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  margin-bottom: 1rem;
}

input[type="number"],
select,
textarea {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

textarea {
  width: 100%;
  margin-bottom: 1rem;
}

input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-focus-ring);
}

/* Scope presets: CREATE | READ | UPDATE | DELETE */
.scope-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.scope-presets-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-right: 0.25rem;
}

.scope-preset-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.scope-preset-btn:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
}

/* Collapsible scope sections */
.scope-sections {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.scope-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.scope-section summary.scope-section-header {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg);
  transition: background 0.15s;
  justify-content: space-between;
}

.scope-section-title {
  flex: 1;
  min-width: 0;
}

.scope-section-toggle {
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.scope-section-toggle:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
  background: var(--accent-muted);
}

.scope-section summary.scope-section-header::-webkit-details-marker {
  display: none;
}

.scope-section summary.scope-section-header::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.scope-section[open] summary.scope-section-header::before {
  transform: rotate(-135deg);
}

.scope-section summary.scope-section-header:hover {
  background: var(--accent-subtle);
}

.scope-section-content {
  padding: 0.5rem 0.75rem 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
}

.scope-section-content .scopes {
  margin-top: 0;
}

.scopes {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.scope-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.scope-item:last-child {
  border-bottom: none;
}

.scope-item input {
  margin: 0.25rem 0 0 0;
  width: auto;
}

.scope-item label {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  font-size: 0.85rem;
}

.scope-desc {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.scope-desc code {
  background: var(--bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.7rem;
}

.scope-desc a {
  color: var(--link-inline);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 2px;
}

.scope-desc a:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

/* ── Tier badge (ERP catalog hierarchy) ── */
.tier-badge {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.2rem;
  line-height: 1.5;
}

.tier-badge .current {
  font-weight: 700;
}

.admin-page-title .tier-label {
  font-size: 0.7em;
  font-weight: 500;
  color: var(--muted);
}

/* ── Info icon tooltip ── */
.info-icon {
  position: relative;
  display: inline-block;
  cursor: help;
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  color: var(--muted);
  opacity: 0.45;
  margin-left: 0.3rem;
  transition: opacity 0.15s;
}

.info-icon:hover {
  opacity: 1;
}

.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  width: max-content;
  max-width: 22rem;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.info-icon:hover::after {
  opacity: 1;
}

.tier-1 .current { color: #9a6700; }
.tier-2 .current { color: #1a7f37; }
.tier-3 .current { color: #0969da; }
.tier-4 .current { color: #6435c8; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.25;
  background: var(--btn-primary-bg, #388bfd);
  color: var(--btn-primary-fg, #ffffff);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn:hover {
  background: var(--btn-primary-hover, #58a6ff);
  color: var(--btn-primary-fg, #ffffff);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  background: var(--accent-strong);
  color: var(--accent-hover);
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem 0;
}

.form-actions {
  margin-top: 1.5rem;
}

.error-msg {
  color: var(--error);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Callback page */
body.callback-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow-x: clip;
}

.callback-page .card,
.callback-page .callback-card {
  max-width: 520px;
  width: 100%;
  overflow: hidden;
}

.callback-page .callback-header-row {
  margin-bottom: 1.25rem;
}

.callback-page .callback-header-row .callback-title {
  margin: 0;
}

.callback-page .callback-title {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.callback-page .callback-title.success {
  color: var(--success, #0d9488);
}

.callback-page .callback-title.success::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

.callback-page .callback-title.error {
  color: var(--error);
}

.callback-page .download-row {
  margin: 1rem 0 0.5rem 0;
}

.callback-page .download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--btn-on-accent-fg);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.callback-page .download-btn:hover {
  opacity: 0.9;
}

.callback-page .download-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E") center/contain no-repeat;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

.callback-page .error {
  color: var(--error);
}

.callback-page pre,
.callback-page .callback-error-details {
  background: var(--bg);
  padding: 1rem;
  border-radius: 8px;
  overflow: auto;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

.callback-page .success-msg {
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.callback-page .callback-details {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.callback-page .callback-detail-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.callback-page .callback-detail-value {
  font-size: 0.9375rem;
  line-height: 1.45;
  min-width: 0;
}

.callback-page .callback-detail-value code {
  word-break: break-all;
}

.callback-page .callback-scope-summary {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.callback-page .callback-scope-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: 100%;
}

.callback-page .callback-scope-tags .scope-tag {
  font-size: 0.6875rem;
  white-space: normal;
  text-transform: none;
  line-height: 1.25;
}

.callback-page .callback-footnote {
  margin: 0 0 1rem;
}

.callback-page .callback-actions {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.token-box {
  width: 100%;
  min-height: 80px;
  padding: 0.75rem;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  margin: 0.25rem 0 1rem 0;
  resize: vertical;
}

.token-box.small {
  min-height: 60px;
}

.callback-page .short-field-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem 0;
}

.callback-page .short-field {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.callback-page .short-field:focus {
  outline: none;
  border-color: var(--accent);
}

.callback-page .token-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem 0;
}

.callback-page .token-row .token-box {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.callback-page .copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--btn-on-accent-fg);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.callback-page .copy-btn:hover {
  opacity: 0.9;
}

.callback-page .copy-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") center/contain no-repeat;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

.auth-url-field {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  resize: vertical;
}

.callback-page a {
  color: var(--accent);
  text-decoration: none;
}

.callback-page a:hover {
  text-decoration: underline;
}

.select-all-scopes {
  font-size: 0.85rem;
  color: var(--accent);
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.select-all-scopes:hover {
  text-decoration: underline;
}

/* Admin dashboard (Phase 0) */
.container.narrow {
  max-width: 420px;
}

.admin-login-page .container {
  padding-top: 4rem;
}

.admin-login-page .card .form-actions {
  margin-top: 1.25rem;
  padding-top: 0.25rem;
}

.admin-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-user {
  font-size: 0.9rem;
  color: var(--muted);
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.flash-error {
  background: var(--flash-error-bg);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--border));
}

.flash-success {
  background: var(--flash-success-bg);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
}

.success-msg {
  color: var(--success);
}

.btn-secondary {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
  color: var(--text);
}

.btn-small {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}

.btn-danger {
  background: var(--btn-danger-bg, #da3633);
  border-color: var(--btn-danger-border, #f85149);
  color: var(--btn-danger-fg, #ffffff);
}

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

.btn-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.btn-warning:hover {
  background: var(--warning-bg-hover);
  border-color: var(--warning-border-hover);
  color: var(--warning-text-hover);
}

.inline-form {
  display: inline;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 1rem;
}

/* ── Admin table base styles ── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--surface, #ffffff);
}

.admin-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border, #e5e7eb);
  white-space: nowrap;
  vertical-align: middle;
}

.admin-table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border, #f3f4f6);
  vertical-align: top;
  line-height: 1.5;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: var(--surface-hover, rgba(0, 0, 0, 0.02));
}

.data-table th,
.data-table td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  text-align: left;
}

.data-table th {
  background: var(--table-header-bg, var(--bg));
  color: var(--text);
  font-weight: 600;
}

/* Row actions sit in a table cell, which has to stay display: table-cell — a
   flex <td> drops out of the column grid and its buttons spill past the right
   border of the table. The inner .table-action-group is the flex container. */
.actions-cell {
  white-space: nowrap;
  text-align: right;
}

.actions-cell form {
  margin: 0;
}

.key-create-form {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.key-create-form.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  align-items: end;
}

.key-create-form .form-field {
  margin: 0;
}

.key-create-form .form-field-full {
  grid-column: 1 / -1;
}

.key-create-form label {
  margin-bottom: 0.3rem;
}

.key-create-form input[type="text"],
.key-create-form input[type="number"],
.key-create-form select {
  width: 100%;
  margin-bottom: 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.key-create-form .form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

@media (max-width: 640px) {
  .key-create-form.form-grid {
    grid-template-columns: 1fr;
  }
}

.container:has(.admin-header) {
  max-width: 900px;
}

/* Admin shell (shared nav) */
body.admin-shell {
  margin: 0;
}

.admin-layout {
  --admin-sidebar-width: 11rem;
  --admin-panel-width: 15rem;
  width: 100%;
  display: grid;
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
}

.admin-page-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tighten the gap between admin-page-stack and the next card — the stack's
   internal flex gap (1rem) already separates header from filter card; adding
   another full rem before the table card makes the two-card section feel
   disjointed. */
.admin-page-stack + .card {
  margin-top: 0.5rem;
}

.page-title-standalone {
  margin: 0 0 0.25rem;
}

.page-header-flush {
  margin-bottom: 0;
}

.admin-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.admin-topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.admin-topbar-actions .admin-user {
  white-space: nowrap;
}

.admin-environment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid #f0d49a;
  border-radius: 999px;
  background: #fff8e8;
  color: #85530c;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.admin-environment-worktree {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: normal;
}

.admin-environment-revision {
  font-family: ui-monospace, monospace;
  letter-spacing: normal;
}

@media (max-width: 600px) {
  .admin-topbar:has(.admin-environment-badge) {
    flex-wrap: wrap;
  }

  .admin-topbar:has(.admin-environment-badge) .admin-topbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.admin-login-page > .admin-environment-badge {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
}

.admin-brand-link {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-brand-logo {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  flex-shrink: 0;
}

.admin-brand-link:hover {
  color: var(--link-hover);
}

.admin-role {
  color: var(--muted);
  font-weight: 400;
}

.admin-layout.has-nav-panel {
  grid-template-columns: calc(var(--admin-sidebar-width) + var(--admin-panel-width)) minmax(0, 1fr);
}

.admin-nav {
  grid-area: sidebar;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--admin-sidebar-width);
  height: 100vh;
  height: 100dvh;
  border-right: 1px solid var(--border);
  z-index: 200;
  overflow: visible;
  background: var(--bg);
  transition: width 0.15s ease;
}

.admin-layout.has-nav-panel .admin-nav {
  width: calc(var(--admin-sidebar-width) + var(--admin-panel-width));
}

.admin-nav-rail {
  width: var(--admin-sidebar-width);
  height: 100%;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 1rem 0.6rem;
  display: flex;
  flex-direction: column;
}

.admin-nav-footer {
  display: none;
  padding: 0.75rem 0.6rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

.admin-nav-logout-form {
  margin: 0;
}

.admin-nav-logout-btn {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.admin-nav-logout-btn:hover {
  background: var(--bg-hover, #f3f4f6);
  color: var(--text, #111827);
}

.admin-nav-drawer-close { display: none; }

/* ── Level 1: rail entries ── */
.admin-nav-entry {
  position: static;
  display: flex;
  flex-direction: column;
}

.admin-nav-entry + .admin-nav-entry,
.admin-nav-entry-link + .admin-nav-entry {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-muted, var(--border));
}

.admin-nav-entry-link,
.admin-nav-entry-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text);
  /* Buttons do not inherit font by default, so reset before overriding. */
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-nav-entry-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Desktop sections select a panel; only inline disclosures use chevrons. */
.admin-nav-chevron {
  display: block;
  flex: 0 0 16px;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.admin-nav-entry-chevron { display: block; }
.admin-nav-entry-label[aria-expanded="true"] > .admin-nav-entry-chevron {
  transform: rotate(90deg);
}
.admin-nav-module-toggle[aria-expanded="true"] > .admin-nav-chevron {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .admin-nav-chevron { transition: none; }
}

.admin-nav-entry-link:hover,
.admin-nav-entry-label:hover {
  background: var(--surface);
  border-color: var(--border-muted, var(--border));
}

/* Selected section and current-page section remain distinguishable. */
.admin-nav-entry.is-open > .admin-nav-entry-label {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: inset 3px 0 var(--muted);
}


/* Declared last so the group holding the current page stays marked even while
   its panel is open. */
.admin-nav-entry.has-active > .admin-nav-entry-label,
.admin-nav-entry-link.is-active {
  background: var(--accent-muted);
  border-color: var(--border);
  color: var(--text);
}

/* Modules and pages share a persistent panel beside the section rail. */
.admin-nav-panel {
  position: absolute;
  inset: 0 0 0 var(--admin-sidebar-width);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 0.75rem;
  background: var(--surface, var(--bg));
  border-left: 1px solid var(--border);
  box-shadow: 2px 0 12px -4px rgba(31, 35, 40, 0.1);
}
.admin-nav-panel::-webkit-scrollbar { display: none; }

.admin-nav-panel[hidden],
.admin-nav-module-pages[hidden] { display: none; }

.admin-nav-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding: 0.15rem 0.5rem 0.55rem;
  border-bottom: 1px solid var(--border-muted, var(--border));
}

.admin-nav-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.admin-nav-pin,
.admin-nav-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.admin-nav-collapse:hover,
.admin-nav-pin:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.admin-nav-pin.is-pinned {
  background: var(--surface);
  border-color: var(--border);
  color: var(--accent);
}

.pin-icon { display: block; }
.admin-nav-pin .pin-pinned { display: none; }
.admin-nav-pin.is-pinned .pin-unpinned { display: none; }
.admin-nav-pin.is-pinned .pin-pinned { display: block; }

.admin-nav-category {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.75rem 0.5rem 0.25rem;
  margin-top: 0.25rem;
}
.admin-nav-category:first-child { margin-top: 0; padding-top: 0.25rem; }

.admin-nav-module + .admin-nav-module { margin-top: 0.3rem; }
.admin-nav-module-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  padding: 0.55rem 0.5rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.admin-nav-module-label { font-size: 0.875rem; font-weight: 600; }
.admin-nav-module-toggle:hover {
  background: var(--surface-hover, rgba(31, 35, 40, 0.04));
  border-color: var(--border-muted, var(--border));
}
.admin-nav-module.has-active > .admin-nav-module-toggle {
  background: var(--accent-subtle, rgba(9, 105, 218, 0.06));
  border-color: var(--border);
}
.admin-nav-module-pages {
  margin: 0.15rem 0 0.5rem 0.7rem;
  padding: 0.15rem 0 0.15rem 0.4rem;
  border-left: 2px solid var(--border-muted, var(--border));
}
.admin-nav-flat-pages { padding: 0.2rem 0; }
.admin-nav-flat-pages .admin-nav-link { margin-left: 0; }
.admin-nav button:focus-visible, .admin-nav a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

.admin-nav-panel .admin-nav-link,
.admin-nav-panel .admin-nav-link:visited {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  /* Pages are the payload of the panel, so they read darker than the muted
     module heading above them. Both levels rendering in the same grey was half
     of why they looked like peers; the :visited form is listed because the
     generic .admin-nav-link:visited rule below is equally specific and would
     otherwise grey these out again on every revisited page. */
  color: var(--text);
}

.admin-nav-link {
  margin-left: 0.7rem;
  padding-left: 0.8rem;
}

.admin-nav-link {
  display: block;
  padding: 0.45rem 0.75rem 0.45rem 1.1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.admin-nav-link:hover {
  transform: translateX(1px);
}

/* The :visited:hover selector is required: .admin-nav-link:visited below is equally
   specific and declared later, so without it a hovered visited link would keep the
   muted color instead of darkening. */
.admin-nav-link:hover,
.admin-nav-link:visited:hover {
  background: var(--surface);
  border-color: var(--border-muted, var(--border));
  color: var(--text);
}

.admin-nav-link:visited {
  color: var(--muted);
}

.admin-nav-link.is-active,
.admin-nav-link.is-active:visited {
  background: var(--accent-muted);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Smooth transition for rail entries and chevrons. */
.admin-nav-entry-label,
.admin-nav-module-toggle {
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-nav-entry-label:hover > .admin-nav-entry-chevron {
  color: var(--text);
}

/* ── Responsive: tablet (960–1199px) ──
   The sidebar + panel can consume a lot of horizontal space on narrower
   desktops.  Narrow the panel so more content area remains. */
@media (min-width: 960px) and (max-width: 1199px) {
  :root {
    --admin-panel-width: 13rem;
  }
}

/* ── Panel-open content squeeze (tablet + panel visible) ──
   When the nav panel is open at tablet widths the content area shrinks
   to ~530–740 px.  Force two- and three-column grids to stack so cards
   and charts remain readable instead of crushing into slivers. */
@media (min-width: 960px) and (max-width: 1200px) {
  .admin-layout.has-nav-panel .analytics-grid,
  .admin-layout.has-nav-panel .dash-modules-grid,
  .admin-layout.has-nav-panel .snapshot-grid,
  .admin-layout.has-nav-panel .sales-brief-grid {
    grid-template-columns: 1fr;
  }

  .admin-layout.has-nav-panel .admin-form.form-grid,
  .admin-layout.has-nav-panel .card-form .admin-form.form-grid {
    grid-template-columns: 1fr;
  }

  /* Outbox: narrow the list panel so the detail preview gets more room. */
  .admin-layout.has-nav-panel .outbox-split {
    grid-template-columns: minmax(180px, 240px) 1fr;
  }
}

/* ── Responsive: mobile drawer refinements ── */
@media (max-width: 959px) {
  .admin-nav-panel {
    box-shadow: none;
    background: none;
    border-left: none;
  }

  /* Give module pages a clearer visual hierarchy in the drawer. */
  .admin-nav-module-pages {
    border-left-width: 2px;
    margin-left: 0.25rem;
  }

  .admin-nav-link {
    padding-left: 0.75rem;
  }
}

.admin-main {
  grid-area: main;
  /* Let scrollable tables shrink inside the grid instead of widening the page. */
  min-width: 0;
  grid-column: 2;
  padding: 1.25rem 1.5rem 2rem;
  /* Keep sticky table columns below the mobile navigation drawer. */
  position: relative;
  z-index: 0;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
}

.admin-main > .page-header:not(.page-header-flush) {
  margin-bottom: 0.25rem;
}

.page-header-main {
  flex: 1;
  min-width: 200px;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.admin-page-title {
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
}

.page-header .scope-desc {
  margin: 0;
}

.page-header-sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.block-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}

.scope-preview-block {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.scope-preview {
  margin: 0;
  padding: 0.75rem 1rem;
  max-height: 10rem;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.meta-grid-wide {
  margin: 0;
}

.truncate-inline {
  word-break: break-all;
}

/* The class name promises truncation, but the rule above only allows breaking
   and <code> is inline, so no width property ever applied. A 40-character
   safeguard rule id therefore wrapped to ten lines inside the 48px the
   proposals table handed it, and every row became 252px tall. Clamp it: the
   full value is already in the title attribute. */
.data-table .truncate-inline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* The rule id is why the request was intercepted, so it is worth real width
   rather than whatever the greedy path column leaves over. */
.data-table-proposals td:nth-child(6) {
  min-width: 10rem;
}

/* format_admin_display() returns "54 minutes ago" for the first hour and a
   24-character "2026-09-09 07:59:34 HKT" after it. That absolute form is 170px
   of unbreakable text and these cells carry .nowrap, which makes it the
   column's floor: a freshly seeded Cloudflare activity table fits the 942px a
   1440px monitor leaves for content, and the very same table an hour later
   measures 1007px and scrolls. Letting the timestamp wrap costs nothing when
   there is room — auto layout still hands the column its full max-content width
   — and drops the floor to the 95px date token when there is not. The latency
   ("145ms") and method ("POST") cells matched here contain no space, so they
   cannot wrap. .data-table-key-grants is deliberately absent: its nowrap cell
   holds the Disable and Revoke buttons, which must stay side by side. The keys
   list is absent too — it splits its timestamp into two deliberate lines
   instead of letting the column wrap wherever it happens to break. */
.data-table-cf-activity td.nowrap,
.data-table-key-activity td.nowrap,
.data-table-proposals tr:not(.proposal-detail-row) > td.nowrap,
.data-table-connections td.nowrap,
.data-table-conn-keys td.nowrap,
.activity-table td.nowrap {
  white-space: normal;
}

.profile-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.card-hint {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.data-table-compact td,
.data-table-compact th {
  padding: 0.45rem 0.6rem;
}

.data-table-keys td,
.data-table-keys th {
  vertical-align: middle;
}

/* Type, Prefix, Status, Created and Actions each hold one short token. Asking
   for 1% tells auto layout to shrink them to their content, so the space left
   over goes to the two columns that actually carry prose: Name and Access. */
.data-table-keys .col-fit {
  width: 1%;
}

.data-table-keys .col-actions {
  text-align: right;
}

.data-table-keys .cell-type,
.data-table-keys .cell-status,
.data-table-keys .cell-prefix {
  white-space: nowrap;
}

.data-table-keys .cell-name strong {
  font-weight: 600;
}

/* One line per grant: application, profile slug, then the scope chips.
   Auto table layout sizes a cell to its widest unbreakable line, so the
   nowrap this used to carry let a key holding a dozen scopes stretch the
   table to 1386px — past the 942px a 1440px monitor leaves for content. */
.data-table-keys .cell-access-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.4rem;
}

.data-table-keys .cell-access-line + .cell-access-line {
  margin-top: 0.2rem;
}

.data-table-keys .cell-access-app {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

/* A key's scopes are the union across its grants, which can exceed one line.
   .scope-tags is nowrap by default for the short, bounded preset rows; inside
   a table cell it has to wrap or the cell's min-content width becomes the
   whole list. */
.data-table-keys .cell-access .scope-tags {
  flex-wrap: wrap;
  min-width: 0;
}

.cell-mono {
  font-size: 0.8rem;
}

/* The class sits on the <td> now, so the truncation belongs on the <code>
   inside it: an inline-block on a table cell would take the cell out of the
   column grid, which is how the actions column once escaped the table. */
.data-table-keys .cell-prefix code {
  display: inline-block;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.cell-scopes {
  width: 11rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.cell-status {
  white-space: nowrap;
}

.cell-created {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Date over time, each on its own line: one deliberate break beats the
   four-line ragged wrap a 24-character timestamp produces when the column is
   squeezed, and it keeps the column's floor at the 10-character date token. */
.data-table-keys .ts-date,
.data-table-keys .ts-time {
  display: block;
  white-space: nowrap;
}

.data-table-keys .ts-time {
  font-size: 0.72rem;
  opacity: 0.85;
}

.scope-tags {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scope-tags li {
  margin: 0;
  padding: 0;
}

.scope-tag {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.15;
  letter-spacing: 0.02em;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  white-space: nowrap;
  text-transform: lowercase;
}

.table-action-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

/* The actions column is part of the table, not a strip bolted to its right:
   keep the shared cell border so the header and the buttons line up. */
.data-table-keys .actions-cell {
  text-align: right;
  white-space: nowrap;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Two clusters, one hairline: View/JSON only read, Disable/Delete change
   state. Separating them stops four pills from reading as one blob, and lets
   the eye find the risky pair without hunting for it. */
.data-table-keys .table-action-read,
.data-table-keys .table-action-write {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.data-table-keys .table-action-write {
  margin-left: 0.15rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--border);
}

.data-table-keys .actions-cell .btn-small {
  padding: 0.24rem 0.5rem;
  font-size: 0.75rem;
}

/* Reading is navigation, not a decision, so the read pair drops the pill
   chrome and picks it up on hover. */
.data-table-keys .table-action-read .btn-secondary {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.data-table-keys .table-action-read .btn-secondary:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text);
}

/* A solid red Delete on every row turns the column into a wall of alarms.
   Outline at rest, filled on hover: still unambiguous when you aim at it,
   quiet while you read the table. */
.data-table-keys .table-action-write .btn-danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--btn-danger-bg, #da3633) 45%, var(--border));
  color: var(--btn-danger-bg, #da3633);
}

.data-table-keys .table-action-write .btn-danger:hover {
  background: var(--btn-danger-bg, #da3633);
  border-color: var(--btn-danger-hover, #f85149);
  color: var(--btn-danger-fg, #ffffff);
}

.agent-bundle-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.agent-bundle-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  flex: 1;
  min-width: 12rem;
}

.agent-bundle-card h2 {
  margin-bottom: 0.5rem;
}

.agent-bundle-card .agent-bundle-actions {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0.75rem;
}

.scope-tag-read {
  border-color: var(--tag-read-border);
  background: var(--tag-read-bg);
  color: var(--tag-read-text);
}

.scope-tag-organize {
  border-color: var(--tag-organize-border);
  background: var(--tag-organize-bg);
  color: var(--tag-organize-text);
}

.scope-tag-propose {
  border-color: var(--tag-propose-border);
  background: var(--tag-propose-bg);
  color: var(--tag-propose-text);
}

.cc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-tags li {
  margin: 0;
  padding: 0;
}

.cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.8rem;
  line-height: 1.2;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.cc-tag-auto {
  border-color: var(--tag-propose-border);
  background: var(--tag-propose-bg);
  color: var(--tag-propose-text);
}

.cc-tag-agent {
  border-color: var(--tag-read-border);
  background: var(--tag-read-bg);
  color: var(--tag-read-text);
}

.cc-tag-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.cc-tag-remove {
  margin: 0;
  padding: 0 0.15rem;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.cc-tag-remove:hover {
  opacity: 1;
}

.cc-tags-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}

.batch-cc-sender-label,
.batch-reject-reason-label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.batch-reject-reason-label .reject-reason-input {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin-top: 0.35rem;
}

/* Agent API key permission picker (dashboard) */
.agent-scope-picker {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.agent-scope-picker legend {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  padding: 0;
  margin-bottom: 0.35rem;
}

.agent-scope-intro {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 0.5rem;
}

.agent-scope-presets {
  margin-bottom: 0.25rem;
}

.agent-scopes {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.15rem 0.75rem;
  background: var(--bg);
}

.agent-scopes .scope-item {
  padding: 0.65rem 0;
}

.agent-scope-label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.agent-scopes .scope-item label .scope-desc {
  display: block;
  margin-top: 0;
  line-height: 1.4;
}

.summary-json {
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
  max-width: 20rem;
  line-height: 1.35;
}

.admin-main a.table-link,
.admin-main a.filter-clear {
  color: var(--link);
  text-decoration: none;
}

.admin-main a.table-link:hover,
.admin-main a.filter-clear:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.admin-main a.table-link:visited,
.admin-main a.filter-clear:visited {
  color: var(--link);
}

.filter-bar a.filter-pill,
.filter-bar a.filter-pill:visited,
.pagination a.filter-pill,
.pagination a.filter-pill:visited {
  color: var(--muted);
  text-decoration: none;
}

.filter-bar a.filter-pill:hover,
.pagination a.filter-pill:hover {
  color: var(--text);
  text-decoration: none;
}

.filter-bar a.filter-pill.is-active,
.filter-bar a.filter-pill.is-active:visited,
.filter-bar a.filter-pill.is-active:hover,
.pagination a.filter-pill.is-active,
.pagination a.filter-pill.is-active:visited,
.pagination a.filter-pill.is-active:hover {
  color: var(--text);
  text-decoration: none;
}

/* Buttons must not inherit text-link / :visited colors */
.admin-main a.btn,
.admin-main a.btn:visited,
.admin-main a.btn:hover,
.admin-main a.btn:active,
.admin-main button.btn,
.admin-main button.btn:hover {
  color: var(--btn-primary-fg, #ffffff);
  text-decoration: none;
}

.admin-main a.btn-secondary,
.admin-main a.btn-secondary:visited,
.admin-main a.btn-secondary:hover,
.admin-main a.btn-secondary:active,
.admin-main button.btn-secondary,
.admin-main button.btn-secondary:hover {
  color: var(--text);
  text-decoration: none;
}

.admin-main a.btn-danger,
.admin-main a.btn-danger:visited,
.admin-main button.btn-danger {
  color: var(--btn-danger-fg, #ffffff);
}

.admin-main a.btn-warning,
.admin-main a.btn-warning:visited,
.admin-main button.btn-warning {
  color: var(--warning-text);
  text-decoration: none;
}

.admin-main a.btn-warning:hover,
.admin-main button.btn-warning:hover {
  color: var(--warning-text-hover);
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card-row-body {
  flex: 1;
  min-width: 12rem;
}

.card-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.card-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.muted {
  color: var(--muted);
}

.text-muted {
  color: var(--text-muted);
}

/* Card heading that stays sentence-case, unlike the uppercase .card h2. */
.card-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.filter-bar-inline {
  margin: 0;
}

.outbox-toolbar {
  padding: 0.85rem 1.25rem;
  margin-bottom: 0;
}

.outbox-toolbar .filter-bar {
  margin: 0;
}

.filter-label {
  color: var(--muted);
  font-size: 0.85rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: var(--muted);
  background: var(--surface, transparent);
  white-space: nowrap;
}

.filter-pill:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-subtle);
  text-decoration: none;
}

.filter-pill:visited {
  color: var(--muted);
}

.filter-pill.is-active,
.filter-pill.is-active:visited,
.filter-pill.is-active:hover {
  background: var(--accent-pill-active);
  border-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}

.filter-clear {
  font-size: 0.875rem;
  padding: 0.35rem 0.65rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: 6px;
}

.filter-clear:hover {
  color: var(--text);
  background: var(--surface-hover);
  text-decoration: none;
}

/* Outbox split panel */
.outbox-split {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 1rem;
  align-items: stretch;
  min-height: 420px;
}

@media (max-width: 860px) {
  .outbox-split {
    grid-template-columns: 1fr;
  }

  .outbox-filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
  }

  .outbox-filter-form .filter-label {
    grid-column: 1 / -1;
  }

  .outbox-filter-form .btn {
    grid-column: 1 / -1;
  }
}

.outbox-list-panel,
.outbox-detail-panel {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  min-width: 0;
}

.outbox-list-panel {
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card, none);
}

.outbox-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}

.outbox-pagination-status {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outbox-pagination-btn.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.panel-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2rem 1.25rem;
  margin: 0;
  min-height: 280px;
}

.outbox-list-panel .panel-empty-state {
  border-radius: 0 0 11px 11px;
}

.panel-empty-state-muted {
  opacity: 0.92;
}

.panel-empty-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--accent-muted);
  border: 1px solid var(--border);
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.panel-empty-state-failed .panel-empty-icon {
  background: var(--panel-error-bg);
  border-color: var(--panel-error-border);
  color: var(--error);
}

.panel-empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.panel-empty-desc {
  margin: 0;
  max-width: 16rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.panel-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.outbox-list-table {
  margin: 0;
  border: none;
}

.outbox-list-table th,
.outbox-list-table td {
  border-left: none;
  border-right: none;
}

.outbox-row-link {
  display: block;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  color: inherit;
}

.outbox-row.is-selected .outbox-row-link {
  background: var(--accent-strong);
}

.outbox-row-to {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.outbox-row-subject {
  display: block;
  font-weight: 500;
  margin: 0.15rem 0;
  flex: 1;
  min-width: 0;
}

.outbox-row-subject-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.outbox-attach-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  flex-shrink: 0;
}

.outbox-attach-icon {
  display: block;
}

.outbox-row-attachments {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 0.35rem;
}

.outbox-attachments-card {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.outbox-attachments-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.65rem;
}

.outbox-attachments-header h3 {
  margin: 0;
  font-size: 0.95rem;
}

.outbox-attachments-summary {
  margin: 0;
  font-size: 0.8rem;
}

.outbox-attachment-banner {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.outbox-attachment-banner-error {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
  color: var(--error);
}

.action-toolbar-banner {
  flex: 1 1 100%;
}

.outbox-attachment-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.outbox-attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
}

.outbox-attachment-row-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  min-width: 0;
  flex: 1;
}

.outbox-attachment-name {
  font-weight: 500;
  word-break: break-word;
}

.outbox-attachment-index {
  font-size: 0.75rem;
}

.outbox-attachment-size {
  font-size: 0.75rem;
}

.outbox-attachment-status {
  text-transform: capitalize;
}

.status-attach-ready {
  border-color: var(--success);
  color: var(--success);
}

.status-attach-stale {
  border-color: #c9a227;
  color: #a67c00;
}

.status-attach-no_cache,
.status-attach-no-cache {
  border-color: var(--error);
  color: var(--error);
}

.outbox-attachment-row-actions {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .outbox-attachment-row {
    flex-direction: column;
    align-items: stretch;
  }

  .outbox-attachment-row-actions {
    width: 100%;
  }

  .outbox-attachment-row-actions .btn {
    width: 100%;
    text-align: center;
  }

  .outbox-row-subject-line {
    flex-direction: column;
    align-items: flex-start;
  }
}

.outbox-attachment-list {
  margin: 0;
  padding-left: 1.25rem;
}

.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.status-pending { border-color: var(--accent); color: var(--accent); }
.status-sent { border-color: var(--success); color: var(--success); }
.status-rejected { border-color: var(--muted); }
.status-failed { border-color: var(--error); color: var(--error); }
.status-active { border-color: var(--success); color: var(--success); }
.status-beta { border-color: #d4a012; color: #d4a012; }
.status-paused { border-color: var(--muted); color: var(--text-muted); }
.status-discontinued { border-color: var(--error); color: var(--error); opacity: 0.7; }

.send-quota-banner {
  border-left: 4px solid var(--accent);
  margin-bottom: 1rem;
}

.send-quota-warn { border-left-color: #d4a012; }
.send-quota-blocked,
.send-quota-circuit_open { border-left-color: var(--error); }

.send-quota-title { margin: 0 0 0.35rem; }
.send-quota-stats { margin: 0; }
.send-quota-action { margin: 0.5rem 0 0; }

.outbox-detail-panel {
  min-height: 360px;
}

.outbox-detail-panel.card {
  overflow-x: clip;
  box-shadow: var(--shadow-card, none);
}

.outbox-detail-panel > .panel-empty-state {
  flex: 1;
}

.outbox-detail-header h2 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}

.outbox-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.outbox-detail-title-row h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.outbox-share-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.outbox-share-icon {
  display: block;
}

.outbox-share-btn.is-copied {
  border-color: var(--success, #2d8a4e);
  color: var(--success, #2d8a4e);
}

.outbox-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
  margin: 1rem 0;
}

.meta-grid dt {
  color: var(--muted);
  margin: 0;
}

.meta-grid dd {
  margin: 0;
}

.error-text {
  color: var(--error);
}

.reply-thread-section {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.reply-thread-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.reply-thread-header h3 {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.reply-thread-desc,
.reply-thread-hint,
.reply-thread-unavailable {
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.reply-thread-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reply-thread-message {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}

.reply-thread-message.is-anchor {
  border-color: var(--accent-focus-ring);
  box-shadow: 0 0 0 1px var(--accent-subtle);
}

.reply-thread-message.brand-external {
  border-left: 4px solid var(--brand-external-border);
}

.reply-thread-message.brand-openterface {
  border-left: 4px solid var(--brand-openterface-border);
}

.reply-thread-message.brand-openterface .reply-thread-message-header {
  background: var(--brand-openterface-bg);
}

.reply-thread-message.brand-techxartisan {
  border-left: 4px solid var(--brand-techxartisan-border);
}

.reply-thread-message.brand-techxartisan .reply-thread-message-header {
  background: var(--brand-techxartisan-bg);
}

.sender-brand-pill {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.sender-brand-pill-openterface {
  color: var(--brand-openterface-text);
  background: var(--brand-openterface-bg);
  border-color: var(--brand-openterface-border);
}

.sender-brand-pill-techxartisan {
  color: var(--brand-techxartisan-text);
  background: var(--brand-techxartisan-bg);
  border-color: var(--brand-techxartisan-border);
}

.email-preview.brand-openterface {
  border-left: 4px solid var(--brand-openterface-border);
  padding-left: 0.85rem;
  margin-left: -0.85rem;
}

.email-preview.brand-techxartisan {
  border-left: 4px solid var(--brand-techxartisan-border);
  padding-left: 0.85rem;
  margin-left: -0.85rem;
}

.email-preview.brand-external {
  border-left: 4px solid var(--brand-external-border);
  padding-left: 0.85rem;
  margin-left: -0.85rem;
}

.reply-thread-message-header {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.reply-thread-message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  font-size: 0.85rem;
}

.reply-thread-anchor-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--accent-pill-active);
  color: var(--accent);
}

.reply-thread-from {
  font-weight: 600;
}

.reply-thread-subject {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

.reply-thread-to {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
}

.reply-thread-body {
  padding: 0.75rem 0.85rem;
  max-height: 20rem;
  overflow: auto;
}

.reply-thread-message.is-summary-only .reply-thread-body {
  max-height: 8rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.reply-thread-quoted {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.reply-thread-quoted-summary {
  cursor: pointer;
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  color: var(--muted);
  user-select: none;
}

.reply-thread-quoted-summary:hover {
  color: var(--text);
}

.reply-thread-quoted-body {
  padding: 0.65rem 0.85rem 0.85rem;
  max-height: 16rem;
  overflow: auto;
  border-top: 1px dashed var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}

.reply-thread-expand-bar {
  padding: 0.5rem 0.85rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.reply-thread-message.is-loading {
  opacity: 0.85;
}

.reply-thread-message.is-expanded .reply-thread-body {
  max-height: 20rem;
  color: var(--text);
}

.email-preview h3 {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.email-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.outbox-edit-form {
  margin-top: 0.25rem;
}

.outbox-edit-hint {
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.outbox-edit-fields {
  gap: 0.75rem;
}

.outbox-edit-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.outbox-edit-label-full {
  grid-column: 1 / -1;
}

.outbox-edit-input,
.outbox-edit-textarea,
.outbox-edit-file {
  width: 100%;
  font-size: 0.9rem;
}

.outbox-edit-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.45;
  resize: vertical;
  min-height: 12rem;
}

.outbox-body-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.outbox-body-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.outbox-body-mode-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

.outbox-body-mode-btn.is-active {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
}

.outbox-body-mode-btn:hover {
  color: var(--text);
}

.outbox-body-plain-hint {
  font-size: 0.8rem;
}

.email-preview-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.outbox-signature-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.outbox-signature-toggle-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.outbox-signature-toggle-btn.is-active {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
}

.outbox-signature-toggle-btn:hover {
  color: var(--text);
}

.outbox-body-header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.outbox-format-toggle {
  display: inline-flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.outbox-format-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.outbox-save-error {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}

.outbox-edit-from-select {
  margin-bottom: 0.35rem;
}

.outbox-from-picker-warning {
  margin: 0;
  font-size: 0.78rem;
  color: var(--warning-text);
}

/* Tag inputs for To/Cc/Bcc reuse the .cc-tag chip look from preview mode. */
.cc-tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.cc-tag-input.has-invalid {
  border-color: var(--error);
}

.cc-tag-input-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cc-tag-input-chips:empty {
  display: none;
}

.cc-tag-input-entry {
  flex: 1;
  min-width: 9rem;
  padding: 0.15rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
}

.cc-tag-input-entry:focus {
  outline: none;
}

.cc-tag-invalid {
  border-color: var(--error);
  color: var(--error);
}

.outbox-body-editor .tox-tinymce {
  margin-top: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.outbox-body-editor .tox .tox-edit-area {
  border: 0;
}

.outbox-edit-textarea-source {
  margin-top: 0.35rem;
}

.outbox-edit-attachment-list {
  list-style: none;
  margin: 0.35rem 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.outbox-edit-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.outbox-edit-file-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

#outbox-action-toolbar[data-mode="edit"] .action-toolbar-secondary {
  grid-template-columns: auto;
}

#outbox-content-root[data-mode="edit"] + #outbox-action-toolbar .action-toolbar-primary {
  flex-shrink: 0;
}

.email-preview-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  font-size: 0.9rem;
  line-height: 1.5;
}

.email-preview-body a {
  color: var(--link);
}

.email-preview-body img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.email-preview-body table {
  border-collapse: collapse;
  max-width: 100%;
}

.email-preview-body td,
.email-preview-body th {
  max-width: 100%;
  word-break: break-word;
}

.email-preview-body pre.email-plain {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  background: transparent;
  border: none;
  padding: 0;
}

.action-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.action-toolbar .inline-form {
  display: flex;
  align-items: stretch;
}

.action-toolbar-primary {
  flex-shrink: 0;
}

.action-toolbar-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

@media (max-width: 560px) {
  .action-toolbar {
    grid-template-columns: 1fr;
  }

  .action-toolbar-secondary {
    grid-template-columns: 1fr;
  }
}

.outbox-reject-form {
  display: flex;
  flex: 1;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

.reject-reason-input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
}

.reject-reason-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-focus-ring);
}

.reject-reason-input::placeholder {
  color: var(--muted);
}

/* Activity log */
.collapsible-filters {
  padding: 0;
  overflow: hidden;
}

.collapsible-filters-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  list-style: none;
}

.collapsible-filters-header::-webkit-details-marker {
  display: none;
}

.collapsible-filters-header::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.15rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.collapsible-filters[open] > .collapsible-filters-header::before {
  transform: rotate(45deg);
}

.collapsible-filters-header:hover {
  background: var(--accent-subtle);
}

.collapsible-filters-badge {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-muted);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: 0.25rem;
}

.collapsible-filters[open] .filter-summary {
  display: none;
}

.collapsible-filters[open] .collapsible-filters-badge {
  display: none;
}

.filter-summary-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}

.filter-summary-pill .bi {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-right: 0.15rem;
}

.collapsible-filters-body {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
}

.collapsible-filters-body > * {
  min-width: 0;
}

.collapsible-filters-body select,
.collapsible-filters-body input[type="text"],
.collapsible-filters-body input[type="search"] {
  width: 100%;
  min-width: 0;
}

.activity-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem 1.25rem;
  align-items: end;
  margin-bottom: 0;
}

.card-table {
  padding: 0;
  overflow: hidden;
}

.card-table .data-table {
  margin: 0;
  border: none;
}

.card-table .data-table th,
.card-table .data-table td {
  border-left: none;
  border-right: none;
}

.card-table .pagination {
  padding: 0.75rem 1.25rem 1rem;
  margin: 0;
  border-top: 1px solid var(--border);
}

.activity-filters .filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.activity-filters-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.activity-filters label {
  font-size: 0.8rem;
  color: var(--muted);
}

.activity-filters select,
.activity-filters input[type="text"],
.activity-filters input[type="search"],
.activity-filters input[type="number"],
.activity-filters input[type="date"],
.key-create-form select {
  padding: 0.45rem 0.6rem;
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  min-width: 140px;
  margin-bottom: 0;
}

.activity-filters .filter-row-wide {
  grid-column: 1 / -1;
}

.activity-filters .filter-row-wide input {
  width: 100%;
  min-width: 0;
}

.posts-summary {
  margin: 0;
}

.post-account-primary {
  font-weight: 500;
  white-space: nowrap;
}

.post-account-secondary {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.15rem;
}

.posts-meta-portrait {
  display: none;
}

.post-published {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.25;
  white-space: nowrap;
}

.post-published-primary {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.post-published-secondary {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.posts-col-published {
  width: 5.5rem;
}

.posts-filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem;
}

.posts-filter-toolbar .filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  min-width: 0;
}

.posts-filter-toolbar .filter-group-label {
  flex: 0 0 auto;
  min-width: 3.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.posts-filter-toolbar .filter-bar-scroll {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-bottom: 0;
}

.posts-filter-toolbar .filter-bar {
  gap: 0.35rem;
}

.filter-pill .bi {
  font-size: 0.9em;
  margin-right: 0.25rem;
  vertical-align: -0.05em;
}

.filter-pill-count {
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
}

.filter-pill.is-active .filter-pill-count {
  color: inherit;
  background: rgba(255, 255, 255, 0.2);
}

.filter-pill-platform-x.is-active {
  border-color: rgba(0, 0, 0, 0.35);
}

.filter-pill-platform-linkedin.is-active {
  border-color: rgba(10, 102, 194, 0.45);
}

.posts-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--surface-elevated, var(--card-bg));
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
}

.filter-chip:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.filter-chip .bi-x {
  font-size: 0.95em;
  opacity: 0.65;
}

.filter-chip-static {
  cursor: default;
}

.collapsible-filters-title .bi,
.activity-filters label .bi {
  margin-right: 0.35rem;
  opacity: 0.75;
}

.posts-table .th-short .bi {
  font-size: 1rem;
  vertical-align: middle;
}

.badge-format .bi {
  margin-right: 0.2rem;
  font-size: 0.85em;
}

.card-table > .table-scroll {
  margin-top: 0;
  border: none;
  border-radius: 0;
}

.posts-table {
  min-width: 48rem;
}

.pagination--compact {
  flex-wrap: wrap;
  justify-content: center;
}

.activity-table .route-cell {
  font-size: 0.75rem;
  word-break: break-all;
}

.posts-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.posts-table th.num {
  text-align: right;
}


.post-text-cell {
  max-width: 420px;
  word-break: break-word;
}

.post-media-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: flex-start;
  max-width: 220px;
}

.post-media-link {
  position: relative;
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
}

.post-media-preview {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.post-media-video-thumb {
  filter: brightness(0.78);
}

.post-media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.post-media-more {
  align-self: center;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--accent-subtle, rgba(56, 139, 253, 0.08));
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.badge .bi {
  margin-right: 0.3rem;
  font-size: 0.9em;
}

.badge-success {
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.badge-danger {
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--error);
}

.badge-warning {
  border-color: color-mix(in srgb, var(--warning-text) 45%, transparent);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.badge-secondary {
  border-color: var(--border);
  background: var(--surface-hover);
  color: var(--muted);
}

.badge-format {
  background: rgba(120, 140, 180, 0.12);
}

.badge-format-feed_post {
  background: rgba(56, 139, 253, 0.12);
  border-color: rgba(56, 139, 253, 0.35);
}

.badge-format-retweet {
  background: rgba(120, 140, 180, 0.15);
}

.badge-format-reply {
  background: rgba(100, 180, 140, 0.15);
  border-color: rgba(100, 180, 140, 0.35);
}

.badge-format-quote {
  background: rgba(180, 140, 100, 0.15);
}

.badge-source {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  background: transparent;
  color: var(--muted);
}

.source-badge {
  font-size: 0.75rem;
}

@media (max-width: 860px) {
  .posts-table {
    min-width: 44rem;
  }

  .post-text-cell {
    max-width: 16rem;
  }

  .post-media-preview {
    width: 56px;
    height: 56px;
  }

  .post-media-strip {
    max-width: 180px;
  }

  .posts-filter-toolbar .filter-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
}

@media (max-width: 640px) {
  .posts-page .posts-summary {
    font-size: 0.875rem;
  }

  .posts-table {
    min-width: 40rem;
  }

  .post-text-cell {
    max-width: 14rem;
  }
}

.summary-cell code {
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
  max-width: 280px;
}

.status-code.status-2xx { color: var(--success); }
.status-code.status-4xx { color: var(--status-4xx); }
.status-code.status-5xx { color: var(--error); }

.nowrap {
  white-space: nowrap;
}

/* Shrink-to-content table column. The remaining columns then absorb the
   available width instead of the table growing past the viewport, so pair
   this with .table-scroll on narrow screens. */
.col-fit {
  width: 1%;
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.pagination--center {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-info {
  color: var(--muted);
  font-size: 0.85rem;
}

.container-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.container-header-row h1 {
  margin-bottom: 0;
}

.subtitle a {
  color: var(--link);
}

.subtitle a:hover {
  color: var(--link-hover);
}

.admin-header-link {
  margin: 0;
  font-size: 0.9rem;
}

.back-link {
  margin: 0;
}

.callback-page a {
  color: var(--link);
}

.callback-page a:hover {
  color: var(--link-hover);
}

/* —— Admin UI polish (account mgmt, forms, outbox) —— */

.admin-account-menu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}

.admin-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
}

.admin-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.admin-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.admin-account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.role-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
}

.role-badge-superadmin {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-muted);
  color: var(--accent);
}

.role-badge-operator {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: var(--tag-propose-bg);
  color: var(--tag-propose-text);
}

.breadcrumb {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--link);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* ── Topbar refinement at ≤720px ──
   Previously this block set flex-wrap:wrap and width:100% on the actions,
   which overrode the ≤959px mobile layout (flex-wrap:nowrap) and pushed
   the actions onto a second row, breaking the single-row mobile topbar.
   The ≤959px rules already handle the mobile topbar correctly (hiding the
   username and role badge, showing only the avatar + hamburger).  The only
   refinement needed at ≤720px is tightening the account-menu border. */
@media (max-width: 720px) {
  .admin-account-menu {
    border-left: none;
    padding-left: 0;
  }
}

/* Shared admin forms (users, change password) */
.admin-form.form-grid,
.card-form .admin-form.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  align-items: start;
}

.admin-form .form-field {
  margin: 0;
}

.admin-form .form-field-full {
  grid-column: 1 / -1;
}

.admin-form label {
  margin-bottom: 0.35rem;
}

.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form select {
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
}

.admin-form .form-hint {
  /* A <small> hint is inline by default, and vertical margins do not apply to
     inline boxes, so the top margin below would silently do nothing. */
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
}

.admin-form .form-actions,
.admin-form .form-actions-stretch {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.form-actions-stretch .btn-block {
  width: 100%;
}

.btn-block {
  display: flex;
  width: 100%;
}

.card-form h2 {
  margin-top: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.card-form + .card-form {
  margin-top: 0;
}

.checkbox-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 0.5rem;
}

.checkbox-list li {
  margin: 0;
}

.checkbox-list label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  transition: background 0.12s;
}

.checkbox-list label:hover {
  background: var(--surface-hover);
}

.checkbox-list input[type="checkbox"] {
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.checkbox-list code {
  font-size: 0.8em;
  color: var(--muted);
}

.admin-layout-centered .admin-main {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.card-narrow {
  max-width: 28rem;
  width: 100%;
  margin: 0 auto;
}

/* Outbox list row alignment */
.outbox-row-cell {
  padding: 0 !important;
}

.outbox-row-link {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
}

.outbox-row-to {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outbox-row-subject {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outbox-list-table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0.55rem 0.85rem;
  background: var(--table-header-bg, var(--bg));
}

/* Batch approve */
.batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.batch-page-count {
  color: var(--muted);
  font-weight: 400;
}

.batch-selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--accent-subtle);
  color: var(--accent);
}

.batch-running-hint {
  font-size: 0.8rem;
}

.batch-select-all-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.batch-approve-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.batch-interval-fieldset {
  border: none;
  margin: 0.75rem 0;
  padding: 0;
}

.batch-interval-fieldset legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.batch-radio {
  display: block;
  margin: 0.35rem 0;
  font-size: 0.875rem;
}

.batch-interval-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.65rem 1.25rem;
}

.batch-interval-input {
  width: 5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg, var(--bg));
  color: var(--text);
}

.batch-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.batch-progress-card {
  margin-bottom: 1rem;
}

.batch-progress-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.65rem;
}

.batch-progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}

.batch-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.batch-progress-text {
  margin: 0.5rem 0 0;
}

.batch-progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.batch-failed-list {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.batch-precheck-summary {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface, var(--bg));
}

.batch-precheck-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.batch-precheck-table th,
.batch-precheck-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.batch-precheck-blocked td {
  color: var(--danger, #b42318);
}

.outbox-cb-col {
  width: 2.25rem;
  padding: 0.7rem 0 0.7rem 0.85rem !important;
  vertical-align: middle;
}

.outbox-list-table .outbox-row.is-selected .outbox-cb-col {
  background: var(--accent-muted);
}

.outbox-list-table .outbox-row.is-selected .outbox-row-cell {
  background: var(--accent-muted);
}

.outbox-list-table tbody tr:hover .outbox-cb-col,
.outbox-list-table tbody tr:hover .outbox-row-cell {
  background: var(--surface-hover);
}

@media (max-width: 520px) {
  .outbox-row-link {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .outbox-row-to {
    grid-column: 1 / -1;
  }

  .outbox-row-subject {
    grid-column: 1;
  }

  .outbox-row-link .status-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

@media (max-width: 640px) {
  .admin-form.form-grid,
  .card-form .admin-form.form-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Responsive admin shell & RBAC UX —— */

.admin-topbar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Shrinks to content on desktop so the breadcrumb can sit beside it rather
     than being pushed to the far right. Restored to flex: 1 below 960px. */
  flex: 0 1 auto;
  min-width: 0;
}

.admin-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  color: var(--muted);
}

.admin-breadcrumb > span:last-child {
  color: var(--text);
  font-weight: 600;
}

.admin-breadcrumb-sep {
  /* Spacing lives here rather than in the template so the separator cannot pick
     up asymmetric whitespace from the Jinja block. */
  margin: 0 0.4rem;
  opacity: 0.55;
}

/* Mobile context indicator is hidden on desktop; shown only inside the
   <= 959px media query where the desktop breadcrumb is hidden. */
.admin-mobile-context {
  display: none;
}

.admin-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.admin-nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
}

.admin-nav-backdrop { display: none; }

.admin-layout {
  padding: 0;
}

@media (max-width: 959px) {
  body.admin-drawer-open {
    overflow: hidden;
  }

  .admin-nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(31, 35, 40, 0.4);
  }

  .admin-layout, .admin-layout.has-nav-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main";
  }

  /* .admin-main is pinned to grid-column:2 on desktop; reset to auto so it
     fills the single-column layout instead of creating an implicit column 2. */
  .admin-main {
    grid-column: auto;
  }

  /* ── Topbar: tighter padding on mobile ── */
  .admin-topbar {
    padding: 0.5rem 0.75rem 0.4rem;
  }

  .admin-nav-toggle {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.3rem;
  }

  .admin-topbar-brand {
    flex: 1;
  }

  .admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .admin-account-menu {
    order: 1;
  }

  .admin-nav-toggle {
    order: 2;
  }

  /* ── Mobile breadcrumb: compact section/page context ──
     The desktop breadcrumb is hidden; show a compact single-line version
     so users always know which section and page they are on. */
  .admin-breadcrumb {
    display: none;
  }

  .admin-mobile-context {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 0.25rem;
  }

  .admin-mobile-context-section {
    font-weight: 600;
    color: var(--text);
    text-transform: none;
  }

  .admin-mobile-context-sep {
    color: var(--border);
    flex-shrink: 0;
  }

  .admin-mobile-context-page {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-nav,
  .admin-layout.has-nav-panel .admin-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: min(360px, 92vw);
    max-width: 100vw;
    transition: none;
    height: 100vh;
    height: 100dvh;
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    gap: 0.25rem;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--bg);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
  }

  /* Match the expanded desktop selector so an open drawer always wins. */
  .admin-nav.is-open,
  .admin-layout.has-nav-panel .admin-nav.is-open {
    display: flex;
  }

  .admin-nav-rail {
    width: 100%;
    min-width: 0;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0.5rem 1rem 1rem;
  }

  .admin-nav-drawer-close { display: block; min-height: 44px; flex-shrink: 0; margin: 0.75rem 1rem; }
  .admin-nav-rail > *, .admin-nav-footer { flex-shrink: 0; }
  .admin-nav-entry-link, .admin-nav-entry-label, .admin-nav-module-toggle, .admin-nav-logout-btn {
    min-height: 44px;
    font-size: 0.9375rem;
  }
  .admin-nav-entry-text, .admin-nav-module-label, .admin-nav-panel .admin-nav-link {
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .admin-nav-panel-header { display: none; }
  .admin-nav-panel .admin-nav-link { min-height: 44px; display: flex; align-items: center; }

  .admin-nav-entry-chevron { display: block; }
  .admin-nav-entry-label[aria-expanded="true"] > .admin-nav-entry-chevron {
    transform: rotate(90deg);
  }

  .admin-nav-panel {
    position: static;
    z-index: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0.25rem 0 0.25rem 0.5rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .admin-nav-link {
    width: auto;
    margin-left: 0;
  }

  /* ── Active page indicator: more prominent on mobile ── */
  .admin-nav-link.is-active,
  .admin-nav-link.is-active:visited {
    background: var(--accent-muted);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    box-shadow: inset 3px 0 0 var(--accent);
    font-weight: 600;
  }

  .admin-nav-module.has-active > .admin-nav-module-toggle {
    background: var(--accent-subtle, rgba(9, 105, 218, 0.06));
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .admin-topbar-actions {
    flex-wrap: wrap;
    width: auto;
    justify-content: flex-end;
  }

  .admin-account-menu {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
  }

  .admin-user {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .admin-user-name,
  .admin-user .role-badge {
    display: none;
  }

  .admin-account-actions {
    display: none;
  }

  .admin-nav-footer {
    display: block;
  }

  .card-row {
    flex-direction: column;
    align-items: stretch;
  }

  .card-row-actions,
  .card-footer-actions,
  .page-header-actions {
    width: 100%;
  }

  .card-row-actions .btn,
  .card-footer-actions .btn,
  .page-header-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .agent-bundle-hint {
    min-width: 0;
    flex-basis: 100%;
  }

  /* ── iOS input zoom prevention ──
     iOS Safari auto-zooms when an input has font-size < 16px. Bump all
     form inputs to 16px on mobile to suppress this behavior. */
  input[type="text"],
  input[type="url"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="date"],
  input[type="month"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .admin-layout {
    padding: 0 0.75rem 1rem;
  }

  .admin-login-page .container {
    padding: 2rem 1rem;
  }

  .admin-page-title {
    font-size: 1.2rem;
  }

  .card {
    padding: 1rem;
  }

  .card-table,
  .collapsible-filters {
    padding: 0;
  }

  .posts-filter-toolbar {
    padding: 0.65rem 0.75rem;
  }

  .btn {
    white-space: normal;
    text-align: center;
  }
}

.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.table-scroll .data-table {
  margin-top: 0;
  min-width: 36rem;
}

.table-scroll .data-table th:first-child,
.table-scroll .data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}

.table-scroll .data-table th:first-child {
  background: var(--table-header-bg, var(--bg));
}

/* ── Sticky last column (action column) ──
   Tables with an action column (View/Edit/Delete buttons) pin the last
   column to the right edge so it stays visible during horizontal scroll.
   Opt-in via .data-table-sticky-actions on the <table>. */
.table-scroll .data-table-sticky-actions th:last-child,
.table-scroll .data-table-sticky-actions td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: -1px 0 0 var(--border);
}

.table-scroll .data-table-sticky-actions th:last-child {
  background: var(--table-header-bg, var(--bg));
}

/* Users list on phones: drop the low-priority Profiles and Last login columns,
   hide the redundant GitHub link-state suffix, tighten cell padding, and release
   the forced 36rem floor so the remaining GitHub / Role / Status / Edit columns
   fit the viewport instead of trapping the Edit button off-screen. Scoped to
   .data-table-users / .card-users-list; other tables keep the 36rem floor. */
@media (max-width: 640px) {
  .data-table-users .col-profiles,
  .data-table-users .col-last-login {
    display: none;
  }

  .data-table-users .github-link-state {
    display: none;
  }

  .table-scroll .data-table.data-table-users {
    min-width: 100%;
  }

  .data-table-users th,
  .data-table-users td {
    padding: 0.4rem 0.5rem;
  }

  .card-users-list {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

.dev-login-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

.profile-assignment-list {
  max-height: none;
  border: none;
  padding: 0;
  gap: 0.75rem;
  background: transparent;
}

.profile-assignment-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem;
  background: var(--bg);
}

.profile-assignment-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

.profile-assignment-head input {
  margin: 0.25rem 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.profile-assignment-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  line-height: 1.35;
}

.profile-assignment-slug {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Application access matrix: the level-2 module grants on the user forms. The
   level-1 rail group renders as a spanning header row so the matrix reads like
   the sidebar it controls. */
.app-access-matrix {
  width: 100%;
}

.app-access-matrix .app-access-group-row th {
  background: var(--surface-hover);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.app-access-matrix .app-access-category-row th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.75rem;
  background: transparent;
}

.app-access-id {
  margin-left: 0.45rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

/* Wide screens: Access level is a 4-way radio matrix (no access / view / edit /
   manage) instead of a dropdown, so an operator sets a level in one click and
   can scan every module at once. The level name lives in the sub-column header;
   the in-cell name is hidden here and revealed by the phone reflow below. */
.app-access-matrix thead th {
  background: var(--table-header-bg, var(--bg));
  font-weight: 600;
  vertical-align: bottom;
}

.app-access-matrix .app-access-levels-header,
.app-access-matrix .app-access-level-col,
.app-access-matrix td.app-access-level {
  text-align: center;
}

.app-access-matrix .app-access-level-col {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-access-matrix .app-access-level-name {
  display: none;
}

.app-access-matrix .app-access-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.app-access-matrix .app-access-radio input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.app-access-matrix .app-access-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-access-matrix td.app-access-implicit {
  text-align: center;
  color: var(--muted);
}

/* Wide screens get four equal-width Access level sub-columns so the matrix reads
   as a true grid instead of content-sized columns ("No access" otherwise
   outgrows "view"/"edit" and the radios drift off a shared rhythm). Scoped to
   >=900px, where the card has room for four 6.5rem columns plus Module and
   Current; the 641-899px range stays auto-sized so Module is never squeezed,
   and phones use the flex reflow below. */
@media (min-width: 900px) {
  .app-access-matrix .app-access-level-col {
    width: 6.5rem;
  }
}

/* Phones: hide the header, turn each module row into a card, and lay the four
   level radios out as a labeled segmented row (module title above, Current
   below). Scoped to .app-access-matrix; shared by the detail and invite forms. */
@media (max-width: 640px) {
  .app-access-matrix thead {
    display: none;
  }

  .app-access-matrix,
  .app-access-matrix tbody,
  .app-access-matrix .app-access-group-row,
  .app-access-matrix .app-access-group-row th {
    display: block;
    width: 100%;
  }

  .app-access-matrix td {
    display: block;
  }

  .app-access-matrix .app-access-group-row th {
    margin-top: 0.5rem;
  }

  .app-access-matrix tbody tr:not(.app-access-group-row):not(.app-access-category-row) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.35rem;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
  }

  .app-access-matrix td.app-access-module,
  .app-access-matrix td.app-access-current,
  .app-access-matrix td.app-access-implicit {
    flex: 1 0 100%;
  }

  .app-access-matrix td.app-access-level {
    flex: 1 1 0;
    min-width: 0;
  }

  .app-access-matrix .app-access-radio {
    flex-direction: column;
    gap: 0.2rem;
  }

  .app-access-matrix .app-access-level-name {
    display: block;
    font-size: 0.68rem;
    line-height: 1.2;
    color: var(--muted);
  }

  .app-access-matrix td.app-access-current::before {
    content: "Current";
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.from-approver-form .form-actions {
  grid-column: 1 / -1;
}

.outbox-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.outbox-filter-select,
.outbox-filter-date {
  min-width: 9rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.8125rem;
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.outbox-approver-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
  flex-shrink: 0;
}

.outbox-edited-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  flex-shrink: 0;
}

.outbox-history {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.outbox-history-summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}

.outbox-history-count {
  font-weight: 400;
  font-size: 0.8rem;
}

.outbox-history-body {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.outbox-history-item {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.outbox-history-item-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
}

.outbox-history-editor-type {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}

.outbox-history-field summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
}

.outbox-history-diff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0.5rem;
  margin: 0.35rem 0 0.5rem;
}

.outbox-history-diff pre {
  margin: 0;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 14rem;
  overflow-y: auto;
}

.outbox-history-before {
  background: var(--warning-bg);
}

.outbox-history-after {
  background: var(--bg);
}

.outbox-history-restore {
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}

.outbox-approver-notice {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

@media (max-width: 640px) {
  .outbox-filter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .outbox-filter-form .filter-label {
    width: 100%;
  }

  .outbox-filter-select,
  .outbox-filter-date {
    width: 100%;
    min-width: 0;
  }

  .outbox-filter-form .btn {
    width: 100%;
  }

  .batch-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .batch-toolbar .btn {
    width: 100%;
  }

  .meta-grid {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }

  .meta-grid dt {
    margin-top: 0.65rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .meta-grid dd {
    margin-bottom: 0.15rem;
  }

  /* Profiles list: hide low-value columns on phones */
  .data-table-profiles th:nth-child(5),
  .data-table-profiles td:nth-child(5),
  .data-table-profiles th:nth-child(6),
  .data-table-profiles td:nth-child(6) {
    display: none;
  }

  .table-scroll .data-table.data-table-profiles {
    min-width: 100%;
  }

  /* Signatures table: hide template file column on phones */
  .data-table-signatures th:nth-child(3),
  .data-table-signatures td:nth-child(3) {
    display: none;
  }

  .table-scroll .data-table.data-table-signatures {
    min-width: 100%;
  }
}

.page-header-actions-stack {
  flex-direction: column;
  align-items: stretch;
}

/* Messaging responsive: meta-grid 2-pair-per-row on wider screens */
@media (min-width: 900px) {
  .outbox-detail-panel .meta-grid {
    grid-template-columns: auto 1fr auto 1fr;
    gap: 0.35rem 1rem;
  }
}

@media (min-width: 481px) {
  .page-header-actions-stack {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .page-header-actions-stack .btn {
    width: 100%;
    justify-content: center;
  }
}

/* —— Phone UX (≤480px) — comprehensive mobile pass —— */
@media (max-width: 480px) {

body.admin-shell {
  overflow-x: clip;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.admin-topbar {
  padding-top: max(0.75rem, env(safe-area-inset-top));
}

.admin-layout {
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.filter-bar-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.15rem;
  padding: 0 0.15rem 0.35rem;
  scrollbar-width: thin;
}

.filter-bar-scroll .filter-bar {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}

.filter-bar-scroll .filter-pill {
  flex-shrink: 0;
}

.outbox-mobile-back {
  display: none;
  margin-bottom: 0.75rem;
  width: 100%;
  justify-content: center;
}

} /* end Phone UX (≤480px) */

@media (max-width: 860px) {
  .outbox-split.outbox-has-selection .outbox-list-panel {
    display: none;
  }

  .outbox-split:not(.outbox-has-selection) .outbox-detail-panel {
    display: none;
  }

  .outbox-split.outbox-has-selection .outbox-detail-panel {
    min-height: auto;
  }

  .outbox-mobile-back {
    display: inline-flex;
  }

  .outbox-toolbar {
    padding: 0.75rem 1rem;
  }

  .outbox-detail-panel.card {
    padding: 1rem;
  }

  .email-preview-body {
    padding: 0.75rem;
    font-size: 0.85rem;
  }

  .reply-thread-body {
    max-height: 14rem;
  }
}

/* Phone landscape: compact outbox for limited vertical space */
@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) {
  .outbox-split {
    min-height: auto;
  }

  .outbox-list-panel,
  .outbox-detail-panel {
    min-height: auto;
  }

  .outbox-detail-header h2 {
    font-size: 0.95rem;
  }

  .outbox-meta {
    font-size: 0.75rem;
  }

  .email-preview-body {
    padding: 0.5rem;
    font-size: 0.8rem;
    max-height: 45vh;
    overflow-y: auto;
  }

  .action-toolbar {
    padding: 0.5rem;
  }

  .batch-progress-card {
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .admin-brand-link {
    font-size: 1rem;
    line-height: 1.3;
    max-width: calc(100vw - 8.5rem);
  }

  .admin-user-name {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btn,
  .btn-small,
  .scope-preset-btn,
  .filter-pill {
    min-height: 2.75rem;
  }

  .btn-small {
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header-actions {
    width: 100%;
  }

  .page-header-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-header .scope-desc {
    font-size: 0.8125rem;
  }

  .admin-login-page .container {
    padding: max(1.5rem, env(safe-area-inset-top)) 1rem 2rem;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .dev-login-block {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
  }

  .agent-scope-presets {
    flex-direction: column;
    align-items: stretch;
  }

  .agent-scope-presets .scope-preset-btn {
    width: 100%;
    text-align: center;
  }

  .scope-presets-label {
    width: 100%;
    margin-bottom: 0.15rem;
  }

  .agent-scopes .scope-item {
    padding: 0.75rem 0;
  }

  .table-scroll .data-table {
    min-width: 32rem;
    font-size: 0.8125rem;
  }

  .data-table-keys .table-action-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .data-table-keys .table-action-group .btn-small,
  .data-table-keys .table-action-group form {
    width: 100%;
  }

  .data-table-keys .table-action-group .btn-small {
    justify-content: center;
  }

  .activity-filters {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .collapsible-filters-body .activity-filters {
    padding: 0;
  }

  .activity-filters select,
  .activity-filters input[type="text"],
  .activity-filters input[type="search"],
  .activity-filters input[type="number"],
  .activity-filters input[type="date"] {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
  }

  .activity-filters-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .activity-filters-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .pagination .filter-pill,
  .pagination .page-info {
    text-align: center;
    width: 100%;
  }

  .pagination--compact {
    flex-direction: row;
    align-items: center;
  }

  .pagination--compact .filter-pill {
    width: auto;
  }

  .pagination--compact .page-info {
    width: 100%;
    order: -1;
    margin-bottom: 0.15rem;
  }

  .posts-col-published {
    width: 4.25rem;
  }

  .post-published-primary {
    font-size: 0.8125rem;
  }

  .signature-preview-card {
    overflow: hidden;
  }

  .signature-preview-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
  }

  .profile-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-actions-bar .btn,
  .profile-actions-bar form {
    width: 100%;
  }

  .profile-actions-bar .btn {
    justify-content: center;
  }

  .outbox-reject-form {
    flex-direction: column;
    align-items: stretch;
  }

  .outbox-reject-form .reject-reason-input {
    width: 100%;
    min-height: 2.75rem;
  }

  .outbox-reject-form .btn {
    width: 100%;
    justify-content: center;
  }

  .action-toolbar-primary .btn {
    width: 100%;
    justify-content: center;
    min-height: 3rem;
    font-size: 1rem;
  }

  .batch-approve-panel,
  .batch-precheck-summary {
    padding: 0.85rem;
  }

  .batch-precheck-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .batch-interval-inputs {
    flex-wrap: wrap;
    margin-left: 0;
  }

  .card-footer-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .key-create-form .form-actions .btn {
    width: 100%;
  }

  .token-box {
    font-size: 0.75rem;
  }

  .agent-bundle-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .agent-bundle-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .card .scope-desc,
  .card p.muted {
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .card code {
    word-break: break-all;
  }

  /* Messaging responsive: send quota stats wrap */
  .send-quota-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }

  /* Messaging responsive: batch progress header */
  .batch-progress-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .batch-progress-header .btn {
    width: 100%;
    justify-content: center;
  }

  /* Messaging responsive: email preview header */
  .email-preview-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .email-preview-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* Messaging responsive: reply thread message header */
  .reply-thread-message-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .reply-thread-body {
    max-height: 12rem;
  }

  /* Messaging responsive: from-approver form */
  .from-approver-form.form-grid {
    grid-template-columns: 1fr;
  }

  /* Messaging responsive: outbox row touch targets */
  .outbox-row-link {
    padding: 0.85rem 0.75rem;
    min-height: 44px;
  }

  /* Messaging responsive: agent keys table - hide Created column */
  .data-table-agent-keys .col-created {
    display: none;
  }

  .table-scroll .data-table.data-table-agent-keys {
    min-width: 100%;
  }
}

/* Desktop wide: outbox and messaging improvements */
@media (min-width: 1200px) {
  .outbox-split {
    grid-template-columns: minmax(280px, 380px) 1fr;
  }

  .outbox-detail-panel .email-preview-body {
    max-width: 52rem;
  }
}

.posts-scroll-hint {
  display: none;
}

.posts-table .th-short {
  display: none;
}

@media (orientation: portrait) and (max-width: 720px),
(max-width: 640px) {
  .posts-page .posts-scroll-hint {
    display: block;
    margin: 0;
    padding: 0.55rem 0.85rem 0;
    font-size: 0.75rem;
  }

  .posts-page .card-table {
    overflow: hidden;
  }

  .posts-page .posts-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    margin-top: 0;
    border: none;
    border-radius: 0;
    scrollbar-width: thin;
  }

  .posts-page .posts-table {
    min-width: 42rem;
    width: max-content;
    table-layout: auto;
  }

  .posts-page .posts-table th.posts-col-account,
  .posts-page .posts-table td.posts-col-account,
  .posts-page .posts-table th.posts-col-format,
  .posts-page .posts-table td.posts-col-format {
    display: none;
  }

  .posts-page .posts-meta-portrait {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
  }

  .posts-page .posts-meta-portrait .post-account-primary {
    font-size: 0.75rem;
  }

  .posts-page .posts-table .th-full {
    display: none;
  }

  .posts-page .posts-table .th-short {
    display: inline;
  }

  .posts-page .posts-table th:first-child,
  .posts-page .posts-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }

  .posts-page .posts-table th:first-child {
    background: var(--table-header-bg, var(--bg));
    z-index: 3;
  }

  .posts-page .posts-col-published {
    min-width: 3.6rem;
    max-width: 4rem;
    padding-left: 0.65rem;
    padding-right: 0.4rem;
  }

  .posts-page .posts-col-text {
    min-width: 11rem;
    max-width: 14rem;
  }

  .posts-page .post-text-cell {
    max-width: 14rem;
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .posts-page .posts-col-media {
    min-width: 3.75rem;
  }

  .posts-page .post-media-strip {
    max-width: 7rem;
    flex-wrap: nowrap;
    gap: 0.2rem;
  }

  .posts-page .post-media-preview {
    width: 44px;
    height: 44px;
  }

  .posts-page .posts-col-likes,
  .posts-page .posts-col-reposts,
  .posts-page .posts-col-replies {
    min-width: 2.75rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  .posts-page .posts-col-source {
    min-width: 4.25rem;
    padding-right: 0.75rem;
  }

  .posts-page .posts-table th.posts-col-published,
  .posts-page .posts-table th.posts-col-likes,
  .posts-page .posts-table th.posts-col-reposts,
  .posts-page .posts-table th.posts-col-replies,
  .posts-page .posts-table th.posts-col-media,
  .posts-page .posts-table th.posts-col-text,
  .posts-page .posts-table th.posts-col-source {
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .posts-page .posts-summary {
    padding: 0 0.15rem;
  }

  .posts-page > .pagination {
    margin-top: 0.25rem;
  }
}

/* ── Org member selectable list (user invite form) ── */

.org-member-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.875rem;
}

.org-member-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}

.org-member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.org-member-item {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.org-member-item:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.org-member-item.selected {
  border-color: var(--accent);
  background: var(--accent-strong);
  color: var(--accent);
  font-weight: 500;
}

.org-member-login {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}

/* ── Unified product badges (YouTube Reviews + gateway-wide) ── */

.product-badge {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
.product-minikvm { background: #dbeafe; color: #1e40af; }
.product-keymod { background: #fef3c7; color: #92400e; }
.product-kvmgo { background: #d1fae5; color: #065f46; }
.product-uconsolekvmext { background: #ede9fe; color: #5b21b6; }
.product-none { background: #f3f4f6; color: #6b7280; }

/* ── Pipeline Summary Bar (shared across influencer/talent pages) ── */
.pipeline-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.pipeline-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #374151);
  font-size: 0.85rem;
  transition: background 0.15s;
}
.pipeline-stat:hover { background: var(--bg-hover, #f3f4f6); }
.pipeline-stat.is-active { background: color-mix(in srgb, var(--status-color) 12%, transparent); font-weight: 600; }
.pipeline-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pipeline-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.pipeline-label { color: var(--text-muted, #6b7280); font-size: 0.8rem; }
.pipeline-clear { margin-left: auto; color: var(--text-muted, #6b7280); text-decoration: none; font-size: 0.85rem; padding: 0.35rem 0.5rem; }
.pipeline-clear:hover { color: var(--text, #374151); }

/* Pipeline card stage control (segmented back/forward buttons) */
.pipeline-stage-control {
  display: inline-flex;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 4px;
  overflow: hidden;
}
.pipeline-stage-control form {
  display: contents;
}
.pipeline-stage-btn {
  background: var(--bg-secondary, #f9fafb);
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pipeline-stage-btn:hover {
  background: var(--bg-hover, #f3f4f6);
  color: var(--text, #374151);
}
.pipeline-stage-btn + .pipeline-stage-btn {
  border-left: 1px solid var(--border-color, #e5e7eb);
}

/* ── Sortable Table Headers (shared across all list pages) ── */
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
th.sortable a:hover {
  color: var(--link-hover, #2563eb);
}
th.sortable.is-active {
  color: var(--link, #1d4ed8);
  font-weight: 600;
}
th.sortable .sort-indicator {
  font-size: 0.75em;
  opacity: 0.7;
  min-width: 0.7em;
  text-align: center;
}

/* ── Mail (Zoho) responsive pass ──
   Measured at 390x844 and 768x1024: the outbox list table, status pills,
   pagination, address chips, email preview and batch pre-check panel either
   overflowed their container or rendered controls too small to tap. Kept
   after the platform-wide mobile pass so these rules win ties. */

/* Auto table layout let the nowrap To/Subject cells push the list table to
   ~1100px inside a 316px panel, where overflow:hidden clipped it. Fixed
   layout shares the panel width so the existing ellipsis can kick in. */
.outbox-list-table {
  table-layout: fixed;
}

.outbox-list-table thead th:nth-last-child(3) {
  width: 33%;
}

.outbox-list-table thead th:last-child {
  width: 5.5rem;
}

/* A long address grew its chip past the field and clipped the remove button. */
.cc-tag {
  max-width: 100%;
  min-width: 0;
}

.cc-tag-edit {
  overflow-wrap: anywhere;
}

.cc-tag-remove {
  flex-shrink: 0;
}

.cc-tag-input,
.cc-tag-input-chips {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 860px) {
  /* The first row is auto-selected on load. On a narrow screen that must not
     hide the list: "Back to list" reloads the same auto-selected URL, so the
     rows, their checkboxes and the pagination would be unreachable. */
  .outbox-split.outbox-auto-selection .outbox-list-panel {
    display: flex;
  }

  .outbox-split.outbox-auto-selection .outbox-detail-panel {
    display: none;
  }

  /* The pill strip scrolled sideways with no affordance, which could hide the
     active filter off-screen; wrap it instead. */
  .outbox-toolbar .filter-bar-scroll {
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }

  .outbox-toolbar .filter-bar-scroll .filter-bar {
    flex-wrap: wrap;
    width: auto;
    min-width: 0;
  }

  /* Keep both buttons and the whole "Page N of M · X total" line readable. */
  .outbox-pagination {
    flex-wrap: wrap;
  }

  .outbox-pagination-status {
    flex: 1 0 100%;
    order: 3;
    white-space: normal;
  }

  /* Message bodies are third-party HTML: long URLs and <pre> blocks must
     break or scroll inside the preview instead of stretching it. */
  .email-preview-body {
    overflow-wrap: anywhere;
  }

  .email-preview-body pre {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Tap targets: these clusters rendered 20-29px tall on tablets. */
  .outbox-signature-toggle-btn,
  .outbox-body-mode-btn,
  .outbox-format-option,
  .outbox-pagination-btn,
  .action-toolbar .btn,
  .batch-toolbar .btn,
  .batch-form-actions .btn {
    min-height: 2.75rem;
  }

  /* The pre-check panel lists every selected row; uncapped it grew past
     3900px and buried the submit button five screens below its opener. */
  .batch-precheck-summary {
    max-height: 60vh;
    overflow: auto;
  }

  .batch-precheck-table {
    table-layout: fixed;
  }

  .batch-precheck-table th:first-child,
  .batch-precheck-table td:first-child {
    width: 40%;
  }

  .batch-precheck-table th,
  .batch-precheck-table td {
    overflow-wrap: anywhere;
  }

  .batch-precheck-table thead th {
    position: sticky;
    top: 0;
    background: var(--table-header-bg, var(--bg));
  }
}

@media (max-width: 520px) {
  /* Rows re-flow to two lines here, so the three column labels no longer sit
     above anything they describe. */
  .outbox-list-table thead {
    display: none;
  }

  .batch-precheck-table th:first-child,
  .batch-precheck-table td:first-child {
    width: 44%;
  }
}

/* ===================================================================
   Dashboard — operations overview
   =================================================================== */

/* --- Quick stats bar --- */
.dash-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.dash-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  flex: 1;
}

a.dash-stat-pill:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-focus-ring);
  text-decoration: none;
}

.dash-stat-pill--quota {
  cursor: default;
}

.dash-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dash-stat-dim {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85em;
}

.dash-stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
  text-align: center;
}

/* --- Module cards grid --- */
.dash-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .dash-modules-grid {
    grid-template-columns: 1fr;
  }
}

.dash-module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-card, none);
}

.dash-module-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dash-module-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.dash-module-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.dash-module-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dash-module-metric {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border-radius: 8px;
  flex: 1;
  min-width: 80px;
}

.dash-metric-val {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dash-metric-dim {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8em;
}

.dash-metric-lbl {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.15rem;
}

.dash-module-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* --- Agent bundle compact bar --- */
.dash-bundle-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card, none);
}

.dash-bundle-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.dash-bundle-desc {
  font-size: 0.75rem;
  color: var(--muted);
  flex: 1;
  min-width: 120px;
}

.dash-bundle-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .dash-module-card {
    padding: 1rem;
  }

  .dash-module-metrics {
    gap: 0.4rem;
  }

  .dash-module-metric {
    padding: 0.4rem 0.6rem;
  }

  .dash-module-links {
    gap: 0.4rem;
  }

  .dash-module-links .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .dash-stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .dash-stat-pill {
    min-width: 0;
    padding: 0.5rem 0.75rem;
  }

  .dash-stat-value {
    font-size: 1.1rem;
  }

  .dash-module-card {
    padding: 0.85rem;
    gap: 0.75rem;
  }

  .dash-bundle-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-bundle-desc {
    display: none;
  }

  .dash-bundle-actions {
    width: 100%;
  }

  .dash-bundle-actions .btn {
    flex: 1;
    text-align: center;
  }
}

/* Global toast notification */
.copy-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  background: #1e293b;
  color: #f1f5f9;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 9999;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
  white-space: nowrap;
}
.copy-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Global purpose tooltip */
.purpose-tip {
  position: fixed;
  background: #1e293b;
  color: #f1f5f9;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.5;
  z-index: 9999;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  white-space: normal;
}
.purpose-tip.show {
  opacity: 1;
  visibility: visible;
}

/* ── ERP Catalog ─────────────────────────────────────────────────
   Catalog lists run up to ten columns and the GDS pages carry image
   assets, so the section needs its own thumbnail, truncation and
   column-pruning rules on top of the shared .table-scroll pattern. */

.col-thumb {
  width: 5rem;
}

/* Keep SKU and Barcode codes on a single line so they never wrap. */
.data-table-skus th:nth-child(2),
.data-table-skus td:nth-child(2),
.data-table-skus th:nth-child(3),
.data-table-skus td:nth-child(3) {
  white-space: nowrap;
}

.erp-thumb,
.erp-thumb-empty {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 4px;
}

.erp-thumb {
  display: block;
  object-fit: cover;
  border: 1px solid var(--border-muted);
  background: var(--surface);
}

/* Present on every image row but revealed only by the no-image branch or by
   the broken-image swap below, so it starts out hidden. */
.erp-thumb-empty {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.erp-thumb-empty.is-shown {
  display: flex;
}

/* A stored image path can outlive its file: GDS artwork is synced from an
   external registry and served out of a directory that production fronts with
   an nginx alias, so a stale path 404s. Swap in the placeholder rather than
   leaving the browser's broken-image glyph in the row. These rules own a
   display declaration, which outranks the UA [hidden] rule, so the swap is
   driven by a class instead of the hidden attribute. */
.erp-thumb.is-broken {
  display: none;
}

.brand-logo-thumb {
  max-width: 3rem;
  max-height: 2rem;
  object-fit: contain;
  border-radius: 4px;
  vertical-align: middle;
}

/* A long product name or GDS category must not stretch the table past
   the viewport on a landscape monitor; the full value stays in title. */
.cell-ellipsis {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same truncation for a value nested inside a cell. A <td> is already a block
   container so .cell-ellipsis works on it directly, but a <small> or <span>
   inside one needs display:block before max-width and text-overflow apply. */
.cell-ellipsis-line {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Search field spans the filter grid but stays readable on wide screens. */
.filter-row-search {
  max-width: 20rem;
}

/* GDS coverage stats */
.gds-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 1rem;
}

.gds-stat {
  min-width: 0;
}

.gds-stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.gds-stat-value--accent { color: var(--accent); }
.gds-stat-value--success { color: var(--success); }
.gds-stat-value--warning { color: var(--warning-text); }

.gds-stat-value--batch {
  font-size: 1.2rem;
}

/* GDS registration detail */
.gds-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Stacked rather than side by side: this card sits in a half-width slot of
   .gds-detail-grid on landscape monitors, where a 300px figure beside the
   metadata leaves no room for the action buttons, and the old fixed-width
   non-shrinking figure overflowed a phone viewport outright. */
.gds-image-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.gds-image-figure {
  width: 100%;
  max-width: 18.75rem;
  min-width: 0;
}

.gds-image-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 18.75rem;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  background: var(--surface);
}

.gds-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 3rem;
}

.gds-image-placeholder.is-shown {
  display: flex;
}

/* See .erp-thumb.is-broken: same 404 fallback for the full-size image. */
.gds-image-figure img.is-broken {
  display: none;
}

.gds-image-body {
  flex: 1 1 0;
  min-width: 0;
}

.gds-image-field {
  margin-bottom: 1rem;
}

.gds-image-field label {
  margin-bottom: 0.2rem;
}

.gds-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0.75rem;
}

.gds-image-input {
  display: none;
}

.gds-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.gds-field-grid > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gds-field-grid label {
  margin-bottom: 0.15rem;
}

/* Channel associations: the mapping select lists every SKU, so its width
   has to be set explicitly or the widest option dictates the column. */
.assoc-map-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.assoc-map-form select {
  flex: 1 1 auto;
  width: 12rem;
  min-width: 0;
  max-width: 100%;
}

/* Brand logo assets */
.brand-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.logo-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.logo-preview-box {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
}

.logo-preview-box.bg-light {
  background: var(--surface);
  border: 1px solid var(--border-muted);
}

.logo-preview-box.bg-dark {
  background: #1f2937;
  border: 1px solid #374151;
}

.logo-preview-box img {
  max-width: 100%;
  max-height: 5rem;
  object-fit: contain;
}

/* Logos can be pasted in as an external URL, so the stored reference can die
   independently of the brand record. Same swap as .erp-thumb.is-broken. */
.logo-preview-box img.is-broken {
  display: none;
}

.logo-empty {
  display: none;
  font-size: 0.8rem;
  text-align: center;
  color: var(--muted);
}

.logo-empty.is-shown {
  display: block;
}

.logo-empty .bi {
  display: block;
  font-size: 2rem;
}

.logo-preview-box.bg-dark .logo-empty {
  color: #9ca3af;
}

.logo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.logo-upload-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.logo-upload-form label {
  margin-bottom: 0;
}

.logo-url-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* flex-basis alone is not enough: an input's automatic minimum size is
   its default size attribute, which overflows a narrow logo card. */
.logo-url-row input {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

/* The barcode links a SKU to its GDS registration, so the field is readonly
   and should read as locked rather than merely empty. */
.admin-form input.input-locked {
  background-color: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}

@media (min-width: 992px) {
  .gds-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .cell-ellipsis,
  .cell-ellipsis-line {
    max-width: 12rem;
  }
}

@media (max-width: 720px) {
  /* The bubble hangs off an icon at the right edge of a page title, so an
     absolutely positioned tooltip runs past the viewport. Pin it to the
     bottom of the screen instead, and reveal it on tap since touch has no
     hover. Matches the fixed .purpose-tip / .copy-toast pattern. */
  .info-icon::after {
    position: fixed;
    top: auto;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
  }

  .info-icon:active::after {
    opacity: 1;
  }
}

/* Prune the columns that carry the least decision value first, so the
   sticky leading column and the row action stay reachable. */
@media (max-width: 640px) {
  .data-table-skus th:nth-child(6),
  .data-table-skus td:nth-child(6),
  .data-table-skus th:nth-child(8),
  .data-table-skus td:nth-child(8) {
    display: none;
  }

  .data-table-gds th:nth-child(7),
  .data-table-gds td:nth-child(7),
  .data-table-gds th:nth-child(9),
  .data-table-gds td:nth-child(9) {
    display: none;
  }

  .data-table-assoc-health th:nth-child(3),
  .data-table-assoc-health td:nth-child(3),
  .data-table-assoc-health th:nth-child(4),
  .data-table-assoc-health td:nth-child(4),
  .data-table-assoc-health th:nth-child(6),
  .data-table-assoc-health td:nth-child(6) {
    display: none;
  }

  /* Cartons: hide Name (ZH), Inner dimensions, Tare — least decision value */
  .data-table-cartons th:nth-child(3),
  .data-table-cartons td:nth-child(3),
  .data-table-cartons th:nth-child(5),
  .data-table-cartons td:nth-child(5),
  .data-table-cartons th:nth-child(7),
  .data-table-cartons td:nth-child(7) {
    display: none;
  }

  .cell-ellipsis,
  .cell-ellipsis-line {
    max-width: 10rem;
  }
}

@media (max-width: 480px) {
  .filter-row-search {
    max-width: none;
  }

  .activity-filters input[type="file"] {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
  }

  .gds-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .gds-stat-value {
    font-size: 1.5rem;
  }

  .gds-stat-value--batch {
    font-size: 1rem;
  }

  .gds-field-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .gds-image-actions .btn {
    flex: 1 1 auto;
  }

  .data-table-skus th:nth-child(3),
  .data-table-skus td:nth-child(3),
  .data-table-skus th:nth-child(5),
  .data-table-skus td:nth-child(5),
  .data-table-skus th:nth-child(7),
  .data-table-skus td:nth-child(7) {
    display: none;
  }

  .data-table-gds th:nth-child(3),
  .data-table-gds td:nth-child(3),
  .data-table-gds th:nth-child(5),
  .data-table-gds td:nth-child(5),
  .data-table-gds th:nth-child(8),
  .data-table-gds td:nth-child(8) {
    display: none;
  }

  .data-table-assoc-health th:nth-child(5),
  .data-table-assoc-health td:nth-child(5) {
    display: none;
  }

  .data-table-assoc th:nth-child(3),
  .data-table-assoc td:nth-child(3),
  .data-table-assoc th:nth-child(6),
  .data-table-assoc td:nth-child(6) {
    display: none;
  }

  .data-table-products th:nth-child(3),
  .data-table-products td:nth-child(3),
  .data-table-products th:nth-child(5),
  .data-table-products td:nth-child(5) {
    display: none;
  }

  .data-table-families th:nth-child(4),
  .data-table-families td:nth-child(4),
  .data-table-families th:nth-child(6),
  .data-table-families td:nth-child(6) {
    display: none;
  }

  .data-table-brands th:nth-child(4),
  .data-table-brands td:nth-child(4),
  .data-table-brands th:nth-child(6),
  .data-table-brands td:nth-child(6) {
    display: none;
  }

  /* Cartons: also hide Max Weight on very small screens */
  .data-table-cartons th:nth-child(6),
  .data-table-cartons td:nth-child(6) {
    display: none;
  }

  /* Once the low-value columns are gone the survivors fit, so release the
     shared floor that would otherwise force a horizontal scroll. */
  .table-scroll .data-table.data-table-skus,
  .table-scroll .data-table.data-table-gds,
  .table-scroll .data-table.data-table-assoc,
  .table-scroll .data-table.data-table-assoc-health,
  .table-scroll .data-table.data-table-products,
  .table-scroll .data-table.data-table-families,
  .table-scroll .data-table.data-table-brands,
  .table-scroll .data-table.data-table-cartons {
    min-width: 100%;
  }

  .col-thumb {
    width: 4rem;
  }

  .erp-thumb,
  .erp-thumb-empty {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
  }

  .cell-ellipsis,
  .cell-ellipsis-line {
    max-width: 9rem;
  }

  .assoc-map-form {
    flex-wrap: wrap;
  }

  .assoc-map-form select,
  .assoc-map-form .btn {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .pagination--center {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .pagination--center .scope-desc,
  .pagination--center .page-info {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .logo-url-row {
    flex-wrap: wrap;
  }

  .logo-url-row input {
    flex: 1 1 100%;
  }

  .logo-url-row .btn {
    flex: 1 1 auto;
  }
}

/* ── Gateway ─────────────────────────────────────────────────────
   Agent keys, Cloudflare connections, the proposal queue and the API
   activity log. These pages carried their own <style> blocks plus a
   set of class names the stylesheet never defined, so the rules live
   here and the templates use the shared design system. */

/* .btn already renders as the primary variant; the explicit name keeps
   templates that pair btn-primary with btn-secondary readable. */
.btn-primary {
  background: var(--btn-primary-bg, #388bfd);
  border-color: transparent;
  color: var(--btn-primary-fg, #ffffff);
}

.btn-primary:hover {
  background: var(--btn-primary-hover, #58a6ff);
  border-color: transparent;
  color: var(--btn-primary-fg, #ffffff);
}

/* Approving a proposal executes a write against the upstream API, so it
   gets the success colour rather than the same blue as a plain action. */
.btn-success {
  background: var(--btn-success-bg, #238636);
  border-color: var(--btn-success-border, #2ea043);
  color: var(--btn-success-fg, #ffffff);
}

.btn-success:hover {
  background: var(--btn-success-hover, #2ea043);
  border-color: var(--btn-success-border, #2ea043);
  color: var(--btn-success-fg, #ffffff);
}

/* A proposal row expands into a second <tr> holding the raw JSON body,
   and an activity row expands into its redacted request summary. Both
   can be arbitrarily wide, so they scroll inside the cell instead of
   stretching the table past the viewport. */
.proposal-body,
.event-summary {
  max-height: 18rem;
  margin: 0.35rem 0 0.5rem;
  padding: 0.65rem 0.75rem;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.proposal-detail-row td {
  padding-top: 0;
  border-top: none;
}

/* A colspan="9" cell is both first- and last-child of its row, so the generic
   sticky leading column that .table-scroll applies to every data table pins it
   too. It cannot actually hold a position — sticky is bounded by its containing
   block, and the cell is exactly as wide as the row — so measuring before and
   after a 300px scroll gave the same -187px/-132px travel either way. The one
   visible effect was the 1px divider the sticky rule paints down its left edge,
   marking a full-width block as though it were a pinned identifier column.
   Specificity matches the .table-scroll rule it overrides and wins on order. */
.table-scroll .data-table-proposals .proposal-detail-row > td {
  position: static;
  box-shadow: none;
}

.proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Approve and Reject are the entire point of this queue, but they sit in the
   last column of a nine-column table that measures 1.26x its container on a
   1440px monitor, so the reviewer had to scroll right on every row before
   acting on it. Mirrors the sticky leading column .table-scroll applies. The
   colspan cell of a .proposal-detail-row is excluded: it spans the whole
   table and must scroll with the request body it carries. */
.data-table-proposals tr:not(.proposal-detail-row) > th:last-child,
.data-table-proposals tr:not(.proposal-detail-row) > td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: -1px 0 0 var(--border);
}

.data-table-proposals tr:not(.proposal-detail-row) > th:last-child {
  background: var(--table-header-bg, var(--bg));
}

.reject-reason {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* Collapsible raw-config preview on the agent key detail page. The old inline
   version keyed off --color-bg-subtle, which no theme defines, so it always
   fell back to a hardcoded light grey. */
.config-preview {
  max-height: 24rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.5;
}

.config-preview-toggle {
  cursor: pointer;
  font-weight: 500;
}

/* Separates the two previews below the download bar without an inline margin. */
.config-block {
  margin-top: 1rem;
}

/* An API route in an audit cell has no spaces to wrap on, so break it
   mid-token rather than letting it widen the column. */
.cell-break {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}

/* A route path has no spaces, so without nowrap the ellipsis never
   triggers and the cell grows to the full length of the URL. 16rem is the
   widest that still lets the Cloudflare activity table fit the 942px a
   1440px monitor leaves for content; the full path stays in the title. */
.route-code {
  display: inline-block;
  max-width: 16rem;
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* One checkbox per scope. Stacked rather than multi-column so a scope id
   stays paired with its label when the label wraps at phone width. */
.scope-checkbox-label {
  display: block;
  margin: 0.25rem 0;
  cursor: pointer;
}

.scope-checkbox-label code {
  margin-right: 0.25rem;
  font-size: 0.85em;
}

/* The scope picker for one application; JS reveals it by dropping the
   hidden attribute, which works because no rule below sets display. */
.grant-scope-group {
  max-height: 16rem;
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* One grant inside the create-key form. A bordered panel rather than a .card,
   because the form itself already sits in a card and nesting them doubles the
   padding and the border radius. */
.grant-panel {
  padding: 1rem;
  margin: 0 0 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.grant-panel .form-field + .form-field {
  margin-top: 0.85rem;
}

/* The create-key form keeps its own heading: .card h2 would render it
   uppercase and muted, which reads as a section label, not a step. */
.grant-section-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

/* Drill-in links at the top of the API activity page. */
.activity-app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Rendered from API_GOVERNANCE.md by marked at page load, so the markup
   cannot be given a .table-scroll wrapper: the table becomes its own
   scroll box instead. */
.governance-content {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
}

.governance-content h1,
.governance-content h2,
.governance-content h3 {
  margin: 1.5rem 0 0.75rem;
  font-weight: 600;
}

.governance-content h1 {
  font-size: 1.4rem;
}

.governance-content h2 {
  font-size: 1.2rem;
}

.governance-content h3 {
  font-size: 1.05rem;
}

.governance-content h1:first-child,
.governance-content h2:first-child,
.governance-content h3:first-child {
  margin-top: 0;
}

.governance-content p,
.governance-content ul,
.governance-content ol {
  margin: 0 0 1rem;
}

.governance-content ul,
.governance-content ol {
  padding-left: 1.5rem;
}

.governance-content li {
  margin-bottom: 0.35rem;
}

.governance-content code {
  padding: 0.15rem 0.4rem;
  background: var(--bg);
  border-radius: 4px;
  font-size: 0.85em;
  word-break: break-word;
}

.governance-content pre {
  margin-bottom: 1rem;
  padding: 1rem;
  overflow-x: auto;
  background: var(--bg);
  border-radius: 8px;
}

.governance-content pre code {
  padding: 0;
  background: none;
}

.governance-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  overflow-x: auto;
  border-collapse: collapse;
}

.governance-content th,
.governance-content td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
}

.governance-content th {
  background: var(--bg);
  font-weight: 600;
}

@media (max-width: 900px) {
  .route-code {
    max-width: 14rem;
  }

  /* Profile is the mailbox axis and reads "—" for nearly every agent-key
     call; latency is a desktop diagnostic. Dropping both leaves the six
     columns that answer who called what, when, and with what result, and
     brings the table inside the 32rem floor the phone breakpoint applies. */
  .activity-table th:nth-child(3),
  .activity-table td:nth-child(3),
  .activity-table th:nth-child(7),
  .activity-table td:nth-child(7) {
    display: none;
  }
}

@media (max-width: 640px) {
  .route-code {
    max-width: 10rem;
  }

  /* Approve and Reject sit in the last column of a nine-column table;
     letting them share the row keeps the action reachable without
     scrolling the table first. */
  .proposal-actions .btn {
    flex: 1 1 auto;
  }

  .grant-scope-group {
    max-height: 12rem;
  }

  /* A bare <summary> is only as tall as its line box — 20px measured, well
     short of a thumb target. These four toggles are the only way to reach a
     proposal's request body, its upstream response and an audit event's
     detail, so give them real height. Padding rather than min-height keeps
     the disclosure marker vertically centred against the text. */
  .config-preview-toggle {
    padding: 0.6rem 0;
  }

  /* Prune the columns that carry the least decision value first, so the
     sticky leading column and the row action stay reachable. Connection,
     agent key and safeguard rule are all repeated inside the expandable
     request body, so hiding them costs nothing the reviewer cannot open. */
  .data-table-proposals th:nth-child(4),
  .data-table-proposals tr:not(.proposal-detail-row) > td:nth-child(4),
  .data-table-proposals th:nth-child(5),
  .data-table-proposals tr:not(.proposal-detail-row) > td:nth-child(5),
  .data-table-proposals th:nth-child(6),
  .data-table-proposals tr:not(.proposal-detail-row) > td:nth-child(6) {
    display: none;
  }

  .data-table-cf-activity th:nth-child(5),
  .data-table-cf-activity td:nth-child(5),
  .data-table-cf-activity th:nth-child(7),
  .data-table-cf-activity td:nth-child(7) {
    display: none;
  }

  .data-table-connections th:nth-child(2),
  .data-table-connections td:nth-child(2),
  .data-table-connections th:nth-child(5),
  .data-table-connections td:nth-child(5) {
    display: none;
  }

  /* Issued date and rate limit are both on the detail page; neither changes
     the decision to disable or delete a key from the list. */
  .data-table-keys th:nth-child(5),
  .data-table-keys td:nth-child(5) {
    display: none;
  }

  .data-table-conn-keys th:nth-child(4),
  .data-table-conn-keys td:nth-child(4) {
    display: none;
  }
}

@media (max-width: 480px) {
  .data-table-proposals th:nth-child(1),
  .data-table-proposals tr:not(.proposal-detail-row) > td:nth-child(1),
  .data-table-proposals th:nth-child(8),
  .data-table-proposals tr:not(.proposal-detail-row) > td:nth-child(8) {
    display: none;
  }

  .data-table-cf-activity th:nth-child(6),
  .data-table-cf-activity td:nth-child(6) {
    display: none;
  }

  .data-table-connections th:nth-child(3),
  .data-table-connections td:nth-child(3) {
    display: none;
  }

  .data-table-key-activity th:nth-child(5),
  .data-table-key-activity td:nth-child(5) {
    display: none;
  }

  /* The label restates the scope id in prose and the description already
     explains it, so the id plus description is the readable pair. */
  .data-table-scopes th:nth-child(2),
  .data-table-scopes td:nth-child(2) {
    display: none;
  }

  .data-table-conn-keys th:nth-child(2),
  .data-table-conn-keys td:nth-child(2),
  .data-table-conn-keys th:nth-child(6),
  .data-table-conn-keys td:nth-child(6) {
    display: none;
  }

  /* A scope chip cannot break, so the Scopes column has an irreducible
     floor of one full scope id. The profile or connection a grant points
     at is the column that can go; it is on the grant form and on the
     target's own page. */
  .data-table-key-grants th:nth-child(2),
  .data-table-key-grants td:nth-child(2) {
    display: none;
  }

  /* Once the low-value columns are gone the survivors fit, so release the
     shared floor that would otherwise force a horizontal scroll. */
  .table-scroll .data-table.data-table-proposals,
  .table-scroll .data-table.data-table-cf-activity,
  .table-scroll .data-table.data-table-connections,
  .table-scroll .data-table.data-table-key-activity,
  .table-scroll .data-table.data-table-keys,
  .table-scroll .data-table.data-table-scopes,
  .table-scroll .data-table.data-table-conn-keys,
  .table-scroll .data-table.data-table-key-grants {
    min-width: 100%;
  }

  /* The route is the one column that cannot be dropped, so let it wrap
     mid-token instead of holding the table open. It still needs a floor:
     its min-content width is a single character, and auto table layout
     handed it 28px, which stacked a 50-character path into eighteen lines
     and made the row 361px tall. */
  .route-code {
    min-width: 8rem;
    max-width: none;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    word-break: break-all;
    /* Two lines of a broken path is enough to tell routes apart; the full
       value stays in the title and, on the activity log, in the expandable
       request summary. Unclamped, a 50-character route ran to seven lines
       and made every row 150px tall. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .data-table-key-activity .cell-break {
    min-width: 8rem;
  }

  /* Badges and timestamps are nowrap, which makes them the columns that
     decide how wide a pruned table still is. Two short lines cost less
     than scrolling past them. */
  .data-table-proposals .badge,
  .data-table-cf-activity .badge,
  .data-table-cf-activity td.nowrap,
  .data-table-key-activity td.nowrap,
  .data-table-key-grants .status-badge,
  .data-table-keys .status-badge,
  .activity-table td.nowrap {
    white-space: normal;
  }

  /* Two submit buttons held on one nowrap line decide this column's width.
     Stacked, they are also far easier to hit with a thumb. */
  .data-table-key-grants td.nowrap {
    white-space: normal;
  }

  .data-table-key-grants td.nowrap .inline-form {
    display: block;
  }

  .data-table-key-grants td.nowrap .btn-small {
    width: 100%;
    justify-content: center;
  }

  /* The prefix is a truncated hint whose only job is matching a row to
     a key found in a config file or a leak report — desktop work, and it is
     on the detail page and in the JSON export. Dropping it takes the list
     from 1.64x to 1.37x of the phone viewport. */
  .data-table-keys th:nth-child(3),
  .data-table-keys td:nth-child(3) {
    display: none;
  }

  /* Stacking four row actions made every key row 211px tall, so a phone
     showed three keys per screen. Two by two keeps every target well above
     44px and halves the height. */
  .data-table-keys .table-action-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
  }
}
/* ═══════════════════════════════════════════════════════════
   Global responsive improvements for Marketing / Influencers
   ═══════════════════════════════════════════════════════════ */

/* ── Landscape monitor (≥ 1200px): comfortable spacing ── */
@media (min-width: 1200px) {
  .admin-main {
    padding: 1.5rem 2rem 2rem;
  }
  .page-header {
    gap: 1.25rem;
  }
  .data-table th,
  .data-table td {
    padding: 0.55rem 0.75rem;
  }
}

/* ── Tablet (≤ 860px): moderate column hiding ── */
@media (max-width: 860px) {
  .admin-main {
    padding: 1rem 1rem 1.5rem;
  }
  .page-header-flush {
    margin-bottom: 0;
  }
}

/* ── Mobile (≤ 640px): compact single-column layouts ── */
@media (max-width: 640px) {
  .admin-main {
    padding: 0.75rem 0.75rem 1.25rem;
  }
  .admin-page-title {
    font-size: 1.15rem;
  }
  .page-header {
    gap: 0.6rem;
  }
  .page-header-main {
    min-width: 0;
  }
  .card {
    padding: 0.85rem;
  }
  .scope-desc {
    font-size: 0.82rem;
    line-height: 1.5;
  }
  /* Status badges and entity badges: slightly smaller */
  .status-badge,
  .entity-badge {
    font-size: 0.68rem;
    padding: 0.15em 0.4em;
  }
  /* Table scroll: reduce min-width for influencer tables */
  .table-scroll .data-table {
    min-width: 30rem;
  }
}

/* ── Small phone (≤ 420px): tightest layout ── */
@media (max-width: 420px) {
  .admin-page-title {
    font-size: 1.05rem;
  }
  .card {
    padding: 0.7rem;
    border-radius: 8px;
  }
  .btn {
    font-size: 0.82rem;
    padding: 0.4rem 0.65rem;
  }
  .btn-small {
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
  }
}

/* ── Bank brand icons ── */
.bank-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}
.bank-icon svg {
  display: block;
}
.bank-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Stale-account row highlights (bank accounts list) */
.data-table-compact tbody tr.row-stale-warn {
  background-color: #fff8e1;
}
.data-table-compact tbody tr.row-stale-alert {
  background-color: #fdecea;
}

/* ── Custom tooltips (system-wide, data-tooltip attribute) ── */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  min-width: 180px;
  max-width: 280px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 1000;
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 1001;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}
/* Position below if element is near top (e.g., table headers) */
th[data-tooltip]::after,
th[data-tooltip]::before {
  bottom: auto;
  top: calc(100% + 6px);
}
th[data-tooltip]::before {
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--text);
}
/* Disable tooltips when user preference is off */
body.no-tooltips [data-tooltip]::after,
body.no-tooltips [data-tooltip]::before {
  display: none !important;
}
body.no-tooltips [data-tooltip] {
  cursor: inherit;
}

/* ── Tooltip toggle switch (sidebar bottom) ─ */
.admin-nav-tooltip-toggle {
  margin-top: auto;
  padding: 12px 4px 4px;
  flex-shrink: 0;
}
.admin-nav-revision {
  padding: 8px 4px 0;
  color: #b3b8bf;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.admin-nav-revision-time {
  display: block;
  font-size: 9px;
  color: #7a7f85;
  font-family: ui-monospace, monospace;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

.tooltip-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  user-select: none;
  padding: 4px 4px;
  border-radius: 4px;
  transition: background 0.15s;
}
.tooltip-toggle-label:hover {
  background: var(--surface-hover);
}
.tooltip-toggle-input {
  display: none;
}
.tooltip-toggle-text {
  opacity: 0.6;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tooltip-toggle-switch {
  position: relative;
  width: 26px;
  height: 14px;
  background: var(--border);
  border-radius: 7px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.tooltip-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.tooltip-toggle-input:checked + .tooltip-toggle-text + .tooltip-toggle-switch {
  background: var(--accent);
}
.tooltip-toggle-input:checked + .tooltip-toggle-text + .tooltip-toggle-switch::after {
  transform: translateX(12px);
}
.tooltip-toggle-input:checked ~ .tooltip-toggle-text {
  opacity: 0.9;
}

/* ── Scroll container (hidden scrollbars, system-wide) ── */
.scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* ── Folder access panel (profile assignments) ── */
.folder-access-panel {
  margin: 0.5rem 0 0.25rem 1.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-muted, #d8dee4);
  border-radius: 6px;
  background: var(--bg, #f6f8fa);
  transition: max-height 0.2s ease, opacity 0.2s ease;
}
.folder-access-panel-hidden {
  display: none;
}
.folder-access-desc {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.folder-access-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #6e7781);
  font-style: italic;
}
.folder-access-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  max-height: 12rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.folder-access-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  padding: 0.15rem 0;
  white-space: nowrap;
  cursor: pointer;
}
.folder-access-item input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent, #0969da);
}
@media (max-width: 480px) {
  .folder-access-panel { margin-left: 0; }
  .folder-access-grid { gap: 0.1rem 0.5rem; }
  .folder-access-item { font-size: 0.75rem; }
}

/* ── Access settings tabs ── */
.access-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-muted, #d8dee4);
  margin-bottom: 1.25rem;
}
.access-tab-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted, #656d76);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.access-tab-btn:hover {
  color: var(--text, #1f2328);
}
.access-tab-active {
  color: var(--accent, #0969da);
  border-bottom-color: var(--accent, #0969da);
}
.access-tab-panel {
  display: none;
}
.access-tab-active {
  display: block;
}

/* ── Profile capabilities panel (wraps folder + mail caps) ── */
.profile-capabilities-panel {
  margin: 0.5rem 0 0.25rem 1.5rem;
  padding: 0;
}
.profile-capabilities-panel-hidden {
  display: none;
}

/* ── Mail capabilities sub-panel ── */
.mail-caps-panel {
  margin: 0.5rem 0 0.25rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-muted, #d8dee4);
  border-radius: 6px;
  background: var(--bg-subtle, #f0f3f6);
}
.mail-caps-desc {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #656d76);
}
.mail-caps-send {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
}
.mail-caps-send input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent, #0969da);
}
.mail-caps-from {
  margin-left: 1.25rem;
  transition: opacity 0.15s;
}
.mail-caps-from-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.mail-caps-from-label {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted, #656d76);
}
.mail-caps-from-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.mail-caps-from-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.mail-caps-from-item input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent, #0969da);
}
.mail-caps-from-item code {
  font-size: 0.78rem;
}
.mail-caps-from-hint {
  font-size: 0.78rem;
  margin: 0.2rem 0 0;
}
@media (max-width: 480px) {
  .mail-caps-panel { margin-left: 0; }
  .mail-caps-from-grid { gap: 0.15rem 0.5rem; }
}

/* ── Fulfillment pipeline visualization ── */
.fulfillment-pipeline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.5rem 0;
}
.fulfillment-pipeline-step {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.fulfillment-pipeline-step.is-done {
  color: var(--success);
}
.fulfillment-pipeline-step.is-current {
  color: var(--accent);
  font-weight: 600;
}
.fulfillment-pipeline-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  font-size: 0.65rem;
  border: 2px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.fulfillment-pipeline-step.is-done .fulfillment-pipeline-dot {
  border-color: var(--success);
  background: var(--success);
  color: white;
}
.fulfillment-pipeline-step.is-current .fulfillment-pipeline-dot {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}
.fulfillment-pipeline-connector {
  width: 1.2rem;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 0.1rem;
}
.fulfillment-pipeline-connector.is-done {
  background: var(--success);
}

/* ── Fulfillment status badge colors ── */
.status-received { border-color: var(--accent); color: var(--accent); }
.status-pricing_check { border-color: #0d6efd; color: #0d6efd; }
.status-pricing_warning { border-color: #d4a012; color: #d4a012; }
.status-production_review { border-color: #8b5cf6; color: #8b5cf6; }
.status-accepted { border-color: var(--success); color: var(--success); }
.status-shipping { border-color: #0891b2; color: #0891b2; }
.status-shipped { border-color: #059669; color: #059669; }
.status-invoiced { border-color: #7c3aed; color: #7c3aed; }
.status-completed { border-color: var(--success); color: var(--success); opacity: 0.8; }
.status-preparing { border-color: var(--accent); color: var(--accent); }
.status-packed { border-color: #0891b2; color: #0891b2; }
.status-dispatched { border-color: #059669; color: #059669; }
.status-in_transit { border-color: #0d6efd; color: #0d6efd; }
.status-arrived_port { border-color: #7c3aed; color: #7c3aed; }
.status-last_mile { border-color: #d97706; color: #d97706; }
.status-delivered { border-color: var(--success); color: var(--success); opacity: 0.8; }
.status-draft { border-color: var(--text-muted); color: var(--text-muted); }
.status-confirmed { border-color: var(--accent); color: var(--accent); }
.status-sent { border-color: #0891b2; color: #0891b2; }
.status-paid { border-color: var(--success); color: var(--success); }

/* ── Pricing check results panel ── */
.pricing-check-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}
.pricing-check-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.pricing-check-count {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.pricing-check-pass {
  border-color: var(--success);
  color: var(--success);
  background: rgba(14, 165, 68, 0.06);
}
.pricing-check-warn {
  border-color: #d4a012;
  color: #9a7800;
  background: rgba(212, 160, 18, 0.06);
}
.pricing-check-err {
  border-color: var(--error);
  color: var(--error);
  background: rgba(218, 54, 51, 0.06);
}
.pricing-check-warnings {
  font-size: 0.78rem;
  max-width: 20rem;
}
.pricing-check-warning {
  color: #9a7800;
  line-height: 1.3;
  padding: 0.1rem 0;
}

/* Pricing review card */
.pricing-review-card {
  border-left: 3px solid var(--accent);
}

/* Pricing status badges on line items */
.status-passed { border-color: var(--success); color: var(--success); }
.status-warning_qty { border-color: #d4a012; color: #9a7800; }
.status-warning_price { border-color: #d4a012; color: #9a7800; }
.status-warning_carton { border-color: #d97706; color: #9a7800; }
.status-no_policy { border-color: var(--text-muted); color: var(--text-muted); }

@media (max-width: 640px) {
  .fulfillment-pipeline {
    gap: 0.15rem;
  }
  .fulfillment-pipeline-step {
    font-size: 0.65rem;
  }
  .fulfillment-pipeline-connector {
    width: 0.6rem;
  }
  .pricing-check-summary {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ── Intelligence module responsive (influencer.mgmt sub-pages) ── */

/* Page intro with learn-more link */
.intel-page-intro {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
  line-height: 1.5;
}
.intel-page-intro .btn-xs {
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Shared layout classes for intelligence templates */
.intel-filter-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.intel-form-narrow {
  max-width: 800px;
}

.intel-field-group {
  margin-bottom: 1.5rem;
}

.intel-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.intel-label-sm {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.intel-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.intel-input-mono {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.875rem;
}

.intel-input-sm {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
}

.intel-input-w80 {
  width: 80px;
}

.intel-input-w100 {
  width: 100px;
}

.intel-input-w200 {
  width: 200px;
}

.intel-readonly-banner {
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.intel-text-muted {
  color: var(--text-muted);
}

.intel-two-col {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.intel-two-col > div {
  flex: 1;
}

.intel-form-actions {
  display: flex;
  gap: 0.5rem;
}

.intel-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

.intel-card-title {
  margin: 0 0 1rem;
}

.intel-card-title-sm {
  margin: 0 0 0.75rem;
}

.intel-card-title-xs {
  margin: 0 0 0.5rem;
}

.intel-card-mt {
  margin-top: 1rem;
}

.intel-body-text {
  margin: 0;
  line-height: 1.6;
}

.intel-obs-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.intel-obs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.intel-obs-text {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

.intel-quote {
  margin: 0.5rem 0 0;
  padding: 0.25rem 0.5rem;
  border-left: 2px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.intel-link-external {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.intel-link-sm {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.intel-suggestion-block {
  margin-bottom: 0.75rem;
}

.intel-suggestion-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.intel-suggestion-text {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

.intel-action-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.intel-btn-full {
  width: 100%;
}

.intel-btn-danger {
  color: var(--danger, #ef4444);
}

.intel-avatar-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.intel-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.intel-badge-sm {
  font-size: 0.75rem;
}

.intel-badge-xs {
  font-size: 0.7rem;
}

.intel-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.intel-list {
  margin: 0;
  padding-left: 1.5rem;
}

.intel-list-item {
  margin-bottom: 0.25rem;
}

.intel-transcript {
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.intel-action-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.intel-inline-form {
  display: inline;
}

.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.intel-monitor-form {
  display: flex;
  gap: 1rem;
  align-items: end;
  flex-wrap: wrap;
}

.obs-card {
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  border-left: 3px solid #94a3b8;
}

.obs-card--interest,
.obs-card--mention {
  border-left-color: #22c55e;
}

.obs-card--pain_point {
  border-left-color: #ef4444;
}

.obs-card--topic,
.obs-card--workflow {
  border-left-color: #3b82f6;
}

.obs-card--constraint {
  border-left-color: #f59e0b;
}

/* Tablet (≤ 860px): hide lower-priority columns */
@media (max-width: 860px) {
  #pk-table th:nth-child(3),
  #pk-table td:nth-child(3),
  #pk-table th:nth-child(4),
  #pk-table td:nth-child(4) {
    display: none;
  }
  #opp-table th:nth-child(4),
  #opp-table td:nth-child(4) {
    display: none;
  }
  #va-table th:nth-child(6),
  #va-table td:nth-child(6) {
    display: none;
  }
  #mon-table th:nth-child(6),
  #mon-table td:nth-child(6) {
    display: none;
  }
}

/* Mobile (≤ 640px): stack two-column layouts, hide more columns */
@media (max-width: 640px) {
  .intel-detail-grid {
    grid-template-columns: 1fr;
  }
  .intel-two-col {
    flex-direction: column;
  }
  .intel-monitor-form {
    flex-direction: column;
    align-items: stretch;
  }
  .intel-input-w80,
  .intel-input-w100,
  .intel-input-w200 {
    width: 100%;
  }
  #pk-table th:nth-child(5),
  #pk-table td:nth-child(7) {
    display: none;
  }
  #opp-table th:nth-child(6),
  #opp-table td:nth-child(6) {
    display: none;
  }
  #va-table th:nth-child(7),
  #va-table td:nth-child(7) {
    display: none;
  }
  #mon-table th:nth-child(4),
  #mon-table td:nth-child(4),
  #mon-table th:nth-child(5),
  #mon-table td:nth-child(5) {
    display: none;
  }
}

/* -----------------------------------------------------------------------
   Compose (New Mail) page
   ----------------------------------------------------------------------- */

.compose-page {
  width: 100%;
  max-width: 100rem;
  margin-inline: auto;
  container-type: inline-size;
  container-name: compose;
}

.compose-page-form {
  min-width: 0;
  margin-top: 0;
}

.compose-page-form .outbox-edit-fields,
.compose-envelope {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.compose-page-form .outbox-edit-label {
  min-width: 0;
}

.compose-page-form .outbox-edit-hint {
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-muted);
}

.compose-page-form .outbox-save-error:not([hidden]) {
  margin-bottom: 1rem;
}

.compose-page-form .outbox-edit-from-select {
  margin-bottom: 0;
}

.compose-page-form .outbox-edit-attachment-item code {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Use the available content width, including when the sidebar is expanded. */
@container compose (min-width: 64rem) {
  .compose-page-form .outbox-edit-fields {
    grid-template-columns: minmax(19rem, 1fr) minmax(0, 2.5fr);
    column-gap: 1.5rem;
  }

  .compose-page-form .outbox-body-editor {
    grid-column: 2;
    grid-row: 1;
  }

  .compose-page-form .outbox-edit-textarea,
  .compose-page-form .tox-tinymce:not(.tox-fullscreen) {
    min-height: clamp(28rem, 52vh, 44rem);
  }
}

.compose-action-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.compose-send-btn {
  min-width: 6rem;
}

.compose-discard-btn {
  /* secondary styling already on the element */
}

@media (max-width: 640px) {
  .compose-page-form {
    padding: 1rem;
  }
  .compose-action-toolbar {
    flex-wrap: wrap;
  }
}