/* Visão geral e KPIs.
   Page-scoped rules only; shared components live in ../app.css. Every class
   here starts with `ov-` / `kp-` or hangs off the page roots `.ov` (Visão
   geral) and `.kp` (KPIs), so nothing leaks into another page that reuses the
   same component names. */

/* ---------------------------------------------------------------- Visão geral */

/* Header: greeting + scope line on the left, the labelled competência picker
   on the right; the picker drops under the title when the row is too narrow. */
.ov-head{flex-wrap:wrap;row-gap:16px}
.ov-head .sub{margin:0;line-height:1.45}
.ov-cycle{display:flex;align-items:center;gap:10px;margin:0}
.ov-cycle label{color:var(--sec);font-size:13.5px;font-weight:600}
.ov-cycle select{min-height:40px;min-width:128px;font-variant-numeric:tabular-nums}

.ov-others{margin:0 0 22px}
.ov-others p{margin:0;line-height:1.55}
.ov-others a{font-weight:600}

/* Summary: one panel, three cells in reading order: what the agent
   recommends, how much revenue is exposed, how many items are open. */
.ov-summary{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.25fr);margin-bottom:24px}
.ov-cell{padding:22px 24px;min-width:0}
.ov-cell + .ov-cell{border-left:1px solid var(--line-2)}
.ov-summary p{margin:0}
.ov-summary .ov-label{color:var(--sec);font-size:13.5px;font-weight:600;margin-bottom:12px}
.ov-figure{color:var(--ink);font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.ov-summary .ov-meta{color:var(--sec);font-size:13.5px;font-weight:500;line-height:1.5;margin-top:8px}
/* Links inside the summary text look like links, not like bold text. */
.ov-summary .ov-meta a{display:inline-block;padding:4px 0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-soft-2)}
.ov-summary .ov-meta a:hover{text-decoration-color:currentColor}
.ov-summary .ov-hint{color:var(--sec);font-size:12.5px;line-height:1.5;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.ov-rec-value .st{font-size:15px;padding:7px 14px;gap:9px}
.ov-rec-value .st .dot{width:8px;height:8px;flex:none}
.ov-attempt .st{padding:2px 9px;font-size:12.5px}

/* Severity split: a 2x2 grid of links, each a 28px+ target. The dot only
   repeats the word next to it; the colour never stands alone. */
.ov-sev{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:6px 28px}
.ov-sev a{display:inline-flex;align-items:center;gap:8px;min-height:28px;color:var(--ink);text-decoration:none;border-radius:6px}
.ov-sev .lab{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-soft-2)}
.ov-sev a:hover .lab{color:var(--accent);text-decoration-color:currentColor}
.ov-sev .v{font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ov-sev .lab{color:var(--sec);font-size:13.5px;font-weight:500}
.ov-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--neu-ico)}
.ov-dot.bad{background:var(--bad-ico)}
.ov-dot.warn{background:var(--warn-ico)}
.ov-dot.neu{background:var(--neu-ico)}
.ov-dot.ok{background:var(--ok-ico)}

/* Panels */
.ov-grid{align-items:start}
.ov .panel-head h2.ttl{margin:0}
.ov .panel-head .qual{margin-left:0}
.ov .empty-note{margin:0;padding:26px 22px;line-height:1.55}
.ov .empty-note a,.kp .empty-note a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ov-table td,.ov-table th{padding-left:16px;padding-right:16px}
.ov-table td:first-child,.ov-table th:first-child{padding-left:22px}
.ov-table td:last-child,.ov-table th:last-child{padding-right:22px}
.ov-table td{vertical-align:top}
/* Row link: at least 24px tall (WCAG 2.5.8) without moving the row. */
.ov-table .fname{display:inline-block;padding:3px 0;margin:-3px 0;color:var(--ink);text-decoration:none}
.ov-table .fname:hover{color:var(--accent);text-decoration:underline}
.ov-attn .ov-who{width:27%}
.ov-msg{font-size:13.5px;line-height:1.5;color:var(--ink)}
.ov-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.ov-amt{white-space:nowrap}
/* The result column shrinks to the pill; the run name takes the rest. */
.ov-activity .ov-out{width:1%;white-space:nowrap}
.ov-foot{margin:0;padding:12px 22px 14px;border-top:1px solid var(--line-2);color:var(--sec);font-size:12.5px;line-height:1.5}

