/* ========================================================================
   MUNI SUITE - THEME.CSS
   ------------------------------------------------------------------------
   This file contains the aesthetic styling for the MUNI application,
   including colors, typography, and component styles. It relies on
   CSS variables for easy theme switching.
   ======================================================================== */

/* ========================================================================
   1. GLOBAL STYLES
   ======================================================================== */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  line-height: 1.333;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

hr {
  border: var(--border-width) solid var(--color-border);
}

code {
  font-family: var(--font-mono);
}

/* ========================================================================
   2. UTILITY & BEHAVIORAL CLASSES
   ======================================================================== */

:disabled,
[disabled] {
    opacity: 0.5;
}

::selection {
  background-color: var(--accent-muni);
  color: var(--text-inverted);
}

header,
#dashboard-view,
#view-switcher,
#settings-modal,
#open-file-modal {
  user-select: none;
}

/* ========================================================================
   3. CORE APP LAYOUT
   ======================================================================== */

#muni-logo-link {
  font-weight: bold;
  text-decoration: none;
  background: linear-gradient(to right, var(--color-book) 0%, var(--color-quest) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#muni-logo-link:hover {
  background: linear-gradient(to right, var(--color-quest) 0%, var(--color-book) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#header-project-title {
  font-weight: bold;
  font-family: var(--font-content);
}

#header-divider {
  color: var(--bg-tertiary);
}

header .pill {
  font-size: var(--font-xs);
}

/* ========================================================================
   4. DASHBOARD
   ======================================================================== */
.project-card,
.note-card {
  background-color: var(--bg-secondary);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-half);
}

.project-card:hover,
.note-card:hover {
  border-color: var(--text-secondary);
}

.project-card-content h3 {
  font-family: var(--font-content);
}

.project-card-footer {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.filter-btn.pill {
    background-color: transparent;
    border: var(--border-width) solid var(--color-border);
    color: var(--text-primary);
}

.filter-btn.pill:hover {
    border-color: var(--text-secondary);
}

.filter-btn.active {
    background-color: var(--accent-primary);
    color: var(--text-inverted);
    border-color: var(--accent-primary);
}

.filter-btn.pill-QUEST.active { background-color: var(--color-quest); border-color: var(--color-quest); }
.filter-btn.pill-BOOK.active  { background-color: var(--color-book);  border-color: var(--color-book);  }
.filter-btn.pill-NOTE.active  { background-color: var(--color-note);  border-color: var(--color-note);  }
.filter-btn.pill-LACE.active  { background-color: var(--color-lace);  border-color: var(--color-lace);  }


/* ========================================================================
   5. EDITOR (SHARED COMPONENTS)
   ======================================================================== */
/* --- Inputs, Buttons, & Pills --- */
input,
textarea,
select,
button {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-quarter);
}

select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

input:hover,
textarea:hover,
select:hover,
button:hover {
  border-color: var(--text-secondary);
}

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
  border-color: var(--accent-primary);
}

::placeholder {
  color: var(--text-secondary);
}

.button-accent {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.button-danger {
    color: var(--accent-danger);
    border-color: var(--accent-danger);
}

.pill {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: bold;
}

.pill-QUEST { background-color: var(--color-quest); color: var(--text-inverted); }
.pill-BOOK { background-color: var(--color-book); color: var(--text-inverted); }
.pill-NOTE { background-color: var(--color-note); color: var(--text-inverted); }
.pill-LACE { background-color: var(--color-lace); color: var(--text-inverted); }


/* --- View Switcher (Tabs) --- */
.view-switcher-btn {
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--text-secondary);
    border-bottom: var(--border-width) solid var(--color-border);
}

.view-switcher-btn:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-secondary);
}

.view-switcher-btn.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* --- Generic Table Inputs --- */
#quest-edit-table td input,
#quest-edit-table td textarea,
#events-table td input,
#lace-deck-table td input,
#lace-deck-table td select,
#lace-deck-table td textarea {
  /*background-color: transparent;
  border: none;
  border-bottom: var(--border-width) solid var(--color-border);
  border-radius: 0;*/
}

#quest-edit-table td input:focus,
#quest-edit-table td textarea:focus,
#events-table td input:focus,
#lace-deck-table td input:focus,
#lace-deck-table td select:focus,
#lace-deck-table td textarea:focus {
  /*border-bottom-color: var(--accent-primary);*/
}

