:root {
    --bg: #0c0e0d;
    --panel: #161916;
    --panel-2: #1d211d;
    --border: #343934;
    --text: #f3f4f3;
    --muted: #9ba09b;
    --accent: #94ad6f;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 30px;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, sans-serif;
    font-size: 16px;
}

a {
    color: var(--accent);
}

h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

h2 {
    margin-top: 30px;
}

button,
input {
    font: inherit;
}

input {
    padding: 10px 12px;
    background: #101210;
    border: 1px solid var(--border);
    color: var(--text);
}

form {
    max-width: 800px;
}

#setlistItems {
    list-style: none;
    padding: 0;
    margin: 18px 0;
}

#setlistItems li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px;
    margin-bottom: 7px;
    background: var(--panel);
    border: 1px solid var(--border);
    cursor: move;
}

.dragHandle {
    color: var(--muted);
    margin-right: 10px;
}

.songLength {
    color: var(--muted);
    font-size: 14px;
}

.removeBtn {
    padding: 7px 10px;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    cursor: pointer;
}

button {
    padding: 8px 12px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
}

button:hover {
    border-color: var(--accent);
}

#setLength {
    color: var(--accent);
}

#songSearch {
    width: 100%;
    max-width: 500px;
    margin-bottom: 16px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
}

th,
td {
    padding: 11px;
    border: 1px solid var(--border);
    text-align: left;
}

th {
    background: #111411;
    color: var(--muted);
}

.pickedSong {
    opacity: .45;
}

details {
    margin-bottom: 10px;
}

pre {
    white-space: pre-wrap;
}

@media (max-width: 700px) {
    body {
        padding: 18px;
    }

    h1 {
        font-size: 32px;
    }

    th:nth-child(3),
    td:nth-child(3) {
        display: none;
    }
}


/* =========================================================
   DEAD AGAIN — SHOW DASHBOARD
   ========================================================= */

.dashboard-body {
    padding: 0;
    background: #010101;
    color: #fff;
    font-family: "Roboto", Arial, sans-serif;
}

.app-header {
    background: #010101;
    border-bottom: 1px solid #2e2e2e;
}

.app-header-inner {
    max-width: 1500px;
    min-height: 92px;
    margin: 0 auto;
    padding: 18px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.app-logo {
    display: block;
    width: 230px;
}

.app-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.app-title {
    color: #628f42;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
}

.dashboard {
    max-width: 1500px;
    margin: 0 auto;
    padding: 58px 34px 90px;
}

.dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 36px;
}

