/**
    * Customizações do ERP
    * Este arquivo deve conter APENAS customizações específicas do seu projeto
    * O Tabler já inclui tudo que você precisa - evite duplicar estilos
*/

/* ====== SELEÇÃO DE TEXTO (dark mode) ====== */
::selection {
    background: #4dabf7;
    color: #fff;
}

/* ====== TEXT CASING (VInputText / VInputTextArea) ====== */
.text-upper { text-transform: uppercase; }
.text-lower { text-transform: lowercase; }

/* ====== VARIÁVEIS CUSTOMIZADAS ====== */
:root {
    --tblr-body-font-size: 1rem; /* Tabler padrão é 0.875rem — aumentado para melhor legibilidade */
}

:root,
[data-bs-theme=dark] {
    /* Cores da sua marca (opcional - o Tabler já tem cores lindas) */
    /* --tblr-primary: #seu-azul; */
    /* --tblr-primary-rgb: R, G, B; */
    --tblr-form-invalid-color: #d63939;
    --tblr-form-invalid-border-color: #d63939;
    --tblr-form-valid-color: #2fb344;
    --tblr-form-valid-border-color: #2fb344;
}

/* ====== DARK THEME: BLACK puro (remove tinte azul do Tabler/Tailwind) ====== */
[data-bs-theme=dark] {
    /* Paleta gray → neutro puro
       O Tabler referencia --tblr-gray-700/800/900 em bg-surface, card-bg,
       inputs, navbar, dropdowns... Sobrescrever aqui propaga para tudo. */
    --tblr-gray-700: #383838;
    --tblr-gray-800: #1e1e1e;
    --tblr-gray-900: #141414;
    --tblr-gray-950: #0a0a0a;

    /* Variáveis base Bootstrap layer */
    --tblr-body-bg:                   #141414;
    --tblr-body-bg-rgb:               20, 20, 20;
    --tblr-secondary-bg:              #1e1e1e;
    --tblr-secondary-bg-rgb:          30, 30, 30;
    --tblr-tertiary-bg:               #181818;
    --tblr-tertiary-bg-rgb:           24, 24, 24;
    --tblr-border-color:              #2e2e2e;
    --tblr-border-color-translucent:  rgba(255, 255, 255, 0.08);
    --tblr-light-bg-subtle:           #1e1e1e;
    --tblr-dark-bg-subtle:            #141414;
    --tblr-light-border-subtle:       #333333;
    --tblr-dark-border-subtle:        #1e1e1e;

    /* bg-surface-tertiary = usado pelo table-striped.
       Como gray-800 alimenta tanto bg-surface quanto bg-surface-tertiary,
       precisamos separar explicitamente para manter o contraste das linhas. */
    --tblr-bg-surface-tertiary:       #252525;

    /* Active state e btn-color têm valores RGB hardcoded (azulado) */
    --tblr-active-bg:                 rgba(255, 255, 255, 0.06);
    --tblr-btn-color:                 #1c1c1c;
}

/* .dropdown-menu-dark tem --tblr-dropdown-bg hardcoded (#1f2937) */
[data-bs-theme=dark] .dropdown-menu-dark {
    --tblr-dropdown-bg: #1e1e1e;
}

/* Modal backdrop: preto sólido + mais opaco para o blur não capturar azul da página */
[data-bs-theme=dark] .modal-backdrop {
    background-color: #000;
    opacity: 0.65;
}
html, body {
    height: 100%;
}

body {
    overflow: hidden;
}

.page {
    height: 100vh;
    overflow: hidden;
}

/* Tudo rola junto (header + body + footer) */
.page-wrapper {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* fluxo normal */
    position: static;
}

/* Não crie segundo scroll no body */
.page-body {
    overflow: visible;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
}

.page-body {
    flex: 1 0 auto;
}

.footer {
    margin-top: auto;
}



/* ====== BLAZOR ESPECÍFICO ====== */