@media (max-width:1180px){
  .ov-summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ov-cell.ov-open{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line-2)}
  .ov-sev{grid-template-columns:repeat(4,max-content)}
}
@media (max-width:1080px){
  .ov-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* Panel heads: title and link on the first line, the qualifier under. */
  .ov .panel-head,.kp .panel-head{flex-wrap:wrap;row-gap:2px;padding:14px 18px}
  .ov .panel-head .qual,.kp .panel-head .qual{order:3;flex-basis:100%}
  .ov-head .sp{display:none}
  .ov-cycle{width:100%}
  .ov-cycle select{flex:1}
  .ov-summary{grid-template-columns:minmax(0,1fr)}
  .ov-cell{padding:18px 18px}
  .ov-cell + .ov-cell{border-left:0;border-top:1px solid var(--line-2)}
  .ov-figure{font-size:28px}
  .ov-sev{grid-template-columns:repeat(2,minmax(0,max-content))}

  /* The two tables become one block per row: no 1-word columns. */
  .ov-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ov-table,.ov-table tbody{display:block}
  .ov-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
  .ov-table tr:last-child{border-bottom:0}
  .ov-table td,.ov-table td:first-child,.ov-table td:last-child{display:block;padding:0;border:0;width:auto}
  .ov-attn .ov-who{grid-column:1;grid-row:1}
  .ov-attn .ov-amt{grid-column:2;grid-row:1;text-align:right}
  .ov-attn .ov-msg{grid-column:1 / -1;grid-row:2}
  .ov-attn .ov-sevcell{grid-column:1 / -1;grid-row:3}
  .ov-activity .ov-who,.ov-activity .ov-out{grid-column:1 / -1}
  .ov-activity .ov-out .sub-cnpj{display:inline;margin-left:8px}
  .ov-foot{padding:12px 18px 14px}
}

/* ----------------------------------------------------------------------- KPIs */

.kp .head .sub{margin:0;line-height:1.45}
.kp .stats-open .st-item{min-width:0}
.kp .stats-open .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.kp .stats-open .sub{font-size:12.5px;color:var(--sec);line-height:1.45;margin-top:8px}
.kp-section{margin-bottom:24px}
.kp .panel-head h2.ttl{margin:0}
.kp .panel-head .qual{margin-left:0}
.kp table caption{caption-side:top}
.kp td,.kp th{padding-left:16px;padding-right:16px}
.kp td:first-child,.kp th:first-child{padding-left:22px}
.kp td:last-child,.kp th:last-child{padding-right:22px}
.kp tbody td{padding-top:12px;padding-bottom:12px}
/* Row headers (scope=row) carry the label of each line. */
.kp tbody th{text-align:left;color:var(--ink);font-size:14px;font-weight:500;padding:12px 16px 12px 22px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.kp tbody tr:last-child th{border-bottom:0}
.kp .fname{color:var(--ink)}
.kp a.fname{display:inline-block;padding:3px 0;margin:-3px 0;text-decoration:none}
.kp a.fname:hover{color:var(--accent);text-decoration:underline}
.kp-moments{color:var(--sec);font-size:12.5px;font-weight:500;margin-top:3px}

/* Breakdown tables: label, count, then the share as text with a thin bar
   beside it. The bar is decoration for scanning (aria-hidden); the number
   carries the information. */
.kp-dist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
/* Figures shrink to their content; the label takes what is left. */
.kp-dist thead th.num{width:1%;white-space:nowrap}
.kp-dist tbody th{overflow-wrap:normal;word-break:normal}
.kp-share{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
.kp-share .pct{min-width:48px;text-align:right;font-variant-numeric:tabular-nums;color:var(--sec);font-size:13.5px}
.kp-bar{width:96px;height:6px;flex:none;display:block}
.kp-bar .track{fill:var(--line-2)}
.kp-bar .fill{fill:var(--accent)}
.kp-sev{display:inline-flex;align-items:center;gap:9px}
.kp-sev .ov-dot{width:9px;height:9px}
.kp-empty{padding:8px 0}
.kp-empty .empty-note{margin:0;line-height:1.55}

@media (max-width:1080px){
  .kp .stats-open{flex-wrap:wrap}
  .kp .stats-open .st-item{flex:1 1 45%}
  .kp .stats-open .st-item:nth-child(3){border-left:0;padding-left:2px}
  .kp-dist{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .kp .stats-open .st-item{flex:1 1 100%;border-left:0;padding:14px 2px;border-top:1px solid var(--line-2)}
  .kp .stats-open .st-item:first-child{border-top:0}
  .kp td,.kp th,.kp td:first-child,.kp th:first-child,.kp td:last-child,.kp th:last-child{padding-left:8px;padding-right:8px}
  .kp td:first-child,.kp th:first-child{padding-left:16px}
  .kp td:last-child,.kp th:last-child{padding-right:16px}
  .kp-bar{display:none}
  .kp-share .pct{min-width:0}

  /* Evolução: one block per competência, each figure with its own label. */
  .kp-evo-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .kp-evo-table,.kp-evo-table tbody{display:block}
  .kp-evo-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 16px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
  .kp-evo-table tr:last-child{border-bottom:0}
  .kp .kp-evo-table th,.kp .kp-evo-table td{display:block;padding:0;border:0;text-align:left}
  .kp-evo-table th{grid-column:1 / -1}
  .kp-evo-table td::before{content:attr(data-label);display:block;color:var(--sec);font-size:12px;font-weight:600;margin-bottom:2px;white-space:normal}
}