.dashboard-heading .eyebrow {
    margin-bottom: 8px;
    color: #628f42;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}

.dashboard-heading h1 {
    margin: 0;
    color: #fff;
    font-family: "Anton", Impact, sans-serif;
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-heading p {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: 17px;
}

.show-count {
    color: rgba(255, 255, 255, .42);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    white-space: nowrap;
}

.show-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.show-card {
    min-height: 270px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #2e2e2e;
    background: #101010;
    color: #fff;
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.show-card:hover {
    transform: translateY(-3px);
    border-color: #628f42;
    background: #151515;
}

.show-card.has-setlist {
    border-top: 3px solid #628f42;
}

.show-card-top,
.show-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.show-date {
    color: #628f42;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}

.status-badge {
    padding: 5px 8px;
    background: #628f42;
    color: #151515;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.show-card-main {
    padding: 30px 0;
}

.show-card h2 {
    margin: 0 0 9px;
    color: #fff;
    font-family: "Anton", Impact, sans-serif;
    font-size: 31px;
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
}

.show-location {
    color: rgba(255, 255, 255, .52);
    font-size: 14px;
}

.setlist-name {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 500;
}

.setlist-name.empty {
    color: rgba(255, 255, 255, .32);
}

.open-show {
    color: #628f42;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
}

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

@media (max-width: 650px) {
    .app-header-inner {
        min-height: 76px;
        padding: 14px 18px;
    }

    .app-logo {
        width: 175px;
    }

    .app-title {
        font-size: 10px;
    }

    .dashboard {
        padding: 38px 18px 60px;
    }

    .dashboard-heading {
        align-items: flex-start;
    }

    .show-count {
        display: none;
    }

    .show-grid {
        grid-template-columns: 1fr;
    }

    .show-card {
        min-height: 230px;
    }
}

/* Show Dashboard Filter */

.dashboard-tools {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.venue-filter-label {
    color: rgba(255, 255, 255, .42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
}

.venue-filter {
    min-width: 220px;
    padding: 10px 34px 10px 12px;
    border: 1px solid #2e2e2e;
    border-radius: 0;
    background: #101010;
    color: #fff;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.venue-filter:focus {
    outline: none;
    border-color: #628f42;
}

.venue-filter option {
    background: #101010;
    color: #fff;
}

.dashboard-tools .show-count {
    margin-top: 3px;
}

@media (max-width: 650px) {
    .dashboard-heading {
        flex-direction: column;
    }

    .dashboard-tools {
        width: 100%;
        align-items: flex-start;
    }

    .venue-filter {
        width: 100%;
        min-width: 0;
    }

    .dashboard-tools .show-count {
        display: block;
    }
}

.venue-label {
    margin-top: 6px;
}

.venue-label {
    margin-top: 6px;
}

/* Filters side-by-side */

.dashboard-tools {
    min-width: 460px;
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    grid-template-areas:
        "shows-label venue-label"
        "shows-select venue-select"
        "count count";
    column-gap: 12px;
    row-gap: 7px;
    align-items: end;
}

.dashboard-tools label[for="showStatus"] {
    grid-area: shows-label;
}

#showStatus {
    grid-area: shows-select;
}

.dashboard-tools .venue-label {
    grid-area: venue-label;
    margin-top: 0;
}

#venueFilter {
    grid-area: venue-select;
}

.dashboard-tools .venue-filter {
    width: 100%;
    min-width: 0;
}

.dashboard-tools .show-count {
    grid-area: count;
    justify-self: end;
    margin-top: 3px;
}

@media (max-width: 650px) {
    .dashboard-tools {
        min-width: 0;
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-areas:
            "shows-label"
            "shows-select"
            "venue-label"
            "venue-select"
            "count";
    }

    .dashboard-tools .show-count {
        justify-self: start;
    }
}

/* =========================================================
   DEAD AGAIN — SETLIST EDITOR
   ========================================================= */

.editor-body {
    padding: 0;
    background: #010101;
    color: #fff;
    font-family: "Roboto", Arial, sans-serif;
}

.editor-header-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.header-back {
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
}

.header-back:hover {
    color: #628f42;
}

.editor-shell {
    max-width: 1500px;
    margin: 0 auto;
    padding: 48px 34px 90px;
}

.editor-show-heading {
    margin-bottom: 30px;
}

.editor-show-heading .eyebrow,
.panel-heading .eyebrow,
.previous-setlists .eyebrow {
    margin-bottom: 7px;
    color: #628f42;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

.editor-show-heading h1 {
    margin: 0;
    color: #fff;
    font-family: "Anton", Impact, sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.editor-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 13px;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
}

.save-notice {
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid #628f42;
    background: rgba(98, 143, 66, .1);
    color: #7aae58;
    font-size: 13px;
}

.editor-grid {
    display: grid;
    grid-template-columns: minmax(390px, .85fr) minmax(560px, 1.35fr);
    gap: 20px;
    align-items: start;
}

.editor-panel {
    border: 1px solid #2e2e2e;
    background: #101010;
}

.setlist-panel {
    position: sticky;
    top: 20px;
    padding: 24px;
}

.library-panel {
    overflow: hidden;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.panel-heading h2 {
    margin: 0;
    color: #fff;
    font-family: "Anton", Impact, sans-serif;
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
}

.set-time {
    color: #628f42;
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
}

.field-label {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
}

.setlist-name-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #2e2e2e;
    border-radius: 0;
    background: #fff;
    color: #1b1b1b;
    font-family: "Roboto", Arial, sans-serif;
}

.setlist-name-input:focus {
    outline: none;
    border-color: #628f42;
}

.setlist-help {
    margin: 20px 0 9px;
    color: rgba(255, 255, 255, .38);
    font-size: 11px;
}

.editor-body #setlistItems {
    margin: 0;
}

.editor-body #setlistItems li {
    min-height: 52px;
    margin-bottom: 6px;
    padding: 10px 12px;
    border: 1px solid #2e2e2e;
    background: #151515;
}

.editor-body #setlistItems li:hover {
    border-color: #454545;
}

.editor-body .songTitle {
    font-weight: 600;
}

.editor-body .songLength {
    margin-left: 5px;
    color: rgba(255, 255, 255, .38);
}

.editor-body .removeBtn {
    border-color: #333;
    color: rgba(255, 255, 255, .4);
    font-size: 11px;
}

.editor-body .removeBtn:hover {
    border-color: #628f42;
    color: #fff;
}

.setlist-markers {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.marker-button {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}

.marker-button:hover {
    border-color: #628f42;
    color: #628f42;
}

.setlist-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 18px;
}

.save-setlist-button,
.print-setlist-button {
    min-height: 46px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .065em;
}

.save-setlist-button {
    border: 2px solid #628f42;
    background: #628f42;
    color: #151515;
}

.save-setlist-button:hover {
    background: transparent;
    color: #628f42;
}

.print-setlist-button {
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
}

.print-setlist-button:hover {
    background: #fff;
    color: #151515;
}

.previous-setlists {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #2e2e2e;
}

.previous-setlists h3 {
    margin: 0 0 14px;
    color: #fff;
    font-family: "Anton", Impact, sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
}

.previous-setlists details {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid #242424;
}

.previous-setlists summary {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    cursor: pointer;
}

.previous-setlists pre {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .72);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
}

.library-panel .panel-heading {
    padding: 24px 24px 0;
    margin-bottom: 18px;
}

.library-search-wrap {
    padding: 0 24px 18px;
}

.library-search {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #2e2e2e;
    border-radius: 0;
    background: #fff;
    color: #1b1b1b;
    font-family: "Roboto", Arial, sans-serif;
}

.library-search:focus {
    outline: none;
    border-color: #628f42;
}

.song-library-scroll {
    max-height: 720px;
    overflow: auto;
}

.song-table {
    width: 100%;
    border-collapse: collapse;
    background: #101010;
}

.song-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 12px;
    background: #151515;
    color: rgba(255, 255, 255, .42);
    border-top: 1px solid #2e2e2e;
    border-bottom: 1px solid #2e2e2e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.song-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #242424;
}

