:root {
    --lemon: #f7d51d;
}

.navbar-brand {
    letter-spacing: 0.02em;
}

.btn-primary {
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
}

/* Sortable table headers */
.sort-header {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sort-header:hover {
    text-decoration: underline;
}

.sort-header.active {
    font-weight: 600;
}

.sort-arrow {
    margin-left: 0.15rem;
    font-size: 0.75em;
}

/* ---- Setlist builder: two draggable lists ---- */

.track-list {
    /* Flex column so the empty space below the last card is still part of the
       list and therefore a valid drop target (drops there append to the end). */
    display: flex;
    flex-direction: column;
    min-height: 7rem;
    /* Fallback cap (mobile / stacked): scroll internally rather than growing
       the page unbounded. Desktop overrides this to a true full-height layout. */
    max-height: 65vh;
    overflow-y: auto;
}

/* Desktop: make the two lists fill the viewport height between header and
   footer, so there's no dead space on tall windows and the interval control
   stays visible on short ones. */
@media (min-width: 768px) {
    .setlist-page {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .setlist-row {
        flex: 1 1 auto;
        min-height: 0;
    }

    .setlist-row > [class*="col-"] {
        min-height: 0;
    }

    .setlist-page .track-list {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
    }
}

/* On wider screens use a fixed layout with explicit column widths (the three
   status columns end up identical, more width to Título/Artista). On mobile the
   table falls back to natural auto layout and the secondary columns are hidden,
   so the remaining ones never overlap. */
/* Mobile: the first column stacks title over artist, each truncated to a single
   line, so every row stays a compact two lines. */
@media (max-width: 767.98px) {
    /* Tighter cell padding so the remaining columns fit the viewport. */
    .tracks-table {
        --bs-table-cell-padding-x: 0.25rem;
    }
    .tracks-table .track-title-line,
    .tracks-table .track-artist-line {
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* The full fixed-width table only kicks in at lg and up. Below that (including
   phones in landscape) it uses natural auto layout with the heavier columns
   hidden, so nothing overlaps. */
@media (min-width: 992px) {
    .tracks-table {
        table-layout: fixed;
    }
    .tracks-table col.c-titulo { width: 26%; }
    .tracks-table col.c-artista { width: 18%; }
    .tracks-table col.c-afinacao { width: 8%; }
    .tracks-table col.c-bpm { width: 6%; }
    .tracks-table col.c-duracao { width: 7%; }
    .tracks-table col.c-status { width: 9.5%; }
    .tracks-table col.c-acoes { width: 6.5%; }
}

/* On mobile (below lg) shrink the cell text to 90%. */
@media (max-width: 991.98px) {
    .tracks-table {
        font-size: 0.9rem;
    }
}

/* Status columns (Instrumental / Voz / VS): centered, with tight horizontal
   padding so the (normal-size) headers stay as compact as possible. */
.status-col {
    text-align: center;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.status-col .badge {
    font-size: 0.85rem;
    /* +1px per side over Bootstrap's default (0.35em 0.65em) so the badge box
       grows 2px vertically and 2px horizontally without changing the text size. */
    padding: calc(0.35em + 1px) calc(0.65em + 1px);
}

/* Icon-only buttons (edit / delete): a fixed square so both are identical in
   size regardless of the icon inside them. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(1.9rem - 2px);
    height: calc(1.9rem - 2px);
    padding: 0;
    line-height: 1;
}

.btn-icon svg {
    display: block;
}

.track-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    cursor: grab;
    user-select: none;
}

.track-card:active {
    cursor: grabbing;
}

.track-info {
    flex: 1 1 auto;
    min-width: 0;
}

.track-duration {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* Auto-numbering for the setlist (left) via a CSS counter, so a card dragged
   in/out is renumbered without touching the DOM. */
.setlist-list {
    counter-reset: item;
}

/* Only real tracks are numbered; intervals neither show nor advance a number. */
.setlist-list .track-card:not(.interval-card) {
    counter-increment: item;
}

.setlist-list .track-num {
    flex: 0 0 1.5rem;
    text-align: left;
    color: var(--bs-secondary-color);
}

.setlist-list .track-card:not(.interval-card) .track-num::before {
    content: counter(item);
}

/* Intervals: red text, no number. */
.setlist-list .interval-card {
    color: #dc3545;
}

/* The pool (right) has no numbers and is dimmed (dark gray). */
.pool-list .track-num {
    display: none;
}

.pool-list .track-card {
    color: #a0a7ae;
}

/* "Will be removed" feedback when dragging a setlist item over the pool. */
.pool-list.removing {
    outline: 2px dashed #dc3545;
    outline-offset: 4px;
    border-radius: 0.5rem;
}

.track-card.will-remove {
    border-color: #dc3545;
    color: #dc3545 !important;
    text-decoration: line-through;
}

/* Empty-state placeholders (~2-3 items tall; grow to fill the tall list). */
.empty-placeholder {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 7rem;
    padding: 1rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    color: var(--bs-secondary-color);
}

/* Quick +/− buttons: hidden on desktop (side-by-side); shown when stacked. */
.track-btn {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.btn-add {
    color: #0d6efd;
}

.btn-add:hover {
    background: rgba(13, 110, 253, 0.12);
}

.btn-remove {
    color: #dc3545;
}

.btn-remove:hover {
    background: rgba(220, 53, 69, 0.12);
}

@media (max-width: 767.98px) {
    /* Stacked layout: show the add button on pool items and the remove button
       on setlist items. */
    .pool-list .track-card .btn-add {
        display: inline-flex;
    }
    .setlist-list .track-card .btn-remove {
        display: inline-flex;
    }
}