/* CrossOver V3 design system (layered over Bootstrap). */
@import "v3/color_scheme-kJfY54q.css";
@import "v3/layout-d-dhNrK.css";
@import "v3/buttons-BMPD_Ht.css";
@import "v3/login-U0wntiz.css";

/* Drop-zone + validation styles (ported from the legacy assets/css/custom.css). */
.drop-zone {
    transition: all 0.3s;
    border-color: var(--light-ui-gray) !important;
}

.drop-zone:hover {
    background-color: var(--gray-accent-bkg);
    cursor: pointer;
}

/* Highlighted while a file is being dragged over the zone. */
.drop-zone--dragover {
    background-color: #e6f0fd;
    border-color: var(--accent-blue) !important;
    border-style: solid !important;
}

/* A file has been selected and is ready to upload. */
.drop-zone--ready {
    background-color: #f0faf4;
    border-color: var(--green-positive) !important;
    border-style: solid !important;
}

.is-invalid {
    border-color: #dc3545;
}

/* Only shown next to a field that is actually invalid. `display: block` here
   would pin the hint under every field permanently — it read as a validation
   error on perfectly valid input. */
.invalid-feedback {
    color: #dc3545;
}

.was-validated :invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback {
    display: block;
}

/* The extraction's rejected values, listed under their picker. */
.tag-rejected {
    background-color: #f8d7da;
    color: #842029;
    text-decoration: line-through;
    font-weight: 400;
}

/* Tom Select hides the <select> and renders `.ts-wrapper` beside it, so the
   invalid state has to be styled on the wrapper — review.js puts the class on
   both.

   The theme's own rule resolves `var(--bs-form-invalid-color)`, which Bootstrap
   only defines from 5.3; on the 5.2.3 pinned here it resolves to nothing and
   the border stays grey. Measured in Chrome: the field looked untouched while
   the submit was being blocked, so a rejected save gave no feedback at all. */
.ts-wrapper.is-invalid,
.ts-wrapper.is-invalid .ts-control {
    border-color: #dc3545;
}