/**
 * ==========================================================================
 * WEBD4 — ARQUIVO MESTRE GLOBAL DE TIPOGRAFIA & DESIGN SYSTEM (100% DO SITE)
 * ==========================================================================
 * REGRA OBRIGATÓRIA DE TIPOGRAFIA:
 * 1. Toda a tipografia é controlada exclusivamente neste arquivo.
 * 2. São utilizadas RIGOROSAMENTE apenas 3 variáveis de tamanho de fonte.
 */

:root {
    /* As 3 ÚNICAS Variáveis Oficiais de Tipografia (Redução Global de 20%) */
    --font-size-sm: 10px;   /* texto secundário, legendas, labels, badges, th */
    --font-size-base: 12px; /* corpo de texto, parágrafos, padrão geral, links, td, botões, inputs */
    --font-size-lg: 15px;   /* títulos, headers, destaques, h1, h2, h3 */

    /* Aliases e compatibilidade estrita para 100% das views do sistema */
    --font-xs: var(--font-size-sm);
    --font-sm: var(--font-size-sm);
    --font-base: var(--font-size-base);
    --font-md: var(--font-size-base);
    --font-lg: var(--font-size-lg);
    --font-xl: var(--font-size-lg);
    --font-2xl: var(--font-size-lg);

    /* Cores Institucionais (100% Light Mode) */
    --webd4-text-main: #0f172a;
    --webd4-text-body: #334155;
    --webd4-text-muted: #64748b;
    --webd4-text-light: #94a3b8;

    --webd4-bg-body: #f8fafc;
    --webd4-bg-card: #ffffff;
    --webd4-bg-hover: #f1f5f9;
    --webd4-bg-subtle: #f8fafc;

    --webd4-border-subtle: #e2e8f0;
    --webd4-border-row: #f1f5f9;

    /* Largura das Barras Laterais */
    --webd4-sidebar-width: 240px;
    --tblr-navbar-vertical-width: 240px !important;
}

/* Sidebar Vertical Global (Sem Texto Cortado) */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg {
        width: var(--webd4-sidebar-width) !important;
        max-width: var(--webd4-sidebar-width) !important;
    }
    .navbar-vertical.navbar-expand-lg ~ .page-wrapper,
    .page-wrapper,
    .main-wrapper,
    .main-content,
    .main-container {
        margin-left: var(--webd4-sidebar-width) !important;
    }
}

.navbar-vertical .nav-link {
    padding: 5px 12px !important;
    font-size: var(--font-size-sm) !important;
    white-space: nowrap !important;
}

.navbar-vertical .nav-link-title {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
}

