/* Force two-column layout */
.content {
  display: grid;
  grid-template-columns: 1.4fr 1fr; /* left wider for map, right for table/details */
  gap: 24px;
  align-items: start;
  padding: 16px 24px 48px;
}

/* Panels look clean */
.panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  padding: 18px;
}

/* Map container must have height */
.map-panel #map {
  width: 100%;
  height: 560px;   /* adjust as needed */
  border-radius: 12px;
  overflow: hidden;
}

/* Page grid */
.monitor-page .content{
  display:grid;
  grid-template-columns: 1.35fr 1fr;  /* map left wider */
  gap:24px;
  align-items:start;
  padding:16px 24px 48px;
}

/* ====== Theme ====== */
.monitor-page{
  --bg: #eaf3ef;
  --card: #ffffff;
  --muted: #6a7781;
  --ink: #0e1a16;
  --pill: #1b6e61;
  --pill-muted: #0e3a33;
  --accent: #2c9c88;
  --soft-border: #d5e4dc;
  --shadow: 0 8px 28px rgba(7, 16, 12, .06);
  --radius: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ====== Topbar + KPI pills ====== */
.monitor-page .topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* logo first, pills later */
  gap: 16px;
  padding: 10px 16px;
  background: #e3efe9;
  border-bottom: 1px solid var(--soft-border);
}

.monitor-page .topbar h1{
  margin: 0;
  display: flex;
  align-items: center;
}

.monitor-page .brand-logo{
  height: 42px;
  width: auto;
  display: block;
}

/* KPI section on the right */
.monitor-page .kpis{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;                 /* pushes the pills to the right */
  width: auto !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  text-align: right;
}

/* Base pill styling */
.monitor-page .kpi{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #134f45;
  color: #eafff8;
  box-shadow: var(--shadow);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
}

.monitor-page .kpi .label{
  opacity: .85;
  font-weight: 700;
}

.monitor-page #kpi-running{ background:#1e7d6c; }
.monitor-page #kpi-offline{ background:#355a5a; }
.monitor-page #kpi-active { background:#1f6fb3; }
.monitor-page #kpi-warning{ background:#a87016; }
.monitor-page #kpi-problem{ background:#a43a3a; }

/* ====== Two-column layout ====== */
.monitor-page .content{
  display:grid;
  grid-template-columns: 1.35fr 1fr; /* map left wider */
  gap:22px;
  padding:16px 18px 36px;
  align-items:start;
}

/* ====== Panels ====== */
.monitor-page .panel{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}

/* ====== Map panel ====== */
.monitor-page .map-panel{ 
    padding:0; 
    height: calc(100vh - 80px);  /* 100% of window height minus ~header size */
    display: flex;
}
.monitor-page .map-panel #map{
  width:100%;
  flex:1;
  height: 100%; /* adjust as needed */
  border-radius: 12px;
  outline: 4px solid #cfe3ff;
  box-shadow: inset 0 0 0 2px #2f5fbf20;
  overflow:hidden;
}

/* ====== Table panel ====== */
.monitor-page .table-panel{ padding:18px; }
.monitor-page .table-panel h2{
  margin:2px 0 10px; font-size:24px;
}
.monitor-page .table-panel table{
  width:100%; border-collapse:separate; border-spacing:0 12px;
}
.monitor-page .table-panel thead th{
  text-align:left !important; font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}

/* Row look */
.monitor-page .table-panel tbody tr td{
  background:#f6fbf9;
  padding:12px 14px;
  border-radius:12px;
}

/* Name = pill button */
/* .monitor-page .table-panel td:first-child{
  background:transparent; padding:0;
} */
.monitor-page .table-panel td:first-child > a,
.monitor-page .table-panel td:first-child > span{
  display:inline-block;
  border:2px solid #2a3a34;
  color:#2a3a34; background:#fff;
  padding:6px 10px; border-radius:12px; font-weight:800;
  box-shadow: 0 2px 0 #22352d15;
}

