/* ================================================================
   Suporte Técnico — Design System
   ================================================================ */

/* ---- Variables ---- */
:root {
  --primary:       #4F46E5;
  --primary-dark:  #4338CA;
  --primary-light: #EEF2FF;
  --success:       #10B981;
  --success-light: #D1FAE5;
  --warning:       #F59E0B;
  --warning-light: #FEF3C7;
  --danger:        #EF4444;
  --danger-light:  #FEE2E2;
  --info:          #3B82F6;
  --info-light:    #DBEAFE;
  --neutral:       #6B7280;
  --neutral-light: #F3F4F6;

  --bg:            #F4F6FB;
  --surface:       #FFFFFF;
  --border:        #E5E7EB;
  --text:          #111827;
  --text-muted:    #6B7280;

  --sidebar-w:          240px;
  --sidebar-collapsed-w: 62px;
  --topbar-h:      60px;
  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.12);
  --transition:    0.18s ease;
  --font:          'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }
button, input, select, textarea { font-family:inherit; font-size:inherit; }

/* ================================================================
   AUTH LAYOUT
================================================================ */
body.layout-auth {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:20px;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}
.auth-wrapper { width:100%; max-width:420px; }
.auth-card {
  background:var(--surface); border-radius:16px; padding:40px 36px;
  box-shadow:var(--shadow-lg); animation:fadeUp .3s ease;
}
.auth-logo {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-bottom:28px; color:var(--primary); text-align:center;
}
.auth-logo h1 { font-size:20px; font-weight:700; color:var(--text); }
.auth-logo-img { max-height:48px; max-width:200px; object-fit:contain; }
.auth-logo-sub {
  font-size:13px; font-weight:600; color:var(--text-muted);
  letter-spacing:.04em; text-transform:uppercase;
  margin-top:2px;
}
.auth-title { font-size:22px; font-weight:700; margin-bottom:4px; }
.auth-subtitle { color:var(--text-muted); font-size:14px; margin-bottom:24px; }
.auth-back { text-align:center; margin-top:20px; color:var(--text-muted); font-size:14px; }

/* ================================================================
   APP LAYOUT
================================================================ */
.app-wrapper { display:flex; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width:var(--sidebar-w); background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100;
  transition:transform var(--transition);
}
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; color:var(--primary);
  font-weight:700; font-size:15px; border-bottom:1px solid var(--border);
  min-height:var(--topbar-h);
}
.sidebar-logo {
  max-height:36px; max-width:160px; width:auto; object-fit:contain;
}
.sidebar-logo-icon { color:var(--primary); flex-shrink:0; }
.sidebar-brand-text { font-weight:700; font-size:15px; color:var(--text); }
.sidebar-nav {
  flex:1; overflow-y:auto; padding:12px 10px;
  display:flex; flex-direction:column; gap:2px;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--text-muted); font-weight:500; font-size:14px;
  transition:background var(--transition), color var(--transition);
  white-space:nowrap;
}
.nav-item:hover, .nav-item.active {
  background:var(--primary-light); color:var(--primary);
  text-decoration:none;
}
.nav-item.active { font-weight:600; }

