/* Admin-only presentation. Product colors and primitives come from styles.css.
   Keep worker layout rules isolated: index.html does not load this stylesheet. */
body[data-shell="admin"] {
  --shadow: var(--shadow-soft);
  background: var(--bg);
  font-family: var(--font-ui);
  min-height: 100dvh;
  color-scheme: light;
}

body[data-shell="admin"] #ops-shell {
  padding: 0 0 calc(48px + env(safe-area-inset-bottom));
  gap: 0;
  min-height: 100dvh;
}

body[data-shell="admin"] #ops-shell > .ops-header {
  min-height: 72px;
  padding: 12px max(32px, calc((100% - 1216px) / 2));
  background: var(--card);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

body[data-shell="admin"] .admin-wordmark { display: flex; align-items: baseline; gap: 10px; }
body[data-shell="admin"] .admin-wordmark .eyebrow {
  margin: 0;
  color: var(--ink);
  font-size: 1.2rem;
  letter-spacing: 0;
}
body[data-shell="admin"] .admin-wordmark h1 { color: var(--muted); font-size: .82rem; font-weight: 700; }
body[data-shell="admin"] #ops-shell > .ops-header .secondary-button {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--radius-utility);
}

body[data-shell="admin"] #admin-home {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 40px 32px 0;
  gap: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

