/*
  Design system da Civitra.

  Princípio: o que o brand book define é lei e se usa exatamente como está; este arquivo só
  acrescenta o que a marca não define (rampa neutra, semânticas, espaçamento, tipografia de
  interface) e nunca redefine o que ela define.

  Fonte: Brand/CIVITRA_BrandBook_Oficial.pdf e Brand/LEIA-ME.txt.
*/

/* ---------------------------------------------------------------- tipografia ---- */
/*
  Inter, SIL OFL, auto-hospedada. Não vai a CDN nenhum: é o navegador do cliente que carregaria,
  e não há motivo para mandar essa requisição para fora.
*/
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700.woff2') format('woff2');
}

:root {
    /* ------------------------------------------------------------ marca ---- */
    /* Valores oficiais. Não derivar, não ajustar, não substituir. */
    --civitra-orange: #E9570A;
    --civitra-graphite: #2E3336;
    --civitra-white: #FFFFFF;
    --civitra-support-grey: #F3F4F5;

    /*
      Derivado de interface, não da marca. O laranja oficial sobre branco dá 3,6:1: passa para
      componente e texto grande, reprova para texto normal (4,5:1). Este tom escurecido dá 5,4:1
      e é o único laranja permitido em texto pequeno. O logo nunca usa outro laranja que não o
      oficial.
    */
    --civitra-orange-ink: #B84406;
    --civitra-orange-hover: #CF4D08;
    --civitra-orange-wash: #FDF0E8;

    /* ------------------------------------------------- rampa neutra ---- */
    /* Derivada do matiz do grafite (~202°, pouca saturação), para não brigar com o laranja. */
    --civitra-neutral-50: #F8F9FA;
    --civitra-neutral-100: #F3F4F5; /* é o cinza de apoio oficial */
    --civitra-neutral-200: #E6E8EA;
    --civitra-neutral-300: #D3D7DA;
    --civitra-neutral-400: #A9AFB4;
    --civitra-neutral-500: #7C848A;
    --civitra-neutral-600: #5C656B;
    --civitra-neutral-700: #454D52;
    --civitra-neutral-800: #353C40;
    --civitra-neutral-900: #2E3336; /* é o grafite oficial */
    --civitra-neutral-950: #1E2225;

    /* ----------------------------------------------------- semânticas ---- */
    /*
      O erro puxa para carmim, não para escarlate: escarlate ao lado do laranja da marca vira
      "quase laranja" e o usuário perde o sinal de que ali é ação e aqui é problema.
    */
    --civitra-success: #147A52;
    --civitra-success-wash: #E8F4EF;
    --civitra-warning: #8F6000;
    --civitra-warning-wash: #FBF3E2;
    --civitra-danger: #C2183C;
    --civitra-danger-wash: #FCEBEE;
    --civitra-info: #1F5F9E;
    --civitra-info-wash: #EAF1F8;

    /* --------------------------------------------------------- papéis ---- */
    --civitra-surface: var(--civitra-white);
    --civitra-surface-sunken: var(--civitra-neutral-100);
    --civitra-surface-raised: var(--civitra-white);
    --civitra-border: var(--civitra-neutral-200);
    --civitra-border-strong: var(--civitra-neutral-300);
    --civitra-text: var(--civitra-neutral-900);
    --civitra-text-muted: var(--civitra-neutral-600);
    --civitra-text-faint: #6B7378;
    --civitra-text-on-dark: var(--civitra-white);

    /* ------------------------------------------------------ espaçamento ---- */
    --civitra-space-1: 4px;
    --civitra-space-2: 8px;
    --civitra-space-3: 12px;
    --civitra-space-4: 16px;
    --civitra-space-5: 24px;
    --civitra-space-6: 32px;
    --civitra-space-7: 48px;

    --civitra-radius-sm: 4px;
    --civitra-radius: 6px;
    --civitra-radius-lg: 10px;

    /* Sombra discreta: o produto é ferramenta de trabalho, não vitrine. */
    --civitra-shadow-sm: 0 1px 2px rgba(46, 51, 54, .06);
    --civitra-shadow: 0 1px 3px rgba(46, 51, 54, .10), 0 1px 2px rgba(46, 51, 54, .06);
    --civitra-shadow-lg: 0 8px 24px rgba(46, 51, 54, .12);

    --civitra-focus-ring: 0 0 0 3px rgba(233, 87, 10, .35);

    /* ------------------------------------------------------- tipografia ---- */
    --civitra-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --civitra-text-xs: 12px;
    --civitra-text-sm: 13px;
    --civitra-text-base: 14px;
    --civitra-text-lg: 16px;
    --civitra-text-xl: 20px;
    --civitra-text-2xl: 26px;
}

html, body {
    margin: 0;
    font-family: var(--civitra-font);
    font-size: var(--civitra-text-base);
    color: var(--civitra-text);
    background: var(--civitra-surface-sunken);
    -webkit-font-smoothing: antialiased;
}

/*
  Numeral tabular em tudo que é número com consequência. O produto é planilha de centenas de
  itens com coluna de dinheiro: algarismo de largura variável desalinha a coluna e obriga a ler
  linha por linha em vez de varrer.
*/
.civitra-num,
.mud-table-cell.civitra-num,
td.civitra-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    text-align: right;
    white-space: nowrap;
}

/* Foco sempre visível: a tela é operada no teclado em revisão de exceções. */
.mud-button-root:focus-visible,
.mud-input-slot:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--civitra-focus-ring);
    border-radius: var(--civitra-radius-sm);
}

