/*
 * app-design.css — visuelt løft af opslagsværket (app.html).
 *
 * Ligger oven på de eksisterende inline-styles og ændrer hverken indhold eller
 * funktion. Opslagsværket er et arbejdsværktøj, så ro og læsbarhed går forud:
 * dybde og glans er sat på det, man klikker på (situationskortene, knapperne),
 * ikke på teksten. Lyse regler er afgrænset med body:not(.dark); mørk tilstand
 * beholder sine egne regler.
 */

:root {
  --ad-ink: #142f4b;
  --ad-line: rgba(31, 56, 100, .13);
  --ad-shadow: 0 14px 30px -18px rgba(20, 47, 75, .55);
  --ad-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── Side og topbjælke ───────────────────────────────────────────────── */

body:not(.dark) {
  background:
    radial-gradient(900px 520px at 90% -90px, rgba(46, 117, 182, .17), transparent 62%),
    radial-gradient(760px 520px at -6% 10%, rgba(13, 110, 110, .11), transparent 64%),
    linear-gradient(180deg, #edf3fa, #f6f8fc 440px, var(--grey));
  background-attachment: fixed;
}

header {
  background: linear-gradient(115deg, #0c1e3d 0%, #1f3864 55%, #255188 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 14px 34px -18px rgba(8, 20, 45, .75);
}
header .logo {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(140deg, #5a9be0, #2a5aa6);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
}
header h1 { letter-spacing: -.02em; }
.hdr-search-btn,
.hdr-auth-btn,
.om-btn,
.hdr-forside {
  border-radius: 999px !important;
  backdrop-filter: blur(8px);
  transition: background .2s, transform .3s var(--ad-ease), box-shadow .3s;
}
.hdr-search-btn:hover,
.hdr-auth-btn:hover,
.om-btn:hover,
.hdr-forside:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .24) !important; }

/* ── Trinlinjen som en segmenteret kontrol ───────────────────────────── */

.steps {
  justify-content: center;
  gap: 8px;
  padding: 12px 14px 4px;
  background: transparent;
  border-bottom: 0;
}
body:not(.dark) .step {
  flex: 0 1 210px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #4a5b70;
  font-weight: 700;
  transition: background .25s, color .25s, box-shadow .3s, transform .3s var(--ad-ease);
}
body:not(.dark) .step:hover { transform: translateY(-1px); box-shadow: var(--ad-shadow); }
body:not(.dark) .step .step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2eaf5;
  color: #35506f;
  font-size: .7rem;
  font-weight: 800;
}
body:not(.dark) .step.active {
  background: linear-gradient(135deg, #2f7bd1, #1f56a3);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 26px -12px rgba(31, 86, 163, .8);
}
body:not(.dark) .step.active .step-num { background: rgba(255, 255, 255, .26); color: #fff; }

/* ── Genveje øverst: Alle teorier, Værktøjer, Naturfag ──────────────── */

.teori-quick-bar {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 16px 2px;
  gap: 10px;
}
body:not(.dark) .teori-quick-bar { background: transparent; border: 0; }
body:not(.dark) .teori-quick-btn {
  background: rgba(255, 255, 255, .92);
  color: var(--ad-ink);
  border: 1px solid var(--ad-line);
  box-shadow: 0 10px 22px -16px rgba(20, 47, 75, .6);
  font-weight: 750;
  text-decoration: none;
  transition: transform .3s var(--ad-ease), box-shadow .3s, background .2s;
}
body:not(.dark) .teori-quick-btn:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -16px rgba(20, 47, 75, .7);
}
body:not(.dark) .teori-quick-btn.ad-vaerktoejer {
  background: linear-gradient(135deg, #1f3864, #2f5c9a);
  color: #fff;
  border-color: transparent;
}
body:not(.dark) .teori-quick-btn.ad-vaerktoejer.open,
body:not(.dark) .teori-quick-btn.ad-vaerktoejer:hover { background: linear-gradient(135deg, #17305a, #2a5590); }
body:not(.dark) .teori-quick-btn.ad-natur {
  background: linear-gradient(135deg, #0d6e6e, #14908f);
  color: #fff;
  border-color: transparent;
}
body:not(.dark) .teori-quick-btn.ad-proc {
  background: linear-gradient(135deg, #0e9d87, #12c4a8);
  color: #fff;
  border-color: transparent;
}
body:not(.dark) .teori-quick-btn.ad-saar {
  background: linear-gradient(135deg, #9f1239, #be123c);
  color: #fff;
  border-color: transparent;
}
.teori-quick-btn:focus-visible { outline: 3px solid rgba(46, 117, 182, .4); outline-offset: 2px; }

/* ── Forsiden med situationer ────────────────────────────────────────── */

body:not(.dark) .section-title {
  font-size: clamp(1.45rem, 3.4vw, 2.05rem);
  font-weight: 850;
  letter-spacing: -.035em;
  color: #0f2447;
}
body:not(.dark) .section-sub { color: #55677c; font-size: .96rem; }

.problem-search input {
  height: 54px;
  padding-left: 44px;
  border-radius: 18px;
  border: 1px solid var(--ad-line);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 14px 30px -20px rgba(20, 47, 75, .55);
  font-size: 1rem;
  transition: box-shadow .3s, border-color .2s;
}
.problem-search input:focus {
  outline: none;
  border-color: #2e75b6;
  box-shadow: 0 0 0 4px rgba(46, 117, 182, .18), 0 14px 30px -20px rgba(20, 47, 75, .55);
}

.problem-grid { perspective: 1400px; gap: 12px; }
body:not(.dark) .problem-card {
  position: relative;
  border: 1px solid var(--ad-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 12px 26px -20px rgba(20, 47, 75, .65), inset 0 1px 0 #fff;
  min-height: 108px;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ad-ease), box-shadow .3s, border-color .25s, background .25s;
}
body:not(.dark) .problem-card:hover {
  border-color: color-mix(in srgb, var(--pp-problem-color, #2e75b6) 55%, #fff);
  box-shadow: 0 26px 40px -22px color-mix(in srgb, var(--pp-problem-color, #2e75b6) 55%, transparent), inset 0 1px 0 #fff;
}
body:not(.dark) .problem-card.is-tilt {
  transition: transform .12s linear, box-shadow .3s, border-color .25s;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(14px);
}
body:not(.dark) .problem-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .7), transparent 52%);
  transition: opacity .25s;
}
body:not(.dark) .problem-card.is-tilt::after { opacity: 1; }
body:not(.dark) .problem-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  transform: translateZ(22px);
  box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--pp-problem-color, #2e75b6) 70%, transparent);
}
body:not(.dark) .problem-card .label { transform: translateZ(12px); display: block; font-weight: 650; color: #1a2f47; }
body:not(.dark) .problem-card.selected {
  box-shadow: 0 0 0 2px var(--pp-problem-color, #2e75b6), 0 20px 34px -22px var(--pp-problem-color, #2e75b6);
}

/* ── Værktøjspanelet som en centreret dialog (åbnes fra topbjælken) ──── */

.fab-group { position: static; }
.fab-backdrop { backdrop-filter: blur(3px); background: rgba(8, 20, 38, .4); }
.fab-items {
  position: fixed;
  z-index: 151;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(720px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 40px));
  border: 1px solid rgba(147, 197, 253, .35);
  border-radius: 24px;
  transform-origin: 50% 50%;
  transform: translate(-50%, -46%) scale(.97);
  box-shadow: 0 50px 110px -30px rgba(4, 21, 39, .7);
}
.fab-items.open { transform: translate(-50%, -50%) scale(1); }
.fab-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.fab-tool-card {
  border-radius: 16px;
  box-shadow: 0 10px 22px -18px rgba(16, 44, 72, .7);
  transition: transform .3s var(--ad-ease), box-shadow .3s, border-color .2s;
}
.fab-tool-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(16, 44, 72, .75); }
.fab-panel-title { font-size: 1.2rem; letter-spacing: -.02em; }
@media (max-width: 600px) {
  .fab-items { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  .fab-tool-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) { .fab-tool-grid { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  .steps { padding-inline: 8px; gap: 5px; }
  body:not(.dark) .step { padding: 7px 10px; min-width: 0; }
  .teori-quick-bar { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-card, .step, .teori-quick-btn, .fab-tool-card, .fab-items { transition: none !important; }
  body:not(.dark) .problem-card { transform: none !important; }
}

/* ── De fem genveje som ét roligt felt: lige store, aldrig på flere rækker (Procedurer og Sårpleje tilføjet 2026-09-30) ── */
body .teori-quick-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
body .teori-quick-bar .teori-quick-btn { justify-content: center; min-height: 52px; white-space: normal; text-align: center; line-height: 1.15; min-width: 0; }
body .teori-quick-bar .teori-quick-btn .qb-ikon { flex: none; }
body .teori-quick-bar .teori-quick-btn .qb-tekst { min-width: 0; }
body .teori-quick-bar .teori-quick-note { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; }
@media (max-width: 600px) {
  body .teori-quick-bar { gap: 6px; padding-top: 12px; }
  body .teori-quick-bar .teori-quick-btn { flex-direction: column; gap: 4px; min-height: 68px; padding: 10px 3px; border-radius: 16px; font-size: .7rem; letter-spacing: -.01em; }
  body .teori-quick-bar .teori-quick-btn .qb-ikon { font-size: 1.25rem; line-height: 1; }
  body .teori-quick-bar .teori-quick-btn .qb-ekstra { display: none; }
}