/* Layout additions on top of 98.css. Keeps all chrome in the classic style. */
html, body {
  margin: 0;
  padding: 0;
  background: #008080; /* Win98 desktop teal */
  min-height: 100%;
}
body { padding: 16px; }

.app-window {
  width: min(1240px, calc(100vw - 32px));
  margin: 0 auto;
}

.menu-strip {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  padding: 1px 2px;
  display: flex;
  gap: 0;
}
.menu-item {
  background: transparent;
  box-shadow: none;
  min-width: 0;
  min-height: 20px;
  padding: 2px 10px;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
}
.menu-item:hover {
  background: #000080;
  color: #fff;
}
.menu-item.active {
  background: #000080;
  color: #fff;
}

.window-body { margin: 8px; }

.conn-box {
  margin-bottom: 6px;
}
.conn-box .field-row { padding: 2px 0; }
.status-text {
  margin-left: 8px;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
}
.status-text.ok { color: #006000; }
.status-text.err { color: #800000; }

.content-box { padding: 8px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.header-row { margin-bottom: 8px; }
.header-row .field-row { flex-wrap: wrap; row-gap: 4px; }
.header-row label { color: #000; }

.settings-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 1100px) {
  .settings-cols { grid-template-columns: 1fr; }
}
.side-box {
  padding: 8px 8px 6px;
}
.side-box legend { padding: 0 4px; font-weight: bold; }
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  min-height: 240px;
  max-height: 60vh;
  overflow: auto;
  padding: 4px 2px;
  background: #c0c0c0;
}
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
.grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #555;
  padding: 30px 0;
  font-style: italic;
}

.field {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 4px;
  padding: 1px 2px;
}
.field > label {
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
}
.field .ctl { width: 100%; }
.field input[type="checkbox"] { justify-self: start; }
.field.changed > label::after {
  content: " *";
  color: #800000;
  font-weight: bold;
}

.side-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.bottom-bar {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bottom-bar progress { margin-left: auto; }

.link-row {
  margin-top: 6px;
  font-size: 11px;
}

/* Terminal — emulates RichTextBox black/green Courier */
.terminal-box {
  background: #000;
  color: #00ff00;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  height: 460px;
  padding: 6px;
  overflow: auto;
  white-space: pre-wrap;
  border: none;
  box-shadow: inset -1px -1px #ffffff,
    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
}

/* RSSI plot */
.plot-frame {
  padding: 2px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #ffffff,
    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
}
#rssiCanvas { background: #fff; display: block; max-width: 100%; }
.legend-row {
  margin-top: 4px;
  font-size: 11px;
  font-family: "Pixelated MS Sans Serif", Arial;
}
.lg {
  display: inline-block;
  width: 14px;
  height: 4px;
  vertical-align: middle;
  margin: 0 4px 0 0;
}
.lg-l-rssi { background: #c00; }
.lg-r-rssi { background: #060; }
.lg-l-noise { background: #00c; }
.lg-r-noise { background: #c80; }

/* Statusbar (Win98 style) */
.status-bar {
  display: flex;
  margin-top: 8px;
  gap: 1px;
}
.status-bar-field {
  flex: 1;
  margin: 0;
  padding: 2px 6px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #ffffff,
    inset 1px 1px #808080;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
  color: #000;
  min-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-bar-field:first-child { flex: 0 0 240px; }

.hint { color: #444; font-size: 11px; margin-left: 6px; }