.sidebar-footer {
  padding:14px 16px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.user-info { display:flex; align-items:center; gap:10px; overflow:hidden; }
.avatar {
  width:34px; height:34px; border-radius:50%; background:var(--primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; flex-shrink:0;
}
.user-name { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:11px; color:var(--text-muted); text-transform:capitalize; }
.btn-logout {
  color:var(--text-muted); padding:6px; border-radius:var(--radius-sm);
  display:flex; align-items:center; transition:color var(--transition), background var(--transition);
}
.btn-logout:hover { color:var(--danger); background:var(--danger-light); text-decoration:none; }

/* ---- Main content ---- */
.main-content {
  flex:1; margin-left:var(--sidebar-w);
  display:flex; flex-direction:column; min-height:100vh;
}
.topbar {
  height:var(--topbar-h); background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:0 24px;
  position:sticky; top:0; z-index:50;
}
.page-title { font-size:17px; font-weight:700; color:var(--text); }
.sidebar-toggle {
  display:none; border:none; background:transparent; cursor:pointer;
  color:var(--text-muted); padding:4px; border-radius:var(--radius-sm);
  transition:background var(--transition);
}
.sidebar-toggle:hover { background:var(--neutral-light); }
.content-area { padding:24px; flex:1; max-width:1200px; width:100%; }

/* ================================================================
   CARDS
================================================================ */
.card {
  background:var(--surface); border-radius:var(--radius);
  border:1px solid var(--border); box-shadow:var(--shadow);
  overflow:hidden;
}
.card-header {
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.card-header h3, .card-header h4 { font-size:15px; font-weight:600; }
.card-body { padding:20px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.card-header-action {
  display:flex; justify-content:flex-end; margin-bottom:16px;
}
.two-col-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;
}

/* ================================================================
   STATS GRID
================================================================ */
.stats-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.stats-grid-sm { grid-template-columns:repeat(4,1fr); }
.stat-card {
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
  padding:18px 16px; display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow); transition:transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.stat-icon {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-value { font-size:26px; font-weight:700; line-height:1; }
.stat-label { font-size:12px; color:var(--text-muted); margin-top:3px; }

.stat-aberto       .stat-icon { background:var(--info-light); color:var(--info); }
.stat-aberto       .stat-value { color:var(--info); }
.stat-em_atendimento .stat-icon { background:var(--warning-light); color:var(--warning); }
.stat-em_atendimento .stat-value { color:var(--warning); }
.stat-aguardando   .stat-icon { background:#FEF9C3; color:#CA8A04; }
.stat-aguardando   .stat-value { color:#CA8A04; }
.stat-resolvido    .stat-icon { background:var(--success-light); color:var(--success); }
.stat-resolvido    .stat-value { color:var(--success); }
.stat-fechado      .stat-icon { background:var(--neutral-light); color:var(--neutral); }
.stat-fechado      .stat-value { color:var(--neutral); }

/* ================================================================
   TABLES
================================================================ */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th {
  text-align:left; padding:11px 14px; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  background:#FAFAFA; border-bottom:1px solid var(--border);
}
.table td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr { transition:background var(--transition); }
.table tbody tr:hover { background:#FAFBFF; }
.clickable-row { cursor:pointer; }
.td-title { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.td-date { font-size:13px; color:var(--text-muted); white-space:nowrap; }
.td-empty { text-align:center; padding:40px 20px; color:var(--text-muted); font-style:italic; }
.ticket-number { font-weight:700; font-size:13px; color:var(--primary); font-family:monospace; }

/* ================================================================
   BADGES
================================================================ */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  white-space:nowrap;
}
.badge-success  { background:var(--success-light); color:#065F46; }
.badge-danger   { background:var(--danger-light);  color:#991B1B; }
.badge-warning  { background:var(--warning-light); color:#92400E; }
.badge-info     { background:var(--info-light);    color:#1D4ED8; }
.badge-neutral  { background:var(--neutral-light); color:#374151; }
.badge-internal { background:#F3F4F6; color:#6B7280; border:1px solid #E5E7EB; }
.badge-role     { background:var(--primary-light); color:var(--primary); }

/* Status */
.status-aberto             { background:var(--info-light);    color:#1E40AF; }
.status-em_atendimento     { background:var(--warning-light); color:#92400E; }
.status-aguardando_cliente { background:#FEF9C3;              color:#854D0E; }
.status-resolvido            { background:var(--success-light); color:#065F46; }
.status-fechado              { background:var(--neutral-light); color:#374151; }
.status-fechado_inatividade  { background:#F3F4F6; color:#6B7280; border:1px dashed #D1D5DB; }

/* ================================================================
   SLA INDICATORS
================================================================ */

/* Célula SLA na tabela */
.td-sla { white-space: nowrap; }
.td-muted { color: var(--text-muted); font-size: 13px; }

/* Badge base */
.sla-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
.sla-badge svg { flex-shrink: 0; }

/* Verde — dentro do prazo (< 2h) */
.sla-ok {
  background: #D1FAE5; color: #065F46;
}
/* Amarelo — atenção (2h–6h) */
.sla-warn {
  background: #FEF3C7; color: #92400E;
}
/* Vermelho — crítico (> 6h) */
.sla-critical {
  background: #FEE2E2; color: #991B1B;
  animation: sla-pulse 2.4s ease-in-out infinite;
}
/* Azul — aguardando resposta do cliente */
.sla-client {
  background: #EFF6FF; color: #1D4ED8;
}

@keyframes sla-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}

/* Linha vermelha tênue para tickets críticos */
tr.row-sla-critical td:first-child {
  border-left: 3px solid #EF4444;
}

/* ---------------------------------------------------------------
   Linhas "arquivadas" — tickets fechados/inatividade
--------------------------------------------------------------- */
tr.row-closed {
  opacity: .5;
  transition: opacity var(--transition);
}
tr.row-closed:hover {
  opacity: .8;
}
/* Esvazia a cor dos badges dentro de linhas fechadas */
tr.row-closed .badge {
  background: #F3F4F6 !important;
  color: #9CA3AF !important;
  border: 1px solid #E5E7EB !important;
}
tr.row-closed .ticket-number {
  color: #9CA3AF;
}
tr.row-closed .sla-badge,
tr.row-closed .badge-waiting-inline {
  display: none; /* sem indicadores de ação em tickets fechados */
}

/* Separador visual entre grupos (ativo → encerrado) */
tr.table-group-sep td {
  padding: 6px 16px 4px;
  background: var(--neutral-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
}
tr.table-group-sep td span {
  display: inline-flex; align-items: center; gap: 6px;
}

/* Barra de legenda SLA acima da tabela */
.sla-legend-bar {
  display: flex; align-items: center; gap: 0;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  background: #F8F9FB;
}

/* Cada bloco temático da legenda */
.sla-legend-group {
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
}
.sla-legend-group:first-child { padding-left: 0; }
.sla-legend-group:last-child  { padding-right: 0; }

/* Rótulo do grupo */
.sla-legend-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Pills do grupo — reusam os mesmos .sla-badge do código */
.sla-legend-pills {
  display: flex; align-items: center; gap: 6px;
}
/* Na legenda os badges ficam levemente menores e sem animação */
.sla-legend-pills .sla-badge {
  font-size: 11px;
  padding: 2px 8px;
  animation: none;
  cursor: default;
  pointer-events: none;
}

/* Divisor vertical entre grupos */
.sla-legend-divider {
  width: 1px; height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .sla-legend-bar    { flex-wrap: wrap; gap: 8px; }
  .sla-legend-group  { padding: 0; }
  .sla-legend-divider { display: none; }
}

/* Priority */
.priority-baixa   { background:#D1FAE5; color:#065F46; }
.priority-media   { background:var(--info-light); color:#1D4ED8; }
.priority-alta    { background:var(--warning-light); color:#92400E; }
.priority-urgente { background:var(--danger-light); color:#991B1B; }

/* ================================================================
   FORMS
================================================================ */
.form { display:flex; flex-direction:column; gap:0; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-group:last-child { margin-bottom:0; }
.form-row { display:flex; gap:14px; }
.form-row .form-group { flex:1; }
.flex-1 { flex:1; }

label { font-size:13px; font-weight:600; color:#374151; }
.label-link { float:right; font-weight:400; font-size:13px; }
.text-muted { color:var(--text-muted); }
.required { color:var(--danger); }

.form-control {
  width:100%; padding:9px 13px; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:14px; color:var(--text);
  transition:border-color var(--transition), box-shadow var(--transition);
  outline:none;
}
.form-control:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}
.form-control::placeholder { color:#9CA3AF; }
textarea.form-control { resize:vertical; min-height:80px; line-height:1.6; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

/* Password input */
.input-password { position:relative; }
.input-password .form-control { padding-right:44px; }
.toggle-password {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer; color:var(--text-muted);
  padding:4px; transition:color var(--transition);
}
.toggle-password:hover { color:var(--primary); }

/* File input */
.form-control-file { display:none; }
.file-input-wrap { position:relative; }
.file-label {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 13px; border:1.5px dashed var(--border); border-radius:var(--radius-sm);
  font-size:14px; color:var(--text-muted); transition:border-color var(--transition), background var(--transition);
  background:var(--bg);
}
.file-label:hover { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }

/* Checkbox */
.checkbox-label { display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; }
.checkbox-label input { width:16px; height:16px; accent-color:var(--primary); }

/* Form actions */
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

/* ================================================================
   BUTTONS
================================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius:var(--radius-sm); font-weight:600; font-size:14px;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--transition), border-color var(--transition),
             opacity var(--transition), transform var(--transition);
  text-decoration:none; line-height:1;
}
.btn:hover { transform:translateY(-1px); text-decoration:none; }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-outline { background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { opacity:.85; }
.btn-block { width:100%; }
.btn-sm { padding:6px 12px; font-size:13px; }

/* Loading state */
.btn-loading.loading {
  pointer-events:none; opacity:.75;
}
.btn-loading.loading::after {
  content:''; width:14px; height:14px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%;
  animation:spin .6s linear infinite; margin-left:6px;
}

/* ================================================================
   ALERTS
================================================================ */
.alert {
  padding:12px 16px; border-radius:var(--radius-sm); font-size:14px;
  margin-bottom:16px; display:flex; align-items:flex-start; gap:10px;
  animation:fadeDown .25s ease;
}
.alert::before { flex-shrink:0; width:4px; height:100%; border-radius:4px; }
.alert-success { background:var(--success-light); color:#065F46; border-left:4px solid var(--success); }
.alert-error   { background:var(--danger-light);  color:#991B1B; border-left:4px solid var(--danger); }
.alert-info    { background:var(--info-light);    color:#1D4ED8; border-left:4px solid var(--info); }
.alert-warning { background:var(--warning-light); color:#92400E; border-left:4px solid var(--warning); }

/* ================================================================
   FILTERS
================================================================ */
.filter-bar { padding:16px 20px; margin-bottom:0; }
.filter-grid {
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
}
.filter-grid .form-control { min-width:140px; margin-bottom:0; }
.filter-grid-sm .form-control { min-width:160px; }
.filter-actions { display:flex; gap:8px; }

/* ================================================================
   FILTER TOPBAR (admin tickets)
================================================================ */
.filter-topbar {
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  padding:12px 16px;
  background:var(--surface); border-radius:var(--radius);
  border:1px solid var(--border); box-shadow:var(--shadow);
  margin-bottom:0;
}

/* Campo de busca */
.filter-search {
  flex:1; min-width:180px; max-width:320px;
  position:relative; display:flex; align-items:center;
}
.filter-search svg {
  position:absolute; left:10px; color:var(--text-muted); pointer-events:none; flex-shrink:0;
}
.filter-input {
  width:100%; padding:7px 10px 7px 32px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; color:var(--text); background:var(--bg);
  transition:border-color var(--transition), box-shadow var(--transition);
  outline:none;
}
.filter-input:focus {
  border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3px rgba(79,70,229,.1);
}
.filter-input::placeholder { color:#9CA3AF; }

/* Selects compactos */
.filter-select {
  padding:7px 28px 7px 10px; height:36px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; color:var(--text); background:var(--bg);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  transition:border-color var(--transition), box-shadow var(--transition);
  outline:none;
}
.filter-select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.1);
}
.filter-select option[value=""] { color:#9CA3AF; }

/* Botão de calendário */
.filter-dates-toggle {
  width:36px; height:36px; border-radius:var(--radius-sm); flex-shrink:0;
  border:1.5px solid var(--border); background:var(--bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); position:relative;
  transition:all var(--transition);
}
.filter-dates-toggle:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.filter-dates-toggle.active { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.dates-dot {
  position:absolute; top:4px; right:4px;
  width:7px; height:7px; border-radius:50%;
  background:var(--primary); border:1.5px solid var(--surface);
}

/* Ações do filtro */
.filter-actions-inline { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:var(--radius-sm); font-weight:600; font-size:13px;
  border:1.5px solid var(--border); background:transparent; cursor:pointer;
  color:var(--text-muted); transition:all var(--transition); text-decoration:none;
}
.btn-ghost:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-light); text-decoration:none; }
.filter-count-badge {
  background:var(--primary); color:#fff;
  font-size:10px; font-weight:700; padding:1px 5px; border-radius:20px; line-height:1.4;
}

/* Linha de datas */
.filter-dates-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 16px 12px;
  background:var(--primary-light); border-radius:0 0 var(--radius) var(--radius);
  border:1px solid var(--border); border-top:none;
  animation:fadeDown .15s ease;
}
.dates-label { font-size:12px; font-weight:600; color:var(--primary); text-transform:uppercase; letter-spacing:.04em; }
.dates-field { display:flex; align-items:center; gap:6px; }
.dates-field label { font-size:12px; font-weight:600; color:var(--text-muted); }
.filter-date {
  padding:5px 8px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; background:var(--surface); color:var(--text);
  outline:none; transition:border-color var(--transition);
}
.filter-date:focus { border-color:var(--primary); }
.dates-clear {
  font-size:12px; color:var(--text-muted); background:none; border:none;
  cursor:pointer; text-decoration:underline; padding:0; margin-left:4px;
}
.dates-clear:hover { color:var(--danger); }

/* Wrapper para aplicar borda unificada com a linha de datas */
#filterForm { margin-bottom:0; }

/* Tags de filtros ativos na tabela */
.active-filter-tags { display:flex; flex-wrap:wrap; gap:6px; margin-left:8px; }
.filter-tag {
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px;
  background:var(--primary-light); color:var(--primary);
  border:1px solid #C7D2FE;
}
.result-filtered { font-size:13px; font-weight:400; color:var(--text-muted); margin-left:4px; }
.mt-12 { margin-top:12px; }

/* ================================================================
   PAGINATION
================================================================ */
.pagination { display:flex; align-items:center; gap:4px; padding:16px 20px; }
.page-btn {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); font-size:14px; font-weight:500;
  border:1.5px solid var(--border); color:var(--text);
  transition:all var(--transition); text-decoration:none;
}
.page-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ================================================================
   TICKET DETAIL
================================================================ */
.ticket-layout {
  display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start;
}
.ticket-header-card .ticket-meta-top {
  padding:22px 24px 18px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
}
.ticket-meta-left { flex:1; min-width:0; }
.ticket-badges { display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; margin-top:2px; }
.ticket-title-main { font-size:19px; font-weight:700; margin-top:6px; line-height:1.3; }
.ticket-number-lg { font-family:monospace; font-size:13px; font-weight:700; color:var(--primary); }
/* Info grid (admin ticket header) */
.ticket-info-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border); background:#FAFBFF;
}
.tinfo-item {
  padding:12px 20px; border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:3px;
}
.tinfo-item:last-child { border-right:none; }
.tinfo-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.tinfo-value { font-size:13px; font-weight:500; color:var(--text); display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.tinfo-email { font-size:12px; color:var(--text-muted); font-weight:400; }
.tinfo-email:hover { color:var(--primary); }

/* ticket-info-row (client view) */
.ticket-info-row {
  padding:12px 24px 14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  font-size:13px; color:var(--text-muted);
  border-top:1px solid var(--border);
  background:#FAFBFF;
}
.ticket-info-row span { display:flex; align-items:center; gap:5px; }

/* ================================================================
   MESSAGES & AVATARS
================================================================ */
.messages-timeline { display:flex; flex-direction:column; gap:14px; }
.message-item { display:flex; gap:12px; align-items:flex-start; }
.message-staff { flex-direction:row-reverse; }
.message-internal { opacity:.85; }

/* Avatar universal (imagem ou iniciais) */
.msg-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  object-fit:cover; display:block;
}
.msg-avatar-initials {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#fff;
}
.message-client .msg-avatar-initials { background:var(--info); }
.message-staff  .msg-avatar-initials { background:var(--primary); }
.message-internal .msg-avatar-initials { background:var(--neutral); }
/* Fallback para message-avatar antigo */
.message-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#fff;
}
.message-avatar-client, .message-client .message-avatar { background:var(--info); }
.message-avatar-staff,  .message-staff  .message-avatar { background:var(--primary); }
.message-internal .message-avatar { background:var(--neutral); }

.message-bubble {
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; max-width:80%;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.message-internal .message-bubble { border-style:dashed; background:#FAFAFA; }
.message-staff .message-bubble { background:var(--primary-light); border-color:#C7D2FE; }

.message-header {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13px; margin-bottom:8px;
}
.message-time { color:var(--text-muted); font-size:12px; margin-left:auto; }
.message-body { font-size:14px; line-height:1.65; white-space:pre-line; }

.badge-role-cliente    { font-size:11px; background:#DBEAFE; color:#1E40AF; padding:2px 7px; border-radius:20px; font-weight:600; }
.badge-role-admin      { font-size:11px; background:var(--danger-light); color:#991B1B; padding:2px 7px; border-radius:20px; font-weight:600; }
.badge-role-atendente  { font-size:11px; background:var(--success-light); color:#065F46; padding:2px 7px; border-radius:20px; font-weight:600; }
.badge-role-staff      { font-size:11px; background:var(--primary-light); color:var(--primary); padding:2px 7px; border-radius:20px; font-weight:600; }

/* Ticket sidebar info */
.info-list { display:flex; flex-direction:column; gap:0; }
.info-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.info-item:last-child { border-bottom:none; }
.info-item span { color:var(--text-muted); }

/* Attachments */
.attachments-list { list-style:none; padding:12px 20px; }
.attachment-item {
  display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid var(--border); font-size:14px;
}
.attachment-item:last-child { border-bottom:none; }
.attachment-size { color:var(--text-muted); font-size:12px; margin-left:auto; }

/* ================================================================
   CLIENT TICKET VIEW
================================================================ */
.breadcrumb {
  display:flex; align-items:center; gap:4px;
  font-size:13px; color:var(--text-muted); margin-bottom:8px;
}
.breadcrumb a { color:var(--text-muted); transition:color var(--transition); }
.breadcrumb a:hover { color:var(--primary); text-decoration:none; }
.breadcrumb svg { color:#CBD5E1; flex-shrink:0; }
.breadcrumb span { color:var(--text); font-weight:500; }

/* ================================================================
   WELCOME BANNER
================================================================ */
.welcome-banner {
  background:linear-gradient(135deg, var(--primary) 0%, #7C3AED 100%);
  border-radius:var(--radius); padding:24px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:20px; color:#fff;
}
.welcome-banner h2 { font-size:20px; font-weight:700; }
.welcome-banner p  { opacity:.85; margin-top:2px; font-size:14px; }
.welcome-banner .btn-primary { background:#fff; color:var(--primary); }
.welcome-banner .btn-primary:hover { background:#EEF2FF; }

/* ================================================================
   MODAL
================================================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:200; padding:20px; backdrop-filter:blur(2px);
  animation:fadeIn .2s ease;
}
.modal {
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); width:100%; max-width:480px;
  animation:fadeUp .2s ease;
}
.modal-header {
  padding:18px 20px 0; display:flex; align-items:center; justify-content:space-between;
}
.modal-header h4 { font-size:16px; font-weight:700; }
.modal-close {
  background:transparent; border:none; font-size:18px; cursor:pointer;
  color:var(--text-muted); padding:4px 8px; border-radius:4px;
  transition:background var(--transition);
}
.modal-close:hover { background:var(--neutral-light); }
.modal-body { padding:16px 20px; }
.modal-footer {
  padding:12px 20px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
}

/* ================================================================
   SIDEBAR USER AVATAR
================================================================ */
.sidebar-user-avatar {
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid var(--border);
}
.user-info {
  display:flex; align-items:center; gap:10px; overflow:hidden;
  text-decoration:none; color:inherit; flex:1;
  padding:4px 6px; border-radius:var(--radius-sm);
  transition:background var(--transition);
}
.user-info:hover { background:var(--neutral-light); text-decoration:none; }

/* ================================================================
   PROFILE PAGE
================================================================ */
.profile-layout {
  display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start;
}
.profile-aside { display:flex; flex-direction:column; gap:16px; }
.profile-avatar-card {
  display:flex; flex-direction:column; align-items:center;
  padding:24px 20px; gap:12px; text-align:center;
}
.avatar-upload-zone {
  position:relative; width:100px; height:100px; cursor:pointer;
}
.avatar-upload-zone:hover .avatar-overlay { opacity:1; }
.avatar-preview {
  width:100px; height:100px; border-radius:50%; object-fit:cover;
  border:3px solid var(--border);
  transition:filter var(--transition);
}
.avatar-upload-zone:hover .avatar-preview { filter:brightness(.75); }
.avatar-initials-lg {
  width:100px; height:100px; border-radius:50%; background:var(--primary);
  color:#fff; font-size:36px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--border);
  transition:filter var(--transition);
}
.avatar-upload-zone:hover .avatar-initials-lg { filter:brightness(.8); }
.avatar-overlay {
  position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color:#fff; font-size:12px; font-weight:600; opacity:0;
  transition:opacity var(--transition); cursor:pointer;
}
.profile-name-block { display:flex; flex-direction:column; gap:3px; }
.profile-name-block strong { font-size:15px; font-weight:700; }
.profile-name-block span  { font-size:12px; color:var(--text-muted); text-transform:capitalize; }
.company-tag { font-size:12px; color:var(--text-muted); }
.avatar-hint { font-size:11px; color:var(--text-muted); margin-top:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.form-divider { border:none; border-top:1px solid var(--border); margin:16px 0 8px; }
.section-title { font-size:14px; font-weight:600; margin-bottom:12px; color:var(--text); }
.font-mono { font-family:monospace; }
.align-end { align-items:flex-end; }
.attachment-meta { color:var(--text-muted); font-size:12px; margin-left:auto; }

/* ================================================================
   WELCOME + KB ROW (dois cards lado a lado)
================================================================ */
.welcome-kb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 20px;
  animation: fadeUp .3s ease;
}
/* Remove margem do welcome-banner quando dentro da row */
.welcome-kb-row .welcome-banner {
  margin-bottom: 0;
  height: 100%;
  box-sizing: border-box;
}

/* KB card — estilo próprio e chamativo */
.kb-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #0C4A6E 0%, #0284C7 55%, #38BDF8 100%);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(2,132,199,.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.kb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(2,132,199,.45);
}

/* Brilho decorativo de fundo */
.kb-card-glow {
  position: absolute; top: -30px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
  pointer-events: none;
}

.kb-card-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.kb-card-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.kb-card-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
}
.kb-card-title {
  font-size: 15px; font-weight: 800; color: #fff;
  line-height: 1.3; display: block;
}
.kb-card-sub {
  font-size: 12.5px; color: rgba(255,255,255,.75);
  line-height: 1.4;
}
.kb-card-arrow {
  flex-shrink: 0;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background var(--transition), transform var(--transition);
}
.kb-card:hover .kb-card-arrow {
  background: rgba(255,255,255,.30);
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .welcome-kb-row { grid-template-columns: 1fr; }
}

/* ================================================================
   PRE-CREATE GATE (Base de Conhecimento antes de abrir ticket)
================================================================ */
.pre-create-wrapper {
  max-width: 680px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
  animation: fadeUp .3s ease;
}

/* Card principal: KB */
.pre-create-kb-card {
  background: linear-gradient(150deg, #0C4A6E 0%, #0369A1 50%, #0EA5E9 100%);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 32px 36px 36px;
  position: relative; overflow: hidden;
}
.pre-create-kb-card::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 65%);
  pointer-events: none;
}

.pre-create-kb-header {
  display: flex; align-items: center; gap: 18px; margin-bottom: 20px;
}
.pre-create-kb-icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.pre-create-eyebrow {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-bottom: 4px;
}
.pre-create-title {
  font-size: 22px; font-weight: 800; color: #fff;
  line-height: 1.25; margin: 0;
}

.pre-create-desc {
  font-size: 14.5px; color: rgba(255,255,255,.85);
  line-height: 1.7; margin-bottom: 22px;
}
.pre-create-desc strong { color: #fff; font-weight: 700; }

.pre-create-benefits {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 20px; margin-bottom: 28px;
}
.pre-create-benefit {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: rgba(255,255,255,.9);
}
.pre-create-benefit svg { flex-shrink:0; color: #7DD3FC; }

.pre-create-kb-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #0369A1;
  font-size: 14px; font-weight: 700;
  padding: 13px 24px; border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none !important;
}
.pre-create-kb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.pre-create-kb-btn svg:last-child { opacity: .7; }

/* Divisor com texto */
.pre-create-divider {
  display: flex; align-items: center; gap: 16px;
  background: var(--neutral-light);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 36px;
}
.pre-create-divider::before,
.pre-create-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.pre-create-divider span {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; padding: 14px 0;
}

/* Card secundário: abrir mesmo assim */
.pre-create-open-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 24px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.pre-create-open-text h3 {
  font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.pre-create-open-text p {
  font-size: 13px; color: var(--text-muted); margin: 0; max-width: 420px;
}
.pre-create-open-btn {
  white-space: nowrap; flex-shrink: 0;
  font-size: 13.5px; color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
.pre-create-open-btn:hover {
  color: var(--text) !important;
  border-color: var(--neutral) !important;
  background: var(--neutral-light) !important;
}

@media (max-width: 600px) {
  .pre-create-kb-card  { padding: 24px 20px 28px; }
  .pre-create-open-card{ flex-direction: column; align-items: flex-start; padding: 20px; }
  .pre-create-benefits { grid-template-columns: 1fr; }
  .pre-create-divider  { padding: 0 20px; }
  .pre-create-open-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   COMPACT FILTER BAR (client ticket list)
================================================================ */
.filter-bar-compact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 0;
}
.filter-toggle-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none;
  padding: 10px 16px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text);
  transition: background var(--transition);
}
.filter-toggle-btn:hover { background: var(--neutral-light); }
.filter-chevron { margin-left: auto; transition: transform var(--transition); }
.filter-toggle-btn[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--primary); color: #fff;
  border-radius: 9px; font-size: 11px; font-weight: 700;
}
.filter-panel {
  display: none; border-top: 1px solid var(--border);
  padding: 12px 16px; animation: fadeDown .15s ease;
}
.filter-panel.open { display: block; }
.filter-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.filter-fields { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; }
.filter-fields .form-control-sm { flex: 1; min-width: 140px; }
.filter-actions { display: flex; gap: 6px; }

/* ================================================================
   ROW INDICATOR — Aguardando cliente
================================================================ */
tr.row-waiting {
  background: #FFFBEB !important;
  border-left: 3px solid #F59E0B;
}
tr.row-waiting:hover { background: #FEF3C7 !important; }
.badge-waiting-inline {
  display: inline-flex; align-items: center; gap: 3px;
  background: #FEF3C7; color: #92400E;
  border: 1px solid #FCD34D;
  border-radius: 20px; font-size: 11px; font-weight: 700;
  padding: 2px 7px; margin-left: 6px; vertical-align: middle;
  white-space: nowrap;
}

/* ================================================================
   ALERT BANNERS
================================================================ */
.alert-waiting-client {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1.5px solid #FCD34D;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  animation: fadeUp .3s ease;
}
.alert-waiting-client > svg { flex-shrink: 0; color: #D97706; }
.alert-waiting-client > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.alert-waiting-client strong { font-size: 14px; font-weight: 700; color: #92400E; }
.alert-waiting-client span   { font-size: 13px; color: #B45309; }
.btn-white {
  background: #fff; color: #92400E; border: 1.5px solid #FCD34D;
  border-radius: var(--radius-sm); padding: 6px 14px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background var(--transition);
}
.btn-white:hover { background: #FEF3C7; text-decoration: none; }

.alert-replied-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border: 1.5px solid #93C5FD;
  border-radius: var(--radius);
  padding: 18px 20px;
  animation: fadeUp .3s ease;
}
.alert-replied-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: var(--primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.alert-replied-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.alert-replied-body strong { font-size: 15px; font-weight: 700; color: #1E3A8A; }
.alert-replied-body span   { font-size: 13px; color: #1D4ED8; }
.btn-warning {
  background: #F59E0B; color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 8px 16px;
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--transition);
}
.btn-warning:hover { background: #D97706; text-decoration: none; }

.alert-rating-done {
  background: var(--success-light);
  border: 1px solid #6EE7B7;
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 6px;
  animation: fadeUp .3s ease;
}
.alert-rating-done .rating-stars-display { display: flex; align-items: center; gap: 3px; }
.rating-label-text { font-size: 13px; font-weight: 700; color: var(--text); margin-left: 6px; }
.rating-comment-display { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 0; }

/* Stat aguardando pulse */
.stat-aguardando-pulse {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7) !important;
  border: 1.5px solid #FCD34D !important;
  animation: pulseCard 2.5s ease-in-out infinite;
}
@keyframes pulseCard {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.3); }
  50%       { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
}
.stat-action-link {
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 600; color: var(--primary);
  text-decoration: none;
}
.stat-action-link:hover { text-decoration: underline; }

/* ================================================================
   REPLY ACTIONS ROW
================================================================ */
.reply-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.btn-outline-danger {
  background: transparent; color: var(--danger);
  border: 1.5px solid var(--danger);
  border-radius: var(--radius-sm); padding: 8px 16px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-outline-danger:hover { background: var(--danger-light); text-decoration: none; }

/* ================================================================
   MODAL
================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .15s ease;
}
.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 500px;
  animation: fadeUp .2s ease;
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 16px; font-weight: 700; }
.modal-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 4px; border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.modal-close:hover { background: var(--neutral-light); }
.modal-body { padding: 20px; }
.modal-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }
.modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--neutral-light);
}
.btn-danger {
  background: var(--danger); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 9px 18px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--transition); display: inline-flex; align-items: center; gap: 6px;
}
.btn-danger:hover { background: #DC2626; text-decoration: none; }

/* ================================================================
   STAR RATING PICKER
================================================================ */
.star-rating-group { display: flex; flex-direction: column; gap: 8px; }
.rating-label { font-size: 13px; font-weight: 600; color: var(--text); }
.star-picker {
  display: flex; gap: 4px;
}
.star-btn {
  background: none; border: none; padding: 2px; cursor: pointer;
  line-height: 1; transition: transform var(--transition);
}
.star-btn:hover { transform: scale(1.15); }
.star-svg { transition: fill .1s, stroke .1s; display: block; }
.star-hint {
  font-size: 13px; font-weight: 600; color: #D97706; min-height: 18px;
}

/* Stars display (read-only) */
.rating-stars-display { display: flex; align-items: center; gap: 2px; }
.rating-stars-mini    { display: flex; align-items: center; gap: 1px; }

/* Rating quote in admin */
.rating-quote {
  font-size: 13px; color: var(--text-muted); font-style: italic;
  border-left: 3px solid var(--border); padding-left: 10px; margin: 0;
}

/* stat-rating card */
.stat-rating { background: linear-gradient(135deg, #FFFBEB, #FEF3C7) !important; }
.stats-grid-rating { grid-template-columns: 1fr !important; max-width: 280px; }

/* ================================================================
   ANIMATIONS
================================================================ */
@keyframes fadeUp  { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from{ opacity:0; } to{ opacity:1; } }
@keyframes spin    { to{ transform:rotate(360deg); } }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width:1024px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .ticket-layout { grid-template-columns:1fr; }
  .ticket-sidebar { order:-1; }
  .two-col-layout { grid-template-columns:1fr; }
  .ticket-info-grid { grid-template-columns:repeat(2,1fr); }
  .tinfo-item:nth-child(2) { border-right:none; }
  .tinfo-item:nth-child(1),.tinfo-item:nth-child(2) { border-bottom:1px solid var(--border); }
  .profile-layout { grid-template-columns:1fr; }
  .profile-aside { flex-direction:row; align-items:flex-start; }
  .profile-avatar-card { flex-direction:row; text-align:left; }
}

@media (max-width:768px) {
  .sidebar {
    transform:translateX(calc(-1 * var(--sidebar-w)));
  }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .sidebar-toggle { display:flex; }
  .stats-grid, .stats-grid-sm { grid-template-columns:repeat(2,1fr); }
  .filter-grid { flex-direction:column; }
  .form-row { flex-direction:column; }
  .welcome-banner { flex-direction:column; text-align:center; }
  .content-area { padding:16px; }
}

@media (max-width:480px) {
  .stats-grid, .stats-grid-sm { grid-template-columns:1fr 1fr; }
  .auth-card { padding:28px 20px; }
  .table th, .table td { padding:9px 10px; font-size:13px; }
}

/* ================================================================
   KANBAN BOARD
================================================================ */

/* Override content-area overflow for kanban */
.kanban-wrapper {
  margin: -4px 0 0;
}

/* Toolbar */
.kanban-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px;
}
.kanban-toolbar-info {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted);
}
.kanban-totals {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.kanban-total-pill {
  font-size: 11.5px; padding: 3px 10px; border-radius: 20px;
}

/* Board scroll container */
.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 20px;
  align-items: flex-start;
  scroll-snap-type: x mandatory;
}
.kanban-board::-webkit-scrollbar { height: 6px; }
.kanban-board::-webkit-scrollbar-track { background: var(--neutral-light); border-radius: 3px; }
.kanban-board::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

/* Column */
.kanban-column {
  flex: 0 0 292px;
  width: 292px;
  display: flex;
  flex-direction: column;
  background: #F1F5F9;
  border-radius: 14px;
  overflow: hidden;
  max-height: calc(100vh - 190px);
  scroll-snap-align: start;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* Column header */
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  color: #fff;
  flex-shrink: 0;
}
.kanban-col-left {
  display: flex; align-items: center; gap: 8px;
}
.kanban-col-icon { display: flex; opacity: .9; }
.kanban-col-label {
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.kanban-col-count {
  background: rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 12px; font-weight: 700;
  min-width: 26px; text-align: center;
}

/* Cards list */
.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px; /* allow drop to empty column */
}
.kanban-cards::-webkit-scrollbar { width: 4px; }
.kanban-cards::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; }

/* Card */
.kcard {
  background: #fff;
  border-radius: 10px;
  border-left: 4px solid #CBD5E1;
  padding: 12px 13px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
  user-select: none;
}
.kcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.11);
}
.kcard:active { cursor: grabbing; }

/* SortableJS states */
.kcard-ghost   { opacity: .35; background: #EFF6FF; }
.kcard-chosen  { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.kcard-drag    { transform: rotate(1.5deg) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.kcard-pending { opacity: .6; pointer-events: none; }

/* Card top row */
.kcard-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.kcard-number {
  font-size: 11.5px; font-weight: 700;
  color: var(--primary); text-decoration: none;
  letter-spacing: .01em;
}
.kcard-number:hover { text-decoration: underline; }
.kcard-top .badge { font-size: 10.5px; padding: 2px 7px; }

/* Card title */
.kcard-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.4;
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card meta */
.kcard-meta {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 9px;
}
.kcard-client {
  font-size: 11.5px; color: var(--text-muted); font-weight: 500;
}
.kcard-company { font-weight: 400; }
.kcard-cat {
  display: inline-block;
  font-size: 10.5px; font-weight: 600;
  color: #6366F1; background: #EEF2FF;
  padding: 2px 7px; border-radius: 4px;
  width: fit-content;
}

/* Card footer */
.kcard-footer {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.kcard-sla { font-size: 10.5px; padding: 2px 7px; animation: none !important; }
.kcard-date {
  font-size: 10.5px; color: var(--text-muted);
  margin-left: auto;
}
.kcard-assignee {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Empty column placeholder */
.kanban-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 16px;
  color: #CBD5E1;
  font-size: 12px; text-align: center;
  pointer-events: none;
}

/* "+X more" link */
.kanban-more {
  display: block; text-align: center;
  font-size: 11.5px; font-weight: 600; color: var(--primary);
  padding: 8px; border-radius: 8px;
  background: rgba(99,102,241,.06);
  text-decoration: none;
  transition: background var(--transition);
}
.kanban-more:hover { background: rgba(99,102,241,.12); }

/* ── Toast notifications ──────────────────────────────────── */
.kanban-toast-box {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.kanban-toast {
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: auto;
}
.kanban-toast-show { opacity: 1; transform: translateY(0); }
.kanban-toast-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.kanban-toast-error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

@media (max-width: 768px) {
  .kanban-column { flex: 0 0 260px; width: 260px; }
}

/* ================================================================
   SIDEBAR COLLAPSE — pré-colapso sem animação (evita flash no carregamento)
================================================================ */
/* Aplicado pelo script inline no <head> antes do primeiro paint */
.sb-pre-collapsed #sidebar {
  width: var(--sidebar-collapsed-w, 62px);
  transition: none !important;
}
.sb-pre-collapsed #mainContent {
  margin-left: var(--sidebar-collapsed-w, 62px);
  transition: none !important;
}
/* Após o JS carregar ele remove sb-pre-collapsed e adiciona .collapsed normalmente */

/* ================================================================
   SIDEBAR COLLAPSE (sanfona)
================================================================ */

/* Override: adiciona transição de width à sidebar */
.sidebar {
  transition: width 0.26s cubic-bezier(.4,0,.2,1), transform var(--transition);
  overflow: visible; /* necessário para tooltips extrapolarem a borda */
}
/* A nav interna precisa esconder overflow horizontal (texto dos items) */
.sidebar-nav { overflow-x: hidden; }
.main-content {
  transition: margin-left 0.26s cubic-bezier(.4,0,.2,1);
}

/* Brand area — expandida */
.sidebar-brand { justify-content: space-between; }

.logo-full {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  overflow: hidden;
}
.logo-icon {
  display: none; align-items: center; justify-content: center;
  width: 100%;
}
.sidebar-icon-img { width: 30px; height: 30px; object-fit: contain; }

/* Botão recolher */
.sidebar-collapse-btn {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); padding: 5px; border-radius: var(--radius-sm);
  display: flex; align-items: center; flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.sidebar-collapse-btn:hover { background: var(--neutral-light); color: var(--primary); }
.sidebar-collapse-btn svg { transition: transform .25s cubic-bezier(.4,0,.2,1); }

/* Estado recolhido */
.sidebar.collapsed { width: var(--sidebar-collapsed-w); }
.sidebar.collapsed + .main-content,
.main-content.sidebar-collapsed { margin-left: var(--sidebar-collapsed-w); }

/* Brand quando recolhida: empilha ícone e botão verticalmente */
.sidebar.collapsed .logo-full { display: none; }
.sidebar.collapsed .logo-icon { display: flex; }
.sidebar.collapsed .sidebar-brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  gap: 6px;
  height: auto;
  min-height: var(--topbar-h);
}
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* Nav items recolhidos */
.nav-label { white-space: nowrap; }
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 10px;
  position: relative;
}
.sidebar.collapsed .nav-label { display: none; }

/* Anula qualquer tooltip CSS via ::after que possa existir no servidor */
.sidebar.collapsed .nav-item::after,
.sidebar.collapsed .nav-item:hover::after { content: none !important; display: none !important; }

/* ── Tooltip JS — criado via JS e appendado direto no <body> ──
   O JS define todos os estilos inline; aqui apenas font-family e a setinha */
#sidebar-nav-tooltip {
  font-family: var(--font);
}
#sidebar-nav-tooltip::before {
  content: '';
  position: absolute;
  right: 100%; top: 50%;
  margin-top: -5px;
  border: 5px solid transparent;
  border-right-color: #1F2937;
}

/* Footer recolhido */
.sidebar.collapsed .sidebar-footer {
  flex-direction: column; align-items: center;
  padding: 10px 8px; gap: 6px;
}
.sidebar.collapsed .user-info { flex: unset; overflow: visible; }
.sidebar.collapsed .user-name,
.sidebar.collapsed .user-role { display: none; }
.sidebar.collapsed .btn-logout { padding: 6px; }

/* ================================================================
   DASHBOARD LOGO HEADER
================================================================ */
.dash-brand-header {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 20px;
  margin-bottom: 20px; box-shadow: var(--shadow);
  animation: fadeUp .3s ease;
}
.dash-brand-info { display: flex; flex-direction: column; gap: 1px; }
.dash-brand-greeting { font-size: 15px; font-weight: 700; color: var(--text); }
.dash-brand-sub { font-size: 12px; color: var(--text-muted); }