/* 
 * Bootstrap Override Styles for POC Clean Voice Orders site
 * This file MUST load after Bootstrap CSS to properly override default styles
 * Contains all Bootstrap-specific overrides to maintain earth-tone design
 */

/* ========================================
   Typography Overrides - Override Bootstrap's _reboot.scss
   ======================================== */

/* Force all headings to use font-weight 600 - Override Bootstrap's _reboot.scss */
body h1, body .h1,
body h2, body .h2,
body h3, body .h3,
body h4, body .h4,
body h5, body .h5,
body h6, body .h6,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    font-weight: 600 !important;
    line-height: 1.2;
}

/* Ensure it works in all containers */
.container h1, .container-fluid h1,
.container h2, .container-fluid h2,
.container h3, .container-fluid h3,
.container h4, .container-fluid h4,
.container h5, .container-fluid h5,
.container h6, .container-fluid h6 {
    font-weight: 600 !important;
}

/* ========================================
   Checkbox and Radio Button Overrides
   ======================================== */

/* Standard checkboxes */
input[type="checkbox"].form-check-input:checked,
.form-check-input[type="checkbox"]:checked,
.form-check input[type="checkbox"]:checked {
    background-color: #171615 !important;
    border-color: #171615 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/* Checkbox focus state */
input[type="checkbox"].form-check-input:focus,
.form-check-input[type="checkbox"]:focus,
.form-check input[type="checkbox"]:focus {
    border-color: #171615 !important;
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25) !important;
    outline: 0 !important;
}

/* Checkbox hover state */
input[type="checkbox"].form-check-input:hover,
.form-check-input[type="checkbox"]:hover {
    border-color: #171615 !important;
}

/* Form switches (toggle switches) */
.form-switch input[type="checkbox"].form-check-input:checked,
.form-switch .form-check-input[type="checkbox"]:checked,
.form-switch .form-check-input:checked {
    background-color: #171615 !important;
    border-color: #171615 !important;
    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(255,255,255,1)'/%3e%3c/svg%3e") !important;
}

/* Radio buttons */
input[type="radio"].form-check-input:checked,
.form-check-input[type="radio"]:checked {
    background-color: #171615 !important;
    border-color: #171615 !important;
    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[type="radio"].form-check-input:focus,
.form-check-input[type="radio"]:focus {
    border-color: #171615 !important;
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25) !important;
}

/* ========================================
   Form Control Overrides
   ======================================== */

/* Form control focus states */
.form-control:focus,
.form-select:focus {
    border-color: #171615 !important;
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25) !important;
}

/* Form validation states */
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* ========================================
   Button Overrides
   ======================================== */

/* ========================================
   Dashboard Stat Cards Fix
   ======================================== */

/* Ensure stat cards have consistent sizing */
.stat-card {
    background: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    height: 100% !important; /* Ensure all cards same height */
}

.stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important;
}

/* Fix stat icons - ensure perfect circles */
.stat-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important; /* Prevent shrinking */
    min-height: 48px !important; /* Prevent shrinking */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; /* Perfect circle */
    font-size: 1.5rem !important;
    flex-shrink: 0 !important; /* Prevent icon from shrinking */
}

/* Preserve primary colors for non-button elements (especially stat icons) */
.text-primary:not(.btn) {
    color: #0d6efd !important; /* Bootstrap's original blue */
}

.bg-primary:not(.btn) {
    background-color: rgba(13, 110, 253, 0.1) !important; /* Bootstrap's original blue with opacity */
}

/* Ensure card body has consistent padding */
.stat-card .card-body {
    padding: 1.25rem !important;
}

/* Ensure stat numbers are consistent */
.stat-card h3 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

.stat-card h6 {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.25rem !important;
}

/* Override Bootstrap CSS variables ONLY for primary buttons */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #6B4423;
    --bs-btn-border-color: #6B4423;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #4A2C17;
    --bs-btn-hover-border-color: #4A2C17;
    --bs-btn-focus-shadow-rgb: 107, 68, 35;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #4A2C17;
    --bs-btn-active-border-color: #4A2C17;
}

/* Primary button - all states */
.btn-primary {
    background-color: #6B4423 !important;
    border-color: #6B4423 !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: #4A2C17 !important;
    border-color: #4A2C17 !important;
    color: white !important;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: #6B4423 !important;
    border-color: #6B4423 !important;
    box-shadow: 0 0 0 0.25rem rgba(107, 68, 35, 0.5) !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #4A2C17 !important;
    border-color: #4A2C17 !important;
}

