/*
 * PilarDesk — sistema de design (densidade alta, estilo Movidesk).
 * Tudo derivado de tokens (CSS custom properties). `--color-primary` é o ponto de tema:
 * pode ser sobrescrito inline pelo layout a partir de AppSetting (Admin > Aparência).
 * Sem framework externo (coerente com produto self-hosted).
 */
:root {
  /* Paleta de marca (tema) */
  --color-primary: #1d4ed8;
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, white);
  --color-primary-ink: #ffffff;

  /* Neutros */
  --bg: #f1f5f9;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  /* Status (mais vivos) */
  --ok: #059669;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  --ok-soft: #d1fae5;
  --danger-soft: #fee2e2;
  --warn-soft: #fef3c7;
  --info-soft: #dbeafe;

  /* Tipografia (base compacta ~13px) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;

  /* Espaçamentos (escala apertada) */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;

  /* Raios e sombras */
  --radius-sm: 4px;
  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }

html { font-size: var(--fs-base); }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.45;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Topbar / navegação ---------- */
/* Shell com menu lateral persistente + área principal (estilo Movidesk). */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
  flex: 0 0 220px;
  width: 220px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-3);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; font-size: var(--fs-md); color: var(--ink); padding: 0 var(--sp-2) var(--sp-4); }
.brand img { max-height: 26px; max-width: 160px; display: block; }

.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a { color: var(--ink); font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-2); border-radius: var(--radius); }
.sidenav a:hover { background: var(--bg); text-decoration: none; }
.sidenav a.active { background: var(--color-primary); color: #fff; font-weight: 600; }
/* Divisor de seção do menu (ex.: "Administração"): único lugar com uppercase sutil — pequeno,
   discreto, sem o aspecto "gritado" dos rótulos de dados. */
.sidenav-group { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; margin: var(--sp-3) var(--sp-2) var(--sp-1); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--sp-5);
  height: 46px;
}
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .bc-sep { color: var(--line); }
.breadcrumb .bc-current { color: var(--ink); font-weight: 600; }
.userbox { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-xs); }

/* Ferramenta de trabalho (densidade alta): aproveita melhor a largura útil em telas largas,
   sem esticar demais a ponto de prejudicar a leitura. */
.container { max-width: 1600px; width: 100%; margin: var(--sp-5) auto; padding: 0 var(--sp-5); }

@media (max-width: 760px) {
  .app-shell { flex-direction: column; }
  .sidebar { flex-basis: auto; width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidenav { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
}

/* ---------- Flash ---------- */
.flash { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.flash-notice { background: var(--ok-soft); color: var(--ok); border: 1px solid #a7f3d0; }
.flash-alert { background: var(--danger-soft); color: var(--danger); border: 1px solid #fecaca; }
.error-fields { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); }
.error-fields li { margin-top: var(--sp-1); }
/* Estado (discreto) da última tentativa de emissão — informativo, não um alerta de erro. */
.last-attempt { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px dashed var(--line); font-size: var(--fs-sm); }

/* ---------- Títulos ---------- */
h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); font-weight: 650; }
h2 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-3); font-weight: 650; }
h3 { font-size: var(--fs-base); margin: var(--sp-4) 0 var(--sp-2); font-weight: 650; }

.pagehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-4); }
.pagehead h1, .pagehead h2 { margin: 0; }

