/* Bold, Large-Format, Mobile-First Styles */

:root {
  font-size: 17px;
}

@media (max-width: 640px) {
  :root {
    font-size: 18px;
  }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure all inputs and buttons are large and prevent iOS auto-zoom */
input, select, textarea, button {
  font-size: 1rem;
  -webkit-tap-highlight-color: transparent;
}

/* Chunky, Tactile Range Sliders for Touch Screens */
.mobile-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: #e2e8f0;
  border-radius: 9999px;
  outline: none;
  margin: 16px 0 10px 0;
  touch-action: pan-y;
  cursor: pointer;
}

/* WebKit (Safari, iOS Safari, Chrome) */
.mobile-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #4f46e5;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-range-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
  background: #eef2ff;
  border-color: #4338ca;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.45);
}

/* Firefox */
.mobile-range-slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #4f46e5;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
  cursor: pointer;
}

.mobile-range-slider::-moz-range-track {
  height: 16px;
  background: #e2e8f0;
  border-radius: 9999px;
}

/* Gray Disabled Theme for Days Without Lessons */
body.theme-no-lesson {
  background-color: #f1f5f9;
}

.theme-no-lesson header {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.no-lesson-card {
  background: #ffffff;
  border: 3px dashed #94a3b8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.no-lesson-disabled-btn {
  background: #cbd5e1 !important;
  color: #64748b !important;
  cursor: not-allowed !important;
  border: 2px solid #94a3b8 !important;
}

/* Hide scrollbar for clean horizontal swipe on mobile */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}