/* ============ Мост Shoelace → дизайн-система Hodlometer ============
   Подключается ПОСЛЕ vendor/shoelace/themes/{light,dark}.css и app.css.
   Переопределяет только те токены Shoelace, которые видны в UI. */

:root,
:root.sl-theme-dark {
  --sl-font-sans: var(--font);
  --sl-font-serif: var(--font-display);
  --sl-font-size-small: var(--fs-xs);
  --sl-font-size-medium: var(--fs-base);

  --sl-border-radius-small: var(--radius-xs);
  --sl-border-radius-medium: var(--radius-s);
  --sl-border-radius-large: var(--radius-s);
  --sl-border-radius-x-large: var(--radius);

  /* Нейтральная шкала — из наших токенов, чтобы панели/меню совпадали с карточками */
  --sl-color-neutral-0: var(--card);
  --sl-color-neutral-50: var(--card-2);
  --sl-color-neutral-100: var(--neutral-bg);
  --sl-color-neutral-200: var(--line-soft);
  --sl-color-neutral-300: var(--line);
  --sl-color-neutral-400: var(--muted);
  --sl-color-neutral-500: var(--muted);
  --sl-color-neutral-600: var(--ink2);
  --sl-color-neutral-700: var(--ink2);
  --sl-color-neutral-800: var(--ink);
  --sl-color-neutral-900: var(--ink);
  --sl-color-neutral-1000: var(--ink);

  /* Бренд и статусы — из наших токенов, чтобы кнопки/бейджи Shoelace совпадали с .btn и .chip */
  --sl-color-primary-50: var(--brand-bg);
  --sl-color-primary-100: var(--brand-bg);
  --sl-color-primary-500: var(--brand-2);
  --sl-color-primary-600: var(--brand);
  --sl-color-primary-700: var(--brand-hover);
  --sl-color-primary-800: var(--brand-ink);

  --sl-color-success-500: var(--up);
  --sl-color-success-600: var(--up);
  --sl-color-danger-500: var(--down);
  --sl-color-danger-600: var(--down);
  --sl-color-warning-500: var(--warn);
  --sl-color-warning-600: var(--warn);

  --sl-panel-background-color: var(--card);
  --sl-panel-border-color: var(--line);

  --sl-tooltip-background-color: var(--tip-bg);
  --sl-tooltip-color: var(--tip-ink);
  --sl-tooltip-border-radius: var(--radius-s);
  --sl-tooltip-font-size: var(--fs-xs);
  --sl-tooltip-line-height: 1.45;
  --sl-tooltip-padding: var(--space-2) var(--space-3);
  --sl-tooltip-arrow-size: 5px;

  --sl-focus-ring-color: var(--focus);
  --sl-focus-ring-width: 2px;

  --sl-shadow-medium: var(--shadow);
  --sl-shadow-large: var(--shadow);
  --sl-shadow-x-large: var(--shadow);

  --sl-overlay-background-color: rgba(16, 24, 40, .38);
}

:root[data-theme="dark"] {
  --sl-overlay-background-color: rgba(0, 0, 0, .6);
}

/* sl-icon рисует иконку из спрайта Lucide — контурную, а не заливкой */
sl-icon::part(svg) {
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Пока компонент не определён — не показываем «сырой» контент */
:not(:defined) { visibility: hidden; }
sl-tooltip:not(:defined) { visibility: visible; }

/* Меню пользователя */
sl-menu { border-radius: var(--radius-s); padding: var(--space-1); }
sl-menu-item::part(base) { border-radius: var(--radius-xs); font-size: var(--fs-base); }
sl-menu-item::part(prefix) { margin-inline-end: 2px; }
sl-menu-label::part(base) { font-size: var(--fs-xs); color: var(--muted); padding-bottom: var(--space-1); }
sl-menu-item .ic { color: var(--muted); margin-right: var(--space-2); }
sl-menu-item[checked] .ic { color: var(--brand); }

/* Drawer мобильной навигации */
sl-drawer::part(panel) { background: var(--card); }
sl-drawer::part(header) { padding-bottom: 0; }
sl-drawer::part(title) { font-size: var(--fs-h3); font-weight: 700; }
sl-drawer::part(body) { padding-top: var(--space-4); }

/* Диалоги подтверждения */
sl-dialog::part(panel) { border-radius: var(--radius); background: var(--card); }
sl-dialog::part(title) { font-size: var(--fs-h3); font-weight: 700; font-family: var(--font-display); }
sl-dialog::part(footer) { display: flex; gap: var(--space-2); justify-content: flex-end; }

sl-divider { --color: var(--line); }