@import url('https://fonts.bunny.net/css?family=bricolage-grotesque:600,700&display=swap');

/* =====================================================================
   Atribuição — camada de interface (QW-FE-02)
   Implementa o handoff de design dentro do Filament v3. Só cosmético:
   nenhuma regra de negócio.

   Divisão de responsabilidade: COR vem das rampas registradas nos painéis
   (`App\Support\AtribPalette`), então aqui não se escreve hex de marca —
   este arquivo cuida de FORMA: raio, borda, sombra, densidade, foco e
   movimento. Hex literal só aparece nas trilhas semânticas de status, que
   são trios fechados (texto/fundo/borda) definidos pelo design.

   A identidade vem da coerência entre tipografia, densidade e hierarquia.
   Sem gradiente decorativo, sem blur, sem sombra em container estático.

   Editou? Suba o `?v=` do render hook no AppServiceProvider para furar o
   cache do browser.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  Tokens                                                             */
/* ------------------------------------------------------------------ */
:root {
    /* Raio — escala curta, cada faixa com um propósito */
    --atrib-radius-xs: 4px;   /* badge, tag, checkbox            */
    --atrib-radius-sm: 6px;   /* botão, input, select            */
    --atrib-radius-md: 8px;   /* section, card, tabela           */
    --atrib-radius-lg: 10px;  /* modal, popover, menu            */

    /* Sombra — dois níveis, exclusivos de overlay */
    --atrib-shadow-menu: 0 4px 12px -2px rgba(20, 24, 29, .14);
    --atrib-shadow-modal: 0 16px 40px -8px rgba(20, 24, 29, .24);

    /* Movimento */
    --atrib-ease: ease-out;
    --atrib-dur: 140ms;
    --atrib-dur-overlay: 180ms;

    /* Status — trios fechados: texto / fundo / borda */
    --atrib-success-text: #14603F;
    --atrib-success-bg: #E8F3EE;
    --atrib-success-border: #B9DCCB;

    --atrib-warning-text: #7A5200;
    --atrib-warning-bg: #FBF1DC;
    --atrib-warning-border: #E4CF9A;

    --atrib-danger-text: #A32118;
    --atrib-danger-bg: #FBEBEA;
    --atrib-danger-border: #EBBFBB;

    --atrib-neutral-text: #4A525C;
    --atrib-neutral-bg: #F1F3F5;
    --atrib-neutral-border: #DDE1E6;

    /* Tipografia de título. Decisão do time (09/09): a display continua nos
       títulos, contrariando o THEME-04 e a escolha do handoff por família
       única. O corpo e os campos seguem em Public Sans, do painel. */
    --atrib-font-display: 'Bricolage Grotesque', 'Public Sans', ui-sans-serif, system-ui, sans-serif;

    /* Estrutura, derivada das rampas do painel */
    --atrib-border: rgb(var(--gray-300));
    --atrib-hairline: rgb(var(--gray-200));
    /* O handoff especifica #C9CFD6 aqui, mas contra branco isso da 1,57:1 e
       a WCAG 1.4.11 pede 3:1 para o limite de um componente de interface — e
       o PRD §9.3 cobra AA para controles. #8892A0 e o tom "subtle" do proprio
       handoff e da 3,15:1. */
    --atrib-control-border: #8892A0;
    --atrib-surface: #fff;
}

html,
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ */
/*  Tipografia — display nos títulos, Public Sans no corpo             */
/*  O corpo vem do painel (`->font('Public Sans')`); a display é a     */
/*  fonte de título que o produto já usava, mantida por decisão do     */
/*  time em 09/09.                                                     */
/* ------------------------------------------------------------------ */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-simple-header-heading,
.fi-logo {
    font-family: var(--atrib-font-display);
}

.fi-header-heading {
    font-weight: 700;
    letter-spacing: -.015em;
}

.fi-section-header-heading,
.fi-modal-heading,
.fi-simple-header-heading {
    font-weight: 600;
    letter-spacing: 0;
}

.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11.5px;
    font-weight: 600;
}

