/* NDT Theme — purple palette from NarzędziaDlaTworcow.pl */

:root {
  --radius: 0.75rem;
  --background: hsl(0 0% 100%);
  --foreground: hsl(266 51% 16%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(266 51% 16%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(266 51% 16%);
  --primary: hsl(286 86% 57%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(289 100% 97%);
  --secondary-foreground: hsl(270 60% 30%);
  --muted: hsl(285 100% 97%);
  --muted-foreground: hsl(271 22% 48%);
  --accent: hsl(276 100% 96%);
  --accent-foreground: hsl(270 60% 30%);
  --destructive: hsl(348 87% 60%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(283 68% 88%);
  --input: hsl(283 68% 88%);
  --ring: hsl(277 90% 61%);
  --chart-1: hsl(286 86% 57%);
  --chart-2: hsl(260 70% 60%);
  --chart-3: hsl(320 80% 55%);
  --chart-4: hsl(240 60% 65%);
  --chart-5: hsl(300 70% 50%);
  --sidebar: hsl(289 100% 97%);
  --sidebar-foreground: hsl(266 51% 16%);
  --sidebar-primary: hsl(286 86% 57%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(276 100% 96%);
  --sidebar-accent-foreground: hsl(270 60% 30%);
  --sidebar-border: hsl(283 68% 88%);
  --sidebar-ring: hsl(277 90% 61%);
}

.dark {
  --background: hsl(270 30% 8%);
  --foreground: hsl(280 20% 92%);
  --card: hsl(270 25% 12%);
  --card-foreground: hsl(280 20% 92%);
  --popover: hsl(270 25% 12%);
  --popover-foreground: hsl(280 20% 92%);
  --primary: hsl(286 86% 57%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(270 30% 18%);
  --secondary-foreground: hsl(280 20% 92%);
  --muted: hsl(270 25% 18%);
  --muted-foreground: hsl(271 15% 55%);
  --accent: hsl(270 30% 18%);
  --accent-foreground: hsl(280 20% 92%);
  --destructive: hsl(348 70% 45%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(270 20% 22%);
  --input: hsl(270 20% 22%);
  --ring: hsl(277 80% 55%);
  --chart-1: hsl(286 80% 65%);
  --chart-2: hsl(260 65% 70%);
  --chart-3: hsl(320 75% 65%);
  --chart-4: hsl(240 55% 70%);
  --chart-5: hsl(300 65% 60%);
  --sidebar: hsl(270 25% 10%);
  --sidebar-foreground: hsl(280 20% 92%);
  --sidebar-primary: hsl(286 80% 65%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(270 30% 18%);
  --sidebar-accent-foreground: hsl(280 20% 92%);
  --sidebar-border: hsl(270 20% 22%);
  --sidebar-ring: hsl(277 80% 55%);
}

/* Gradient background with ndtbg.svg */
body {
  background-color: #ffffff;
  background-image:
    url("/ndtbg.svg"),
    linear-gradient(135deg, #dbeafe 0%, #ffffff 50%, #f3e8ff 100%);
  background-size: 140%, cover;
  background-position:
    30% 30%,
    center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed;
  font-family: "Inter", sans-serif;
}

.dark body {
  background-color: hsl(270 30% 8%);
  background-image:
    url("/ndtbg.svg"),
    linear-gradient(
      135deg,
      hsl(270 30% 6%) 0%,
      hsl(270 30% 8%) 50%,
      hsl(280 25% 10%) 100%
    );
}

/* Glassmorphism — applied to Box via DesignSystemProvider */
.glass {
  background: hsl(0 0% 100% / 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(283 68% 88% / 0.3);
  box-shadow:
    0 4px 6px -1px hsl(283 68% 88% / 0.1),
    0 10px 15px -3px hsl(283 68% 88% / 0.15);
}
.glass:hover {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 10px 15px -3px hsl(283 68% 88% / 0.15),
    0 20px 25px -5px hsl(283 68% 88% / 0.2);
}
.dark .glass {
  background: hsl(270 25% 12% / 0.6);
  border-color: hsl(270 20% 22% / 0.4);
  box-shadow:
    0 4px 6px -1px hsl(0 0% 0% / 0.2),
    0 10px 15px -3px hsl(0 0% 0% / 0.3);
}

.glass:has([data-expanded]) {
  background: hsl(0 0% 100% / 1);
  backdrop-filter: none;
  border-color: hsl(283 68% 88% / 0.4);
  box-shadow:
    0 4px 6px -1px hsl(283 68% 88% / 0.15),
    0 10px 15px -3px hsl(283 68% 88% / 0.2);
}
.dark .glass:has([data-expanded]) {
  background: hsl(270 25% 12% / 1);
  border-color: hsl(270 20% 22% / 0.5);
  box-shadow:
    0 4px 6px -1px hsl(0 0% 0% / 0.3),
    0 10px 15px -3px hsl(0 0% 0% / 0.4);
}

/* ── Problem A: QuestionTabs footer — mobile layout (≤640px) ─────────────────
   QuestionTabs z @arcote.tech/arc-ds renderuje footer jako flex-row, co nie
   mieści się na 390px. Nadpisujemy na flex-col z wyśrodkowaniem.
   Selektor celuje w charakterystyczną kombinację klas fotera QuestionTabs:
   flex + items-center + justify-between + border-t + px-3 + py-2 + gap-2.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .flex.items-center.justify-between.border-t.px-3.py-2.gap-2 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
  }
  .flex.items-center.justify-between.border-t.px-3.py-2.gap-2 > .flex {
    width: 100%;
    justify-content: center;
  }
  .flex.items-center.justify-between.border-t.px-3.py-2.gap-2 > button {
    width: 100%;
    justify-content: center;
  }
}