/* ============================================================
   Sangeet Notes Editor — Web App Styles
   ============================================================ */

/* ---------- Theme palette (light is the default; dark overrides
   on body[data-theme="dark"], set by ports.js setTheme handler
   and pre-applied by index.html before mount).

   Only the surface colours change between themes: background,
   surface, text, border, accent. The hex values mirror the
   desktop ThemeManager palettes in
   sangeet-desktop/src/main/resources/themes/sangeet-{light,dark}.css
   so users get a consistent look across platforms. Component
   rules below reference these vars so the rest of the stylesheet
   stays theme-agnostic. ---------- */

:root {
  --bg: #fafafa;
  --surface: #f5f5f5;
  --surface-alt: #ffffff;
  --text: #212121;
  --text-muted: #616161;
  --border: #e0e0e0;
  --border-strong: #bdbdbd;
  --accent: #e8a317;
  --accent-soft: rgba(232, 163, 23, 0.18);
}

body[data-theme='dark'] {
  --bg: #1e1b18;
  --surface: #2a2520;
  --surface-alt: #171411;
  --text: #e8dfd5;
  --text-muted: #c9beb0;
  --border: #3a332c;
  --border-strong: #4a4038;
  --accent: #e8a317;
  --accent-soft: rgba(232, 163, 23, 0.3);
}

/* ---------- Reset & Base ---------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans Devanagari', 'Noto Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

/* ---------- App Container ---------- */

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  outline: none;
}

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.editor-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ---------- File Browser Panel ---------- */

.file-browser-panel {
  width: 250px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.file-browser-collapsed {
  width: 40px;
  align-items: center;
  padding-top: 8px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  background: #e8eaf6;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #283593;
}

.panel-toggle-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #616161;
}

.panel-toggle-btn:hover {
  background: #c5cae9;
}

/* ---------- Drive Section ---------- */

.drive-section {
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
}

.drive-connect-btn {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid #1565c0;
  border-radius: 4px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.drive-connect-btn:hover {
  background: #bbdefb;
}

.drive-status {
  font-size: 12px;
  color: #757575;
}

.drive-connected {
  color: #2e7d32;
}

/* ---------- Folder Tree ---------- */

.folder-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.folder-tree-empty {
  padding: 16px 12px;
  font-size: 13px;
  color: #9e9e9e;
  text-align: center;
}

.folder-list,
.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-list {
  padding-left: 16px;
}

.folder-item {
  margin-bottom: 2px;
}

.folder-header {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  gap: 4px;
}

.folder-header:hover {
  background: #e8eaf6;
}

.folder-expand-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  color: #616161;
  width: 16px;
  text-align: center;
}

.folder-name {
  flex: 1;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-bookmark-btn,
.folder-action-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  color: #bdbdbd;
  opacity: 0;
  transition: opacity 0.15s;
}

.folder-header:hover .folder-bookmark-btn,
.folder-header:hover .folder-action-btn {
  opacity: 1;
}

.folder-bookmark-btn:hover {
  color: #f9a825;
}

.folder-action-btn:hover {
  color: #616161;
}

/* ---------- Drive Items ---------- */

.drive-item {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  gap: 4px;
}

.drive-item:hover {
  background: #e8eaf6;
}

.drive-item-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.drive-item-name {
  flex: 1;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-item-swar .drive-item-name {
  color: #1565c0;
}

.drive-item-actions {
  opacity: 0;
  transition: opacity 0.15s;
}

.drive-item:hover .drive-item-actions {
  opacity: 1;
}

.drive-item-action {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #bdbdbd;
  padding: 0 2px;
}

.drive-item-action:hover {
  color: #d32f2f;
}

/* ---------- Toolbar ---------- */

.toolbar {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.toolbar-row {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 4px;
  flex-wrap: wrap;
}

.toolbar-row-top {
  border-bottom: 1px solid var(--border);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar-separator {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
}

.toolbar-btn {
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-alt);
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  transition:
    background 0.15s,
    border-color 0.15s;
}

.toolbar-btn:hover {
  background: #e3f2fd;
  border-color: #90caf9;
}

.toolbar-btn:active {
  background: #bbdefb;
}

.toolbar-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.toolbar-btn:disabled:hover {
  background: var(--surface-alt);
  border-color: var(--border-strong);
}

.toolbar-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: 4px;
}

.toolbar-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e8eaf6;
  color: #283593;
}

