/*
 * Cadence — Digital Sheet Music Management Platform
 * Copyright © DoubTech. See LICENSE for terms.
 *
 * styles.css — Global design system and component styles for the Cadence web app.
 * Implements the Cadence brand: deep teal dark surfaces, Inter typography,
 * glassmorphic cards, and music-library UX patterns for all four views
 * (Music Viewer, Library, Playlists, Settings). All brand tokens are defined
 * as CSS custom properties in :root and drive the entire stylesheet.
 */

/* ─── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --c-primary:         #256980;
  --c-primary-light:   #3E93B0;
  --c-primary-dark:    #194A5A;
  --c-accent:          #7FD6D6;
  --c-accent-dark:     #4CB7B7;
  --c-bg:              #0F1418;
  --c-surface:         #172026;
  --c-surface-hover:   #22303A;
  --c-border:          #324450;
  --c-border-subtle:   rgba(50, 68, 80, 0.6);
  --c-text-primary:    #FFFFFF;
  --c-text-secondary:  #C5D1D8;
  --c-text-muted:      #8B9AA5;
  --c-success:         #3EBE7E;
  --c-warning:         #F4B942;
  --c-danger:          #E15D5D;

  /* Derived semantic */
  --c-focus:           #7FD6D6;
  --c-selection-bg:    rgba(127, 214, 214, 0.25);
  --c-selection-text:  #FFFFFF;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* Shape */
  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius:    var(--radius-sm);

  /* Spacing */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;

  /* Elevation / glass */
  --glass-blur:    16px;
  --glass-bg:      rgba(23, 32, 38, 0.88);
  --glass-border:  rgba(50, 68, 80, 0.7);
  --float-blur:    32px;
  --float-bg:      rgba(23, 32, 38, 0.94);

  /* Shadows */
  --shadow-card:  0 4px 16px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.22);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.22);

  /* Layout */
  --sidebar-width:   260px;
  --control-height:   44px;
  --content-max:    1540px;

  /* Transitions */
  --t-fast:  150ms ease;
  --t-base:  200ms ease;
  --t-slow:  300ms ease;

  /* Z-index scale */
  --z-base:    10;
  --z-sticky:  20;
  --z-overlay: 30;
  --z-modal:   50;
  --z-toast:   60;

  font-family: var(--font-sans);
}

/* ─── Reset & Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--c-bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--c-text-primary);
  background: var(--c-bg);
  font-size: 14px;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }

a { color: var(--c-accent); transition: color var(--t-fast); }
a:hover { color: var(--c-accent-dark); }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  color: var(--c-selection-text);
  background: var(--c-selection-bg);
}

/* ─── Utility ────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── App Shell ──────────────────────────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

/* ─── Sidebar ────────────────────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: linear-gradient(180deg, #111B22 0%, #0D161B 100%);
  border-right: 1px solid var(--c-border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Brand ── */
