/* Shared Context Menu Styles */
/* This file contains the styles used by the freeform context menu system */

.formas-ctx { 
  position: fixed !important; 
  display: none; 
  z-index: 10000 !important;
  isolation: isolate;
  transform: translateZ(0);
  background: rgba(20,24,33,0.35); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: 12px; 
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.30); 
  min-width: 170px; 
  user-select: none; 
}

.formas-ctx .item { 
  display: flex; 
  align-items: center; 
  gap: 8px;
  padding: 6px 10px; 
  font: 500 12px system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color: #e7ebf0; 
  cursor: pointer; 
  border-radius: 8px; 
}

.formas-ctx .item-icon { 
  width: 16px; 
  height: 16px; 
  flex-shrink: 0; 
  opacity: 0.9; 
  filter: invert(1); 
}

/* Special case for USE IMAGE icon - don't invert */
.formas-ctx .item-icon.use-icon { 
  filter: none; 
}

.formas-ctx .item-label { 
  flex: 1; 
}

.formas-ctx .item:hover { 
  background: rgba(255,255,255,0.06); 
}

.formas-ctx .item.submenu-open, 
.formas-ctx .item.submenu-open:hover { 
  background: rgba(255,255,255,0.14); 
}

.formas-ctx .submenu .item:hover { 
  background: rgba(255,255,255,0.08); 
}

.formas-ctx .item.has-sub:hover .right { 
  opacity: 1; 
  transform: translateX(2px); 
}

.formas-ctx .item.disabled { 
  opacity: 0.45; 
  cursor: not-allowed; 
}

.formas-ctx .sep { 
  height: 1px; 
  background: rgba(255,255,255,0.08); 
  margin: 6px 0; 
}

.formas-ctx .right { 
  margin-left: auto; 
  opacity: 0.8; 
  transition: all 0.2s ease; 
}

.formas-ctx .submenu { 
  position: absolute; 
  display: none; 
  top: 0; 
  left: 100%;
  margin-left: 6px; 
  z-index: 10001 !important; 
  background: rgba(20,24,33,0.35); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: 12px; 
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.30); 
  min-width: 170px; 
  user-select: none;
  opacity: 0; 
  transform: scale(0.95) translateX(-10px);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 
}

.formas-ctx .submenu.show { 
  opacity: 1; 
  transform: scale(1) translateX(0); 
}

.formas-ctx .submenu::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: -15px; 
  width: 15px; 
  height: 100%; 
  background: transparent; 
  z-index: 1; 
}

.formas-ctx.slider-mode { 
  padding: 12px 14px; 
}

.formas-ctx .slider-wrap { 
  display: flex; 
  align-items: center; 
  width: 150px; 
}

.formas-ctx .slider-wrap input[type=range] { 
  -webkit-appearance: none; 
  appearance: none; 
  width: 100%; 
  height: 6px; 
  border-radius: 3px; 
  background: rgba(255,255,255,0.25); 
  outline: none; 
}

.formas-ctx .slider-wrap input[type=range]::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  appearance: none; 
  width: 16px; 
  height: 16px; 
  border-radius: 50%; 
  background: #fff; 
  cursor: pointer; 
}

.formas-ctx .slider-wrap input[type=range]::-moz-range-thumb { 
  width: 16px; 
  height: 16px; 
  border-radius: 50%; 
  background: #fff; 
  cursor: pointer; 
  border: none; 
}

.formas-ctx .slider-wrap input[type=range]:hover { 
  background: rgba(255,255,255,0.35); 
}

.formas-ctx .slider-wrap input[type=range]::-webkit-slider-thumb:hover { 
  background: #f0f0f0; 
}

/* Slider submenu specific styles */
.formas-ctx .slider-submenu { 
  position: absolute; 
  display: none; 
  top: 0; 
  left: 100%; 
  margin-left: 6px; 
  z-index: 10001 !important;
  background: rgba(20,24,33,0.35); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: 12px; 
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.30); 
  min-width: 180px; 
  user-select: none;
  opacity: 0; 
  transform: scale(0.95) translateX(-10px);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.formas-ctx .slider-submenu.show { 
  opacity: 1; 
  transform: scale(1) translateX(0); 
}

/* Brush-size slider visual style reuse */
.formas-ctx .thickness-label { 
  color: #e7ebf0; 
  font-size: 9px; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  margin: 0 0 6px 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.formas-ctx .thickness-value { 
  color: #e7ebf0; 
  font-size: 11px; 
  font-weight: 700; 
  margin: 0 0 0 8px; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; 
  min-width: 28px; 
  text-align: right;
}

.formas-ctx .thickness-slider-wrap { 
  display: flex; 
  align-items: center; 
  width: 160px; 
}

.formas-ctx .thickness-slider { 
  -webkit-appearance: none; 
  appearance: none; 
  width: 100%; 
  height: 6px; 
  border-radius: 3px; 
  background: rgba(255,255,255,0.25); 
  outline: none; 
  cursor: pointer;
}

.formas-ctx .thickness-slider::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  appearance: none; 
  width: var(--handle-size, 12px); 
  height: var(--handle-size, 12px); 
  border-radius: 50%; 
  background: #fff; 
  cursor: pointer; 
}

.formas-ctx .thickness-slider::-moz-range-thumb { 
  width: var(--handle-size, 12px); 
  height: var(--handle-size, 12px); 
  border-radius: 50%; 
  background: #fff; 
  cursor: pointer; 
  border: none;
}

.formas-ctx .thickness-slider:hover { 
  background: rgba(255,255,255,0.35); 
}

.formas-ctx .thickness-slider::-webkit-slider-thumb:hover { 
  background: #f0f0f0; 
}