.ornament-badge {
  background: #f3e5f5;
  color: #6a1b9a;
}

.beta-badge {
  background: #c75a1e;
  color: white;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* ---------- Script Select ---------- */

.script-select {
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

/* ---------- Section Tabs ---------- */

.section-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
}

.section-tab {
  padding: 4px 12px;
  border: 1px solid #bdbdbd;
  border-radius: 4px 4px 0 0;
  background: #ffffff;
  font-size: 13px;
  cursor: pointer;
  color: #616161;
  transition: background 0.15s;
  white-space: nowrap;
}

.section-tab:hover {
  background: #e8eaf6;
}

.section-tab-active {
  background: #c5cae9;
  color: #1a237e;
  font-weight: 600;
  border-bottom-color: #c5cae9;
}

.section-tab-add {
  font-weight: 700;
  color: #1565c0;
}

/* ---------- File Tabs ---------- */

.toolbar-row-tabs {
  background: #e8eaf6;
  border-bottom: 1px solid #c5cae9;
  padding: 2px 8px 0 8px;
}

.file-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
}

.file-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid #bdbdbd;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: #f5f5f5;
  font-size: 12px;
  cursor: pointer;
  color: #616161;
  white-space: nowrap;
  margin-right: 2px;
}

.file-tab:hover {
  background: #e0e0e0;
}

.file-tab-active {
  background: #ffffff;
  color: #1a237e;
  font-weight: 600;
  border-bottom-color: #ffffff;
}

