/* =============================================================================
   Workee Staff — tokens, temas e primitivas.

   A identidade e a mesma do Panel: --wk-primary e o mesmo --workee-primary
   declarado em public/workee_pro/css/workee-back-office.css, e a escala de
   cinzas e as semanticas vem de forecast.css. Nao inventar cor aqui: se faltar
   um tom, derivar destes. Panel e Staff pararem de parecer dois produtos
   diferentes e o ponto do arquivo.

   Este arquivo tambem reimplementa o subconjunto de classes do Bootstrap que as
   telas usam (row/col/btn/form-control/utilitarios). E de proposito: e o que
   permite tirar a CDN sem reescrever todas as views no mesmo commit.
   ========================================================================== */

/* Inter variavel: um arquivo, a faixa inteira de peso. O `font-weight: 400 700`
   e o que autoriza o browser a interpolar — sem essa faixa ele trata o arquivo
   como peso unico e simula o negrito, que sai borrado.

   ATENCAO ao mexer em qualquer url() deste arquivo: o SHELL do public/sw-staff.js
   guarda "/fonts/inter/inter-variable-latin.woff2" com esta URL EXATA, e cache.match
   casa query inclusa. Acrescentar um "?v=" aqui dentro, ou trocar o caminho, faz o
   pedido nao casar mais com o que o shell guardou — a fonte deixa de existir offline,
   e nada acusa: online continua tudo certo.

   E um ponto cego conhecido dos testes. O StaffServiceWorkerTest confere os url() do
   HTML (<link> e <script>) contra o SHELL, mas NAO le url() de dentro de CSS. Mudou
   uma destas linhas: mude o SHELL junto, na mao. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter/inter-variable-latin.woff2') format('woff2');
}

:root {
    --wk-primary:        #0063C8;
    --wk-primary-hover:  #0052A6;
    --wk-primary-solid:  #0063C8;
    --wk-primary-soft:   #EAF2FD;

    --wk-bg:             #F6F8FB;
    --wk-surface:        #FFFFFF;
    --wk-surface-2:      #F1F5FA;
    --wk-border:         #E6EAF2;

    --wk-text:           #101828;
    --wk-text-2:         #475467;
    /* Um passo mais escuro que o --fc-texto-3 do Panel: o tom de la so alcanca AA
       sobre card branco. Sobre --wk-bg ele da 4.34:1 e sobre --wk-surface-2 4.22:1,
       e esses dois sao justamente os fundos mais comuns do Staff. Este passa nos
       tres. */
    --wk-text-3:         #5F6A78;
    /* --wk-on-primary so vale sobre PREENCHIMENTO solido, e a lista e FECHADA, com
       tres entradas: --wk-primary-solid (5.80:1), --wk-primary-solid-hover (7.62:1) e
       --wk-positive-solid (5.85:1). Os tres sao INVARIANTES de tema, e e essa
       invariancia que faz a razao citada valer: numero de token que muda com o tema
       so vale em um dos dois. Hoje o unico uso e o fundo e o hover do .btn-primary — o
       .badge, que era o outro, saiu com o redesenho do Holidays (Task 15).
       NAO usar sobre --wk-primary (#4D9BEA no escuro) nem --wk-primary-hover (#6BAEF0):
       branco em cima deles da 2.92:1 e 2.35:1, abaixo ate do piso de 3:1 para
       nao-texto. Os dois sao cor de tinta e de borda, nunca fundo sob texto branco.
       Antes de acrescentar uma quarta entrada, medir a razao com o valor de CADA tema
       e so entrar se o token for invariante — foi por pular esse passo que dois pares
       reprovados chegaram a estar autorizados aqui. */
    --wk-on-primary:     #FFFFFF;

    --wk-positive:       #12A05F;
    --wk-warning:        #D98A04;
    --wk-negative:       #D92D20;
    --wk-positive-soft:  #ECFDF3;
    --wk-warning-soft:   #FFFAEB;
    --wk-negative-soft:  #FEF3F2;

    /* Os semanticos acima sao de PREENCHIMENTO (fundo de pilula, barra, borda).
       Como TEXTO no tema claro nenhum deles passa AA: --wk-positive da 3.38:1 e
       --wk-warning da 2.77:1 sobre branco. Quem escreve texto usa os tokens -text
       abaixo — o Panel faz o mesmo com --fc-aviso-texto. No tema escuro os dois
       papeis coincidem, entao la os -text repetem os de preenchimento. */
    --wk-positive-text:  #087443;
    --wk-warning-text:   #93370D;
    --wk-negative-text:  #B42318;

    /* Fundo solido sob texto branco, INVARIANTE de tema — o par de --wk-on-primary,
       espelhando --wk-primary-solid. Existe porque --wk-positive-text vira #3FB950 no
       escuro, e branco em cima daquilo da 2.54:1. Todo token citado como "seguro sob
       branco" tem de ser invariante, senao o numero so vale em um dos temas.
       Sem consumidor desde a Task 15 (o unico era o .badge.green do Holidays). Fica
       declarado porque a regra de invariancia acima e o que autoriza o PROXIMO
       preenchimento verde — redescobri-la custa a medicao nos dois temas de novo. */
    --wk-positive-solid: #087443;

    /* Hover do PREENCHIMENTO, tambem invariante. Papel de fundo e papel de tinta nunca
       compartilham token: --wk-primary-hover e hover de TINTA e no escuro vira #6BAEF0,
       certo para texto sobre fundo grafite (7.04:1) e errado como fundo sob branco
       (2.35:1). Este aqui e mais escuro que --wk-primary-solid nos dois temas, entao o
       hover le como pressao, e nao como brilho. */
    --wk-primary-solid-hover: #0052A6;

    /* A faixa do cabecalho. Existe como token porque o valor precisa ser lido em tres
       lugares — a regra do .wsa_header, o <meta name="theme-color"> e o theme.js — e um
       hex repetido em tres lugares sai de sincronia no primeiro ajuste de marca.
       Aqui o par varia junto: no claro e branco sobre o azul de identidade (5.80:1), no
       escuro e o texto normal sobre o fundo da pagina (15.36:1). Por variarem JUNTOS os
       dois numeros valem; e tambem por isso a tinta daqui nao e --wk-on-primary, cuja
       lista fechada exige fundo invariante de tema. */
    --wk-header-bg:  #0063C8;
    --wk-header-ink: #FFFFFF;

    --wk-shadow:         0 1px 2px rgba(16, 24, 40, .06);
    --wk-shadow-lg:      0 8px 24px rgba(16, 24, 40, .12);

    /* A separacao da barra fixa. Instrumento diferente por tema porque a MEDICAO manda:
       no escuro esta mesma sombra sobre #12161C da 1.00:1 — literalmente invisivel —,
       entao la o token vira uma LINHA (#3E4A5C, 2.02:1 contra a pagina, contra os 1.44:1
       do --wk-border sozinho). Nao escurecer --wk-border: ele e a borda de todo card e
       todo input do app.

       No claro o ganho e PERCEPTUAL, e nao de razao — e a medicao de que isto e assim:
       o pico da sombra da 1.28:1, mas esse pico cai embaixo da borda opaca da barra; a
       faixa borrada que sobra visivel acima dela carrega alpha ~.045-.09, ou seja
       1.09-1.20:1, em volta dos mesmos 1.13:1 que ela deveria reforcar. O que ela entrega
       e leitura de elevacao, nao aresta mensuravel. Se um dia nao bastar, o caminho e um
       token de fundo proprio para a barra — nao mexer no --wk-border.

       Isto NAO e requisito de 1.4.11: a barra e identificada pelos quatro itens rotulados
       e pelo aria-current, nao pela aresta. E legibilidade — a lista rolando por baixo
       precisa parar de visualmente encostar na barra. Para referencia, o fio da tab bar
       do iOS mede 1.93:1. */
    --wk-shadow-nav:     0 -1px 3px rgba(16, 24, 40, .12);

    --wk-radius:         10px;
    --wk-radius-sm:      6px;
    --wk-radius-pill:    999px;

    --wk-space-1: 4px;
    --wk-space-2: 8px;
    --wk-space-3: 12px;
    --wk-space-4: 16px;
    --wk-space-5: 24px;
    --wk-space-6: 32px;

    --wk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* Altura da bottom nav + safe area do iPhone. O conteudo reserva isso embaixo. */
    --wk-nav-h: 64px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --wk-primary:       #4D9BEA;
        --wk-primary-hover: #6BAEF0;
        --wk-primary-solid: #0063C8;
        --wk-primary-soft:  rgba(0, 99, 200, .18);

        --wk-bg:            #12161C;
        --wk-surface:       #1A1F27;
        --wk-surface-2:     #222A37;
        --wk-border:        #2A3441;

        --wk-text:          #E6EDF3;
        --wk-text-2:        #A9B4C0;
        --wk-text-3:        #8B96A5;

        --wk-positive:      #3FB950;
        --wk-warning:       #E3A008;
        --wk-negative:      #FF6B6B;
        --wk-positive-soft: rgba(63, 185, 80, .14);
        --wk-warning-soft:  rgba(227, 160, 8, .14);
        --wk-negative-soft: rgba(255, 107, 107, .14);

        /* No escuro os semanticos ja passam AA como texto, entao os -text repetem. */
        --wk-positive-text: #3FB950;
        --wk-warning-text:  #E3A008;
        --wk-negative-text: #FF6B6B;

        /* Repetidos com o MESMO valor do :root de proposito: e o que os torna invariantes. */
        --wk-positive-solid: #087443;
        --wk-primary-solid-hover: #0052A6;

        /* Aqui o par NAO repete o :root: no escuro a faixa se dissolve no fundo da pagina
           (o mesmo valor de --wk-bg) e a tinta e a do texto normal (--wk-text). */
        --wk-header-bg:  #12161C;
        --wk-header-ink: #E6EDF3;

        --wk-shadow:        0 1px 2px rgba(0, 0, 0, .4);
        --wk-shadow-lg:     0 8px 24px rgba(0, 0, 0, .5);

        /* Aqui NAO e sombra, e a medicao e o motivo: a sombra do :root sobre #12161C da
           1.00:1, ou seja, nao aparece. Uma linha mais clara que o --wk-border separa de
           verdade — 2.02:1 contra a pagina, contra 1.44:1 do --wk-border sozinho. */
        --wk-shadow-nav:    0 -1px 0 #3E4A5C;
    }
}

