/* ══════════════════════════════════════════════════════════════════════════
   LESSONIFY — POLISH FIX (v2)
   Save as /css/sidebar-fix.css
   Load AFTER dashboard.css, dark-mode.css, presenter.css in dashboard.html

   Fixes in this file:
   1. Sidebar footer (theme toggle) stays pinned inside sidebar
   2. New panel visibility (Differentiation, Parent Comms, Adjustments, Comment Bank)
   3. Text readability in dark mode on all new panels
   4. Consistent backgrounds between left input area and right output area
   5. Proper spacing between labels and input fields
   6. Sidebar brand (Lessonify logo) respects light mode when toggled
   7. "Lessonify Teaching Assistant" header disappearing in light mode
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   PART 1: SIDEBAR LAYOUT (always dark, regardless of theme)
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar always stays dark/charcoal — it's the brand anchor */
#sidebar {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  overflow: hidden !important;
  background: #1A1F25 !important; /* Always dark */
}

html[data-theme="dark"] #sidebar {
  background: #0D1015 !important; /* Even darker in dark mode */
}

/* Logo area always readable */
#sidebar .sidebar-logo {
  flex-shrink: 0 !important;
  color: white !important;
}

#sidebar .sidebar-logo-text {
  color: white !important;
}

#sidebar .sidebar-logo-sub {
  color: rgba(255,255,255,0.5) !important;
}

/* Nav items area with proper scrolling */
#sidebar .sidebar-nav {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#sidebar .sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

#sidebar .sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* Section labels (TOOLS, LIBRARY) readable in both themes */
#sidebar .sidebar-section-label {
  color: rgba(255,255,255,0.35) !important;
}

/* Nav items always use dark sidebar styling regardless of theme */
#sidebar .nav-item {
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
}

#sidebar .nav-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: white !important;
}

#sidebar .nav-item.active {
  background: rgba(107,175,122,0.15) !important;
  color: #7BB388 !important;
}

/* Footer pinned to bottom */
#sidebar .sidebar-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* User pill always dark-themed */
#sidebar .user-pill {
  background: rgba(255,255,255,0.05) !important;
}

#sidebar .user-name {
  color: white !important;
}

/* Upgrade button always gold-themed */
#sidebar #upgradeBtn {
  background: rgba(212,166,68,0.15) !important;
  border-color: rgba(212,166,68,0.3) !important;
}

#sidebar #upgradeBtn .upgrade-text {
  color: #E0B04E !important;
}

#sidebar #upgradeBtn .upgrade-sub {
  color: rgba(224,176,78,0.7) !important;
}

/* Theme toggle button always visible on dark sidebar */
#themeToggleBtn {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  color: white !important;
}

#themeToggleBtn:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.3) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PART 2: PANEL VISIBILITY
   ══════════════════════════════════════════════════════════════════════════ */

#main > .panel {
  display: none;
}

#main > .panel.active {
  display: block !important;
}

/* New tool panels use grid layouts internally */
#main > .panel.active .diff-layout,
#main > .panel.active .pc-layout,
#main > .panel.active .adj-layout,
#main > .panel.active .cb-layout {
  display: grid !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PART 3: NEW TOOL PANELS — LIGHT MODE (default)
   ══════════════════════════════════════════════════════════════════════════ */

/* Panel containers should have no padding — the layout has its own */
#panel-diff, #panel-pc, #panel-adj, #panel-cb {
  padding: 0 !important;
}

/* Left sidebar of each tool (inputs) */
.diff-sidebar,
.pc-sidebar,
.adj-sidebar,
.cb-sidebar {
  background: #FAF6EF !important; /* Match main paper background */
  border-right: 1px solid rgba(15,14,12,0.08) !important;
  padding: 1.5rem !important;
  gap: 1.1rem !important; /* More breathing room */
}

/* Right output area */
.diff-output-area,
.pc-output-area,
.adj-output-area,
.cb-output-area {
  background: #FFFFFF !important;
  padding: 1.5rem !important;
}

/* Input labels — proper spacing */
.diff-sidebar .input-label,
.pc-sidebar .input-label,
.adj-sidebar .input-label,
.cb-sidebar .input-label {
  color: rgba(15,14,12,0.6) !important;
  margin-bottom: 0.4rem !important;
  display: block;
}

/* Input fields — sharper, more spacing */
.diff-sidebar .input-field,
.pc-sidebar .input-field,
.adj-sidebar .input-field,
.cb-sidebar .input-field {
  background: white !important;
  border: 1.5px solid rgba(15,14,12,0.12) !important;
  color: var(--ink) !important;
  padding: 0.6rem 0.85rem !important;
}

