:root {
  --bg: #081426;
  --bg2: #0d1f38;
  --card: #0f2746;
  --card2: #123056;
  --line: rgba(255, 255, 255, 0.08);
  --text: #e9f3ff;
  --muted: #9bb1c9;
  --accent: #f2bc58;
  --accent2: #e0a63a;
  --btn: #173c69;
  --btn2: #244f84;
  --ok: #5fd28b;
  --warn: #f2bc58;
  --crit: #ff7a7a;
  --info: #6db8ff;
  --radius: 16px;
  --radius-lg: 22px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  --mono: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  background: linear-gradient(160deg, var(--bg), var(--bg2));
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.92em; color: var(--muted); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(18, 48, 86, 0.96), rgba(12, 31, 56, 0.85));
  border-bottom: 1px solid var(--line);
  gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 40px; width: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.3)); }
.brand-logo-large { height: 96px; }
.brand-vertical { flex-direction: column; gap: 8px; }
.brand-name {
  font-weight: 700; letter-spacing: 0.18em; font-size: 11px;
  color: var(--muted); text-transform: uppercase;
}
.brand-large .brand-name { font-size: 13px; }

.nav { display: flex; gap: 22px; }
.nav a { color: var(--text); padding: 6px 2px; border-bottom: 2px solid transparent; font-weight: 600; }
.nav a:hover { border-color: var(--accent); text-decoration: none; color: var(--accent); }

.user-box { display: flex; align-items: center; gap: 12px; }
.user-name { font-weight: 700; }
.user-role {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: rgba(242, 188, 88, 0.14); color: var(--accent);
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;
}

.container { flex: 1; padding: 24px; max-width: 1360px; width: 100%; margin: 0 auto; }
.footer {
  text-align: center; padding: 16px;
  color: var(--muted); border-top: 1px solid var(--line);
  background: rgba(8, 20, 38, 0.6);
}

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.page-head .subtitle { color: var(--muted); font-size: 13px; margin-top: 4px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.card {
  background: linear-gradient(180deg, rgba(18, 48, 86, 0.96), rgba(12, 31, 56, 0.98));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
.card-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.card-value { font-size: 36px; font-weight: 900; margin-top: 6px; letter-spacing: -0.03em; }
.card-value.small { font-size: 22px; }
.card-foot { color: var(--muted); font-size: 12px; margin-top: 4px; }
.card-critical { border-color: rgba(255, 122, 122, 0.4); box-shadow: 0 18px 45px rgba(255, 122, 122, 0.12); }
.card-critical .card-value { color: var(--crit); }

.block {
  background: linear-gradient(180deg, rgba(18, 48, 86, 0.96), rgba(12, 31, 56, 0.98));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px; margin-bottom: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
.block h2 {
  margin: 0 0 16px; font-size: 16px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px;
}

.data { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.data th, .data td { text-align: left; padding: 12px 14px; }
.data th {
  color: var(--muted); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.data tbody tr {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
}
.data tbody td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.data tbody td:first-child { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; }
.data tbody td:last-child { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; }
.row-offline td { opacity: 0.65; }
.row-resolved td { opacity: 0.55; }
.sev-critical td { background: rgba(255, 122, 122, 0.08); }
.sev-warning td { background: rgba(242, 188, 88, 0.08); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.dot-ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(95, 210, 139, 0.18); }
.dot-off { background: var(--crit); box-shadow: 0 0 0 4px rgba(255, 122, 122, 0.18); }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
}
.tag-ok { background: rgba(95, 210, 139, 0.15); color: var(--ok); }
.tag-crit, .tag-critical { background: rgba(255, 122, 122, 0.15); color: var(--crit); }
.tag-warning { background: rgba(242, 188, 88, 0.18); color: var(--accent); }
.tag-info { background: rgba(109, 184, 255, 0.18); color: var(--info); }
.tag-active { background: rgba(255, 122, 122, 0.18); color: var(--crit); }
.tag-resolved { background: rgba(155, 177, 201, 0.15); color: var(--muted); }

.muted { color: var(--muted); }

.btn, button.btn, .linkbtn {
  appearance: none; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 14px;
  font-weight: 800; font-size: 13px; cursor: pointer;
  text-decoration: none; transition: 0.2s ease;
  font-family: inherit;
}
.btn-primary, .linkbtn.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #1f1f1f;
  box-shadow: 0 12px 24px rgba(242, 188, 88, 0.24);
}
.btn-primary:hover, .linkbtn.primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-ghost, .linkbtn.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text); border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: rgba(242, 188, 88, 0.35); color: var(--accent); }
.linkbtn.danger {
  background: rgba(255, 122, 122, 0.12);
  color: var(--crit);
  border: 1px solid rgba(255, 122, 122, 0.35);
}
.linkbtn.danger:hover { background: rgba(255, 122, 122, 0.2); }

.link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; font-weight: 700; }
.link:hover { color: var(--accent2); text-decoration: underline; }
.inline { display: inline; }

