/*
 * Tema visual do MasterRHponto — variaveis + componentes mapeados a partir
 * dos prints do RHiD (ver docs/Layout/plano-repaginacao-visual.md).
 * Carregado uma vez em layouts/header.php, depois do Bootstrap, pra poder
 * sobrescrever variaveis do Bootstrap (--bs-primary etc) e afetar todo o
 * sistema (botoes, links, badges) sem repetir estilo em cada tela.
 */

:root {
    --cor-sidebar-bg: #232c3f;
    --cor-sidebar-texto: #a8b0c3;
    --cor-sidebar-texto-ativo: #ffffff;
    --cor-fundo-app: #f4f5fa;
    --cor-primaria: #7b6fd9;
    --cor-primaria-clara: #a79ee8;
    --cor-primaria-escura: #4b3f9e;
    --cor-destaque: #ef5477;
    --cor-texto: #333c4d;
    --cor-texto-suave: #7d8494;
    --cor-card-bg: #ffffff;
    --cor-card-sombra: 0 1px 4px rgba(20, 20, 40, .08);
    --cor-borda: #e6e8f0;
}

body {
    background: var(--cor-fundo-app);
    color: var(--cor-texto);
}

/* Sobrescreve as variaveis do Bootstrap 5 — todo botn-primary, link,
   foco de input etc do sistema inteiro passa a usar o roxo do RHiD sem
   precisar recriar cada componente. */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--cor-primaria);
    --bs-primary-rgb: 123, 111, 217;
    --bs-link-color: var(--cor-primaria);
    --bs-link-color-rgb: 123, 111, 217;
    --bs-link-hover-color: var(--cor-primaria-escura);
}

.btn-primary {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--cor-primaria-escura) !important;
    border-color: var(--cor-primaria-escura) !important;
}

.btn-outline-primary {
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.btn-outline-primary:hover {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 .2rem rgba(123, 111, 217, .2);
}

/* Tira o iconezinho de reloginho nativo do <input type="time"> em todo o
   sistema (Chrome/Edge/Opera desenham esse icone por padrao dentro do
   campo) — fica so o campo de digitar o horario, sem ocupar espaco extra
   com a figurinha. */
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
    opacity: 0;
    width: 0;
}

input[type="time"] {
    padding: .25rem .5rem;
    width: 4.5rem;
    min-width: 4.5rem;
    flex: 0 0 auto;
    text-align: center;
    text-align-last: center;
}

/* Tabela de Apuracao de Ponto (e as 4 telas de relatorio que reusam a
   mesma partial): "table-sm" do Bootstrap so encolhe o padding, a
   fonte continua no tamanho base (16px) — cada celula/input/linha
   fica bem maior que o real (RHiD/Control iD), que usa fonte pequena
   e linhas compactas. Mesma filosofia ja usada em ".tabela-grade"
   (Config. de Horario, mesma queixa de "virou um quadro enorme com
   espaco vazio" resolvida la antes). */
.tabela-apuracao {
    font-size: .8rem;
}

/* Padding em px (nao rem) de proposito — .3rem e sempre relativo a raiz
   (16px) e mal encolhia a altura da linha mesmo com a fonte da tabela
   menor; em px, acompanha de verdade o corte de fonte acima. */
.tabela-apuracao th,
.tabela-apuracao td {
    padding: 3px 6px;
    text-align: center;
    vertical-align: middle;
}

.tabela-apuracao input[type="time"] {
    width: 3.6rem;
    min-width: 3.6rem;
    height: 22px;
    min-height: 0;
    font-size: .75rem;
    padding: 1px 4px;
    line-height: 1.3;
}

/* Igual ao RHiD real: o campo so parece uma "caixa de input" quando o
   usuario passa o mouse ou foca — o resto do tempo e so o valor (ou
   nada, pra celula vazia) sem borda/fundo, sem parecer um formulario
   cheio de quadradinhos. Celula vazia tambem some com o "--:--" nativo
   do <input type="time"> (nao da pra tirar via atributo, so escondendo
   a cor do texto) ate o usuario clicar/focar pra digitar. */
