/*
 * Compatibilidade com as telas antigas.
 *
 * As telas foram escritas para Bootstrap 4 e para o tema anterior (classes
 * box-*, btn-app, bg-gradient-*). Este arquivo mapeia essas classes para o
 * Tabler (Bootstrap 5) para que nada precise ser reescrito de uma vez.
 * Ao migrar uma tela para as classes do Tabler, as regras daqui deixam de ser usadas.
 */

/* ---------- Bootstrap 4 → 5 ---------- */
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > [class*="col"] { padding-right: 5px; padding-left: 5px; }

.input-group-append,
.input-group-prepend { display: flex; }
.input-group-append > .btn,
.input-group-append > .input-group-text,
.input-group-prepend > .btn,
.input-group-prepend > .input-group-text { height: 100%; }

.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.float-right, .pull-right { float: right !important; }
.float-left, .pull-left { float: left !important; }
.text-monospace { font-family: var(--tblr-font-monospace) !important; }

.ml-1 { margin-left: .25rem !important; } .mr-1 { margin-right: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }  .mr-2 { margin-right: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }   .mr-3 { margin-right: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; } .mr-4 { margin-right: 1.5rem !important; }
.ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; }

.btn-block { display: block; width: 100%; }
.btn-xs { --tblr-btn-padding-y: .125rem; --tblr-btn-padding-x: .5rem; --tblr-btn-font-size: .75rem; }
.btn-default { --tblr-btn-color: var(--tblr-body-color); --tblr-btn-bg: var(--tblr-bg-surface); --tblr-btn-border-color: var(--tblr-border-color); }
.btn-flat { border-radius: 0; box-shadow: none; }
.btn-outline { background: transparent; }
.btn-secondary-outline { --tblr-btn-color: var(--tblr-secondary); --tblr-btn-bg: transparent; --tblr-btn-border-color: var(--tblr-secondary); }

/* .badge-* do BS4 → cores "lt" do Tabler */
.badge-primary   { background: var(--tblr-primary-lt)   !important; color: var(--tblr-primary)   !important; }
.badge-secondary { background: var(--tblr-secondary-lt) !important; color: var(--tblr-secondary) !important; }
.badge-success   { background: var(--tblr-success-lt)   !important; color: var(--tblr-success)   !important; }
.badge-danger    { background: var(--tblr-danger-lt)    !important; color: var(--tblr-danger)    !important; }
.badge-warning   { background: var(--tblr-warning-lt)   !important; color: var(--tblr-warning)   !important; }
.badge-info      { background: var(--tblr-info-lt)      !important; color: var(--tblr-info)      !important; }
.badge-dark      { background: var(--tblr-dark)         !important; color: #fff                  !important; }

/* .close do BS4 (botão de fechar alerta/modal) */
.close {
    float: right; font-size: 1.25rem; line-height: 1; font-weight: 600;
    color: inherit; opacity: .5; background: transparent; border: 0; padding: 0;
}
.close:hover { opacity: .8; }
.alert-dismissible .close { position: absolute; top: 0; right: 0; padding: .75rem 1rem; }

/* custom-control / custom-checkbox do BS4 → form-check */
.custom-control { display: block; position: relative; padding-left: 1.75rem; min-height: 1.5rem; }
.custom-control-input { position: absolute; left: 0; top: .2rem; width: 1rem; height: 1rem; }
.custom-control-label { cursor: pointer; }

/* ---------- Tema anterior → Tabler ---------- */
.box {
    position: relative; margin-bottom: 1.5rem;
    background: var(--tblr-bg-surface); border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg); box-shadow: var(--tblr-shadow-card);
}
.box-header {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    padding: 1rem 1.25rem; border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
}
.box-title { margin: 0; font-size: 1rem; font-weight: var(--tblr-font-weight-bold); }
.box-body { padding: 1.25rem; }
.box-footer { padding: 1rem 1.25rem; border-top: var(--tblr-border-width) solid var(--tblr-border-color); }
.box-solid { box-shadow: none; }
/* No tema antigo bg-secondary/bg-light na .box eram cinza-claro; no Tabler bg-secondary é escuro. */
.box.bg-secondary, .box.bg-light { background: var(--tblr-bg-surface) !important; color: inherit !important; }

.btn-app {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 5rem; padding: .75rem; gap: .25rem; font-size: .75rem;
}
.btn-app > i, .btn-app > .fa, .btn-app > .ti { font-size: 1.25rem; }

.bg-gradient-primary { background: linear-gradient(135deg, var(--tblr-primary), #0e7490) !important; color: #fff !important; }
.bg-gradient-info    { background: linear-gradient(135deg, var(--tblr-info), #0369a1) !important;    color: #fff !important; }
.bg-gradient-danger  { background: linear-gradient(135deg, var(--tblr-danger), #991b1b) !important;  color: #fff !important; }
.bg-gradient-green   { background: linear-gradient(135deg, var(--tblr-success), #166534) !important; color: #fff !important; }
.bg-gradient-blue    { background: linear-gradient(135deg, var(--tblr-blue), #1e3a8a) !important;    color: #fff !important; }
.btn-gradient-primary { background: linear-gradient(135deg, var(--tblr-primary), #0e7490); color: #fff; border: 0; }
.btn-gradient-primary:hover { color: #fff; filter: brightness(1.08); }

/* waves-effect era só animação de clique do tema antigo */
.waves-effect { position: relative; }

/* O Tabler pinta todo <pre> de escuro com texto claro; com bg-light o texto sumia. */
pre.bg-light { color: var(--tblr-body-color); }

/* ---------- Plugins ---------- */
.select2-container { width: 100% !important; }
.dataTables_wrapper .row { margin-top: .5rem; }