/* ============================================================
   MoMa — Monitoramento de Efluentes · REAQT
   Estilos base, paleta e animações (fiéis ao protótipo de design)
   ============================================================ */

:root {
  /* paleta de status */
  --ok:   #2fe0c8;
  --warn: #f6b13e;
  --crit: #ff5d7e;
  --cyan: #2fd9f5;
  --indigo: #5b6cff;
  --aqua: #34e0d0;

  /* superfícies / texto */
  --bg:        #04050d;
  --text:      #eaf0ff;
  --text-soft: #aeb8e0;
  --muted:     #8b94c0;
  --muted-2:   #9aa4ce;
  --muted-3:   #6f7bb0;

  /* vidro */
  --glass-grad: linear-gradient(155deg, rgba(46,64,150,.16), rgba(20,150,180,.05));
  --glass-border: rgba(150,180,255,.14);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.08);
  --panel-bg: rgba(20,28,60,.40);
  --panel-border: rgba(150,180,255,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: 'Sora', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120,150,230,.25); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- animações ---------- */
@keyframes spin   { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes rise   { 0%{transform:translateY(0);opacity:0} 20%{opacity:.6} 100%{transform:translateY(-130px);opacity:0} }
@keyframes pulseAlarm { 0%,100%{box-shadow:0 0 0 0 rgba(255,93,126,.55),inset 0 1px 0 rgba(255,255,255,.10)} 50%{box-shadow:0 0 26px 4px rgba(255,93,126,.45),inset 0 1px 0 rgba(255,255,255,.10)} }
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes flowdot{ 0%{transform:translateX(-6px);opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{transform:translateX(46px);opacity:0} }
@keyframes livedot{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.78)} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes sheen  { 0%{transform:translateX(-120%)} 100%{transform:translateX(220%)} }
@keyframes appear { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes logoGlow { 0%,100%{filter:brightness(1) drop-shadow(0 0 2px rgba(57,201,255,.5))} 50%{filter:brightness(1.22) drop-shadow(0 0 9px rgba(57,201,255,.9))} }
@keyframes popIn  { from{opacity:0;transform:scale(.55)} to{opacity:1;transform:scale(1)} }
.anim-appear { animation: appear .4s ease both; }

/* ---------- layout raiz ---------- */
.moma-root {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
.bg-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 720px at 8% -8%, rgba(64,52,235,.34), transparent 58%),
    radial-gradient(900px 700px at 100% 110%, rgba(24,180,210,.16), transparent 55%),
    radial-gradient(700px 500px at 88% 6%, rgba(40,30,120,.30), transparent 60%);
}
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(120,150,230,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,230,.05) 1px, transparent 1px);
  background-size: 46px 46px;
}
.layer { position: relative; z-index: 2; }

