/* ============================================================
   Planiq — bordplan-app. Varmt, hyggeligt, cremet udtryk.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Warm cream / terracotta / sage palette */
  --bg:        #f6efe4;   /* page cream */
  --bg-2:      #efe6d6;   /* deeper cream (canvas) */
  --surface:   #fffdf9;   /* warm white cards */
  --surface-2: #fbf5ec;   /* subtle raised */
  --ink:       #41382f;   /* warm near-black */
  --ink-soft:  #6e6155;   /* secondary text */
  --ink-faint: #9c8e7e;   /* tertiary / placeholder */
  --line:      #e7dcc9;   /* warm hairline */
  --line-2:    #ddcfb8;

  /* Accent — terracotta (primary action). Shades derived so a tweak cascades. */
  --accent:        #d07c54;
  --accent-deep:   color-mix(in oklab, var(--accent), #2c1d12 32%);
  --accent-soft:   color-mix(in oklab, var(--accent), #fffaf4 62%);
  --accent-tint:   color-mix(in oklab, var(--accent), #fffaf4 82%);

  /* Secondary — sage */
  --sage:        #88997a;
  --sage-deep:   #6f8062;
  --sage-soft:   #dde3d3;
  --sage-tint:   #eef1e8;

  /* Peach / honey for groups */
  --honey:       #e2b06b;
  --honey-soft:  #f6e4c6;

  /* Status */
  --warn:        #c9603f;
  --warn-soft:   #f7ddd2;
  --ok:          #6f8062;
  --ok-soft:     #dde7d4;

  /* Group colors (guest groups) */
  --grp-1: #d07c54;  /* terracotta */
  --grp-2: #88997a;  /* sage */
  --grp-3: #c98aa6;  /* dusty rose */
  --grp-4: #7e9bb0;  /* dusty blue */
  --grp-5: #e2b06b;  /* honey */
  --grp-6: #9a8fb5;  /* lavender */

  --radius:   var(--radius-base, 20px);
  --radius-sm: calc(var(--radius) * 0.55);
  --radius-lg: calc(var(--radius) * 1.4);
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(78,60,40,.06), 0 2px 6px rgba(78,60,40,.05);
  --shadow:    0 2px 6px rgba(78,60,40,.07), 0 10px 28px rgba(78,60,40,.10);
  --shadow-lg: 0 8px 24px rgba(78,60,40,.12), 0 28px 60px rgba(78,60,40,.16);
  --shadow-lift: 0 12px 30px rgba(78,60,40,.22), 0 4px 10px rgba(78,60,40,.14);

  --font:      'Nunito', system-ui, sans-serif;
  --font-disp: 'Fredoka', 'Nunito', system-ui, sans-serif;

  --ease: cubic-bezier(.32,.72,.32,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

#root { height: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
h1,h2,h3,h4 { font-family: var(--font-disp); font-weight: 600; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: var(--accent-soft); }

/* ---------- App frame ---------- */
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-disp); font-size: 16px; font-weight: 500;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--line);
  transition: transform .14s var(--ease), box-shadow .2s var(--ease), background .15s, border-color .15s;
  user-select: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0) scale(.985); }
.btn svg { flex: none; }

.btn-primary {
  background: var(--accent); color: #fff; border-color: transparent;
  box-shadow: 0 2px 5px rgba(184,104,67,.30), 0 8px 20px rgba(184,104,67,.22);
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-sage { background: var(--sage); color: #fff; border-color: transparent;
  box-shadow: 0 2px 5px rgba(111,128,98,.28), 0 8px 18px rgba(111,128,98,.20); }
.btn-sage:hover { background: var(--sage-deep); }

.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); box-shadow: none; }

.btn-lg { min-height: 56px; padding: 0 30px; font-size: 18px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; gap: 6px; }
.btn-icon { min-height: 48px; width: 48px; padding: 0; }
.btn-icon.btn-sm { min-height: 40px; width: 40px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 14px; font-weight: 700; color: var(--ink-soft); padding-left: 4px; }
.input {
  min-height: 50px; padding: 0 16px;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 500;
  transition: border-color .15s, box-shadow .15s, background .15s;
  width: 100%;
}
.input::placeholder { color: var(--ink-faint); font-weight: 500; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); background: #fff; }
textarea.input { padding: 12px 16px; min-height: 80px; resize: vertical; line-height: 1.5; }

