/* Gate254 frontend-path smoke marker (comment only, no styling change). */
/* Gate123 HF12: claim hint status pill + disabled button clarity (HF11 modal kept) */
/* [Gate141 CSS Trim B1] disable legacy modal+catalog styles (unused by HTML/JS scan) */
/* [Gate141 CSS Trim B4] disable unused blocks: grid2/grid3/input-small/tableWrap/dashSummary (HTML=0, JS=0) */
:root {
  --bg: #0b0c10;
  --card: #12141a;
  --text: #e7e9ee;
  --muted: #a7adbb;
  --line: #2a2f3a;
  --accent: #7aa2f7;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(18, 20, 26, 0.6);
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
}
.brand { font-weight: 700; letter-spacing: 0.2px; }
.hint { color: var(--muted); font-size: 12px; }
.hint.ok { color: rgba(122,162,247,0.95); }
.hint.err { color: #ff6b6b; }

/* Gate123 HF12: make claim hint look like a status pill */
#claimDeviceHint{ display:inline-block; padding:6px 10px; border-radius: 999px; border: 1px solid rgba(42,47,58,0.8); background: rgba(15,17,23,0.55); max-width: 560px; white-space: normal; }

.wrap {
  max-width: 1200px;
  margin: 18px auto;
  padding: 0 14px 40px;
  display: grid;
  gap: 14px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

h2 { margin: 0 0 10px; font-size: 18px; }
h3 { margin: 0 0 8px; font-size: 15px; }
h4 { margin: 0 0 8px; font-size: 14px; }

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}

/* [Gate141 CSS Trim B4 DISABLED BEGIN] .grid2 { */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* [Gate141 CSS Trim B4 DISABLED END] */

/* [Gate141 CSS Trim B4 DISABLED BEGIN] .grid3 { */
.grid3 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}
/* [Gate141 CSS Trim B4 DISABLED END] */

@media (max-width: 980px) {
/* [Gate141 CSS Trim B4 DISABLED BEGIN] .grid2, .grid3 { grid-template-columns: 1fr; } */
  .grid2, .grid3 { grid-template-columns: 1fr; }
/* [Gate141 CSS Trim B4 DISABLED END] */

}

.input, .select {
  width: 100%;
  min-width: 160px;
  background: #0f1117;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 10px;
  outline: none;
}
.input:focus, .select:focus { border-color: rgba(122,162,247,0.7); }

/* [Gate141 CSS Trim B4 DISABLED BEGIN] .input-small { min-width: 90px; max-width: 120px; } */
.input-small { min-width: 90px; max-width: 120px; }
/* [Gate141 CSS Trim B4 DISABLED END] */


.btn {
  background: var(--accent);
  color: #0b0c10;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 650;
}
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.70; cursor: not-allowed; filter: none; transform: none; }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.btn.tiny { padding: 6px 10px; border-radius: 12px; font-size: 12px; }
.topright .actions { display: flex; gap: 8px; align-items: center; }

.badge {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.label { color: var(--muted); font-size: 12px; }

.checkbox { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.status { margin-top: 8px; }

.hidden { display: none !important; }

/* [Gate141 CSS Trim B4 DISABLED BEGIN] .tableWrap { */
.tableWrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  max-height: 420px;
}
/* [Gate141 CSS Trim B4 DISABLED END] */

/* [Gate141 CSS Dedupe B2] unify .table definitions (remove duplicate Gate105 block) */
.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  margin-top: 10px;
  font-size: 13px;
}
.table th, .table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 8px;
  text-align: left;
  vertical-align: top;
}
.table th { color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; background: rgba(15,17,23,0.6); position: sticky; top: 0; }
.table tr:hover td { background: rgba(122,162,247,0.06); cursor: pointer; }

.right { text-align: right; }

.chart {
  border: 1px solid var(--line);
  border-radius: 12px;
  height: 320px;
  margin-top: 10px;
  padding: 8px;
  background: #0f1117;
}
.meta {
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0f1117;
  color: var(--muted);
  overflow: auto;
}

.box {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(42,47,58,0.9);
  border-radius: 12px;
  background: rgba(15,17,23,0.4);
}

.footer {
  padding: 20px 14px 30px;
  text-align: center;
  border-top: 1px solid var(--line);
}

/* ---------------------------- Gate42: Telemetry Points Catalog ---------------------------- */

/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-catalog {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-catalog table {
  width: 100%;
  border-collapse: collapse;
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-catalog th, .cl-catalog td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-catalog th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-catalog input[type="text"], .cl-catalog input[type="number"] {
  width: 100%;
  min-width: 90px;
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-catalog .cl-catalog-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-legend-group {
  margin-top: 10px;
  font-weight: 700;
  opacity: 0.9;
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-legend-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.cl-legend-disabled .cl-legend-swatch {
  filter: grayscale(1);
}
/* [Gate141 CSS Trim B1 DISABLED END] */


/* [Gate65:portal-css-contract] ensure sidebar layout */
.layout { display: flex; gap: 16px; }
.sidebar { width: 260px; flex: 0 0 260px; }
.main { flex: 1 1 auto; min-width: 0; }
.nav { display: flex; flex-direction: column; gap: 8px; }
.tab { max-width: 980px; }
.banner { margin: 10px 0; min-height: 18px; }
.input, .select { width: 100%; }
.row { display: flex; }

/* [Gate67:portal-css] BEGIN */
.topright { display: flex; align-items: center; gap: 10px; }

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  background: rgba(15,17,23,0.6);
}

.navbtn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}
.navbtn:hover { filter: brightness(1.05); }
.navbtn.active {
  border-color: rgba(122,162,247,0.7);
  box-shadow: 0 0 0 1px rgba(122,162,247,0.25) inset;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15,17,23,0.4);
}
.tbl th, .tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(42,47,58,0.6);
  vertical-align: top;
}
.tbl th {
  color: var(--muted);
  font-weight: 650;
  text-align: left;
  background: rgba(15,17,23,0.6);
}

/* [Gate165 Baseline Telemetry Step1] Latest tab visual polish only */
.telemetry-latest-shell {
  display: grid;
  gap: 12px;
}
.telemetry-latest-hero {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.telemetry-latest-head h2 {
  margin: 0 0 6px;
}
.telemetry-latest-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}
.telemetry-latest-control {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(42,47,58,0.75);
  border-radius: 12px;
  background: rgba(15,17,23,0.5);
}
.telemetry-latest-control label,
.telemetry-latest-inline label,
.telemetry-latest-section-label {
  font-weight: 650;
  color: var(--text);
}
.telemetry-latest-control select {
  width: 100%;
  min-width: 0;
}
.telemetry-latest-meta,
.telemetry-latest-health {
  padding-top: 10px;
  border-top: 1px solid rgba(42,47,58,0.6);
}
.telemetry-latest-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.telemetry-latest-inline--export {
  margin-top: 10px;
}
.telemetry-latest-inline label {
  min-width: 92px;
}
.telemetry-latest-export-status {
  margin-left: auto;
}
.telemetry-latest-empty {
  border-style: dashed;
  background: rgba(15,17,23,0.35);
}
.telemetry-latest-table {
  overflow: auto;
  border-radius: 14px;
}
#latestTable .tbl {
  margin-top: 0;
  background: rgba(18,20,26,0.94);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
#latestTable .tbl th,
#latestTable .tbl td {
  padding: 11px 10px;
}
#latestTable .tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(15,17,23,0.92);
}
#latestTable .tbl tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.018);
}
#latestTable .tbl tbody tr:hover td {
  background: rgba(122,162,247,0.08);
}
#latestTable .tbl td:nth-child(1),
#latestTable .tbl td:nth-child(2),
#latestTable .tbl td:nth-child(5),
#latestTable .tbl td:nth-child(6) {
  font-weight: 600;
}
#latestTable .tbl td:nth-child(6),
#latestTable .tbl td:nth-child(7),
#latestTable .tbl td:nth-child(8) {
  white-space: nowrap;
}
#latestTable .tbl td:nth-child(8) {
  color: var(--muted);
}
@media (max-width: 900px) {
  .telemetry-latest-controls {
    grid-template-columns: 1fr;
  }
  .telemetry-latest-inline label {
    min-width: 0;
    width: 100%;
  }
  .telemetry-latest-export-status {
    margin-left: 0;
    width: 100%;
  }
}