.brand {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-primary-dark);
  border: 1px solid rgba(50, 68, 80, 0.8);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-logo img {
  max-height: 22px;
  width: auto;
  object-fit: contain;
  display: block;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.panel h3 {
  margin: 0;
}

.brand h1 {
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.015em;
}

.brand p {
  margin-top: 2px;
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-divider {
  height: 1px;
  background: var(--c-border);
  opacity: 0.5;
  margin: 2px 0;
}

/* ── Nav ── */
.nav {
  display: grid;
  gap: 3px;
}

.nav-item {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  color: var(--c-text-secondary);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--c-text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.nav-item.active {
  color: var(--c-text-primary);
  background: rgba(37, 105, 128, 0.22);
  border-color: rgba(37, 105, 128, 0.5);
  box-shadow: inset 3px 0 0 var(--c-accent);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity var(--t-fast);
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity: 1; }

/* ── Status panels ── */
.status-panel {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--c-text-secondary);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.viewer-now {
  height: auto;
  min-height: 90px;
  margin-top: auto;
  display: grid;
  align-items: start;
  padding: 10px 12px;
}
.viewer-now strong {
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-warning);
  box-shadow: 0 0 0 2px rgba(244, 185, 66, 0.22);
  flex-shrink: 0;
}
.status-dot.ok {
  background: var(--c-success);
  box-shadow: 0 0 0 2px rgba(62, 190, 126, 0.25);
}
.status-dot.error {
  background: var(--c-danger);
  box-shadow: 0 0 0 2px rgba(225, 93, 93, 0.22);
}

.server-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.auth-panel { gap: 8px; }

.auth-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Main workspace ─────────────────────────────────────────────────── */
.workspace {
  min-width: 0;
  width: 100%;
  max-width: var(--content-max);
  padding: 20px;
}

/* ─── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, auto);
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.eyebrow {
  display: block;
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.topbar h2 {
  color: var(--c-text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.topbar-actions {
  display: grid;
  grid-template-columns: minmax(220px, 360px) repeat(2, max-content);
  align-items: center;
  gap: 8px;
}

/* ─── Search ─────────────────────────────────────────────────────────── */
.search,
.form input,
.form textarea {
  width: 100%;
  height: var(--control-height);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--c-text-primary);
  background: var(--c-surface);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.search,
.form input {
  height: var(--control-height);
  padding: 0 12px;
}

.form textarea {
  min-height: 132px;
  padding: 10px 12px;
  resize: vertical;
}

.search {
  min-width: 0;
  padding: 0 12px 0 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B9AA5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}

.search::placeholder,
.form input::placeholder,
.form textarea::placeholder { color: var(--c-text-muted); }

.search:hover,
.form input:hover,
.form textarea:hover { border-color: var(--c-primary); }

.search:focus,
.form input:focus,
.form textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(127, 214, 214, 0.15);
  background: var(--c-surface-hover);
}

.form input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* File input styling */
.form input[type="file"],
.upload-control,
.import-dropzone {
  min-height: 90px;
  border: 1.5px dashed var(--c-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  height: auto;
}
.form input[type="file"]:hover,
.upload-control:hover,
.import-dropzone:hover {
  border-color: var(--c-primary-light);
  background: rgba(37, 105, 128, 0.08);
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-height);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  color: var(--c-text-primary);
  background: var(--c-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.button:hover {
  background: var(--c-primary-light);
  border-color: var(--c-primary-light);
  box-shadow: 0 2px 10px rgba(37, 105, 128, 0.35);
}
.button:active { transform: translateY(1px); }

.button.secondary {
  color: var(--c-text-secondary);
  border-color: var(--c-border);
  background: rgba(255, 255, 255, 0.05);
}
.button.secondary:hover {
  color: var(--c-text-primary);
  background: var(--c-surface-hover);
  border-color: var(--c-primary);
}

/* ─── Views ──────────────────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ─── Layout: split ──────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 14px;
  align-items: start;
}

/* ─── Panels ─────────────────────────────────────────────────────────── */
.panel {
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.panel.narrow { max-width: 760px; }

.panel-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--c-border);
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.02);
}

.panel h3 {
  color: var(--c-text-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--c-border-subtle);
}

.section-header h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ─── Text helpers ───────────────────────────────────────────────────── */
.muted,
.help-text {
  color: var(--c-text-muted);
  font-size: 12px;
}

.help-text {
  margin: 0;
  border-top: 1px solid var(--c-border);
  padding: 10px 16px 12px;
  background: rgba(255, 255, 255, 0.02);
  line-height: 1.55;
}

/* ─── State bar ──────────────────────────────────────────────────────── */
.state-bar {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--c-text-secondary);
}
.state-bar.error {
  color: var(--c-danger);
  background: rgba(225, 93, 93, 0.07);
  border-top: 1px solid rgba(225, 93, 93, 0.2);
  border-bottom: 1px solid rgba(225, 93, 93, 0.2);
}
.state-message { margin: 0; }
.state-message.error { color: var(--c-danger); }

/* ─── Metrics ────────────────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.metric {
  min-height: 72px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.metric:hover { background: var(--c-surface-hover); }

.metric span {
  display: block;
  overflow: hidden;
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.06em;
}

.metric strong {
  display: block;
  margin-top: 6px;
  color: var(--c-text-primary);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ─── Table ──────────────────────────────────────────────────────────── */
