/* ============================================================
   TechDesk — Tema "HB" (camada de override sobre style.css)
   Carregue DEPOIS do style.css. Adota o visual do protótipo
   (cards, KPIs, tabelas, pills, botões, tipografia) mantendo as
   cores da marca. Para reverter: remova o <link> deste arquivo.
   ============================================================ */

:root {
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --radius: 6px;
  --radius-lg: 10px;
  /* fundo creme/rosado -> cinza neutro frio */
  --cream: #E8EDEF;
  --cream-2: #EEF2F3;
  --row-hover: #F2F5F6;
  --th-strip: #E8EDEF;
  --shadow-sm: 0 1px 2px rgba(0,54,73,0.05);
  --shadow: 0 2px 10px rgba(0,54,73,0.07);
  --line: #CCD7DB;
}

/* ---------- ÍCONES (sprite Tabler) ---------- */
.ico { width: 16px; height: 16px; stroke-width: 2; stroke: currentColor; fill: none;
       stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }

/* ---------- TIPOGRAFIA ---------- */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.kpi-val, .stat-value, .kanban-card-id, .rel-tk-top,
.detail-meta-value, .history-meta-time {
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

/* ---------- CARDS ---------- */
.card, .stat-card, .kpi-card, .kanban-col {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card-header { border-bottom: 1px solid var(--line); }
.card-title { font-weight: 600; letter-spacing: -0.01em; }

/* ---------- KPI / STAT CARDS (barrinha de acento à esquerda) ---------- */
.kpi-card, .stat-card { position: relative; overflow: hidden; }
.kpi-card::before, .stat-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--petrol, #003649);
}
.kpi-card.accent::before, .stat-card.accent::before { background: var(--gold, #E75C34); }
.kpi-card.ok::before, .stat-card.ok::before { background: #1E8E5A; }
.kpi-card.alert::before, .stat-card.alert::before { background: #C0392B; }
.kpi-lbl, .stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.kpi-val, .stat-value { font-size: 28px; font-weight: 600; }

/* ---------- BOTÕES ---------- */
.btn { border-radius: var(--radius) !important; font-weight: 500; gap: 7px;
       display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.btn-primary { background: var(--petrol, #003649); color: #fff; }
.btn-primary:hover { filter: brightness(1.12); }
.btn-gold, .btn-success { background: var(--gold, #E75C34) !important; color: #fff !important; border-color: var(--gold, #E75C34) !important; }
.btn-gold:hover, .btn-success:hover { background: #C04020 !important; border-color: #C04020 !important; color: #fff !important; }
.btn-secondary, .btn-ghost { background: #fff; color: var(--text, #003649); border: 1px solid var(--line); }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--petrol, #003649); }
.btn-danger { background: #C0392B; color: #fff; }
.btn-sm { padding: 6px 11px; font-size: 12px; }

/* ---------- INPUTS / FILTROS ---------- */
.form-control, .filter-bar input, .filter-bar select, .search-wrap input {
  border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
  font-family: 'Inter', sans-serif;
}
.form-control:focus, .filter-bar input:focus, .filter-bar select:focus, .search-wrap input:focus {
  outline: none; border-color: var(--petrol, #003649) !important;
  box-shadow: 0 0 0 3px rgba(0,54,73,0.08) !important;
}

/* ---------- TABELAS ---------- */
table { border-collapse: collapse; width: 100%; }
thead th {
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; font-weight: 500;
  color: #809BA4; background: var(--th-strip); border-bottom: 1px solid var(--line);
  text-align: left; padding: 10px 16px;
}
tbody td { border-bottom: 1px solid var(--line); padding: 12px 16px; vertical-align: middle; }
tbody tr:hover { background: var(--row-hover); }

/* ---------- PILLS DE STATUS (bolinha + fundo suave) ---------- */
.status-chip, .badge, .badge-dot, .role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px !important; font-size: 11px; font-weight: 500; padding: 3px 9px;
}
.status-chip::before, .badge-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor;
}
.status-open        { background: #E8EDEF; color: #4D7280; }
.status-progress    { background: #FCEFD9; color: #B86A12; }
.status-waiting,
.status-waiting-admin { background: #FCEFD9; color: #B86A12; }
.status-waiting-user  { background: #E8EDEF; color: #4D7280; }
.status-resolved,
.status-closed      { background: #E4F3EB; color: #1E8E5A; }

/* ---------- ABAS ---------- */
.detail-tab { border-bottom: 2px solid transparent; font-weight: 500; }
.detail-tab.active { border-bottom-color: var(--gold, #E75C34); color: var(--petrol, #003649); }

/* ---------- TOPBAR / NAV ---------- */
.topbar { background: var(--petrol, #003649); }
.nav-btn { border-radius: 6px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.nav-btn:hover { background: rgba(255,255,255,0.08); }
.nav-btn.active { background: rgba(255,255,255,0.12); }
.search-wrap .search-icon { color: #809BA4; }

/* ---------- MODAL ---------- */
.modal { border-radius: var(--radius-lg) !important; }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); }
.modal-title { font-weight: 600; letter-spacing: -0.01em; }

/* ---------- TOAST (canto inferior direito, fundo escuro) ---------- */
.toast { border-radius: var(--radius) !important; box-shadow: 0 8px 30px rgba(0,54,73,0.18); }

/* ---------- KANBAN ---------- */
.kanban-col-header { background: var(--th-strip); border-bottom: 1px solid var(--line);
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
.kanban-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.kanban-card-id { font-family: var(--mono); }

/* ---------- ESTADO VAZIO ---------- */
.empty-state { color: #809BA4; }
.empty-icon { opacity: 0.5; }

/* ===== Revisão pós-print (consistência) ===== */
/* Hover sem "pulo" — uniformiza todos os botões */
.btn:hover { transform: none !important; }
/* Faixas que estavam creme/bege (#F4E7D7 fixo no style.css) -> neutro */
.filter-bar { background: #EEF2F3 !important; }
.card-header { background: #FFFFFF !important; }
#admin-filtros-wrap { background: transparent !important; }
/* Ícone no menu herda a cor do topbar (branco/creme) */
.nav-btn .ico { width: 15px; height: 15px; }