/* ==================================================================
   Gerenciador de Sessões OpenWA — tema "console de operação"
   Camada própria sobre o Bootstrap: tokens, superfícies, botões,
   tabelas densas, badges de status e terminal de log.
   ================================================================== */

:root {
  --bg:        #080b11;
  --bg-grade:  radial-gradient(1200px 600px at 15% -10%, rgba(56,189,248,.10), transparent 60%),
               radial-gradient(900px 500px at 110% 0%, rgba(99,102,241,.10), transparent 55%);
  --panel:     #0e141d;
  --panel-alt: #121a25;
  --panel-top: #0b1119;
  --line:      rgba(148,163,184,.14);
  --line-forte:rgba(148,163,184,.26);

  --txt:       #dfe7f2;
  --txt-suave: #8b9bb4;
  --txt-fraco: #61728c;

  --accent:    #38bdf8;
  --accent-2:  #6366f1;
  --ok:        #34d399;
  --warn:      #fbbf24;
  --err:       #fb7185;

  --raio:      10px;
  --raio-sm:   7px;
  --mono:      ui-monospace, "JetBrains Mono", "SF Mono", Consolas, monospace;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--txt);
  --bs-border-color: var(--line);
}

body {
  background: var(--bg-grade), var(--bg);
  background-attachment: fixed;
  color: var(--txt);
  font-size: 13.5px;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------- barra do topo */
.barra-topo {
  background: linear-gradient(180deg, rgba(18,26,37,.96), rgba(11,17,25,.96));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 1030;
  padding: .55rem 1rem;
}
.marca { display: flex; align-items: center; gap: .6rem; }
.marca-icone {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px rgba(56,189,248,.28), inset 0 1px 0 rgba(255,255,255,.35);
  color: #04121d;
}
.marca-titulo { font-weight: 650; font-size: .95rem; letter-spacing: .2px; line-height: 1.1; }
.marca-sub {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--txt-fraco); font-weight: 600;
}

/* chips de contagem (ONLINE / OFFLINE) */
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(148,163,184,.06);
  font-size: .72rem; font-weight: 600; color: var(--txt-suave);
  font-variant-numeric: tabular-nums;
}
.chip b { color: var(--txt); font-weight: 700; }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-fraco); flex: none; }
.ponto-ok   { background: var(--ok);   box-shadow: 0 0 0 3px rgba(52,211,153,.15); }
.ponto-off  { background: var(--txt-fraco); }
.ponto-err  { background: var(--err);  box-shadow: 0 0 0 3px rgba(251,113,133,.15); }
.ponto-vivo { animation: pulso 2s ease-in-out infinite; }
@keyframes pulso { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------------------------------------------------- superfícies */
.card, .tab-content {
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border: 1px solid var(--line);
  border-radius: var(--raio);
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 10px 30px -18px rgba(0,0,0,.9);
}
.card-header {
  background: var(--panel-top);
  border-bottom: 1px solid var(--line);
  color: var(--txt-suave);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  padding: .5rem .75rem;
}
.card-header .normal { text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--txt-fraco); }

/* barra de ações dentro dos cards */
.barra-acoes {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .65rem;
  padding: .65rem .75rem;
}

