/* =====================================================
   ferdesk-ui.css — camada de COMPONENTES do design-system Fischer.
   Assenta por cima dos tokens de identidade (fischer-tokens.css,
   ou o portal.css dentro do FerHelpDesk/Central de Relatório).

   Todo componente consome var(--...) — nunca cores fixas — para
   respeitar temas/identidade sobrescritos em runtime.
   Origem: FerHelpDesk (redesign 2026-07-11).
   ===================================================== */

/* ---- KPIs ---- */
.fd-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
.fd-kpi{ display:block; text-decoration:none; color:inherit; background:var(--fer-branco); border:1px solid var(--fer-borda);
  border-left-width:4px; border-radius:10px; padding:12px 14px; transition:transform .12s, box-shadow .12s; }
.fd-kpi:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); color:inherit; }
.fd-kpi .fd-kpi-n{ font-size:1.7rem; font-weight:700; line-height:1; }
.fd-kpi .fd-kpi-l{ font-size:.74rem; color:#6c757d; margin-top:4px; }
.fd-kpi.total{ border-left-color:var(--fer-azul); }
.fd-kpi.novos{ border-left-color:#0d6efd; }
.fd-kpi.risco{ border-left-color:var(--sla-vencido-bg); }
.fd-kpi.sematend{ border-left-color:var(--sla-emrisco-bg); }
.fd-kpi.meus{ border-left-color:var(--sla-noprazo-bg); }
@media (max-width:900px){ .fd-kpis{ grid-template-columns:repeat(2,1fr); } }

/* ---- Chips de filtro rápido ---- */
.fd-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.fd-chip{ font-size:.78rem; padding:5px 12px; border-radius:999px; border:1px solid var(--fer-borda);
  background:var(--fer-branco); color:inherit; text-decoration:none; cursor:pointer; transition:.12s; }
.fd-chip:hover{ border-color:var(--fer-azul); color:var(--fer-azul); }
.fd-chip.on{ background:var(--fer-azul); color:#fff; border-color:var(--fer-azul); }

/* ---- Linha de tabela clicável ---- */
tr.fd-rowlink{ cursor:pointer; }
tr.fd-rowlink:hover > *{ background-color:var(--lista-hover-bg, rgba(0,87,168,.08)) !important; }

/* ---- Tabela padrão (listagens dentro de .fd-panel-bd.flush) ---- */
.fd-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.fd-table th{ text-align:left; padding:10px 14px; color:var(--fer-navy); font-weight:600;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--fer-borda); }
.fd-table td{ padding:10px 14px; border-bottom:1px solid var(--fer-borda); vertical-align:top; }
.fd-table tbody tr:last-child td{ border-bottom:none; }

/* ---- Hero (cabeçalho em destaque) ---- */
.fd-hero{ background:linear-gradient(120deg,var(--fer-navy),var(--fer-azul)); color:#fff; border-radius:16px;
  padding:22px 26px; box-shadow:0 10px 26px rgba(27,42,74,.28); }
.fd-hero .fd-hero-num{ font-size:.82rem; opacity:.8; letter-spacing:.5px; text-transform:uppercase; }
.fd-hero h1{ font-size:1.5rem; font-weight:700; margin:4px 0 12px; }
.fd-hero .fd-metastrip{ display:flex; gap:22px; flex-wrap:wrap; margin-top:12px; }
.fd-hero .fd-metastrip .k{ font-size:.72rem; text-transform:uppercase; opacity:.7; }
.fd-hero .fd-metastrip .v{ font-weight:600; }

/* ---- Abas (nav) ---- */
.fd-tabs{ display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--fer-borda); margin:18px 0; }
.fd-tab{ padding:11px 16px; font-size:.9rem; font-weight:600; color:#6c757d; background:none; border:none;
  border-bottom:3px solid transparent; cursor:pointer; transition:.12s; }
.fd-tab:hover{ color:var(--fer-azul); }
.fd-tab.on{ color:var(--fer-azul); border-bottom-color:var(--fer-azul); }
.fd-tabpanel{ display:none; }
.fd-tabpanel.on{ display:block; }

/* ---- Rail lateral sticky ---- */
.fd-grid{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
.fd-rail{ position:sticky; top:16px; }
@media (max-width:992px){ .fd-grid{ grid-template-columns:1fr; } .fd-rail{ position:static; } }

/* ---- Avatares ---- */
.fd-av{ width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--fer-azul),#3b8fd6); flex-shrink:0; }
.fd-av.obs{ background:linear-gradient(135deg,#0b6b82,#38a9c2); }
.fd-av.atr{ background:linear-gradient(135deg,#1c6b3c,#49aa6e); }
.fd-avstack{ display:flex; align-items:center; }
.fd-avstack .fd-av{ border:2px solid #fff; margin-left:-8px; }
.fd-avstack .fd-av:first-child{ margin-left:0; }

/* ---- Timeline (histórico) ---- */
.fd-tl{ position:relative; padding-left:26px; }
.fd-tl::before{ content:''; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:#e6eaef; }
.fd-tl-item{ position:relative; margin-bottom:16px; }
.fd-tl-item::before{ content:''; position:absolute; left:-21px; top:3px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--fer-azul); }
.fd-tl-item.ok::before{ border-color:var(--sla-noprazo-bg); }
.fd-tl-item.task::before{ border-color:#0b6b82; }
.fd-tl-bubble{ background:#f7f9fb; border:1px solid #eceff2; border-radius:10px; padding:10px 14px; transition:.12s; }
.fd-tl-item:hover .fd-tl-bubble{ background:#eef5fd; border-color:#cfe0f3; }
.fd-tl-meta{ font-size:.76rem; color:#8a93a0; margin-bottom:3px; }

/* ---- Autores e Envolvidos (3 papéis) ---- */
.fd-actors{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:768px){ .fd-actors{ grid-template-columns:1fr; } }
/* Sem overflow:hidden aqui — ele cortaria o dropdown .ator-lista (position:absolute).
   Os cantos arredondados do topo ficam no próprio cabeçalho (.fd-actor-cap). */
.fd-actor-col{ border:1px solid var(--fer-borda); border-radius:12px; background:var(--fer-branco);
  transition:box-shadow .14s, transform .14s; }
.fd-actor-col:hover{ box-shadow:0 8px 20px rgba(27,42,74,.10); transform:translateY(-2px); }
.fd-actor-cap{ padding:9px 12px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  border-radius:11px 11px 0 0; display:flex; align-items:center; gap:6px; color:#fff; }
.fd-actor-col.req .fd-actor-cap{ background:var(--fer-azul); }
.fd-actor-col.obs .fd-actor-cap{ background:#0b6b82; }
.fd-actor-col.atr .fd-actor-cap{ background:var(--sla-noprazo-bg); }
.fd-actor-cap .cnt{ margin-left:auto; background:rgba(255,255,255,.25); border-radius:999px; padding:1px 8px; }
.fd-actor-body{ padding:10px 12px; }
.fd-chip-person{ display:flex; align-items:center; gap:8px; background:#f4f7fa; border:1px solid #e7edf2;
  border-radius:999px; padding:4px 6px 4px 4px; margin-bottom:6px; transition:background .12s; }
.fd-chip-person:hover{ background:#e9f2fc; }
.fd-chip-person .nm{ font-size:.82rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-chip-person .rm{ color:#c4ccd6; border:none; background:none; padding:0 4px; transition:.12s; cursor:pointer; }
.fd-chip-person:hover .rm{ color:var(--sla-vencido-bg); }

/* ---- Painel genérico (bloco cabeçalho + corpo) — reusável app-wide ---- */
.fd-panel{ background:var(--fer-branco); border:1px solid var(--fer-borda); border-radius:12px;
  box-shadow:0 2px 10px rgba(27,42,74,.05); margin-bottom:16px; }
.fd-panel > .fd-panel-hd{ padding:10px 14px; border-bottom:1px solid var(--fer-borda);
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fd-panel > .fd-panel-hd .t{ font-weight:600; color:var(--fer-navy); }
.fd-panel > .fd-panel-hd .sub{ font-size:.76rem; color:#8a93a0; font-weight:400; }
.fd-panel > .fd-panel-bd{ padding:12px 14px; }
.fd-panel > .fd-panel-bd.flush{ padding:0; }               /* tabelas/listas ocupam a borda */
.fd-panel-empty{ padding:18px 14px; text-align:center; color:#8a93a0; font-size:.85rem; }

/* ---- Variantes semânticas de fd-kpi p/ o Painel operacional ----
   SLA usa variáveis de tema; hoje/não-atrib mantêm as cores já usadas hoje no Painel. */
.fd-kpi.sla-vencido{ border-left-color:var(--sla-vencido-bg); }
.fd-kpi.sla-risco{ border-left-color:var(--sla-emrisco-bg); }
.fd-kpi.nao-atrib{ border-left-color:#0dcaf0; }
.fd-kpi.hoje{ border-left-color:#0d6efd; }
.fd-kpi.minha{ border-left-color:var(--sla-noprazo-bg); }

/* ---- Modal ----
   Gotcha: NUNCA overflow:hidden no .fd-modal para arredondar os cantos — um
   dropdown/autocomplete absoluto dentro do modal seria recortado e sumiria
   (mesmo bug já visto em .fd-actor-cap, commit 4555b6c). Arredonde no próprio
   cabeçalho (.fd-modal-hd) em vez do card. */
.fd-modal-backdrop{
  position:fixed; inset:0; background:rgba(27,42,74,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 16px; z-index:1050; overflow-y:auto;
}
.fd-modal{
  background:var(--fer-branco); border:1px solid var(--fer-borda);
  border-radius:12px; box-shadow:0 12px 40px rgba(27,42,74,.28);
  width:100%; max-width:1100px;
}
.fd-modal-hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--fer-borda);
  border-radius:11px 11px 0 0; background:var(--fer-cinza);
}
.fd-modal-hd .t{ font-weight:600; color:var(--fer-navy); }
.fd-modal-x{
  border:0; background:transparent; font-size:1.4rem; line-height:1;
  color:var(--fer-navy); cursor:pointer; transition:opacity .12s;
}
.fd-modal-x:hover{ opacity:.6; }
.fd-modal-bd{ padding:18px; }
.fd-modal-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:992px){ .fd-modal-cols{ grid-template-columns:1fr; } }
.fd-kv{ width:100%; font-size:.9rem; }
.fd-kv td{ padding:3px 0; vertical-align:top; }

/* ---- Formulário público (Canal de Denúncia e afins) ---- */
.fd-field{ margin-bottom:16px; }
.fd-field > label{ display:block; font-weight:600; color:var(--fer-navy); font-size:.88rem; margin-bottom:6px; }
.fd-input{
  width:100%; box-sizing:border-box; font:inherit; color:var(--pref-color-corpo);
  background:var(--fer-branco); border:1px solid var(--fer-borda); border-radius:8px;
  padding:9px 12px; transition:border-color .12s, box-shadow .12s;
}
.fd-input:focus{ outline:none; border-color:var(--fer-azul); box-shadow:0 0 0 3px rgba(0,87,168,.15); }
.fd-input.input-validation-error{ border-color:var(--sla-vencido-bg); }
textarea.fd-input{ resize:vertical; min-height:5rem; }
select.fd-input{ cursor:pointer; }

.fd-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--fer-azul); color:var(--fer-branco); border:1px solid var(--fer-azul); border-radius:8px;
  font:inherit; font-weight:600; padding:10px 22px; cursor:pointer; transition:filter .12s, box-shadow .12s;
}
.fd-btn-primary:hover{ filter:brightness(.92); }
.fd-btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,87,168,.25); }

.fd-form-errors{ margin-bottom:16px; }
.fd-form-errors ul{ margin:0; padding:12px 16px; list-style:none; }
.fd-form-errors:has(li){
  background:rgba(220,53,69,.08); border:1px solid var(--sla-vencido-bg); border-radius:8px;
}
.fd-form-errors li{ color:var(--sla-vencido-bg); font-size:.85rem; }
.fd-form-errors li + li{ margin-top:4px; }
.field-validation-error{ display:block; color:var(--sla-vencido-bg); font-size:.8rem; margin-top:4px; }
.fd-kv td:first-child{ color:#6b7785; width:42%; }