/* ── Control panel design tokens (inherits from main.css design system) ── */
:root {
  /* Inherited semantic tokens */
  --cp-bg-page: var(--color-bg-page);
  --cp-bg-surface: var(--color-bg-surface);
  --cp-bg-elevated: #f1f5f9;              /* CP-specific: slate-100 (main.css uses #ffffff) */
  --cp-text-primary: var(--color-text-primary);
  --cp-text-secondary: var(--color-text-secondary);
  --cp-text-muted: #9ca3af;               /* CP-specific: gray-400 (main.css uses gray-500) */
  --cp-border-default: var(--color-border-default);
  --cp-border-strong: var(--color-border-strong);
  --cp-brand: var(--brand-primary);
  --cp-brand-dark: var(--brand-primary-dark);
  --cp-brand-focus: var(--brand-focus-ring);
  --cp-success: var(--color-success);
  --cp-error: var(--color-error);
  --cp-radius-md: var(--radius-md);
  --cp-btn-text-on-color: var(--color-text-inverse);
  --cp-transition-base: var(--transition-fast);

  /* Alert tokens — light */
  --cp-alert-success-bg: #dcfce7;
  --cp-alert-success-text: #166534;
  --cp-alert-success-border: #86efac;
  --cp-alert-error-bg: #fee2e2;
  --cp-alert-error-text: #991b1b;
  --cp-alert-error-border: #fca5a5;
  --cp-alert-info-bg: #dbeafe;
  --cp-alert-info-text: #1e40af;
  --cp-alert-info-border: #93c5fd;
  --cp-alert-warning-bg: #fef3c7;
  --cp-alert-warning-text: #92400e;
  --cp-alert-warning-border: #fcd34d;

  /* Status badge tokens — light */
  --cp-status-green-bg: #dcfce7;
  --cp-status-green-text: #15803d;
  --cp-status-blue-bg: #dbeafe;
  --cp-status-blue-text: #1d4ed8;
  --cp-status-blue-dot: #60a5fa;
  --cp-status-red-bg: #fee2e2;
  --cp-status-red-text: #b91c1c;
  --cp-status-neutral-bg: var(--cp-bg-elevated);
  --cp-status-neutral-text: var(--cp-text-secondary);
  --cp-status-purple-bg: #f3e8ff;
  --cp-status-purple-text: #7e22ce;
  --cp-status-sky-bg: #e0f2fe;
  --cp-status-sky-text: #0369a1;
  --cp-status-indigo-bg: #e0e7ff;
  --cp-status-indigo-text: #4338ca;
  --cp-status-amber-bg: #fef3c7;
  --cp-status-amber-text: #b45309;
  --cp-status-yellow-bg: #fef9c3;
  --cp-status-yellow-text: #a16207;
}

[data-theme="dark"] {
  /* Only CP-specific overrides — inherited var() tokens resolve automatically via main.css dark */
  --cp-bg-elevated: var(--color-bg-elevated);
  --cp-text-muted: #64748b;               /* CP-specific: slate-500 (main.css dark uses slate-400) */

  /* Alert tokens — dark */
  --cp-alert-success-bg: rgba(74, 222, 128, 0.12);
  --cp-alert-success-text: #4ade80;
  --cp-alert-success-border: rgba(74, 222, 128, 0.3);
  --cp-alert-error-bg: rgba(248, 113, 113, 0.12);
  --cp-alert-error-text: #f87171;
  --cp-alert-error-border: rgba(248, 113, 113, 0.3);
  --cp-alert-info-bg: rgba(96, 165, 250, 0.12);
  --cp-alert-info-text: #60a5fa;
  --cp-alert-info-border: rgba(96, 165, 250, 0.3);
  --cp-alert-warning-bg: rgba(251, 191, 36, 0.12);
  --cp-alert-warning-text: #fbbf24;
  --cp-alert-warning-border: rgba(251, 191, 36, 0.3);

  /* Status badge tokens — dark */
  --cp-status-green-bg: rgba(74, 222, 128, 0.12);
  --cp-status-green-text: #4ade80;
  --cp-status-blue-bg: rgba(96, 165, 250, 0.12);
  --cp-status-blue-text: #60a5fa;
  --cp-status-blue-dot: #60a5fa;
  --cp-status-red-bg: rgba(248, 113, 113, 0.12);
  --cp-status-red-text: #f87171;
  --cp-status-neutral-bg: var(--cp-bg-elevated);
  --cp-status-neutral-text: var(--cp-text-secondary);
  --cp-status-purple-bg: rgba(192, 132, 252, 0.12);
  --cp-status-purple-text: #c084fc;
  --cp-status-sky-bg: rgba(56, 189, 248, 0.12);
  --cp-status-sky-text: #38bdf8;
  --cp-status-indigo-bg: rgba(129, 140, 248, 0.12);
  --cp-status-indigo-text: #818cf8;
  --cp-status-amber-bg: rgba(251, 191, 36, 0.12);
  --cp-status-amber-text: #fbbf24;
  --cp-status-yellow-bg: rgba(250, 204, 21, 0.12);
  --cp-status-yellow-text: #facc15;
}

