/* Tokens de marca do Multigestão Hub. Ver auditoria de UX/UI, seção 02/05.
   Sobrescreve o Bootstrap na base, nao substitui o framework. */
:root {
  --mg-accent: #0f766e;
  --mg-accent-hover: #0d5e58;
  --mg-accent-2: #1d4ed8;
  --mg-ink: #0f1720;
  --mg-ink-soft: #3d4a5c;
  --mg-ink-faint: #6b7688;
  --mg-surface: #ffffff;
  --mg-surface-sunken: #f4f6f9;
  --mg-border: #e1e6ed;
  --mg-success: #15803d;
  --mg-success-soft: #e7f6ec;
  --mg-warning: #b45309;
  --mg-warning-soft: #fdf1e2;
  --mg-danger: #b91c1c;
  --mg-danger-soft: #fbe9e9;
  --mg-radius-sm: 6px;
  --mg-radius-md: 10px;
  --mg-radius-lg: 16px;
  --mg-shadow-sm: 0 1px 2px rgba(15,23,32,.06), 0 1px 1px rgba(15,23,32,.04);
  --mg-shadow-md: 0 4px 14px rgba(15,23,32,.08), 0 2px 4px rgba(15,23,32,.05);
  --mg-font-display: 'Playfair Display', Georgia, serif;
  --mg-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mg-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

body { font-family: var(--mg-font-body); background: var(--mg-surface-sunken); color: var(--mg-ink); margin: 0; }

/* ================= Shell: sidebar + topo (telas autenticadas) =================
   Estrutura inspirada em consoles admin (Azure/AD Admin Center): navegação
   fixa expõe TODOS os destinos administrativos de uma vez, em vez de botões
   soltos espalhados pela página. Ver auditoria, seção "navegação". */
.mg-shell { display: flex; min-height: 100vh; }

.mg-sidebar {
  width: 248px; flex-shrink: 0; background: var(--mg-ink); color: #cbd5e1;
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 40; transition: transform 0.2s ease;
}
.mg-sidebar-brand { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mg-sidebar-brand a { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.02rem; }
.mg-brand-mark {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  object-fit: cover;
}

.mg-sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.mg-nav-section {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  color: #64748b; margin: 18px 12px 6px;
}
.mg-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--mg-radius-sm);
  color: #cbd5e1; text-decoration: none; font-size: 0.87rem; font-weight: 500; margin-bottom: 2px;
}
.mg-nav-item i { font-size: 1rem; width: 18px; text-align: center; color: #8b96a8; }
.mg-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
/* Item ativo do menu do Hub no tom da propria coluna (azul-marinho), definido pelo responsavel em 23/09/2026. */
.mg-nav-item.active { background: #1b2a41; color: #fff; }
.mg-nav-item.active i { color: #fff; }

.mg-sidebar-footer { padding: 16px 18px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.mg-user { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: #f1f5f9; margin-bottom: 12px; }
.mg-user i { font-size: 1.6rem; color: #94a3b8; }
.mg-user b { display: block; font-size: 0.72rem; font-weight: 700; color: var(--mg-accent-hover); background: color-mix(in srgb, var(--mg-accent) 30%, transparent); padding: 2px 8px; border-radius: 4px; margin-top: 4px; width: fit-content; letter-spacing: 0.02em; text-transform: uppercase; }
.mg-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #e2e8f0; text-decoration: none; font-size: 0.88rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--mg-radius-sm);
  padding: 8px 12px;
}
.mg-logout i { font-size: 1.05rem; }
.mg-logout:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }

.mg-main { flex: 1; min-width: 0; margin-left: 248px; display: flex; flex-direction: column; }
.mg-topbar {
  display: none; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  background: var(--mg-surface); border-bottom: 1px solid var(--mg-border); position: sticky; top: 0; z-index: 30;
}
.mg-sidebar-toggle { border: none; background: none; font-size: 1.4rem; color: var(--mg-ink); padding: 4px 8px; line-height: 1; }
.mg-topbar-brand { font-weight: 700; color: var(--mg-ink); }
.mg-content { padding: 28px 32px 60px; max-width: 1240px; }

.mg-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,32,.45); z-index: 35; }
.mg-overlay.show { display: block; }

@media (max-width: 991.98px) {
  .mg-sidebar { transform: translateX(-100%); }
  .mg-sidebar.open { transform: translateX(0); }
  .mg-main { margin-left: 0; }
  .mg-topbar { display: flex; }
  .mg-content { padding: 20px 16px 48px; }
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }

.navbar-brand-hub { font-family: var(--mg-font-display); }

.card { border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); box-shadow: var(--mg-shadow-sm); }

.btn-primary { background: var(--mg-accent); border-color: var(--mg-accent); }
.btn-primary:hover, .btn-primary:focus { background: var(--mg-accent-hover); border-color: var(--mg-accent-hover); }
.btn-outline-primary { color: var(--mg-accent); border-color: var(--mg-accent); }
.btn-outline-primary:hover { background: var(--mg-accent); border-color: var(--mg-accent); }

.alert-success { background: var(--mg-success-soft); color: var(--mg-success); border-color: transparent; }
.alert-warning { background: var(--mg-warning-soft); color: var(--mg-warning); border-color: transparent; }
.alert-danger  { background: var(--mg-danger-soft);  color: var(--mg-danger);  border-color: transparent; }
.text-danger.bg-warning-subtle { background: var(--mg-warning-soft) !important; color: var(--mg-warning) !important; }

.form-label.fw-semibold, .form-label.form-label { color: var(--mg-ink-soft); }

/* Rótulo estilo "login" (maiúsculo, pequeno) estendido pro resto do admin */
.card .form-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mg-ink-faint);
}

