/* Guitar Pro viewer on the tab page. Loaded only for Guitar Pro tabs, see
   templates/next/tabs/tab-index.php and js/gp-viewer.js. */

.gp-viewer {
    --gp-border: #d9dde3;
    --gp-surface: #fff;
    --gp-bar: #f4f5f0;
    --gp-text: #222;
    --gp-muted: #6b7280;
    --gp-accent: #88B10E;

    margin: 1em 0;
    color: var(--gp-text);
    /* The toolbar layout depends on the room it has (container queries at
       the end), not on the screen width. */
    container: gp-viewer / inline-size;
}

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

.gp-toolbar {
    position: sticky;
    top: 0;
    /* Above the score (z-index 0), below the page's popups (.action-popup,
       z-index 2) such as the "mer" menu. */
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 0.8em;
    padding: 0.5em;
    background: var(--gp-bar);
    border: 1px solid var(--gp-border);
    border-radius: 4px;
    font-size: 0.85em;
}

.gp-toolbar button,
.gp-toolbar select {
    font: inherit;
    color: inherit;
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    border-radius: 4px;
    padding: 0.3em 0.6em;
    min-height: 2.2em;
}

.gp-toolbar button {
    cursor: pointer;
}

.gp-toolbar button:disabled,
.gp-toolbar select:disabled {
    opacity: 0.5;
    cursor: default;
}

.gp-toolbar .gp-play {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    color: #fff;
    font-weight: bold;
}

.gp-toolbar .gp-play i {
    margin-right: 0.2em;
}

.gp-time {
    font-variant-numeric: tabular-nums;
    color: var(--gp-muted);
    min-width: 6.5em;
}

.gp-field span,
.gp-zoom-label {
    color: var(--gp-muted);
}

.gp-tracks-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    max-width: 18em;
}

.gp-tracks-label {
    color: var(--gp-muted);
}

.gp-track-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-toolbar .gp-tracks-toggle[aria-expanded="true"] {
    background: var(--gp-border);
}

/* Metronome and loop: toggle buttons with an icon and a label. */
.gp-toolbar .gp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    white-space: nowrap;
}

.gp-toolbar .gp-toggle[aria-pressed="true"] {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    color: #fff;
}

.gp-zoom {
    margin-left: auto;
    white-space: nowrap;
}

.gp-zoom button {
    min-width: 2.2em;
    font-weight: bold;
}

/* Track panel (show, mute, solo, volume), a full-width row of the toolbar,
   opened with the "Spor" button. */
.gp-mixer {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(5em, 10em);
    gap: 0.3em 0.5em;
    align-items: center;
    padding-top: 0.5em;
    border-top: 1px solid var(--gp-border);
    max-height: 40vh;
    overflow-y: auto;
}

.gp-mixer-row {
    display: contents;
}

.gp-toolbar .gp-show {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    background: transparent;
    border-color: transparent;
}

.gp-toolbar .gp-show:hover {
    border-color: var(--gp-border);
}

/* The track that is drawn. */
.gp-toolbar .gp-mixer-row.gp-shown .gp-show {
    background: var(--gp-surface);
    border-color: var(--gp-accent);
    font-weight: bold;
}

.gp-mixer-row.gp-silent .gp-show {
    color: var(--gp-muted);
    text-decoration: line-through;
}

.gp-toolbar .gp-mute,
.gp-toolbar .gp-solo {
    min-width: 2.2em;
    font-weight: bold;
}

