/* Bootstrap 3 Compatibility Layer for Bootstrap 5 */
/* This file provides backward compatibility for templates not yet migrated */
/* UX Designer: Sally | Date: Dec 4, 2025 */

/* ============================================
   Button Compatibility
   ============================================ */
/* Bootstrap 3 custom button classes */
.btn-bs {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    user-select: none;
}

/* Material design button colors (custom classes from old templates) */
.btn-material-indigo {
    color: #fff;
    background-color: #3f51b5;
    border-color: #3f51b5;
}

.btn-material-indigo:hover {
    background-color: #303f9f;
    border-color: #303f9f;
}

.btn-material-lightblue {
    color: #fff;
    background-color: #03a9f4;
    border-color: #03a9f4;
}

.btn-material-lightblue:hover {
    background-color: #0288d1;
    border-color: #0288d1;
}

.btn-material-cyan {
    color: #fff;
    background-color: #00bcd4;
    border-color: #00bcd4;
}

.btn-material-cyan:hover {
    background-color: #0097a7;
    border-color: #0097a7;
}

.btn-material-bluegrey {
    color: #fff;
    background-color: #607d8b;
    border-color: #607d8b;
}

.btn-material-bluegrey:hover {
    background-color: #455a64;
    border-color: #455a64;
}

/* Map Bootstrap 3 btn-default to Bootstrap 5 */
.btn-default {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.btn-default:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

/* ============================================
   Panel to Card Mapping
   ============================================ */
/* Map old panel classes to card classes */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

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

.panel-primary {
    border-color: #2563eb;
}

.panel-success {
    border-color: #16a34a;
}

.panel-info {
    border-color: #0891b2;
}

.panel-warning {
    border-color: #d97706;
}

.panel-danger {
    border-color: #dc2626;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: #2563eb;
    border-color: #2563eb;
}

.panel-success > .panel-heading {
    color: #fff;
    background-color: #16a34a;
    border-color: #16a34a;
}

.panel-body {
    padding: 15px;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #dee2e6;
}

/* ============================================
   Glyphicon to Font Awesome Mapping
   ============================================ */
/* Map common glyphicons to Font Awesome */
.glyphicon {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    display: inline-block;
}

.glyphicon-calendar:before {
    content: "\f073"; /* fa-calendar */
}

.glyphicon-user:before {
    content: "\f007"; /* fa-user */
}

.glyphicon-pencil:before {
    content: "\f040"; /* fa-pencil */
}

.glyphicon-remove:before {
    content: "\f00d"; /* fa-times */
}

.glyphicon-ok:before {
    content: "\f00c"; /* fa-check */
}

.glyphicon-trash:before {
    content: "\f1f8"; /* fa-trash */
}

/* ============================================
   Data Attribute Compatibility
   ============================================ */
/* Bootstrap 3 data-toggle compatibility */
[data-toggle="tooltip"] {
    cursor: help;
}

[data-toggle="modal"] {
    cursor: pointer;
}

[data-toggle="collapse"] {
    cursor: pointer;
}

/* ============================================
   Grid Helper Classes
   ============================================ */
/* col-xs-* compatibility (map to col-*) */
.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* ============================================
   Form Compatibility
   ============================================ */
.form-group {
    margin-bottom: 1rem;
}

.control-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* ============================================
   Table Helpers
   ============================================ */
.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}

/* ============================================
   Text Alignment Compatibility
   ============================================ */
.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

/* ============================================
   Clearfix
   ============================================ */
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #e5e7eb;
}

.page-header h1 {
    margin-top: 0;
    font-size: 2rem;
    font-weight: 600;
}