/* =====================================================================================
   Tickit 2.0 - Estilos globais
   -------------------------------------------------------------------------------------
   - As cores ficam em variáveis (--tk-*) para manter o visual consistente: tons de azul,
     branco e cinza claro. Para ajustar a identidade visual, altere apenas este bloco :root.
   - Estilos específicos de cada tela ficam no arquivo .razor.css da própria tela
     (CSS isolado do Blazor), e não aqui.
   ===================================================================================== */

:root {
    /* Azuis (identidade do Tickit) */
    --tk-azul-950: #071F4D;
    --tk-azul-900: #0B2E6B;
    --tk-azul-800: #0B3D91;
    --tk-azul-700: #0B4FB3;
    --tk-azul-600: #0B5ED7;   /* cor principal */
    --tk-azul-500: #2F80ED;
    --tk-azul-200: #C9DCF8;
    --tk-azul-100: #E5EFFC;
    --tk-azul-50:  #F2F7FE;

    /* Cinzas e neutros */
    --tk-branco:    #FFFFFF;
    --tk-cinza-50:  #F6F8FB;  /* fundo das páginas */
    --tk-cinza-100: #EEF2F7;
    --tk-cinza-200: #E2E8F0;  /* bordas */
    --tk-cinza-300: #CDD5E0;
    --tk-cinza-400: #9AA6B8;
    --tk-cinza-500: #728097;
    --tk-cinza-600: #5B6879;  /* textos secundários */
    --tk-texto:     #1F2A37;  /* texto principal */

    /* Cores de apoio (tons suaves) para dar vida às telas: fundo + cor do ícone/destaque */
    --tk-verde-suave: var(--tk-verde-suave);   --tk-verde-forte: #1E9E63;
    --tk-ciano-suave: #DFF3F9;   --tk-ciano-forte: #0E8FB0;
    --tk-roxo-suave:  #ECE8FC;   --tk-roxo-forte:  #6B4FD8;
    --tk-ambar-suave: #FFF0D9;   --tk-ambar-forte: #D98200;

    /* Cores de estado */
    --tk-sucesso: #1E9E63;
    --tk-sucesso-fundo: #E8F7F0;
    --tk-alerta: #C77700;
    --tk-alerta-fundo: #FFF6E5;
    --tk-erro: #D93F3F;
    --tk-erro-fundo: #FDECEC;

    /* Texto e borda de cada cor de apoio (selos, avisos, compromissos da Agenda...). Nos temas, saem da cor + texto/fundo do tema. */
    --tk-verde-texto: #13704A;      --tk-verde-borda: #BFE7D4;
    --tk-ciano-texto: #0B5C63;      --tk-ciano-borda: #A8D8DB;
    --tk-roxo-texto: #3F2380;       --tk-roxo-borda: #D8CCF3;
    --tk-ambar-texto: #6B4A00;      --tk-ambar-borda: #EBC873;
    --tk-vermelho-texto: #9F2B2B;   --tk-vermelho-borda: #F6CACA;
    --tk-cinza-700: #3F4A5A;

    /* Formas e sombras */
    --tk-raio-p: 8px;
    --tk-raio: 12px;
    --tk-raio-g: 18px;
    --tk-sombra-suave: 0 1px 2px rgba(16, 42, 90, .06), 0 2px 8px rgba(16, 42, 90, .05);
    --tk-sombra: 0 8px 28px rgba(16, 42, 90, .10);
    --tk-sombra-forte: 0 18px 50px rgba(11, 46, 107, .18);

    /* Tipografia */
    --tk-fonte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --tk-transicao: 160ms ease;

    /* Medidas do layout principal */
    --tk-largura-menu: 248px;
    --tk-largura-menu-recolhido: 76px;
    --tk-altura-topo: 64px;
}

/* ------------------------------------------------------------------------------------
   Temas (menu do perfil > Tema; lista em Estado/TemasTickit.cs)
   O padrão ("Tickit") usa as cores fixas acima. Nos outros, o App.razor põe data-tema-familia no <html> e as MESMAS variáveis
   --tk-* passam a sair das cores do tema ativo, que o próprio DevExpress publica em variáveis CSS:
     - Fluent:    --dxds-color-surface-neutral-* (fundos), --dxds-color-content-neutral-* (texto), --dxds-color-border-* ...
     - Bootstrap (clássicos e Bootswatch): --bs-body-bg, --bs-body-color, --bs-border-color, --bs-primary ...
   Passo 1: cada família diz quais são as 5 cores-base (--tema-*). Passo 2: os tons do Tickit saem delas misturando
   (color-mix). Os tons "claros" do azul misturam o azul com o FUNDO e os "escuros" misturam com o TEXTO; num tema escuro o fundo
   é escuro e o texto é claro, então tudo se inverte sozinho e cada tela acompanha sem regra própria.
   Regra para telas novas: use sempre as variáveis --tk-* (nunca #fff ou outra cor fixa de fundo/borda/texto).
   ------------------------------------------------------------------------------------ */

