/*
 * BrandOps BackOffice visual foundation
 *
 * Source reference: Alex/backoffice @ 4f2f342f06a5e538dbdfdf2600b1268d627ee4fb
 * TFS source snapshot: BackOffice/Frontend/projects/back-office @ e389d3a53891ca3703c8fbb832e2155d21ab6062
 *
 * This file translates the Customer's Canvas BackOffice visual contract into
 * BrandOps-native CSS. It intentionally does not copy Angular Material / MDC
 * compatibility selectors from BackOffice.
 */

:root {
  --bo-primary-50: #ebfaff;
  --bo-primary-100: #d6f3ff;
  --bo-primary-200: #b8e7ff;
  --bo-primary-300: #70cbff;
  --bo-primary-400: #3db1ff;
  --bo-primary: #0090ff;
  --bo-primary-600: #0072e0;
  --bo-primary-700: #0058c2;
  --bo-primary-800: #0040a3;
  --bo-primary-900: #002d85;

  --bo-text: #282828;
  --bo-secondary: #66696f;
  --bo-hint: #686868;
  --bo-description: #606870;
  --bo-url: #777777;

  --bo-bg: #f5f5f5;
  --bo-card: #ffffff;
  --bo-hover: #f5fcff;
  --bo-readonly: #f5f5f5;

  --bo-divider: #dfe3e8;
  --bo-frame: #eaeaec;
  --bo-input: #cccccc;
  --bo-input-hover: #a0a9b1;
  --bo-stroked: #c4cdd5;

  --bo-success: #95bf47;
  --bo-warning: #b26b00;
  --bo-error: #f30000;

  --bo-radius: 4px;
  --bo-radius-small: 3px;
  --bo-shadow: 0 1px 3px rgba(63, 63, 68, .15), 0 0 0 rgba(63, 63, 68, .05);

  /* Bridge the existing POC variables to the BackOffice contract. */
  --bg: var(--bo-bg);
  --panel: var(--bo-card);
  --ink: var(--bo-text);
  --muted: var(--bo-description);
  --line: var(--bo-frame);
  --accent: var(--bo-primary);
  --accent2: var(--bo-primary-50);
  --ok: var(--bo-success);
  --warn: var(--bo-warning);
  --bad: var(--bo-error);
  --shadow: var(--bo-shadow);
}

* { box-sizing: border-box; }

body {
  background: var(--bo-bg);
  color: var(--bo-text);
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

::selection {
  background: var(--bo-primary);
  color: #fff;
}

/* Application shell */
.shell {
  grid-template-columns: 240px minmax(0, 1fr);
}

.sidebar {
  background: #fff;
  color: var(--bo-text);
  border-right: 1px solid var(--bo-frame);
  padding: 0 0 20px;
  gap: 0;
}

.brand-lockup {
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bo-frame);
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--bo-radius-small);
  background: var(--bo-primary);
  color: #fff;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
}

.brand-lockup strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.brand-lockup span,
.step small,
.safety span {
  color: var(--bo-secondary);
  font-size: 12px;
  line-height: 16px;
}

.side-copy {
  margin: 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bo-frame);
  color: var(--bo-description);
  font-size: 12px;
  line-height: 18px;
}

.steps {
  gap: 0;
  padding-top: 20px;
}

.step {
  gap: 12px;
  padding: 8px 24px 8px 16px;
  border-radius: 0;
  color: var(--bo-text);
  background: transparent;
}

.step > span {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  color: var(--bo-secondary);
  background: transparent;
  font-size: 12px;
}

.step b {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.step.active {
  color: var(--bo-primary);
  background: transparent;
}

.step.active > span {
  color: var(--bo-primary);
  background: transparent;
  border: 0;
}

.sidebar-connection,
.safety {
  margin: 16px 16px 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--bo-frame);
  border-radius: var(--bo-radius);
  box-shadow: none;
}

