/**
 * Tool-specific styles — loaded deferred (non-critical CSS).
 *
 * @package Mouse_Tester_Online
 */

/* ==========================================================================
   Mouse Button Diagram (Click Test)
   ========================================================================== */

#mouse-diagram {
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

.mouse-btn {
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   Polling Rate Chart
   ========================================================================== */

#polling-chart {
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
}

/* ==========================================================================
   DPI Tracking Area
   ========================================================================== */

#dpi-track-area:active {
  border-color: var(--color-accent-primary) !important;
  background: rgba(108, 92, 231, 0.03);
}

/* ==========================================================================
   Scroll Test Zone Animations
   ========================================================================== */

#scroll-test-zone {
  transition: border-color 0.2s, background 0.15s;
}

#scroll-direction-display {
  font-size: 3rem;
  transition: transform 0.15s ease, color 0.15s;
}

/* ==========================================================================
   CPS Test Click Area
   ========================================================================== */

#cps-test-tool .tool-area,
#cps-test-tool #tool-area {
  transition: background 0.08s ease;
}

#cps-counter {
  transition: transform 0.08s ease;
}

/* ==========================================================================
   Calculator Input Grids
   ========================================================================== */

@media (max-width: 600px) {
  .input-group {
    min-width: 100%;
  }
}

/* ==========================================================================
   Result Cards — Enhanced States
   ========================================================================== */

.result-card {
  transition: all 0.25s ease;
}

.result-card:hover {
  border-color: var(--color-border-hover);
}

.result-card--active {
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 20px var(--color-accent-glow);
}

.result-card__value {
  transition: color 0.2s ease;
}

/* ==========================================================================
   Tool Area States
   ========================================================================== */

.tool-area[style*="crosshair"]:hover {
  background: rgba(108, 92, 231, 0.02);
}

/* ==========================================================================
   Pro Scale Visualization (eDPI)
   ========================================================================== */

#edpi-scale {
  transition: opacity 0.3s ease;
}

/* ==========================================================================
   Scroll Log Styling
   ========================================================================== */

#scroll-log::-webkit-scrollbar {
  width: 4px;
}

#scroll-log::-webkit-scrollbar-track {
  background: transparent;
}

#scroll-log::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

#scroll-log::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .mobile-nav,
  .menu-toggle,
  .tool-controls,
  .related-tools {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .tool-container {
    border: 1px solid #ccc;
  }
}