/* ═══════════════════════════════════════════════════════════════
   MaxxApp — Estilos Globais
   Tema: escuro/profissional, otimizado para uso diário
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Paleta principal */
  --cor-fundo:        #0f1117;
  --cor-fundo-2:      #161b27;
  --cor-fundo-3:      #1e2535;
  --cor-borda:        #2a3149;
  --cor-primaria:     #3b82f6;   /* azul Maxx */
  --cor-primaria-h:   #2563eb;
  --cor-sucesso:      #22c55e;
  --cor-aviso:        #f59e0b;
  --cor-perigo:       #ef4444;
  --cor-info:         #06b6d4;

  /* Texto */
  --txt-principal:    #e8eaf0;
  --txt-secundario:   #8b92a5;
  --txt-desativado:   #4a5270;

  /* Sidebar */
  --sidebar-largura:  240px;
  --sidebar-bg:       #111827;

  /* Dimensões */
  --header-h:         56px;
  --radius:           6px;
  --radius-lg:        10px;
  --sombra:           0 2px 8px rgba(0,0,0,.45);

  /* Tipografia */
  --fonte:            'Inter', system-ui, -apple-system, sans-serif;
  --fonte-mono:       'JetBrains Mono', 'Fira Code', monospace;
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: var(--fonte);
  background: var(--cor-fundo);
  color: var(--txt-principal);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { color: var(--cor-primaria-h); text-decoration: underline; }

/* ─── Layout principal (sidebar + conteúdo) ─────────────────────── */
.layout {
  display: flex;
  min-height: 100vh;
}

.conteudo-principal {
  flex: 1;
  margin-left: var(--sidebar-largura);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

/* ─── Header ────────────────────────────────────────────────────── */
.header {
  height: var(--header-h);
  background: var(--cor-fundo-2);
  border-bottom: 1px solid var(--cor-borda);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-titulo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--txt-principal);
  flex: 1;
}

/* ─── Área de conteúdo ──────────────────────────────────────────── */
.pagina {
  flex: 1;
  padding: 1.75rem;
  overflow-y: auto;
}

/* ─── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--cor-fundo-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--sombra);
}

.card-titulo {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txt-secundario);
  margin-bottom: 1rem;
}

/* ─── Formulários ───────────────────────────────────────────────── */
.form-grupo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}

.form-grupo label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--txt-secundario);
}

.form-grupo input,
.form-grupo select,
.form-grupo textarea {
  background: var(--cor-fundo-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  color: var(--txt-principal);
  font-size: .9rem;
  font-family: var(--fonte);
  padding: .55rem .75rem;
  outline: none;
  transition: border-color .2s;
}

.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.form-grupo input::placeholder { color: var(--txt-desativado); }

/* ─── Botões ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background .18s, transform .1s;
  font-family: var(--fonte);
}

.btn:active { transform: scale(.97); }

.btn-primario {
  background: var(--cor-primaria);
  color: #fff;
}
.btn-primario:hover { background: var(--cor-primaria-h); }

.btn-secundario {
  background: var(--cor-fundo-3);
  color: var(--txt-principal);
  border: 1px solid var(--cor-borda);
}
.btn-secundario:hover { background: var(--cor-borda); }

.btn-perigo { background: var(--cor-perigo); color: #fff; }
.btn-perigo:hover { background: #dc2626; }

.btn-bloco { width: 100%; }

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ─── Alertas / feedback ────────────────────────────────────────── */
.alerta {
  padding: .65rem 1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  margin-bottom: 1rem;
  display: none;
}
.alerta.visivel { display: block; }
.alerta-erro   { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; }
.alerta-sucesso{ background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #86efac; }
.alerta-aviso  { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); color: #fde68a; }

/* ─── Badges / status ───────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-verde   { background: rgba(34,197,94,.15);  color: #4ade80; }
.badge-vermelho{ background: rgba(239,68,68,.15);  color: #f87171; }
.badge-azul    { background: rgba(59,130,246,.15); color: #60a5fa; }
.badge-amarelo { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge-cinza   { background: rgba(139,146,165,.15);color: #8b92a5; }

/* ─── Tabelas ───────────────────────────────────────────────────── */
.tabela-wrapper { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

thead th {
  background: var(--cor-fundo-3);
  color: var(--txt-secundario);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .65rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--cor-borda);
}

tbody tr {
  border-bottom: 1px solid var(--cor-borda);
  transition: background .12s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,.025); }

tbody td { padding: .6rem .85rem; color: var(--txt-principal); }

/* ─── Spinner ───────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  animation: girar .7s linear infinite;
  display: inline-block;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ─── Preview bar (DEV) ─────────────────────────────────────────── */
:root { --preview-bar-h: 0px; }

body.has-preview-bar {
  --preview-bar-h: 42px;
}

/* Empurra o sidebar e o conteúdo para baixo da barra */
body.has-preview-bar .sidebar {
  top: var(--preview-bar-h);
  height: calc(100vh - var(--preview-bar-h));
}
body.has-preview-bar .layout {
  padding-top: var(--preview-bar-h);
}
body.has-preview-bar .header {
  top: var(--preview-bar-h);
}

#preview-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9900;
  height: var(--preview-bar-h, 42px);
  /* começa com a largura da janela; recolhe para 38px */
  width: 100%;
  overflow: hidden;
  transition: width .35s cubic-bezier(.4,0,.2,1);
  background: #1e3a5f;
  border-bottom: 1px solid #2d5a8e;
  border-radius: 0 0 10px 0; /* canto arredondado quando recolhido */
  display: flex;
  align-items: center;
  gap: 0;
  font-size: .82rem;
  /* sombra sutil para destacar quando recolhido */
  box-shadow: 2px 2px 10px rgba(0,0,0,.4);
}

