/* nx_theme_apple_starlink_v1.css
   Objetivo: visual premium/minimal, alta legibilidade, cards limpos, tabelas/tabs consistentes.
   Compatível com HTML existente (sem exigir classes específicas).
*/

:root{
  /* Tipografia / espaçamento */
  --nx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --nx-radius: 14px;
  --nx-radius-sm: 10px;
  --nx-shadow: 0 10px 30px rgba(0,0,0,.08);
  --nx-shadow-2: 0 6px 18px rgba(0,0,0,.10);
  --nx-border: rgba(0,0,0,.10);
  --nx-border-2: rgba(0,0,0,.14);

  /* Paleta (light) */
  --nx-bg: #f5f6f7;
  --nx-surface: #ffffff;
  --nx-surface-2: #fbfbfc;
  --nx-text: #0b0f14;
  --nx-muted: rgba(11,15,20,.62);
  --nx-link: #0a66ff;

  /* Acento (evitar “neon”; premium) */
  --nx-accent: #0a66ff;
  --nx-accent-2: #00a3ff;
  --nx-good: #0bb96d;
  --nx-warn: #f5a524;
  --nx-bad:  #f31260;

  /* Topbar */
  --nx-topbar: rgba(255,255,255,.82);
  --nx-topbar-border: rgba(0,0,0,.08);
}

html.nx-dark{
  --nx-bg: #07090c;
  --nx-surface: rgba(255,255,255,.06);
  --nx-surface-2: rgba(255,255,255,.08);
  --nx-text: #f4f6fb;
  --nx-muted: rgba(244,246,251,.62);
  --nx-border: rgba(255,255,255,.12);
  --nx-border-2: rgba(255,255,255,.16);
  --nx-topbar: rgba(7,9,12,.72);
  --nx-topbar-border: rgba(255,255,255,.10);
  --nx-shadow: 0 14px 40px rgba(0,0,0,.40);
  --nx-shadow-2: 0 10px 26px rgba(0,0,0,.42);
}

@media (prefers-color-scheme: dark){
  html:not(.nx-light){ /* se usuário não travou em light */
    --nx-bg: #07090c;
    --nx-surface: rgba(255,255,255,.06);
    --nx-surface-2: rgba(255,255,255,.08);
    --nx-text: #f4f6fb;
    --nx-muted: rgba(244,246,251,.62);
    --nx-border: rgba(255,255,255,.12);
    --nx-border-2: rgba(255,255,255,.16);
    --nx-topbar: rgba(7,9,12,.72);
    --nx-topbar-border: rgba(255,255,255,.10);
    --nx-shadow: 0 14px 40px rgba(0,0,0,.40);
    --nx-shadow-2: 0 10px 26px rgba(0,0,0,.42);
  }
}

/* Reset básico */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--nx-font);
  background: radial-gradient(1200px 600px at 10% 0%, rgba(10,102,255,.10), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(0,163,255,.10), transparent 55%),
              var(--nx-bg);
  color: var(--nx-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links */
a{ color: var(--nx-link); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Containers genéricos */
.container, .container-fluid, main, .content, .page, .wrapper{
  width: 100%;
}

/* Títulos */
h1,h2,h3,h4{
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
}
h1{ font-size: 28px; }
h2{ font-size: 20px; }
h3{ font-size: 16px; }

/* Cards / blocos: aplica em padrões comuns */
.card, .panel, .box, .widget, .tile, .section, .well,
.dashboard-card, .kpi, .kpi-card, .nx-card{
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
}

/* Se seu HTML usa “row/col”, dá uma respirada */
.row, .grid, .columns, .cols{
  gap: 14px;
}

/* Tabelas: padrão premium */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  overflow: hidden;
  box-shadow: var(--nx-shadow-2);
}
thead th{
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-muted);
  background: linear-gradient(180deg, var(--nx-surface-2), var(--nx-surface));
  border-bottom: 1px solid var(--nx-border);
  padding: 12px 14px;
}
tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--nx-border);
  vertical-align: middle;
}
tbody tr:last-child td{ border-bottom: none; }
tbody tr:hover td{
  background: rgba(10,102,255,.06);
}

/* Botões */
button, .btn, input[type="submit"], input[type="button"]{
  font-family: var(--nx-font);
  border-radius: 12px;
  border: 1px solid var(--nx-border);
  background: var(--nx-surface);
  color: var(--nx-text);
  padding: 10px 14px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover{
  border-color: var(--nx-border-2);
  box-shadow: var(--nx-shadow-2);
}
button:active, .btn:active{
  transform: translateY(1px);
}

/* Botão primário (se já existir class .primary ou .btn-primary) */
.btn-primary, .primary, button.primary{
  background: linear-gradient(180deg, rgba(10,102,255,1), rgba(0,163,255,1));
  border: 0;
  color: #fff !important;
}
.btn-primary:hover, .primary:hover, button.primary:hover{
  filter: brightness(1.05);
}

/* Inputs */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
select, textarea{
  width: 100%;
  font-family: var(--nx-font);
  background: var(--nx-surface);
  color: var(--nx-text);
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(10,102,255,.65);
  box-shadow: 0 0 0 4px rgba(10,102,255,.14);
}

/* Mensagens/alerts comuns */
.alert, .flash, .message, .notice, .warning, .error, .success{
  border-radius: var(--nx-radius);
  padding: 12px 14px;
  border: 1px solid var(--nx-border);
  background: var(--nx-surface);
}
.success{ border-color: rgba(11,185,109,.35); }
.warning{ border-color: rgba(245,165,36,.35); }
.error{ border-color: rgba(243,18,96,.35); }

/* “Badges” e status */
.badge, .tag, .pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--nx-border);
  background: var(--nx-surface);
  font-size: 12px;
  color: var(--nx-muted);
}
.badge.ok, .tag.ok{ border-color: rgba(11,185,109,.40); color: var(--nx-good); }
.badge.warn, .tag.warn{ border-color: rgba(245,165,36,.40); color: var(--nx-warn); }
.badge.bad, .tag.bad{ border-color: rgba(243,18,96,.40); color: var(--nx-bad); }

/* Topbar padrão (se existir nav/header) */
header, .navbar, .topbar, .app-header{
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--nx-topbar);
  border-bottom: 1px solid var(--nx-topbar-border);
}

/* Tabs / menu horizontal: tenta atingir padrões comuns */
.nav, nav ul, .tabs, .tabbar, .menu, .nav-tabs{
  list-style: none;
  padding-left: 0;
}
.nav a, nav a, .tabs a, .menu a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--nx-muted);
}
.nav a:hover, nav a:hover, .tabs a:hover, .menu a:hover{
  background: rgba(10,102,255,.10);
  color: var(--nx-text);
  text-decoration: none;
}
.nav a.active, nav a.active, .tabs a.active, .menu a.active{
  background: rgba(10,102,255,.16);
  color: var(--nx-text);
  border: 1px solid rgba(10,102,255,.22);
}

/* Layout “miolo” respirado (não quebra páginas) */
main, .main, .content, .page-content, .container{
  padding: 18px 18px;
}
@media (min-width: 1200px){
  main, .main, .content, .page-content, .container{
    padding: 22px 28px;
  }
}

/* Pequeno toggle (injetado no layout) */
#nxThemeToggle{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border-radius: 999px;
  padding: 10px 12px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  box-shadow: var(--nx-shadow-2);
  color: var(--nx-muted);
}
#nxThemeToggle:hover{ color: var(--nx-text); }