/* --- Generic Preview Pane --- */
.prose-preview-container {
  font-family: var(--font-content);
}
.prose-preview-container h1 { font-size: var(--font-xl); }
.prose-preview-container h2 { font-size: var(--font-lg); }
.prose-preview-container h3 { font-size: var(--font-md); }
.prose-preview-container p { font-size: var(--font-md); }


/* ========================================================================
   6. PROJECT-SPECIFIC STYLES
   ======================================================================== */

/* --- 6.1 NOTE --- */
.card-content {
  font-family: var(--font-content);
}

#note-add-form {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-half);
}

#note-add-form textarea {
  font-family: var(--font-content);
}

/* --- 6.2. BOOK --- */
#book-manuscript-input,
#book-chapter-text-input,
#book-chapter-title-input {
  font-family: var(--font-content);
}

.chapter-item-button .truncate {
  font-family: var(--font-content);
  font-weight: bold;
}

.chapter-item-button .word-count {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
}

#book-word-count {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  text-align: center;
}

/* --- 6.3. QUEST --- */
.quest-table tr {
  background-color: var(--bg-secondary);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-half);
}

.quest-input-num,
.quest-input-title,
.quest-input-text,
.quest-input-links {
  font-family: var(--font-content);
}

.quest-input-title {
  font-weight: bold;
}

.quest-input-image {
  font-size: var(--font-sm);
}

#quest-dot-output {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
}

/* --- 6.4. LACE --- */
.deck-input-pip,
.deck-select-type,
.deck-input-name,
.deck-input-text,
.event-input-text {
  font-family: var(--font-content);
}

#deck-filter {
  display: flex;
  gap: var(--space-xs);
}

.deck-select-type {
  text-align: center;
}

.deck-input-name {
  font-weight: bold;
  text-align: center;
}

.event-balancer-header {}

.total-item .total-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.total-item .total-value {
  font-weight: bold;
}

.status-ok { color: var(--accent-ok); }
.status-warn { color: var(--accent-warn); }
.status-error { color: var(--accent-danger); }

.event-card {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-half);
}

.event-card-title {
  font-family: var(--font-content);
  text-align: center;
}

.event-req-item .event-req-label {
  color: var(--text-secondary);
  font-weight: bold;
}

#seed-input {
  font-family: var(--font-mono);
}

.lace-preview-card {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-half);
}

.play-info-bar {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.play-table {
  background-color: var(--bg-primary);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-half);
}

.play-card-name,
.fulfilled-card-sm {
  font-family: var(--font-content);
}

.story-log {
  background-color: var(--bg-primary);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-half);
}

.story-log strong {
  color: var(--accent-primary);
  font-weight: bold;
}

.play-card-display {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-half);
}

.play-card-display-pip {
  font-size: var(--font-xl);
  font-family: var(--font-content);
  font-weight: bold;
}

.event-stack {
  background-color: var(--bg-secondary);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-quarter);
}

.event-stack.active {
  border-color: var(--accent-primary);
}

.event-stack-text {
  font-style: italic;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.event-stack-cards {
  border-top: var(--border-width) dashed var(--color-border);
}

.fulfilled-card {
  font-size: var(--font-xs);
  background-color: var(--bg-primary);
  padding: var(--space-xs);
  border-radius: var(--radius-quarter);
}

/* ========================================================================
   7. MODALS & OVERLAYS
   ======================================================================== */
.modal {
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  background-color: var(--bg-secondary);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-half);
}

#project-name,
#import-title {
  font-family: var(--font-content);
}

.project-type-option {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-half);
    background-color: var(--bg-secondary);
    font-size: var(--font-sm);
}

.project-type-option:hover {
    border-color: var(--text-secondary);
}

.project-type-option.border-QUEST { border-color: var(--color-quest); }
.project-type-option.border-BOOK  { border-color: var(--color-book);  }
.project-type-option.border-NOTE  { border-color: var(--color-note);  }
.project-type-option.border-LACE  { border-color: var(--color-lace);  }

.data-viewer-content {
  font-size: var(--font-sm);
}

#file-drop-zone {
  background-color: transparent;
  color: var(--text-primary);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-quarter);
  cursor: pointer;
}

#file-drop-zone:hover {
  border-color: var(--text-secondary);
}

#toast-notification {
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  border: var(--border-width) solid var(--accent-primary);
  border-radius: var(--radius-quarter);
  font-size: var(--font-xs);
  font-weight: bold;
}