/* Passo 1: as cores-base de cada família. */
html[data-tema-familia="fluent"] {
    --tema-fundo:      var(--dxds-color-surface-neutral-subdued-rest);
    --tema-superficie: var(--dxds-color-surface-neutral-default-rest);
    --tema-texto:      var(--dxds-color-content-neutral-default-rest);
    --tema-borda:      var(--dxds-color-border-neutral-default-rest);
    --tema-primaria:   var(--dxds-color-surface-primary-default-rest);
}

/* Bootstrap claro: página cinza bem clara e cartões brancos. */
html[data-tema-familia="bootstrap"] {
    --tema-fundo:      var(--bs-tertiary-bg);
    --tema-superficie: var(--bs-body-bg);
    --tema-texto:      var(--bs-body-color);
    --tema-borda:      var(--bs-border-color);
    --tema-primaria:   var(--bs-primary);
}

/* Bootstrap escuro: o contrário (a página é a cor mais escura e os cartões ficam um pouco mais claros). */
html[data-tema-familia="bootstrap"][data-tema-modo="escuro"] {
    --tema-fundo:      var(--bs-body-bg);
    --tema-superficie: var(--bs-tertiary-bg);
}

/* Passo 2: os tons do Tickit saem das cores-base. */
html[data-tema-familia] {
    --tk-branco:    var(--tema-superficie);   /* cartões, janelas, campos */
    --tk-cinza-50:  var(--tema-fundo);        /* fundo das páginas */
    --tk-cinza-100: color-mix(in srgb, var(--tema-texto) 6%, var(--tema-superficie));
    --tk-cinza-200: var(--tema-borda);
    --tk-cinza-300: color-mix(in srgb, var(--tema-texto) 25%, var(--tema-superficie));
    --tk-cinza-400: color-mix(in srgb, var(--tema-texto) 45%, var(--tema-superficie));
    --tk-cinza-500: color-mix(in srgb, var(--tema-texto) 58%, var(--tema-superficie));
    --tk-cinza-600: color-mix(in srgb, var(--tema-texto) 72%, var(--tema-superficie));
    --tk-texto:     var(--tema-texto);

    --tk-azul-950: color-mix(in srgb, var(--tema-primaria) 35%, var(--tema-texto));
    --tk-azul-900: color-mix(in srgb, var(--tema-primaria) 50%, var(--tema-texto));
    --tk-azul-800: color-mix(in srgb, var(--tema-primaria) 65%, var(--tema-texto));
    --tk-azul-700: color-mix(in srgb, var(--tema-primaria) 82%, var(--tema-texto));
    --tk-azul-600: var(--tema-primaria);
    --tk-azul-500: color-mix(in srgb, var(--tema-primaria) 80%, var(--tema-superficie));
    --tk-azul-200: color-mix(in srgb, var(--tema-primaria) 30%, var(--tema-superficie));
    --tk-azul-100: color-mix(in srgb, var(--tema-primaria) 15%, var(--tema-superficie));
    --tk-azul-50:  color-mix(in srgb, var(--tema-primaria) 7%, var(--tema-superficie));

    /* Cores de apoio: o tom "forte" puxa um pouco para o texto (clareia no escuro) e o "suave" é o forte bem diluído no fundo. */
    --tk-verde-forte: color-mix(in srgb, #1E9E63 80%, var(--tema-texto));
    --tk-ciano-forte: color-mix(in srgb, #0E8FB0 80%, var(--tema-texto));
    --tk-roxo-forte:  color-mix(in srgb, #6B4FD8 80%, var(--tema-texto));
    --tk-ambar-forte: color-mix(in srgb, #D98200 85%, var(--tema-texto));
    --tk-verde-suave: color-mix(in srgb, #1E9E63 16%, var(--tema-superficie));
    --tk-ciano-suave: color-mix(in srgb, #0E8FB0 16%, var(--tema-superficie));
    --tk-roxo-suave:  color-mix(in srgb, #6B4FD8 16%, var(--tema-superficie));
    --tk-ambar-suave: color-mix(in srgb, #D98200 18%, var(--tema-superficie));

    --tk-sucesso: var(--tk-verde-forte);
    --tk-sucesso-fundo: var(--tk-verde-suave);
    --tk-alerta: var(--tk-ambar-forte);
    --tk-alerta-fundo: var(--tk-ambar-suave);
    --tk-erro: color-mix(in srgb, #D93F3F 80%, var(--tema-texto));
    --tk-erro-fundo: color-mix(in srgb, #D93F3F 16%, var(--tema-superficie));

    --tk-cinza-700: color-mix(in srgb, var(--tema-texto) 86%, var(--tema-superficie));
    --tk-azul-texto: color-mix(in srgb, var(--tema-primaria) 45%, var(--tema-texto));   /* texto dos selos azuis (ex.: status Aberto) */
    --tk-verde-texto: color-mix(in srgb, #1E9E63 40%, var(--tema-texto));
    --tk-ciano-texto: color-mix(in srgb, #0E8FB0 40%, var(--tema-texto));
    --tk-roxo-texto: color-mix(in srgb, #6B4FD8 40%, var(--tema-texto));
    --tk-ambar-texto: color-mix(in srgb, #D98200 42%, var(--tema-texto));
    --tk-vermelho-texto: color-mix(in srgb, #D93F3F 45%, var(--tema-texto));
    --tk-verde-borda: color-mix(in srgb, #1E9E63 38%, var(--tema-superficie));
    --tk-ciano-borda: color-mix(in srgb, #0E8FB0 38%, var(--tema-superficie));
    --tk-roxo-borda: color-mix(in srgb, #6B4FD8 38%, var(--tema-superficie));
    --tk-ambar-borda: color-mix(in srgb, #D98200 42%, var(--tema-superficie));
    --tk-vermelho-borda: color-mix(in srgb, #D93F3F 38%, var(--tema-superficie));
}

/* Temas escuros: barras de rolagem e campos nativos do navegador também escurecem, e as sombras ficam pretas (a sombra azulada
   do padrão vira uma mancha clara no fundo escuro). */
html[data-tema-modo="escuro"] {
    color-scheme: dark;
    --tk-sombra-suave: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
    --tk-sombra: 0 8px 28px rgba(0, 0, 0, .45);
    --tk-sombra-forte: 0 18px 50px rgba(0, 0, 0, .6);
}

html[data-tema-modo="escuro"] .tk-cartao { box-shadow: var(--tk-sombra-suave); }

/* Aba escolhida das abas do DevExpress (ex.: detalhe do chamado): usa a cor principal do tema, que em alguns temas escuros
   (Darkly) é um azul acinzentado quase da cor do fundo. Aqui usa o azul claro de texto. */
html[data-tema-modo="escuro"] .dxbl-tabs {
    --dxbl-tabs-tab-selected-color: var(--tk-azul-texto, var(--tk-azul-600));
}

/* Bolinha de notificações: o vermelho do tema escuro é claro (feito para texto) e o número branco ficava pouco legível sobre ele. */
html[data-tema-familia] .sino-contador {
    background: color-mix(in srgb, #D93F3F 88%, #000);
}

/* Botão desabilitado (ex.: "Hoje" quando já está no dia de hoje): com 60% de opacidade o texto some no fundo escuro. */
html[data-tema-modo="escuro"] .agenda-botao:disabled,
html[data-tema-modo="escuro"] .dia-botao:disabled {
    opacity: .85;
}
html[data-tema-modo="escuro"] .tk-destaque-busca { color: #1F1F1F; }

/* Textos e bordas de alerta que eram cores fixas: passam a sair das cores do tema. */
html[data-tema-familia] .tk-alerta-erro { color: var(--tk-erro); border-color: color-mix(in srgb, var(--tk-erro) 35%, transparent); }
html[data-tema-familia] .tk-alerta-sucesso { color: var(--tk-sucesso); border-color: color-mix(in srgb, var(--tk-sucesso) 35%, transparent); }
html[data-tema-familia] .tk-selo-verde { color: var(--tk-sucesso); }
html[data-tema-familia] .tk-botao-acao.perigo { border-color: color-mix(in srgb, var(--tk-erro) 45%, transparent); }

/* Botão "secundário" do DevExpress (ex.: "Agendas conectadas") nos temas Bootstrap escuros: ele usa a cor --bs-secondary do tema,
   que em alguns Bootswatch (Cosmo) é BRANCA e continua branca no modo escuro. Aqui ele vira um botão escuro com borda. */
html[data-tema-familia="bootstrap"][data-tema-modo="escuro"] .dxbl-btn-secondary {
    --dxbl-btn-bg: var(--tk-cinza-100);
    --dxbl-btn-color: var(--tk-texto);
    --dxbl-btn-border-color: var(--tk-cinza-300);
    --dxbl-btn-hover-bg: var(--tk-cinza-200);
    --dxbl-btn-hover-color: var(--tk-texto);
    --dxbl-btn-hover-border-color: var(--tk-cinza-400);
    --dxbl-btn-active-bg: var(--tk-cinza-200);
    --dxbl-btn-active-color: var(--tk-texto);
    --dxbl-btn-active-border-color: var(--tk-cinza-400);
}

/* Caixa de seleção do DevExpress nos temas Bootstrap: desmarcada, ela pinta o fundo e a borda com a COR DO TEXTO a 50% (no escuro,
   um quadrado cinza claro com borda grossa). Aqui ela ganha o fundo do cartão e uma borda fina, como no tema padrão. */
html[data-tema-familia="bootstrap"] .dxbl-checkbox {
    --dxbl-checkbox-check-element-unchecked-bg: var(--tk-branco);
    --dxbl-checkbox-check-element-unchecked-border-width: 1.5px;
    --dxbl-checkbox-check-element-unchecked-border-color: var(--tk-cinza-400);
    --dxbl-checkbox-check-element-unchecked-hover-bg: var(--tk-azul-50);
    --dxbl-checkbox-check-element-unchecked-hover-border-color: var(--tk-azul-600);
}

/* Os temas Bootstrap trazem o "reboot" do Bootstrap (fonte, fundo e espaços dos elementos HTML). O Tickit mantém a fonte e o
   tamanho dele; "html body" ganha das regras do Bootstrap mesmo quando o CSS do tema carrega depois deste (na troca de tema). */
html[data-tema-familia] body {
    font-family: var(--tk-fonte);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tk-texto);
    background: var(--tk-cinza-50);
}

/* ------------------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------------------ */

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

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--tk-fonte);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tk-texto);
    background: var(--tk-cinza-50);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--tk-azul-texto, var(--tk-azul-600));
    text-decoration: none;
}

a:hover {
    color: var(--tk-azul-800);
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--tk-azul-950);
    font-weight: 700;
    letter-spacing: -0.01em;
}

:focus-visible {
    outline: 2px solid var(--tk-azul-500);
    outline-offset: 2px;
}

/* O Blazor (FocusOnNavigate, no Routes.razor) coloca o foco no título da página ao carregá-la, para leitores de tela. O título não é
   um controle: sem este ajuste, o navegador desenharia o quadrado azul de foco em volta dele até a pessoa clicar fora. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Ícones SVG do componente <Icone> */
.tk-icone {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Logotipo (ícone + nome) */
.tk-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--tk-azul-800);
    white-space: nowrap;
}

.tk-logo img {
    width: 36px;
    height: 36px;
}

/* ------------------------------------------------------------------------------------
   Formulários (usados nas telas de conta, que não usam componentes DevExpress)
   ------------------------------------------------------------------------------------ */

.tk-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.tk-campo label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-cinza-600);
}

.tk-entrada {
    position: relative;
    display: flex;
    align-items: center;
}

.tk-entrada .tk-icone {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--tk-cinza-400);
    pointer-events: none;
}

.tk-entrada input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    font: inherit;
    font-size: 14px;
    color: var(--tk-texto);
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-200);
    border-radius: var(--tk-raio-p);
    transition: border-color var(--tk-transicao), box-shadow var(--tk-transicao);
}

.tk-entrada input:hover {
    border-color: var(--tk-cinza-300);
}

.tk-entrada input:focus {
    outline: none;
    border-color: var(--tk-azul-500);
    box-shadow: 0 0 0 4px var(--tk-azul-100);
}

.tk-entrada input[readonly] {
    background: var(--tk-cinza-50);
    color: var(--tk-cinza-600);
}

.tk-entrada input.invalid {
    border-color: var(--tk-erro);
    outline: none;
}

.tk-entrada-codigo input {
    height: 56px;
    padding: 0 12px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 12px;
}

.validation-message {
    font-size: 12px;
    color: var(--tk-erro);
}

.tk-ajuda {
    font-size: 12px;
    color: var(--tk-cinza-500);
}

.tk-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tk-cinza-600);
    cursor: pointer;
    user-select: none;
}

.tk-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--tk-azul-600);
}

/* ------------------------------------------------------------------------------------
   Botões simples (telas de conta). Nas telas internas usamos o DxButton.
   ------------------------------------------------------------------------------------ */

.tk-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--tk-raio-p);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--tk-transicao), border-color var(--tk-transicao), box-shadow var(--tk-transicao), transform var(--tk-transicao);
}

.tk-botao:active {
    transform: translateY(1px);
}

.tk-botao-primario {
    color: #fff;
    background: linear-gradient(180deg, var(--tk-azul-500) -40%, var(--tk-azul-600) 100%);
    box-shadow: 0 6px 16px rgba(11, 94, 215, .25);
}

.tk-botao-primario:hover {
    background: var(--tk-azul-700);
}

.tk-botao-secundario {
    color: var(--tk-azul-800);
    background: var(--tk-branco);
    border-color: var(--tk-cinza-200);
}

.tk-botao-secundario:hover {
    background: var(--tk-azul-50);
    border-color: var(--tk-azul-200);
}

.tk-link-botao {
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: none;
    border: none;
    cursor: pointer;
}

.tk-link-botao:hover {
    color: var(--tk-azul-800);
    text-decoration: underline;
}

/* ------------------------------------------------------------------------------------
   Alertas (componente <MensagemAlerta>)
   ------------------------------------------------------------------------------------ */

.tk-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    border-radius: var(--tk-raio-p);
    border: 1px solid transparent;
}

.tk-alerta .tk-icone {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.tk-alerta-erro {
    color: var(--tk-vermelho-texto);
    background: var(--tk-erro-fundo);
    border-color: var(--tk-vermelho-borda);
}

.tk-alerta-sucesso {
    color: var(--tk-verde-texto);
    background: var(--tk-sucesso-fundo);
    border-color: var(--tk-verde-borda);
}

.tk-alerta-info {
    color: var(--tk-azul-800);
    background: var(--tk-azul-50);
    border-color: var(--tk-azul-200);
}

/* ------------------------------------------------------------------------------------
   Cartões e utilitários das telas internas
   ------------------------------------------------------------------------------------ */

.tk-cartao {
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-100);
    border-radius: var(--tk-raio);
    box-shadow: 0 1px 2px rgba(11, 94, 215, .06), 0 4px 14px rgba(11, 94, 215, .07);
    overflow: hidden;   /* os cantos arredondados também valem para o cabeçalho colorido e a grade */
}

/* Faixa de título de cada página: degradê azul suave com um brilho decorativo à direita. */
.tk-titulo-pagina {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    overflow: hidden;
    background: linear-gradient(110deg, color-mix(in srgb, var(--tk-azul-200) 50%, var(--tk-azul-100)) 0%, var(--tk-azul-100) 55%, var(--tk-azul-50) 100%);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio);
}

.tk-titulo-pagina::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -30px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(47, 128, 237, .22), transparent 70%);
    pointer-events: none;
}

