/* Shared styles loaded by every module layout (admin and front end). */

/* jquery-validation error messages */
label.error,
.invalid-feedback.d-block {
    color: var(--bs-danger, #dc3545);
    font-size: 0.875em;
    margin-top: 0.25rem;
}

input.error,
select.error,
textarea.error {
    border-color: var(--bs-danger, #dc3545);
}

/* Keep the daterangepicker above AdminLTE's fixed header and sidebar */
.daterangepicker {
    z-index: 1060;
}

@keyframes slideDown { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes slideUp   { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -20px); } }

/* Forms */
/* Field wrapper spacing (was the !important .mb-3 utility, which compact.css could not tighten). */
.form-field { margin-bottom: 1rem; }
.required-mark { color: #dc3545; margin-left: 2px; }
.datepicker-input { background-color: var(--bs-body-bg); }
.input-group-text[role="button"] { cursor: pointer; }

/* Admin lists */
.table td.actions, .table th.actions { width: 1%; white-space: nowrap; text-align: right; }
.table th a.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.card-footer .pagination { margin-bottom: 0; }

/* jquery-confirm on top of AdminLTE's fixed navbar/sidebar */
.jconfirm { z-index: 1060 !important; }

/* Select2 (bootstrap-5 theme) in AdminLTE's dark mode: the theme only ships light colours. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.select2-container--bootstrap-5 .select2-dropdown { z-index: 1060; }