/* Data, carga horária e pontuação alinham em coluna */
.fi-ta-text .fi-ta-text-item,
.fi-ta-cell time,
.fi-wi-stats-overview-stat-value,
.fi-in-text {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/*  Shell — sidebar                                                    */
/* ------------------------------------------------------------------ */
.fi-sidebar,
.fi-sidebar-header {
    background: var(--atrib-surface);
    border-color: var(--atrib-border);
}

/* Container estático não flutua: a separação é a borda. */
.fi-sidebar {
    box-shadow: none;
    border-right: 1px solid var(--atrib-border);
}

.fi-sidebar-item-button {
    border-radius: var(--atrib-radius-sm);
    font-weight: 500;
    transition: background-color var(--atrib-dur) var(--atrib-ease),
                color var(--atrib-dur) var(--atrib-ease);
}

/* Filament nests submenu items inside the parent <li>. Descendant selectors
   would paint every submenu link as active when only the parent route matches. */
.fi-sidebar-item-active>.fi-sidebar-item-button {
    background: rgb(var(--primary-600));
    box-shadow: none;
}

/* O Filament aplica text-primary-600 ao ícone e ao label do item ativo;
   sobre o fundo azul isso vira azul-sobre-azul. */
.fi-sidebar-item-active>.fi-sidebar-item-button,
.fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-label {
    color: #fff !important;
}

/* ------------------------------------------------------------------ */
/*  Shell — topbar e breadcrumbs                                       */
/*  Superfície opaca: sem translucidez, sem blur.                      */
/* ------------------------------------------------------------------ */
.fi-topbar > nav {
    background: var(--atrib-surface);
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--atrib-border);
}

