/* =============================================================
   AdminJS — Custom Theme para GSM
   Sobrescreve o tema padrão do AdminJS 7 com a paleta corporativa
   (mesmas cores do /app) e corrige problemas de contraste da sidebar.
   ============================================================= */

:root {
  --gsm-primary-950: #052959;
  --gsm-primary-900: #0b4a8f;
  --gsm-primary-800: #0e5cad;
  --gsm-primary-700: #1772c9;
  --gsm-primary-600: #3b8ede;
  --gsm-primary-500: #60a5fa;
  --gsm-primary-50: #eef5ff;
  --gsm-accent-600: #0e9f6e;
  --gsm-accent-500: #10b981;
  --gsm-ink-900: #0f172a;
  --gsm-ink-700: #334155;
  --gsm-ink-500: #64748b;
  --gsm-ink-300: #cbd5e1;
  --gsm-ink-200: #e2e8f0;
  --gsm-ink-100: #f1f5f9;
  --gsm-ink-50: #f8fafc;
  --gsm-bg: #f4f7fb;
  --gsm-white: #ffffff;
  --gsm-border: #e4e9f2;
  --gsm-warn: #d97706;
  --gsm-warn-bg: #fef3c7;
  --gsm-danger: #dc2626;
  --gsm-danger-bg: #fee2e2;
}

/* Fundo geral da app */
body { background: var(--gsm-bg) !important; }

/* =============================================================
   SIDEBAR — texto claro sobre fundo azul escuro (fix contraste)
   ============================================================= */
nav[class*="Sidebar"],
aside[class*="Sidebar"],
div[class*="SidebarParent"] > nav,
section[data-css-a3c8zh],
section[class*="Sidebar"] {
  background: linear-gradient(180deg, var(--gsm-primary-950) 0%, var(--gsm-primary-900) 100%) !important;
  color: #e8f1ff !important;
  box-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.2);
}

/* Qualquer link/texto dentro da sidebar */
nav[class*="Sidebar"] *,
aside[class*="Sidebar"] *,
section[class*="Sidebar"] * {
  color: inherit !important;
}

/* Títulos de seção ("NAVEGAÇÃO", "Cadastros", "Benefícios"...) */
nav[class*="Sidebar"] p,
nav[class*="Sidebar"] h1,
nav[class*="Sidebar"] h2,
nav[class*="Sidebar"] h3,
nav[class*="Sidebar"] span[class*="SidebarLabel"],
nav[class*="Sidebar"] div[class*="SidebarGroup"] > a,
nav[class*="Sidebar"] div[class*="SidebarGroup"] > div:first-child {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* Links de navegação */
nav[class*="Sidebar"] a,
nav[class*="Sidebar"] a[class*="SidebarLink"],
nav[class*="Sidebar"] div[class*="SidebarElement"] a {
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 1px 10px !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
nav[class*="Sidebar"] a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: white !important;
}
nav[class*="Sidebar"] a[class*="active"],
nav[class*="Sidebar"] a.active,
nav[class*="Sidebar"] a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.28), rgba(96, 165, 250, 0.08)) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--gsm-primary-500);
}

/* Ícones da sidebar */
nav[class*="Sidebar"] svg {
  color: rgba(255, 255, 255, 0.8) !important;
  stroke: rgba(255, 255, 255, 0.8) !important;
  opacity: 0.9;
}