.tk-titulo-pagina > * {
    position: relative;
    z-index: 1;
}

/* Faixa de título com um menu que abre para baixo (o botão Exportar do Painel e do Relatório mensal): não pode cortar o menu.
   O brilho decorativo, que passava da borda, fica dentro da faixa (com o canto arredondado) em vez de ser cortado por ela. */
.tk-titulo-pagina:has(.exp-raiz) {
    overflow: visible;
}

.tk-titulo-pagina:has(.exp-raiz)::after {
    top: 0;
    right: 0;
    width: 260px;
    height: 100%;
    border-radius: 0 var(--tk-raio) var(--tk-raio) 0;
    background: radial-gradient(circle at 70% 0%, rgba(47, 128, 237, .22), transparent 70%);
}

/* Caixa de digitação do texto sobre a foto (editor de fotos das Conversas). Criada pelo js/editor-foto.js direto no body,
   por isso o estilo é global. Fica acima do editor (z-index 1000). */
.ef-texto-entrada {
    position: fixed;
    z-index: 1100;
    box-sizing: border-box;
    padding: 4px 6px;
    margin: 0;
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    resize: none;
    overflow: hidden;
    background: rgba(0, 0, 0, .28);
    border: 2px dashed rgba(255, 255, 255, .9);
    border-radius: 4px;
    outline: 2px solid rgba(22, 119, 229, .9);
    -webkit-text-stroke: 0;
    text-shadow: 0 0 3px rgba(0, 0, 0, .6);
}

