/* ============================================================
   DASHBOARD — bands list and create form
   BAND DETAIL — band page with tabs
   ============================================================ */

/* ---- Shared dashboard layout ------------------------------ */

#dashboard-page .dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

#dashboard-page .dashboard-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
}

/* ---- Band grid -------------------------------------------- */

#dashboard-page .band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

/* ---- Band card -------------------------------------------- */

#dashboard-page .band-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

#dashboard-page .band-card:hover {
    border-color: var(--colour-primary);
    box-shadow: var(--shadow-md);
}

#dashboard-page .band-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

#dashboard-page .band-card__name {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
}

#dashboard-page .band-card__role {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

#dashboard-page .band-card__role--band-owner {
    background: rgba(124, 106, 247, 0.15);
    color: var(--colour-primary);
}

#dashboard-page .band-card__role--admin {
    background: rgba(74, 222, 128, 0.1);
    color: var(--colour-success);
}

#dashboard-page .band-card__role--maintainer,
#dashboard-page .band-card__role--member {
    background: var(--colour-surface-alt);
    color: var(--colour-text-muted);
}

#dashboard-page .band-card__genre {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#dashboard-page .band-card__desc {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Empty state ------------------------------------------ */

#dashboard-page .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-20) var(--space-8);
    text-align: center;
}

#dashboard-page .empty-state__text {
    color: var(--colour-text-muted);
    font-size: var(--text-lg);
}

/* ---- Create band form ------------------------------------- */

#dashboard-page .create-band-form {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

#dashboard-page .create-band-form__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

#dashboard-page .create-band-form .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#dashboard-page .create-band-form .form-field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--colour-text-muted);
}

#dashboard-page .create-band-form .form-field__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    color: var(--colour-text);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    transition: border-color 0.15s;
    outline: none;
}

#dashboard-page .create-band-form .form-field__input:focus {
    border-color: var(--colour-primary);
}

#dashboard-page .create-band-form .form-field__input::placeholder {
    color: var(--colour-text-muted);
    opacity: 0.55;
}

#dashboard-page .create-band-form .form-field__textarea {
    resize: vertical;
    min-height: 80px;
}

#dashboard-page .create-band-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

#dashboard-page .create-band-form .form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

#dashboard-page .form-warning {
    font-size: var(--text-sm);
    color: #fbbf24;
    padding: var(--space-2) var(--space-3);
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}

#dashboard-page .form-error {
    font-size: var(--text-sm);
    color: var(--colour-error);
    padding: var(--space-2) var(--space-3);
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: var(--radius-sm);
}

/* ---- Loading / error text --------------------------------- */

.loading-text,
.error-text,
.placeholder-text {
    color: var(--colour-text-muted);
    font-size: var(--text-base);
    padding: var(--space-8) 0;
}

.error-text {
    color: var(--colour-error);
}

/* ============================================================
   BAND DETAIL PAGE
   ============================================================ */

#band-detail-page,
#song-detail-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Shared app-level header (PageHeader component) */
.band-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-8);
    background: var(--colour-surface);
    border-bottom: 1px solid var(--colour-border);
}

.band-detail-header__logo {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--colour-primary);
}

#band-detail-page .band-detail-body {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

#band-detail-page .band-detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#band-detail-page .band-detail-meta__view {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#band-detail-page .band-detail-meta__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

#band-detail-page .band-detail-name {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
}

#band-detail-page .band-detail-genre {
    font-size: var(--text-base);
    color: var(--colour-text-muted);
}

#band-detail-page .band-detail-desc {
    font-size: var(--text-base);
    color: var(--colour-text-muted);
}

/* ---- Tabs ------------------------------------------------- */

#band-detail-page .band-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--colour-border);
}

#band-detail-page .band-tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font-sans);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--colour-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

#band-detail-page .band-tab:hover {
    color: var(--colour-text);
}

#band-detail-page .band-tab--active {
    color: var(--colour-primary);
    border-bottom-color: var(--colour-primary);
}

#band-detail-page .band-tab-content {
    padding: var(--space-6) 0;
}

/* ---- Events tab ------------------------------------------- */

#band-detail-page .events-tab {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

#band-detail-page .tab-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#band-detail-page .tab-section-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
}

/* ---- Create event form ------------------------------------ */

#band-detail-page .create-event-form {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

#band-detail-page .create-event-form__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

