/*
 * LexEdu — overrides + utilities específicos.
 * Tudo que Tailwind+daisyUI cobrem fica neles. Aqui ficam apenas:
 *   - @font-face para Inter Variable self-hosted
 *   - Estilos de impressão (dossiê, PEI)
 *   - Skip-link de acessibilidade
 *   - Pequenos ajustes finos de hover/focus
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    /* Relativo ao próprio CSS — funciona em qualquer prefixo (dev /lexedu, prod raiz) */
    src: url('../fonts/InterVariable.woff2') format('woff2-variations');
}

/* Estabiliza features tipográficas de Inter para UI (números monoespaçados em tabela, ligaduras off) */
:root {
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Skip link — acessibilidade WCAG */
.lex-skip-link {
    position: absolute;
    left: -9999px;
    top: 1rem;
    background: oklch(var(--p));
    color: oklch(var(--pc));
    padding: .5rem 1rem;
    border-radius: var(--rounded-btn, .5rem);
    z-index: 100;
    text-decoration: none;
}
.lex-skip-link:focus {
    left: 1rem;
}

/* Status bar superior 3px para KPI tile (variações por severidade) */
.lex-kpi {
    position: relative;
    overflow: hidden;
}
.lex-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: oklch(var(--n));
}
.lex-kpi--ok::before   { background: oklch(var(--su)); }
.lex-kpi--warn::before { background: oklch(var(--wa)); }
.lex-kpi--crit::before { background: oklch(var(--er)); }
.lex-kpi--unknown::before { background: oklch(var(--b3)); }

/* Card com borda colorida lateral (usado para destaque de evento crítico) */
.lex-card-accent--danger  { border-left: 4px solid oklch(var(--er)); }
.lex-card-accent--warning { border-left: 4px solid oklch(var(--wa)); }
.lex-card-accent--success { border-left: 4px solid oklch(var(--su)); }
.lex-card-accent--info    { border-left: 4px solid oklch(var(--in)); }

/* Estado "em foco visível" reforçado para acessibilidade WCAG AA */
*:focus-visible {
    outline: 2px solid oklch(var(--p));
    outline-offset: 2px;
    border-radius: 2px;
}

/* Layout shell padrão */
.lex-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
@media (min-width: 1280px) {
    .lex-shell { padding: 2rem 1.5rem; }
}

/* ─── Polyfill badge-soft + btn-soft para daisyUI 4 ────────────────────────
   daisyUI 4.x não suporta variantes "soft" (introduzidas só em v5). Sem isso,
   <span class="badge badge-soft badge-neutral"> caía no comportamento sólido
   (fundo cinza-quase-preto). As regras abaixo dão a aparência soft esperada
   sem trocar de versão de framework. */

.badge.badge-soft {
    background-color: oklch(var(--bc) / .10);
    color: oklch(var(--bc) / .85);
    border-color: transparent;
}
.badge.badge-soft.badge-neutral   { background: oklch(var(--n)  / .14); color: oklch(var(--n)); }
.badge.badge-soft.badge-primary   { background: oklch(var(--p)  / .14); color: oklch(var(--p)); }
.badge.badge-soft.badge-secondary { background: oklch(var(--s)  / .14); color: oklch(var(--s)); }
.badge.badge-soft.badge-accent    { background: oklch(var(--a)  / .14); color: oklch(var(--a)); }
.badge.badge-soft.badge-info      { background: oklch(var(--in) / .14); color: oklch(var(--in)); }
.badge.badge-soft.badge-success   { background: oklch(var(--su) / .14); color: oklch(var(--su)); }
.badge.badge-soft.badge-warning   { background: oklch(var(--wa) / .18); color: oklch(var(--wa)); }
.badge.badge-soft.badge-error     { background: oklch(var(--er) / .14); color: oklch(var(--er)); }

.btn.btn-soft {
    background-color: oklch(var(--bc) / .08);
    color: oklch(var(--bc));
    border-color: transparent;
}
.btn.btn-soft:hover { background-color: oklch(var(--bc) / .15); }
.btn.btn-soft.btn-primary       { background: oklch(var(--p)  / .12); color: oklch(var(--p)); }
.btn.btn-soft.btn-primary:hover { background: oklch(var(--p)  / .20); }
.btn.btn-soft.btn-secondary       { background: oklch(var(--s)  / .12); color: oklch(var(--s)); }
.btn.btn-soft.btn-secondary:hover { background: oklch(var(--s)  / .20); }
.btn.btn-soft.btn-accent       { background: oklch(var(--a)  / .12); color: oklch(var(--a)); }
.btn.btn-soft.btn-accent:hover { background: oklch(var(--a)  / .20); }
.btn.btn-soft.btn-success       { background: oklch(var(--su) / .12); color: oklch(var(--su)); }
.btn.btn-soft.btn-success:hover { background: oklch(var(--su) / .20); }
.btn.btn-soft.btn-warning       { background: oklch(var(--wa) / .16); color: oklch(var(--wa)); }
.btn.btn-soft.btn-warning:hover { background: oklch(var(--wa) / .25); }
.btn.btn-soft.btn-error       { background: oklch(var(--er) / .12); color: oklch(var(--er)); }
.btn.btn-soft.btn-error:hover { background: oklch(var(--er) / .20); }
.btn.btn-soft.btn-info       { background: oklch(var(--in) / .12); color: oklch(var(--in)); }
.btn.btn-soft.btn-info:hover { background: oklch(var(--in) / .20); }