.diff-sidebar .input-field:focus,
.pc-sidebar .input-field:focus,
.adj-sidebar .input-field:focus,
.cb-sidebar .input-field:focus {
  border-color: var(--sage) !important;
  box-shadow: 0 0 0 3px rgba(74,103,65,0.1) !important;
}

/* Panel heading + subtitle */
.diff-sidebar > div:first-child,
.pc-sidebar > div:first-child,
.adj-sidebar > div:first-child,
.cb-sidebar > div:first-child {
  margin-bottom: 0.3rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   PART 4: NEW TOOL PANELS — DARK MODE
   ══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .diff-sidebar,
html[data-theme="dark"] .pc-sidebar,
html[data-theme="dark"] .adj-sidebar,
html[data-theme="dark"] .cb-sidebar {
  background: #181C21 !important;
  border-right-color: rgba(255,255,255,0.07) !important;
}

html[data-theme="dark"] .diff-output-area,
html[data-theme="dark"] .pc-output-area,
html[data-theme="dark"] .adj-output-area,
html[data-theme="dark"] .cb-output-area {
  background: #1E2228 !important;
}

/* Headings in dark mode */
html[data-theme="dark"] .diff-sidebar > div:first-child > div:first-child,
html[data-theme="dark"] .pc-sidebar > div:first-child > div:first-child,
html[data-theme="dark"] .adj-sidebar > div:first-child > div:first-child,
html[data-theme="dark"] .cb-sidebar > div:first-child > div:first-child {
  color: #E8EDF3 !important;
}

html[data-theme="dark"] .diff-sidebar > div:first-child > div:nth-child(2),
html[data-theme="dark"] .pc-sidebar > div:first-child > div:nth-child(2),
html[data-theme="dark"] .adj-sidebar > div:first-child > div:nth-child(2),
html[data-theme="dark"] .cb-sidebar > div:first-child > div:nth-child(2) {
  color: rgba(232,237,243,0.55) !important;
}

/* Labels in dark mode */
html[data-theme="dark"] .diff-sidebar .input-label,
html[data-theme="dark"] .pc-sidebar .input-label,
html[data-theme="dark"] .adj-sidebar .input-label,
html[data-theme="dark"] .cb-sidebar .input-label {
  color: rgba(232,237,243,0.6) !important;
}

/* Input fields in dark mode */
html[data-theme="dark"] .diff-sidebar .input-field,
html[data-theme="dark"] .pc-sidebar .input-field,
html[data-theme="dark"] .adj-sidebar .input-field,
html[data-theme="dark"] .cb-sidebar .input-field {
  background: #252B33 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #E8EDF3 !important;
}

html[data-theme="dark"] .diff-sidebar .input-field:focus,
html[data-theme="dark"] .pc-sidebar .input-field:focus,
html[data-theme="dark"] .adj-sidebar .input-field:focus,
html[data-theme="dark"] .cb-sidebar .input-field:focus {
  border-color: #6BAF7A !important;
  background: #2D3440 !important;
}

html[data-theme="dark"] .diff-sidebar .input-field::placeholder,
html[data-theme="dark"] .pc-sidebar .input-field::placeholder,
html[data-theme="dark"] .adj-sidebar .input-field::placeholder,
html[data-theme="dark"] .cb-sidebar .input-field::placeholder {
  color: rgba(232,237,243,0.3) !important;
}

/* Options inside selects use dark background */
html[data-theme="dark"] .diff-sidebar option,
html[data-theme="dark"] .pc-sidebar option,
html[data-theme="dark"] .adj-sidebar option,
html[data-theme="dark"] .cb-sidebar option {
  background: #1E2228 !important;
  color: #E8EDF3 !important;
}

html[data-theme="dark"] .diff-sidebar optgroup,
html[data-theme="dark"] .pc-sidebar optgroup,
html[data-theme="dark"] .adj-sidebar optgroup,
html[data-theme="dark"] .cb-sidebar optgroup {
  background: #252B33 !important;
  color: #6BAF7A !important;
}

/* Type toggle buttons (Lesson activity, Reading text, etc) */
html[data-theme="dark"] .diff-type-btn,
html[data-theme="dark"] .pc-type-card,
html[data-theme="dark"] .pc-tone-btn,
html[data-theme="dark"] .adj-level-btn,
html[data-theme="dark"] .adj-dis-pill,
html[data-theme="dark"] .cb-level-btn {
  background: #252B33 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(232,237,243,0.7) !important;
}

html[data-theme="dark"] .diff-type-btn.active,
html[data-theme="dark"] .pc-type-card.active,
html[data-theme="dark"] .pc-tone-btn.active,
html[data-theme="dark"] .adj-level-btn.active,
html[data-theme="dark"] .adj-dis-pill.selected,
html[data-theme="dark"] .cb-level-btn.active {
  background: rgba(107,175,122,0.15) !important;
  border-color: #6BAF7A !important;
  color: #6BAF7A !important;
}

/* Type card name text */
html[data-theme="dark"] .pc-type-card .pc-type-name {
  color: rgba(232,237,243,0.85) !important;
}

html[data-theme="dark"] .pc-type-card.active .pc-type-name {
  color: #6BAF7A !important;
}

/* Level description below buttons */
html[data-theme="dark"] #adj-levelDesc {
  color: rgba(232,237,243,0.55) !important;
}

