/* records-daycard.css — cards de dia da página Registros, no formato de
   pílula única definido pelo mockup do usuário:

     ( ARCO |  SEX      Nome da pessoa           ( 06:00 )   ajustar ⌄ )
     ( VERDE|   24      ● 11:00 ● 13:10 ...      (  67%  )             )
     (      | JUL 2026                                                 )

   Tudo numa linha só: data à esquerda (o arco colorido É a borda esquerda
   da pílula), nome + pontos no meio, anel com saldo/porcentagem e a seta
   "ajustar" à direita. A cor de status (verde aprovado / laranja pendente)
   aparece SÓ no arco — pedido explícito do usuário depois de ver um print.

   Estrutura: a linha do tempo (.wide-timeline) morava num <tr> irmão e foi
   movida pra dentro do card (ver dayCardTimeline() em app.js, que é como
   todas as camadas antigas continuam encontrando ela). Este arquivo é
   carregado por ÚLTIMO em index.html e usa !important onde precisa vencer
   records-layout.css/records-grid-fix.css, que ainda estilizam
   .record-stat-row/.record-date-title/.daily-stats como tabela. */

/* As pílulas flutuam direto na página: o painel branco "Apontamentos do
   período" deixa de ser um card (perde fundo, borda e sombra) e vira só o
   cabeçalho + a lista solta. Sem isso, cada pílula ficava dentro de outra
   caixa branca, o que empilhava duas molduras. */
