/* ===========================================
   JOINT-MAPPER.CSS - DAS28 Assessment Styles
   Extends base.css and components.css
   ===========================================
   
   TABLE OF CONTENTS
   -----------------
   1. Standalone Theme (for non-SPA use)
   2. Joint State Colors
   3. Mapper Layout
   4. Body Map Card
   5. Manual Mode Overlay
   6. Joint Markers
   7. Joint Info Strip
   8. Legend
   9. Results Panel
   10. Lab Inputs Card
   11. Score Panel
   12. Action Buttons
   13. Toast Notifications
   14. Print Styles
   
   Note: Page theme (data-page="das28") is defined in variables.css
   =========================================== */

/* -------------------------------------------
   STANDALONE THEME (when not in multi-page app)
   Uses --das28-primary from variables.css
   ------------------------------------------- */
body.das28-standalone {
  --theme-primary: var(--das28-primary);
  --theme-dark: #8B6914;
  --theme-light: rgba(184, 134, 11, 0.1);
  --theme-border: #D4A017;
}

/* -------------------------------------------
   JOINT STATE COLORS
   ------------------------------------------- */
:root {
  --joint-normal: #FFFFFF;
  --joint-normal-stroke: #768692;
  --joint-tender: #FCD34D;
  --joint-tender-stroke: #D97706;
  --joint-swollen: #F87171;
  --joint-swollen-stroke: #DC2626;
  --joint-both-outer: #FCD34D;
  --joint-both-inner: #F87171;
  
  /* Body silhouette */
  --body-fill: #E8EDEE;
  --body-fill-light: #F5F7F8;
  --body-stroke: #B8C4CB;
  
  /* Score categories */
  --score-remission: #059669;
  --score-low: #10B981;
  --score-moderate: #D97706;
  --score-high: #DC2626;
  
  /* Warning */
  --warning-color: #DC2626;
  --warning-bg: rgba(220, 38, 38, 0.08);
}

[data-theme="dark"] {
  --body-fill: #2D343A;
  --body-fill-light: #343B42;
  --body-stroke: #4A545C;
  --joint-normal: #3D454C;
  --joint-normal-stroke: #6B7680;
  
  --das-gold-light: rgba(184, 134, 11, 0.2);
  
  /* Adjusted joint state colors for dark mode */
  --joint-tender: #FBBF24;
  --joint-tender-stroke: #F59E0B;
  --joint-swollen: #F87171;
  --joint-swollen-stroke: #EF4444;
  --joint-both-inner: #F87171;
  
  /* Score colors adjusted for dark backgrounds */
  --score-remission: #34D399;
  --score-low: #6EE7B7;
  --score-moderate: #FBBF24;
  --score-high: #F87171;
  
  --warning-bg: rgba(239, 68, 68, 0.15);
}

/* Dark mode specific overrides */
[data-theme="dark"] .body-map-wrapper {
  background: var(--bg-elevated);
}

[data-theme="dark"] .joint-outer {
  fill: var(--bg-elevated);
}

[data-theme="dark"] .count-box,
[data-theme="dark"] .inputs-card,
[data-theme="dark"] .score-panel {
  background: var(--bg-elevated);
}

[data-theme="dark"] .input-group input:focus {
  box-shadow: 
    0 0 0 2px var(--bg-elevated),
    0 0 0 4px var(--theme-primary);
}

[data-theme="dark"] .score-bar-track {
  background: var(--bg-primary);
}

[data-theme="dark"] .joint-info {
  background: var(--bg-primary);
}

[data-theme="dark"] .legend-dot.normal {
  background: var(--joint-normal);
  border-color: var(--joint-normal-stroke);
}

[data-theme="dark"] .toast {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .actions-row .btn-secondary {
  background: var(--bg-primary);
}

@media (any-hover: hover) {
  [data-theme="dark"] .actions-row .btn-secondary:hover {
    background: var(--bg-elevated);
  }
}

/* -------------------------------------------
   MAPPER LAYOUT
   ------------------------------------------- */

/* Override base.css page-content max-width for wider layout */
body.das28-standalone .page-content,
[data-page="das28"] .page-content {
  max-width: var(--layout-wide);
}

.mapper-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .mapper-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
  
  .body-map-wrapper {
    flex: 1;
    min-width: 420px;
  }
  
  .results-panel {
    width: 300px;
    flex-shrink: 0;
  }
}

/* -------------------------------------------
   BODY MAP CARD
   ------------------------------------------- */
