/* Visual moderno do NetWatch. Só vale com <html data-ui="modern"> (padrão); o clássico continua intacto em app.css.
   Ideia: a rede é o assunto, então o estado (online/fora) é o único elemento que brilha; o resto fica calmo, com mais ar,
   cantos generosos e sem linhas duras. Cores: azul-tinta de base, acento ultramarino, verde/âmbar/vermelho só para estado. */

:root[data-theme="light"] {
  --bg: #f3f6fa; --panel: #ffffff; --panel-2: #f1f5f9; --line: #d9e2ec; --text: #0f1b2a; --muted: #5b6f84;
  --accent: #0284c7; --good: #059669; --ok: #65a30d; --warn: #b45309; --bad: #dc2626; --na: #94a3b8; color-scheme: light;
}

html[data-ui="modern"] {
  --bg: #0b101d; --panel: #121a2c; --panel-2: #1a2440; --line: rgba(255,255,255,.075); --text: #e9edf8; --muted: #8e99b8;
  --accent: #7084ff; --good: #3fd8a2; --ok: #b7e24d; --warn: #f6b94b; --bad: #ff6b7b; --na: #5d6a8a;
  --radius: 16px; --shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 14px 32px -16px rgba(0,0,0,.6);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  html[data-ui="modern"]:not([data-theme="dark"]) {
    --bg: #edf0f8; --panel: #ffffff; --panel-2: #f2f4fb; --line: rgba(22,32,72,.09); --text: #141a2e; --muted: #647092;
    --accent: #4258ee; --good: #0c9a6e; --ok: #5d9a0c; --warn: #b4690e; --bad: #d4314a; --na: #9aa4c0;
    --shadow: 0 1px 2px rgba(22,32,72,.05), 0 16px 30px -18px rgba(22,32,72,.22); color-scheme: light;
  }
}
html[data-ui="modern"][data-theme="light"] {
  --bg: #edf0f8; --panel: #ffffff; --panel-2: #f2f4fb; --line: rgba(22,32,72,.09); --text: #141a2e; --muted: #647092;
  --accent: #4258ee; --good: #0c9a6e; --ok: #5d9a0c; --warn: #b4690e; --bad: #d4314a; --na: #9aa4c0;
  --shadow: 0 1px 2px rgba(22,32,72,.05), 0 16px 30px -18px rgba(22,32,72,.22); color-scheme: light;
}

html[data-ui="modern"] body { font-family: "Inter var", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; letter-spacing: -.003em; -webkit-font-smoothing: antialiased; }
html[data-ui="modern"] h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; }
html[data-ui="modern"] h2 { font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; margin: 30px 0 12px; }
html[data-ui="modern"] main { max-width: 1360px; padding: 26px 24px 70px; }

/* topo translúcido e menu lateral flutuante */
html[data-ui="modern"] .topbar { height: 62px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 0; padding: 0 18px; gap: 10px; }
html[data-ui="modern"] .brand { font-weight: 650; letter-spacing: -.01em; }
html[data-ui="modern"] .gsearch input { border-radius: 999px; background: var(--panel); border: 1px solid var(--line); padding: 10px 18px; box-shadow: var(--shadow); }
html[data-ui="modern"] .userbtn { border-radius: 999px; background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
html[data-ui="modern"] .avatar { background: var(--accent); color: #fff; }
html[data-ui="modern"] .icon-btn { border-radius: 12px; }
html[data-ui="modern"] .layout { min-height: calc(100vh - 62px); }
@media (min-width: 900px) {
  html[data-ui="modern"] .sidebar { top: 70px; height: calc(100vh - 86px); width: 248px; margin: 4px 0 12px 16px; padding: 12px 10px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); scrollbar-width: thin; }
}
@media (max-width: 899px) {
  html[data-ui="modern"] .topbar { height: 56px; padding: 0 8px; }
  html[data-ui="modern"] .sidebar { top: 56px; border-radius: 0 22px 22px 0; background: var(--panel); border: 0; }
  html[data-ui="modern"] .scrim { inset: 56px 0 0 0; }
  html[data-ui="modern"] .topbar.gs-open .gsearch { top: 56px; }
  html[data-ui="modern"] main { padding: 16px 12px 60px; }
}
html[data-ui="modern"] .navtitle { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; padding: 12px 12px 4px; }
html[data-ui="modern"] .nav a { border-radius: 12px; padding: 9px 12px; font-weight: 550; transition: background .15s, color .15s; }
html[data-ui="modern"] .nav a:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
html[data-ui="modern"] .nav a.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); box-shadow: none; }
html[data-ui="modern"] .nav a .ic { filter: saturate(.85); }