.library-title {
    color: #fff;
    font-weight: 600;
}

.library-album,
.library-length {
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
}

.library-length {
    white-space: nowrap;
}

.library-action {
    width: 78px;
    text-align: right;
}

.library-add-button {
    min-width: 62px;
    padding: 7px 9px;
    border: 1px solid #628f42;
    background: transparent;
    color: #628f42;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.library-add-button:hover {
    background: #628f42;
    color: #151515;
}

.editor-body .pickedSong {
    opacity: .42;
}

.editor-body .pickedSong .library-add-button {
    border-color: #454545;
    color: rgba(255, 255, 255, .42);
}

@media (max-width: 1050px) {
    .editor-grid {
        grid-template-columns: 1fr;
    }

    .setlist-panel {
        position: static;
    }

    .song-library-scroll {
        max-height: none;
    }
}

@media (max-width: 650px) {
    .editor-shell {
        padding: 34px 18px 60px;
    }

    .editor-header-actions {
        gap: 14px;
    }

    .app-title {
        display: none;
    }

    .editor-show-heading h1 {
        font-size: 38px;
    }

    .editor-panel {
        padding: 0;
    }

    .setlist-panel {
        padding: 18px;
    }

    .panel-heading {
        flex-direction: column;
        gap: 8px;
    }

    .set-time {
        font-size: 17px;
    }

    .setlist-actions {
        grid-template-columns: 1fr;
    }

    .library-panel .panel-heading {
        padding: 18px 18px 0;
    }

    .library-search-wrap {
        padding: 0 18px 16px;
    }

    .song-table th,
    .song-table td {
        padding: 10px 9px;
    }

    .library-album,
    .song-table th:nth-child(2) {
        display: none;
    }
}

/* =========================================================
   PRINT SETLIST
   ========================================================= */