.sidebar-connection-label {
  color: var(--bo-description);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

.sidebar-connection-state b {
  color: var(--bo-text);
  font-size: 12px;
  font-weight: 500;
}

.sidebar-connection-state small {
  color: var(--bo-secondary);
  max-width: 160px;
}

.sidebar-retry {
  border: 1px solid var(--bo-stroked);
  background: #fff;
  color: var(--bo-description);
  border-radius: var(--bo-radius-small);
  min-height: 30px;
  padding: 0 10px;
  font-weight: 500;
}

.sidebar-retry:hover { background: var(--bo-hover); }

.safety {
  margin-top: auto;
  gap: 4px;
}

.safety b {
  color: var(--bo-text);
  font-weight: 500;
}

main {
  max-width: 1360px;
  padding: 24px 32px 32px;
}

header {
  align-items: center;
  margin-bottom: 20px;
}

h1 {
  max-width: 760px;
  margin: 4px 0 6px;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  font-weight: 500;
}

header p,
.section-copy {
  color: var(--bo-description);
  font-size: 14px;
  line-height: 20px;
}

.eyebrow,
.kicker {
  color: var(--bo-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.health {
  padding: 7px 10px;
  border: 1px solid var(--bo-frame);
  border-radius: var(--bo-radius-small);
  background: #fff;
  color: var(--bo-description);
  font-size: 12px;
  line-height: 20px;
  box-shadow: var(--bo-shadow);
}

/* Surfaces */
.card {
  background: #fff;
  border: 0;
  border-radius: var(--bo-radius-small);
  box-shadow: var(--bo-shadow);
}

.workspace-card,
.intake {
  padding: 20px;
}

.connection {
  padding: 20px;
}

.section-title {
  margin-bottom: 16px;
}

.section-title h2,
.profile-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.profile-head {
  margin: 24px 0 16px;
}

.profile-head h2 {
  font-size: 24px;
  line-height: 32px;
}

.meta {
  color: var(--bo-secondary);
  font-size: 12px;
  line-height: 16px;
}

/* Buttons: BackOffice contract = 36px, 80px minimum, 3px radius. */
.primary,
.secondary {
  min-width: 80px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--bo-radius-small);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.primary {
  background: var(--bo-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 160, 227, .25);
}

.primary:hover:not(:disabled) { background: var(--bo-primary-600); }
.primary:active:not(:disabled) { background: var(--bo-primary-700); }

.primary:disabled {
  opacity: .45;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.secondary {
  border: 1px solid var(--bo-stroked);
  background: #fff;
  color: var(--bo-description);
}

.secondary:hover:not(:disabled) {
  border-color: var(--bo-input-hover);
  background: var(--bo-hover);
}

.compact,
.compact-primary,
.danger-link,
.rule-actions button,
.issue button {
  min-width: auto;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--bo-radius-small);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

/* Forms */
label > span {
  margin-bottom: 4px;
  color: var(--bo-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

label em {
  color: var(--bo-secondary);
  font-weight: 400;
}

input[type=text],
input:not([type]),
textarea,
.mini-grid input:not([type=file]),
.mini-grid select,
.authoring-form select,
.template-global-search input,
.template-folder-pane > input {
  min-height: 36px;
  border: 1px solid var(--bo-input);
  border-radius: var(--bo-radius-small);
  background: #fff;
  color: var(--bo-text);
  padding: 7px 12px;
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input[type=text]:hover,
input:not([type]):hover,
textarea:hover,
.mini-grid select:hover,
.authoring-form select:hover {
  border-color: var(--bo-input-hover);
}

input[type=text]:focus,
input:not([type]):focus,
textarea:focus,
.mini-grid select:focus,
.authoring-form select:focus {
  border-color: var(--bo-primary);
  box-shadow: 0 0 0 1px var(--bo-primary);
  outline: none;
}

.form-grid { gap: 16px 20px; }
.mini-grid { gap: 16px 20px; }
.text-evidence { margin-top: 16px; }

.drop {
  min-height: 132px;
  margin-top: 16px;
  border: 1px dashed var(--bo-input);
  border-radius: var(--bo-radius);
  background: #fff;
}

.drop:hover {
  border-color: var(--bo-primary);
  background: var(--bo-hover);
}

.drop-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: var(--bo-radius-small);
  background: var(--bo-primary-50);
  color: var(--bo-primary);
}

/* Tabs */
.tabs {
  gap: 0;
  margin-top: 16px;
  border-bottom: 1px solid var(--bo-divider);
}

.tabs button {
  min-width: auto;
  padding: 8px 12px;
  border-radius: 0;
  color: var(--bo-secondary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

.tabs button:hover { color: var(--bo-text); }
.tabs button.active {
  color: var(--bo-primary);
  border-bottom-color: var(--bo-primary);
}

.tab-content {
  min-height: 280px;
  padding: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Statuses */
.badge {
  padding: 4px 7px;
  border-radius: var(--bo-radius-small);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}

.badge.ok { background: #f0f8e5; color: #4e7318; }
.badge.warn { background: #fff6e6; color: #8c5700; }
.badge.bad { background: #fff0f0; color: #b00000; }
.badge.neutral { background: var(--bo-readonly); color: var(--bo-secondary); }

.dot.ok { background: var(--bo-success); box-shadow: none; }
.dot.warn { background: var(--bo-warning); box-shadow: none; }
.dot.bad { background: var(--bo-error); box-shadow: none; }
.dot.neutral { background: var(--bo-input-hover); }

/* Brand Workspace */
.profile-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.profile-card,
.summary-tile,
.registry-item,
.version-card,
.progressive-details,
.resource-row,
.cc-state,
.cc-metric {
  border-color: var(--bo-frame);
  border-radius: var(--bo-radius-small);
}

.profile-card {
  padding: 16px;
  box-shadow: var(--bo-shadow);
  transition: background-color .15s ease, border-color .15s ease;
}

.profile-card:hover {
  border-color: var(--bo-primary-200);
  background: var(--bo-hover);
  transform: none;
  box-shadow: var(--bo-shadow);
}

.profile-counts span,
.run-chips span,
.template-pane-title span {
  border-radius: var(--bo-radius-small);
  background: var(--bo-readonly);
  color: var(--bo-secondary);
}

.profile-summary { gap: 12px; }

.summary-tile {
  padding: 12px 14px;
  box-shadow: var(--bo-shadow);
}

.summary-tile small {
  color: var(--bo-secondary);
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 500;
}

.summary-tile > strong {
  font-size: 14px;
  font-weight: 500;
}

.profile-settings {
  border-radius: var(--bo-radius-small);
}

.profile-settings > summary,
.supporting-tools > summary {
  padding: 14px 20px;
}

.profile-settings > summary b,
.supporting-tools > summary b {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.profile-settings > summary small,
.supporting-tools > summary small {
  color: var(--bo-description);
  font-size: 12px;
  line-height: 16px;
}

.profile-settings-body {
  padding: 4px 20px 20px;
  border-top-color: var(--bo-divider);
}

.authoring-panel { gap: 20px; }
.authoring-form {
  padding: 20px;
  border: 1px solid var(--bo-frame);
  border-radius: var(--bo-radius-small);
  background: #fff;
  box-shadow: var(--bo-shadow);
}

.registry-list { gap: 12px; }
.registry-item {
  padding: 14px 16px;
  box-shadow: var(--bo-shadow);
}

.file-proof,
.diff-grid span,
.prepare-run,
.runtime-box {
  border-radius: var(--bo-radius-small);
  background: var(--bo-readonly);
}

.empty-state {
  border-color: var(--bo-input);
  border-radius: var(--bo-radius);
  background: #fff;
  color: var(--bo-description);
}

.empty-state b { color: var(--bo-text); }

/* Product journey: replace POC purple hero treatments with BackOffice blue. */
.next-action-card {
  padding: 20px;
  border: 1px solid var(--bo-primary-200);
  border-radius: var(--bo-radius);
  background: var(--bo-hover);
}

.next-action-card h3,
.backoffice-status h3,
.backoffice-empty h3,
.template-hero h3 {
  margin: 4px 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.journey-grid { gap: 12px; }
.journey-card {
  padding: 14px;
  border-color: var(--bo-frame);
  border-radius: var(--bo-radius-small);
  background: #fff;
  box-shadow: var(--bo-shadow);
}

.journey-card > span {
  border-radius: var(--bo-radius-small);
  background: var(--bo-readonly);
  color: var(--bo-secondary);
}

.journey-card.done > span {
  background: #f0f8e5;
  color: #4e7318;
}

.journey-card.current {
  border-color: var(--bo-primary-200);
  background: var(--bo-hover);
}

.journey-card.current > span {
  background: var(--bo-primary);
  color: #fff;
}

/* BackOffice readiness */
.backoffice-status {
  padding: 20px;
  border-radius: var(--bo-radius);
}

.backoffice-status.ready {
  background: #f8fbf2;
  border-color: #d8e8bd;
}

.backoffice-status.blocked {
  background: #fff8f8;
  border-color: #f0caca;
}

.status-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.readiness-metrics > div {
  padding: 14px;
  border-color: var(--bo-frame);
  border-radius: var(--bo-radius-small);
  box-shadow: var(--bo-shadow);
}

.readiness-metrics strong {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.progressive-details {
  box-shadow: var(--bo-shadow);
}

/* Template browser */
.template-studio { gap: 20px; }
.template-hero { padding: 0 0 8px; }

.template-browser {
  border: 0;
  border-radius: var(--bo-radius-small);
  background: #fff;
  box-shadow: var(--bo-shadow);
}

.template-browser-head {
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--bo-divider);
  background: #fff;
}

.template-browser-head h3 {
  margin: 4px 0 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.template-browser-head p {
  color: var(--bo-description);
  font-size: 14px;
  line-height: 20px;
}

.template-browser-shell {
  grid-template-columns: 240px minmax(0, 1fr);
}

.template-folder-pane {
  padding: 16px;
  border-right: 1px solid var(--bo-frame);
  background: #fff;
}

.template-folder-row {
  min-height: 36px;
  padding: 8px 8px 8px calc(8px + var(--depth, 0) * 12px);
  border-radius: 0;
  color: var(--bo-text);
  font-size: 14px;
  line-height: 20px;
}

.template-folder-row:hover {
  background: var(--bo-hover);
  color: var(--bo-text);
}

.template-folder-row.active {
  background: transparent;
  color: var(--bo-primary);
  font-weight: 500;
}

.template-content-pane { padding: 16px 20px 20px; }

.template-breadcrumbs button {
  color: var(--bo-primary);
  font-size: 12px;
  font-weight: 500;
}

.template-subfolders button {
  min-height: 34px;
  border-color: var(--bo-frame);
  border-radius: var(--bo-radius-small);
  background: #fff;
  color: var(--bo-description);
}

.template-subfolders button:hover { background: var(--bo-hover); }

.template-grid {
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
}

.template-card {
  border: 1px solid var(--bo-frame);
  border-radius: var(--bo-radius-small);
  background: #fff;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.template-card:hover {
  transform: none;
  border-color: var(--bo-primary-200);
  background: var(--bo-hover);
  box-shadow: none;
}

.template-card.selected {
  border: 2px solid var(--bo-primary);
  box-shadow: 0 0 0 2px var(--bo-primary-50);
}

.template-thumb {
  background: var(--bo-bg);
}

.template-card-copy b {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.template-card-copy span {
  color: var(--bo-description);
  font-size: 11px;
}

.template-select-mark,
.template-multi-check {
  border-radius: var(--bo-radius-small);
}

.template-card.selected .template-select-mark,
.template-card.selected .template-multi-check {
  background: var(--bo-primary);
  border-color: var(--bo-primary);
}

.template-selected {
  padding: 14px 16px;
  border: 1px solid var(--bo-primary-200);
  border-radius: var(--bo-radius-small);
  background: var(--bo-hover);
}

.template-selected.empty {
  border-color: var(--bo-input);
  background: #fff;
}

.selected-layout-proof strong { color: var(--bo-primary); }
.spinner-dot { background: var(--bo-primary); }

.adapt-form,
.layout-proof,
.adapt-dry,
.adapt-op,
.adapt-preview {
  border-color: var(--bo-frame);
  border-radius: var(--bo-radius-small);
  background: #fff;
}

/* Batch */
.batch-panel {
  margin-top: 16px;
  padding: 20px;
  border: 0;
  border-radius: var(--bo-radius-small);
  background: #fff;
  box-shadow: var(--bo-shadow);
}

.batch-selected-row,
.batch-result-summary {
  border-color: var(--bo-divider);
}

.batch-plan-row,
.batch-result-card {
  border-color: var(--bo-frame);
  border-radius: var(--bo-radius-small);
  background: #fff;
}

.batch-plan-row.failed,
.batch-plan-row.blocked,
.batch-result-card.failed {
  border-color: #f0caca;
  background: #fff8f8;
}

.batch-result-card img {
  border-radius: var(--bo-radius-small);
  background: var(--bo-bg);
}

/* Supporting/legacy POC views */
.tile,
.swatch,
.issue,
.rule-actions button,
.runtime-box,
.analysis-error,
.template-error,
.attention-card,
.attention-list > div {
  border-radius: var(--bo-radius-small);
}

.tile {
  padding: 16px;
  border-color: var(--bo-frame);
  box-shadow: var(--bo-shadow);
}

.issue {
  border-color: var(--bo-frame);
  border-left: 3px solid var(--bo-warning);
}

.issue.blocker { border-left-color: var(--bo-error); }
.issue.resolved { border-left-color: var(--bo-success); }

.cc-state {
  background: #fff;
  box-shadow: var(--bo-shadow);
}

.cc-metric {
  padding: 12px;
  box-shadow: var(--bo-shadow);
}

pre {
  border-radius: var(--bo-radius-small);
}

.toast {
  right: 24px;
  bottom: 24px;
  border-radius: var(--bo-radius-small);
  background: #282828;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  main { padding: 20px; }
}