:root {
  color-scheme: light;
  --ink: #18364b;
  --muted: #58758a;
  --paper: #eaf5fb;
  --white: #fafdff;
  --line: #cbdfea;
  --green: #1688bd;
  --green-dark: #075b89;
  --mint: #dceef8;
  --shadow: 0 8px 26px rgba(34, 94, 128, .09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.55 "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 20; top: -60px; left: 12px; padding: 10px 14px; border-radius: 8px; background: var(--green-dark); color: white; }
.skip-link:focus { top: 12px; }
.demo-banner { min-height: 36px; padding: 6px max(22px, calc((100vw - 1450px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e8f0e9; background: #2b4133; font-size: 10px; }
.demo-banner i, .demo-label i, .conversation-status i { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; background: #91c99e; }
.demo-banner a { color: #ccdfcf; }
.app-shell { min-height: calc(100vh - 36px); max-width: 1600px; margin: auto; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 16px 15px; display: flex; flex-direction: column; background: var(--white); border-right: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 9px; font: 800 20px "Manrope", sans-serif; letter-spacing: -1px; }
.brand-mark { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; }
.company { margin: 34px 0 22px; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; }
.company strong, .company small, .profile strong, .profile small { display: block; }
.company strong, .profile strong { font-size: 11px; }
.company small, .profile small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.side-nav { display: grid; gap: 5px; }
.nav-link { min-height: 42px; padding: 0 11px; display: flex; align-items: center; gap: 12px; border-radius: 8px; color: #68756b; font-size: 11px; font-weight: 600; transition: background .15s,color .15s; }
.nav-link:hover { background: #f6f8f5; color: var(--ink); }
.nav-link.active { background: var(--mint); color: var(--green-dark); }
.nav-link > span { width: 17px; text-align: center; font-size: 19px; font-weight: 400; }
.nav-icon, .nav-chat-icon { width: 18px !important; height: 18px; flex: 0 0 18px; display: grid; place-items: center; }
.nav-icon svg, .nav-chat-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-link b { min-width: 19px; height: 19px; margin-left: auto; display: grid; place-items: center; border-radius: 6px; background: #fff; color: #748177; font-size: 9px; }
.chat-nav-link, .group-nav-link { color: #06745f; }
.chat-nav-link, .group-nav-link { font-weight: 700; }
.nav-link.chat-nav-link.active, .nav-link.group-nav-link.active { background: #e4f6f0; color: #006b59; }
.chat-nav-link b { background: #dff4ed; color: #087b68; }
.group-nav-link b { padding: 0 5px; background: #dff4ed; color: #087b68; font-size: 7px; letter-spacing: .04em; }
.sidebar-bottom { margin-top: auto; }
.helper-card { margin: 0 2px 17px; padding: 14px; border: 1px solid #e8eee8; border-radius: 11px; background: #f7f9f6; }
.helper-card > span { width: 26px; height: 26px; margin-bottom: 9px; display: grid; place-items: center; border-radius: 8px; background: #e8f0e8; color: var(--green); }
.helper-card strong { display: block; font-size: 10px; }
.helper-card p { margin: 4px 0 8px; color: var(--muted); font-size: 9px; }
.helper-card a { color: var(--green); font-size: 9px; font-weight: 700; }
.profile { padding: 12px 5px 0; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); }
.avatar { width: 36px; height: 36px; display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #557b65; font-size: 10px; font-weight: 800; }
.avatar-jan { background: #557b65; }
.planning-avatar { background: #087b68; }
.main-area { min-width: 0; }
.topbar { height: 66px; padding: 0 clamp(22px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.93); }
.topbar-company { display: flex; align-items: center; gap: 9px; }
.topbar-company strong, .topbar-company small { display: block; }
.topbar-company strong { font-size: 10px; }
.topbar-company small { color: var(--muted); font-size: 9px; }
.demo-label { padding: 5px 9px; border: 1px solid var(--line); border-radius: 20px; color: #78857b; font-size: 9px; }
.demo-label i { width: 6px; height: 6px; background: #71a17a; }
.mobile-brand { display: none; align-items: center; gap: 8px; font: 800 15px "Manrope", sans-serif; }
.mobile-brand .brand-mark { width: 25px; height: 25px; border-radius: 7px; }
.content-wrap { width: min(1120px, calc(100% - 80px)); min-height: calc(100vh - 102px); margin: auto; padding: 37px 0 20px; }
.view.active { display: block; }
.page-heading { margin-bottom: 25px; }
.weather-card { max-width: 560px; min-height: 66px; margin: 21px 0 26px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #29392e; border-radius: 11px; background: #141f18; }
.weather-icon { width: 37px; height: 37px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #223529; color: #efd28a; font-size: 20px; }
.weather-copy { min-width: 0; flex: 1; }
.weather-copy strong, .weather-copy small { display: block; }
.weather-copy strong { font-size: 11px; }
.weather-copy small { margin-top: 1px; color: #a0afa4; font-size: 9px; }
.weather-copy .weather-credit { font-size: 7px; }
.weather-credit a { color: #b7ddb9; text-decoration: underline; text-underline-offset: 2px; }
.wind-flag { min-width: 135px; display: flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #34463a; border-radius: 8px; background: #101a14; }
.wind-flag svg { width: 25px; height: 25px; flex: 0 0 auto; color: #9abd9e; transition: transform .3s ease; }
.wind-flag strong, .wind-flag small { display: block; white-space: nowrap; }
.wind-flag strong { color: #e7efe8; font-size: 8px; }
.wind-flag small { margin-top: 2px; color: #a3b0a6; font-size: 7px; }
.weather-button { min-height: 31px; padding: 0 10px; border: 1px solid #3c5942; border-radius: 7px; background: #1c2c20; color: #c3e2c6; font-size: 9px; font-weight: 700; cursor: pointer; }
.weather-button:hover { background: #263c2b; }
.weather-button:disabled { opacity: .65; cursor: wait; }
.eyebrow { margin: 0 0 6px; color: #819087; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.page-heading h1 { margin: 0; font: 800 clamp(25px, 3vw, 33px)/1.2 "Manrope", sans-serif; letter-spacing: -1.2px; }
.page-heading h1 span { font-size: 20px; }
.page-heading > div > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.welcome-quote { margin-top: 7px !important; color: #b8cbb9 !important; font-size: 11px !important; font-style: italic; }
.section-heading { margin: 31px 0 12px; font: 800 16px "Manrope", sans-serif; }
.quick-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.quick-card { position: relative; min-height: 150px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow); transition: transform .15s,border-color .15s; }
.quick-card:hover { transform: translateY(-2px); border-color: #cbd9cb; }
.quick-icon { width: 36px; height: 36px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; }
.map-icon { background: #eaf2e9; color: #527354; }.help-icon { background: #f8efe3; color: #a87943; }.group-icon { background: #e9f0f2; color: #587b89; }
.quick-card strong { font-size: 12px; }
.quick-card small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.quick-arrow { position: absolute; right: 15px; bottom: 14px; color: var(--green); }
.welcome-card { margin-top: 20px; padding: 17px; display: flex; align-items: center; gap: 13px; border: 1px solid #e8eee8; border-radius: 11px; background: #f8faf7; }
.welcome-symbol { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #e9f0e8; color: var(--green); }
.welcome-card strong { font-size: 11px; }
.welcome-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.map-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(245px,.65fr); align-items: start; gap: 17px; }
.map-column { min-width: 0; }
.map-filters { margin-bottom: 11px; display: flex; flex-wrap: wrap; gap: 7px; }
.filter-button { min-height: 32px; padding: 0 13px; border: 1px solid #e3e9e2; border-radius: 7px; background: #fff; color: #637067; font-size: 10px; font-weight: 600; cursor: pointer; }
.filter-button:hover { border-color: #bacbbd; }
.filter-button.active { border-color: var(--green-dark); background: var(--green-dark); color: white; }
.map-frame { position: relative; height: 310px; overflow: hidden; border: 1px solid #e4e9e2; border-radius: 11px; background: #e8eee7; box-shadow: var(--shadow); }
.map-frame iframe, .roadmap-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.roadmap-map { z-index: 1; }
.map-frame iframe[hidden] { display: none; }
.map-frame .leaflet-container { background: #e4f0e8; font: 12px/1.5 "DM Sans", sans-serif; }
.map-unavailable { position: absolute; z-index: 2; inset: 30% 10% auto; margin: 0; padding: 14px; border: 1px solid #b9e3d8; border-radius: 10px; background: #f0fbf7; color: #075b4c; text-align: center; font-size: 11px; }
.location-marker { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50% 50% 50% 5px; background: #06745f; box-shadow: 0 2px 7px rgba(12, 62, 51, .4); color: #fff; font: 800 11px/1 "DM Sans", sans-serif; transform: rotate(-45deg); }
.location-marker span { transform: rotate(45deg); }
.leaflet-popup-content { margin: 11px 14px; font: 12px/1.5 "DM Sans", sans-serif; }
.leaflet-popup-content strong, .leaflet-popup-content span, .leaflet-popup-content a { display: block; }
.leaflet-popup-content span { margin-top: 2px; color: #58758a; }
.leaflet-popup-content a { margin-top: 6px; color: #06745f; font-weight: 700; }
.map-caption { position: absolute; right: 8px; bottom: 8px; padding: 4px 7px; border-radius: 4px; background: #fff; color: #626e65; font-size: 8px; pointer-events: none; }
.roadmap-map:not([hidden]) ~ .map-caption { right: auto; left: 8px; }
.locations-panel, .location-detail, .chat-list, .conversation { border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow); }
.locations-panel { margin-top: 12px; padding: 13px; }
.list-heading { min-height: 25px; display: flex; align-items: center; justify-content: space-between; color: #34433a; font-size: 10px; font-weight: 700; }
.list-heading > span { color: var(--muted); font-size: 9px; font-weight: 500; }
.location-list { display: grid; }
.location-card { width: 100%; min-height: 54px; padding: 7px 8px; display: flex; align-items: center; gap: 9px; border: 0; border-top: 1px solid #f0f2ee; background: transparent; text-align: left; cursor: pointer; }
.location-card:hover, .location-card.selected { background: #f6f9f5; }
.location-card.selected { box-shadow: inset 3px 0 var(--green); }
.location-symbol { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; font-size: 10px; font-weight: 800; }
.parking-symbol { background: #eaf2e9; color: #527354; }.restaurant-symbol { background: #f8efe3; color: #a87943; }.factory-symbol { background: #e9f0f2; color: #587b89; }
.abtexel-symbol { background: #e1f4ed; color: #06745f; }
.tire-symbol { background: #293624; color: #c7d98f; }.workshop-symbol { background: #292a3d; color: #c2bee9; }
.location-copy { min-width: 0; flex: 1; }
.location-copy strong, .location-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-copy strong { font-size: 9px; }
.location-copy small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.location-rating { color: #8a7956; font-size: 8px; white-space: nowrap; }
.location-detail { position: sticky; top: 15px; padding: 19px; }
.detail-placeholder > .location-symbol { width: 38px; height: 38px; margin-bottom: 19px; border-radius: 11px; font-size: 13px; }
.location-detail .eyebrow { margin-bottom: 5px; }
.location-detail h2 { margin: 0; font: 800 18px/1.3 "Manrope", sans-serif; letter-spacing: -.45px; }
.location-detail #detail-description { margin: 10px 0 13px; color: #69766d; font-size: 10px; line-height: 1.7; }
.detail-info { padding: 10px 0; border-top: 1px solid #edf0eb; border-bottom: 1px solid #edf0eb; color: #7d887f; font-size: 9px; }
.button { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: var(--green-dark); color: white; font-size: 10px; font-weight: 700; }
.button:hover { background: #3d6247; }
.map-open { width: 100%; margin-top: 13px; }
.source-link { display: block; margin-top: 10px; color: #06745f; font-size: 9px; font-weight: 700; text-align: center; }
.source-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.demo-note { margin: 12px 2px 0; color: #929b93; font-size: 8px; line-height: 1.55; }
.chat-layout { min-height: 440px; display: grid; grid-template-columns: 265px minmax(0,1fr); gap: 14px; }
.chat-list { padding: 13px 10px; }
.chat-list > .list-heading { margin: 0 4px 7px; color: #859087; font-size: 8px; letter-spacing: .1em; }
.chat-list > .list-heading span { color: #738075; }
.chat-choice { width: 100%; min-height: 57px; padding: 8px 6px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.chat-choice:hover, .chat-choice.active { background: #f2f6f1; }
.chat-choice .avatar { width: 34px; height: 34px; font-size: 9px; }
.chat-choice > span:nth-child(2) { min-width: 0; flex: 1; }
.chat-choice strong, .chat-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-choice strong { font-size: 9px; }
.chat-choice small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.mentor-avatar { background: #e8f0e8; color: #537355; }.pieter-avatar { background: #dcecee; color: #315e62; }.monique-avatar { background: #f4e7d8; color: #855d32; }.friends-avatar { background: #e9edf3; color: #586b85; }
.unread { width: 6px; height: 6px; border-radius: 50%; background: #6b9871; }
.conversation { min-width: 0; min-height: 440px; display: flex; flex-direction: column; }
.conversation-header { min-height: 58px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #edf0eb; }
.conversation-header > span:nth-child(2) { flex: 1; }
.conversation-header strong, .conversation-header small { display: block; }
.conversation-header strong { font-size: 10px; }
.conversation-header small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.conversation-header small i { width: 6px; height: 6px; background: #69a075; }
.conversation-menu { border: 0; background: transparent; color: #819087; font-size: 18px; letter-spacing: 2px; cursor: pointer; }
.messages { min-height: 300px; max-height: 420px; padding: 16px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 11px; overflow-y: auto; background: #fcfdfb; }
.message { max-width: min(82%, 390px); padding: 9px 11px 7px; border: 1px solid #e9eee8; border-radius: 3px 11px 11px 11px; background: #fff; }
.message.mine { align-self: flex-end; border-color: #e4eee4; border-radius: 11px 3px 11px 11px; background: #eef5ed; }
.message strong { display: block; margin-bottom: 3px; color: #55725b; font-size: 8px; }
.message p { margin: 0; color: #455249; font-size: 10px; line-height: 1.55; white-space: pre-line; }
.message time { display: block; margin-top: 4px; color: #98a199; font-size: 7px; text-align: right; }
.message-form { min-height: 55px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; border-top: 1px solid #edf0eb; }
.message-form input { height: 35px; min-width: 0; padding: 0 10px; flex: 1; border: 1px solid #e8ede7; border-radius: 7px; outline-color: #8eae93; font-size: 9px; }
.message-form input::placeholder { color: #98a199; }
.message-form button { width: 34px; height: 34px; border: 0; border-radius: 7px; background: var(--green-dark); color: white; font-size: 18px; cursor: pointer; }
.chat-note { margin: 0; padding: 0 12px 10px; }
.group-list { max-width: 720px; display: grid; gap: 10px; }
.group-card { width: 100%; min-height: 83px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow); text-align: left; cursor: pointer; }
.group-card:hover { border-color: #bdcebf; }
.group-card-icon { width: 39px; height: 39px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; font-size: 11px; font-weight: 800; }
.group-ab { background: #e9efe3; color: #698158; }
.group-card > span:nth-child(2) { min-width: 0; flex: 1; }
.group-card strong, .group-card small { display: block; }
.group-card strong { font-size: 10px; }
.group-card small, .group-card p { color: var(--muted); font-size: 8px; }
.group-card small { margin-top: 3px; }
.group-card p { margin: 5px 0 0; }
.group-arrow { color: var(--green); }
.page-footer { margin-top: 27px; padding: 14px 0 4px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #e7ebe5; color: #9aa49b; font-size: 8px; }
.mobile-nav { display: none; }
.toast { position: fixed; z-index: 30; right: 20px; bottom: 20px; padding: 11px 15px; border-radius: 8px; background: #2b4133; color: white; box-shadow: 0 8px 30px #25362e35; font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 210px minmax(0,1fr); }
  .content-wrap { width: calc(100% - 44px); }
  .map-layout { grid-template-columns: minmax(0,1.1fr) minmax(220px,.9fr); gap: 12px; }
}
@media (max-width: 760px) {
  .sidebar { display: none; }
  .app-shell { display: block; min-height: calc(100vh - 36px); min-height: calc(100dvh - 36px); }
  .topbar { height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; }
  .mobile-brand { display: flex; }
  .topbar-company { display: none; }
  .content-wrap { width: min(650px, calc(100% - 30px)); min-height: calc(100vh - 94px); padding-top: 26px; padding-bottom: calc(83px + env(safe-area-inset-bottom)); }
  .map-layout { grid-template-columns: minmax(0,1fr); }
  .location-detail { position: static; }
  .map-frame { height: 270px; }
  .chat-layout { grid-template-columns: 210px minmax(0,1fr); gap: 9px; }
  .mobile-nav { position: fixed; z-index: 15; right: 0; bottom: 0; left: 0; height: calc(62px + env(safe-area-inset-bottom)); padding: 4px 8px env(safe-area-inset-bottom); display: flex; justify-content: space-around; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); }
  .mobile-nav a { min-width: 63px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #859087; font-size: 8px; font-weight: 600; }
  .mobile-nav a > span { font-size: 18px; line-height: 1.2; }
  .mobile-nav a.active { color: var(--green-dark); }
}
@media (max-width: 560px) {
  .demo-banner { min-height: 32px; padding: 5px 12px; font-size: 9px; }
  .demo-banner a { font-size: 0; }
  .demo-banner a span { font-size: 12px; }
  .content-wrap { width: calc(100% - 26px); padding-top: 22px; padding-bottom: calc(83px + env(safe-area-inset-bottom)); }
  .page-heading { margin-bottom: 19px; }
  .page-heading h1 { font-size: 25px; }
  .welcome-quote { font-size: 10px !important; }
  .weather-card { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 8px; padding: 10px; }
  .weather-icon { grid-column: 1; grid-row: 1; }
  .weather-copy { grid-column: 2 / 4; grid-row: 1; }
  .wind-flag { min-width: 0; grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .weather-button { grid-column: 3; grid-row: 2; justify-self: end; }
  .quick-grid { grid-template-columns: 1fr; gap: 8px; }
  .quick-card { min-height: 73px; padding: 11px; display: grid; grid-template-columns: 38px 1fr 16px; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 10px; }
  .quick-icon { grid-row: 1 / 3; margin: 0; }
  .quick-card strong { align-self: end; }
  .quick-card small { align-self: start; margin-top: 1px; }
  .quick-arrow { position: static; grid-column: 3; grid-row: 1 / 3; }
  .welcome-card { margin-top: 13px; padding: 13px; }
  .welcome-card p { font-size: 9px; }
  .map-filters { gap: 5px; }
  .filter-button { min-height: 30px; padding: 0 10px; font-size: 9px; }
  .map-frame { height: 245px; }
  .chat-layout { display: flex; flex-direction: column; }
  .chat-list { display: none; }
  .conversation { min-height: 390px; }
  .messages { min-height: 245px; }
  .message { max-width: 90%; }
  .page-footer { flex-direction: column; gap: 3px; }
  .mobile-nav { position: fixed; z-index: 15; right: 0; bottom: 0; left: 0; height: calc(58px + env(safe-area-inset-bottom)); padding: 4px 8px env(safe-area-inset-bottom); display: flex; justify-content: space-around; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); }
  .mobile-nav a { min-width: 63px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #859087; font-size: 8px; font-weight: 600; }
  .mobile-nav a > span { font-size: 18px; line-height: 1.2; }
  .mobile-nav a.active { color: var(--green-dark); }
  .toast { right: 12px; bottom: calc(67px + env(safe-area-inset-bottom)); left: 12px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Light-blue palette inspired by AB Texel; the site uses text, not logos. */
body { background: radial-gradient(ellipse at 68% 0, #f8fcff 0, var(--paper) 62%); }
.demo-banner { color: #f4fbff; background: #0876ad; }
.demo-banner a { color: #d7effb; }
.sidebar, .topbar { background: rgba(250, 253, 255, .97); }
.company { border-color: #cbdfea; background: #f4fafe; }
.company small, .profile small, .topbar-company small { color: #688195; }
.nav-link { color: #526f83; }
.nav-link:hover { background: #edf6fb; color: #173d57; }
.nav-link.active { background: #dceef8; color: #075b89; }
.nav-link b { background: #eaf5fb; color: #41677f; }
.helper-card, .welcome-card { border-color: #cbdfea; background: #f2f9fd; }
.helper-card > span, .map-icon, .welcome-symbol { background: #dceef8; color: #0879b4; }
.helper-card p, .welcome-card p { color: #607c90; }
.profile { border-color: #cbdfea; }
.topbar { border-color: #cbdfea; }
.demo-label { border-color: #cbdfea; background: #f2f9fd; color: #386782; }
.page-heading > div > p:last-child { color: #58758a; }
.eyebrow { color: #3a7798; }
.quick-card, .locations-panel, .location-detail, .chat-list, .conversation, .group-card {
  border-color: #cbdfea;
  background: #fafdff;
}
.text-link, .quick-arrow, .group-arrow { color: #087bb4; }
.quick-card:hover, .group-card:hover { border-color: #83b9d4; }
.map-icon { background: #dceef8; color: #117db0; }
.help-icon { background: #e5f3fb; color: #2479a4; }
.group-icon { background: #e4f3f9; color: #347d99; }
.quick-card small { color: #58758a; }
.filter-button { border-color: #cbdfea; background: #f7fbfe; color: #385a71; }
.filter-button:hover { border-color: #87bad4; }
.filter-button.active { border-color: #075b89; background: #0876ad; color: #fff; }
.map-frame { border-color: #c0dce9; background: #deeff8; }
.map-caption { background: #fafdff; color: #345a73; }
.list-heading { color: #26485f; }
.list-heading > span { color: #607c90; }
.location-card { border-color: #e1edf4; }
.location-card:hover, .location-card.selected { background: #eaf5fb; }
.parking-symbol { background: #dceef8; color: #0874aa; }
.restaurant-symbol { background: #e5f3fb; color: #2479a4; }
.factory-symbol { background: #e2f0f7; color: #347d99; }
.tire-symbol { background: #e4f1df; color: #537b44; }
.workshop-symbol { background: #e5edf8; color: #476f9c; }
.location-copy strong { color: #203f55; }
.location-copy small, .detail-info, .demo-note { color: #648095; }
.location-rating { color: #4e7287; }
.location-detail #detail-description { color: #526f83; }
.detail-info { border-color: #dce9f0; }
.button { background: #0876ad; color: #fff; }
.button:hover { background: #075b89; }
.chat-list > .list-heading { color: #59788c; }
.chat-choice:hover, .chat-choice.active { background: #eaf5fb; }
.chat-choice strong { color: #203f55; }
.chat-choice small { color: #617e92; }
.mentor-avatar { background: #dceef8; color: #176a95; }
.pieter-avatar { background: #d9eef4; color: #276d83; }
.monique-avatar { background: #e6f0f7; color: #426f8b; }
.friends-avatar { background: #e4edf8; color: #4c6888; }
.conversation-header { border-color: #dce9f0; }
.conversation-header small, .conversation-menu { color: #617e92; }
.messages { background: #f3f9fd; }
.message { border-color: #d7e7ef; background: #fff; }
.message.mine { border-color: #c2dfed; background: #e2f2fa; }
.message strong { color: #176e98; }
.message p { color: #304f64; }
.message time { color: #71899a; }
.message-form { border-color: #dce9f0; }
.message-form input { border-color: #cbdfea; background: #fff; color: #18364b; }
.message-form input::placeholder { color: #7891a2; }
.group-ab { background: #dceef8; color: #176a95; }
.group-card small, .group-card p { color: #607c90; }
.page-footer { border-color: #cbdfea; color: #6a8597; }
.mobile-nav { border-color: #cbdfea; background: rgba(250, 253, 255, .98); }
.mobile-nav a { color: #607c90; }
.mobile-nav a.active { color: #075b89; }
.weather-card { border-color: #cbdfea; background: #fafdff; }
.weather-icon { background: #e0f1f9; color: #bd861f; }
.weather-copy small { color: #607c90; }
.weather-credit a { color: #0876ad; }
.wind-flag { border-color: #cbdfea; background: #eef7fc; }
.wind-flag strong { color: #244961; }
.wind-flag small { color: #607c90; }
.weather-button { border-color: #9fc9df; background: #e2f2fa; color: #075b89; }
.weather-button:hover { background: #d0eaf6; }
.toast { background: #075b89; color: #fff; }
::selection { background: #8ccbe7; color: #12344b; }

.account-selector { width: fit-content; min-width: 190px; margin-top: 13px; padding: 9px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #cbdfea; border-radius: 9px; background: rgba(250,253,255,.9); }
.account-indicator { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #1484b5; box-shadow: 0 0 0 3px #dceef8; }
.account-selector > span:nth-child(2) { display: grid; gap: 1px; }
.account-selector small { color: #688195; font-size: 8px; line-height: 1.3; }
.account-selector strong { color: #18364b; font-size: 10px; line-height: 1.3; }
.account-check { margin-left: auto; color: #0876ad; font-size: 12px; font-weight: 800; }
.chat-inbox { max-width: 720px; overflow: hidden; border: 1px solid #cbdfea; border-radius: 11px; background: #fafdff; box-shadow: var(--shadow); }
.inbox-row { width: 100%; min-height: 72px; padding: 10px 15px; display: flex; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #e8f0f5; background: transparent; text-align: left; cursor: pointer; }
.inbox-row:last-child { border-bottom: 0; }
.inbox-row:hover { background: #edf7fc; }
.inbox-avatar { width: 43px; height: 43px; display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 50%; object-fit: cover; font-size: 10px; font-weight: 800; }
.inbox-copy { min-width: 0; flex: 1; }
.inbox-copy strong, .inbox-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-copy strong { color: #203f55; font-size: 10px; }
.inbox-copy small { margin-top: 4px; color: #617e92; font-size: 9px; }
.inbox-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.inbox-meta time { color: #688195; font-size: 8px; white-space: nowrap; }
.inbox-meta .unread { width: 7px; height: 7px; background: #0876ad; }
.frisian-flag, .frisian-avatar { overflow: hidden; border: 1px solid #d8e6ef; background: #fff; }
.conversation-header [data-chat-avatar] { overflow: hidden; }
.conversation-header [data-chat-avatar] img { width: 100%; height: 100%; display: block; object-fit: cover; }
.welcome-quote { color: #55778d !important; }
.weather-card { max-width: 465px; min-height: 56px; margin: 15px 0 21px; padding: 8px 10px; gap: 8px; }
.weather-icon { width: 31px; height: 31px; font-size: 17px; }
.weather-copy strong { font-size: 10px; }
.weather-copy small { font-size: 8px; }
.weather-copy .weather-credit { font-size: 7px; }
.wind-flag { min-width: 120px; gap: 5px; padding: 4px 6px; }
.wind-flag svg { width: 21px; height: 21px; }
.weather-button { min-height: 28px; padding: 0 8px; font-size: 8px; }
.quick-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.factory-info-editor { margin-top: 14px; padding: 12px; border: 1px solid #d7e7ef; border-radius: 9px; background: #f3f9fd; }
.factory-info-editor[hidden] { display: none; }
.factory-info-editor h3 { margin: 0; color: #203f55; font: 800 12px "Manrope", sans-serif; }
.factory-info-notice { margin: 5px 0 10px; color: #8a631d; font-size: 8px; line-height: 1.5; }
.factory-info-form { display: grid; gap: 8px; }
.factory-field { min-width: 0; display: grid; gap: 3px; }
.factory-field > span { color: #526f83; font-size: 8px; font-weight: 700; }
.factory-field input, .factory-field select { width: 100%; min-height: 33px; padding: 5px 8px; border: 1px solid #cbdfea; border-radius: 6px; background: #fff; color: #18364b; font: 9px "DM Sans", sans-serif; }
.factory-info-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.factory-info-actions .button { min-height: 32px; font-size: 9px; cursor: pointer; }
.factory-save-status { color: #42677f; font-size: 8px; }
.daf-avatar { padding: 6px; border: 1px solid #d5e3eb; background: #fff; object-fit: contain; }
.conversation-header [data-chat-avatar] img.daf-avatar { padding: 5px; object-fit: contain; }
@media (max-width: 560px) {
  .account-selector { margin-top: 11px; }
  .inbox-row { min-height: 68px; padding: 9px 11px; gap: 9px; }
  .inbox-avatar { width: 40px; height: 40px; }
  .weather-card { max-width: 390px; min-height: 0; margin: 13px 0 18px; gap: 7px; padding: 8px; }
  .weather-icon { width: 29px; height: 29px; }
  .wind-flag { padding: 3px 5px; }
}

@media (max-width: 760px) {
  .mobile-nav { border-color: #cbdfea; background: rgba(250, 253, 255, .98); }
}
@media (max-width: 560px) {
  .mobile-nav { border-color: #cbdfea; background: rgba(250, 253, 255, .98); }
}

.activity-nav-link { color: #0876ad; }
.activity-nav-link.active { background: #dceef8; color: #075b89; }
.activity-experience { position: relative; height: calc(100dvh - 102px); min-height: 540px; overflow: hidden; background: #e4f0e8; }
.activities-map { position: absolute; inset: 0; z-index: 0; background: #e4f0e8; }
.activities-map .leaflet-container { width: 100%; height: 100%; font: 13px/1.5 "DM Sans", sans-serif; }
.activity-experience .leaflet-bottom { bottom: calc(64px + env(safe-area-inset-bottom)); }
.activities-map-unavailable { padding: 100px 25px 0; color: #385a71; text-align: center; font-weight: 700; }
.activity-top-controls { position: absolute; z-index: 500; top: 18px; left: 50%; width: min(620px, calc(100% - 34px)); display: grid; gap: 10px; transform: translateX(-50%); }
.activity-search { min-height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border: 1px solid #d7e7ef; border-radius: 17px; background: rgba(255,255,255,.97); box-shadow: 0 8px 28px rgba(24, 54, 75, .17); color: #0876ad; font-size: 22px; }
.activity-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #18364b; font-size: 13px; }
.activity-search input::placeholder { color: #7b92a1; }
.activity-filter-row { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.activity-filter-row::-webkit-scrollbar { display: none; }
.activity-filter { min-height: 34px; padding: 0 13px; flex: 0 0 auto; border: 1px solid #d7e7ef; border-radius: 18px; background: rgba(255,255,255,.96); color: #385a71; box-shadow: 0 3px 12px rgba(24,54,75,.1); font-size: 11px; font-weight: 700; cursor: pointer; }
.activity-filter.active { border-color: #0876ad; background: #0876ad; color: #fff; }
.activity-location-button { position: absolute; z-index: 500; top: 117px; right: max(18px, calc((100% - 620px)/2)); min-height: 38px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: 1px solid #d7e7ef; border-radius: 14px; background: rgba(255,255,255,.97); color: #075b89; box-shadow: 0 3px 12px rgba(24,54,75,.12); font-size: 11px; font-weight: 700; cursor: pointer; }
.activity-location-button > span:first-child { font-size: 18px; }
.activity-location-button:disabled { opacity: .7; cursor: wait; }
.activity-location-status { position: absolute; z-index: 500; top: 157px; right: 18px; max-width: 250px; margin: 0; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.91); color: #4e7287; font-size: 9px; text-align: right; }
.activity-card-rail { position: absolute; z-index: 500; right: 0; bottom: 76px; left: 0; padding: 8px max(16px, calc((100% - 920px)/2)); display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.activity-card-rail::-webkit-scrollbar { display: none; }
.activity-preview-card { width: min(285px, 78vw); min-height: 69px; padding: 10px; display: flex; flex: 0 0 auto; align-items: center; gap: 10px; border: 1px solid #dce9f0; border-radius: 17px; background: rgba(255,255,255,.98); box-shadow: 0 6px 22px rgba(24,54,75,.15); text-align: left; cursor: pointer; }
.activity-preview-card.selected { border-color: #0876ad; box-shadow: 0 0 0 2px #0876ad44, 0 6px 22px rgba(24,54,75,.15); }
.activity-preview-emoji { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 14px; background: #eaf5fb; font-size: 22px; }
.activity-preview-copy { min-width: 0; flex: 1; }
.activity-preview-copy strong, .activity-preview-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-preview-copy strong { color: #203f55; font-size: 11px; }
.activity-preview-copy small { margin-top: 4px; color: #648095; font-size: 9px; }
.activity-avatar { width: 38px; height: 38px; display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 2px solid white; border-radius: 50%; background: #dceef8; box-shadow: 0 2px 7px rgba(24,54,75,.18); color: #075b89; font-weight: 800; }
.activity-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.activity-avatar > span { display: grid; width: 100%; height: 100%; place-items: center; }
.activity-empty-state { padding: 12px 16px; border-radius: 12px; background: white; color: #385a71; font-size: 11px; }
.activity-leaflet-marker { border: 0; background: transparent; }
.activity-map-marker { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border: 2px solid #1688bd; border-radius: 50%; background: #fff; box-shadow: 0 5px 16px rgba(24,54,75,.3); transition: transform .18s ease; }
.activity-map-marker:hover, .activity-map-marker.selected { transform: scale(1.12); border-color: #0a9e78; }
.activity-marker-emoji { font-size: 25px; line-height: 1; }
.activity-marker-avatar { position: absolute; right: -4px; bottom: -3px; width: 25px; height: 25px; border-width: 2px; }
.activity-sheet { position: absolute; z-index: 800; bottom: calc(68px + env(safe-area-inset-bottom)); left: 50%; width: min(420px, calc(100% - 30px)); max-height: min(690px, calc(100% - 80px)); padding: 12px 22px 18px; overflow-y: auto; border: 1px solid #dce9f0; border-radius: 30px; background: #fff; box-shadow: 0 -8px 30px rgba(0,0,0,.17); transform: translateX(-50%); }
.activity-sheet[hidden] { display: none; }
.activity-sheet-handle { width: 43px; height: 4px; margin: 0 auto 12px; border-radius: 5px; background: #dce7ed; }
.activity-sheet-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.activity-tool, .activity-sheet-close { width: 35px; height: 35px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f1f7fa; color: #58758a; font-size: 17px; cursor: pointer; }
.activity-sheet-emoji { font-size: 25px; }
.activity-sheet-close { background: transparent; font-size: 28px; }
.activity-eyebrow { margin: 11px 0 4px; color: #0876ad; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.activity-sheet h2 { margin: 0; color: #18364b; font: 800 20px/1.3 "Manrope", sans-serif; }
.activity-sheet-host, .activity-sheet-place, .activity-sheet-time, .activity-distance { margin: 6px 0 0; color: #58758a; font-size: 11px; }
.activity-sheet-host { color: #0876ad; font-weight: 700; }
.activity-distance { margin-top: 9px; color: #385a71; font-weight: 700; }
.activity-attendees { min-height: 43px; margin: 14px 0; display: flex; align-items: center; gap: 0; }
.activity-attendees .activity-avatar { margin-right: -9px; }
.activity-attendees > span:last-child { margin-left: 18px; color: #58758a; font-size: 10px; }
.activity-facilities { margin: 0 0 14px; padding: 10px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; border-top: 1px solid #e5eef3; border-bottom: 1px solid #e5eef3; color: #58758a; font-size: 10px; }
.activity-facilities strong { color: #7891a2; font-size: 10px; }
.activity-sheet-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.activity-join-button { min-height: 47px; padding: 0 16px; border: 0; border-radius: 15px; background: #0a9e78; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }
.activity-join-button:hover:not(:disabled) { background: #087e61; }
.activity-join-button:disabled { background: #cbd7dc; color: #627783; cursor: not-allowed; }
.activity-voice-button { min-height: 47px; padding: 0 11px; border: 1px solid #d7e7ef; border-radius: 15px; background: #fafdff; color: #385a71; font-size: 10px; font-weight: 700; cursor: pointer; }
.activity-voice-button:disabled { opacity: .55; cursor: not-allowed; }
.activity-demo-note, .activity-dialog-note { margin: 9px 0 0; color: #708999; font-size: 9px; line-height: 1.5; }
.activity-bottom-nav { position: absolute; z-index: 1000; right: 0; bottom: 0; left: 0; min-height: calc(62px + env(safe-area-inset-bottom)); padding: 5px 18px env(safe-area-inset-bottom); display: flex; justify-content: center; gap: 10px; border-top: 1px solid #dce9f0; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.activity-bottom-nav button { min-width: 100px; padding: 4px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; border-radius: 12px; background: transparent; color: #648095; font-size: 9px; font-weight: 700; cursor: pointer; }
.activity-bottom-nav button > span { color: #0876ad; font-size: 21px; line-height: 1.15; }
.activity-bottom-nav button.active { background: #eaf5fb; color: #075b89; }
.activity-dialog { width: min(440px, calc(100% - 28px)); max-height: calc(100dvh - 30px); padding: 22px; border: 1px solid #cbdfea; border-radius: 25px; color: #18364b; box-shadow: 0 20px 70px #18364b44; }
.activity-dialog::backdrop { background: rgba(19, 43, 58, .48); backdrop-filter: blur(3px); }
.activity-dialog form { display: grid; gap: 13px; }
.activity-dialog-heading { display: flex; align-items: center; justify-content: space-between; }
.activity-dialog-heading .activity-eyebrow { margin-top: 0; }
.activity-dialog-heading h2 { margin: 0; font: 800 20px "Manrope", sans-serif; }
.activity-dialog label:not(.activity-approval-option) { display: grid; gap: 5px; color: #385a71; font-size: 10px; font-weight: 700; }
.activity-dialog input:not([type="checkbox"]), .activity-dialog select { width: 100%; min-height: 41px; padding: 0 11px; border: 1px solid #cbdfea; border-radius: 10px; background: #fff; color: #18364b; font-size: 12px; }
.activity-dialog .activity-approval-option { display: flex; align-items: center; gap: 8px; color: #385a71; font-size: 10px; }
.activity-dialog input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0876ad; }
.activity-dialog .activity-join-button { width: 100%; }
.activities-open .app-shell { min-height: calc(100dvh - 36px); height: calc(100dvh - 36px); }
.activities-open .main-area { min-width: 0; }
.activities-open .topbar, .activities-open .page-footer { display: none; }
.activities-open .content-wrap { width: 100%; min-height: 0; height: 100%; margin: 0; padding: 0; }
/* Activiteiten: the map fills the whole screen below the demo banner. */
.activities-open .activity-experience { height: calc(100dvh - 36px); min-height: 420px; }
.activities-open .mobile-nav { display: none; }
.activities-open .toast { z-index: 1200; }
.activities-open .activity-sheet-open .activity-card-rail { display: none; }
@media (max-width: 760px) {
  .activities-open .demo-banner { display: none; }
  .activities-open .app-shell { min-height: 100dvh; height: 100dvh; }
  .activities-open .activity-experience { height: 100dvh; min-height: 520px; }
  .activity-top-controls { top: max(15px, env(safe-area-inset-top)); width: calc(100% - 28px); }
  .activity-location-button { top: 113px; right: 14px; }
  .activity-location-status { top: 153px; right: 14px; max-width: 215px; }
  .activity-card-rail { bottom: calc(69px + env(safe-area-inset-bottom)); padding: 7px 12px; }
  .activity-sheet { bottom: calc(68px + env(safe-area-inset-bottom)); width: calc(100% - 18px); max-height: min(68vh, calc(100% - 90px)); padding: 10px 18px 14px; border-radius: 28px; }
  .activity-bottom-nav { min-height: calc(62px + env(safe-area-inset-bottom)); gap: 0; }
  .activity-bottom-nav button { min-width: 0; flex: 1; }
  .mobile-nav a { flex: 1 1 16.666%; }
}
@media (prefers-reduced-motion: reduce) {
  .activity-map-marker { transition: none; }
}

.dashboard-selectors { margin-top: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dashboard-selectors .account-selector { margin-top: 0; min-height: 45px; }
.weather-card { width: min(100%, 310px); max-width: 310px; min-height: 45px; margin: 0; padding: 5px 8px; gap: 7px; border-color: #cbdfea; border-radius: 9px; background: rgba(250,253,255,.9); }
.weather-icon { width: 27px; height: 27px; border-radius: 7px; background: #e0f1f9; font-size: 15px; }
.weather-copy { flex: 1; }
.weather-copy strong { color: #18364b; font-size: 9px; }
.weather-copy small { color: #688195; font-size: 7px; }
.weather-copy .weather-credit { font-size: 7px; }
.weather-credit a { color: #0876ad; }
.wind-flag { min-width: 0; padding: 3px 5px; gap: 4px; border-color: #cbdfea; background: #eef7fc; }
.wind-flag svg { width: 17px; height: 17px; }
.wind-flag strong { color: #244961; font-size: 7px; }
.wind-flag small { color: #607c90; font-size: 6px; }
.weather-button { min-height: 27px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; border-color: #cbdfea; border-radius: 6px; background: #e2f2fa; color: #075b89; font-size: 7px; white-space: nowrap; }
.weather-button:hover { background: #d0eaf6; }
.weather-button .account-check { font-size: 9px; }
.location-list-actions { display: flex; align-items: center; gap: 8px; }
.show-factories { min-height: 26px; padding: 0 8px; border: 1px solid #9fc9df; border-radius: 6px; background: #e2f2fa; color: #075b89; font-size: 8px; font-weight: 700; cursor: pointer; }
.show-factories:hover { background: #d0eaf6; }
.factory-instructions { margin-top: 3px; border: 1px solid #cbdfea; border-radius: 8px; background: #fafdff; }
.factory-instructions summary { padding: 9px 10px; color: #075b89; font-size: 9px; font-weight: 700; cursor: pointer; }
.factory-instructions[open] summary { border-bottom: 1px solid #dce9f0; }
.factory-instructions h3, .factory-instructions > p, .factory-instructions > form { margin-right: 10px; margin-left: 10px; }
.factory-instructions h3 { margin-top: 10px; }
.factory-instructions > form { margin-bottom: 10px; }
.conversation.whatsapp-chat { border-color: #d1e2d5; }
.whatsapp-chat .conversation-header { border-color: #d1e2d5; background: #f0f7f3; }
.whatsapp-chat .conversation-header strong { color: #075e54; }
.whatsapp-chat .conversation-header small { color: #5d7b73; }
.whatsapp-chat .conversation-header small i { background: #25a56a; }
.whatsapp-chat .conversation-menu { color: #52796d; }
.whatsapp-chat .messages { background: #efeae2; }
.whatsapp-chat .message { border-color: #e2ddd5; border-radius: 3px 10px 10px 10px; background: #fff; }
.whatsapp-chat .message.mine { border-color: #c8e9be; border-radius: 10px 3px 10px 10px; background: #d9fdd3; }
.whatsapp-chat .message strong { color: #008069; }
.whatsapp-chat .message p { color: #26332e; }
.whatsapp-chat .message time { color: #718078; }
.whatsapp-chat .message-form { border-color: #d1e2d5; background: #f0f7f3; }
.whatsapp-chat .message-form input { border-color: #d7e3db; border-radius: 18px; outline-color: #25a56a; }
.whatsapp-chat .message-form button { border-radius: 50%; background: #008069; }
.whatsapp-chat .chat-note { background: #f0f7f3; }
@media (max-width: 560px) {
  .dashboard-selectors { gap: 7px; }
  .dashboard-selectors .account-selector { min-width: 0; min-height: 52px; padding: 7px 9px; }
  .dashboard-selectors .weather-card { min-height: 52px; margin: 0; padding: 4px 6px; display: flex; grid-template-columns: initial; gap: 4px; }
  .weather-icon { width: 23px; height: 23px; grid-column: auto; grid-row: auto; }
  .weather-copy { min-width: 66px; grid-column: auto; grid-row: auto; }
  .wind-flag { display: flex; }
  .weather-button { min-height: 25px; grid-column: auto; grid-row: auto; justify-self: auto; }
}

.dashboard-selectors > .account-selector,
.dashboard-selectors > .weather-card {
  width: min(100%, 310px);
  max-width: 310px;
  min-height: 52px;
  height: 52px;
  margin: 0;
  border-radius: 9px;
}
.dashboard-selectors > .account-selector { padding: 7px 12px; }
.dashboard-selectors > .weather-card { padding: 4px 8px; }
.welcome-quote { position: relative; width: fit-content; max-width: min(100%, 460px); min-height: 48px; margin: 12px 0 0 !important; padding: 12px 38px 12px 16px; display: flex; align-items: center; border: 1px solid #c9e3f0; border-radius: 18px 18px 18px 5px; background: linear-gradient(135deg, #fff 0%, #f0f9fd 100%); box-shadow: 0 5px 16px rgba(34, 94, 128, .08); color: #315d76 !important; font-size: 11px !important; font-style: italic; line-height: 1.5; }
.welcome-quote::before { position: absolute; bottom: -6px; left: 12px; width: 11px; height: 11px; content: ""; border-bottom: 1px solid #c9e3f0; border-left: 1px solid #c9e3f0; background: #f4fafe; transform: skewY(-38deg); }
.quote-mark { align-self: flex-start; margin: -2px 7px 0 0; color: #0876ad; font: 800 25px/1 Georgia, serif; }
.quote-close { position: absolute; top: 0; right: 13px; color: #0876ad; font: 800 24px/1 Georgia, serif; }
.chat-quick-icon { background: #dff4ed; color: #087b68; }
.chat-quick-icon svg { width: 23px; height: 23px; }
.chat-quick-card { border-color: #b9e3d8; background: linear-gradient(135deg, #fff 55%, #f0fbf7); }
.chat-quick-card:hover { border-color: #63bea5; box-shadow: 0 10px 28px rgba(8, 123, 104, .14); }
.chat-feature-tag { margin-top: 8px; padding: 3px 8px; border: 1px solid #c4e8dc; border-radius: 999px; background: #e9f8f2; color: #087b68; font-size: 8px; font-weight: 700; }
.group-quick-card { border-color: #b9e3d8; background: linear-gradient(135deg, #fff 55%, #f0fbf7); }
.group-quick-card:hover { border-color: #63bea5; box-shadow: 0 10px 28px rgba(8, 123, 104, .14); }
@media (max-width: 560px) {
  .dashboard-selectors { width: 100%; align-items: stretch; }
  .dashboard-selectors > .account-selector,
  .dashboard-selectors > .weather-card { width: 100%; max-width: 380px; min-width: 0; height: 66px; min-height: 66px; flex: 0 0 100%; }
  .dashboard-selectors > .account-selector { padding: 8px 12px; }
  .dashboard-selectors > .weather-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 0; padding: 5px 8px; }
  .dashboard-selectors > .weather-card .weather-icon { grid-column: 1; grid-row: 1; }
  .dashboard-selectors > .weather-card .weather-copy { min-width: 0; grid-column: 2 / 4; grid-row: 1; }
  .dashboard-selectors > .weather-card .wind-flag { min-width: 0; grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .dashboard-selectors > .weather-card .weather-button { min-height: 24px; grid-column: 3; grid-row: 2; justify-self: end;
}
}

:root {
  color-scheme: dark;
  --ink: #f5f5f5;
  --muted: #b3b3b3;
  --paper: #1e1e1e;
  --white: #181818;
  --line: #3a3a3a;
  --green: #22c55e;
  --green-dark: #15803d;
  --mint: #2a2a2a;
  --shadow: 0 8px 26px rgba(0, 0, 0, .38);
}

body { color: var(--ink); background: #1e1e1e; }
.demo-banner { color: #e5e5e5; background: #111; }
.demo-banner a { color: #b9eac8; }
.sidebar, .topbar { border-color: var(--line); background: #181818; }
.company, .helper-card, .welcome-card, .account-selector, .weather-card,
.quick-card, .locations-panel, .location-detail, .chat-list, .conversation,
.group-card, .chat-inbox, .activity-sheet, .activity-preview-card,
.activity-empty-state, .factory-instructions, .factory-info-editor {
  border-color: var(--line);
  background: #2a2a2a;
  color: var(--ink);
}
.nav-link { color: #b3b3b3; }
.nav-link:hover, .location-card:hover, .location-card.selected,
.chat-choice:hover, .chat-choice.active, .inbox-row:hover { background: #333; color: var(--ink); }
.nav-link.active { background: #303030; color: #facc15; }
.nav-link.chat-nav-link.active, .nav-link.group-nav-link.active { background: #203528; color: #22c55e; }
.nav-link b, .chat-nav-link b, .group-nav-link b { background: #333; color: #d4d4d4; }
.chat-nav-link, .group-nav-link, .chat-nav-link b, .group-nav-link b { color: #22c55e; }
.profile, .topbar, .page-footer { border-color: var(--line); }
.company small, .profile small, .topbar-company small, .page-heading > div > p:last-child,
.quick-card small, .location-copy small, .detail-info, .demo-note, .group-card small,
.group-card p, .chat-choice small, .inbox-copy small, .inbox-meta time {
  color: #b3b3b3;
}
.eyebrow, .activity-eyebrow { color: #facc15; }
.demo-label { border-color: var(--line); background: #242424; color: #d4d4d4; }
.welcome-quote { border-color: #383838; background: #242424; color: #d4d4d4 !important; }
.welcome-quote::before { border-color: #383838; background: #242424; }
.quote-mark, .quote-close { color: #22c55e; }
.helper-card > span, .map-icon, .welcome-symbol { background: #303030; color: #facc15; }
.quick-card:hover, .group-card:hover { border-color: #555; }
.chat-quick-icon, .chat-feature-tag { border-color: #31573c; background: #203528; color: #22c55e; }
.chat-quick-card, .group-quick-card { border-color: #31573c; background: #202820; }
.chat-quick-card:hover, .group-quick-card:hover { border-color: #22c55e; }
.quick-arrow, .group-arrow, .text-link { color: #22c55e; }
.account-indicator { background: #22c55e; box-shadow: 0 0 0 3px #23412c; }
.account-selector small, .weather-copy small { color: #b3b3b3; }
.account-selector strong, .weather-copy strong { color: #f5f5f5; }
.account-check, .weather-credit a { color: #22c55e; }
.weather-icon { background: #303030; }
.wind-flag { border-color: #424242; background: #202020; }
.wind-flag strong { color: #f5f5f5; }
.wind-flag small { color: #b3b3b3; }
.weather-button { border-color: #31573c; background: #203528; color: #b9eac8; }
.weather-button:hover { background: #294a32; }
.filter-button { border-color: #444; background: #242424; color: #ddd; }
.filter-button:hover { border-color: #777; }
.filter-button.active { border-color: #facc15; background: #facc15; color: #1e1e1e; }
.map-frame { border-color: #444; background: #242424; }
.map-caption { background: #181818; color: #f5f5f5; }
.list-heading, .location-copy strong, .inbox-copy strong, .chat-choice strong { color: #f5f5f5; }
.location-card { border-color: #383838; }
.detail-info { border-color: #444; }
.button { background: #22c55e; color: #102116; }
.button:hover { background: #16a34a; }
.chat-choice:hover, .chat-choice.active { color: #f5f5f5; }
.mentor-avatar, .pieter-avatar, .monique-avatar, .friends-avatar, .group-ab {
  background: #303030;
  color: #f5f5f5;
}
.conversation-header, .message-form, .whatsapp-chat .conversation-header,
.whatsapp-chat .message-form, .whatsapp-chat .chat-note {
  border-color: #383838;
  background: #202020;
}
.conversation-header strong, .whatsapp-chat .conversation-header strong { color: #f5f5f5; }
.conversation-header small, .conversation-menu, .whatsapp-chat .conversation-header small,
.whatsapp-chat .conversation-menu { color: #b3b3b3; }
.messages, .whatsapp-chat .messages { background: #171717; }
.message, .whatsapp-chat .message { border-color: #383838; background: #2a2a2a; }
.message.mine, .whatsapp-chat .message.mine { border-color: #31573c; background: #203528; }
.message strong, .whatsapp-chat .message strong { color: #22c55e; }
.message p, .whatsapp-chat .message p { color: #f0f0f0; }
.message time, .whatsapp-chat .message time { color: #b3b3b3; }
.message-form input, .factory-field input, .factory-field select {
  border-color: #444;
  background: #181818;
  color: #f5f5f5;
}
.message-form input::placeholder { color: #999; }
.message-form button { background: #16a34a; }
.factory-instructions { border-color: #444; background: #202020; }
.factory-instructions summary, .factory-info-editor h3 { color: #f5f5f5; }
.factory-instructions[open] summary { border-color: #444; }
.factory-info-editor h3, .factory-field > span { color: #ddd; }
.factory-info-notice { color: #facc15; }
.factory-save-status { color: #b3b3b3; }
.chat-inbox { background: #2a2a2a; }
.inbox-row { border-color: #383838; }
.frisian-flag, .frisian-avatar { border-color: #444; background: #181818; }
.daf-avatar { border-color: #444; background: #181818; }
.mobile-nav { border-color: #383838; background: rgba(24, 24, 24, .97); }
.mobile-nav a { color: #a3a3a3; }
.mobile-nav a.active { color: #facc15; }
.mobile-nav .mobile-chat-link.active, .mobile-nav .mobile-group-link.active { color: #22c55e; }
.toast { background: #203528; color: #f5f5f5; }
.activity-experience, .activities-map { background: #1e1e1e; }
.activity-search, .activity-filter, .activity-location-button, .activity-location-status {
  border-color: #444;
  background: rgba(34, 34, 34, .96);
  color: #f5f5f5;
}
.activity-search input { color: #f5f5f5; }
.activity-search input::placeholder { color: #aaa; }
.activity-search > span:first-child, .activity-location-button { color: #22c55e; }
.activity-filter.active { border-color: #22c55e; background: #22c55e; color: #102116; }
.activity-company-filters { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(210px, 1.4fr); align-items: center; gap: 8px; }
.activity-company-filters label { color: #f5f5f5; font-size: 11px; font-weight: 700; }
.activity-company-filters select { width: 100%; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid #444; border-radius: 12px; background: #222; color: #f5f5f5; font: 700 10px "DM Sans", sans-serif; }
.activity-company-label { width: fit-content; max-width: 100%; margin-top: 4px; padding: 2px 6px; overflow: hidden; border: 1px solid #31573c; border-radius: 999px; background: #203528; color: #9ee6b3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.activity-preview-copy strong { color: #f5f5f5; }
.activity-preview-copy small { color: #b3b3b3; }
.activity-avatar { border-color: #333; background: #303030; color: #f5f5f5; }
.activity-empty-state { background: #2a2a2a; color: #f5f5f5; }
.activity-map-marker { border-color: #22c55e; background: #222; }
.activity-map-marker:hover, .activity-map-marker.selected { border-color: #facc15; }
.activity-sheet-handle { background: #555; }
.activity-tool, .activity-sheet-close { background: #333; color: #ddd; }
.activity-sheet h2 { color: #f5f5f5; }
.activity-sheet-host, .activity-sheet-company { color: #22c55e; font-size: 11px; font-weight: 700; }
.activity-sheet-place, .activity-sheet-time, .activity-distance, .activity-attendees > span:last-child,
.activity-facilities { color: #b3b3b3; }
.activity-facilities { border-color: #444; }
.activity-facilities strong { color: #ddd; }
.activity-join-button { background: #22c55e; color: #102116; }
.activity-join-button:hover:not(:disabled) { background: #16a34a; }
.activity-join-button:disabled { background: #444; color: #aaa; }
.activity-voice-button { border-color: #444; background: #222; color: #eee; }
.activity-demo-note, .activity-dialog-note { color: #b3b3b3; }
.activity-bottom-nav { border-color: #383838; background: rgba(24, 24, 24, .97); }
.activity-bottom-nav button { color: #aaa; }
.activity-bottom-nav button.active { color: #22c55e; }
.activity-dialog { border: 1px solid #444; border-radius: 24px; background: #222; color: #f5f5f5; box-shadow: 0 15px 50px rgba(0, 0, 0, .65); }
.activity-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.activity-dialog-heading h2 { color: #f5f5f5; }
.activity-dialog form > label { color: #f5f5f5; }
.activity-dialog input:not([type="checkbox"]), .activity-dialog select {
  border: 1px solid #444;
  background: #181818;
  color: #f5f5f5;
}
.activity-location-status { color: #ddd; }
::selection { background: #22c55e; color: #102116; }

@media (max-width: 760px) {
  .activity-company-filters { grid-template-columns: 1fr 1fr; }
  .activity-company-filters > label:first-child { grid-column: 1 / -1; }
  .activity-location-button { top: 185px; }
  .activity-location-status { top: 225px; }
}
@media (max-width: 560px) {
  .activity-company-filters { grid-template-columns: 1fr 1fr; gap: 6px; }
  .activity-company-filters label { font-size: 10px; }
  .activity-company-filters select { min-height: 35px; padding: 0 7px; font-size: 9px; }
  .activity-location-button { top: 180px; }
  .activity-location-status { top: 220px; } }
@media (max-width: 560px) {
  .welcome-quote { min-height: 46px; margin-top: 10px !important; padding: 10px 34px 10px 13px; font-size: 10px !important; }
  .chat-feature-tag { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 3px; }
  .chat-quick-card { min-height: 82px; grid-template-rows: auto auto auto; }
  .chat-quick-card .quick-icon { grid-row: 1 / 4; }
  .chat-quick-card .quick-arrow { grid-row: 1 / 4; }
  .nav-chat-icon { width: 17px !important; height: 17px; flex: 0 0 17px; }
  .nav-chat-icon svg { width: 17px; height: 17px; }
  .mobile-nav a { min-width: 0; flex: 1 1 20%; padding-right: 1px; padding-left: 1px; text-align: center; font-size: 7px; line-height: 1.1; }
  .mobile-nav a > span { font-size: 18px; }
  .mobile-chat-link { color: #06745f !important; font-size: 6.5px !important; letter-spacing: -.2px; font-weight: 800; }
  .mobile-chat-icon { width: 19px; height: 20px; display: grid; place-items: center; color: #087b68; }
  .mobile-chat-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-chat-link.active { color: #006b59 !important; }
  .mobile-chat-link.active .mobile-chat-icon { color: #006b59; }
  .mobile-group-link { color: #06745f !important; font-weight: 800; }
  .mobile-group-link.active { color: #006b59 !important; }
  .mobile-group-link .mobile-nav-icon { color: #06745f; }
  .mobile-nav-icon { width: 20px; height: 21px; display: grid; place-items: center; }
  .mobile-nav-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

@media (max-width: 760px) {
  .mobile-nav { border-color: #383838; background: rgba(24, 24, 24, .97); }
  .mobile-nav a { color: #a3a3a3; }
  .mobile-nav a.active { color: #facc15; }
  .mobile-nav .mobile-chat-link, .mobile-nav .mobile-group-link,
  .mobile-nav .mobile-chat-link.active, .mobile-nav .mobile-group-link.active,
  .mobile-nav .mobile-chat-icon, .mobile-nav .mobile-nav-icon { color: #22c55e !important; }
  .activity-bottom-nav { border-color: #383838; background: rgba(24, 24, 24, .97); }
  .activity-bottom-nav button { color: #aaa; }
  .activity-bottom-nav button.active { color: #22c55e; }
}
.logo .brand-logo { width: auto; height: 34px; padding: 4px 10px; border-radius: 8px; background: #fff; }.mobile-brand .brand-logo { width: auto; height: 28px; padding: 3px 8px; border-radius: 7px; background: #fff; }

@media (max-width: 900px) { input, select, textarea { font-size: 16px !important; } }

/* Vragen en advies: one large chat (Chauffeurs hulp app) that fills the screen. */
.chat-layout.single { display: block; }
.chat-layout.single .conversation { height: calc(100dvh - 190px); min-height: 460px; }
.chat-layout.single .messages { max-height: none; }
@media (max-width: 760px) {
  .chat-layout.single .conversation { height: calc(100dvh - 210px); min-height: 380px; }
}

/* Group chat inside an activity (opens with 2+ participants). */
.activity-chat { margin: 12px 0; border: 1px solid #dce9f0; border-radius: 16px; overflow: hidden; }
.activity-chat-title { margin: 0; padding: 8px 12px; color: #18364b; border-bottom: 1px solid #dce9f0; font-size: 11px; font-weight: 800; }
.activity-chat-title small { color: #708999; font-weight: 600; }
.activity-chat .activity-chat-messages { min-height: 0; max-height: 220px; padding: 10px; gap: 8px; }
.activity-chat .message { max-width: 88%; }
.activity-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #dce9f0; }
.activity-chat-form input { flex: 1; min-width: 0; min-height: 36px; padding: 0 12px; border: 1px solid #cbdfea; border-radius: 999px; font: inherit; font-size: 12px; }
.activity-chat-form button { width: 36px; height: 36px; color: #fff; border: 0; border-radius: 50%; background: #0f7a62; font-size: 16px; font-weight: 800; cursor: pointer; }
.activity-chat-hint { margin: 10px 0; color: #708999; font-size: 10px; }
/* The chauffeur app uses the dark theme. */
.activity-chat, .activity-chat-title, .activity-chat-form { border-color: #383838; }
.activity-chat-title { color: #f5f5f5; }
.activity-chat-title small, .activity-chat-hint { color: #b3b3b3; }
.activity-chat-form input { color: #f5f5f5; border-color: #444; background: #1e1e1e; }

/* Specifiek bedrijf: the company list opens directly below the filter. */
.activity-company-list { grid-column: 1 / -1; max-height: 210px; padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; overflow-y: auto; border: 1px solid #444; border-radius: 12px; background: rgba(24,24,24,.96); }
.activity-company-list[hidden] { display: none; }
.activity-company-list button { min-height: 32px; padding: 0 12px; color: #f5f5f5; border: 1px solid #444; border-radius: 999px; background: #222; font: 700 11px "DM Sans", sans-serif; cursor: pointer; }
.activity-company-list button:hover { border-color: #22c55e; }
.activity-company-list button[aria-pressed="true"] { color: #0b1f12; border-color: #22c55e; background: #22c55e; }
.activity-top-controls:has(.activity-company-list:not([hidden])) { z-index: 600; }