/* ===== INPUT GROUP BORDER FIXES ===== */
:root {
    /* Default colors - can be overridden dynamically */
    --input-group-valid-color: #03C95A;
    --input-group-invalid-color: #dc3545;
    --input-group-border-radius: 5px; /* Adjust as needed */
    --input-group-bg: #ffffff;
}

/* Base styles for both valid and invalid states */
.input-group .form-control.is-valid,
.input-group .form-control.is-invalid,
.pass-group .form-control.is-valid,
.pass-group .form-control.is-invalid {
    border: none !important;
    box-shadow: none !important;    
    padding-right: 0.75rem !important;
}

/* Valid state - parent border */
.input-group:has(.form-control.is-valid),
.pass-group:has(.form-control.is-valid) {
    border: 2px solid var(--input-group-valid-color, #03C95A) !important;
    border-radius: var(--input-group-border-radius, 5px);
    overflow: hidden;
    background-color: var(--input-group-bg, #ffffff);
}

/* Invalid state - parent border */
.input-group:has(.form-control.is-invalid),
.pass-group:has(.form-control.is-invalid) {
    border: 2px solid var(--input-group-invalid-color, #dc3545) !important;
    border-radius: var(--input-group-border-radius, 5px);
    overflow: hidden;
    background-color: var(--input-group-bg, #ffffff);
}

/* Style icons/text for both states */
.input-group:has(.form-control.is-valid) .input-group-text,
.pass-group:has(.form-control.is-valid) .input-group-text,
.input-group:has(.form-control.is-valid) .toggle-password,
.pass-group:has(.form-control.is-valid) .toggle-password {
    color: var(--input-group-valid-color, #03C95A);
    border: none;
    background: transparent;
}

.input-group:has(.form-control.is-invalid) .input-group-text,
.pass-group:has(.form-control.is-invalid) .input-group-text,
.input-group:has(.form-control.is-invalid) .toggle-password,
.pass-group:has(.form-control.is-invalid) .toggle-password {
    color: var(--input-group-invalid-color, #dc3545);
    border: none;
    background: transparent;
}

/* Remove borders from all child elements */
.input-group:has(.form-control.is-valid) *,
.pass-group:has(.form-control.is-valid) *,
.input-group:has(.form-control.is-invalid) *,
.pass-group:has(.form-control.is-invalid) * {
    border: none !important;
    box-shadow: none !important;
}

/* Border radius handling */
.input-group:has(.form-control.is-valid) > :first-child,
.pass-group:has(.form-control.is-valid) > :first-child,
.input-group:has(.form-control.is-invalid) > :first-child,
.pass-group:has(.form-control.is-invalid) > :first-child {
    border-top-left-radius: var(--input-group-border-radius, 5px) !important;
    border-bottom-left-radius: var(--input-group-border-radius, 5px) !important;
}

.input-group:has(.form-control.is-valid) > :last-child,
.pass-group:has(.form-control.is-valid) > :last-child,
.input-group:has(.form-control.is-invalid) > :last-child,
.pass-group:has(.form-control.is-invalid) > :last-child {
    border-top-right-radius: var(--input-group-border-radius, 5px) !important;
    border-bottom-right-radius: var(--input-group-border-radius, 5px) !important;
}

/* Remove default Bootstrap validation icons */
.form-control.is-valid,
.form-control.is-invalid {    
    padding-right: 0.75rem !important;
}

/* Optional: Focus states */
.input-group:has(.form-control.is-valid):focus-within,
.pass-group:has(.form-control.is-valid):focus-within {
    box-shadow: 0 0 0 0.2rem rgba(3, 201, 90, 0.25);
}

.input-group:has(.form-control.is-invalid):focus-within,
.pass-group:has(.form-control.is-invalid):focus-within {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.toggle-password{
    z-index: 9 !important;    
}

/* ===== FALLBACK FOR BROWSERS WITHOUT :HAS() SUPPORT ===== */
@supports not selector(:has(*)) {
    /* Valid state */
    .input-group.is-valid-wrapper,
    .pass-group.is-valid-wrapper {
        border: 2px solid var(--input-group-valid-color, #03C95A) !important;
        border-radius: var(--input-group-border-radius, 5px);
        overflow: hidden;
    }
    
    .input-group.is-valid-wrapper *,
    .pass-group.is-valid-wrapper * {
        border: none !important;
    }
    
    .input-group.is-valid-wrapper .input-group-text,
    .pass-group.is-valid-wrapper .input-group-text,
    .input-group.is-valid-wrapper .toggle-password,
    .pass-group.is-valid-wrapper .toggle-password {
        color: var(--input-group-valid-color, #03C95A);
        background: transparent;
    }
    
    /* Invalid state */
    .input-group.is-invalid-wrapper,
    .pass-group.is-invalid-wrapper {
        border: 2px solid var(--input-group-invalid-color, #dc3545) !important;
        border-radius: var(--input-group-border-radius, 5px);
        overflow: hidden;
    }
    
    .input-group.is-invalid-wrapper *,
    .pass-group.is-invalid-wrapper * {
        border: none !important;
    }
    
    .input-group.is-invalid-wrapper .input-group-text,
    .pass-group.is-invalid-wrapper .input-group-text,
    .input-group.is-invalid-wrapper .toggle-password,
    .pass-group.is-invalid-wrapper .toggle-password {
        color: var(--input-group-invalid-color, #dc3545);
        background: transparent;
    }
}



/* Datatable skeleton loader */
.r2s-skeleton-line,
.r2s-skeleton-avatar {
    background: linear-gradient(90deg, #f1f3f5 25%, #e9ecef 37%, #f1f3f5 63%);
    background-size: 400% 100%;
    animation: r2sSkeletonLoading 1.4s ease infinite;
    border-radius: 8px;
}

.r2s-skeleton-line {
    height: 16px;
    width: 100%;
}

.r2s-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.r2s-skeleton-row td {
    padding-top: 14px;
    padding-bottom: 14px;
}

@keyframes r2sSkeletonLoading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}