/* ---------- Tabelas densas ---------- */
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: var(--fs-sm); }
th, td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
th { background: #f8fafc; font-size: var(--fs-xs); text-transform: none; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
tbody tr:hover { background: var(--color-primary-soft); }
tr:last-child td { border-bottom: none; }

/* ---------- Cards / painéis ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm); }
.card-tight { padding: var(--sp-3); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* ---------- Botões ---------- */
.btn, input[type="submit"], button.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border: none;
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
}
.btn:hover, input[type="submit"]:hover { text-decoration: none; background: var(--color-primary-hover); }
.btn-secondary { background: #eef2f6; color: var(--ink); }
.btn-secondary:hover { background: #e2e8f0; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #991b1b; }
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.linkbtn { background: none; border: none; color: var(--color-primary); cursor: pointer; padding: 0; font: inherit; font-size: var(--fs-sm); }
.linkbtn:hover { text-decoration: underline; }

/* Label + ação discreta na mesma linha (ex.: "Atribuir a mim" ao lado do label do responsável) */
.label-row { display: flex; align-items: baseline; gap: var(--sp-2); }
.label-row .assign-me { font-size: var(--fs-xs); margin-bottom: var(--sp-1); }

.actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* ---------- Formulários compactos ---------- */
form .field { margin-bottom: var(--sp-3); }
form label { display: block; font-weight: 600; margin-bottom: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); text-transform: none; letter-spacing: .02em; }
form input[type="text"], form input[type="email"], form input[type="password"],
form input[type="number"], form input[type="date"], form input[type="datetime-local"],
form input[type="color"], form select, form textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-sm);
  background: #fff;
  color: var(--ink);
}
form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}
form textarea { min-height: 64px; resize: vertical; }
form input[type="color"] { height: 34px; padding: 2px; }
form .check { display: flex; align-items: center; gap: var(--sp-2); }
form .check label { margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--ink); }
form .check input { width: auto; }
.hint { color: var(--muted); font-size: var(--fs-xs); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-4); }
.form-grid .full { grid-column: 1 / -1; }

