/* Forwartrans HR · web/css/gestao.css — the admin area, and the absence calendar map.

   Loaded by every page but only ever active under `body.gestao`, which main.js toggles when the
   route is an admin one. The employee app stays exactly what it was: one thumb-wide column.

   THE THREE RULES THAT DECIDE THIS FILE
   1. The map is PRINTED. Article 241 n.º 9 obliges the company to post the mapa de férias until 31
      October, and it is printed on whatever office printer is nearest — often a black-and-white one.
      So the difference between an approved absence and a pending one is a PATTERN (diagonal hatch)
      plus an outline, never opacity and never colour alone: turn this page greyscale and it still
      reads. `print-color-adjust: exact` keeps the browser from helpfully dropping the backgrounds.
   2. Nothing in a cell is smaller than a fingertip in the DOM sense: a cell is a `gridcell` with a
      real label, reachable with the arrow keys, and the whole grid takes ONE tab stop.
   3. Colour is data. Absence colours arrive as `--cor` from `tipo_ausencia.cor`; this file never
      names one. */

body.gestao{ background:var(--bg) }
body.gestao .wrap{ max-width:1400px; padding:var(--e-4) var(--e-4) 110px }
/* The app header stops being sticky in the admin area. The map already has a sticky day header and a
   sticky employee column INSIDE its own scroller, and a second sticky bar above them both eats the
   vertical space the grid needs — and parks the first row of cells underneath itself, where neither
   a mouse nor a keyboard can reach them. */
body.gestao .hd{ position:static }

/* ── company switcher in the header ─────────────────────────────────────── */
.hd .emp{ display:flex; align-items:center; gap:var(--e-2); flex:none }
.hd .emp .lg-emp{ width:26px; height:26px; object-fit:contain; border-radius:6px; background:#fff }
.hd .sel-emp{
  min-height:40px; height:40px; padding:0 var(--e-2); width:auto; min-width:120px; max-width:200px;
  font-size:var(--t-s); font-weight:600; border-radius:var(--r-s); color:var(--ink-2);
}

/* ── second-level navigation ────────────────────────────────────────────── */
.subnav{
  display:flex; gap:var(--e-1); overflow-x:auto; margin:0 0 var(--e-4);
  padding-bottom:var(--e-1); scrollbar-width:thin;
}
.subnav a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; text-decoration:none;
  padding:10px 14px; border-radius:var(--r-s); font-size:var(--t-s); font-weight:600;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line); min-height:44px;
}
.subnav a.on{ background:var(--blue); border-color:var(--blue); color:#fff }
.subnav a .ic{ font-size:15px }

/* ── page header ────────────────────────────────────────────────────────── */
.pg{ display:flex; flex-wrap:wrap; gap:var(--e-3); align-items:flex-end; margin-bottom:var(--e-3) }
.pg h1{ font-size:var(--t-xl); letter-spacing:-.01em }
.pg .sub{ margin:2px 0 0; color:var(--ink-3); font-size:var(--t-s) }
.pg-tools{ margin-left:auto; display:flex; flex-wrap:wrap; gap:var(--e-3); align-items:center }
.nav-mes{ display:flex; align-items:center; gap:var(--e-1) }
.nav-mes .sbtn{ width:auto; min-width:44px; padding:10px 12px; flex-direction:row }
.nav-mes .mes-actual{ font-family:var(--f-titulo); font-size:var(--t-m); min-width:150px; text-align:center }
.vistas, .exportar{ display:flex; gap:var(--e-1); align-items:center }
.vistas .sbtn, .exportar .sbtn{ width:auto; padding:10px 14px; flex-direction:row }
.exportar .nota{ margin:0 }

/* ── filter bar ─────────────────────────────────────────────────────────── */
.filtros{ display:flex; flex-wrap:wrap; gap:var(--e-3); margin-bottom:var(--e-3) }
.filtros .f{ display:flex; flex-direction:column; gap:2px }
.filtros label{ margin:0; font-size:var(--t-xs) }
.filtros select, .filtros input{ width:auto; min-width:170px; min-height:44px; padding:10px 12px; font-size:var(--t-s) }
.filtros input[type=checkbox]{ min-width:0; width:22px; height:22px; min-height:0; margin-top:6px }

/* ── KPI tiles ──────────────────────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--e-3); margin-bottom:var(--e-4) }
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:var(--e-4);
  box-shadow:var(--sh); display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit;
}
a.kpi:active{ background:var(--bg) }
.kpi .n{ font-family:var(--f-mono); font-weight:600; font-size:30px; line-height:1.1 }
.kpi .r{ font-size:var(--t-s); color:var(--ink-2); font-weight:600 }
.kpi .s{ font-size:var(--t-xs); color:var(--ink-3) }
.kpi.bom{ border-color:var(--good-line); background:var(--good-soft) } .kpi.bom .n{ color:var(--good) }
.kpi.atencao{ border-color:var(--warn-line); background:var(--warn-soft) } .kpi.atencao .n{ color:var(--warn) }
.kpi.mau{ border-color:var(--bad-line); background:var(--bad-soft) } .kpi.mau .n{ color:var(--bad) }

/* ── the map ────────────────────────────────────────────────────────────── */
/* The grid is 230 px of employee column plus 31 × 26 px of days — over a metre of paper's worth on a
   phone. It scrolls INSIDE `.mapa-env` and must never widen the document: a table with
   `width:max-content` that escapes its scroller pushes the viewport out, which on a phone silently
   zooms the whole app out and puts every cell somewhere the finger is not. Hence the three caps
   below and `overflow-x:hidden` on the page — the map scrolls, the page does not. */
body.gestao{ overflow-x:hidden }
.mapa-e-painel{ display:flex; gap:var(--e-4); align-items:flex-start; max-width:100% }
.mapa-col{ flex:1; min-width:0; max-width:100%; overflow:hidden }
.mapa-env{
  overflow:auto; max-width:100%; max-height:70vh; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh);
}
.mapa{ border-collapse:separate; border-spacing:0; font-size:var(--t-xs); width:max-content; min-width:100% }

