/* ========================================
   Focus Override - Must be loaded LAST
   Removes blue border and adds subtle shadow
   ======================================== */

/* Override all Bootstrap and default focus styles - MAXIMUM SPECIFICITY */
*:focus,
*:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
button:focus,
button:focus-visible,
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible,
.btn:focus,
.btn:focus-visible,
.btn:active:focus,
.btn-link.nav-link:focus,
input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-visible,
input[type="tel"]:focus,
input[type="tel"]:focus-visible,
input[type="url"]:focus,
input[type="url"]:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="date"]:focus,
input[type="date"]:focus-visible,
input[type="time"]:focus,
input[type="time"]:focus-visible,
input[type="datetime-local"]:focus,
input[type="datetime-local"]:focus-visible {
    outline: 0 !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
    -moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

/* Remove the Bootstrap blue glow specifically */
.form-control:focus,
.form-select:focus {
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

/* Extra specific for input elements */
input.form-control:focus,
input.form-control-sm:focus,
select.form-select:focus,
select.form-select-sm:focus,
textarea.form-control:focus {
    outline: 0 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

/* Button focus styles */
.btn:focus,
.btn:active:focus,
button:focus,
button:focus-visible {
    outline: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Primary button focus */
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary:focus-visible {
    box-shadow: 0 2px 8px rgba(27, 110, 194, 0.25) !important;
    -webkit-box-shadow: 0 2px 8px rgba(27, 110, 194, 0.25) !important;
    border-color: #1861ac !important;
}

/* Dark mode focus styles */
.dark-mode *:focus,
.dark-mode *:focus-visible,
.dark-mode input:focus,
.dark-mode input:focus-visible,
.dark-mode textarea:focus,
.dark-mode textarea:focus-visible,
.dark-mode select:focus,
.dark-mode select:focus-visible,
.dark-mode .form-control:focus,
.dark-mode .form-control:focus-visible,
.dark-mode .form-select:focus,
.dark-mode .form-select:focus-visible,
.dark-mode .form-check-input:focus,
.dark-mode .form-check-input:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.dark-mode .btn:focus,
.dark-mode .btn:active:focus,
.dark-mode button:focus {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15) !important;
}

.dark-mode .btn-primary:focus,
.dark-mode .btn-primary:active:focus {
    box-shadow: 0 2px 8px rgba(99, 179, 237, 0.3) !important;
}