/* =========================================================
   CODE BLACK — Portal de Suporte
   Tokens de marca
   ========================================================= */
:root{
  --cb-bg:        #0b0b0c;
  --cb-bg-soft:   #131314;
  --cb-card:      #17181a;
  --cb-border:    #262729;
  --cb-yellow:    #f5c400;
  --cb-yellow-dk: #caa000;
  --cb-white:     #f5f5f5;
  --cb-gray:      #9a9a9c;
  --cb-gray-dim:  #6b6b6d;
  --cb-danger:    #ef5350;
  --cb-info:      #4fa3d8;
  --cb-success:   #4caf7d;
  --cb-radius:    10px;
  --cb-radius-sm: 6px;
  --cb-sidebar-w: 240px;
  --cb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--cb-bg);
  color:var(--cb-white);
  font-family:var(--cb-font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--cb-yellow);color:#111}

/* Scrollbar discreta */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2b2b2d;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3a3a3c}

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

/* ---------- SIDEBAR ---------- */
.cb-sidebar{
  width:var(--cb-sidebar-w);
  flex-shrink:0;
  background:#0a0a0a;
  border-right:1px solid var(--cb-border);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.cb-sidebar__brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:22px 20px;
  border-bottom:1px solid var(--cb-border);
}
.cb-sidebar__brand img{
  width:34px;
  height:34px;
  object-fit:contain;
}
.cb-sidebar__brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.cb-sidebar__brand-text b{
  font-size:15px;
  letter-spacing:.5px;
  color:#fff;
}
.cb-sidebar__brand-text span{
  font-size:15px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--cb-yellow);
}

.cb-nav{
  flex:1;
  padding:16px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cb-nav__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:var(--cb-radius-sm);
  color:var(--cb-gray);
  font-size:13.5px;
  font-weight:500;
  border-left:3px solid transparent;
  transition:background .15s ease,color .15s ease;
}
.cb-nav__item:hover{
  background:var(--cb-bg-soft);
  color:#fff;
}
.cb-nav__item.is-active{
  background:linear-gradient(90deg, rgba(245,196,0,.12), transparent);
  border-left:3px solid var(--cb-yellow);
  color:var(--cb-yellow);
  font-weight:700;
}
.cb-nav__icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cb-nav__icon svg{width:100%;height:100%}
.cb-nav__badge{
  margin-left:auto;
  background:var(--cb-yellow);
  color:#111;
  font-size:10.5px;
  font-weight:800;
  padding:1px 7px;
  border-radius:999px;
}

.cb-sidebar__footer{
  padding:14px 20px;
  border-top:1px solid var(--cb-border);
  font-size:11.5px;
  color:var(--cb-gray-dim);
}

/* ---------- MAIN ---------- */
.cb-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.cb-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 28px;
  border-bottom:1px solid var(--cb-border);
  background:var(--cb-bg);
  position:sticky;
  top:0;
  z-index:5;
}
.cb-topbar__title{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cb-topbar__title h1{
  margin:0;
  font-size:19px;
  font-weight:800;
  color:#fff;
}
.cb-topbar__title span{
  font-size:12.5px;
  color:var(--cb-gray);
}
.cb-topbar__actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.cb-content{
  padding:24px 28px 60px;
  flex:1;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.cb-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--cb-border);
  background:var(--cb-card);
  color:#fff;
  padding:10px 16px;
  border-radius:var(--cb-radius-sm);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:filter .15s ease, transform .05s ease;
}
.cb-btn:hover{filter:brightness(1.15)}
.cb-btn:active{transform:scale(.98)}
.cb-btn--primary{
  background:var(--cb-yellow);
  border-color:var(--cb-yellow);
  color:#141414;
}
.cb-btn--ghost{
  background:transparent;
}
.cb-btn--danger{
  background:transparent;
  border-color:var(--cb-danger);
  color:var(--cb-danger);
}

/* =========================================================
   CARDS / STATS
   ========================================================= */
.cb-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-bottom:22px;
}
.cb-stat{
  background:var(--cb-card);
  border:1px solid var(--cb-border);
  border-radius:var(--cb-radius);
  padding:16px 18px;
  position:relative;
  overflow:hidden;
}
.cb-stat::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--stat-color, var(--cb-yellow));
}
.cb-stat b{
  display:block;
  font-size:26px;
  font-weight:800;
  color:#fff;
}
.cb-stat span{
  font-size:12.5px;
  color:var(--cb-gray);
}

.cb-card{
  background:var(--cb-card);
  border:1px solid var(--cb-border);
  border-radius:var(--cb-radius);
}

/* =========================================================
   FILTROS
   ========================================================= */
.cb-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.cb-input, .cb-select, textarea.cb-textarea{
  background:var(--cb-bg-soft);
  border:1px solid var(--cb-border);
  color:#fff;
  padding:10px 12px;
  border-radius:var(--cb-radius-sm);
  font-size:13.5px;
  outline:none;
}
.cb-input:focus, .cb-select:focus, textarea.cb-textarea:focus{
  border-color:var(--cb-yellow);
}
.cb-input--search{min-width:220px}

/* =========================================================
   TABELA DE CHAMADOS
   ========================================================= */
