// Material (checkboxes, buttons, tooltips of the grid) in the synthwave colors + @jambotron/aria-grid styles
@use '@angular/material' as mat;
@use '@jambotron/aria-grid/styles/aria-grid';

html {
  color-scheme: dark;
  @include mat.theme((
    color: (primary: mat.$cyan-palette, tertiary: mat.$magenta-palette, theme-type: dark),
    typography: (plain-family: 'Rajdhani, sans-serif', brand-family: 'Orbitron, sans-serif'),
    density: -1
  ));
  @include mat.checkbox-overrides((
    selected-icon-color: var(--secondary-color),
    selected-hover-icon-color: var(--secondary-color),
    selected-focus-icon-color: var(--secondary-color),
    selected-checkmark-color: #0d0221
  ));
  @include mat.tooltip-overrides((container-color: #1a1033, supporting-text-color: #e2e8f0));
}

// grid tokens → synthwave
:root {
  --jt-accent: var(--secondary-color);
  --jt-accent-text: var(--secondary-color);
  --jt-on-accent: #0d0221;
  --jt-danger: #ff4d6d;
  --jt-danger-text: #ff8fa3;
  --jt-text: #e2e8f0;
  --jt-text-muted: #94a3b8;
  --jt-text-disabled: rgba(226, 232, 240, 0.4);
  --jt-divider: rgba(0, 240, 255, 0.14);
  --jt-field-bg: rgba(2, 6, 23, 0.6);
  --jt-field-border: rgba(0, 240, 255, 0.35);
  --jt-focus-ring: 0 0 0 3px var(--highlight-color);
  --jt-glow-accent: 0 0 12px var(--glow-color);
  --jt-popup-bg: rgba(10, 5, 24, 0.97);
  --jt-popup-border: rgba(255, 0, 127, 0.45);
  --jt-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 0, 127, 0.25);
  --jt-radius-sm: 8px;
  --jt-radius-md: 12px;
}

.jt-table {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;

  th {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-color);
  }

  tbody tr:hover td {
    background: rgba(0, 240, 255, 0.06);
  }
}

.mat-icon {
  vertical-align: middle;
}