/* [Gate165 Baseline Telemetry Step2] Compact header + node health cleanup */
.telemetry-latest-hero {
  gap: 10px;
  padding: 14px 16px;
}
.telemetry-latest-head .muted {
  line-height: 1.35;
}
.telemetry-latest-controls {
  gap: 10px;
}
.telemetry-latest-control {
  gap: 6px;
  padding: 10px 12px;
}
.telemetry-latest-meta,
.telemetry-latest-health {
  padding-top: 8px;
}
.telemetry-latest-meta {
  display: grid;
  gap: 8px;
}
.telemetry-latest-inline--export {
  margin-top: 0;
}
.telemetry-latest-health-mount {
  margin-top: 6px;
}
#gate124NodeHealthBox {
  margin-top: 0 !important;
}
#gate124NodeHealth {
  margin-top: 0 !important;
  line-height: 1.4;
}
#gate124NodeHealthMeta {
  margin-top: 2px !important;
}
#latestTable .tbl th,
#latestTable .tbl td {
  padding: 10px 10px;
}
#latestTable .tbl td:nth-child(6) {
  font-size: 14px;
}
#latestTable .tbl td:nth-child(8) {
  color: rgba(167,173,187,0.88);
}
@media (max-width: 900px) {
  .telemetry-latest-hero {
    padding: 12px;
  }
  .telemetry-latest-control {
    padding: 10px;
  }
}

.spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(167,173,187,0.35);
  border-top-color: var(--accent);
  animation: clspin 0.8s linear infinite;
}
@keyframes clspin { to { transform: rotate(360deg); } }
/* [Gate67:portal-css] END */