.error-box { background: var(--danger-soft); border: 1px solid #fecaca; color: var(--danger); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.error-box ul { margin: var(--sp-1) 0 0 var(--sp-4); }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px var(--sp-3); border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: #e5e7eb; color: var(--ink); white-space: nowrap; letter-spacing: .01em; }
/* Prioridade — cores vivas e distinguíveis */
.badge-low { background: #cffafe; color: #0e7490; }
.badge-medium { background: #d1fae5; color: #047857; }
.badge-high { background: #fed7aa; color: #c2410c; }
.badge-critical { background: #fecaca; color: #b91c1c; }
.badge-internal { background: #fde68a; color: #92400e; }
.badge-public { background: #dbeafe; color: #1e40af; }
/* Status — badge colorido por estado */
.badge-status { display: inline-block; padding: 2px var(--sp-3); border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.status-new { background: #e0e7ff; color: #3730a3; }
.status-open { background: #dbeafe; color: #1d4ed8; }
.status-pending { background: #fef3c7; color: #b45309; }
.status-resolved { background: #d1fae5; color: #047857; }
.status-closed { background: #e2e8f0; color: #475569; }

/* ---------- Indicadores do painel ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.stat .num { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; }
.stat .lbl { color: var(--muted); font-size: var(--fs-xs); text-transform: none; letter-spacing: .03em; }

/* ---------- Login ---------- */
.login-wrap { max-width: 340px; margin: 8vh auto; }
.login-wrap .card { padding: var(--sp-6); }

/* Tela de entrada (landing) com dois caminhos: Acesso Interno / Área do Cliente. */
.landing { max-width: 760px; margin: 8vh auto; padding: 0 var(--sp-4); text-align: center; }
.landing-brand { margin-bottom: var(--sp-6); }
.landing-logo { max-height: 72px; max-width: 280px; }
.landing-name { margin: 0; font-size: 2rem; }
.landing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .landing-cards { grid-template-columns: 1fr; } }
.landing-card { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
  justify-content: center; min-height: 160px; padding: var(--sp-5); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; }
.landing-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.landing-card-title { font-size: 1.15rem; font-weight: 600; color: var(--color-primary); }
.landing-card-sub { font-size: var(--fs-sm); color: var(--muted, #6b7280); }
.landing-card-client .landing-card-title { color: var(--ok, #059669); }

/* ---------- Listas de definição ---------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; }

ul.tree, ul.tree ul { list-style: none; padding-left: var(--sp-4); }
ul.tree { padding-left: 0; }
ul.tree li { padding: 1px 0; }

/* ====================================================================== */
/* Tela de ticket — layout 2 colunas, abas e timeline unificada            */
/* ====================================================================== */
.ticket-grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 860px) { .ticket-grid { grid-template-columns: 1fr; } }

/* Linha/card inteiramente clicável (abre o registro). Os controles internos seguem com seu
   comportamento; isto só amplia a área de clique. */
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: var(--panel-2, #f3f4f6); }
.kanban-card.clickable-row { cursor: pointer; }

.ticket-aside .card { padding: var(--sp-4); }
.ticket-aside .dl { grid-template-columns: 1fr; gap: var(--sp-1); }
.ticket-aside .dl dt { font-size: var(--fs-xs); text-transform: none; letter-spacing: .02em; margin-top: var(--sp-2); }
.ticket-aside .dl dd { font-weight: 500; }

.ticket-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.ticket-header .tnum { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
.ticket-header h1 { font-size: var(--fs-lg); margin: 0; }
.status-quick { display: flex; align-items: center; gap: var(--sp-2); }
.status-quick select { width: auto; }

.sla-block { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.sla-line { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.sla-overdue { color: var(--danger); font-weight: 700; }

/* Abas Pública / Interna */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3); }
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab.tab-internal[aria-selected="true"] { color: var(--warn); border-bottom-color: var(--warn); }

.action-box { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-5); background: var(--panel); box-shadow: var(--shadow-sm); }
.action-box.is-internal { background: var(--warn-soft); border-color: #fde68a; }

/* Cronômetro numa linha: Início · Fim · Agora · Duração · Modo. Quebra graciosamente. */
.timer { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.timer .field { margin-bottom: 0; }
.timer input[type="datetime-local"], .timer select { width: auto; min-width: 0; }
.timer .duration { font-size: var(--fs-md); font-weight: 700; padding: var(--sp-2) var(--sp-3); background: var(--color-primary-soft); border-radius: var(--radius-sm); white-space: nowrap; line-height: 1.2; }

/* Timeline unificada */
.timeline { display: flex; flex-direction: column; gap: var(--sp-3); }
.tl-item { border: 1px solid var(--line); border-left: 3px solid var(--color-primary); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); background: var(--panel); }
.tl-item.internal { border-left-color: var(--warn); background: var(--warn-soft); }
.tl-item.is-entry { border-left-color: var(--ok); }
.tl-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.tl-head .author { color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.tl-body { font-size: var(--fs-sm); white-space: pre-wrap; }
.tl-entry { display: inline-flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); background: #f8fafc; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm); flex-wrap: wrap; }
.tl-entry strong { color: var(--ink); }

/* Autocomplete (Solicitante) */
.ac { position: relative; }
.ac-results { position: absolute; z-index: 20; left: 0; right: 0; margin: 2px 0 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); max-height: 240px; overflow: auto; box-shadow: var(--shadow-sm); }
.ac-item { padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: var(--fs-sm); }
.ac-item:hover { background: var(--color-primary-soft); }

/* Card rico de contato no dropdown (B3): 3 linhas — nome — empresa / e-mail / telefone */
.ac-card { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); margin: var(--sp-1); }
.ac-card:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }
.ac-card-title { font-weight: 600; }
.ac-card-sub { font-size: var(--fs-xs); color: var(--muted); }

/* Campos editáveis inline (densos) + feedback discreto */
.inline-field { width: 100%; }
.inline-field select, .inline-field input[type="text"] { width: 100%; }
.inline-saved { color: var(--ok); font-size: var(--fs-xs); }
.inline-error { color: var(--danger); font-size: var(--fs-xs); margin-top: 2px; }
.inline-row { margin-bottom: var(--sp-3); }
.inline-row .lbl { display: block; font-size: var(--fs-xs); text-transform: none; letter-spacing: .02em; color: var(--muted); margin-bottom: 2px; }
.inline-row form { margin: 0; }
.ac-input { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-sm); }

/* Cabeçalho do ticket: assunto editável inline (grande) */
.ticket-title { flex: 1; }
.subject-input { width: 100%; font-size: var(--fs-lg); font-weight: 650; border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2); background: transparent; }
.subject-input:hover { border-color: var(--line); }
.subject-input:focus { border-color: var(--color-primary); background: #fff; outline: none; }

/* Cards de solicitante (estilo Movidesk) */
.requester-cards { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.req-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); background: #fff; }
.req-card.is-primary { border-color: var(--color-primary); background: var(--color-primary-soft); }
.req-head { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; }
.req-meta { font-size: var(--fs-xs); margin-top: var(--sp-1); display: flex; flex-direction: column; gap: 1px; }
.req-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.req-actions form { margin: 0; }

/* Lista de Cc */
.cc-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: 2px; }
.cc-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); padding: 2px 0; }
.cc-item form { margin: 0; }

/* Ações alinhadas à direita */
.actions-end { justify-content: flex-end; }

/* ====================================================================== */
/* Visualizações: lateral + lista/kanban                                   */
/* ====================================================================== */
.views-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 860px) { .views-layout { grid-template-columns: 1fr; } }

.views-sidebar h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.views-list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: 1px; }
.views-list li { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.views-list li.active { background: var(--color-primary-soft); }
.views-list li a { flex: 1; color: var(--ink); }
.views-list li a:hover { color: var(--color-primary); }
.views-del { color: var(--muted); font-size: var(--fs-xs); }
.views-global { background: #e0e7ff; color: #3730a3; }
.save-view summary { cursor: pointer; font-size: var(--fs-xs); color: var(--color-primary); }
.save-view form { margin-top: var(--sp-2); }

.toggle { display: inline-flex; gap: 2px; }

/* Dashboard: cards clicáveis + barras de SLA */
.stat-link { display: block; color: inherit; }
.stat-link:hover { border-color: var(--color-primary); text-decoration: none; }
.sla-bar-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.sla-bar-label { width: 130px; font-size: var(--fs-sm); color: var(--muted); }
.sla-bar { flex: 1; display: flex; height: 22px; border-radius: var(--radius-sm); overflow: hidden; background: #f1f5f9; }
.sla-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-xs); font-weight: 600; min-width: 18px; }
.seg-overdue { background: var(--danger); }
.seg-soon { background: var(--warn); }
.seg-on-track { background: var(--ok); }
.sla-legend { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.sla-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* Kanban (sem drag) */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); }
.kanban-col { background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-2); }
.kanban-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); text-transform: none; letter-spacing: .03em; color: var(--muted); font-weight: 600; margin-bottom: var(--sp-2); }
.kanban-cards { display: flex; flex-direction: column; gap: var(--sp-2); }
.kanban-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-2); color: var(--ink); }
.kanban-card:hover { border-color: var(--color-primary); text-decoration: none; }
.kanban-card-head { display: flex; align-items: center; justify-content: space-between; }
.kanban-card-head .tnum { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.kanban-card-subject { font-size: var(--fs-sm); font-weight: 600; margin: var(--sp-1) 0; }
.kanban-card-meta { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-xs); color: var(--muted); }
.kanban-card-sla { margin-top: var(--sp-1); font-size: var(--fs-xs); }

/* Utilitários mínimos */
.muted { color: var(--muted); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.mt-2 { margin-top: var(--sp-3); }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* Indicador de franquia acima do título do ticket */
.franchise-bar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); background: var(--color-primary-soft); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); }
.franchise-bar form { margin: 0; }
.fb-contract { display: flex; align-items: center; gap: var(--sp-2); }
.fb-contract .lbl { color: var(--muted); font-size: var(--fs-xs); text-transform: none; letter-spacing: .02em; }
.fb-balances { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.fb-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 2px var(--sp-3); border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); font-size: var(--fs-xs); white-space: nowrap; }
.fb-pill .fb-type { font-weight: 700; }
.fb-pill.fb-exceeded { border-color: var(--danger); background: var(--danger-soft); }
.fb-over { color: var(--danger); font-weight: 700; }
.row-exceeded td { background: var(--danger-soft); }

/* Chips de solicitante na criação do ticket */
.requester-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.req-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-3); border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); font-size: var(--fs-xs); }
.req-chip.is-primary { border-color: var(--color-primary); background: var(--color-primary-soft); font-weight: 600; }
.chip-x { background: none; border: none; cursor: pointer; color: var(--muted); font-size: var(--fs-xs); padding: 0; }
.chip-x:hover { color: var(--danger); }