.body-map-wrapper {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--theme-primary);
  transition: background-color var(--transition-slow), border-color var(--transition-slow);
}

.body-map-container {
  position: relative;
}

.body-map {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity var(--transition-slow), filter var(--transition-slow);
}

.body-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Body outline */
.body-outline {
  transition: opacity var(--duration-base);
}

/* -------------------------------------------
   MANUAL MODE OVERLAY
   ------------------------------------------- */
.manual-mode-overlay {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.body-map-wrapper.manual-mode .manual-mode-overlay {
  display: flex;
}

.return-to-map-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 2rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: 
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: var(--shadow-md);
}

@media (any-hover: hover) {
  .return-to-map-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--theme-primary);
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
  }
}

.return-to-map-btn:active {
  transform: scale(0.98);
}

.return-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

/* Manual mode - dimmed map */
.body-map-wrapper.manual-mode .body-map {
  opacity: 0.2;
  filter: grayscale(60%);
  pointer-events: none;
}

.body-map-wrapper.manual-mode .legend {
  opacity: 0.4;
}

/* Manual mode info strip style - subtle container, yellow text/dot only */
.joint-info[data-state="manual"] {
  background: var(--bg-primary);
  border-color: var(--border-color);
}

.joint-info[data-state="manual"] .joint-info-dot {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
}

.joint-info[data-state="manual"] .joint-info-text {
  color: var(--theme-primary);
}

/* -------------------------------------------
   JOINT MARKERS
   ------------------------------------------- */
.joint-group {
  cursor: pointer;
}

.joint-hitbox {
  fill: transparent;
  stroke: none;
  /* Larger hitbox for easier tapping */
}

.joint-outer {
  fill: var(--bg-elevated);
  stroke: var(--joint-normal-stroke);
  stroke-width: 1.5;
  transition: all var(--transition-fast);
  transform-box: fill-box;
  transform-origin: center;
}

.joint-inner {
  fill: var(--joint-normal);
  stroke: var(--joint-normal-stroke);
  stroke-width: 1;
  transition: all var(--transition-fast);
  transform-box: fill-box;
  transform-origin: center;
}

/* Joint states */
.joint-inner[data-state="1"] {
  fill: var(--joint-tender);
  stroke: var(--joint-tender-stroke);
}

.joint-inner[data-state="2"] {
  fill: var(--joint-swollen);
  stroke: var(--joint-swollen-stroke);
}

.joint-inner[data-state="3"] {
  fill: var(--joint-both-inner);
  stroke: var(--joint-swollen-stroke);
}

.joint-group:has(.joint-inner[data-state="3"]) .joint-outer {
  stroke: var(--joint-tender);
  stroke-width: 2.5;
}

/* Hover & Touch states */
@media (any-hover: hover) {
  .joint-group:hover .joint-outer {
    transform: scale(1.2);
  }

  .joint-group:hover .joint-inner {
    transform: scale(1.15);
  }
}

.joint-group.touching .joint-outer {
  transform: scale(1.2);
}

.joint-group.touching .joint-inner {
  transform: scale(1.15);
}

/* Pulse animation */
.joint-inner.pulse {
  animation: jointPulse var(--duration-base) var(--ease-out-back);
}

@keyframes jointPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* -------------------------------------------
   JOINT INFO STRIP
   ------------------------------------------- */
