@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-size: 18px;
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
  @apply bg-background text-on-background;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Custom Range Slider Styling - Carbon Design */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: theme('colors.surface-container-high');
  border-radius: 0;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: theme('colors.primary');
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: theme('colors.primary');
  cursor: pointer;
  border-radius: 0;
  border: none;
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

/* Tab Styles */
.tab-btn {
  @apply transition-all cursor-pointer pb-2 border-b-2 border-transparent text-sm font-semibold uppercase tracking-wider text-secondary;
}

.tab-btn.active {
  @apply border-primary text-primary;
}

/* Utility to hide scrollbar but keep functionality */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Chart Container */
.chart-container {
  @apply relative w-full h-64 md:h-80;
}

/* Result Cards */
.result-card {
  @apply bg-surface border border-outline-variant p-6;
}

/* Inputs */
.input-field {
  @apply w-full bg-surface text-right pr-4 py-2 text-sm border-b border-outline focus:border-primary focus:ring-0 outline-none transition-colors;
}

/* Invalid Step-up Rows */
.stepup-row.is-invalid {
  opacity: 0.5;
  filter: grayscale(1);
  background-color: theme('colors.surface-container-high');
}

.stepup-row.is-invalid input {
  text-decoration: line-through;
}

.stepup-row.is-invalid::after {
  content: "Outside Duration";
  position: absolute;
  right: 40px;
  top: 4px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: theme('colors.error');
}

.stepup-row {
  position: relative;
}

/* Goal Badge Styles */
.goal-badge {
  @apply px-4 py-2 rounded-full border border-outline-variant bg-surface text-sm font-medium text-on-surface-variant cursor-pointer transition-all;
}

.goal-badge:hover {
  @apply border-primary text-primary bg-primary/5;
}

.goal-badge.active {
  @apply bg-primary text-white border-primary shadow-sm;
}