/* =================================
   GIBSON SWARM LIGHT THEME
   Clear distinction between UI and Generated Content
   ================================= */

/* Google Font Imports */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* =================================
   CSS VARIABLES
   ================================= */
:root {
  /* Fonts */
  --font-ui: 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;
  --font-generated: 'Courier Prime', 'Courier New', Courier, monospace;
  
  /* Colors for generated content */
  --generated-bg: #fdfcf9;
  --generated-border: #d4c9b0;
  --generated-text: #2c2416;
  
  /* Header/background colors */
  --header-bg: #0a0a0a;
  --header-accent: #00ff88;
}

/* =================================
   BLACK HEADER/BACKGROUND
   Clean, professional dark header
   ================================= */
body {
  background: var(--header-bg) !important;
  background-image: none !important;
}

.header,
header,
.app-header,
.main-header {
  background: var(--header-bg) !important;
  background-image: none !important;
}

/* Progress bar area */
.progress-container,
.step-progress,
.steps-container {
  background: var(--header-bg) !important;
  background-image: none !important;
}

/* Active step highlight - use accent color */
.step.active::before {
  background: var(--header-accent) !important;
  border-color: var(--header-accent) !important;
  color: var(--header-bg) !important;
}

.step.active span {
  color: var(--header-accent) !important;
}

/* Completed steps */
.step.completed::before,
.step.fully-complete::before {
  background: var(--header-accent) !important;
  border-color: var(--header-accent) !important;
  color: var(--header-bg) !important;
}

/* Progress bar fill */
.progress-bar-fill {
  background: var(--header-accent) !important;
  background-image: none !important;
}

/* Navigation buttons in header */
.guest-actions .nav-link,
.guest-actions .btn {
  background: transparent !important;
  border: 1px solid var(--header-accent) !important;
  color: var(--header-accent) !important;
}

.guest-actions .nav-link:hover,
.guest-actions .btn:hover {
  background: var(--header-accent) !important;
  color: var(--header-bg) !important;
}

/* Project buttons */
.project-actions .btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: white !important;
}

.project-actions .btn:hover {
  border-color: var(--header-accent) !important;
  color: var(--header-accent) !important;
}

/* =================================
   UI TYPOGRAPHY - Monospace (Modern/Technical)
   Everything defaults to JetBrains Mono
   ================================= */
body, html {
  font-family: var(--font-ui) !important;
}

h1, h2, h3, h4, h5, h6,
p, span, div, label, a, button, input, textarea, select,
.btn, .card, .modal-content, th, td,
.nav-link, .step, .step-description, .form-label,
.breadcrumb-btn, .breadcrumb-current,
.stat-label, .stat-value, .credits-badge {
  font-family: var(--font-ui) !important;
}

/* =================================
   GENERATED CONTENT - Typewriter (Literary/Script)
   Story content has Courier Prime for screenplay feel
   ================================= */

