import { describe, it, expect } from 'vitest';
import { boardV2Css } from '../src/server/board/styles.js';

describe('boardV2Css', () => {
  it('contains the glass surface tokens and keyframes', () => {
    const css = boardV2Css();
    expect(css).toContain('--b2-bg');
    expect(css).toContain('rgba(255,255,255,.045)'); // glass surface
    expect(css).toContain('@keyframes b2-rise');
    expect(css).toContain('@keyframes b2-fill');
    expect(css).toContain('@keyframes b2-ping');
  });
  it('respects prefers-reduced-motion', () => {
    expect(boardV2Css()).toContain('@media (prefers-reduced-motion: reduce)');
  });
  it('keeps kpi chips on a single line', () => {
    const css = boardV2Css();
    expect(css).toMatch(/\.b2-chips \{[^}]*flex-wrap: nowrap/);
    expect(css).toMatch(/\.b2-chips \{[^}]*overflow: hidden/);
  });
  it('switches the narrow board to document flow without changing the desktop breakpoint', () => {
    const css = boardV2Css();
    expect(css).toContain('@media (max-width: 1119px)');
    expect(css).toMatch(/@media \(max-width: 1119px\)[\s\S]*body \{[^}]*height: auto;[^}]*overflow-y: visible/);
    expect(css).toMatch(/@media \(max-width: 1119px\)[\s\S]*\.b2-main \{[^}]*height: auto/);
    expect(css).toMatch(/@media \(max-width: 1119px\)[\s\S]*\.cards \{[^}]*overflow-y: visible/);
  });
  it('keeps mobile KPIs in a compact 2x2 grid', () => {
    const css = boardV2Css();
    expect(css).toMatch(/@media \(max-width: 680px\)[\s\S]*body \{ padding-top: 142px/);
    expect(css).toMatch(/@media \(max-width: 560px\)[\s\S]*\.b2-kpis \{[^}]*repeat\(2/);
    expect(css).toMatch(/@media \(max-width: 560px\)[\s\S]*\.b2-miniarea, \.b2-chips, \.b2-cap-r, \.b2-pbar \{ display: none/);
  });
});