.table-wrap {
  max-height: calc(100vh - 260px);
  min-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
}

table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  border-bottom: 1px solid var(--c-border-subtle);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  color: var(--c-text-muted);
  background: var(--c-surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

td:first-child { width: 42%; }

tbody tr {
  cursor: pointer;
  transition: background var(--t-fast);
}
tbody tr:hover { background: var(--c-surface-hover); }
tbody tr.selected {
  background: rgba(37, 105, 128, 0.18);
  box-shadow: inset 3px 0 0 var(--c-accent);
}
tbody tr:last-child td { border-bottom: 0; }

/* ─── Tags ───────────────────────────────────────────────────────────── */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag {
  min-height: 22px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0 8px;
  overflow: hidden;
  color: var(--c-accent);
  background: rgba(127, 214, 214, 0.08);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ─── Detail panel ───────────────────────────────────────────────────── */
.detail-panel { min-height: 420px; }

.detail-empty,
.detail-body {
  min-height: 120px;
  padding: 16px;
}

.detail-empty {
  display: grid;
  place-items: center;
  color: var(--c-text-muted);
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 12px,
    rgba(50, 68, 80, 0.1) 12px,
    rgba(50, 68, 80, 0.1) 24px
  );
  font-size: 13px;
}

.detail-body h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text-primary);
}
.detail-body > .muted { margin: 4px 0 0; }

/* ─── Doc / Playlist cards ───────────────────────────────────────────── */
.doc-list,
.stack {
  display: grid;
  gap: 8px;
}
.doc-list { padding: 12px 12px 0; }
.stack { padding: 12px; }

.doc-item,
.playlist-item {
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--c-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.doc-item:hover,
.playlist-item:hover {
  border-color: var(--c-primary);
  background: var(--c-surface-hover);
  box-shadow: var(--shadow-card);
}

.doc-item header,
.playlist-item header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.doc-item strong,
.playlist-item strong {
  min-width: 0;
  color: var(--c-text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.doc-item a {
  min-height: 32px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  color: var(--c-accent);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.doc-item a:hover { text-decoration: underline; }

.playlist-item {
  border-left: 3px solid var(--c-primary);
}
.playlist-item.error-card {
  border-color: rgba(225, 93, 93, 0.35);
  border-left-color: var(--c-danger);
  background: rgba(225, 93, 93, 0.06);
}

/* ─── Upload progress ────────────────────────────────────────────────── */
.upload-progress {
  display: grid;
  gap: 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--c-surface);
}
.upload-progress progress {
  width: 100%;
  height: 8px;
  accent-color: var(--c-accent);
}

/* ─── Queue ──────────────────────────────────────────────────────────── */
.playlist-item header .muted {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.playlist-controls,
.queue-controls,
.queue-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.playlist-text-builder {
  margin-top: 14px;
}

.playlist-match-preview {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.match-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.playlist-match-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface);
}

.playlist-match-item.unmatched {
  border-color: var(--warning-soft);
  background: var(--warning-soft);
}

.match-position {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 800;
}

.playlist-queue,
.queue-list {
  display: grid;
  gap: 6px;
  max-height: min(520px, 60vh);
  overflow: auto;
  padding: 10px 12px;
}

.queue-item {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--c-surface);
  font-size: 13px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.queue-item.active {
  border-color: var(--c-accent-dark);
  background: rgba(76, 183, 183, 0.12);
  box-shadow: inset 3px 0 0 var(--c-accent);
}

/* ─── Forms ──────────────────────────────────────────────────────────── */
.form {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.form label {
  display: grid;
  gap: 6px;
  color: var(--c-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

/* ─── Auth / status chips ────────────────────────────────────────────── */
.auth-state,
.user-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--c-text-secondary);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 600;
}
.auth-state.signed-in,
.user-chip.approved {
  border-color: rgba(62, 190, 126, 0.35);
  color: var(--c-success);
  background: rgba(62, 190, 126, 0.08);
}
.auth-state.pending,
.user-chip.pending,
.loading {
  border-color: rgba(244, 185, 66, 0.3);
  color: var(--c-warning);
  background: rgba(244, 185, 66, 0.06);
}

/* ─── Empty / error / loading states ────────────────────────────────── */
.empty-state,
.error-state,
.loading-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 24px;
  color: var(--c-text-muted);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.error-state {
  border-color: rgba(225, 93, 93, 0.28);
  color: var(--c-danger);
  background: rgba(225, 93, 93, 0.06);
}

.loading-state::before,
.loading::before {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  content: "";
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
  animation: spin 900ms linear infinite;
}

/* ─── Toast ──────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-toast);
  width: min(380px, calc(100vw - 40px));
  min-height: 44px;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--c-text-primary);
  background: var(--c-primary-dark);
  border: 1px solid var(--c-primary);
  box-shadow: var(--shadow-float);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  font-size: 13px;
  font-weight: 500;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: rgba(225, 93, 93, 0.2); border-color: var(--c-danger); }

/* ─── Modal ──────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 16, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.raw-pdf-modal { height: min(92vh, 980px); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--c-border);
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.02);
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.raw-pdf-frame {
  width: 100%;
  min-height: 72vh;
  border: 0;
  background: #ffffff;
}

/* ─── Legacy PDF modal (preserved for compatibility) ─────────────────── */
.pdf-modal,
.viewer-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--c-text-primary);
  background: rgba(8, 12, 16, 0.9);
}
.pdf-modal.open,
.viewer-modal.open,
.pdf-modal[open],
.viewer-modal[open] { display: grid; }

.pdf-viewer-header,
.viewer-header,
.pdf-viewer-footer,
.viewer-footer {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(12, 20, 26, 0.94);
  border-color: var(--c-border);
}
.pdf-viewer-header, .viewer-header { border-bottom: 1px solid var(--c-border); }
.pdf-viewer-footer, .viewer-footer { border-top: 1px solid var(--c-border); }

.pdf-canvas-wrap,
.viewer-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
}

.pdf-canvas,
.viewer-page,
.pdf-canvas-wrap canvas,
.viewer-stage canvas,
.viewer-stage iframe {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  background: #ffffff;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.4);
}

.viewer-stage iframe {
  width: min(100%, 1120px);
  height: 100%;
  min-height: 70vh;
  border: 0;
}

/* ─── Source docs ────────────────────────────────────────────────────── */
.source-doc-list {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.source-doc-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--c-surface);
  transition: background var(--t-fast);
}
.source-doc-item:hover { background: var(--c-surface-hover); }