/* alert-soft também é daisyUI 5. Em v4 cai no .alert-X sólido (fundo azul/verde
   forte). Polyfill com fundo claro + texto na cor. */
.alert.alert-soft {
    background-color: oklch(var(--bc) / .08);
    color: oklch(var(--bc));
    border-color: transparent;
}
.alert.alert-soft.alert-info    { background: oklch(var(--in) / .12); color: oklch(var(--in)); border-left: 3px solid oklch(var(--in)); }
.alert.alert-soft.alert-success { background: oklch(var(--su) / .12); color: oklch(var(--su)); border-left: 3px solid oklch(var(--su)); }
.alert.alert-soft.alert-warning { background: oklch(var(--wa) / .14); color: oklch(var(--wa)); border-left: 3px solid oklch(var(--wa)); }
.alert.alert-soft.alert-error   { background: oklch(var(--er) / .12); color: oklch(var(--er)); border-left: 3px solid oklch(var(--er)); }
/* h3 e mensagens herdam a cor do alert */
.alert.alert-soft h3 { color: inherit; }
.alert.alert-soft .text-sm { color: oklch(var(--bc) / .80); }

/* alert-outline também não existe no v4 */
.alert.alert-outline {
    background-color: transparent;
    color: oklch(var(--bc));
    border: 1px solid oklch(var(--bc) / .25);
}
.alert.alert-outline.alert-info    { color: oklch(var(--in)); border-color: oklch(var(--in)); }
.alert.alert-outline.alert-success { color: oklch(var(--su)); border-color: oklch(var(--su)); }
.alert.alert-outline.alert-warning { color: oklch(var(--wa)); border-color: oklch(var(--wa)); }
.alert.alert-outline.alert-error   { color: oklch(var(--er)); border-color: oklch(var(--er)); }

/* File input: botão "Escolher arquivo" do daisyUI 4 vem com fundo escuro (neutral
   solid). Suaviza para o mesmo padrão soft das ações secundárias. */
.file-input::file-selector-button,
.file-input::-webkit-file-upload-button {
    background: oklch(var(--bc) / .08);
    color: oklch(var(--bc) / .85);
    border: none;
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
    transition: background-color .15s ease;
}
.file-input::file-selector-button:hover,
.file-input::-webkit-file-upload-button:hover {
    background: oklch(var(--bc) / .15);
}

/* Garante texto branco em superfícies coloridas sólidas — daisyUI v4 às vezes
   ignora os tokens *-content quando deriva contraste por luminância. Mantém
   outline/soft/ghost/link com seu comportamento original. */
.btn-primary:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-link),
.btn-secondary:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-link),
.btn-accent:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-link),
.btn-neutral:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-link),
.btn-success:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-link),
.btn-warning:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-link),
.btn-error:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-link),
.btn-info:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-link) {
    color: #FFFFFF;
}

.badge-primary:not(.badge-outline):not(.badge-soft),
.badge-secondary:not(.badge-outline):not(.badge-soft),
.badge-accent:not(.badge-outline):not(.badge-soft),
.badge-neutral:not(.badge-outline):not(.badge-soft),
.badge-success:not(.badge-outline):not(.badge-soft),
.badge-warning:not(.badge-outline):not(.badge-soft),
.badge-error:not(.badge-outline):not(.badge-soft),
.badge-info:not(.badge-outline):not(.badge-soft) {
    color: #FFFFFF;
}

/* Labels mais suaves (Daniel: evitar preto puro). Mantém legibilidade WCAG AA.
   Aplicado a `.label-text` em qualquer contexto (alguns lugares usam direto
   no <label>, outros como <span> dentro de <label class="label">). */
.label-text {
    color: oklch(var(--bc) / .72);
    font-weight: 500;
}
.label-text-alt {
    color: oklch(var(--bc) / .55);
}

/* Selects: <select> é elemento replaced, então o texto interno não responde a
   flex/align-items do daisyUI. Em alguns navegadores fica off-center na vertical
   (Daniel reportou texto "um pouco bottom"). line-height igual ao font-size +
   padding simétrico centraliza de forma confiável cross-browser. */
.select {
    line-height: 1.25;
    padding-top: 0;
    padding-bottom: 0;
}
/* Mesma garantia para inputs de texto/email/número/etc. — uniformidade visual. */
.input {
    line-height: 1.5;
}

