/* === SMuFL Font (Bravura) === */
@font-face {
  font-family: 'Bravura';
  src: url('/fonts/bravura.woff2') format('woff2'),
       url('/fonts/bravura.otf') format('opentype');
  font-display: block;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #1a1a2e; color: #e0e0e0; height: 100vh; overflow: hidden;
}

/* === App Layout === */
#app { display: flex; flex-direction: column; height: 100vh; }

/* === Header / Toolbar === */
header {
  background: #16213e; padding: 8px 16px; display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid #0f3460;
}
header h1 { font-size: 18px; color: #e94560; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
#page-info { font-size: 13px; color: #aaa; }

/* === Buttons === */
.btn, .btn-sm {
  background: #0f3460; color: #e0e0e0; border: 1px solid #1a4a8a;
  padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.btn:hover, .btn-sm:hover { background: #1a4a8a; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-secondary { background: #2a2a4a; border-color: #444; }
.btn-secondary:hover { background: #3a3a5a; }
.btn-record {
  background: #c0392b; color: white; border: none; padding: 12px 24px;
  font-size: 16px; font-weight: bold; width: 100%; border-radius: 6px;
}
.btn-record.recording { background: #555; color: #ccc; }
.btn-record:hover { filter: brightness(1.1); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-danger { background: #7a1a1a; border-color: #a33; }
.btn-danger:hover { background: #a02020; }
.toolbar-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.straighten-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#manual-straighten-panel { background: #1a1a2e; border: 1px solid #444; border-radius: 6px; padding: 6px 10px; }
.btn-close { background: transparent; border: none; color: #e94560; font-size: 16px; padding: 2px 8px; cursor: pointer; }
.btn-close:hover { color: #ff6b81; }

/* === Main layout === */
main { display: flex; flex: 1; overflow: hidden; position: relative; }

/* === PDF Viewer === */
#pdf-container {
  flex: 1; overflow: auto; display: flex; justify-content: center;
  background: #111; padding: 16px; position: relative;
}
#pdf-wrapper {
  position: relative; display: inline-block; min-width: 200px; min-height: 200px;
}
#pdf-image { display: block; max-width: none; }
#overlay-canvas {
  position: absolute; top: 0; left: 0; cursor: crosshair;
}
#pdf-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 400px; width: 500px; color: #555; font-size: 18px; border: 2px dashed #333;
  border-radius: 12px; cursor: pointer;
}
#pdf-placeholder .sub { font-size: 13px; margin-top: 8px; }
#pdf-wrapper.dragover #pdf-placeholder { border-color: #e94560; background: #1a1a3e; }

/* === Sidebar === */
#sidebar {
  position: absolute; top: 0; right: 0; width: 340px; height: 100%;
  background: #16213e; border-left: 1px solid #0f3460;
  z-index: 10; display: flex; flex-direction: column;
  box-shadow: -4px 0 15px rgba(0,0,0,0.4);
  transition: transform 0.25s ease;
}
#sidebar.collapsed {
  transform: translateX(100%);
}

/* === Tabs === */
.tabs { display: flex; background: #0f3460; }
.tab {
  flex: 1; padding: 10px 4px; background: transparent; color: #999;
  border: none; cursor: pointer; font-size: 12px; text-align: center;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: #ddd; }
.tab.active { color: #e94560; border-bottom-color: #e94560; }
.tab-content { display: none; flex: 1; overflow-y: auto; padding: 12px; }
.tab-content.active { display: flex; flex-direction: column; gap: 10px; }

/* === Voice Config === */
.voice-row {
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 4px;
  background: #1a1a3e;
}
.voice-row .color-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.voice-row .voice-name { flex: 1; font-size: 13px; }
.voice-row select { background: #0f3460; color: #e0e0e0; border: 1px solid #1a4a8a;
  padding: 3px 6px; border-radius: 3px; font-size: 12px; }
.voice-row input[type="checkbox"] { accent-color: #e94560; }

.staff-assign { margin-top: 8px; }
.staff-row {
  display: flex; align-items: center; gap: 6px; padding: 4px; font-size: 12px;
  background: #1a1a3e; border-radius: 3px; margin-bottom: 4px; cursor: pointer;
  transition: background 0.15s;
}
.staff-row:hover { background: #2a2a5e; }
.staff-row.selected {
  background: #0f3460; outline: 1px solid #e94560; outline-offset: -1px;
}

/* === Recorder tab === */
#recording-status { font-size: 13px; text-align: center; color: #888; }
.current-note {
  font-size: 36px; font-weight: bold; text-align: center; padding: 12px;
  min-height: 60px; color: #888;
}
.volume-bar {
  height: 6px; background: #333; border-radius: 3px; overflow: hidden;
}
#volume-fill { height: 100%; background: #e94560; transition: width 0.08s; }

/* === Notes list === */
#notes-list {
  display: flex; flex-direction: column; gap: 2px; max-height: 400px; overflow-y: auto;
}
.note-item {
  display: flex; justify-content: space-between; padding: 4px 8px;
  font-size: 13px; background: #1a1a3e; border-radius: 3px; font-family: monospace;
}

/* === Auth modal === */
#auth-modal input { width:100%; }
#auth-modal input[type="text"], #auth-modal input[type="email"], #auth-modal input[type="password"] {
  background: #0f3460; color: #e0e0e0; border: 1px solid #1a4a8a;
  padding: 8px 12px; border-radius: 4px; font-size: 14px;
}

/* === Misc === */
input[type="text"], input[type="number"], select {
  background: #0f3460; color: #e0e0e0; border: 1px solid #1a4a8a;
  padding: 4px 8px; border-radius: 3px; font-size: 13px;
}
input[type="range"] { width: 100%; accent-color: #e94560; }
label { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
label input, label select { width: 100%; }
#recording-voice-select label { flex-direction: row; align-items: center; font-size: 13px; gap: 4px; cursor: pointer; }
#recording-voice-select input[type="radio"] { accent-color: #e94560; }
#progress-bar { display: flex; align-items: center; gap: 10px; padding: 4px 16px; background: #0f3460; height: 24px; }
#progress-fill { height: 8px; background: #e94560; border-radius: 4px; transition: width 0.2s; min-width: 0; }
#progress-text { font-size: 12px; color: #ccc; white-space: nowrap; }

/* === Volume panel === */
.volume-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  background: #1a1a3e; border-radius: 4px; font-size: 13px;
}
.volume-row .color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.volume-row .vol-label { width: 48px; flex-shrink: 0; font-size: 12px; }
.volume-row input[type="range"] { flex: 1; height: 4px; margin: 0; padding: 0; accent-color: #e94560; }
.volume-row .vol-value { width: 28px; text-align: right; font-size: 11px; color: #aaa; }
.volume-row .vol-mute {
  background: none; border: 1px solid #444; color: #999; cursor: pointer;
  border-radius: 3px; padding: 2px 6px; font-size: 11px; flex-shrink: 0;
}
.volume-row .vol-mute:hover { background: #2a2a4a; }
.volume-row .vol-mute.muted { background: #3a1a1a; border-color: #633; }

/* === Inline voice editor === */
.voice-editor {
  position: absolute; z-index: 25; display: flex; flex-direction: column; gap: 4px;
  background: #16213e; border: 1px solid #e94560; border-radius: 6px; padding: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.voice-editor select, .voice-editor input {
  font-size: 13px; padding: 3px 6px; border-radius: 4px;
}
.voice-editor input[type="text"] { width: 140px; }
.voice-editor input[type="color"] { width: 30px; height: 24px; padding: 1px; border: none; cursor: pointer; }
#voice-editor-custom { display: flex; align-items: center; gap: 4px; }
.voice-editor-item {
  padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 13px;
  user-select: none; display: flex; align-items: center;
}
.voice-editor-item:hover { background: #1a4a8a; }
.voice-editor-item.selected { background: #0d3060; outline: 1px solid #4a8aff; }
.voice-editor-new { color: #888; font-style: italic; }
.voice-editor-new:hover { color: #ccc; }