#band-detail-page .create-event-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

#band-detail-page .create-event-form .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#band-detail-page .create-event-form .form-field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--colour-text-muted);
}

#band-detail-page .create-event-form .form-field__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    color: var(--colour-text);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    transition: border-color 0.15s;
    outline: none;
}

#band-detail-page .create-event-form .form-field__input:focus {
    border-color: var(--colour-primary);
}

#band-detail-page .create-event-form .form-field__input::placeholder {
    color: var(--colour-text-muted);
    opacity: 0.55;
}

#band-detail-page .create-event-form .form-field__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}

#band-detail-page .create-event-form .form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

#band-detail-page .form-error {
    font-size: var(--text-sm);
    color: var(--colour-error);
    padding: var(--space-2) var(--space-3);
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: var(--radius-sm);
}

/* ---- Event list ------------------------------------------- */

#band-detail-page .event-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#band-detail-page .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-20) var(--space-8);
    text-align: center;
}

#band-detail-page .empty-state__text {
    color: var(--colour-text-muted);
    font-size: var(--text-lg);
}

/* ---- Event card ------------------------------------------- */

#band-detail-page .event-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-left-width: 3px;
}

#band-detail-page .event-card--gig {
    border-left-color: var(--colour-primary);
}

#band-detail-page .event-card--rehearsal {
    border-left-color: var(--colour-success);
}

#band-detail-page .event-card--meeting {
    border-left-color: #fbbf24;
}

#band-detail-page .event-card--other {
    border-left-color: var(--colour-border);
}

#band-detail-page .event-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

#band-detail-page .event-card__badges {
    display: flex;
    gap: var(--space-2);
}

#band-detail-page .event-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

#band-detail-page .event-card__datetime {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#band-detail-page .event-card__location,
#band-detail-page .event-card__venue {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#band-detail-page .event-card__address {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#band-detail-page .event-card__description {
    font-size: var(--text-sm);
    color: var(--colour-text);
    line-height: 1.55;
}

#band-detail-page .event-card__notes {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    font-style: italic;
}

#band-detail-page .event-card__fee {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--colour-text);
}

#band-detail-page .event-card__ticket-url {
    font-size: var(--text-sm);
}

/* ---- Type badges ------------------------------------------ */

.event-type-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.event-type-badge--gig {
    background: rgba(124, 106, 247, 0.15);
    color: var(--colour-primary);
}

.event-type-badge--rehearsal {
    background: rgba(74, 222, 128, 0.1);
    color: var(--colour-success);
}

.event-type-badge--meeting {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.event-type-badge--other {
    background: var(--colour-surface-alt);
    color: var(--colour-text-muted);
}

/* ---- Status badges ---------------------------------------- */

.event-status-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.event-status-badge--tentative {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.event-status-badge--confirmed {
    background: rgba(74, 222, 128, 0.1);
    color: var(--colour-success);
}

.event-status-badge--cancelled {
    background: rgba(248, 113, 113, 0.08);
    color: var(--colour-error);
    text-decoration: line-through;
}

.event-status-badge--completed {
    background: var(--colour-surface-alt);
    color: var(--colour-text-muted);
}

/* ============================================================
   SONGS TAB
   ============================================================ */

#band-detail-page .songs-tab {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ---- Create song form ------------------------------------- */

#band-detail-page .create-song-form {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

#band-detail-page .create-song-form__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

#band-detail-page .create-song-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

#band-detail-page .create-song-form .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#band-detail-page .create-song-form .form-field--checkbox {
    justify-content: flex-end;
}

#band-detail-page .create-song-form .form-field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--colour-text-muted);
}

#band-detail-page .create-song-form .form-field__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    color: var(--colour-text);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    transition: border-color 0.15s;
    outline: none;
}

#band-detail-page .create-song-form .form-field__input:focus {
    border-color: var(--colour-primary);
}

#band-detail-page .create-song-form .form-field__input::placeholder {
    color: var(--colour-text-muted);
    opacity: 0.55;
}

#band-detail-page .create-song-form .form-field__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}

#band-detail-page .create-song-form .form-field__textarea {
    resize: vertical;
    min-height: 72px;
}

#band-detail-page .create-song-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--colour-text);
    cursor: pointer;
    padding: var(--space-3) 0;
}

#band-detail-page .create-song-form .form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* ---- Song list -------------------------------------------- */

