:root {
  --ink: #17324d;
  --ink-soft: #4d6478;
  --blue: #123b55;
  --blue-2: #1b5f7a;
  --teal: #2b8c7c;
  --sand: #f2ead8;
  --cream: #fbf9f3;
  --surface: #ffffff;
  --surface-2: #f1f5f7;
  --line: #d8e1e6;
  --danger: #a63a3a;
  --success: #19734d;
  --shadow: 0 16px 40px rgba(23, 50, 77, 0.12);
  --shadow-soft: 0 8px 24px rgba(23, 50, 77, 0.08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --page: min(1180px, calc(100% - 32px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue-2); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 9999;
  background: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.skip-link:focus { top: 12px; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(251, 249, 243, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(216, 225, 230, 0.85);
}
.header-inner {
  width: var(--page);
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 230px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; font-size: 23px;
  background: linear-gradient(135deg, #dceff0, #f6e9c8);
  border: 1px solid rgba(23, 50, 77, .08);
}
.brand strong, .brand span { display: block; }
.brand span { color: var(--ink-soft); font-size: .78rem; }
.desktop-nav { display: flex; gap: 3px; margin-left: auto; }
.desktop-global-nav { padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.7); }
.nav-link, .drawer-link, .admin-tab {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
}
.nav-link:hover, .nav-link.active, .drawer-link.active, .admin-tab.active {
  color: var(--blue);
  background: #e7f0f2;
}
.header-actions { display: flex; gap: 8px; }
.trip-navigation { border-top: 1px solid rgba(216,225,230,.72); background: rgba(255,255,255,.76); }
.trip-navigation-inner { width: var(--page); min-height: 58px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.trip-context { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 8px; min-width: 230px; max-width: 330px; }
.trip-context > span { grid-column: 1 / -1; color: var(--teal); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.trip-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.trip-context small { align-self: center; color: var(--ink-soft); white-space: nowrap; font-size: .67rem; }
.desktop-trip-nav { display: flex; gap: 2px; margin-left: auto; }
.desktop-trip-nav .nav-link { padding: 8px 10px; font-size: .82rem; }
.trip-pdf-button { flex: 0 0 auto; }
.application-view-active .trip-navigation { display: none; }
.icon-button {
  border: 0; background: transparent; width: 42px; height: 42px;
  display: grid; place-items: center; font-size: 25px; border-radius: 10px;
}
.icon-button:hover { background: var(--surface-2); }
.mobile-only { display: none; }

.primary-button, .secondary-button, .danger-button, .small-button {
  border-radius: 11px;
  padding: 10px 15px;
  border: 1px solid transparent;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.primary-button { background: var(--blue); color: #fff; box-shadow: 0 6px 15px rgba(18, 59, 85, .18); }
.primary-button:hover { transform: translateY(-1px); background: #0d3047; }
.secondary-button { background: #fff; color: var(--blue); border-color: var(--line); }
.secondary-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.danger-button { background: #fff; color: var(--danger); border-color: #e7bbbb; }
.small-button { padding: 7px 10px; background: #edf4f5; color: var(--blue); border-color: #d5e5e7; font-size: .86rem; }
.compact { padding: 8px 11px; font-size: .86rem; }

.mobile-drawer {
  position: fixed; inset: 0 auto 0 0; width: min(330px, 88vw); z-index: 2000;
  background: var(--surface); transform: translateX(-103%); transition: transform .25s ease;
  box-shadow: 20px 0 50px rgba(23, 50, 77, .2); padding: 18px;
}
.mobile-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mobile-drawer nav { display: grid; gap: 6px; }
.drawer-link { width: 100%; text-align: left; padding: 14px; }
.drawer-group { display: grid; gap: 5px; padding: 0 0 14px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.drawer-group:last-child { border-bottom: 0; margin-bottom: 0; }
.drawer-group-label { color: var(--teal); font-size: .66rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; padding: 0 12px 3px; }
.drawer-trip-title { color: var(--blue); font-size: .84rem; padding: 0 12px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(9, 29, 43, .4); z-index: 1900; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.view { display: none; min-height: calc(100vh - 72px); }
.view.active { display: block; }
.page-shell { width: var(--page); margin: 0 auto; }
.page-top { padding-top: 48px; padding-bottom: 64px; }
.section-block { margin-top: 54px; }
.eyebrow { margin: 0 0 6px; color: var(--teal); text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: .75rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.02; letter-spacing: -.04em; }
h2 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.12; letter-spacing: -.025em; }
h3 { line-height: 1.25; }
.page-intro { max-width: 850px; margin-bottom: 32px; }
.page-intro > p:last-child { color: var(--ink-soft); font-size: 1.04rem; }
.compact-intro { margin-bottom: 20px; }
.section-heading, .panel-heading {
  display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px;
}
.panel-heading { align-items: center; }
.data-status {
  font-size: .78rem; padding: 7px 10px; border-radius: 999px; background: #e6f2ed; color: var(--success); font-weight: 800;
}

.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: end;
  background-image: linear-gradient(180deg, rgba(7, 25, 37, .06), rgba(7, 25, 37, .85)), var(--hero-image), url('../fallback-travel.svg');
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 150px;
  background: linear-gradient(180deg, transparent, rgba(7, 25, 37, .25));
}
.hero-inner { width: var(--page); margin: 0 auto; padding: 88px 0 54px; position: relative; z-index: 2; }
.hero-content { max-width: 850px; }
.hero-badge { display: inline-flex; gap: 8px; align-items: center; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); font-weight: 800; font-size: .82rem; }
.hero h1 { margin: 18px 0 14px; max-width: 800px; }
.hero p { max-width: 720px; color: rgba(255,255,255,.88); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero .primary-button { background: #fff; color: var(--blue); }
.hero .secondary-button { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.38); }
.hero-credit { margin-top: 20px; font-size: .72rem; opacity: .75; }

#view-dashboard > .page-shell { padding-top: 40px; padding-bottom: 70px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px; box-shadow: var(--shadow-soft); min-height: 138px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.stat-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #e7f0f2; font-size: 20px; }
.stat-value { font-size: clamp(1.45rem, 2.4vw, 2.1rem); font-weight: 900; letter-spacing: -.03em; }
.stat-label { color: var(--ink-soft); font-size: .86rem; }
.stat-sub { color: var(--ink-soft); font-size: .75rem; margin-top: 4px; }

.filter-row { display: flex; gap: 8px; }
.filter-row input, .filter-row select {
  border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 10px 12px; color: var(--ink); min-width: 190px;
}
.destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.destination-card {
  border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; min-width: 0;
}
.destination-image { position: relative; aspect-ratio: 16/10; background: #d9e5e8 url('../fallback-travel.svg') center/cover no-repeat; overflow: hidden; }
.destination-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.destination-card:hover .destination-image img { transform: scale(1.035); }
.card-flags { position: absolute; inset: 12px 12px auto; display: flex; gap: 7px; justify-content: space-between; }
.card-chip { background: rgba(255,255,255,.9); backdrop-filter: blur(8px); padding: 6px 9px; border-radius: 999px; font-size: .72rem; font-weight: 900; color: var(--blue); }
.card-chip.pending { color: #8a5a12; background: rgba(255,246,221,.92); }
.card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.card-kicker { color: var(--teal); font-weight: 900; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; }
.card-body h3 { margin: 5px 0 7px; font-size: 1.2rem; }
.card-body p { color: var(--ink-soft); font-size: .9rem; }
.card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 14px; }
.meta-box { padding: 9px; border-radius: 10px; background: var(--surface-2); }
.meta-box strong, .meta-box span { display: block; }
.meta-box strong { font-size: .92rem; }
.meta-box span { color: var(--ink-soft); font-size: .68rem; }
.card-address { display: flex; gap: 8px; color: var(--ink-soft); font-size: .82rem; margin: auto 0 14px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 9px; border: 1px solid var(--line); padding: 8px 10px; background: #fff; font-weight: 800; font-size: .78rem; color: var(--blue); }
.link-button.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.image-credit { padding: 6px 12px; background: rgba(255,255,255,.88); position: absolute; bottom: 0; right: 0; font-size: .58rem; color: var(--ink-soft); }

.route-preview { padding-bottom: 10px; }
.route-strip { display: flex; gap: 12px; overflow-x: auto; padding: 5px 2px 18px; scroll-snap-type: x mandatory; }
.route-leg { min-width: 250px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 15px; }
.route-leg-top { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.route-arrow { color: var(--teal); }
.route-leg-meta { display: flex; gap: 10px; color: var(--ink-soft); font-size: .8rem; margin-top: 8px; }

.timeline { position: relative; max-width: 980px; }
.timeline::before { content: ""; position: absolute; left: 82px; top: 0; bottom: 0; width: 2px; background: #cbdadd; }
.timeline-day { display: grid; grid-template-columns: 66px 1fr; gap: 34px; position: relative; padding-bottom: 32px; }
.timeline-date { text-align: right; padding-top: 4px; }
.timeline-date strong { display: block; font-size: 1.2rem; }
.timeline-date span { color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; }
.timeline-dot { position: absolute; left: 73px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); border: 5px solid var(--cream); box-shadow: 0 0 0 2px var(--teal); }
.timeline-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-soft); }
.timeline-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 14px; }
.timeline-theme { color: var(--teal); font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.timeline-stay { background: var(--surface-2); border-radius: 999px; padding: 6px 9px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.timeline-stay { border: 1px solid var(--line); color: var(--blue); cursor: pointer; }
.schedule-list { display: grid; gap: 10px; }
.schedule-item { display: grid; grid-template-columns: 58px 34px 1fr; gap: 10px; align-items: start; }
.schedule-time { font-weight: 900; font-size: .84rem; padding-top: 5px; }
.schedule-time small { display: block; color: var(--muted); font-size: .7rem; font-weight: 700; }
.schedule-item-open { cursor: pointer; border-radius: 14px; transition: background .18s ease, transform .18s ease; }
.schedule-item-open:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); transform: translateX(2px); }
.schedule-item-open:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 3px; }
.schedule-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #e7f0f2; }
.schedule-content { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.schedule-content strong { display: block; }
.schedule-content span { color: var(--ink-soft); font-size: .82rem; }
.schedule-content .schedule-address { display: block; margin-top: 6px; color: var(--ink); }
.timeline-stay-address { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 9px 12px; border-radius: 12px; background: #edf5f3; color: var(--ink-soft); font-size: .84rem; }
.timeline-stay-address strong { display: block; color: var(--ink); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.schedule-links { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 7px; }

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.map-panel { background: #dbe6e9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); min-height: 690px; position: relative; }
.map-mode-switch { position: absolute; z-index: 500; top: 12px; left: 50px; right: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; pointer-events: none; }
.map-control-group { display: flex; gap: 6px; pointer-events: auto; }
.map-mode-button { pointer-events: auto; border: 1px solid rgba(18,59,85,.18); background: rgba(255,255,255,.94); color: var(--blue); padding: 9px 12px; border-radius: 10px; box-shadow: 0 4px 14px rgba(8,30,45,.14); font-weight: 800; }
.map-mode-button.active { background: var(--blue); color: #fff; }
.map-expand-button { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.map-expand-button svg, .map-restore-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-restore-button { display: none; align-items: center; gap: 7px; margin-left: auto; background: var(--blue); color: #fff; }
#routeStatus { margin-left: auto; background: rgba(255,255,255,.9); color: var(--ink-soft); padding: 6px 9px; border-radius: 8px; font-size: .7rem; }
#routeStatus:empty { display: none; }
.map-focus-status { max-width: min(360px,45vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; background: rgba(255,255,255,.96); color: var(--blue); padding: 8px 11px; border: 1px solid rgba(18,59,85,.16); border-radius: 10px; box-shadow: 0 4px 14px rgba(8,30,45,.12); font-size: .73rem; font-weight: 900; }
#map { height: 690px; width: 100%; }
.map-offline { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 30px; background: #eaf1f3; }
.map-offline span { color: var(--ink-soft); }
.map-sidebar { display: grid; gap: 10px; max-height: 690px; overflow: auto; padding-right: 3px; }
.map-stop { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 9px; display: grid; grid-template-columns: 62px 1fr; gap: 11px; align-items: center; text-align: left; color: var(--ink); }
.map-stop:hover { border-color: #8eb7be; box-shadow: var(--shadow-soft); }
.map-stop-number { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 900; }
.map-stop-photo { width: 62px; height: 54px; object-fit: cover; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(8,30,45,.18); }
.photo-marker-shell { background: transparent; border: 0; }
.photo-marker { width: 46px; height: 46px; background-size: cover; background-position: center; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 5px 13px rgba(0,0,0,.28); position: relative; overflow: hidden; }
.photo-marker span { position: absolute; right: -1px; bottom: -1px; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: .62rem; font-weight: 900; }
.activity-cluster-shell, .activity-spider-shell { background: transparent; border: 0; }
.activity-cluster-marker { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #e4a43c, #bd6921); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(80,43,11,.35); cursor: pointer; position: relative; }
.activity-cluster-marker::after { content: ''; position: absolute; inset: -6px; border: 2px solid rgba(209,139,40,.35); border-radius: inherit; }
.activity-cluster-marker span { font-size: .95rem; line-height: 1; font-weight: 950; }
.activity-spider-marker { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); border: 3px solid #fff; box-shadow: 0 5px 14px rgba(8,30,45,.32); cursor: pointer; }
.activity-spider-marker:hover { background: var(--teal); transform: scale(1.08); }
.activity-spider-marker span { font-size: .76rem; line-height: 1; font-weight: 950; }
.focused-program-marker-shell { background: transparent; border: 0; }
.focused-program-marker { width: 54px; height: 54px; display: grid; place-items: center; position: relative; border-radius: 50%; background: rgba(209,139,40,.2); border: 2px solid rgba(209,139,40,.65); animation: map-focus-pulse 1.8s ease-out infinite; }
.focused-program-marker::before { content: ''; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(145deg,#e4a43c,#bd6921); border: 3px solid #fff; box-shadow: 0 5px 15px rgba(80,43,11,.4); }
.focused-program-marker span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: translateY(-3px); }
@keyframes map-focus-pulse { 0% { box-shadow: 0 0 0 0 rgba(209,139,40,.55); } 70%,100% { box-shadow: 0 0 0 18px rgba(209,139,40,0); } }
.map-stop strong, .map-stop span { display: block; }
.map-stop span { color: var(--ink-soft); font-size: .75rem; }
.map-popup h3 { margin-bottom: 4px; }
.map-popup p { margin: 0 0 8px; }
.map-popup a { font-weight: 800; }
.map-popup .map-popup-date { color: var(--teal); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }

.map-dialog { width: calc(100vw - 28px); max-width: none; height: calc(100dvh - 28px); max-height: none; margin: auto; padding: 0; border: 0; border-radius: 22px; overflow: hidden; isolation: isolate; background: #dbe6e9; box-shadow: 0 30px 100px rgba(8,30,45,.42); }
.map-dialog::backdrop { background: rgba(8,30,45,.7); backdrop-filter: blur(5px); }
.map-dialog-host, .map-dialog .map-panel, .map-dialog #map { width: 100%; height: 100%; min-height: 0; }
.map-dialog .map-panel { border: 0; border-radius: inherit; }
.map-dialog .map-mode-switch { right: 64px; }
.map-dialog .map-expand-button { display: none; }
.map-dialog .map-restore-button { display: inline-flex; }
.map-dialog > .map-dialog-close { z-index: 1100; right: 12px; top: 12px; transform: translateZ(0); backface-visibility: hidden; will-change: transform; }
.map-dialog.is-schedule-location .map-restore-button { display: none; }
.map-dialog.is-schedule-location .map-dialog-close { width: 42px; height: 42px; background: linear-gradient(145deg,#d95050,#b72f38); box-shadow: 0 7px 20px rgba(128,24,31,.34); }
.map-dialog.is-schedule-location .map-dialog-close svg { stroke: #fff; stroke-width: 2.6; }
.map-dialog.is-schedule-location .map-dialog-close:hover { background: linear-gradient(145deg,#c83e45,#9f222d); transform: translateZ(0) scale(1.04); }

.budget-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.budget-hero-card { padding: 22px; border-radius: var(--radius-lg); background: var(--blue); color: #fff; min-height: 160px; }
.budget-hero-card.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.budget-hero-card strong { display: block; font-size: clamp(1.8rem, 3vw, 2.7rem); margin: 8px 0; }
.budget-hero-card span { color: rgba(255,255,255,.78); }
.budget-hero-card.secondary span { color: var(--ink-soft); }
.budget-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; }
.panel-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-soft); }
.cost-bars { display: grid; gap: 14px; }
.cost-row-head { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; margin-bottom: 5px; }
.cost-track { height: 10px; border-radius: 999px; background: #e8eef0; overflow: hidden; }
.cost-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--blue-2)); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
td { font-size: .86rem; }

.print-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.print-document { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: 8px; padding: 44px; max-width: 1000px; margin: 0 auto; }
.print-cover { min-height: 650px; display: flex; flex-direction: column; justify-content: end; padding: 50px; color: #fff; background: linear-gradient(180deg, rgba(5,20,30,.1), rgba(5,20,30,.85)), var(--print-image), url('../fallback-travel.svg'); background-size: cover; background-position: center; border-radius: 5px; page-break-after: always; }
.print-cover h1 { font-size: 3rem; }
.print-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.print-kpi { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); padding: 12px; border-radius: 10px; }
.print-kpi strong, .print-kpi span { display: block; }
.print-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.print-stop { page-break-inside: avoid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 14px 0; }
.print-stop-grid { display: grid; grid-template-columns: 240px 1fr; }
.print-stop-image { min-height: 220px; background-size: cover; background-position: center; }
.print-stop-body { padding: 18px; }
.print-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.print-mini { background: var(--surface-2); padding: 8px; border-radius: 8px; }
.print-mini strong, .print-mini span { display: block; }
.print-mini span { color: var(--ink-soft); font-size: .7rem; }
.print-day { page-break-inside: avoid; padding: 13px 0; border-bottom: 1px solid var(--line); }
.print-day h3 { margin-bottom: 7px; }
.print-day ul { margin: 0; padding-left: 20px; }
.print-source-list { columns: 2; }
.print-outings { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.print-outings ul { margin: 6px 0 0; padding-left: 19px; }
.print-table { min-width: 0; margin: 10px 0 24px; }
.print-table th, .print-table td { padding: 7px 6px; font-size: .72rem; }
.print-cost-overview h3 { margin: 26px 0 8px; }
.print-cost-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.print-destination-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.print-destination-cost { border: 1px solid var(--line); border-radius: 12px; padding: 12px; page-break-inside: avoid; }
.print-destination-cost > div:first-child { display: grid; }
.print-destination-cost > div:first-child span, .print-destination-cost > div:first-child small { color: var(--ink-soft); }
.print-destination-cost > strong { display: block; font-size: 1.2rem; color: var(--teal); margin: 8px 0; }
.print-destination-cost dl { margin: 0; display: grid; gap: 3px; }
.print-destination-cost dl div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 3px; }
.print-destination-cost dt, .print-destination-cost dd { margin: 0; font-size: .74rem; }
.print-destination-cost dt { color: var(--ink-soft); }

.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.save-icon-button {
  width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 44px;
}
.save-icon-button svg, .backup-action-button svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.backup-action-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.save-message { min-height: 24px; color: var(--success); font-weight: 800; margin-bottom: 12px; }
.admin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.admin-tab { border-radius: 10px 10px 0 0; white-space: nowrap; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-soft); }
.form-section { margin-bottom: 24px; }
.form-section + .form-section { padding-top: 24px; border-top: 1px solid #e2e9e8; }
.form-section:last-child { margin-bottom: 0; }
.form-section h2, .form-section h3 { margin-bottom: 12px; }
.form-section > p { margin-top: -5px; color: var(--ink-soft); font-size: .82rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--ink-soft); font-size: .78rem; font-weight: 800; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; color: var(--ink); background: #fff; transition: border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b3c9c7; }
.field textarea { min-height: 105px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(43,140,124,.15); border-color: var(--teal); }
.geocode-control { padding: 12px; border: 1px dashed #b8d5d1; border-radius: 12px; background: #f7fbfa; }
.geocode-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.geocode-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.geocode-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.geocode-trigger:disabled { opacity: .58; cursor: progress; transform: none; }
.geocode-status { color: var(--teal); font-size: .78rem; font-weight: 800; }
.geocode-status.error { color: var(--danger); }
.geocode-results:empty { display: none; }
.geocode-choice-list { display: grid; gap: 6px; margin-top: 10px; }
.geocode-choice-list > span { color: var(--ink-soft); font-size: .72rem; font-weight: 800; }
.geocode-choice { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: #fff; color: var(--ink); text-align: left; font-size: .76rem; }
.geocode-choice:hover, .geocode-choice.active { border-color: var(--teal); background: #e9f3f1; }
.geocode-match { margin-top: 10px; border-left: 3px solid var(--teal); padding: 7px 9px; color: var(--ink-soft); font-size: .76rem; background: #fff; }
.geocode-attribution { color: var(--ink-soft); font-size: .68rem; }
.geocode-attribution a { color: var(--blue); }
.checkbox-field { display: flex; align-items: center; gap: 8px; padding-top: 26px; }
.admin-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.record-list-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; position: sticky; top: 150px; max-height: calc(100vh - 178px); overflow: auto; }
.record-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.record-list-head h2 { margin: 0; font-size: 1.1rem; }
.record-list { display: grid; gap: 6px; }
.record-button { width: 100%; border: 1px solid transparent; background: var(--surface-2); border-radius: 10px; padding: 10px; text-align: left; color: var(--ink); }
.record-button.active { border-color: var(--teal); background: #e9f3f1; }
.record-button strong, .record-button span { display: block; }
.record-button span { color: var(--ink-soft); font-size: .72rem; }
.editable-list { display: grid; gap: 12px; }
.editable-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface-2); }
.editable-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.editable-head h3 { margin: 0; font-size: 1rem; }
.schedule-card { padding: 0; overflow: clip; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.schedule-card:not(.is-collapsed) { border-color: #b6d5d0; box-shadow: 0 10px 28px rgba(18,59,85,.08); }
.schedule-card .editable-head { margin: 0; padding: 9px 10px; background: linear-gradient(135deg,#f8fbfb 0%,#f2f7f6 100%); }
.schedule-card:not(.is-collapsed) .editable-head { border-bottom: 1px solid #dce8e6; background: #fff; }
.schedule-card.is-collapsed:hover { border-color: #b8cfcc; box-shadow: 0 7px 20px rgba(18,59,85,.07); transform: translateY(-1px); }
.schedule-drag-handle, .schedule-delete-button { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; }
.schedule-drag-handle { color: #789097; cursor: grab; touch-action: none; }
.schedule-drag-handle:active { cursor: grabbing; }
.schedule-drag-handle svg { width: 18px; height: 24px; fill: currentColor; }
.schedule-drag-handle:hover, .schedule-drag-handle:focus-visible { outline: 0; background: #e5efee; color: var(--teal); }
.schedule-collapse-toggle { min-width: 0; flex: 1; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 1px 9px; align-items: center; border: 0; border-radius: 11px; padding: 5px 7px; background: transparent; color: var(--ink); text-align: left; }
.schedule-collapse-toggle:hover, .schedule-collapse-toggle:focus-visible { outline: 0; background: rgba(225,238,236,.72); }
.schedule-toggle-icon { grid-row: 1 / span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #dfeceb; color: var(--teal); font-size: 1.35rem; line-height: 1; transition: transform .18s ease, background .18s ease; }
.schedule-collapse-toggle[aria-expanded="true"] .schedule-toggle-icon { transform: rotate(90deg); background: #d5e9e5; }
.schedule-collapse-toggle strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 850; letter-spacing: -.01em; }
.schedule-collapse-toggle small { color: var(--ink-soft); font-size: .69rem; font-weight: 750; }
.schedule-delete-button { color: #9a6b6b; cursor: pointer; }
.schedule-delete-button svg { width: 18px; height: 18px; fill: currentColor; }
.schedule-delete-button:hover, .schedule-delete-button:focus-visible { outline: 0; background: #f8e8e8; color: var(--danger); }
.schedule-ai-button { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #e7f3f0; color: var(--teal); cursor: pointer; transition: transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease; }
.schedule-ai-button svg { width: 18px; height: 18px; fill: currentColor; }
.schedule-ai-button:hover, .schedule-ai-button:focus-visible { outline: 0; transform: translateY(-1px); background: #d5ebe6; color: #176f65; box-shadow: 0 6px 14px rgba(43,140,124,.16); }
.schedule-editor .panel-heading h2 { margin: 0; font-size: clamp(1.45rem,2.7vw,2rem); line-height: 1.16; letter-spacing: -.025em; }
.day-heading-actions { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 7px; }
.day-heading-icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #c8d9dc; border-radius: 11px; background: #fff; color: var(--teal); cursor: pointer; transition: transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease; }
.day-heading-icon-button svg { width: 18px; height: 18px; fill: currentColor; }
.day-heading-icon-button:hover, .day-heading-icon-button:focus-visible { outline: 0; transform: translateY(-1px); border-color: #98c6bf; background: #e9f4f1; box-shadow: 0 5px 13px rgba(18,59,85,.1); }
.day-delete-helper { color: var(--danger); border-color: #ebc8ca; }.day-delete-helper:hover, .day-delete-helper:focus-visible { border-color: #dd9ca1; background: #fdf0f0; }
.schedule-card .insert-controls { margin: 0; padding: 12px 14px 0; }
.schedule-card .schedule-fields { padding: 14px; }
.schedule-map-field-action { align-self: end; }
.schedule-map-field-action .small-button { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.schedule-map-field-action svg { width: 17px; height: 17px; fill: currentColor; }
.schedule-item-actions { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; margin-top: 4px; padding: 14px; border: 1px solid #d8e7e4; border-radius: 13px; background: linear-gradient(135deg,#f4f9f8 0%,#f8fbfb 100%); }
.schedule-item-action-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.schedule-item-actions .small-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; white-space: nowrap; }
.schedule-item-actions svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
.schedule-move-action { min-width: min(100%,430px); margin-left: auto; }
.schedule-move-action > label { display: block; margin: 0 0 6px; color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
.schedule-move-action > div { display: grid; grid-template-columns: minmax(190px,1fr) auto; gap: 8px; }
.schedule-move-action select { min-width: 0; width: 100%; }
.inline-actions { display: flex; gap: 6px; }
.leg-card { padding: 0; overflow: clip; transition: border-color .18s ease, box-shadow .18s ease; }
.leg-card:not(.is-collapsed) { border-color: #b8d5d1; box-shadow: 0 8px 24px rgba(18,59,85,.07); }
.leg-card .editable-head { margin: 0; padding: 10px 12px; background: #fff; }
.leg-card.is-collapsed .editable-head { background: var(--surface-2); }
.leg-card .form-grid { padding: 16px; border-top: 1px solid var(--line); }
.leg-collapse-toggle { min-width: 0; flex: 1; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 2px 8px; align-items: center; border: 0; background: transparent; color: var(--ink); padding: 4px; text-align: left; border-radius: 9px; }
.leg-collapse-toggle:hover { background: #edf4f5; }
.leg-collapse-toggle:focus-visible { outline: 3px solid rgba(43,140,124,.2); }
.leg-toggle-icon { grid-row: 1 / span 2; width: 22px; height: 22px; display: grid; place-items: center; color: var(--teal); transition: transform .18s ease; }
.leg-collapse-toggle[aria-expanded="true"] .leg-toggle-icon { transform: rotate(90deg); }
.leg-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; font-weight: 900; }
.leg-summary { display: block; color: var(--ink-soft); font-size: .7rem; font-weight: 700; }
.leg-list-actions { flex-wrap: wrap; justify-content: flex-end; }
.image-upload-row { display: grid; grid-template-columns: 120px minmax(180px, 1fr); gap: 10px 14px; align-items: center; }
.image-upload-row img { width: 120px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); grid-row: span 2; }
.image-upload-row span { color: var(--ink-soft); font-size: .72rem; }
.field-action { align-content: end; }
.share-link-card { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(260px,1.6fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.share-link-card>div:first-child strong,.share-link-card>div:first-child span { display:block; }
.share-link-card>div:first-child span { color: var(--ink-soft); font-size: .72rem; }
.share-link-card input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px; background: #fff; }
.share-link-card.revoked { opacity: .58; }

/* Beheerinterface: één planning, gespecialiseerde overzichten */
.admin-panel-lead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin-bottom: 16px; padding: 18px 20px; border: 1px solid #cfe0df; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f8fcfb, #eef5f6);
}
.admin-panel-lead h2 { margin: 0 0 6px; font-size: clamp(1.35rem,2vw,1.8rem); }
.admin-panel-lead p:last-child { max-width: 760px; margin: 0; color: var(--ink-soft); }
.context-chip, .record-count {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px;
  border: 1px solid #bad6d2; border-radius: 999px; background: #fff; color: var(--teal); font-size: .72rem; font-weight: 900;
}
.legacy-control { display: none !important; }
.movement-overview-panel .panel-heading { align-items: flex-start; }

.program-item-card {
  position: relative; border: 1px solid var(--line); border-radius: 15px; background: #fff; overflow: clip;
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .18s ease;
}
.program-item-card + .program-item-card { margin-top: 10px; }
.program-item-card:not(.is-collapsed) { border-color: #afd0cb; box-shadow: 0 9px 25px rgba(18,59,85,.08); }
.program-item-card.is-dragging { opacity: .55; transform: scale(.99); box-shadow: 0 16px 40px rgba(18,59,85,.18); }
.program-item-card.is-drop-target { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(43,140,124,.14); }
.program-item-head { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 9px 10px; background: var(--surface-2); }
.program-item-card:not(.is-collapsed) .program-item-head { background: #fff; }
.program-drag-handle { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #74909b; cursor: grab; touch-action: none; }
.program-drag-handle:hover, .program-drag-handle:focus-visible { outline: 0; background: #e2eeed; color: var(--teal); }
.program-drag-handle:active { cursor: grabbing; }
.program-drag-handle svg { width: 22px; height: 22px; fill: currentColor; }
.program-collapse-toggle { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 2px 7px; align-items: center; border: 0; border-radius: 9px; padding: 5px 7px; background: transparent; color: var(--ink); text-align: left; }
.program-collapse-toggle:hover, .program-collapse-toggle:focus-visible { outline: 0; background: #e8f1f2; }
.program-toggle-icon { grid-row: 1 / span 2; display: grid; place-items: center; color: var(--teal); font-size: 1.4rem; transition: transform .18s ease; }
.program-collapse-toggle[aria-expanded="true"] .program-toggle-icon { transform: rotate(90deg); }
.program-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 850; }
.program-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: .7rem; font-weight: 700; }
.program-item-body { padding: 17px; border-top: 1px solid var(--line); }
.program-item-card.is-collapsed .program-item-body { display: none; }
.program-type-fields { margin-top: 16px; }
.dynamic-field-section { padding-top: 16px; border-top: 1px solid var(--line); }
.toggle-field { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #f8faf9; color: var(--ink); font-size: .8rem; font-weight: 800; }
.toggle-field input { width: 18px; height: 18px; accent-color: var(--teal); }
.route-override-fields { margin-top: 12px; }
.route-calculation-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 13px 0; padding: 12px 14px; border: 1px dashed #a7ccc6; border-radius: 12px; background: #f3faf8; }
.route-calculation-card strong, .route-calculation-card span { display: block; }
.route-calculation-card span { color: var(--ink-soft); font-size: .72rem; }
.transport-route-card { margin-top: 2px; padding: 14px; border: 1px solid #cfe0de; border-radius: 14px; background: linear-gradient(135deg,#f7fbfa,#f0f7f6); }
.transport-route-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.transport-route-card-head strong, .transport-route-card-head span { display: block; }
.transport-route-card-head strong { font-size: .86rem; }
.transport-route-card-head > div > span { margin-top: 2px; color: var(--ink-soft); font-size: .68rem; }
.automation-chip { flex: 0 0 auto; padding: 5px 8px; border: 1px solid #b7d5d0; border-radius: 999px; background: #fff; color: var(--teal); font-size: .62rem; font-weight: 900; }
.automatic-route-points { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); align-items: stretch; gap: 8px; margin-top: 12px; }
.automatic-route-points article { min-width: 0; padding: 11px 12px; border: 1px solid #d8e5e3; border-radius: 11px; background: #fff; }
.automatic-route-points article span, .automatic-route-points article strong, .automatic-route-points article small { display: block; }
.automatic-route-points article span { color: var(--teal); font-size: .6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.automatic-route-points article strong { margin-top: 3px; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.automatic-route-points article small { margin-top: 2px; overflow: hidden; color: var(--ink-soft); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.route-point-arrow { align-self: center; display: grid; place-items: center; color: var(--teal); font-size: 1.15rem; font-weight: 900; }
.route-override-switch { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,.72); cursor: pointer; }
.route-override-switch input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--teal); }
.route-override-switch span, .route-override-switch strong, .route-override-switch small { display: block; }
.route-override-switch strong { font-size: .76rem; }
.route-override-switch small { margin-top: 1px; color: var(--ink-soft); font-size: .63rem; }
.route-override-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #d5e3e1; }
.route-override-editor .field.full { grid-column: 1 / -1; }
.automatic-value-card { align-self: end; min-height: 69px; display: grid; align-content: center; padding: 9px 11px; border: 1px solid #d5e4e1; border-radius: 11px; background: #f7faf9; }
.automatic-value-card span, .automatic-value-card strong, .automatic-value-card small { display: block; }
.automatic-value-card span { color: var(--ink-soft); font-size: .65rem; font-weight: 800; }
.automatic-value-card strong { margin-top: 2px; color: var(--teal); font-size: 1rem; }
.automatic-value-card small { color: var(--ink-soft); font-size: .58rem; }
.route-calculate-action { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.route-calculate-action button { display: inline-flex; align-items: center; gap: 7px; }
.route-calculate-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.route-calculate-status { color: var(--teal); font-size: .7rem; font-weight: 800; }
.route-calculate-status.error { color: var(--danger); }
.travel-mode-settings { margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #f8faf9; }
.travel-mode-grid + #modeSettingsFields { margin-top: 24px; }
.travel-mode-grid .checkbox-field { min-height: 45px; padding: 10px 12px; border: 1px solid #dce7e6; border-radius: 11px; background: #f8faf9; transition: border-color .15s ease,background .15s ease; }
.travel-mode-grid .checkbox-field:has(input:checked) { border-color: #9fc9c2; background: #eaf4f1; }
.travel-mode-grid .checkbox-field input { width: 18px; height: 18px; accent-color: var(--teal); }
.transport-settings-heading { margin-top: 4px; padding: 11px 13px; border-left: 4px solid var(--teal); border-radius: 0 11px 11px 0; background: #f0f7f5; }
.transport-settings-heading span { color: var(--ink-soft); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.transport-settings-heading h3 { margin: 2px 0 0; font-size: 1rem; }
.travel-mode-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.travel-mode-heading strong, .travel-mode-heading span { display: block; }
.travel-mode-heading span { color: var(--ink-soft); font-size: .72rem; }

/* Algemene instellingen en gebruikersprofielen */
.settings-page-intro { max-width: none; width: 100%; }
.settings-page-intro h1 { max-width: 100%; overflow-wrap: anywhere; }
.settings-page-intro > p:last-child { max-width: 980px; }
.user-management-panel { padding: 22px; }
.user-management-heading { align-items: flex-start; }
.user-management-grid { grid-template-columns: minmax(220px,.48fr) minmax(0,1.52fr); }
.user-directory { position: sticky; top: 154px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); max-height: calc(100vh - 182px); overflow: auto; }
.user-directory-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.user-directory-head h3 { margin: 0; }
.user-profile-form { display: grid; gap: 20px; padding: 22px; box-shadow: none; }
.user-form-header { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.user-form-header h3, .user-form-header p { margin-bottom: 3px; }
.profile-photo-editor { flex: 0 0 106px; display: grid; justify-items: center; gap: 7px; }
.profile-photo-placeholder { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg,#dceff0,#f6e9c8); color: var(--blue); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(18,59,85,.12); font-size: 2.5rem; }
.profile-photo-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.profile-fieldset { min-width: 0; margin: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.profile-fieldset legend { padding: 0 8px; color: var(--blue); font-size: .85rem; font-weight: 900; }
.profile-fieldset .form-grid { gap: 12px; }
.privacy-note { margin: 12px 0 0; padding: 9px 11px; border-radius: 9px; background: #fff8e9; color: #695125; font-size: .72rem; }
.label-hint { color: var(--ink-soft); font-size: .7rem; font-weight: 600; }
.user-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.user-form-actions .danger-button { margin-left: auto; }
.user-card { cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.user-card:hover { transform: translateY(-1px); border-color: #b5d4d0; }
.user-card.active { border-color: var(--teal); background: #e6f1ef; box-shadow: 0 0 0 2px rgba(43,140,124,.1); }

/* Eén thematische vervanging voor alert, confirm en prompt */
.app-modal { width: min(540px,calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 32px 100px rgba(8,30,45,.34); overflow: hidden; }
.app-modal::backdrop { background: rgba(8,30,45,.66); backdrop-filter: blur(5px); }
.app-modal-card { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 14px 16px; padding: 27px; }
.app-modal-close { right: 9px; top: 9px; }
.app-modal-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px; background: #e7f3f0; color: var(--teal); }
.app-modal-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.app-modal[data-tone="danger"] .app-modal-icon { background: #fbe9e9; color: var(--danger); }
.app-modal[data-tone="success"] .app-modal-icon { background: #e8f5ee; color: var(--success); }
.app-modal-copy { min-width: 0; padding-right: 30px; }
.app-modal-copy h2 { margin: 0 0 7px; font-size: 1.55rem; }
.app-modal-copy p:last-child { margin: 0; color: var(--ink-soft); }
.app-modal-prompt { grid-column: 1 / -1; }
.app-modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.app-modal[data-mode="alert"] #appModalCancel { display: none; }
.app-modal[data-tone="danger"] #appModalConfirm { background: var(--danger); }

.travel-home-hero {
  min-height: 330px; display: grid; align-items: end; color: #fff;
  background: radial-gradient(circle at 80% 10%, rgba(156,226,207,.34), transparent 34%), linear-gradient(135deg,#0d3047,#1f6f72 62%,#d18b28);
}
.travel-home-intro { padding: 92px 0 52px; }
.travel-home-intro .eyebrow { color: #9ce2cf; }
.travel-home-intro h1 { max-width: 760px; margin: 7px 0 12px; font-size: clamp(2.1rem,5vw,4.5rem); line-height: .98; }
.travel-home-intro p:not(.eyebrow) { max-width: 680px; color: rgba(255,255,255,.84); font-size: 1.05rem; }
.travel-library { padding-top: 42px; padding-bottom: 70px; }
.trip-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.trip-library-card { position: relative; overflow: hidden; min-height: 390px; border-radius: 22px; background: #123b55; box-shadow: var(--shadow-soft); color: #fff; isolation: isolate; }
.trip-library-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.trip-library-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(10,31,45,.02) 18%,rgba(8,29,43,.94) 100%); }
.trip-library-delete { position: absolute; z-index: 3; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: rgba(8,29,43,.68); color: #fff; box-shadow: 0 5px 16px rgba(8,29,43,.24); backdrop-filter: blur(8px); transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.trip-library-delete svg { width: 19px; height: 19px; fill: currentColor; }
.trip-library-delete:hover { border-color: rgba(255,255,255,.82); background: #a72f36; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(92,17,24,.34); }
.trip-library-delete:focus-visible { outline: 3px solid #fff; outline-offset: 3px; background: #a72f36; }
.trip-library-body { min-height: 390px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.trip-status { align-self: flex-start; margin-bottom: auto; background: rgba(255,255,255,.9); color: var(--blue); border-radius: 999px; padding: 7px 10px; font-size: .7rem; font-weight: 900; }
.trip-library-body h3 { font-size: 1.45rem; margin: 0 0 7px; }
.trip-library-body p { color: rgba(255,255,255,.78); margin: 0 0 12px; }
.trip-library-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.trip-library-meta span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 8px; font-size: .68rem; }
.trip-library-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.trip-library-actions button { border-color: rgba(255,255,255,.35); }
.trip-library-actions .open-trip { background: #fff; color: var(--blue); }
.admin-page > .page-intro { width: 100%; max-width: none; }
.admin-trip-switcher { display: grid; gap: 8px; width: 100%; margin-top: 15px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.admin-trip-switcher label { color: var(--ink-soft); font-weight: 800; font-size: .78rem; }
.admin-trip-switcher-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; }
.admin-trip-switcher select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }

.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.calendar-toolbar strong { text-transform: capitalize; text-align: center; }
.trip-calendar { display: grid; grid-template-columns: repeat(7,minmax(150px,1fr)); min-width: 1080px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); }
#view-calendar .page-shell { overflow-x: auto; }
.calendar-day { min-height: 520px; border-right: 1px solid var(--line); background: linear-gradient(#fff,#f8fbfa); }
.calendar-day:last-child { border-right: 0; }
.calendar-day.outside-trip { background: #f2f5f4; }
.calendar-day-head { position: sticky; top: 0; z-index: 2; padding: 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); }
.calendar-day-head span,.calendar-day-head strong { display: block; }
.calendar-day-head span { color: var(--ink-soft); font-size: .7rem; text-transform: uppercase; }
.calendar-day-head strong { font-size: 1.25rem; }
.calendar-day.today .calendar-day-head strong { color: var(--teal); }
.calendar-events { display: grid; gap: 7px; padding: 9px; }
.calendar-event { width: 100%; border: 0; border-left: 4px solid var(--teal); border-radius: 9px; padding: 8px; background: #e8f3f0; color: var(--ink); text-align: left; box-shadow: 0 2px 7px rgba(8,30,45,.07); }
.calendar-event:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(8,30,45,.12); }
.calendar-event .event-time,.calendar-event strong,.calendar-event small { display: block; }
.calendar-event .event-time { color: var(--teal); font-weight: 900; font-size: .68rem; }
.calendar-event strong { font-size: .77rem; line-height: 1.3; margin-top: 2px; }
.calendar-event small { color: var(--ink-soft); margin-top: 3px; }
.calendar-event.type-drive,.calendar-event.type-road,.calendar-event.type-bridge { border-color: #1b5f7a; background: #e8f1f5; }
.calendar-event.type-ferry { border-color: #d18b28; background: #fff3e3; }
.calendar-event.type-transit { border-color: #7b5ca7; background: #f1ebf8; }
.calendar-event.type-meal { border-color: #b46145; background: #fff0ea; }
.calendar-event.type-camp,.calendar-event.type-home { border-color: #4a8c58; background: #edf7ef; }

.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.settings-save { margin-top: 14px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.settings-layout { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 24px; align-items: start; }
.settings-sidebar { position: sticky; top: 92px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 12px 32px rgba(18,59,85,.08); }
.settings-sidebar-title { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 17px; color: #fff; background: linear-gradient(135deg,#153d57,#247b72); }
.settings-sidebar-title > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.14); font-size: 1.15rem; }
.settings-sidebar-title strong,.settings-sidebar-title small { display: block; }.settings-sidebar-title small { color: rgba(255,255,255,.68); font-size: .65rem; }
.settings-nav { display: grid; gap: 4px; padding: 9px; }
.settings-nav-link { width: 100%; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 9px; border: 0; border-radius: 12px; padding: 10px; background: transparent; color: var(--ink); text-align: left; transition: color .16s ease,background .16s ease; }
.settings-nav-link > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); color: var(--teal); font-weight: 900; }
.settings-nav-link strong,.settings-nav-link small { display: block; }.settings-nav-link strong { font-size: .76rem; }.settings-nav-link small { margin-top: 1px; color: var(--ink-soft); font-size: .62rem; }
.settings-nav-link:hover { background: #f1f7f5; }.settings-nav-link.active { background: #e7f3f0; color: #164b4a; box-shadow: inset 3px 0 var(--teal); }.settings-nav-link.active > span:first-child { background: #fff; }
.settings-content { min-width: 0; }.settings-section { min-width: 0; animation: settingsSectionIn .18s ease; }
@keyframes settingsSectionIn { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.settings-section-intro { margin: 0 0 17px; }.settings-section-intro h2,.settings-section-intro p { margin: 0; }.settings-section-intro h2 { margin: 2px 0 4px; font-size: clamp(1.45rem,3vw,2rem); letter-spacing: -.025em; }.settings-section-intro > p:last-child,.settings-section-intro > div > p:last-child { max-width: 800px; color: var(--ink-soft); }
.settings-troubleshooting-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.settings-inline-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.form-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ai-log-filter-card { margin-bottom: 14px; padding: 14px; }
.ai-log-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.ai-log-summary-card { border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; background: #fff; box-shadow: 0 6px 18px rgba(18,59,85,.05); }
.ai-log-summary-card strong,.ai-log-summary-card span { display: block; }.ai-log-summary-card strong { font-size: 1.05rem; }.ai-log-summary-card span { color: var(--ink-soft); font-size: .66rem; }.ai-log-summary-card.running strong { color: #a66c0c; }.ai-log-summary-card.success strong { color: var(--success); }.ai-log-summary-card.failed strong { color: var(--danger); }.ai-log-summary-card.cancelled strong { color: #6c669c; }
.ai-log-workspace { display: grid; grid-template-columns: minmax(270px,340px) minmax(0,1fr); gap: 14px; align-items: start; }
.ai-log-list-card,.ai-log-detail-card { padding: 0; overflow: hidden; }.ai-log-list-card { position: sticky; top: 92px; }
.ai-log-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; border-bottom: 1px solid var(--line); }.ai-log-list-head h3,.ai-log-list-head p { margin: 0; }.ai-log-list-head p { color: var(--ink-soft); font-size: .65rem; }.ai-log-list-head > span { min-width: 31px; border-radius: 999px; padding: 5px 8px; background: var(--surface-2); color: var(--ink-soft); text-align: center; font-size: .68rem; font-weight: 850; }
.ai-log-list { max-height: 720px; overflow-y: auto; padding: 7px; scrollbar-width: thin; }
.ai-log-row { width: 100%; display: grid; gap: 5px; border: 0; border-radius: 11px; padding: 10px; background: transparent; color: var(--ink); text-align: left; }.ai-log-row + .ai-log-row { margin-top: 3px; }.ai-log-row:hover { background: #f2f7f6; }.ai-log-row.active { background: #e7f3f0; box-shadow: inset 3px 0 var(--teal); }
.ai-log-row-head,.ai-log-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.ai-log-row-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }.ai-log-row-meta { color: var(--ink-soft); font-size: .62rem; }.ai-log-row-error { overflow: hidden; color: var(--danger); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.ai-log-status { flex: 0 0 auto; border-radius: 999px; padding: 3px 6px; background: #edf1f2; color: var(--ink-soft); font-size: .58rem; font-weight: 900; text-transform: uppercase; }.ai-log-status.running { background: #fff3d8; color: #8a6217; }.ai-log-status.success { background: #e3f4eb; color: #167048; }.ai-log-status.failed { background: #f8dddd; color: #9d3636; }.ai-log-status.cancelled { background: #eceafa; color: #625b95; }
.ai-log-detail-card { min-height: 470px; }.ai-log-empty { min-height: 470px; display: grid; place-content: center; justify-items: center; padding: 30px; color: var(--ink-soft); text-align: center; }.ai-log-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--surface-2); color: var(--teal); font-size: 1.5rem; }.ai-log-empty h3 { margin: 12px 0 3px; color: var(--ink); }.ai-log-empty p { max-width: 360px; margin: 0; }
.ai-log-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,#fff,#f9fbfb); }.ai-log-detail-head h3,.ai-log-detail-head p { margin: 0; }.ai-log-detail-head p { margin-top: 3px; color: var(--ink-soft); font-size: .7rem; }
.ai-log-detail-body { display: grid; gap: 14px; padding: 17px; }.ai-log-metadata { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }.ai-log-meta { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--surface-2); }.ai-log-meta strong,.ai-log-meta span { display: block; }.ai-log-meta strong { color: var(--ink-soft); font-size: .58rem; text-transform: uppercase; }.ai-log-meta span { margin-top: 2px; overflow-wrap: anywhere; font-size: .69rem; font-weight: 750; }
.ai-log-error-box { border: 1px solid #e8b8b8; border-radius: 11px; padding: 10px 12px; background: #fff0f0; color: #8e3030; font-size: .72rem; overflow-wrap: anywhere; }
.ai-log-json { overflow: hidden; border: 1px solid #17394c; border-radius: 13px; background: #0e2635; }.ai-log-json summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; background: #153649; color: #fff; cursor: pointer; list-style: none; font-size: .72rem; font-weight: 850; }.ai-log-json summary::-webkit-details-marker { display: none; }.ai-log-json summary span { color: #96beb8; font-size: .6rem; font-weight: 650; }.ai-log-json pre { max-height: 560px; margin: 0; overflow: auto; padding: 14px; color: #d7e9e8; font: 11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size: 2; white-space: pre; }.ai-json-key { color: #8ed9cc; }.ai-json-string { color: #f1cf8b; }.ai-json-number { color: #93c7ff; }.ai-json-boolean { color: #d8a4ff; }.ai-json-null { color: #b3bec4; }
.ai-log-copy { flex: 0 0 auto; }
.ai-log-privacy { display: flex; gap: 8px; align-items: flex-start; border-radius: 10px; padding: 9px 11px; background: #eef6f4; color: var(--ink-soft); font-size: .67rem; }
.user-management-grid { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(340px,1.3fr); gap: 18px; align-items: start; }
.compact-form { box-shadow: none; padding: 16px; display: grid; gap: 12px; }
.compact-form h3 { margin: 0; }
.user-list { display: grid; gap: 8px; }
.user-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: var(--surface-2); }
.user-card strong,.user-card span { display: block; }
.user-card span { color: var(--ink-soft); font-size: .72rem; }
.trip-dialog { width: min(580px,calc(100% - 24px)); }
.trip-dialog textarea { min-height: 88px; }
.insert-controls { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 10px; }
.insert-controls button { font-size: .7rem; }
.schedule-photo-preview { width: 100%; max-width: 230px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.dialog-event-image { width: 100%; max-height: 310px; object-fit: cover; }
.print-stop-image img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; }
.print-photo-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.print-photo { page-break-inside: avoid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.print-photo img { width: 100%; height: 150px; object-fit: cover; display: block; }
.print-photo figcaption { padding: 7px; font-size: .72rem; color: var(--ink-soft); }

.detail-dialog { width: min(760px, calc(100% - 24px)); max-height: 90vh; border: 0; border-radius: var(--radius-lg); padding: 0; box-shadow: 0 30px 90px rgba(8, 30, 45, .3); overflow: hidden; position: relative; }
.detail-dialog::backdrop { background: rgba(8, 30, 45, .65); backdrop-filter: blur(4px); }
.detail-dialog #dialogContent { max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; border-radius: inherit; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(43,140,124,.78) transparent; }
.detail-dialog #dialogContent::-webkit-scrollbar { width: 12px; }
.detail-dialog #dialogContent::-webkit-scrollbar-track { background: transparent; margin-block: 18px; }
.detail-dialog #dialogContent::-webkit-scrollbar-thumb { min-height: 52px; border: 3px solid transparent; border-radius: 999px; background: linear-gradient(180deg, var(--teal), #1b5f7a) padding-box; }
.detail-dialog #dialogContent::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #247968, var(--blue)) padding-box; }
.dialog-close { position: absolute; right: 10px; top: 10px; margin: 0; z-index: 3; border: 0; background: rgba(255,255,255,.94); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 16px rgba(8,30,45,.18); }
.dialog-close svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2.3; stroke-linecap: round; }
.login-dialog { width: min(440px, calc(100% - 24px)); border: 0; padding: 0; border-radius: var(--radius-lg); box-shadow: 0 30px 90px rgba(8,30,45,.3); }
.login-dialog::backdrop { background: rgba(8,30,45,.68); backdrop-filter: blur(5px); }
.login-card { padding: 30px; display: grid; gap: 16px; }
.login-card h2,.login-card p { margin: 0; }
.login-close { position: absolute; right: 8px; top: 8px; margin: 0; }
.form-error { color: var(--danger); min-height: 1.2em; font-weight: 700; }
.access-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: linear-gradient(140deg,#123b55,#2b8c7c); }
.access-card { width: min(480px,100%); text-align: center; background: #fff; border-radius: 24px; padding: 38px; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.access-card .brand-mark { margin: 0 auto 14px; }
.access-locked>header,.access-locked>main,.access-locked>footer,.access-locked>.mobile-drawer,.access-locked>.drawer-backdrop { visibility: hidden; }
[hidden] { display: none !important; }
.dialog-image { height: 300px; background-size: cover; background-position: center; }
.dialog-body { padding: 24px; }
.dialog-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 15px 0; }
.dialog-section { margin-top: 20px; }
.dialog-stay-period > p { margin: 0 0 10px; color: var(--ink-soft); }
.dialog-day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dialog-day-card { border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: var(--surface-2); }
.dialog-day-card time, .dialog-day-card strong, .dialog-day-card span { display: block; }
.dialog-day-card time { color: var(--teal); font-size: .72rem; font-weight: 800; text-transform: capitalize; }
.dialog-day-card span { color: var(--ink-soft); font-size: .76rem; margin-top: 2px; }
.dialog-activity-list { display: grid; gap: 9px; }
.dialog-activity-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.dialog-activity-date { border-right: 1px solid var(--line); padding-right: 10px; }
.dialog-activity-date strong, .dialog-activity-date span { display: block; }
.dialog-activity-date strong { color: var(--teal); text-transform: capitalize; }
.dialog-activity-date span { color: var(--ink-soft); font-size: .78rem; }
.dialog-activity-card h4 { margin: 0 0 5px; }
.dialog-activity-card p { margin: 3px 0 8px; }
.dialog-activity-address { color: var(--ink-soft); font-size: .82rem; }
.facility-list { display: flex; flex-wrap: wrap; gap: 7px; }
.facility-chip { background: var(--surface-2); padding: 7px 9px; border-radius: 999px; font-size: .76rem; }

/* AI-planner */
.ai-nav-link { gap: 6px; }
.ai-nav-link span, .ai-launch-button span { color: var(--teal); }
.travel-home-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-page-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 78% 18%,rgba(77,202,177,.28),transparent 28%), linear-gradient(135deg,#102f47 0%,#164f63 55%,#277e72 100%); }
.ai-page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .14; background-image: radial-gradient(circle at center,rgba(255,255,255,.9) 0 1px,transparent 1.5px); background-size: 26px 26px; mask-image: linear-gradient(90deg,transparent,black); }
.ai-page-intro { position: relative; z-index: 1; min-height: 230px; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: 46px; }
.ai-page-intro > div:first-child { max-width: 760px; }
.ai-page-intro .eyebrow { color: #8de0cf; }
.ai-page-intro h1 { margin: 4px 0 8px; max-width: 760px; color: #fff; font-size: clamp(2rem,4vw,3.25rem); line-height: 1.06; letter-spacing: -.045em; }
.ai-page-intro p { margin: 0; max-width: 720px; color: rgba(255,255,255,.79); }
.ai-safety-badge { flex: 0 0 250px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(4,25,38,.18); }
.ai-safety-badge > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #8de0cf; color: #123b55; font-weight: 950; }
.ai-safety-badge strong, .ai-safety-badge small { display: block; }
.ai-safety-badge small { color: rgba(255,255,255,.7); }
.ai-page-shell { padding-block: 24px 42px; }
.ai-provider-alert { grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 14px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid #dfc785; border-radius: 16px; background: #fff9e9; box-shadow: var(--shadow-soft); }
.ai-provider-alert:not([hidden]) { display: grid; }
.ai-provider-alert-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #f6e8b7; color: #8d6b17; font-size: 1.3rem; }
.ai-provider-alert strong, .ai-provider-alert p { display: block; margin: 0; }
.ai-provider-alert p { color: var(--ink-soft); font-size: .8rem; }
.ai-workspace { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 18px; align-items: stretch; }
.ai-sidebar, .ai-chat-card { border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(18,59,85,.09); }
.ai-sidebar { min-width: 0; padding: 18px; }
.ai-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ai-sidebar-head h2, .ai-sidebar-head p { margin: 0; }
.ai-sidebar-head h2 { font-size: 1.1rem; }
.ai-live-dot { width: 11px; height: 11px; margin-top: 8px; border-radius: 50%; background: #b5c1c7; box-shadow: 0 0 0 5px rgba(181,193,199,.16); }
.ai-live-dot.healthy { background: #26a66d; box-shadow: 0 0 0 5px rgba(38,166,109,.14); }
.ai-live-dot.degraded { background: #d49625; box-shadow: 0 0 0 5px rgba(212,150,37,.14); }
.ai-mode-switch { display: grid; gap: 8px; }
.ai-mode-option { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; border: 1px solid transparent; border-radius: 13px; padding: 10px; background: var(--surface-2); color: var(--ink); text-align: left; transition: .17s ease; }
.ai-mode-option:hover { border-color: #c5d9d7; background: #edf5f3; }
.ai-mode-option.active { border-color: #79b9af; background: #e8f4f1; box-shadow: 0 0 0 3px rgba(43,140,124,.08); }
.ai-mode-option strong, .ai-mode-option small { display: block; }
.ai-mode-option small { color: var(--ink-soft); font-size: .68rem; }
.ai-mode-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--teal); font-size: 1.2rem; box-shadow: 0 3px 10px rgba(18,59,85,.08); }
.ai-trip-choice { margin-top: 15px; }
.ai-new-session { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; }
.ai-failover-summary { margin-top: 13px; padding: 11px; border: 1px dashed #bed4d1; border-radius: 12px; background: #f8fbfa; color: var(--ink-soft); font-size: .7rem; }
.ai-failover-summary strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: .74rem; }
.ai-provider-dots { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.ai-provider-dots span { width: 8px; height: 8px; border-radius: 50%; background: #b6c1c6; }
.ai-provider-dots span.healthy { background: #26a66d; }
.ai-provider-dots span.failed { background: #c96161; }
.ai-provider-dots span.enabled { background: #4d91a4; }
.ai-recent-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ai-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ai-recent-head h3 { margin: 0; font-size: .84rem; }
.ai-recent-head span { color: var(--ink-soft); font-size: .68rem; }
.ai-conversation-list { display: grid; min-width: 0; gap: 6px; max-height: 270px; overflow-y: auto; scrollbar-width: thin; }
.ai-conversation-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; gap: 2px; border-radius: 11px; transition: background .17s ease; }
.ai-conversation-row:hover, .ai-conversation-row.active { background: #eef5f4; }
.ai-conversation-item { width: 100%; min-width: 0; max-width: 100%; border: 0; border-radius: 11px; padding: 9px 8px 9px 10px; background: transparent; color: var(--ink); text-align: left; }
.ai-conversation-item:hover { background: transparent; }
.ai-conversation-item strong, .ai-conversation-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-conversation-item strong { font-size: .73rem; }
.ai-conversation-item span { color: var(--ink-soft); font-size: .65rem; }
.ai-conversation-delete { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #8a9aa2; opacity: .55; transition: color .17s ease, background .17s ease, opacity .17s ease; }
.ai-conversation-delete svg { width: 16px; height: 16px; fill: currentColor; }
.ai-conversation-row:hover .ai-conversation-delete, .ai-conversation-delete:focus-visible { opacity: 1; }
.ai-conversation-delete:hover, .ai-conversation-delete:focus-visible { background: #f8dddd; color: var(--danger); }
.ai-conversation-delete:focus-visible { outline: 2px solid var(--danger); outline-offset: 1px; }
.ai-chat-card { min-width: 0; min-height: 760px; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; overflow: hidden; }
.ai-chat-header { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 14px 17px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,#fff,#fbfcfc); }
.ai-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,#153d57,#2d9481); color: #fff; font-size: 1.35rem; box-shadow: 0 8px 18px rgba(18,59,85,.17); }
.ai-chat-header strong, .ai-chat-header span { display: block; }
.ai-chat-header span { color: var(--ink-soft); font-size: .7rem; }
.ai-model-chip { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #cde0dd; border-radius: 999px; padding: 6px 9px; background: #eff7f5; color: var(--teal); font-size: .67rem; font-weight: 850; }
.ai-chat-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; background: linear-gradient(180deg,#fbfcfc 0%,#f5f8f8 100%); scrollbar-width: thin; scrollbar-color: rgba(43,140,124,.6) transparent; }
.ai-chat-empty { max-width: 660px; margin: 70px auto; text-align: center; }
.ai-empty-orbit { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid #c5ded9; border-radius: 50%; background: radial-gradient(circle,#fff 35%,#e6f3f0 37% 55%,transparent 57%), linear-gradient(135deg,#e6f3f0,#f7f2e7); color: var(--teal); font-size: 1.75rem; box-shadow: 0 12px 32px rgba(43,140,124,.14); }
.ai-chat-empty h2 { margin: 0 0 6px; font-size: 1.45rem; }
.ai-chat-empty > p { max-width: 520px; margin: 0 auto; color: var(--ink-soft); }
.ai-prompt-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.ai-prompt-examples button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; background: #fff; color: var(--blue); font-size: .7rem; font-weight: 750; }
.ai-prompt-examples button:hover { border-color: #86bdb5; background: #edf6f4; }
.ai-message-list { display: grid; gap: 14px; }
.ai-message { max-width: min(760px,88%); display: grid; gap: 6px; }
.ai-message.user { justify-self: end; }
.ai-message.assistant { justify-self: start; }
.ai-message-label { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .65rem; font-weight: 800; }
.ai-message.user .ai-message-label { justify-content: flex-end; }
.ai-message-bubble { border: 1px solid var(--line); border-radius: 6px 17px 17px; padding: 11px 13px; background: #fff; color: var(--ink); box-shadow: 0 5px 15px rgba(18,59,85,.05); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-message.user .ai-message-bubble { border: 0; border-radius: 17px 6px 17px 17px; background: linear-gradient(135deg,#174663,#216b78); color: #fff; }
.ai-question-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ai-question-chip { border: 1px solid #b9d6d1; border-radius: 999px; padding: 7px 10px; background: #eff8f6; color: var(--teal); font-size: .69rem; font-weight: 800; }
.ai-thinking { width: min(680px,92%); display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 12px; margin-top: 14px; border: 1px solid #c8dcda; border-radius: 17px; padding: 13px 15px; background: rgba(255,255,255,.96); color: var(--ink-soft); box-shadow: var(--shadow-soft); }
.ai-thinking-pulse { display: flex; align-items: center; gap: 3px; min-height: 22px; }
.ai-thinking-pulse span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: aiPulse 1.2s infinite ease-in-out; }
.ai-thinking-pulse span:nth-child(2) { animation-delay: .16s; }.ai-thinking-pulse span:nth-child(3) { animation-delay: .32s; }
.ai-thinking-copy strong { display: block; color: var(--ink); font-size: .78rem; }
.ai-thinking-copy > p { margin: 2px 0 0; font-size: .7rem; line-height: 1.5; }
.ai-progress-steps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ai-progress-step { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 8px; background: #edf4f3; color: #60757a; font-size: .61rem; font-weight: 780; }
.ai-progress-step::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #7eaaa3; }
.ai-progress-step.current { background: #e2f2ee; color: var(--teal); }.ai-progress-step.current::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(43,140,124,.12); }
.ai-reasoning-summary { margin-top: 9px; border-left: 3px solid #9bc9c1; padding: 6px 9px; background: #f4f9f8; }
.ai-reasoning-summary span { color: var(--teal); font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.ai-reasoning-summary p { max-height: 90px; margin: 3px 0 0; overflow: auto; font-size: .66rem; line-height: 1.45; white-space: pre-wrap; }
@keyframes aiPulse { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-proposal { margin-top: 22px; border: 1px solid #a9d0c8; border-radius: 19px; overflow: hidden; background: #fff; box-shadow: 0 16px 36px rgba(18,59,85,.11); }
.ai-proposal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; color: #fff; background: linear-gradient(135deg,#143c56,#267c72); }
.ai-proposal-head .eyebrow { color: #91dfd0; }
.ai-proposal-head h2, .ai-proposal-head p { margin: 0; }.ai-proposal-head p { color: rgba(255,255,255,.76); }
.ai-proposal-ready { flex: 0 0 auto; border-radius: 999px; padding: 7px 10px; background: rgba(255,255,255,.15); font-size: .68rem; font-weight: 850; }
.ai-proposal-body { display: grid; gap: 18px; padding: 20px; }
.ai-proposal-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.ai-proposal-metric { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #f7faf9; }
.ai-proposal-metric strong, .ai-proposal-metric span { display: block; }
.ai-proposal-metric strong { font-size: 1rem; }.ai-proposal-metric span { color: var(--ink-soft); font-size: .65rem; }
.ai-proposal-section h3 { margin: 0 0 8px; font-size: .92rem; }
.ai-change-list, .ai-notice-list { display: grid; gap: 7px; }
.ai-change-row { display: grid; grid-template-columns: 92px 88px minmax(0,1fr); gap: 8px; align-items: start; padding: 9px 10px; border-radius: 10px; background: var(--surface-2); font-size: .72rem; }
.ai-change-row strong { color: var(--blue); }.ai-change-action { color: var(--teal); font-weight: 850; text-transform: capitalize; }
.ai-notice { display: flex; gap: 9px; border-radius: 10px; padding: 9px 11px; background: #fff8e8; color: #6f591c; font-size: .72rem; }
.ai-notice.assumption { background: #eef5f7; color: var(--ink-soft); }
.ai-day-preview-list { display: grid; gap: 7px; }
.ai-day-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.ai-day-preview summary { display: grid; grid-template-columns: 95px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.ai-day-preview summary::-webkit-details-marker { display: none; }
.ai-day-preview summary time { color: var(--teal); font-size: .7rem; font-weight: 850; }.ai-day-preview summary strong { font-size: .77rem; }.ai-day-preview summary span { color: var(--ink-soft); font-size: .66rem; }
.ai-day-preview ul { margin: 0; padding: 0 15px 12px 122px; list-style: none; }
.ai-day-preview li { padding: 5px 0; border-top: 1px solid #edf1f2; color: var(--ink-soft); font-size: .69rem; }
.ai-day-preview li strong { color: var(--ink); }
.ai-json-details { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }.ai-json-details summary { padding: 10px 12px; background: var(--surface-2); cursor: pointer; font-size: .73rem; font-weight: 850; }
.ai-json-details pre { max-height: 420px; margin: 0; overflow: auto; padding: 14px; background: #102a3a; color: #d6eee9; font: 11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; }
.ai-proposal-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); background: #fff; }
.ai-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; padding: 14px 16px; border-top: 1px solid var(--line); background: #fff; }
.ai-composer-input { border: 1px solid #ccdadd; border-radius: 14px; padding: 8px 10px 6px; background: #fbfcfc; transition: .16s ease; }.ai-composer-input:focus-within { border-color: #69ac9f; box-shadow: 0 0 0 3px rgba(43,140,124,.1); background: #fff; }
.ai-composer textarea { width: 100%; min-height: 46px; max-height: 170px; resize: vertical; border: 0; outline: 0; padding: 2px; background: transparent; color: var(--ink); }
.ai-composer-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: .59rem; }
.ai-send-button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 15px; background: linear-gradient(135deg,#17445f,#2b8c7c); color: #fff; box-shadow: 0 8px 18px rgba(18,59,85,.18); }.ai-send-button:disabled { cursor: not-allowed; opacity: .38; box-shadow: none; }.ai-send-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-stop-button { min-width: 74px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d7a2a2; border-radius: 15px; background: #fff1f1; color: #a83f3f; font-weight: 850; box-shadow: 0 7px 16px rgba(132,45,45,.11); }
.ai-stop-button:hover { border-color: #c77a7a; background: #fbe4e4; }.ai-stop-button:disabled { cursor: wait; opacity: .6; }
.ai-stop-button svg { width: 18px; height: 18px; fill: currentColor; }
.ai-chat-status { min-height: 24px; padding: 0 17px 10px; background: #fff; color: var(--ink-soft); font-size: .68rem; }.ai-chat-status.error { color: var(--danger); }

/* Contextuele en zwevende AI-reisassistent */
.ai-assistant-launcher { position: fixed; z-index: 1250; right: max(20px,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); width: 58px; height: 58px; display: grid; place-items: center; border: 0; border-radius: 20px; background: linear-gradient(145deg,#163f59,#238677); color: #fff; box-shadow: 0 16px 34px rgba(13,52,70,.3); cursor: pointer; transition: transform .18s ease,box-shadow .18s ease; }
.ai-assistant-launcher:hover, .ai-assistant-launcher:focus-visible { outline: 0; transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 40px rgba(13,52,70,.36); }
.ai-assistant-launcher svg { width: 29px; height: 29px; fill: currentColor; }
.ai-launcher-status { position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #32b67a; }
.ai-assistant-launcher.busy .ai-launcher-status { background: #f2b84b; animation: aiLauncherPulse 1.15s infinite; }
@keyframes aiLauncherPulse { 50% { box-shadow: 0 0 0 6px rgba(242,184,75,0); } 0%,100% { box-shadow: 0 0 0 0 rgba(242,184,75,.35); } }
.ai-compact-panel { position: fixed; z-index: 1240; right: max(20px,env(safe-area-inset-right)); bottom: calc(max(20px,env(safe-area-inset-bottom)) + 70px); width: min(410px,calc(100vw - 28px)); height: min(660px,calc(100dvh - 110px)); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto auto; overflow: hidden; border: 1px solid rgba(160,193,189,.9); border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(9,39,54,.3); transform-origin: right bottom; animation: aiCompactIn .2s ease-out; }
.ai-compact-panel[hidden] { display: none; }
@keyframes aiCompactIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.ai-compact-header { display: grid; grid-template-columns: 38px minmax(0,1fr) repeat(3,34px); align-items: center; gap: 8px; padding: 12px; color: #fff; background: linear-gradient(135deg,#143c56,#267c72); }
.ai-compact-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.14); font-size: 1.15rem; }
.ai-compact-header strong, .ai-compact-header span { display: block; }.ai-compact-header strong { font-size: .86rem; }.ai-compact-header span { overflow: hidden; color: rgba(255,255,255,.72); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.ai-compact-icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; }
.ai-compact-icon-button:hover { background: rgba(255,255,255,.2); }.ai-compact-icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ai-compact-icon-button:disabled { cursor: wait; opacity: .45; }
.ai-compact-focus { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #f0f7f5; }
.ai-compact-focus-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #dceeea; color: var(--teal); font-weight: 900; }
.ai-compact-focus strong, .ai-compact-focus span { display: block; }.ai-compact-focus strong { font-size: .7rem; }.ai-compact-focus span { overflow: hidden; color: var(--ink-soft); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.ai-compact-focus button { border: 0; border-radius: 999px; padding: 5px 8px; background: #fff; color: var(--teal); font-size: .6rem; font-weight: 850; }
.ai-compact-messages { min-height: 0; display: grid; align-content: start; gap: 10px; overflow-y: auto; padding: 13px; background: linear-gradient(180deg,#fbfcfc,#f5f8f8); scrollbar-width: thin; scrollbar-color: rgba(43,140,124,.55) transparent; }
.ai-compact-messages .ai-message { max-width: 94%; gap: 4px; }.ai-compact-messages .ai-message-label { font-size: .58rem; }.ai-compact-messages .ai-message-bubble { padding: 9px 10px; font-size: .72rem; line-height: 1.45; }.ai-compact-messages .ai-question-chip { padding: 5px 8px; font-size: .62rem; }
.ai-compact-empty { align-self: center; margin: auto; padding: 28px 18px; text-align: center; color: var(--ink-soft); }.ai-compact-empty span { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 16px; background: #e4f1ee; color: var(--teal); font-size: 1.3rem; }.ai-compact-empty strong { display: block; color: var(--ink); }.ai-compact-empty p { margin: 4px 0 0; font-size: .7rem; }
.ai-compact-thinking { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid var(--line); background: #f2f8f6; }
.ai-compact-thinking-orb { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #dcedea; color: var(--teal); animation: aiPulse 1.2s infinite ease-in-out; }
.ai-compact-thinking strong, .ai-compact-thinking span { display: block; }.ai-compact-thinking strong { font-size: .68rem; }.ai-compact-thinking span { color: var(--ink-soft); font-size: .59rem; }
.ai-compact-proposal { padding: 10px 12px; border-top: 1px solid #c7ddd9; background: #eef8f5; }
.ai-compact-proposal-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }.ai-compact-proposal-card strong, .ai-compact-proposal-card span { display: block; }.ai-compact-proposal-card strong { font-size: .72rem; }.ai-compact-proposal-card span { color: var(--ink-soft); font-size: .61rem; }.ai-compact-proposal-card button { padding: 7px 9px; font-size: .63rem; }
.ai-compact-composer { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 7px; align-items: end; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.ai-compact-composer textarea { min-height: 42px; max-height: 110px; resize: none; border: 1px solid #c9d9db; border-radius: 13px; padding: 10px; outline: 0; background: #fbfcfc; color: var(--ink); font: inherit; font-size: .73rem; }.ai-compact-composer textarea:focus { border-color: #62aa9e; box-shadow: 0 0 0 3px rgba(43,140,124,.1); background: #fff; }
.ai-compact-send, .ai-compact-stop { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; color: #fff; }.ai-compact-send { background: linear-gradient(135deg,#17445f,#2b8c7c); }.ai-compact-stop { background: #b84a4f; }.ai-compact-send:disabled { opacity: .4; }.ai-compact-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }.ai-compact-stop svg { width: 17px; height: 17px; fill: currentColor; }
.ai-compact-status { min-height: 20px; padding: 0 11px 7px; overflow: hidden; color: var(--ink-soft); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }.ai-compact-status.error { color: var(--danger); }

/* Compact, visueel controleerbaar AI-voorstel */
.ai-proposal-dialog { width: min(1120px,calc(100vw - 28px)); height: min(920px,calc(100dvh - 28px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 23px; overflow: hidden; background: #f3f7f7; box-shadow: 0 32px 100px rgba(8,30,45,.4); }
.ai-proposal-dialog::backdrop, .ai-proposal-item-dialog::backdrop { background: rgba(8,30,45,.72); backdrop-filter: blur(5px); }
.ai-proposal-dialog-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.ai-proposal-dialog-close { position: absolute; z-index: 5; right: 14px; top: 14px; background: rgba(255,255,255,.13); color: #fff; }.ai-proposal-dialog-close:hover { background: rgba(255,255,255,.24); }
.ai-proposal-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 72px 20px 24px; color: #fff; background: linear-gradient(135deg,#143c56,#267c72); }.ai-proposal-dialog-header .eyebrow { color: #91dfd0; }.ai-proposal-dialog-header h2 { margin: 0; }.ai-proposal-dialog-header p:not(.eyebrow) { max-width: 760px; margin: 4px 0 0; color: rgba(255,255,255,.74); }
.ai-proposal-dialog-scroll { overflow-y: auto; padding: 20px; scrollbar-width: thin; scrollbar-color: rgba(43,140,124,.6) transparent; }
.ai-proposal-dialog-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin-bottom: 16px; }
.ai-proposal-map-card, .ai-proposal-review-section, .ai-proposal-review-notices > section { overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-soft); }
.ai-proposal-map-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--line); }.ai-proposal-map-card h3 { margin: 0; }.ai-proposal-map-card header span { color: var(--ink-soft); font-size: .67rem; }
.ai-proposal-map-actions, .ai-proposal-map-style { display: flex; align-items: center; gap: 6px; }.ai-proposal-map-style { padding: 3px; border-radius: 10px; background: var(--surface-2); }.ai-proposal-map-style button { border: 0; border-radius: 8px; padding: 7px 9px; background: transparent; color: var(--ink-soft); font-size: .65rem; font-weight: 800; }.ai-proposal-map-style button.active { background: #fff; color: var(--teal); box-shadow: 0 2px 8px rgba(18,59,85,.1); }.ai-proposal-map-actions .small-button { display: inline-flex; align-items: center; gap: 6px; }.ai-proposal-map-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ai-proposal-map-host { position: relative; width: 100%; height: 320px; background: #dce7e9; }.ai-proposal-map { width: 100%; height: 100%; }.ai-proposal-map-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: #eaf0f1; color: var(--ink-soft); text-align: center; }
.ai-proposal-review-section { padding: 16px; }.ai-proposal-review-section .section-heading { margin-bottom: 13px; }.ai-proposal-review-section h3 { margin: 0; }
.ai-proposal-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }.ai-proposal-legend span, .ai-diff-badge { border-radius: 999px; padding: 4px 7px; font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }.ai-proposal-legend .added, .ai-diff-badge.added { background: #dcf4e8; color: #167048; }.ai-proposal-legend .changed, .ai-diff-badge.changed { background: #fff0c9; color: #86620d; }.ai-proposal-legend .removed, .ai-diff-badge.removed { background: #f9dede; color: #9b343b; }.ai-diff-badge.unchanged { background: #edf1f2; color: #66777c; }
.ai-proposal-day-plan { display: grid; gap: 10px; }.ai-proposal-day-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fbfcfc; }.ai-proposal-day-card > summary { display: grid; grid-template-columns: 86px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 12px; cursor: pointer; list-style: none; background: #fff; }.ai-proposal-day-card > summary::-webkit-details-marker { display: none; }.ai-proposal-day-card > summary time { color: var(--teal); font-size: .69rem; font-weight: 900; }.ai-proposal-day-card > summary strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }.ai-proposal-day-card > summary small { color: var(--ink-soft); font-size: .63rem; }
.ai-proposal-schedule-list { position: relative; display: grid; gap: 7px; padding: 11px; border-top: 1px solid var(--line); }.ai-proposal-schedule-item { display: grid; grid-template-columns: 48px 32px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 54px; padding: 8px; border: 1px solid #e2e9ea; border-radius: 12px; background: #fff; }.ai-proposal-schedule-item.removed { border-style: dashed; background: #fff8f8; opacity: .82; }.ai-proposal-schedule-item time { color: var(--teal); font-size: .65rem; font-weight: 900; }.ai-proposal-item-type { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: #edf4f3; color: var(--teal); font-size: .9rem; }.ai-proposal-schedule-copy { min-width: 0; }.ai-proposal-schedule-copy strong, .ai-proposal-schedule-copy span { display: block; }.ai-proposal-schedule-copy strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.ai-proposal-schedule-copy span { overflow: hidden; color: var(--ink-soft); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }.ai-proposal-item-actions { display: flex; gap: 5px; }.ai-proposal-item-actions button { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 9px; background: #edf4f3; color: var(--teal); }.ai-proposal-item-actions button:hover { background: #dcece8; }.ai-proposal-item-actions button:disabled { opacity: .35; }.ai-proposal-item-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ai-proposal-removed-day { border-color: #e7c6c8; }.ai-proposal-review-notices > section { padding: 15px; }.ai-proposal-review-notices h3 { margin: 0 0 9px; font-size: .86rem; }
.ai-proposal-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line); background: #fff; }
.ai-proposal-item-dialog { width: min(660px,calc(100vw - 24px)); max-height: min(820px,calc(100dvh - 24px)); padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 30px 90px rgba(8,30,45,.38); }.ai-proposal-item-shell { position: relative; max-height: inherit; overflow-y: auto; padding: 22px; }.ai-proposal-item-shell > .dialog-close { position: absolute; right: 12px; top: 12px; }.ai-proposal-item-hero { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 13px; align-items: center; padding-right: 44px; }.ai-proposal-item-hero .ai-proposal-item-type { width: 70px; height: 70px; border-radius: 20px; font-size: 1.5rem; }.ai-proposal-item-hero h2 { margin: 0; }.ai-proposal-item-hero p { margin: 4px 0 0; color: var(--ink-soft); }.ai-proposal-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 17px; }.ai-proposal-detail-row { border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px; background: var(--surface-2); }.ai-proposal-detail-row strong, .ai-proposal-detail-row span { display: block; }.ai-proposal-detail-row strong { color: var(--ink-soft); font-size: .59rem; text-transform: uppercase; }.ai-proposal-detail-row span { margin-top: 2px; overflow-wrap: anywhere; font-size: .72rem; }.ai-proposal-detail-notes { margin-top: 12px; padding: 12px; border-left: 3px solid #8bc2b8; background: #f1f8f6; color: var(--ink-soft); white-space: pre-wrap; }.ai-proposal-item-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }.ai-proposal-item-footer button { display: inline-flex; align-items: center; gap: 7px; }.ai-proposal-item-footer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ai-proposal-field-changes { margin-top: 17px; border: 1px solid #ecd99f; border-radius: 13px; overflow: hidden; background: #fffaf0; }.ai-proposal-field-changes h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid #ecd99f; color: #775d16; font-size: .75rem; }.ai-proposal-field-changes > div { display: grid; }.ai-proposal-field-changes article { display: grid; grid-template-columns: 90px minmax(0,1fr) 18px minmax(0,1fr); gap: 7px; align-items: start; padding: 8px 11px; border-top: 1px solid rgba(236,217,159,.55); font-size: .68rem; }.ai-proposal-field-changes article:first-child { border-top: 0; }.ai-proposal-field-changes article strong { color: #775d16; }.ai-proposal-field-changes article span:first-of-type { color: #9b5656; text-decoration: line-through; }.ai-proposal-field-changes article span:last-child { color: #246f61; font-weight: 750; }.ai-proposal-field-changes article b { color: #9c8952; }
.ai-proposal-map-dialog .ai-proposal-map-host { height: 100%; }.ai-proposal-map-dialog .ai-proposal-map { min-height: 0; height: 100%; }.ai-proposal-map-marker { width: 36px; height: 36px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 14px 14px 14px 3px; background: linear-gradient(145deg,#17445f,#2b8c7c); color: #fff; box-shadow: 0 5px 14px rgba(12,50,67,.3); transform: rotate(-45deg); }.ai-proposal-map-marker span { transform: rotate(45deg); font-size: .65rem; font-weight: 900; }
.ai-proposal-summary-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.ai-proposal-summary-actions .secondary-button { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }

/* AI-providerbeheer */
.ai-provider-heading { align-items: flex-start; }
.ai-provider-security { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px; align-items: center; margin: 14px 0 18px; padding: 12px 14px; border: 1px solid #c9dfdb; border-radius: 13px; background: #f2f9f7; }
.ai-provider-security svg { width: 28px; height: 28px; justify-self: center; fill: none; stroke: var(--teal); stroke-width: 1.8; }.ai-provider-security strong, .ai-provider-security span { display: block; }.ai-provider-security span { color: var(--ink-soft); font-size: .72rem; }
.ai-provider-list { display: grid; gap: 9px; }
.ai-provider-empty { padding: 28px; border: 1px dashed #b9cecb; border-radius: 14px; background: #fafcfb; text-align: center; color: var(--ink-soft); }.ai-provider-empty strong { display: block; color: var(--ink); }
.ai-provider-card { display: grid; grid-template-columns: 42px minmax(0,1.3fr) minmax(160px,.7fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: .16s ease; }
.ai-provider-card.disabled { opacity: .62; background: #f7f8f8; }.ai-provider-card.failed { border-color: #e2bebe; }.ai-provider-card.healthy { border-color: #b8d8d1; }
.ai-provider-order { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--teal); font-weight: 900; }
.ai-provider-main strong, .ai-provider-main span, .ai-provider-meta strong, .ai-provider-meta span { display: block; }.ai-provider-main span, .ai-provider-meta span { color: var(--ink-soft); font-size: .69rem; }.ai-provider-meta strong { font-size: .75rem; }
.ai-provider-status { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 4px; border-radius: 999px; padding: 3px 7px; background: #edf1f2; color: var(--ink-soft); font-size: .61rem; font-weight: 850; }.ai-provider-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #9aa9af; }.ai-provider-card.healthy .ai-provider-status::before { background: #24a06a; }.ai-provider-card.failed .ai-provider-status::before { background: #bd5252; }
.ai-provider-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.ai-provider-actions button { padding: 6px 8px; font-size: .69rem; }
.ai-provider-dialog { width: min(720px,calc(100% - 24px)); }.ai-provider-form { max-height: 90vh; overflow-y: auto; }.ai-provider-form .field small { color: var(--ink-soft); font-size: .68rem; }.ai-provider-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ai-secret-field, .ai-model-picker { position: relative; display: flex; align-items: center; }
.ai-secret-field input, .ai-model-picker input { width: 100%; padding-right: 46px; }
.ai-field-icon-button { position: absolute; right: 5px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background .15s ease,color .15s ease,transform .15s ease; }
.ai-field-icon-button:hover { background: var(--surface-2); color: var(--teal); }.ai-field-icon-button:active { transform: scale(.94); }.ai-field-icon-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }.ai-field-icon-button:disabled { cursor: wait; opacity: .55; }
.ai-field-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-eye-closed { display: none; }.ai-secret-field.is-visible .ai-eye-open { display: none; }.ai-secret-field.is-visible .ai-eye-closed { display: block; }
.ai-model-fetch-status { display: block; min-height: 1em; margin-top: 4px; }.ai-model-fetch-status.success { color: var(--teal) !important; }.ai-model-fetch-status.error { color: var(--danger) !important; }
.ai-model-picker.is-loading .ai-field-icon-button svg { animation: ai-model-spin .8s linear infinite; }
@keyframes ai-model-spin { to { transform: rotate(360deg); } }

.app-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; color: var(--ink-soft); font-size: .76rem; }

@media (max-width: 1020px) {
  .desktop-nav { display: none; }
  .desktop-trip-nav { display: none; }
  .trip-navigation { display: none; }
  .mobile-only { display: grid; }
  .header-inner { gap: 10px; }
  .brand { min-width: 0; flex: 1; }
  .header-actions { display: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-layout { grid-template-columns: 1fr; }
  .map-sidebar { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-layout { grid-template-columns: 1fr; }
  .admin-split { grid-template-columns: 240px 1fr; }
  .user-management-grid { grid-template-columns: minmax(200px,.5fr) minmax(0,1.5fr); }
  .trip-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ai-page-intro { gap: 24px; }
  .ai-safety-badge { flex-basis: 220px; }
  .ai-workspace { grid-template-columns: 260px minmax(0,1fr); }
  .ai-proposal-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ai-provider-card { grid-template-columns: 42px minmax(0,1fr) auto; }
  .ai-provider-meta { display: none; }
  .settings-layout { grid-template-columns: 210px minmax(0,1fr); gap: 16px; }
  .settings-sidebar { top: 82px; }
  .form-grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ai-log-workspace { grid-template-columns: 1fr; }
  .ai-log-list-card { position: static; }
  .ai-log-list { max-height: 340px; }
  .ai-proposal-dialog-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  :root { --page: min(100% - 22px, 1180px); }
  .header-inner { min-height: 64px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .brand strong { font-size: .92rem; }
  .travel-home-actions { align-items: stretch; flex-direction: column; }
  .ai-page-intro { min-height: 0; align-items: flex-start; flex-direction: column; gap: 20px; padding-block: 34px; }
  .ai-page-intro h1 { font-size: 2rem; }
  .ai-safety-badge { width: 100%; flex-basis: auto; }
  .ai-provider-alert { grid-template-columns: 38px minmax(0,1fr); }.ai-provider-alert button { grid-column: 1 / -1; }
  .ai-workspace { grid-template-columns: 1fr; }
  .ai-sidebar { padding: 14px; }
  .ai-mode-switch { grid-template-columns: 1fr 1fr; }
  .ai-mode-option { grid-template-columns: 1fr; align-content: start; }.ai-mode-icon { width: 32px; height: 32px; }.ai-mode-option small { display: none; }
  .ai-recent-block { display: none; }
  .ai-chat-card { min-height: 690px; border-radius: 18px; }
  .ai-chat-header { grid-template-columns: 40px minmax(0,1fr); }.ai-avatar { width: 40px; height: 40px; }.ai-model-chip { grid-column: 2; justify-self: start; }
  .ai-chat-scroll { padding: 14px; }
  .ai-chat-empty { margin: 42px auto; }
  .ai-message { max-width: 94%; }
  .ai-proposal-head { align-items: flex-start; flex-direction: column; padding: 16px; }
  .ai-proposal-body { padding: 14px; }
  .ai-proposal-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ai-change-row { grid-template-columns: 76px minmax(0,1fr); }.ai-change-row > span:last-child { grid-column: 1 / -1; }
  .ai-day-preview summary { grid-template-columns: 80px minmax(0,1fr); }.ai-day-preview summary span { grid-column: 2; }.ai-day-preview ul { padding-left: 14px; }
  .ai-composer { grid-template-columns: minmax(0,1fr) 44px; padding: 10px; }.ai-send-button { width: 44px; height: 44px; }.ai-composer-meta span:first-child { display: none; }
  .ai-provider-card { grid-template-columns: 38px minmax(0,1fr); }.ai-provider-order { width: 36px; height: 36px; }.ai-provider-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ai-provider-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .ai-assistant-launcher { right: 12px; bottom: 12px; width: 54px; height: 54px; border-radius: 18px; }
  .ai-compact-panel { inset: 72px 8px 74px 8px; width: auto; height: auto; border-radius: 19px; }
  .ai-proposal-dialog { width: calc(100vw - 10px); height: calc(100dvh - 10px); border-radius: 18px; }
  .ai-proposal-dialog-header { padding: 18px 58px 16px 16px; }.ai-proposal-dialog-header .ai-proposal-ready { display: none; }
  .ai-proposal-dialog-scroll { padding: 10px; }.ai-proposal-dialog-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ai-proposal-map-card > header { align-items: flex-start; flex-direction: column; }.ai-proposal-map-actions { width: 100%; justify-content: space-between; }.ai-proposal-map-host { height: 260px; }
  .ai-proposal-review-section { padding: 10px; }.ai-proposal-review-section .section-heading { gap: 8px; }.ai-proposal-day-card > summary { grid-template-columns: minmax(0,1fr) auto; }.ai-proposal-day-card > summary time { grid-column: 1; }.ai-proposal-day-card > summary strong { grid-column: 1; }.ai-proposal-day-card > summary small { grid-column: 2; grid-row: 1 / span 2; }.ai-proposal-day-card > summary .ai-diff-badge { grid-column: 2; }
  .ai-proposal-schedule-item { grid-template-columns: 43px 29px minmax(0,1fr); }.ai-proposal-item-actions { grid-column: 3; justify-content: flex-start; }.ai-proposal-dialog-footer { padding: 10px; }.ai-proposal-dialog-footer button { flex: 1; padding-inline: 9px; }
  .ai-proposal-detail-grid { grid-template-columns: 1fr; }.ai-proposal-item-shell { padding: 17px; }.ai-proposal-item-hero { grid-template-columns: 58px minmax(0,1fr); }.ai-proposal-item-hero .ai-proposal-item-type { width: 56px; height: 56px; border-radius: 16px; }
  .ai-proposal-field-changes article { grid-template-columns: 75px minmax(0,1fr); }.ai-proposal-field-changes article b { display: none; }.ai-proposal-field-changes article span:last-child { grid-column: 2; }
  .day-heading-actions { width: 100%; justify-content: flex-start; }
  .brand span { font-size: .67rem; }
  .hero { min-height: 500px; }
  .hero-inner { padding: 80px 0 36px; }
  .hero p { font-size: .96rem; }
  .page-top { padding-top: 32px; }
  .section-heading { align-items: start; flex-direction: column; }
  .filter-row { width: 100%; flex-direction: column; }
  .filter-row input, .filter-row select { width: 100%; min-width: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { min-height: 125px; padding: 14px; }
  .destination-grid { grid-template-columns: 1fr; }
  .timeline::before { left: 16px; }
  .timeline-day { grid-template-columns: 1fr; gap: 10px; padding-left: 38px; }
  .timeline-date { text-align: left; display: flex; gap: 7px; align-items: baseline; }
  .timeline-date strong { font-size: 1rem; }
  .timeline-dot { left: 7px; }
  .timeline-card-head { flex-direction: column; }
  .schedule-item { grid-template-columns: 46px 30px 1fr; gap: 7px; }
  .map-panel, #map { min-height: 560px; height: 560px; }
  .map-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 16px; }
  .map-dialog .map-panel, .map-dialog #map { min-height: 0; height: 100%; }
  .map-dialog .map-mode-switch { left: 46px; right: 58px; top: 8px; }
  .map-expand-button span, .map-restore-button span { display: none; }
  .map-sidebar { grid-template-columns: 1fr; }
  .budget-summary { grid-template-columns: 1fr; }
  .print-document { padding: 18px; }
  .print-cover { min-height: 540px; padding: 28px; }
  .print-kpis { grid-template-columns: 1fr 1fr; }
  .print-stop-grid { grid-template-columns: 1fr; }
  .print-stop-image { min-height: 180px; }
  .print-mini-grid { grid-template-columns: 1fr 1fr; }
  .print-destination-costs { grid-template-columns: 1fr; }
  .admin-split { grid-template-columns: 1fr; }
  .admin-tabs { margin-inline: -11px; padding-inline: 11px; scrollbar-width: thin; }
  .admin-panel-lead { align-items: stretch; flex-direction: column; gap: 12px; padding: 15px; }
  .context-chip { align-self: flex-start; }
  .record-list-card { position: static; max-height: 300px; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; }
  .schedule-item-actions { align-items: stretch; flex-direction: column; }
  .schedule-item-action-buttons { display: grid; grid-template-columns: 1fr; }
  .automatic-route-points { grid-template-columns: 1fr; }
  .route-point-arrow { transform: rotate(90deg); }
  .route-override-editor { grid-template-columns: 1fr; }
  .route-override-editor .field.full { grid-column: auto; }
  .transport-route-card-head { align-items: flex-start; flex-direction: column; }
  .schedule-move-action > div { grid-template-columns: 1fr; }
  .schedule-move-action { width: 100%; min-width: 0; margin-left: 0; }
  .schedule-item-actions .small-button { width: 100%; }
  .leg-card .editable-head { align-items: flex-start; flex-direction: column; }
  .leg-card .inline-actions { width: 100%; padding-left: 4px; flex-wrap: wrap; }
  .leg-collapse-toggle { width: 100%; }
  .program-item-head { grid-template-columns: 34px minmax(0,1fr); }
  .program-drag-handle { width: 34px; }
  .program-item-head > .danger-button { grid-column: 2; justify-self: start; }
  .route-calculation-card { align-items: stretch; flex-direction: column; }
  .field.full { grid-column: auto; }
  .dialog-image { height: 220px; }
  .dialog-meta { grid-template-columns: 1fr 1fr; }
  .dialog-day-grid { grid-template-columns: 1fr; }
  .dialog-activity-card { grid-template-columns: 1fr; }
  .dialog-activity-date { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 7px; display: flex; justify-content: space-between; gap: 10px; }
  .map-mode-switch { left: 45px; flex-wrap: wrap; }
  #routeStatus { width: 100%; margin-left: 0; }
  .share-link-card { grid-template-columns: 1fr; }
  .image-upload-row { grid-template-columns: 90px 1fr; }
  .image-upload-row img { width: 90px; }
  .footer-inner { flex-direction: column; }
  .trip-card-grid,.settings-grid,.user-management-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; gap: 14px; }
  .settings-sidebar { position: static; border-radius: 15px; }
  .settings-sidebar-title { display: none; }
  .settings-nav { display: flex; overflow-x: auto; padding: 7px; scrollbar-width: thin; }
  .settings-nav-link { flex: 0 0 auto; width: auto; grid-template-columns: 25px auto; padding: 8px 10px; white-space: nowrap; }
  .settings-nav-link > span:first-child { width: 25px; height: 25px; }
  .settings-nav-link small { display: none; }
  .settings-nav-link.active { box-shadow: inset 0 -3px var(--teal); }
  .settings-troubleshooting-intro { align-items: stretch; flex-direction: column; }
  .settings-inline-actions { flex-wrap: wrap; }
  .form-grid.four { grid-template-columns: 1fr; }
  .ai-log-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ai-log-metadata { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ai-log-detail-head { flex-direction: column; }
  .ai-log-copy { width: 100%; }
  .user-management-heading { align-items: stretch; flex-direction: column; }
  .user-directory { position: static; max-height: 280px; }
  .user-profile-form { padding: 15px; }
  .user-form-header { align-items: flex-start; }
  .profile-photo-editor { flex-basis: 86px; }
  .profile-photo-placeholder { width: 78px; height: 78px; }
  .profile-fieldset { padding: 13px; }
  .user-form-actions > * { flex: 1 1 100%; }
  .user-form-actions .danger-button { margin-left: 0; }
  .app-modal-card { grid-template-columns: 46px minmax(0,1fr); padding: 22px 18px 18px; }
  .app-modal-icon { width: 44px; height: 44px; border-radius: 14px; }
  .app-modal-copy { padding-right: 23px; }
  .app-modal-actions { flex-direction: column-reverse; }
  .app-modal-actions button { width: 100%; }
  .travel-home-intro { padding-top: 70px; }
  .trip-calendar { grid-template-columns: 1fr; min-width: 0; }
  .calendar-day { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .calendar-day.outside-trip { display: none; }
  .calendar-toolbar { position: sticky; left: 0; }
  .print-photo-gallery { grid-template-columns: 1fr 1fr; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .no-print, .app-header, .app-footer, .view:not(#view-print), .print-toolbar { display: none !important; }
  #view-print { display: block !important; min-height: 0; }
  #view-print .page-shell { width: 100%; padding: 0; }
  .print-document { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .print-cover { min-height: 250mm; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-cover h1 { font-size: 30pt; }
  .print-stop-grid { grid-template-columns: 65mm 1fr; }
  .print-stop-image { min-height: 55mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-stop-image img { height: 55mm; }
  .print-photo-gallery { grid-template-columns: repeat(3,1fr); }
  .print-photo img { height: 38mm; }
  .print-section { page-break-before: auto; }
  .print-source-list { columns: 2; }
  .print-table { width: 100%; min-width: 0; }
  .print-table th, .print-table td { padding: 4px 3px; font-size: 6.8pt; }
  .print-destination-costs { grid-template-columns: 1fr 1fr; }
  a { color: #000; text-decoration: none; }
}