/**
 * OneTab Legacy Compatibility — maps Phase 5E class names to design system tokens
 * Enables gradual migration without breaking existing markup
 */

/* Extended token aliases (Studio / Upload / AI legacy vars) */
:root {
  --bg-elevated: var(--ot-bg-elevated);
  --bg-subtle: var(--ot-bg-subtle);
  --bg-hover: var(--ot-bg-hover);
  --bg-active: var(--ot-bg-active);
  --text-1: var(--ot-text);
  --text-2: var(--ot-text-secondary);
  --text-3: var(--ot-text-tertiary);
  --text-4: var(--ot-text-muted);
  --text-muted: var(--ot-text-tertiary);
  --brand-dim: var(--ot-brand-dim);
  --brand-soft: var(--ot-brand-soft);
  --brand-bg: rgba(212, 160, 23, 0.08);
  --green-soft: var(--ot-green-soft);
  --red-soft: var(--ot-red-soft);
  --amber-soft: var(--ot-amber-soft);
  --blue-soft: var(--ot-accent-soft);
  --blue: var(--ot-accent);
  --border-strong: var(--ot-border-strong);
  --border2: var(--ot-border-strong);
  --gold2: #e6b938;
  --green-bg: var(--ot-green-soft);
  --red-bg: var(--ot-red-soft);
  --amber-bg: var(--ot-amber-soft);
  --purple: var(--ot-purple);
  --purple-soft: var(--ot-purple-soft);
  --shadow-1: var(--ot-shadow-1);
  --shadow-2: var(--ot-shadow-2);
  --shadow-3: var(--ot-shadow-3);
  --accent-strong: #0078d4;
}

/* Legacy button → design system */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--ot-radius-sm);
  font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--ot-border); background: var(--ot-bg-subtle);
  color: var(--ot-text-secondary); cursor: pointer;
  transition: all var(--ot-transition); white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--ot-bg-hover); color: var(--ot-text); border-color: var(--ot-border-strong); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn.brand, .btn-go, .btn-fetch { background: linear-gradient(180deg, var(--ot-brand), var(--ot-brand-dim)); color: #1a1408; border-color: var(--ot-brand-dim); }
.btn.brand:hover:not(:disabled), .btn-go:hover:not(:disabled) { filter: brightness(1.06); }
.btn.danger, .btn-red { color: var(--ot-red); border-color: rgba(239, 68, 68, 0.35); }
.btn.danger:hover:not(:disabled), .btn-red:hover:not(:disabled) { background: var(--ot-red-soft); }
.btn-green { background: var(--ot-green-soft); color: var(--ot-green); border-color: rgba(108, 203, 95, 0.3); }
.btn-gray { background: var(--ot-bg-subtle); color: var(--ot-text-secondary); }
.btn.sm, .btn-sm { padding: 5px 10px; font-size: 11px; }
.btn.lg { padding: 11px 20px; font-size: 13.5px; }

/* Legacy metrics → ot-metrics style */
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0; background: var(--ot-bg-elevated); border: 1px solid var(--ot-border);
  border-radius: var(--ot-radius); overflow: hidden; margin-bottom: 16px;
}
.metric { padding: 14px 16px; border-right: 1px solid var(--ot-border); }
.metric:last-child { border-right: none; }
.metric-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-text-tertiary); }
.metric-value { font-family: var(--ot-mono); font-size: 22px; font-weight: 700; margin-top: 6px; }
.metric-value.green { color: var(--ot-green); }
.metric-value.blue { color: var(--ot-accent); }
.metric-value.amber { color: var(--ot-amber); }

/* Legacy tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ot-border); margin-bottom: 16px; flex-wrap: wrap; }
.tab, .tab-pane + .tabs .tab {
  padding: 9px 14px; border: none; background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ot-text-tertiary);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active, .tab.on { color: var(--ot-text); border-bottom-color: var(--ot-brand); }
.tab-pane { display: none !important; }
.tab-pane.active, .feat.on { display: block !important; }
.tab-pane[hidden] { display: none !important; }
#ot-mount-content .tab-pane:not(.active) { display: none !important; }
#ot-mount-content .tab-pane.active { display: block !important; }

/* Legacy modals → align with ot-modal */
.modal-bg.open { display: flex; }
.modal { border-radius: var(--ot-radius-lg); }

/* Status pills */
.status-pill, .sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--ot-green-soft); color: var(--ot-green);
  border: 1px solid rgba(108, 203, 95, 0.3);
}
.status-pill.warn, .sync-pill.warn { background: var(--ot-amber-soft); color: var(--ot-amber); border-color: rgba(245, 158, 11, 0.3); }
.status-pill.error, .sync-pill.err { background: var(--ot-red-soft); color: var(--ot-red); border-color: rgba(239, 68, 68, 0.3); }
.status-pill.running { background: var(--ot-brand-soft); color: var(--ot-brand); }
.status-pill.done { background: var(--ot-green-soft); color: var(--ot-green); }
.status-pill.error { background: var(--ot-red-soft); color: var(--ot-red); }

/* Page typography aliases */
.page-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ot-text-tertiary); }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.page-sub, .page-head .ot-lead { font-size: 13px; color: var(--ot-text-secondary); margin-top: 6px; }
.page-head { margin-bottom: 16px; }

/* Bengali */
.bn, .ot-bn { font-family: var(--ot-font-bn, 'Hind Siliguri', 'Noto Sans Bengali', var(--ot-font)); font-weight: 500; }
.mono, .ot-mono { font-family: var(--ot-mono); font-feature-settings: 'tnum'; }

/* Hide legacy shell when using OTS */
body.ot-body .app > .sidebar,
body.ot-body .app > aside.sidebar { display: none !important; }
body.ot-body .app { display: block !important; grid-template-columns: 1fr !important; }
body.ot-body .app .main { min-height: auto; }
body.ot-body .app .topbar { display: none !important; }
body.ot-body .app .content { padding: 0; max-width: none; }

/* Studio dashboard inside shell */
#ot-studio-dashboard { width: 100%; }

/* Autopilot toggle in topbar */
#autopilotToggleWrap.on { border-color: var(--ot-green); }
#autopilotToggleWrap.busy { opacity: 0.6; pointer-events: none; }
#autopilotToggleWrap .ot-switch { margin: 0; }

/* AI page model badge */
.page-title .badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  background: var(--ot-brand-soft); color: var(--ot-brand); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  border-radius: 999px; vertical-align: middle;
}
.page-title .badge::before {
  content: ''; width: 5px; height: 5px; background: currentColor;
  border-radius: 50%; box-shadow: 0 0 5px currentColor;
}