@media print {
    @page {
        margin: 0.5in;
    }

    body.editor-body {
        padding: 0;
        background: #fff;
        color: #000;
    }

    .app-header,
    .library-panel,
    .setlist-help,
    .setlist-markers,
    .setlist-actions,
    .previous-setlists,
    .save-notice {
        display: none !important;
    }

    .editor-shell {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    .editor-show-heading {
        margin-bottom: 24px;
    }

    .editor-show-heading .eyebrow {
        color: #628f42;
    }

    .editor-show-heading h1 {
        color: #000;
        font-size: 34pt;
    }

    .editor-show-meta {
        color: #444;
        font-size: 11pt;
    }

    .editor-grid {
        display: block;
    }

    .editor-panel,
    .setlist-panel {
        position: static;
        padding: 0;
        border: 0;
        background: #fff;
    }

    .panel-heading {
        margin-bottom: 16px;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
    }

    .panel-heading .eyebrow {
        display: none;
    }

    .panel-heading h2 {
        color: #000;
        font-size: 20pt;
    }

    .set-time {
        color: #000;
        font-size: 13pt;
    }

    .field-label {
        color: #555;
        font-size: 9pt;
    }

    .setlist-name-input {
        padding: 0;
        margin-bottom: 16px;
        border: 0;
        background: transparent;
        color: #000;
        font-size: 14pt;
        font-weight: 700;
    }

    #setlistItems {
        counter-reset: setnumber;
    }

    .editor-body #setlistItems li {
        min-height: 0;
        padding: 7px 0;
        margin: 0;
        border: 0;
        border-bottom: 1px solid #ccc;
        background: #fff;
        color: #000;
        page-break-inside: avoid;
    }

    .editor-body #setlistItems li:not([data-title="STOP"]):not([data-title="RING OUT"]) {
        counter-increment: setnumber;
    }

    .editor-body #setlistItems li:not([data-title="STOP"]):not([data-title="RING OUT"])::before {
        content: counter(setnumber, decimal-leading-zero);
        width: 32px;
        flex: 0 0 32px;
        color: #628f42;
        font-weight: 700;
    }

    .editor-body #setlistItems li[data-title="STOP"],
    .editor-body #setlistItems li[data-title="RING OUT"] {
        padding-left: 32px;
        color: #628f42;
        font-size: 9pt;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .dragHandle,
    .removeBtn {
        display: none !important;
    }

    .editor-body .songTitle {
        color: #000;
        font-size: 12pt;
    }

    .editor-body .songLength {
        color: #555;
        font-size: 10pt;
    }
}

/* Stage setlist print layout */
.print-show-header {
    display: none;
}

@media print {

    .print-show-header {
        display: block;
        text-align: center;
        margin: 0 0 22px;
    }

    .print-logo {
        display: block;
        width: 330px;
        max-width: 70%;
        height: auto;
        margin: 0 auto 16px;
        filter: brightness(0);
    }

    .print-show-title {
        padding-bottom: 14px;
        border-bottom: 3px solid #000;
        color: #000;
        font-family: "Anton", Impact, sans-serif;
        font-size: 24pt;
        line-height: 1;
        text-transform: uppercase;
    }

    .editor-show-heading,
    .panel-heading,
    .field-label,
    .setlist-name-input {
        display: none !important;
    }

    .editor-body #setlistItems {
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: none;
    }

    .editor-body #setlistItems li {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 0;
        padding: 5px 0;
        margin: 0;
        border: 0;
        background: transparent;
        text-align: center;
        page-break-inside: avoid;
    }

    .editor-body #setlistItems li::before {
        display: none !important;
        content: none !important;
    }

    .editor-body #setlistItems li > span:first-child {
        display: block;
        width: 100%;
        text-align: center;
    }

    .editor-body .songTitle {
        display: block;
        color: #000;
        font-family: "Anton", Impact, sans-serif;
        font-size: 27pt;
        font-weight: 400;
        line-height: 1.08;
        text-align: center;
    }

    .editor-body .songLength {
        display: none !important;
    }

    .editor-body #setlistItems li[data-title="STOP"],
    .editor-body #setlistItems li[data-title="RING OUT"] {
        padding: 5px 0;
        color: #628f42;
    }

    .editor-body #setlistItems li[data-title="STOP"] .songTitle,
    .editor-body #setlistItems li[data-title="RING OUT"] .songTitle {
        color: #628f42;
        font-size: 18pt;
        letter-spacing: .1em;
    }
}

@media print {
    .print-logo {
        width: 360px;
        max-width: 72%;
        margin: 0 auto 18px;
        filter: grayscale(1) brightness(0);
    }

    .print-show-title {
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: 12px;
        padding-bottom: 15px;
        border-bottom: 3px solid #000;
        color: #000;
        font-family: "Anton", Impact, sans-serif;
        font-size: 25pt;
        line-height: 1;
        text-transform: uppercase;
    }

    .print-date {
        white-space: nowrap;
    }
}

