/* ============================================================================
   smartdesk.css — tela "Acesso Remoto" (ScreenSmartDesk.pas)

   Lista dos dispositivos que rodam o SmartDeskRemote (fork do RustDesk da
   PdvSmart) e se reportam ao SmartServerLaz. Reaproveita o visual do Monitor
   (mon-btn, mon-table, mon-tablewrap, mon-kpi, mon-dot, mon-vazio, mon-hint);
   aqui so vive o que e proprio desta tela.
   ============================================================================ */

.sd-cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}

.sd-cardhead h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}

.sd-cardhead h2 i { color: var(--primary); }

.sd-cardhead-acoes {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.sd-info {
  font-size: .78rem;
  color: var(--text-muted);
}

/* busca + filtro */
.sd-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: .9rem 0 .75rem;
}

.sd-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 220px;
}

.sd-search i {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  cursor: pointer;
}

.sd-search input {
  width: 100%;
  padding: .55rem .75rem .55rem 2.1rem;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-size: .85rem;
}

.sd-search input:focus {
  outline: none;
  border-color: var(--primary);
}

.sd-filtro {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  color: var(--text-muted);
}

.sd-filtro select {
  padding: .45rem .6rem;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-size: .82rem;
}

/* tabela */
.sd-table td { vertical-align: top; }

.sd-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

.sd-sub i { margin-right: .2rem; opacity: .8; }

.sd-muted { color: var(--text-muted); }

.sd-col-status { white-space: nowrap; }
.sd-col-status .mon-dot { margin-right: .35rem; }

.sd-off td { opacity: .72; }
.sd-off .sd-col-status { color: var(--text-muted); }
.sd-on .sd-col-status { color: var(--success); font-weight: 600; }

.sd-col-id { white-space: nowrap; }

.sd-id {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  padding: .15rem .4rem;
  border-radius: 6px;
}

.sd-copy {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: .1rem .3rem;
  margin-left: .2rem;
}

.sd-copy:hover { color: var(--primary); }

.sd-col-acoes { white-space: nowrap; text-align: right; }
.sd-col-acoes a { text-decoration: none; }

/* ---- Rodada 2 (02/10/2026) ---- */

/* Os 3 indicadores (online / offline / no filtro) numa linha so, cada um
   compacto: numero e rotulo lado a lado em vez de empilhados (o .mon-kpi do
   Monitor empilha, e aqui ocupava duas linhas). */
.sd-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .7rem;
}
.sd-kpis .mon-kpi {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .35rem .75rem;
}
.sd-kpis .mon-kpi span { display: inline; }
.sd-kpis .mon-kpi .mon-num {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.sd-kpis .mon-kpi--warn .mon-num { color: var(--danger); }

/* Vincular e Conectar com respiro entre si. */
/* display:flex num <td> tira a celula do layout de tabela e a coluna de
   acoes desalinha das linhas (visto em producao 02/10). O flex fica num
   <div> DENTRO da celula; o td continua table-cell. */
.sd-acoes {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: .45rem;
}

/* ---- Grupos (05/10/2026) ----
   Coluna a esquerda da tabela: Todos / .Instalação / grupos cadastrados no
   modal Vincular. Cada item e um botao de gp-repeater (data-action="grupo").
   No celular a coluna vira uma faixa rolavel acima da tabela. */
.sd-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.sd-main { min-width: 0; }
.sd-main .sd-controls { margin-top: 0; }

.sd-grupos {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
}

.sd-grupos-tit {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
}

.sd-grupos-lista {
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
}

.sd-grupo {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: .84rem;
  text-align: left;
  cursor: pointer;
}

.sd-grupo i {
  width: 1.1rem;
  text-align: center;
  color: var(--text-muted);
}

.sd-grupo:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }

.sd-grupo.is-active {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-weight: 600;
}
.sd-grupo.is-active i { color: var(--primary); }

.sd-grupo-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-grupo-qtd {
  font-size: .72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.sd-grupo-qtd b { color: var(--success); font-weight: 700; }

.sd-tipo {
  margin-left: .3rem;
  padding: 0 .35rem;
  border-radius: 4px;
  font-size: .66rem;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .sd-layout { grid-template-columns: 1fr; }
  .sd-grupos-lista {
    flex-direction: row;
    overflow-x: auto;
    max-height: none;
  }
  .sd-grupo {
    width: auto;
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }
  .sd-grupo.is-active { border-bottom-color: var(--primary); }
}

/* ---- Menu de acoes "..." (05/10/2026, [MENU-ACOES] do ScreenSmartDesk) ----
   O menu mora dentro da linha (os data-action precisam do data-index da
   linha), mas e position:fixed com top/right calculados no clique: nenhum
   overflow da tabela o recorta. */
.sd-menu-btn { min-width: 2rem; justify-content: center; }
.sd-menu {
  display: none;
  position: fixed;
  z-index: 900;
  min-width: 190px;
  padding: .3rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
.sd-menu.is-open { display: flex; flex-direction: column; }
.sd-menu button,
.sd-menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .7rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: .85rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sd-menu button i,
.sd-menu a i { width: 1rem; text-align: center; color: var(--text-muted); }
.sd-menu button:hover,
.sd-menu a:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.sd-menu button:hover i,
.sd-menu a:hover i { color: var(--primary); }
.sd-menu hr { margin: .25rem .3rem; border: 0; border-top: 1px solid var(--card-border); }
/* [FERRAMENTAS] rotulo do grupo "Sem abrir a tela" */
.sd-menu .sd-menu-tit { padding: .2rem .7rem .1rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

/* KPIs na mesma linha da pesquisa, depois do select Mostrar (05/10/2026). */
.sd-controls .sd-kpis { margin-bottom: 0; flex-wrap: nowrap; }
/* Online em verde, par do offline em vermelho (mon-kpi--warn). */
.sd-kpis .mon-kpi--ok { border-color: var(--success); }
.sd-kpis .mon-kpi--ok .mon-num { color: var(--success); }

/* Coluna "Versão" do cliente (antes de Sessões) */
.sd-col-versao {
  white-space: nowrap;
  font-size: .8rem;
  color: var(--text-muted);
  text-align: center;
}