table.table thead.table-light th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mg-ink-faint);
  background: var(--mg-surface-sunken);
  border-bottom: 1px solid var(--mg-border);
}
table.table td, table.table th { font-size: 0.9rem; }

/* Grid de apps — "Meus Sistemas" (estilo launcher: Microsoft 365 / Workspace),
   não lista de e-mail. Cada sistema é um bloco compacto e clicável por
   inteiro, não uma linha larga com espaço vazio sobrando. */
.mg-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.mg-app-tile {
  --sys-color: var(--mg-ink-faint);
  background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md);
  padding: 22px 20px; text-decoration: none; color: inherit; box-shadow: var(--mg-shadow-sm);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.mg-app-tile:hover {
  transform: translateY(-2px); box-shadow: var(--mg-shadow-md);
  border-color: color-mix(in srgb, var(--sys-color) 45%, var(--mg-border));
}
.mg-app-tile-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: color-mix(in srgb, var(--sys-color) 15%, white); color: var(--sys-color);
}
.mg-app-tile h5 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--mg-ink); }
.mg-app-tile p { margin: 0; font-size: 0.82rem; color: var(--mg-ink-faint); line-height: 1.4; }
.mg-app-tile-go {
  margin-top: 14px; font-size: 0.8rem; font-weight: 600; color: var(--sys-color);
  display: flex; align-items: center; gap: 5px;
}
.mg-app-tile-go i { transition: transform 0.12s ease; }
.mg-app-tile:hover .mg-app-tile-go i { transform: translateX(3px); }

/* Abas ativos/inativos no painel admin — troca 4 tabelas empilhadas por 2 com alternância */
.nav-tabs-mg { border-bottom: 1px solid var(--mg-border); }
.nav-tabs-mg .nav-link {
  border: none; border-bottom: 2px solid transparent; color: var(--mg-ink-faint);
  font-size: 0.85rem; font-weight: 600; padding: 6px 4px; margin-right: 18px; background: none;
}
.nav-tabs-mg .nav-link.active { color: var(--mg-accent); border-bottom-color: var(--mg-accent); }
.nav-tabs-mg .badge-count {
  font-family: var(--mg-font-mono); font-size: 0.7rem; color: var(--mg-ink-faint);
  background: var(--mg-surface-sunken); border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.nav-tabs-mg .nav-link.active .badge-count { color: var(--mg-accent); background: color-mix(in srgb, var(--mg-accent) 12%, white); }

.dot-cor { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

/* Matriz de acessos - primeira coluna fixa ao rolar horizontalmente (o
   numero de sistemas so cresce, a tabela vai ficar mais larga que a tela
   antes de a coluna de usuario deixar de fazer falta). */
.mg-matriz-tabela .mg-matriz-fixa {
    position: sticky;
    left: 0;
    background: var(--mg-surface);
    z-index: 1;
    box-shadow: 1px 0 0 var(--mg-border);
}

/* Visão geral do painel admin — indicadores estilo "overview" de console admin */
.mg-stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 18px 0 22px; }
@media (max-width: 1100px) { .mg-stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .mg-stat-row { grid-template-columns: repeat(2, 1fr); } }
.mg-stat-tile.online i { color: var(--mg-success); }
.mg-stat-tile.online { border-color: color-mix(in srgb, var(--mg-success) 30%, var(--mg-border)); }
.mg-stat-tile {
  background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--mg-shadow-sm);
  text-decoration: none; color: inherit;
}
.mg-stat-tile i { font-size: 1.5rem; color: var(--mg-accent); }
.mg-stat-tile.muted i { color: var(--mg-ink-faint); }
.mg-stat-tile.accent2 i { color: var(--mg-accent-2); }
.mg-stat-tile.accent3 i { color: #7c3aed; }
.mg-stat-tile b { display: block; font-size: 1.4rem; font-weight: 700; color: var(--mg-ink); line-height: 1.1; font-family: var(--mg-font-mono); }
.mg-stat-tile span { font-size: 0.78rem; color: var(--mg-ink-faint); }

.mg-quicklinks {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 26px; padding-bottom: 18px;
  border-bottom: 1px solid var(--mg-border);
}
.mg-quicklinks a {
  font-size: 0.83rem; font-weight: 600; color: var(--mg-ink-soft); text-decoration: none;
  display: flex; align-items: center; gap: 6px;
}
.mg-quicklinks a:hover { color: var(--mg-accent); }
.mg-quicklinks i { color: var(--mg-ink-faint); font-size: 0.95rem; }

/* Cartão de seção dentro de um form (Conta / Acesso a sistemas) */
.form-secao { margin-bottom: 26px; }
.form-secao-titulo {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--mg-ink-faint); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--mg-border);
  display: flex; align-items: center; gap: 6px;
}

