/* ============================================================
   octopus-r9.css — RODADA 9 (2026-08-27)
   Duas funcoes novas que valem nos tres paineis (Diretoria, Equipe, Cliente):

     A. ROLAGEM HORIZONTAL — arrastar o conteudo com o mouse e uma barrinha
        flutuante presa no rodape da janela, pra nao precisar rolar a pagina
        inteira ate o fim de uma tabela de mil linhas so pra achar a barra.
     B. PRESENCA — bolinha de status na foto das pessoas e o botao flutuante
        que troca o proprio status.

   Isto NAO faz parte da pele APEX de proposito: sao comportamentos do app, e
   precisam funcionar com a pele ligada ou desligada. Os tokens usados tem
   fallback porque o client.php nao declara exatamente os mesmos do index.php.
   ============================================================ */

/* ===== A. ROLAGEM HORIZONTAL ===== */

/* Sinal de que da pra arrastar. So entra quando o conteudo realmente transborda. */
.r9-hscroll { cursor: grab; }
.r9-hscroll.r9-arrastando { cursor: grabbing; user-select: none; }
.r9-hscroll.r9-arrastando * { cursor: grabbing !important; }

/* Sombra nas bordas: mostra que ainda tem coluna escondida daquele lado. */
.r9-hscroll.r9-tem-esq { box-shadow: inset 14px 0 12px -12px rgba(0,0,0,.45); }
.r9-hscroll.r9-tem-dir { box-shadow: inset -14px 0 12px -12px rgba(0,0,0,.45); }
.r9-hscroll.r9-tem-esq.r9-tem-dir {
  box-shadow: inset 14px 0 12px -12px rgba(0,0,0,.45), inset -14px 0 12px -12px rgba(0,0,0,.45);
}

/* Barrinha flutuante. Fica colada no rodape da janela e comanda a tabela visivel. */
#r9-hbar {
  position: fixed;
  bottom: 0;
  z-index: 900;
  height: 18px;
  display: none;
  align-items: center;
  padding: 0 2px;
  background: var(--surface2, var(--surface, rgba(20,20,20,.86)));
  border-top: 1px solid var(--border2, rgba(255,255,255,.14));
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 14px rgba(0,0,0,.28);
}
#r9-hbar.r9-visivel { display: flex; }
#r9-hbar-trilho {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--border, rgba(255,255,255,.10));
  cursor: pointer;
}
#r9-hbar-alca {
  position: absolute;
  top: 0;
  height: 8px;
  min-width: 28px;
  border-radius: 4px;
  background: var(--accent, #cea046);
  opacity: .75;
  cursor: grab;
  transition: opacity .15s;
}
#r9-hbar-alca:hover { opacity: 1; }
#r9-hbar.r9-puxando #r9-hbar-alca { opacity: 1; cursor: grabbing; }

@media (max-width: 860px) {
  /* No celular o dedo ja rola de lado; a barrinha so atrapalharia. */
  #r9-hbar { display: none !important; }
}

/* ===== B. PRESENCA ===== */

/* Envelope da foto. So vira "relative" aqui pra ancorar a bolinha. */
.r9-av {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  --r9-dot: 10px;
}
.r9-av > .r9-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--r9-dot);
  height: var(--r9-dot);
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--muted2, #8a8a8a);
  box-shadow: 0 0 0 2px var(--surface, #171717);
  pointer-events: none;
  transform: translate(12%, 12%);
}

/* Bolinha solta (usada em listas sem foto, como o ranking da quinzena). */
.r9-dot-solta {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  box-sizing: border-box;
  background: var(--muted2, #8a8a8a);
  flex: none;
}

/* As quatro cores. Offline e vazada de proposito: ausencia nao pode gritar. */
.r9-dot[data-st="disponivel"], .r9-dot-solta[data-st="disponivel"] { background: #22c55e; }
.r9-dot[data-st="ausente"],    .r9-dot-solta[data-st="ausente"]    { background: #eab308; }
.r9-dot[data-st="ocupado"],    .r9-dot-solta[data-st="ocupado"]    { background: #ef4444; }
.r9-dot[data-st="offline"],    .r9-dot-solta[data-st="offline"] {
  background: transparent;
  border: 1.5px solid var(--muted2, #8a8a8a);
}

/* Botao flutuante do proprio status, canto superior direito. */
#r9-presenca-btn {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 1150;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--accent, #cea046);
  border-radius: 50%;
  background: var(--surface2, #222);
  color: var(--text, #eee);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
#r9-presenca-btn.r9-visivel { display: inline-flex; }
#r9-presenca-btn img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
#r9-presenca-btn .r9-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--muted2, #8a8a8a);
  box-shadow: 0 0 0 2px var(--surface2, #222);
}
/* R14 item 26 (30/08/2026): o seletor com ID acima vencia as cores por data-st la de cima
   (ID+classe > classe+atributo), entao a bolinha do botao ficava cinza mesmo com o status
   certo no DOM. As cores repetidas aqui na MESMA especificidade consertam o empate. */
#r9-presenca-btn .r9-dot[data-st="disponivel"] { background: #22c55e; }
#r9-presenca-btn .r9-dot[data-st="ausente"]    { background: #eab308; }
#r9-presenca-btn .r9-dot[data-st="ocupado"]    { background: #ef4444; }
#r9-presenca-btn .r9-dot[data-st="offline"]    { background: transparent; border: 1.5px solid var(--muted2, #8a8a8a); }

#r9-presenca-menu {
  position: fixed;
  top: 62px;
  right: 16px;
  z-index: 1151;
  min-width: 186px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--surface2, #1e1e1e);
  border: 1px solid var(--border2, rgba(255,255,255,.14));
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
#r9-presenca-menu.r9-visivel { display: flex; }
#r9-presenca-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text, #eee);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
#r9-presenca-menu button:hover { background: var(--surface, rgba(255,255,255,.07)); }
#r9-presenca-menu button[aria-checked="true"] { color: var(--accent, #cea046); font-weight: 700; }
/* RODADA 18 (2026-08-31): itens de conta (Minha Conta / Configuracoes / Sair) no mesmo menu. */
.r9-menu-divisor { height: 1px; background: var(--border2, rgba(255,255,255,.14)); margin: 4px 2px; }
.r9-menu-ic { width: 18px; text-align: center; flex: none; }

@media (max-width: 860px) {
  #r9-presenca-btn { width: 34px; height: 34px; top: 10px; right: 10px; }
  #r9-presenca-btn .r9-dot { width: 11px; height: 11px; }
  #r9-presenca-menu { top: 52px; right: 10px; }
}