.gp-toolbar .gp-mute[aria-pressed="true"] {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

.gp-toolbar .gp-solo[aria-pressed="true"] {
    background: #d18f00;
    border-color: #d18f00;
    color: #fff;
}

.gp-volume {
    width: 100%;
    accent-color: var(--gp-accent);
}

.gp-status {
    padding: 1em;
    text-align: center;
    color: var(--gp-muted);
}

.gp-viewer[data-state="error"] .gp-status {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 4px;
}

.gp-score {
    /* Own stacking context, so alphaTab's cursor and selection stay below
       the toolbar. */
    position: relative;
    z-index: 0;
    margin-top: 0.5em;
    background: var(--gp-surface);
    overflow: hidden;
}

/* Chord view: chord names over the syllables, bar by bar. */
.gp-chords {
    margin-top: 0.5em;
    padding: 0.5em 0.8em 1em;
    background: var(--gp-surface);
}

/* The diagrams use .chord-list from style.css; they are not clickable here. */
.gp-chord-diagrams .svg-chord:hover {
    background: none;
    cursor: default;
}

.gp-sheet {
    /* No text selection while dragging over bars. */
    user-select: none;
    display: flex;
    flex-wrap: wrap;
    /* Bars as high as their row, so the marks cover them evenly. */
    align-items: stretch;
    row-gap: 0.9em;
    line-height: 1.3;
}

.gp-section {
    flex-basis: 100%;
    margin-top: 0.6em;
    font-weight: bold;
    color: var(--gp-muted);
}

.gp-bar {
    display: flex;
    align-items: flex-end;
    min-width: 2.5em;
    min-height: 1.3em;
    padding: 0 0.6em 0 0.4em;
    border-left: 1px solid var(--gp-border);
    border-radius: 2px;
    cursor: pointer;
}

.gp-bar.gp-repeat-start {
    border-left: 3px double var(--gp-muted);
}

.gp-bar.gp-repeat-end {
    border-right: 3px double var(--gp-muted);
}

.gp-repeat-count {
    align-self: flex-start;
    font-size: 0.75em;
    color: var(--gp-muted);
}

/* The repeated section (playback range), as alphaTab's selection. */
.gp-bar.gp-selected {
    background: rgba(64, 64, 255, 0.1);
}

.gp-bar.gp-current {
    background: rgba(136, 177, 14, 0.2);
}

.gp-ev {
    display: flex;
    flex-direction: column;
    padding-right: 0.4em;
    white-space: pre;
}

.gp-ev.gp-join {
    padding-right: 0;
}

.gp-ch {
    min-height: 1.3em;
    font-weight: bold;
    color: #397aa3;
}

.gp-ly {
    min-height: 1.3em;
}

/* Playback cursor and selection, names from alphaTab. */
.gp-score .at-cursor-bar {
    background: rgba(136, 177, 14, 0.15);
}

.gp-score .at-selection div {
    background: rgba(64, 64, 255, 0.1);
}

.gp-score .at-cursor-beat {
    background: rgba(64, 64, 255, 0.75);
    width: 3px;
}

.gp-score .at-highlight * {
    fill: #0078ff;
    stroke: #0078ff;
}

/* View, tempo, metronome, loop and zoom: inline in the toolbar when it has
   room, otherwise a panel behind the cog button. */
.gp-settings,
.gp-toggles {
    display: contents;
}

.gp-settings-toggle,
.gp-zoom-label {
    display: none;
}

/* Labels are dropped one group at a time as the toolbar gets narrower, so
   it stays on one row. The widths are what the row needs with the labels
   that are left (measured; the toolbar's own width, padding included). */
@container gp-viewer (max-width: 975px) {
    .gp-toggle-label {
        display: none;
    }
}

@container gp-viewer (max-width: 865px) {
    .gp-field > span,
    .gp-tracks-label {
        display: none;
    }
}

@container gp-viewer (max-width: 765px) {
    .gp-play .gp-play-label {
        display: none;
    }
}

/* Too narrow for one row even without labels: compact layout. */
@container gp-viewer (max-width: 715px) {
    .gp-toolbar {
        font-size: 0.8em;
        gap: 0.3em 0.5em;
        flex-wrap: wrap;
    }

    .gp-toolbar .gp-settings-toggle {
        display: inline-block;
        min-width: 2.4em;
    }

    .gp-toolbar .gp-settings-toggle[aria-expanded="true"] {
        background: var(--gp-border);
    }

    .gp-time {
        min-width: 0;
    }

    /* Takes the room that is left in the first row. */
    .gp-tracks-toggle {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .gp-tracks-label {
        display: none;
    }

    .gp-play .gp-play-label {
        display: none;
    }

    .gp-settings {
        display: none;
    }

    /* The panel: labels in the first column, full-width controls in the
       second; metronome and loop in the last row, lined up with the size
       buttons. */
    .gp-toolbar.gp-settings-open .gp-settings {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.5em 0.8em;
        align-items: center;
        flex-basis: 100%;
        padding-top: 0.5em;
        border-top: 1px solid var(--gp-border);
    }

    .gp-settings .gp-field,
    .gp-settings .gp-zoom {
        display: contents;
    }

    /* The panel has room for the labels. */
    .gp-settings .gp-field > span,
    .gp-settings .gp-zoom-label,
    .gp-settings .gp-toggle-label {
        display: inline;
    }

    .gp-settings select {
        width: 100%;
    }

    .gp-settings .gp-zoom-buttons,
    .gp-settings .gp-toggles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5em;
    }

    /* Under the size buttons, in the same two columns. */
    .gp-settings .gp-toggles {
        grid-column: 2;
        order: 1;
    }

    .gp-settings .gp-toggle {
        justify-content: center;
    }
}

@media print {
    .gp-toolbar,
    .gp-status {
        display: none;
    }
}