/* Status = small grey chip like “offline / running” */
.monitor-page .table-panel .status-chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#eef2f3; color:#27333a; font-weight:700; font-size:12px;
  border:1px solid #d7e1e4;
}

/* Numbers alignment */
.monitor-page .table-panel td:nth-child(5),
.monitor-page .table-panel td:nth-child(6){
  text-align:right; font-variant-numeric: tabular-nums;
}

/* ====== Detail drawer (when used) ====== */
.monitor-page .detail{
  background:var(--card); border-radius:12px; padding:12px; box-shadow: var(--shadow);
}
.monitor-page .detail.hidden{ display:none; }


/* ========== MAIN TABLE (right panel) ========== */
#points-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;               /* row gaps like the screenshot */
}
#points-table tbody tr td:first-child{ background:transparent; padding:0; }

#points-table thead th{
  text-align:left;
  font-size:12px;
  color:#20443b;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:0 12px;
}

#points-table tbody tr td{
  background:#f2f8f5;                  /* soft row bubbles */
  padding:12px 14px;
  border-radius:12px;
  vertical-align:middle;
}

/* Name cell = pill button */
#points-table tbody tr td:first-child{
  background:transparent;
  padding:0;
}
#points-table tbody tr td:first-child > a,
#points-table tbody tr td:first-child > span{
  display:inline-block;
  border:2px solid #173d35;
  color:#173d35;
  background:#fff;
  padding:6px 10px;
  border-radius:12px;
  font-weight:800;
  line-height:1;
  box-shadow:0 2px 0 #173d3515;
}

/* Status cell = chip */
#points-table tbody tr td:nth-child(2){
  background:#e9efee;
  color:#20333a;
  font-weight:700;
  border:1px solid #d2dddd;
  padding:6px 10px;
  border-radius:999px;
  width:1%; white-space:nowrap;        /* keeps it compact */
}

/* Numeric columns align right like the mock */
#points-table tbody tr td:nth-last-child(-n+2){
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Headline “Pods” and subheaders */
.table-panel h2{ margin:2px 0 12px; font-size:24px; }
.table-panel .detail-section h4{
  margin:18px 0 10px;
  font-size:18px;
  color:#173d35;
}

/* ========== DETAIL DRAWER (chips & badges) ========== */
.detail{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(7,16,12,.06);
  padding:12px 14px;
}

.detail .detail-header{ margin-bottom:8px; }

/* mini tables inside each section */
.detail table.mini{
  width:100%;
  border-collapse:separate;
  border-spacing:10px 10px;            /* space between badges */
}

/* header keys = small dark badges */
.detail table.mini thead th{
  background:#123c35;
  color:#eafff8;
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:8px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* values = dark green lozenges */
.detail table.mini tbody td{
  background:#0e3a33;
  color:#eafff8;
  font-weight:700;
  padding:8px 10px;
  border-radius:8px;
  text-align:center;
  white-space:nowrap;
}

/* optional: give the entire right panel the same card look */
.table-panel{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(7,16,12,.06);
  padding:18px;
}


/* --- ON/OFF toggle --- */
.monitor-page .toggle-wrap { margin: 8px 0 16px; }

.monitor-page .switch{
  position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  user-select:none;
}
.monitor-page .switch input{ display:none; }              /* hide native checkbox */

.monitor-page .switch .slider{
  width:46px; height:26px; border-radius:26px; background:#b91c1c; /* OFF = red */
  position:relative; transition:all .25s ease;
  box-shadow: inset 0 0 0 2px #8a1313;
}
.monitor-page .switch .slider::before{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform .25s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* ON state */
.monitor-page .switch input:checked + .slider{ background:#16a34a; box-shadow: inset 0 0 0 2px #0f7a35; }
.monitor-page .switch input:checked + .slider::before{ transform:translateX(20px); }

/* Text label to the right: OFF / ON */
.monitor-page .switch .status-label{ font-weight:800; letter-spacing:.02em; }
.monitor-page .switch .status-label::after{ content:"OFF"; color:#b91c1c; }
.monitor-page .switch input:checked ~ .status-label::after{ content:"ON"; color:#16a34a; }