.tabela-apuracao input.campo-marcacao {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.tabela-apuracao input.campo-marcacao.campo-marcacao-vazio {
    color: transparent;
}

.tabela-apuracao input.campo-marcacao:hover,
.tabela-apuracao input.campo-marcacao:focus {
    border-color: var(--bs-border-color, #dee2e6);
    background-color: var(--bs-body-bg, #fff);
    box-shadow: none;
    color: var(--bs-body-color, #212529) !important;
}

/* Igual ao RHiD real: marcacao de origem MANUAL confirmada (gravada via
   Salvar) fica azul — trilha de auditoria exigida pela Portaria 1510/671
   (distinguir batida original do REP de inclusao/edicao administrativa).
   Reeditar uma celula digitada agora, ainda sem salvar, fica vermelha —
   declarada DEPOIS no arquivo de proposito: mesma especificidade das 2
   classes, entao "pendente" vence quando as duas coexistem (reeditar uma
   marcacao ja azul volta a ficar vermelha ate salvar de novo). */
.tabela-apuracao input.campo-marcacao.campo-marcacao-manual {
    color: #0d6efd;
}

.tabela-apuracao input.campo-marcacao.campo-marcacao-pendente {
    color: #dc3545;
}

.tabela-apuracao td.marcacao-manual {
    color: #0d6efd;
}

/* Botao "Alteracoes de Ponto" (dropdown) embutido no canto da propria
   celula preenchida, por cima do input — igual ao RHiD real: nao e um
   elemento a parte ocupando espaco do lado, so aparece no hover/foco
   da celula (mouse ou teclado), o resto do tempo fica invisivel. */
.tabela-apuracao .celula-marcacao-preenchida {
    position: relative;
    display: block;
    text-align: center;
}

.tabela-apuracao .celula-marcacao-preenchida input[type="time"] {
    padding-right: 1px;
}

.tabela-apuracao .celula-marcacao-preenchida .botao-alterar-ponto {
    position: absolute;
    top: -3px;
    right: -3px;
    opacity: 0;
    transition: opacity .12s ease;
}

.tabela-apuracao .celula-marcacao-preenchida:hover .botao-alterar-ponto,
.tabela-apuracao .celula-marcacao-preenchida:focus-within .botao-alterar-ponto,
.tabela-apuracao .celula-marcacao-preenchida .botao-alterar-ponto:focus-within {
    opacity: 1;
}

.tabela-apuracao .celula-marcacao-preenchida .botao-alterar-ponto .btn {
    font-size: .55rem;
    line-height: 1;
    padding: 0 2px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 3px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #6c757d);
}

.tabela-apuracao .badge {
    font-size: .7rem;
}

.badge.bg-primary {
    background-color: var(--cor-primaria) !important;
}

/* Cards: sombra leve + cantos arredondados consistentes com o RHiD. */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: var(--cor-card-sombra);
}

/* ===================== Sidebar ===================== */

.sidebar-rhid {
    width: 220px;
    height: 100vh;
    background: var(--cor-sidebar-bg);
    color: var(--cor-sidebar-texto);
    position: fixed;
    left: 0;
    top: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1030;
}

.sidebar-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 20px;
}

.sidebar-logo .destaque {
    color: var(--cor-primaria-clara);
}

.sidebar-item {
    padding: 9px 10px;
    display: block;
    border-radius: 6px;
    color: var(--cor-sidebar-texto);
    text-decoration: none;
    font-size: 13.5px;
    transition: background-color .15s, color .15s;
}

.sidebar-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .05);
}

.sidebar-item::before {
    content: '•';
    margin-right: 6px;
    opacity: .6;
}

.sidebar-grupo-toggle {
    color: var(--cor-sidebar-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    transition: background-color .15s, color .15s;
}

.sidebar-grupo-toggle i.bi-chevron-down {
    font-size: .7rem;
    transition: transform .2s;
}

.sidebar-grupo-toggle.collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}

/* Grupo aberto/ativo fica branco + destaque, igual ao RHiD — o resto some
   pra cinza-azulado apagado. aria-expanded=true so acontece quando o
   collapse esta mesmo aberto (classe .collapsed controla o fechado). */