/* sticky employee column and sticky day header — the two things that make a wide grid readable */
.mapa th.nome{
  position:sticky; left:0; z-index:2; background:var(--surface); text-align:left; font-weight:600;
  min-width:230px; max-width:230px; padding:6px var(--e-3); border-bottom:1px solid var(--line);
  border-right:1px solid var(--line); display:table-cell; vertical-align:middle;
}
.mapa thead th{ position:sticky; top:0; z-index:3; background:var(--surface); border-bottom:1px solid var(--line) }
.mapa thead th.nome{ z-index:4 }
.mapa th.nome .av{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--blue-soft); color:var(--blue-dk); font-size:10px; font-weight:700; margin-right:8px;
  vertical-align:middle; flex:none;
}
.mapa th.nome .txt{ display:inline-block; vertical-align:middle; max-width:130px }
.mapa th.nome .txt b{ display:block; font-size:var(--t-s); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mapa th.nome .txt em{ display:block; font-style:normal; font-size:10px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mapa th.nome .tot{ float:right; color:var(--ink-3); font-size:10px; padding-top:8px }

.mapa th.d{ width:26px; min-width:26px; padding:4px 0; text-align:center; font-weight:600; color:var(--ink-2) }
.mapa th.d .ds{ display:block; font-size:9px; color:var(--ink-3); text-transform:uppercase }
.mapa th.d .dn{ display:block; font-family:var(--f-mono); font-size:11px }
.mapa th.d.fds, .mapa td.cel.fds{ background:var(--bg) }
.mapa th.d.fer, .mapa td.cel.fer{ background:var(--blue-soft) }
.mapa th.d.hoje{ background:var(--red); color:#fff; border-radius:4px 4px 0 0 }
.mapa th.d.hoje .ds{ color:#fff }
.mapa .sem{ border-left:1px solid var(--line) }

.mapa td.cel{
  width:26px; min-width:26px; height:30px; padding:0; position:relative;
  border-bottom:1px solid var(--line); background:var(--surface);
  /* The app header is sticky and the tab bar is fixed. Without this, scrolling a cell "into view"
     parks it underneath one of them and the click lands on the header instead — which is what a
     person with a keyboard experiences too, not just a test. */
  scroll-margin-top:110px; scroll-margin-bottom:100px;
}
.mapa td.cel.hoje{ box-shadow:inset 2px 0 0 var(--red), inset -2px 0 0 var(--red) }
.mapa td.cel.fora-contrato{ background:repeating-linear-gradient(135deg, var(--bg) 0 4px, var(--line) 4px 5px) }
.mapa td.cel[data-gcel]{ cursor:pointer }
.mapa td.cel:focus-visible{ outline:none; box-shadow:var(--foco); z-index:1 }

/* the marks. `--cor` is tipo_ausencia.cor and nothing else. */
.mapa .m, .mini .m{ position:absolute; inset:2px; border-radius:3px; display:block }
.mapa .m.ap{ background:var(--cor) }
/* PENDING = a hatch of the same colour plus a dark dashed outline. Both survive a black-and-white
   printer, which two opacities of one green do not. */
.mapa .m.pnd{
  background:repeating-linear-gradient(45deg, transparent 0 3px, var(--cor) 3px 6px);
  border:1px dashed var(--ink-2);
}
/* HALF DAY = half the cell, so a 0,5 is visibly a 0,5 and not a rounding of the eye. */
.mapa .m.meia, .mini .m.meia{ right:50% }
.mapa td.cel.tem-ap.tem-pnd .m.pnd{ border-color:var(--ink) }

.legenda{ display:flex; flex-wrap:wrap; gap:var(--e-3); margin:var(--e-3) 0; font-size:var(--t-xs); color:var(--ink-2) }
.legenda .lg-i{ display:inline-flex; align-items:center; gap:6px }
.legenda .lg-i i{ width:15px; height:15px; border-radius:3px; display:inline-block; border:1px solid var(--line) }
.legenda .lg-pnd{ background:repeating-linear-gradient(45deg, transparent 0 3px, var(--ink-3) 3px 6px); border:1px dashed var(--ink-2) !important }
.legenda .lg-meia{ background:linear-gradient(90deg, var(--ink-3) 0 50%, transparent 50% 100%) }
.legenda .lg-fds{ background:var(--bg) }
.legenda .lg-fer{ background:var(--blue-soft) }
.dica{ min-height:20px; font-size:var(--t-xs); color:var(--ink-3); margin:0 }

/* ── the year strip: 12 mini-months per employee ────────────────────────── */
.tira{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:var(--e-3); margin-bottom:var(--e-3); box-shadow:var(--sh) }
.tira h3{ font-size:var(--t-s); margin-bottom:var(--e-2) }
.tira h3 .mono{ color:var(--ink-3); font-weight:400 }
.tira-meses{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:var(--e-2) }
.mini{ border:1px solid var(--line); border-radius:var(--r-s); padding:6px }
.mini.on{ border-color:var(--blue); background:var(--blue-soft) }
.mini-h{ background:none; font-size:11px; font-weight:600; color:var(--ink-2); padding:2px 0; width:100%; text-align:left; min-height:24px }
.mini-h em{ font-style:normal; color:var(--blue-dk) }
.mini-d{ display:grid; grid-template-columns:repeat(auto-fill, 9px); gap:1px; margin-top:3px }
.mini .cel{ width:9px; height:9px; border-radius:2px; background:var(--surface); position:relative; display:block; border:1px solid var(--line) }
.mini .cel.fds{ background:var(--bg) } .mini .cel.fer{ background:var(--blue-soft) }
.mini .cel.hoje{ border-color:var(--red) }
.mini .m{ inset:0; border-radius:1px }
.mini .m.pnd{ background:repeating-linear-gradient(45deg, transparent 0 1.5px, var(--cor) 1.5px 3px) }

/* ── the side panel ─────────────────────────────────────────────────────── */
.lateral{
  width:340px; flex:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--sh); position:sticky; top:var(--e-4); max-height:80vh; overflow:auto;
}
.lateral:focus-visible{ outline:none; box-shadow:var(--foco) }
.lateral header{ display:flex; align-items:flex-start; gap:var(--e-2); padding:var(--e-3); border-bottom:1px solid var(--line) }
.lateral header b{ display:block }
.lateral header small{ color:var(--ink-3); font-size:var(--t-xs) }
.lateral .fechar{ margin-left:auto; background:none; border:1px solid var(--line); border-radius:var(--r-s); min-height:36px; padding:0 10px; color:var(--ink-2) }
.lateral .corpo{ padding:var(--e-3) }
.lateral .pedido{ display:flex; align-items:center; gap:var(--e-2); margin:0 0 var(--e-3) }
.lateral .pastilha{ width:14px; height:14px; border-radius:4px; display:inline-block; flex:none }
.lateral dl{ margin:0 0 var(--e-3); display:grid; grid-template-columns:auto 1fr; gap:4px var(--e-3); font-size:var(--t-s) }
.lateral dt{ color:var(--ink-3) } .lateral dd{ margin:0 }
.anexo{ font-size:var(--t-s); margin:var(--e-2) 0; display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap }
.anexo .sbtn{ width:auto; padding:8px 12px; min-height:40px; flex-direction:row }
.anexo.aviso-sem{ color:var(--warn) }
.linha{ font-size:var(--t-s); border-radius:var(--r-s); padding:10px 12px; margin:var(--e-2) 0; border:1px solid var(--line); background:var(--surface) }
.linha.bom{ background:var(--good-soft); border-color:var(--good-line); color:var(--good) }
.linha.atencao{ background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn) }
.linha.mau{ background:var(--bad-soft); border-color:var(--bad-line); color:var(--bad) }
.linha.azul{ background:var(--blue-soft); border-color:#cdd9ef; color:var(--blue-dk) }

/* ── decisions, queues ──────────────────────────────────────────────────── */
.decisao{ margin-top:var(--e-3) }
.dec-b{ display:flex; gap:var(--e-2); margin-top:var(--e-2) }
.dec-b .btn{ width:auto; flex:1; min-height:48px; padding:12px 14px }
.btn.bom{ background:var(--good) }
.apr{ display:flex; gap:var(--e-3); padding:var(--e-3) 0; border-top:1px solid var(--line); align-items:flex-start }
.apr:first-child{ border-top:0 }
.apr .av{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--blue-soft); color:var(--blue-dk); font-size:12px; font-weight:700 }
.apr-b{ flex:1; min-width:0 }
.apr-m{ margin:2px 0; font-size:var(--t-s); color:var(--ink-2) }
.apr-a{ width:260px; flex:none }
.apr-a .sbtn{ width:100%; flex-direction:row; margin-top:var(--e-2) }
.apr-a input[type=text]{ min-height:44px; font-size:var(--t-s); padding:10px 12px }
.fora{ margin-bottom:var(--e-3) }
.fora h3{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:6px }
.fora-l{ display:flex; flex-wrap:wrap; gap:6px }
.fora-chip{ font-size:var(--t-xs); background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:5px 12px }
.fora-chip b{ margin-right:5px }

/* ── tables ─────────────────────────────────────────────────────────────── */
.tabela-env{ overflow-x:auto }
.tabela{ width:100%; border-collapse:collapse; font-size:var(--t-s) }
.tabela th, .tabela td{ padding:10px var(--e-2); border-bottom:1px solid var(--line); text-align:left; vertical-align:middle }
.tabela thead th{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); white-space:nowrap }
.tabela tbody tr.on{ background:var(--blue-soft) }
.tabela .r{ text-align:right }
.tabela td.nada{ color:var(--ink-3); text-align:center; padding:var(--e-5) }
.tabela th[scope=row]{ font-weight:600 }
.tabela th[scope=row] .av{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--blue-soft); color:var(--blue-dk); font-size:10px; font-weight:700; margin-right:8px; vertical-align:middle }
.tabela th[scope=row] .txt{ display:inline-block; vertical-align:middle }
.tabela th[scope=row] .txt em{ display:block; font-style:normal; font-size:var(--t-xs); color:var(--ink-3) }
.tabela .acc{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap }
.tabela .acc .btn, .tabela .acc .sbtn{ width:auto; min-height:44px; padding:10px 14px; flex-direction:row }
.sub-h{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:var(--e-4) 0 var(--e-2) }
.totais{ display:flex; flex-wrap:wrap; gap:var(--e-4); margin-bottom:var(--e-3) }
.totais span{ display:flex; flex-direction:column }
.totais em{ font-style:normal; font-size:var(--t-xs); color:var(--ink-3) }
.totais b{ font-size:var(--t-l) }
.mes-dia.nao-util{ color:var(--ink-3) }
.pic{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin-right:var(--e-3) }
.pic em{ font-style:normal; font-size:var(--t-xs); color:var(--ink-3) }
.pic .sbtn{ width:auto; min-height:36px; padding:6px 10px; flex-direction:row; font-size:var(--t-xs) }
.corr{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-m); padding:var(--e-3); margin:var(--e-2) 0 }
.corr-l{ display:flex; gap:var(--e-3); flex-wrap:wrap }
.corr-l span{ flex:1; min-width:140px }
.corr-b{ display:flex; gap:var(--e-2); margin-top:var(--e-3) }
.corr-b .btn{ width:auto }
.lg-caixa{ width:44px; height:44px; border-radius:var(--r-s); background:var(--bg); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--f-titulo); font-weight:700; font-size:13px; flex:none; overflow:hidden }
.lg-caixa img{ width:100%; height:100%; object-fit:contain; background:#fff }

/* ── the one-time password slip ─────────────────────────────────────────── */
.segredo{ background:var(--warn-soft); border:2px solid var(--warn-line); border-radius:var(--r-m); padding:var(--e-4); margin-bottom:var(--e-4) }
.segredo h2{ font-size:var(--t-l); color:var(--warn); margin-bottom:var(--e-2) }
.segredo dl{ display:grid; grid-template-columns:auto 1fr; gap:6px var(--e-3); margin:var(--e-3) 0 }
.segredo dt{ color:var(--ink-2) } .segredo dd{ margin:0 }
.segredo .grande{ font-size:var(--t-xl); font-weight:600; letter-spacing:.04em }

/* ── narrow screens: the admin area on a phone ──────────────────────────── */
@media (max-width:860px){
  .mapa-e-painel{ flex-direction:column }
  .lateral{ width:100%; position:static; max-height:none }
  .apr{ flex-wrap:wrap } .apr-a{ width:100% }
  .pg-tools{ margin-left:0; width:100% }
}

/* ── print ──────────────────────────────────────────────────────────────────
   The map goes on a wall. Everything that is a control disappears, the grid stops being a scrolling
   viewport and becomes a table that breaks across pages, and the backgrounds are forced through. */
@media print{
  @page{ size:A4 landscape; margin:10mm }
  html, body{ background:#fff }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
  .hd, .tabbar, .subnav, .toast, .filtros, .pg-tools, .dica, .decisao, .dec-b,
  .lateral .fechar, .sbtn, .btn, .kpis{ display:none !important }
  body.gestao .wrap{ max-width:none; padding:0 }
  .card{ box-shadow:none; border:0; padding:0; break-inside:avoid }
  .mapa-e-painel{ display:block }
  .mapa-env{ overflow:visible; max-height:none; border:0; box-shadow:none }
  .mapa{ width:100%; font-size:8pt }
  .mapa th.nome{ position:static; min-width:0; max-width:none }
  .mapa thead th{ position:static }
  .mapa td.cel{ height:20px }
  .mapa tr{ break-inside:avoid }
  /* On paper the hatch IS the difference: no colour is guaranteed. */
  .mapa .m.pnd{ border:1pt dashed #000 }
  .mapa td.cel.hoje{ box-shadow:none; outline:1pt solid #000 }
  .lateral{ break-before:page; width:100%; border:1px solid #999 }
  .legenda{ break-inside:avoid }
  .pg::after{ content:"Mapa de férias — art. 241.º n.º 9 do Código do Trabalho"; display:block; font-size:9pt; color:#555 }
}