/**
 * Bootstrap 5 Compatibility Layer for HLI Template
 * Maps Bootstrap 2 classes to Bootstrap 5 equivalents
 * @package   HLI Joomla! 4/5 Template
 * @version   2.0.0
 */

/* Fix menu visibility on desktop */
@media (min-width: 981px) {
    #st-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #st-mobile-toggle {
        display: none !important;
    }
    
    #st-mobile-wrap {
        display: none !important;
    }
}

@media (max-width: 980px) {
    #st-menu {
        display: none !important;
    }
    #st-mobile-toggle {
        display: block !important;
    }
}

/* Grid System - Map span* to col-md-* */
.span1 { width: 8.333333%; flex: 0 0 auto; }
.span2 { width: 16.666667%; flex: 0 0 auto; }
.span3 { width: 25%; flex: 0 0 auto; }
.span4 { width: 33.333333%; flex: 0 0 auto; }
.span5 { width: 41.666667%; flex: 0 0 auto; }
.span6 { width: 50%; flex: 0 0 auto; }
.span7 { width: 58.333333%; flex: 0 0 auto; }
.span8 { width: 66.666667%; flex: 0 0 auto; }
.span9 { width: 75%; flex: 0 0 auto; }
.span10 { width: 83.333333%; flex: 0 0 auto; }
.span11 { width: 91.666667%; flex: 0 0 auto; }
.span12 { width: 100%; flex: 0 0 auto; }

/* Row fluid mapping */
.row-fluid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.row-fluid > [class*="span"] {
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

/* Float utilities */
.pull-left {
    float: left !important;
}

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

/* Visibility */
.element-invisible,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Form controls */
.input-small {
    width: auto;
    max-width: 150px;
}

.input-mini {
    width: auto;
    max-width: 80px;
}

.input-xxlarge {
    width: 100%;
}

.inputbox {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* Control groups */
.control-group {
    margin-bottom: 1rem;
}

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

.controls {
    margin-left: 0;
}

/* Input prepend/append (Bootstrap 5 input-group) */
.input-prepend,
.input-append {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-prepend .add-on,
.input-append .add-on {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.input-prepend .add-on {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-append .add-on {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-prepend input,
.input-append input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-prepend input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Labels/Badges */
.label {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.label-warning {
    background-color: #ffc107;
    color: #000;
}

.label-success {
    background-color: #198754;
}

.label-important,
.label-danger {
    background-color: #dc3545;
}

.label-info {
    background-color: #0dcaf0;
    color: #000;
}

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

.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Lists */
.unstyled,
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

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

/* Dropdown menus */
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

.dropdown-menu > li > a {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #1e2125;
    background-color: #e9ecef;
}

/* Tooltip replacement */
.hasTooltip {
    cursor: help;
}

/* Form inline */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

/* Responsive utilities - Bootstrap 5 equivalents */
@media (max-width: 575.98px) {
    .hidden-phone {
        display: none !important;
    }
}

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

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

/* Hero unit (now jumbotron in BS4, or just card in BS5) */
.hero-unit {
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
}

/* Well (now card in BS5) */
.well {
    padding: 1.25rem;
    margin-bottom: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

/* Thumbnails */
.thumbnails {
    margin-left: -20px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.thumbnails > li {
    margin-left: 20px;
}

.thumbnail {
    display: block;
    padding: 4px;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

/* Alert */
.alert {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-error,
.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* Close button */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.close:hover {
    opacity: 0.75;
}

/* Navbar compatibility */
.nav > li > a {
    display: block;
    padding: 0.5rem 1rem;
}

/* Tab content */
.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

/* Icon compatibility */
[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}