.tk-titulo-pagina h1 {
    font-size: 22px;
    color: var(--tk-azul-900);
}

.tk-titulo-pagina p {
    margin: 4px 0 0;
    color: var(--tk-cinza-600);
}

/* Cabeçalho de um cartão (título à esquerda, botões à direita), usado nas telas de cadastro. */
.tk-cartao-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--tk-azul-50) 0%, var(--tk-azul-100) 100%);
    border-bottom: 1px solid var(--tk-azul-100);
}

.tk-cartao-topo h2 {
    font-size: 15px;
    color: var(--tk-azul-900);
}

/* Lista que rola sozinha quando passa da janela, para a PÁGINA não ganhar barra de rolagem (a conta é do js/preencher-altura.js).
   O respiro evita que as sombras dos cartões de dentro sejam cortadas na borda. */
[data-preencher] {
    overflow-y: auto;
    scrollbar-width: thin;
}

.tk-rolagem {
    padding: 2px 6px 6px 2px;
}

/* Grades (DxGrid) com visual suave: cabeçalho azul claro, linhas separadas por traços leves e
   destaque azul ao passar o mouse. As variáveis --dxbl-* são as do próprio componente. */
.dxbl-grid {
    --dxbl-grid-h-line-color: var(--tk-cinza-200);
    --dxbl-grid-v-line-color: var(--tk-cinza-100);
    --dxbl-grid-hover-bg: var(--tk-azul-50);
}

