/**
 * Standard form layout — consistent field sizes.
 * Scope with .standard-form on the <form> element.
 * Use .form-field-select / .form-field-control on standalone fields (e.g. dashboard toolbar).
 */

:root {
    --field-height: 42px;
    --field-font: 0.875rem;
    --field-radius: 6px;
    --field-border: #dee2e6;
    --label-color: #071437;
    --label-size: 0.875rem;
}

.standard-form {
    --field-height: 42px;
    --field-font: 0.875rem;
    --field-radius: 6px;
    --field-border: #dee2e6;
    --label-color: #071437;
    --label-size: 0.875rem;
}

.standard-form .form-label {
    font-size: var(--label-size);
    font-weight: 500;
    color: var(--label-color);
    margin-bottom: 0.35rem;
}

/* Required field asterisk — red across all forms */
.form-label .required-mark,
.form-label .text-danger,
label .required-mark,
label.form-label .required-mark,
label.form-label .text-danger,
.modal .form-label .required-mark,
.modal .form-label .text-danger,
.modal label .required-mark,
.list-filters-form .form-label .required-mark,
.list-filters-form .form-label .text-danger,
.register-filter-form .form-label .required-mark,
.register-filter-form .form-label .text-danger,
.detail-page .form-label .required-mark,
.detail-page .form-label .text-danger {
    color: #dc3545 !important;
    font-weight: 600;
}

.form-field-control,
.standard-form .form-control {
    min-height: var(--field-height);
    padding: 0.5rem 0.75rem;
    font-size: var(--field-font);
    line-height: 1.5;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius) !important;
    background-color: #fff;
    box-shadow: none !important;
    transform: none !important;
}

.form-field-select,
.standard-form .form-select {
    min-height: var(--field-height);
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: var(--field-font);
    line-height: 1.5;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius) !important;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    box-shadow: none !important;
    transform: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-field-select.form-select-sm {
    min-height: var(--field-height) !important;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
    font-size: var(--field-font) !important;
    border-radius: var(--field-radius) !important;
}

.form-field-control:hover,
.standard-form .form-control:hover {
    border-color: #ced4da !important;
    box-shadow: none !important;
    transform: none !important;
}

.form-field-select:hover,
.standard-form .form-select:hover {
    border-color: #ced4da !important;
    box-shadow: none !important;
    transform: none !important;
}

.form-field-control:focus,
.standard-form .form-control:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
    background-color: #fff !important;
    transform: none !important;
}

.form-field-select:focus,
.standard-form .form-select:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    transform: none !important;
}

.standard-form textarea.form-control {
    min-height: auto;
}

.standard-form .form-control[readonly],
.standard-form .form-control:read-only {
    background-color: #f8f9fa;
}

.standard-form .form-text,
.standard-form small.text-muted {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.form-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--label-color, #071437);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.form-section-title.mb-0 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Select2 — match native field height */
.standard-form .select2-container--default .select2-selection--single {
    height: var(--field-height) !important;
    min-height: var(--field-height) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius) !important;
    position: relative;
}

.standard-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--field-height) - 2px) !important;
    padding-left: 0.75rem;
    padding-right: 3.75rem;
    font-size: var(--field-font);
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standard-form .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 2rem;
    top: 0;
    z-index: 2;
    cursor: pointer;
    height: calc(var(--field-height) - 2px);
    line-height: calc(var(--field-height) - 2px);
    margin: 0;
    padding: 0 0.35rem;
    font-weight: 600;
    color: #6c757d;
}

.standard-form .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #212529;
}

.standard-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--field-height) - 2px) !important;
    width: 2rem;
    top: 1px;
    right: 1px;
    z-index: 1;
}

.standard-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6c757d transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}

.standard-form .select2-container {
    width: 100% !important;
    max-width: 100%;
}

/* Dropdown is appended to body — class set via dropdownCssClass */
.select2-dropdown.standard-select2-dropdown {
    box-sizing: border-box;
    overflow: hidden;
}

.standard-select2-dropdown .select2-results__option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tab panes inside forms — no global tab-content box */
.standard-form .tab-content {
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: 0;
    padding: 0;
}

.standard-form .tab-pane {
    padding: 0;
    animation: none;
}

.standard-form .time-inputs {
    display: flex;
    align-items: center;
}

.standard-form .time-inputs input {
    width: 80px;
    margin-right: 5px;
}

.standard-form .spin-buttons {
    display: flex;
    flex-direction: column;
}

.standard-form .spin-buttons button {
    padding: 2px 6px;
    margin: 2px 0;
    font-size: 12px;
}

