/* Simple Windows XP style — light, no heavy effects */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  font-family: Tahoma, "Segoe UI", "Vazirmatn", sans-serif;
  font-size: 12px;
  color: #000;
  background: #3a6ea5;
}

.desktop {
  min-height: 100%;
  padding: 16px;
}

.window {
  width: min(980px, 100%);
  margin: 0 auto;
  background: #ece9d8;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
}

.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 3px 0 6px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(180deg, #0a246a 0%, #a6caf0 100%);
}

.title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.caption-buttons { display: flex; gap: 2px; }
.cap {
  width: 18px;
  height: 16px;
  padding: 0;
  line-height: 12px;
  font-size: 11px;
  font-family: Tahoma, sans-serif;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  color: #000;
}
.cap.close { font-weight: 700; }

.menubar, .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: #ece9d8;
  border-bottom: 1px solid #aca899;
}
.menubar span { cursor: default; }
.menubar .spacer { flex: 1; }
.toolbar .sep {
  width: 1px;
  height: 14px;
  background: #aca899;
}

.btn, select, button.btn {
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  background: #ece9d8;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  padding: 2px 10px;
  color: #000;
}
.btn:active {
  border-color: #404040 #fff #fff #404040;
}

.badge {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid #808080;
  background: #fff;
}
.badge.on { background: #c6efce; }
.badge.off { background: #ffc7ce; }

.client {
  padding: 8px;
  background: #ece9d8;
}

.group {
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid #aca899;
  background: #ece9d8;
}
.group legend {
  padding: 0 4px;
  color: #003c74;
  font-weight: 700;
}

.props {
  width: 100%;
  border-collapse: collapse;
}
.props td {
  padding: 3px 6px;
  border-bottom: 1px dotted #c0c0c0;
}
.props td:first-child {
  width: 140px;
  color: #003c74;
}

.sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.sensor-grid .empty {
  grid-column: 1 / -1;
  padding: 10px;
  background: #fff;
  border: 1px inset #808080;
  color: #666;
}

.sensor {
  background: #fff;
  border: 1px solid #808080;
  padding: 6px;
}
.sensor .name {
  color: #003c74;
  margin-bottom: 4px;
}
.sensor .val {
  font-size: 16px;
  font-weight: 700;
  font-family: "Courier New", monospace;
}
.sensor .time {
  margin-top: 4px;
  color: #666;
  font-size: 11px;
}

.listview {
  background: #fff;
  border: 1px inset #808080;
  max-height: 280px;
  overflow: auto;
}
.listview table {
  width: 100%;
  border-collapse: collapse;
}
.listview th {
  text-align: right;
  background: #ece9d8;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 3px 6px;
  position: sticky;
  top: 0;
  font-weight: 700;
}
.listview td {
  text-align: right;
  padding: 3px 6px;
  border-bottom: 1px solid #f0f0f0;
  font-family: "Courier New", monospace;
  font-size: 12px;
}
.listview tr:nth-child(even) td { background: #f7f7f0; }
.listview tr:hover td { background: #316ac5; color: #fff; }

.statusbar {
  display: flex;
  border-top: 1px solid #fff;
  background: #ece9d8;
}
.statusbar > div {
  flex: 1;
  padding: 2px 6px;
  border: 1px inset #aca899;
  margin: 2px;
}

@media (max-width: 640px) {
  .desktop { padding: 8px; }
  .props td:first-child { width: 110px; }
}