/* O toggle manual vence a preferencia do sistema nos dois sentidos: o bloco
   acima se exclui sozinho quando o usuario forcou claro, e este aqui liga o
   escuro quando o sistema esta claro. --wk-on-primary nao aparece aqui de
   proposito: e invariante de tema. A restricao de uso dele esta no :root. */
:root[data-theme="dark"] {
    --wk-primary:       #4D9BEA;
    --wk-primary-hover: #6BAEF0;
    --wk-primary-solid: #0063C8;
    --wk-primary-soft:  rgba(0, 99, 200, .18);

    --wk-bg:            #12161C;
    --wk-surface:       #1A1F27;
    --wk-surface-2:     #222A37;
    --wk-border:        #2A3441;

    --wk-text:          #E6EDF3;
    --wk-text-2:        #A9B4C0;
    --wk-text-3:        #8B96A5;

    --wk-positive:      #3FB950;
    --wk-warning:       #E3A008;
    --wk-negative:      #FF6B6B;
    --wk-positive-soft: rgba(63, 185, 80, .14);
    --wk-warning-soft:  rgba(227, 160, 8, .14);
    --wk-negative-soft: rgba(255, 107, 107, .14);

    /* No escuro os semanticos ja passam AA como texto, entao os -text repetem. */
    --wk-positive-text: #3FB950;
    --wk-warning-text:  #E3A008;
    --wk-negative-text: #FF6B6B;

    /* Repetidos com o MESMO valor do :root de proposito: e o que os torna invariantes. */
    --wk-positive-solid: #087443;
    --wk-primary-solid-hover: #0052A6;

    /* Aqui o par NAO repete o :root: no escuro a faixa se dissolve no fundo da pagina
       (o mesmo valor de --wk-bg) e a tinta e a do texto normal (--wk-text). */
    --wk-header-bg:  #12161C;
    --wk-header-ink: #E6EDF3;

    --wk-shadow:        0 1px 2px rgba(0, 0, 0, .4);
    --wk-shadow-lg:     0 8px 24px rgba(0, 0, 0, .5);

    /* Aqui NAO e sombra, e a medicao e o motivo: a sombra do :root sobre #12161C da
       1.00:1, ou seja, nao aparece. Uma linha mais clara que o --wk-border separa de
       verdade — 2.02:1 contra a pagina, contra 1.44:1 do --wk-border sozinho. */
    --wk-shadow-nav:    0 -1px 0 #3E4A5C;
}