.login-wrap { display: grid; place-items: center; min-height: 70vh; }
.login-card {
  background: linear-gradient(180deg, rgba(18, 48, 86, 0.96), rgba(12, 31, 56, 0.98));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px;
  width: 100%; max-width: 400px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}

.form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.form input, .form select {
  background: #17345d; border: 1px solid var(--line); color: var(--text);
  padding: 12px 14px; border-radius: 14px; font: inherit;
  outline: none; transition: 0.2s ease;
}
.form input:focus, .form select:focus {
  border-color: rgba(242, 188, 88, 0.45);
  box-shadow: 0 0 0 3px rgba(242, 188, 88, 0.14);
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.banner { padding: 12px 14px; border-radius: 14px; margin: 8px 0; font-size: 13px; font-weight: 600; }
.banner-error { background: rgba(255, 122, 122, 0.12); border: 1px solid rgba(255, 122, 122, 0.4); color: var(--crit); }
.banner-success { background: rgba(95, 210, 139, 0.12); border: 1px solid rgba(95, 210, 139, 0.4); color: var(--ok); }

.threshold-summary {
  display: inline-flex; gap: 14px; align-items: center;
  font-size: 13px; color: var(--muted);
}
.threshold-summary strong { color: var(--text); font-weight: 800; }

/* ===== Sensor cards ===== */
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.sensor-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  transition: 0.2s ease;
}
.sensor-card:hover { border-color: rgba(242, 188, 88, 0.35); transform: translateY(-2px); }
.sensor-card-offline { opacity: 0.7; }
.sensor-card-alert {
  border-color: rgba(255, 122, 122, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.12);
}
.sensor-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 14px;
}
.sensor-card-name { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.sensor-card-loc { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sensor-card-status {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.sensor-temp {
  display: flex; align-items: baseline; gap: 4px;
  margin: 6px 0 14px;
}
.sensor-temp-value { font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.sensor-temp-unit { font-size: 18px; font-weight: 700; color: var(--muted); }
.sensor-mini {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 12px;
}
.sensor-mini .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.sensor-mini .v { font-size: 14px; font-weight: 700; margin-top: 2px; }
.sensor-power {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 12px;
}
.sensor-foot {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.empty-ok {
  padding: 16px; text-align: center; color: var(--ok);
  background: rgba(95, 210, 139, 0.08); border-radius: 14px;
  border: 1px solid rgba(95, 210, 139, 0.25);
  font-weight: 700;
}
.card-value-suffix { color: var(--muted); font-size: 0.55em; font-weight: 700; }

@media (max-width: 760px) {
  .topbar {
    padding: 10px 14px;
    gap: 10px;
    align-items: center;
  }
  .topbar .brand-name { display: none; }
  .nav {
    order: 3; width: 100%;
    gap: 14px; overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .nav a { white-space: nowrap; font-size: 13px; }
  .user-box { gap: 8px; }
  .user-name { font-size: 13px; }
  .user-role { font-size: 10px; padding: 2px 8px; }

  .container { padding: 14px; }
  .page-head h1 { font-size: 22px; }

  .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { padding: 14px; }
  .card-value { font-size: 24px; }

  .sensor-grid { grid-template-columns: 1fr; gap: 12px; }
  .sensor-card { padding: 14px; }
  .sensor-temp-value { font-size: 40px; }
  .sensor-mini { gap: 6px; }
  .sensor-mini .v { font-size: 13px; }

  .block { padding: 14px; }
  .block h2 { font-size: 13px; }

  /* Tabelas viram lista vertical em mobile (cada linha é um cartão) */
  .data { font-size: 13px; }
  .data thead { display: none; }
  .data, .data tbody, .data tr, .data td { display: block; width: 100%; }
  .data tbody tr {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 8px;
    padding: 10px 12px;
  }
  .data tbody td {
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    display: flex; justify-content: space-between; gap: 8px;
    word-break: break-word;
  }
  .data tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .data tbody td:first-child::before { content: ""; }

  .form .row { grid-template-columns: 1fr; }
}


/* === Dancold FINAL MONITOR UI START === */

/* remove pseudo-textos antigos criados nos testes anteriores */
.brand::before,
.brand::after,
.topbar .brand::before,
.topbar .brand::after,
header .brand::before,
header .brand::after {
  content: none !important;
  display: none !important;
}

/* remove badge/função ADMIN antiga, caso ainda exista em algum template */
.user-role,
header .badge,
.topbar .badge,
.navbar .badge,
.user-box .badge,
.user-info .badge,
.account-box .badge,
.header-user .badge {
  display: none !important;
}

/* =========================
   HEADER DESKTOP
========================= */

.topbar {
  width: 100% !important;
  min-height: 108px !important;
  padding: 18px 28px !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) auto minmax(190px, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;

  background: rgba(5, 18, 32, .97) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.22) !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  min-width: 0 !important;
}

.brand-logo {
  height: 72px !important;
  max-height: 72px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.34)) !important;
}

.brand-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.brand-copy strong {
  color: #f7fbff !important;
  font-size: 1.32rem !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.brand-copy span {
  color: #b7cce0 !important;
  font-size: .96rem !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
}

/* menu central */
.nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,.015) !important;
  border: 1px solid rgba(255,255,255,.035) !important;
  border-radius: 18px !important;
}

.nav a {
  color: #f0b844 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: .94rem !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  white-space: nowrap !important;
}

.nav a:hover {
  color: #ffd06a !important;
  background: rgba(255,255,255,.055) !important;
}

/* usuário */
.user-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.user-name {
  color: #f7fbff !important;
  font-weight: 850 !important;
  font-size: .98rem !important;
}

.inline,
.logout-form {
  margin: 0 !important;
  padding: 0 !important;
}

.logout-button,
button.logout-button,
form.logout-form button {
  background: linear-gradient(180deg, #ffd06a, #f0b844) !important;
  color: #061321 !important;
  border: none !important;
  border-radius: 18px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(240,184,68,.25) !important;
  cursor: pointer !important;
}

.logout-button:hover,
button.logout-button:hover,
form.logout-form button:hover {
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
}

/* =========================
   LIMPEZA DOS CARDS
========================= */

/* remove linhas decorativas exageradas dentro dos blocos */
.card::before,
.card::after,
.panel::before,
.panel::after,
section::before,
section::after,
.box::before,
.box::after,
.sensor-card::before,
.sensor-card::after {
  content: none !important;
  display: none !important;
}

/* reduz bordas internas que estavam criando “riscos” */
.card *:not(button):not(input):not(select):not(textarea),
.panel *:not(button):not(input):not(select):not(textarea),
section *:not(button):not(input):not(select):not(textarea) {
  box-shadow: none;
}

/* mantém cards principais bonitos */
.card,
.panel,
.box,
section,
article,
.sensor-card,
.alert-card,
.login-card,
.form-card,
.table-card {
  background: linear-gradient(180deg, rgba(22,58,93,.96), rgba(13,39,65,.97)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 55px rgba(0,0,0,.25) !important;
}

/* melhora área principal */
.container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* =========================
   LOGIN
========================= */

body:has(.login-card),
body:has(.login-logo) {
  background:
    radial-gradient(circle at 18% 0%, rgba(240,184,68,.12), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(70,130,200,.16), transparent 30%),
    linear-gradient(135deg, #04101d 0%, #071b2f 52%, #061321 100%) !important;
}

.login-card {
  max-width: 430px !important;
  margin: 8vh auto !important;
  padding: 32px !important;
}

.login-logo {
  height: 92px !important;
  max-height: 92px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto 18px auto !important;
  object-fit: contain !important;
}

.login-card h1,
.login-card h2 {
  text-align: center !important;
  color: #f7fbff !important;
  font-weight: 900 !important;
}

.login-card input {
  width: 100% !important;
}

.login-card button,
.login-card input[type="submit"] {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffd06a, #f0b844) !important;
  color: #061321 !important;
  font-weight: 900 !important;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {
  .topbar {
    min-height: auto !important;
    padding: 10px 10px 12px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand user"
      "nav nav" !important;
    gap: 10px 10px !important;
  }

  .brand {
    grid-area: brand !important;
    gap: 9px !important;
  }

  .brand-logo {
    height: 48px !important;
    max-height: 48px !important;
  }

  .brand-copy strong {
    font-size: .92rem !important;
    line-height: 1.05 !important;
  }

  .brand-copy span {
    font-size: .70rem !important;
    line-height: 1.1 !important;
  }

  .user-box {
    grid-area: user !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .user-name {
    font-size: .78rem !important;
  }

  .logout-button,
  button.logout-button,
  form.logout-form button {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    font-size: .78rem !important;
  }

  .nav {
    grid-area: nav !important;
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 6px !important;
    padding: 7px 2px 0 2px !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 0 !important;
  }

  .nav a {
    flex: 0 0 auto !important;
    font-size: .76rem !important;
    padding: 7px 9px !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  h1 {
    font-size: 1.65rem !important;
  }

  .card,
  .panel,
  .box,
  section,
  article,
  .sensor-card,
  .alert-card,
  .table-card {
    border-radius: 18px !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
  }

  /* tira poluição visual nos cards pequenos do dashboard */
  .card *:not(button):not(input):not(select):not(textarea),
  .panel *:not(button):not(input):not(select):not(textarea),
  section *:not(button):not(input):not(select):not(textarea) {
    box-shadow: none !important;
  }

  table {
    border-spacing: 0 9px !important;
  }

  tbody td {
    font-size: .78rem !important;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: 8px 8px 10px 8px !important;
  }

  .brand-logo {
    height: 42px !important;
    max-height: 42px !important;
  }

  .brand-copy strong {
    font-size: .82rem !important;
  }

  .brand-copy span {
    font-size: .64rem !important;
  }

  .user-name {
    display: none !important;
  }

  .nav a {
    font-size: .72rem !important;
    padding: 7px 8px !important;
  }

  .logout-button,
  button.logout-button,
  form.logout-form button {
    min-height: 34px !important;
    padding: 0 11px !important;
  }

  .footer {
    font-size: .68rem !important;
  }
}

/* === Dancold FINAL MONITOR UI END === */
/* === DANCOLD IDENTIDADE VISUAL FINAL === */

:root {
  --accent: #e0423f !important;
  --accent2: #c93431 !important;
  --warn: #e0423f !important;
  --crit: #e0423f !important;
  --info: #168de2 !important;
}

/* links */
a,
.link {
  color: #e0423f !important;
}

a:hover,
.link:hover {
  color: #ff6865 !important;
}

/* logo Dancold */
.brand-logo {
  height: 76px !important;
  max-height: 76px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.32)) !important;
}

.login-logo {
  height: 110px !important;
  max-height: 110px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* header */
.topbar {
  background: rgba(5, 18, 32, .98) !important;
  border-bottom: 1px solid rgba(224, 66, 63, .18) !important;
}

/* menu */
.nav a {
  color: #e9f3ff !important;
}

.nav a:hover {
  color: #e0423f !important;
  background: rgba(224, 66, 63, .12) !important;
}

/* botão sair */
.logout-button,
button.logout-button,
form.logout-form button,
button.link,
.user-box button {
  background: linear-gradient(180deg, #e0423f, #c93431) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(224, 66, 63, .28) !important;
}

.logout-button:hover,
button.logout-button:hover,
form.logout-form button:hover,
button.link:hover,
.user-box button:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* botões principais */
.btn-primary,
.linkbtn.primary,
button.btn-primary,
.login-card button,
.login-card input[type="submit"] {
  background: linear-gradient(180deg, #e0423f, #c93431) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(224, 66, 63, .28) !important;
}

.btn-primary:hover,
.linkbtn.primary:hover {
  filter: brightness(1.08) !important;
}

/* foco dos campos */
.form input:focus,
.form select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(224, 66, 63, .55) !important;
  box-shadow: 0 0 0 3px rgba(224, 66, 63, .16) !important;
}

/* cards */
.card,
.block,
.panel,
.box,
section,
article,
.sensor-card,
.alert-card,
.login-card,
.form-card,
.table-card {
  background: linear-gradient(180deg, rgba(22,58,93,.96), rgba(13,39,65,.98)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 24px 55px rgba(0,0,0,.25) !important;
}

/* destaque de alerta */
.card-critical,
.sensor-card-alert {
  border-color: rgba(224, 66, 63, .62) !important;
  box-shadow: 0 0 0 3px rgba(224, 66, 63, .14), 0 24px 55px rgba(0,0,0,.25) !important;
}

.card-critical .card-value,
.tag-crit,
.tag-critical,
.tag-active,
.banner-error {
  color: #ff7471 !important;
}

/* tags críticas */
.tag-crit,
.tag-critical,
.tag-active {
  background: rgba(224, 66, 63, .18) !important;
}

/* warning também entra no vermelho Dancold */
.tag-warning {
  background: rgba(224, 66, 63, .16) !important;
  color: #ff7471 !important;
}

.sev-warning td,
.sev-critical td {
  background: rgba(224, 66, 63, .08) !important;
}

/* bolinha offline */
.dot-off {
  background: #e0423f !important;
  box-shadow: 0 0 0 4px rgba(224, 66, 63, .18) !important;
}

/* hover dos sensores */
.sensor-card:hover {
  border-color: rgba(224, 66, 63, .42) !important;
}

/* login com brilho vermelho/azul da Dancold */
body:has(.login-card),
body:has(.login-logo) {
  background:
    radial-gradient(circle at 18% 0%, rgba(224,66,63,.15), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(22,141,226,.18), transparent 30%),
    linear-gradient(135deg, #04101d 0%, #071b2f 52%, #061321 100%) !important;
}

/* textos antigos */
.brand-copy strong,
.login-card h1,
.login-card h2 {
  color: #f7fbff !important;
}

.brand-copy span {
  color: #b7cce0 !important;
}

/* mobile */
@media (max-width: 900px) {
  .brand-logo {
    height: 58px !important;
    max-height: 58px !important;
  }

  .nav a {
    color: #e9f3ff !important;
  }

  .nav a:hover {
    color: #e0423f !important;
  }
}

@media (max-width: 480px) {
  .brand-logo {
    height: 50px !important;
    max-height: 50px !important;
  }
}

/* === FIM DANCOLD IDENTIDADE VISUAL FINAL === */

/* === Dancold identidade visual + correções UTF-8/login/logout === */
:root{
  --dancold-red:#e0423f;
  --dancold-blue:#008ee6;
  --dancold-bg:#061524;
  --dancold-panel:#12375a;
  --dancold-panel-2:#153f68;
  --dancold-line:rgba(255,255,255,.12);
  --dancold-text:#f3f7ff;
  --dancold-muted:#a9c7e8;
}
html,body{background:var(--dancold-bg)!important;color:var(--dancold-text)!important;}
.topbar{background:#061524!important;border-bottom:1px solid rgba(255,255,255,.08)!important;}
.brand{display:flex!important;align-items:center!important;gap:14px!important;text-decoration:none!important;color:var(--dancold-text)!important;min-width:250px;}
.brand-logo{width:64px!important;height:auto!important;object-fit:contain!important;}
.brand-text{display:flex!important;flex-direction:column!important;line-height:1.05!important;}
.brand-text strong{font-size:22px!important;font-weight:900!important;color:#fff!important;letter-spacing:-.03em!important;}
.brand-text span{font-size:14px!important;color:#d6e9ff!important;font-weight:700!important;}
.nav{background:rgba(5,18,33,.72)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:18px!important;}
.nav a{color:#fff!important;font-weight:800!important;}
.nav a:hover,.nav a.active{color:#fff!important;background:rgba(224,66,63,.18)!important;}
.user-box .user-role{display:none!important;}
button.link,.link,.btn-primary,button[type="submit"],.button,.btn{background:var(--dancold-red)!important;color:#050b12!important;border:0!important;border-radius:18px!important;font-weight:900!important;box-shadow:0 12px 28px rgba(224,66,63,.25)!important;}
button.link{padding:14px 22px!important;color:#060b11!important;}
.card,.panel,.summary-card,.sensor-card,.login-card,section[class*="card"],section[class*="panel"]{background:linear-gradient(180deg,var(--dancold-panel-2),var(--dancold-panel))!important;border:1px solid rgba(120,190,255,.20)!important;box-shadow:none!important;}
.container h1,.page-title,h1{color:#fff!important;text-shadow:none!important;}
.badge,.pill,.chip{background:rgba(0,142,230,.22)!important;color:#78c8ff!important;}
.status-ok,.ok,.success{color:#57e39b!important;}
.status-danger,.danger,.critical,.warning{color:#ff6f6f!important;}
.footer{background:#061524!important;color:#a9c7e8!important;border-top:1px solid rgba(255,255,255,.08)!important;}
.login-shell{min-height:calc(100vh - 120px);display:grid;place-items:center;padding:32px 16px;}
.login-card{width:min(430px,92vw);padding:34px;border-radius:24px;}
.login-brand{display:flex;align-items:center;gap:16px;margin-bottom:28px;}
.login-logo{width:82px;height:auto;object-fit:contain;}
.login-brand h1{margin:0;font-size:24px;font-weight:900;}
.login-brand p{margin:4px 0 0;color:var(--dancold-muted);font-weight:700;}
.login-copy{margin:0 0 18px;}
.eyebrow{display:block;letter-spacing:.28em;font-weight:900;color:var(--dancold-muted);font-size:13px;margin-bottom:10px;}
.login-card label{display:block;margin:13px 0 7px;color:#c7ddf4;font-weight:700;}
.login-card input{width:100%;box-sizing:border-box;background:#193f6a!important;border:1px solid rgba(255,255,255,.14)!important;color:white!important;border-radius:14px!important;padding:14px 16px!important;outline:none!important;}
.login-card input:focus{border-color:var(--dancold-red)!important;box-shadow:0 0 0 3px rgba(224,66,63,.18)!important;}
.login-card .btn-primary{width:100%;margin-top:18px;padding:15px 18px!important;}
.alert{border-radius:14px;padding:12px 14px;margin:12px 0;font-weight:800;}
.alert.danger{background:rgba(224,66,63,.16);border:1px solid rgba(224,66,63,.38);color:#ffd4d4!important;}
.alert.ok{background:rgba(60,210,130,.14);border:1px solid rgba(60,210,130,.32);color:#a8ffd0!important;}
@media (max-width: 760px){
  .topbar{align-items:flex-start!important;gap:12px!important;padding:14px!important;}
  .brand{min-width:auto!important;}
  .brand-logo{width:54px!important;}
  .brand-text strong{font-size:17px!important;}
  .brand-text span{font-size:12px!important;}
  .nav{width:100%!important;justify-content:space-between!important;overflow-x:auto!important;}
  .user-box{position:absolute!important;right:12px!important;top:14px!important;}
  button.link{padding:10px 16px!important;border-radius:14px!important;}
}

/* ===== DANCOLD FINAL PATCH - UTF-8 / LOGO / CORES ===== */
:root{
  --brand-red:#e0423f;
  --brand-blue:#008fe3;
  --bg:#071624;
  --panel:#11385f;
  --panel-2:#143f69;
  --text:#f3f8ff;
  --muted:#a9c7e8;
  --line:rgba(255,255,255,.12);
}
html,body{background:var(--bg)!important;color:var(--text)!important;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
.topbar{background:#071624!important;border-bottom:1px solid rgba(255,255,255,.08)!important;display:flex;align-items:center;gap:28px;padding:18px 28px!important;min-height:82px;overflow:visible!important;}
.brand{display:flex!important;align-items:center!important;gap:14px!important;text-decoration:none!important;min-width:260px;}
.brand-logo{width:72px!important;height:72px!important;max-height:72px!important;object-fit:contain!important;display:block!important;}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-text strong{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.02em;}
.brand-text span{font-size:14px;color:#d4e8ff;font-weight:700;}
.nav{margin:auto!important;background:rgba(0,0,0,.18)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:18px!important;padding:12px 20px!important;display:flex!important;gap:24px!important;align-items:center!important;white-space:nowrap;}
.nav a{color:#fff!important;text-decoration:none!important;font-weight:900!important;}
.nav a:hover{color:var(--brand-red)!important;}
.user-box{display:flex!important;align-items:center!important;gap:14px!important;margin-left:auto!important;white-space:nowrap!important;}
.user-role{display:none!important;}
.link,.logout-btn,button,.btn,.primary,input[type="submit"]{background:var(--brand-red)!important;color:#fff!important;border:0!important;border-radius:18px!important;font-weight:900!important;box-shadow:0 12px 28px rgba(224,66,63,.22)!important;}
.logout-btn{padding:14px 22px!important;min-width:70px!important;}
.card,.panel,.summary-card,.sensor-card,.section,.login-card{background:linear-gradient(180deg,var(--panel-2),#102d4e)!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:22px!important;box-shadow:none!important;}
.login-page{min-height:calc(100vh - 90px);display:flex;align-items:center;justify-content:center;padding:32px 16px;}
.login-card{width:min(430px,92vw)!important;padding:34px!important;}
.login-logo-wrap{display:flex!important;justify-content:flex-start!important;margin-bottom:22px!important;}
.login-logo{width:128px!important;height:auto!important;display:block!important;object-fit:contain!important;}
.login-card h1{letter-spacing:.22em!important;color:#c3dcfb!important;font-size:14px!important;margin:18px 0!important;}
.login-card label{display:block!important;color:#b9d4f4!important;margin:16px 0 8px!important;font-weight:700!important;}
.login-card input{width:100%!important;box-sizing:border-box!important;background:#1a3e6e!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:14px!important;padding:14px 16px!important;outline:none!important;}
.login-card input:focus{border-color:var(--brand-red)!important;box-shadow:0 0 0 3px rgba(224,66,63,.2)!important;}
.login-card .primary{width:100%!important;margin-top:16px!important;padding:16px!important;}
.alert.danger{background:rgba(224,66,63,.16)!important;color:#ffd5d5!important;border:1px solid rgba(224,66,63,.5)!important;border-radius:14px!important;padding:12px 14px!important;margin:12px 0!important;}
.badge,.pill,.tag{border-radius:999px!important;}
.badge.warning,.badge.critical,.critical,.danger{background:rgba(224,66,63,.16)!important;color:#ff7775!important;border-color:rgba(224,66,63,.55)!important;}
.footer{color:#a9c7e8!important;border-top:1px solid rgba(255,255,255,.08)!important;background:#071624!important;}
@media (max-width:760px){
  .topbar{padding:14px 16px!important;display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important;}
  .brand{min-width:0!important;gap:10px!important;}
  .brand-logo{width:56px!important;height:56px!important;}
  .brand-text strong{font-size:18px!important;}
  .brand-text span{font-size:12px!important;}
  .nav{grid-column:1 / -1!important;justify-content:flex-start!important;overflow-x:auto!important;width:100%!important;padding:10px 12px!important;gap:18px!important;}
  .user-box{grid-column:2!important;grid-row:1!important;}
  .user-name{display:none!important;}
  .logout-btn{padding:10px 16px!important;min-width:auto!important;border-radius:14px!important;}
  .container{padding:16px!important;}
  .login-card{padding:28px!important;}
  .login-logo{width:116px!important;}
}

/* === DANCOLD LISTA DE EVENTOS + POLIMENTO MOBILE (2026-06) === */

.event-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.event-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  transition:border-color .2s ease;
}
.event-item:hover{border-color:rgba(224,66,63,.35);}
.event-item-resolved{opacity:.6;}
.event-item-crit{
  border-color:rgba(224,66,63,.45);
  background:rgba(224,66,63,.07);
}
.event-item-warn{
  border-color:rgba(255,184,69,.40);
  background:rgba(255,184,69,.06);
}
.event-empty{padding:18px 6px;}

.event-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:7px;
}
.event-dot-ok{background:#45df93;box-shadow:0 0 0 4px rgba(69,223,147,.16);}
.event-dot-crit{background:#e0423f;box-shadow:0 0 0 4px rgba(224,66,63,.18);}
.event-dot-warn{background:#ffb845;box-shadow:0 0 0 4px rgba(255,184,69,.16);}
.event-dot-info{background:#168de2;box-shadow:0 0 0 4px rgba(22,141,226,.16);}

.event-main{flex:1;min-width:0;}
.event-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.event-kind{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(22,141,226,.16)!important;
  color:#7cc4f8!important;
  border:0!important;
  box-shadow:none!important;
}
.event-kind-ok{background:rgba(69,223,147,.14)!important;color:#45df93!important;}
.event-kind-crit{background:rgba(224,66,63,.18)!important;color:#ff7c79!important;}
.event-kind-warn{background:rgba(255,184,69,.16)!important;color:#ffc566!important;}
.event-kind-info{background:rgba(22,141,226,.16)!important;color:#7cc4f8!important;}
.event-time{
  margin-left:auto;
  color:#a9c7e8;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.event-msg{
  margin-top:7px;
  color:#f3f8ff;
  font-size:13.5px;
  line-height:1.5;
  word-break:break-word;
}
.event-sensor{
  margin-top:5px;
  color:#a9c7e8;
  font-size:12px;
  font-weight:700;
}

/* blocos que envolvem listas respiram menos */
.block-flush{padding:18px!important;}
.block-flush h2{margin-bottom:12px;}

/* mobile: lista de eventos e página geral mais limpas */
@media (max-width:760px){
  .page-head{margin-bottom:14px;}
  .page-head h1{font-size:1.45rem!important;}
  .page-head .subtitle{font-size:12px;}

  .block-flush{padding:12px!important;border-radius:18px!important;}

  .event-list{gap:8px;}
  .event-item{padding:12px;border-radius:14px;gap:10px;}
  .event-dot{margin-top:6px;}
  .event-kind{font-size:10px;padding:3px 8px;}
  .event-time{font-size:11px;width:100%;margin-left:0;order:3;}
  .event-msg{font-size:13px;}
  .event-sensor{font-size:11px;}

  /* cards do dashboard em colunas confortáveis */
  .cards{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;}
  .cards .card{padding:14px!important;border-radius:16px!important;}
  .card-value{font-size:26px!important;}
  .card-value.small{font-size:16px!important;}
  .card-label{font-size:10px!important;}
  .card-foot{font-size:10px!important;}

  /* cartão de sensor mais enxuto */
  .sensor-card{padding:14px!important;border-radius:16px!important;}
  .sensor-temp-value{font-size:38px!important;}

  /* botão Atualizar do dashboard ocupa menos espaço */
  .page-head .btn{padding:9px 14px!important;font-size:12px!important;border-radius:12px!important;}

  .footer{font-size:10px!important;padding:12px!important;}
}
/* === FIM DANCOLD LISTA DE EVENTOS === */

/* === DANCOLD GRÁFICOS DE TEMPERATURA (2026-07) === */

.chart-section h2{margin-bottom:14px;}

.chart-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:16px;
  margin-bottom:12px;
}
.chart-card:last-child{margin-bottom:0;}

.chart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.chart-title{
  color:#f3f8ff;
  font-weight:800;
  font-size:15px;
  letter-spacing:-.01em;
}
.chart-loc{color:#a9c7e8;font-weight:600;font-size:13px;}

.chart-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.chart-ranges{display:flex;gap:6px;}

/* Seletor de sensor do gráfico */
select.chart-select{
  background:#0b2238!important;
  color:#e9f3ff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:10px!important;
  padding:7px 10px!important;
  font-size:12px!important;
  font-weight:700!important;
  outline:none;
  max-width:260px;
}
select.chart-select option{background:#081a33;color:#fff;}

/* Sobrescreve as regras globais de botões/links vermelhos do tema */
a.chart-range, button.chart-range{
  display:inline-block;
  background:rgba(255,255,255,.06)!important;
  color:#dcebfa!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:10px!important;
  padding:7px 12px!important;
  font-size:12px!important;
  font-weight:800!important;
  box-shadow:none!important;
  margin:0!important;
  min-height:0!important;
  width:auto!important;
  cursor:pointer;
  text-decoration:none!important;
  line-height:1!important;
}
a.chart-range:hover, button.chart-range:hover{
  text-decoration:none!important;
  border-color:rgba(224,66,63,.5)!important;
  color:#fff!important;
}
a.chart-range.active{
  background:linear-gradient(180deg,#e0423f,#c93431)!important;
  color:#fff!important;
  border-color:transparent!important;
}

.chart-form{display:flex;align-items:center;gap:6px;margin:0!important;padding:0!important;}

.chart-stats{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:10px;
  font-size:12px;
  color:#a9c7e8;
}
.chart-stat b{font-weight:900;margin-right:4px;}
.cs-min{color:#45df93;}
.cs-max{color:#ff7c79;}
.cs-avg{color:#78c8ff;}

.chart-legend{
  margin-top:8px;
  font-size:11px;
  line-height:1.5;
}

/* SVG mobile-first: no desktop limita a largura para as fontes não inflarem */
.chart-section svg{max-width:700px;margin:0 auto;}

/* === RELATÓRIOS PDF === */
.report-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}
.report-field span{
  display:block;
  color:#a9c7e8;
  font-size:12px;
  font-weight:700;
  margin-bottom:6px;
}
.report-input{
  width:100%;
  background:#0b2238!important;
  color:#e9f3ff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:10px!important;
  padding:10px 12px!important;
  font-size:13px!important;
  font-weight:700!important;
  outline:none;
  box-sizing:border-box;
  color-scheme:dark; /* calendário nativo escuro */
}
button.report-submit{
  width:auto!important;
  padding:12px 22px!important;
  border-radius:12px!important;
}
.report-hint{margin-top:10px;font-size:12px;}

@media (max-width:760px){
  .report-grid{grid-template-columns:1fr 1fr;}
  .report-grid .report-field:first-child{grid-column:1 / -1;}
  button.report-submit{width:100%!important;}
}

.chart-wrap{
  position:relative;
  height:280px;
  width:100%;
}

.chart-hint{
  margin-top:8px;
  font-size:11px;
}

@media (max-width:760px){
  .chart-card{padding:12px;border-radius:14px;}
  .chart-title{font-size:14px;}
  a.chart-range, button.chart-range{padding:6px 10px!important;font-size:11px!important;}
  select.chart-select{max-width:100%;flex:1;}
  .chart-form{width:100%;}
  .chart-head h2{font-size:13px!important;}
  .chart-stats{gap:10px;font-size:11px;}
  .chart-legend{font-size:10px;}
}
/* === FIM DANCOLD GRÁFICOS === */

/* === DANCOLD MOBILE COMPACTO (2026-07) ===
   O uso principal é no celular via app: menos rolagem, mais informação
   por tela, sem perder legibilidade. */
@media (max-width:760px){
  .container{padding:10px!important;}
  .page-head{margin-bottom:10px!important;}
  .page-head h1{font-size:1.25rem!important;}

  /* Resumo: 3 cartões lado a lado, bem compactos */
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px!important;}
  .cards .card{padding:10px 12px!important;border-radius:14px!important;min-width:0!important;overflow:hidden!important;}
  .card-foot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .card-value{font-size:20px!important;margin-top:2px!important;}
  .card-value.small{font-size:13px!important;}
  .card-label{font-size:9px!important;letter-spacing:.3px!important;}
  .card-foot{font-size:9px!important;margin-top:2px!important;}

  /* Cartão do sensor mais enxuto */
  .block{padding:12px!important;margin-bottom:12px!important;border-radius:16px!important;}
  .block h2{font-size:12px!important;margin-bottom:10px!important;}
  .sensor-card{padding:12px!important;border-radius:14px!important;min-width:0!important;}
  .sensor-card-head{margin-bottom:8px!important;}
  .sensor-temp{margin:2px 0 10px!important;}
  .sensor-temp-value{font-size:34px!important;}
  .sensor-temp-unit{font-size:15px!important;}
  .sensor-mini{gap:6px!important;margin-bottom:8px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .sensor-mini .k{font-size:9px!important;}
  .sensor-mini .v{font-size:12px!important;word-break:break-word;}

  /* Nada pode forçar a página a ficar mais larga que a tela */
  .topbar{overflow-x:clip!important;}
  html,body{max-width:100vw;overflow-x:hidden;}
  .sensor-power{padding:8px 0!important;font-size:11px!important;}
  .sensor-foot{margin-top:4px!important;padding-top:6px!important;font-size:10px!important;}

  /* Listas do painel: itens mais densos e no máximo 5 visíveis */
  .event-item{padding:10px!important;gap:8px!important;border-radius:12px!important;}
  .event-msg{font-size:12px!important;margin-top:5px!important;}
  .event-sensor{font-size:10px!important;}
  .event-kind{font-size:9px!important;padding:2px 8px!important;}
  .event-time{font-size:10px!important;}
  #dash-bottom .event-list li:nth-child(n+6){display:none;}

  .footer{font-size:9px!important;padding:10px!important;}
}
/* === FIM DANCOLD MOBILE COMPACTO === */