/* Gen button stays sage in both themes */
.diff-sidebar .gen-btn,
.pc-sidebar .gen-btn,
.adj-sidebar .gen-btn,
.cb-sidebar .gen-btn {
  background: var(--sage) !important;
  color: white !important;
  padding: 0.85rem 1rem !important;
  font-size: 0.88rem !important;
  margin-top: 0.5rem !important;
}

/* Usage hint below gen button */
html[data-theme="dark"] .usage-hint {
  color: rgba(232,237,243,0.5) !important;
}

/* Placeholder text in output area (dark mode) */
html[data-theme="dark"] #df-placeholder,
html[data-theme="dark"] #pc-placeholder,
html[data-theme="dark"] #adj-placeholder,
html[data-theme="dark"] #cb-placeholder {
  color: rgba(232,237,243,0.3) !important;
}

html[data-theme="dark"] #df-placeholder p,
html[data-theme="dark"] #pc-placeholder p,
html[data-theme="dark"] #adj-placeholder p,
html[data-theme="dark"] #cb-placeholder p {
  color: rgba(232,237,243,0.5) !important;
}

/* Output cards (generated content) */
html[data-theme="dark"] .diff-tier-card,
html[data-theme="dark"] .pc-message-card,
html[data-theme="dark"] .adj-section,
html[data-theme="dark"] .cb-comment-card {
  background: #252B33 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .diff-content-block {
  background: #1E2228 !important;
  color: #E8EDF3 !important;
}

html[data-theme="dark"] .pc-message-body,
html[data-theme="dark"] .adj-section-body,
html[data-theme="dark"] .cb-comment-text {
  color: #E8EDF3 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PART 5: TOPBAR RIGHT BUTTONS (Home, New Lesson) — dark mode fix
   ══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .topbar {
  background: #1A1F25 !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}

html[data-theme="dark"] .topbar-title {
  color: #E8EDF3 !important;
}

html[data-theme="dark"] .topbar-sub {
  color: rgba(232,237,243,0.55) !important;
}

html[data-theme="dark"] .topbar-btn {
  background: transparent !important;
  border-color: rgba(107,175,122,0.3) !important;
  color: #6BAF7A !important;
}

html[data-theme="dark"] .topbar-btn:hover {
  background: rgba(107,175,122,0.1) !important;
}

html[data-theme="dark"] .topbar-btn.primary {
  background: #6BAF7A !important;
  color: #0F1A13 !important;
  border-color: #6BAF7A !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PART 6: SPACING FIXES FOR NEW PANELS
   ══════════════════════════════════════════════════════════════════════════ */

/* Make sure input-group has proper gap between label and field */
.diff-sidebar .input-group,
.pc-sidebar .input-group,
.adj-sidebar .input-group,
.cb-sidebar .input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

/* Type toggle/pill rows need breathing room from label */
.diff-type-toggle,
.pc-type-grid,
.pc-tone-row,
.adj-disability-pills,
.adj-level-row,
.cb-level-row {
  margin-top: 0.15rem;
}

/* Panel title + subtitle spacing */
.diff-sidebar > div:first-child > div:first-child,
.pc-sidebar > div:first-child > div:first-child,
.adj-sidebar > div:first-child > div:first-child,
.cb-sidebar > div:first-child > div:first-child {
  margin-bottom: 0.35rem !important;
}

.diff-sidebar > div:first-child > div:nth-child(2),
.pc-sidebar > div:first-child > div:nth-child(2),
.adj-sidebar > div:first-child > div:nth-child(2),
.cb-sidebar > div:first-child > div:nth-child(2) {
  line-height: 1.55 !important;
}