.dxbl-grid .dxbl-grid-header-row > th {
    color: var(--tk-azul-900);
    background-color: var(--tk-azul-50);
}

.dxbl-grid .dxbl-grid-filter-row > td {
    background-color: var(--tk-cinza-50);
}

/* Linha selecionada nas grades (DxGrid). A tela aplica a classe pelo evento CustomizeElement.
   Fundo azul claro + barra azul à esquerda, para a seleção ficar bem visível. */
.tk-linha-selecionada > td {
    background-color: var(--tk-azul-100) !important;
}

.tk-linha-selecionada > td:first-child {
    box-shadow: inset 4px 0 0 var(--tk-azul-600);
}

/* Selos (etiquetas pequenas) para situação e marcações nas listas. */
/* Palavra procurada, destacada no resultado da busca de chamados (componente TrechoDestacado). */
.tk-destaque-busca {
    padding: 0 2px;
    color: inherit;
    background: #FFE9A8;
    border-radius: 3px;
}

.tk-selo {
    display: inline-block;
    padding: 1px 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    border-radius: 999px;
    white-space: nowrap;
}

.tk-selo-azul {
    color: var(--tk-azul-800);
    background: var(--tk-azul-100);
}

.tk-selo-verde {
    color: var(--tk-verde-texto);
    background: var(--tk-sucesso-fundo);
}