/* Bloco de sistema no formulário de usuário — cabeçalho com identidade do sistema */
.detalhe-sistema-cabecalho { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.detalhe-sistema-cabecalho .dot-cor { width: 10px; height: 10px; }
.detalhe-sistema-cabecalho span { font-weight: 700; font-size: 0.85rem; color: var(--mg-ink); }

/* Loja/cargo em passos numerados (loja antes do cargo, regra ja existente -
   so deixa visivel na tela). Puramente visual: nao mexe em nenhuma classe/id
   usada pelo JS de editar_usuario/novo_usuario (combo-rotulo, cargo-unico,
   etc.) - so envolve o bloco existente com um numero. */
.mg-passo { position: relative; padding-left: 30px; margin-top: 14px; }
.mg-passo::before {
  content: attr(data-passo);
  position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mg-accent); color: #fff; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-family: var(--mg-font-mono);
}

/* Alternador Administrador/Comum — dois lados de um segmented control, o
   checkbox real (is_admin) fica escondido controlando qual lado fica ativo
   via :has() (mesmo recurso ja usado no seletor de cor de sistema). */
.mg-toggle-tipo {
  display: inline-flex; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-sm);
  overflow: hidden; width: fit-content;
}
.mg-toggle-opt {
  padding: 7px 16px; font-size: 0.85rem; font-weight: 600; color: var(--mg-ink-faint);
  cursor: pointer; user-select: none; background: var(--mg-surface);
}
.mg-toggle-opt:hover { background: var(--mg-surface-sunken); }
.mg-toggle-tipo:has(.mg-toggle-input:checked) .admin,
.mg-toggle-tipo:has(.mg-toggle-input:not(:checked)) .comum {
  background: var(--mg-accent); color: #fff;
}
.mg-toggle-tipo:has(.mg-toggle-input:checked) .comum,
.mg-toggle-tipo:has(.mg-toggle-input:not(:checked)) .admin {
  background: var(--mg-surface); color: var(--mg-ink-faint);
}

/* Badge de contagem no cabeçalho do sistema (fechado) — "N loja(s)
   vinculada(s)" continua contando o que ja existe (contagem-vinculos), so
   ganhou tratamento de pilula colorida em vez de texto plano no botao. */
.toggle-vinculos .contagem-vinculos {
  background: var(--mg-success-soft); color: var(--mg-success); font-weight: 700;
  padding: 1px 8px; border-radius: 999px; font-family: var(--mg-font-mono); font-size: 0.78rem;
}

/* Editor de chips (cargos/funcoes do sistema) */
.mg-chips { border: 1px solid var(--mg-border); border-radius: var(--mg-radius-sm); padding: 8px; background: var(--mg-surface); }
.mg-chips-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mg-chips-lista:empty { margin-bottom: 0; }
.mg-chip {
  display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--mg-accent) 12%, white);
  color: var(--mg-accent); border: 1px solid color-mix(in srgb, var(--mg-accent) 30%, transparent);
  border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 0.82rem; font-weight: 600;
}
.mg-chip-remover {
  border: none; background: none; color: inherit; opacity: 0.6; font-size: 1rem; line-height: 1;
  padding: 0 4px; cursor: pointer;
}
.mg-chip-remover:hover { opacity: 1; }
.mg-chips-input { border: none !important; padding: 4px 2px !important; box-shadow: none !important; }
.mg-chips-input:focus { outline: none; }
/* Variante em destaque (Administradores do sistema): mesmo editor, cor ambar. */
.mg-chips-destaque .mg-chip { background: #fef3c7; color: #92400e; border-color: #f59e0b; }