/*
 * Ajustes próprios do AGSystem por cima do AdminLTE 4 / Bootstrap 5
 * vendorizados (Prompt 01). Este arquivo NUNCA duplica regra do
 * AdminLTE/Bootstrap — só corrige/completa o que falta:
 *   1) tela de login centralizada e utilizável no celular;
 *   2) alinhamento/toque da sidebar;
 *   3) estados de foco visíveis no tema dark;
 *   4) impedir rolagem horizontal da página inteira.
 */

/* `overflow-x: hidden` em html+body (como estava antes) quebra o
   `position: sticky` da sidebar (.app-sidebar, ver AdminLTE
   .layout-fixed): pela regra de "overflow computado" do CSS, definir
   overflow-x diferente de "visible" força o overflow-y (que não foi
   tocado) a virar "auto" também — e isso faz tanto <html> quanto <body>
   virarem contêineres de rolagem próprios, o que impede o sticky de
   travar no topo (ele passa a rolar junto com a página, como se fosse
   position:relative). Bug real, reproduzido e confirmado com Playwright
   real (o topo da sidebar acompanhava 1:1 o scroll da página em vez de
   ficar fixo) — corrigido usando `overflow-x: clip` só em <html>, que
   não entra nessa regra de pareamento e não cria um novo contêiner de
   rolagem, mas ainda impede rolagem horizontal da página inteira
   (testado com elemento propositalmente largo: sem barra horizontal). */
html {
    overflow-x: clip;
}

/* -------------------------------------------------------------------- */
/* 0) Cor de destaque configurável (Prompt 01/14).                      */
/*                                                                       */
/* Cada layout injeta --bs-primary / --bs-primary-rgb em :root a partir */
/* de app_settings.cor_destaque. Isso já retinta sozinho os utilitários */
/* .text-primary/.bg-primary (usam var(--bs-primary-rgb) no Bootstrap   */
/* 5.3), mas NÃO os componentes .btn-primary/.btn-outline-primary/      */
/* form-check — o Bootstrap compilado grava esses como hex literal em   */
/* variáveis próprias (--bs-btn-bg etc.), sem referenciar --bs-primary. */
/* Corrigido aqui redirecionando essas variáveis específicas para a cor */
/* configurada, sem duplicar/reescrever o restante do componente.       */
/* -------------------------------------------------------------------- */

:root {
    --agsystem-primary-hover: color-mix(in srgb, var(--bs-primary) 85%, black);
    --agsystem-primary-active: color-mix(in srgb, var(--bs-primary) 75%, black);
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--agsystem-primary-hover);
    --bs-btn-hover-border-color: var(--agsystem-primary-hover);
    --bs-btn-active-bg: var(--agsystem-primary-active);
    --bs-btn-active-border-color: var(--agsystem-primary-active);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* -------------------------------------------------------------------- */
/* 1) Login — cartão centralizado horizontal/verticalmente, altura      */
/*    dinâmica da janela (funciona com teclado virtual no celular).     */
/* -------------------------------------------------------------------- */

.agsystem-login-body {
    margin: 0;
    background: var(--bs-body-bg);
}

.agsystem-login-wrap {
    min-height: 100vh;
    min-height: 100dvh; /* navegadores modernos: desconta a barra de endereço/teclado */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; /* nunca esconder campos/botão atrás do teclado — rola em vez de cortar */
}

.agsystem-login-card {
    width: 100%;
    max-width: 26rem;
}

.agsystem-login-logo {
    max-height: 4.5rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.agsystem-login-logo-placeholder {
    font-size: 2.75rem;
    line-height: 1;
    color: var(--bs-primary);
}

/* -------------------------------------------------------------------- */
/* 2) Sidebar — ícones alinhados, textos legíveis, sem cortar rótulo ao */
/*    recolher/expandir, toque confortável no celular.                  */
/* -------------------------------------------------------------------- */

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-sidebar .nav-icon {
    flex: 0 0 1.25rem;
    text-align: center;
}

.app-sidebar .nav-header {
    letter-spacing: .04em;
}

@media (max-width: 991.98px) {
    .app-sidebar .nav-link,
    .app-header .nav-link,
    .btn {
        min-height: 2.75rem; /* alvo de toque confortável — nada de botão minúsculo */
    }
}

/* -------------------------------------------------------------------- */
/* 3) Foco visível em qualquer campo/botão, mesmo no tema dark.         */
/* -------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* 4) Layout simplificado (perfil Caixas) — ocupa a tela toda, sem      */
/*    depender do CSS de grid do AdminLTE (que pressupõe sidebar).      */
/* -------------------------------------------------------------------- */

.agsystem-simples-main {
    min-height: 100vh;
    min-height: 100dvh;
}

/* -------------------------------------------------------------------- */
/* 5) Escala mensal (Prompt 04) — grade com um dia por coluna, dentro de */
/*    .table-responsive (a página nunca rola na horizontal, só a tabela,*/
/*    Prompt 00). Primeira coluna fixa para o nome do agregado não sumir*/
/*    ao rolar os dias.                                                 */
/* -------------------------------------------------------------------- */

.agsystem-escala-tabela {
    font-size: .8125rem;
}

.agsystem-escala-col-nome {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--bs-body-bg);
    min-width: 9rem;
    white-space: nowrap;
}