.joint-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  height: 44px; /* Fixed height to prevent layout shift */
  transition: 
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.joint-info-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--joint-normal-stroke);
  background: var(--joint-normal);
  flex-shrink: 0;
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.joint-info-text {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  transition: color var(--transition-fast);
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty/default state */
.joint-info[data-state="empty"] .joint-info-dot {
  opacity: 0.4;
}

/* Normal state */
.joint-info[data-state="0"] {
  background: var(--bg-primary);
  border-color: var(--border-color);
}

.joint-info[data-state="0"] .joint-info-dot {
  background: var(--joint-normal);
  border-color: var(--joint-normal-stroke);
}

.joint-info[data-state="0"] .joint-info-text {
  color: var(--text-secondary);
}

/* Tender state */
.joint-info[data-state="1"] {
  background: rgba(252, 211, 77, 0.15);
  border-color: var(--joint-tender-stroke);
}

.joint-info[data-state="1"] .joint-info-dot {
  background: var(--joint-tender);
  border-color: var(--joint-tender-stroke);
}

.joint-info[data-state="1"] .joint-info-text {
  color: var(--joint-tender-stroke);
}

/* Swollen state */
.joint-info[data-state="2"] {
  background: rgba(248, 113, 113, 0.12);
  border-color: var(--joint-swollen-stroke);
}

.joint-info[data-state="2"] .joint-info-dot {
  background: var(--joint-swollen);
  border-color: var(--joint-swollen-stroke);
}

.joint-info[data-state="2"] .joint-info-text {
  color: var(--joint-swollen-stroke);
}

/* Both state */
.joint-info[data-state="3"] {
  background: rgba(248, 113, 113, 0.18);
  border-color: var(--joint-swollen-stroke);
}

.joint-info[data-state="3"] .joint-info-dot {
  background: var(--joint-both-inner);
  border-color: var(--joint-tender);
  box-shadow: 0 0 0 2px var(--joint-tender);
}

.joint-info[data-state="3"] .joint-info-text {
  color: var(--joint-swollen-stroke);
}

/* -------------------------------------------
   LEGEND
   ------------------------------------------- */
.legend {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  transition: opacity 0.3s ease;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.legend-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid;
  flex-shrink: 0;
}

.legend-dot.normal {
  background: var(--joint-normal);
  border-color: var(--joint-normal-stroke);
}

.legend-dot.tender {
  background: var(--joint-tender);
  border-color: var(--joint-tender-stroke);
}

.legend-dot.swollen {
  background: var(--joint-swollen);
  border-color: var(--joint-swollen-stroke);
}

.legend-dot.both {
  background: var(--joint-both-inner);
  border-color: var(--joint-tender);
  box-shadow: 0 0 0 2px var(--joint-tender);
}

/* -------------------------------------------
   RESULTS PANEL
   ------------------------------------------- */
.results-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Joint Counts */
.counts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.count-box {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 85px;
  transition: 
    border-color var(--transition-fast), 
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

@media (any-hover: hover) {
  .count-box:hover {
    border-color: var(--theme-border);
    background: var(--theme-light);
    transform: translateY(-1px);
  }
}

.count-box:active {
  transform: scale(0.98);
}

.count-box.editing {
  cursor: default;
  border-color: transparent;
  background: var(--bg-elevated);
}

@media (any-hover: hover) {
  .count-box.editing:hover {
    transform: none;
    border-color: transparent;
    background: var(--bg-elevated);
  }
}

/* Highlight only the actively focused count box in manual mode */
.count-box.editing:focus-within {
  border-color: var(--theme-primary);
}

.count-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.count-value {
  display: block;
  height: 36px;
  line-height: 36px;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.count-box.has-value .count-value {
  color: var(--theme-primary);
}

/* Count input (manual mode) - High specificity to override base.css */
.count-box .count-input {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  width: 100%;
  max-width: 80px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0 auto;
  display: block;
  font-family: inherit;
  box-shadow: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.count-box .count-input::-webkit-outer-spin-button,
.count-box .count-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* No focus styling on the input itself - the outer box handles it */
.count-box .count-input:focus {
  outline: none;
  box-shadow: none;
}

/* Gold color only when has value */
.count-box .count-input.has-value {
  color: var(--theme-primary);
}

/* Selection styling for count inputs */
.count-box .count-input::selection {
  background: var(--theme-primary);
  color: var(--text-on-theme);
}

.count-box .count-input::-moz-selection {
  background: var(--theme-primary);
  color: var(--text-on-theme);
}

/* -------------------------------------------
   LAB INPUTS CARD
   ------------------------------------------- */
.inputs-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background-color 0.3s ease;
}

.input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.input-row label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.input-group input {
  width: 80px;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-align: center;
  color: var(--text-primary);
  box-shadow: var(--shadow-inset);
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
  appearance: textfield;
}

/* Hide number input spinners */
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-group input:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg-elevated),
    0 0 0 4px var(--theme-primary);
}

.input-group input::placeholder {
  color: var(--text-muted);
  font-weight: var(--font-normal);
}

.input-group input.invalid {
  background: var(--warning-bg);
  box-shadow: 
    inset 0 1px 3px rgba(220, 38, 38, 0.1),
    0 0 0 1px var(--warning-color);
}

.input-unit {
  font-size: var(--text-sm);
  color: var(--text-muted);
  min-width: 40px;
}

/* Input warning message */
.input-warning {
  display: none;
  width: 100%;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--warning-color);
  text-align: right;
  padding-top: 0.25rem;
}

.input-warning.visible {
  display: block;
}

