/*
  Hand-mirrors a subset of design-system/tokens.json for dashboard UI chrome only
  (buttons, panels, form fields). This file does NOT affect the generated slide —
  that composition lives entirely in core/slide-builder.js + design-system/*.
  Kept in sync manually in Phase 1; see dashboard/README.md known limitations.
*/

:root {
  --color-background: #111114;
  --color-panel: #1B1B1F;
  --color-border: #2B2A2E;
  --color-text-primary: #F5F2EC;
  --color-text-muted: #9C9AA0;
  --color-accent: #D62828;
  --color-accent-dark: #9E1B1B;
  --font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --spacing: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  line-height: 1.5;
}

.app-header {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--color-border);
}
.app-header h1 { margin: 0 0 4px; font-size: 24px; }
.app-subtitle { margin: 0; color: var(--color-text-muted); font-size: 14px; }

.tabs {
  display: flex;
  gap: 8px;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4) 0;
}
.tab-btn {
  background: var(--color-panel);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-bottom: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.tab-btn.active { color: var(--color-text-primary); background: var(--color-background); border-color: var(--color-accent); }

main { padding: calc(var(--spacing) * 4); max-width: 1100px; margin: 0 auto; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.input-form {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 3);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.field-row { display: flex; gap: 16px; }

label { font-size: 13px; color: var(--color-text-muted); }

textarea, select, input[type="text"] {
  background: var(--color-background);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

button {
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  border: 1px solid transparent;
}

.btn-primary { background: var(--color-accent); color: var(--color-text-primary); }
.btn-primary:hover { background: var(--color-accent-dark); }

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

.status { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--color-panel); font-size: 13px; }
.status.error { border: 1px solid var(--color-accent); color: var(--color-accent); }

.output-area { margin-top: 24px; }
.output-toolbar { display: flex; gap: 12px; margin-bottom: 16px; }

.channel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.channel-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.channel-card h3 { margin: 0 0 10px; font-size: 15px; color: var(--color-accent); }
.channel-card h4 { margin: 12px 0 4px; font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.channel-card p, .channel-card li { font-size: 14px; white-space: pre-line; }
.channel-card .copy-btn { margin-top: 10px; }

.copy-target { user-select: text; }

.editing-note { color: var(--color-text-muted); font-size: 12px; font-style: italic; }

.slide-preview-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.slide-preview { flex: 1; min-width: 320px; }
.slide-svg-container {
  background: #000;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 380px;
}
.slide-svg-container svg { display: block; width: 100%; height: auto; }
.slide-toolbar { display: flex; gap: 10px; margin-top: 10px; }
.slide-warnings { color: var(--color-accent); font-size: 12px; min-height: 16px; }

.limitation-note { color: var(--color-text-muted); font-size: 12px; margin-top: 20px; border-top: 1px solid var(--color-border); padding-top: 12px; }
.limitation-note code { background: var(--color-panel); padding: 1px 5px; border-radius: 4px; }

#distribution { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); }
#distribution h2 { margin-top: 0; }
.distribution-panel {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.distribution-toolbar { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.status.success { border: 1px solid #3a8f5c; color: #7fd9a0; }

.app-footer { padding: 20px calc(var(--spacing) * 4) 40px; color: var(--color-text-muted); font-size: 12px; border-top: 1px solid var(--color-border); margin-top: 40px; }