/* ---------- vidro / cards ---------- */
.glass {
  background: var(--glass-grad);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset), 0 18px 40px -24px rgba(0,0,0,.6);
}
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px;
  background: rgba(7,9,22,.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(150,180,255,.10);
}
.nav-item {
  cursor: pointer; padding: 8px 14px; border-radius: 11px;
  font-size: 13px; font-weight: 600; transition: all .15s; white-space: nowrap;
}
.nav-item:hover { color: #fff !important; }
.chip {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 11px; background: rgba(46,64,150,.14); border: 1px solid rgba(150,180,255,.12);
}
.icon-btn {
  cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(46,64,150,.14); border: 1px solid rgba(150,180,255,.12);
  transition: border-color .15s;
}
.avatar {
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #04050d; flex: none;
}

/* dot animations as helper classes */
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-live  { animation: livedot 1.6s ease-in-out infinite; }
.dot-blink { animation: blink 1s infinite; }

/* ---------- body / grids ---------- */
/* padding fluido: aproveita telas grandes sem sobrar borda no mobile/Notion */
.app-body { flex: 1; padding: clamp(12px, 2.5vw, 24px); max-width: 1480px; width: 100%; margin: 0 auto; min-width: 0; }
.grid-auto { display: grid; gap: 14px; }

/* ---------- sidebar (admin) ---------- */
.shell-row { display: flex; flex: 1; align-items: stretch; min-height: 0; }
.sidebar {
  width: 216px; flex: none; padding: 18px 12px;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid rgba(150,180,255,.08);
  position: sticky; top: 62px; align-self: flex-start;
  max-height: calc(100vh - 62px); overflow-y: auto;
}
.side-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px;
  font-size: 13px; font-weight: 600; color: #8b94c0; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.side-item:hover { color: #fff; background: rgba(95,108,255,.14); }
.side-item.active { color: #fff; background: rgba(95,108,255,.22); }
.side-ico { width: 20px; text-align: center; font-size: 15px; flex: none; }
.side-sep { margin: 10px 12px 6px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #5a6390; text-transform: uppercase; }
@media (max-width: 860px) {
  .shell-row { flex-direction: column; }
  .sidebar {
    width: 100%; flex-direction: row; overflow-x: auto; max-height: none;
    position: static; padding: 10px 12px;
    border-right: none; border-bottom: 1px solid rgba(150,180,255,.08);
  }
  .side-sep { display: none; }
}

/* ---------- inputs / botões ---------- */
.field {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  background: rgba(8,12,28,.6); border: 1px solid rgba(150,180,255,.16);
  color: #fff; font-size: 13px; outline: none;
}
.field:focus { border-color: rgba(120,200,255,.45); }
.btn-primary {
  cursor: pointer; text-align: center; padding: 12px; border-radius: 12px;
  font-weight: 700; font-size: 14px; color: #fff;
  /* gradiente da logo 2026 (Q e símbolo M): ciano -> azul profundo */
  background: linear-gradient(180deg, #12c4fb, #2b37ce);
  box-shadow: 0 12px 30px -12px rgba(25,154,237,.7);
  border: none;
}
.clickable { cursor: pointer; }

/* ---------- dashboard editável (Fase 5) ---------- */
/* largura dos cards (P=1 · M=2 · G=3 colunas); em telas estreitas volta a 1 */
.dash-span-2 { grid-column: span 2; }
.dash-span-3 { grid-column: span 3; }
@media (max-width: 860px) { .dash-span-2, .dash-span-3 { grid-column: auto; } }
/* clica-e-arrasta em modo de edição */
.dash-handle { cursor: grab; touch-action: none; user-select: none; }
.dash-handle:active { cursor: grabbing; }
.dash-dragging { opacity: .45; }
.dash-drop { outline: 2px dashed rgba(47,217,245,.75); outline-offset: 4px; border-radius: 18px; }

/* hover lift used on login/admin cards */
.lift { transition: transform .18s, border-color .18s; }
.lift:hover { transform: translateY(-4px); border-color: rgba(120,200,255,.45); }

/* selo de versão (rodapé, todas as telas) — discreto de propósito;
   ganha um pouco de presença no hover p/ conferência rápida */
.ver-tag {
  position: fixed; left: 12px; bottom: 8px; z-index: 40;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .8px;
  color: rgba(174, 184, 224, .30);
  user-select: none; pointer-events: auto; cursor: default;
  transition: color .2s ease;
}
.ver-tag:hover { color: rgba(174, 184, 224, .75); }

/* tooltip shared */
.tip {
  position: absolute; pointer-events: none; z-index: 25;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(7,11,26,.96); border: 1px solid rgba(120,200,255,.32);
  box-shadow: 0 8px 22px rgba(0,0,0,.55); white-space: nowrap;
  transform: translate(-50%, -128%);
}

/* ---------- modal de análise (responsivo) ---------- */
.modal-overlay { padding: clamp(8px, 3vw, 26px); }
/* --mx = respiro lateral interno do modal; os blocos usam padding com var(--mx) */
.modal-box { --mx: 24px; }
.modal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
@media (max-width: 720px) {
  .modal-box { --mx: 14px; max-height: 96vh !important; border-radius: 18px !important; }
}

/* responsive: tighten paddings on small screens / Notion narrow embeds */
@media (max-width: 860px) {
  /* grids de 2 colunas (definidos inline no JS) empilham em telas estreitas */
  .mid-grid, .sec-grid, .sources-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .topbar { gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
  .topbar-logo { height: 38px !important; }
  .main-chart-svg { height: 170px !important; }
  .hide-sm { display: none !important; }
}
@media (max-width: 540px) {
  /* títulos das telas (font-size inline no JS) encolhem no celular */
  .app-body h1 { font-size: 21px !important; }
}