/* CSS Variables */
:root {
    --color-primary: #7C3AED;
    --color-primary-dark: #5B21B6;
    --color-accent: #F59E0B;
    --color-bg: #0F0F1A;
    --color-surface: #1A1A2E;
    --color-border: #2E2E4A;
    --color-text: #E2E8F0;
    --color-muted: #94A3B8;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Component Classes */
.btn-primary {
    background-color: #7C3AED;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #6D28D9;
}

.btn-secondary {
    background-color: #374151;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #4B5563;
}

.btn-danger {
    background-color: #DC2626;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

.btn-danger:hover {
    background-color: #B91C1C;
}

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.input {
    background-color: #111827;
    border: 1px solid #374151;
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    outline: none;
}

.input:focus {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

.label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #9CA3AF;
    margin-bottom: 0.25rem;
    display: block;
}

.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
}

.table-base {
    width: 100%;
    font-size: 0.875rem;
    text-align: left;
    color: #D1D5DB;
}

.table-header {
    background-color: #1F2937;
    color: #9CA3AF;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.table-row {
    border-bottom: 1px solid #1F2937;
    transition: background-color 0.2s;
}

.table-row:hover {
    background-color: rgba(31, 41, 55, 0.5);
}

/* Utility classes */
.status-idea {
    background-color: #4B5563;
    color: #F3F4F6;
}

.status-inrehearsal {
    background-color: #CA8A04;
    color: #FEF3C7;
}

.status-liveready {
    background-color: #16A34A;
    color: #D1FAE5;
}

.status-retired {
    background-color: #6B7280;
    color: #F3F4F6;
}

.status-draft {
    background-color: #4B5563;
    color: #F3F4F6;
}

.status-scheduled {
    background-color: #2563EB;
    color: #DBEAFE;
}

.status-posted {
    background-color: #16A34A;
    color: #D1FAE5;
}

.status-cancelled {
    background-color: #DC2626;
    color: #FEE2E2;
}

.status-released {
    background-color: #16A34A;
    color: #D1FAE5;
}

.status-archived {
    background-color: #6B7280;
    color: #F3F4F6;
}

/* Mobile menu overlay */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
}

/* ── File Manager ─────────────────────────────────────────────────────────── */
.folder-item {
    cursor: pointer;
    transition: background 0.15s;
}

.folder-item:hover {
    background: rgba(124, 58, 237, .15);
}

.folder-item.active {
    background: rgba(124, 58, 237, .25);
    border-left: 3px solid #7c3aed;
}

th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable:hover {
    color: #a78bfa;
}

th.sortable .sort-icon {
    opacity: .4;
    margin-left: 4px;
}

th.sortable.asc .sort-icon::after {
    content: '▲';
    opacity: 1;
}

th.sortable.desc .sort-icon::after {
    content: '▼';
    opacity: 1;
}

th.sortable:not(.asc):not(.desc) .sort-icon::after {
    content: '⇅';
}

.breadcrumb-item {
    cursor: pointer;
}

.breadcrumb-item:hover {
    text-decoration: underline;
}

#drop-zone.drag-over {
    border: 2px dashed #7c3aed;
    background: rgba(124, 58, 237, .1);
}

/* Upload snackbar */
#upload-snackbar {
    transition: opacity .25s, transform .25s;
}

#upload-snackbar.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

#upload-bar-inner {
    transition: width .15s ease-out;
}

/* ── Backoffice ─────────────────────────────────────────────────────────────── */
.perm-toggle {
    cursor: pointer;
    user-select: none;
}

.perm-toggle input[type=checkbox] {
    accent-color: #7c3aed;
    width: 1.1rem;
    height: 1.1rem;
}

tr.saving td {
    opacity: .5;
    pointer-events: none;
}

.badge-admin {
    background: #7c3aed22;
    color: #a78bfa;
}

.badge-manager {
    background: #0284c722;
    color: #38bdf8;
}

.badge-member {
    background: #16a34a22;
    color: #4ade80;
}

.badge-guest {
    background: #374151;
    color: #9ca3af;
}

/* ── Responsive Tables ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .table-responsive table {
        display: block;
    }

    .table-responsive thead {
        display: none;
    }

    .table-responsive tbody {
        display: block;
    }

    .table-responsive tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .table-responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid var(--color-border);
        text-align: right;
    }

    .table-responsive td:last-child {
        border-bottom: none;
    }

    /* Hide decoration-only cells (icon column) */
    .table-responsive td[data-label=''] {
        display: none;
    }

    /* Show column label as left-side prefix */
    .table-responsive td[data-label]:not([data-label=''])::before {
        content: attr(data-label);
        color: #9CA3AF;
        font-size: 0.7rem;
        text-transform: uppercase;
        font-weight: 600;
        flex-shrink: 0;
        margin-right: 1rem;
        text-align: left;
    }
}

/* Print styles */
@media print {

    .no-print,
    aside,
    #sidebar,
    #menu-toggle,
    button,
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        background: white !important;
        page-break-inside: avoid;
    }

    main {
        margin: 0 !important;
        padding: 20px !important;
    }

    .page-title {
        color: black !important;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #333;
        padding: 8px;
        color: black !important;
        background: white !important;
    }

    .badge {
        border: 1px solid #333;
        color: black !important;
        background: white !important;
    }

    /* Setlist specific print styles */
    .setlist-item {
        page-break-inside: avoid;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 10px;
    }

    .setlist-total-duration {
        font-weight: bold;
        border-top: 2px solid #000;
        padding-top: 10px;
        margin-top: 20px;
    }
}