.agsystem-escala-col-dia {
    min-width: 2.75rem;
}

.agsystem-escala-dia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: .125rem .25rem;
    border-radius: .375rem;
    border: 1px solid var(--bs-border-color);
    background-color: transparent;
    color: inherit;
    font-size: .75rem;
    line-height: 1;
}

button.agsystem-escala-dia-btn {
    cursor: pointer;
}

button.agsystem-escala-dia-btn:hover {
    filter: brightness(1.15);
}

.agsystem-escala-dia-vazio {
    color: var(--bs-secondary-color);
    border-style: dashed;
}

.agsystem-escala-dia-igual {
    background-color: var(--bs-secondary-bg-subtle, rgba(108, 117, 125, .2));
}

.agsystem-escala-dia-acima {
    background-color: var(--bs-success-bg-subtle, rgba(25, 135, 84, .2));
    color: var(--bs-success-text-emphasis, #198754);
    border-color: var(--bs-success-border-subtle, #198754);
}

.agsystem-escala-dia-abaixo {
    background-color: var(--bs-danger-bg-subtle, rgba(220, 53, 69, .2));
    color: var(--bs-danger-text-emphasis, #dc3545);
    border-color: var(--bs-danger-border-subtle, #dc3545);
}

/* Dia esperado pela escala de referência do agregado (dias_trabalho_semana),
   ainda SEM lançamento — mais claro que ".agsystem-escala-dia-acima" de
   propósito, para nunca ser confundido com um dia já lançado acima da
   referência (que mostra o valor; este continua mostrando "+"). */
.agsystem-escala-dia-esperado {
    background-color: var(--bs-success-bg-subtle, rgba(25, 135, 84, .12));
    border-color: var(--bs-success-border-subtle, #198754);
    border-style: solid;
}

.agsystem-escala-legenda-esperado {
    background-color: var(--bs-success-bg-subtle, rgba(25, 135, 84, .12));
    color: var(--bs-success-text-emphasis, #198754);
}

/*
 * Portal do Agregado — modo "bem simples" (Prompt 14): a tela é usada no
 * celular por pessoas de idade, então tudo aqui fica maior que o padrão
 * do Bootstrap — texto, botões, campos, área de toque. Escopado em
 * body.agsystem-portal-grande (login e layouts/portal.php) para nunca
 * vazar para o sistema interno (admin), que continua no tamanho normal.
 */
body.agsystem-portal-grande {
    font-size: 1.15rem;
}

body.agsystem-portal-grande h1,
body.agsystem-portal-grande h2,
body.agsystem-portal-grande .h5 {
    font-size: 1.4rem;
}

body.agsystem-portal-grande .form-label {
    font-size: 1.1rem;
    font-weight: 600;
}

body.agsystem-portal-grande .form-control,
body.agsystem-portal-grande .form-select {
    font-size: 1.2rem;
    min-height: 3.25rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

body.agsystem-portal-grande .form-text {
    font-size: 1rem;
}

body.agsystem-portal-grande .alert {
    font-size: 1.08rem;
}

body.agsystem-portal-grande .btn {
    font-size: 1.15rem;
    min-height: 3.25rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

body.agsystem-portal-grande .btn-sm {
    font-size: 1rem;
    min-height: 2.75rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
}

body.agsystem-portal-grande .btn-lg {
    font-size: 1.3rem;
    min-height: 3.75rem;
}

/* Resumo grande do recibo (o número que mais importa: quanto vai
   receber), sempre visível sem precisar abrir "detalhes". */
.agsystem-portal-resumo {
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.agsystem-portal-resumo-label {
    font-size: 1.1rem;
    color: var(--bs-secondary-color, #6c757d);
}

.agsystem-portal-resumo-valor {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bs-success-text-emphasis, #0f5132);
}

.agsystem-portal-resumo-sub {
    font-size: 1.1rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Período atual em destaque, com o form de trocar mês/quinzena escondido
   atrás de "Outro período" (colapsado por padrão) — a maioria só quer
   ver o período atual, sem escolher nada. */
.agsystem-portal-periodo-atual {
    font-size: 1.2rem;
    font-weight: 600;
}