/*
 * Bootstrap 3 to 5 Compatibility CSS
 * Ensures EXACT visual appearance during migration
 * DC Platform - Zero UI changes permitted
 */

/* Grid System Compatibility */
.col-xs-1 { flex: 0 0 8.333333%; }
.col-xs-2 { flex: 0 0 16.666667%; }
.col-xs-3 { flex: 0 0 25%; }
.col-xs-4 { flex: 0 0 33.333333%; }
.col-xs-5 { flex: 0 0 41.666667%; }
.col-xs-6 { flex: 0 0 50%; }
.col-xs-7 { flex: 0 0 58.333333%; }
.col-xs-8 { flex: 0 0 66.666667%; }
.col-xs-9 { flex: 0 0 75%; }
.col-xs-10 { flex: 0 0 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%; }
.col-xs-12 { flex: 0 0 100%; }

.col-xs-offset-1 { margin-left: 8.333333%; }
.col-xs-offset-2 { margin-left: 16.666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.333333%; }
.col-xs-offset-5 { margin-left: 41.666667%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-7 { margin-left: 58.333333%; }
.col-xs-offset-8 { margin-left: 66.666667%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.333333%; }
.col-xs-offset-11 { margin-left: 91.666667%; }

/* Visibility Utilities Compatibility */
.hidden-xs {
    display: none !important;
}

@media (min-width: 576px) {
    .hidden-xs {
        display: block !important;
    }
}

.hidden-sm {
    display: block !important;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .hidden-sm {
        display: none !important;
    }
}

.hidden-md {
    display: block !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-md {
        display: none !important;
    }
}

.hidden-lg {
    display: block !important;
}

@media (min-width: 992px) {
    .hidden-lg {
        display: none !important;
    }
}

/* Button Compatibility */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* Form Control Compatibility */
.form-control {
    border-radius: 4px; /* Bootstrap 3 default */
}

/* Panel to Card Migration Compatibility */
.panel {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-default {
    border-color: #ddd;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-body {
    padding: 15px;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* Well Compatibility */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.well-lg {
    padding: 24px;
    border-radius: 6px;
}

.well-sm {
    padding: 9px;
    border-radius: 3px;
}

/* Gutter Compatibility */
.gutter0 {
    margin-left: 0;
    margin-right: 0;
}

.gutter0 > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Text Utilities Compatibility */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

/* Display Utilities - Ensure Bootstrap 5 classes work alongside Bootstrap 3 */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-flex { display: flex !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-flex { display: flex !important; }
}

/* Image Responsive Compatibility */
.img-responsive {
    max-width: 100%;
    height: auto;
}

/* Text Truncate */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Custom spacing utilities that might be used in DC Platform */
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 20px; }
.voffset5 { margin-top: 25px; }

.padd-15 { padding: 15px; }
.padd-30 { padding: 30px; }

/* Ensure Bootstrap 5 container behavior matches Bootstrap 3 */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

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

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

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}