@media print {

    /* Hide standalone cue rows */
    .editor-body #setlistItems li[data-title="RING OUT"],
    .editor-body #setlistItems li[data-title="STOP"] {
        display: none !important;
    }

    /* Show RING after the song that precedes it */
    .editor-body #setlistItems li:has(+ li[data-title="RING OUT"]) .songTitle::after {
        content: "  *RING";
        color: #628f42;
        font-family: "Roboto", Arial, sans-serif;
        font-size: .42em;
        font-weight: 800;
        letter-spacing: .04em;
        vertical-align: middle;
        white-space: nowrap;
    }

    /* Show STOP after the song that precedes it */
    .editor-body #setlistItems li:has(+ li[data-title="STOP"]) .songTitle::after {
        content: "  *STOP";
        color: #b3261e;
        font-family: "Roboto", Arial, sans-serif;
        font-size: .42em;
        font-weight: 800;
        letter-spacing: .04em;
        vertical-align: middle;
        white-space: nowrap;
    }
}

/* Refine song library filters */
.library-panel .library-search-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr);
    gap: 16px;
    align-items: end;
    padding: 0 24px 22px;
}

.library-panel .library-filter-field {
    display: block !important;
    min-width: 0;
}

.library-panel .library-filter-field label {
    display: block !important;
    margin: 0 0 7px !important;
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
}

.library-panel .library-search,
.library-panel .library-album-filter {
    display: block;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #333;
    border-radius: 0;
    background: #fff;
    color: #1b1b1b;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
}

.library-panel .library-search:focus,
.library-panel .library-album-filter:focus {
    outline: none;
    border-color: #628f42;
}

.library-panel .library-album-filter {
    cursor: pointer;
}

@media (max-width: 750px) {
    .library-panel .library-search-wrap {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding: 0 18px 18px;
    }
}

.library-panel .library-search-wrap {
    align-items: start !important;
}

.library-panel .library-filter-field {
    align-self: start;
}

/* =========================================================
   DASHBOARD COHESION
   Match individual setlist editor
   ========================================================= */

.dashboard-body {
    padding: 0 !important;
    background: #010101 !important;
    color: #fff;
}

.dashboard-body .app-header {
    margin: 0;
    background: #000;
    border-bottom: 1px solid #2e2e2e;
}

.dashboard-shell {
    max-width: 1500px;
    margin: 0 auto;
    padding: 48px 34px 90px;
}

.show-card {
    background: #101010 !important;
    border-color: #2e2e2e !important;
}

.show-card:hover {
    background: #121212 !important;
    border-color: #454545 !important;
}

.dashboard-tools select {
    background: #101010;
    border-color: #2e2e2e;
    color: #fff;
}

.dashboard-tools select:focus {
    border-color: #628f42;
    outline: none;
}

@media (max-width: 650px) {
    .dashboard-shell {
        padding: 34px 18px 60px;
    }
}

.dashboard-body .dashboard {
    max-width: 1500px;
    margin: 0 auto;
    padding: 48px 34px 90px;
}

@media (max-width: 650px) {
    .dashboard-body .dashboard {
        padding: 34px 18px 60px;
    }
}

/* =========================================================
   SHOW HUB
   ========================================================= */

.show-hub-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 24px;
    border-bottom: 1px solid #2e2e2e;
}

.show-hub-tab {
    position: relative;
    padding: 13px 22px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .42);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    cursor: pointer;
}

.show-hub-tab:hover {
    color: #fff;
}

.show-hub-tab.is-active {
    color: #fff;
}

.show-hub-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: #628f42;
}

.show-tab-panel {
    display: none;
}

.show-tab-panel.is-active {
    display: block;
}

.hub-overview-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 20px;
}

.hub-card {
    padding: 24px;
    border: 1px solid #2e2e2e;
    background: #101010;
}

.hub-card .eyebrow {
    margin-bottom: 14px;
    color: #628f42;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.hub-card h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
}

.hub-card p {
    margin: 0;
    color: rgba(255,255,255,.5);
}

.hub-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hub-stat-row > div {
    min-width: 0;
}

.hub-stat-row span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hub-stat-row strong {
    display: block;
    color: #fff;
    font-size: 20px;
    line-height: 1.2;
}