.tk-selo-cinza {
    color: var(--tk-cinza-600);
    background: var(--tk-cinza-100);
}

/* Botões de ação (editar, excluir...) dentro das linhas das listas. */
.tk-acoes-linha {
    display: flex;
    gap: 4px;
}

.tk-acao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--tk-cinza-600);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--tk-raio-p);
    cursor: pointer;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

.tk-acao-icone .tk-icone {
    width: 17px;
    height: 17px;
}

.tk-acao-icone:hover:not(:disabled) {
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
}

.tk-acao-icone.perigo:hover:not(:disabled) {
    color: var(--tk-erro);
    background: var(--tk-erro-fundo);
}

.tk-acao-icone:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Formulários dentro de janelas (popups) das telas internas. */
.tk-form-janela .tk-campo {
    margin-bottom: 14px;
}

.tk-form-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.tk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.tk-link-voltar {
    margin-top: 12px;
    font-weight: 600;
}

.tk-carregando-pagina {
    padding: 48px;
    text-align: center;
    color: var(--tk-cinza-500);
}

/* ------------------------------------------------------------------------------------
   Telas de conta (login, 2FA, senha, cadastro de empresa)
   ------------------------------------------------------------------------------------ */

/* Páginas com formulário maior (ex.: cadastro de empresa) marcam o conteúdo com .conta-largo,
   e o cartão do ContaLayout se alarga automaticamente. */
main.conta-cartao:has(.conta-largo) {
    max-width: 640px;
}

.conta-cabecalho {
    margin-bottom: 24px;
    text-align: center;
}

.conta-cabecalho h1 {
    margin-bottom: 6px;
    font-size: 19px;
}

.conta-cabecalho p {
    margin: 0;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

.conta-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 20px;
}

.conta-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conta-rodape-form {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

.conta-rodape-form a {
    font-weight: 600;
}

.conta-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.conta-grade .tk-campo-inteiro {
    grid-column: 1 / -1;
}

.conta-secao {
    grid-column: 1 / -1;
    margin: 6px 0 12px;
    padding-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    border-bottom: 1px solid var(--tk-cinza-200);
}

@media (max-width: 560px) {
    .conta-grade {
        grid-template-columns: 1fr;
    }
}

/* Mensagem de erro de conexão do Blazor (aparece se o servidor cair). */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 20px;
    color: #fff;
    background: var(--tk-azul-900);
    box-shadow: var(--tk-sombra-forte);
}

#blazor-error-ui a {
    color: var(--tk-azul-200);
    margin-left: 12px;
}

/* ------------------------------------------------------------------------------------
   Interações e animações (sempre suaves e curtas, para dar vida sem distrair)
   ------------------------------------------------------------------------------------ */

/* Cursor de "mãozinha" em tudo que é clicável (botões nativos, links, botões e opções do DevExpress). */
button:not(:disabled),
a[href],
[role="button"],
select,
summary,
label[for],
.tk-checkbox,
.dxbl-btn:not(.dxbl-disabled),
.dxbl-checkbox,
.dxbl-checkbox *,
.dxbl-grid-header-sortable,
.dxbl-grid-header-sortable *,
.dxbl-grid tbody tr,
[class*="listbox-item"],
[class*="list-box-item"],
[class*="dropdown-toggle"] {
    cursor: pointer;
}

button:disabled,
.dxbl-btn.dxbl-disabled {
    cursor: not-allowed;
}

/* Entrada suave do conteúdo de cada página: sobe 8px e aparece. Os itens entram em sequência. */
@keyframes tk-entrar {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.app-pagina > * {
    animation: tk-entrar .35s ease backwards;
}

.app-pagina > :nth-child(2) { animation-delay: .05s; }
.app-pagina > :nth-child(3) { animation-delay: .10s; }
.app-pagina > :nth-child(4) { animation-delay: .15s; }
.app-pagina > :nth-child(5) { animation-delay: .20s; }

/* Alertas aparecem deslizando. */
.tk-alerta {
    animation: tk-entrar .3s ease backwards;
}

/* Botões do DevExpress: sobem de leve ao passar o mouse e "afundam" ao clicar. */
.dxbl-btn {
    transition: transform var(--tk-transicao), box-shadow var(--tk-transicao), background-color var(--tk-transicao), border-color var(--tk-transicao);
}

.dxbl-btn:not(.dxbl-disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 94, 215, .18);
}

.dxbl-btn:not(.dxbl-disabled):active {
    transform: translateY(0) scale(.97);
    box-shadow: none;
}

/* Celular: o tema põe 28px de margem em volta das janelas (popups). Somada à largura delas (até 96% da tela), a janela passava
   da borda direita. Com 2% de cada lado, 96% + 2% + 2% = 100%: cabe sempre. */