#band-detail-page .song-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---- Song card -------------------------------------------- */

#band-detail-page .song-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-left-width: 3px;
}

#band-detail-page .song-card--active   { border-left-color: var(--colour-primary); }
#band-detail-page .song-card--learning { border-left-color: #fbbf24; }
#band-detail-page .song-card--retired  { border-left-color: var(--colour-border); opacity: 0.65; }

#band-detail-page .song-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

#band-detail-page .song-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

#band-detail-page .song-card__badges {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

#band-detail-page .song-card__origin {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#band-detail-page .song-card__notes {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    font-style: italic;
}

/* ---- Song status badges ----------------------------------- */

.song-status-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.song-status-badge--active {
    background: rgba(124, 106, 247, 0.15);
    color: var(--colour-primary);
}

.song-status-badge--learning {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.song-status-badge--retired {
    background: var(--colour-surface-alt);
    color: var(--colour-text-muted);
}

/* ============================================================
   INLINE CARD EDIT FORM (shared by event + song cards)
   ============================================================ */

#band-detail-page .card-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

#band-detail-page .card-edit-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

#band-detail-page .card-edit-form .form-field,
#band-detail-page .setlist-edit-form .form-field,
#band-detail-page .add-song-form .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#band-detail-page .card-edit-form .form-field--checkbox,
#band-detail-page .setlist-edit-form .form-field--checkbox,
#band-detail-page .add-song-form .form-field--checkbox {
    justify-content: flex-end;
}

#band-detail-page .card-edit-form .form-field__label,
#band-detail-page .setlist-edit-form .form-field__label,
#band-detail-page .add-song-form .form-field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--colour-text-muted);
}

#band-detail-page .card-edit-form .form-field__input,
#band-detail-page .setlist-edit-form .form-field__input,
#band-detail-page .add-song-form .form-field__input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    color: var(--colour-text);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    transition: border-color 0.15s;
    outline: none;
}

#band-detail-page .card-edit-form .form-field__input:focus,
#band-detail-page .setlist-edit-form .form-field__input:focus,
#band-detail-page .add-song-form .form-field__input:focus {
    border-color: var(--colour-primary);
}

#band-detail-page .card-edit-form .form-field__select,
#band-detail-page .setlist-edit-form .form-field__select,
#band-detail-page .add-song-form .form-field__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}

#band-detail-page .card-edit-form .form-field__textarea,
#band-detail-page .setlist-edit-form .form-field__textarea,
#band-detail-page .add-song-form .form-field__textarea {
    resize: vertical;
    min-height: 64px;
}

#band-detail-page .card-edit-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--colour-text);
    cursor: pointer;
    padding: var(--space-2) 0;
}

#band-detail-page .card-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--colour-border);
}

#band-detail-page .card-edit-actions__left,
#band-detail-page .card-edit-actions__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

#band-detail-page .delete-confirm-text {
    font-size: var(--text-sm);
    color: var(--colour-error);
}

#band-detail-page .loading-text--sm {
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
}

/* ---- Ghost + Danger button variants ----------------------- */

.btn--ghost {
    background: transparent;
    border: none;
    color: var(--colour-text-muted);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.btn--ghost:hover {
    color: var(--colour-text);
    background: var(--colour-surface-alt);
}

.btn--danger {
    background: var(--colour-error);
    color: #fff;
    border: 1px solid var(--colour-error);
}

.btn--danger:hover:not(:disabled) {
    opacity: 0.85;
}

.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

/* song-card right side (badges + edit button) */
#band-detail-page .song-card__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.song-original-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(74, 222, 128, 0.1);
    color: var(--colour-success);
}

/* ================================================================
   Members Tab
   ================================================================ */

#band-detail-page .members-tab {
    padding: var(--space-4) 0;
}

#band-detail-page .member-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

#band-detail-page .member-row {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-left: 4px solid var(--colour-border);
}

#band-detail-page .member-row--band_owner { border-left-color: #f59e0b; }
#band-detail-page .member-row--admin      { border-left-color: #6366f1; }
#band-detail-page .member-row--maintainer { border-left-color: #06b6d4; }
#band-detail-page .member-row--member     { border-left-color: var(--colour-border); }

#band-detail-page .member-row__info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-width: 0;
}

#band-detail-page .member-row__name {
    font-weight: var(--weight-medium);
    color: var(--colour-text-primary);
}