html[data-theme="dark"], html[data-theme="dark"] body {
  background-color: var(--cp-bg-page); color: var(--cp-text-primary);
}

/* ── Semantic utility classes (same names as main.css for consistency) ── */
.bg-page { background-color: var(--cp-bg-page); }
.bg-surface { background-color: var(--cp-bg-surface); }
.bg-elevated { background-color: var(--cp-bg-elevated); }
.text-primary-semantic { color: var(--cp-text-primary); }
.text-secondary-semantic { color: var(--cp-text-secondary); }
.text-muted-semantic { color: var(--cp-text-muted); }
.border-default { border-color: var(--cp-border-default); }
.border-strong { border-color: var(--cp-border-strong); }

/* ── Buttons ── */
.btn-cp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-4); border-radius: var(--cp-radius-md);
  font-size: var(--text-sm); font-weight: var(--font-semibold); transition: all var(--cp-transition-base);
  cursor: pointer; border: none;
}
.btn-cp-primary { background: var(--cp-brand); color: var(--cp-btn-text-on-color); }
.btn-cp-primary:hover { background: var(--cp-brand-dark); }
.btn-cp-success { background: var(--cp-success); color: var(--cp-btn-text-on-color); }
.btn-cp-success:hover { opacity: 0.9; }
.btn-cp-danger { background: var(--cp-error); color: var(--cp-btn-text-on-color); }
.btn-cp-danger:hover { opacity: 0.9; }

/* ── Alerts ── */
.alert-cp { padding: var(--space-3) var(--space-4); border-radius: var(--cp-radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); border: 1px solid; }
.alert-cp-success { background: var(--cp-alert-success-bg); color: var(--cp-alert-success-text); border-color: var(--cp-alert-success-border); }
.alert-cp-error { background: var(--cp-alert-error-bg); color: var(--cp-alert-error-text); border-color: var(--cp-alert-error-border); }
.alert-cp-info { background: var(--cp-alert-info-bg); color: var(--cp-alert-info-text); border-color: var(--cp-alert-info-border); }
.alert-cp-warning { background: var(--cp-alert-warning-bg); color: var(--cp-alert-warning-text); border-color: var(--cp-alert-warning-border); }

/* ── Focus ring ── */
/* :focus fallback for older browsers; :not(:focus-visible) hides ring on mouse clicks */
.cp-focus:focus { outline: none; box-shadow: 0 0 0 2px var(--cp-brand-focus); border-color: var(--cp-brand); }
/* Modern :focus-visible + container :focus-within */
.cp-focus:focus-visible,
.cp-focus-within:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px var(--cp-brand-focus);
  border-color: var(--cp-brand);
}
.cp-focus:focus:not(:focus-visible) { box-shadow: none; border-color: var(--cp-border-strong); }
[data-theme="dark"] .cp-focus:focus-visible,
[data-theme="dark"] .cp-focus-within:focus-within {
  box-shadow: 0 0 0 2px var(--cp-brand-focus);
  border-color: var(--cp-brand);
}

/* ── Navbar ── */
.cp-navbar { background-color: var(--cp-brand); }
[data-theme="dark"] .cp-navbar { background-color: var(--cp-brand-dark); }

/* ── Module toggle cards (checked state) ──
   peer-checked: classes depend on Tailwind CDN's peer modifier.
   Cannot be replaced with plain CSS. dark: variants added inline.
   Full migration requires JS toggling or CSS :has(). */