/* ---------------------------------------------------- abas */
.nav-tabs { border-bottom: 1px solid var(--line); gap: .25rem; padding: 0 .25rem; }
.nav-tabs .nav-link {
  border: 0; border-radius: 0; padding: .55rem .95rem;
  color: var(--txt-suave); font-weight: 600; font-size: .82rem;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover { color: var(--txt); border-bottom-color: var(--line-forte); }
.nav-tabs .nav-link.active {
  color: var(--txt); background: transparent;
  border-bottom-color: var(--accent);
  text-shadow: 0 0 18px rgba(56,189,248,.35);
}
.tab-content { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ---------------------------------------------------- botões */
.btn {
  --sombra: 0 1px 0 rgba(255,255,255,.06) inset;
  border-radius: var(--raio-sm);
  font-weight: 600; font-size: .78rem;
  letter-spacing: .02em;
  padding: .38rem .8rem;
  border: 1px solid var(--line-forte);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
  box-shadow: var(--sombra);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(56,189,248,.35); }
.btn:disabled { opacity: .4; }

.btn-neutro {
  background: linear-gradient(180deg, rgba(148,163,184,.12), rgba(148,163,184,.05));
  color: var(--txt-suave);
}
.btn-neutro:hover:not(:disabled) { color: var(--txt); border-color: var(--line-forte); background: rgba(148,163,184,.16); }

.btn-acento {
  background: linear-gradient(180deg, #3aa8e0, #2563eb);
  border-color: rgba(56,189,248,.5); color: #f2f9ff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px -10px rgba(37,99,235,.9);
}
.btn-acento:hover:not(:disabled) { color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 22px -10px rgba(37,99,235,1); }

.btn-ok {
  background: linear-gradient(180deg, #2fbe86, #109c67);
  border-color: rgba(52,211,153,.45); color: #04150e;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px -10px rgba(16,185,129,.9);
}
.btn-ok:hover:not(:disabled) { color: #02100a; }

.btn-perigo {
  background: linear-gradient(180deg, rgba(251,113,133,.16), rgba(244,63,94,.10));
  border-color: rgba(251,113,133,.4); color: #ffc2cc;
}
.btn-perigo:hover:not(:disabled) { background: rgba(244,63,94,.22); color: #fff; border-color: rgba(251,113,133,.65); }

.btn-xs { padding: .22rem .55rem; font-size: .72rem; }

/* ---------------------------------------------------- formulários */
.form-control, .form-select {
  background: rgba(8,12,18,.75);
  border: 1px solid var(--line);
  color: var(--txt);
  border-radius: var(--raio-sm);
  font-size: .82rem;
}
.form-control:focus, .form-select:focus {
  background: rgba(8,12,18,.9);
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 3px rgba(56,189,248,.14);
  color: var(--txt);
}
.form-control::placeholder { color: var(--txt-fraco); }
.form-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--txt-fraco); font-weight: 700; margin-bottom: .22rem;
}
.campo-num { width: 84px; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.campo-num-sm { width: 62px; }

.campo-mono {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  background: rgba(6,9,14,.72) !important;
  border: 0 !important; border-radius: 0 0 var(--raio) var(--raio) !important;
  resize: vertical; color: #cfe0f2;
}
.campo-mono:focus { box-shadow: inset 0 0 0 1px rgba(56,189,248,.35) !important; }

/* ---------------------------------------------------- tabelas */
.table { --bs-table-bg: transparent; color: var(--txt); margin: 0; }
.table > :not(caption) > * > * { padding: .42rem .6rem; border-bottom-color: var(--line); }
.table thead th {
  background: var(--panel-top) !important;
  color: var(--txt-fraco);
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 1px solid var(--line-forte) !important;
  white-space: nowrap;
}
.table tbody tr { transition: background .12s; }
.table tbody tr:hover > td { background: rgba(56,189,248,.05); }
.table td { vertical-align: middle; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .78rem; }
.id-sessao { font-family: var(--mono); font-size: .68rem; color: var(--txt-fraco); }

.rolavel    { max-height: 268px; overflow-y: auto; }
.rolavel-sm { max-height: 224px; overflow-y: auto; }
.rolavel::-webkit-scrollbar, .rolavel-sm::-webkit-scrollbar,
.campo-mono::-webkit-scrollbar, #log::-webkit-scrollbar { width: 9px; height: 9px; }
.rolavel::-webkit-scrollbar-thumb, .rolavel-sm::-webkit-scrollbar-thumb,
.campo-mono::-webkit-scrollbar-thumb, #log::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box;
}
.rolavel::-webkit-scrollbar-thumb:hover, #log::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.35); background-clip: content-box; }

/* célula editável */
.editavel { cursor: pointer; border-radius: 5px; transition: background .12s, color .12s; }
.editavel:hover { background: rgba(56,189,248,.12); color: #fff; }
.editavel::after {
  content: "✎"; font-size: .62rem; opacity: 0; margin-left: .28rem;
  transition: opacity .12s; color: var(--accent);
}
.editavel:hover::after { opacity: .85; }

tr.ativa > td { background: rgba(56,189,248,.09) !important; }
tr.ativa > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* ---------------------------------------------------- etiquetas */
.etiqueta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .16rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid transparent; white-space: nowrap;
}
.etiqueta-geral  { background: rgba(56,189,248,.14);  color: #7dd3fc; border-color: rgba(56,189,248,.35); }
.etiqueta-carros { background: rgba(251,191,36,.14);  color: #fcd34d; border-color: rgba(251,191,36,.32); }
.etiqueta-uk     { background: rgba(167,139,250,.16); color: #c4b5fd; border-color: rgba(167,139,250,.35); }
.etiqueta-vazio  { background: rgba(148,163,184,.07); color: var(--txt-fraco); border-color: var(--line); }
.etiqueta-ok     { background: rgba(52,211,153,.12);  color: #6ee7b7; border-color: rgba(52,211,153,.3); }
.etiqueta-off    { background: rgba(148,163,184,.09); color: var(--txt-suave); border-color: var(--line); }

.seletor-cat { cursor: pointer; user-select: none; min-width: 74px; justify-content: center; }
.seletor-cat:hover { filter: brightness(1.25); }

/* marca de seleção */
.marcador {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; border-radius: 5px;
  border: 1px solid var(--line-forte); background: rgba(8,12,18,.6);
  cursor: pointer; font-size: .66rem; color: transparent; transition: all .13s;
}
.marcador:hover { border-color: rgba(56,189,248,.6); }
.marcador.on {
  background: linear-gradient(180deg, #3aa8e0, #2563eb);
  border-color: rgba(56,189,248,.7); color: #fff;
  box-shadow: 0 0 12px -2px rgba(56,189,248,.6);
}
.marcador.travado { cursor: not-allowed; opacity: .5; color: var(--txt-fraco); background: transparent; }

/* ---------------------------------------------------- rodapé de execução */
.painel-exec {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem;
  padding: .7rem .85rem;
  background: linear-gradient(180deg, rgba(17,24,35,.9), rgba(11,16,24,.9));
  border: 1px solid var(--line); border-radius: var(--raio);
  margin-top: .85rem;
}
.estado-exec {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; color: var(--txt-suave); font-family: var(--mono);
}
.barra-progresso {
  height: 3px; width: 120px; border-radius: 99px; overflow: hidden;
  background: rgba(148,163,184,.15);
}
.barra-progresso > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s ease;
}

/* ---------------------------------------------------- terminal de log */
.card-log { border-color: rgba(56,189,248,.16); }
#log {
  height: 262px; overflow-y: auto; margin: 0; padding: .6rem .75rem;
  background:
    linear-gradient(180deg, rgba(6,10,16,.96), rgba(5,8,13,.96));
  font-family: var(--mono); font-size: 11.6px; line-height: 1.75;
  border-radius: 0 0 var(--raio) var(--raio);
}
#log .l { white-space: pre-wrap; color: #9fb2c9; border-left: 2px solid transparent; padding-left: .5rem; }
#log .l-ok   { color: #a7f3d0; border-left-color: rgba(52,211,153,.5); }
#log .l-err  { color: #fecdd3; border-left-color: rgba(251,113,133,.5); }
#log .l-warn { color: #fde68a; border-left-color: rgba(251,191,36,.45); }
#log .l-info { color: #bae6fd; border-left-color: rgba(56,189,248,.4); }
#log .l-espera { color: var(--txt-fraco); font-style: italic; }

/* ---------------------------------------------------- modal */
.modal-content {
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border: 1px solid var(--line-forte); border-radius: var(--raio);
  box-shadow: 0 30px 80px -30px #000;
}
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--txt-suave); font-weight: 700; }

/* ---------------------------------------------------- login */
.tela-login { min-height: 100vh; display: grid; place-items: center; }
.caixa-login { width: 100%; max-width: 370px; }
.caixa-login .card-body { padding: 1.75rem; }

/* ---------------------------------------------------- utilidades */
.rotulo-secao {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--txt-fraco); font-weight: 700;
}
.divisor { height: 1px; background: var(--line); margin: .5rem 0; }
.form-switch .form-check-input { background-color: rgba(148,163,184,.2); border-color: var(--line-forte); }
.form-switch .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(56,189,248,.2); border-color: rgba(56,189,248,.5); }

@media (max-width: 991px) {
  .marca-sub { display: none; }
  .painel-exec { gap: .6rem; }
}