/* ========================================================================== */
/* TEMA MATRIX TERMINAL - TEXTO PADRONIZADO EM 14PX E LEITURA SUAVE           */
/* ========================================================================== */

/* Zerando pesos e definindo o padrão de leitura confortável */
* {
    font-weight: 400 !important; /* Remove totalmente qualquer efeito neon ou negrito */
    text-shadow: none !important; /* Garante que nenhuma sombra crie efeito borrado */
    box-sizing: border-box;
}

body { 
    font-family: 'Consolas', 'Courier New', Monaco, monospace; 
    background: #05070a; 
    color: #a3b8cc; 
    margin: 0; 
    font-size: 14px; 
}

.wrap { padding: 20px; max-width: 1600px; margin: 0 auto; }

/* CARDS SUPERIORES */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.stat-card { background: #0a0e14; padding: 15px; border-radius: 4px; border: 1px solid #1a2333; border-left: 4px solid #4f6b8c; }
.stat-card span { font-size: 14px; color: #708ea6; text-transform: uppercase; }
.stat-card h2 { margin: 5px 0 0; font-size: 14px; color: #2ecc71; } /* Verde suavizado e sem brilho */

/* BARRA DE FILTROS */
.filter-bar { background: #0a0e14; padding: 15px; border-radius: 4px; margin-bottom: 20px; border: 1px solid #1a2333; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.f-group { display: flex; flex-direction: column; gap: 4px; }
.f-group label { font-size: 14px; color: #708ea6; text-transform: uppercase; }

/* INPUTS E SELECTS TERMINAL */
input, select, textarea { 
    background: #05070a; border: 1px solid #1a2333; color: #2ecc71; padding: 8px; 
    border-radius: 4px; font-size: 14px; font-family: inherit; width: 100%; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #2ecc71; background: #0d1520; }

/* BOTÕES */
.btn { padding: 0 15px; border: 0px solid transparent; border-radius: 0px; cursor: pointer; font-size: 14px; text-transform: uppercase; height: 36px; color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; transition: 0.2s; }
.btn-blue { background: #000000; color: #38bdf8; border-color: #1a2333; } .btn-blue:hover { border-color: #38bdf8; background: rgba(56, 189, 248, 0.1); }
.btn-green { background: #0d1520; color: #2ecc71; border-color: #1a2333; } .btn-green:hover { border-color: #2ecc71; background: rgba(46, 204, 113, 0.1); }
.btn-export { background: #0d1520; color: #ffb833; border-color: #1a2333; } .btn-export:hover { border-color: #ffb833; background: rgba(255, 184, 51, 0.1); }
.btn-cal { background: #0d1520; color: #c084fc; border-color: #1a2333; } .btn-cal:hover { border-color: #c084fc; background: rgba(192, 132, 252, 0.1); }

.btn-float { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #1a2333; color: #2ecc71; border: 1px solid #2ecc71; border-radius: 50%; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1000; transition: 0.2s; }
.btn-float:hover { background: rgba(46,204,113,0.1); transform: scale(1.05); }

/* TABELA DE DADOS */
.table-wrap { background: #0a0e14; border-radius: 4px; overflow-x: auto; border: 1px solid #1a2333; }
table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
th { background: #0d1520; color: #4f6b8c; padding: 10px 12px; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; border-bottom: 1px solid #1a2333; }
td { padding: 8px 12px; border-bottom: 1px dashed #1a2333; transition: 0.1s; color: #a3b8cc; font-size: 14px; }

tbody tr:hover { background-color: #0d1520; }

/* CLASSES DE DESTAQUE SOFISTICADAS */
.hl-os { color: #2ecc71 !important; font-size: 14px; } 
.hl-titulo { color: #ffffff !important; font-size: 14px; }
.hl-valor { color: #ffb833 !important; font-size: 14px; }

/* MODAIS */
.modal { display: none; position: fixed; z-index: 1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); overflow-y:auto; backdrop-filter: blur(2px); }
.modal-content { background:#0a0e14; margin:4% auto; padding:20px; border-radius:4px; border: 1px solid #2ecc71; width:900px; max-width:95%; }
.modal-content h3 { margin-top:0; margin-bottom: 20px; font-size: 14px; color: #2ecc71; border-bottom: 1px dashed #1a2333; padding-bottom: 10px; text-transform: uppercase; }

/* SISTEMA SIMÉTRICO DE 12 COLUNAS */
.grid-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }
.grid-form .f-group label { font-size: 14px; margin-bottom: 4px; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-12 { grid-column: span 12; }
.btn-group { grid-column: span 12; display: flex; gap: 10px; margin-top: 10px; }
.btn-group .btn { flex: 1; height: 40px; }

/* PAGINAÇÃO */
.paginacao { margin-top: 20px; display: flex; gap: 5px; flex-wrap: wrap; }
.paginacao a { padding: 6px 10px; background: #0a0e14; border: 1px solid #1a2333; color: #708ea6; text-decoration: none; border-radius: 4px; font-size: 14px; }
.paginacao a:hover { border-color: #2ecc71; color: #2ecc71; }
.paginacao a.ativo { background: #0d1520; color: #2ecc71; border-color: #2ecc71; }

/* CALENDÁRIO */
.cal-table th { background: #0d1520; color: #708ea6; text-align: center; padding: 5px; border: none; font-size: 14px; }
.cal-table td { text-align: center; font-size: 14px; border: 1px solid #1a2333; color: #a3b8cc; }

.alert-msg { background: rgba(46, 204, 113, 0.05); border: 1px dashed #2ecc71; color: #2ecc71; padding: 12px; border-radius: 4px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }

/* ========================================================================== */
/* ADAPTAÇÃO MOBILE AVANÇADA (RESPONSIVIDADE SEGURA)                         */
/* ========================================================================== */

@media (max-width: 768px) {
    /* Estrutura do Topo e Operador */
    .nav-container { flex-direction: column; align-items: flex-start !important; width: 100%; gap: 10px; }
    .header-layout { flex-direction: column; align-items: stretch !important; gap: 15px; }
    .operador-box { flex-direction: column; align-items: flex-start !important; gap: 8px; width: 100%; border-top: 1px dashed #1a2333; padding-top: 10px; }
    
    /* Configuração do Bloco de Logo e Menu Hambúrguer à Direita */
    .logo-nav-box { width: 100%; display: flex; align-items: center; justify-content: space-between; }
    .hamburger-menu { display: block; background: #0a0e14; border: 1px solid #1a2333; color: #2ecc71; padding: 8px 15px; cursor: pointer; font-family: inherit; font-size: 14px; border-radius: 4px; margin-left: auto; }
    
    /* Menu Desdobrável */
    .menu-horizontal { display: none; flex-direction: column; width: 100%; gap: 5px; padding-top: 10px; }
    .menu-horizontal.ativo { display: flex; }
    .dropdown-pai { width: 100%; }
    .dropdown-pai > .btn { width: 100%; justify-content: flex-start !important; text-align: left !important; box-sizing: border-box; padding: 10px 12px !important; height: auto !important; }
    .dropdown-pai > .btn .fa-angle-down { margin-left: auto !important; }
    .dropdown-filho { position: relative; width: 100%; left: 0; top: 0; border: none; border-left: 2px solid #1a2333; margin-left: 10px; background: #05070a; }
    .dropdown-neto { position: relative; width: 100%; left: 0; top: 0; border: none; border-left: 2px solid #1a2333; margin-left: 10px; background: #0a0e14; }
    .open-mobile { display: block !important; }
    
    /* Pomodoro Adaptado */
    .pomodoro-bar { justify-content: center; gap: 10px; }
    .pomodoro-btn { padding: 8px 10px; font-size: 14px; }

    /* Correções Estruturais do Painel no Mobile */
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Evita amassar os cards em telas médias */
    .filter-bar { flex-direction: column; align-items: stretch; gap: 12px; }
    .f-group { width: 100%; }
    
    /* Faz os formulários de colunas complexas colapsarem para ocupar a tela toda */
    .grid-form { grid-template-columns: 1fr; gap: 12px; }
    .span-3, .span-4, .span-12 { grid-column: span 1 / auto; }
    .btn-group { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
    /* Em telas muito finas, os cards ficam um embaixo do outro de forma confortável */
    .card-grid { 
        grid-template-columns: 1fr !important; 
    }
    .wrap { padding: 12px !important; } /* Margem sutil para telas pequenas */
}

/* Espaçamento automático para afastar os ícones do texto */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
    margin-right: 10px !important; /* Cria um espaço confortável à direita do ícone */
}

/* Caso o ícone esteja depois do texto, garante o espaço à esquerda */
.fa-angle-down, .fa-angle-right {
    margin-left: 10px !important;
    margin-right: 0 !important;
}