.file-tab-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-tab-close {
  border: none;
  background: transparent;
  color: #9e9e9e;
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.file-tab-close:hover {
  color: #d32f2f;
}

.file-tab-add {
  font-weight: 700;
  color: #1565c0;
  border: 1px dashed #bdbdbd;
  border-bottom: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
}

.file-tab-add:hover {
  background: #e8eaf6;
}

/* ---------- Editor Header ---------- */

.editor-header {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #e8eaf6;
  border-bottom: 1px solid #c5cae9;
}

.header-info {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.header-chip {
  font-size: 12px;
  padding: 2px 8px;
  background: #ffffff;
  border: 1px solid #c5cae9;
  border-radius: 10px;
  color: #283593;
}

/* ---------- Main Content ---------- */

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.canvas-area {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.canvas-area-with-legend {
  flex: 1;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 16px;
  background: var(--surface);
}

/* ---------- Composition Header ---------- */

/* Metadata chips that live inside the consolidated editor header row. */
.header-chip-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-chip-label {
  font-weight: 600;
  color: #616161;
}

.header-chip-value {
  font-weight: 500;
  color: #212121;
}

/* Arohan/Avrohan line below the consolidated header chip row. */
.header-arohan-avrohan {
  font-size: 13px;
  color: #283593;
  display: flex;
  gap: 24px;
  padding: 4px 12px 0;
}

/* ---------- Notation Sections ---------- */

.notation-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-grid {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  background: var(--surface-alt);
}

.section-grid-active {
  border-color: #5c6bc0;
  box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
}

.section-title {
  font-size: 15px;
  color: #283593;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8eaf6;
}

.section-title-clickable {
  cursor: pointer;
  user-select: none;
}

.section-title-clickable:hover {
  color: #1a237e;
  background: rgba(92, 107, 192, 0.06);
}

.section-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------- Grid Line (Notation Table) ---------- */

.grid-line {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.grid-line td {
  padding: 2px 4px;
  text-align: center;
  vertical-align: middle;
  min-width: 48px;
}

.beat-cell {
  border-right: 1px solid #eeeeee;
}

.beat-cell.vibhag-break {
  border-right: 2px solid #9e9e9e;
}

/* Taal markers row */
.taal-marker-row td {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 4px;
}

.marker-sam {
  font-size: 14px;
  font-weight: 800;
}

/* Ornament row */
.ornament-row td {
  font-size: 11px;
  padding: 0 4px;
  height: 16px;
}

.ornament-indicator {
  font-style: italic;
}

/* Swar row */
.swar-row td {
  font-size: 18px;
  padding: 4px;
  min-height: 32px;
}

.swar-glyph {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 20px;
}

.swar-text {
  font-weight: 600;
  line-height: 1.2;
}

.swar-komal .swar-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.swar-tivra .swar-text {
  text-decoration: overline;
}

.octave-dots {
  font-size: 8px;
  line-height: 1;
  letter-spacing: 1px;
}

.octave-dots-above {
  position: relative;
  top: -2px;
}

.octave-dots-below {
  position: relative;
  bottom: -2px;
}

.beat-events {
  display: flex;
  justify-content: center;
  gap: 2px;
}

.cursor-cell {
  background: #e8eaf6;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  animation: cursor-blink 1s steps(2, end) infinite;
}

/* Two-frame opacity blink that mimics desktop's 500ms JavaFX Timeline.
   steps(2, end) flips between full and dim every 500ms (1s / 2 steps). */
@keyframes cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.selected {
  background: rgba(25, 118, 210, 0.15);
}

/* Stroke row */
.stroke-row td {
  font-size: 12px;
  padding: 1px 4px;
}

.stroke-indicator {
  font-weight: 500;
}

/* Sahitya row */
.sahitya-row td {
  font-size: 12px;
  padding: 1px 4px;
}

.sahitya-text {
  font-style: italic;
}

/* ---------- Keyboard Legend ---------- */

.keyboard-legend {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg);
  border-left: 1px solid var(--border);
}

.legend-title {
  font-size: 17px;
  color: #283593;
  margin-bottom: 12px;
}

.legend-section {
  margin-bottom: 12px;
}

.legend-section-title {
  font-size: 15px;
  color: #616161;
  margin-bottom: 4px;
  font-weight: 600;
}

.legend-table {
  width: 100%;
  font-size: 14px;
}

.legend-table td {
  padding: 2px 4px;
  vertical-align: top;
}

.legend-key {
  width: 100px;
}

.legend-key kbd {
  padding: 1px 5px;
  border: 1px solid #bdbdbd;
  border-radius: 3px;
  background: #ffffff;
  font-family: monospace;
  font-size: 13px;
  box-shadow: 0 1px 0 #e0e0e0;
}

.legend-desc {
  color: #616161;
}

/* ---------- Status Bar ---------- */

.status-bar {
  flex-shrink: 0;
  height: 80px;
  overflow-y: auto;
  padding: 4px 12px;
  background: #263238;
  color: #b0bec5;
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
}

.status-log {
  list-style: none;
}

.status-entry {
  padding: 1px 0;
  border-bottom: 1px solid #37474f;
}

/* ---------- Modal Dialogs ---------- */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-dialog {
  background: var(--surface-alt);
  color: var(--text);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  font-size: 18px;
  color: #1a237e;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  padding: 16px 24px;
}

.modal-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-about .modal-body p {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Support dialog uses the same body width as About so the UPI QR fits cleanly. */
.modal-support .modal-body p {
  margin-bottom: 8px;
  line-height: 1.5;
}

.about-link-inline {
  color: #8b1a1a;
  text-decoration: none;
}

.about-link-inline:hover {
  text-decoration: underline;
}

/* Command palette */
.palette-overlay {
  align-items: flex-start;
  padding-top: 80px;
}

.modal-palette {
  width: 600px;
  max-width: 90vw;
  padding: 0;
  overflow: hidden;
}

.palette-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d4c8b8;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
  background: transparent;
}

.palette-search::placeholder {
  color: #8a7964;
  font-style: italic;
}

.palette-results {
  max-height: 360px;
  overflow-y: auto;
}

.palette-empty {
  padding: 16px;
  text-align: center;
  color: #8a7964;
  font-style: italic;
  font-size: 13px;
}

.palette-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f5ede3;
}

.palette-row:last-child {
  border-bottom: none;
}

.palette-row:hover {
  background: rgba(176, 122, 62, 0.08);
}

.palette-row-selected {
  background: rgba(176, 122, 62, 0.18);
}

.palette-row-title {
  flex: 1;
  font-size: 13px;
  color: #2d2926;
}

.palette-row-group {
  font-size: 11px;
  color: #8a7964;
  font-style: italic;
}

.palette-row-shortcut {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: #6a5a4a;
  background: rgba(176, 122, 62, 0.12);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Keyboard cheat sheet dialog */
.modal-cheatsheet {
  width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}

.cheatsheet-hint {
  font-size: 12px;
  color: #6a5a4a;
  font-style: italic;
  margin-bottom: 12px;
  line-height: 1.5;
}

.cheatsheet-section {
  margin-top: 14px;
}

.cheatsheet-group-header {
  color: #5a2828;
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 6px;
}

.cheatsheet-rows {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cheatsheet-row {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  font-size: 12px;
  align-items: baseline;
}

.cheatsheet-keys {
  flex: 0 0 200px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  background: rgba(176, 122, 62, 0.12);
  color: #4a2f12;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.cheatsheet-label {
  color: #2d2926;
  flex: 1;
}

/* Bug report dialog */
.modal-bug-report {
  width: 520px;
}

.modal-bug-report textarea.form-input {
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.bug-report-disclosure {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f4f6fb;
  border-left: 3px solid #5a78b5;
  border-radius: 4px;
  color: #424242;
  font-size: 12px;
  line-height: 1.5;
}

.about-tech {
  font-size: 12px;
  color: #757575;
  font-style: italic;
}

.about-version {
  color: #5a2828;
  font-size: 13px;
  margin-top: -4px;
}

.about-beta-note {
  color: #6a3e1a;
  font-size: 12px;
  font-style: italic;
  margin: 4px 0 8px 0;
}

.about-section-header {
  color: #5a2828;
  font-size: 14px;
  margin: 12px 0 6px 0;
}

.about-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.about-links li {
  padding: 2px 0;
}

.about-links a {
  color: #8b1a1a;
  text-decoration: none;
}

.about-links a:hover {
  text-decoration: underline;
}

.about-support {
  background: #fdf6ec;
  padding: 10px 14px;
  border-left: 3px solid #e8a317;
  border-radius: 3px;
}

.about-support-row {
  margin: 6px 0;
}

.about-support-label {
  font-weight: 600;
  color: #5a2828;
}

.about-upi-handle {
  font-family: monospace;
  color: #2d2926;
}

.about-upi-qr {
  display: block;
  max-width: 160px;
  margin: 8px 0;
  border: 1px solid #d4c8b8;
  border-radius: 3px;
}

.about-license {
  font-size: 11px;
  color: #6a5a4a;
}

/* ---------- Form Elements ---------- */

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #424242;
  margin-bottom: 4px;
}

.form-group-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group-checkbox label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
}

.form-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.form-input:focus {
  outline: none;
  border-color: #5c6bc0;
  box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
}

.form-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  background: #ffffff;
}

.form-select:focus {
  outline: none;
  border-color: #5c6bc0;
  box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
}

/* ---------- Buttons ---------- */

.btn {
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary {
  background: #3f51b5;
  color: #ffffff;
}

.btn-primary:hover {
  background: #303f9f;
}

.btn-secondary {
  background: #ffffff;
  color: #424242;
  border-color: #bdbdbd;
}

.btn-secondary:hover {
  background: #f5f5f5;
}

/* ---------- Loading Indicator ---------- */

.loading-indicator {
  position: fixed;
  top: 8px;
  right: 8px;
  padding: 4px 12px;
  background: #fff9c4;
  border: 1px solid #f9a825;
  border-radius: 4px;
  font-size: 12px;
  color: #f57f17;
  z-index: 999;
}