/* Inputs de data: garantir alvo de toque + impedir zoom do iOS no focus.
   iOS Safari aplica zoom automático quando font-size < 16px no <input>.
   IMPORTANTE: NÃO usar `-webkit-appearance: none` aqui — em mobile (iOS/Chrome
   DevTools mobile) isso esconde o picker indicator e quebra o calendário. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-height: 2.75rem;
    font-size: 16px;
}
@media (min-width: 640px) {
    /* Em desktop, restaura o tamanho daisyUI sem força bruta. */
    input[type="date"].input-sm,
    input[type="time"].input-sm,
    input[type="datetime-local"].input-sm {
        min-height: 2rem;
        font-size: 0.875rem;
    }
}
/* Picker indicator (calendário) sempre visível e clicável em todo input de data. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    margin-left: auto;
    color: oklch(var(--bc) / .6);
}

/* Pills de seleção rápida (radio visualmente oculto, label vira "card-toque").
   Usadas no registro rápido de atendimento e na resposta de orientação.
   Independente da JIT do Tailwind Play CDN — vital pro feedback visual no mobile. */
.lex-pill {
    display: block;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* Esconde o radio visualmente mantendo-o funcional para click/teclado/AT.
   Mesmo padrão de Tailwind .sr-only — sem pointer-events:none, que em alguns
   navegadores impedia o estado :checked de propagar para o .lex-pill-face. */
.lex-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.lex-pill .lex-pill-face {
    border: 2px solid oklch(var(--b3));
    background: oklch(var(--b1));
    border-radius: var(--rounded-btn, 0.5rem);
    padding: 0.75rem 0.5rem;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: oklch(var(--bc) / .8);
}
.lex-pill .lex-pill-face .lex-pill-icon {
    display: flex;
    justify-content: center;
    margin-bottom: .25rem;
    color: oklch(var(--bc) / .4);
    transition: color .15s ease;
}
.lex-pill:active .lex-pill-face { transform: scale(.97); }

/* Estado checked — JS coloca/remove .is-checked no <label.lex-pill> em "change".
   Cores hex literal (não var(--su)/var(--p) etc) para garantir resolução em
   qualquer contexto, mesmo que o tema daisyUI esteja temporariamente em outro
   estado. Sincronizado com o tema lexedu (config inline em layout.php). */
.lex-pill.is-checked .lex-pill-face,
.lex-pill[data-color="primary"].is-checked .lex-pill-face            { border-color: #3949AB; background: rgba(57, 73, 171, 0.10); color: #111827; }
.lex-pill[data-color="primary"].is-checked .lex-pill-face .lex-pill-icon { color: #3949AB; }

.lex-pill[data-color="success"].is-checked .lex-pill-face            { border-color: #15803D; background: rgba(21, 128, 61, 0.10); color: #111827; }
.lex-pill[data-color="success"].is-checked .lex-pill-face .lex-pill-icon { color: #15803D; }

.lex-pill[data-color="warning"].is-checked .lex-pill-face            { border-color: #B45309; background: rgba(180, 83, 9, 0.12); color: #111827; }
.lex-pill[data-color="warning"].is-checked .lex-pill-face .lex-pill-icon { color: #B45309; }

.lex-pill[data-color="error"].is-checked .lex-pill-face              { border-color: #B91C1C; background: rgba(185, 28, 28, 0.10); color: #111827; }
.lex-pill[data-color="error"].is-checked .lex-pill-face .lex-pill-icon { color: #B91C1C; }

.lex-pill[data-color="info"].is-checked .lex-pill-face               { border-color: #1E40AF; background: rgba(30, 64, 175, 0.10); color: #111827; }
.lex-pill[data-color="info"].is-checked .lex-pill-face .lex-pill-icon { color: #1E40AF; }

.lex-pill[data-color="neutral"].is-checked .lex-pill-face            { border-color: #374151; background: rgba(55, 65, 81, 0.12); color: #111827; }
.lex-pill[data-color="neutral"].is-checked .lex-pill-face .lex-pill-icon { color: #374151; }

/* Foco visível por teclado (mantém, é independente do checked) */
.lex-pill input:focus-visible + .lex-pill-face {
    outline: 2px solid oklch(var(--p));
    outline-offset: 2px;
}

/* Source Serif 4 — carregada apenas para impressão (cai no fallback em tela).
   Google Fonts é o caminho mais barato; ~50KB em uma chamada CSS que browser só
   busca quando o user manda imprimir. */
@media print {
    @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');
    body {
        font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
        background: white;
        color: #000;
    }
    .lex-skip-link, .navbar, .lex-no-print, [data-lex-confirm] button { display: none !important; }
    a { color: inherit; text-decoration: none; }
    .card, .card-border { border: 1px solid #ccc !important; box-shadow: none !important; }
    h1, h2, h3, h4 { page-break-after: avoid; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
    @page {
        size: A4;
        margin: 1.8cm 1.6cm;
    }
}