#band-detail-page .member-row__username {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#band-detail-page .member-row__joined {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
}

#band-detail-page .member-row__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Role badges */
.role-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.role-badge--band_owner { background: rgba(245,158,11,0.12); color: #b45309; }
.role-badge--admin      { background: rgba(99,102,241,0.12); color: #4338ca; }
.role-badge--maintainer { background: rgba(6,182,212,0.12);  color: #0e7490; }
.role-badge--member     { background: var(--colour-bg);      color: var(--colour-text-muted); border: 1px solid var(--colour-border); }

/* Inline role change */
#band-detail-page .member-role-change {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-field__select--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-sm);
    background: var(--colour-bg);
    color: var(--colour-text-primary);
    cursor: pointer;
}

/* Remove / Leave */
#band-detail-page .member-remove {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Add member section */
#band-detail-page .members-add-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--colour-border);
}

#band-detail-page .add-member-form {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* Inline form errors (next to buttons) */
.form-error--inline {
    font-size: var(--text-xs);
    color: var(--colour-error, #dc2626);
}

/* ============================================================
   SETLISTS TAB
   ============================================================ */

#band-detail-page .setlists-tab {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ---- Create form ------------------------------------------ */

#band-detail-page .create-setlist-form {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    max-width: 480px;
}

#band-detail-page .create-setlist-form__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
}

/* ---- Setlist list ----------------------------------------- */

#band-detail-page .setlist-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ---- Setlist card ----------------------------------------- */

#band-detail-page .setlist-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

#band-detail-page .setlist-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

#band-detail-page .setlist-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

#band-detail-page .setlist-card__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

#band-detail-page .setlist-card__date {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
}

#band-detail-page .setlist-card__event {
    font-size: var(--text-xs);
    color: var(--colour-primary);
    font-weight: var(--weight-medium);
}

#band-detail-page .setlist-card__notes {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    white-space: pre-wrap;
}

#band-detail-page .setlist-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex-shrink: 0;
}

.delete-confirm-text {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

/* ---- Edit form (inside card) ------------------------------ */

#band-detail-page .setlist-edit-form {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--colour-border);
    background: var(--colour-bg);
}

/* ---- Songs section --------------------------------------- */

#band-detail-page .setlist-songs {
    border-top: 1px solid var(--colour-border);
    padding: var(--space-3) var(--space-5) var(--space-4);
}

#band-detail-page .setlist-duration {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--colour-border);
    font-variant-numeric: tabular-nums;
}

#band-detail-page .setlist-duration__warning {
    color: #fbbf24;
}

#band-detail-page .setlist-song-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--colour-border);
}

#band-detail-page .setlist-song-row:last-of-type {
    border-bottom: none;
}

#band-detail-page .setlist-song-row__pos {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    width: 1.5rem;
    text-align: right;
    flex-shrink: 0;
}

#band-detail-page .setlist-song-row__info {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

#band-detail-page .setlist-song-row__title {
    font-weight: var(--weight-medium);
}

#band-detail-page .setlist-song-row__arr {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#band-detail-page .setlist-song-row__notes {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
    font-style: italic;
}

#band-detail-page .setlist-song-row__segue {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--colour-primary);
    padding: 1px var(--space-2);
    background: color-mix(in srgb, var(--colour-primary) 12%, transparent);
    border-radius: var(--radius-sm);
}

#band-detail-page .setlist-song-row__gap {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
    padding: 1px var(--space-2);
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-sm);
}

#band-detail-page .setlist-song-row__controls {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* ---- Add song form --------------------------------------- */

#band-detail-page .setlist-add-song {
    padding: var(--space-3) 0 var(--space-1);
}

#band-detail-page .add-song-form {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--colour-border);
}

/* ============================================================
   INVITES SECTION (members tab)
   ============================================================ */

#band-detail-page .invites-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-6);
    margin-top: var(--space-4);
    border-top: 1px solid var(--colour-border);
}

#band-detail-page .invites-section__heading {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--colour-text-muted);
}

#band-detail-page .invite-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
}

#band-detail-page .invite-row__email {
    flex: 1;
    font-size: var(--text-sm);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#band-detail-page .invite-row__role {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--colour-text-muted);
    padding: 1px var(--space-2);
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

#band-detail-page .invite-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 400px;
}

