/*
 * Fomantic → Evohus theming bridge
 * -----------------------------------------------------------------------------
 * Fomantic hard-codes light surfaces on every component it ships
 * (`.ui.segment{background:#fff}`, `.ui.input>input{background:#fff;color:rgba(0,0,0,.87)}`,
 * `.ui.modal{background:#fff}`, …). None of it reacts to `data-bs-theme`, so in dark
 * mode these render as white boxes with light text — effectively unreadable.
 *
 * The portal keeps a deliberate subset of Fomantic — dropdown, search, modal, form
 * controls and validation — because the Evohus equivalents are weaker. Those
 * components therefore have to be theme-aware, which is what this file does: it
 * re-binds their surfaces to Evohus `--dx-*` tokens. No `[data-bs-theme=dark]`
 * duplication is needed; the tokens already resolve per theme, so light mode keeps
 * its current appearance and dark mode simply becomes correct.
 *
 * Also covered transitionally: `.ui.segment` and `.ui.message`. Those are on the way
 * out (replaced by Evohus `.card`), but until every view has migrated they must not
 * be unreadable. Delete their blocks as the markup disappears.
 *
 * Not scoped to `.portal-legacy-content`: Fomantic relocates modals and dropdown
 * menus to body level, so they would fall outside that boundary.
 */

/* ---------------------------------------------------------------------------
 * 1. Surfaces (transitional — being replaced by Evohus .card)
 * ------------------------------------------------------------------------ */

.ui.segment,
.ui.segments,
.ui.segments > .segment {
    background: var(--dx-secondary-bg);
    color: var(--dx-body-color);
    border-color: var(--dx-border-color);
    box-shadow: none;
}

.ui.attached.segment {
    border-color: var(--dx-border-color);
}

.ui.message {
    background: var(--dx-tertiary-bg);
    color: var(--dx-body-color);
    box-shadow: none;
}

.ui.message .header {
    color: var(--dx-emphasis-color);
}

.ui.positive.message {
    background: var(--dx-success-bg-subtle, var(--dx-tertiary-bg));
    color: var(--dx-body-color);
    box-shadow: inset 0 0 0 1px var(--dx-success-border-subtle, var(--dx-border-color));
}

.ui.negative.message {
    background: var(--dx-danger-bg-subtle, var(--dx-tertiary-bg));
    color: var(--dx-body-color);
    box-shadow: inset 0 0 0 1px var(--dx-danger-border-subtle, var(--dx-border-color));
}

.ui.warning.message {
    background: var(--dx-warning-bg-subtle, var(--dx-tertiary-bg));
    color: var(--dx-body-color);
    box-shadow: inset 0 0 0 1px var(--dx-warning-border-subtle, var(--dx-border-color));
}

.ui.info.message {
    background: var(--dx-info-bg-subtle, var(--dx-tertiary-bg));
    color: var(--dx-body-color);
    box-shadow: inset 0 0 0 1px var(--dx-info-border-subtle, var(--dx-border-color));
}

/* Message text stays on the readable body colour: the tinted background and the
   border already carry the semantic meaning, and Evohus' `*-text-emphasis` tokens
   land around 3:1 on their own subtle backgrounds — under the 4.5:1 AA floor. */

/* ---------------------------------------------------------------------------
 * 2. Form controls — retained, so they must be theme-aware
 * ------------------------------------------------------------------------ */