/* [Gate88:portal-onboarding-ux] wizard + advanced collapses + disabled nav */
details.card summary { list-style: none; }
details.card > summary::-webkit-details-marker { display:none; }
details.card > summary { user-select: none; }
details.card[open] > summary { margin-bottom: 10px; }
.navbtn.disabled { opacity: 0.45; cursor: not-allowed; }
.navbtn.disabled:hover { filter: none; }
.wizard { margin-top: 10px; }
.wizard .stepbar { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.wizard .step { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
.wizard .step.on { color: var(--text); border-color: rgba(122,162,247,0.7); box-shadow: 0 0 0 1px rgba(122,162,247,0.15) inset; }
.wizard .step.done { color: rgba(122,162,247,0.95); border-color: rgba(122,162,247,0.55); }


/* [Gate136 Dashboard Cards v0] */
/* [Gate141 CSS Trim B4 DISABLED BEGIN] .dashSummary{ */
.dashSummary{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
/* [Gate141 CSS Trim B4 DISABLED END] */

.dashGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.dashCard{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  min-height: 92px;
}
.dashTitle{ color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0.01em; }
.dashValue{ font-size: 28px; font-weight: 800; margin-top: 6px; }
.dashUnit{ font-size: 13px; color: var(--muted); margin-left: 6px; font-weight: 650; }
.dashMeta{ margin-top: 8px; color: var(--muted); font-size: 12px; display:flex; gap:10px; flex-wrap:wrap; }
.dashMeta .tag{ font-size: 11px; padding: 2px 7px; }

/* [Gate167 Step2A Dashboard UX Polish] */
.dashLead{
  max-width: 72ch;
  color: rgba(215,220,230,0.78);
  line-height: 1.45;
}
.dashPanel{
  border-radius: 16px;
  padding: 14px 16px 16px;
  border-color: rgba(72,84,118,0.55);
  background:
    linear-gradient(180deg, rgba(19,22,30,0.96), rgba(14,17,24,0.92)),
    var(--card);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.dashToolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px 12px;
}
.dashCtlLabel{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.01em;
  color: rgba(215,220,230,0.72);
  white-space:nowrap;
}
.dashSelect{ min-height: 42px; }
.dashSelectDevice,
.dashSelectNode{
  flex: 1 1 320px;
  min-width: 260px;
  max-width: 520px !important;
}
.dashSelectAuto{ min-width: 110px; }
.dashAutoHint{
  min-width: 72px;
  font-size: 12px;
  color: rgba(215,220,230,0.72);
}
.dashToggle{
  display:inline-flex !important;
  align-items:center;
  gap:8px !important;
  margin-left:4px !important;
  padding: 0 2px;
}
.dashCustomizeBtn{
  border-color: rgba(122,162,247,0.34);
}
.dashStatus{
  margin-left:auto !important;
  min-width: 90px;
  text-align:right;
  white-space:nowrap;
}
.dashHintLine{
  margin-top:10px !important;
  padding-top:10px;
  border-top:1px solid rgba(72,84,118,0.28);
  line-height:1.45;
}
.dashGrid{
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 14px;
}
.dashCard{
  border-radius: 14px;
  padding: 15px 16px 14px;
  min-height: 132px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  cursor: pointer;
}
.dashCard:hover{
  transform: translateY(-1px);
  border-color: rgba(122,162,247,0.32);
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
  background: rgba(20,24,34,0.98);
}
.dashTitle{
  color: rgba(232,236,244,0.90);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0;
}
.dashValue{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:6px;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 12px;
}
.dashUnit{
  margin-left: 0;
  padding-bottom: 4px;
  font-size: 15px;
  color: rgba(215,220,230,0.74);
}
.dashMeta{
  margin-top: 14px;
  gap: 8px;
  align-items:center;
}
.dashMeta .tag{
  font-size:11px;
  padding: 3px 8px;
}
.dashMeta > .muted:last-child{
  width: 100%;
  color: rgba(215,220,230,0.76);
}
.dashStatusBar{
  padding: 12px 16px;
  border-radius: 16px;
}
@media (max-width: 980px){
  .dashStatus{
    margin-left:0 !important;
    text-align:left;
    min-width:0;
    width:100%;
  }
}
@media (max-width: 780px){
  .dashSelectDevice,
  .dashSelectNode{
    flex:1 1 100%;
    min-width:0;
    max-width:none !important;
  }
}


/* [Gate105:portal-alerts-pro-css] */
/* [Gate141 CSS Dedupe B2] duplicate .table block removed (unified above) */
.tag{ display:inline-block; padding:2px 8px; border-radius: 999px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); font-size: 12px; }
.tag.ok{ border-color: rgba(122,162,247,0.55); background: rgba(122,162,247,0.10); }
.tag.err{ border-color: rgba(255,107,107,0.55); background: rgba(255,107,107,0.10); }
.tag.warn{ border-color: rgba(245, 180, 80, 0.50); background: rgba(245, 180, 80, 0.12); }
.tag.muted{ opacity: 0.7; }

/* [Gate168 Dashboard Alert Visibility] */
/* [Gate168g Dashboard Operational Health Strip] */
.dashOperationalCard,
.dashAlertsCard{
  border-color: rgba(42,47,58,0.96);
  padding: 12px 14px;
}
.dashOperationalCard.is-degraded,
.dashAlertsCard.is-degraded{
  border-color: rgba(245, 180, 80, 0.34);
}
.dashOperationalMain{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dashOperationalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.dashOperationalLead{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-wrap:wrap;
}
.dashOperationalTitle{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.02em;
  color: var(--muted);
  text-transform:uppercase;
  white-space:nowrap;
}
.dashOperationalSub{
  font-size:13px;
  color: var(--text);
}
.dashOperationalPills{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  min-width:0;
}
.dashOperationalChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  cursor:pointer;
}
.dashOperationalChip.ok{ border-color: rgba(105,198,138,0.38); background: rgba(105,198,138,0.10); color:#c9f5d6; }
.dashOperationalChip.err{ border-color: rgba(255,107,107,0.38); background: rgba(255,107,107,0.12); color:#ffd6d6; }
.dashOperationalChip.warn{ border-color: rgba(245,180,80,0.38); background: rgba(245,180,80,0.12); color:#ffe3b3; }
.dashOperationalChip.muted,
.dashOperationalChip.is-empty{ cursor:default; opacity:0.72; }
.dashOperationalChipLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
.dashOperationalChipValue{
  font-size:12px;
  font-weight:700;
}
.dashOperationalMeta{
  font-size:12px;
  line-height:1.35;
}
.dashAlertsMain{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dashAlertsTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.dashAlertsLead{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-wrap:wrap;
}
.dashAlertsTitle{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.02em;
  color: var(--muted);
  text-transform:uppercase;
  white-space:nowrap;
}
.dashAlertsSub{
  font-size:13px;
  color: var(--text);
}
.dashAlertsActions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
}
.dashAlertsPills{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  min-width:0;
}
.dashAlertsPill.tag{
  font-size:11px;
  padding:3px 8px;
  font-weight:700;
}
.dashAlertsPill.is-active{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.dashAlertsMeta{
  font-size:12px;
  line-height:1.35;
}
.dashCard.has-alert-state{
  position:relative;
}
.dashCard.alert-state-alarm{
  border-color: rgba(255,107,107,0.32);
  box-shadow: inset 0 0 0 1px rgba(255,107,107,0.06), 0 10px 24px rgba(0,0,0,0.14);
}
.dashCard.alert-state-no_data{
  border-color: rgba(245,180,80,0.30);
  box-shadow: inset 0 0 0 1px rgba(245,180,80,0.05), 0 10px 24px rgba(0,0,0,0.14);
}
.dashCard.alert-state-unknown{
  border-color: rgba(160,170,190,0.26);
}
.dashCard.alert-state-ok{
  border-color: rgba(105,198,138,0.26);
}
.dashCard.alert-state-disabled{
  border-color: rgba(150,160,185,0.22);
}

.dashOperationalChip,
.dashCardAlertBadge,
.dashAlertsPill,
.dashCardAlertMetaBtn{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  outline:none;
}
.dashCardAlertBadge{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(160,170,190,0.24);
  background: rgba(160,170,190,0.08);
  color: rgba(232,236,244,0.92);
  font-size:11px;
  font-weight:800;
  letter-spacing:0.01em;
  white-space:nowrap;
  cursor:pointer;
}
.dashCardAlertBadge.state-alarm{
  border-color: rgba(255,107,107,0.38);
  background: rgba(255,107,107,0.12);
  color: #ffd6d6;
}
.dashCardAlertBadge.state-no_data{
  border-color: rgba(245,180,80,0.38);
  background: rgba(245,180,80,0.12);
  color: #ffe3b3;
}
.dashCardAlertBadge.state-unknown{
  border-color: rgba(160,170,190,0.30);
  background: rgba(160,170,190,0.10);
}
.dashCardAlertBadge.state-ok{
  border-color: rgba(105,198,138,0.38);
  background: rgba(105,198,138,0.12);
  color: #c9f5d6;
}
.dashCardAlertBadge.state-disabled{
  border-color: rgba(150,160,185,0.28);
  background: rgba(150,160,185,0.08);
  color: rgba(226,230,238,0.86);
}
.dashCardAlertInfo{
  margin-top:4px;
  min-width:0;
}
.dashCardAlertMetaBtn{
  border:0;
  background:transparent;
  color: var(--muted);
  font-size:11px;
  line-height:1.35;
  padding:0;
  text-align:left;
  width:100%;
  cursor:pointer;
  white-space:normal;
}
.dashCardAlertMetaBtn:hover{
  color: var(--text);
}
.dashCard.alert-state-alarm .dashCardAlertMetaBtn{ color: #f2c7c7; }
.dashCard.alert-state-no_data .dashCardAlertMetaBtn{ color: #e8d2a3; }
.dashCard.alert-state-unknown .dashCardAlertMetaBtn{ color: rgba(220,226,238,0.84); }
.dashOperationalChip:focus-visible,
.dashCardAlertBadge:focus-visible,
.dashCardAlertMetaBtn:focus-visible,
.dashAlertsPill:focus-visible{
  box-shadow: 0 0 0 2px rgba(122,162,247,0.32);
}
@media (max-width: 900px){
  .dashOperationalTop,
  .dashAlertsTop{ align-items:flex-start; }
  .dashAlertsActions{ margin-left:0; }
}
@media (max-width: 720px){
  .dashOperationalTop,
  .dashAlertsTop{ align-items:stretch; }
  .dashOperationalLead,
  .dashAlertsLead{ width:100%; }
  .dashOperationalPills,
  .dashAlertsPills{ width:100%; }
  .dashAlertsActions{ width:100%; justify-content:flex-start; }
}

.banner.ok{ border-color: rgba(122,162,247,0.55); }
.banner.err{ border-color: rgba(255,107,107,0.55); }

/* Gate131 Email Actions: lightweight modal for rule action editors (Email, etc.) */
/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.corelink-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
/* [Gate141 CSS Trim B1 DISABLED END] */

/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.corelink-modal{
  width: min(620px, 96vw);
  max-height: 88vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.50);
  padding: 14px;
}
/* [Gate141 CSS Trim B1 DISABLED END] */

/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.corelink-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
/* [Gate141 CSS Trim B1 DISABLED END] */

/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.corelink-modal-header h3{ margin: 0; }
/* [Gate141 CSS Trim B1 DISABLED END] */

/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.corelink-modal-close{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
/* [Gate141 CSS Trim B1 DISABLED END] */

/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.corelink-modal-close:hover{ filter: brightness(1.05); }
/* [Gate141 CSS Trim B1 DISABLED END] */

/* [Gate141 CSS Trim B1 DISABLED BEGIN] */
.corelink-modal-footer{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
/* [Gate141 CSS Trim B1 DISABLED END] */



/* [Gate136 Dashboard Cards v0 Fix3 StatusBar + AutoRefresh] */
.dashStatusBar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(42,47,58,0.9);
  background: rgba(20,23,28,0.72);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.dashStatusBar .dsItem{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width: 0;
}
.dashStatusBar .dsK{
  font-size:12px;
  color: rgba(215,220,230,0.66);
  letter-spacing: 0.02em;
  white-space:nowrap;
}
.dashStatusBar .dsV{
  font-size:15px;
  font-weight: 800;
  color: rgba(235,238,245,0.96);
  white-space:nowrap;
}
.dashStatusBar .dsPill{
  font-size:12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(90,110,160,0.55);
  color: rgba(225,232,245,0.9);
  background: rgba(22,28,40,0.55);
  white-space:nowrap;
}
.dashStatusBar .dsSep{
  width:1px;
  height:16px;
  background: rgba(80,90,120,0.35);
}
@media (max-width: 780px){
  .dashStatusBar{ gap:10px; }
  .dashStatusBar .dsSep{ display:none; }
  .dashStatusBar .dsItem{ gap:8px; }
}

/* [Gate139 Fix6e ToprightMarginAuto] Keep session cluster pinned right even if brand is moved/hidden by JS. */
.topright { margin-left: auto !important; }

/* [Gate139 Fix11a TopTabsIcons + NavCollapse] enterprise nav polish: top icon tabs + collapsible left rail (UI-only) */
.topnav{
  display:flex;
  align-items:center;
  gap:10px;
  align-self:center;
  min-width: 240px;
}
.iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(15,17,23,0.45);
  color: var(--text);
  cursor:pointer;
}
.iconbtn:hover{ filter: brightness(1.08); }
.iconbtn svg{ width:18px; height:18px; }

.topTabs{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 2px 6px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,17,23,0.22);
}
.tabIconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--text);
  cursor:pointer;
}
.tabIconBtn:hover{ filter: brightness(1.10); }
.tabIconBtn.active{
  border-color: rgba(122,162,247,0.75);
  background: rgba(122,162,247,0.10);
}
.tabIconBtn svg{ width:18px; height:18px; }

/* Left nav icons (non-invasive): add icon via ::before, collapse to rail via body.navCollapsed */
.navbtn{
  display:flex;
  align-items:center;
  gap:10px;
}
.navbtn::before{
  content:"";
  width:18px;
  height:18px;
  border-radius: 6px;
  background-color: rgba(230,235,255,0.92);
  opacity: 0.85;
  -webkit-mask: var(--nav-ico) no-repeat center/contain;
  mask: var(--nav-ico) no-repeat center/contain;
  flex: 0 0 auto;
}
#btn_devices{ --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='7' y='7' width='10' height='10' rx='2' fill='black'/><path d='M9 3v4M15 3v4M9 17v4M15 17v4M3 9h4M3 15h4M17 9h4M17 15h4' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>"); }
#btn_latest{ --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 14l4-4 4 4 4-8 4 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 20h16' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>"); }
#btn_dashboard{ --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='7' height='7' rx='1.5' fill='black'/><rect x='13' y='4' width='7' height='7' rx='1.5' fill='black'/><rect x='4' y='13' width='7' height='7' rx='1.5' fill='black'/><rect x='13' y='13' width='7' height='7' rx='1.5' fill='black'/></svg>"); }
#btn_alerts{ --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='M18 8a6 6 0 1 0-12 0c0 7-3 7-3 7h18s-3 0-3-7z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>"); }
#btn_auth{ --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V7a5 5 0 0 1 10 0v3' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/><rect x='6' y='10' width='12' height='10' rx='2' fill='black'/></svg>"); }
/* [Gate258] Sidebar icons for Telemetry Tools + Users & Access — mirrors top-tab SVGs (index.html lines 115 + 137) */
#btn_telemetry_tools{ --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14.7 6.3a5 5 0 0 0-6.4 6.4L3 18l3 3 5.3-5.3a5 5 0 0 0 6.4-6.4l-2.1 2.1-3.2-3.2 2.3-2.3z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>"); }
#btn_users_access{ --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><circle cx='9.5' cy='7' r='3' stroke='black' stroke-width='2' fill='none'/><path d='M20 8v6M17 11h6' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>"); }

.navCollapsed .sidebar{ width: 72px; flex: 0 0 72px; }
.navCollapsed .nav{ gap: 10px; }
.navCollapsed .navbtn{
  justify-content:center;
  padding: 10px 0;
  font-size: 0; /* hides text reliably */
}
.navCollapsed .navbtn::before{
  width:22px;
  height:22px;
  margin: 0;
  opacity: 0.92;
}



/* [Gate165 Baseline Telemetry Step3] Compact actions + denser table */
.telemetry-latest-hero {
  gap: 8px;
  padding: 12px 16px;
}
.telemetry-latest-head h2 {
  margin: 0 0 4px;
}
.telemetry-latest-head .muted {
  font-size: 13px;
}
.telemetry-latest-control {
  padding: 9px 12px;
}
.telemetry-latest-meta {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 10px;
}
.telemetry-latest-inline {
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(42,47,58,0.68);
  border-radius: 12px;
  background: rgba(15,17,23,0.42);
}
.telemetry-latest-inline label {
  min-width: auto;
  margin-right: 2px;
}
.telemetry-latest-inline .hint {
  flex: 1 1 220px;
  min-width: 160px;
}
.telemetry-latest-export-status {
  flex: 1 1 100%;
  margin-left: 0;
}
.telemetry-latest-health {
  padding-top: 6px;
}
.telemetry-latest-health-mount {
  margin-top: 4px;
}
#gate124NodeHealth {
  font-size: 13px;
  line-height: 1.35;
}
#gate124NodeHealthMeta {
  display: none;
}
#latestTable .tbl th,
#latestTable .tbl td {
  padding: 8px 10px;
}
#latestTable .tbl th {
  font-size: 12.5px;
}
#latestTable .tbl td {
  font-size: 13.5px;
}
#latestTable .tbl td:nth-child(6) {
  font-size: 14px;
  font-weight: 700;
}
#latestTable .tbl td:nth-child(7),
#latestTable .tbl td:nth-child(8) {
  font-size: 13px;
}
@media (max-width: 1100px) {
  .telemetry-latest-meta {
    grid-template-columns: 1fr;
  }
}