.hub-placeholder {
    margin-top: 10px !important;
}

@media (max-width: 1000px) {
    .hub-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .show-hub-tabs {
        overflow-x: auto;
    }

    .show-hub-tab {
        flex: 0 0 auto;
        padding: 12px 16px;
    }

    .hub-stat-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Reusable playlist loader */
.playlist-loader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #2e2e2e;
    background: #121212;
}

.playlist-loader-field {
    min-width: 0;
}

.playlist-select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #333;
    border-radius: 0;
    background: #fff;
    color: #1b1b1b;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
}

.playlist-select:focus {
    outline: none;
    border-color: #628f42;
}

.playlist-load-button {
    height: 42px;
    padding: 0 18px;
    border: 2px solid #628f42;
    background: #628f42;
    color: #151515;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
}

.playlist-load-button:hover {
    background: transparent;
    color: #628f42;
}

@media (max-width: 650px) {
    .playlist-loader {
        grid-template-columns: 1fr;
    }

    .playlist-load-button {
        width: 100%;
    }
}

/* Three setlist actions */
.setlist-actions {
    grid-template-columns: repeat(3, 1fr);
}

.save-playlist-button {
    min-height: 46px;
    border: 2px solid #628f42;
    background: transparent;
    color: #628f42;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .055em;
}

.save-playlist-button:hover {
    background: #628f42;
    color: #151515;
}

@media (max-width: 650px) {
    .setlist-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   SHOW DETAILS
   ========================= */

.show-details-form {
    padding-top: 26px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.details-card {
    background: #101010;
    border: 1px solid #2e2e2e;
    padding: 24px;
}

.details-card-wide {
    grid-column: 1 / -1;
}

.details-card h2 {
    margin: 4px 0 22px;
}

.details-card label {
    display: block;
    margin: 16px 0 7px;
    color: #aaa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.details-card input[type="text"],
.details-card input[type="email"],
.details-card textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #343434;
    background: #050505;
    color: #fff;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 14px;
}

.details-card textarea {
    min-height: 90px;
    resize: vertical;
}

.details-card input:focus,
.details-card textarea:focus {
    outline: none;
    border-color: #628f42;
}

.details-two-col,
.details-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


.hospitality-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 20px;
}

.hospitality-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 10px 14px;
    border: 1px solid #343434;
    background: #050505;
    color: #ddd !important;
    cursor: pointer;
}

.hospitality-check input {
    accent-color: #628f42;
}

.details-save-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.save-details-button {
    min-width: 220px;
    min-height: 48px;
    border: 0;
    background: #628f42;
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    cursor: pointer;
}

.save-details-button:hover {
    background: #70A34C;
}

@media (max-width: 800px) {
    .details-grid {
        grid-template-columns: 1fr;
    }

    .details-card-wide {
        grid-column: auto;
    }

    .details-two-col,
    .details-time-grid {
        grid-template-columns: 1fr;
    }

    .details-save-bar {
        display: block;
    }

    .save-details-button {
        width: 100%;
    }
}


.hospitality-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 20px;
}

.hospitality-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 10px 14px;
    border: 1px solid #343434;
    background: #050505;
    color: #ddd !important;
    cursor: pointer;
}

.hospitality-check input {
    accent-color: #628f42;
}

.details-save-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.save-details-button {
    min-width: 220px;
    min-height: 48px;
    border: 0;
    background: #628f42;
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    cursor: pointer;
}

.save-details-button:hover {
    background: #70A34C;
}

@media (max-width: 800px) {
    .details-grid {
        grid-template-columns: 1fr;
    }

    .details-card-wide {
        grid-column: auto;
    }

    .details-two-col,
    .details-time-grid {
        grid-template-columns: 1fr;
    }

    .details-save-bar {
        display: block;
    }

    .save-details-button {
        width: 100%;
    }
}


/* Let Show Details use the full show-hub width */
.show-details-form {
    width: 100%;
    max-width: none !important;
}

.details-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.details-card {
    min-width: 0;
}


/* =========================
   ADD SHOW
   ========================= */

.add-show-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    background: #628f42;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    white-space: nowrap;
}

.add-show-button:hover {
    background: #70A34C;
    color: #fff;
}

.add-show-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 58px 34px 90px;
}

.add-show-heading,
.add-show-form {
    max-width: 980px;
}

.add-show-heading {
    margin-bottom: 28px;
}

