/**
 * ============================================================================
 * ARQUIVO: themes/default.css
 * DESCRIÇÃO: Tema padrão do Serket - Adianti Framework
 * VERSÃO: 2.0.8 (TSeparator compatível com Mad Builder - h4 + hr.tseparator-divisor)
 * DATA: 21 de outubro de 2025
 * FUSO HORÁRIO: America/Fortaleza (-03:00)
 * 
 * IMPORTANTE: Este arquivo consolida todas as melhorias visuais do projeto.
 * Cada alteração está documentada com comentário explicando o motivo.
 * 
 * HISTÓRICO DE VERSÕES:
   - v2.0.8 (2025-10-22): TSeparator compatível com Mad Builder - trabalha com h4.tseparator + hr.tseparator-divisor
   - v2.0.7 (2025-10-22): CORREÇÃO TSeparator - linha atrás do texto, alinhamento esquerda padrão, variante .centered
 * - [v2.0.5] 2025-10-22: CORREÇÃO TText/textarea altura
 *           PROBLEMA: textarea não respeitava altura do container pai
 *           CAUSA: display inline-block + box-sizing content-box (padding soma)
 *           SOLUÇÃO: box-sizing border-box + display block + height 100%
 * - [v2.0.4] 2025-10-21: CORREÇÃO campos de formulário
 *           PROBLEMA: padding-left fixo (36px) afetava todos os campos
 *           PROBLEMA: border-left: none quebrava borders normais
 *           PROBLEMA: position absolute quebrava layout Adianti
 *           SOLUÇÃO: Escopar estilos de avatar APENAS para tela de login
 *           SOLUÇÃO: Restaurar padding normal (10px 14px) em .form-control
 * - [v1.0.0] Original: MadBuilder template base
 * - [v2.0.0] 2025-10-21: Consolidação de temas Serket Modern Premium
 *           Inclui: modais melhorados, botões modernos, campos de formulário,
 *           tabelas estilizadas, tabs modernos, alerts, scrollbar customizada
 * - [v2.0.1] 2025-10-21: Correções DataGrid
 *           Removido: gradient headers, text-transform uppercase
 *           Otimizado: competency rows (15px, #E0F2FE, #0369A1)
 * - [v2.0.2] 2025-10-21: Correção login-mobile.html
 *           Removida: referência a default-mobile.css inexistente
 *           Confirmado: layout-mobile.css mantém responsividade
 * - [v2.0.3] 2025-10-21: Login avatar icons (fa-user, fa-lock)
 *           Adicionado: posicionamento absoluto para .login-avatar
 *           Ícones à esquerda do campo, sem sobreposição
 * 
 * ESTRUTURA:
 * 1. Variáveis CSS Root - Paleta de cores e dimensões
 * 2. Componentes UI - Modais, Painéis, Botões, Formulários
 * 3. Tabelas e Dados - Estilos de tabelas e dados
 * 4. Navegação - Tabs, Menu, Breadcrumb
 * 5. Feedback - Alerts, Messages, Notifications
 * 6. Scrollbar - Customização de barras de rolagem
 * 7. Linhas de Competência/Autorização - Estilos especiais
 * ============================================================================
 */
