:root {
  --navy: #0b1d2d;
  --navy-2: #10283d;
  --navy-3: #173650;
  --blue: #0b70ea;
  --blue-2: #147df5;
  --blue-soft: #eaf3ff;
  --green: #35bf70;
  --green-soft: #e8f8ef;
  --red: #ef4a45;
  --red-soft: #ffeded;
  --orange: #ff961a;
  --ink: #0d2040;
  --ink-2: #29405f;
  --muted: #7283a0;
  --line: #dce6f0;
  --line-2: #e9eff5;
  --bg: #f5f9fd;
  --card: #ffffff;
  --shadow: 0 14px 40px rgba(21, 50, 78, 0.07);
  --sidebar-w: 252px;
}

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display:none !important; }

/* ---------------------------------------------------------
   Logo
--------------------------------------------------------- */
.matis-logo {
  position: relative;
  display:inline-flex;
  align-items:flex-start;
  color:#fff;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
}
.logo-word { font-size:34px; }
.matis-logo-large .logo-word { font-size:64px; }
.logo-signal {
  position:relative;
  width:30px;
  height:25px;
  margin-left:2px;
  margin-top:-8px;
}
.logo-signal i {
  position:absolute;
  right:0;
  border:3px solid #1597ff;
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(-45deg);
}
.logo-signal i:nth-child(1) { width:28px; height:28px; top:0; right:0; }
.logo-signal i:nth-child(2) { width:20px; height:20px; top:7px; right:4px; }
.logo-signal i:nth-child(3) {
  width:7px; height:7px; top:18px; right:10px;
  background:#1597ff; border:0; border-radius:50%;
}
.matis-logo-large .logo-signal {
  transform:scale(1.55);
  transform-origin:left top;
  margin-left:4px;
}