/* [Gate165 Baseline Telemetry Step5] paged latest preview + focused state */
.telemetry-latest-view-status {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  margin-top: 10px;
  border: 1px solid rgba(154, 170, 255, 0.16);
  background: rgba(154, 170, 255, 0.05);
}
.telemetry-latest-view-status.is-focused {
  grid-template-columns: 1fr;
}
.telemetry-latest-view-status .telemetry-latest-view-copy {
  min-width: 0;
}
.telemetry-latest-view-status .telemetry-latest-view-title {
  font-weight: 700;
  margin-bottom: 2px;
}
.telemetry-latest-view-status .telemetry-latest-view-sub {
  color: #aeb7cf;
  font-size: 12px;
  line-height: 1.35;
}
.telemetry-latest-view-status .telemetry-latest-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.telemetry-latest-view-status .telemetry-latest-view-actions .btn {
  min-height: 30px;
  padding: 5px 10px;
}
.telemetry-latest-view-status .telemetry-latest-view-page {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 170, 255, 0.14);
  background: rgba(255,255,255,0.03);
  color: #cdd6ef;
  font-size: 12px;
  white-space: nowrap;
}
.telemetry-latest-view-status .telemetry-latest-view-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 170, 255, 0.14);
  background: rgba(255,255,255,0.03);
  color: #d9e2ff;
  font-size: 12px;
  font-weight: 600;
}
.telemetry-latest-view-status .btn[disabled] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 960px) {
  .telemetry-latest-view-status {
    grid-template-columns: 1fr;
  }
  .telemetry-latest-view-status .telemetry-latest-view-actions {
    justify-content: flex-start;
  }
}

/* [Gate165 Baseline Telemetry Step6A] List/Chart toggle + chart shell */
.telemetry-latest-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.telemetry-latest-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.telemetry-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(154, 170, 255, 0.12);
  background: rgba(255,255,255,0.03);
}
.telemetry-view-toggle .btn {
  min-width: 72px;
  border-radius: 999px;
}
.telemetry-view-toggle .btn.is-active {
  border-color: rgba(154, 170, 255, 0.28);
  background: rgba(154, 170, 255, 0.16);
  color: #eef2ff;
  box-shadow: inset 0 0 0 1px rgba(154, 170, 255, 0.08);
}
.telemetry-latest-chart-shell {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(154, 170, 255, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.telemetry-chart-shell {
  display: grid;
  gap: 14px;
}
.telemetry-chart-shell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.telemetry-chart-shell-title {
  font-size: 18px;
  font-weight: 700;
  color: #f4f7ff;
}
.telemetry-chart-shell-sub {
  margin-top: 4px;
  font-size: 13px;
  color: #aab4d6;
}
.telemetry-chart-shell-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.telemetry-chart-shell-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 170, 255, 0.12);
  background: rgba(255,255,255,0.03);
  color: #d9e2ff;
  font-size: 12px;
  font-weight: 600;
}
.telemetry-chart-shell-chip .mono {
  color: #eef2ff;
}
.telemetry-chart-shell-presets {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.telemetry-chart-shell-presets .btn.is-active {
  border-color: rgba(154, 170, 255, 0.28);
  background: rgba(154, 170, 255, 0.16);
  color: #eef2ff;
}
.telemetry-chart-shell-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}
.telemetry-chart-shell-stat {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(154, 170, 255, 0.10);
  background: rgba(255,255,255,0.02);
}
.telemetry-chart-shell-stat-label {
  font-size: 12px;
  color: #9aa5c7;
}
.telemetry-chart-shell-stat-value {
  margin-top: 6px;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: #f4f7ff;
}
.telemetry-chart-shell-stat-value.is-placeholder {
  color: #7e89a8;
}
.telemetry-chart-shell-stage {
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid rgba(154, 170, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 72px),
    repeating-linear-gradient(to right, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 120px);
  position: relative;
  overflow: hidden;
}
.telemetry-chart-shell-stage::after {
  content: "";
  position: absolute;
  inset: auto 26px 48px 26px;
  height: 2px;
  background: linear-gradient(90deg, rgba(154,170,255,0.0), rgba(154,170,255,0.3), rgba(154,170,255,0.0));
}
.telemetry-chart-shell-line {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 40px;
  bottom: 26px;
  pointer-events: none;
  opacity: 0.75;
}
.telemetry-chart-shell-line svg {
  width: 100%;
  height: 100%;
}
.telemetry-chart-shell-stage-copy {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #8f9ab9;
}
.telemetry-chart-shell-note {
  font-size: 13px;
  color: #9aa5c7;
}
.telemetry-chart-shell-guided {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 260px;
  padding: 22px;
  border-radius: 18px;
  border: 1px dashed rgba(154, 170, 255, 0.14);
  background: rgba(255,255,255,0.02);
}
.telemetry-chart-shell-guided-title {
  font-size: 18px;
  font-weight: 700;
  color: #f4f7ff;
}
.telemetry-chart-shell-guided-sub {
  margin-top: 8px;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.5;
  color: #aab4d6;
}
@media (max-width: 960px) {
  .telemetry-latest-head {
    flex-direction: column;
  }
  .telemetry-latest-head-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .telemetry-chart-shell-stats {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}
@media (max-width: 640px) {
  .telemetry-chart-shell-stats {
    grid-template-columns: 1fr;
  }
  .telemetry-chart-shell-stage-copy {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* [Gate165 Baseline Telemetry Step6B] actual bounded chart render */
/* [Gate165 Baseline Telemetry Step6C] chart micro-polish */
.telemetry-chart-shell-head-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}
.telemetry-chart-shell-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 170, 255, 0.12);
  background: rgba(255,255,255,0.03);
  color: #dbe3ff;
  font-size: 12px;
  font-weight: 700;
}
.telemetry-chart-shell-status.is-ready {
  border-color: rgba(120, 197, 145, 0.18);
  color: #dff5e7;
}
.telemetry-chart-shell-status.is-loading {
  border-color: rgba(154, 170, 255, 0.18);
  color: #eef2ff;
}
.telemetry-chart-shell-status.is-error {
  border-color: rgba(255, 140, 140, 0.18);
  color: #ffd6d6;
}
.telemetry-chart-shell-line.is-stale {
  opacity: 0.36;
}
.telemetry-chart-shell-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #eef2ff;
  background: linear-gradient(180deg, rgba(6,10,20,0.16), rgba(6,10,20,0.26));
  backdrop-filter: blur(1px);
}
.telemetry-chart-shell .btn[disabled],
.telemetry-chart-shell select[disabled] {
  opacity: 0.52;
  cursor: not-allowed;
}
.telemetry-chart-shell .btn[disabled] {
  pointer-events: none;
}
.telemetry-chart-shell-meta {
  margin-top: 8px;
  font-size: 13px;
  color: #cdd6f5;
}
.telemetry-chart-shell-meta b {
  color: #f4f7ff;
}
.telemetry-chart-shell-meta-dot {
  margin: 0 4px;
  color: #8f9ab9;
}
.telemetry-chart-shell-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.telemetry-chart-shell-picker {
  display: grid;
  gap: 6px;
  min-width: min(360px, 100%);
}
.telemetry-chart-shell-picker-label {
  font-size: 12px;
  color: #9aa5c7;
}
.telemetry-chart-shell-picker select {
  min-height: 38px;
  border-radius: 12px;
}
.telemetry-chart-shell-window {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.telemetry-chart-shell-window-label {
  font-size: 12px;
  color: #aab4d6;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 170, 255, 0.10);
  background: rgba(255,255,255,0.03);
}
.telemetry-chart-shell-stage-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 18px;
  text-align: center;
  color: #aab4d6;
  font-size: 14px;
}
.telemetry-chart-shell-stage-empty.is-error {
  color: #ffd0d0;
}
.telemetry-chart-shell-line svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 720px) {
  .telemetry-chart-shell-head-side {
    justify-items: start;
    width: 100%;
  }
  .telemetry-chart-shell-toolbar {
    align-items: stretch;
  }
  .telemetry-chart-shell-window {
    justify-content: space-between;
    width: 100%;
  }
  .telemetry-chart-shell-picker {
    min-width: 100%;
  }
}