.source-doc-item strong,
.source-doc-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.source-doc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Global error region ────────────────────────────────────────────── */
#globalErrorRegion {
  position: sticky;
  bottom: 16px;
  z-index: var(--z-overlay);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   GATE / LOGIN LANDING PAGE
   Temporary password gate — to be replaced by real SSO auth integration.
   The gate is shown before the main app shell when the user has not yet
   unlocked the app. It does not replace any existing auth DOM elements;
   the real auth panel in the sidebar remains intact for when real auth
   is wired up.
═══════════════════════════════════════════════════════════════════════ */

.gate-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--c-bg);
  /* wallpaper.png used sparingly as a subtle texture */
  background-image: url('/assets/branding/wallpaper.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Respect the [hidden] attribute: the class's display:flex would otherwise
   override the UA [hidden] rule and keep the gate visible after unlock. */
.gate-screen[hidden] {
  display: none;
}

/* Dark overlay so text stays readable over any bg image */
.gate-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 18, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.gate-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 40px 36px 36px;
  background: rgba(23, 32, 38, 0.9);
  backdrop-filter: blur(var(--float-blur));
  -webkit-backdrop-filter: blur(var(--float-blur));
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.gate-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.gate-app-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-primary-dark);
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 24px rgba(37, 105, 128, 0.3);
}
.gate-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gate-wordmark img {
  max-height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

.gate-tagline {
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: 300px;
}

.gate-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gate-form label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-secondary);
  width: 100%;
  text-align: left;
}