/* Integrações (C6): grid de cards */
.integration-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.integration-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }

/* Date-range com presets (B7): chips discretos acima dos campos DE/PARA */
.date-range { grid-column: 1 / -1; }
.date-presets { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.date-presets .chip { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 2px 10px; font-size: var(--fs-xs); color: var(--muted); cursor: pointer; }
.date-presets .chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.date-fields { display: flex; gap: var(--sp-3); }
.date-fields > div { flex: 1; }

/* Ações da timeline (excluir ação) */
.tl-actions { margin-top: var(--sp-2); }
.tl-actions form { display: inline; margin: 0; }

.prewrap { white-space: pre-wrap; }

/* Seletor múltiplo de dias da semana (faixas de tipo de hora). */
.weekday-picker { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); cursor: pointer; }
.wd-chip input { margin: 0; }

/* Controles do kanban (agrupamento + esconder vazias) dentro do form de filtros. */
.filter-kanban-controls { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-3); }
.filter-kanban-controls .kanban-group-toggle { border: none; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--sp-3); }
.filter-kanban-controls .kanban-group-toggle legend { float: left; padding: 0; margin-right: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); text-transform: none; letter-spacing: .03em; }
.filter-kanban-controls label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.filter-kanban-controls input[type="radio"], .filter-kanban-controls input[type="checkbox"] { margin: 0; }

