/* ============================================================================
   Painel do escritório com a mesma estética do Atendimento (admin/atendimento,
   assets/css/painel.css "Stark"): menu lateral escuro, item ativo em degradê,
   fundo lilás claro, topo translúcido e cards brancos arredondados.
   Só visual: as páginas continuam com o mesmo HTML/Tailwind de sempre.
   A cor de destaque vem de --hue (mesma cor do tema do Atendimento).
   ============================================================================ */

:root {
  --sb: 250px;
  --adm-texto: #181a1f;
  --adm-suave: #77736b;
  --adm-borda: rgba(85, 38, 118, .10);
  --adm-sombra: 0 18px 42px rgba(58, 29, 78, .065), inset 0 1px 0 rgba(255, 255, 255, .95);
  --adm-ease: cubic-bezier(.22, 1, .36, 1);
  --adm-acento: oklch(52% 0.15 var(--hue));
  --adm-acento-escuro: oklch(44% 0.14 var(--hue));
  --adm-acento-claro: oklch(95% 0.03 var(--hue));
  --adm-acento-borda: oklch(85% 0.07 var(--hue));
}

body.adm-stark {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--adm-texto);
  background:
    radial-gradient(circle at 92% -8%, rgba(178, 112, 226, .14), transparent 28%),
    radial-gradient(circle at 12% 102%, rgba(136, 65, 186, .08), transparent 27%),
    linear-gradient(180deg, #f3edf8 0%, #ede5f3 100%) fixed !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Layout: menu fixo à esquerda, topo + conteúdo à direita ---------- */
.adm-topbar ~ .flex,
.adm-topbar ~ footer,
.adm-topbar { margin-left: var(--sb); }
.adm-topbar ~ .flex { min-height: calc(100vh - 76px) !important; }

.adm-topbar {
  position: sticky; top: 0; z-index: 40;
  /* 3 colunas: título | badge da conexão (sempre no centro) | botões. As laterais encolhem, a badge nunca encosta nos botões. */
  height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 0 32px;
  background: rgba(243, 237, 248, .84);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(84, 38, 117, .07);
  box-shadow: 0 8px 30px rgba(61, 31, 83, .035);
}
.adm-topbar .adm-titulo { grid-column: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.adm-topbar .adm-titulo strong {
  font-family: 'Sora', 'Manrope', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: #152139; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-topbar .adm-titulo small { display: block; font-size: 12px; color: #8a729b; font-weight: 600; letter-spacing: .02em; }
.adm-hamb {
  display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(88, 34, 126, .12);
  background: #fff; color: #3b2a48; align-items: center; justify-content: center; font-size: 17px; cursor: pointer;
}
.adm-topo-acoes { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 100px;
  border: 1px solid rgba(88, 34, 126, .10);
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(236, 226, 244, .92));
  box-shadow: 6px 8px 20px rgba(70, 34, 95, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
  font-size: 13px; color: #27241f;
}
.adm-chip img, .adm-chip .adm-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.adm-avatar {
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #14151a;
  background: linear-gradient(145deg, oklch(85% 0.08 var(--hue)), oklch(55% 0.15 var(--hue)));
}
.adm-btn-topo {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(88, 34, 126, .12); background: #fff; color: #27241f; font-weight: 600; font-size: 14px;
  text-decoration: none; transition: all .2s var(--adm-ease);
}
.adm-btn-topo:hover { border-color: var(--adm-acento-borda); color: var(--adm-acento-escuro); }

/* ---------- Menu lateral escuro ---------- */
.adm-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 45; width: var(--sb); /* abaixo dos modais das páginas (z-50) */
  display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 14px;
  color: #f1e8f7; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(circle at 100% 0%, rgba(150, 74, 205, .12), transparent 30%),
    linear-gradient(165deg, #17191c 0%, #0d0f11 54%, #120d15 100%);
  box-shadow: 18px 24px 55px rgba(17, 12, 20, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
  scrollbar-width: thin; scrollbar-color: rgba(178, 112, 226, .25) transparent;
  transition: transform .3s var(--adm-ease);
}
.adm-marca {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; text-decoration: none;
  background: #fff; color: #152139; box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.adm-marca-icone {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; background: linear-gradient(145deg, oklch(62% 0.14 var(--hue)), oklch(45% 0.15 var(--hue)));
}
.adm-marca-nome { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.2; }
.adm-marca-sub { display: block; font-size: 11px; color: #8a729b; font-weight: 600; margin-top: 2px; }

.adm-status {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; text-decoration: none;
  border: 1px solid rgba(178, 112, 226, .12); background: rgba(255, 255, 255, .035);
}
.adm-status-icone {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #14151a; background: linear-gradient(145deg, oklch(87% 0.07 var(--hue)), oklch(62% 0.14 var(--hue)));
}
.adm-status-texto span { display: block; font-size: 11px; color: #8f877a; font-weight: 600; }
.adm-status-texto strong { display: block; font-size: 13px; color: #e4d7ee; }
.adm-bolinha { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.adm-bolinha.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); }
.adm-bolinha.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .22); }

.adm-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.adm-secao { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #857c6d; padding: 14px 12px 6px; }
.adm-divisor { height: 1px; margin: 8px 6px; background: linear-gradient(90deg, transparent, rgba(178, 112, 226, .18), transparent); }
.adm-nav a, .adm-grupo-toggle, .adm-sair {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px;
  color: #a9a397; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; user-select: none;
  transition: background .2s var(--adm-ease), color .2s var(--adm-ease), box-shadow .2s var(--adm-ease);
}
.adm-nav a > i:first-child, .adm-grupo-toggle > i:first-child, .adm-sair > i { width: 20px; text-align: center; color: #8e877a; font-size: 15px; }
.adm-nav a:not(.ativo):hover, .adm-grupo-toggle:hover, .adm-sair:hover {
  color: #f7ebff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(178, 112, 226, .035));
  box-shadow: inset 0 0 0 1px rgba(178, 112, 226, .09), 0 8px 18px rgba(0, 0, 0, .13);
}
.adm-nav a:not(.ativo):hover > i:first-child, .adm-grupo-toggle:hover > i:first-child, .adm-sair:hover > i { color: #e9c9ff; }
.adm-nav a.ativo {
  color: #14151a; font-weight: 600;
  background: linear-gradient(135deg, oklch(88% 0.06 var(--hue)) 0%, oklch(70% 0.14 var(--hue)) 48%, oklch(52% 0.15 var(--hue)) 100%);
  box-shadow: 0 12px 26px rgba(121, 42, 178, .28), inset 0 1px 0 rgba(255, 255, 255, .52);
}
.adm-nav a.ativo > i:first-child { color: #14151a; }
.adm-grupo-seta { margin-left: auto; font-size: 11px !important; transition: transform .2s var(--adm-ease); }
.adm-grupo.aberto .adm-grupo-seta { transform: rotate(180deg); }
.adm-grupo-itens { display: none; flex-direction: column; gap: 3px; margin: 3px 0 4px; padding-left: 14px; }
.adm-grupo.aberto .adm-grupo-itens { display: flex; }
.adm-grupo-itens a, .adm-grupo-itens .adm-grupo-toggle { padding: 9px 12px; font-size: 13.5px; }
.adm-nav .adm-novo { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 100px; color: #14151a; background: oklch(80% 0.11 var(--hue)); }

.adm-rodape-menu { border-top: 1px solid rgba(178, 112, 226, .10); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.adm-usuario { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 12px; text-decoration: none; transition: background .15s; }
.adm-usuario:hover { background: rgba(255, 255, 255, .07); }
a.adm-chip { text-decoration: none; color: inherit; }
.adm-usuario .adm-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 7px 16px rgba(0, 0, 0, .24); }
.adm-usuario .adm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-usuario strong { display: block; color: #f7ecff; font-size: 13px; line-height: 1.2; }
.adm-usuario span { display: block; color: #8e8577; font-size: 11.5px; }

.adm-overlay { display: none; position: fixed; inset: 0; z-index: 44; background: rgba(13, 15, 17, .45); }

/* ---------- Conteúdo: cards, títulos, botões e campos (Tailwind das páginas) ---------- */
body.adm-stark main { min-width: 0; }
body.adm-stark main.p-8 { padding: 32px !important; }
body.adm-stark main .bg-white.rounded-lg,
body.adm-stark main .bg-white.rounded-xl,
body.adm-stark main .bg-white.rounded-md.shadow,
body.adm-stark main .bg-white.shadow-sm,
body.adm-stark main .bg-white.border {
  border-radius: 20px !important;
  border-color: var(--adm-borda) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(248, 244, 251, .95)) !important;
  box-shadow: var(--adm-sombra) !important;
}
body.adm-stark main table thead tr,
body.adm-stark main .bg-gray-50 { background-color: rgba(244, 238, 249, .7) !important; }
body.adm-stark main .bg-gray-100 { background-color: rgba(238, 230, 245, .8) !important; }
body.adm-stark main h1, body.adm-stark main h2, body.adm-stark main h3 { font-family: 'Sora', 'Manrope', sans-serif; letter-spacing: -.015em; }
body.adm-stark main .text-gray-800, body.adm-stark main .text-gray-900 { color: #1d1a22 !important; }
body.adm-stark main .border-gray-200, body.adm-stark main .border-gray-100 { border-color: var(--adm-borda) !important; }

/* Cor de destaque: a paleta "blue" do Tailwind das páginas passa a seguir a cor do tema */
body.adm-stark .bg-blue-600, body.adm-stark .bg-blue-500 {
  background: linear-gradient(135deg, oklch(62% 0.14 var(--hue)), oklch(48% 0.15 var(--hue))) !important;
  border-color: transparent !important;
}
body.adm-stark .hover\:bg-blue-700:hover, body.adm-stark .bg-blue-700 { background: var(--adm-acento-escuro) !important; }
body.adm-stark .bg-blue-50 { background-color: var(--adm-acento-claro) !important; }
body.adm-stark .bg-blue-100 { background-color: oklch(92% 0.045 var(--hue)) !important; }
body.adm-stark .text-blue-500, body.adm-stark .text-blue-600, body.adm-stark .text-blue-700, body.adm-stark .text-blue-800 { color: var(--adm-acento) !important; }
body.adm-stark .border-blue-200, body.adm-stark .border-blue-300 { border-color: var(--adm-acento-borda) !important; }
body.adm-stark .border-blue-500, body.adm-stark .border-blue-600, body.adm-stark .focus\:border-blue-500:focus { border-color: var(--adm-acento) !important; }

body.adm-stark main button, body.adm-stark main a[class*="rounded"], body.adm-stark main input[type="submit"] { transition: all .2s var(--adm-ease); }
body.adm-stark main button[class*="bg-"][class*="rounded"],
body.adm-stark main a[class*="bg-"][class*="rounded"][class*="px-"] { border-radius: 12px !important; }
body.adm-stark main button.bg-blue-600, body.adm-stark main a.bg-blue-600, body.adm-stark main button[type="submit"].bg-blue-600 {
  box-shadow: 0 10px 22px oklch(45% 0.15 var(--hue) / .28), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
body.adm-stark main button.bg-blue-600:hover, body.adm-stark main a.bg-blue-600:hover { transform: translateY(-1px); filter: brightness(1.05); }

body.adm-stark main input[type="text"], body.adm-stark main input[type="email"], body.adm-stark main input[type="password"],
body.adm-stark main input[type="number"], body.adm-stark main input[type="date"], body.adm-stark main input[type="tel"],
body.adm-stark main input[type="url"], body.adm-stark main input[type="search"], body.adm-stark main input[type="time"],
body.adm-stark main input[type="datetime-local"], body.adm-stark main input:not([type]), body.adm-stark main select, body.adm-stark main textarea {
  border-radius: 12px !important; border-color: rgba(85, 38, 118, .16) !important; background-color: #fff;
}
body.adm-stark main input:focus, body.adm-stark main select:focus, body.adm-stark main textarea:focus {
  outline: none !important; border-color: var(--adm-acento) !important; box-shadow: 0 0 0 4px oklch(70% 0.12 var(--hue) / .18) !important;
}

/* Rodapé (inc_admin_footer.php) */
.adm-topbar ~ footer { background: transparent !important; padding: 18px 0 !important; }
.adm-topbar ~ footer a { color: #77736b !important; }
/* Logo da Geranet numa badge branca, em destaque */
.adm-geranet-badge { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 6px 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .10); border: 1px solid rgba(0, 0, 0, .06); }
.adm-geranet-badge img { height: 40px; width: auto; display: block; }

/* ---------- Badge da conexão do WhatsApp, centralizada no topo ---------- */
.adm-wa-topo {
  grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 100px; border: 1px solid;
  font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: filter .2s var(--adm-ease);
}
.adm-wa-topo:hover { filter: brightness(.97); }
.adm-wa-topo .adm-bolinha { margin: 0; }
.adm-wa-topo.on { color: #15803d; background: rgba(34, 197, 94, .10); border-color: rgba(34, 197, 94, .30); }
.adm-wa-topo.off { color: #b91c1c; background: rgba(239, 68, 68, .10); border-color: rgba(239, 68, 68, .30); }

/* ---------- Tela cheia (telas da gestão do escritório) ---------- */
.adm-tc-marca {
  display: none; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; text-decoration: none;
  background: linear-gradient(145deg, oklch(62% 0.14 var(--hue)), oklch(45% 0.15 var(--hue)));
  box-shadow: 0 8px 18px oklch(45% 0.15 var(--hue) / .25);
}
.adm-tc-btn span { display: inline-flex !important; align-items: center; gap: 8px; }
.adm-tc-btn .adm-tc-voltar { display: none !important; }
body.tela-cheia .adm-tc-btn .adm-tc-voltar { display: inline-flex !important; }
body.tela-cheia .adm-tc-btn .adm-tc-cheia { display: none !important; }
body.tela-cheia .adm-sidebar,
body.tela-cheia .adm-overlay,
body.tela-cheia .adm-hamb { display: none !important; }
body.tela-cheia .adm-tc-marca { display: inline-flex; }
body.tela-cheia .adm-topbar ~ .flex,
body.tela-cheia .adm-topbar ~ footer,
body.tela-cheia .adm-topbar { margin-left: 0; }
body.tela-cheia main.p-8 { padding: 24px 32px !important; }

/* Telas médias: o nome some do chip (fica o avatar) para os botões não invadirem a coluna da badge. */
@media (max-width: 1366px) {
  .adm-chip { padding: 4px; }
  .adm-chip .adm-chip-nome { display: none; }
}

/* ---------- Celular / tablet: menu vira gaveta ---------- */
@media (max-width: 1024px) {
  .adm-topbar ~ .flex, .adm-topbar ~ footer, .adm-topbar { margin-left: 0; }
  .adm-topbar { padding: 0 16px; height: 68px; }
  .adm-topbar .adm-titulo strong { font-size: 18px; }
  .adm-hamb { display: inline-flex; }
  .adm-sidebar { transform: translateX(-102%); }
  body.adm-menu-aberto .adm-sidebar { transform: none; }
  body.adm-menu-aberto .adm-overlay { display: block; }
  body.adm-stark main.p-8 { padding: 20px 16px !important; }
  .adm-chip .adm-chip-nome { display: none; }
  .adm-tc-btn { padding: 0 12px; }
  .adm-wa-topo { padding: 6px 12px; }
}
@media (max-width: 760px) {
  .adm-topbar .adm-titulo small { display: none; }
  .adm-wa-topo .adm-wa-rotulo { display: none; }
  .adm-chip { display: none; }
}
@media (max-width: 520px) {
  .adm-topbar .adm-titulo strong { display: none; }
  .adm-wa-topo > span:last-child { display: none; }
  .adm-wa-topo { padding: 9px; }
  .adm-tc-btn .adm-tc-cheia { font-size: 0; gap: 0 !important; }
  .adm-tc-btn .adm-tc-cheia i { font-size: 14px; }
}