/* Bootstrap 5 Overrides - Fixes conflicts with legacy style.css */
/* Load this AFTER style.css when using Bootstrap 5 */

/* Fix .btn-xs which was removed in BS5 but style.css still uses it */
/* Keep the style.css definition - it's fine */

/* Fix form validation classes - BS5 uses .is-invalid instead of .has-error */
.is-invalid .form-control:focus,
.is-valid .form-control:focus {
    box-shadow: none; /* Match style.css behavior */
}

/* BS5 uses data-bs-* attributes instead of data-* */
/* No CSS changes needed - this is handled in JS */

/* Fix button focus states to match BS5 defaults while keeping custom colors */
.btn:focus-visible {
    box-shadow: none; /* Keep style.css behavior */
}

/* Ensure dropdown menus work with BS5 */
.dropdown-menu {
    /* BS5 handles positioning via Popper.js - keep style.css custom styles */
}

/* Fix modal backdrop and positioning for BS5 */
.modal-backdrop {
    /* BS5 handles this correctly - no override needed */
}

/* Ensure Bootstrap 5 utilities work correctly */
/* BS5 uses different spacing scale - ensure compatibility */

/* Fix any conflicting z-index values */
.dropdown-menu {
    z-index: 1000; /* Match BS5 default */
}

.modal {
    z-index: 1055; /* Match BS5 default */
}

.modal-backdrop {
    z-index: 1050; /* Match BS5 default */
}

/* Fix .panel class (removed in BS5, replaced with .card) */
/* If style.css uses .panel, map it to .card behavior */
.panel {
    /* Keep legacy styles from style.css - forms might depend on this */
}

/* Ensure .form-control inherits BS5 styles correctly */
.form-control {
    /* BS5 defaults should work - style.css removes box-shadow which is fine */
}

/* Fix missing dropdown arrow icons for select elements in BS5 */
/* In BS4, select.form-control had dropdown arrows by default */
/* In BS5, you need to use .form-select, but since legacy code uses .form-control, we add the arrow back */
select.form-control:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* For input-sm / form-control-sm variants */
select.form-control.input-sm:not([multiple]):not([size]),
select.form-control-sm:not([multiple]):not([size]) {
    background-position: right 0.5rem center;
    background-size: 14px 10px;
    padding-right: 2rem;
}

/* For input-lg / form-control-lg variants */
select.form-control.input-lg:not([multiple]):not([size]),
select.form-control-lg:not([multiple]):not([size]) {
    background-position: right 1rem center;
    background-size: 18px 14px;
    padding-right: 2.5rem;
}

/* Fix form-group alignment issues in BS5 */
/* Bootstrap 5 removed .form-group class, but legacy code still uses it */
/* Add back the bottom margin that form-group provided in BS4 */
.form-group {
    margin-bottom: 1rem;
}

/* Fix alignment issues when .form-group is combined with .row */
/* In BS4, this was common for horizontal forms, but BS5 changed row margins */
.form-group.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Vertically center label and controls */
}

/* Special fix: When .row is combined with column classes (col-*) on same element */
/* This happens in dynamically generated forms - element acts as column, but children need row layout */
.form-group.row[class*="col-"] {
    /* Reset row margins since this element is actually a column */
    margin-right: 0;
    margin-left: 0;
    /* Keep padding from column classes */
    /* Children will lay out horizontally using flex */
}

/* When a div has both col-* and row classes, don't apply negative margins */
[class*="col-"].row {
    margin-right: 0;
    margin-left: 0;
}

/* Ensure col-form-label aligns properly with form controls */
.col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

/* Fix nested divs inside form-group.row (like radio button containers) */
/* These divs don't have col-* classes, so they should flex to fill remaining space */
.form-group.row > div:not([class*="col-"]) {
    display: flex;
    align-items: center;
    flex: 1; /* Take up remaining space */
    min-width: 0; /* Allow flex item to shrink below content size */
}

/* When parent is col-*.row, children columns need proper padding */
.form-group.row[class*="col-"] > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Fix radio button and checkbox alignment in horizontal forms */
.form-group.row label {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
}

.form-group.row input[type="radio"],
.form-group.row input[type="checkbox"] {
    margin-top: 0;
    vertical-align: middle;
}

/* Fix button outline variants for BS5 */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    /* BS5 handles these correctly - ensure style.css doesn't override */
}

/* Note: Most conflicts are minimal because style.css is a theme overlay */
/* The main issue is that style.css removes box-shadows and changes colors */
/* These are design choices, not breaking changes */

/* Bootstrap .row > * override - removes width: 100% to allow natural column sizing */
/* Override BS5's .row > * for all non-column elements */


.row > div[chart_title]:not([class*="col-"]),
.row > div[typeid]:not([class*="col-"]),
.row > div[datatypeid]:not([class*="col-"]) {
    width: auto !important;
    flex: 0 0 auto !important;
}