.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="url"],
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="time"],
.ui.form textarea,
.ui.form select,
.ui.input > input {
    background: var(--dx-secondary-bg);
    color: var(--dx-body-color);
    border-color: var(--dx-border-color);
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.input > input:focus {
    background: var(--dx-secondary-bg);
    color: var(--dx-body-color);
    border-color: var(--dx-primary);
}

.ui.form input::placeholder,
.ui.form textarea::placeholder,
.ui.input > input::placeholder {
    color: var(--dx-secondary-color);
}

.ui.form label,
.ui.form .field > label {
    color: var(--dx-emphasis-color);
}

.ui.form .disabled.field,
.ui.form input[disabled],
.ui.form textarea[disabled] {
    opacity: .6;
}

/* Validation states — the reason this library is being kept.
   Fomantic writes these as `.ui.form .field.error input[type="text"]`; the attribute
   selector out-specifies a plain `input`, so the type list has to be repeated here. */
.ui.form .field.error input[type="text"],
.ui.form .field.error input[type="email"],
.ui.form .field.error input[type="password"],
.ui.form .field.error input[type="number"],
.ui.form .field.error input[type="search"],
.ui.form .field.error input[type="tel"],
.ui.form .field.error input[type="url"],
.ui.form .field.error input[type="date"],
.ui.form .field.error input[type="datetime-local"],
.ui.form .field.error input[type="time"],
.ui.form .field.error input,
.ui.form .field.error textarea,
.ui.form .field.error select,
.ui.form .field.error .ui.dropdown {
    background: var(--dx-danger-bg-subtle, var(--dx-secondary-bg));
    border-color: var(--dx-danger);
    color: var(--dx-body-color);
}

.ui.form .field.error > label,
.ui.form .ui.red.pointing.label,
.ui.form .ui.basic.red.pointing.prompt.label {
    background: var(--dx-danger-bg-subtle, var(--dx-tertiary-bg));
    border-color: var(--dx-danger);
    color: var(--dx-danger-text-emphasis, var(--dx-danger));
}

/* ---------------------------------------------------------------------------
 * 3. Dropdown + search — retained
 * ------------------------------------------------------------------------ */

.ui.dropdown,
.ui.selection.dropdown {
    background: var(--dx-secondary-bg);
    color: var(--dx-body-color);
    border-color: var(--dx-border-color);
}

.ui.selection.dropdown:hover,
.ui.selection.dropdown.active,
.ui.selection.dropdown:focus {
    border-color: var(--dx-primary);
    box-shadow: none;
}

.ui.dropdown .menu,
.ui.selection.dropdown .menu,
.ui.search .results {
    background: var(--dx-secondary-bg);
    border-color: var(--dx-border-color);
    box-shadow: var(--dx-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));
    color: var(--dx-body-color);
}

.ui.dropdown .menu > .item,
.ui.search .results .result {
    border-color: var(--dx-border-color);
    color: var(--dx-body-color);
}

.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > .item.selected,
.ui.dropdown .menu > .item.active.selected,
.ui.search .results .result:hover {
    background: var(--dx-tertiary-bg);
    color: var(--dx-emphasis-color);
}

.ui.dropdown .menu > .header,
.ui.search .results .category > .name {
    color: var(--dx-secondary-color);
}

.ui.dropdown > .text,
.ui.dropdown .default.text,
.ui.dropdown > .dropdown.icon {
    color: var(--dx-body-color);
}

.ui.dropdown .default.text,
.ui.dropdown > .text.default {
    color: var(--dx-secondary-color);
}

/* Multi-select chips */
.ui.multiple.dropdown > .label {
    background: var(--dx-tertiary-bg);
    color: var(--dx-body-color);
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * 4. Modal — retained
 * ------------------------------------------------------------------------ */

.ui.modal {
    background: var(--dx-secondary-bg);
    color: var(--dx-body-color);
}

.ui.modal > .header {
    background: var(--dx-secondary-bg);
    border-color: var(--dx-border-color);
    color: var(--dx-emphasis-color);
}

.ui.modal > .content {
    background: var(--dx-secondary-bg);
    color: var(--dx-body-color);
}

.ui.modal > .actions {
    background: var(--dx-tertiary-bg);
    border-color: var(--dx-border-color);
}

.ui.modal > .close {
    color: var(--dx-body-color);
}

/* ---------------------------------------------------------------------------
 * 5. Checkbox — used by the retained form line
 * ------------------------------------------------------------------------ */

.ui.checkbox label,
.ui.checkbox + label {
    color: var(--dx-body-color);
}

.ui.checkbox .box:before,
.ui.checkbox label:before {
    background: var(--dx-secondary-bg);
    border-color: var(--dx-border-color);
}

.ui.checkbox .box:after,
.ui.checkbox label:after {
    color: var(--dx-body-color);
}

.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
    background: var(--dx-primary);
    border-color: var(--dx-primary);
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * 6. Misc surfaces that leak through the retained components
 * ------------------------------------------------------------------------ */

.ui.menu {
    background: var(--dx-secondary-bg);
    color: var(--dx-body-color);
    box-shadow: none;
}

.ui.menu .item {
    color: var(--dx-body-color);
}

.ui.divider {
    border-top-color: var(--dx-border-color);
    border-bottom-color: transparent;
    color: var(--dx-secondary-color);
}

.ui.header {
    color: var(--dx-emphasis-color);
}

.ui.header .sub.header {
    color: var(--dx-secondary-color);
}