/* Dagplanner (Modus C) — UI ported from travelapp's journey page
   (tabs, item-cards, day-groups), restyled without emoji icons. */

/* This page uses travelapp's container sizing instead of PlannGo's
   80%-width .maindiv — the stylesheet is only loaded on day-planner.html,
   so overriding here doesn't leak into other pages. */
.maindiv {
  /* Match the chunk planner / overview width (80% of viewport, uncapped) */
  width: 80%;
  max-width: none;
  box-sizing: border-box;
}
/* On phones use the full width so the content is more readable */
@media (max-width: 768px) {
  .maindiv { width: 100%; }
}

.dp-page {
  --dp-border:  #e2e8f0;
  --dp-bg:      #f8fafc;
  --dp-card:    #ffffff;
  --dp-muted:   #64748b;
  --dp-primary: #43b0b3;
  --dp-accent:  #7589d5;
  --dp-danger:  #ff5757;
  --dp-radius:  10px;
  --dp-radius-sm: 6px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

.dp-icn {
  height: 1em;
  width: auto;
  vertical-align: -0.12em;
}

/* .text-muted-sm, the document/photo panels and the fullscreen viewer moved to
   trip-attachments.css — the chunk planner renders the same panels. */

/* ── Setup ─────────────────────────────────── */
.dp-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.9rem 0 1.2rem;
  font-size: 0.92rem;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
}
.dp-checkbox-row input { margin-top: 3px; }

/* ── Tabs (travelapp) ──────────────────────── */
.dp-page .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--dp-border);
  margin-bottom: 1.5rem;
}

.dp-page .tab-btn {
  background: none;
  border: none;
  padding: 0.65rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dp-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.dp-page .tab-btn.active {
  color: var(--dp-primary);
  border-bottom-color: var(--dp-primary);
}

.dp-page .tab-panel { display: none; }
.dp-page .tab-panel.active { display: block; }

/* ── Buttons (travelapp) ───────────────────── */
.dp-page .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--dp-radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.dp-page .btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.dp-page .btn:active { transform: translateY(0); }

.dp-page .btn-primary { background: var(--dp-primary); color: #fff; }
.dp-page .btn-danger  { background: transparent; color: var(--dp-danger); border: 1px solid var(--dp-border); }
.dp-page .btn-danger:hover { background: rgba(255, 87, 87, 0.08); }
.dp-page .btn-ghost   { background: transparent; color: var(--dp-muted); border: 1px solid var(--dp-border); }
.dp-page .btn-ghost:hover { background: var(--dp-bg); color: #1e293b; }
.dp-page .btn-sm      { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.dp-page .btn-done    { color: #15803d; border-color: #bbe5c8; background: #f0fdf4; }
.dp-page .dp-file-btn { position: relative; }

/* ── Section headers / empty state ─────────── */
.dp-page .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.dp-page .section-title { font-size: 1rem; font-weight: 700; }

.dp-page .empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--dp-muted);
  font-size: 0.9rem;
}
.dp-page .empty-state .btn { margin-top: 0.75rem; }

/* ── Day sections (Per dag tab) ────────────── */
/* Slightly translucent tint per day so days read as distinct blocks;
   cards and maps inside keep their own dimensions/styling. */
.day-section {
  margin-bottom: 1.75rem;
  background: rgba(67, 176, 179, 0.045);
  border: 1px solid rgba(67, 176, 179, 0.12);
  border-radius: var(--dp-radius);
  padding: 0.85rem;
}

/* Title of the whole day area — no box of its own, just a heading on the
   tinted section with a subtle divider */
.day-heading {
  font-size: 1.1rem;
  font-weight: 800;
  padding: 0.1rem 0.1rem 0.55rem;
  border-bottom: 2px solid rgba(67, 176, 179, 0.25);
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.day-heading-date {
  flex-shrink: 0;
  color: #1e293b;
}
.day-heading-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dp-muted);
}
.day-ai-btn { margin-left: auto; }

.day-mini-map {
  height: 200px;
  border-radius: var(--dp-radius);
  border: 1px solid var(--dp-border);
  margin-bottom: 0.6rem;
  background: var(--dp-bg);
  z-index: 0;
}
.day-mini-map-empty {
  height: auto;
  min-height: 0;
}

/* ── Day groups (collapsible, travelapp) ───── */
.dp-page .day-group {
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  overflow: hidden;
  margin-bottom: 0.5rem;
  background: var(--dp-card);
}
.dp-page .day-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--dp-bg);
  cursor: pointer;
  gap: 1rem;
  flex-wrap: wrap;
  transition: background 0.15s;
}
.dp-page .day-group-header:hover { background: rgba(67, 176, 179, 0.06); }
.dp-page .day-group-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.dp-page .day-group-chevron { font-size: 0.7rem; color: var(--dp-muted); }
.dp-page .day-group-date    { font-weight: 700; font-size: 0.9rem; }
.dp-page .day-group-count   { font-size: 0.78rem; color: var(--dp-muted); }
.dp-page .day-group-preview { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dp-page .day-group-body    { padding: 0 0.75rem; }

/* ── Item cards (travelapp) ────────────────── */
.dp-page .item-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dp-page .item-card {
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  padding: 1rem 1.1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  transition: box-shadow 0.15s;
}
.dp-page .item-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); }

