/**
 * two-row-scale.css
 * Last modified: v016.153 (2025-11-27)
 * Changes: Add colored icons mode toggle
 */

/* ============================================
   TWO-ROW SCALE SYSTEM
   Experience Level + Desire Level rows
   ============================================ */

/* Container */
.two-row-scale-container {
  max-width: var(--scale-w);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Slider Section (each row) */
.two-row-scale-container .slider-section {
  margin-bottom: 0;
}

/* Label container (for split labels) */
.two-row-scale-container .slider-label-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.two-row-scale-container .slider-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--theme-text-primary, #e0e0e0);
  margin-bottom: 1rem;
  display: block;
}

/* When in container, remove bottom margin */
.two-row-scale-container .slider-label-container .slider-label {
  margin-bottom: 0;
}

/* Centered label above feedback button (for "Discuss?") */
/* Same size/color as Experience Level and Desire Level labels */
.two-row-scale-container .slider-label-right {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--theme-text-primary, #e0e0e0);
  /* Same width as feedback button (1/7 of desire row) */
  flex: 0 0 calc((1 / 7) * 100% - 0.25rem);
}

/* Track (options container) */
.two-row-scale-container .slider-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Split track layout (for experience row with feedback on right) */
.two-row-scale-container .slider-track-split {
  justify-content: space-between;
}

/* Left group: Experience options (4 items, same width as 4/7 of desire row) */
.two-row-scale-container .slider-group-left {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 calc((4 / 7) * 100% - 0.25rem);
}

.two-row-scale-container .slider-group-left .slider-option {
  flex: 1;
}

/* Right group: Feedback button (1 item, same width as 1/7 of desire row) */
.two-row-scale-container .slider-group-right {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 calc((1 / 7) * 100% - 0.25rem);
}

.two-row-scale-container .slider-group-right .slider-option {
  flex: 1;
}

/* Individual option */
.two-row-scale-container .slider-option {
  flex: 1;
  min-width: 0; /* Allow flex items to shrink below content size */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  
  /* Prevent mobile long-press context menu and text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Hide actual radio/checkbox input */
.two-row-scale-container .slider-option input {
  display: none;
}

/* Icon/Emoji */
.two-row-scale-container .slider-icon {
  font-size: 2rem;
  line-height: 1;
  min-height: 2rem;
  max-height: 2rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s;
  filter: brightness(0.75) opacity(0.85);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  display: inline-block;
  text-align: center;
}

.two-row-scale-container .slider-option:hover .slider-icon {
  filter: brightness(0.85) opacity(0.92);
  transform: scale(1.1);
}

.two-row-scale-container .slider-option input:checked ~ .slider-icon {
  filter: brightness(1) opacity(1);
  transform: scale(1.15);
}

/* SVG Icon specific styles */
.two-row-scale-container .slider-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  /* Gray color when not selected - same gray as the bar */
  color: rgba(180, 180, 180, 0.7);
  filter: none; /* Override emoji filter */
  opacity: 1;
  transition: all 0.2s;
}

.two-row-scale-container .slider-icon-svg svg {
  width: 1.6rem;
  height: 1.6rem;
  transition: all 0.2s;
}

.two-row-scale-container .slider-option:hover .slider-icon-svg {
  color: rgba(200, 200, 200, 0.9);
  filter: none;
  transform: scale(1.1);
}