/* Logo / Brand */
div[class*="LoggedIn"],
header[class*="Header"] {
  background: var(--gsm-white) !important;
  border-bottom: 1px solid var(--gsm-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* =============================================================
   TOPBAR — chip do usuário, idioma
   ============================================================= */
header[class*="Header"] a,
header[class*="Header"] p,
header[class*="Header"] span {
  color: var(--gsm-ink-700) !important;
}

/* =============================================================
   BOTÕES
   ============================================================= */
button[class*="Button"],
a[class*="Button"] {
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  letter-spacing: 0 !important;
}

/* Botão primário */
button[class*="primary"],
a[class*="primary"],
button[variant="primary"] {
  background: var(--gsm-primary-900) !important;
  border-color: var(--gsm-primary-900) !important;
  color: white !important;
  box-shadow: 0 1px 2px rgba(11, 74, 143, 0.15);
}
button[class*="primary"]:hover,
a[class*="primary"]:hover {
  background: var(--gsm-primary-800) !important;
  border-color: var(--gsm-primary-800) !important;
  box-shadow: 0 2px 8px rgba(11, 74, 143, 0.25);
  transform: translateY(-1px);
}

/* Botão "Adicionar novo" (ação principal) */
a[class*="ActionButton"][href*="new"],
a[href$="/actions/new"] {
  background: var(--gsm-primary-900) !important;
  color: white !important;
  border-color: var(--gsm-primary-900) !important;
}
a[class*="ActionButton"][href*="new"]:hover {
  background: var(--gsm-primary-800) !important;
}

/* =============================================================
   TABELAS
   ============================================================= */
table {
  background: white !important;
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid var(--gsm-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
table thead {
  background: var(--gsm-ink-50) !important;
  border-bottom: 2px solid var(--gsm-border) !important;
}
table thead th {
  color: var(--gsm-ink-500) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 12px 16px !important;
  border: 0 !important;
}
table tbody tr {
  transition: background 0.1s;
  border-bottom: 1px solid var(--gsm-ink-100) !important;
}
table tbody tr:hover {
  background: var(--gsm-primary-50) !important;
}
table tbody td {
  padding: 12px 16px !important;
  color: var(--gsm-ink-900) !important;
  font-size: 13px !important;
  border: 0 !important;
}

/* =============================================================
   CARDS / BOXES
   ============================================================= */
section[class*="Box"],
div[class*="Wrapper"],
div[class*="Card"] {
  background: white;
  border-radius: 12px;
}

/* =============================================================
   FORMS / INPUTS
   ============================================================= */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
textarea,
select {
  border-radius: 8px !important;
  border: 1px solid var(--gsm-border) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  color: var(--gsm-ink-900) !important;
  background: white !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--gsm-primary-600) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
  outline: none !important;
}
label {
  color: var(--gsm-ink-700) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px !important;
}

/* =============================================================
   LOGIN
   ============================================================= */
section[class*="Login"] {
  background: linear-gradient(135deg, var(--gsm-primary-950) 0%, var(--gsm-primary-800) 100%) !important;
}
section[class*="Login"] form,
section[class*="LoginForm"] {
  background: white !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18) !important;
  padding: 32px !important;
}
section[class*="Login"] h2,
section[class*="Login"] h4 {
  color: var(--gsm-ink-900) !important;
  font-weight: 700 !important;
}

/* =============================================================
   FILTROS (painel lateral direito)
   ============================================================= */
section[class*="Filter"],
aside[class*="Filter"],
div[class*="FilterBox"] {
  background: var(--gsm-primary-950) !important;
  color: white !important;
}
section[class*="Filter"] label,
section[class*="Filter"] span,
section[class*="Filter"] p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* =============================================================
   DASHBOARD (página inicial do AdminJS)
   ============================================================= */
div[class*="DashboardCard"],
div[data-testid*="dashboard"] section {
  background: white !important;
  border-radius: 12px !important;
  border: 1px solid var(--gsm-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
div[class*="DashboardCard"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* =============================================================
   HEADINGS & TYPOGRAPHY
   ============================================================= */
h1, h2, h3, h4, h5 {
  color: var(--gsm-ink-900) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}

/* Textos em geral */
p, span, div {
  color: inherit;
}

/* =============================================================
   BADGES (status tags)
   ============================================================= */
span[class*="Badge"],
span[class*="Tag"] {
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px !important;
}

/* =============================================================
   PAGINAÇÃO
   ============================================================= */
nav[class*="Pagination"] button,
ul[class*="Pagination"] a {
  border-radius: 8px !important;
  color: var(--gsm-ink-700) !important;
  border: 1px solid var(--gsm-border) !important;
  transition: all 0.15s;
}
nav[class*="Pagination"] button:hover,
ul[class*="Pagination"] a:hover {
  background: var(--gsm-primary-50) !important;
  border-color: var(--gsm-primary-600) !important;
  color: var(--gsm-primary-900) !important;
}
nav[class*="Pagination"] button[class*="active"],
ul[class*="Pagination"] .active a {
  background: var(--gsm-primary-900) !important;
  color: white !important;
  border-color: var(--gsm-primary-900) !important;
}

/* =============================================================
   LINKS
   ============================================================= */
a {
  color: var(--gsm-primary-800);
  transition: color 0.15s;
}
a:hover {
  color: var(--gsm-primary-900);
}

/* =============================================================
   MENSAGENS / ALERTAS
   ============================================================= */
div[class*="Notice"],
div[class*="Alert"] {
  border-radius: 10px !important;
  border-left: 4px solid var(--gsm-primary-800) !important;
  padding: 14px 18px !important;
}

/* =============================================================
   RESPONSIVO — TABLET (<=1024px)
   ============================================================= */
@media (max-width: 1024px) {
  nav[class*="Sidebar"] { width: 220px !important; }
  header[class*="Header"] { padding: 0 16px !important; }
}

/* =============================================================
   RESPONSIVO — MOBILE (<=768px)
   Sidebar vira drawer, topbar compacto, dashboard empilha
   ============================================================= */
@media (max-width: 768px) {
  /* Sidebar vira drawer deslizante (usa :has() + checkbox-hack do AdminJS OU
     basta que o drawer tenha position:fixed; o hamburger nativo do AdminJS
     alterna a classe .open ou equivalente) */
  nav[class*="Sidebar"],
  aside[class*="Sidebar"],
  section[class*="Sidebar"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    z-index: 100 !important;
    box-shadow: 4px 0 20px -4px rgba(0, 0, 0, 0.3);
  }

  /* Topbar compacto */
  header[class*="Header"],
  div[class*="TopBar"],
  div[class*="Topbar"] {
    padding: 0 12px !important;
    min-height: 56px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  /* Esconde seletor de idioma + texto de usuário no mobile.
     Selectors amplos pois o AdminJS gera classnames hasheados. */
  header [class*="Dropdown"],
  header select,
  header a[href*="locale"],
  header > div > p,
  header > div > span,
  header > div > a[class*="Link"] {
    display: none !important;
  }
  /* Mantém avatar (geralmente figure/img) + logout visíveis */
  header figure,
  header img,
  header svg,
  header [class*="Logout"],
  header button { display: inline-flex !important; }

  /* Vamos apenas mostrar email/avatar na direita de forma compacta */
  header > div[class*="LoggedIn"] {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }
  header > div[class*="LoggedIn"] > * { font-size: 11px !important; }

  /* Conteúdo principal com padding menor */
  main,
  section[class*="Content"],
  div[class*="ContentWrapper"] {
    padding: 16px 12px !important;
  }

  /* Dashboard cards em 1 coluna */
  section[class*="Dashboard"],
  div[class*="DashboardCard"],
  div[data-css-z7cihq],
  section > section {
    grid-template-columns: 1fr !important;
  }

  /* Cards do dashboard menores */
  div[class*="DashboardCard"] {
    padding: 18px !important;
  }
  div[class*="DashboardCard"] h3,
  div[class*="DashboardCard"] h4 {
    font-size: 16px !important;
  }

  /* Tabelas: container com scroll horizontal, tabela em si mantém display normal.
     Sem 'display:block' na table (quebrava o layout e sumia com as colunas). */
  section[class*="Table"],
  div[class*="TableContainer"],
  div[class*="tableOverflow"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }
  table {
    min-width: 600px; /* força scroll horizontal em telas estreitas preservando colunas */
    width: 100% !important;
  }
  table thead th,
  table tbody td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  /* Primeira coluna (checkbox) e última (ações) ficam "sticky" para rolagem */
  table thead th:first-child,
  table tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--gsm-ink-50) !important;
    z-index: 1;
    min-width: 40px;
  }
  table tbody td:first-child { background: white !important; }
  table tbody tr:hover td:first-child { background: var(--gsm-primary-50) !important; }

  /* Botões de ação no topo das tabelas */
  div[class*="ActionHeader"],
  header[class*="ActionHeader"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Forms — labels empilhados acima dos inputs */
  form section[class*="FormGroup"],
  form div[class*="FormGroup"] {
    margin-bottom: 14px !important;
  }

  /* Paginação menor */
  nav[class*="Pagination"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  nav[class*="Pagination"] button,
  nav[class*="Pagination"] a {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Filter panel (lateral direito) — ocupa tela toda */
  section[class*="Filter"],
  aside[class*="Filter"] {
    width: 100% !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
  }
}

/* =============================================================
   RESPONSIVO — SMALL MOBILE (<=480px)
   ============================================================= */
@media (max-width: 480px) {
  header[class*="Header"] { min-height: 52px !important; padding: 0 10px !important; }
  main { padding: 12px 8px !important; }
  div[class*="DashboardCard"] { padding: 14px !important; }
  div[class*="DashboardCard"] h3,
  div[class*="DashboardCard"] h4 { font-size: 15px !important; }
  div[class*="DashboardCard"] p { font-size: 12px !important; }
}