:root {
  /* ====================================================================
     SEÇÃO 1: VARIÁVEIS CSS - PALETA DE CORES E DIMENSÕES
     
     MELHORIAS APLICADAS (v2.0.0):
     - Cores mais claras e modernas (próximo de Tailwind Design System)
     - Menu e submenus com fundo claro (#F8F9FA e #FFFFFF)
     - Botões com gradiente amarelo (#FFC107 → #FFB300)
     - Campos de formulário com border mais suave
     - Backgrounds dos painéis brancos (#FFFFFF) para melhor legibilidade
     ==================================================================== */
  
  --text-color-light: #718096;
  --template-border-color: #E2E8F0;
  --font-size: 14px;
  --text-color: #2D3748;
  --text-color-strong: #1A202C;
  --font-family: 'Noto Sans', sans-serif;
  
  /* Header e Layout */
  --header-height: 60px;
  --header-logo-background: #062134;
  --header-background-color: #062134;
  --header-text-color: #FFFFFF;
  --header-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  /* Menu Lateral */
  --menu-width: 290px;
  --menu-background-color: #F8F9FA;
  --menu-master-color-strong: #2D3748;
  --menu-check-color: #FFFFFF;
  --menu-border-right: #E5E7EB;
  --menu-icon-font-size: 16px;
  --menu-background-check: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
  --menu-button-border-color: #D1D5DB;
  --menu-user-splash-background: #FFFFFF;
  --menu-background-button-circle: #FFC107;
  --menu-color-button-circle: #FFFFFF;
  --menu-box-shadow: none;
  
  /* Submenu */
  --submenu-background-color: #FFFFFF;
  --submenu-sub-text-color: #6B7280;
  --submenu-border-right: #E5E7EB;
  --submenu-text-color: #374151;
  --submenu-text-hover: #FFC107;
  --submenu-background-check: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
  --submenu-check-color: #FFFFFF;
  --submenu-font-size: 14px;
  --submenu-padding-horizontal: 12px;
  --submenu-item-padding-horizontal: 14px;
  --submenu-item-padding-vertical: 11px;
  
  /* Top Menu */
  --top-menu-border: #1A4D7C;
  --top-menu-background-color: #062134;
  --top-menu-background-check: #FFC107;
  --top-menu-check-color: #FFFFFF;
  --top-menu-hover-color: #FFC107;
  --top-menu-color: #FFFFFF;
  --top-submenu-background-color: #FFFFFF;
  --top-submenu-text-color: #374151;
  --top-submenu-text-hover: #FFC107;
  --top-submenu-background-check: #FFC107;
  --top-submenu-check-color: #FFFFFF;
  --top-menu-background-button-circle: #FFFFFF;
  --top-menu-color-button-circle: #FFC107;
  
  /* Main Content */
  --main-color: #2D3748;
  --live-background-color: #F5F7FA;
  --live-area-width: 100%;
  --content-border-radius: 8px;
  --content-background: #F5F7FA;
  --content-border-color: #E2E8F0;
  
  /* Botões - Base */
  --button-height: 35px;
  --button-text-color: #2D3748;
  --button-background: #FFFFFF;
  --button-border-radius: 8px;
  --button-padding: 12px 20px;
  --button-border: #E5E7EB;
  --button-text-color-hover: #1A202C;
  --button-box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  
  /* Campos de Formulário */
  --field-height: 38px;
  --field-border-top: 1px;
  --field-border-bottom: 1px;
  --field-border-right: 1px;
  --field-border-left: 1px;
  --field-border-radius: 8px;
  --field-background: #FFFFFF;
  --field-border-color: #D1D5DB;
  --field-color: #1F2937;
  --field-focus-border-color: #FFC107;
  --field-placeholder-color: #9CA3AF;
  --field-padding-horizontal: 14px;
  --field-padding-vertical: 10px;
  --field-check-color: #FFC107;
  --field-disabled-background: #F3F4F6;
  --field-disabled-text-color: #9CA3AF;
  --field-disabled-border: #E5E7EB;
  
  /* Painéis e Modais */
  --panel-background: #FFFFFF;
  --panel-border-radius: 12px;
  --panel-header-background: linear-gradient(135deg, #F8F9FA 0%, #F1F3F5 100%);
  --panel-header-color: #111827;
  --panel-header-font-size: 19px;
  --panel-header-font-weight: 600;
  --panel-header-padding-vertical: 16px;
  --panel-header-padding-horizontal: 24px;
  --panel-header-border-color: transparent;
  --panel-body-padding: 24px;
  --panel-border-color: #E5E7EB;
  --panel-box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --panel-padding: 0px;
  --panel-row-margin-bottom: 16px;
  --panel-footer-background: #F9FAFB;
  
  --modal-background: #FFFFFF;
  --modal-footer-background: #F9FAFB;
  --modal-header-background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
  --modal-header-color: #111827;
  
  /* Tabelas */
  --table-body-color: #1F2937;
  --table-header-color: #111827;
  --table-header-font-size: 14px;
  --table-header-font-weight: 600;
  --table-header-background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
  --table-header-border-color: #FFB300;
  --table-header-padding-vertical: 12px;
  --tr-hover-background: #FEF3C7;
  --tr-hover-color: #1F2937;
  --tr-even-background: #F9FAFB;
  --tr-odd-background: #FFFFFF;
  
  /* Tabs */
  --tab-active-border-color: #FFC107;
  --tab-active-background: #FFFFFF;
  --tab-active-color: #111827;
  --tab-border-color: #E5E7EB;
  --tab-background: transparent;
  --tab-color: #6B7280;
  --tab-border-radius: 8px;
  --tab-font-size: 14px;
  --tab-font-weight: 500;
  
  /* Login */
  --login-background-color: #F5F7FA;
  --login-panel-header-background: #F5F7FA;
  --login-panel-left-background-color: #062134;
  --login-panel-right-background-color: #FFFFFF;
  --login-button-background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
  --login-button-text-color: #1A202C;
  --login-panel-left-text-header-color: #FFC107;
  --login-panel-left-text-header-align: left;
  --login-panel-left-text-header-font-size: 40px;
  --login-panel-left-text-header-font-weight: 700;
  --login-panel-left-text-footer-color: #FFC107;
  --login-panel-left-text-footer-align: right;
  --login-panel-left-text-footer-font-size: 25px;
  --login-panel-left-text-footer-font-weight: 700;
  --login-panel-detail-display: flex;
  --login-link-color: #FFC107;
  --login-panel-detail-display-image: flex;
  --login-panel-detail-display-details: flex;
  --login-panel-detail-image-size: cover;
  --login-panel-detail-image-position: center;
  --login-panel-detail-direction: row;
  --login-panel-max-width: 1250px;
  --login-panel-max-height: 590px;
  --login-panel-border-radius: 12px;
  --login-panel-box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  --login-form-box-shadow: 0 4px 6px rgba(0,0,0,0.07);
  --login-title-font-size: 26px;
  --login-title-align: left;
  --login-title-font-weight: 700;
  --login-title-color: #111827;
  --login-header-font-size: 14px;
  --login-header-align: left;
  --login-header-color: #6B7280;
  --login-border-color: #D1D5DB;
  --login-text-center-align: center;
  --login-text-center-size: 18px;
  --login-text-center-weight: 700;
  --login-text-center-color: #FFFFFF;
  
  /* Gerais */
  --scrollbar-color: #CBD5E0;
  --color-overlay: rgba(0,0,0,0.5);
  --preloader-color: #FFC107;
  --header-border-bottom: #1A4D7C;
  --header-logo-font-size: 22px;
  --header-logo-border-right: #1A4D7C;
  --header-logo-border-bottom: #1A4D7C;
  --header-track-border-right: #1A4D7C;
  --header-box-display: none;
  --header-box-background: #062134;
  --header-box-padding-horizontal: 0px;
  --header-box-padding-vertical: 0px;
  --header-logo-padding-horizontal: 0px;
  --header-logo-padding-vertical: 0px;
  --header-logo-text-color: #FFFFFF;
  --modules-button-radius: 8px;
  --login-html: ;
  --login-panel-detail-force-full-image: ;
  --login-panel-left-header-image-position: center;
  --show-text-center: ;
  --name: Serket-Modern-Premium;
}

/* ====================================================================
   SEÇÃO 2: COMPONENTES UI - MODAIS, PAINÉIS, BOTÕES
   
   MELHORIAS APLICADAS (v2.0.0):
   - Modais com box-shadow premium (25px blur, contorno amarelo)
   - Painéis com hover effect e sombra suave
   - Botões com gradiente e transições suaves
   - Cards headers com gradiente
   ==================================================================== */

/* ========== MODAIS COM DESTAQUE PREMIUM ========== */
/* MELHORIA: Modais com sombra profunda e contorno amarelo
   MOTIVO: Melhor visualização e destaque do modal na tela
   DATA: 2025-10-21 */

.modal-content {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25), 
              0 0 0 1px rgba(0,0,0,0.05),
              0 0 0 3px #FFC107 !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

.modal-dialog {
  filter: drop-shadow(0 25px 50px rgba(0,0,0,0.2));
}

.modal-header {
  background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%) !important;
  border-bottom: 3px solid #FFB300 !important;
  padding: 20px 24px !important;
  border-radius: 0 !important;
}