.gate-form input[type="password"] {
  width: 100%;
  height: var(--control-height);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  color: var(--c-text-primary);
  background: var(--c-surface);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  letter-spacing: 0.12em;
}
.gate-form input[type="password"]::placeholder {
  color: var(--c-text-muted);
  letter-spacing: 0;
}
.gate-form input[type="password"]:hover {
  border-color: var(--c-primary);
}
.gate-form input[type="password"]:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(127, 214, 214, 0.18);
}

.gate-submit {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-sm);
  padding: 0 20px;
  color: var(--c-text-primary);
  background: var(--c-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.gate-submit:hover {
  background: var(--c-primary-light);
  border-color: var(--c-primary-light);
  box-shadow: 0 4px 16px rgba(37, 105, 128, 0.4);
}
.gate-submit:active { transform: translateY(1px); }

.gate-error {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(225, 93, 93, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(225, 93, 93, 0.09);
  color: var(--c-danger);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  display: none;
}
.gate-error.visible { display: block; }

/* Lock button — shown inside sidebar (unobtrusive) */
.gate-lock-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--c-text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  width: 100%;
  justify-content: flex-start;
}
.gate-lock-button:hover {
  color: var(--c-text-secondary);
  border-color: var(--c-primary);
  background: rgba(37, 105, 128, 0.1);
}

/* When gate is active, hide the app shell cleanly */
body.gate-active .app-shell {
  visibility: hidden;
  pointer-events: none;
}

/* ─── Keyframes ──────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

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

@media (max-width: 1180px) {
  :root { --sidebar-width: 228px; }
  .workspace { padding: 16px; }
  .topbar { grid-template-columns: 1fr; }
  .topbar-actions { grid-template-columns: minmax(0, 1fr) repeat(2, max-content); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .detail-panel,
  .detail-empty,
  .detail-body { min-height: 260px; }
  .table-wrap { max-height: none; }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }

  .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }

  .nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav-item { text-align: center; justify-content: center; font-size: 12px; padding: 0 6px; }
  .nav-item.active { box-shadow: inset 0 -3px 0 var(--c-accent); }
  .nav-icon { display: none; }
  .sidebar-divider { display: none; }

  .status-panel { margin-top: 0; }
  .viewer-now { min-height: 60px; }

  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body { font-size: 13px; }
  .workspace { padding: 12px; }
  .topbar { gap: 10px; margin-bottom: 12px; }
  .topbar h2 { font-size: 20px; }
  .topbar-actions { grid-template-columns: 1fr 1fr; }
  .search { grid-column: 1 / -1; }
  .button { width: 100%; padding: 0 12px; }
  .metrics { gap: 8px; }
  .metric { min-height: 62px; padding: 10px; }
  .metric strong { font-size: 22px; }
  .panel-header { min-height: 48px; padding: 0 12px; }
  .table-wrap { min-height: 240px; }
  table { min-width: 560px; }
  th, td { padding: 9px 10px; }
  .detail-empty,
  .detail-body,
  .form,
  .stack { padding: 12px; }
  .doc-item header,
  .playlist-item header { display: grid; gap: 4px; }
  .toast { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  .pdf-viewer-header,
  .viewer-header,
  .pdf-viewer-footer,
  .viewer-footer { min-height: 48px; flex-wrap: wrap; }
  .pdf-canvas-wrap,
  .viewer-stage { padding: 8px; }
}

@media (max-width: 420px) {
  .brand { grid-template-columns: 40px minmax(0, 1fr); }
  .brand-mark { width: 40px; height: 40px; }
  .brand h1 { font-size: 15px; }
  .nav { gap: 3px; }
  .nav-item { padding: 0 4px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .topbar-actions { grid-template-columns: 1fr; }
  .panel-header { align-items: flex-start; flex-direction: column; justify-content: center; padding: 10px 12px; min-height: auto; }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   VIEWER-FIRST LAYOUT
   Music viewer is the primary surface; three columns: list | stage | parts.
═══════════════════════════════════════════════════════════════════════ */

.viewer-first .workspace {
  max-width: none;
  min-height: 100vh;
  overflow: visible;
}

body[data-view="viewer"] .viewer-first .workspace {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.viewer-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.viewer-topbar { margin-bottom: 10px; }

/* "Now viewing" sidebar status */
.viewer-now {
  height: auto;
  min-height: 90px;
  display: grid;
  align-items: start;
  padding: 10px 12px;
}
.viewer-now strong {
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Three-column grid */
.viewer-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 0.58fr) minmax(520px, 1.55fr) minmax(300px, 0.62fr);
  gap: 10px;
  align-items: stretch;
}

.viewer-library-panel,
.viewer-stage-panel,
.viewer-parts-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.viewer-library-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.viewer-parts-panel {
  grid-template-rows: auto auto min-content minmax(0, 1fr);
}

/* Compact metrics inside the viewer library panel */
.compact-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 8px;
  margin: 0;
  gap: 6px;
}
.compact-metrics .metric { min-height: 54px; padding: 8px 10px; box-shadow: none; }
.compact-metrics .metric strong { font-size: 19px; }

