/* --- Eurorack Synthesizer Flat Block-Color Theme --- */

:root {
  --color-orange: #ff5000;         /* Solid Safety Orange */
  --color-mint: #00d1b2;           /* Solid Cyber Mint */
  --color-blue: #0055ff;           /* Solid Royal Cobalt Blue */
  --color-magenta: #ff007f;        /* Solid Laser Magenta */
  --color-yellow: #ffcc00;         /* Solid Sunflower Yellow */
  
  --bg-chassis: #09090b;           /* Solid Matte Charcoal Chassis */
  --bg-module: #131317;            /* Solid Dark Zinc Module */
  
  --font-ui: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-ui);
  background-color: var(--bg-chassis);
  color: #ffffff;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

/* Eurorack Flat Module Panel */
.premium-card {
  background-color: var(--bg-module);
  border: 2px solid #27272a;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.15s ease-out;
}

/* Module Header Strip (Solid color bar with bold black text) */
.module-header {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #000000 !important;
}

/* Solid Accent borders for modules */
.module-orange {
  border-color: var(--color-orange) !important;
}
.module-orange .module-header {
  background-color: var(--color-orange);
}

.module-mint {
  border-color: var(--color-mint) !important;
}
.module-mint .module-header {
  background-color: var(--color-mint);
}

.module-blue {
  border-color: var(--color-blue) !important;
}
.module-blue .module-header {
  background-color: var(--color-blue);
}

.module-magenta {
  border-color: var(--color-magenta) !important;
}
.module-magenta .module-header {
  background-color: var(--color-magenta);
}

.module-yellow {
  border-color: var(--color-yellow) !important;
}
.module-yellow .module-header {
  background-color: var(--color-yellow);
}

/* Solid Flat Buttons (Skeuomorphic Keycaps) */
.tactile-btn, .remote-grid-btn, .tab-btn, .btn-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #1a1a22;
  border: 2px solid #2d2d3a;
  color: #ffffff;
  border-radius: 6px;
  padding: 6px 14px;
  min-height: 34px;
  box-sizing: border-box;
  transition: all 0.05s ease-out;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.tactile-btn:hover, .remote-grid-btn:hover, .tab-btn:hover, .btn-mode-toggle:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.tactile-btn:active, .remote-grid-btn:active, .tab-btn:active, .btn-mode-toggle:active {
  transform: scale(0.96);
}

/* Play and Delete buttons inside learned keys list */
.btn-replay, .btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #2d2d3a;
  transition: all 0.05s ease-out;
  cursor: pointer;
}
.btn-replay {
  background-color: var(--color-mint) !important;
  border-color: var(--color-mint) !important;
  color: #000000 !important;
}
.btn-replay:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}
.btn-replay:active {
  transform: scale(0.92) !important;
}
.btn-delete {
  background-color: #241a20 !important;
  border-color: var(--color-magenta) !important;
  color: var(--color-magenta) !important;
}
.btn-delete:hover {
  background-color: var(--color-magenta) !important;
  color: #ffffff !important;
  border-color: var(--color-magenta) !important;
}
.btn-delete:active {
  transform: scale(0.92) !important;
}

/* Active tab button states (Solid Lit Color) */
.tab-btn.active {
  background-color: var(--color-blue) !important;
  color: #000000 !important;
  border-color: var(--color-blue) !important;
}
.tab-btn.active:active {
  transform: scale(0.96) !important;
}

/* Active Remote Control Switch Buttons */
.btn-mode-toggle.active {
  background-color: var(--color-orange) !important;
  color: #000000 !important;
  border-color: var(--color-orange) !important;
}
.btn-mode-toggle.active:active {
  transform: scale(0.96) !important;
}

/* Solid Checkboxes / Switches */
input[type="checkbox"] + div {
  background: #101115 !important;
  border: 2px solid #27272a !important;
  border-radius: 4px !important;
}
input[type="checkbox"]:checked + div {
  background: var(--color-mint) !important;
  border-color: var(--color-mint) !important;
}

/* Custom Dials (Skeuomorphic Solid Knobs) */
.dial-knob {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #27272a;
  border: 3px solid #0f0f12;
  position: relative;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.dial-knob::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 9px;
  background-color: #ffffff;
  border-radius: 1px;
}

/* Solid Telemetry Readout panels */
.analog-readout {
  font-family: var(--font-mono);
  background-color: #000000;
  border: 2px solid #27272a;
  border-radius: 6px;
}

/* CRT Screen Logs Terminal style (Flat border) */
.terminal-screen {
  background-color: #050508;
  border: 2px solid #27272a;
  border-radius: 6px;
  font-family: var(--font-mono);
}

/* Status Badges */
.status-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  background: #000000;
  border: 2px solid #27272a;
  transition: all 0.2s ease;
}
.status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.status-badge.online {
  color: var(--color-mint) !important;
  border-color: var(--color-mint);
}
.status-badge.offline {
  color: var(--color-magenta) !important;
  border-color: var(--color-magenta);
}

/* Sliders */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: #1a1a22;
  border: 2px solid #2d2d3a;
  border-radius: 9999px;
  height: 8px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--color-mint);
  cursor: pointer;
  border: 1.5px solid #000000;
  transition: transform 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Inputs */
input[type="text"], input[type="password"] {
  background-color: #000000;
  border: 2px solid #2d2d3a;
  border-radius: 6px;
  color: #ffffff;
  transition: all 0.2s ease;
}
input[type="text"]:focus, input[type="password"]:focus {
  border-color: #ffffff;
  outline: none;
}

/* Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #000000;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #27272a;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

/* Muted silk labels */
.luxury-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  color: #71717a;
  letter-spacing: 1px;
  text-transform: uppercase;
}