.fi-logo {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ------------------------------------------------------------------ */
/*  Botões                                                             */
/* ------------------------------------------------------------------ */
.fi-btn {
    border-radius: var(--atrib-radius-sm);
    font-weight: 600;
    box-shadow: none;
    transition: background-color var(--atrib-dur) var(--atrib-ease),
                border-color var(--atrib-dur) var(--atrib-ease),
                color var(--atrib-dur) var(--atrib-ease);
}

/* Nada de "afundar" no clique: o feedback é a mudança de cor. */
.fi-btn:active {
    transform: none;
}

/* Altura de controle: 40 px padrão; 36 px fica para barra de filtro e ação
   de linha, que o Filament já marca como `sm`. */
.fi-btn-size-md {
    min-height: 40px;
}

/* Alvo de toque de 44 px no mobile, para qualquer ação. */
@media (max-width: 639px) {
    .fi-btn {
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------ */
/*  Campos                                                             */
/* ------------------------------------------------------------------ */
.fi-input-wrp {
    border-radius: var(--atrib-radius-sm);
    box-shadow: none;
    outline: 1px solid var(--atrib-control-border);
    outline-offset: -1px;
    min-height: 40px;
    transition: outline-color var(--atrib-dur) var(--atrib-ease);
}

/* Barra de filtro e ações de linha ficam mais densas. */
.fi-ta-filters .fi-input-wrp,
.fi-ta-header-toolbar .fi-input-wrp {
    min-height: 36px;
}

.fi-input-wrp:focus-within {
    outline: 2px solid rgb(var(--primary-600));
    outline-offset: -1px;
}

/* O Filament pinta o placeholder com gray-400, que no nosso ramp da 3,15:1
   sobre branco e reprova em AA para texto. O texto de exemplo desce para o
   tom de texto secundario, que passa com 4,95:1. */
.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder {
    color: rgb(var(--gray-500));
    opacity: 1;
}

.fi-fo-field-wrp-label {
    font-weight: 600;
}

/* Obrigatoriedade não pode depender só de um asterisco vermelho: o estado
   vira texto, e deixa de ser informação transmitida apenas por cor. */
.fi-fo-field-wrp-label sup {
    font-size: 0;
    vertical-align: baseline;
}

.fi-fo-field-wrp-label sup::after {
    content: ' (obrigatório)';
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: rgb(var(--gray-500));
}

.fi-checkbox-input,
.fi-radio-input {
    border-radius: var(--atrib-radius-xs);
}

/* ------------------------------------------------------------------ */
/*  Badges — pill só para status curto; raio de tag, não de cápsula    */
/* ------------------------------------------------------------------ */
.fi-badge {
    border-radius: var(--atrib-radius-xs);
    font-weight: 600;
    letter-spacing: 0;
    border: 1px solid transparent;
}

.fi-badge.fi-color-success {
    background: var(--atrib-success-bg);
    border-color: var(--atrib-success-border);
    color: var(--atrib-success-text);
}

.fi-badge.fi-color-warning {
    background: var(--atrib-warning-bg);
    border-color: var(--atrib-warning-border);
    color: var(--atrib-warning-text);
}

.fi-badge.fi-color-danger {
    background: var(--atrib-danger-bg);
    border-color: var(--atrib-danger-border);
    color: var(--atrib-danger-text);
}

.fi-badge.fi-color-gray {
    background: var(--atrib-neutral-bg);
    border-color: var(--atrib-neutral-border);
    color: var(--atrib-neutral-text);
}

/* ------------------------------------------------------------------ */
/*  Sections, cards e tabelas                                          */
/*  Borda agrupa; sombra fica para o que está acima da página.         */
/* ------------------------------------------------------------------ */
.fi-section,
.fi-ta-ctn,
.fi-fo-field-wrp .fi-section {
    background: var(--atrib-surface);
    border-radius: var(--atrib-radius-md);
    border: 1px solid var(--atrib-border);
    box-shadow: none;
}

/* Container estático não reage ao mouse. */
.fi-section {
    transition: none;
}

.fi-section:hover {
    box-shadow: none;
}

/* ------------------------------------------------------------------ */
/*  Widgets de estatística — compactos, sem faixa decorativa           */
/* ------------------------------------------------------------------ */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    background: var(--atrib-surface);
    border-radius: var(--atrib-radius-md);
    border: 1px solid var(--atrib-border);
    box-shadow: none;
    padding: 12px 16px;
    gap: 2px;
}

/* A faixa de gradiente lateral era decoração pura. */
.fi-wi-stats-overview-stat::before {
    content: none;
}

.fi-wi-stats-overview-stat-label {
    font-size: 13px;
    line-height: 19px;
    font-weight: 500;
}

.fi-wi-stats-overview-stat-value {
    font-family: var(--atrib-font-display);
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -.015em;
}

/* Descrição é apoio, não link: neutro, nunca azul de ação. */
.fi-wi-stats-overview-stat-description {
    font-size: 13px;
    line-height: 19px;
    color: rgb(var(--gray-500));
}

.fi-wi-stats-overview-stat-description-icon {
    color: rgb(var(--gray-400));
}

/* ------------------------------------------------------------------ */
/*  Tabela                                                             */
/* ------------------------------------------------------------------ */
.fi-ta-header-cell {
    background: var(--atrib-surface);
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .07em;
    font-weight: 600;
    border-bottom: 1px solid var(--atrib-border);
}

.fi-ta-row {
    transition: background-color var(--atrib-dur) var(--atrib-ease);
}

.fi-ta-row:hover {
    background: rgb(var(--gray-50));
}

.fi-ta-record-content .fi-ta-text-item-description,
.fi-ta-col-wrp .fi-ta-text-item-description {
    font-variant-numeric: tabular-nums;
}

/* Emblema de tenant */
.atrib-emblem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--atrib-radius-sm);
    color: #fff;
    font-family: var(--atrib-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    user-select: none;
}

.fi-pagination .fi-btn {
    border-radius: var(--atrib-radius-sm);
}

/* ------------------------------------------------------------------ */
/*  Estado vazio                                                       */
/* ------------------------------------------------------------------ */
.fi-ta-empty-state-icon-ctn {
    background: rgb(var(--gray-100));
    color: rgb(var(--gray-500));
    border-radius: var(--atrib-radius-md);
}

.fi-ta-empty-state-heading {
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/*  Overlays — o único lugar com sombra                                */
/* ------------------------------------------------------------------ */
.fi-modal-window {
    border-radius: var(--atrib-radius-lg);
    box-shadow: var(--atrib-shadow-modal);
}

.fi-dropdown-panel,
.fi-fo-select-option-list {
    border-radius: var(--atrib-radius-lg);
    box-shadow: var(--atrib-shadow-menu);
}

/* ------------------------------------------------------------------ */
/*  Login (SimplePage) — cartão sóbrio sobre fundo neutro              */
/* ------------------------------------------------------------------ */
.fi-simple-layout {
    background: rgb(var(--gray-50));
}

.fi-simple-main {
    border-radius: var(--atrib-radius-md);
    border: 1px solid var(--atrib-border);
    background: var(--atrib-surface);
    box-shadow: none;
    backdrop-filter: none;
}

/* Uma heading por tela: a marca acompanha, não compete. */
.fi-simple-header-heading {
    font-weight: 600;
}

.fi-simple-layout .fi-logo {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

/* ------------------------------------------------------------------ */
/*  Foco visível — 2 px, sempre, independente de cor de fundo          */
/* ------------------------------------------------------------------ */
.fi-btn:focus-visible,
.fi-sidebar-item-button:focus-visible,
.fi-ta-row a:focus-visible,
.fi-dropdown-list-item:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgb(var(--primary-600));
    outline-offset: 2px;
    border-radius: var(--atrib-radius-xs);
}

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