.records-panel{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
.records-panel > .panel-heading{padding:0 4px 14px!important;margin:0!important}

.records-panel .record-columns{display:none!important}
/* .table-wrap tem overflow:auto (styles.css) porque a tela ERA uma tabela
   larga com rolagem horizontal. Agora são cards de largura total, e esse
   overflow cortava o que sai da caixa: o menu "ajustar" e o balão do saldo
   do último card, e os balões dos pontos do primeiro. */
.records-panel .table-wrap{overflow:visible}
.records-panel table{table-layout:auto!important}
.records-panel tbody{display:block}
.records-panel .record-stat-row{display:block}
.records-panel .record-stat-row + .record-stat-row{margin-top:14px}

/* A pílula. O arco colorido é a PRÓPRIA borda esquerda do card: com
   border-radius alto, o navegador desenha a transição entre a cor da borda
   esquerda e a das bordas de cima/baixo numa diagonal a 45°, e o resultado
   é exatamente o arco do mockup — sem pseudo-elemento, e acompanhando
   sozinho qualquer altura (o card cresce quando o painel "ajustar" abre).
   overflow NÃO pode ser hidden: os balões de cada ponto (.point-popover)
   ficam acima da pílula e seriam cortados. */
/* ATENÇÃO ao mexer aqui: records-layout.css e records-grid-fix.css ainda
   estilizam .record-stat-row td / .record-date-title / .daily-stats como
   grid de tabela. O navegador resolve !important PROPRIEDADE A PROPRIEDADE,
   não regra inteira — então qualquer propriedade de layout que este bloco
   NÃO declarar continua vindo de lá. Foi assim que o card já quebrou 2x:
   uma por não declarar flex-direction/justify-content, outra por não
   declarar align-items (o `align-items:center` de records-layout.css
   centralizava o conteúdo em vez de esticar, deixando a pílula "vazia" à
   direita). Declare o conjunto completo. */
.record-stat-row.day-card td{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  grid-template-columns:none!important;
  gap:0!important;
  width:100%!important;
  min-height:82px;
  border:2px solid #dfe5ed;
  border-left:5px solid #00e08c;
  border-radius:999px;
  padding:12px 22px 12px 20px!important;
  background:#fff;
}
/* Verde neon = dia fechado, nada a fazer. Vermelho neon = inconsistente
   (dia pendente ou com ponto reprovado/aguardando), ou seja, precisa de
   intervenção pra apuração fechar certa. O brilho suave à esquerda reforça
   o "neon" sem virar poluição visual. A cor é decorativa: quem carrega a
   informação de forma acessível é o botão "›" (com aria-label e contagem)
   e o próprio anel — não dependemos só de cor. */
.record-stat-row.day-card td{
  border-left-color:#00e08c;
  box-shadow:none;
}
.record-stat-row.day-card.day-card-alert td{
  border-left-color:#ff2d55;
  box-shadow:none;
}
/* Dia todo reprovado/ajustado não repinta a lateral inteira (era assim
   antes do redesenho) — a marcação fica no badge dentro do card. */
.record-stat-row.day-card.manipulated,
.record-stat-row.day-card:has(.rejected-status){border-left:0!important;background:transparent!important}

/* Linha 1 da pílula: data | conteúdo | anel | ajustar */
.record-date-title{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  padding:0!important;
  min-height:0!important;
}

/* As 3 linhas da data ficam empilhadas e centralizadas entre si (SEX / 24
   / JUL 2026), não alinhadas à esquerda nem empurradas pra direita. */
.day-card-date{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:86px;
  padding:0 14px 0 6px;
  line-height:1.2;
}
.day-card-date small{color:#94a3b8;font-size:11px;font-weight:700;letter-spacing:.06em}
.day-card-date strong{font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.day-card-date span{color:#94a3b8;font-size:11px;font-weight:700;letter-spacing:.04em}

/* "›" entre a data e os pontos: revela os pontos não aprovados daquele dia.
   O slot existe em TODOS os cards para que nome e pontos comecem sempre no
   mesmo eixo horizontal; só o botão interno é omitido nos dias limpos. */
.day-card-reveal-slot{
  flex:0 0 26px;
  align-self:center;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
}
.day-card-reveal{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#8a96a7;
  font:inherit;
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition:transform .15s, background .15s;
}
.day-card-reveal::before{
  content:"›";
  display:block;
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1;
  transform:translate(1px,-1px);
}
.day-card-reveal:hover{background:#f1f4f9;color:var(--ink)}
.record-stat-row.show-unapproved .day-card-reveal{transform:rotate(90deg)}
/* .timeline-point tem display:inline-flex!important (timeline-detail.css),
   por isso o !important aqui. */
.wide-timeline .timeline-point.point-unapproved{display:none!important}
.record-stat-row.show-unapproved .wide-timeline .timeline-point.point-unapproved{display:inline-flex!important}

/* Nome no topo, pontos ocupando o resto da altura e centrados nele — assim
   as marcações ficam no meio da pílula, e não coladas no nome. */
.day-card-content{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:2px;
  padding:0 16px;
  align-self:stretch;
  position:relative;
}
.day-card-employee{
  position:absolute;
  top:0;
  left:8px;
  margin:0;
  font-size:14px;
  font-weight:750;
  color:var(--ink);
}
.day-card-content .wide-timeline{
  flex:0 0 auto;
  align-content:initial;
  transform:none;
}
.record-date-title .occurrence-note{
  position:absolute;
  left:16px;
  bottom:0;
  max-width:calc(100% - 32px);
  margin:0;
}
/* Dias com ocorrência/abono já tinham um encaixe correto em três linhas:
   nome, pontos e faixa informativa. A centralização nova serve apenas para
   dias comuns; neste caso restauramos o fluxo anterior para que os pontos não
   subam e encostem no nome. */
.day-card-content.has-occurrence-note,
.day-card-content.has-document-chips{
  display:grid;
  grid-template-rows:auto minmax(20px,1fr) auto;
  align-items:center;
  justify-content:stretch;
  row-gap:2px;
}
.day-card-content.has-occurrence-note .day-card-employee,
.day-card-content.has-document-chips .day-card-employee{
  position:static;
  flex:0 0 auto;
  align-self:flex-start;
}
.day-card-content.has-occurrence-note .wide-timeline,
.day-card-content.has-document-chips .wide-timeline{
  position:relative;
  top:2.5px;
  align-self:center;
  align-content:initial;
  transform:none;
}
.day-card-content.has-occurrence-note .occurrence-note{
  position:relative;
  top:3px;
  left:-7px;
  max-width:100%;
  margin:0;
}
.day-card-content.has-document-chips .document-chip-list{
  position:relative;
  top:3px;
  left:-7px;
  margin-top:0;
}
/* Os 3 botões de ação moram no menu flutuante (.day-card-actions-menu). Se
   alguma camada antiga (renderDailyRecordActions) voltar a inserir um
   .day-actions solto aqui na linha 1, ele fica escondido em vez de
   quebrar o alinhamento da pílula. */
.record-date-title .day-actions{display:none}

.day-card-ring-box{
  position:relative;
  flex:0 0 auto;
  width:68px;
  height:68px;
  margin-left:8px;
}
.day-card-ring-box svg{display:block;width:100%;height:100%}
.day-card-ring-track{stroke:#c9dbfd}
.day-card-ring-value{stroke:var(--color-primary)}
.day-card-ring-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  pointer-events:none;
}
/* Dentro do anel: horas trabalhadas no dia, SEMPRE em preto e sem sinal
   (pedido do usuário) — quem carrega sinal e cor é o saldo, que fica no
   balão de detalhe. Embaixo, quanto da jornada foi cumprida. */
.day-card-ring-text b{font-size:14px;font-weight:800;color:var(--ink)}
.day-card-ring-text small{font-size:12px;font-weight:700;color:#a3adba}
/* Acima de 100% (hora extra) o anel fica cheio; a cor diferencia o caso. */
.day-card-ring-overtime .day-card-ring-value{stroke:var(--color-success)}
.day-card-ring-overtime .day-card-ring-text small{color:var(--color-success-text)}

/* Detalhamento do saldo: balão no hover do círculo, em vez de um painel
   que empurrava o conteúdo — pedido do usuário pra pílula nunca mudar de
   altura. Mesmo vocabulário visual do .point-popover dos pontos. */
.day-card-detail{
  position:absolute;
  z-index:6;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  display:grid;
  gap:5px;
  width:210px;
  padding:11px 13px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 26px rgba(17,39,67,.22);
  text-align:left;
  opacity:0;
  pointer-events:none;
  transition:.15s;
}
.day-card-ring-box:hover .day-card-detail,
.day-card-ring-box:focus-visible .day-card-detail{opacity:1;pointer-events:auto;transform:translateX(-50%)}
/* .daily-stats span (records-layout.css) impõe font-size/text-align/nowrap
   em TODO span descendente — inclusive nestas linhas de detalhe. */
.day-card-detail span{display:flex!important;justify-content:space-between;align-items:center;gap:14px;font-size:11px!important;font-weight:600!important;text-align:left!important;white-space:nowrap}
.day-card-detail em{color:var(--muted);font-style:normal}
.day-card-detail b{color:var(--ink);font-weight:700}

/* A ação de ajuste usa uma engrenagem vetorial, sem texto repetido em cada
   linha. O botão continua acessível por aria-label e mantém a área de toque. */
.day-card-adjust{position:relative;flex:0 0 auto;margin-left:14px}
.day-card-menu-toggle{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0!important;
  border-radius:50%;
  box-shadow:none!important;
}
.day-card-menu-toggle svg{display:block;width:18px;height:18px}

/* Menu de ações: flutua por cima (position:absolute), não empurra nada. */
.day-card-actions-menu{
  position:absolute;
  z-index:7;
  top:calc(100% + 6px);
  right:0;
  display:flex!important;
  flex-direction:column;
  gap:6px;
  min-width:170px;
  margin:0!important;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 28px rgba(17,39,67,.18);
}
.day-card-actions-menu.hidden{display:none!important}
.day-card-actions-menu button{width:100%;text-align:left}

/* Lista de dias + painel lateral de apuração. A pílula continua com todos
   os ganchos funcionais existentes; ela apenas passa a ocupar a coluna fluida
   enquanto os alertas e a cobertura ficam numa coluna fixa, sempre visível. */
.records-workspace{
  container-type:inline-size;
  container-name:records-workspace;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(250px,21vw,286px);
  gap:clamp(14px,1.4vw,18px);
  align-items:start;
}
.records-side-rail{
  display:grid;
  gap:14px;
  position:sticky;
  top:88px;
  /* Compensa o cabeçalho de "Apontamentos do período" para o primeiro card
     lateral começar na mesma altura da primeira pílula. */
  margin-top:44px;
}
.records-insights-card,.records-coverage-card,.records-automation-card{
  overflow:hidden;
  border:1px solid #dfe6ef;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(22,45,74,.05);
}
.records-insights-card>header,.records-coverage-card>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 13px;
  border-bottom:1px solid #e8edf4;
}
.records-insights-card>header strong,.records-coverage-card>header strong{color:#26384f;font-size:12px}
.records-insights-card>header span{
  display:grid;
  place-items:center;
  min-width:22px;
  height:22px;
  border-radius:7px;
  background:#fff0f1;
  color:#ef3348;
  font-size:10px;
  font-weight:850;
}
.records-coverage-card>header small{color:#8a98aa;font-size:9px}
.records-insight-item{padding:11px 12px;border-bottom:1px solid #eef2f6}
.records-insight-item:last-child{border-bottom:0}
.records-insight-item.active{background:#f8fbff}
.records-insight-title{display:grid;grid-template-columns:20px 1fr auto;gap:6px;align-items:center}
.records-insight-title>span{display:grid;place-items:center;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-size:11px;font-weight:850}
.records-insight-title>strong{color:#34465c;font-size:10px}
.records-insight-title>b{border-radius:7px;padding:3px 6px;font-size:8px}
.records-insight-item.danger{color:#ff3953}.records-insight-item.danger .records-insight-title>b{background:#fff0f2}
.records-insight-item.warning{color:#ff9418}.records-insight-item.warning .records-insight-title>b{background:#fff5e9}
.records-insight-item.info{color:#3f76ff}.records-insight-item.info .records-insight-title>b{background:#edf3ff}
.records-insight-item.neutral{color:#7890aa}.records-insight-item.neutral .records-insight-title>b{background:#f0f4f8}
.records-insight-days{display:grid;gap:4px;margin:7px 1px 8px 27px}
.records-insight-days span{display:flex;justify-content:space-between;gap:8px;color:#6e7f94;font-size:9px}
.records-insight-days b{color:currentColor}
.records-insight-item>button,.records-automation-card button{
  width:calc(100% - 27px);
  margin-left:27px;
  border:1px solid currentColor;
  border-radius:7px;
  padding:5px 8px;
  background:color-mix(in srgb,currentColor 5%,white);
  color:inherit;
  font:800 9px/1.2 inherit;
  cursor:pointer;
}
.records-insight-item>button:hover{background:color-mix(in srgb,currentColor 11%,white)}
.records-side-empty{margin:0;padding:22px 14px;color:#7a899d;text-align:center;font-size:10px;line-height:1.5}

.records-coverage-body{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center;padding:14px 12px 10px}
.records-coverage-ring{
  width:82px;
  height:82px;
  border-radius:50%;
  padding:9px;
  background:conic-gradient(#3f6df3 var(--coverage),#e5ebf3 0);
}
.records-coverage-ring>div{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:#fff}
.records-coverage-ring strong{color:#1d2f47;font-size:17px}
.records-coverage-ring span{color:#8a98aa;font-size:8px}
.records-coverage-list{display:grid;gap:7px}
.records-coverage-list>span{display:grid;grid-template-columns:7px minmax(0,1fr) auto 28px;gap:5px;align-items:center;font-size:8.5px}
.records-coverage-list i{width:7px;height:7px;border-radius:50%}
.records-coverage-list i.worked{background:#3f6df3}.records-coverage-list i.excused{background:#00aa83}.records-coverage-list i.missing{background:#ff3e53}.records-coverage-list i.extra{background:#7bdc67}.records-coverage-list i.breaks{background:#94a3b8}
.records-coverage-list b{color:#617086;font-weight:650}.records-coverage-list strong{color:#26384f;text-align:right}.records-coverage-list em{color:#8a98aa;text-align:right;font-style:normal}
.records-coverage-card>footer{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-top:1px solid #e8edf4;background:#f5f8ff;color:#315fcf}
.records-coverage-card>footer span{font-size:9px;font-weight:750}.records-coverage-card>footer strong{font-size:14px}

.records-automation-card{padding:13px;color:#4166be;background:linear-gradient(145deg,#f8fbff,#f1f6ff)}
.records-automation-icon{display:grid;place-items:center;width:24px;height:24px;margin-bottom:7px;border-radius:8px;background:#e5efff;color:#3670f5;font-size:14px}
.records-automation-card strong{display:block;color:#3b67c7;font-size:10px}
.records-automation-card p{margin:5px 0 10px;color:#74859b;font-size:9px;line-height:1.45}
.records-automation-card button{width:100%;margin:0;border-color:#9dbbff;background:#edf4ff;color:#3667cf}

/* Compacta a pílula dentro da nova coluna sem alterar os menus, popovers ou
   a sequência dos pontos. */
.records-workspace .record-stat-row.day-card td{min-height:76px;padding:10px 14px 10px 13px!important}
.records-workspace .day-card-date{min-width:67px;padding:0 8px 0 2px}
.records-workspace .day-card-date strong{font-size:23px}
.records-workspace .day-card-reveal-slot{flex-basis:22px;width:22px}
.records-workspace .day-card-content{padding:0 8px}
.records-workspace .day-card-employee{font-size:12px}
.records-workspace .day-card-ring-box{width:61px;height:61px;margin-left:5px}
.records-workspace .day-card-ring-text b{font-size:12px}
.records-workspace .day-card-ring-text small{font-size:10px}
.records-workspace .day-card-adjust{margin-left:7px}
.records-workspace .day-card-menu-toggle{width:38px;height:38px;padding:0!important}

/* Reforço do empilhamento acima: mede o espaço REAL disponível dentro de
   .records-workspace (via container query), não o viewport inteiro. O
   @media abaixo cobre viewports estreitos normalmente, mas zoom do
   navegador e escalas de monitor diferentes podem encolher o espaço
   renderizado sem cruzar esse ponto de corte — a @container detecta isso
   diretamente pelo tamanho real do elemento e evita que o painel lateral
   (position:sticky) sobreponha a lista de dias nesses casos. */
@container records-workspace (max-width:860px){
  .records-workspace{grid-template-columns:1fr}
  .records-side-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
  .records-automation-card{grid-column:1/-1}
}

@media(max-width:1180px){
  .records-workspace{grid-template-columns:1fr}
  .records-side-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
  .records-automation-card{grid-column:1/-1}
}

@media(max-height:760px) and (min-width:1181px){
  .records-side-rail{position:static}
}

@media(max-width:900px){
  .records-side-rail{grid-template-columns:1fr}
  .records-automation-card{grid-column:auto}
  .record-stat-row.day-card td{
    border-radius:20px;
    padding:14px 16px!important;
    flex-wrap:wrap;
  }
  .record-date-title{flex-wrap:wrap!important;gap:10px!important}
  .day-card-content{flex-basis:100%;order:3;padding:0}
}