.add-show-heading h1 {
    margin: 5px 0 8px;
}

.add-show-heading p {
    margin: 0;
    color: #999;
    max-width: 680px;
}

.add-show-form {
    display: grid;
    gap: 18px;
}

@media (max-width: 800px) {
    .dashboard-tools {
        gap: 10px;
    }

    .add-show-button {
        width: 100%;
    }

    .add-show-page {
        padding: 32px 20px 70px;
    }
}


.details-card input[type="time"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #343434;
    background: #050505;
    color: #fff;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 14px;
    color-scheme: dark;
}

.details-card input[type="time"]:focus {
    outline: none;
    border-color: #628f42;
}


.details-card .time-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #343434;
    background: #050505;
    color: #fff;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 14px;
}

.details-card .time-select:focus {
    outline: none;
    border-color: #628f42;
}


.split-time {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.split-time select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #343434;
    background: #050505;
    color: #fff;
    padding: 12px 10px;
    font-family: inherit;
    font-size: 14px;
}

.split-time select:focus {
    outline: none;
    border-color: #628f42;
}


/* =========================
   BAND OVERVIEW
   ========================= */

.band-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 26px;
}

.band-card {
    min-width: 0;
    background: #101010;
    border: 1px solid #2e2e2e;
    padding: 24px;
}

.band-card-wide {
    grid-column: 1 / -1;
}

.band-card h2 {
    margin: 4px 0 20px;
}

.band-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.band-fact {
    padding: 14px 16px;
    background: #050505;
    border: 1px solid #292929;
}

.band-fact span,
.band-card p > span,
.band-note-block > span {
    display: block;
    margin-bottom: 5px;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.band-fact strong {
    display: block;
    color: #fff;
    font-size: 19px;
}


.band-card p {
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid #292929;
}

.band-card p:last-child {
    border-bottom: 0;
}

.band-card p strong {
    display: block;
    color: #fff;
}

.band-address {
    color: #ddd;
    line-height: 1.5;
}

.band-opener {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 22px;
    padding: 15px 0;
    border-top: 1px solid #292929;
}

.band-opener > strong {
    font-size: 18px;
    color: #fff;
}

.band-opener span {
    color: #999;
    font-size: 12px;
}

.band-opener b {
    color: #fff;
}

.band-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.band-chip {
    padding: 9px 13px;
    background: #628f42;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.band-note {
    margin-top: 18px !important;
}

.band-note-block {
    padding: 15px 0;
    border-top: 1px solid #292929;
}

.band-note-block p {
    padding: 0;
    border: 0;
    color: #ddd;
    line-height: 1.55;
}

@media (max-width: 800px) {
    .band-overview-grid {
        grid-template-columns: 1fr;
    }

    .band-card-wide {
        grid-column: auto;
    }

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

    .band-opener {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}


/* =========================
   MEMBER SETLIST
   ========================= */

.member-hidden {
    display: none !important;
}

.member-setlist {
    max-width: 850px;
    margin: 26px auto 0;
    background: #101010;
    border: 1px solid #2e2e2e;
    padding: 28px 34px;
}

.member-setlist-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2e2e2e;
}

.member-setlist-heading h2 {
    margin: 4px 0 0;
}

.member-setlist-items {
    margin-top: 8px;
}

.member-setlist-song {
    padding: 18px 4px;
    border-bottom: 1px solid #292929;
}

.member-setlist-title {
    font-family: "Anton", sans-serif;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: .015em;
    text-transform: uppercase;
    color: #fff;
}

.member-setlist-cue {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.cue-ring {
    color: #70A34C;
}

.cue-stop {
    color: #d55;
}

.member-setlist-empty {
    padding: 35px 0;
    color: #888;
    text-align: center;
}

@media (max-width: 650px) {
    .member-setlist {
        padding: 22px 20px;
    }

    .member-setlist-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-setlist-title {
        font-size: 23px;
    }
}


.details-card input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #343434;
    background: #050505;
    color: #fff;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 14px;
}

.details-card input[type="number"]:focus {
    outline: none;
    border-color: #628f42;
}


#totalAttendance[readonly] {
    border-color: #628f42;
    color: #70A34C;
    font-weight: 800;
    cursor: default;
}


/* ATTENDANCE REPORT */

.attendance-report {
    padding-bottom: 80px;
}

.report-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 28px 0 34px;
}

