/**
 * Bootstrap 3 -> Bootstrap 5 CSS Compatibility Layer
 *
 * Mapeia classes BS3 para equivalentes visuais BS5.
 * Carregado apenas no tema falcon para compatibilidade
 * com templates compartilhados (auxiliares/).
 */

/* --- Panel -> Card ----------------------------------------------- */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--falcon-card-bg, var(--bs-card-bg, #fff));
    background-clip: border-box;
    border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0,0,0,.125));
    border-radius: var(--bs-card-border-radius, 0.375rem);
    margin-bottom: 1rem;
}

.panel-heading {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: var(--bs-card-cap-bg, rgba(0,0,0,.03));
    border-bottom: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0,0,0,.125));
    border-radius: calc(var(--bs-card-border-radius, 0.375rem) - 1px) calc(var(--bs-card-border-radius, 0.375rem) - 1px) 0 0;
}

.panel-heading .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
}

.panel-heading .panel-title > a {
    text-decoration: none;
    display: block;
}

.panel-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.panel-footer {
    padding: 0.75rem 1.25rem;
    background-color: var(--bs-card-cap-bg, rgba(0,0,0,.03));
    border-top: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0,0,0,.125));
    border-radius: 0 0 calc(var(--bs-card-border-radius, 0.375rem) - 1px) calc(var(--bs-card-border-radius, 0.375rem) - 1px);
}