/* ── Theme toggle icon visibility ── */
[data-theme="light"] .theme-icon-light,
[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-dark,
[data-theme="dark"] .theme-icon-light { display: block; }
html:not([data-theme]) .theme-icon-light { display: none; }

/* ── Status badges ── */
.cp-status {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.125rem 0.5rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); line-height: 1rem; font-weight: var(--font-medium);
}
.cp-status--semibold { font-weight: var(--font-semibold); padding: 0.125rem var(--space-2-5); }
.cp-status--roomy { gap: var(--space-1-5); padding: var(--space-1) var(--space-2-5); }

.cp-status__dot {
  display: inline-block; width: var(--space-1-5); height: var(--space-1-5);
  border-radius: var(--radius-full);
}

.cp-status--active,
.cp-status--ok,
.cp-status--info      { background: var(--cp-status-green-bg); color: var(--cp-status-green-text); }
.cp-status--creating  { background: var(--cp-status-blue-bg); color: var(--cp-status-blue-text); }
.cp-status--creating .cp-status__dot { background: var(--cp-status-blue-dot); }
.cp-status--error,
.cp-status--failed    { background: var(--cp-status-red-bg); color: var(--cp-status-red-text); }
.cp-status--paused,
.cp-status--default   { background: var(--cp-status-neutral-bg); color: var(--cp-status-neutral-text); }
.cp-status--expired   { background: var(--cp-status-purple-bg); color: var(--cp-status-purple-text); }
.cp-status--ssl-pending { background: var(--cp-status-sky-bg); color: var(--cp-status-sky-text); }
.cp-status--subdomain-created { background: var(--cp-status-indigo-bg); color: var(--cp-status-indigo-text); }
.cp-status--pending   { background: var(--cp-status-indigo-bg); color: var(--cp-status-indigo-text); }
.cp-status--draft,
.cp-status--info-amber,
.cp-status--action-recommended { background: var(--cp-status-amber-bg); color: var(--cp-status-amber-text); }
.cp-status--warning,
.cp-status--expiring  { background: var(--cp-status-yellow-bg); color: var(--cp-status-yellow-text); }

