/* ========================================================================== */
/* VB Helpdesk — stylesheet único (dark)                                      */
/* ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --bg:#0b1220;
  --bg-elev:#0f172a;
  --card:#0f172a;
  --line:#1f2937;
  --text:#e5e7eb;
  --text-dim:#94a3b8;
  --brand:#3b82f6;
  --brand-700:#2563eb;
  --ok:#10b981;
  --warn:#f59e0b;
  --alert:#ef4444;
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}
small,.muted{color:var(--text-dim)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

/* ---------- Layout ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 18px;
  background:#0c1324; border-bottom:1px solid var(--line);
}
.topbar .brand{font-weight:700; letter-spacing:.2px}
.topbar nav{display:flex; align-items:center; gap:12px}
.container{max-width:1100px; margin:22px auto; padding:0 16px}
footer.site{opacity:.85; font-size:12px; padding:18px 0; border-top:1px solid var(--line); margin-top:24px}

/* ---------- Botões ---------- */
.btn,.btn-primary,.btn-secondary,.btn-danger,.btn-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px; border-radius:10px; border:1px solid transparent;
  font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn{background:#1f2937; border-color:#334155; color:var(--text)}
.btn:hover{filter:brightness(1.05)}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-700); border-color:var(--brand-700)}
.btn-secondary{background:#1f2937; border-color:#334155; color:#e5e7eb}
.btn-danger{background:#7f1d1d; border-color:#7f1d1d; color:#fecaca}
.btn-link{padding:0; border:0; background:transparent; color:#93c5fd}
.btn-link:hover{text-decoration:underline}

/* ---------- Inputs / Formulários ---------- */
.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"],
select, textarea{
  width:100%; color:var(--text); background:#0c1324;
  border:1px solid var(--line); border-radius:10px; outline:none;
  padding:9px 12px; transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:120px; resize:vertical}
input::placeholder, textarea::placeholder{color:#64748b}
input:focus, select:focus, textarea:focus{border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15)}
label{display:block; font-weight:600; margin:10px 0 6px}

/* Form “Abrir Chamado” */
.form-card{max-width:900px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .col-span-2{grid-column:span 2}
@media (max-width:900px){ .form-grid{grid-template-columns:1fr} }

/* ---------- Tabelas (se usar) ---------- */
.table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left}
.table th{background:#0c1324; font-weight:700}
.table tr:last-child td{border-bottom:0}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background:#0b1220;
}
/* Status */
.badge.status.aberto{color:#60a5fa; border-color:#1e3a8a}
.badge.status.em-atendimento{color:#22d3ee; border-color:#155e75}
.badge.status.aguardando-cliente{color:#f59e0b; border-color:#7c2d12}
.badge.status.resolvido{color:#10b981; border-color:#064e3b}
.badge.status.fechado{color:#cbd5e1; border-color:#334155}
/* Prioridade */
.badge.prio.baixa{color:#a3e635; border-color:#3f6212}
.badge.prio.média{color:#f59e0b; border-color:#7c2d12}
.badge.prio.alta{color:#f97316; border-color:#7c2d12}
.badge.prio.crítica{color:#ef4444; border-color:#7f1d1d}

/* ---------- Lista em Cards (Home) ---------- */
.cards-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px
}
.header-actions{display:flex; gap:8px}
.filters{
  display:grid; grid-template-columns:1.3fr .8fr .8fr .6fr auto;
  gap:10px; margin-bottom:14px
}
@media (max-width:900px){ .filters{grid-template-columns:1fr 1fr} }

.cards-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:1100px){ .cards-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .cards-grid{grid-template-columns:1fr} }

.card, .card-ticket{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px;
}
.card-ticket{display:flex; flex-direction:column; gap:10px}
.card-ticket-head{display:flex; gap:8px; align-items:center; justify-content:flex-start}
.ticket-title{margin:0 0 2px; font-size:16px; font-weight:600}
.ticket-meta{margin:0; color:var(--text-dim); font-size:13px; line-height:1.5}
.card-ticket-foot{display:flex; justify-content:flex-end}

.empty-state{text-align:left}
.empty-state h3{margin:0 0 6px}

/* ---------- Paginação ---------- */
.pagination{display:flex; gap:8px; justify-content:center; margin-top:16px}
.page{
  padding:8px 12px; border:1px solid #334155; border-radius:10px;
  text-decoration:none; color:#e5e7eb
}
.page.active{background:var(--brand); border-color:var(--brand)}

/* ---------- Utilitários ---------- */
.grid{display:grid; gap:12px}
.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }
.mt-0{margin-top:0} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px}
.mb-0{margin-bottom:0} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px}
.center{display:flex; align-items:center; justify-content:center}

/* ---------- Select com “setinha” custom ---------- */
select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#64748b 50%),
    linear-gradient(135deg,#64748b 50%,transparent 50%),
    linear-gradient(to right,#0c1324,#0c1324);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    100% 0;
  background-size:6px 6px,6px 6px,2.4em 100%;
  background-repeat:no-repeat;
}

/* ---------- Timeline / Chat (ticket_view) ---------- */
.timeline{display:flex;flex-direction:column;gap:12px}
.msg{max-width:100%;display:flex;flex-direction:column;gap:6px}
.msg .body{background:#0c1324;border:1px solid var(--line);padding:12px 14px;border-radius:12px;color:var(--text)}
.msg .meta{font-size:12px;color:var(--text-dim)}
.msg.you .body{background:#0e1a36;border-color:#1e3a8a}
.msg.other .body{background:#0c1324}
.msg.internal .body{border-style:dashed}