/* ================================================
   BRUSH CONTEXT MENU - Cleaned & Unified Styles
   ================================================ */

/* CSS Custom Properties */
#brushContextMenu {
  --menu-bg: rgba(20, 24, 33, 0.35);
  --menu-blur: 12px;
  --menu-border: rgba(255, 255, 255, 0.08);
  --menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --menu-padding: 16px 14px; /* More vertical padding */
  --menu-width: 260px; /* Increased from 220px */
  
  --track-height: 6px;
  --thumb-size: 14px;
  --thumb-padding: calc((var(--thumb-size) - var(--track-height)) / 2);
  
  --track-bg: rgba(255, 255, 255, 0.25);
  --track-bg-hover: rgba(255, 255, 255, 0.35);
  --thumb-bg: #ffffff;
  --thumb-bg-hover: #f0f0f0;
  
  --text-primary: #e7ebf0;
  --text-secondary: rgba(255, 255, 255, 0.9);
  --text-muted: #aaa;
  
  --value-bg: rgba(255, 255, 255, 0.10);
  --value-border: rgba(255, 255, 255, 0.20);
}

/* Main Menu Container */
#brushContextMenu.formas-ctx {
  background: var(--menu-bg);
  backdrop-filter: blur(var(--menu-blur));
  -webkit-backdrop-filter: blur(var(--menu-blur));
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  padding: var(--menu-padding);
  min-width: var(--menu-width);
  max-width: var(--menu-width);
  user-select: none;
}

/* Row Layout */
#brushContextMenu .contextSliderRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0; /* Increased from 10px */
  height: calc(var(--track-height) + var(--thumb-padding) * 2);
  font-size: 12px;
}

#brushContextMenu .contextSliderRow:first-child {
  margin-top: 8px;
}

#brushContextMenu .contextSliderRow:last-child {
  margin-bottom: 8px;
}

/* Labels */
#brushContextMenu .contextSliderRow label {
  width: 80px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Slider Container */
#brushContextMenu .contextSliderWrapper {
  flex: 1;
  min-width: 100px;
  position: relative;
}

/* Range Input Base Styles */
#brushContextMenu .contextSliderWrapper input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(var(--track-height) + var(--thumb-padding) * 2);
  padding: var(--thumb-padding) 0;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  margin: 0;
  
  /* Safari/WebKit backdrop-filter fix */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
  touch-action: pan-x;
}

/* Track Styles - WebKit */
#brushContextMenu .contextSliderWrapper input[type="range"]::-webkit-slider-runnable-track {
  height: var(--track-height);
  border-radius: calc(var(--track-height) / 2);
  background: var(--track-bg);
  transition: background 0.2s ease;
}

#brushContextMenu .contextSliderWrapper input[type="range"]:hover::-webkit-slider-runnable-track {
  background: var(--track-bg-hover);
}

/* Track Styles - Firefox */
#brushContextMenu .contextSliderWrapper input[type="range"]::-moz-range-track {
  height: var(--track-height);
  border-radius: calc(var(--track-height) / 2);
  background: var(--track-bg);
  border: none;
}

#brushContextMenu .contextSliderWrapper input[type="range"]:hover::-moz-range-track {
  background: var(--track-bg-hover);
}

/* Thumb Styles - WebKit */
#brushContextMenu .contextSliderWrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-bg);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-top: calc(-1 * var(--thumb-padding));
  cursor: pointer;
  transition: all 0.2s ease;
}

#brushContextMenu .contextSliderWrapper input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--thumb-bg-hover);
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Thumb Styles - Firefox */
#brushContextMenu .contextSliderWrapper input[type="range"]::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-bg);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

#brushContextMenu .contextSliderWrapper input[type="range"]:hover::-moz-range-thumb {
  background: var(--thumb-bg-hover);
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Value Display */
#brushContextMenu .contextSliderValue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--value-bg);
  border: 1px solid var(--value-border);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  margin-left: 8px;
}

/* Unit Display */
#brushContextMenu .contextSliderUnit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--value-bg);
  border: 1px solid var(--value-border);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  opacity: 0.85;
  flex-shrink: 0;
  margin-left: 6px;
}

/* Legacy Thickness Slider Override (ensure consistency) */
#brushContextMenu #brushThicknessSlider {
  all: unset !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: calc(var(--track-height) + var(--thumb-padding) * 2) !important;
  padding: var(--thumb-padding) 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}

#brushContextMenu #brushThicknessSlider::-webkit-slider-runnable-track {
  height: var(--track-height) !important;
  border-radius: calc(var(--track-height) / 2) !important;
  background: var(--track-bg) !important;
}

#brushContextMenu #brushThicknessSlider:hover::-webkit-slider-runnable-track {
  background: var(--track-bg-hover) !important;
}

#brushContextMenu #brushThicknessSlider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: var(--thumb-size) !important;
  height: var(--thumb-size) !important;
  border-radius: 50% !important;
  background: var(--thumb-bg) !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  margin-top: calc(-1 * var(--thumb-padding)) !important;
  cursor: pointer !important;
}

#brushContextMenu #brushThicknessSlider:hover::-webkit-slider-thumb {
  background: var(--thumb-bg-hover) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important;
}

#brushContextMenu #brushThicknessSlider::-moz-range-track {
  height: var(--track-height) !important;
  border-radius: calc(var(--track-height) / 2) !important;
  background: var(--track-bg) !important;
  border: none !important;
}

#brushContextMenu #brushThicknessSlider::-moz-range-thumb {
  width: var(--thumb-size) !important;
  height: var(--thumb-size) !important;
  border-radius: 50% !important;
  background: var(--thumb-bg) !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
}

#brushContextMenu #brushThicknessSlider:hover::-moz-range-thumb {
  background: var(--thumb-bg-hover) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important;
}