/* Indicador de carregamento do Blazor */
.blazor-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: 3px;
    background: var(--tblr-primary);
    animation: blazor-loading 2s ease-in-out infinite;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes blazor-loading {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Erro de reconexão do Blazor */
#blazor-error-ui {
    background: var(--tblr-danger);
    color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    text-align: center;
    z-index: 9999;
    display: none;
}

    #blazor-error-ui.show {
        display: block;
    }

/* ====== AJUSTES DO LAYOUT ====== */

/* Garante que o sidebar tenha altura total */
.navbar-vertical {
    min-height: 100vh;
}

/* Ajuste para o conteúdo não ficar atrás do sidebar em telas grandes */
@media (min-width: 992px) {
    .page-wrapper {
        margin-left: 15rem; /* Largura do sidebar */
    }
}

/* ====== COMPONENTES CUSTOMIZADOS ====== */

/* Card de estatística com hover */
.card-stats:hover {
    transform: translateY(-2px);
    box-shadow: var(--tblr-box-shadow-lg);
    transition: all 0.2s ease;
}

/* Badge de status customizado */
.badge-status-ativo {
    background-color: var(--tblr-success);
    color: #000;
}

.badge-status-inativo {
    background-color: #e53935 !important;
    color: #f0f0f0;
}

.badge-status-pendente {
    background-color: var(--tblr-warning);
    color: #000;
}

[data-bs-theme=dark] .badge-status-ativo,
[data-bs-theme=dark] .badge-status-inativo,
[data-bs-theme=dark] .badge-status-pendente {
    color: #fff;
}

/* ====== ÍCONE NOTIFICAÇÕES NAVBAR ====== */
.navbar .badge-notification {
    top: 8px !important;
    transform: translate(50%, -50%) !important;
}

/* ====== BADGES DE PRIORIDADE ====== */
.badge-priority {
    font-size: 0.85rem !important;
    padding: 0.35em 0.75em !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* ====== BADGES: COR SÓLIDA (fix -lt em dark e light) ====== */
.badge.bg-primary-lt   { background-color: var(--tblr-primary)   !important; }
.badge.bg-secondary-lt { background-color: var(--tblr-secondary) !important; }
.badge.bg-success-lt   { background-color: var(--tblr-success)   !important; }
.badge.bg-danger-lt    { background-color: #b71c1c               !important; }
.badge.bg-warning-lt   { background-color: var(--tblr-warning)   !important; }
.badge.bg-blue-lt      { background-color: var(--tblr-blue)      !important; }
.badge.bg-azure-lt     { background-color: var(--tblr-azure)     !important; }
.badge.bg-green-lt     { background-color: var(--tblr-green)     !important; }
.badge.bg-orange-lt    { background-color: var(--tblr-orange)    !important; }
.badge.bg-purple-lt    { background-color: var(--tblr-purple)    !important; }
.badge.bg-red-lt       { background-color: #b71c1c               !important; }
.badge.bg-yellow-lt    { background-color: var(--tblr-yellow)    !important; }

.badge[class*="-lt"] { color: #f0f0f0 !important; }

/* ====== TABELAS ====== */

/* Linha clicável em tabelas */
.table-row-link {
    cursor: pointer;
}

/* ====== INPUT-GROUP ====== */
/* Zera padding-y via variável: o padding e o min-height do Tabler usam --tblr-btn-padding-y,
   então sobrescrever a var corrige ambos de uma vez. align-self:stretch faz o botão
   igualar a altura do form-control pelo flexbox do input-group. */
.input-group > .btn {
    --tblr-btn-padding-y: 0px;
    align-self: stretch;
}

.input-group > .btn .ti,
.input-group > .btn .icon {
    font-size: 1.1rem !important;
    margin-inline-end: 0;
}

.input-group .btn-outline-secondary {
    border-color: var(--tblr-input-border-color);
}

/* ====== FORMULÁRIOS ====== */

/* Campo obrigatório */
.form-label.required::after {
    content: " *";
    color: var(--tblr-danger);
}

.form-label {
    font-size: 0.91rem !important;
}

/* Switch checked+disabled: manter cor normal (sem opacidade reduzida) */
.form-check-input:checked:disabled {
    opacity: 1;
}

/* Campo com erro */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--tblr-danger);
    background-image: none;
}

/* Campo válido — só borda, sem ícone */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--tblr-success);
    background-image: none;
}

/* Mensagem de validação */
.validation-message {
    color: var(--tblr-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ====== CAMPOS DESABILITADOS / SOMENTE LEITURA ====== */

/*
 * Cursor bloqueado — regras globais, sem necessidade de classe extra.
 * pointer-events:auto restaura hover em elementos que o Bootstrap desabilitou.
 */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
textarea:disabled,
textarea[readonly],
button:disabled,
.btn:disabled,
.form-check-input:disabled {
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

/* label que envolve radio/checkbox desabilitado */
.field-locked label {
    cursor: not-allowed !important;
}

/* Container de input-group com filho bloqueado */
.input-group:has(> .form-control:disabled),
.input-group:has(> .form-control[readonly]) {
    cursor: not-allowed;
}

/*
 * Wrapper de tooltip CSS-only para campos bloqueados.
 * Uso: <div class="field-locked" data-tip="Motivo do bloqueio"> ... </div>
 * Funciona em qualquer elemento filho (input, select, button, etc.)
 */
.field-locked {
    position: relative;
    display: block;
}

.field-locked::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.92);
    background: var(--tblr-dark, #182433);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--tblr-border-radius, 4px);
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.field-locked:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ====== UTILITÁRIOS ====== */

/* Cursor pointer para elementos clicáveis */
.cursor-pointer {
    cursor: pointer;
}

/* Texto truncado com ellipsis */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ====== PRINT ====== */

@media print {
    .navbar,
    .navbar-vertical,
    .settings,
    .footer {
        display: none !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
    }

    .page-body {
        padding: 0 !important;
    }
}
/* ====== BOTTOM BAR ====== */
.footer {
    padding: 0.45rem 0; /* diminui altura */
    background: var(--tblr-bg-surface); /* respeita tema dark */
    border-top: 1px solid var(--tblr-border-color); /* borda adaptável */
}

    .footer .container-xl {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

/* ====== FIX MOBILE/RESPONSIVO ====== */
@media (max-width: 991.98px) {
    .page-wrapper {
        margin-left: 0 !important;
        padding-top: 3.5rem;
    }

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

        .navbar-vertical .navbar-collapse {
            position: fixed;
            top: 3.5rem;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--tblr-bg-surface);
            overflow-y: auto;
            z-index: 1029;
        }

    .settings .btn-floating {
        position: fixed;
        bottom: 1rem;
        left: 1rem;
        z-index: 1040;
    }

    /* Dropdowns do topo mobile (notificações + usuário) */
    .mobile-top-actions .dropdown-menu {
        position: fixed !important;
        top: 3.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        min-width: unset !important;
        max-width: unset !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 1050;
    }

    /* Submenu vira accordion no mobile — APENAS no sidebar */
    #sidebar-menu .nav-submenu-items {
        margin-left: 0.75rem !important;
        border-left-color: rgba(255, 255, 255, 0.15) !important;
    }

    #sidebar-menu .nav-menu-item {
        color: inherit;
    }

        #sidebar-menu .nav-menu-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
}

/* global for buttons */
.btn {
    font-size: 0.8rem !important; /* fs-3 */
    letter-spacing: 0.02em;
    text-transform: uppercase
}

    .btn .ti,
    .btn .icon {
        font-size: 1.2rem !important; /* fs-2 */
        margin-inline-end: 0.5rem;
    }

    /* botoes somente icone: remove margem lateral do icone */
    .btn-icon .ti,
    .btn-icon .icon {
        margin-inline-end: 0;
    }

    /* botao icone quadrado para uso em tabelas */
    .btn.btn-icon-sq {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border-radius: var(--tblr-border-radius);
    }

    .btn.btn-icon-sq .ti,
    .btn.btn-icon-sq .icon {
        font-size: 1.1rem !important;
        margin-inline-end: 0;
    }
}