/* ---------- Chips / tags ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1.5px solid var(--line);
  white-space: nowrap;
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* group color dot helpers */
.gc-1 { background: var(--grp-1); } .gc-2 { background: var(--grp-2); }
.gc-3 { background: var(--grp-3); } .gc-4 { background: var(--grp-4); }
.gc-5 { background: var(--grp-5); } .gc-6 { background: var(--grp-6); }

/* ---------- Scrollbars ---------- */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid var(--bg); }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- Utility ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.spring { flex: 1; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.center { display: flex; align-items: center; justify-content: center; }

/* fade / pop animations */
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.anim-pop { animation: pop .28s var(--ease) both; }
.anim-fade { animation: fade .3s var(--ease) both; }
.anim-up { animation: slideUp .34s var(--ease) both; }

/* ---------- Modal ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(60,46,32,.34); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  animation: fade .2s var(--ease) both;
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 460px;
  padding: 28px; animation: pop .28s var(--ease) both;
  border: 1px solid var(--line);
}
.modal h2 { font-size: 23px; }

/* dim toggle for tweaks density */
.app[data-density="compact"] { --pad: 14px; }
.app[data-density="cozy"] { --pad: 22px; }

/* ============================================================
   Responsivt — tablet og mobil
   ============================================================ */

/* Tablet og mindre */
@media (max-width: 920px) {
  .tab-label { display: none; }
  /* Landing: hero bliver én kolonne tidligere, så teksten får plads */
  .lp-hero { grid-template-columns: 1fr !important; gap: 28px !important; }
  .lp-features { grid-template-columns: 1fr 1fr !important; }
}

/* Mobil */
@media (max-width: 720px) {
  /* Lidt mindre touch-venlige knapper, men stadig store nok */
  .btn { min-height: 46px; padding: 0 18px; font-size: 15px; }
  .btn-lg { min-height: 52px; padding: 0 24px; font-size: 17px; }
  .btn-sm { min-height: 38px; padding: 0 13px; }
  .btn-icon { width: 46px; }
  .btn-icon.btn-sm { width: 38px; }

  /* Modaler fylder hele bredden og lægger sig nederst (ark-stil) */
  .scrim { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    max-height: 92vh; overflow-y: auto;
    animation: sheetUp .3s var(--ease) both;
  }
  .modal h2 { font-size: 21px; }

  /* Inputs: 16px for at undgå iOS auto-zoom ved fokus */
  .input { font-size: 16px; min-height: 48px; }

  /* Hjælpeklasser brugt af layouts der stakker på mobil */
  .mobile-stack { flex-direction: column !important; align-items: stretch !important; }
  .mobile-hide { display: none !important; }
  .mobile-full { width: 100% !important; }
  .mobile-wrap { flex-wrap: wrap !important; }

  /* Landingpage */
  .lp-header { padding: 16px 20px !important; }
  .lp-hero { padding: 24px 20px 20px !important; gap: 22px !important; }
  .lp-hero-title { font-size: 36px !important; }
  .lp-hero-art { display: none !important; }   /* skjul dekorativ illustration på mobil */
  .lp-features { grid-template-columns: 1fr !important; padding: 8px 20px 48px !important; }

  /* Projekt-header: tættere, skjul undertekst (dato/sted) for plads */
  .pv-header { padding: 8px 12px !important; gap: 10px !important; }
  .pv-sub { display: none !important; }

  /* Bordplan: gæste-sidebjælken lægger sig øverst i stedet for ved siden af */
  .tp-root { flex-direction: column !important; }
  .tp-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: 42vh;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
  }

  /* Dashboard */
  .db-header { padding: 14px 18px !important; }
  .db-user { display: none !important; }        /* navne-chip skjules; "Log ud" bliver */
  .db-main { padding: 22px 18px 64px !important; }
  .db-title { font-size: 28px !important; }
  .db-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

@keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }

/* lille spinner (betalingsbekræftelse) */
.pw-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line-2); border-top-color: var(--accent);
  animation: pw-spin .8s linear infinite;
}
@keyframes pw-spin { to { transform: rotate(360deg); } }