/* --- 1. SETLIST BUILDER UI (Main Container) --- */
#sb-builder-ui { 
    background: #fff; 
    padding: 25px; 
    border: 1px solid #ddd; 
    border-radius: 12px; 
    text-align: center; 
    overflow: visible; 
    position: relative;
    max-width: 800px; 
    margin: 0 auto 30px auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

#sb-builder-ui label { 
    display: block; 
    margin-bottom: 18px; 
    font-weight: bold; 
    font-size: 18px;
    color: #333;
}

/* --- 2. THE PICKER AREA --- */
#sb-builder-ui .ts-wrapper .ts-control { 
    min-height: 120px; 
    border: 2px solid #ccc; 
    border-radius: 8px;
    display: flex !important; 
    flex-direction: column !important; /* Stacked list for reordering stability */
    align-items: center !important; 
    padding: 20px !important;
    background-color: #fff;
    gap: 12px;
}

/* iOS Zoom Prevention & General Legibility */
#sb-builder-ui .ts-control,
#sb-builder-ui .ts-control > input {
    font-size: 16px !important;
}

#sb-builder-ui .ts-control > input {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 450px;
    min-height: 40px;
    margin-top: 10px;
    text-align: center;
}

/* --- 3. THE SONG PILLS (Locked Right-Delete) --- */
#sb-builder-ui .ts-wrapper.multi .ts-control > div { 
    background: #f9f9f9; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    /* Padding left for handle (45px), Padding right for X button (45px) */
    padding: 12px 45px 12px 45px !important; 
    margin: 0 !important; 
    position: relative;
    color: #333;
    font-weight: 500;
    
    display: inline-flex !important; 
    align-self: center;
    min-width: 300px; 
    max-width: 95%;
    
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    pointer-events: auto !important;
    touch-action: none;
    box-sizing: border-box;
}

/* The Drag Handle (Left) */
.sb-drag-handle { 
    position: absolute; 
    left: 12px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #aaa; 
    cursor: grab; 
    width: 30px; 
    font-size: 20px;
    text-align: center;
}

/* The Delete Button (Locked Right) */
#sb-builder-ui .ts-wrapper.multi .ts-control .remove {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid #ddd !important;
    border-radius: 0 6px 6px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0,0,0,0.03) !important;
    font-size: 18px !important;
    color: #999 !important;
}

#sb-builder-ui .ts-wrapper.multi .ts-control .remove:hover {
    background-color: #fee !important;
    color: #cf2e2e !important;
}

/* The Ghost (Drop Zone) */
.sortable-ghost { 
    opacity: 0.15 !important; 
    background: #0693E3 !important;
    border: 2px dashed #0693E3 !important;
    height: 48px !important; 
    min-width: 300px;
    visibility: visible !important;
}

/* --- 4. DROPDOWN & BOLD CATEGORIES --- */
.ts-dropdown .optgroup-header { 
    font-weight: 600 !important; 
    background: #f1f1f1 !important; 
    color: #444 !important;
    text-transform: uppercase;
    font-size: 13px;
    padding: 12px 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.ts-dropdown .option { 
    padding: 15px; 
    font-size: 19px !important; 
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

/* --- 5. BUTTONS (The No-Border Fix) --- */
.sb-actions-container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center;
    gap: 15px; 
    margin: 40px 0; 
    width: 100%;
}

#sb-builder-ui #launch-setlist, 
.sb-btn, 
#copy-setlist { 
    background-color: #0693E3; 
    color: #fff !important; 
    text-decoration: none !important; 
    padding: 14px 32px; 
    border-radius: 8px; 
    font-weight: bold; 
    font-size: 17px;
    cursor: pointer; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Strict border reset to fix the black border issue */
    border: none !important; 
    outline: none !important;
}

#sb-builder-ui #launch-setlist { 
    background-color: #cf2e2e; 
    margin-top: 25px;
}

#sb-builder-ui #launch-setlist:hover { background-color: #b02424; }
.sb-success { background-color: #00d084 !important; }

/* --- 6. MOBILE RESPONSIVE --- */
@media screen and (max-width: 768px) { 
    #sb-builder-ui .ts-wrapper.multi .ts-control > div {
        width: 100% !important; 
        min-width: 0;
    }
    #sb-builder-ui #launch-setlist,
    .sb-actions-container .sb-btn { 
        width: 100%;
        flex: 1 1 100%;
    }
}

/* --- 7. SETLIST DISPLAY SEPARATOR --- */
.song-entry {
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 3px solid #cccccc;
    position: relative;
}

/* Hide line on the last song */
.song-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Optional Diamond Decoration */
.song-entry::after {
    content: "◈";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 15px;
    color: #ccc;
    font-size: 18px;
}

.song-entry:last-child::after {
    display: none;
}

/* --- 8. TOGGLE SWITCH STYLING --- */
.sb-toggle-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 200px; /* Maintains your fixed-width grid */
    height: 48px;
}

.toggle-label {
    font-weight: bold;
    font-size: 14px;
    color: #444;
}

/* The Switch Box */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

/* The Slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #0693E3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #0693E3;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* --- 9. PLAIN TEXT LYRICS (Isolated Styling) --- */
.song-content-plain {
    /* Use 'pre-line' or 'normal' when using nl2br to avoid triple-spacing */
    white-space: normal; 
    word-wrap: break-word !important;
    
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    line-height: 1.6; /* Balanced height for readability */
    color: #222;
    text-align: left;
}

/* Ensure the <br> tags aren't hidden by any global styles */
.song-content-plain br {
    display: inline;
}

/* Ensure no global theme styles for divs override our spacing */
.song-content-plain {
    display: none; /* Controlled by JS toggle */
}