/* [Gate167 Step2B Dashboard Toolbar Composition] */
.dashPanelV2{
  padding: 16px 16px 14px;
}
.dashToolbarGrid{
  display:grid;
  grid-template-columns: minmax(0, 2.2fr) auto auto;
  gap: 12px 14px;
  align-items:end;
}
.dashGroup{
  display:flex;
  align-items:end;
  gap:12px;
  min-width:0;
}
.dashGroupFilters{
  min-width:0;
}
.dashGroupRefresh{
  justify-self:start;
  white-space:nowrap;
}
.dashGroupActions{
  justify-self:end;
}
.dashField{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.dashFieldDevice,
.dashFieldNode{
  flex:1 1 320px;
  min-width:240px;
}
.dashFieldAuto{
  width:112px;
}
.dashRefreshBtn{
  min-height:42px;
  height:42px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  min-width: 78px;
}
.dashAutoHintPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 10px;
  border:1px solid rgba(72,84,118,0.40);
  border-radius:12px;
  background:rgba(19,22,30,0.66);
}
.dashToggleRaw{
  min-height:42px;
  padding:0 4px;
}
.dashStatusPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  min-width:88px;
  padding:0 12px;
  border:1px solid rgba(72,84,118,0.32);
  border-radius:999px;
  background:rgba(19,22,30,0.60);
}
.dashHintLineCompact{
  margin-top:12px !important;
}
.dashCard{
  min-height:124px;
  padding:14px 15px 13px;
}
.dashValue{
  font-size:38px;
  margin-top:10px;
}
.dashMeta{
  margin-top:12px;
  gap:7px;
}
.dashMeta > .muted:last-child{
  margin-top:1px;
  font-size:12px;
}
@media (max-width: 1240px){
  .dashToolbarGrid{
    grid-template-columns: 1fr;
  }
  .dashGroup{
    justify-self:stretch !important;
    flex-wrap:wrap;
  }
  .dashGroupActions{
    justify-content:flex-start;
  }
  .dashStatusPill{
    margin-left:0 !important;
  }
}
@media (max-width: 780px){
  .dashFieldDevice,
  .dashFieldNode{
    flex:1 1 100%;
    min-width:0;
  }
  .dashGroupRefresh{
    gap:10px;
  }
}


/* [Gate167 Step2B Fix1 Dashboard Stretch Repair] */
.dashToolbarGrid{
  align-items:end;
}
.dashGroup{
  align-items:flex-end;
}
.dashField{
  justify-content:flex-end;
  align-self:end;
}
.dashSelect{
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  flex:0 0 auto !important;
}
.dashFieldDevice .dashSelect,
.dashFieldNode .dashSelect{
  width:100%;
}
.dashRefreshBtn,
.dashAutoHintPill,
.dashStatusPill,
.dashCustomizeBtn{
  min-height:42px !important;
  height:42px !important;
}
.dashToggleRaw{
  min-height:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
}
@media (min-width: 1241px){
  .dashGroupFilters{
    align-items:flex-end;
  }
}


/* [Gate167 Step2B Fix2 Refresh Balance] */
.dashGroupRefresh .dashRefreshBtn{
  flex: 0 0 auto;
  min-width: 84px;
}


/* [Gate167 Step2B Fix2b Refresh Balance Robust] */
.dashGroupRefresh .dashRefreshBtn{
  flex: 0 0 auto;
  align-self: end;
}


/* [Gate167 Step2B Fix3 Refresh Move] */
.dashGroupRefresh{
  gap:10px;
}
.dashGroupActions{
  gap:10px;
}
.dashGroupActions .dashRefreshBtn{
  margin-left:0 !important;
}
@media (min-width: 1241px){
  .dashGroupFilters{
    min-width:0;
  }
  .dashGroupRefresh{
    justify-self:center;
  }
  .dashGroupActions{
    justify-self:end;
  }
}


/* [Gate167 Step2B Fix4 Toolbar Spacing Width Tune] */
@media (min-width: 1241px){
  .dashToolbarGrid{
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px 18px;
  }
  .dashGroupFilters{
    display:grid;
    grid-template-columns: minmax(220px, 280px) minmax(280px, 360px);
    gap: 18px;
    align-items:end;
    justify-content:start;
    min-width:0;
  }
  .dashFieldDevice,
  .dashFieldNode{
    min-width:0;
    max-width:none;
  }
  #dashDeviceId{
    width:280px !important;
    max-width:280px !important;
  }
  #dashSensorId{
    width:340px !important;
    max-width:340px !important;
  }
  .dashGroupRefresh{
    gap:12px;
    margin-left:8px;
    white-space:nowrap;
  }
  .dashGroupActions{
    gap:12px;
    margin-left:10px;
    white-space:nowrap;
  }
  .dashGroupActions .dashRefreshBtn{
    margin-right:4px;
  }
  .dashStatusPill{
    margin-left:8px !important;
  }
}


/* [Gate167 Step2B Fix5 Elastic Filter Widths] */
@media (min-width: 1241px){
  .dashToolbarGrid{
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 14px !important;
  }

  .dashGroupFilters{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: end !important;
  }

  .dashFieldDevice,
  .dashFieldNode{
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  #dashDeviceId,
  #dashSensorId{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .dashGroupRefresh{
    margin-left: 0 !important;
    gap: 10px !important;
    white-space: nowrap;
  }

  .dashGroupActions{
    margin-left: 0 !important;
    gap: 10px !important;
    white-space: nowrap;
  }

  .dashGroupActions .dashRefreshBtn{
    margin-right: 0 !important;
  }
}


/* [Gate180 Users & Access Delivery Overflow Polish] */
.usersAccessInviteDeliveryCell{
  width: 260px;
  max-width: 260px;
  min-width: 180px;
  white-space: normal;
}