.report-stat {
    background: #101010;
    border: 1px solid #2e2e2e;
    padding: 22px 24px;
}

.report-stat span {
    display: block;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 9px;
}

.report-stat strong {
    display: block;
    color: #fff;
    font-family: Anton, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

.report-stat:last-child strong {
    color: #70A34C;
}

.report-table-wrap {
    overflow-x: auto;
    border: 1px solid #2e2e2e;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.report-table th {
    background: #101010;
    color: #999;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 14px;
    border-bottom: 1px solid #343434;
}

.report-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #2b2b2b;
    color: #ddd;
    font-size: 14px;
}

.report-table tbody tr:last-child td {
    border-bottom: 0;
}

.report-table tbody tr:hover {
    background: #141414;
}

.report-table a {
    color: #7AAE58;
    text-decoration: none;
}

.report-table a:hover {
    color: #fff;
}

.report-total {
    color: #fff !important;
    font-weight: 700;
}

@media (max-width: 800px) {
    .report-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .report-summary {
        grid-template-columns: 1fr;
    }
}


#totalExpenses[readonly],
#netIncome[readonly] {
    border-color: #628f42;
    color: #70A34C;
    font-weight: 800;
    cursor: default;
}


/* MAIN ADMIN NAV */
.editor-header-actions .app-title,
.editor-header-actions .header-back {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
}


/* LOGIN */

.login-body {
    margin: 0;
    min-height: 100vh;
    background: #010101;
    color: #fff;
    font-family: Roboto, Arial, sans-serif;
}

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 30px;
    box-sizing: border-box;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #101010;
    border: 1px solid #2e2e2e;
    padding: 42px;
    box-sizing: border-box;
}

.login-logo {
    display: block;
    width: 210px;
    max-width: 80%;
    margin: 0 auto 34px;
}

.login-card h1 {
    margin: 4px 0 28px;
    font-family: Anton, sans-serif;
    font-size: 38px;
    font-weight: 400;
    text-transform: uppercase;
}

.login-form {
    display: grid;
    gap: 10px;
}

.login-form label {
    margin-top: 8px;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.login-form input {
    width: 100%;
    box-sizing: border-box;
    background: #050505;
    border: 1px solid #343434;
    color: #fff;
    padding: 13px 14px;
    font: inherit;
}

.login-form input:focus {
    outline: none;
    border-color: #628f42;
}

.login-form button {
    margin-top: 18px;
    border: 0;
    background: #628f42;
    color: #fff;
    padding: 14px 20px;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
}

.login-form button:hover {
    background: #70A34C;
}

.login-error {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #703434;
    background: #1b0d0d;
    color: #f3b4b4;
    font-size: 13px;
}



/* =========================================================
   MOBILE APP NAV
   ========================================================= */

.mobile-nav {
    display: none;
    position: relative;
}

.mobile-nav summary {
    list-style: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-nav summary::-webkit-details-marker {
    display: none;
}

.mobile-nav-icon {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-nav-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: transform .2s ease, opacity .2s ease;
}

.mobile-nav[open] .mobile-nav-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-nav[open] .mobile-nav-icon span:nth-child(2) {
    opacity: 0;
}

.mobile-nav[open] .mobile-nav-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-nav-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1000;
    width: 210px;
    padding: 8px 0;
    background: #101010;
    border: 1px solid #2e2e2e;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.mobile-nav-menu a {
    display: block;
    padding: 14px 18px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
}

.mobile-nav-menu a:hover {
    color: #628f42;
    background: rgba(255, 255, 255, .04);
}

@media (max-width: 700px) {

    .editor-header-actions {
        display: none;
    }

    .mobile-nav {
        display: block;
    }

    .app-header-inner {
        min-height: 72px;
        padding: 14px 20px;
        gap: 16px;
    }

    .app-logo {
        width: 180px;
    }
}


/* =========================================================
   PAGE TITLE + MOBILE DETAILS POLISH
   ========================================================= */

.add-show-heading h1,
.attendance-report h1 {
    font-family: "Anton", Impact, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .95;
}


/* Keep show-detail cards full width on phones.
   This must come after the later desktop .details-grid rule. */
@media (max-width: 800px) {

    .show-details-form .details-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .show-details-form .details-card,
    .show-details-form .details-card-wide {
        grid-column: 1 / -1 !important;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}