@media (max-width: 600px) {
    html .dxbl-modal {   /* "html" na frente: continua valendo quando a troca de tema recarrega o CSS do DevExpress depois deste */
        --dxbl-popup-margin: 2vw;
    }
}

/* Popup pequeno (ex.: Convites da Agenda): menos espaço em volta do título e do conteúdo que o padrão do DevExpress (24px).
   Uso: <DxPopup CssClass="tk-popup-compacto" ...>. As variáveis --dxbl-popup-* são as do próprio componente; no tema Fluent o
   espaço de cima e o de baixo têm variáveis separadas (-top / -bottom). */
html .tk-popup-compacto,
html .dxbl-modal.tk-popup-compacto,
html .tk-popup-compacto .dxbl-modal {
    --dxbl-popup-header-padding-x: 20px;
    --dxbl-popup-header-padding-top: 16px;
    --dxbl-popup-header-padding-bottom: 10px;
    --dxbl-popup-body-padding-x: 20px;
    --dxbl-popup-body-padding-top: 2px;
    --dxbl-popup-body-padding-bottom: 20px;
}

/* Linhas das grades mudam de cor suavemente. */
.dxbl-grid td {
    transition: background-color .15s ease;
}

/* Botões de ação das listas (editar/excluir) crescem um pouco ao passar o mouse. */
.tk-acao-icone .tk-icone {
    transition: transform var(--tk-transicao);
}

.tk-acao-icone:hover:not(:disabled) .tk-icone {
    transform: scale(1.15);
}

/* Quem prefere menos movimento no sistema operacional não vê as animações. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* Botões de ação do cabeçalho das listas (componente <BotaoAcao>): ícone + palavra. */
.tk-acoes-topo {
    display: flex;
    gap: 8px;
}

.tk-botao-acao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    transition: background var(--tk-transicao), border-color var(--tk-transicao), color var(--tk-transicao), transform var(--tk-transicao);
}

.tk-botao-acao .tk-icone {
    width: 16px;
    height: 16px;
}

.tk-botao-acao:hover:not(:disabled) {
    background: var(--tk-azul-50);
    border-color: var(--tk-azul-500);
    transform: translateY(-1px);
}

.tk-botao-acao:active:not(:disabled) {
    transform: scale(.97);
}

.tk-botao-acao.perigo {
    color: var(--tk-erro);
    border-color: var(--tk-vermelho-borda);
}

.tk-botao-acao.perigo:hover:not(:disabled) {
    background: var(--tk-erro-fundo);
    border-color: var(--tk-erro);
}

.tk-botao-acao:disabled {
    opacity: .45;
}

/* O cabeçalho do cartão é um "container": quando fica estreito (menos de 640px), somem as palavras
   dos botões de ação e ficam só os ícones. */
.tk-cartao-topo {
    container-type: inline-size;
}

@container (max-width: 640px) {
    .tk-botao-acao-texto {
        display: none;
    }

    .tk-botao-acao {
        padding: 0 10px;
    }
}
/* Espaço extra na primeira coluna das grades: o texto não "cola" na barra azul da linha selecionada. */
.dxbl-grid .dxbl-grid-header-row > th:first-child,
.dxbl-grid .dxbl-grid-filter-row > td:first-child,
.dxbl-grid tbody tr > td:first-child {
    --dxbl-grid-text-cell-padding-x: 18px;
    padding-left: 18px !important;
}

/* Coluna das caixas de seleção: o espaço extra acima espremia o checkbox do cabeçalho (coluna estreita), que ficava cortado dos dois
   lados e só mostrava a borda de cima e a de baixo. Quem tem checkbox na célula volta ao espaçamento normal e não corta o desenho. */
.dxbl-grid .dxbl-grid-header-row > th:first-child:has(.dxbl-checkbox),
.dxbl-grid .dxbl-grid-filter-row > td:first-child:has(.dxbl-checkbox),
.dxbl-grid tbody tr > td:first-child:has(.dxbl-checkbox) {
    --dxbl-grid-text-cell-padding-x: 0px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible;
    text-align: center;
}
/* Formulário em duas colunas dentro das janelas (popups). Campos com .tk-campo-inteiro ocupam a linha toda. */
.tk-form-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.tk-form-grade .tk-campo-inteiro {
    grid-column: 1 / -1;
}

@media (max-width: 560px) {
    .tk-form-grade {
        grid-template-columns: 1fr;
    }
}
/* Barra de ações do cabeçalho: contador de marcados + link "Limpar seleção" alinhados aos botões. */
.tk-acoes-topo {
    align-items: center;
}
/* Barra de tempo dos avisos (toasts): encolhe da direita para a esquerda. Global de propósito (veja ContainerToasts.razor.css). */
@keyframes tk-toast-tempo {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ===== Avisos rápidos (toasts) - componente ContainerToasts =====
   Ficam aqui (e não em CSS isolado) porque a animação da barra de tempo não funcionava no CSS isolado. */
.tk-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: calc(100vw - 40px);
    pointer-events: none;   /* só os avisos recebem clique; o resto da tela continua clicável */
}

