/* ════════════════════════════════════════════════════════════════════════════
   NOTES VIEWER — Student App for SLS Content
════════════════════════════════════════════════════════════════════════════ */

:root {
  --nv-primary: #2563eb;
  --nv-success: #10b981;
  --nv-warning: #f59e0b;
  --nv-danger: #ef4444;
  --nv-info: #0ea5e9;
  --nv-accent: #f59e0b;
  --nv-bg: #ffffff;
  --nv-bg-secondary: #f9fafb;
  --nv-text: #1f2937;
  --nv-text-secondary: #6b7280;
  --nv-border: #e5e7eb;
  --nv-spacing: 16px;
}

/* Notes viewer previously had only one (light) palette regardless of the
   app's own dark/light toggle — reading screen stayed light even in dark
   mode. Redefining the same tokens under .theme-dark lets every existing
   var(--nv-*) rule below adapt automatically, no need to touch each one. */
.theme-dark {
  --nv-bg: #0d1117;
  --nv-bg-secondary: #161b22;
  --nv-text: #e6edf3;
  --nv-text-secondary: #8b949e;
  --nv-border: #30363d;
}

#nv-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--nv-bg);
  color: var(--nv-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════════════
   TOOLBAR
════════════════════════════════════════════════════════════════════════════ */

.nv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--nv-spacing);
  background: var(--nv-bg);
  border-bottom: 1px solid var(--nv-border);
  gap: var(--nv-spacing);
  min-height: 56px;
  flex-wrap: wrap;
}

.nv-toolbar-left,
.nv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nv-toolbar-center {
  flex: 1;
  text-align: center;
}