.dp-page .item-card.pending {
  border-style: dashed;
  border-color: var(--dp-accent);
  background: rgba(117, 137, 213, 0.04);
}
.dp-page .item-card.item-done { border-left: 4px solid #43b36e; }

.dp-page .item-card-body { flex: 1; min-width: 0; }

.dp-page .item-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e293b;
}

.dp-page .item-card-meta {
  font-size: 0.78rem;
  color: var(--dp-muted);
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.dp-page .item-card-desc {
  font-size: 0.85rem;
  color: var(--dp-muted);
  margin-top: 0.35rem;
}

.dp-page .item-card-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

/* Pills */
.dp-page .location-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(67, 176, 179, 0.1);
  color: var(--dp-primary);
}
.dp-page .pill-route {
  background: rgba(252, 76, 2, 0.08);
  color: #fc4c02;
}
.dp-page .badge-done-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(67, 179, 110, 0.15);
  color: #15803d;
}

.dp-page .dp-track-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Driving-time row between two consecutive geocoded activity cards
   (Modus C parity with chunk-planner/overview). Same dashed-rail look. */
.dp-page .travel-leg-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.15rem 0 0.15rem 0.75rem;
  padding: 0.2rem 0 0.2rem 0.85rem;
  border-left: 2px dashed var(--dp-border);
  font-size: 0.82rem;
  color: var(--dp-muted, #64748b);
  font-variant-numeric: tabular-nums;
}

/* ── Map tab ───────────────────────────────── */
.dp-page .map-container {
  border-radius: var(--dp-radius);
  overflow: hidden;
  border: 1px solid var(--dp-border);
}
#trip-map { height: 440px; z-index: 0; }

/* Documents: see trip-attachments.css */