.navbar-vertical .nav-link-icon {
    min-width: 20px !important;
    margin-right: 6px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.navbar-vertical .nav-category {
    font-size: var(--font-size-sm) !important;
    letter-spacing: 0.04em !important;
    padding: 10px 12px 4px 12px !important;
}

/* Redução Proporcional em Mobile (Smartphone) */
@media (max-width: 768px) {
    :root {
        --font-size-sm: 9px;
        --font-size-base: 11px;
        --font-size-lg: 13px;
    }
}

/* ==========================================================================
   BASE GLOBAL & CORPO DE TEXTO
   ========================================================================== */
html, body {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: var(--font-size-base) !important;
    color: var(--webd4-text-body) !important;
    background-color: var(--webd4-bg-body) !important;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
    font-size: var(--font-size-base);
}

a:hover {
    color: var(--webd4-text-main);
}

/* ==========================================================================
   1. TÍTULOS E HEADERS (SEMPRE --font-size-lg E EM NEGRITO)
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .section-title, .card-title, .modal-title {
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    color: var(--webd4-text-main) !important;
    line-height: 1.35 !important;
    margin-top: 0;
    margin-bottom: 0.35rem;
}

/* ==========================================================================
   2. CORPO DE TEXTO, ELEMENTOS GERAIS, MENUS E INPUTS (--font-size-base)
   ========================================================================== */
p, span:not(.badge):not(.nav-link-icon):not(.text-muted), li, label, .form-label,
.btn, button, input, select, textarea, .form-control, .form-select,
.table td, tbody td,
.nav-link, .sidebar .nav-link span {
    font-size: var(--font-size-base) !important;
}

p {
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

label, .form-label {
    font-weight: 600 !important;
    color: var(--webd4-text-body) !important;
    margin-bottom: 0.25rem !important;
    display: inline-block;
}

/* ==========================================================================
   3. ELEMENTOS SECUNDÁRIOS, LEGENDAS E BADGES (--font-size-sm)
   ========================================================================== */
small, .small, .caption, .badge, .text-muted, .form-hint, .meta-text,
.table th, thead th,
.nav-category, .sidebar .nav-category {
    font-size: var(--font-size-sm) !important;
}

small, .small, .caption, .text-muted, .form-hint {
    color: var(--webd4-text-muted) !important;
    font-weight: 400 !important;
}

.table th, thead th {
    background-color: var(--webd4-bg-subtle) !important;
    color: var(--webd4-text-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--webd4-border-subtle) !important;
    white-space: nowrap !important;
}

.badge {
    font-size: var(--font-size-sm) !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.table th,
.table td .badge,
.table td code,
.table td .btn,
.text-nowrap {
    white-space: nowrap !important;
}

.badge.bg-success, .badge-success, .badge.text-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.badge.bg-primary, .badge-primary {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

.badge.bg-secondary, .badge-secondary {
    background-color: #64748b !important;
    color: #ffffff !important;
}

.badge.bg-danger, .badge-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

.badge.bg-warning, .badge-warning {
    background-color: #f59e0b !important;
    color: #0f172a !important;
}

.badge.bg-light, .badge-light {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

.btn-sm {
    font-size: var(--font-size-sm) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   4. BARRAS LATERAIS (SIDEBARS)
   ========================================================================== */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg, .sidebar {
        width: var(--webd4-sidebar-width) !important;
    }
    .page-wrapper, .main-content, .main-wrapper, .main-container {
        margin-left: var(--webd4-sidebar-width) !important;
    }
}

.navbar-vertical, .sidebar {
    background-color: var(--webd4-bg-card) !important;
    border-right: 1px solid var(--webd4-border-subtle) !important;
}

.navbar-vertical .navbar-brand, .sidebar-header {
    font-size: var(--font-size-lg) !important;
    font-weight: 800 !important;
    padding: 0.9rem 0.85rem !important;
    border-bottom: 1px solid var(--webd4-border-row) !important;
}

.navbar-vertical .nav-category, .sidebar .nav-category {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--webd4-text-light) !important;
    padding: 0.75rem 0.75rem 0.2rem 0.75rem !important;
    margin: 0 !important;
}

.navbar-vertical .nav-item, .sidebar .nav-item {
    margin: 0 0.35rem 2px 0.35rem !important;
}

.navbar-vertical .nav-link, .sidebar .nav-link {
    font-weight: 400 !important;
    color: var(--webd4-text-body) !important;
    padding: 0.45rem 0.6rem !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.15s ease-in-out !important;
}

.navbar-vertical .nav-link:hover, .sidebar .nav-link:hover {
    color: var(--webd4-text-main) !important;
    background-color: var(--webd4-bg-hover) !important;
}

.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active,
.sidebar .nav-link.active {
    color: #1d4ed8 !important;
    font-weight: 600 !important;
    background-color: #eff6ff !important;
}

/* ==========================================================================
   5. TABELAS & CARDS (PADRÃO COMPACTO GLOBAL - REDUÇÃO DE 20%)
   ========================================================================== */
.page-header {
    margin-bottom: 0.85rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.page-pretitle {
    font-size: var(--font-size-sm) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
}

.page-title {
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

.py-4 {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

.mb-4 {
    margin-bottom: 0.85rem !important;
}

.mb-3 {
    margin-bottom: 0.65rem !important;
}

.table, table {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.table td, tbody td {
    padding: 6px 10px !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
    border-bottom: 1px solid var(--webd4-border-row) !important;
    vertical-align: middle !important;
}

.table tbody tr:hover {
    background-color: var(--webd4-bg-hover) !important;
}

.card, .flat-card {
    background: var(--webd4-bg-card) !important;
    border: 1px solid var(--webd4-border-subtle) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 0.75rem !important;
}

.card-header, .flat-card-header {
    background: var(--webd4-bg-card) !important;
    border-bottom: 1px solid var(--webd4-border-subtle) !important;
    padding: 6px 12px !important;
    font-size: var(--font-size-base) !important;
    min-height: auto !important;
}

.card-body, .flat-card-body {
    padding: 10px 14px !important;
    background: var(--webd4-bg-card) !important;
    font-size: var(--font-size-base) !important;
}

.card-footer {
    padding: 6px 12px !important;
    background: var(--webd4-bg-card) !important;
    border-top: 1px solid var(--webd4-border-subtle) !important;
    font-size: var(--font-size-sm) !important;
}

.badge {
    font-size: var(--font-size-sm) !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.alert {
    padding: 6px 12px !important;
    font-size: var(--font-size-base) !important;
    border-radius: 5px !important;
    margin-bottom: 0.65rem !important;
}

/* ==========================================================================
   6. BOTÕES COMPACTOS & ESPAÇAMENTO GLOBAL OBRIGATÓRIO
   ========================================================================== */
.btn {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    line-height: 1.35 !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-sm {
    font-size: var(--font-size-sm) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
}

.btn-lg {
    font-size: var(--font-size-base) !important;
    padding: 5px 12px !important;
    border-radius: 5px !important;
}

/* Espaçamento obrigatório entre botões (Nunca grudados) */
.btn + .btn,
.btn-list > *,
.btn-group > .btn {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

.btn-group {
    display: inline-flex !important;
    gap: 8px !important;
}

.btn-group > .btn {
    border-radius: 4px !important;
}

/* Inputs & Form Controls Compactos */
.form-control, .form-select {
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--webd4-text-main) !important;
    padding: 3px 8px !important;
    font-size: var(--font-size-base) !important;
}

textarea.form-control {
    height: auto !important;
    min-height: auto !important;
}

.form-control:focus, .form-select:focus {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15) !important;
}

/* ==========================================================================
   BARRA DE NAVEGAÇÃO INFERIOR FIXA NO MOBILE / APP (BOTTOM BAR)
   ========================================================================== */
.webd4-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58px;
    background: #ffffff;
    border-top: 1px solid var(--webd4-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1040;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04);
}

.webd4-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--webd4-text-muted);
    padding: 6px 0;
    transition: color 0.15s ease-in-out;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.webd4-bottom-nav-item i {
    font-size: 16px;
    margin-bottom: 3px;
    transition: transform 0.15s ease-in-out;
}

.webd4-bottom-nav-item span {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1;
}

.webd4-bottom-nav-item:active i {
    transform: scale(1.15);
}

.webd4-bottom-nav-item.active,
.webd4-bottom-nav-item:hover {
    color: #ea580c;
}

@media (max-width: 991.98px) {
    body.has-bottom-nav {
        padding-bottom: 72px !important;
    }
}

@media (min-width: 992px) {
    .webd4-bottom-nav {
        display: none !important;
    }
}