/* ====== FILE MANAGER ====== */
.fm-dropzone {
    border-radius: var(--tblr-border-radius);
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

.fm-dropzone.fm-dragover {
    box-shadow: inset 0 0 0 2px var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

/* ====== THEME: CARD STYLE ====== */
[data-bs-theme-card="bordered"] .card {
    --tblr-card-box-shadow: none;
    --tblr-card-border-width: 2px;
    --tblr-card-border-color: var(--tblr-border-color);
}
[data-bs-theme-card="bordered"] .modal-content {
    --tblr-modal-box-shadow: none;
    --tblr-modal-border-width: 2px;
    --tblr-modal-border-color: var(--tblr-border-color);
}

[data-bs-theme-card="shadowless"] .card {
    --tblr-card-box-shadow: none;
    --tblr-card-border-width: 0;
}
[data-bs-theme-card="shadowless"] .modal-content {
    --tblr-modal-box-shadow: none;
    --tblr-modal-border-width: 0;
}

[data-bs-theme-card="elevated"] .card {
    --tblr-card-box-shadow: 0 4px 24px rgba(var(--tblr-body-color-rgb), 0.12);
    --tblr-card-border-width: 0;
}
[data-bs-theme-card="elevated"] .modal-content {
    --tblr-modal-box-shadow: 0 4px 24px rgba(var(--tblr-body-color-rgb), 0.12);
    --tblr-modal-border-width: 0;
}

/* ====== THEME: CORES PRIMÁRIAS EXTRAS ====== */
[data-bs-theme-primary=violet]   { --tblr-primary: #7c3aed; --tblr-primary-rgb: 124, 58, 237; }
[data-bs-theme-primary=fuchsia]  { --tblr-primary: #c026d3; --tblr-primary-rgb: 192, 38, 211; }
[data-bs-theme-primary=rose]     { --tblr-primary: #e11d48; --tblr-primary-rgb: 225, 29, 72; }
[data-bs-theme-primary=amber]    { --tblr-primary: #d97706; --tblr-primary-rgb: 217, 119, 6; }
[data-bs-theme-primary=emerald]  { --tblr-primary: #059669; --tblr-primary-rgb: 5, 150, 105; }
[data-bs-theme-primary=sky]      { --tblr-primary: #0ea5e9; --tblr-primary-rgb: 14, 165, 233; }
[data-bs-theme-primary=grape]    { --tblr-primary: #9b3fd1; --tblr-primary-rgb: 155, 63, 209; }
[data-bs-theme-primary=navy]     { --tblr-primary: #1864ab; --tblr-primary-rgb: 24, 100, 171; }
[data-bs-theme-primary=steel]    { --tblr-primary: #4a6fa5; --tblr-primary-rgb: 74, 111, 165; }
[data-bs-theme-primary=forest]   { --tblr-primary: #2b8a3e; --tblr-primary-rgb: 43, 138, 62; }
[data-bs-theme-primary=coral]    { --tblr-primary: #ff6b35; --tblr-primary-rgb: 255, 107, 53; }
[data-bs-theme-primary=wine]     { --tblr-primary: #862e1b; --tblr-primary-rgb: 134, 46, 27; }
[data-bs-theme-primary=coolgray] { --tblr-primary: #6b7280; --tblr-primary-rgb: 107, 114, 128; }
[data-bs-theme-primary=warmgray] { --tblr-primary: #78716c; --tblr-primary-rgb: 120, 113, 108; }

.bg-violet   { background-color: #7c3aed !important; }
.bg-fuchsia  { background-color: #c026d3 !important; }
.bg-rose     { background-color: #e11d48 !important; }
.bg-amber    { background-color: #d97706 !important; }
.bg-emerald  { background-color: #059669 !important; }
.bg-sky      { background-color: #0ea5e9 !important; }
.bg-grape    { background-color: #9b3fd1 !important; }
.bg-navy     { background-color: #1864ab !important; }
.bg-steel    { background-color: #4a6fa5 !important; }
.bg-forest   { background-color: #2b8a3e !important; }
.bg-coral    { background-color: #ff6b35 !important; }
.bg-wine     { background-color: #862e1b !important; }
.bg-coolgray { background-color: #6b7280 !important; }
.bg-warmgray { background-color: #78716c !important; }