/*************************************
 * BOOTSTRAP INTEGRATION
 * Ensures Bootstrap works seamlessly with existing Dynamics 360 styles
 * Load order: Bootstrap CSS > This file > Theme CSS
 *************************************/

/* ============================================
   BOOTSTRAP CUSTOMIZATION
   ============================================ */

/* Prevent Bootstrap from overriding theme fonts */
body {
    font-family: "markProRegular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Preserve theme colors */
:root {
    --bs-primary: #345cad;
    --bs-primary-rgb: 52, 92, 173;
    --bs-secondary: #61c17e;
    --bs-secondary-rgb: 97, 193, 126;
    --bs-success: #61c17e;
    --bs-info: #2cacd1;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

/* ============================================
   BOOTSTRAP GRID ENHANCEMENTS
   ============================================ */

/* Ensure Bootstrap container doesn't conflict with theme */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

/* Bootstrap responsive utilities */
@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
}

/* ============================================
   BOOTSTRAP BUTTON INTEGRATION
   ============================================ */

/* Ensure Bootstrap buttons work with theme buttons */
.btn {
    font-family: "markProRegular", sans-serif;
    font-weight: 500;
    letter-spacing: 0.026vw;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #345cad;
    border-color: #345cad;
}

.btn-primary:hover,
.btn-primary:focus {
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
    border-color: #345cad;
}

.btn-secondary {
    background-color: #61c17e;
    border-color: #61c17e;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #4ea869;
    border-color: #4ea869;
}

/* ============================================
   BOOTSTRAP NAVBAR INTEGRATION
   ============================================ */

/* Ensure Bootstrap navbar doesn't conflict with theme header */
.navbar {
    padding: 0;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-toggler {
    border: none;
    padding: 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* ============================================
   BOOTSTRAP FORM INTEGRATION
   ============================================ */

/* Ensure Bootstrap forms work with theme forms */
.form-control,
.form-select {
    font-family: "markProRegular", sans-serif;
    border-radius: 0.2083vw;
}

.form-control:focus,
.form-select:focus {
    border-color: #345cad;
    box-shadow: 0 0 0 0.25rem rgba(52, 92, 173, 0.25);
}

/* Mobile form optimization */
@media (max-width: 768px) {
    .form-control,
    .form-select,
    textarea.form-control {
        font-size: 16px !important;
        min-height: 44px;
    }
}

/* ============================================
   BOOTSTRAP CARD INTEGRATION
   ============================================ */

/* Ensure Bootstrap cards work with theme cards */
.card {
    border-radius: 1vw;
    box-shadow: 0 2px 8px rgba(40, 84, 162, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.card:hover {
    box-shadow: 0 4px 16px rgba(40, 84, 162, 0.12);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* ============================================
   BOOTSTRAP MODAL INTEGRATION
   ============================================ */

/* Ensure Bootstrap modals work with theme overlays */
.modal-content {
    border-radius: 12px;
    border: none;
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================
   BOOTSTRAP UTILITIES ENHANCEMENTS
   ============================================ */

/* Add theme-specific spacing utilities */
.mt-theme { margin-top: 4rem !important; }
.mb-theme { margin-bottom: 4rem !important; }
.pt-theme { padding-top: 4rem !important; }
.pb-theme { padding-bottom: 4rem !important; }

@media (max-width: 768px) {
    .mt-theme { margin-top: 2rem !important; }
    .mb-theme { margin-bottom: 2rem !important; }
    .pt-theme { padding-top: 2rem !important; }
    .pb-theme { padding-bottom: 2rem !important; }
}

/* ============================================
   BOOTSTRAP RESPONSIVE HELPERS
   ============================================ */

/* Additional responsive utilities */
@media (max-width: 575.98px) {
    .text-xs-center { text-align: center !important; }
    .text-xs-left { text-align: left !important; }
    .text-xs-right { text-align: right !important; }
}

/* ============================================
   BOOTSTRAP GRID FIXES FOR THEME
   ============================================ */

/* Ensure Bootstrap grid doesn't break theme layouts */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}

@media (max-width: 768px) {
    .row {
        --bs-gutter-x: 1rem;
    }
}

/* ============================================
   BOOTSTRAP TYPOGRAPHY INTEGRATION
   ============================================ */

/* Preserve theme typography while using Bootstrap */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "markProHeavy", sans-serif;
    font-weight: 900;
}

p, .lead {
    font-family: "markProRegular", sans-serif;
}

/* ============================================
   BOOTSTRAP ACCORDION INTEGRATION
   ============================================ */

.accordion-button {
    font-family: "markProMedium", sans-serif;
    background-color: #f8f9fa;
}

.accordion-button:not(.collapsed) {
    background-color: #345cad;
    color: white;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(52, 92, 173, 0.25);
}

/* ============================================
   BOOTSTRAP BREADCRUMB INTEGRATION
   ============================================ */

.breadcrumb {
    font-family: "markProRegular", sans-serif;
    background-color: transparent;
    padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
}

/* ============================================
   BOOTSTRAP PAGINATION INTEGRATION
   ============================================ */

.pagination {
    font-family: "markProRegular", sans-serif;
}

.page-link {
    color: #345cad;
}

.page-link:hover {
    color: #2a4a8f;
    background-color: #e9ecef;
}

.page-item.active .page-link {
    background-color: #345cad;
    border-color: #345cad;
}

/* ============================================
   BOOTSTRAP ALERT INTEGRATION
   ============================================ */

.alert {
    font-family: "markProRegular", sans-serif;
    border-radius: 0.5rem;
}

/* ============================================
   BOOTSTRAP BADGE INTEGRATION
   ============================================ */

.badge {
    font-family: "markProMedium", sans-serif;
    font-weight: 600;
}

/* ============================================
   BOOTSTRAP SPINNER INTEGRATION
   ============================================ */

.spinner-border,
.spinner-grow {
    color: #345cad;
}

/* ============================================
   BOOTSTRAP TOAST INTEGRATION
   ============================================ */

.toast {
    font-family: "markProRegular", sans-serif;
    border-radius: 0.5rem;
}

/* ============================================
   BOOTSTRAP OFFCANVAS INTEGRATION
   ============================================ */

.offcanvas {
    font-family: "markProRegular", sans-serif;
}

.offcanvas-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================
   PREVENT BOOTSTRAP CONFLICTS
   ============================================ */

/* Ensure theme-specific classes take precedence */
.hpBtnDesign,
.mpBtnDesign,
.lpBtnDesign,
.buttonStructure {
    all: revert;
}

/* Preserve theme animations */
.slide-bottom,
.fade-in,
.fade-out,
.scale-up-br,
.fade-in-tr,
.fade-out-tr {
    animation-play-state: running !important;
}

/* ============================================
   MOBILE SPECIFIC BOOTSTRAP FIXES
   ============================================ */

@media (max-width: 768px) {
    /* Ensure Bootstrap components are touch-friendly */
    .btn,
    .form-control,
    .form-select,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Better spacing on mobile */
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Stack columns on mobile */
    .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Full-width buttons on mobile */
    .btn-block {
        width: 100%;
        display: block;
    }
}

/* ============================================
   BOOTSTRAP ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Better focus indicators */
.btn:focus,
.form-control:focus,
.form-select:focus,
.nav-link:focus {
    outline: 2px solid #345cad;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #345cad;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
}

.skip-to-content:focus {
    top: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .container,
    .container-fluid {
        width: 100%;
        max-width: none;
    }
    
    .row {
        display: block;
    }
    
    [class*="col-"] {
        width: 100%;
        display: block;
    }
}