/* racks.css — the hardware module chassis: brushed-metal body, header,
   screws, panels, LEDs, buttons, readouts, tags, groups. */

.hw-module {
  position: absolute;
  min-width: 260px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--edge);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  user-select: none;
}
.hw-module.dragging {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent-bright);
  cursor: grabbing;
}

/* --- Header: brushed metal strip with engraved title + screws --- */
.hw-header {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  cursor: grab;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #5C5F73 0%, #464858 55%, #3A3C4C 100%);
  border-bottom: 1px solid #050B10;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hw-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #0A1218;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Screws in the header corners */
.hw-screw {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a8e96, #4a4e56 60%, #2c2f35);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.6);
}
.hw-screw-l { left: 8px; }
.hw-screw-r { right: 8px; }
.hw-title { margin: 0 auto; }

/* --- Body --- */
.hw-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px 16px;
  min-height: 40px;
}

/* --- Group (tag above controls) --- */
.hw-group { display: flex; flex-direction: column; gap: 6px; }
.hw-tag {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-family: var(--mono);
}

/* --- Buttons --- */
.hw-btn {
  height: 30px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid #050B10;
  border-radius: 5px;
  background: linear-gradient(180deg, #5C5F73 0%, #464858 55%, #3A3C4C 100%);
  color: #E8E2DA;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-family: var(--mono);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.4),
    0 2px 3px rgba(0, 0, 0, 0.5);
  transition: filter 80ms ease, box-shadow 80ms ease;
}
.hw-btn:hover { filter: brightness(1.12); }
.hw-btn:active { filter: brightness(0.92); transform: translateY(1px); }
.hw-btn.active {
  background: linear-gradient(180deg, #B8794E 0%, var(--accent) 60%, #7A4E42 100%);
  color: #FFF6EE;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 8px rgba(217, 155, 127, 0.5);
}

/* --- LED --- */
.hw-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0A1218;
  border: 1px solid #050B10;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  display: inline-block;
}
.hw-led.on {
  background: var(--led-color, var(--accent-bright));
  box-shadow: 0 0 8px var(--led-color, var(--accent-bright)), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* --- Readouts (VFD/CRT) --- */
.hw-readout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 30px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid rgba(70, 72, 88, 0.85);
  background: linear-gradient(180deg, #050B10 0%, #0A1218 100%);
  color: #F0D9C8;
  font-size: 12px;
  letter-spacing: 0.05em;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
  text-shadow: 0 0 6px rgba(217, 155, 127, 0.6), 0 0 14px rgba(217, 155, 127, 0.3);
}
.hw-readout.error { color: #E8A89A; text-shadow: 0 0 6px rgba(176, 88, 78, 0.7); }

/* --- Inputs styled as readouts (BPM) --- */
input.hw-readout {
  font-family: var(--mono);
  text-align: center;
}
input.hw-readout:focus { outline: 1px solid var(--accent-bright); }
input.hw-readout::-webkit-inner-spin-button { -webkit-appearance: none; }

/* --- Panel strip --- */
.hw-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(70, 72, 88, 0.4);
}
.hw-panel-caption {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-family: var(--mono);
}