/* ----------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--wk-font);
    font-size: 16px;
    line-height: 1.5;
    background-color: var(--wk-bg);
    color: var(--wk-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* O vertical-align vem do reboot do Bootstrap. Sem ele a imagem volta a assentar na
   baseline e sobra o vao do descendente embaixo — visivel no logo do cabecalho e no
   das telas de auth. A conferencia que liberou a saida da CDN olhou as 32 CLASSES do
   markup; as regras de ELEMENTO do reboot, como esta e a de p abaixo, nao entravam
   naquela lista. */
img { max-width: 100%; vertical-align: middle; }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }

/* Idem: o default do browser e `margin: 1em 0`, o reboot zera o topo. As telas de
   auth foram desenhadas com o reboot ligado — sem esta regra o subtitulo de
   login/wellcome desce 16px. */
p { margin-top: 0; margin-bottom: 1rem; }

a { color: var(--wk-primary); text-decoration: none; }

/* ------------------------------------------------------------------ foco */

/* Nenhum elemento interativo do Staff tinha foco visivel. Teclado e leitor de
   tela navegavam as cegas. */
:focus-visible {
    outline: 2px solid var(--wk-primary);
    outline-offset: 2px;
    border-radius: var(--wk-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------- botoes */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wk-space-2);
    min-height: 44px;
    padding: 0 var(--wk-space-4);
    border: 1px solid transparent;
    border-radius: var(--wk-radius-sm);
    background: transparent;
    color: var(--wk-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
    background-color: var(--wk-primary-solid);
    color: var(--wk-on-primary);
}
.btn-primary:hover:not(:disabled) { background-color: var(--wk-primary-solid-hover); }

.btn-outline-secondary {
    border-color: var(--wk-border);
    color: var(--wk-text-2);
}
.btn-outline-secondary:hover:not(:disabled) { background-color: var(--wk-surface-2); }

.btn-link {
    min-height: 44px;
    padding: 0 var(--wk-space-2);
    color: var(--wk-primary);
}

.btn-lg { min-height: 48px; font-size: 1.0625rem; }
.btn-sm { min-height: 44px; font-size: .875rem; }

/* --------------------------------------------------------------- forms */

label { display: block; margin-bottom: var(--wk-space-2); color: var(--wk-text-2); font-size: .875rem; }

.form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: var(--wk-space-3);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-sm);
    background-color: var(--wk-surface);
    color: var(--wk-text);
    font-family: inherit;
    font-size: 1rem;
}
.form-control::placeholder { color: var(--wk-text-3); }
.form-control:focus { border-color: var(--wk-primary); }
.form-control.is-invalid { border-color: var(--wk-negative); }