/* ── Links ── */
.cp-link {
  color: var(--cp-brand-dark);
  transition: color var(--cp-transition-base);
}
.cp-link:hover { color: var(--cp-brand); }
[data-theme="dark"] .cp-link { color: var(--cp-brand); }
[data-theme="dark"] .cp-link:hover { color: #7dd3fc; }

/* ── Navbar text ── */
.cp-navbar-text { color: var(--color-text-inverse); }
.cp-navbar-text-muted { color: rgba(255, 255, 255, 0.8); transition: color var(--cp-transition-base); }
.cp-navbar-text-muted:hover { color: var(--color-text-inverse); }

/* ── Activity indicators ── */
.cp-activity-hot { color: #ea580c; }
[data-theme="dark"] .cp-activity-hot { color: #fb923c; }
.cp-activity-normal { color: #3b82f6; }
[data-theme="dark"] .cp-activity-normal { color: #60a5fa; }

/* ── Context menu items ── */
.cp-ctx-config { color: #ea580c; }
.cp-ctx-config:hover { background-color: #fff7ed; }
[data-theme="dark"] .cp-ctx-config { color: #fb923c; }
[data-theme="dark"] .cp-ctx-config:hover { background-color: rgba(251, 146, 60, 0.12); }

.cp-ctx-activate { color: #15803d; }
.cp-ctx-activate:hover { background-color: #f0fdf4; }
[data-theme="dark"] .cp-ctx-activate { color: #4ade80; }
[data-theme="dark"] .cp-ctx-activate:hover { background-color: rgba(74, 222, 128, 0.12); }

/* ── Action buttons — DRY base + color variants via scoped custom properties ── */
:is(.btn-cp-warn, .btn-cp-activate, .btn-cp-verify, .btn-cp-info) {
  background: var(--_btn-bg); color: var(--_btn-text); border: 1px solid var(--_btn-border);
  transition: background var(--cp-transition-base);
}
:is(.btn-cp-warn, .btn-cp-activate, .btn-cp-verify, .btn-cp-info):hover {
  background: var(--_btn-bg-hover);
}
.btn-cp-warn     { --_btn-bg:#fff7ed; --_btn-text:#ea580c; --_btn-border:#fed7aa; --_btn-bg-hover:#ffedd5; }
.btn-cp-activate { --_btn-bg:#f0fdf4; --_btn-text:#15803d; --_btn-border:#bbf7d0; --_btn-bg-hover:#dcfce7; }
.btn-cp-verify   { --_btn-bg:#ecfdf5; --_btn-text:#047857; --_btn-border:#a7f3d0; --_btn-bg-hover:#d1fae5; }
.btn-cp-info     { --_btn-bg:#f0f9ff; --_btn-text:#0369a1; --_btn-border:#bae6fd; --_btn-bg-hover:#e0f2fe; }

[data-theme="dark"] .btn-cp-warn     { --_btn-bg:rgba(251,146,60,.12); --_btn-text:#fb923c; --_btn-border:rgba(251,146,60,.3); --_btn-bg-hover:rgba(251,146,60,.2); }
[data-theme="dark"] .btn-cp-activate { --_btn-bg:rgba(74,222,128,.12); --_btn-text:#4ade80; --_btn-border:rgba(74,222,128,.3); --_btn-bg-hover:rgba(74,222,128,.2); }
[data-theme="dark"] .btn-cp-verify   { --_btn-bg:rgba(52,211,153,.12); --_btn-text:#34d399; --_btn-border:rgba(52,211,153,.3); --_btn-bg-hover:rgba(52,211,153,.2); }
[data-theme="dark"] .btn-cp-info     { --_btn-bg:rgba(56,189,248,.12); --_btn-text:#38bdf8; --_btn-border:rgba(56,189,248,.3); --_btn-bg-hover:rgba(56,189,248,.2); }

/* ── Deployment card ── */
.cp-deployment-card {
  background: linear-gradient(to bottom right, #eef2ff, #eff6ff);
  border: 1px solid #c7d2fe;
}
[data-theme="dark"] .cp-deployment-card {
  background: linear-gradient(to bottom right, rgba(129, 140, 248, 0.08), rgba(96, 165, 250, 0.08));
  border-color: rgba(129, 140, 248, 0.25);
}

.cp-badge-deployment { background: #e0e7ff; color: #3730a3; }
[data-theme="dark"] .cp-badge-deployment { background: rgba(129, 140, 248, 0.15); color: #818cf8; }

/* ── Field highlighting (global config override) ──
   .cp-field-global: bg + border only (for inputs — text stays primary)
   .cp-field-global-text: color only (for hint labels and badge text) */
.cp-field-global { background-color: #fff7ed; border-color: #fb923c; }
[data-theme="dark"] .cp-field-global { background-color: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.4); }
.cp-field-global-text { color: #ea580c; }
[data-theme="dark"] .cp-field-global-text { color: #fb923c; }

/* ── Brand ── */
.cp-brand-text { color: var(--cp-brand); }
[data-theme="dark"] .cp-brand-text { color: #7dd3fc; }
.cp-brand-dot { background-color: var(--cp-brand); }
[data-theme="dark"] .cp-brand-dot { background-color: #7dd3fc; }

/* ── Status text warning ── */
.cp-status-text-warning { color: #ca8a04; }
[data-theme="dark"] .cp-status-text-warning { color: #facc15; }

/* ── Badge warning ── */
.cp-badge-warning { background: #fef9c3; color: #a16207; }
[data-theme="dark"] .cp-badge-warning { background: rgba(250, 204, 21, 0.12); color: #facc15; }

/* ── Module icon accent ── */
.cp-module-icon-accent { background-color: #f3e8ff; }
[data-theme="dark"] .cp-module-icon-accent { background-color: rgba(192, 132, 252, 0.15); }

/* ── Gateway badges ── */
.cp-gw-stripe { background: #ede9fe; color: #6d28d9; }
[data-theme="dark"] .cp-gw-stripe { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.cp-gw-revolut { background: #e0f2fe; color: #0369a1; }
[data-theme="dark"] .cp-gw-revolut { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.cp-gw-na { background: var(--cp-bg-elevated); color: var(--cp-text-secondary); }

/* ── Indicator dots ── */
.cp-revolut-dot { background-color: #818cf8; }
[data-theme="dark"] .cp-revolut-dot { background-color: #a5b4fc; }

/* ── Draft row ── */
.cp-draft-row { background-color: rgba(251, 191, 36, 0.08); }
[data-theme="dark"] .cp-draft-row { background-color: rgba(251, 191, 36, 0.05); }

/* ── Semantic text utilities (deployment log, form validation, status icons) ── */
.cp-text-error { color: var(--cp-error); }
.cp-text-error-muted { color: var(--cp-status-red-text); }
[data-theme="dark"] .cp-text-error-muted { color: #f87171; }
.cp-text-success { color: var(--cp-success); }
.cp-text-danger { color: var(--cp-error); }
.cp-text-danger:hover { color: var(--color-error-hover); }
[data-theme="dark"] .cp-text-danger { color: #f87171; }
[data-theme="dark"] .cp-text-danger:hover { color: #fca5a5; }

/* ── Inline badges (deployment log step status) ── */
.cp-badge-success { background: var(--cp-status-green-bg); color: var(--cp-status-green-text); }
.cp-badge-error { background: var(--cp-status-red-bg); color: var(--cp-status-red-text); }

/* ── Danger border (delete buttons) ── */
.cp-border-danger { border-color: var(--cp-status-red-bg); }
.cp-border-danger:hover { border-color: var(--cp-error); }
[data-theme="dark"] .cp-border-danger { border-color: rgba(248, 113, 113, 0.3); }

/* ── Module icon backgrounds ── */
.cp-module-icon-brand { background-color: var(--cp-status-blue-bg); }
[data-theme="dark"] .cp-module-icon-brand { background-color: rgba(96, 165, 250, 0.15); }
.cp-module-icon-success { background-color: var(--cp-status-green-bg); }
[data-theme="dark"] .cp-module-icon-success { background-color: rgba(74, 222, 128, 0.15); }
.cp-module-icon-info { background-color: var(--cp-status-sky-bg); }
[data-theme="dark"] .cp-module-icon-info { background-color: rgba(56, 189, 248, 0.15); }
.cp-module-icon-warn { background-color: var(--cp-alert-warning-bg); }
[data-theme="dark"] .cp-module-icon-warn { background-color: rgba(251, 191, 36, 0.15); }

/* ── Summary card (wizard step 7) ── */
.cp-summary-card {
  background: linear-gradient(to bottom right, #eff6ff, #f0f9ff);
  border: 1px solid #bfdbfe;
}
[data-theme="dark"] .cp-summary-card {
  background: linear-gradient(to bottom right, rgba(96, 165, 250, 0.06), rgba(56, 189, 248, 0.06));
  border-color: rgba(96, 165, 250, 0.2);
}

/* ── Wizard stepper (tenant_create progress steps) ── */
.cp-step-done { background-color: var(--cp-brand); border-color: var(--cp-brand); color: var(--cp-btn-text-on-color); }
.cp-step-current { background-color: var(--cp-bg-surface); border-color: var(--cp-brand); color: var(--cp-brand); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1)); }
.cp-step-pending { background-color: var(--cp-bg-elevated); border-color: var(--cp-border-default); color: var(--cp-text-muted); }
.cp-step-label-done { color: var(--cp-text-secondary); }
.cp-step-label-current { color: var(--cp-brand-dark); }
[data-theme="dark"] .cp-step-label-current { color: var(--cp-brand); }
.cp-step-label-pending { color: var(--cp-text-muted); }
.cp-step-line-done { background-color: var(--cp-brand); }
.cp-step-line-pending { background-color: var(--cp-bg-elevated); }
.cp-ring-error { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.5); }
[data-theme="dark"] .cp-ring-error { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.4); }

/* ── Module tag badge (rendered tags in tenant_create JS) ── */
.cp-tag { display: inline-block; padding: var(--space-1) var(--space-2-5); background: var(--cp-status-sky-bg); color: var(--cp-status-sky-text); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); }

/* ── Neutral button (disabled toggle state) ── */
.btn-cp-neutral { background-color: var(--cp-bg-elevated); color: var(--cp-text-primary); }
.btn-cp-neutral:hover { background-color: var(--cp-border-default); }

/* ── Module toggle cards (feature flags) ── */
.peer:checked ~ .cp-check-indicator {
  border-color: var(--cp-brand);
  background-color: var(--cp-brand);
}
.peer:checked ~ .cp-check-card {
  border-color: var(--cp-brand);
  background-color: color-mix(in srgb, var(--cp-brand) 6%, var(--cp-bg-surface));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}
[data-theme="dark"] .peer:checked ~ .cp-check-card {
  background-color: color-mix(in srgb, var(--cp-brand) 12%, var(--cp-bg-surface));
}
.cp-accent-input { accent-color: var(--cp-brand); }

/* ── Overlay (mobile menu backdrop) ── */
.cp-overlay { background-color: rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .cp-overlay { background-color: rgba(0, 0, 0, 0.6); }