/* ---------------------------------------------------------
   Login
--------------------------------------------------------- */
.login-view {
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 48% 18%, rgba(241,181,112,.20), transparent 24%),
    linear-gradient(180deg, #7c92a9 0%, #415b73 31%, #1a344c 58%, #0c1d2d 100%);
}
.login-scenery { position:absolute; inset:0; overflow:hidden; }
.sun-glow {
  position:absolute;
  width:520px; height:260px; border-radius:50%;
  top:10%; left:50%; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(255,218,169,.26), transparent 67%);
  filter:blur(12px);
}
.mountains {
  position:absolute; left:-5%; right:-5%;
  clip-path:polygon(0 100%, 0 58%, 7% 48%, 13% 56%, 20% 30%, 27% 52%, 34% 38%, 41% 58%, 51% 35%, 60% 57%, 68% 29%, 76% 55%, 84% 40%, 92% 56%, 100% 48%, 100% 100%);
}
.mountains-back {
  height:48%; bottom:22%;
  background:linear-gradient(180deg, rgba(66,88,109,.72), rgba(24,46,65,.9));
}
.mountains-front {
  height:42%; bottom:8%;
  transform:scaleX(1.05);
  background:linear-gradient(180deg, rgba(24,48,68,.82), rgba(9,27,41,.98));
  filter:drop-shadow(0 -12px 20px rgba(0,0,0,.15));
}
.lake-glow {
  position:absolute; left:0; right:0; bottom:0; height:32%;
  background:
    linear-gradient(180deg, rgba(67,99,125,.62), rgba(9,28,42,.97)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px);
  border-top:1px solid rgba(255,255,255,.13);
}
.login-view::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,17,28,.42), transparent 30%, transparent 70%, rgba(5,17,28,.42));
  pointer-events:none;
}
.login-brand {
  position:absolute;
  z-index:2;
  top:13%;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
}
.login-tagline {
  color:#fff;
  font-size:13px;
  line-height:1.55;
  letter-spacing:.42em;
  margin-top:14px;
  opacity:.9;
}
.login-card {
  position:relative;
  z-index:3;
  width:min(420px, calc(100vw - 32px));
  margin-top:160px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.75);
  border-radius:10px;
  padding:30px 30px 28px;
  box-shadow:0 22px 68px rgba(2,16,30,.32);
}
.login-heading { text-align:center; margin-bottom:24px; }
.login-heading h1 { margin:0 0 5px; font-size:23px; letter-spacing:-.02em; }
.login-heading p { margin:0; color:#536a89; font-size:14px; }
.field { display:block; margin-top:17px; }
.field > span { display:block; font-size:12px; font-weight:700; margin-bottom:8px; }
.input-wrap {
  height:42px; display:flex; align-items:center;
  border:1px solid #cbd8e6; border-radius:6px;
  background:#fff; transition:.18s;
}
.input-wrap:focus-within {
  border-color:#5da2f3;
  box-shadow:0 0 0 3px rgba(11,112,234,.08);
}
.input-icon { width:42px; text-align:center; color:#56708f; }
.input-wrap input {
  flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
  padding:0 12px 0 0; color:var(--ink);
}
.login-row {
  display:flex; justify-content:space-between; align-items:center;
  margin:17px 0 20px; font-size:12px;
}
.remember-row { display:flex; align-items:center; gap:8px; color:var(--ink-2); }
.remember-row input { width:16px; height:16px; accent-color:var(--blue); }
.link-button {
  border:0; background:transparent; padding:0; color:#006ae8;
}
.primary-button {
  border:0; border-radius:6px; color:#fff; font-weight:750;
  background:linear-gradient(180deg, #1681f7, #0868dc);
  box-shadow:0 5px 12px rgba(7,104,220,.18);
}
.login-button {
  width:100%; height:46px; display:flex; align-items:center; justify-content:center;
  gap:38px;
}
.login-button:disabled { opacity:.62; cursor:wait; }
.form-error { color:var(--red); font-size:12px; text-align:center; min-height:16px; margin-top:8px; }
.new-account {
  border-top:1px solid var(--line-2);
  margin-top:15px; padding-top:17px; text-align:center; font-size:12px; color:var(--ink-2);
}
.new-account .link-button { margin-left:5px; font-weight:700; }
.login-footer {
  position:absolute; bottom:36px; z-index:3;
  color:#fff; display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.06em; opacity:.85;
}
.login-footer small {
  position:absolute; top:34px; left:50%; transform:translateX(-50%);
  white-space:nowrap; letter-spacing:.11em; opacity:.72;
}
.login-footer b { font-size:8px; }

/* ---------------------------------------------------------
   App shell
--------------------------------------------------------- */
.app { min-height:100vh; }
.sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  color:#fff; z-index:30; overflow:hidden;
  background:linear-gradient(180deg, #0b1d2d 0%, #102a40 62%, #0d2133 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.03);
}
.sidebar-inner { position:relative; z-index:4; padding:20px 12px; }
.sidebar-brand { padding:4px 60px 30px 48px; }
.sidebar-brand .logo-word { font-size:34px; }
.sidebar-tagline {
  font-size:8px; line-height:1.6; letter-spacing:.32em;
  margin-top:9px; color:#d9e3ec; opacity:.85;
}
.nav { display:grid; gap:4px; }
.nav-item {
  position:relative; width:100%; height:48px; border:0; border-radius:8px;
  padding:0 18px; display:flex; align-items:center; gap:16px;
  background:transparent; color:#eff5fb; text-align:left; font-size:14px;
  transition:.16s;
}
.nav-item:hover { background:rgba(255,255,255,.055); }
.nav-item.active {
  background:linear-gradient(90deg, #1d5d9e 0%, #185591 100%);
  box-shadow:inset 0 0 0 1px rgba(54,133,211,.25);
}
.nav-icon {
  width:26px; color:#dcebf9; font-size:23px; font-weight:400; text-align:center;
}
.nav-badge {
  margin-left:auto; min-width:21px; height:21px; border-radius:999px;
  display:grid; place-items:center; background:var(--red); font-size:11px; font-weight:800;
}
.nav-separator { height:1px; margin:10px 10px; background:rgba(255,255,255,.13); }
.sidebar-landscape {
  position:absolute; z-index:1; left:0; right:0; bottom:0; height:38%; opacity:.75;
}
.side-mountain {
  position:absolute; left:-8%; right:-8%; bottom:16%;
  clip-path:polygon(0 100%,0 70%,15% 54%,28% 72%,42% 30%,58% 69%,72% 45%,88% 71%,100% 54%,100% 100%);
}
.side-mountain-back { height:62%; background:#24465f; opacity:.55; }
.side-mountain-front { height:48%; background:#122d42; }
.side-lake {
  position:absolute; bottom:0; left:0; right:0; height:22%;
  background:linear-gradient(#16354c,#0a1d2d);
  border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-footer {
  position:absolute; z-index:5; bottom:20px; left:28px; display:grid; gap:4px;
  color:#fff; font-size:13px;
}
.sidebar-footer span { font-size:11px; opacity:.65; }
.sidebar-footer small { margin-top:8px; opacity:.48; }
.workspace { margin-left:var(--sidebar-w); min-height:100vh; }
.topbar {
  height:56px; border-bottom:1px solid var(--line);
  background:rgba(248,251,254,.93); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; padding:0 28px;
}
.topbar-spacer { flex:1; }
.topbar-actions { display:flex; align-items:center; gap:12px; font-size:13px; }
.notification-button {
  position:relative; border:0; background:transparent; width:34px; height:34px;
  font-size:21px; color:var(--ink);
}
.notification-badge {
  position:absolute; top:-1px; right:-2px; min-width:19px; height:19px;
  border-radius:999px; display:grid; place-items:center;
  background:var(--red); color:#fff; font-size:10px; font-weight:800;
}
.top-divider { width:1px; height:28px; background:var(--line); margin:0 4px; }
.avatar {
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:#7185a4; color:#fff; font-size:12px; font-weight:800;
}
.user-mini { display:grid; }
.user-mini strong { font-size:13px; font-weight:650; }
.chevron { font-size:17px; }
.menu-button {
  display:none; width:38px; height:38px; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink); font-size:18px;
}
.main { padding:18px 28px 42px; max-width:1440px; margin:0 auto; }
.page-heading {
  min-height:68px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
}
.page-heading h1 {
  margin:0; font-size:33px; line-height:1; letter-spacing:-.035em; color:#0b1d3a;
}
.page-heading p { margin:5px 0 0; color:#61728f; font-size:14px; }
#page-actions { display:flex; gap:10px; align-items:center; }

/* ---------------------------------------------------------
   Controls
--------------------------------------------------------- */
.action-button {
  border:0; background:linear-gradient(180deg,#147ff5,#076bdc); color:#fff;
  border-radius:7px; height:44px; padding:0 24px; font-weight:750;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 6px 16px rgba(11,112,234,.16);
}
.action-button .plus { font-size:24px; line-height:1; font-weight:300; }
.secondary-button {
  height:42px; padding:0 17px; border:1px solid var(--line);
  border-radius:7px; background:#fff; color:var(--ink); font-weight:650;
}
.toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:20px;
}
.toolbar-left { display:flex; gap:12px; flex:1; }
.search-box {
  height:42px; min-width:260px; max-width:470px; flex:1;
  display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:7px; background:#fff; padding:0 13px; color:#5d7394;
}
.search-box input { flex:1; border:0; outline:0; min-width:0; color:var(--ink); }
.status-select {
  height:42px; min-width:180px; border:1px solid var(--line);
  border-radius:7px; padding:0 12px; background:#fff; color:var(--ink);
}
.view-toggle { display:flex; gap:8px; }
.view-button {
  height:42px; padding:0 16px; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink-2); font-weight:650;
}
.view-button.active { color:var(--blue); border-color:#76aff2; background:#f7fbff; }

/* ---------------------------------------------------------
   Dashboard
--------------------------------------------------------- */
.stats-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px;
}
.stat-card {
  min-height:82px; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:14px; display:flex; align-items:center; gap:13px;
  box-shadow:0 4px 18px rgba(21,50,78,.025);
}
.stat-icon {
  width:50px; height:50px; border-radius:12px; display:grid; place-items:center;
  background:#e8f2ff; color:#086cde; font-size:24px;
}
.stat-icon.green { background:var(--green-soft); color:var(--green); }
.stat-icon.red { background:var(--red-soft); color:var(--red); }
.stat-number { font-size:24px; font-weight:800; line-height:1; }
.stat-label { margin-top:4px; font-size:12px; color:var(--ink-2); }
.panel {
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 6px 24px rgba(21,50,78,.035);
}
.panel-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
}
.panel-title { font-size:15px; font-weight:800; }
.panel-link { border:0; background:transparent; color:#006fe8; font-size:12px; }
.dashboard-gateway-panel { margin-bottom:14px; }
.dashboard-gateway-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  padding:0 15px 15px;
}
.gateway-mini {
  border:1px solid var(--line); border-radius:8px; padding:12px 14px;
  background:#fff; cursor:pointer; transition:.16s;
}
.gateway-mini:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(20,45,73,.07); }
.gateway-mini-top { display:flex; align-items:center; gap:10px; }
.gateway-mini-icon {
  width:42px; height:42px; border-radius:8px; background:#edf4fb; color:#46627f;
  display:grid; place-items:center; font-size:24px;
}
.gateway-mini strong { font-size:13px; }
.gateway-mini-meta { margin:10px 0 0 51px; display:grid; gap:5px; color:#526986; font-size:11px; }
.online-line { color:var(--green); }
.offline-line { color:var(--red); }
.dashboard-row {
  display:grid; grid-template-columns:1.15fr .85fr; gap:14px; margin-bottom:14px;
}
.sensor-status-body {
  min-height:205px; display:flex; align-items:center; justify-content:space-around; gap:22px;
  padding:8px 22px 20px;
}
.donut {
  width:140px; height:140px; border-radius:50%; position:relative;
  display:grid; place-items:center;
}
.donut::after {
  content:""; position:absolute; width:92px; height:92px; border-radius:50%; background:#fff;
}
.donut-center { position:relative; z-index:1; text-align:center; }
.donut-center strong { display:block; font-size:27px; }
.donut-center span { font-size:11px; color:var(--ink-2); }
.legend { display:grid; gap:16px; min-width:150px; }
.legend-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:12px; }
.legend-dot { width:10px; height:10px; border-radius:50%; }
.legend-dot.green { background:var(--green); }
.legend-dot.red { background:var(--red); }
.legend-row strong { font-size:12px; }
.alert-empty {
  min-height:205px; display:grid; place-items:center; text-align:center; color:var(--muted); padding:25px;
}
.alert-empty-icon {
  width:48px; height:48px; display:grid; place-items:center; margin:0 auto 10px;
  background:var(--green-soft); color:var(--green); border-radius:50%; font-size:23px;
}
.table-wrap { overflow:auto; padding:0 15px 12px; }
.data-table { width:100%; border-collapse:collapse; min-width:650px; }
.data-table th {
  padding:9px 8px; color:#50647f; font-size:10px; font-weight:650;
  text-align:left; border-bottom:1px solid var(--line);
}
.data-table td {
  padding:9px 8px; font-size:11px; color:var(--ink-2); border-bottom:1px solid var(--line-2);
}
.data-table tr:last-child td { border-bottom:0; }
.data-table strong { color:var(--ink); }
.measure-icon { color:#0b72e8; margin-right:8px; }

/* ---------------------------------------------------------
   Gateways
--------------------------------------------------------- */
.gateway-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
.gateway-card {
  background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 5px 20px rgba(21,50,78,.035);
}
.gateway-visual {
  position:relative; height:138px; overflow:hidden;
  background:#b5cbe0;
}
.gateway-visual::before,
.gateway-visual::after { content:""; position:absolute; }
.gateway-visual.farm {
  background:
    linear-gradient(180deg, rgba(255,183,91,.25), transparent 45%),
    linear-gradient(180deg, #89b2cd 0 37%, #8ea16d 37% 58%, #5b7847 58% 100%);
}
.gateway-visual.farm::before {
  width:120px; height:66px; left:28%; bottom:18px; background:#77553d;
  clip-path:polygon(0 35%,50% 0,100% 35%,100% 100%,0 100%);
  box-shadow:0 6px 10px rgba(0,0,0,.15);
}
.gateway-visual.farm::after {
  left:0; right:0; bottom:7px; height:10px;
  background:repeating-linear-gradient(90deg, transparent 0 34px, rgba(65,53,39,.65) 34px 38px),
             linear-gradient(rgba(65,53,39,.65),rgba(65,53,39,.65));
  background-size:auto,100% 2px; background-position:0 0,0 3px; background-repeat:repeat,no-repeat;
}
.gateway-visual.workshop {
  background:
    linear-gradient(180deg,#596a76 0 18%,#7a6f62 18% 100%);
}
.gateway-visual.workshop::before {
  inset:18px 8% 10px;
  background:
    repeating-linear-gradient(90deg,#4d3b2e 0 8px,transparent 8px 22px),
    linear-gradient(#aa814e,#6b5036);
  border:8px solid #323a42;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}
.gateway-visual.workshop::after {
  width:74px; height:72px; right:12%; bottom:16px; background:#505a62;
  box-shadow:-92px 10px 0 #2e3942;
}
.gateway-visual.lake {
  background:
    linear-gradient(180deg,#53708d 0 42%,#30495f 42% 46%,#34566c 46% 100%);
}
.gateway-visual.lake::before {
  width:150px; height:74px; right:7%; bottom:35px; background:#263d4e;
  clip-path:polygon(0 30%,50% 0,100% 30%,100% 100%,0 100%);
  box-shadow:0 7px 12px rgba(0,0,0,.25);
}
.gateway-visual.lake::after {
  left:0; right:0; bottom:14px; height:2px; background:rgba(255,255,255,.25);
  box-shadow:0 8px 0 rgba(255,255,255,.12), 0 16px 0 rgba(255,255,255,.09);
}
.status-badge {
  position:absolute; top:13px; right:15px; z-index:3;
  min-width:92px; height:31px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  color:#fff; font-size:12px; font-weight:750;
}
.status-badge.online { background:var(--green); }
.status-badge.offline { background:var(--red); }
.status-badge i { width:8px; height:8px; border-radius:50%; background:#fff; }
.gateway-card-body { padding:14px 14px 12px; }
.gateway-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.gateway-title-row h3 { margin:0; font-size:17px; }
.gateway-uid { margin-top:2px; color:#627596; font-size:12px; }
.card-tools { display:flex; gap:13px; color:#254f7a; font-size:20px; }
.gateway-details { margin:14px 0; display:grid; grid-template-columns:28px 112px 1fr; gap:8px 5px; align-items:center; }
.gateway-details span { font-size:12px; }
.detail-icon { color:#44617f; text-align:center; }
.detail-label { color:#627596; }
.detail-value { color:#13294a; }
.sensor-summary {
  border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  background:#f8fbfe; display:grid; grid-template-columns:42px 1fr 20px; align-items:center; gap:8px;
}
.sensor-summary-icon {
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-soft); color:var(--green); font-size:20px;
}
.sensor-summary-text { font-size:11px; }
.sensor-summary-text strong { display:block; margin-top:2px; color:var(--ink); font-size:12px; }
.progress { height:8px; border-radius:999px; background:#d7e0ea; margin-top:6px; overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--green); border-radius:999px; }
.open-gateway {
  width:100%; height:42px; margin-top:11px; border:0; border-radius:6px;
  background:linear-gradient(180deg,#147ff5,#086add); color:#fff; font-weight:750;
}
.gateway-bottom-grid {
  display:grid; grid-template-columns:1.05fr .95fr; gap:18px; margin-top:18px;
}
.add-gateway-card {
  min-height:220px; border:1px dashed #bad2ea; border-radius:8px;
  display:grid; place-items:center; text-align:center; background:rgba(255,255,255,.45); padding:24px;
}
.add-circle {
  width:44px; height:44px; border-radius:50%; background:#0b72ea; color:#fff;
  display:grid; place-items:center; margin:0 auto 8px; font-size:28px; font-weight:300;
}
.add-gateway-card h3 { margin:0 0 5px; font-size:17px; }
.add-gateway-card p { margin:0 auto 14px; color:#657a99; font-size:12px; max-width:420px; line-height:1.6; }
.help-card {
  min-height:220px; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:18px 22px; display:grid; grid-template-columns:50px 1fr; gap:14px;
}
.help-icon {
  width:44px; height:44px; border-radius:50%; background:#7187a7; color:#fff; display:grid; place-items:center; font-size:22px;
}
.help-card h3 { margin:0; font-size:14px; }
.help-card p { margin:2px 0 8px; color:#697c99; font-size:12px; }
.steps { display:grid; gap:8px; margin-bottom:10px; }
.step { display:grid; grid-template-columns:22px 1fr; gap:8px; font-size:11px; color:#5d7393; align-items:center; }
.step b {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#d9eaff; color:#0870e5; font-size:11px;
}

/* ---------------------------------------------------------
   Sensors and details
--------------------------------------------------------- */
.sensor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sensor-card {
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px;
  box-shadow:0 5px 20px rgba(21,50,78,.035); cursor:pointer; transition:.16s;
}
.sensor-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(21,50,78,.08); }
.sensor-card-head { display:flex; justify-content:space-between; gap:10px; }
.sensor-card h3 { margin:0; font-size:15px; }
.sensor-card-sub { color:#687c99; font-size:11px; margin-top:3px; }
.sensor-online { color:var(--green); font-size:11px; font-weight:750; }
.sensor-offline { color:var(--red); font-size:11px; font-weight:750; }
.sensor-main-value { margin:22px 0 16px; font-size:34px; font-weight:800; letter-spacing:-.04em; }
.sensor-main-value small { font-size:14px; color:#6f819d; margin-left:3px; font-weight:650; }
.sensor-secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sensor-secondary > div { background:#f7fafd; border:1px solid var(--line-2); border-radius:7px; padding:9px; }
.sensor-secondary span { display:block; color:#7385a0; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.sensor-secondary strong { display:block; margin-top:3px; font-size:12px; }
.breadcrumb { display:flex; gap:7px; align-items:center; margin-bottom:14px; color:#71829e; font-size:12px; }
.breadcrumb button { border:0; background:transparent; color:#0871e8; padding:0; }
.sensor-hero-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.sensor-hero-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px; }
.sensor-hero-card span { color:#687c99; font-size:11px; }
.sensor-hero-card strong { display:block; margin-top:7px; font-size:30px; letter-spacing:-.04em; }
.empty-state {
  min-height:220px; border:1px dashed #c7d7e7; border-radius:8px; background:rgba(255,255,255,.6);
  display:grid; place-items:center; text-align:center; color:#71829e; padding:30px;
}
.empty-state strong { display:block; color:var(--ink); font-size:16px; margin-bottom:4px; }

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
.mobile-overlay { position:fixed; inset:0; z-index:25; background:rgba(6,20,31,.45); }
@media (max-width:1120px) {
  .gateway-grid, .sensor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-gateway-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  :root { --sidebar-w:240px; }
  .sidebar { transform:translateX(-105%); transition:.22s; }
  .sidebar.open { transform:translateX(0); }
  .workspace { margin-left:0; }
  .menu-button { display:block; }
  .main { padding:18px; }
  .topbar { padding:0 18px; }
  .dashboard-row, .gateway-bottom-grid { grid-template-columns:1fr; }
  .user-mini { display:none; }
}
@media (max-width:620px) {
  .gateway-grid, .sensor-grid, .dashboard-gateway-grid, .stats-grid, .sensor-hero-grid { grid-template-columns:1fr; }
  .toolbar, .toolbar-left { flex-direction:column; align-items:stretch; }
  .search-box, .status-select { max-width:none; width:100%; min-width:0; }
  .view-toggle { display:none; }
  .page-heading { min-height:80px; }
  .page-heading h1 { font-size:28px; }
  .login-brand { top:8%; }
  .matis-logo-large .logo-word { font-size:48px; }
  .login-card { margin-top:120px; padding:25px 22px; }
  .login-footer { display:none; }
}


/* ---------------------------------------------------------
   Live device management
--------------------------------------------------------- */
.action-button:disabled,
.danger-button:disabled,
.secondary-button:disabled {
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
.danger-button {
  height:44px;
  padding:0 20px;
  border:1px solid #e4514c;
  border-radius:7px;
  background:linear-gradient(180deg,#f45b55,#e84640);
  color:#fff;
  font-weight:750;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 6px 16px rgba(232,70,64,.14);
}
.gateway-live-strip {
  margin-bottom:16px;
  min-height:76px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
}
.gateway-live-strip.is-online { border-color:#cfeada; background:#fbfefc; }
.gateway-live-strip.is-offline { border-color:#f3d2d0; background:#fffafa; }
.gateway-live-icon {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:900;
}
.gateway-live-strip.is-online .gateway-live-icon { background:var(--green-soft); color:var(--green); }
.gateway-live-strip.is-offline .gateway-live-icon { background:var(--red-soft); color:var(--red); }
.gateway-live-strip strong { display:block; font-size:13px; }
.gateway-live-strip span { display:block; margin-top:3px; color:#6b7e99; font-size:11px; }
.gateway-live-meta { text-align:right; color:#7283a0; font-size:10px; line-height:1.45; }
.gateway-live-meta strong { color:var(--ink); font-size:11px; }
.gateway-empty-sensors { grid-column:1/-1; }
.empty-action { margin-top:16px; }
.sensor-main-label {
  margin-top:19px;
  color:#7385a0;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
.sensor-main-label + .sensor-main-value { margin-top:3px; }
.sensor-identity-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--line);
  margin-bottom:16px;
}
.sensor-identity-strip > div { background:#fff; padding:12px 14px; min-width:0; }
.sensor-identity-strip span { display:block; color:#7283a0; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.sensor-identity-strip strong { display:block; margin-top:4px; font-size:12px; overflow-wrap:anywhere; }
.identity-online { color:var(--green); }
.identity-offline { color:var(--red); }

.device-modal-backdrop {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(5,18,30,.58);
  backdrop-filter:blur(5px);
}
.device-modal {
  position:relative;
  width:min(520px,100%);
  max-height:min(760px,calc(100vh - 40px));
  overflow:auto;
  background:#fff;
  border:1px solid rgba(255,255,255,.7);
  border-radius:14px;
  padding:30px;
  box-shadow:0 28px 80px rgba(3,24,43,.28);
}
.modal-close {
  position:absolute;
  top:13px;
  right:13px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f2f6fa;
  color:#50647f;
  font-size:24px;
  line-height:1;
}
.modal-eyebrow {
  margin-top:12px;
  color:#0b70ea;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.device-modal h2 { margin:4px 0 8px; font-size:26px; letter-spacing:-.035em; }
.modal-lead { margin:0 0 18px; color:#61728f; font-size:13px; line-height:1.6; }
.modal-lead strong { color:var(--ink); }
.modal-signal {
  position:relative;
  width:62px;
  height:62px;
  border-radius:50%;
  background:#edf6ff;
  overflow:hidden;
}
.modal-signal span {
  position:absolute;
  left:50%;
  bottom:13px;
  transform:translateX(-50%);
  border:2px solid #0b70ea;
  border-left-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
}
.modal-signal span:nth-child(1) { width:43px; height:43px; }
.modal-signal span:nth-child(2) { width:30px; height:30px; }
.modal-signal span:nth-child(3) { width:18px; height:18px; }
.modal-signal i { position:absolute; left:50%; bottom:13px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#0b70ea; }
.pairing-steps { display:grid; gap:9px; margin:16px 0; }
.pairing-steps > div { display:grid; grid-template-columns:28px 1fr; align-items:center; gap:9px; color:#516681; font-size:12px; }
.pairing-steps b { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#e8f2ff; color:#0b70ea; font-size:11px; }
.pairing-wait {
  display:flex;
  align-items:center;
  gap:13px;
  margin:18px 0;
  padding:14px;
  border:1px solid #dce9f7;
  border-radius:9px;
  background:#f7fbff;
}
.pairing-wait strong { display:block; font-size:12px; }
.pairing-wait small { display:block; margin-top:3px; color:#71829d; font-size:10px; }
.pairing-spinner {
  width:28px;
  height:28px;
  border:3px solid #d6e9fb;
  border-top-color:#0b70ea;
  border-radius:50%;
  animation:matis-spin .8s linear infinite;
}
@keyframes matis-spin { to { transform:rotate(360deg); } }
.modal-note {
  border-radius:8px;
  padding:11px 12px;
  background:#f6f8fb;
  color:#697c98;
  font-size:11px;
  line-height:1.55;
}
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; flex-wrap:wrap; }
.modal-actions .primary-button,
.modal-actions .secondary-button,
.modal-actions .danger-button { min-width:120px; }
.modal-success,
.modal-warning,
.modal-timeout {
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:850;
}
.modal-success { background:var(--green-soft); color:var(--green); }
.modal-warning { background:var(--red-soft); color:var(--red); }
.modal-warning.soft { background:#fff4e5; color:#e28a17; }
.modal-timeout { background:#eef3f8; color:#6a7d98; font-size:22px; }
.paired-device-box {
  margin:12px 0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f9fbfd;
}
.paired-device-box span { display:block; color:#7283a0; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.paired-device-box strong { display:block; margin-top:4px; font-size:13px; overflow-wrap:anywhere; }

@media (max-width:700px) {
  .sensor-identity-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gateway-live-strip { grid-template-columns:42px 1fr; }
  .gateway-live-meta { grid-column:2; text-align:left; }
  .device-modal { padding:24px 20px; }
  .modal-actions { flex-direction:column; }
  .modal-actions .primary-button,
  .modal-actions .secondary-button,
  .modal-actions .danger-button { width:100%; }
}
.modal-actions .primary-button {
  height:42px;
  padding:0 18px;
}

/* ---------------------------------------------------------
   Sensor configuration + alerts
--------------------------------------------------------- */
.page-action-group { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.sensor-identity-five { grid-template-columns:repeat(5,minmax(0,1fr)); }
.config-needed {
  display:inline-flex;
  margin-top:12px;
  padding:5px 8px;
  border-radius:999px;
  background:#fff4e5;
  color:#b86e0e;
  font-size:10px;
  font-weight:800;
}
.config-banner {
  margin-bottom:16px;
  padding:16px 18px;
  border:1px solid #cfe2f7;
  border-radius:10px;
  background:#f7fbff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.config-banner strong { display:block; color:var(--ink); font-size:14px; }
.config-banner span { display:block; margin-top:4px; color:#647894; font-size:11px; line-height:1.5; }
.config-summary-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.config-summary-grid > div { padding:15px 16px; border-right:1px solid var(--line); min-width:0; }
.config-summary-grid > div:last-child { border-right:0; }
.config-summary-grid span { display:block; color:#7385a0; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.config-summary-grid strong { display:block; margin-top:5px; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }

.sensor-config-form { display:grid; gap:14px; margin-top:18px; }
.config-field { display:grid; gap:6px; }
.config-field > span { color:#415873; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.055em; }
.config-field input,
.config-field select {
  width:100%;
  min-height:42px;
  border:1px solid #d7e1ec;
  border-radius:7px;
  padding:0 11px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:12px;
  outline:none;
}
.config-field input:focus,
.config-field select:focus { border-color:#4b9df2; box-shadow:0 0 0 3px rgba(11,112,234,.08); }
.config-field small { color:#8493a8; font-size:9px; line-height:1.4; }
.config-subgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.alert-rule-fields { padding:14px; border:1px solid #e0e8f1; border-radius:9px; background:#fafcfe; }
.config-check {
  display:grid;
  grid-template-columns:20px 1fr;
  gap:9px;
  align-items:start;
  padding:13px 14px;
  border:1px solid #dce6f0;
  border-radius:8px;
  background:#f8fbfe;
}
.config-check input { margin-top:2px; width:16px; height:16px; }
.config-check strong { display:block; font-size:12px; }
.config-check small { display:block; margin-top:3px; color:#7385a0; font-size:10px; line-height:1.45; }

.alert-panel-live { margin-bottom:16px; border-color:#f1c3c0; background:#fffafa; }
.alert-list, .dashboard-alert-list { display:grid; gap:8px; padding:12px; }
.dashboard-alert-list { padding:10px 12px 14px; }
.alert-row {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:12px;
  border:1px solid #e2e9f1;
  border-radius:9px;
  background:#fff;
}
.alert-row.active { border-color:#f2c3c0; background:#fffafa; }
.alert-row.acknowledged { border-color:#f4dfb4; background:#fffdf8; }
.alert-row.cleared { opacity:.78; }
.alert-state-icon {
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--red-soft);
  color:var(--red);
  font-weight:900;
}
.alert-row.cleared .alert-state-icon { background:var(--green-soft); color:var(--green); }
.alert-row.acknowledged .alert-state-icon { background:#fff3dc; color:#c17b16; }
.alert-row-main { min-width:0; }
.alert-row-main strong { display:block; font-size:12px; }
.alert-row-main span { display:block; margin-top:3px; color:#566c86; font-size:11px; line-height:1.45; }
.alert-row-main small { display:block; margin-top:4px; color:#8a99ac; font-size:9px; }
.alert-row-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.alert-status-pill {
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.alert-status-pill.active { background:var(--red-soft); color:var(--red); }
.alert-status-pill.acknowledged { background:#fff3dc; color:#b87515; }
.alert-status-pill.cleared { background:var(--green-soft); color:var(--green); }
.alert-ack { height:34px; padding:0 10px; font-size:10px; }
.alert-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:900px) {
  .sensor-identity-five { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .config-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .config-summary-grid > div { border-bottom:1px solid var(--line); }
}
@media (max-width:620px) {
  .page-action-group { width:100%; }
  .page-action-group > button { flex:1; }
  .config-banner { align-items:stretch; flex-direction:column; }
  .config-subgrid, .config-summary-grid, .alert-stats-grid { grid-template-columns:1fr; }
  .alert-row { grid-template-columns:34px 1fr; }
  .alert-row-actions { grid-column:2; justify-content:flex-start; }
}


/* ---------------------------------------------------------
   Live WebSocket measurement state
--------------------------------------------------------- */
.live-status {
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #dbe5ef;
  background:#f7f9fc;
  color:#6d7f96;
  font-size:10px;
  font-weight:850;
  letter-spacing:.02em;
}
.live-status i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#95a3b5;
}
.live-status.online {
  border-color:#ccebd9;
  background:#f2fbf6;
  color:#16814b;
}
.live-status.online i {
  background:#1fa861;
  box-shadow:0 0 0 4px rgba(31,168,97,.10);
}
.live-status.connecting i {
  background:#d8992b;
  animation:live-blink 1s ease-in-out infinite;
}
.live-status.offline {
  border-color:#ead7d5;
  background:#fff8f7;
  color:#a75d58;
}
@keyframes live-blink { 50% { opacity:.35; } }
@keyframes live-pulse { 0% { transform:scale(1); } 40% { transform:scale(1.035); } 100% { transform:scale(1); } }
.live-pulse { animation:live-pulse .65s ease; }
.live-row { animation:live-row-in .6s ease; }
@keyframes live-row-in { from { background:#eef9f3; } to { background:transparent; } }

@media (max-width:620px) {
  .live-status { padding:0 8px; }
  .live-status span { display:none; }
}

/* =========================================================
   MATIS PREMIUM REFRESH — 2026-10-06
   Visual layer only. Existing DOM hooks and functionality remain intact.
========================================================= */
:root {
  --navy:#07141c;
  --navy-2:#0b1c27;
  --navy-3:#102a38;
  --blue:#1798ff;
  --blue-2:#43b3ff;
  --blue-soft:#eaf6ff;
  --green:#26b874;
  --green-soft:#e9f8f1;
  --red:#e6534f;
  --red-soft:#fff0ef;
  --orange:#d9953c;
  --ink:#0b1720;
  --ink-2:#35434e;
  --muted:#73808a;
  --line:#dfe5e6;
  --line-2:#edf0f0;
  --bg:#f4f5f2;
  --card:#ffffff;
  --shadow:0 18px 60px rgba(6,22,32,.065);
  --sidebar-w:272px;
}

body {
  background:
    radial-gradient(circle at 82% 7%, rgba(23,152,255,.055), transparent 23rem),
    var(--bg);
  color:var(--ink);
}

/* Brand */
.matis-logo { letter-spacing:-.055em; }
.logo-word { font-size:36px; }
.logo-signal i { border-color:#41b8ff; border-left-color:transparent; border-bottom-color:transparent; }
.logo-signal i:nth-child(3) { background:#41b8ff; }

/* Login */
.login-view {
  grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr);
  place-items:stretch;
  background:#07141c;
}
.login-view::before {
  content:"";
  position:absolute;
  inset:0 40% 0 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 22% 32%, rgba(23,152,255,.22), transparent 23rem),
    radial-gradient(circle at 60% 62%, rgba(53,184,128,.11), transparent 22rem);
  background-size:54px 54px,54px 54px,auto,auto;
  mask-image:linear-gradient(90deg,#000 0%,#000 72%,transparent 100%);
}
.login-view::after {
  background:linear-gradient(90deg, rgba(7,20,28,0) 45%, rgba(7,20,28,.85) 68%, #07141c 100%);
}
.login-scenery { inset:0 38% 0 0; opacity:.26; }
.sun-glow { width:620px; height:620px; top:8%; left:28%; background:radial-gradient(circle,rgba(65,184,255,.28),transparent 63%); filter:blur(34px); }
.mountains-back,.mountains-front,.lake-glow { opacity:.25; filter:saturate(.5); }
.login-brand {
  top:50%; left:8%; transform:translateY(-50%); text-align:left; max-width:620px;
}
.matis-logo-large .logo-word { font-size:82px; }
.login-tagline {
  margin-top:24px; font-size:12px; line-height:1.75; letter-spacing:.36em; color:#bdd0dc;
}
.login-brand::after {
  content:"Private cloud monitoring for connected gateways, sensors and alerts.";
  display:block; max-width:510px; margin-top:30px; color:#91a5b1; font-size:16px; line-height:1.65; letter-spacing:0;
}
.login-card {
  position:relative; align-self:center; justify-self:center; margin:0 42px 0 0;
  width:min(460px,calc(100vw - 36px)); border-radius:22px; padding:36px;
  border:1px solid rgba(255,255,255,.1); background:rgba(250,251,249,.985);
  box-shadow:0 34px 100px rgba(0,0,0,.34);
}
.login-heading { text-align:left; margin-bottom:28px; }
.login-eyebrow,.page-eyebrow { color:#168eea; font-size:10px; line-height:1; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.login-heading h1 { margin:8px 0 7px; font-size:34px; letter-spacing:-.045em; }
.login-heading p { color:#69747b; line-height:1.5; }
.field > span { color:#4c5a63; font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.input-wrap { height:50px; border-color:#d7dddd; border-radius:12px; background:#fff; }
.input-wrap:focus-within { border-color:#1798ff; box-shadow:0 0 0 4px rgba(23,152,255,.09); }
.input-icon { width:48px; color:#657985; }
.primary-button,.action-button,.open-gateway { background:#0c2533; box-shadow:none; }
.primary-button:hover,.action-button:hover,.open-gateway:hover { background:#12394d; }
.login-button { height:52px; border-radius:12px; justify-content:space-between; padding:0 20px; }
.login-footer { left:8%; right:auto; bottom:44px; color:#8398a4; }

/* App shell */
.sidebar {
  width:var(--sidebar-w);
  background:
    radial-gradient(circle at 12% 86%, rgba(23,152,255,.12), transparent 16rem),
    linear-gradient(180deg,#07141c 0%,#081923 58%,#07141c 100%);
  border-right:1px solid rgba(255,255,255,.055);
  box-shadow:none;
}
.sidebar-inner { padding:24px 18px; }
.sidebar-brand { padding:10px 22px 30px; }
.sidebar-brand .logo-word { font-size:36px; }
.sidebar-tagline { margin-top:12px; color:#7f96a3; font-size:8px; letter-spacing:.28em; }
.nav { gap:6px; }
.nav-item {
  height:48px; border-radius:12px; padding:0 16px; gap:14px;
  color:#a9bac4; font-size:13px; font-weight:650;
}
.nav-item:hover { background:rgba(255,255,255,.045); color:#edf5f8; }
.nav-item.active {
  background:rgba(255,255,255,.075); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.065);
}
.nav-item.active::before {
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 4px 4px 0; background:#35adff;
}
.nav-icon { width:24px; font-size:18px; color:#7f96a3; }
.nav-item.active .nav-icon { color:#48b8ff; }
.nav-badge { background:#e65e58; }
.nav-separator { margin:12px 8px; background:rgba(255,255,255,.07); }
.sidebar-landscape {
  height:34%; opacity:.14;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(transparent,#000 35%,#000);
}
.side-mountain,.side-lake { display:none; }
.sidebar-footer { left:34px; bottom:24px; color:#d9e6ec; }
.sidebar-footer span { color:#7f96a3; opacity:1; }
.sidebar-footer small { color:#607985; opacity:1; }
.workspace { margin-left:var(--sidebar-w); }
.topbar {
  height:72px; padding:0 34px; background:rgba(244,245,242,.84); border-color:#e1e6e5;
  backdrop-filter:blur(18px) saturate(140%);
}
.topbar-actions { gap:10px; }
.live-status {
  height:34px; padding:0 12px; border-radius:999px; border:1px solid #d8e1e1; background:rgba(255,255,255,.72);
  font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.live-status i { width:7px; height:7px; }
.notification-button { border:1px solid #dde3e2; border-radius:10px; background:#fff; font-size:15px; }
.avatar { border-radius:10px; background:#0c2533; }
.user-mini strong { font-size:12px; }
.main { padding:30px 38px 56px; max-width:1580px; }
.page-heading { min-height:92px; align-items:flex-start; }
.page-eyebrow { margin-bottom:10px; }
.page-heading h1 { font-size:42px; line-height:.95; letter-spacing:-.052em; color:#0a1720; }
.page-heading p { margin-top:10px; color:#748087; font-size:13px; }
#page-actions { padding-top:7px; }

/* Controls */
.action-button { height:46px; border-radius:12px; padding:0 18px; font-size:12px; }
.secondary-button,.danger-button { height:42px; border-radius:11px; background:#fff; }
.secondary-button { border-color:#dce3e2; }
.toolbar { margin:6px 0 22px; }
.search-box,.status-select,.view-button { height:44px; border-radius:11px; border-color:#dce3e2; }
.search-box,.status-select,.view-button { background:rgba(255,255,255,.82); }

/* Overview hero */
.overview-hero {
  position:relative; overflow:hidden; min-height:180px; margin:4px 0 18px; padding:30px 32px;
  border-radius:22px; display:flex; justify-content:space-between; align-items:center; gap:26px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 82% 25%, rgba(23,152,255,.17), transparent 17rem),
    #0a1b25;
  background-size:36px 36px,36px 36px,auto,auto;
  color:#fff;
  box-shadow:0 22px 55px rgba(5,20,30,.12);
}
.overview-hero::after { content:""; position:absolute; inset:auto -6% -72% 38%; height:180%; border:1px solid rgba(65,184,255,.2); border-radius:50%; transform:rotate(-7deg); }
.overview-hero-copy,.overview-hero-status { position:relative; z-index:1; }
.overview-kicker { display:flex; align-items:center; gap:8px; color:#8eb3c6; font-size:10px; font-weight:850; letter-spacing:.14em; }
.overview-live-dot { width:7px; height:7px; border-radius:50%; background:#37c882; box-shadow:0 0 0 5px rgba(55,200,130,.1); }
.overview-hero.attention .overview-live-dot { background:#e96761; box-shadow:0 0 0 5px rgba(233,103,97,.1); }
.overview-hero.watch .overview-live-dot { background:#dda451; box-shadow:0 0 0 5px rgba(221,164,81,.1); }
.overview-hero h2 { max-width:720px; margin:13px 0 8px; font-size:34px; line-height:1.06; letter-spacing:-.045em; }
.overview-hero p { margin:0; color:#a9bdc8; font-size:13px; line-height:1.6; }
.overview-hero-status { min-width:220px; display:flex; align-items:center; gap:14px; padding:17px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.045); backdrop-filter:blur(5px); }
.overview-state-mark { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(55,200,130,.12); color:#54d693; font-size:22px; font-weight:900; }
.overview-hero.attention .overview-state-mark { background:rgba(233,103,97,.12); color:#ff8d87; }
.overview-hero.watch .overview-state-mark { background:rgba(221,164,81,.12); color:#efbd72; }
.overview-hero-status span { display:block; color:#829ca9; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.overview-hero-status strong { display:block; margin-top:4px; font-size:26px; letter-spacing:-.04em; }

/* Cards + panels */
.stats-grid { gap:14px; margin-bottom:18px; }
.stat-card {
  min-height:108px; border:1px solid #e0e5e4; border-radius:18px; padding:18px 20px;
  background:rgba(255,255,255,.88); box-shadow:none;
}
.stat-icon { width:42px; height:42px; border-radius:12px; background:#eef5f7; color:#21566f; font-size:18px; }
.stat-icon.green { background:#eaf7f0; color:#27a96e; }
.stat-icon.red { background:#fff0ef; color:#d95c56; }
.stat-number { font-size:31px; letter-spacing:-.045em; }
.stat-label { margin-top:5px; color:#7a858a; font-size:11px; }
.panel { border:1px solid #e0e5e4; border-radius:18px; background:rgba(255,255,255,.9); box-shadow:none; overflow:hidden; }
.panel-head { padding:19px 21px 14px; }
.panel-title { font-size:13px; letter-spacing:-.01em; }
.panel-link { color:#167fc3; font-size:11px; font-weight:700; }
.dashboard-gateway-panel { margin-bottom:14px; }
.dashboard-gateway-grid { gap:12px; padding:0 18px 18px; }
.gateway-mini { border-color:#e4e8e7; border-radius:14px; padding:15px; background:#fbfcfb; }
.gateway-mini:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(8,24,34,.07); }
.gateway-mini-icon { width:44px; height:44px; border-radius:12px; background:#0d2533; color:#54bfff; }
.gateway-mini-meta { color:#748087; }
.online-line { color:#1fa86b; font-weight:700; }
.offline-line { color:#d65a55; font-weight:700; }
.dashboard-row { gap:14px; }
.sensor-status-body { min-height:220px; }
.donut { width:148px; height:148px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.02); }
.donut::after { width:102px; height:102px; background:#fff; }
.donut-center strong { font-size:30px; letter-spacing:-.04em; }
.legend { gap:14px; }
.alert-empty { min-height:220px; }
.alert-empty-icon { background:#edf8f3; color:#21a76a; }
.table-wrap { padding:0 19px 16px; }
.data-table th { padding:12px 10px; color:#899398; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.data-table td { padding:13px 10px; font-size:11px; color:#4f5d65; }
.data-table tbody tr { transition:.15s; }
.data-table tbody tr:hover { background:#fafbfa; }
.measure-icon { color:#1e91d4; }

/* Gateway grid */
.gateway-grid { gap:18px; }
.gateway-card { border-color:#e0e5e4; border-radius:19px; box-shadow:none; }
.gateway-card:hover { box-shadow:0 20px 46px rgba(7,24,34,.07); transform:translateY(-2px); transition:.2s; }
.gateway-visual {
  height:128px;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 75% 28%, rgba(61,183,255,.19), transparent 10rem),
    #0a1c27 !important;
  background-size:28px 28px,28px 28px,auto,auto !important;
}
.gateway-visual::before {
  content:"" !important; position:absolute !important; width:92px !important; height:92px !important;
  right:24px !important; left:auto !important; top:18px !important; bottom:auto !important;
  border:1px solid rgba(75,192,255,.32) !important; border-radius:50% !important; background:transparent !important; clip-path:none !important;
  box-shadow:inset 0 0 0 18px rgba(23,152,255,.025), inset 0 0 0 36px rgba(23,152,255,.02) !important;
}
.gateway-visual::after {
  content:"" !important; position:absolute !important; width:7px !important; height:7px !important; border-radius:50% !important;
  right:66px !important; left:auto !important; top:60px !important; bottom:auto !important; background:#49beff !important; box-shadow:0 0 0 8px rgba(73,190,255,.07),0 0 32px rgba(73,190,255,.55) !important;
}
.status-badge { top:14px; left:14px; right:auto; min-width:auto; height:29px; padding:0 11px; background:rgba(6,21,30,.72) !important; border:1px solid rgba(255,255,255,.12); font-size:10px; }
.status-badge.online i { background:#42d38d; }
.status-badge.offline i { background:#ff7a74; }
.gateway-card-body { padding:18px; }
.gateway-title-row h3 { font-size:18px; letter-spacing:-.025em; }
.gateway-uid { margin-top:4px; color:#879198; font-size:10px; letter-spacing:.03em; }
.card-tools { color:#839099; }
.gateway-details { margin:18px 0; grid-template-columns:26px 88px 1fr; gap:10px 6px; }
.gateway-details span { font-size:11px; }
.detail-icon { color:#2f91c9; }
.detail-label { color:#89949a; }
.detail-value { color:#273943; font-weight:650; }
.sensor-summary { border-color:#e5e9e8; border-radius:13px; background:#f7f9f8; }
.sensor-summary-icon { background:#e9f7f0; color:#24a86b; }
.progress { height:5px; background:#e3e8e7; }
.progress > i { background:#2eb779; }
.open-gateway { height:44px; margin-top:13px; border-radius:12px; }
.gateway-bottom-grid { gap:16px; }
.add-gateway-card,.help-card { border-radius:18px; border-color:#dfe5e4; background:rgba(255,255,255,.72); }
.add-circle { background:#0c2533; }
.help-icon { background:#0c2533; }

/* Sensors */
.sensor-grid { gap:16px; }
.sensor-card { position:relative; overflow:hidden; border-color:#e0e5e4; border-radius:18px; padding:18px; box-shadow:none; }
.sensor-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#2aa5e8; opacity:.8; }
.sensor-card:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(8,24,34,.07); }
.sensor-card h3 { font-size:16px; letter-spacing:-.02em; }
.sensor-card-sub { color:#8a949a; font-size:10px; }
.sensor-online,.identity-online { color:#21a86a; }
.sensor-offline,.identity-offline { color:#d95b55; }
.sensor-main-label { color:#899398; }
.sensor-main-value { margin:10px 0 18px; font-size:40px; letter-spacing:-.055em; }
.sensor-secondary { gap:9px; }
.sensor-secondary > div { background:#f7f9f8; border-color:#e9edec; border-radius:12px; padding:11px; }
.sensor-secondary span { color:#949da2; }
.sensor-identity-strip { border-radius:16px; border-color:#e0e5e4; background:#e5e9e8; margin-bottom:18px; }
.sensor-identity-strip > div { padding:15px 16px; }
.sensor-identity-strip span { color:#929ba0; }
.sensor-hero-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.sensor-hero-card { border-color:#e0e5e4; border-radius:17px; padding:20px; }
.sensor-hero-card span { color:#899398; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.sensor-hero-card strong { font-size:31px; }
.breadcrumb { margin-bottom:17px; color:#8b959a; }
.breadcrumb button { color:#2087c4; font-weight:700; }
.gateway-live-strip { border-radius:16px; }
.config-banner { border-radius:16px; }
.config-summary-grid > div { padding:18px; }

/* Alerts */
.alert-row { border-radius:14px; border-color:#e4e8e7; padding:14px; }
.alert-row.active { border-color:#f0d5d2; background:#fffafa; }
.alert-state-icon { background:#fff1ef; color:#d95d57; }
.alert-status-pill { border-radius:999px; }

/* Modal */
.device-modal-backdrop { background:rgba(3,14,20,.68); backdrop-filter:blur(9px); }
.device-modal { width:min(560px,100%); border-radius:22px; padding:34px; border:1px solid rgba(255,255,255,.62); box-shadow:0 34px 100px rgba(1,15,23,.34); }
.modal-close { top:15px; right:15px; background:#f0f3f2; }
.modal-eyebrow { color:#158bd0; }
.device-modal h2 { font-size:30px; }
.modal-lead { color:#6d797f; }
.pairing-steps b { background:#eaf6ff; color:#158bd0; }
.pairing-wait { border-color:#dce8ec; border-radius:14px; background:#f7fafb; }
.pairing-spinner { border-color:#d8e7ed; border-top-color:#1798ff; }
.modal-note { border-radius:12px; background:#f4f6f5; }
.paired-device-box { border-radius:12px; background:#f8faf9; }
.config-field input,.config-field select { min-height:46px; border-radius:11px; border-color:#dce3e2; }
.config-field input:focus,.config-field select:focus { border-color:#1798ff; box-shadow:0 0 0 4px rgba(23,152,255,.08); }
.config-check,.alert-rule-fields { border-radius:13px; }

/* Empty/loading */
.empty-state { border-radius:18px; border-color:#d7dfdf; background:rgba(255,255,255,.6); }

/* Responsive refresh */
@media (max-width:1120px) {
  :root { --sidebar-w:238px; }
  .sensor-hero-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .login-view { display:grid; grid-template-columns:1fr; place-items:center; }
  .login-view::before { inset:0; opacity:.8; }
  .login-view::after { background:rgba(7,20,28,.48); }
  .login-scenery { inset:0; }
  .login-brand { display:none; }
  .login-card { margin:0; }
  .sidebar { transform:translateX(-100%); transition:transform .22s ease; }
  .sidebar.open { transform:translateX(0); }
  .workspace { margin-left:0; }
  .menu-button { display:grid; place-items:center; }
  .main { padding:24px 22px 46px; }
  .topbar { padding:0 22px; }
  .page-heading h1 { font-size:36px; }
  .overview-hero { align-items:flex-start; flex-direction:column; }
  .overview-hero-status { min-width:0; width:100%; }
}
@media (max-width:700px) {
  .topbar { height:64px; padding:0 15px; }
  .user-mini,.chevron,.top-divider { display:none; }
  .main { padding:22px 15px 38px; }
  .page-heading { min-height:auto; margin-bottom:22px; flex-direction:column; }
  .page-heading h1 { font-size:34px; }
  #page-actions { width:100%; padding-top:0; }
  #page-actions > * { width:100%; }
  .overview-hero { min-height:0; padding:24px; border-radius:18px; }
  .overview-hero h2 { font-size:28px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-card { min-height:94px; padding:15px; }
  .dashboard-gateway-grid,.gateway-grid,.sensor-grid,.dashboard-row,.gateway-bottom-grid { grid-template-columns:1fr; }
  .sensor-hero-grid { grid-template-columns:1fr 1fr; }
  .toolbar { align-items:stretch; flex-direction:column; }
  .toolbar-left { flex-direction:column; }
  .search-box,.status-select { min-width:0; max-width:none; width:100%; }
  .view-toggle { display:none; }
  .device-modal { padding:28px 20px; border-radius:18px; }
}
@media (max-width:480px) {
  .stats-grid,.sensor-hero-grid { grid-template-columns:1fr; }
  .login-card { padding:28px 22px; border-radius:18px; }
  .login-heading h1 { font-size:30px; }
}

/* =========================================================
   MATIS LOGIN V2 — 2026-10-06
   Clean customer-portal treatment aligned with matis.cloud.
========================================================= */
.login-v2 {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(480px,.88fr);
  place-items:stretch;
  background:#07141c;
  overflow:hidden;
}
.login-v2::before,
.login-v2::after { display:none; }
.login-v2 .login-scenery,
.login-v2 > .login-brand,
.login-v2 > .login-footer { display:none; }

.login-brand-panel {
  position:relative;
  min-height:100vh;
  padding:46px clamp(46px,6vw,92px) 42px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 18% 23%, rgba(23,152,255,.16), transparent 23rem),
    radial-gradient(circle at 80% 78%, rgba(41,184,131,.09), transparent 24rem),
    linear-gradient(145deg,#07141c 0%,#081923 56%,#0a1f2b 100%);
}
.login-brand-panel::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(130deg,#000 0%,rgba(0,0,0,.8) 55%,transparent 93%);
}
.login-brand-top,
.login-brand-copy,
.login-brand-bottom { position:relative; z-index:3; }
.login-brand-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.login-brand-top .matis-logo-large .logo-word { font-size:48px; }
.login-brand-top .matis-logo-large .logo-signal {
  transform:scale(1.08);
  transform-origin:left top;
  margin-top:-3px;
}
.portal-pill {
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#8fa4af;
  background:rgba(255,255,255,.025);
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}
.login-brand-copy {
  width:min(650px,90%);
  margin-top:clamp(110px,16vh,180px);
}
.login-brand-kicker {
  margin-bottom:23px;
  color:#58bbf5;
  font-size:10px;
  font-weight:850;
  letter-spacing:.22em;
}
.login-brand-copy h1 {
  margin:0;
  max-width:640px;
  color:#f5f8f8;
  font-size:clamp(62px,7vw,112px);
  line-height:.87;
  letter-spacing:-.07em;
  font-weight:780;
}
.login-brand-copy h1 span { color:#63c6ff; }
.login-brand-copy p {
  max-width:570px;
  margin:34px 0 0;
  color:#a7bac4;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.68;
}
.login-capabilities {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  margin-top:36px;
  color:#cbd8de;
  font-size:12px;
  font-weight:650;
}
.login-capabilities > div {
  display:flex;
  align-items:center;
  gap:9px;
}
.login-capabilities i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#46bdfd;
  box-shadow:0 0 0 5px rgba(70,189,253,.08);
}
.login-brand-bottom {
  position:absolute;
  left:clamp(46px,6vw,92px);
  right:clamp(46px,6vw,92px);
  bottom:38px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#647d89;
  font-size:9px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.login-network {
  position:absolute;
  z-index:1;
  width:520px;
  height:520px;
  right:-160px;
  bottom:-130px;
  opacity:.72;
}
.network-ring,
.network-core,
.network-node { position:absolute; border-radius:50%; }
.network-ring {
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(93,196,255,.16);
}
.ring-1 { width:160px; height:160px; }
.ring-2 { width:300px; height:300px; border-color:rgba(93,196,255,.11); }
.ring-3 { width:470px; height:470px; border-color:rgba(93,196,255,.07); }
.network-core {
  width:18px;
  height:18px;
  top:calc(50% - 9px);
  left:calc(50% - 9px);
  background:#59c4ff;
  box-shadow:0 0 0 10px rgba(89,196,255,.08),0 0 45px rgba(89,196,255,.38);
}
.network-node {
  width:9px;
  height:9px;
  background:#9ee0ff;
  box-shadow:0 0 22px rgba(89,196,255,.55);
}
.node-1 { top:102px; left:250px; }
.node-2 { top:278px; left:92px; }
.node-3 { top:346px; left:367px; }

.login-form-panel {
  position:relative;
  z-index:4;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:52px clamp(36px,5vw,78px);
  background:#f6f6f2;
  box-shadow:-30px 0 80px rgba(0,0,0,.12);
}
.login-mobile-brand { display:none; }
.login-v2 .login-card {
  width:min(430px,100%);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  align-self:auto;
  justify-self:auto;
}
.login-v2 .login-heading {
  margin-bottom:40px;
  text-align:left;
}
.login-v2 .login-eyebrow {
  margin-bottom:13px;
  color:#238fcb;
  font-size:9px;
  font-weight:850;
  letter-spacing:.2em;
}
.login-v2 .login-heading h2 {
  margin:0 0 12px;
  color:#0b1720;
  font-size:44px;
  line-height:1;
  letter-spacing:-.055em;
  font-weight:760;
}
.login-v2 .login-heading p {
  margin:0;
  color:#78848a;
  font-size:15px;
  line-height:1.55;
}
.login-v2 .field { margin-top:22px; }
.login-v2 .field > span {
  margin-bottom:9px;
  color:#39484f;
  font-size:11px;
  font-weight:720;
  letter-spacing:.01em;
  text-transform:none;
}
.login-v2 .input-wrap {
  height:56px;
  border:1px solid #d9dedd;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 0 rgba(5,20,28,.02);
}
.login-v2 .input-wrap:hover { border-color:#c7d0d0; }
.login-v2 .input-wrap:focus-within {
  border-color:#47aeea;
  box-shadow:0 0 0 4px rgba(37,153,220,.09);
}
.login-v2 .input-wrap input {
  padding:0 17px;
  color:#0a1820;
  font-size:14px;
}
.login-v2 .input-wrap input::placeholder { color:#a9b1b3; }
.login-v2 .login-row {
  margin:18px 0 28px;
  font-size:12px;
}
.login-v2 .remember-row { color:#657176; }
.login-v2 .remember-row input {
  width:15px;
  height:15px;
  accent-color:#0d2734;
}
.login-v2 .link-button {
  color:#1688c8;
  font-weight:650;
}
.login-v2 .link-button:hover { color:#08699f; }
.login-v2 .login-button {
  width:100%;
  height:56px;
  padding:0 20px 0 22px;
  border-radius:12px;
  background:#0a1e29;
  box-shadow:0 12px 30px rgba(7,20,28,.14);
  color:#fff;
  font-size:13px;
  letter-spacing:.01em;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.login-v2 .login-button:hover {
  transform:translateY(-1px);
  background:#103444;
  box-shadow:0 16px 34px rgba(7,20,28,.18);
}
.login-v2 .login-arrow {
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  font-size:17px;
}
.login-v2 .form-error {
  min-height:17px;
  margin-top:12px;
  color:#cb4943;
  text-align:left;
}
.login-v2 .new-account { display:none; }
.login-panel-footer {
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  color:#99a2a4;
  font-size:10px;
}
.footer-dot {
  width:3px;
  height:3px;
  border-radius:50%;
  background:#aeb7b8;
}

@media (max-width:980px) {
  .login-v2 { grid-template-columns:1fr minmax(430px,.92fr); }
  .login-brand-panel { padding-left:42px; padding-right:42px; }
  .login-brand-copy { width:100%; margin-top:18vh; }
  .login-brand-copy h1 { font-size:68px; }
  .login-brand-copy p { max-width:430px; }
  .login-brand-bottom { left:42px; right:42px; }
  .login-capabilities { display:grid; gap:12px; }
}

@media (max-width:760px) {
  .login-v2 {
    display:block;
    min-height:100vh;
    background:#f6f6f2;
  }
  .login-brand-panel { display:none; }
  .login-form-panel {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:42px 24px 70px;
    box-shadow:none;
  }
  .login-mobile-brand {
    display:block;
    width:min(430px,100%);
    margin:0 auto 58px;
  }
  .login-mobile-brand .matis-logo { color:#0b1720; }
  .login-mobile-brand .logo-word { font-size:38px; }
  .login-v2 .login-card { width:min(430px,100%); margin:0 auto; }
  .login-v2 .login-heading h2 { font-size:40px; }
  .login-panel-footer { bottom:25px; }
}

@media (max-width:440px) {
  .login-form-panel { padding-left:20px; padding-right:20px; }
  .login-mobile-brand { margin-bottom:46px; }
  .login-v2 .login-heading { margin-bottom:34px; }
  .login-v2 .login-heading h2 { font-size:36px; }
  .login-v2 .login-row { gap:15px; align-items:flex-start; }
}

/* =========================================================
   MATIS V3 — 2026-10-07
   Dark product surface + single-action cleanup.
   No backend/API behavior changes.
========================================================= */
:root {
  --navy:#061018;
  --navy-2:#091923;
  --navy-3:#0d2532;
  --blue:#39b7ff;
  --blue-2:#6bc8ff;
  --blue-soft:rgba(57,183,255,.11);
  --green:#42d68e;
  --green-soft:rgba(66,214,142,.10);
  --red:#ff716c;
  --red-soft:rgba(255,113,108,.10);
  --orange:#f0ac52;
  --ink:#edf5f8;
  --ink-2:#b6c4cc;
  --muted:#7e929e;
  --line:rgba(255,255,255,.095);
  --line-2:rgba(255,255,255,.055);
  --bg:#0a1219;
  --card:#101c25;
  --card-2:#13232e;
  --shadow:0 20px 60px rgba(0,0,0,.22);
  --sidebar-w:272px;
}

html,body { background:var(--bg); }
body {
  color:var(--ink);
  background:
    radial-gradient(circle at 84% 5%, rgba(44,170,239,.075), transparent 25rem),
    radial-gradient(circle at 42% 88%, rgba(42,145,193,.04), transparent 28rem),
    var(--bg);
}

/* --- Login V3 ------------------------------------------------ */
.login-v3 {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:44px 22px 32px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(49,181,255,.14), transparent 28rem),
    radial-gradient(circle at 82% 76%, rgba(40,198,137,.055), transparent 25rem),
    linear-gradient(145deg,#050d13 0%,#07141c 48%,#091a24 100%);
}
.login-v3::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(circle at 50% 45%,#000 0%,rgba(0,0,0,.82) 42%,transparent 84%);
}
.login-v3::after {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(74,192,255,.06);
  box-shadow:0 0 100px rgba(44,169,235,.045);
  pointer-events:none;
}
.login-v3-orbit {
  position:absolute;
  width:760px;
  height:760px;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  opacity:.54;
  pointer-events:none;
}
.login-v3-orbit span,
.login-v3-orbit i { position:absolute; border-radius:50%; }
.login-v3-orbit span {
  left:50%; top:50%; transform:translate(-50%,-50%);
  border:1px solid rgba(72,190,255,.07);
}
.login-v3-orbit span:nth-child(1) { width:370px; height:370px; }
.login-v3-orbit span:nth-child(2) { width:560px; height:560px; }
.login-v3-orbit span:nth-child(3) { width:740px; height:740px; }
.login-v3-orbit i {
  width:7px; height:7px; left:calc(50% + 274px); top:calc(50% - 118px);
  background:#52c3ff; box-shadow:0 0 24px rgba(82,195,255,.68);
}
.login-v3-shell {
  position:relative;
  z-index:3;
  width:min(470px,100%);
  display:grid;
  justify-items:stretch;
}
.login-v3-brand { text-align:center; margin-bottom:28px; }
.login-v3-brand .matis-logo { color:#f3f8fa; }
.login-v3-brand .matis-logo-large .logo-word { font-size:58px; }
.login-v3-brand .matis-logo-large .logo-signal {
  transform:scale(1.28);
  transform-origin:left top;
  margin-left:5px;
  margin-top:-4px;
}
.login-v3-tagline {
  margin-top:12px;
  color:#718996;
  font-size:8px;
  font-weight:800;
  letter-spacing:.34em;
}
.login-v3 .login-card.login-v3-card {
  width:100%;
  margin:0;
  padding:34px 34px 30px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(17,31,41,.96),rgba(11,23,31,.97));
  box-shadow:0 34px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(18px);
}
.login-v3 .login-heading { margin:0 0 30px; text-align:left; }
.login-v3 .login-eyebrow {
  margin-bottom:12px;
  color:#43b8fa;
  font-size:9px;
  font-weight:850;
  letter-spacing:.2em;
}
.login-v3 .login-heading h2 {
  margin:0 0 11px;
  color:#f1f7f9;
  font-size:40px;
  line-height:1;
  letter-spacing:-.055em;
  font-weight:760;
}
.login-v3 .login-heading p {
  margin:0;
  color:#8da0aa;
  font-size:13px;
  line-height:1.62;
}
.login-v3 .field { margin-top:19px; }
.login-v3 .field > span {
  color:#aab9c1;
  font-size:10px;
  font-weight:750;
  letter-spacing:.02em;
  text-transform:none;
}
.login-v3 .input-wrap {
  height:54px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  background:#0b1820;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
.login-v3 .input-wrap:hover { border-color:rgba(97,196,248,.22); }
.login-v3 .input-wrap:focus-within {
  border-color:#42b8f9;
  box-shadow:0 0 0 4px rgba(66,184,249,.09);
}
.login-v3 .input-wrap input {
  padding:0 16px;
  color:#eff6f8;
  font-size:13px;
}
.login-v3 .input-wrap input::placeholder { color:#536771; }
.login-v3-remember {
  margin:19px 0 26px;
  color:#899ca6;
  font-size:11px;
}
.login-v3-remember input { width:15px; height:15px; accent-color:#39b7ff; }
.login-v3 .login-button {
  height:54px;
  border-radius:13px;
  padding:0 18px 0 20px;
  justify-content:space-between;
  background:linear-gradient(180deg,#1674aa,#105f8c);
  color:#fff;
  box-shadow:0 14px 28px rgba(9,89,132,.22);
}
.login-v3 .login-button:hover { background:linear-gradient(180deg,#1d82bc,#126b9e); }
.login-v3 .login-arrow {
  display:grid; width:30px; height:30px; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.10); font-size:16px;
}
.login-v3 .form-error { min-height:16px; margin-top:10px; text-align:left; color:#ff817d; }
.login-v3 .login-panel-footer {
  position:static;
  transform:none;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:22px;
  color:#617680;
  font-size:9px;
  font-weight:650;
  letter-spacing:.045em;
}
.login-v3 .footer-dot { background:#4b616c; }

/* --- App shell ------------------------------------------------ */
.app,.workspace { background:transparent; }
.sidebar {
  background:
    radial-gradient(circle at 20% 82%,rgba(47,178,243,.085),transparent 15rem),
    linear-gradient(180deg,#050e14 0%,#07151e 58%,#061119 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar-brand { padding-bottom:34px; }
.sidebar-tagline { color:#68808d; }
.nav-item { color:#a9bac3; }
.nav-item:hover { color:#edf5f8; background:rgba(255,255,255,.045); }
.nav-item.active {
  color:#fff;
  background:linear-gradient(90deg,rgba(42,159,221,.20),rgba(42,159,221,.08));
  box-shadow:inset 3px 0 0 #41b9fa;
}
.nav-icon { color:inherit; opacity:.9; }
.nav-separator { background:rgba(255,255,255,.07); }
.sidebar-footer { color:#dce8ed; }
.sidebar-footer span,.sidebar-footer small { color:#6e8490; }

.workspace {
  min-height:100vh;
  background:
    radial-gradient(circle at 85% 1%,rgba(52,184,247,.055),transparent 28rem),
    linear-gradient(180deg,#0a1219 0%,#0b141c 100%);
}
.topbar {
  height:64px;
  border-bottom:1px solid var(--line);
  background:rgba(8,17,24,.82);
  backdrop-filter:blur(18px);
}
.topbar-actions { gap:11px; color:var(--ink-2); }
.avatar { background:#173447; color:#9edcff; border:1px solid rgba(92,192,247,.18); }
.user-mini strong { color:#dce8ed; font-weight:650; }
.menu-button {
  border-color:var(--line);
  background:#101c25;
  color:#dce7ec;
}
.main { padding-top:30px; }
.page-heading { min-height:94px; }
.page-eyebrow { color:#45b8f7; }
.page-heading h1 { color:#f0f6f8; }
.page-heading p { color:#7f929d; }

.live-status {
  border-color:var(--line);
  background:#0f1c25;
  color:#8ea0aa;
}
.live-status.online { border-color:rgba(66,214,142,.22); background:rgba(66,214,142,.07); color:#55d99a; }
.live-status.connecting { border-color:rgba(240,172,82,.18); background:rgba(240,172,82,.06); color:#d9a461; }
.live-status.offline { border-color:rgba(255,113,108,.18); background:rgba(255,113,108,.06); color:#e37874; }

/* --- Controls ------------------------------------------------- */
.action-button,.primary-button,.open-gateway {
  background:linear-gradient(180deg,#1674aa,#105f8c);
  color:#fff;
  box-shadow:none;
}
.action-button:hover,.primary-button:hover,.open-gateway:hover { background:linear-gradient(180deg,#2084bd,#136c9e); }
.action-button:disabled,.primary-button:disabled { opacity:.42; }
.secondary-button {
  border-color:var(--line);
  background:#14232d;
  color:#dbe6eb;
}
.secondary-button:hover { border-color:rgba(73,183,242,.24); background:#182a36; }
.danger-button { border-color:rgba(255,113,108,.22); background:rgba(255,113,108,.07); color:#ff8b87; }
.danger-button:hover { background:rgba(255,113,108,.12); }
.search-box,.status-select,.view-button {
  border-color:var(--line);
  background:#101c25;
  color:#aebec7;
}
.search-box input { background:transparent; color:#e8f0f4; }
.search-box input::placeholder { color:#5f737e; }
.status-select { color:#b6c4cc; }
.status-select option { background:#101c25; color:#e7f0f4; }
.panel-link,.breadcrumb button { color:#4abaff; }

/* --- Core surfaces ------------------------------------------- */
.stat-card,.panel,.gateway-mini,.gateway-card,.sensor-card,.sensor-hero-card,
.sensor-identity-strip > div,.device-modal,.config-field input,.config-field select {
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
}
.stat-card,.panel,.gateway-card,.sensor-card,.sensor-hero-card { box-shadow:0 16px 44px rgba(0,0,0,.12); }
.stat-card { border-radius:16px; }
.stat-icon { background:rgba(57,183,255,.10); color:#55c2ff; }
.stat-icon.green { background:var(--green-soft); color:var(--green); }
.stat-icon.red { background:var(--red-soft); color:var(--red); }
.stat-number,.panel-title,.gateway-mini strong,.gateway-title-row h3,.sensor-card h3,.sensor-hero-card strong { color:#edf5f8; }
.stat-label,.gateway-mini-meta,.sensor-card-sub,.sensor-main-label,.sensor-secondary span,.sensor-hero-card span { color:#7f929e; }

.overview-hero {
  border:1px solid rgba(79,188,247,.11);
  background:
    radial-gradient(circle at 82% 25%,rgba(49,180,246,.12),transparent 22rem),
    linear-gradient(125deg,#0e202b,#0c1821 72%);
  box-shadow:0 24px 64px rgba(0,0,0,.18);
}
.overview-hero h2 { color:#f1f7f9; }
.overview-hero p { color:#91a4ae; }
.overview-hero-status { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.035); }
.overview-hero-status span { color:#8196a1; }

.gateway-mini { border-radius:14px; }
.gateway-mini:hover,.sensor-card:hover { box-shadow:0 18px 44px rgba(0,0,0,.22); border-color:rgba(76,186,244,.18); }
.gateway-mini-icon { background:#142a38; color:#62c6fa; }
.online-line { color:#55d99a; }
.offline-line { color:#ff8580; }

.sensor-status-body .donut::after { background:var(--card); }
.donut-center span { color:#8396a0; }
.legend-row { color:#aebec7; }
.alert-empty { color:#708791; }
.alert-empty-icon { background:var(--green-soft); color:var(--green); }

.data-table th { color:#748994; border-bottom-color:var(--line); }
.data-table td { color:#aabac3; border-bottom-color:var(--line-2); }
.data-table strong { color:#edf5f8; }
.data-table tbody tr:hover { background:rgba(255,255,255,.018); }
.measure-icon { color:#4bbcff; }

/* Gateway cards: replace scenic art with restrained device surfaces. */
.gateway-card { border-radius:18px; overflow:hidden; }
.gateway-visual,
.gateway-visual.farm,
.gateway-visual.workshop,
.gateway-visual.lake {
  height:126px;
  background:
    radial-gradient(circle at 78% 26%,rgba(75,194,255,.18),transparent 10rem),
    linear-gradient(135deg,#102633 0%,#0b1821 72%);
}
.gateway-visual::before,.gateway-visual::after,
.gateway-visual.farm::before,.gateway-visual.farm::after,
.gateway-visual.workshop::before,.gateway-visual.workshop::after,
.gateway-visual.lake::before,.gateway-visual.lake::after { display:none !important; }
.status-badge { background:rgba(5,13,18,.70) !important; border-color:rgba(255,255,255,.11); }
.gateway-card-body { background:var(--card); }
.gateway-uid,.detail-label { color:#718691; }
.detail-icon { color:#55bff5; }
.detail-value { color:#bdcbd2; }
.sensor-summary { border-color:var(--line); background:#0d1921; }
.sensor-summary-icon { background:var(--green-soft); color:var(--green); }
.sensor-summary-text { color:#7e929d; }
.sensor-summary-text strong { color:#dce8ed; }
.progress { background:rgba(255,255,255,.07); }
.open-gateway { border-radius:12px; }

/* Sensor + gateway detail */
.sensor-card { border-radius:18px; }
.sensor-card::before { background:#3bb8f7; }
.sensor-main-value { color:#f1f7f9; }
.sensor-secondary { border-top-color:var(--line); }
.sensor-secondary strong { color:#dce8ed; }
.sensor-online,.identity-online { color:#55d99a; }
.sensor-offline,.identity-offline { color:#ff8580; }
.config-needed { background:rgba(240,172,82,.09); color:#eeb367; border-color:rgba(240,172,82,.14); }
.empty-state {
  border-color:var(--line);
  background:rgba(16,28,37,.72);
  color:#758b96;
}
.empty-state strong { color:#e4eef2; }
.breadcrumb { color:#6f8590; }

.gateway-live-strip { border-color:var(--line); background:#0f1c25; }
.gateway-live-strip.is-online { border-color:rgba(66,214,142,.18); background:rgba(66,214,142,.055); }
.gateway-live-strip.is-offline { border-color:rgba(255,113,108,.18); background:rgba(255,113,108,.055); }
.gateway-live-strip span,.gateway-live-meta { color:#7e929d; }
.gateway-live-strip strong,.gateway-live-meta strong { color:#e3edf1; }
.gateway-live-icon { background:#14242e; }
.sensor-identity-strip { border-color:var(--line); background:var(--line); }
.sensor-identity-strip span { color:#718792; }
.sensor-identity-strip strong { color:#dfe9ee; }
.sensor-hero-card { border-radius:17px; }
.config-banner {
  border-color:rgba(240,172,82,.18);
  background:rgba(240,172,82,.065);
}
.config-banner strong { color:#f0d09d; }
.config-banner span { color:#9d8d73; }
.config-summary-grid { border-top-color:var(--line); }
.config-summary-grid > div { border-right-color:var(--line); }
.config-summary-grid span { color:#718792; }
.config-summary-grid strong { color:#dce8ed; }

/* Alerts */
.alert-row { border-color:var(--line); background:#0e1a23; }
.alert-row.active { border-color:rgba(255,113,108,.20); background:rgba(255,113,108,.055); }
.alert-row.acknowledged { border-color:rgba(240,172,82,.18); background:rgba(240,172,82,.05); }
.alert-row-main strong { color:#e7f0f4; }
.alert-row-main span { color:#9aadb7; }
.alert-row-main small { color:#697f8b; }
.alert-panel-live { border-color:rgba(255,113,108,.18); background:rgba(255,113,108,.035); }
.alert-status-pill.acknowledged { background:rgba(240,172,82,.10); color:#e8aa59; }

/* Configuration and device modals */
.device-modal-backdrop { background:rgba(1,7,11,.76); backdrop-filter:blur(10px); }
.device-modal {
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(180deg,#12212b,#0d1921);
  color:#e8f1f4;
}
.device-modal h2 { color:#f0f6f8; }
.modal-close { background:#172730; color:#b5c5cd; }
.modal-close:hover { background:#1c303c; }
.modal-lead { color:#8ca0aa; }
.modal-lead strong { color:#e6f0f4; }
.modal-note { border-color:var(--line); background:#0b171f; color:#8397a1; }
.modal-timeout { background:#15232d; color:#8da0aa; }
.config-field > span { color:#879ba6; }
.config-field input,.config-field select {
  border-color:var(--line);
  background:#0b171f;
  color:#e8f1f4;
}
.config-field input:focus,.config-field select:focus { border-color:#42b8f9; box-shadow:0 0 0 3px rgba(66,184,249,.08); }
.config-field small,.config-check small { color:#6f8490; }
.alert-rule-fields,.config-check {
  border-color:var(--line);
  background:#0c1820;
}
.config-check strong { color:#dce8ed; }

.toast { background:#12242f; color:#eef6f8; border:1px solid var(--line); box-shadow:0 16px 44px rgba(0,0,0,.3); }

@media (max-width:760px) {
  .login-v3 { padding:32px 18px 24px; }
  .login-v3-brand { margin-bottom:24px; }
  .login-v3-brand .matis-logo-large .logo-word { font-size:50px; }
  .login-v3 .login-card.login-v3-card { padding:30px 24px 26px; border-radius:20px; }
  .login-v3 .login-heading h2 { font-size:35px; }
  .login-v3 .login-panel-footer { margin-top:18px; }
}

@media (max-width:700px) {
  .workspace { background:#0a1219; }
  .page-heading h1 { font-size:34px; }
  .topbar { background:rgba(8,17,24,.94); }
  #page-actions .page-action-group { width:100%; }
  .sensor-identity-strip { background:transparent; gap:8px; }
  .sensor-identity-strip > div { border:1px solid var(--line); border-radius:12px; }
}

/* MATIS branding assets — 2026-10-07 */
.login-v3-brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:24px;
}
.login-v3-logo {
  display:block;
  width:min(252px,68vw);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 14px 34px rgba(35,170,244,.13));
}
.login-v3-tagline { margin-top:4px; }
.sidebar-brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-left:18px;
  padding-right:18px;
}
.sidebar-brand-logo {
  display:block;
  width:190px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(36,166,239,.10));
}
.sidebar-tagline { margin-top:8px; }
@media (max-width:760px) {
  .login-v3-logo { width:min(215px,66vw); }
  .login-v3-brand { margin-bottom:20px; }
}

/* MATIS visibility + customer-friendly LoRa quality — 2026-10-07 */
.sidebar-brand {
  align-items:center;
  padding:4px 0 34px;
}
.sidebar-brand-logo {
  width:224px;
  max-width:calc(100% - 4px);
  filter:drop-shadow(0 0 12px rgba(38,190,255,.20)) drop-shadow(0 10px 24px rgba(0,0,0,.20));
}
.sidebar-tagline {
  margin-top:4px;
  color:#8ca1ac;
  font-size:8px;
  letter-spacing:.30em;
  line-height:1.55;
  text-align:center;
}

/* Keep telemetry surfaces dark and readable in the dark application theme. */
.sensor-secondary > div {
  background:linear-gradient(180deg,#13232d 0%,#101d26 100%) !important;
  border-color:rgba(86,183,233,.16) !important;
}
.sensor-secondary span {
  color:#8da1ac !important;
}
.sensor-secondary strong {
  color:#eaf4f7 !important;
  font-size:14px;
}

.signal-quality {
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  font-weight:800;
  letter-spacing:-.01em;
}
.signal-quality::before {
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 12px currentColor;
}
.signal-excellent { color:#5ce1a5 !important; }
.signal-good { color:#5fc8ff !important; }
.signal-fair { color:#f0c56a !important; }
.signal-weak { color:#f29a61 !important; }
.signal-poor { color:#ff7671 !important; }
.signal-unknown { color:#8da1ac !important; }

.sensor-hero-card .signal-quality {
  font-size:clamp(24px,2vw,31px);
}
.sensor-hero-card .signal-quality::before {
  width:10px;
  height:10px;
  flex-basis:10px;
}

@media (max-width:760px) {
  .sidebar-brand-logo { width:210px; }
}


/* MATIS Phase 1 - read-only gateway and sensor diagnostics */
.health-panel { margin:16px 0; border-radius:18px; overflow:hidden; }
.health-panel .panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.health-received { font-size:11px; color:var(--muted); }
.health-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; padding:0 17px 17px; }
.health-field { min-width:0; padding:16px 14px; background:rgba(255,255,255,.025); border:1px solid var(--line); margin:-.5px; }
.health-field:nth-child(1) { border-radius:12px 0 0 0; }
.health-field:nth-child(3) { border-radius:0 12px 0 0; }
.health-field > span { display:block; color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:.055em; }
.health-field-value { display:block; margin-top:7px; font-size:14px; color:var(--ink); overflow-wrap:anywhere; line-height:1.35; }
.health-field-value.signal-excellent,.health-field-value.signal-good,.health-field-value.signal-fair,.health-field-value.signal-weak { font-weight:750; }
.health-events-title { margin:0 21px; padding-top:15px; border-top:1px solid var(--line); font-size:13px; font-weight:800; color:var(--ink); }
.health-event-list { padding:8px 21px 21px; display:grid; gap:10px; }
.health-event { display:flex; align-items:flex-start; gap:10px; }
.health-event-dot { flex:none; margin-top:5px; width:8px; height:8px; border-radius:100%; background:var(--green); }
.health-event-dot.warning { background:var(--orange); }
.health-event-dot.critical { background:var(--red); }
.health-event strong { display:block; color:var(--ink); font-size:12px; font-weight:650; }
.health-event small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.health-empty { color:var(--muted); font-size:12px; padding:4px 0; }
@media (max-width:950px) { .health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:570px) { .health-grid { grid-template-columns:1fr; } .health-field:first-child,.health-field:nth-child(3) { border-radius:0; } }