.usersAccessInviteDeliveryMeta,
.usersAccessInviteDeliveryError{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.usersAccessInviteDeliveryError{
  display: block;
}

@media (max-width: 980px){
  .usersAccessInviteDeliveryCell{
    width: 220px;
    max-width: 220px;
    min-width: 160px;
  }
}

/* [Gate182 Users & Access Member Management Mutations] */
.usersAccessPanelHeader{
  display: block;
}

.usersAccessControls{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 12px;
}

.usersAccessControlField{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  flex: 1 1 220px;
}

.usersAccessControlField input,
.usersAccessControlField select{
  width: 100%;
  min-width: 0;
}

.usersAccessControlLabel{
  display: block;
}

.usersAccessControlActions{
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.usersAccessActionSlot{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 150px;
}

.usersAccessActionBtn{
  white-space: nowrap;
}

.usersAccessActionMeta{
  flex-basis: 100%;
}

.usersAccessActionSelect{
  min-width: 110px;
  max-width: 100%;
  flex: 0 1 132px;
}

.usersAccessHeaderActions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.usersAccessInlineComposer{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

.usersAccessInlineComposerBody{
  display: block;
}

.usersAccessComposerControls{
  margin-top: 10px;
}

.usersAccessComposerActions{
  flex-wrap: wrap;
}

.usersAccessComposerError{
  margin-top: 8px;
  display: block;
}

@media (max-width: 980px){
  .usersAccessControls{
    gap: 8px;
  }

  .usersAccessControlField{
    min-width: 150px;
    flex-basis: 100%;
  }

  .usersAccessControlActions{
    width: 100%;
  }

  .usersAccessActionSlot{
    min-width: 0;
  }
}


/* [Gate192 Portal Usage Polish] BEGIN */
.cl-plan-current-section{
  margin-top: 2px;
}

.cl-plan-section-label{
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.cl-plan-current-name{
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.cl-plan-current-meta,
.cl-plan-current-desc{
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.cl-plan-current-line{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(42,47,58,0.92);
  border-radius: 12px;
  background: rgba(15,17,23,0.45);
}

.cl-plan-current-line-label{
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.cl-plan-current-line-value{
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.cl-plan-usage-row{
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(42,47,58,0.92);
  border-radius: 12px;
  background: rgba(15,17,23,0.52);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.cl-plan-usage-main{
  min-width: 220px;
  flex: 1 1 280px;
}

.cl-plan-usage-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cl-plan-usage-metrics{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.cl-plan-usage-sep{
  display: inline-block;
  margin: 0 6px;
  color: rgba(167,173,187,0.8);
}

.cl-plan-usage-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(42,47,58,0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15px;
  white-space: nowrap;
}

.cl-plan-usage-chip-ok{
  color: #8ee3b0;
  background: rgba(60, 156, 96, 0.16);
  border-color: rgba(60, 156, 96, 0.42);
}

.cl-plan-usage-chip-near{
  color: #ffd37a;
  background: rgba(199, 140, 0, 0.16);
  border-color: rgba(199, 140, 0, 0.42);
}

.cl-plan-usage-chip-at{
  color: #ff9b9b;
  background: rgba(180, 62, 62, 0.16);
  border-color: rgba(180, 62, 62, 0.42);
}

.cl-plan-usage-chip-muted{
  color: #c7cedc;
  background: rgba(95, 105, 125, 0.16);
  border-color: rgba(95, 105, 125, 0.42);
}

.cl-plan-usage-empty{
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
/* [Gate192 Portal Usage Polish] END */


/* ============================================================
   [Gate237 Mobile Layout] BEGIN
   Στόχος: σωστή προβολή στο κινητό χωρίς να χρειάζεται "Desktop view".
   Το block αυτό είναι αυτοτελές και αναιρείται με αφαίρεση όλου
   του τμήματος [Gate237 ... END]. Δεν αλλάζει το desktop layout
   (όλα τα overrides είναι μέσα σε @media max-width).
   ============================================================ */

/* (1) Topbar: αφήσε τα 3 παιδιά (brand, topnav, topright) να τυλίγουν.
   Στο desktop παραμένει space-between όπως ήταν. */
@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: center;
    padding: 10px 12px;
  }
  .topnav { min-width: 0; }
  .topright { gap: 6px; }
  .brand .subtitle { display: none; }   /* περιττό σε στενές οθόνες */
}

/* (2) Layout: η sidebar να μπει πάνω από το main, full-width.
   Τα ίδια nav κουμπιά υπάρχουν ήδη ως icon tabs στο topnav,
   οπότε σε πολύ στενές οθόνες κρύβουμε τελείως την sidebar. */
@media (max-width: 900px) {
  .layout {
    flex-direction: column;
    gap: 10px;
  }
  .sidebar {
    width: 100%;
    flex: 0 0 auto;
  }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .navbtn { padding: 8px 10px; }
}
@media (max-width: 640px) {
  .sidebar { display: none; }   /* χρήση των top icon tabs */
}

/* (3) Wrap: λίγο λιγότερο padding στα άκρα στο κινητό. */
@media (max-width: 640px) {
  .wrap { padding: 0 8px 30px; gap: 10px; }
  .card { padding: 12px; }
}

/* (4) Πίνακες: να μην ξεχειλίζει η σελίδα οριζόντια.
   Τυλίγουμε κάθε .table/.tbl μέσα στο γονέα του με horizontal scroll
   αντί να σπρώχνει όλο το layout. */
@media (max-width: 900px) {
  .tab .table,
  .tab .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: 0;
  }
  /* Επιτρέπουμε στο εσωτερικό table-grid να κρατήσει το min-width του
     ώστε οι στήλες να μη συμπιεστούν αφύσικα — απλώς θα κάνει scroll. */
  .tab .table > thead,
  .tab .table > tbody,
  .tab .tbl > thead,
  .tab .tbl > tbody { display: table; width: 100%; }
}

/* (5) Inputs/selects: σε πολύ στενές οθόνες δεν θέλουμε 160px min-width
   γιατί σπρώχνει τα γειτονικά κουμπιά εκτός γραμμής. */
@media (max-width: 600px) {
  .input, .select { min-width: 0; }
  .row { gap: 6px; }
}

/* (6) Topbar timezone pill: full-width row σε κινητό, να μην πιέζει το brand. */
@media (max-width: 640px) {
  #portalTimezone { max-width: 100% !important; width: 100%; }
}

/* (7) Inline-styled overrides που στο HTML έχουν fixed widths
   και δεν σπάνε αυτόματα κάτω από 640px. */
@media (max-width: 640px) {
  #nodeAlias,
  #dashDeviceId,
  #dashSensorId { max-width: 100% !important; width: 100%; }
}

/* [Gate237 Mobile Layout] END */


/* ============================================================
   [Gate237b Alerts Rows Mobile] BEGIN
   Στόχος: στο tab_alerts οι γραμμές κανόνων (rules table) να
   αναδιπλώνουν το κείμενο και να μη φαίνονται με μεγάλο κάθετο
   κενό. Default συμπεριφορά (cell-ellipsis: nowrap + ...) μένει
   στο desktop. Μόνο σε μικρές οθόνες αλλάζει.
   ============================================================ */
@media (max-width: 780px){
  /* (a) Wrap αντί για ellipsis: ώστε να φαίνεται όλο το όνομα/target/metric */
  #tab_alerts .gate127-alerts-tbl td.cell-ellipsis,
  #tab_alerts .gate127-alerts-tbl th.cell-ellipsis{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* (b) Headers επιτρέπεται να σπάνε σε 2 γραμμές αντί nowrap */
  #tab_alerts .gate127-alerts-tbl th{
    white-space: normal;
  }
  /* (c) Λιγότερο vertical padding ώστε να μειωθεί το "μεγάλο κενό" */
  #tab_alerts .gate127-alerts-tbl th,
  #tab_alerts .gate127-alerts-tbl td{
    padding: 6px 8px !important;
    vertical-align: top;
    font-size: 12px;
    line-height: 1.35;
  }
  /* (d) Πιο συμπαγή κουμπιά στη στήλη Actions για να μη φουσκώνουν τη γραμμή */
  #tab_alerts .gate127-alerts-tbl .btn{
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 9px;
  }
  #tab_alerts .gate127-alerts-tbl td .row{
    gap: 6px !important;
  }
}
/* [Gate237b Alerts Rows Mobile] END */


/* ============================================================
   [Gate237c Alerts Rule Card Mobile] BEGIN
   Σε στενές οθόνες μετατρέπουμε κάθε γραμμή του rules-table σε
   stacked κάρτα: State + Name + Enabled στην κορυφή, Target/Metric
   στη μέση με labels, κουμπιά Notify/Delete κάτω οριζόντια ίσου πλάτους.
   Δεν αγγίζει JS — μόνο CSS πάνω από τον υπάρχοντα <table>.
   Επηρεάζει μόνο .gate127-alerts-rules (όχι state/events).
   ============================================================ */
@media (max-width: 700px) {

  /* Wrap container: αφαιρούμε border/scroll, αφού η κάρτα έχει δικό της border */
  #tab_alerts .gate127-alerts-tblwrap:has(table.gate127-alerts-rules){
    border: 0;
    overflow: visible;
    background: transparent;
  }

  /* Επανεμφάνιση Target column (έχει κρυφτεί στα 980px) */
  #tab_alerts table.gate127-alerts-rules th:nth-child(3),
  #tab_alerts table.gate127-alerts-rules td:nth-child(3){
    display: revert !important;
  }

  /* Κρύβουμε τους table headers — κάθε cell θα έχει δικό του inline label */
  #tab_alerts table.gate127-alerts-rules thead{ display: none; }

  /* table -> block, ώστε να μπορούμε να στυλάρουμε το tr ως κάρτα */
  #tab_alerts table.gate127-alerts-rules,
  #tab_alerts table.gate127-alerts-rules tbody{
    display: block;
    width: 100%;
  }

  /* Κάθε row = κάρτα (CSS Grid με named areas) */
  #tab_alerts table.gate127-alerts-rules tbody tr{
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "state  name    enabled"
      "target target  target"
      "metric metric  metric"
      "actions actions actions";
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px;
    margin: 0 0 10px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
  }
  #tab_alerts table.gate127-alerts-rules tbody tr:hover td{
    background: transparent;   /* αναιρεί το hover-tint των table rows */
  }

  /* Κάθε cell = block, χωρίς table-cell padding/border */
  #tab_alerts table.gate127-alerts-rules tbody td{
    display: block;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: top;
    min-width: 0;
  }

  /* Map: nth-child -> grid area
     1=State 2=Name 3=Target 4=Metric/Cond 5=Enabled 6=Actions */
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(1){
    grid-area: state;
    align-self: center;
  }
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(2){
    grid-area: name;
    align-self: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(3){
    grid-area: target;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(215,220,230,0.86);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(4){
    grid-area: metric;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(215,220,230,0.86);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(5){
    grid-area: enabled;
    align-self: center;
    justify-self: end;
  }
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(6){
    grid-area: actions;
    margin-top: 2px;
    padding-top: 8px !important;
    border-top: 1px solid rgba(72,84,118,0.25) !important;
  }

  /* Inline labels (Target/Metric) μέσω ::before — δείχνει στον χρήστη τι είναι κάθε γραμμή */
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(3)::before{
    content: "TARGET ";
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-right: 6px;
  }
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(4)::before{
    content: "METRIC ";
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-right: 6px;
  }

  /* Τα κουμπιά actions: οριζόντια, ίσου πλάτους, χωρίς wrap σε νέα γραμμή */
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(6) .row{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100%;
  }
  #tab_alerts table.gate127-alerts-rules tbody td:nth-child(6) .btn{
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    text-align: center;
  }
}
/* [Gate237c Alerts Rule Card Mobile] END */


/* ============================================================
   [Gate237d Alerts State Card Mobile] BEGIN
   Ίδιο μοτίβο με rules: κάθε γραμμή του state-table γίνεται κάρτα.
   Στήλες: 1=Rule 2=Target 3=Cond 4=Status (pill+meta) 5=Actions.
   Status επάνω δεξιά, Target/Cond με labels, Actions 2 ανά γραμμή.
   ============================================================ */
@media (max-width: 700px) {

  /* Wrap container: αφαιρούμε border/scroll */
  #tab_alerts .gate127-alerts-tblwrap:has(table.gate127-alerts-state){
    border: 0;
    overflow: visible;
    background: transparent;
  }

  /* Επανεμφάνιση Cond (3) και Target (2) που είχαν κρυφτεί στα 980/760 */
  #tab_alerts table.gate127-alerts-state th:nth-child(2),
  #tab_alerts table.gate127-alerts-state td:nth-child(2),
  #tab_alerts table.gate127-alerts-state th:nth-child(3),
  #tab_alerts table.gate127-alerts-state td:nth-child(3){
    display: revert !important;
  }

  #tab_alerts table.gate127-alerts-state thead{ display: none; }

  #tab_alerts table.gate127-alerts-state,
  #tab_alerts table.gate127-alerts-state tbody{
    display: block;
    width: 100%;
  }

  #tab_alerts table.gate127-alerts-state tbody tr{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "rule    status"
      "target  target"
      "cond    cond"
      "actions actions";
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px;
    margin: 0 0 10px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
  }
  #tab_alerts table.gate127-alerts-state tbody tr:hover td{
    background: transparent;
  }

  #tab_alerts table.gate127-alerts-state tbody td{
    display: block;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: top;
    min-width: 0;
  }

  /* Rule name */
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(1){
    grid-area: rule;
    align-self: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Target */
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(2){
    grid-area: target;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(215,220,230,0.86);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Cond */
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(3){
    grid-area: cond;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(215,220,230,0.86);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Status: pill επάνω δεξιά, meta line κάτω */
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(4){
    grid-area: status;
    align-self: start;
    justify-self: end;
    text-align: right;
  }
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(4) > div{
    align-items: flex-end !important;
  }
  /* Actions */
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(5){
    grid-area: actions;
  }
  /* Αν δεν υπάρχουν Actions (state != alarm), κρύβουμε το cell + το διαχωριστικό */
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(5):empty{
    display: none;
  }
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(5):not(:empty){
    margin-top: 2px;
    padding-top: 8px !important;
    border-top: 1px solid rgba(72,84,118,0.25) !important;
  }

  /* Inline labels TARGET / COND */
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(2)::before{
    content: "TARGET ";
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-right: 6px;
  }
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(3)::before{
    content: "COND ";
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-right: 6px;
  }

  /* Action κουμπιά: 2-per-row για να χωρούν και τα 4 (Ack/Resolve/Snooze1h/Snooze24h) */
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(5) .row{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100%;
  }
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(5) .btn{
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    text-align: center;
  }
}
/* [Gate237d Alerts State Card Mobile] END */


/* ============================================================
   [Gate237e Alerts Events Card Mobile] BEGIN
   Στήλες events: 1=When 2=Rule 3=From→To 4=Action 5=Value
   ============================================================ */
@media (max-width: 700px) {

  #tab_alerts .gate127-alerts-tblwrap:has(table.gate127-alerts-events){
    border: 0;
    overflow: visible;
    background: transparent;
  }

  /* Επανεμφάνιση Action(4) και Value(5) που είχαν κρυφτεί στα 760 */
  #tab_alerts table.gate127-alerts-events th:nth-child(4),
  #tab_alerts table.gate127-alerts-events td:nth-child(4),
  #tab_alerts table.gate127-alerts-events th:nth-child(5),
  #tab_alerts table.gate127-alerts-events td:nth-child(5){
    display: revert !important;
  }

  #tab_alerts table.gate127-alerts-events thead{ display: none; }

  #tab_alerts table.gate127-alerts-events,
  #tab_alerts table.gate127-alerts-events tbody{
    display: block;
    width: 100%;
  }

  #tab_alerts table.gate127-alerts-events tbody tr{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "when    action"
      "rule    rule"
      "transition transition"
      "value   value";
    column-gap: 10px;
    row-gap: 6px;
    padding: 12px;
    margin: 0 0 10px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
  }
  #tab_alerts table.gate127-alerts-events tbody tr:hover td{
    background: transparent;
  }

  #tab_alerts table.gate127-alerts-events tbody td{
    display: block;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: top;
    min-width: 0;
  }

  /* When: επάνω αριστερά, mono font αν θέλει */
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(1){
    grid-area: when;
    align-self: center;
    font-size: 12px;
    color: rgba(215,220,230,0.92);
    font-weight: 600;
  }
  /* Rule */
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(2){
    grid-area: rule;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* From → To */
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(3){
    grid-area: transition;
    font-size: 12px;
    color: rgba(215,220,230,0.86);
  }
  /* Action: επάνω δεξιά */
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(4){
    grid-area: action;
    align-self: center;
    justify-self: end;
    text-align: right;
  }
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(4):empty{
    display: none;
  }
  /* Value */
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(5){
    grid-area: value;
    font-size: 12px;
    color: rgba(215,220,230,0.86);
    text-align: left !important;
  }
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(5):empty{
    display: none;
  }

  /* Inline labels για RULE / STATE / VALUE */
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(2)::before{
    content: "RULE ";
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-right: 6px;
  }
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(3)::before{
    content: "STATE ";
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-right: 6px;
  }
  #tab_alerts table.gate127-alerts-events tbody td:nth-child(5)::before{
    content: "VALUE ";
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-right: 6px;
  }
}
/* [Gate237e Alerts Events Card Mobile] END */


