/* ============================================================================
   HelpDesk Alucomaxx — folha de estilo do service desk
   ============================================================================
   Direcao pedida: mais clean, no estilo ManageEngine ServiceDesk Plus.

   COMO ELA FUNCIONA. Cada pagina ja tinha o proprio <style> com um :root de
   tokens (--bg, --sidebar, --blue...). Em vez de reescrever 8 mil linhas de
   HTML, esta folha entra DEPOIS no <head> e redefine os tokens. As paginas
   continuam pedindo var(--bg); o que muda e o valor. Isso mantem intacto todo
   o comportamento e reduz o risco de quebrar tela em producao.

   O que os tokens nao alcancam sao as cores escritas na mao no shell da
   barra lateral (#94a3b8 sobre fundo quase preto). Essas estao sobrescritas
   uma a uma mais abaixo.

   ONDE ELA SE APLICA. So no service desk: chamados, detalhe do chamado,
   solicitacoes, admin, permissoes, relatorios e login. As telas de
   monitoramento (monitor, banco, rede, UniFi, TV) seguem escuras de proposito
   - sao paineis de NOC e usam a paleta do Grafana; fundo branco num telao de
   parede cansa e reflete.
   ============================================================================ */

:root {
  /* Superficies. O cinza do canvas e frio e baixo o suficiente para o branco
     dos cards se destacar sem precisar de sombra. */
  --bg:        #f2f5f9;
  --bg2:       #ffffff;
  --bg3:       #f6f8fb;
  --bg4:       #eef2f7;

  --border:    #e3e9f0;
  --border2:   #cdd7e3;

  --text:      #16212d;
  --text2:     #5a6b7d;
  --text3:     #8d9bab;

  /* Azul de servico, nao azul de marketing: dessaturado, legivel em texto
     pequeno e discreto quando usado em area grande. */
  --blue:      #1668b3;
  --blue-d:    #12558f;
  --blue-l:    #eaf3fb;
  --blue-b:    #bcd8ef;

  --green:     #17803d;  --green-l:  #e8f6ed;
  --yellow:    #94660a;  --yellow-l: #fdf5e4;
  --red:       #b42318;  --red-l:    #fdecea;
  --purple:    #6b3fa0;  --purple-l: #f2edfa;
  --amber:     #94660a;

  /* A barra lateral deixa de ser quase preta. Era o que mais pesava. */
  --sidebar:   #ffffff;

  --r:         6px;
  --r-sm:      4px;
  --sombra:    0 1px 2px rgba(16, 33, 51, .04);
}

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- lateral --
   As regras originais assumiam fundo escuro e fixaram as cores na mao. Com a
   lateral branca elas ficariam ilegiveis, entao vao todas sobrescritas. */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}
.s-logo {
  border-bottom: 1px solid var(--border);
  padding: 16px 14px;
}
.s-logo-icon {
  background: var(--blue);
  box-shadow: none;
}
.s-logo-text { color: var(--text); font-weight: 650; letter-spacing: -.2px; }
.s-logo-sub  { color: var(--text3); }

.s-section {
  color: var(--text3);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 14px 8px 4px;
}
.s-item {
  color: var(--text2);
  font-weight: 500;
  border-radius: var(--r-sm);
  /* a faixa de destaque fica reservada desde ja: sem isto o item pula 3px
     ao virar ativo */
  border-left: 3px solid transparent;
  padding-left: 8px;
}
.s-item:hover { background: var(--bg4); color: var(--text); }
.s-item.active {
  background: var(--blue-l);
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}
.s-item svg { opacity: .85; }
.s-badge { background: var(--red); }

.s-footer { border-top: 1px solid var(--border); }
.s-user:hover  { background: var(--bg4); }
.s-user-name   { color: var(--text); }
.s-user-role   { color: var(--text3); }
.s-avatar      { background: var(--blue); box-shadow: none; }

/* ----------------------------------------------------------------- topo --- */
.topbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  height: 56px;
}
.topbar-title { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }

.content { padding: 20px 24px; }

/* --------------------------------------------------------------- cartoes ---
   Borda em vez de sombra. Varias caixas com sombra empilhadas sao a principal
   fonte de "sujeira" visual numa tela densa de service desk. */
.card, .panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sombra);
}
.card-header, .panel-header {
  border-bottom: 1px solid var(--border);
  padding: 13px 16px;
  background: transparent;
}
.card-title, .panel-title, .panel-titulo {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -.1px;
}

/* --------------------------------------------------------------- botoes --- */
.btn {
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
  font-weight: 550;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg4); border-color: var(--text3); }
.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn-primary:hover { background: var(--blue-d); border-color: var(--blue-d); }
.btn-green {
  background: var(--green-l); color: var(--green); border-color: #b7e2c6;
}
.btn-green:hover { background: #dcf1e4; }
.btn:focus-visible, .input:focus-visible, .s-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* -------------------------------------------------------------- entradas --- */
.input, .select, input[type=text], input[type=date], input[type=search],
input[type=email], input[type=password], input[type=number], select, textarea {
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
}
.input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(22, 104, 179, .12);
}
.label, .lbl { color: var(--text2); font-weight: 600; }

/* --------------------------------------------------------------- tabelas ---
   Sem zebra. A linha fina embaixo basta para o olho seguir, e zebra numa
   tabela ja cheia de etiquetas coloridas vira ruido. */
.table th, .tabela th {
  background: var(--bg3);
  color: var(--text2);
  font-weight: 650;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.table td, .tabela td { border-bottom: 1px solid var(--border); }
.table tr.clickable:hover, .tabela tr:hover td { background: var(--bg3); }

/* -------------------------------------------------------------- etiquetas --- */
.badge {
  border-radius: 11px;
  font-weight: 650;
  letter-spacing: .01em;
}

/* ------------------------------------------------------------------ abas --- */
.panel-tab, .tab {
  color: var(--text2);
  font-weight: 550;
}
.panel-tab.active, .tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 650;
}

/* ------------------------------------------------------------------ vazio --- */
.empty { color: var(--text3); }
.erro-box {
  background: var(--red-l);
  border: 1px solid #f3c9c4;
  color: var(--red);
  border-radius: var(--r);
}

/* ------------------------------------------------------------------ modal --- */
.modal-overlay { background: rgba(16, 33, 51, .38); }
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(16, 33, 51, .16);
}

/* ------------------------------------------------------------- acabamento --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #ccd6e0; border-radius: 6px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #b3c0cd; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}