/* Bundles ativos no painel do ticket (abaixo do indicador de franquia). */
.active-bundles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.active-bundles .ab-title { font-size: var(--fs-xs); color: var(--muted); text-transform: none; letter-spacing: .03em; }
.active-bundles .ab-pill { background: var(--ok-soft); color: #065f46; border: 1px solid #a7f3d0; border-radius: 999px; padding: 2px var(--sp-3); font-size: var(--fs-xs); }

/* Editor de macro: formulário + painel de variáveis ao lado. */
.macro-editor { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.macro-editor-main { flex: 1 1 420px; min-width: 0; }
.macro-vars-panel { flex: 0 0 280px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }
.macro-vars-panel .var-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.macro-vars-panel .var-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.macro-vars-panel code { font-size: var(--fs-xs); background: var(--bg); padding: 1px 4px; border-radius: var(--radius-sm); }
@media (max-width: 760px) { .macro-vars-panel { flex-basis: 100%; } }

/* Painel de filtros da listagem de tickets. */
.filter-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.filter-panel > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); }
.filter-grid select[multiple] { min-height: 90px; }
.save-view-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Editor Quill (Caminho A): superfície de edição da caixa de ação e da assinatura do agente.
   O <textarea> fallback fica oculto quando o JS assume; sem JS, ele aparece como campo simples. */
.quill-field .quill-editor { background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); min-height: 140px; }
.quill-field .ql-toolbar { background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.quill-field .ql-editor { min-height: 140px; font-size: var(--fs-sm); }
.quill-field .ql-editor img { max-width: 100%; height: auto; }
.quill-field textarea.quill-fallback[hidden] { display: none; }
/* Imagens embutidas na timeline (conteúdo Action Text renderizado). */
.tl-body .trix-content img, .tl-body figure.attachment img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.tl-body figure.attachment { margin: var(--sp-2) 0; }
/* O CSS do Trix força text-align:center nos anexos (.attachment--preview), centralizando a imagem da
   assinatura na timeline. Anulamos para a imagem SEGUIR o alinhamento do parágrafo (default esquerda;
   centro/direita se o conteúdo definir explicitamente). */
.tl-body .trix-content .attachment--preview, .tl-body figure.attachment--preview { width: auto; text-align: inherit; }

/* Anexos da ação: lista de arquivos escolhidos (com remover) e anexos exibidos na timeline. */
.file-chips { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.file-chip { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px var(--sp-3); font-size: var(--fs-xs); }
.file-chip .chip-x { background: none; border: 0; cursor: pointer; color: var(--muted); }
.attach-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.attach-item .attach-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.attach-item .attach-size { color: var(--muted); font-size: var(--fs-xs); }

/* Perfil do agente: avatar no topo (link do usuário) e prévia no formulário. */
.userbox .user-link { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--muted); }
.userbox .user-link:hover { text-decoration: none; color: var(--ink); }
.avatar-mini { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-soft); color: var(--color-primary); font-size: 10px; font-weight: 700; }
.avatar-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: var(--sp-2); border: 1px solid var(--line); }

