/**
 * ============================================================================
 * World of Corneo — EyeBank™ Clinical Suite
 * CLINICAL STREAK RETINOSCOPY STYLESHEET (EyeBank Signature Standard)
 * Visual Style: EyeBank™ / Plus Jakarta Sans / JetBrains Mono
 * Clinical Director: Optom. Shubhankar Majumder (The Visionary & Owner)
 * ============================================================================
 */

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body, 'Lato', -apple-system, BlinkMacSystemFont, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* Tactile Trial Dial Controls (Matching EyeBank Core) */
.dial-pod {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .dial-pod {
  background: #1e293b;
  border-color: #334155;
}

.dial-pod:focus-within {
  border-color: #2563eb;
  box-shadow: 0 4px 14px -2px rgba(37, 99, 235, 0.15);
}

.dark .dial-pod:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 4px 14px -2px rgba(96, 165, 250, 0.2);
}

/* Stepper Button (+ / -) */
.stepper-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  background: #f1f5f9;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  transition: all 0.1s ease;
  cursor: pointer;
  user-select: none;
}

.stepper-btn:hover {
  background: #e2e8f0;
}

.stepper-btn:active {
  transform: scale(0.92);
  background: #cbd5e1;
}

.dark .stepper-btn {
  background: #334155;
  color: #f8fafc;
  border-color: #475569;
}

.dark .stepper-btn:hover {
  background: #475569;
}

.dark .stepper-btn:active {
  background: #64748b;
}

/* Tactile Primary Action Buttons with optical shimmer */
.btn-action-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, background-color 0.16s ease;
}

.btn-action-primary:active {
  transform: scale(0.975);
}

.btn-action-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.btn-action-primary:hover::after {
  left: 140%;
  transition: left 0.75s ease-in-out;
}

/* Pulse beacon animation */
@keyframes pulse-emerald {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pulse-emerald {
  animation: pulse-emerald 1.8s infinite;
}

/* Modal Backdrop Blur */
.modal-backdrop {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ==========================================================================
 * CINEMATIC LUXURY VIEW TRANSITIONS & DRAMATIC DARK MODE
 * ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.dark::view-transition-old(root) {
  z-index: 1;
}
.dark::view-transition-new(root) {
  z-index: 9999;
}
::view-transition-old(root) {
  z-index: 9999;
}
::view-transition-new(root) {
  z-index: 1;
}

/* Element Smooth Transitions during Theme Toggle */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: 0s !important;
}

/* Dramatic Radial Ripple Wave (CSS Fallback for all environments) */
.theme-ripple-wave {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease-out;
}

/* Icon Elastic Spin Animation */
.theme-icon-spin {
  animation: themeIconSpin 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes themeIconSpin {
  0% { transform: scale(0.6) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1.25) rotate(190deg); opacity: 0.8; }
  100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* Tactile Refresh Spin Animation */
.spin-refresh {
  animation: refreshSpin 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes refreshSpin {
  0% { transform: rotate(0deg) scale(0.85); }
  50% { transform: rotate(180deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Horizontal Sliding Trial Rack Scrollbar-None */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
 * SYSTEM-WIDE ACTIVE SELECTION FONT WEIGHT ELEVATION
 * When any button, tab, pill, or chip is selected: bump font-weight slightly (600)
 * When unselected: keep natural regular/medium weight (400)
 * ========================================================================== */
.active,
[aria-selected="true"],
[data-active="true"],
.btn-selected,
.tab-active,
.is-selected,
.angle-btn.active,
.wd-tab.active,
.quick-chip.active,
#btnModeTraining.active,
#btnModeExam.active {
  font-weight: 600 !important;
}

.angle-btn:not(.active),
.wd-tab:not(.active),
.quick-chip:not(.active),
[aria-selected="false"] {
  font-weight: 400 !important;
}