.tk-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 440px;
    padding: 14px 14px 20px 16px;
    overflow: hidden;
    font-weight: 600;
    color: #fff;
    border-radius: var(--tk-raio-p);
    box-shadow: 0 8px 24px rgba(11, 36, 71, .28);
    pointer-events: auto;
    animation: tk-toast-entrada .22s ease-out;
}

.tk-toast-sucesso { background: #13804F; }
.tk-toast-erro    { background: #C4262E; }
.tk-toast-info    { background: var(--tk-azul-600); }
.tk-toast-aviso   { background: #C77700; }

.tk-toast-texto {
    flex: 1;
    line-height: 1.35;
}

.tk-toast .tk-icone {
    flex: none;
    width: 20px;
    height: 20px;
}

.tk-toast-fechar {
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: .85;
}

.tk-toast-fechar:hover {
    background: rgba(255, 255, 255, .2);
    opacity: 1;
}

.tk-toast-fechar .tk-icone {
    width: 16px;
    height: 16px;
}

/* Trilho escuro no pé do aviso; a barra azul fica por cima e encolhe da direita para a esquerda em 4 segundos. */
.tk-toast-trilho {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 6px;
    background: rgba(0, 0, 0, .28);
}

.tk-toast-barra {
    display: block;
    width: 100%;
    height: 100%;
    background: #2D8CFF;
    transform-origin: left center;
    animation: tk-toast-tempo 4000ms linear forwards;
    /* A barra mostra o tempo que falta (informação, não enfeite): vale mesmo com "reduzir movimento" ligado no
       Windows, que zera as animações (regra prefers-reduced-motion deste arquivo). Mantenha igual a ToastServico.DuracaoMs. */
    animation-duration: 4000ms !important;
}

@keyframes tk-toast-entrada {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 600px) {
    .tk-toasts { right: 12px; bottom: 12px; left: 12px; align-items: stretch; max-width: none; }
    .tk-toast { min-width: 0; max-width: none; }
}
/* ===== Imagens da descrição do chamado: pequenas, com bordas redondas; clicar amplia (js/imagem-ampliada.js) ===== */
/* Tamanho inicial: miniatura. Só vale enquanto a imagem NÃO foi redimensionada: quando o usuário arrasta as alças azuis do
   editor, o editor grava a largura/altura na própria imagem e estas regras deixam de valer (por isso o :not). */
.tk-editor-descricao img:not([width]):not([style*="width"]),
.tk-descricao-html img:not([width]):not([style*="width"]) {
    max-width: 160px;
    max-height: 120px;
    object-fit: cover;
}

.tk-editor-descricao img,
.tk-descricao-html img {
    max-width: 100%;
    margin: 2px 6px 2px 0;
    border: 1px solid var(--tk-cinza-200, #D9DEE5);
    border-radius: 12px;
    vertical-align: middle;
    cursor: zoom-in;
}
.tk-editor-descricao img:hover,
.tk-descricao-html img:hover {
    box-shadow: 0 2px 10px rgba(11, 36, 71, .25);
}

/* Camada com a imagem grande por cima de tudo. */
.tk-imagem-ampliada {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 32px;
    background: rgba(11, 36, 71, .82);
    cursor: zoom-out;
    animation: tk-ampliar-entrada .15s ease-out;
}

.tk-imagem-ampliada img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    background: var(--tk-branco);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

.tk-imagem-ampliada-fechar {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.tk-imagem-ampliada-fechar:hover {
    background: rgba(255, 255, 255, .3);
}

@keyframes tk-ampliar-entrada {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =====================================================================================
   Impressão (Painel e Relatório mensal > Exportar > PDF)
   -------------------------------------------------------------------------------------
   Só a página sai no papel: o menu lateral, a barra de cima, os botões e os filtros somem ("sem-impressao" marca o que
   a tela esconde). O fundo vira branco e as cores dos gráficos são mantidas para o PDF ficar igual à tela.
   ===================================================================================== */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    html, body, .app {
        background: #fff !important;
    }

    /* O texto herda a cor do corpo, que num tema escuro é clara: no papel é sempre escuro. */
    body {
        color: var(--tk-texto, #1f2937) !important;
    }

    /* O papel é mais estreito que a tela: os cartões do Painel se arrumam em menos colunas (o JS que equilibra as colunas pela
       largura da tela não vale aqui) e nenhum cartão é cortado ao meio entre duas páginas. */
    .painel-indicadores {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .painel-grade:not(.painel-grade-dupla) {
        columns: 2 !important;
    }

    .painel-sat-grade {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .painel-cartao,
    .painel-indicadores > * {
        break-inside: avoid;
    }

    .painel {
        max-width: 100%;
        overflow: hidden;
    }

    .sem-impressao,
    .app-menu,
    .app-topo,
    .app-sombra-mobile {
        display: none !important;
    }

    .app,
    .app-conteudo {
        display: block !important;
        min-height: 0 !important;
    }

    .app-pagina {
        max-width: none !important;
        padding: 0 !important;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}