/* ============================================================
   [Gate237f Alerts Card Visual Accent] BEGIN
   Όμορφος διαχωρισμός στην κορυφή κάθε κάρτας:
   - 3px colored stripe + απαλό gradient header glow
   - Διαφορετικό χρώμα ανά τύπο πίνακα (rules/state/events)
   - Στο state, χρώμα ανάλογα με το state του pill (alarm/ok/unknown)
     μέσω :has() που ελέγχει τα tag classes μέσα στο cell.
   ============================================================ */
@media (max-width: 700px) {

  /* Common accent stripe — μέσω box-shadow inset top */
  #tab_alerts table.gate127-alerts-rules tbody tr,
  #tab_alerts table.gate127-alerts-state tbody tr,
  #tab_alerts table.gate127-alerts-events tbody tr{
    position: relative;
    overflow: hidden;            /* κρατάει τα rounded corners καθαρά */
    box-shadow:
      inset 0 3px 0 0 var(--card-accent, rgba(122,162,247,0.85)),
      0 4px 14px rgba(0,0,0,0.18);
    padding-top: 16px !important;   /* δίνει χώρο κάτω από τη γραμμή */
    transition: box-shadow 140ms ease, transform 140ms ease;
  }

  /* Subtle gradient header glow πάνω από το stripe */
  #tab_alerts table.gate127-alerts-rules tbody tr::before,
  #tab_alerts table.gate127-alerts-state tbody tr::before,
  #tab_alerts table.gate127-alerts-events tbody tr::before{
    content: "";
    position: absolute;
    top: 3px;                    /* κάτω από το 3px accent */
    left: 0;
    right: 0;
    height: 22px;
    background: linear-gradient(
      180deg,
      var(--card-accent-glow, rgba(122,162,247,0.10)) 0%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 0;
  }
  /* Όλα τα td πάνω από το glow */
  #tab_alerts table.gate127-alerts-rules tbody tr > td,
  #tab_alerts table.gate127-alerts-state tbody tr > td,
  #tab_alerts table.gate127-alerts-events tbody tr > td{
    position: relative;
    z-index: 1;
  }

  /* RULES → μπλε accent (info) */
  #tab_alerts table.gate127-alerts-rules tbody tr{
    --card-accent: rgba(122,162,247,0.85);
    --card-accent-glow: rgba(122,162,247,0.10);
  }

  /* EVENTS → πορτοκαλί accent (activity) */
  #tab_alerts table.gate127-alerts-events tbody tr{
    --card-accent: rgba(245,180,80,0.85);
    --card-accent-glow: rgba(245,180,80,0.10);
  }

  /* STATE → χρώμα ανάλογα με το pill μέσα στο status cell */
  /* Default: γκρι (unknown / no class) */
  #tab_alerts table.gate127-alerts-state tbody tr{
    --card-accent: rgba(160,170,190,0.55);
    --card-accent-glow: rgba(160,170,190,0.08);
  }
  /* OK */
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.ok){
    --card-accent: rgba(105,198,138,0.85);
    --card-accent-glow: rgba(105,198,138,0.10);
  }
  /* ALARM */
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.err){
    --card-accent: rgba(255,107,107,0.90);
    --card-accent-glow: rgba(255,107,107,0.12);
  }
  /* WARN */
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.warn){
    --card-accent: rgba(245,180,80,0.85);
    --card-accent-glow: rgba(245,180,80,0.10);
  }

  /* Active touch effect (tap feedback) */
  #tab_alerts table.gate127-alerts-rules tbody tr:active,
  #tab_alerts table.gate127-alerts-state tbody tr:active,
  #tab_alerts table.gate127-alerts-events tbody tr:active{
    transform: translateY(1px);
  }
}
/* [Gate237f Alerts Card Visual Accent] END */


