/* Custom styles for Choices.js in dark mode */
.choices__inner {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
    color: white;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
    /* Ensure dropdown appears above other content */
    z-index: 10;
}

.choices__item--choice {
    color: white;
}

/* FIX: Improved contrast for hovered/highlighted items in dark mode */
.choices__item--choice.is-highlighted {
    background-color: #3b82f6; /* blue-500 */
    color: white;
}

/* FIX: Make placeholder text visible in dark mode */
.choices__input::placeholder, .choices__placeholder {
    color: #d1d5db; /* gray-300 */
    opacity: 1;
}

/* Typeahead input text color */
.choices__input {
    background-color: transparent ; /* Ensure input background is transparent */
    color: white; /* Make typed text white */
}


/* Styling for selected items in multi-select */
.choices__list--multiple .choices__item {
    background-color: #0ea5e9; /* sky-500 */
    border-color: #0284c7; /* sky-600 */
    color: white;
    position: relative; /* Needed for pseudo-element positioning */
    /* UPDATED: Removed extra padding-right */
    /* padding-right: 1.5rem; */
    cursor: pointer; /* Indicate clickable */
    transition: background-color 0.2s ease;
}

/* Hide the default remove button ('x') */
.choices__list--multiple .choices__item .choices__button {
    display: none;
}

/* Show red background on hover */
.choices__list--multiple .choices__item:hover {
    background-color: #dc2626; /* red-600 */
    border-color: #b91c1c; /* red-700 */
}


/* Make all buttons in settings views larger */
#advanced-settings-view button[type="submit"],
#wizard-nav button {
    padding-top: 0.75rem;    /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 1.5rem;   /* px-6 */
    padding-right: 1.5rem;  /* px-6 */
    font-size: 1rem;         /* text-base */
    line-height: 1.5rem;
    border-radius: 0.5rem; /* rounded-lg */
}

/* Make modal buttons larger */
#hamburger-menu-modal button {
    padding-top: 0.75rem;    /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    font-size: 1rem;         /* text-base */
}

/* Make Choices.js dropdowns larger and more touch-friendly */
.choices__inner {
    font-size: 1rem; /* text-base */
    min-height: 48px; /* Taller */
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Make dropdown list items larger */
.choices__list--dropdown .choices__item--choice {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
}

/* NEW: Brighter highlight for hover/selected item in dropdown */
.choices__item--choice.is-highlighted {
    background-color: #3b82f6; /* blue-500 */
    color: white;
}
/* Ensure dark mode override also uses the bright color */
.choices__list--dropdown .choices__item--choice.is-highlighted,
.choices__list[aria-expanded] .choices__item--choice.is-highlighted {
    background-color: #3b82f6; /* blue-500 */
    color: white;
}

/* Make selected items in multi-select larger */
.choices__list--multiple .choices__item {
    font-size: 0.875rem; /* text-sm */
    padding-top: 0.35rem; /* Maintain vertical padding */
    padding-bottom: 0.35rem;
    padding-left: 0.75rem; /* Maintain left padding */
    /* padding-right adjusted above for remove text */
    margin-top: 0.4rem;
    border-radius: 0.375rem; /* rounded-md */
}

/* --- NEW: Wizard Preview Display (Base container) --- */
#wizard-preview-display {
    /* Copy of #display-view base styles */
    font-family: 'Inter', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-f, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 1s ease-in-out;
    position: relative;
    color: white;
    perspective: 1000px;
    overflow: hidden;
    /* Needs to be 100% of the scaler */
    width: 100%;
    height: 100%;
    /* No flex/padding needed here, layout is done via absolute children */
    display: block; /* Change from flex */
}

#wizard-preview-display::before {
    /* Copy of #display-view::before overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Dark overlay */
    z-index: 1;
}


#wizard-preview-welcome-screen-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Below editable elements, above overlay */
    display: none; /* Hidden by default */
}


@media (max-width: 1024px), (max-height: 700px) {
    #wizard-view {
        flex-direction: column;
        /* MODIFIED: Make view full height and handle overflow internally */
        /* UPDATED: 100vh to 100% */
        height: 100%; 
        overflow: hidden;
    }
    #wizard-settings-panel {
        width: 100%;
        /* MODIFIED: Set explicit vh heights */
        /* UPDATED: 100vh to 100% */
        height: 100%; /* 100% of parent height for settings */
        overflow-y: auto; /* This panel scrolls */
        order: 1; /* Settings are on top */
    }
    #wizard-preview-panel {
        /* MODIFIED: Hide preview panel entirely on mobile */
        display: none;
    }
    /* Make scaler full width but allow height to be auto */
    #wizard-preview-scaler {
        width: 100% ;
        height: auto ;
        transform: scale(1) ; /* Disable scaling on mobile */
    }
}


#wizard-preview-music-placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 30px; /* Skinny bar */
    background-color: rgba(0, 0, 0, 0.4);
    border-left: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
}

#wizard-preview-music-placeholder span {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem; /* Will be scaled by parent */
    letter-spacing: 0.1em;
}

.choices__input {
    background-color: transparent; /* Ensure input background is transparent */
    color: white; /* Make typed text white */
}

/* --- Fix for datetime-local input text color --- */
#countdown-datetime,
#countdown-datetime::-webkit-datetime-edit-fields-wrapper,
#countdown-datetime::-webkit-datetime-edit-text,
#countdown-datetime::-webkit-datetime-edit-month-field,
#countdown-datetime::-webkit-datetime-edit-day-field,
#countdown-datetime::-webkit-datetime-edit-year-field,
#countdown-datetime::-webkit-datetime-edit-hour-field,
#countdown-datetime::-webkit-datetime-edit-minute-field,
#countdown-datetime::-webkit-datetime-edit-ampm-field {
    color: #f3f4f6; /* gray-100 (white) */
}

/* NEW: Fix for number input text color */
#interval-input,
#welcome-frequency {
    color: #f3f4f6;
    color-scheme: dark;
}

/* NEW: Fix for text input color */
#welcome-family-name {
    color: #f3f4f6;
    color-scheme: dark;
}