/*
 * Dark-surface text/search inputs (Explorer sidebar, planner, canvas).
 * Loaded after reset.css so typed text stays light; does not target light header/search.
 */
:root {
    --ds-dark-input-text: rgba(255, 255, 255, 0.92);
    --ds-dark-input-placeholder: rgba(255, 255, 255, 0.45);
    --ds-dark-input-caret: #F7941D;
    --ds-dark-input-selection-bg: rgba(247, 148, 29, 0.38);
    --ds-dark-input-selection-text: #ffffff;
}

.explorer-sidebar input.explorer-search-input[type="search"],
.explorer-sidebar input.explorer-search-input[type="text"],
.explorer-canvas-area .explorer-followup-input,
.diagram-editor-page input.diagram-editor-input[type="text"] {
    color: var(--ds-dark-input-text) !important;
    -webkit-text-fill-color: var(--ds-dark-input-text) !important;
    caret-color: var(--ds-dark-input-caret) !important;
    color-scheme: dark;
}

.explorer-sidebar input.explorer-search-input[type="search"]::placeholder,
.explorer-sidebar input.explorer-search-input[type="text"]::placeholder,
.explorer-canvas-area .explorer-followup-input::placeholder,
.diagram-editor-page input.diagram-editor-input[type="text"]::placeholder {
    color: var(--ds-dark-input-placeholder) !important;
    -webkit-text-fill-color: var(--ds-dark-input-placeholder) !important;
    opacity: 1 !important;
}

.explorer-sidebar input.explorer-search-input[type="search"]::-webkit-input-placeholder,
.explorer-sidebar input.explorer-search-input[type="text"]::-webkit-input-placeholder,
.explorer-canvas-area .explorer-followup-input::-webkit-input-placeholder,
.diagram-editor-page input.diagram-editor-input[type="text"]::-webkit-input-placeholder {
    color: var(--ds-dark-input-placeholder) !important;
    -webkit-text-fill-color: var(--ds-dark-input-placeholder) !important;
}

.explorer-sidebar input.explorer-search-input[type="search"]::-moz-placeholder,
.explorer-sidebar input.explorer-search-input[type="text"]::-moz-placeholder,
.explorer-canvas-area .explorer-followup-input::-moz-placeholder,
.diagram-editor-page input.diagram-editor-input[type="text"]::-moz-placeholder {
    color: var(--ds-dark-input-placeholder) !important;
    opacity: 1 !important;
}

.explorer-sidebar input.explorer-search-input[type="search"]:focus,
.explorer-sidebar input.explorer-search-input[type="text"]:focus,
.explorer-canvas-area .explorer-followup-input:focus,
.diagram-editor-page input.diagram-editor-input[type="text"]:focus {
    color: var(--ds-dark-input-text) !important;
    -webkit-text-fill-color: var(--ds-dark-input-text) !important;
    caret-color: var(--ds-dark-input-caret) !important;
}

.explorer-sidebar input.explorer-search-input[type="search"]:-webkit-autofill,
.explorer-sidebar input.explorer-search-input[type="search"]:-webkit-autofill:hover,
.explorer-sidebar input.explorer-search-input[type="search"]:-webkit-autofill:focus,
.explorer-sidebar input.explorer-search-input[type="text"]:-webkit-autofill,
.explorer-sidebar input.explorer-search-input[type="text"]:-webkit-autofill:hover,
.explorer-sidebar input.explorer-search-input[type="text"]:-webkit-autofill:focus,
.explorer-canvas-area .explorer-followup-input:-webkit-autofill,
.explorer-canvas-area .explorer-followup-input:-webkit-autofill:hover,
.explorer-canvas-area .explorer-followup-input:-webkit-autofill:focus,
.diagram-editor-page input.diagram-editor-input[type="text"]:-webkit-autofill,
.diagram-editor-page input.diagram-editor-input[type="text"]:-webkit-autofill:hover,
.diagram-editor-page input.diagram-editor-input[type="text"]:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ds-dark-input-text) !important;
    caret-color: var(--ds-dark-input-caret) !important;
    transition: background-color 99999s ease-out 0s;
}

.explorer-sidebar input.explorer-search-input[type="search"]::selection,
.explorer-sidebar input.explorer-search-input[type="text"]::selection,
.explorer-canvas-area .explorer-followup-input::selection,
.diagram-editor-page input.diagram-editor-input[type="text"]::selection {
    background-color: var(--ds-dark-input-selection-bg);
    color: var(--ds-dark-input-selection-text);
}