/* Outline primary button - ONLY override outline-primary, leave other variants alone */
.btn-outline-primary {
    --bs-btn-color: #6B4423;
    --bs-btn-border-color: #6B4423;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #6B4423;
    --bs-btn-hover-border-color: #6B4423;
    --bs-btn-focus-shadow-rgb: 107, 68, 35;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #6B4423;
    --bs-btn-active-border-color: #6B4423;
}

.btn-outline-primary {
    color: #6B4423 !important;
    border-color: #6B4423 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: #6B4423 !important;
    border-color: #6B4423 !important;
    color: white !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    color: #6B4423 !important;
    border-color: #6B4423 !important;
    box-shadow: 0 0 0 0.25rem rgba(107, 68, 35, 0.5) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: #6B4423 !important;
    border-color: #6B4423 !important;
    color: white !important;
}

/* More specific selectors for outline buttons with additional classes */
.btn.btn-outline-primary,
a.btn-outline-primary,
.btn-outline-primary.text-start,
.btn-outline-primary.text-center,
.btn-outline-primary.text-end {
    color: #171615 !important;
    border-color: #171615 !important;
    background-color: transparent !important;
}

.btn.btn-outline-primary:hover,
a.btn-outline-primary:hover,
.btn-outline-primary.text-start:hover,
.btn-outline-primary.text-center:hover,
.btn-outline-primary.text-end:hover {
    background-color: #171615 !important;
    border-color: #171615 !important;
    color: white !important;
}

/* ========================================
   Link Color Overrides
   ======================================== */

/* Default link colors */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #171615;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
a:not(.btn):not(.nav-link):not(.dropdown-item):focus {
    color: #0F0E0D;
}

/* ========================================
   Pagination Overrides
   ======================================== */

.page-link {
    color: #171615;
}

.page-link:hover {
    color: #0F0E0D;
    background-color: #F5F5F0;
    border-color: #dee2e6;
}

.page-link:focus {
    color: #0F0E0D;
    background-color: #F5F5F0;
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25);
}

.page-item.active .page-link {
    background-color: #6B4423;
    border-color: #6B4423;
    color: #ffffff !important;
}

/* ========================================
   Progress Bar Overrides
   ======================================== */

.progress-bar {
    background-color: #171615;
}

/* ========================================
   Spinner Overrides
   ======================================== */

.spinner-border-sm,
.spinner-border,
.spinner-grow-sm,
.spinner-grow {
    color: #171615;
}

/* ========================================
   List Group Overrides
   ======================================== */

.list-group-item-action:hover {
    background-color: #F5F5F0;
}

.list-group-item-action:focus {
    background-color: #F5F5F0;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25);
}

.list-group-item.active {
    background-color: #171615;
    border-color: #171615;
}

/* ========================================
   Accordion Overrides
   ======================================== */

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25);
    border-color: #171615;
}

.accordion-button:not(.collapsed) {
    color: #171615;
    background-color: rgba(23, 22, 21, 0.05);
}

/* ========================================
   Nav and Tab Overrides
   ======================================== */

/* Fix navbar hover color - Bootstrap override */
.navbar .navbar-nav .nav-link:hover {
    color: #C4995C !important;
}

.nav-link:focus,
.nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(107, 68, 35, 0.25);
}

.nav-pills .nav-link.active {
    background-color: #6B4423;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
}

/* ========================================
   Dropdown Overrides
   ======================================== */

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #F5F5F0;
    color: #171615;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #171615;
    color: #fff;
}

/* ========================================
   Modal Overrides
   ======================================== */

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25);
}

.modal-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25);
}

/* ========================================
   Toast Overrides
   ======================================== */

.toast-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(23, 22, 21, 0.25);
}

/* ========================================
   Range Input Overrides
   ======================================== */

.form-range::-webkit-slider-thumb {
    background-color: #171615;
}

.form-range::-moz-range-thumb {
    background-color: #171615;
}

.form-range::-webkit-slider-thumb:active {
    background-color: #0F0E0D;
}

.form-range::-moz-range-thumb:active {
    background-color: #0F0E0D;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(23, 22, 21, 0.25);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(23, 22, 21, 0.25);
}