/* =========================================================
   GLOBAL FOCUS STYLING
   ========================================================= */

/* All inputs and selects focus — standard state */
input.form-control:focus,
select.form-select:focus,
.form-select+.select2.select2-container--focus .select2-selection {
    border-color: #009EF7 !important;
    /* Bootstrap blue */

    outline: none;
    /* remove default outline */
}

/* Keep invalid focus red if invalid */
input.form-control.is-invalid:focus,
select.form-select.is-invalid:focus,
.form-select.is-invalid+.select2.select2-container--focus .select2-selection {
    border-color: #fcb6c9 !important;

}

/* Invalid + Focus — Placeholder */
.form-select.is-invalid+.select2.select2-container--focus .select2-selection__placeholder {
    color: #ed8595 !important;
    font-weight: 300 !important;
}

/* =========================================================
   Laravel / Bootstrap Validation Styling
   Global invalid input appearance
   ========================================================= */
select.form-select,
input.form-control {
    color: #000 !important;
    background-image: none !important;
    font-weight: 400;
}

/* Red border + background + remove default icon */
.form-control.is-invalid {
    border-color: #fcb6c9;
    background-color: #f8d7da;
    color: #dd3148;
    background-image: none !important;
}

/* Focus state */
.form-control.is-invalid:focus {
    border-color: #fcb6c9;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    background-color: #f8d7da;
    color: #dd3148;
}

/* Invalid input styles */
input.form-control.is-invalid,
input.form-control.is-invalid.form-control-lg,
input.form-control.is-invalid.form-control-solid {
    border-color: #fcb6c9 !important;
    background-color: #f8d7da !important;
    color: #dd3148 !important;
    background-image: none !important;
}

/* Placeholder styling */
form .form-control.is-invalid::-webkit-input-placeholder {
    color: #ed8595;
    font-weight: 300;
}

form .form-control.is-invalid::-moz-placeholder {
    color: #ed8595;
    font-weight: 300;
}

form .form-control.is-invalid:-ms-input-placeholder {
    color: #ed8595;
    font-weight: 300;
}

form .form-control.is-invalid::placeholder {
    color: #ed8595;
    font-weight: 300;
}

/* Focus style for invalid inputs */
input.form-control.is-invalid:focus,
input.form-control.is-invalid.form-control-lg:focus,
input.form-control.is-invalid.form-control-solid:focus {
    border-color: #fcb6c9 !important;
    color: #dd3148 !important;
}


/* =========================================================
   SELECT (form-select) invalid styling — matches form-control
   ========================================================= */


input.form-select {
    color: #000 !important;
    background-image: none !important;
    font-weight: 400;
}

/* Base invalid select */
.form-select.is-invalid {
    border-color: #fcb6c9 !important;
    background-color: #f8d7da !important;
    color: #dd3148 !important;

    /* remove bootstrap arrow + validation icon */
    background-image: none !important;
    padding-right: 1rem !important;
}

/* Focus state */
.form-select.is-invalid:focus {
    border-color: #fcb6c9 !important;
    background-color: #f8d7da !important;
    color: #dd3148 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-image: none !important;
}

/* Large & solid variants */
select.form-select.is-invalid,
select.form-select.form-select-lg.is-invalid,
select.form-select.form-select-solid.is-invalid {
    border-color: #fcb6c9 !important;
    background-color: #f8d7da !important;
    color: #dd3148 !important;
    background-image: none !important;
}

/* Remove arrow in ALL browsers */
.form-select.is-invalid::-ms-expand {
    display: none;
    /* IE/old Edge */
}

/* Disabled invalid select (Bootstrap otherwise overrides it) */
.form-select.is-invalid:disabled {
    opacity: 0.9;
    background-image: none !important;
}


/* =========================================================
   SELECT2 STANDARD STYLING
   ========================================================= */

/* Default selection box */
.form-select+.select2 .select2-selection {
    color: #000 !important;
    background-image: none !important;
    font-weight: 400;
    border-color: #ced4da;
    /* standard border color */
    background-color: #fff;
    /* standard background */
    box-shadow: none;
}

/* Default selected text */
.form-select+.select2 .select2-selection__rendered {
    color: #000 !important;
    font-weight: 400;
}

/* Default placeholder — single */
.form-select+.select2 .select2-selection__placeholder {
    color: #6c757d;
    /* standard muted placeholder */
    font-weight: 400;
}

/* Default placeholder — multiple */
.form-select+.select2 .select2-selection--multiple .select2-selection__rendered::before {
    color: #6c757d;
    font-weight: 400;
}

/* Default dropdown arrow */
.form-select+.select2 .select2-selection__arrow b {
    border-color: #495057 transparent transparent transparent;
}

/* =========================================================
   SELECT2 INVALID STYLING
   ========================================================= */

/* Border + background */
.form-select.is-invalid+.select2 .select2-selection {
    border-color: #fcb6c9 !important;
    background-color: #f8d7da !important;
    box-shadow: none !important;
}

/* Focus glow */
.form-select.is-invalid+.select2.select2-container--focus .select2-selection {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    border-color: #fcb6c9 !important;
}

/* Selected text color */
.form-select.is-invalid+.select2 .select2-selection__rendered {
    color: #dd3148 !important;
}

/* Placeholder — single */
.form-select.is-invalid+.select2 .select2-selection__placeholder {
    color: #ed8595 !important;
    font-weight: 300 !important;
}

/* Placeholder — multiple */
.form-select.is-invalid+.select2 .select2-selection--multiple .select2-selection__rendered::before {
    color: #ed8595 !important;
    font-weight: 300 !important;
}

/* Dropdown arrow */
.form-select.is-invalid+.select2 .select2-selection__arrow b {
    border-color: #dd3148 transparent transparent transparent !important;
}





.iti--separate-dial-code .iti__selected-dial-code {
    font-size: 16px !important;
}


/* Default arrow */
.iti__arrow {
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 8px solid #555 !important;
}

/* Arrow when pointing up (active state) */
.iti__arrow--up {
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-bottom: 8px solid #555 !important;
    /* usually flip top to bottom */
    border-top: none !important;
    /* remove top border */
}

.iti__selected-dial-code {
    user-select: none;
    /* Prevent text selection */
    -webkit-user-select: none;
    /* Safari/Chrome */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    pointer-events: none;
    /* Optional: disables clicks, hover */
}

/* =========================================================
   INTL-TEL-INPUT VALIDATION INTEGRATION
   ========================================================= */

/* When the phone input is invalid */
.iti:has(input.form-control.is-invalid) .iti__selected-flag {
    background-color: #e9ebed !important;
    /* bootstrap blue */
    border: none !important;

}

/* Optional: make the dial code white for contrast */
.iti:has(input.form-control.is-invalid) .iti__selected-dial-code {
    color: black !important;
}

/* Arrow white */
.iti:has(input.form-control.is-invalid) .iti__arrow {
    border-top-color: black !important;
}

/* Focus state (invalid + focused) */
.iti:has(input.form-control.is-invalid:focus) .iti__selected-flag {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.iti:has(input.is-valid) .iti__selected-flag {
    background-color: #198754 !important;
}

.iti:has(input.is-valid) .iti__selected-dial-code {
    color: #fff !important;
}

@media (min-width: 769px) {
    .new-dashboard-styles .form-card .card-body {
        overflow: visible !important;
    }
}


/* scoped ONLY to this component */
.view-field .vf-label {
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #646466 !important;
    /* muted */
    padding: 0 !important;
    margin-bottom: 2px;
    display: block;
}

.view-field .vf-value {
    font-family: Poppins;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;

}