body[data-shell="admin"] .admin-page-heading { align-items: center; gap: 24px; }
body[data-shell="admin"] .admin-page-heading .eyebrow { font-size: .88rem; letter-spacing: 0; text-transform: none; }
body[data-shell="admin"] .admin-page-heading .big-copy { font-size: 2rem; line-height: 1.15; font-weight: 750; }
body[data-shell="admin"] .admin-tabs { gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
body[data-shell="admin"] .admin-tabs .is-active {
  background: var(--brand-purple-dark);
  color: var(--text-inverse);
}
body[data-shell="admin"] .ops-mode-switch .is-active { background: var(--brand-lavender); color: var(--brand-purple-dark); }

body[data-shell="admin"] #admin-routes-panel {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
body[data-shell="admin"] .admin-workspace-card {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--card);
}
body[data-shell="admin"] .admin-workspace-card h2 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 2px; }
body[data-shell="admin"] .admin-import-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body[data-shell="admin"] .admin-field { display: grid; gap: 8px; min-width: 0; }
body[data-shell="admin"] .start-actions { grid-template-columns: repeat(3, auto); gap: 8px; }
body[data-shell="admin"] .text-input { min-width: 0; }
body[data-shell="admin"] #admin-home .text-input { padding: 11px 14px; border-radius: var(--radius-surface); }
body[data-shell="admin"] .text-input::placeholder { color: var(--muted); opacity: 1; }
body[data-shell="admin"] .file-input-shell { cursor: pointer; border-radius: var(--radius-surface); padding: 20px 16px; }
body[data-shell="admin"] .supporting-text { margin: 0; font-size: .88rem; line-height: 1.5; }
body[data-shell="admin"] :is(#admin-auth-status, #admin-assign-status):empty,
body[data-shell="admin"] #admin-route-preview:empty { display: none; }
body[data-shell="admin"] :is(#admin-auth-status, #admin-import-status, #admin-assign-status):not(:empty) {
  padding: 12px 14px;
  border-radius: var(--radius-surface);
  background: var(--card-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  overflow-wrap: anywhere;
}

body[data-shell="admin"] :is(.primary-button, .secondary-button) {
  min-height: 42px;
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
/* Dark ink on the existing green preserves the brand and gives small labels AA contrast. */
body[data-shell="admin"] .primary-button { background: var(--accent); color: var(--ink); box-shadow: none; }
body[data-shell="admin"] .primary-button:hover:not(:disabled) { background: #32c995; }
body[data-shell="admin"] .secondary-button:hover:not(:disabled) { background: #dad5eb; color: var(--brand-purple-dark); }
body[data-shell="admin"] .admin-tabs .is-active:hover { background: var(--brand-purple); color: #fff; }
body[data-shell="admin"] :is(.primary-button, .secondary-button):disabled { cursor: not-allowed; opacity: .45; }
body[data-shell="admin"] :is(button, input, summary, a):focus-visible {
  outline: 3px solid var(--brand-purple);
  outline-offset: 3px;
}
body[data-shell="admin"] .text-input:focus-visible { outline-width: 2px; outline-offset: 2px; border-color: var(--brand-purple); }
body[data-shell="admin"] .admin-file-field:has(input:focus-visible) .file-input-shell {
  outline: 3px solid var(--brand-purple);
  outline-offset: 3px;
}
body[data-shell="admin"] .file-input-shell:hover { border-color: var(--brand-purple); background: var(--brand-lavender); }
body[data-shell="admin"] .text-input:user-invalid { border-color: #b42318; }
body[data-shell="admin"] .admin-login:has(button[type="submit"]:disabled) #admin-auth-status,
body[data-shell="admin"] #admin-routes-panel[aria-busy="true"] #admin-import-status { border-left: 4px solid var(--brand-purple); }
body[data-shell="admin"] :is(#admin-auth-status, #admin-import-status, #admin-assign-status)[data-state="error"] { background: #fff0ee; border-color: #e6b2ad; color: #9f1d13; }
body[data-shell="admin"] :is(#admin-import-status, #admin-assign-status)[data-state="success"] { background: #f1faf7; border-color: #a6d7c7; color: #167553; }
body[data-shell="admin"] #admin-assign-status[data-state="warning"] { background: #fff8dc; border-color: #e2d49b; color: #765f00; }

body[data-shell="admin"] .ops-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--card);
  padding: 15px 16px;
  box-shadow: none;
}
body[data-shell="admin"] .admin-route-row { gap: 12px; align-items: start; }
body[data-shell="admin"] .admin-route-select { min-width: 0; border-radius: 4px; }
body[data-shell="admin"] .admin-route-select :is(strong, span) { overflow-wrap: anywhere; }
body[data-shell="admin"] .admin-route-row:hover { background: var(--card-soft); }
body[data-shell="admin"] .ops-row.is-selected { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); background: #f1faf7; }
body[data-shell="admin"] .danger-button { color: #b42318; background: #fff0ee; }
body[data-shell="admin"] .danger-button:hover:not(:disabled),
body[data-shell="admin"] .danger-button.is-confirming { background: #fce0dc; color: #9f1d13; }
body[data-shell="admin"] .empty-state { padding: 20px 16px; background: var(--card-soft); border: 1px dashed var(--line); border-radius: var(--radius-surface); line-height: 1.5; }
body[data-shell="admin"] .admin-review-card { padding: 16px; border-radius: var(--radius-surface); }
body[data-shell="admin"] .admin-review-card .target-header { flex-wrap: wrap; gap: 10px; }
body[data-shell="admin"] .admin-review-list li { grid-template-columns: 86px minmax(0, 1fr); font-weight: 600; }
body[data-shell="admin"] .admin-review-list li > * { min-width: 0; overflow-wrap: anywhere; }
body[data-shell="admin"] .admin-coordinate-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-shell="admin"] .admin-coordinate-row > strong { grid-column: 1 / -1; }

body[data-shell="admin"] .admin-insights { gap: 24px; min-width: 0; }
body[data-shell="admin"] .admin-insight-toolbar { padding-bottom: 0; border: 0; }
body[data-shell="admin"] .admin-insight-header .big-copy { font-size: 1.35rem; margin-bottom: 8px; }
body[data-shell="admin"] .admin-metric-grid { gap: 16px; }
body[data-shell="admin"] .admin-metric-card { padding: 20px; min-height: 128px; }
body[data-shell="admin"] .admin-metric-card strong { font-size: 2rem; font-weight: 750; font-variant-numeric: tabular-nums; }
body[data-shell="admin"] :is(.admin-metric-card, .admin-operation-row, .admin-worker-row, .admin-quality-metric, .admin-attention-row, .admin-attention-empty) { border-radius: var(--radius-surface); }
body[data-shell="admin"] .admin-insight-section { gap: 16px; padding-top: 24px; }
body[data-shell="admin"] .admin-section-heading .eyebrow { font-size: 1.1rem; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 750; }
body[data-shell="admin"] :is(.admin-metric-card, .admin-quality-metric) :is(span, small),
body[data-shell="admin"] :is(.admin-operation-main, .admin-worker-main) div span,
body[data-shell="admin"] :is(.admin-operation-progress, .admin-worker-progress) span { font-weight: 600; }
body[data-shell="admin"] :is(.admin-health-pill, .admin-status-pill).is-ready,
body[data-shell="admin"] .admin-health-pill:not(.has-warning),
body[data-shell="admin"] .admin-operation-status:is(.is-safe, .is-active) { color: #167553; }
body[data-shell="admin"] .admin-product-list { align-content: start; gap: 16px; }
body[data-shell="admin"] .admin-operation-status { border-radius: 999px; }
body[data-shell="admin"] :is(.info-card, .shared-session-dialog, .flat-focus-panel) { border-color: var(--line); }

@media (max-width: 1000px) {
  body[data-shell="admin"] #admin-routes-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body[data-shell="admin"] #ops-shell > .ops-header { padding: 12px 16px; gap: 12px; }
  body[data-shell="admin"] #admin-home { padding: 28px 16px 0; gap: 20px; }
  body[data-shell="admin"] .admin-page-heading { align-items: start; gap: 12px; }
  body[data-shell="admin"] .admin-page-heading .big-copy { font-size: 1.55rem; }
  body[data-shell="admin"] .admin-workspace-card { padding: 18px; }
  body[data-shell="admin"] .admin-import-fields { grid-template-columns: minmax(0, 1fr); }
  body[data-shell="admin"] .start-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-shell="admin"] #admin-process-route { grid-column: 1 / -1; }
  body[data-shell="admin"] .admin-route-row { grid-template-columns: minmax(0, 1fr); }
  body[data-shell="admin"] .admin-route-row .danger-button { justify-self: start; }
  body[data-shell="admin"] .admin-metric-grid { gap: 10px; }
  body[data-shell="admin"] .admin-metric-card { padding: 14px; }
  body[data-shell="admin"] .admin-insight-controls { align-items: stretch; width: 100%; }
  body[data-shell="admin"] .admin-health-pill { align-self: start; text-align: left; }
  body[data-shell="admin"] .admin-review-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-shell="admin"] :is(.primary-button, .secondary-button) { transition: none; }
}