/* Selected SVG icon - uses the option color with glow */
.two-row-scale-container .slider-option input:checked ~ .slider-icon-svg {
  color: var(--option-color, #4f46e5);
  filter: drop-shadow(0 0 8px var(--option-color, #4f46e5));
  opacity: 1;
  transform: scale(1.15);
}

/* === COLORED ICONS MODE === */
/* When body has .colored-icons class, show colors but dimmed when not selected */
body.colored-icons .two-row-scale-container .slider-icon-svg {
  color: var(--option-color, #4f46e5);
  opacity: 0.55;
  filter: saturate(0.8);
}

body.colored-icons .two-row-scale-container .slider-option:hover .slider-icon-svg {
  color: var(--option-color, #4f46e5);
  opacity: 0.7;
  filter: saturate(0.9);
  transform: scale(1.1);
}

body.colored-icons .two-row-scale-container .slider-option input:checked ~ .slider-icon-svg {
  color: var(--option-color, #4f46e5);
  opacity: 1;
  filter: drop-shadow(0 0 8px var(--option-color, #4f46e5)) saturate(1);
  transform: scale(1.15);
}

/* Background bar under icon */
.two-row-scale-container .slider-bg {
  width: 100%;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  background: var(--theme-scale-bar-bg, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  position: relative;
  transition: all 0.2s;
  box-sizing: border-box;
}

.two-row-scale-container .slider-option:hover .slider-bg {
  background: var(--theme-scale-bar-hover, rgba(255, 255, 255, 0.2));
}

.two-row-scale-container .slider-option input:checked ~ .slider-bg {
  background: var(--option-color, #4f46e5);
  box-shadow: 0 0 12px var(--option-color, #4f46e5);
}

/* Label text under bar */
.two-row-scale-container .slider-label-text {
  font-size: 0.75rem;
  color: var(--theme-scale-label-dim, rgba(255, 255, 255, 0.5));
  margin-top: 0.25rem;
  text-align: center;
  transition: color 0.2s;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.two-row-scale-container .slider-option:hover .slider-label-text {
  color: var(--theme-scale-label-hover, rgba(255, 255, 255, 0.8));
}

.two-row-scale-container .slider-option input:checked ~ .slider-label-text {
  color: var(--theme-text-primary, #fff);
  font-weight: 600;
}

/* Tooltip (shown on hover, positioned above) */
.two-row-scale-container .tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--theme-tooltip-bg);
  color: var(--theme-tooltip-text);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  white-space: normal;
  max-width: 245px;
  width: max-content;
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 1000;
  box-shadow: 0 4px 12px var(--theme-tooltip-shadow);
}

.two-row-scale-container .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--theme-tooltip-border);
}

/* CRITICAL: Tooltip only on HOVER, not when checked */
.two-row-scale-container .slider-option:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-20px);
}

/* Smart positioning for edge options to prevent overflow */
/* First item and second item: align left */
.two-row-scale-container .slider-option:first-child .tooltip,
.two-row-scale-container .slider-option:nth-child(2) .tooltip {
  left: 0;
  transform: translateX(0) translateY(-10px);
}

.two-row-scale-container .slider-option:first-child:hover .tooltip,
.two-row-scale-container .slider-option:nth-child(2):hover .tooltip {
  transform: translateX(0) translateY(-20px);
}

.two-row-scale-container .slider-option:first-child .tooltip::after,
.two-row-scale-container .slider-option:nth-child(2) .tooltip::after {
  left: 1.5rem;
  transform: translateX(0);
}

/* Last item and second-to-last: align right */
.two-row-scale-container .slider-option:last-child .tooltip,
.two-row-scale-container .slider-option:nth-last-child(2) .tooltip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-10px);
}

.two-row-scale-container .slider-option:last-child:hover .tooltip,
.two-row-scale-container .slider-option:nth-last-child(2):hover .tooltip {
  transform: translateX(0) translateY(-20px);
}

.two-row-scale-container .slider-option:last-child .tooltip::after,
.two-row-scale-container .slider-option:nth-last-child(2) .tooltip::after {
  left: auto;
  right: 1.5rem;
  transform: translateX(0);
}

/* Mobile: narrower max-width to prevent overflow */
@media (max-width: 480px) {
  .two-row-scale-container .tooltip {
    max-width: 180px;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
}

/* Feedback option (inline with desire row) */
/* No border/outline - emoji is larger than container, making outline look odd */
/* Yellow bar provides sufficient visual distinction */

.two-row-scale-container .slider-option.feedback-option .slider-bg {
  background: transparent !important;
  border: 2px solid var(--theme-feedback-accent, #fbbf24);
  height: 8px;
  box-sizing: border-box;
  opacity: 0.5;
}

.two-row-scale-container .slider-option.feedback-option input:checked ~ .slider-bg {
  background: transparent !important;
  border: 2px solid var(--theme-feedback-accent, #fbbf24);
  box-shadow: 0 0 12px var(--theme-feedback-accent, #fbbf24);
  opacity: 1;
}

/* Old feedback section (removed) */
.two-row-scale-container .feedback-section {
  display: none;
  cursor: pointer;
  accent-color: var(--theme-feedback-accent, #fbbf24);
}

.two-row-scale-container .feedback-section label {
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--theme-text-primary, #e0e0e0);
}

/* Feedback textarea (shown when warn === 1) */
.two-row-scale-container .feedback-textarea {
  width: 100%;
  min-height: 80px;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
  border-radius: 0.5rem;
  color: var(--theme-text-primary, #e0e0e0);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

.two-row-scale-container .feedback-textarea:focus {
  outline: none;
  border-color: var(--accent-color, #fbbf24);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* ============================================
   COLOR VARIABLES FOR OPTION BARS
   ============================================ */

/* Colors are now set dynamically from scales.json via --option-color CSS custom property */
/* See TwoRowScale.js renderScaleOption() method for implementation */

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */
/* Note: Dark mode colors now handled via theme variables */
/* These legacy selectors kept for backwards compatibility */

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .two-row-scale-container .slider-icon {
    font-size: 1.6rem;
  }
  
  .two-row-scale-container .slider-label-text {
    font-size: 0.7rem;
  }
  
  .two-row-scale-container .slider-track {
    gap: 0.25rem;
  }
}