/* ============================================================
   [Gate237h Alerts Desktop Row Accents] BEGIN
   Στο desktop (>700px) επιστρέφουμε στο table layout, αλλά
   προσθέτουμε χρωματική λωρίδα αριστερά + απαλό tint background
   ανά row, ώστε ο χρήστης να βλέπει με μια ματιά την κατάσταση.
   - State rows: χρώμα ανά state (red/green/orange/grey)
   - Rules rows: subtle blue accent
   - Events rows: subtle warn (orange) accent
   Επίσης πιο διακριτικά κουμπιά (όχι γεμάτο μπλε).
   ============================================================ */
@media (min-width: 701px){

  /* (1) Πλάτος: αφήνουμε το tab_alerts να καταλαμβάνει όλο το διαθέσιμο
       container (αναιρώντας τα default tab/wrap max-width περιορισμούς) */
  #tab_alerts.tab{ max-width: none !important; }
  #tab_alerts .gate127-alerts-shell{ max-width: none !important; }

  /* (2) Tables: επαναφορά κανονικού table view (rows). Καθαρό padding,
       ξεκάθαρες γραμμές. */
  #tab_alerts .gate127-alerts-tbl{
    border-collapse: separate;
    border-spacing: 0 6px;     /* μικρό κάθετο gap ανάμεσα στις γραμμές */
  }
  #tab_alerts .gate127-alerts-tbl tbody tr{
    background: rgba(255,255,255,0.02);
    transition: background 120ms ease;
  }
  #tab_alerts .gate127-alerts-tbl tbody tr:hover td{
    background: rgba(122,162,247,0.06);
  }
  #tab_alerts .gate127-alerts-tbl tbody td{
    padding: 12px 12px;
    border-top: 1px solid rgba(72,84,118,0.18);
    border-bottom: 1px solid rgba(72,84,118,0.18);
  }
  #tab_alerts .gate127-alerts-tbl tbody td:first-child{
    border-left: 1px solid rgba(72,84,118,0.18);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    /* Χρωματιστή accent λωρίδα στα αριστερά κάθε row */
    box-shadow: inset 4px 0 0 0 var(--row-accent, rgba(122,162,247,0.55));
    padding-left: 16px;
  }
  #tab_alerts .gate127-alerts-tbl tbody td:last-child{
    border-right: 1px solid rgba(72,84,118,0.18);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  /* (3) Rules rows → μπλε accent + απαλό tint background */
  #tab_alerts table.gate127-alerts-rules tbody tr{
    --row-accent: rgba(122,162,247,0.65);
  }

  /* (4) Events rows → πορτοκαλί accent */
  #tab_alerts table.gate127-alerts-events tbody tr{
    --row-accent: rgba(245,180,80,0.70);
  }

  /* (5) State rows → χρώμα ανάλογα με το pill (όπως στο mobile) */
  #tab_alerts table.gate127-alerts-state tbody tr{
    --row-accent: rgba(160,170,190,0.45);   /* default unknown */
  }
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.ok){
    --row-accent: rgba(105,198,138,0.80);
  }
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.err){
    --row-accent: rgba(255,107,107,0.85);
    background: rgba(255,107,107,0.04);
  }
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.warn){
    --row-accent: rgba(245,180,80,0.80);
    background: rgba(245,180,80,0.04);
  }

  /* (6) Πιο διακριτικά κουμπιά (αντί για γεμάτο μπλε .btn).
       Subtle outline, εμφανές hover. */
  #tab_alerts table.gate127-alerts-rules .btn,
  #tab_alerts table.gate127-alerts-state .btn,
  #tab_alerts table.gate127-alerts-events .btn{
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.14);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 9px;
    transition: background 120ms ease, border-color 120ms ease;
  }
  #tab_alerts table.gate127-alerts-rules .btn:hover,
  #tab_alerts table.gate127-alerts-state .btn:hover,
  #tab_alerts table.gate127-alerts-events .btn:hover{
    background: rgba(122,162,247,0.10);
    border-color: rgba(122,162,247,0.42);
    filter: none;
  }

  /* (7) Headers: subtle styling που να ταιριάζει με τις χρωματιστές γραμμές */
  #tab_alerts .gate127-alerts-tbl thead th{
    border-bottom: 1px solid rgba(72,84,118,0.30);
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(167,173,187,0.85);
  }
}
/* [Gate237h Alerts Desktop Row Accents] END */