/* ============================================================================================ */
/* DARK THEME: FORMS                                                                             */
/* Inputs, selects, checks, input groups and the form plugins (Select2 3.x, bootstrap-          */
/* multiselect, multiple-select, bootstrap-datepicker/timepicker, jQuery UI datepicker).        */
/* agency-platform.css already paints .form-control from tokens; this covers vendor CSS.        */
/* ============================================================================================ */

/* light chevron for native selects (Bootstrap ships a dark one) */
html[data-theme="dark"] {
    --app-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3c9d0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* TEXT INPUTS -------------------------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--app-input-bg);
    border-color: var(--app-border-input);
    color: var(--app-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
    background-color: var(--app-input-bg);
    color: var(--app-text-strong);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--app-text-faint);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] fieldset[disabled] .form-control,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] input:disabled {
    background-color: var(--app-input-disabled-bg);
    color: var(--app-text-muted);
    opacity: 1;
}
html[data-theme="dark"] .form-control[readonly]:not(:disabled) {
    background-color: var(--app-input-readonly-bg);
    color: var(--app-text);
}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background-color: var(--app-surface);
    color: var(--app-text);
}
html[data-theme="dark"] .form-select,
html[data-theme="dark"] select.form-control:not([multiple]):not([size]) {
    background-image: var(--app-select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
html[data-theme="dark"] input[type="file"].form-control::file-selector-button {
    background-color: var(--app-surface-3);
    color: var(--app-text);
}

/* CHECKS, RADIOS, SWITCHES ------------------------------------------------------------------- */
html[data-theme="dark"] .form-check-input:not(:checked) {
    background-color: var(--app-input-bg);
    border-color: var(--app-border-input);
}
html[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.4%29'/%3e%3c/svg%3e");
}

/* INPUT GROUPS ------------------------------------------------------------------------------- */
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .input-group-addon,
html[data-theme="dark"] .input-group > .input-group-addon,
html[data-theme="dark"] .input-group > .input-group-text {
    background-color: var(--app-surface-4);
    border-color: var(--app-border-input);
    color: var(--app-text);
}

/* VALIDATION --------------------------------------------------------------------------------- */
html[data-theme="dark"] .has-error .form-control,
html[data-theme="dark"] .form-control.is-invalid {
    border-color: #ea868f;
}
html[data-theme="dark"] .has-error .help-block,
html[data-theme="dark"] .invalid-feedback,
html[data-theme="dark"] .validationMessage,
html[data-theme="dark"] span.validationMessage {
    color: #ea868f !important;
}

/* SELECT2 3.x -------------------------------------------------------------------------------- */
html[data-theme="dark"] .select2-container .select2-choice,
html[data-theme="dark"] .select2-container-multi .select2-choices,
html[data-theme="dark"] .select2-container.select2-dropdown-open .select2-choice {
    background: var(--app-input-bg);
    background-image: none;
    border-color: var(--app-border-input);
    color: var(--app-text);
}
html[data-theme="dark"] .select2-container .select2-choice .select2-arrow {
    background: transparent;
    background-image: none;
    border-left-color: var(--app-border-input);
}
html[data-theme="dark"] .select2-container .select2-choice > .select2-chosen,
html[data-theme="dark"] .select2-container.select2-dropdown-open .select2-choice .select2-chosen {
    color: var(--app-text);
}
html[data-theme="dark"] .select2-container .select2-choice abbr,
html[data-theme="dark"] .select2-container .select2-choice .select2-arrow b,
html[data-theme="dark"] .select2-search input {
    filter: invert(0.85);
}
html[data-theme="dark"] .select2-default,
html[data-theme="dark"] .select2-container .select2-choice.select2-default > .select2-chosen {
    color: var(--app-text-faint) !important;
}
html[data-theme="dark"] .select2-drop,
html[data-theme="dark"] .select2-drop .select2-search,
html[data-theme="dark"] .select2-drop .select2-results,
html[data-theme="dark"] .select2-results {
    background: var(--app-surface);
    border-color: var(--app-border-input);
    color: var(--app-text);
}
html[data-theme="dark"] .select2-drop .select2-search > input,
html[data-theme="dark"] .select2-container-multi .select2-choices .select2-search-field input {
    background: var(--app-input-bg);
    border-color: var(--app-border-input);
    color: var(--app-text);
    filter: none;
}
html[data-theme="dark"] ul.select2-results li.select2-result {
    color: var(--app-text);
}
html[data-theme="dark"] .select2-results .select2-highlighted,
html[data-theme="dark"] ul.select2-results li.select2-result.select2-highlighted {
    background: var(--app-color-primary);
    color: var(--app-text-on-color);
}
/* EBS-759: red on the primary fill is unreadable; the "(Inactive)" label still marks the row. */
html[data-theme="dark"] ul.select2-results li.select2-result.select2-highlighted .agent-option-inactive {
    color: inherit;
}
/* Agent names coloured by status (.agent-name-*, css/agency-platform.css): black and pure blue
   vanish on dark surfaces, so each takes the dark theme's equivalent. Also covers native
   <option>s, whose dark popup follows color-scheme. */
html[data-theme="dark"] .agent-name-default {
    color: var(--app-text);
}
html[data-theme="dark"] .agent-name-blue {
    color: var(--app-link);
}
html[data-theme="dark"] .agent-name-red {
    color: var(--app-text-danger);
}
html[data-theme="dark"] .agent-name-accent {
    color: var(--app-color-blue);
}
/* On the highlighted (primary) row, the row's own text colour reads; a status colour would not. */
html[data-theme="dark"] ul.select2-results li.select2-result.select2-highlighted [class*="agent-name-"] {
    color: inherit;
}
html[data-theme="dark"] .select2-results .select2-no-results,
html[data-theme="dark"] .select2-results .select2-searching,
html[data-theme="dark"] .select2-results .select2-selection-limit {
    background: var(--app-surface-1);
    color: var(--app-text-muted);
}

/* BOOTSTRAP-MULTISELECT & MULTIPLE-SELECT ---------------------------------------------------- */
html[data-theme="dark"] .multiselect-container,
html[data-theme="dark"] .ms-drop {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .multiselect-container > li > a,
html[data-theme="dark"] .multiselect-container > li > a > label,
html[data-theme="dark"] .ms-drop ul > li label {
    color: var(--app-text);
}
html[data-theme="dark"] .multiselect-container > li > a:hover,
html[data-theme="dark"] .ms-drop ul > li:hover {
    background-color: var(--app-surface-3);
}
html[data-theme="dark"] .multiselect-container > li.active > a,
html[data-theme="dark"] .multiselect-container > li.active > a > label {
    background-color: var(--app-color-primary-opaque-4);
    color: var(--app-text-strong);
}
html[data-theme="dark"] .ms-choice,
html[data-theme="dark"] .ms-parent.form-control > button {
    background-color: var(--app-input-bg);
    border-color: var(--app-border-input);
    color: var(--app-text);
}
html[data-theme="dark"] .ms-choice > span.placeholder {
    color: var(--app-text-faint);
}
html[data-theme="dark"] .ms-search input {
    background-color: var(--app-input-bg);
    color: var(--app-text);
}

/* DATEPICKERS -------------------------------------------------------------------------------- */
html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .datepicker.dropdown-menu,
html[data-theme="dark"] .ui-datepicker,
html[data-theme="dark"] .bootstrap-timepicker-widget.dropdown-menu,
html[data-theme="dark"] .daterangepicker {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .datepicker table thead tr:not(:first-child),
html[data-theme="dark"] .ui-datepicker .ui-datepicker-header {
    background: var(--app-surface-3);
    color: var(--app-text);
}
html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th,
html[data-theme="dark"] .ui-datepicker td a,
html[data-theme="dark"] .ui-datepicker th {
    color: var(--app-text);
}
html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td span:hover,
html[data-theme="dark"] .datepicker .datepicker-switch:hover,
html[data-theme="dark"] .datepicker .prev:hover,
html[data-theme="dark"] .datepicker .next:hover,
html[data-theme="dark"] .datepicker tfoot tr th:hover {
    background: var(--app-surface-3);
}
html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new,
html[data-theme="dark"] .datepicker table tr td.disabled {
    color: var(--app-text-faint);
}
html[data-theme="dark"] .datepicker-dropdown::after {
    border-bottom-color: var(--app-surface);
}
html[data-theme="dark"] .bootstrap-timepicker-widget table td input {
    background-color: var(--app-input-bg);
    color: var(--app-text);
}
html[data-theme="dark"] .bootstrap-timepicker-widget table td a {
    color: var(--app-text);
}
html[data-theme="dark"] .bootstrap-timepicker-widget table td a:hover {
    background-color: var(--app-surface-3);
}