#band-detail-page .form-success {
    font-size: var(--text-sm);
    color: var(--colour-success);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--colour-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--colour-success) 25%, transparent);
    border-radius: var(--radius-md);
}

/* ============================================================
   SONG DETAIL PAGE
   ============================================================ */

#song-detail-page .song-detail-body {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ---- Song meta (title / view / edit) ---------------------- */

#song-detail-page .song-detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#song-detail-page .song-detail-meta__view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

#song-detail-page .song-detail-meta__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

#song-detail-page .song-detail-meta__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
}

#song-detail-page .song-detail-meta__artist {
    font-size: var(--text-base);
    color: var(--colour-text-muted);
}

#song-detail-page .song-detail-meta__duration {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    font-variant-numeric: tabular-nums;
}

#song-detail-page .song-detail-meta__notes {
    font-size: var(--text-base);
    color: var(--colour-text-muted);
    font-style: italic;
}

#song-detail-page .lyrics-review-warning {
    font-size: var(--text-sm);
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}

#song-detail-page .song-detail-meta__lyrics-url {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#song-detail-page .song-detail-meta__lyrics-url a {
    color: var(--colour-primary);
    text-decoration: underline;
}

#song-detail-page .song-detail-meta__lyrics {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    line-height: 1.7;
    white-space: pre-wrap;
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    max-height: 400px;
    overflow-y: auto;
}

/* ---- Status & general badges ------------------------------ */

.status-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.status-badge--active {
    background: rgba(124, 106, 247, 0.15);
    color: var(--colour-primary);
}

.status-badge--learning {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.status-badge--retired {
    background: var(--colour-surface-alt);
    color: var(--colour-text-muted);
}

.badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.badge--original {
    background: rgba(74, 222, 128, 0.1);
    color: var(--colour-success);
}

.badge--default {
    background: rgba(124, 106, 247, 0.15);
    color: var(--colour-primary);
}

/* ---- Shared form styles for song-detail-page -------------- */

#song-detail-page .tab-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#song-detail-page .tab-section-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
}

#song-detail-page .form-error {
    font-size: var(--text-sm);
    color: var(--colour-error);
    padding: var(--space-2) var(--space-3);
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: var(--radius-sm);
}

#song-detail-page .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-20) var(--space-8);
    text-align: center;
}

#song-detail-page .empty-state__text {
    color: var(--colour-text-muted);
    font-size: var(--text-lg);
}

/* ---- Add arrangement form --------------------------------- */

#song-detail-page .create-song-form {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

#song-detail-page .create-song-form__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

#song-detail-page .create-song-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

#song-detail-page .create-song-form .form-field,
#song-detail-page .card-edit-form .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#song-detail-page .create-song-form .form-field__label,
#song-detail-page .card-edit-form .form-field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--colour-text-muted);
}

#song-detail-page .create-song-form .form-field__input,
#song-detail-page .card-edit-form .form-field__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    color: var(--colour-text);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    transition: border-color 0.15s;
    outline: none;
}

#song-detail-page .create-song-form .form-field__input:focus,
#song-detail-page .card-edit-form .form-field__input:focus {
    border-color: var(--colour-primary);
}

#song-detail-page .create-song-form .form-field__input::placeholder,
#song-detail-page .card-edit-form .form-field__input::placeholder {
    color: var(--colour-text-muted);
    opacity: 0.55;
}

#song-detail-page .create-song-form .form-field__select,
#song-detail-page .card-edit-form .form-field__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}

#song-detail-page .create-song-form .form-field__textarea,
#song-detail-page .card-edit-form .form-field__textarea {
    resize: vertical;
    min-height: 72px;
}

#song-detail-page .create-song-form .form-field__textarea--tall,
#song-detail-page .card-edit-form .form-field__textarea--tall {
    min-height: 200px;
}

#song-detail-page .create-song-form .checkbox-label,
#song-detail-page .card-edit-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--colour-text);
    cursor: pointer;
    padding: var(--space-3) 0;
}

#song-detail-page .create-song-form .form-field--checkbox,
#song-detail-page .card-edit-form .form-field--checkbox {
    justify-content: flex-end;
}

/* ---- Inline card edit form -------------------------------- */

#song-detail-page .card-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

#song-detail-page .card-edit-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

#song-detail-page .card-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--colour-border);
}

#song-detail-page .card-edit-actions__left,
#song-detail-page .card-edit-actions__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---- Arrangements section --------------------------------- */