.cb-table-wrap{
  overflow-x:auto;
}
table.cb-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.3px;
}
table.cb-table th{
  text-align:left;
  color:var(--cb-gray);
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding:12px 16px;
  border-bottom:1px solid var(--cb-border);
  white-space:nowrap;
}
table.cb-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--cb-border);
  vertical-align:middle;
}
table.cb-table tbody tr{
  cursor:pointer;
  transition:background .12s ease;
}
table.cb-table tbody tr:hover{
  background:var(--cb-bg-soft);
}
.cb-proto{
  font-family:Consolas,Menlo,monospace;
  color:var(--cb-gray);
  font-size:12px;
}

/* Badges de status/prioridade */
.cb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.cb-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cb-badge--aberto{background:rgba(79,163,216,.15);color:var(--cb-info)}
.cb-badge--em_andamento{background:rgba(245,196,0,.15);color:var(--cb-yellow)}
.cb-badge--aguardando{background:rgba(154,154,156,.15);color:var(--cb-gray)}
.cb-badge--resolvido{background:rgba(76,175,125,.15);color:var(--cb-success)}
.cb-badge--fechado{background:rgba(154,154,156,.15);color:var(--cb-gray-dim)}

/* Pendência: de quem é a vez de responder */
.cb-badge--aguardando_atendimento{background:rgba(79,163,216,.15);color:var(--cb-info)}
.cb-badge--aguardando_cliente{background:rgba(154,154,156,.15);color:var(--cb-gray)}
.cb-badge--aguardando_analista{background:rgba(239,83,80,.15);color:var(--cb-danger)}

.cb-prio{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
}
.cb-prio--baixa{color:var(--cb-success)}
.cb-prio--media{color:var(--cb-info)}
.cb-prio--alta{color:var(--cb-yellow)}
.cb-prio--urgente{color:var(--cb-danger)}

.cb-empty{
  text-align:center;
  padding:60px 20px;
  color:var(--cb-gray);
}
.cb-empty b{display:block;color:#fff;font-size:15px;margin-bottom:6px}

/* =========================================================
   DRAWER (painel lateral direito) — overlay
   ========================================================= */
.cb-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:40;
}
.cb-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.cb-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(480px, 92vw);
  background:var(--cb-bg-soft);
  border-left:1px solid var(--cb-border);
  box-shadow:-12px 0 40px rgba(0,0,0,.45);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.9,.28,1);
  z-index:41;
  display:flex;
  flex-direction:column;
}
.cb-drawer.is-open{
  transform:translateX(0);
}
.cb-drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid var(--cb-border);
}
.cb-drawer__header h2{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#fff;
}
.cb-drawer__header span{
  font-size:12px;
  color:var(--cb-gray);
}
.cb-drawer__close{
  width:30px;height:30px;
  border-radius:8px;
  border:1px solid var(--cb-border);
  background:transparent;
  color:var(--cb-gray);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.cb-drawer__close:hover{color:#fff;border-color:var(--cb-yellow)}

.cb-drawer__body{
  padding:20px 22px;
  overflow-y:auto;
  flex:1;
}
.cb-drawer__footer{
  padding:16px 22px;
  border-top:1px solid var(--cb-border);
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* Formulários */
.cb-field{
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cb-field label{
  font-size:12.5px;
  font-weight:700;
  color:var(--cb-gray);
  text-transform:uppercase;
  letter-spacing:.3px;
}
.cb-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
textarea.cb-textarea{
  min-height:120px;
  resize:vertical;
  font-family:inherit;
}
.cb-hint{font-size:11.5px;color:var(--cb-gray-dim)}

/* Prioridade — seletor tipo chips */
.cb-chip-group{display:flex;gap:8px;flex-wrap:wrap}
.cb-chip{
  border:1px solid var(--cb-border);
  background:var(--cb-bg-soft);
  color:var(--cb-gray);
  padding:8px 14px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s ease;
}
.cb-chip.is-selected{
  border-color:var(--cb-yellow);
  color:var(--cb-yellow);
  background:rgba(245,196,0,.1);
}

/* Timeline de comentários no drawer de detalhe */
.cb-timeline{display:flex;flex-direction:column;gap:14px}
.cb-timeline__item{
  border-left:2px solid var(--cb-border);
  padding-left:14px;
  position:relative;
}
.cb-timeline__item::before{
  content:"";
  position:absolute;
  left:-5px;top:2px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--cb-yellow);
}
.cb-timeline__item b{font-size:13px;color:#fff}
.cb-timeline__item time{font-size:11px;color:var(--cb-gray-dim);margin-left:8px}
.cb-timeline__item p{margin:4px 0 0;font-size:13px;color:var(--cb-gray)}

/* =========================================================
   PLACEHOLDER (páginas ainda não desenhadas em detalhe)
   ========================================================= */
.cb-placeholder{
  border:1px dashed var(--cb-border);
  border-radius:var(--cb-radius);
  padding:60px 30px;
  text-align:center;
  color:var(--cb-gray);
}
.cb-placeholder b{color:#fff;font-size:16px;display:block;margin-bottom:8px}

/* Responsivo */
@media (max-width: 860px){
  .cb-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .25s ease;z-index:50}
  .cb-sidebar.is-open{transform:translateX(0)}
  .cb-field-row{grid-template-columns:1fr}
}