/* Checkboxes & radios — compact, primary blue (overrides global teal/large styles) */
.form-check {
    padding-left: 1.625rem;
    margin-bottom: 0;
    min-height: 1.25rem;
}

.form-check .form-check-input {
    width: 1rem !important;
    height: 1rem !important;
    margin-top: 0.125em;
    margin-left: -1.625rem;
    border: 1px solid #ced4da !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    transform: none !important;
    float: left;
}

.form-check .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    transform: none !important;
}

.form-check .form-check-input:hover {
    border-color: #adb5bd !important;
    transform: none !important;
}

.form-check .form-check-input:checked:hover {
    background-color: #0b5ed7 !important;
    border-color: #0b5ed7 !important;
}

.form-check .form-check-input:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
    transform: none !important;
}

.form-check .form-check-input[type="radio"]:checked {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230d6efd'/%3e%3c/svg%3e") !important;
    border-color: #0d6efd !important;
}

.form-check .form-check-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #071437;
    line-height: 1.4;
    cursor: pointer;
}

.form-switch .form-check-input {
    width: 2em !important;
    height: 1em !important;
    margin-left: -2.5em;
}

.form-switch .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.form-switch .form-check-input:focus {
    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%280,0,0,0.25%29'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked:focus {
    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='%23fff'/%3e%3c/svg%3e") !important;
}

/* Input groups — adjoined selects/buttons match field height */
.standard-form .input-group {
    border-radius: var(--field-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    transform: none !important;
    align-items: stretch;
}

.standard-form .input-group:focus-within {
    box-shadow: none !important;
    transform: none !important;
}

.standard-form .input-group > .btn {
    min-height: var(--field-height);
    padding: 0.5rem 0.75rem;
    font-size: var(--field-font);
    line-height: 1.5;
    border-radius: 0 !important;
    overflow: visible !important;
}

.standard-form .input-group > .form-select:not(:last-child),
.standard-form .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.standard-form .input-group > .btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Password toggle — single outer shell, view-button segment on the right */
.standard-form .input-group:has(.input-group-view-btn) {
    border: 1px solid var(--field-border);
    background: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.standard-form .input-group:has(.input-group-view-btn):focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.standard-form .input-group:has(.input-group-view-btn) > .form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.standard-form .input-group:has(.input-group-view-btn) > .form-control:focus {
    border: none !important;
    box-shadow: none !important;
}

.standard-form .input-group > .btn.input-group-view-btn {
    background: #e8f4fd !important;
    background-image: none !important;
    border: none !important;
    border-left: 1px solid #b6d4fe !important;
    border-radius: 0 !important;
    color: #0d6efd !important;
    box-shadow: none !important;
    transform: none !important;
    min-width: var(--field-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.standard-form .input-group > .btn.input-group-view-btn::before,
.standard-form .input-group > .btn.input-group-view-btn::after {
    display: none !important;
}

.standard-form .input-group > .btn.input-group-view-btn:hover,
.standard-form .input-group > .btn.input-group-view-btn:focus {
    background: #d0e8fc !important;
    background-image: none !important;
    border-left-color: #9ec5fe !important;
    color: #0b5ed7 !important;
    transform: none !important;
    box-shadow: none !important;
}

.standard-form .input-group > .form-control:not(:last-child) {
    border-right: none !important;
}

.standard-form .input-group:not(:has(.input-group-view-btn)) > .form-control:first-child,
.standard-form .input-group:not(:has(.input-group-view-btn)) > .form-select:first-child {
    border-top-left-radius: var(--field-radius) !important;
    border-bottom-left-radius: var(--field-radius) !important;
}

.standard-form .input-group:not(:has(.input-group-view-btn)) > .btn:last-child,
.standard-form .input-group:not(:has(.input-group-view-btn)) > .form-control:last-child,
.standard-form .input-group:not(:has(.input-group-view-btn)) > .form-select:last-child {
    border-top-right-radius: var(--field-radius) !important;
    border-bottom-right-radius: var(--field-radius) !important;
}

.standard-form .input-group-select2 .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

.standard-form .input-group-select2 .select2-container--default .select2-selection--single {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Profile image upload — pastel action button */
.profile-image-upload-btn {
    background: #e8f4fd !important;
    background-image: none !important;
    border: 1px solid #b6d4fe !important;
    color: #0d6efd !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 0.35rem 0.75rem !important;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
    line-height: 1.5 !important;
}

.profile-image-upload-btn::before,
.profile-image-upload-btn::after {
    display: none !important;
}

.profile-image-upload-btn:hover,
.profile-image-upload-btn:focus {
    background: #d0e8fc !important;
    background-image: none !important;
    border-color: #9ec5fe !important;
    color: #0a58ca !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
}