/* ============================================================
   Espaço Talassa Dashboard — tema derivado de vngd.net
   Dark navy + acento ciano (oceânico). Layout: topbar + sidebar.
   ============================================================ */
:root {
  --bg:       hsl(222, 47%, 6%);
  --panel:    hsl(222, 30%, 11%);
  --panel-2:  hsl(222, 28%, 15%);
  --fg:       hsl(210, 40%, 93%);
  --muted:    hsl(215, 20%, 60%);
  --primary:  hsl(196, 55%, 45%);
  --primary-2:hsl(190, 70%, 50%);
  --border:   hsl(222, 25%, 18%);
  --danger:   hsl(350, 65%, 55%);
  --ok:       hsl(150, 55%, 45%);
  --font:     'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  /* brilho oceânico subtil no topo */
  background-image:
    radial-gradient(1200px 500px at 80% -10%, hsla(196,55%,45%,0.10), transparent 60%),
    radial-gradient(900px 400px at 10% -5%, hsla(190,70%,50%,0.06), transparent 55%);
  background-attachment: fixed;
}
a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: 60px; padding: 0 22px;
  background: hsla(222,40%,8%,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: .5px; font-size: 17px;
}
.topbar .logo .logo-img { width: 30px; height: 30px; border-radius: 8px; }
.topbar .logo .logo-box { display:inline-grid; place-items:center; width:34px; height:34px; background:#fff; border-radius:8px; padding:3px; }
.topbar .user .btn-logout {
  margin-left: 12px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--fg); font-size: 13px; font-weight: 500; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; transition: background .15s, border-color .15s;
}
.topbar .user .btn-logout:hover { background: hsla(350,65%,55%,.15); border-color: hsla(350,65%,55%,.4); color: #ff8a9a; }

.topbar .logo .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  display: grid; place-items: center; color: #00131a; font-size: 18px;
}
.topbar .tag { color: var(--muted); font-size: 12px; font-weight: 500; }
.topbar .spacer { flex: 1; }
.topbar .env {
  font-size: 11px; color: var(--muted); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px;
}
.topbar .user {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--fg);
}
.topbar .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  display: grid; place-items: center; color: #00131a; font-weight: 700; font-size: 13px;
}

/* ---------- Shell (sidebar + main) ---------- */
.shell { display: flex; min-height: calc(100vh - 60px); }
.sidebar {
  width: 244px; flex-shrink: 0;
  background: hsla(222,38%,8%,0.6);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
}
.sidebar .group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted); padding: 14px 12px 6px;
}
.sidebar a.nav {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--muted); font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.sidebar a.nav:hover { background: var(--panel); color: var(--fg); text-decoration: none; }
.sidebar a.nav.active {
  background: linear-gradient(90deg, hsla(196,55%,45%,0.18), transparent);
  color: var(--fg);
  box-shadow: inset 3px 0 0 var(--primary);
}
.sidebar a.nav .ico { width: 18px; text-align: center; opacity: .9; }

.main { flex: 1; padding: 26px 30px 60px; max-width: 1180px; }
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 24px; font-weight: 700; }
.page-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; } .sidebar{display:none;} }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 18px;
}
.card h2, .card h3 { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 12px; }
.card h2 .ico, .card h3 .ico { color: var(--primary-2); margin-right: 7px; }

.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .val { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.kpi .lbl { font-size: 12.5px; color: var(--muted); }
.kpi .val.cyan { color: var(--primary-2); }

/* ---------- Tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th, table.tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
table.tbl th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
table.tbl tr:hover td { background: hsla(222,30%,15%,0.5); }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border); }
.badge.ok { color: var(--ok); border-color: hsla(150,55%,45%,.4); background: hsla(150,55%,45%,.1); }
.badge.warn { color: #e8a04a; border-color: hsla(35,80%,55%,.4); background: hsla(35,80%,55%,.1); }
.badge.diff { color: var(--danger); border-color: hsla(350,65%,55%,.4); background: hsla(350,65%,55%,.1); }
.operator { box-shadow: 0 2px 12px hsla(222,47%,6%,.4); }

/* ---------- Heatmap ---------- */
table.heat { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; width: 100%; }
table.heat th { color: var(--muted); font-weight: 600; padding: 6px; text-align: center; }
table.heat td.lbl { text-align: left; color: var(--fg); font-weight: 500; white-space: nowrap; padding-right: 10px; }
table.heat td.cell {
  text-align: center; padding: 7px 4px; border-radius: 6px; color: #04141a; font-weight: 600;
}
.cell.hi { outline: 2px solid var(--primary-2); }
.cell.diffrow { color: var(--fg); font-weight: 700; }
.legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.legend .swatch { width: 90px; height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, hsl(196,40%,18%), hsl(196,55%,40%), hsl(190,75%,55%)); }

/* ---------- Misc ---------- */
.timeline { border-left: 2px solid var(--border); margin-left: 8px; padding-left: 18px; }
.timeline .ev { position: relative; margin-bottom: 16px; }
.timeline .ev::before {
  content: ''; position: absolute; left: -25px; top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px hsla(196,55%,45%,.2);
}
.timeline .ev .yr { font-weight: 700; color: var(--primary-2); font-size: 13px; }
.chip { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--fg); margin: 3px 4px 3px 0; }
.bar { height: 8px; border-radius: 20px; background: var(--panel-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg,var(--primary),var(--primary-2)); }
.foot { color: var(--muted); font-size: 12px; border-top: 1px solid var(--border);
  margin-top: 30px; padding-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; }
.callout { background: hsla(196,55%,45%,.08); border: 1px solid hsla(196,55%,45%,.3);
  border-radius: 12px; padding: 14px 16px; font-size: 13.5px; color: var(--fg); }
.callout .t { color: var(--primary-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }