/*
 * Bootstrap 3 to Bulma Compatibility Layer
 * 
 * This file provides class aliases and utilities to smooth the transition
 * from Bootstrap 3 to Bulma. It should be removed after full migration.
 */

/* ===== Grid System Compatibility ===== */

/* Container is the same in both */
/* Bulma already has .container */

/* Row → Columns mapping for any straggler Bootstrap classes */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Column classes - map Bootstrap to Bulma equivalents */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 { width: 8.333%; }
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2 { width: 16.666%; }
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3 { width: 25%; }
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4 { width: 33.333%; }
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5 { width: 41.666%; }
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6 { width: 50%; }
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7 { width: 58.333%; }
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8 { width: 66.666%; }
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9 { width: 75%; }
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10 { width: 83.333%; }
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11 { width: 91.666%; }
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { width: 100%; }

/* Column base */
[class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* ===== Typography Utilities ===== */

.text-muted {
    color: #888888 !important;
}

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

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

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

.text-sm, .text-smaller {
    font-size: 0.85em;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

/* ===== Button Compatibility ===== */

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    cursor: pointer;
}

.btn-default {
    color: #363636;
    background-color: #f5f5f5;
    border-color: #dbdbdb;
}

.btn-primary {
    color: #fff;
    background-color: #00d1b2;
    border-color: #00d1b2;
}

.btn-success {
    color: #fff;
    background-color: #48c78e;
    border-color: #48c78e;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.btn-success:hover {
    background-color: #3abb81;
    border-color: #3abb81;
}

.btn-info,
.button.is-info-blue {
    color: #fff !important;
    background-color: #337ab7;
    border-color: #2e6da4;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.btn-info:hover,
.button.is-info-blue:hover {
    background-color: #286090;
    border-color: #204d74;
}

.btn-warning {
    color: rgba(0, 0, 0, 0.7);
    background-color: #ffe08a;
    border-color: #ffe08a;
}

.btn-danger {
    color: #fff;
    background-color: #f14668;
    border-color: #f14668;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.btn-danger:hover {
    background-color: #ef2e55;
    border-color: #ef2e55;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}

.btn-block {
    display: block;
    width: 100%;
}

/* ===== Form Controls ===== */

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #363636;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
}

.form-control:focus {
    border-color: #00d1b2;
    outline: 0;
    box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
}

.form-group {
    margin-bottom: 1rem;
}

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

.help-block {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #7a7a7a;
}

/* ===== Responsive Visibility ===== */

/* Hide on mobile */
.hidden-xs {
    display: none !important;
}

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

/* Hide on tablet */
.hidden-sm {
    display: initial !important;
}

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

/* Hide on desktop */
.hidden-md {
    display: initial !important;
}

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

/* Hide on large */
.hidden-lg {
    display: initial !important;
}

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

/* Show only on mobile */
.visible-xs {
    display: none !important;
}

@media (max-width: 768px) {
    .visible-xs {
        display: initial !important;
    }
}

/* ===== Images ===== */

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-circle {
    border-radius: 50%;
}

.img-rounded {
    border-radius: 6px;
}

/* ===== Utilities ===== */

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ===== Wells & Panels ===== */

.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, 0.05);
    color: #222;  /* Dark text for light background */
    font-weight: 400;
}

/* Ensure all text content inside wells is dark (readable on light background) */
.well p,
.well li,
.well span,
.well div,
.well strong,
.well em,
.well i,
.well b {
    color: #222;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    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;
}

/* ===== Alerts ===== */

.alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    color: #257953;
    background-color: #effaf5;
    border-color: #48c78e;
}

.alert-info {
    color: #296fa8;
    background-color: #eff5fb;
    border-color: #3e8ed0;
}

.alert-warning {
    color: #947600;
    background-color: #fffbeb;
    border-color: #ffe08a;
}

.alert-danger {
    color: #cc0f35;
    background-color: #feecf0;
    border-color: #f14668;
}

/* ===== List Groups ===== */

.list-inline {
    padding-left: 0;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

/* ===== Navbar Compatibility ===== */

.navbar-inverse {
    background-color: #363636;
    border-color: #363636;
}

.navbar-default {
    background-color: #f5f5f5;
    border-color: #e7e7e7;
}

.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

/* ===== Modal Compatibility ===== */

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
}

.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    outline: 0;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

/* ===== Additional Utilities ===== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

/* ===== Spacing Utilities ===== */

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* ===== Flexbox Utilities ===== */

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-block {
    display: block !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-none {
    display: none !important;
}