/* Piece list inside viewer */
.viewer-piece-list { min-height: 0; max-height: none; }
.viewer-piece-list table { min-width: 420px; }

/* Viewer stage: PDF display area — near-black for max contrast */
.viewer-stage-panel {
  overflow: hidden;
  background: #080E12;
  border-color: rgba(50, 68, 80, 0.5);
}

.viewer-toolbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(50, 68, 80, 0.6);
  padding: 10px 14px;
  color: var(--c-text-primary);
  background: rgba(10, 16, 20, 0.95);
}
.viewer-toolbar h3,
.viewer-toolbar p { margin: 0; }
.viewer-toolbar h3 { font-size: 14px; font-weight: 600; }
.viewer-toolbar .muted { color: var(--c-text-muted); }

.viewer-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.viewer-stage-primary {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050A0D;
}

.embedded-pdf-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

/* Viewer empty state */
.viewer-empty {
  width: min(460px, calc(100% - 32px));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 32px;
  color: var(--c-text-secondary);
  background: rgba(15, 20, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
}
.viewer-empty h3 {
  margin: 0 0 8px;
  color: var(--c-text-primary);
  font-size: 17px;
  font-weight: 700;
}
.viewer-empty p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.viewer-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--c-primary-light);
  opacity: 0.55;
}

/* Document cards */
.document-card { cursor: pointer; }
.document-card.selected {
  border-color: var(--c-accent-dark);
  background: rgba(76, 183, 183, 0.10);
  box-shadow: inset 3px 0 0 var(--c-accent);
}

.compact-detail { min-height: auto; padding-bottom: 0; }

.document-card-region {
  overflow: auto;
  overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════════════
   LIBRARY VIEW
═══════════════════════════════════════════════════════════════════════ */

.admin-layout .panel-header,
.import-panel .panel-header,
.settings-layout .panel-header {
  min-height: 64px;
}

.admin-settings-panel { min-height: 0; }

.library-management-layout {
  grid-template-columns: minmax(360px, 0.78fr) minmax(420px, 1.22fr);
}

/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS VIEW
═══════════════════════════════════════════════════════════════════════ */

.settings-layout { max-width: 980px; }

.settings-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(300px, 1.1fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
}

.settings-section { min-width: 0; }
.settings-section h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-secondary);
}

.index-maintenance { margin-top: 18px; }

/* Import results scroll container */
.import-results {
  max-height: 320px;
  overflow: auto;
  overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════════════
   WIDE VIEWER BREAKPOINTS
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1320px) {
  .viewer-first .workspace,
  body[data-view="viewer"] .viewer-first .workspace {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .viewer-grid {
    height: auto;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  }
  .viewer-parts-panel { grid-column: 1 / -1; }
  .viewer-stage-primary { min-height: 72vh; }
}

@media (max-width: 900px) {
  .library-management-layout,
  .settings-grid { grid-template-columns: 1fr; }
  .viewer-grid { grid-template-columns: 1fr; }
  .viewer-stage-panel { min-height: 72vh; }
  .viewer-toolbar { align-items: stretch; flex-direction: column; }
  .viewer-toolbar-actions { justify-content: stretch; }
  .viewer-toolbar-actions .button { flex: 1 1 120px; }
}

@media (max-width: 820px) {
  .nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .viewer-now { min-height: 60px; }
}