/* Wrapped in @layer legacy on 05.10 (Astro port): pre-port CSS, frozen. New code is Tailwind and always wins. */
@layer legacy {
/* Blackfox brand — one file every page links (rebrand 2026-10-04, Daniel: «CRM-fargene overalt»).
 * The Salgsdashbord look: navy-black, cyan, Questrial display, JetBrains Mono labels, DM Sans body, glass panels.
 * Shared parts live here once: the logo (home link, top left on every page), the demodata chip, the (i) hint,
 * and the footer. Pages keep their own layout CSS; they read these --bx-* tokens for anything that is Blackfox. */

:root {
  --bx-bg:        oklch(16% 0.015 260);          /* #0B0E14 */
  --bx-bg-deep:   oklch(12% 0.012 260);
  --bx-panel:     oklch(20.5% 0.018 260 / 0.72); /* #141922 as glass */
  --bx-panel-solid: oklch(20.5% 0.018 260);
  --bx-panel-hi:  oklch(24% 0.025 255 / 0.92);
  --bx-line:      oklch(36% 0.04 250 / 0.55);    /* #232D3B, lifted */
  --bx-line-hi:   oklch(60% 0.10 212 / 0.6);
  --bx-text:      oklch(93.5% 0.01 260);         /* #E5E9F0 */
  --bx-muted:     oklch(68% 0.03 255);           /* #8A97A8 */
  --bx-cyan:      oklch(80% 0.13 210);           /* #22D3EE */
  --bx-cyan-2:    oklch(72% 0.13 230);
  --bx-cyan-ink:  oklch(16% 0.015 260);
  --bx-green:     oklch(77% 0.15 163);           /* #34D399, CRM «done» */
  --bx-glow:      oklch(80% 0.13 210 / 0.16);
  --bx-glow-none: oklch(80% 0.13 210 / 0);
  --bx-shadow:    oklch(5% 0.01 260 / 0.6);
  --bx-scrim:     oklch(12% 0.012 260 / 0.78);

  --bx-font-display: var(--bxf-questrial), ui-sans-serif, system-ui, sans-serif;
  --bx-font-body:    var(--bxf-dm-sans), ui-sans-serif, system-ui, sans-serif;
  --bx-font-mono:    var(--bxf-jetbrains), ui-monospace, Consolas, monospace;

  --bx-s1: 0.25rem; --bx-s2: 0.5rem; --bx-s3: 0.75rem; --bx-s4: 1rem; --bx-s5: 1.5rem; --bx-s6: 2rem;
  --bx-pill: 999px;
  --bx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bx-fast: 160ms;
  --bx-gutter: 16px;
}
@media (min-width: 720px) { :root { --bx-gutter: 32px; } }

/* ── Logo: the home link, top left on every page ────────────────────────── */
.bx-logo { display: inline-flex; align-items: center; gap: var(--bx-s3); text-decoration: none; color: var(--bx-text); white-space: nowrap; flex-shrink: 0; }
.bx-logo img { width: 28px; height: 28px; display: block; }
.bx-logo span { font-family: var(--bx-font-body); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.28em; text-transform: uppercase; margin-right: -0.28em; }
.bx-logo:hover span { color: var(--bx-cyan); }
@media (max-width: 380px) { .bx-logo { gap: var(--bx-s2); } .bx-logo span { font-size: 0.78rem; letter-spacing: 0.2em; } }

/* ── Demodata chip ──────────────────────────────────────────────────────── */
.bx-chip {
  display: inline-flex; align-items: center; gap: var(--bx-s1);
  font-family: var(--bx-font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: lowercase;
  color: var(--bx-cyan); border: 1px solid var(--bx-line-hi); border-radius: var(--bx-pill);
  padding: 2px var(--bx-s2) 2px var(--bx-s3); white-space: nowrap;
}

/* ── (i) hint: short text hidden behind an icon. Click toggles, hover opens after a pause, Esc closes. ── */
.bx-info { position: relative; display: inline-flex; vertical-align: middle; }
.bx-info__btn {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 1px solid currentColor; background: transparent; color: inherit; opacity: 0.85;
  font: 600 0.72rem/1 var(--bx-font-mono); cursor: help;
}
.bx-info__btn:hover, .bx-info__btn[aria-expanded="true"] { opacity: 1; color: var(--bx-cyan); }
.bx-info__btn:focus-visible { outline: 2px solid var(--bx-cyan); outline-offset: 3px; }
.bx-info__text {
  position: absolute; z-index: 40; top: calc(100% + var(--bx-s2)); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(78vw, 20rem); margin: 0;
  background: var(--bx-panel-hi); color: var(--bx-text); border: 1px solid var(--bx-line); border-radius: 10px;
  padding: var(--bx-s3) var(--bx-s4); box-shadow: 0 16px 40px -16px var(--bx-shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 400 0.85rem/1.5 var(--bx-font-body); text-transform: none; letter-spacing: 0; text-align: left; white-space: normal;
}
.bx-info__text[hidden] { display: none; }
.bx-info--left .bx-info__text { left: 0; transform: none; }
.bx-info--right .bx-info__text { left: auto; right: 0; transform: none; }

/* ── Footer, same everywhere ────────────────────────────────────────────── */
.bx-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bx-s3) var(--bx-s6);
  padding: var(--bx-s5) var(--bx-gutter); border-top: 1px solid var(--bx-line);
  background: var(--bx-bg-deep); color: var(--bx-muted);
  font: 400 0.85rem/1.5 var(--bx-font-body);
}
.bx-foot__links { display: flex; flex-wrap: wrap; gap: var(--bx-s1) var(--bx-s5); margin: 0; padding: 0; list-style: none; }
.bx-foot a { color: var(--bx-muted); text-decoration: none; white-space: nowrap; }
.bx-foot a:hover { color: var(--bx-cyan); }
.bx-foot__org { font-family: var(--bx-font-mono); font-size: 0.72rem; letter-spacing: 0.04em; }
/* One-line version for full-screen pages (the chooser, the booking page). */
.bx-foot--line { justify-content: center; background: transparent; border-top: 0; padding: var(--bx-s3) var(--bx-gutter); font-size: 0.78rem; }
.bx-foot--line .bx-foot__links { gap: var(--bx-s1) var(--bx-s4); justify-content: center; }

@media (prefers-reduced-motion: reduce) { .bx-logo span { transition: none; } }
}