/* =========================================================
   MANOUKE CLASSIC VIEW v3.1
========================================================= */

.grille-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 14px;
  padding: 3px;
  border: 1px solid #d7c8b5;
  border-radius: 9px;
  background: rgba(255,255,255,.72);
}

.grille-view-switcher-label {
  padding: 0 6px;
  color: #6b5a46;
  font-size: 12px;
  font-weight: 700;
}

.grille-view-switcher button {
  min-width: 74px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #5a4632;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.grille-view-switcher button:hover {
  background: rgba(222,201,162,.35);
}

.grille-view-switcher button.is-active {
  background: #f0d9b5;
  box-shadow: inset 0 0 0 1px rgba(90,70,50,.15);
}

.viewer-pane[hidden] {
  display: none !important;
}

#classicContent {
  width: 100%;
}

.classic-section {
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 7px 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.classic-section-title {
  margin: 0 0 8px;
}

.classic-section-note {
  margin-top: -3px;
  margin-bottom: 7px;
}

.classic-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 1220px;
}

.classic-bar.bar {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--manouke-classic-bar-height, 62px);
  margin: 0;
  padding: 8px 5px 5px;
  border: 1px solid #48423b;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  overflow: visible;
}

.classic-bar.bar:hover {
  box-shadow: inset 0 0 0 1px rgba(90,70,50,.12);
}

.classic-bar-inner {
  display: grid;
  grid-template-columns: repeat(var(--classic-slot-count, 4), minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  min-height: 42px;
}

.classic-event {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 2px;
  text-align: center;
}

.classic-event:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: rgba(70,62,55,.12);
}

.classic-chord {
  display: inline-block;
  max-width: 100%;
  color: #181818;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: var(--manouke-classic-chord-size, 15px);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  transform-origin: center center;
}

.classic-symbol {
  color: #333;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--manouke-classic-symbol-size, 19px);
  line-height: 1;
  white-space: nowrap;
}

.classic-bar .bar-number {
  top: 2px;
  left: 4px;
  min-width: 15px;
  padding: 0 3px;
  background: rgba(255,250,242,.72);
  font-size: 8px;
  line-height: 1.3;
}

.classic-bar .bar-overrides {
  top: 2px;
  right: 4px;
  flex-direction: row;
  gap: 3px;
  max-width: calc(100% - 36px);
}

.classic-bar .bar-override-badge {
  max-width: 82px;
  padding: 0 3px;
  font-size: 8px;
  line-height: 1.3;
}

.classic-bar.is-playback-active,
.classic-bar.is-playback-paused,
.classic-bar.is-playback-selected {
  z-index: 3;
}

body[data-grille-view-mode="classic"] #classicContent .playback-beat-strip {
  bottom: 3px;
}

@media (max-width: 980px) {
  .classic-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .classic-section {
    padding: 6px 0 9px;
  }

  .classic-bars {
    grid-template-columns: 1fr;
  }

  .classic-bar.bar {
    min-height: var(--manouke-classic-bar-height-mobile, 58px);
  }

  .classic-bar-inner {
    min-height: 39px;
  }

  .classic-chord {
    font-size: var(--manouke-classic-chord-size-mobile, 14px);
  }

  .classic-symbol {
    font-size: var(--manouke-classic-symbol-size-mobile, 18px);
  }
}

@media print {
  .grille-view-switcher {
    display: none !important;
  }

  body[data-grille-view-mode="classic"] #viewerGrillePane {
    display: none !important;
  }

  body[data-grille-view-mode="classic"] #viewerClassicPane {
    display: block !important;
  }

  .classic-section {
    break-inside: avoid;
    box-shadow: none;
  }
}