.panel-default > .panel-heading {
    color: var(--bs-card-title-color, inherit);
    background-color: var(--bs-card-cap-bg, #f8f9fa);
    border-color: var(--bs-card-border-color, rgba(0,0,0,.125));
}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: var(--bs-primary, #2c7be5);
    border-color: var(--bs-primary, #2c7be5);
}

.panel-success > .panel-heading {
    color: #fff;
    background-color: var(--bs-success, #00d27a);
    border-color: var(--bs-success, #00d27a);
}

.panel-info > .panel-heading {
    color: #fff;
    background-color: var(--bs-info, #27bcfd);
    border-color: var(--bs-info, #27bcfd);
}

.panel-warning > .panel-heading {
    color: #fff;
    background-color: var(--bs-warning, #f5803e);
    border-color: var(--bs-warning, #f5803e);
}

.panel-danger > .panel-heading {
    color: #fff;
    background-color: var(--bs-danger, #e63757);
    border-color: var(--bs-danger, #e63757);
}

/* Panel collapse (accordion BS3) */
.panel-group {
    margin-bottom: 1rem;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: var(--bs-card-border-radius, 0.375rem);
}

.panel-group .panel + .panel {
    margin-top: 5px;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid var(--bs-card-border-color, rgba(0,0,0,.125));
}

/* --- Well -> Card ------------------------------------------------ */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-card-border-radius, 0.375rem);
}

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

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

/* --- Input Group Addon ------------------------------------------ */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--falcon-body-color, #344050);
    text-align: center;
    white-space: nowrap;
    background-color: var(--falcon-tertiary-bg, #edf2f9);
    border: 1px solid var(--falcon-border-color, #d8e2ef);
    border-radius: var(--falcon-border-radius, 0.25rem);
}

.input-group > .input-group-addon:first-child {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-addon:last-child {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .input-group-addon + .form-control,
.input-group > .input-group-addon + .form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control + .input-group-addon,
.input-group > .form-select + .input-group-addon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --- Button Variants -------------------------------------------- */
.btn-default {
    color: var(--bs-btn-color, #344050);
    background-color: var(--bs-secondary-bg, #e3e6ea);
    border-color: var(--bs-border-color, #d8e2ef);
}

.btn-default:hover {
    color: var(--bs-btn-hover-color, #344050);
    background-color: var(--bs-secondary-bg-subtle, #d3d6da);
    border-color: var(--bs-border-color, #c8cfd8);
}

.btn-default:active,
.btn-default.active {
    color: var(--bs-btn-active-color, #344050);
    background-color: var(--bs-secondary-bg-subtle, #c3c6ca);
    border-color: var(--bs-border-color, #b8c1c8);
}

/* --- Float Utilities -------------------------------------------- */
.pull-right {
    float: right !important;
}

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

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

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

/* --- Grid: col-*-offset-* -> offset-*-* ------------------------- */
.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%; }

.col-sm-offset-1  { margin-left: 8.333333%; }
.col-sm-offset-2  { margin-left: 16.666667%; }
.col-sm-offset-3  { margin-left: 25%; }
.col-sm-offset-4  { margin-left: 33.333333%; }
.col-sm-offset-5  { margin-left: 41.666667%; }
.col-sm-offset-6  { margin-left: 50%; }

.col-md-offset-1  { margin-left: 8.333333%; }
.col-md-offset-2  { margin-left: 16.666667%; }
.col-md-offset-3  { margin-left: 25%; }
.col-md-offset-4  { margin-left: 33.333333%; }
.col-md-offset-5  { margin-left: 41.666667%; }
.col-md-offset-6  { margin-left: 50%; }

.col-lg-offset-1  { margin-left: 8.333333%; }
.col-lg-offset-2  { margin-left: 16.666667%; }
.col-lg-offset-3  { margin-left: 25%; }
.col-lg-offset-4  { margin-left: 33.333333%; }
.col-lg-offset-5  { margin-left: 41.666667%; }
.col-lg-offset-6  { margin-left: 50%; }

/* --- Label -> Badge ---------------------------------------------- */
.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: var(--bs-border-radius, 0.25rem);
}

.label-default { background-color: var(--bs-secondary, #748194); }
.label-primary { background-color: var(--bs-primary, #2c7be5); }
.label-success { background-color: var(--bs-success, #00d27a); }
.label-info    { background-color: var(--bs-info, #27bcfd); }
.label-warning { background-color: var(--bs-warning, #f5803e); }
.label-danger  { background-color: var(--bs-danger, #e63757); }

.label:empty { display: none; }

/* --- Close Button (BS3 .close) ---------------------------------- */
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    appearance: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: .5;
    color: var(--bs-btn-close-color, #000);
}

button.close:hover {
    opacity: .75;
}

/* --- Hidden/Visible Utilities ----------------------------------- */
.hidden-xs { }
.hidden-sm { }
.hidden-md { }
.hidden-lg { }
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

@media (max-width: 575.98px) {
    .hidden-xs { display: none !important; }
    .visible-xs { display: block !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .hidden-sm { display: none !important; }
    .visible-sm { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-md { display: none !important; }
    .visible-md { display: block !important; }
}
@media (min-width: 992px) {
    .hidden-lg { display: none !important; }
    .visible-lg { display: block !important; }
}

/* --- Misc ------------------------------------------------------- */
.text-center { text-align: center; }

.help-block {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-secondary-color, #748194);
}

.control-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

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

.radio, .checkbox {
    position: relative;
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.radio label, .checkbox label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

/* --- Alerts: data-dismiss handled by JS, visual compat ---------- */
.alert-dismissable .close,
.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}

/* --- Tabs Left (BS3 vertical tabs) ------------------------------ */
.tabbable.tabs-left {
    display: flex;
    flex-direction: row;
}

.tabbable.tabs-left > .nav-tabs {
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    margin-right: 1rem;
    min-width: fit-content;
}

.tabbable.tabs-left > .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius, 0.25rem) 0 0 var(--bs-border-radius, 0.25rem);
    margin-right: -1px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.tabbable.tabs-left > .nav-tabs .nav-link:hover {
    border-color: var(--bs-border-color, #e9ecef) var(--bs-border-color, #dee2e6) var(--bs-border-color, #e9ecef) var(--bs-border-color, #e9ecef);
}

.tabbable.tabs-left > .nav-tabs .nav-link.active {
    border-color: var(--bs-border-color, #dee2e6);
    border-right-color: #fff;
    background-color: #fff;
}

.tabbable.tabs-left > .tab-content {
    flex: 1;
    min-width: 0;
}

/* --- Input Group Button (BS3) ----------------------------------- */
.input-group-btn {
    display: flex;
    align-items: stretch;
    white-space: nowrap;
}

.input-group-btn > .btn {
    position: relative;
    z-index: 2;
}

.input-group > .input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --- Progress Bar (BS3 compat) ---------------------------------- */
.progress.progress-striped .progress-bar,
.progress-striped .progress-bar {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
}

.progress.progress-success .progress-bar,
.progress-bar-success {
    background-color: var(--bs-success, #00d27a);
}

@keyframes progress-bar-stripes {
    0% { background-position: 1rem 0; }
    100% { background-position: 0 0; }
}

/* --- Form: control-group / controls (BS3 form layout) ----------- */
.control-group {
    margin-bottom: 1rem;
}

.control-group .controls {
    /* Herda layout do row/col pai */
}

.control-group.row {
    /* Já é um row, apenas garantir margin */
}

/* --- Tabbable container ----------------------------------------- */
.tabbable {
    margin-bottom: 1rem;
}

/* --- Navbar compat (minimal) ------------------------------------ */
.navbar-right {
    margin-left: auto;
}

/* --- DataTables Pagination -> Falcon Buttons --------------------- */
.dataTables_paginate {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.dataTables_paginate .pagination {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    gap: 0.25rem;
}

.dataTables_paginate .pagination li {
    display: inline;
}

.dataTables_paginate .pagination li a {
    position: relative;
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--falcon-btn-falcon-default-color, #5e6e82);
    text-align: center;
    text-decoration: none;
    background-color: var(--falcon-btn-falcon-default-bg, #fff);
    border: 1px solid var(--falcon-btn-falcon-default-border-color, #d8e2ef);
    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;
}

.dataTables_paginate .pagination li a:hover {
    z-index: 2;
    color: var(--falcon-btn-falcon-default-hover-color, #5e6e82);
    background-color: var(--falcon-btn-falcon-default-hover-bg, #f8f9fa);
    border-color: var(--falcon-btn-falcon-default-hover-border-color, #d8e2ef);
}

.dataTables_paginate .pagination li.active a {
    z-index: 3;
    color: #fff !important;
    background-color: var(--falcon-primary, #2c7be5);
    border-color: var(--falcon-primary, #2c7be5);
}

.dataTables_paginate .pagination li.disabled a {
    color: var(--falcon-btn-falcon-default-color, #5e6e82);
    pointer-events: none;
    background-color: var(--falcon-btn-falcon-default-bg, #fff);
    border-color: var(--falcon-btn-falcon-default-border-color, #d8e2ef);
    opacity: 0.4;
}

/* DataTables Info */
.dataTables_info {
    font-size: 0.8125rem;
    color: var(--falcon-gray-600, #748194);
    padding-top: 1.25rem;
}

/* Length & Filter alignment */
.dataTables_length label, 
.dataTables_filter label {
    font-weight: 500;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dataTables_length select,
.dataTables_filter input {
    display: inline-block;
    width: auto;
}