/* Prevent zoom on iOS */
@supports (-webkit-touch-callout: none) {
  .input-group input {
    font-size: 16px;
  }
}

/* -------------------------------------------
   SCORE PANEL
   ------------------------------------------- */
.score-panel {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 2px solid transparent;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.score-panel:not(.has-score) {
    background: var(--accent-warning);
    border: 2px dashed var(--accent-warning-border);
}

.score-panel.has-score {
  border-color: var(--theme-primary);
}

.score-panel[data-category="remission"] { 
    border-color: var(--risk-remission-border);
    background: var(--risk-remission-bg);
}
.score-panel[data-category="low"] { 
    border-color: var(--risk-low-border);
    background: var(--risk-low-bg);
}
.score-panel[data-category="moderate"] { 
    border-color: var(--risk-med-border);
    background: var(--risk-med-bg);
}
.score-panel[data-category="high"] { 
    border-color: var(--risk-high-border);
    background: var(--risk-high-bg);
}

.score-header {
  margin-bottom: 0.5rem;
}

.score-title {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

.score-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.score-value {
  font-size: 3rem;
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-base);
}

.score-panel.has-score .score-value {
  color: var(--theme-primary);
}

.score-panel[data-category="remission"] .score-value { color: var(--risk-remission-text); }
.score-panel[data-category="low"] .score-value { color: var(--risk-low-text); }
.score-panel[data-category="moderate"] .score-value { color: var(--risk-med-text); }
.score-panel[data-category="high"] .score-value { color: var(--risk-high-text); }

.score-category {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  transition: color var(--transition-base);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: transparent;
}

.score-panel[data-category="remission"] .score-category { 
    color: var(--risk-remission-text);
    background: rgba(5, 150, 105, 0.15);
}
.score-panel[data-category="low"] .score-category { 
    color: var(--risk-low-text);
    background: rgba(16, 185, 129, 0.15);
}
.score-panel[data-category="moderate"] .score-category { 
    color: var(--risk-med-text);
    background: rgba(245, 158, 11, 0.15);
}
.score-panel[data-category="high"] .score-category { 
    color: var(--risk-high-text);
    background: rgba(239, 68, 68, 0.15);
}

/* Score bar */
.score-bar {
  margin-top: 0.5rem;
}

.score-bar-track {
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.score-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--theme-primary);
  border-radius: 4px;
  transition: width var(--duration-bounce) var(--ease-out-expo), background var(--transition-base);
}

.score-thresholds {
  display: flex;
  justify-content: space-between;
  margin-top: 0.375rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
  position: relative;
}

.threshold-marker {
  position: absolute;
  transform: translateX(-50%);
}

/* -------------------------------------------
   ACTION BUTTONS
   ------------------------------------------- */
.actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Extend base .btn styles */
.actions-row .btn {
  padding: 0.875rem 1.25rem;
  font-size: var(--text-sm);
}

.actions-row .btn-primary {
  background: var(--theme-primary);
  color: var(--text-on-theme);
}

#btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#btn-copy svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (any-hover: hover) {
  .actions-row .btn-primary:hover {
    background: var(--theme-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}

.actions-row .btn-primary.copied {
  background: var(--score-remission);
}

.actions-row .btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: 
    0 0 0 1px var(--border-color),
    var(--shadow-xs);
}

@media (any-hover: hover) {
  .actions-row .btn-secondary:hover {
    background: var(--bg-primary);
    box-shadow: 
      0 0 0 1px var(--theme-primary),
      var(--shadow-sm);
  }
}

/* -------------------------------------------
   TOAST NOTIFICATIONS
   ------------------------------------------- */
.toast {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text-primary);
  color: var(--text-on-theme);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: transform var(--duration-drawer) var(--ease-out-expo), opacity var(--duration-drawer) ease-out;
  pointer-events: none;
  z-index: 100;
}

.toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* -------------------------------------------
   PRINT STYLES
   ------------------------------------------- */
@media print {
  .body-map-wrapper {
    box-shadow: none;
    border: 1px solid var(--border-print);
    border-top: 3px solid var(--theme-primary);
  }

  .count-box,
  .inputs-card,
  .score-panel {
    box-shadow: none;
    border: 1px solid var(--border-print);
  }
  
  .actions-row {
    display: none;
  }
  
  .manual-mode-overlay {
    display: none !important;
  }
}

@media (max-width: 480px) {
    .legend {
        gap: 0.5rem;
    }
    
    .legend-item {
        font-size: var(--text-xs);
    }
}