.modal-header .modal-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

.modal-body {
  padding: 28px 24px !important;
  background: #FFFFFF !important;
}

.modal-footer {
  background: #F9FAFB !important;
  border-top: 1px solid #E5E7EB !important;
  padding: 18px 24px !important;
}

/* ========== JQUERY UI DIALOG (MODAL LEGADA) ========== */
/* MELHORIA: Aplicar mesmo estilo premium ao dialog jQuery UI
   MOTIVO: Consistência visual entre diferentes tipos de modais
   DATA: 2025-10-21 */

.ui-dialog {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.3),
                0 0 0 1px rgba(0,0,0,0.1),
                0 0 0 4px #FFC107,
                0 0 20px rgba(255,193,7,0.4) !important;
    border: none !important;
    border-radius: 12px !important;
}

.ui-dialog-titlebar {
    background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%) !important;
    border: none !important;
    border-bottom: 3px solid #FFB300 !important;
    padding: 16px 20px !important;
}

.ui-dialog-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3) !important;
}

.ui-dialog-titlebar-close {
    background: rgba(0,0,0,0.1) !important;
    border: none !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.ui-dialog-titlebar-close:hover {
    background: rgba(0,0,0,0.2) !important;
    transform: scale(1.1);
}

/* Card/Panel dentro do Dialog */
.ui-dialog .card-header,
.ui-dialog .panel-heading {
    background: linear-gradient(135deg, #F8F9FA 0%, #F1F3F5 100%) !important;
    border-bottom: 2px solid #E5E7EB !important;
}

.ui-dialog .panel-title,
.ui-dialog .card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* ========== PAINÉIS ESTILIZADOS ========== */
/* MELHORIA: Painéis com borders suaves, sombras e hover effects
#   MOTIVO: Melhor separaç
o visual, profundidade e feedback interativo
   DATA: 2025-10-21 */

.panel {
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.panel:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px);
}

.panel-heading {
  background: linear-gradient(135deg, #F8F9FA 0%, #F1F3F5 100%) !important;
  border-bottom: 2px solid #E5E7EB !important;
  padding: 16px 24px !important;
}

.panel-title {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.panel-body {
  padding: 24px !important;
  background: #FFFFFF !important;
}

/* ========== BOTÕES MODERNOS ========== */
/* MELHORIA: Botões com gradiente amarelo, transitions e sombras
   MOTIVO: Melhor visual, feedback interativo e hierarquia visual
   DATA: 2025-10-21 */

.btn {
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

.btn-primary, .btn-success, .btn-info {
  background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%) !important;
  border-color: #FFB300 !important;
  color: #111827 !important;
}

.btn-primary:hover, .btn-success:hover, .btn-info:hover {
  background: linear-gradient(135deg, #FFB300 0%, #FFA000 100%) !important;
  box-shadow: 0 4px 8px rgba(255,193,7,0.3) !important;
  transform: translateY(-1px);
}

.btn-default {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #374151 !important;
}

.btn-default:hover {
  background: #F9FAFB !important;
  border-color: #9CA3AF !important;
}

.btn-danger {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
  box-shadow: 0 4px 8px rgba(239,68,68,0.3) !important;
}

/* ========== BOTÕES EM GRUPO (btn-group) ========== */
/* MELHORIA: Destacar botão ativo em grupos de seleção
   MOTIVO: Feedback visual claro para indicar opção selecionada
   DATA: 2025-10-22
   VERSÃO: 2.0.9 */

.btn-group .btn {
  border-radius: 0 !important;
  border-right: none !important;
  margin: 0 !important;
}

.btn-group .btn:first-child {
  border-radius: 8px 0 0 8px !important;
}

.btn-group .btn:last-child {
  border-radius: 0 8px 8px 0 !important;
  border-right: 1px solid #D1D5DB !important;
}

/* Botão ativo em grupo */
.btn-group .btn-default.active {
  background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%) !important;
  border-color: #FFB300 !important;
  color: #111827 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 
              0 2px 6px rgba(255,193,7,0.3) !important;
  z-index: 1 !important;
  position: relative !important;
}

/* Hover em botão ativo */
.btn-group .btn-default.active:hover {
  background: linear-gradient(135deg, #FFB300 0%, #FFA000 100%) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 
              0 3px 8px rgba(255,193,7,0.4) !important;
}

/* Botões inativos em grupo */
.btn-group .btn-default:not(.active) {
  background: #FFFFFF !important;
  color: #6B7280 !important;
}

.btn-group .btn-default:not(.active):hover {
  background: #F9FAFB !important;
  color: #374151 !important;
}

/* Inputs dentro de labels (esconder visualmente) */
.btn-group label input[type="checkbox"],
.btn-group label input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Labels como botões clicáveis */
.btn-group label {
  cursor: pointer !important;
  margin-bottom: 0 !important;
  user-select: none !important;
}

/* ====================================================================
   SEÇÃO 3: CAMPOS DE FORMULÁRIO
   
   MELHORIAS APLICADAS (v2.0.0):
   - Altura aumentada para 38px (melhor usabilidade mobile)
   - Borders suaves com cor #D1D5DB
   - Focus color com amarelo (#FFC107) e sombra suave
   - Select custom com ícone SVG
   ==================================================================== */

/* ========== CAMPOS DE FORMULÁRIO ========== */
/* MELHORIA: Campos com borders suaves, altura aumentada, focus melhorado
   MOTIVO: Melhor acessibilidade em mobile e visual moderno
   DATA: 2025-10-21 */

.form-control {
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #1F2937 !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
  height: 38px !important;
}

.form-control:focus {
  border-color: #FFC107 !important;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.1), 0 1px 3px rgba(0,0,0,0.1) !important;
  outline: none !important;
}

.form-control:disabled {
  background: #F3F4F6 !important;
  color: #9CA3AF !important;
  cursor: not-allowed !important;
}

select.form-control {
  height: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

/* ====================================================================
   SEÇÃO 4: TABELAS E DADOS
   
   MELHORIAS APLICADAS (v2.0.0):
   - Header com gradiente amarelo e texto uppercase
#   - Linhas com hover effect e transformaç
o
   - Rows alternadas (zebra striping) para melhor legibilidade
   - Borders suaves
   ==================================================================== */

/* ========== TABELAS ========== */
/* MELHORIA: Tabelas com header gradiente, hover effects e alternância de cores
   MOTIVO: Melhor legibilidade de dados e feedback visual
   DATA: 2025-10-21 */

.table {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #E5E7EB !important;
}

.table thead th {
  background: #FFC107 !important;
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  border: none !important;
  letter-spacing: 0px !important;
}

.table tbody tr {
  transition: all 0.15s ease !important;
}

.table tbody tr:hover {
  background: #FEF3C7 !important;
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.table tbody td {
  padding: 14px 16px !important;
  color: #1F2937 !important;
  border-bottom: 1px solid #F3F4F6 !important;
}

/* ========== LINHAS DE COMPETÊNCIA/AUTORIZAÇÃO ========== */
/* MELHORIA: Highlight especial para rows de competência/autorização
   MOTIVO: Destacar informações críticas de forma visual clara
   DATA: 2025-10-21 */

tr.info {
    font-weight: 600 !important;
    font-size: 15px !important;
    background: #E0F2FE !important;
    color: #0369A1 !important;
    border-left: 4px solid #3B82F6 !important;
}

tr.info td {
    padding: 12px 16px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0px !important;
}

/* ====================================================================
   SEÇÃO 5: NAVEGAÇÃO - TABS E NAVEGADORES
   
   MELHORIAS APLICADAS (v2.0.0):
   - Tabs com border bottom em amarelo na ativa
   - Background branco na aba ativa
   - Hover effect nas abas inativas
   ==================================================================== */

/* ========== TABS MODERNOS ========== */
/* MELHORIA: Tabs com design moderno, borders bottom e hover effects
   MOTIVO: Melhor navegação e feedback visual
   DATA: 2025-10-21 */

.nav-tabs {
  border-bottom: 2px solid #E5E7EB !important;
}

.nav-tabs > li > a {
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 20px !important;
  color: #6B7280 !important;
  font-weight: 500 !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: #FFFFFF !important;
  color: #111827 !important;
  border: none !important;
  border-bottom: 3px solid #FFC107 !important;
  font-weight: 600 !important;
}

.nav-tabs > li > a:hover {
  background: #F9FAFB !important;
  color: #374151 !important;
}

/* ====================================================================
   SEÇÃO 6: FEEDBACK - ALERTS E MESSAGES
   
   MELHORIAS APLICADAS (v2.0.0):
   - Alerts com border-left colorido (4px)
   - Backgrounds pastel para cada tipo
   - Box-shadow suave
   - Ícones implícitos na cor do border
   ==================================================================== */

/* ========== ALERTS MODERNOS ========== */
/* MELHORIA: Alerts com borders coloridos, backgrounds pastel e sombras
   MOTIVO: Melhor distinção entre tipos de alertas (warning, success, danger, info)
   DATA: 2025-10-21 */

.alert {
  border-radius: 8px !important;
  border: none !important;
  border-left: 4px solid !important;
  padding: 16px 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.alert-warning {
  background: #FEF3C7 !important;
  border-left-color: #F59E0B !important;
  color: #92400E !important;
}

.alert-success {
  background: #D1FAE5 !important;
  border-left-color: #10B981 !important;
  color: #065F46 !important;
}

.alert-danger {
  background: #FEE2E2 !important;
  border-left-color: #EF4444 !important;
  color: #991B1B !important;
}

.alert-info {
  background: #DBEAFE !important;
  border-left-color: #3B82F6 !important;
  color: #1E40AF !important;
}

/* ====================================================================
   SEÇÃO 7: SCROLLBAR CUSTOMIZADA
   
   MELHORIAS APLICADAS (v2.0.0):
   - Scrollbar thumb com gradiente suave
   - Track com cor de fundo clara
   - Hover effect no thumb
   - Aplicada apenas em navegadores Webkit (Chrome, Safari, Edge)
   ==================================================================== */

/* ========== SCROLLBAR PERSONALIZADA ========== */
/* MELHORIA: Scrollbar customizada com gradiente e hover
   MOTIVO: Melhor aparência visual e integração com tema
   DATA: 2025-10-21
   NOTA: Funciona apenas em navegadores Webkit (Chrome, Safari, Edge) */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #D1D5DB 0%, #9CA3AF 100%);
  border-radius: 10px;
  border: 2px solid #F3F4F6;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
}

/* ====================================================================
   FIM DO ARQUIVO
   
   RESUMO DE MELHORIAS (v2.0.0):
   ✓ Cores modernizadas (Tailwind Design System)
   ✓ Menu e submenu com fundo claro
   ✓ Botões com gradiente amarelo
   ✓ Modais com sombra profunda e contorno amarelo
   ✓ Campos com altura aumentada (38px)
   ✓ Tabelas com headers gradiente e hover effects
   ✓ Linhas de competência com highlight azul
   ✓ Alerts com borders coloridos
   ✓ Scrollbar customizada
   ✓ Transições suaves em todos os componentes
   
   TESTES NECESSÁRIOS:
   ✓ Login page (desktop e mobile)
   ✓ Menu lateral (navegação)
   ✓ Formulários (campos, validação)
   ✓ Tabelas (hover, ordenação, filtros)
   ✓ Modais (abrir, fechar, botões)
   ✓ Alerts (diferentes tipos)
   ✓ Tabs e navegação
   ==================================================================== */

/* ====================================================================
   SEÇÃO 8: LOGIN AVATAR - ÍCONES EM CAMPOS (ESCOPO LOGIN APENAS)
   
   CORREÇÃO APLICADA (v2.0.4):
   - Estilos movidos para seletor específico de login
   - Usa body.login-page ou container específico
   - NÃO afeta formulários normais da aplicação
   ==================================================================== */

/* ========== LOGIN AVATAR - ÍCONES (APENAS TELA DE LOGIN) ========== */
/* CORREO: Escopar estilos APENAS para tela de login
   PROBLEMA ANTERIOR: Afetava todos os campos da aplicação
   SOLUÇÃO: Usar seletor body.login-page ou .login-container
   DATA: 2025-10-21 (v2.0.4) */

/* Aplicar APENAS em contexto de login */
body.login-page .fb-field-container.tformrow,
.login-container .fb-field-container.tformrow {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
}

body.login-page .fb-field-container .fb-inline-field-container:first-child,
.login-container .fb-field-container .fb-inline-field-container:first-child {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  z-index: 10;
}

body.login-page .login-avatar,
.login-container .login-avatar {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F3F4F6 !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 16px !important;
  color: #6B7280 !important;
  border-right: 1px solid #E5E7EB !important;
}

body.login-page .login-avatar .fa,
.login-container .login-avatar .fa {
  font-size: 16px !important;
  color: #6B7280 !important;
}

body.login-page .fb-field-container input.tfield,
.login-container .fb-field-container input.tfield {
  padding-left: 48px !important;
  float: none !important;
  width: auto !important;
  flex: 1 !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
}

body.login-page .fb-field-container .form-line,
.login-container .fb-field-container .form-line {
  flex: 1 !important;
  display: flex !important;
}

/* ====================================================================
   FIM DO ARQUIVO
   
   RESUMO DE MELHORIAS (v2.0.4):
   ✓ CORREÇÃO: Campos de formulário restaurados (padding normal)
   ✓ CORREÇÃO: Borders normais restaurados (sem border-left: none global)
   ✓ CORREÇÃO: Estilos de avatar APENAS em login (escopo body.login-page)
   ✓ Cores modernizadas (Tailwind Design System)
   ✓ Menu e submenu com fundo claro
   ✓ Botões com gradiente amarelo
   ✓ Modais com sombra profunda e contorno amarelo
   ✓ Campos com altura aumentada (38px)
   ✓ Tabelas com headers gradiente e hover effects
   ✓ Linhas de competência com highlight azul
 Alerts com borders coloridos   
   ✓ Scrollbar customizada
   ✓ Transições suaves em todos os componentes
   
   TESTES NECESSÁRIOS:
   ✓ Formulários normais (campos devem ter borders normais)
   ✓ Login page (avatars devem aparecer corretamente)
   ✓ Menu lateral (navegação)
   ✓ Tabelas (hover, ordenação, filtros)
   ✓ Modais (abrir, fechar, botões)
   ==================================================================== */

/* ====================================================================
   SEÇÃO 9: CORREÇÃO TTEXT - TEXTAREA RESPEITAR ALTURA DO CONTAINER
   
   PROBLEMA: TText (textarea) não respeita altura definida no container pai
   CAUSA: display inline-block + box-sizing incorreto + padding somando
   SOLUÇÃO: Forçar height 100% com box-sizing border-box
   DATA: 2025-10-22
   VERSÃO: 2.0.5
   ==================================================================== */

/* ========== CORREÇÃO TEXTAREA/TTEXT ========== */
/* PROBLEMA: textarea com style="height:100%" não respeita container
   EXEMPLO: Container com height:70px, textarea não preenche
   CAUSA: box-sizing content-box faz padding somar à altura
   SOLUÇÃO: box-sizing border-box + display block */

/* Container do campo (fb-inline-field-container) */
.fb-inline-field-container[wrapped-widget="ttext"] {
  display: block !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Textarea dentro (tfield widget ttext) */
textarea.form-control[widget="ttext"],
textarea.tfield[widget="ttext"] {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  min-height: inherit !important;
  resize: vertical !important;
}

/* Garantir que container pai também coopere */
.fb-inline-field-container.form-line[wrapped-widget="ttext"] {
  display: block !important;
  height: inherit !important;
  box-sizing: border-box !important;
}

/* Se o container pai tiver altura definida inline, respeitar */
.form-line[style*="height"] textarea.form-control,
.form-line[style*="height"] textarea.tfield {
  height: 100% !important;
  box-sizing: border-box !important;
}

/* ====================================================================
   FIM DA SEÇÃO 9
   
   TESTE:
   - Criar TText com addField(..., ['style' => 'height: 70px'])
   - Textarea deve preencher exatamente 70px
   - Padding não deve somar à altura (border-box)
   - Resize vertical deve funcionar

/* ====================================================================
   SEÇÃO 10: TSEPARATOR + TSEPARATOR-DIVISOR (MAD BUILDER)
   
   ESTRUTURA HTML GERADA PELO MAD BUILDER:
   <div class="fb-inline-field-container">
     <div>
       <h4 class="tseparator">Paciente</h4>
       <hr class="tseparator-divisor">
     </div>
   </div>
   
   ELEMENTOS:
   - .tseparator (h4) → Título/texto do separador
   - .tseparator-divisor (hr) → Linha separadora
   
   CORREÇÕES v2.0.8:
   - Trabalhar com estrutura real do Mad Builder
   - .tseparator sem ::before (linha já existe como <hr>)
   - .tseparator-divisor com gradiente premium
   - Alinhamento padrão à esquerda
   - Variantes: .centered, .with-icon, .simple, .colored
   
   DATA: 2025-10-22
   VERSÃO: 2.0.8
   ==================================================================== */

/* ========== TSEPARATOR - TÍTULO DO SEPARADOR (h4) ========== */

.tseparator {
  /* Reset de estilos do h4 */
  margin: 24px 0 8px 0 !important;
  padding: 6px 20px !important;
  
  /* Tipografia premium */
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  
  /* Visual */
  display: inline-block !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 
              0 0 0 2px #FFC107 !important;
  
  /* Transição */
  transition: all 0.2s ease !important;
  
  /* Alinhamento padrão: esquerda */
  text-align: left !important;
}

/* Hover no título */
.tseparator:hover {
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1), 
              0 0 0 2px #FFB300 !important;
}

/* ========== TSEPARATOR-DIVISOR - LINHA SEPARADORA (hr) ========== */

.tseparator-divisor {
  /* Reset de estilos do hr */
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  border: none !important;
  
  /* Linha com gradiente premium */
  height: 2px !important;
  background: linear-gradient(90deg, 
    #E5E7EB 0%, 
    #FFC107 20%, 
    #E5E7EB 80%, 
    transparent 100%) !important;
  
  /* Visual */
  opacity: 1 !important;
  overflow: visible !important;
}

/* ========== VARIANTE: CENTRALIZADO ========== */

/* Container do separador centralizado */
.fb-inline-field-container:has(.tseparator.centered) {
  text-align: center !important;
}

.tseparator.centered {
  text-align: center !important;
}

/* Linha simétrica para centralizado */
.tseparator.centered + .tseparator-divisor {
  background: linear-gradient(90deg, 
    transparent 0%, 
    #E5E7EB 20%, 
    #FFC107 50%, 
    #E5E7EB 80%, 
    transparent 100%) !important;
}

/* ========== VARIANTE: COM ÍCONE ========== */

.tseparator.with-icon::before {
  content: '◆' !important;
  margin-right: 8px !important;
  color: #FFC107 !important;
  font-size: 10px !important;
  vertical-align: middle !important;
}

.tseparator.with-icon::after {
  content: '◆' !important;
  margin-left: 8px !important;
  color: #FFC107 !important;
  font-size: 10px !important;
  vertical-align: middle !important;
}

/* ========== VARIANTE: SIMPLES (minimalista) ========== */

.tseparator.simple {
  box-shadow: none !important;
  background: transparent !important;
  padding: 4px 16px !important;
  border: none !important;
}

.tseparator.simple + .tseparator-divisor {
  background: #E5E7EB !important;
  height: 1px !important;
}

/* ========== VARIANTE: COLORIDO ========== */

.tseparator.colored {
  background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%) !important;
  color: #1F2937 !important;
  box-shadow: 0 4px 12px rgba(255,193,7,0.25), 
              0 0 0 2px #FF9800 !important;
  font-weight: 700 !important;
}

.tseparator.colored:hover {
  box-shadow: 0 6px 16px rgba(255,193,7,0.35), 
              0 0 0 2px #FF9800 !important;
}

.tseparator.colored + .tseparator-divisor {
  background: linear-gradient(90deg, 
    #FFB300 0%, 
    #FFC107 50%, 
    #FFB300 100%) !important;
  height: 3px !important;
}

/* ========== VARIANTE: DESTAQUE (linha mais grossa) ========== */

.tseparator.emphasis + .tseparator-divisor {
  height: 3px !important;
  background: linear-gradient(90deg, 
    #E5E7EB 0%, 
    #FFC107 15%, 
    #FFB300 50%,
    #FFC107 85%, 
    #E5E7EB 100%) !important;
}

/* ========== VARIANTE: SEM LINHA ========== */

.tseparator.no-line + .tseparator-divisor {
  display: none !important;
}

/* ========== RESPONSIVO ========== */

@media (max-width: 768px) {
  .tseparator {
    margin: 20px 0 6px 0 !important;
    font-size: 13px !important;
    padding: 5px 14px !important;
    letter-spacing: 0.3px !important;
  }
  
  .tseparator-divisor {
    margin: 0 0 16px 0 !important;
    height: 1.5px !important;
  }
  
  .tseparator.with-icon::before,
  .tseparator.with-icon::after {
    font-size: 8px !important;
    margin: 0 6px !important;
  }
}

/* ====================================================================
   FIM DA SEÇÃO 10
   
   ESTRUTURA COMPATÍVEL COM MAD BUILDER
   
   EXEMPLOS DE USO NO MAD BUILDER:
   
   1. SEPARADOR PADRÃO (esquerda):
      - Adicionar separador no formulário
      - Texto: "Dados Pessoais"
      - Resultado: h4.tseparator + hr.tseparator-divisor
   
   2. SEPARADOR CENTRALIZADO:
      - Adicionar classe "centered" ao h4 via CSS customizado
      - Ou usar JavaScript: document.querySelector('.tseparator').classList.add('centered')
   
   3. SEPARADOR COM ÍCONE:
      - Adicionar classe "with-icon" ao h4
   
   4. SEPARADOR COLORIDO:
      - Adicionar classe "colored" ao h4
   
   5. SEPARADOR SEM LINHA:
      - Adicionar classe "no-line" ao h4
   
   RESULTADO:
   ✓ Trabalha com estrutura real do Mad Builder
   ✓ h4.tseparator estilizado (título com box premium)
   ✓ hr.tseparator-divisor estilizado (linha com gradiente)
   ✓ Alinhamento padrão à esquerda
   ✓ Variante .centered para centralizar
   ✓ Sem linha duplicada (usa o <hr> do Mad Builder)
   ✓ Efeitos aplicados (hover, transform, box-shadow)
   ✓ Fontes aplicadas (uppercase, weight 600, letter-spacing)
   ✓ 5 variantes: centered, with-icon, simple, colored, emphasis
   ==================================================================== */

/* ====================================================================
   CSS PARA TELA DE LOGIN - MADBUILDER TEMPLATE
   Extraído do application.css do PROJECT-theme-new
   Data: 2025-10-28
   ==================================================================== */

.container-login
{
    display: flex;
    height: 100%;
    background: var(--login-background-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container-login .panel-login {
    margin: auto;
    width: 95%;
    max-width: var(--login-panel-max-width);
    max-height: var(--login-panel-max-height);
    background: var(--live-background-color);
    height: 75%;
    box-shadow: var(--login-panel-box-shadow);
    display: flex;
    flex-direction: var(--login-panel-detail-direction);
    justify-content: center;
    border-radius: var(--login-panel-border-radius);
    overflow: hidden;
}

.container-login .login-content [page-name="LoginForm"] .card {
    margin-bottom: 0px;
}

.container-login .panel-login>div {
    width: 100%;
    display: flex;
    flex: 1;
    padding: var(--panel-body-padding);
    flex-direction: column;
}

.container-login .panel-login .info-login .login-details * {
    color: var(--login-panel-left-text-footer-color);
    text-align: var(--login-panel-left-text-footer-align);
}

.container-login .panel-login .info-login .login-details h3 {
    font-size: var(--login-panel-left-text-footer-font-size);
    font-weight: var(--login-panel-left-text-footer-font-weight);
} 

.container-login .panel-login .info-login .login-details div {
    font-size: calc( var(--login-panel-left-text-footer-font-size) * .6 );
} 

.container-login .panel-login .info-login {
    display: var(--login-panel-detail-display);
    background-color: var(--login-panel-left-background-color);
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px;
    max-width: 50%;
    position: relative;
}

.container-login .panel-login .info-login .login-logo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.container-login .panel-login .info-login .login-image.force-full {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: var(--login-panel-left-background-color);
}

.container-login .panel-login .info-login .login-image {
    width: 100%;
    height: 50%;
    background-repeat: no-repeat;
    background-size: var(--login-panel-detail-image-size);
    background-position: var(--login-panel-detail-image-position);
    margin: auto;
    display: var(--login-panel-detail-display-image);
}

.container-login .panel-login .info-login .login-subtitle:empty {
    display: none;
}

.container-login .panel-login .info-login .login-subtitle {
    font-weight: var(--login-panel-left-text-header-font-weight);
    color: var(--login-panel-left-text-header-color);
    text-align: var(--login-panel-left-text-header-align);
    font-size: var(--login-panel-left-text-header-font-size);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    width: 100%;
    height: 60px;
}

.container-login .panel-login .login-content {
    background-color: var(--login-panel-right-background-color);
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.container-login .panel-login .login-content h1 {
    color: var(--login-title-color);
    font-size: var(--login-title-font-size);
    font-weight: var(--login-title-font-weight) !important;
    text-align: var(--login-title-align) !important;
}

.container-login #adianti_div_content {
    width: 100%;
}

.container-login #login-wrapper
{
    margin-top: 0px !important;
}

.container-login .login-details {
    display: var(--login-panel-detail-display-details);
    flex-direction: column;
    margin: auto;
    width: 100%;
    justify-content: center;
}

.container-login .login-content [page-name="LoginForm"] .tpassword input {
    border-top-right-radius: unset !important;
    border-bottom-right-radius: unset !important;
}

.container-login .login-content [page-name="LoginForm"] .tfield
{
    border-radius: var(--field-border-radius) !important;
    padding-left: 40px;
    height: var(--field-height) !important;
}

.container-login .login-content [page-name="LoginForm"] .tcombo
{
    padding-left: 40px !important;
    border-bottom-left-radius: var(--field-border-radius) !important;
    border-top-left-radius: var(--field-border-radius) !important;
}

.container-login .login-content [page-name="LoginForm"] .btn:active,
.container-login .login-content [page-name="LoginForm"] .btn:hover {
    color: var(--login-button-text-color) !important;
    opacity: 0.75;
}

.container-login .login-content [page-name="LoginForm"] .btn 
{
    width: 100% !important;
    background: var(--login-button-background);
    border: 1px solid var(--button-border);
}

.container-login .login-content [page-name="LoginForm"] .btn span {
    color: var(--login-button-text-color);
}

.container-login .login-content [page-name="LoginForm"] .card-header {
    background: var(--login-panel-header-background);
}

.container-login .login-content [page-name="LoginForm"] .card {
    border: 1px solid var(--login-border-color)
}

.container-login .login-content [page-name="LoginForm"] .card-header .card-title {
    width: 100%;
    text-align: var(--login-header-align) !important;
    font-size: var(--login-header-font-size) !important;
    color: var(--login-header-color) !important;
}

/* Estilos adicionais para ícones de login (avatar) */
.login-avatar {
    width: 35px;
    height: 35px;
    background: var(--login-button-background);
    border-radius: var(--field-border-radius) 0 0 var(--field-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--login-button-text-color);
}

.login-avatar .fa {
    font-size: 16px;
}

/* Responsividade Mobile para Login */
@media (max-width: 768px) {
    .container-login .panel-login {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0px !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .container-login .panel-login .info-login {
        display: none !important;
    }
    
    .container-login .panel-login .login-content {
        border-radius: unset !important;
    }
}

/* ==================================================================== */

/* Classes adicionais para texto central e links do login */
.show-text-center .login-text-center {
    display: grid;
}

.login-text-center {
    display: none;
    text-align: var(--login-text-center-align);
    font-size: var(--login-text-center-size);
    font-weight: var(--login-text-center-weight);
    color: var(--login-text-center-color);
    width: 100%;
    height: 100%;
    align-items: center;
}

#login-html,
#login-html *,
.login-content>div>a {
    color: var(--login-link-color);
    text-align: center;
}

.login-content>div>a {
    display: inline-block;
    width: 100%;
}
 
#login-html:empty {
    display: none;
}

/* Logo médio para telas de login */
.login-medium-logo {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 80px;
    margin-bottom: 20px;
}



/* ====================================================================
   CORREÇÃO LOGIN AVATAR - V2 (Estrutura Real)
   PROBLEMA: Ícone e input são containers IRMÃOS (siblings), não pai/filho
   SOLUÇÃO: Usar flexbox no container pai (tformrow)
   DATA: 2025-10-28 14:10
   ==================================================================== */

/* Container pai (tformrow) precisa ser flex */
.container-login .fb-field-container.tformrow,
.container-login .form-group.tformrow {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 16px !important;
}

/* Container do ícone - largura fixa, sem margin/padding */
.container-login .fb-field-container .fb-inline-field-container:has(.login-avatar) {
    width: 40px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ícone - visual com gradiente amarelo */
.container-login .login-avatar {
    width: 40px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--login-button-background) !important;
    border-radius: var(--field-border-radius) 0 0 var(--field-border-radius) !important;
    color: var(--login-button-text-color) !important;
    border: 1px solid #D1D5DB !important;
    border-right: none !important;
}

.container-login .login-avatar .fa {
    font-size: 16px !important;
    color: var(--login-button-text-color) !important;
}

/* Container do input - ocupa espaço restante */
.container-login .fb-field-container .form-line {
    flex: 1 !important;
    display: flex !important;
    padding: 0 !important;
}

/* Input - border-radius só à direita */
.container-login .fb-field-container input.tfield,
.container-login .fb-field-container input.form-control {
    flex: 1 !important;
    border-radius: 0 var(--field-border-radius) var(--field-border-radius) 0 !important;
    margin: 0 !important;
    height: 38px !important;
    padding-left: 32px !important;
}

/* TPassword - ajustes específicos para campo de senha */
.container-login .fb-field-container .tpassword {
    flex: 1 !important;
    display: flex !important;
}

.container-login .fb-field-container .tpassword input {
    border-radius: 0 !important;
    flex: 1 !important;
    height: 38px !important;
}

.container-login .fb-field-container .tpassword button {
    border-radius: 0 var(--field-border-radius) var(--field-border-radius) 0 !important;
    height: 38px !important;
}

/* ==================================================================== */

/* ==================================================================== 
   FIX: Input com ícone interno (inner-icon) - sobresposição de texto
   Data: 2025-10-30
   Problema: Ícone do input-inner-icon sobrepõe o texto do campo
   ==================================================================== */

/* Container para inputs com ícone interno */
.inner-icon-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Ícone posicionado dentro do input */
.input-inner-icon {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Ícone à esquerda */
.input-inner-icon.left {
    left: 8px;
    top: 0;
}

/* Ícone à direita */
.input-inner-icon.right {
    right: 8px;
    top: 0;
}

/* Input com ícone à esquerda - padding adequado */
.inner-icon-container .input-inner-icon.left ~ input,
.inner-icon-container .input-inner-icon.left ~ .form-control,
.inner-icon-container input[style*="padding-left"] {
    padding-left: 32px !important;
}

/* Input com ícone à direita - padding adequado */
.inner-icon-container .input-inner-icon.right ~ input,
.inner-icon-container .input-inner-icon.right ~ .form-control {
    padding-right: 32px !important;
}

/* Garantir que o input ocupe todo o espaço disponível */
.inner-icon-container input.form-control,
.inner-icon-container input.tfield {
    width: 100%;
}

/* Inputs readonly/disabled com ícone */
.inner-icon-container input[readonly],
.inner-icon-container input.tfield_disabled {
    background-color: var(--field-bg-disabled, #f5f5f5);
    cursor: not-allowed;
}

/* ==================================================================== */

/* ====================================================================
   FIX: BootstrapFormBuilder min-height - Espaçamento vertical excessivo
   Data: 2025-11-10
   Problema: BootstrapFormBuilder (linha 914) injeta min-height:26px inline
   Sintoma: Label fica muito distante do campo de digitação
   Solução: Sobrescrever com min-height: auto para todos os formulários
   ==================================================================== */

.fb-field-container {
    min-height: auto !important;
}

/* Container de linha do formulário também */
.form-group.tformrow.row {
    min-height: auto !important;
}

/* ==================================================================== */

/* ====================================================================
   FIX: Sobrescrever min-height inline do BootstrapFormBuilder
   Atualização: 2025-11-10 17:10
   Problema: style="min-height:26px" inline não é sobrescrito por !important
   Solução: Usar seletor de atributo [style*="min-height"] com !important
   ==================================================================== */

/* Sobrescrever min-height inline em fb-field-container */
.fb-field-container[style*="min-height"] {
    min-height: 0px !important;
}

/* Sobrescrever em form-group também */
.form-group.tformrow.row[style*="min-height"] {
    min-height: 0px !important;
}

/* Garantir que labels e campos fiquem próximos */
.fb-field-container {
    padding: 0 !important;
}

.fb-inline-field-container {
    margin-bottom: 4px !important;
}

/* Labels com espaçamento reduzido */
.fb-field-container label {
    margin-bottom: 4px !important;
    display: block !important;
}

/* ==================================================================== */

/* ====================================================================
   FIX: Espaçamento vertical ainda mais compacto
#   Atualizaç
o: 2025-11-10 17:17
   Ajuste: Remover margens e paddings extras para layout mais denso
   ==================================================================== */

/* Form-group sem margin-bottom excessivo */
.form-group.tformrow {
    margin-bottom: 8px !important;
}

/* Remover padding do col-sm-12 */
.form-group.tformrow .col-sm-12 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Container inline sem espaçamento vertical */
.fb-inline-field-container {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Label e input próximos - gap mínimo */
.fb-field-container label {
    margin-bottom: 2px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
}

/* Input sem margin extra */
.fb-inline-field-container.form-line {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Select2 sem espaçamento extra */
.fb-inline-field-container .select2-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==================================================================== */