#song-detail-page .arrangements-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

#song-detail-page .arrangement-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

#song-detail-page .arrangement-row {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

#song-detail-page .arrangement-row__view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

#song-detail-page .arrangement-row__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    min-width: 0;
}

#song-detail-page .arrangement-row__name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
}

#song-detail-page .arrangement-row__meta {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

#song-detail-page .arrangement-row__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

#song-detail-page .arrangement-row__meta--warning {
    color: #fbbf24;
}

/* ---- Lyrics URL + fetch button row ------------------------ */

#song-detail-page .form-field__input-with-action {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

#song-detail-page .form-field__input-with-action .form-field__input {
    flex: 1;
    min-width: 0;
}

#song-detail-page .form-hint {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
    padding-top: var(--space-1);
}

/* ============================================================
   CHARTS SUBSECTION (nested inside arrangement-row)
   ============================================================ */

#song-detail-page .charts-subsection {
    border-top: 1px solid var(--colour-border);
    background: var(--colour-surface-alt);
    padding: var(--space-3) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

#song-detail-page .charts-subsection__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#song-detail-page .charts-subsection__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--colour-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#song-detail-page .charts-subsection__empty {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    padding: var(--space-1) 0;
}

/* ---- Chart list ------------------------------------------- */

#song-detail-page .chart-list {
    display: flex;
    flex-direction: column;
}

#song-detail-page .chart-row {
    border-top: 1px solid var(--colour-border);
    padding: var(--space-3) 0;
}

#song-detail-page .chart-row:first-child {
    border-top: none;
    padding-top: 0;
}

#song-detail-page .chart-row:last-child {
    padding-bottom: 0;
}

/* ---- Chart row — view mode -------------------------------- */

#song-detail-page .chart-row__view {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#song-detail-page .chart-row__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

#song-detail-page .chart-row__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

#song-detail-page .chart-row__meta {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
}

#song-detail-page .chart-row__meta--muted {
    opacity: 0.6;
}

#song-detail-page .chart-row__actions {
    margin-left: auto;
    flex-shrink: 0;
}

#song-detail-page .chart-row__notes {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    font-style: italic;
}

#song-detail-page .chart-row__content {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    white-space: pre-wrap;
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    max-height: 300px;
    overflow-y: auto;
}

/* ---- Chart row — edit form -------------------------------- */

#song-detail-page .chart-row .card-edit-form {
    padding: var(--space-3) 0 0;
}

/* ---- Arrangement instruments ------------------------------ */

#song-detail-page .arrangement-instruments {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--colour-border);
}

#song-detail-page .arrangement-instruments__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

#song-detail-page .arrangement-instruments__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--colour-text-muted);
    flex-shrink: 0;
}

#song-detail-page .arrangement-instruments__empty {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    font-style: italic;
}

#song-detail-page .arrangement-instruments__error {
    font-size: var(--text-sm);
    color: var(--colour-danger, #ef4444);
    margin-top: var(--space-2);
}

#song-detail-page .arrangement-instruments__add-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

#song-detail-page .arrangement-instruments__add-form select {
    flex: 1 1 auto;
    min-width: 0;
}

#song-detail-page .arrangement-instruments__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* ---- Instrument tags -------------------------------------- */

#song-detail-page .instrument-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--colour-surface-alt);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--colour-text);
    line-height: 1;
}

#song-detail-page .instrument-tag__name {
    line-height: 1;
}

#song-detail-page .instrument-tag__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    margin-left: var(--space-1);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--colour-text-muted);
    font-size: 12px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

#song-detail-page .instrument-tag__remove:hover {
    color: var(--colour-danger, #ef4444);
    background: color-mix(in srgb, var(--colour-danger, #ef4444) 12%, transparent);
}

#song-detail-page .instrument-tag--removing {
    opacity: 0.4;
    pointer-events: none;
}

/* ---- Chart instrument warning ----------------------------- */

#song-detail-page .chart-instrument-warning {
    background: color-mix(in srgb, #fbbf24 8%, var(--colour-surface-alt));
    border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--colour-border));
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}

#song-detail-page .chart-instrument-warning p {
    font-size: var(--text-sm);
    margin: 0 0 var(--space-3);
    color: var(--colour-text);
}

#song-detail-page .chart-instrument-warning__actions {
    display: flex;
    gap: var(--space-2);
}