.form-group { margin-bottom: var(--wk-space-5); }

.form-check-input {
    width: 22px;
    height: 22px;
    accent-color: var(--wk-primary-solid);
}

/* ------------------------------------------------------- grid minimo */

.row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
/* [class*=] e nao [class^=]: com ^= um `class="text-end col-4"` perde a gutter
   enquanto o margin negativo do .row fica — o conteudo vaza 8px em vez de quebrar
   de um jeito visivel. */
.row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }

.justify-content-center { justify-content: center; }
.align-items-center     { align-items: center; }

/* --------------------------------------------------------- utilitarios */

.mt-1 { margin-top: var(--wk-space-1); }
.mt-2 { margin-top: var(--wk-space-2); }
.mt-3 { margin-top: var(--wk-space-3); }
.mt-4 { margin-top: var(--wk-space-4); }
.mt-5 { margin-top: var(--wk-space-6); }
.mb-1 { margin-bottom: var(--wk-space-1); }

.w-100      { width: 100%; }
.text-end   { text-align: right; }
.text-center{ text-align: center; }
.text-danger{ color: var(--wk-negative); }
.d-grid     { display: grid; }
.gap-2      { gap: var(--wk-space-2); }

.escondida { display: none !important; }

/* Aqui morava o .badge, a pilula de preenchimento solido com texto branco. Ele tinha dois
   donos: os dois badges do topo do Finance, que sairam na Task 14 (viraram .wsa_totais,
   com Approved e Pending separados), e os dois do topo do Holidays, que sairam na Task 15
   (viraram o cartao de saldo, com horas, dias e extrato). Sem dono, a regra foi junto —
   estilo morto num arquivo compartilhado e convite para o proximo reusar a classe e herdar
   o texto branco sobre um fundo que ninguem mediu. Quem precisar de pilula tem a
   .wsa_pilula do app.css, que nasce NEUTRA e so recebe cor por modificador explicito. */

.text-primary { color: var(--wk-primary); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- loading */

/* O overlay antigo tinha min-height:1000px, padding-top:40% e spinner com
   margin-top:222px — em telefone pequeno o spinner caia fora da tela.

   Aquelas medidas estavam INLINE no atributo style de
   resources/views/layouts/workee_staff.blade.php, e style inline vence regra de folha
   sem !important — enquanto elas existiram, esta regra nao teve efeito nenhum. O
   atributo foi apagado na Task 5; se ele voltar, esta regra volta a ser decorativa. */
.workee-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wk-space-2);
    /* O fallback vem antes de proposito: color-mix so existe no Safari 16.2+ /
       Chrome 111+, e telefone de chao de loja costuma ser velho. Sem a primeira
       linha, browser antigo descarta a declaracao inteira e o overlay fica
       transparente — os spinners flutuando sobre a tela que deviam cobrir. */
    background-color: var(--wk-bg);
    background-color: color-mix(in srgb, var(--wk-bg) 82%, transparent);
}

.spinner-grow {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    background-color: var(--wk-primary);
    animation: wk-pulse 1.2s ease-in-out infinite;
}
.spinner-grow:nth-child(2) { animation-delay: .15s; }
.spinner-grow:nth-child(3) { animation-delay: .30s; }

@keyframes wk-pulse {
    0%, 80%, 100% { transform: scale(.4); opacity: .5; }
    40%           { transform: scale(1);  opacity: 1; }
}