/* ── Terugblik (post-trip) panel ───────────── */
.dp-terugblik {
  background: linear-gradient(135deg, rgba(117, 137, 213, 0.08), rgba(67, 176, 179, 0.08));
  border: 1px solid rgba(117, 137, 213, 0.25);
  border-radius: var(--dp-radius, 10px);
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
}
.dp-terugblik-head {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}
.dp-terugblik-sub {
  font-size: 0.88rem;
  color: var(--dp-muted, #64748b);
  margin: 0 0 0.7rem;
}
.dp-terugblik-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.dp-copy-count {
  display: inline-block;
  background: rgba(67, 179, 110, 0.12);
  color: #15803d;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.dp-publish-row {
  border-top: 1px dashed rgba(117, 137, 213, 0.3);
  padding-top: 0.7rem;
}
.dp-publish-row #publish-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.dp-publish-row #publish-url {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Day journal note */
.dp-day-note { margin-bottom: 0.6rem; }
.dp-day-note-text {
  background: var(--dp-card, #fff);
  border: 1px solid var(--dp-border, #e2e8f0);
  border-left: 3px solid var(--dp-accent, #7589d5);
  border-radius: var(--dp-radius-sm, 6px);
  padding: 0.6rem 0.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  margin-bottom: 0.35rem;
}
.dp-day-note-add { border-style: dashed; }

/* ── Daypart quick-time chips ──────────────── */
.dp-daypart-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0;
}
.dp-daypart {
  border: 1px solid var(--dp-border, #e2e8f0);
  background: var(--dp-card, #fff);
  color: var(--dp-muted, #64748b);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dp-daypart:hover {
  border-color: var(--dp-primary, #43b0b3);
  color: var(--dp-primary, #43b0b3);
}
.dp-daypart.active {
  background: var(--dp-primary, #43b0b3);
  border-color: var(--dp-primary, #43b0b3);
  color: #fff;
}
.dp-daypart-hint {
  font-size: 0.78rem;
  color: var(--dp-muted, #94a3b8);
  margin-left: 0.25rem;
}

/* ── Location search (travelapp geocode) ───── */
.geocode-wrap { position: relative; }

/* Rows inside the add/edit-activity form lay their controls out horizontally.
   Without this the row is a plain block (the .form-row class has no base flex
   rule here), so the "Zoek" button drops beneath the full-width location input
   — and the paired start/end time inputs stack — instead of sitting side by
   side. align-items: stretch keeps the button the same height as the input. */
.new-activity-form .form-row,
.geocode-wrap .form-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
/* Zero the stray field margins inside the row: the location input otherwise
   carries a bottom margin that inflates the flex row's height, leaving the
   stretched "Zoek" button taller than the input. With no margins the row is as
   tall as the input and the button matches it exactly. */
.geocode-wrap .form-row > input,
.geocode-wrap .form-row > .btn { margin: 0; }
.geocode-wrap .form-row > input { flex: 1; min-width: 0; }
.geocode-wrap .form-row > .btn { flex: none; }

.geocode-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--dp-card, #fff);
  border: 1px solid var(--dp-border, #e2e8f0);
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.geocode-item {
  padding: 0.55rem 0.85rem;
  font-size: 0.83rem;
  cursor: pointer;
  color: #1e293b;
  border-bottom: 1px solid var(--dp-border, #e2e8f0);
  transition: background 0.12s;
}
.geocode-item:last-child { border-bottom: none; }
.geocode-item:hover { background: var(--dp-bg, #f8fafc); }
.geocode-item.muted { color: var(--dp-muted, #64748b); cursor: default; }

/* Photos grid, thumbnails and the fullscreen viewer: see trip-attachments.css */

/* Per-day photo strip (travelapp By Day) */
.day-photo-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin-top: 0.6rem;
  scroll-snap-type: x proximity;
}
.day-photo-thumb {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: var(--dp-radius-sm, 6px);
  object-fit: cover;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.15s;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: dp-skeleton 1.4s infinite;
}
.day-photo-thumb:hover { transform: scale(1.04); }

/* Route panel: the panel body itself is styled in trip-attachments.css, which
   both planners load. */

/* "Waar vind ik mijn GPX-bestanden?" instructions in the terugblik panel */
.dp-export-help {
  background: var(--dp-card, #fff);
  border: 1px solid var(--dp-border, #e2e8f0);
  border-radius: var(--dp-radius-sm, 6px);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  color: #334155;
}
.dp-export-help p { margin: 0 0 0.6rem; line-height: 1.55; }
.dp-export-help p:last-of-type { margin-bottom: 0; }

.dp-bulk-summary {
  background: var(--dp-card, #fff);
  border: 1px solid var(--dp-border, #e2e8f0);
  border-left: 3px solid var(--dp-primary, #43b0b3);
  border-radius: var(--dp-radius-sm, 6px);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  font-size: 0.87rem;
}
.dp-bulk-summary ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.dp-bulk-summary li { margin: 0.15rem 0; }
.dp-bulk-summary details summary { cursor: pointer; color: var(--dp-muted, #64748b); margin-top: 0.4rem; }

/* ── Paklijst tab ──────────────────────────── */
.dp-page .packing-add-row { margin-top: 0.75rem; }

/* ── Responsive ────────────────────────────── */
@media (max-width: 640px) {
  .dp-page .tab-btn { padding: 0.6rem 0.8rem; font-size: 0.84rem; }
  .day-heading { font-size: 0.92rem; }
  .dp-page .day-group-preview { display: none; }
}


/* =====================================================================
   Design 1b reskin — retint the .dp-page palette to the map-forward
   slate/teal system. Keeps the site's default font (no type swap).
   ===================================================================== */
.dp-page {
  --dp-border:  oklch(88% 0.01 240);
  --dp-bg:      oklch(96% 0.006 240);
  --dp-card:    oklch(99% 0.003 240);
  --dp-muted:   oklch(48% 0.02 250);
  --dp-primary: #43b0b3;
  --dp-accent:  #7589d5;
}
/* Pending items reuse the 1b warm-amber accent instead of the sky-blue dash */
.dp-page .item-card.pending {
  border-color: oklch(75% 0.12 70);
  background: oklch(97% 0.03 70);
}

/* Timeline rail + dots beside the activity cards (matches the other types) */
.dp-page .day-group-body[id^="day-acts-"] {
  position: relative;
  padding-left: 2rem;
}
.dp-page .day-group-body[id^="day-acts-"]::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: var(--dp-border);
}
.dp-page .day-group-body[id^="day-acts-"] .item-card {
  position: relative;
}
.dp-page .day-group-body[id^="day-acts-"] .item-card::before {
  content: "";
  position: absolute;
  left: -1.16rem;
  top: 1.1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dp-primary);
  border: 2px solid var(--dp-card);
}
.dp-page .day-group-body[id^="day-acts-"] .item-card.pending::before {
  background: oklch(70% 0.13 70);
}


/* =====================================================================
   Unified itinerary design — Dagplanner (type-c, amber). Retint the whole
   dp component system by overriding --dp-primary on the type-c page, plus
   hero-card glue. Hero card + accent tokens live in itinerary-unified.css.
   ===================================================================== */
.dp-page.type-c {
  --dp-primary: #f59e0b;
  --dp-accent:  #b45309;
}
.dp-page.type-c .trip-header { margin-bottom: 1.25rem; }

/* Status bar sits under the hero stat row */
.dp-page.type-c .itin-hero .trip-status-bar {
  margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px;
}
.dp-page.type-c .countdown-badge.countdown-active {
  background: var(--b-accent-soft); color: var(--b-accent-ink);
}
.dp-page.type-c .completeness-bar-fill { background: var(--b-accent); }

/* Tabs follow the amber accent (dp's own tab rules out-specify the shared
   ones, so retint them here). */
.dp-page.type-c .tab-btn.active {
  color: var(--b-accent-ink);
  border-bottom-color: var(--b-accent);
}
.dp-page.type-c .tab-btn:hover { color: var(--b-accent-ink); }

/* Day-number badge on the per-day groups picks up amber-soft automatically. */
.dp-page.type-c .day-heading { border-bottom-color: rgba(245, 158, 11, 0.28); }
.dp-page.type-c .day-heading-date { font-weight: 800; }
@media (max-width: 760px) {
  .dp-page.type-c .day-num-badge { width: 40px; height: 40px; }
  .dp-page.type-c .day-heading { font-size: 1rem; }
}

/* Add + generate activity buttons below each day's activities (native dashed
   style shared with Modus A/B; base rules come from chunk-planner.css). */
.dp-page.type-c .add-activity-section button {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--dp-muted);
}
.dp-page.type-c .add-activity-section button:hover {
  border-color: var(--b-accent); color: var(--b-accent-ink);
}