/* Act descriptions and content */
.act-description,
.act-description-text,
.dialogue-act-description p,
.act-card-description,
.structure-description,
.element-description {
  font-family: var(--font-generated) !important;
  background: var(--generated-bg) !important;
  border-left: 3px solid var(--generated-border) !important;
  padding: 12px 16px !important;
  color: var(--generated-text) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Scene content and descriptions */
.scene-description,
.scene-content,
.scene-text,
.hierarchical-scene-description,
.dialogue-scene-content,
.scene-item-description {
  font-family: var(--font-generated) !important;
  background: var(--generated-bg) !important;
  border-left: 3px solid var(--generated-border) !important;
  padding: 12px 16px !important;
  color: var(--generated-text) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Plot point descriptions */
.plot-point-description,
.plot-point-content,
.plot-point-text,
.hierarchical-plot-point-description {
  font-family: var(--font-generated) !important;
  background: var(--generated-bg) !important;
  border-left: 3px solid var(--generated-border) !important;
  padding: 12px 16px !important;
  color: var(--generated-text) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Dialogue/screenplay content */
.dialogue-content-text,
.dialogue-text,
.dialogue-block,
.screenplay-content,
.script-content,
.script-text {
  font-family: var(--font-generated) !important;
  background: var(--generated-bg) !important;
  color: var(--generated-text) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

/* Script preview and export */
.script-preview,
.script-preview pre,
.script-preview code,
.script-output,
.export-preview {
  font-family: var(--font-generated) !important;
  background: var(--generated-bg) !important;
  color: var(--generated-text) !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  white-space: pre-wrap !important;
}

/* Logline and synopsis */
.logline,
.synopsis,
.story-logline,
.story-synopsis,
#storyLogline,
#storySynopsis,
textarea[name="logline"],
textarea[name="synopsis"] {
  font-family: var(--font-generated) !important;
  background: var(--generated-bg) !important;
  border: 1px solid var(--generated-border) !important;
  color: var(--generated-text) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Template descriptions (story structure info) */
.template-description,
#selectedTemplateDescription {
  font-family: var(--font-generated) !important;
  font-style: italic;
  color: var(--generated-text) !important;
  line-height: 1.5 !important;
}

/* Editable content blocks (generated content that can be edited) */
.editable-content,
.editable-block-content,
[contenteditable="true"] {
  font-family: var(--font-generated) !important;
  background: var(--generated-bg) !important;
  color: var(--generated-text) !important;
}

/* Generic generated content class */
.generated,
.generated-content,
.ai-generated,
.story-content {
  font-family: var(--font-generated) !important;
  background: var(--generated-bg) !important;
  border-left: 3px solid var(--generated-border) !important;
  padding: 12px 16px !important;
  color: var(--generated-text) !important;
}

/* =================================
   GLOBAL BORDER-RADIUS REMOVAL
   Sharp corners throughout
   (Preserves step circles)
   ================================= */

/* Reset border-radius on most elements, but NOT step indicators */
*:not(.step):not(.step::before):not(.progress-meter):not(.progress-meter *) {
  border-radius: 0 !important;
}

/* Explicitly preserve circular step indicators */
.step::before {
  border-radius: 50% !important;
}

.progress-meter,
.progress-meter svg,
.progress-meter circle {
  border-radius: 50% !important;
}

/* Specific elements that commonly have rounded corners */
.btn, button,
input, textarea, select,
.card, .panel, .box,
.modal, .modal-content, .modal-header, .modal-body, .modal-footer,
.toast,
.dropdown-menu, .profile-menu,
.template-card, .template-info-card, .template-category,
.act-card, .act-cards-container,
.scene-item, .scene-card, .scene-group,
.plot-point-item, .plot-point-container,
.dialogue-entry, .dialogue-scene,
.character-tag, .influence-tag,
.badge, .tag, .chip,
.progress-bar, .progress-fill,
.nav-link,
.breadcrumb-btn,
.form-control, .input-group,
.alert, .notification,
.tooltip, .popover,
.tabs, .tab,
.slider, .toggle,
img {
  border-radius: 0 !important;
}

/* =================================
   CLEAN UP GRADIENTS
   Solid colors instead of gradients
   ================================= */
.btn-primary {
  background: #4a90d9 !important;
  background-image: none !important;
}

.btn-primary:hover {
  background: #3a7bc8 !important;
  background-image: none !important;
}

.btn-generate, .btn-generate-all {
  background: #48bb78 !important;
  background-image: none !important;
  color: white !important;
}

.btn-generate:hover, .btn-generate-all:hover {
  background: #38a169 !important;
  background-image: none !important;
}

/* Remove gradient backgrounds from header/progress */
.progress-bar-fill {
  background: #4a90d9 !important;
  background-image: none !important;
}

/* =================================
   UPPERCASE LABELS (Terminal style)
   ================================= */
label,
.form-label,
.section-title,
.card-header h2,
.card-header h3,
.step-breadcrumb .breadcrumb-current,
.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85em;
}

/* =================================
   CLEAN BORDERS
   Consistent 1px borders
   ================================= */
.card, .panel, .box,
.modal-content,
.template-card, .template-info-card,
.act-card,
.scene-item, .scene-card,
.plot-point-item,
.dialogue-entry,
input, textarea, select,
.form-control {
  border-width: 1px !important;
  border-style: solid !important;
}

/* =================================
   VISUAL INDICATOR FOR GENERATED CONTENT
   Subtle left border accent
   ================================= */
.act-description::before,
.scene-description::before,
.plot-point-description::before,
.dialogue-content-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--generated-border);
}

/* =================================
   SCROLLBARS (minimal)
   ================================= */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* =================================
   DIALOGUE FORMATTING
   Screenplay-style dialogue display
   ================================= */
.dialogue-character-name {
  font-family: var(--font-generated) !important;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  margin-top: 1em;
}

.dialogue-line,
.dialogue-speech {
  font-family: var(--font-generated) !important;
  margin-left: 1.5in;
  margin-right: 1.5in;
}

.dialogue-parenthetical {
  font-family: var(--font-generated) !important;
  font-style: italic;
  margin-left: 2in;
  margin-right: 2in;
}

.scene-heading,
.slugline {
  font-family: var(--font-generated) !important;
  text-transform: uppercase;
  font-weight: bold;
}

.action-line {
  font-family: var(--font-generated) !important;
}