.sidebar-grupo-toggle[aria-expanded="true"] {
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
}

.sidebar-grupo-lista {
    list-style: none;
    padding: 0;
    margin: 2px 0 4px 4px;
}

/* ===================== Topo (barra branca) ===================== */

.topbar-rhid {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    padding: 14px 28px;
    margin: -20px -20px 20px -20px;
    border-bottom: 1px solid var(--cor-borda);
}

.topbar-rhid .topbar-icone {
    font-size: 1.3rem;
    color: var(--cor-texto-suave);
}

.topbar-rhid .topbar-icone.destaque {
    color: var(--cor-primaria);
}

.topbar-rhid .topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #d7dae2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
}

.topbar-icone-btn {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.calculadora-painel {
    width: 260px;
}

.calc-abas {
    display: flex;
    background: var(--cor-fundo-app);
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
}

.calc-aba {
    flex: 1;
    border: none;
    background: none;
    padding: 5px 0;
    border-radius: 999px;
    font-size: .8rem;
    color: var(--cor-texto-suave);
}

.calc-aba.ativa {
    background: var(--cor-primaria);
    color: #ffffff;
    font-weight: 600;
}

.calc-normal-visor {
    background: var(--cor-fundo-app);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: right;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 10px;
    word-break: break-all;
}

.calc-normal-grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.calc-tecla {
    border: 1px solid var(--cor-borda);
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 0;
    font-size: .95rem;
    color: var(--cor-texto);
}

.calc-tecla:hover {
    background: var(--cor-fundo-app);
}

.calc-tecla-op {
    color: var(--cor-primaria);
    font-weight: 600;
}

.calc-tecla-zero {
    grid-column: span 2;
}

.calc-tecla-igual {
    background: var(--cor-primaria);
    color: #ffffff;
    border-color: var(--cor-primaria);
}

.calc-tecla-igual:hover {
    background: var(--cor-primaria-escura);
}

.usuario-dropdown {
    width: 260px;
    overflow: hidden;
}

.usuario-dropdown-cabecalho {
    background: var(--cor-primaria);
    color: #ffffff;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.usuario-dropdown-cabecalho i {
    font-size: 2.6rem;
}

.usuario-dropdown-cabecalho div {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25;
}

.usuario-dropdown-cabecalho div small {
    display: block;
    font-weight: 400;
    font-size: .78rem;
    opacity: .85;
}

.usuario-dropdown-corpo {
    padding: 14px 18px 18px;
}

.usuario-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cor-texto-suave);
    text-decoration: none;
    font-size: .9rem;
    padding: 6px 0;
}

.usuario-dropdown-item:hover {
    color: var(--cor-primaria);
}

/* ===================== Conteudo principal ===================== */

.conteudo-rhid {
    margin-left: 220px;
    padding: 20px;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.conteudo-rhid > .conteudo-rhid-corpo {
    flex: 1;
}

/* ===================== Dashboard: Painel rapido ===================== */

.painel-rapido-badge {
    display: inline-block;
    background: var(--cor-destaque);
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
}

.atalho-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px 10px;
    text-decoration: none;
    color: var(--cor-texto);
    font-size: .9rem;
    font-weight: 500;
}