#preview-bar.collapsed {
  width: 38px;
}

#preview-bar.preview-ativo {
  background: linear-gradient(90deg, #7c2d12, #9a3412);
  border-bottom-color: #c2410c;
}

/* ── Botão de colapso (sempre visível à esquerda) ───────────────── */
#preview-collapse-btn {
  align-items: center;
  background: none;
  border: none;
  border-right: 1px solid rgba(147,197,253,.2);
  color: #93c5fd;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 42px;
  justify-content: center;
  padding: 0;
  transition: background .15s, color .15s;
  width: 38px;
}
#preview-collapse-btn:hover { background: rgba(255,255,255,.1); }
#preview-bar.preview-ativo #preview-collapse-btn {
  border-right-color: rgba(239,68,68,.3);
  color: #fca5a5;
}

/* Seta que rotaciona conforme estado */
#preview-collapse-btn .collapse-arrow {
  display: inline-block;
  font-style: normal;
  font-size: .85rem;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  /* aponta para a esquerda (recolher) quando expandido */
  transform: rotate(0deg);
}
#preview-bar.collapsed #preview-collapse-btn .collapse-arrow {
  /* aponta para a direita (expandir) quando recolhido */
  transform: rotate(180deg);
}

/* ── Conteúdo interno (não pode encolher) ───────────────────────── */
.preview-bar-inner {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 1rem;
  justify-content: space-between;
  min-width: max-content; /* impede quebra de linha durante a animação */
  padding: 0 1rem;
  white-space: nowrap;
}

.preview-bar-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #93c5fd;
  font-weight: 600;
}

.preview-bar-left .preview-icon { font-size: 1rem; }

#preview-bar.preview-ativo .preview-bar-left { color: #fca5a5; }

.preview-bar-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.preview-bar-right label {
  color: #93c5fd;
}

#preview-bar.preview-ativo .preview-bar-right label { color: #fca5a5; }

.preview-bar-right .preview-target-name {
  color: #fff;
  font-weight: 700;
}

.preview-bar-right .preview-target-cargo {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  color: #fde68a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .15rem .55rem;
  text-transform: uppercase;
}

#preview-email-input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(147,197,253,.35);
  border-radius: 7px;
  color: #e2e8f0;
  font-family: inherit;
  font-size: .82rem;
  height: 28px;
  outline: none;
  padding: 0 .6rem;
  transition: border-color .15s, background .15s;
  width: 220px;
}
#preview-email-input::placeholder { color: rgba(147,197,253,.5); }
#preview-email-input:focus {
  background: rgba(255,255,255,.13);
  border-color: rgba(147,197,253,.75);
}

#btn-preview-apply {
  background: #2563eb;
  border: none;
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  height: 28px;
  padding: 0 .85rem;
  transition: background .15s;
  white-space: nowrap;
}
#btn-preview-apply:hover { background: #1d4ed8; }
#btn-preview-apply:disabled { background: #334155; color: #64748b; cursor: default; }

#btn-preview-exit {
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.45);
  border-radius: 7px;
  color: #fca5a5;
  cursor: pointer;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  height: 28px;
  padding: 0 .85rem;
  transition: background .15s;
  white-space: nowrap;
}
#btn-preview-exit:hover { background: rgba(239,68,68,.3); }

/* ─── Responsivo ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .conteudo-principal { margin-left: 0; }

  .pagina { padding: 1rem; }

  /* sidebar some por padrão no mobile, aparece via JS */
  .sidebar { transform: translateX(-100%); }
  .sidebar.aberta { transform: translateX(0); }

  .preview-bar-inner { padding: 0 .6rem; gap: .5rem; }
  #preview-email-input { width: 130px; }
  .preview-bar-left span:not(.preview-icon) { display: none; }
}