/* ==========================================================================
   Web Central Setrans — Metronic Compatibility Shim
   --------------------------------------------------------------------------
   Reimplementa, sobre Bootstrap 5 + tokens do tema, as classes do Metronic
   (Bootstrap 4) ainda usadas nas views. Garante que páginas não reescritas
   continuem estilizadas após a remoção do style.bundle.css do Metronic.
   ========================================================================== */

/* ---------- Tipografia / pesos (BS4) ---------- */
.font-weight-normal  { font-weight: 400 !important; }
.font-weight-bold    { font-weight: 600 !important; }
.font-weight-bolder  { font-weight: 700 !important; }
.font-weight-boldest { font-weight: 800 !important; }

.font-size-xs   { font-size: 0.75rem !important; }
.font-size-sm   { font-size: 0.85rem !important; }
.font-size-base { font-size: 0.95rem !important; }
.font-size-lg   { font-size: 1.08rem !important; }
.font-size-h1   { font-size: 2rem !important; }
.font-size-h2   { font-size: 1.75rem !important; }
.font-size-h3   { font-size: 1.5rem !important; }
.font-size-h4   { font-size: 1.35rem !important; }
.font-size-h5   { font-size: 1.15rem !important; }
.font-size-h6   { font-size: 1rem !important; }

/* ---------- Cores de texto (BS4 / Metronic) ---------- */
.text-dark      { color: var(--text) !important; }
.text-dark-75   { color: #2f3545 !important; }
.text-dark-50   { color: var(--text-muted) !important; }
.text-dark-25   { color: var(--text-soft) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-primary   { color: var(--accent) !important; }
.text-success   { color: var(--success) !important; }
.text-info      { color: var(--info) !important; }
.text-warning   { color: var(--warning) !important; }
.text-danger    { color: var(--danger) !important; }

.text-hover-primary { transition: color var(--t-fast); }
.text-hover-primary:hover { color: var(--accent) !important; }

/* ---------- Espaçamento BS4 (ml-/mr-/pl-/pr- removidos no BS5) ---------- */
.ml-0 { margin-left: 0 !important; }   .mr-0 { margin-right: 0 !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-5 { margin-left: 3rem !important; }    .mr-5 { margin-right: 3rem !important; }
.ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; }

.pl-0 { padding-left: 0 !important; }   .pr-0 { padding-right: 0 !important; }
.pl-1 { padding-left: .25rem !important; }  .pr-1 { padding-right: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }   .pr-2 { padding-right: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }    .pr-3 { padding-right: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }  .pr-4 { padding-right: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }    .pr-5 { padding-right: 3rem !important; }

/* negativos usados ocasionalmente */
.mr-n7 { margin-right: -1.75rem !important; }
.pr-7  { padding-right: 1.75rem !important; }
.pt-7  { padding-top: 1.75rem !important; }
.pt-12 { padding-top: 3rem !important; }
.px-8  { padding-left: 2rem !important; padding-right: 2rem !important; }
.p-8   { padding: 2rem !important; }

/* ---------- Fundos soft / cinzas (Metronic) ---------- */
.bg-gray-100 { background-color: #f6f8fb !important; }
.bg-gray-200 { background-color: var(--surface-muted) !important; }
.bg-gray-300 { background-color: var(--border) !important; }
.bg-white    { background-color: #fff !important; }
.bg-light-primary { background-color: var(--accent-soft) !important; }
.bg-light-success { background-color: var(--success-soft) !important; }
.bg-light-info    { background-color: var(--info-soft) !important; }
.bg-light-warning { background-color: var(--warning-soft) !important; }
.bg-light-danger  { background-color: var(--danger-soft) !important; }

/* ---------- Labels (badges Metronic) ---------- */
.label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    height: 22px;
    min-width: 22px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface-muted);
}
.label.label-inline { width: auto; }
.label.label-lg { height: 28px; padding: 0 0.85rem; font-size: 0.85rem; }
.label.label-pill { border-radius: var(--radius-pill); }
.label.label-primary { background: var(--accent); color: #fff; }
.label.label-success { background: var(--success); color: #fff; }
.label.label-info    { background: var(--info); color: #fff; }
.label.label-warning { background: var(--warning); color: #fff; }
.label.label-danger  { background: var(--danger); color: #fff; }
.label.label-light-primary { background: var(--accent-soft); color: var(--accent); }
.label.label-light-success { background: var(--success-soft); color: var(--success); }
.label.label-light-info    { background: var(--info-soft); color: var(--info); }
.label.label-light-warning { background: var(--warning-soft); color: #b9770f; }
.label.label-light-danger  { background: var(--danger-soft); color: var(--danger); }

/* ---------- Symbol (avatares Metronic) ---------- */
.symbol {
    display: inline-flex;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.symbol .symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text);
    font-weight: 600;
}
.symbol.symbol-circle,
.symbol.symbol-circle .symbol-label { border-radius: 50%; }
.symbol.symbol-25 { width: 25px; height: 25px; }
.symbol.symbol-30 { width: 30px; height: 30px; }
.symbol.symbol-35, .symbol.symbol-lg-35 { width: 35px; height: 35px; }
.symbol.symbol-40 { width: 40px; height: 40px; }
.symbol.symbol-50 { width: 50px; height: 50px; }
.symbol.symbol-light-primary .symbol-label { background: var(--accent-soft); color: var(--accent); }
.symbol.symbol-light-success .symbol-label { background: var(--success-soft); color: var(--success); }
.symbol.symbol-light-info    .symbol-label { background: var(--info-soft); color: var(--info); }
.symbol.symbol-light-warning .symbol-label { background: var(--warning-soft); color: #b9770f; }
.symbol.symbol-light-danger  .symbol-label { background: var(--danger-soft); color: var(--danger); }

/* ---------- SVG icons (Metronic) ---------- */
.svg-icon { display: inline-flex; align-items: center; }
.svg-icon svg { width: 1.25rem; height: 1.25rem; }
.svg-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.svg-icon.svg-icon-sm svg { width: 1rem; height: 1rem; }
.svg-icon.svg-icon-md svg { width: 1.25rem; height: 1.25rem; }
.svg-icon.svg-icon-lg svg { width: 1.5rem; height: 1.5rem; }
.svg-icon.svg-icon-xl svg { width: 1.75rem; height: 1.75rem; }
.svg-icon.svg-icon-2x svg { width: 2rem; height: 2rem; }
.svg-icon.svg-icon-3x svg { width: 2.5rem; height: 2.5rem; }
.svg-icon.svg-icon-primary { color: var(--accent); }
.svg-icon.svg-icon-success { color: var(--success); }
.svg-icon.svg-icon-info    { color: var(--info); }
.svg-icon.svg-icon-warning { color: var(--warning); }
.svg-icon.svg-icon-danger  { color: var(--danger); }
.svg-icon.svg-icon-muted   { color: var(--text-soft); }

/* ---------- Botões "light"/soft + variantes Metronic ---------- */
.btn.btn-light {
    background: var(--surface-muted);
    border-color: var(--surface-muted);
    color: var(--text);
}
.btn.btn-light:hover { background: var(--border); }

.btn.btn-light-primary { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.btn.btn-light-primary:hover { background: var(--accent); color: #fff; }
.btn.btn-light-success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.btn.btn-light-success:hover { background: var(--success); color: #fff; }
.btn.btn-light-info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.btn.btn-light-info:hover { background: var(--info); color: #fff; }
.btn.btn-light-warning { background: var(--warning-soft); border-color: transparent; color: #b9770f; }
.btn.btn-light-warning:hover { background: var(--warning); color: #fff; }
.btn.btn-light-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.btn.btn-light-danger:hover { background: var(--danger); color: #fff; }
.btn.btn-light-dark { background: var(--surface-muted); border-color: transparent; color: var(--text); }
.btn.btn-light-dark:hover { background: var(--text); color: #fff; }

.btn.btn-clean { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn.btn-clean:hover { background: var(--surface-muted); color: var(--text); }
.btn.btn-text { background: transparent; border: 0; }

.btn.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}
.btn.btn-icon.btn-sm { width: 2rem; height: 2rem; }
.btn.btn-icon.btn-lg { width: 3rem; height: 3rem; }

/* ---------- Navi (lista de navegação Metronic) ---------- */
.navi .navi-item .navi-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.25rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: var(--t-fast);
}
.navi.navi-hover .navi-item .navi-link:hover { background: var(--surface-muted); }
.navi .navi-icon { display: inline-flex; margin-right: 0.5rem; }
.navi .navi-text { display: flex; flex-direction: column; }

/* ---------- Subheader / separadores (Metronic) ---------- */
.subheader-separator {
    display: inline-block;
    background: var(--border);
}
.subheader-separator-ver { width: 1px; height: 22px; }

/* ---------- Pulse (sino de notificação) ---------- */
.pulse { position: relative; }
.pulse .pulse-ring {
    display: block;
    position: absolute;
    inset: -2px;
    border-radius: 40%;
    border: 3px solid var(--accent);
    animation: wcs-pulse 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
@keyframes wcs-pulse {
    0%   { transform: scale(0.6); opacity: 0; }
    50%  { opacity: 0.3; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ---------- Utilitários de tamanho (Metronic) ---------- */
.max-h-40px { max-height: 40px !important; }
.max-h-50px { max-height: 50px !important; }
.max-h-70px { max-height: 70px !important; }
.min-h-200px { min-height: 200px !important; }
.h-30px { height: 30px !important; }
.h-35px { height: 35px !important; }
.h-40px { height: 40px !important; }
.h-50px { height: 50px !important; }
.w-30px { width: 30px !important; }
.w-35px { width: 35px !important; }
.w-40px { width: 40px !important; }
.w-50px { width: 50px !important; }

/* ---------- Helpers de flex do Metronic (estruturais do layout) ---------- */
.flex-root { flex: 1 1 auto; }
.flex-column-fluid { flex: 1 0 auto; }
.flex-row-fluid { flex: 1 1 auto; min-width: 0; }
.flex-column-auto { flex: 0 0 auto; }
.flex-row-auto { flex: 0 0 auto; }

/* ---------- Form group (removido no BS5) ---------- */
.form-group { margin-bottom: 1rem; }

/* ---------- Misc ---------- */
.rounded-top { border-top-left-radius: var(--radius) !important; border-top-right-radius: var(--radius) !important; }
.bgi-no-repeat { background-repeat: no-repeat; }
.bgi-size-cover { background-size: cover; }

/* ==========================================================================
   Alerts — cor e destaque para mensagens de sucesso/erro após requisições.
   Cobre o Bootstrap (.alert-success/-danger/...) E as classes legadas do
   Metronic (alert-custom / alert-outline-* / alert-light-* / alert-icon / alert-text),
   que antes ficavam sem estilo (caixa sem cor).
   ========================================================================== */
.alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    box-shadow: var(--shadow-xs);
}
.alert .alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex: 0 0 auto;
}
.alert .alert-text { flex: 1 1 auto; min-width: 0; }
.alert .btn-close, .alert .close { margin-left: auto; }

/* ---- Sucesso ---- */
.alert-success, .alert-outline-success, .alert-light-success {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--text);
}
.alert-success .alert-icon, .alert-outline-success .alert-icon, .alert-light-success .alert-icon { color: var(--success); }

/* ---- Erro / perigo ---- */
.alert-danger, .alert-outline-danger, .alert-light-danger {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--text);
}
.alert-danger .alert-icon, .alert-outline-danger .alert-icon, .alert-light-danger .alert-icon { color: var(--danger); }

/* ---- Aviso ---- */
.alert-warning, .alert-outline-warning, .alert-light-warning {
    background: var(--warning-soft);
    border-color: var(--warning);
    color: var(--text);
}
.alert-warning .alert-icon, .alert-outline-warning .alert-icon, .alert-light-warning .alert-icon { color: var(--warning); }

/* ---- Info ---- */
.alert-info, .alert-outline-info, .alert-light-info {
    background: var(--info-soft);
    border-color: var(--info);
    color: var(--text);
}
.alert-info .alert-icon, .alert-outline-info .alert-icon, .alert-light-info .alert-icon { color: var(--info); }

/* ---- Primário ---- */
.alert-primary, .alert-outline-primary, .alert-light-primary {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text);
}
.alert-primary .alert-icon, .alert-outline-primary .alert-icon, .alert-light-primary .alert-icon { color: var(--accent); }

/* Ícone Metronic (flaticon) não existe mais: se o alert-icon ficar vazio, some pra não deixar buraco */
.alert .alert-icon:empty { display: none; }
.flex-center { display: flex; align-items: center; justify-content: center; }