/* Custom Prompt Styling */
.custom-prompt-display {
    transition: all 0.3s ease;
}

.custom-prompt-display .alert {
    border-left: 4px solid var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.05);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.custom-prompt-display .alert strong {
    color: var(--primary-color);
}

.custom-prompt-display #customPromptText {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}


#customPromptTextarea {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.4;
    resize: vertical;
}

/* Dark theme custom prompt styling */
.dark-theme .custom-prompt-display .alert {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.3);
    color: var(--text-color);
}


.dark-theme #customPromptTextarea {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-theme #customPromptTextarea:focus {
    background-color: var(--bg-color);
    border-color: var(--primary-color);
    color: var(--text-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Tag input styling */
#fileTagInput, #recordTagInput {
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#fileTagInput:focus, #recordTagInput:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
    outline: 0;
}

.dark-theme #fileTagInput, .dark-theme #recordTagInput {
    background-color: var(--card-bg-color);
    border-color: var(--card-border-color);
    color: var(--text-color);
}

.dark-theme #fileTagInput:focus, .dark-theme #recordTagInput:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Dark theme global text color override to ensure Bootstrap rules don't leave black text */
.dark-theme, .dark-theme body, .dark-theme body * {
    color: var(--text-color) !important;
}

/* Exempt interactive controls that set their own readable colors (buttons/links) from being forced */
.dark-theme .btn, .dark-theme a, .dark-theme .btn * {
    color: inherit !important;
}

/* Ensure common element backgrounds and borders are dark in dark theme */
html.dark-theme body {
    background-color: var(--bg-light-color) !important;
}

html.dark-theme .card,
html.dark-theme .card-body,
html.dark-theme .upload-zone,
html.dark-theme .form-control,
html.dark-theme .form-select,
html.dark-theme .container,
html.dark-theme .row,
html.dark-theme .col-md-6,
html.dark-theme .navbar,
html.dark-theme .sticky-navbar,
html.dark-theme .modal-content,
html.dark-theme .list-group-item {
    background-color: var(--card-bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border-color) !important;
}

html.dark-theme .upload-zone {
    background-color: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
}

/* Ensure form controls use card background for contrast */
html.dark-theme .form-control,
html.dark-theme .form-select {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Inputs inside audio-source-selection */
html.dark-theme .audio-source-selection .form-check {
    background-color: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}