/* Painel consolidado de anexos do ticket (abertura + ações). */
.attachments-panel > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.all-attach-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.all-attach-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.all-attach-item .attach-origin { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.attach-title { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }

/* Badge de anexos na listagem/kanban (clipe + número). */
.attach-badge { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); color: var(--muted); }
.attach-badge .attach-badge-num { font-weight: 600; }

/* E-mail recebido renderizado em iframe sandbox (HTML rico e seguro). */
.email-html { width: 100%; }
.email-iframe { width: 100%; border: 0; min-height: 60px; background: #fff; display: block; }
.email-images-blocked { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); background: var(--warn-soft); border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }

/* RBAC: matriz de permissões (recurso × ação). */
.perm-matrix { font-size: var(--fs-sm); }
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; }

/* Badge "SLA pausado" na coluna Resolução até (status que pausa o SLA). */
.badge-paused { background: var(--warn-soft); color: #92400e; border: 1px solid #fde68a; }

/* CRM — pipeline (oportunidades), atividades, alternância de visão. */
.view-toggle { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }
.inline-move { display: flex; gap: var(--sp-2); align-items: center; }
.timeline-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.timeline-item { border-left: 2px solid var(--line); padding: var(--sp-1) 0 var(--sp-2) var(--sp-3); }
.timeline-item-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.timeline-item-meta { font-size: var(--fs-xs); margin-top: 2px; }

/* Projetos — barra de progresso e checklist. */
.progress { background: #e5e7eb; border-radius: 999px; height: 14px; overflow: hidden; min-width: 120px; }
.progress-fill { background: var(--color-primary); color: #fff; font-size: 10px; line-height: 14px; text-align: center; height: 100%; white-space: nowrap; }
.progress-fill.is-over { background: var(--color-critical, #dc2626); }
.checklist { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.checklist li { display: flex; align-items: center; gap: var(--sp-2); }
.checklist .done { text-decoration: line-through; color: var(--muted); }

/* Portal do Cliente — topbar e área. */
.portal-topbar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); background: var(--panel); border-bottom: 1px solid var(--line); }
.portal-topbar .brand img { max-height: 34px; }
.portal-nav { display: flex; gap: var(--sp-4); flex: 1; }
.portal-nav a { font-size: var(--fs-sm); font-weight: 600; }
.portal-user { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.portal-main { max-width: 980px; margin: var(--sp-5) auto; }
.portal-access-box { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); margin: var(--sp-3) 0; }
.portal-access-box legend { font-weight: 700; padding: 0 var(--sp-2); }

/* Painéis configuráveis (widgets) e relatórios. */
.dashboard-switch { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.widget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.widget { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); cursor: grab; }
.widget-small { grid-column: span 1; }
.widget-medium { grid-column: span 2; }
.widget-large { grid-column: span 4; }
.widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.widget-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }
.widget-actions .linkbtn { padding: 0 4px; }
.widget-number { font-size: 2rem; font-weight: 800; color: var(--color-primary); }
.widget-list { list-style: none; padding: 0; margin: 0; }
.widget-list li { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.report-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.report-cards .card { text-align: center; }
.report-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 900px) { .widget-grid { grid-template-columns: repeat(2, 1fr); } .widget-large, .widget-medium { grid-column: span 2; } }