.nv-app-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--nv-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nv-btn-back {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--nv-border);
  border-radius: 6px;
  color: var(--nv-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.nv-btn-back:active {
  background: var(--nv-bg-secondary);
}

.nv-mode-selector {
  display: flex;
  gap: 4px;
  background: var(--nv-bg-secondary);
  padding: 4px;
  border-radius: 8px;
}

.nv-mode-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nv-mode-btn:active,
.nv-mode-btn.active {
  background: var(--nv-bg);
  border-color: var(--nv-primary);
  color: var(--nv-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   SEARCH BAR
════════════════════════════════════════════════════════════════════════════ */

.nv-search-bar {
  padding: var(--nv-spacing);
  border-bottom: 1px solid var(--nv-border);
  background: var(--nv-bg);
}

.nv-search-input {
  width: 100%;
  max-width: 500px;
  padding: 10px 12px;
  border: 1px solid var(--nv-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.nv-search-input:focus {
  outline: 2px solid var(--nv-primary);
  outline-offset: -2px;
  border-color: var(--nv-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTENT AREA
════════════════════════════════════════════════════════════════════════════ */

#nv-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--nv-spacing);
}

.nv-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--nv-text-secondary);
  font-size: 16px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   CHAPTERS LIST
════════════════════════════════════════════════════════════════════════════ */

.nv-chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.nv-chapter-card {
  padding: 16px;
  background: var(--nv-bg-secondary);
  border: 1px solid var(--nv-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nv-chapter-card:active {
  background: var(--nv-bg);
  border-color: var(--nv-primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.nv-chapter-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--nv-text);
  line-height: 1.4;
}

.nv-chapter-batch {
  font-size: 12px;
  color: var(--nv-text-secondary);
}

/* ════════════════════════════════════════════════════════════════════════════
   CONCEPTS LIST
════════════════════════════════════════════════════════════════════════════ */

.nv-concepts-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 8px;
}

.nv-concept-item {
  width: 132px;
  background: var(--nv-bg-secondary);
  border: 1px solid var(--nv-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.nv-concept-item:active {
  transform: translateY(1px);
  border-color: var(--nv-primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.nv-concept-cover {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  background: linear-gradient(135deg, var(--nv-primary, #2563eb), #1e40af);
  color: #fff;
  position: relative;
}

.nv-concept-cover::after {
  /* spine shadow so the card reads as a book, not a plain tile */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: rgba(0,0,0,0.18);
}

.nv-concept-body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nv-concept-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--nv-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nv-concept-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nv-difficulty {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  text-transform: capitalize;
}

.nv-diff-easy {
  background: #dcfce7;
  color: #166534;
}

.nv-diff-medium {
  background: #fef3c7;
  color: #92400e;
}

.nv-diff-hard {
  background: #fee2e2;
  color: #991b1b;
}

.nv-tag {
  padding: 2px 8px;
  background: var(--nv-primary);
  color: white;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
}

.nv-tag-board_exam { background: #3b82f6; }
.nv-tag-important { background: #f59e0b; }
.nv-tag-repeated { background: #8b5cf6; }
.nv-tag-numerical { background: #ef4444; }
.nv-tag-theory { background: #06b6d4; }
.nv-tag-diagram { background: #10b981; }
.nv-tag-viva { background: #ec4899; }
.nv-tag-mcq { background: #6366f1; }

/* ════════════════════════════════════════════════════════════════════════════
   CONCEPT VIEW
════════════════════════════════════════════════════════════════════════════ */

.nv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--nv-spacing);
  margin-bottom: var(--nv-spacing);
  padding-bottom: var(--nv-spacing);
  border-bottom: 2px solid var(--nv-border);
}

.nv-title-section {
  flex: 1;
}

.nv-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--nv-text);
  line-height: 1.3;
}

.nv-controls {
  display: flex;
  gap: 8px;
}

.nv-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--nv-bg-secondary);
  border: 1px solid var(--nv-border);
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nv-btn-icon:active,
.nv-btn-icon.active {
  background: var(--nv-primary);
  border-color: var(--nv-primary);
  color: white;
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTENT MODES
════════════════════════════════════════════════════════════════════════════ */

.nv-section {
  margin-bottom: 24px;
}

.nv-section-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--nv-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Read Mode */

.nv-mode-read .nv-outcomes ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.nv-mode-read .nv-outcomes li {
  margin-bottom: 10px;
  color: var(--nv-text, #e6edf3);
  font-weight: 500;
}
.nv-mode-read .nv-outcomes li:last-child { margin-bottom: 0; }

.nv-content-body {
  font-size: 15px;
  line-height: 1.8;
}

.nv-paragraph {
  margin: 0 0 12px 0;
  white-space: pre-line; /* keep the line breaks admin actually typed */
}

/* **bold** text pasted from ChatGPT renders as <strong> (see _richText in
   notesViewer.js) — color it so emphasis is actually visible, not just heavier. */
.nv-content-body strong,
.nv-outcomes strong,
.nv-key-points strong,
.nv-revision-section strong {
  color: var(--nv-accent, #f59e0b);
}

.nv-outcomes li,
.nv-key-points li {
  white-space: pre-line;
  margin-bottom: 10px;
}

.nv-heading {
  margin: 24px 0 12px 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nv-text);
}

.nv-heading:first-child {
  margin-top: 0;
}

.nv-figure {
  margin: 16px 0;
  text-align: center;
  background: var(--nv-bg-secondary);
  border: 1px solid var(--nv-border);
  border-radius: 10px;
  padding: 14px 12px;
}

.nv-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.nv-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nv-text);
}

.nv-table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  border: 1px solid var(--nv-border);
  border-radius: 8px;
  overflow: hidden;
}

.nv-table td {
  padding: 12px;
  border: 1px solid var(--nv-border);
  text-align: left;
}

.nv-table tr:nth-child(odd) {
  background: var(--nv-bg-secondary);
}

.nv-note-box {
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 6px;
  border-left: 4px solid;
}

.nv-note-info {
  background: rgba(14,165,233,0.1);
  border-color: var(--nv-info);
  color: var(--nv-text);
}

.nv-note-warning {
  background: rgba(245,158,11,0.1);
  border-color: var(--nv-warning);
  color: var(--nv-text);
}

.nv-quote {
  margin: 16px 0;
  padding: 16px;
  border-left: 4px solid var(--nv-text-secondary);
  background: var(--nv-bg-secondary);
  font-style: italic;
  color: var(--nv-text-secondary);
}

.nv-quote p {
  margin: 0 0 8px 0;
}

.nv-quote footer {
  font-style: normal;
  color: var(--nv-text);
  font-weight: 500;
}

.nv-checklist {
  margin: 16px 0;
  padding-left: 24px;
  list-style: none;
}

.nv-checklist li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nv-checklist input {
  cursor: not-allowed;
  width: 18px;
  height: 18px;
}

.nv-divider {
  margin: 24px 0;
  border: none;
  border-top: 2px solid var(--nv-border);
}

/* Exam Mode */

.nv-mode-exam .nv-key-points ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.nv-mode-exam .nv-key-points li {
  margin-bottom: 0;
  padding: 10px 0;
  font-weight: 500;
  color: var(--nv-text);
  border-bottom: 1px dashed var(--nv-border, #30363d);
}
.nv-mode-exam .nv-key-points li:last-child {
  border-bottom: none;
}

.nv-formula-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--nv-bg-secondary, #161b22);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 14px 16px;
}

.nv-formula {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  margin-bottom: 8px;
}
.nv-formula:first-child code { font-weight: 700; color: #f59e0b; font-size: 15px; }
.nv-formula:not(:first-child) code { color: var(--nv-text-secondary, #8b949e); font-size: 13px; }
.nv-formula:last-child { margin-bottom: 0; }

.nv-formula code {
  font-weight: 500;
}

/* Revision Mode */

.nv-revision-box {
  background: none;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--nv-border, #30363d);
  overflow: hidden;
}
.nv-revision-box > h3 { padding: 14px 16px 0; }

.nv-revision-section {
  margin-bottom: 0;
  padding: 14px 16px;
}

.nv-revision-section + .nv-revision-section {
  border-top: 1px solid var(--nv-border, #30363d);
}

.nv-revision-remember { background: rgba(16,185,129,0.1); }
.nv-revision-mistakes { background: rgba(239,68,68,0.1); }
.nv-revision-examTips { background: rgba(139,92,246,0.1); }
.nv-revision-formulas { background: rgba(245,158,11,0.1); }

.nv-revision-section h4 {
  margin: 0 0 9px 0;
  font-size: 13px;
  font-weight: 700;
}
.nv-revision-remember h4 { color: #10b981; }
.nv-revision-mistakes h4 { color: #ef4444; }
.nv-revision-examTips h4 { color: #8b5cf6; }
.nv-revision-formulas h4 { color: #f59e0b; }

.nv-revision-section ul {
  margin: 0;
  padding-left: 20px;
}

.nv-revision-section li {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nv-text);
}

/* ════════════════════════════════════════════════════════════════════════════
   ATTACHMENTS
════════════════════════════════════════════════════════════════════════════ */

.nv-attachments {
  background: var(--nv-bg-secondary);
  padding: 16px;
  border-radius: 8px;
}

.nv-attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nv-attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--nv-bg);
  border: 1px solid var(--nv-border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--nv-primary);
  transition: all 0.2s;
}

.nv-attachment-item:active {
  background: var(--nv-primary);
  color: white;
  border-color: var(--nv-primary);
}

.nv-att-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.nv-att-title {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .nv-toolbar {
    flex-direction: column;
    padding: 8px;
  }

  .nv-toolbar-center {
    order: -1;
    width: 100%;
  }

  .nv-app-title {
    font-size: 16px;
  }

  .nv-mode-selector {
    width: 100%;
    justify-content: center;
  }

  .nv-chapters-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .nv-header {
    flex-direction: column;
  }

  .nv-title {
    font-size: 20px;
  }

  .nv-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

/* High-contrast (black) theme: the Notes reader used to stay light there. */
.theme-contrast {
  --nv-bg: #000000;
  --nv-bg-secondary: #0a0a0a;
  --nv-text: #ffffff;
  --nv-text-secondary: #e5e5e5;
  --nv-border: #555555;
}

/* Dark + black themes: body text white, headings and main points yellow. */
.theme-dark    { --nv-yellow: #facc15; --nv-accent: #facc15; }
.theme-contrast{ --nv-yellow: #ffff00; --nv-accent: #ffff00; }
.theme-dark .nv-title, .theme-contrast .nv-title,
.theme-dark .nv-section-title, .theme-contrast .nv-section-title,
.theme-dark .nv-heading, .theme-contrast .nv-heading,
.theme-dark .nv-concept-title, .theme-contrast .nv-concept-title,
.theme-dark .nv-key-points li, .theme-contrast .nv-key-points li,
.theme-dark .nv-revision-box > h3, .theme-contrast .nv-revision-box > h3,
.theme-dark .nv-mode-exam .nv-key-points li, .theme-contrast .nv-mode-exam .nv-key-points li { color: var(--nv-yellow); }
.theme-dark .nv-paragraph, .theme-contrast .nv-paragraph,
.theme-dark .nv-outcomes li, .theme-contrast .nv-outcomes li,
.theme-dark .nv-revision-section li, .theme-contrast .nv-revision-section li { color: #ffffff; }
.theme-dark .nv-content-body strong, .theme-contrast .nv-content-body strong { color: var(--nv-yellow); }

/* Touch-sized controls (min 44px) that say what they do, not just icons. */
.nv-mode-btn {
  width: auto;
  min-width: 44px;
  height: auto;
  min-height: 44px;
  padding: 0 10px;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--nv-text, inherit);
}
.nv-btn-icon {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nv-text, inherit);
}
#nv-bookmark-btn { font-size: 18px; }