/* ------------------------------------------------------------ chrome ---- */
/*
  Barra superior e barra lateral em grafite, nas duas áreas.

  Até a Fatia 13 a área do cliente era clara e a da Civitra escura, para ninguém confundir de que
  lado está (ADR-0038). O fundador optou pelo chrome único (ADR-0040): o produto é uma ferramenta
  de trabalho e a navegação escura tira peso visual da tela, que é onde estão os números.

  O que ficou no lugar daquela distinção: o rótulo BACK OFFICE na barra superior da área da
  Civitra, e a faixa laranja de impersonação quando a Civitra está dentro da conta de um cliente.
*/
.mud-drawer {
    background-color: var(--civitra-neutral-900) !important;
    color: var(--civitra-text-on-dark);
    border-right: 1px solid var(--civitra-neutral-950);
}

.mud-drawer .mud-nav-link {
    color: var(--civitra-neutral-300);
}

.mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: rgba(255, 255, 255, .06);
    color: var(--civitra-white);
}

.mud-drawer .mud-nav-link.active {
    color: var(--civitra-white);
    background-color: rgba(255, 255, 255, .08);
}

/* O laranja da marca marca o item ativo sem precisar de fundo forte. */
.mud-drawer .mud-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--civitra-orange);
}

.mud-drawer .mud-nav-link {
    position: relative;
}

.mud-drawer .mud-nav-link .mud-icon-root {
    color: var(--civitra-neutral-400);
}

.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--civitra-orange);
}

/* Item sem tela ainda: presente, legível como indisponível, e sem convidar ao clique. */
.mud-drawer .mud-nav-link-disabled,
.mud-drawer .mud-nav-link-disabled .mud-icon-root {
    color: var(--civitra-neutral-600) !important;
}

.mud-drawer .mud-divider {
    border-color: rgba(255, 255, 255, .10);
}

/* Faixa de impersonação: precisa ser impossível de ignorar em qualquer tela. */
.civitra-impersonation-bar {
    background: var(--civitra-orange);
    color: var(--civitra-white);
    padding: var(--civitra-space-2) var(--civitra-space-4);
    display: flex;
    align-items: center;
    gap: var(--civitra-space-3);
    font-size: var(--civitra-text-sm);
    font-weight: 500;
}

/* --------------------------------------------------------- marca ---- */
/*
  Área de proteção em volta da assinatura (brand book, seção 07): nada encosta na arte.

  O valor vem do componente `CivitraLogo`, em pixel, proporcional ao tamanho aplicado — quem
  desenha a assinatura é quem sabe o tamanho dela. A versão anterior usava `.12em`, que resolve
  para 1,7 px no corpo de 14 px do app: área de proteção nenhuma, e foi por isso que as pontas da
  figura encostaram na barra superior.

  Quem põe a assinatura num contêiner de altura fixa precisa reservar
  altura da arte + 2 × área de proteção. A barra superior tem 64 px por causa disto.
*/
.civitra-logo {
    display: inline-block;
    padding: var(--civitra-logo-clearspace, 0);
    line-height: 0;
}

.civitra-logo img {
    display: block;
    height: auto;
}

/*
  Em tela estreita o MudBlazor encolhe a toolbar para 48 px, e a horizontal no mínimo de 180 px
  tem 44 px de altura: ali a área de proteção cede em vez de a arte ser cortada.

  O que nunca se faz aqui é mexer em largura ou altura pelo CSS. `width: auto` substitui o atributo
  do img — a regra tem precedência sobre o atributo — e a assinatura volta ao tamanho natural do
  arquivo, estourando a barra; `max-height` com largura fixa achata. Tamanho é assunto do
  componente; o CSS só cuida do espaço em volta.
*/
@media (max-width: 599px) {
    .mud-appbar .civitra-logo {
        --civitra-logo-clearspace: 2px;
    }
}

/* ------------------------------------------------- carregamento ---- */
/*
  Carregamento. Duas coisas importam aqui.

  A primeira é não piscar: o fundo é o mesmo do app, e o conteúdo só aparece depois de 400 ms.
  Quando o WASM já está em cache e sobe rápido, ninguém chega a ver esta tela — e antes ela dava
  um lampejo branco no meio da navegação.

  A segunda é não distorcer: a largura vem do atributo do próprio img e a altura é automática.
  Fixar só a largura no CSS, como estava, mantinha a altura do atributo e achatava a marca.
*/
.civitra-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--civitra-space-4);
    height: 100vh;
    background: var(--civitra-surface-sunken);
    opacity: 0;
    animation: civitra-appear .25s ease .4s forwards;
}

@keyframes civitra-appear {
    to {
        opacity: 1;
    }
}

/* Quem pede menos movimento continua ganhando o atraso; o que some é o esmaecer. */
@media (prefers-reduced-motion: reduce) {
    .civitra-loading {
        animation-duration: .01ms;
    }
}

.civitra-loading img {
    height: auto;
}

.civitra-loading span {
    color: var(--civitra-text-muted);
    font-size: var(--civitra-text-sm);
}

#blazor-error-ui {
    background: var(--civitra-danger-wash);
    border-top: 2px solid var(--civitra-danger);
    color: var(--civitra-neutral-900);
    bottom: 0;
    display: none;
    left: 0;
    padding: var(--civitra-space-3) var(--civitra-space-5);
    position: fixed;
    width: 100%;
    z-index: 1400;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--civitra-space-4);
    top: var(--civitra-space-3);
}