/* cartões, botões, campos */
html[data-ui="modern"] .card { border-color: var(--line); border-radius: var(--radius); }
html[data-ui="modern"] .pad { padding: 18px 20px; }
html[data-ui="modern"] .btn { border-radius: 12px; border-color: var(--line); background: var(--panel-2); padding: 9px 15px; font-weight: 600; transition: border-color .15s, background .15s, transform .08s; }
html[data-ui="modern"] .btn:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
html[data-ui="modern"] .btn:active { transform: translateY(1px); }
html[data-ui="modern"] .btn.primary { background: color-mix(in srgb, var(--accent) 80%, #000); color: #fff; border-color: transparent; }
html[data-ui="modern"] .btn.primary:hover { background: color-mix(in srgb, var(--accent) 92%, #000); }
html[data-ui="modern"] .btn.sm { padding: 5px 11px; border-radius: 10px; }
html[data-ui="modern"] input, html[data-ui="modern"] select, html[data-ui="modern"] textarea { border-radius: 12px; border-color: var(--line); background: var(--panel-2); padding: 10px 13px; }
html[data-ui="modern"] input:focus, html[data-ui="modern"] select:focus, html[data-ui="modern"] textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
html[data-ui="modern"] label.field > span { font-weight: 550; }
html[data-ui="modern"] .chip { border-radius: 999px; background: var(--panel); border-color: var(--line); }

/* números e estado: o ponto onde o visual aparece */
html[data-ui="modern"] .stats { gap: 14px; }
html[data-ui="modern"] .stat { padding: 18px 20px; }
html[data-ui="modern"] .stat .n { font-size: 2.15rem; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html[data-ui="modern"] .stat .l { margin-top: 2px; }
html[data-ui="modern"] .dot { width: 11px; height: 11px; }
html[data-ui="modern"] .dot.online { box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 17%, transparent), 0 0 14px color-mix(in srgb, var(--good) 55%, transparent); }
html[data-ui="modern"] .dot.offline { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 22%, transparent), 0 0 14px color-mix(in srgb, var(--bad) 60%, transparent); }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--bad) 6%, transparent), 0 0 20px color-mix(in srgb, var(--bad) 30%, transparent); } }
html[data-ui="modern"] .badge, html[data-ui="modern"] .pill { text-transform: none; letter-spacing: 0; font-size: .78em; font-weight: 600; padding: 2px 10px; border-color: transparent; background: color-mix(in srgb, var(--muted) 16%, transparent); }
html[data-ui="modern"] .badge.good, html[data-ui="modern"] .pill.good { background: color-mix(in srgb, var(--good) 16%, transparent); }
html[data-ui="modern"] .badge.bad, html[data-ui="modern"] .pill.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); }
html[data-ui="modern"] .badge.warn, html[data-ui="modern"] .pill.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); }
html[data-ui="modern"] .alert { border-left-width: 0; box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); }
html[data-ui="modern"] .sig .bar { height: 7px; border-radius: 4px; }
html[data-ui="modern"] .sig .bar i { border-radius: 4px; }
html[data-ui="modern"] .client.off { background: color-mix(in srgb, var(--bad) 8%, transparent); }

/* tabelas e listas: sem linhas pesadas */
html[data-ui="modern"] th { text-transform: none; letter-spacing: 0; font-size: .82em; font-weight: 600; padding: 12px 16px; }
html[data-ui="modern"] td { padding: 12px 16px; border-top-color: var(--line); }
html[data-ui="modern"] tr.click:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
html[data-ui="modern"] .kv { gap: 0; background: transparent; border-radius: var(--radius); border-color: var(--line); }
html[data-ui="modern"] .kv > div { padding: 12px 16px; border-bottom: 1px solid var(--line); }
html[data-ui="modern"] .kv .k { text-transform: none; letter-spacing: 0; font-size: .82em; }
html[data-ui="modern"] .devtile { border-radius: 14px; padding: 13px 16px; transition: border-color .15s, transform .12s; }
html[data-ui="modern"] .devtile:hover { transform: translateY(-1px); }
html[data-ui="modern"] .sector-head, html[data-ui="modern"] .client, html[data-ui="modern"] .warn-item, html[data-ui="modern"] .offline-item, html[data-ui="modern"] .hints li, html[data-ui="modern"] .tl li { border-color: var(--line); }
html[data-ui="modern"] .rc-h { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* diálogos, menus, aviso */
html[data-ui="modern"] dialog { border-radius: 22px; border-color: var(--line); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
html[data-ui="modern"] dialog::backdrop { background: rgba(6,10,22,.55); backdrop-filter: blur(4px); }
html[data-ui="modern"] dialog form, html[data-ui="modern"] dialog .dlg { padding: 22px 24px; }
html[data-ui="modern"] .menu { border-radius: 16px; border-color: var(--line); box-shadow: 0 24px 50px -16px rgba(0,0,0,.55); padding: 8px; }
html[data-ui="modern"] .menu button { border-radius: 10px; }
html[data-ui="modern"] #toast { border-radius: 999px; padding: 11px 20px; background: var(--panel); box-shadow: 0 18px 40px -14px rgba(0,0,0,.55); }
html[data-ui="modern"] .checklist { border-radius: 12px; border-color: var(--line); }
html[data-ui="modern"] .progress, html[data-ui="modern"] .progress i { border-radius: 4px; }
html[data-ui="modern"] .login .box { border-radius: 24px; padding: 32px; }

@media (prefers-reduced-motion: reduce) { html[data-ui="modern"] * { transition: none !important; } }