/* =====================================================
   STAIRCASE BROWSER BRANDING
   Browser-native elements in SC colors
   ===================================================== */

/* ======================
   SCROLLBARS
   ====================== */

/* WebKit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 7px;
}

::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 7px;
    border: 2px solid #f8f9fa;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

::-webkit-scrollbar-corner {
    background: #f8f9fa;
}

/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #adb5bd #f8f9fa;
}

/* ======================
   TEXT SELECTION
   ====================== */

::selection {
    background-color: var(--bs-primary);
    color: white;
}

::-moz-selection {
    background-color: var(--bs-primary);
    color: white;
}

/* ======================
   FOCUS STATES
   ====================== */

/* General Focus Outline */
*:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Form Controls */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(4, 55, 139, 0.25) !important;
}

/* Buttons */
.btn:focus,
.btn:active,
.btn.active:focus {
    box-shadow: 0 0 0 0.2rem rgba(4, 55, 139, 0.25) !important;
}

/* Select2 Dropdowns */
.select2-container--bootstrap5 .select2-selection:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(4, 55, 139, 0.25) !important;
}

/* DataTables Search */
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(4, 55, 139, 0.25) !important;
}

/* ======================
   PROGRESS BARS
   ====================== */

::-webkit-progress-bar {
    background-color: #e9ecef;
    border-radius: 4px;
}

::-webkit-progress-value {
    background-color: var(--bs-primary);
    border-radius: 4px;
}

::-moz-progress-bar {
    background-color: var(--bs-primary);
    border-radius: 4px;
}

/* ======================
   AUTOFILL STYLING
   ====================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    -webkit-text-fill-color: var(--bs-body-color);
    border-color: var(--bs-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}