/* ═══════════════════════════════════════════════════════════
   CenterNotes — Shared Module Theme (dark mode + UI uplift)
   Loaded after each module's own styles.css
   ═══════════════════════════════════════════════════════════ */

/* ── Dark: override CSS variables ───────────────────────────── */
html[data-theme="dark"] {
  --cn-bg:             #131210;
  --cn-surface:        #1c1a16;
  --cn-surface-raised: #26221c;
  --cn-ink:            #f0e6d5;
  --cn-ink-soft:       rgba(240, 230, 213, 0.7);
  --cn-muted:          rgba(240, 230, 213, 0.52);
  --cn-line:           rgba(240, 230, 213, 0.11);
  --cn-line-strong:    rgba(240, 230, 213, 0.18);
  
  --cn-card:           #1c1a16;
  --cn-card-border:    rgba(240, 230, 213, 0.12);
  --cn-card-hover:     rgba(240, 230, 213, 0.05);
  
  --cn-accent:         #d48355;
  --cn-accent-deep:    #c2693a;
  --cn-accent-wash:    rgba(212, 131, 85, 0.12);
  --cn-accent-glow:    rgba(212, 131, 85, 0.22);

  background: #131210 !important;
}

html[data-theme="dark"] body {
  background: #131210 !important;
}

/* ── Dark: App Shell & Panels ───────────────────────────────── */
html[data-theme="dark"] .hero {
  background: #26221c !important;
  border-color: rgba(240, 230, 213, 0.1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .control-panel .panel {
  background: #26221c !important;
  border-color: rgba(240, 230, 213, 0.1) !important;
}

html[data-theme="dark"] .preview-toolbar {
  background: #2e2921 !important;
  border-color: rgba(240, 230, 213, 0.1) !important;
}

/* ── Dark: Cards & Grid Items ─────────────────────────────── */
html[data-theme="dark"] .response-card,
html[data-theme="dark"] .cn-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(240, 230, 213, 0.1) !important;
  color: #f0e6d5 !important;
}

html[data-theme="dark"] .response-card[data-tone="monitor"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(72, 108, 97, 0.12)) !important;
}
html[data-theme="dark"] .response-card[data-tone="pickup"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(212, 168, 83, 0.12)) !important;
}
html[data-theme="dark"] .response-card[data-tone="urgent"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(194, 105, 58, 0.15)) !important;
}

/* ── Dark: Inputs ─────────────────────────────────────────── */
html[data-theme="dark"] .cn-input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(240, 230, 213, 0.16) !important;
  color: #f0e6d5 !important;
}

html[data-theme="dark"] .cn-input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(240, 230, 213, 0.35) !important;
}

/* ── Dark: Chips & Tags ───────────────────────────────────── */
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .token-chip,
html[data-theme="dark"] .cn-tag,
html[data-theme="dark"] .tag {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(240, 230, 213, 0.14) !important;
  color: #f0e6d5 !important;
}

html[data-theme="dark"] .filter-chip.is-active {
  background: var(--cn-accent) !important;
  color: #fff !important;
}

/* ── Dark: Module Bar ──────────────────────────────────────── */
.cn-module-bar, .module-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.module-bar-spacer { flex: 1; }

.module-bar-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--cn-line);
  flex-shrink: 0;
}

/* ── Theme Toggle Button Styles ────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--cn-radius-full);
  border: 1px solid var(--cn-line);
  background: var(--cn-surface-raised);
  color: var(--cn-ink-soft);
  font-size: var(--cn-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
  font-family: inherit;
}

.theme-toggle:hover {
  background: var(--cn-card-hover);
  color: var(--cn-ink);
  border-color: var(--cn-line-strong);
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(240, 230, 213, 0.22) !important;
  color: #f0e6d5 !important;
}

html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* ── Misc ─────────────────────────────────────────────────── */
html[data-theme="dark"] .mockup-banner {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(240, 230, 213, 0.1) !important;
}

html[data-theme="dark"] .locked-note,
html[data-theme="dark"] .response-status {
  color: var(--cn-accent) !important;
}

html[data-theme="dark"] .response-preview-copy::after {
  background: linear-gradient(180deg, rgba(19, 18, 16, 0), #131210) !important;
}

/* Print: always force light */
@media print {
  html[data-theme="dark"] {
    background: #fff !important;
    color: #000 !important;
  }
  html[data-theme="dark"] body {
    background: #fff !important;
  }
  html[data-theme="dark"] .theme-toggle {
    display: none !important;
  }
}

/* ── Mobile Compact Header (Shared) ────────────────────────── */
@media (max-width: 760px) {
  .module-bar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    margin-bottom: 1rem !important;
  }
  .suite-link {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.82rem !important;
  }
  #theme-toggle {
    margin-left: 0 !important;
    padding: 0.5rem 0.8rem !important;
  }
  .lang-switcher, .lang-toggle {
    width: 100% !important;
    margin-top: 0.4rem !important;
    padding-top: 0.6rem !important;
    border-top: 1px solid var(--cn-line);
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }
}