body {
    background-color: theme('colors.apple.gray');
    color: theme('colors.apple.text');
}
.glass-header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid theme('colors.apple.border');
}
.table-container {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.loader {
    border-top-color: theme('colors.apple.blue');
    animation: spinner 1.5s linear infinite;
}
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.modal-scroll::-webkit-scrollbar { width: 8px; }
.modal-scroll::-webkit-scrollbar-track { background: transparent; }
.modal-scroll::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 20px; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   TOUCH-FRIENDLY UI (Apple HIG Standards)
   ========================================================= */
/* Ensure all interactive and draggable elements are at least 44px tall */
button,
input,
select,
.lineup-item,
.reserve-item,
.artist-row {
    min-height: 44px;
}

/* Add margin-bottom between list items to prevent touch misclicks and ease dragging */
.lineup-item,
.reserve-item {
    margin-bottom: 12px;
    border-radius: 8px; /* Smooth corners for an iOS feel */
}

/* =========================================================
   TOUCH DRAG & DROP FIXES
   ========================================================= */
/* Voorkomt dat de browser de pagina scrollt wanneer je exact op een drag-element of handle drukt */
[draggable="true"],
.drag-handle {
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
}

/* =========================================================
   FLEXBOX LAYOUT (Desktop vs. Mobile)
   ========================================================= */
/* Default Desktop Layout: Side-by-side columns */
.lineup-editor-container {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.main-lineup-column,
.reserve-lineup-column {
    flex: 1;
    width: 100%;
}

.app-logo {
    max-height: 80px; /* Pas dit getal aan om het logo groter of kleiner te maken */
    width: auto;
    display: block;
    margin: 20px auto 30px auto; /* Zorgt dat hij mooi in het midden staat met ruimte eronder */
}

.app-header-logo {
    display: block;
    max-height: 32px; /* Aangepast naar het formaat van het originele icoon */
    width: auto;
    margin: 0 auto 15px auto;
}