/* ==========================================================================
   NEO-SKEUOMORPHIC PRIMITIVES
   Tactile Plates, Debossed Wells, Optical LEDs, Physical Switches
   ========================================================================== */

/* Main Chassis Body */
.hardware-chassis {
  background: var(--chassis-bg);
  border: var(--chassis-border);
  box-shadow: var(--chassis-shadow);
  border-radius: var(--r-chassis);
  position: relative;
  overflow: hidden;
}

/* Texture Pattern Grid (Micro Hardware Matte) */
.hardware-chassis::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  opacity: 0.7;
}

/* Debossed Screen Wells (LCD & Terminal Data) */
.debossed-panel {
  background: var(--surface-debossed);
  box-shadow: var(--screen-debossed-shadow);
  border-radius: var(--r-panel);
  border: 1px solid rgba(0, 0, 0, 0.6);
  position: relative;
}

[data-theme="light"] .debossed-panel {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Tactile Raised Plate (Buttons / Cards) */
.raised-card {
  background: var(--surface-raised);
  box-shadow: var(--btn-raised-shadow);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-panel);
  transition: transform var(--transition-tactile), box-shadow var(--transition-tactile), background var(--transition-fast);
}

.raised-card:hover {
  background: var(--surface-raised-hover);
}

/* Tactile Mechanical Button */
.tactile-btn {
  background: var(--surface-raised);
  box-shadow: var(--btn-raised-shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-control);
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: 0.825rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: transform var(--transition-tactile), box-shadow var(--transition-tactile), background var(--transition-fast);
}

.tactile-btn:hover {
  background: var(--surface-raised-hover);
}

.tactile-btn:active,
.tactile-btn.active {
  transform: translateY(2px);
  box-shadow: var(--btn-pressed-shadow);
  background: var(--surface-active);
}

/* Accent Buttons */
.tactile-btn-primary {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 12px rgba(2, 132, 199, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}

.tactile-btn-primary:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Optical LED Indicator */
.led-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.led-indicator::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: inherit;
  filter: blur(4px);
  opacity: 0.75;
}

.led-green {
  background: var(--led-green);
  box-shadow: 0 0 8px var(--led-green-glow);
}

.led-cyan {
  background: var(--led-cyan);
  box-shadow: 0 0 8px var(--led-cyan-glow);
}

.led-amber {
  background: var(--led-amber);
  box-shadow: 0 0 8px var(--led-amber-glow);
}

.led-red {
  background: var(--led-red);
  box-shadow: 0 0 8px var(--led-red-glow);
}

.led-pulse {
  animation: led-breathe 2.4s infinite ease-in-out;
}

@keyframes led-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.92); }
}

/* Tactile Rocker Switch (Tabs) */
.rocker-nav {
  display: inline-flex;
  background: var(--surface-debossed);
  box-shadow: var(--screen-debossed-shadow);
  padding: 4px;
  border-radius: var(--r-control);
  gap: 3px;
}

.rocker-tab {
  background: transparent;
  border: none;
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: calc(var(--r-control) - 3px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--transition-fast);
}

.rocker-tab:hover {
  color: var(--ink-primary);
}

.rocker-tab.active {
  background: var(--surface-raised);
  color: var(--ink-primary);
  box-shadow: var(--btn-raised-shadow);
}

/* Segmented Hardware Progress Meter */
.meter-track {
  height: 10px;
  background: var(--surface-debossed);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981 0%, #38bdf8 60%, #a855f7 100%);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Micro Screw / Chamfer Details */
.screw-head {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #334155 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.6);
  position: relative;
}

.screw-head::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%) rotate(45deg);
}