.atalho-card i {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.atalho-icone-teal { color: #2bb3a3; }
.atalho-icone-laranja { color: #f0a03c; }
.atalho-icone-azul { color: #4d8fe0; }
.atalho-icone-verde { color: #4caf6e; }

/* ===================== Ultimas marcacoes ===================== */

.marcacao-chip {
    display: inline-block;
    background: var(--cor-primaria);
    color: #ffffff;
    font-weight: 700;
    font-size: .78rem;
    padding: 4px 10px;
    border-radius: 999px;
}

.marcacao-nome {
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-top: 4px;
}

/* ===================== Estatisticas: pilulas de periodo ===================== */

.periodo-pilula {
    border: none;
    background: transparent;
    color: var(--cor-texto-suave);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: .85rem;
    text-decoration: none;
    display: inline-block;
}

.periodo-pilula.ativo {
    background: var(--cor-primaria);
    color: #ffffff;
    font-weight: 600;
}

/* ===================== Rodape ===================== */

.rodape-rhid {
    color: var(--cor-texto-suave);
    font-size: .78rem;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--cor-borda);
}

.rodape-rhid a {
    color: var(--cor-primaria);
    text-decoration: none;
}

.rodape-rhid a:hover {
    text-decoration: underline;
}

/* ===================== Grade de horario (Editar Horario) ===================== */
/* Tabela semanal/ciclica do cadastro de horario — reduzida ~30% (fonte,
   espacamento, largura dos campos), auto-largura em vez de esticar 100%
   do card, porque virava um quadro enorme com muito espaco vazio. */

.tabela-grade {
    width: auto !important;
    font-size: .8rem;
}

.tabela-grade th,
.tabela-grade td {
    padding: .3rem .4rem;
}

.tabela-grade input[type="time"] {
    width: 3.4rem;
    min-width: 3.4rem;
    font-size: .75rem;
    padding: .15rem .25rem;
}

.tabela-grade .form-check-input,
.tabela-grade input[type="checkbox"] {
    width: .85rem;
    height: .85rem;
}

.tabela-grade .btn-sm {
    font-size: .75rem;
    padding: 0;
}

/* Periodo 3/4 (Entrada/Saida) comecam escondidos — revelados pelo botao
   "+ Mais um periodo" (ver script em horarios/form.php), ou automaticamente
   se o horario editado ja tiver dado salvo nesses campos. */
.tabela-grade .coluna-periodo-3,
.tabela-grade .coluna-periodo-4 {
    display: none;
}

.tabela-grade.mostrar-periodo-3 .coluna-periodo-3,
.tabela-grade.mostrar-periodo-4 .coluna-periodo-3,
.tabela-grade.mostrar-periodo-4 .coluna-periodo-4 {
    display: table-cell;
}

/* Dropdown "Colunas" da Apuracao de Ponto: grupos em acordeao (Bootstrap
   data-bs-parent ja garante so 1 aberto por vez, igual ao acordeao da
   sidebar) — aqui so o "+"/"-" que troca com o estado, igual ao RHiD real. */
.colunas-grupo-toggle {
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
}

.colunas-grupo-toggle .bi-dash {
    display: none;
}

.colunas-grupo-toggle:not(.collapsed) .bi-plus {
    display: none;
}

.colunas-grupo-toggle:not(.collapsed) .bi-dash {
    display: inline;
}

/* Painel do dropdown "Colunas": 2 colunas (lista de grupos + cartoes de
   "visual salvo"), igual ao print real. */
.colunas-dropdown-menu {
    min-width: 560px;
    max-width: 92vw;
}

.colunas-dropdown-corpo {
    display: flex;
    align-items: stretch;
}

.colunas-coluna-lista {
    flex: 1 1 56%;
    min-width: 0;
    max-height: 360px;
    overflow-y: auto;
    padding: 14px;
    border-right: 1px solid var(--bs-border-color, #e5e5f0);
}

.colunas-coluna-visuais {
    flex: 1 1 44%;
    min-width: 0;
    padding: 14px;
}

.colunas-dropdown-titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-primary);
    margin-bottom: 8px;
}

.colunas-grupo-toggle {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

#colunas-acordeao > a.colunas-grupo-toggle:last-of-type {
    border-bottom: none;
}

.colunas-visuais-acoes {
    display: flex;
    gap: 10px;
}

.colunas-visual-card {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px dashed var(--bs-primary);
    border-radius: 8px;
    background: transparent;
    color: var(--bs-primary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    cursor: pointer;
}

.colunas-visual-card i {
    font-size: 22px;
}

.colunas-visual-card:hover {
    background: rgba(123, 111, 217, .08);
}

/* Setas "<"/">" de periodo anterior/proximo (Apuracao de Ponto): eram texto
   minusculo dentro de um btn-link, quase invisivel — agora um botao com
   borda e glifo maior, mais facil de ver e clicar. */
.periodo-seta {
    font-size: 16px;
    line-height: 1;
}