/* ============================================================
   BCU Euromag GUI — Water-utility Corporate theme
   Deep-blue + aqua palette, KPI tiles, wave accents
   ============================================================ */

:root{
	--navy-900:#07253f;
	--navy-800:#0b3357;
	--navy-700:#104472;
	--navy-600:#175a8f;
	--aqua:#19b5c8;
	--aqua-bright:#2fd4e6;
	--aqua-soft:#e3f6f9;
	--ink:#12314a;
	--muted:#64809a;
	--bg:#eef4f8;
	--card:#ffffff;
	--ok:#19b874;
	--bad:#e2574c;
	--warn:#e9a13b;
	--radius:14px;
	--shadow:0 2px 10px rgba(11,51,87,.08), 0 8px 30px rgba(11,51,87,.06);
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
	font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
	background:var(--bg);
	color:var(--ink);
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

/* ---------- top bar ---------- */
.topbar{
	position:relative;
	background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 70%, var(--navy-600) 100%);
	color:#fff;
	padding:20px 28px 34px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	overflow:hidden;
}
.brand{ display:flex; align-items:center; gap:14px; z-index:2; }
.brand .drop{ width:38px; height:38px; fill:var(--aqua-bright); filter:drop-shadow(0 0 8px rgba(47,212,230,.6)); }
.brand h1{ font-size:22px; font-weight:600; letter-spacing:.5px; }
.brand span{ font-size:12px; color:#9fd6e6; letter-spacing:1.5px; text-transform:uppercase; }
.top-status{ display:flex; gap:10px; z-index:2; }
.pill{
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.25);
	color:#dff5fa;
	padding:5px 14px;
	border-radius:20px;
	font-size:12px;
	backdrop-filter:blur(4px);
}
.pill.ok{ border-color:var(--ok); color:#b8f4d9; }
.pill.bad{ border-color:var(--bad); color:#ffd2cd; }
.wave{ position:absolute; left:0; right:0; bottom:-1px; height:34px; width:100%; fill:var(--bg); z-index:1; }

/* ---------- layout ---------- */
main{ flex:1; max-width:1280px; width:100%; margin:0 auto; padding:22px 24px 40px; }
.foot{ text-align:center; padding:14px; font-size:12px; color:var(--muted); }

/* ---------- KPI tiles ---------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:22px; }
.kpi{
	background:var(--card);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:18px 20px;
	position:relative;
	overflow:hidden;
}
.kpi::after{
	content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
	background:linear-gradient(90deg, var(--aqua), var(--aqua-bright));
}
.kpi .label{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.kpi .value{ font-size:30px; font-weight:600; margin-top:6px; color:var(--navy-800); }
.kpi .value small{ font-size:14px; color:var(--muted); font-weight:400; }
.kpi.ok .value{ color:var(--ok); }
.kpi.bad .value{ color:var(--bad); }

/* ---------- cards ---------- */
.card{
	background:var(--card);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	margin-bottom:22px;
	overflow:hidden;
}
.card > h2{
	font-size:14px; letter-spacing:1px; text-transform:uppercase;
	color:var(--navy-700);
	padding:16px 22px 12px;
	border-bottom:2px solid var(--aqua-soft);
	display:flex; align-items:center; justify-content:space-between;
}
.card .body{ padding:18px 22px; }

/* ---------- device table ---------- */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{
	text-align:left; padding:10px 22px; font-size:11px; text-transform:uppercase;
	letter-spacing:1px; color:var(--muted); background:var(--aqua-soft);
}
td{ padding:12px 22px; border-bottom:1px solid #edf3f7; }
tr.device-row{ cursor:pointer; transition:background .15s; }
tr.device-row:hover{ background:#f2fafc; }
.serial{ font-family:Consolas, monospace; font-weight:600; color:var(--navy-800); }

.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.status-dot.on{ background:var(--ok); box-shadow:0 0 6px rgba(25,184,116,.7); }
.status-dot.off{ background:#b8c8d4; }
.badge{ display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.badge.on{ background:#e0f7ec; color:var(--ok); }
.badge.off{ background:#eef1f4; color:var(--muted); }
.badge.pending{ background:#fdf3e2; color:var(--warn); }

/* ---------- device detail ---------- */
.crumbs{ margin-bottom:16px; font-size:13px; color:var(--muted); }
.crumbs a{ color:var(--aqua); text-decoration:none; font-weight:600; }
.crumbs a:hover{ text-decoration:underline; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

.kv{ width:100%; font-size:13px; }
.kv td{ padding:7px 0; border-bottom:1px dashed #e4edf3; }
.kv td:first-child{ color:var(--muted); width:46%; }
.kv td:last-child{ font-family:Consolas, monospace; color:var(--navy-800); word-break:break-all; }

/* ---------- realtime panel ---------- */
.rt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.rt-tile{
	background:linear-gradient(160deg, var(--navy-800), var(--navy-600));
	color:#fff; border-radius:10px; padding:12px 14px;
}
.rt-tile .label{ font-size:11px; color:#9fd6e6; text-transform:uppercase; letter-spacing:1px; }
.rt-tile .value{ font-family:Consolas, monospace; font-size:20px; margin-top:4px; color:var(--aqua-bright); }
.rt-live{ animation:pulse 1s ease; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,212,230,.7);} 100%{ box-shadow:0 0 0 12px rgba(47,212,230,0);} }
.rt-empty{ color:var(--muted); font-size:13px; padding:8px 0; }

/* ---------- commands ---------- */
.cmd-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.cmd-bar label{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); display:block; margin-bottom:4px; }
select, input[type=text], input[type=number], textarea{
	border:1px solid #cfdde7; border-radius:8px; padding:9px 12px; font-size:13px;
	font-family:Consolas, monospace; color:var(--ink); background:#fbfdfe; outline:none;
}
select:focus, input:focus, textarea:focus{ border-color:var(--aqua); box-shadow:0 0 0 3px rgba(25,181,200,.15); }
textarea{ width:100%; min-height:110px; resize:vertical; }
button{
	background:linear-gradient(135deg, var(--aqua), var(--navy-600));
	color:#fff; border:none; border-radius:8px; padding:10px 22px;
	font-size:13px; font-weight:600; letter-spacing:.5px; cursor:pointer;
	transition:transform .1s, box-shadow .15s;
}
button:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(25,181,200,.4); }
button:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
button.ghost{ background:#fff; color:var(--navy-700); border:1px solid #cfdde7; }
button.danger{ background:linear-gradient(135deg, var(--bad), #b23b32); }

.cmd-result{ margin-top:12px; font-family:Consolas, monospace; font-size:12px; white-space:pre-wrap;
	background:var(--aqua-soft); border-radius:8px; padding:12px; display:none; }
.cmd-result.show{ display:block; }
.cmd-result.err{ background:#fdeae8; color:var(--bad); }

/* ---------- logs ---------- */
.logs-wrap{ overflow-x:auto; }
.logs-wrap table{ font-size:12px; }
.logs-wrap td, .logs-wrap th{ padding:7px 12px; white-space:nowrap; font-family:Consolas, monospace; }

/* ---------- pending ---------- */
.pending-item{ display:flex; justify-content:space-between; align-items:center; gap:12px;
	padding:10px 0; border-bottom:1px dashed #e4edf3; font-size:13px; }
.pending-item code{ background:var(--aqua-soft); border-radius:6px; padding:2px 8px; font-size:12px; }

.loading{ text-align:center; color:var(--muted); padding:30px; }
.error-box{ background:#fdeae8; color:var(--bad); border-radius:var(--radius); padding:16px 22px; margin-bottom:22px; }

/* ---------- toast ---------- */
#toast{
	position:fixed; bottom:24px; right:24px; background:var(--navy-800); color:#fff;
	border-left:4px solid var(--aqua-bright); border-radius:10px; padding:14px 20px;
	font-size:13px; box-shadow:var(--shadow); opacity:0; transform:translateY(12px);
	transition:all .25s; pointer-events:none; max-width:380px; z-index:99;
}
#toast.show{ opacity:1; transform:none; }