/* =========================================================
   MijnSerenity 7.5.6 — eenvoudige en toegankelijke bediening
   ========================================================= */

:root{
  --ms750-surface:#0d2b40;
  --ms750-surface-strong:#143b55;
  --ms750-border:rgba(142,222,255,.28);
  --ms750-focus:#ffe66d;
  --ms750-nav-height:72px;
}

html{
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

body.ms750-simple-ui{
  --nav-height:var(--ms750-nav-height);
  line-height:1.45;
  padding-bottom:0 !important;
}

body.ms750-simple-ui.ms750-large-text{
  font-size:18px;
}

body.ms750-simple-ui.ms750-large-text .small,
body.ms750-simple-ui.ms750-large-text label,
body.ms750-simple-ui.ms750-large-text .sub{
  font-size:16px;
}

body.ms750-simple-ui main{
  width:100%;
  max-width:1100px;
  padding:0 14px calc(var(--ms750-nav-height) + env(safe-area-inset-bottom) + 22px) !important;
}

body.ms750-simple-ui #appView > .tabs{
  display:none !important;
}


/* De balk hoort bij het scherm, nooit bij de scrollende pagina. */
body.ms750-simple-ui > .bottom-nav.ms744-compact-nav,
body.ms750-simple-ui .bottom-nav.ms744-compact-nav{
  position:fixed !important;
  top:auto !important;
  right:0 !important;
  bottom:var(--ms751-nav-bottom,0px) !important;
  left:0 !important;
  transform:translate3d(0,0,0) !important;
  translate:none !important;
  will-change:bottom !important;
}

/* Duidelijke, vaste paginakop met veilige ruimte onder de iOS-statusbalk. */
.ms750-pagebar{
  position:sticky;
  top:0;
  z-index:1005;
  display:grid;
  grid-template-columns:minmax(52px,auto) 1fr minmax(52px,auto);
  align-items:center;
  gap:10px;
  min-height:calc(66px + env(safe-area-inset-top));
  margin:0 -14px 14px;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 10px;
  background:rgba(2,11,19,.97);
  border-bottom:1px solid rgba(132,220,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.ms750-pagebar h1{
  min-width:0;
  margin:0;
  overflow:hidden;
  color:#fff;
  font-size:clamp(20px,3.5vw,28px);
  line-height:1.15;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ms750-pagebar button{
  min-width:52px;
  min-height:52px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:#183d56;
  color:#fff;
  font-size:16px;
}

.ms750-pagebar .ms750-home-button.is-placeholder{
  visibility:hidden;
  pointer-events:none;
}

/* Vereenvoudigd startscherm. */
.ms750-simple-dashboard{
  margin-bottom:16px;
}

.ms750-welcome-card{
  position:relative;
  min-height:190px;
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid var(--ms750-border);
  border-radius:24px;
  background:linear-gradient(135deg,#16425d,#0d2b40);
  isolation:isolate;
}

.ms751-welcome-photo{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.ms751-welcome-fallback{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 75% 25%,rgba(69,200,255,.26),transparent 34%),
    linear-gradient(135deg,#17445f,#0a2638);
  font-size:70px;
}

.ms751-welcome-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(1,10,18,.08) 0%,rgba(1,10,18,.30) 42%,rgba(1,10,18,.92) 100%);
}

.ms751-welcome-copy{
  position:absolute;
  inset:auto 18px 17px;
  z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}

.ms751-welcome-copy h2{
  margin:0 0 4px;
  color:#fff;
  font-size:clamp(27px,5vw,38px);
  line-height:1.08;
}

.ms751-welcome-copy p{
  margin:0;
  color:#eef8fc;
  font-size:clamp(15px,2.5vw,18px);
  font-weight:650;
}

.ms750-auto-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  padding:16px 18px;
  border:1px solid var(--ms750-border);
  border-radius:20px;
  background:var(--ms750-surface);
}

.ms750-auto-card strong{
  display:block;
  margin-bottom:3px;
  font-size:20px;
}

.ms750-auto-card small{
  display:block;
  color:#bdd0dd;
  font-size:15px;
}

.ms750-auto-button{
  min-width:92px;
  min-height:52px;
  border:2px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:#29475a;
  color:#fff;
}

.ms750-auto-button.is-on{
  background:#45c8ff;
  color:#02111c;
}

.ms750-primary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.ms750-primary-action{
  min-height:104px;
  padding:15px;
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid var(--ms750-border);
  border-radius:21px;
  background:var(--ms750-surface);
  color:#fff;
  text-align:left;
  box-shadow:none;
}

.ms750-primary-action .ms750-action-icon{
  flex:0 0 54px;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:17px;
  background:rgba(255,255,255,.09);
  font-size:29px;
}

.ms750-primary-action strong{
  display:block;
  margin-bottom:3px;
  font-size:20px;
  line-height:1.15;
}

.ms750-primary-action small{
  display:block;
  color:#c0d4df;
  font-size:14px;
  font-weight:650;
  line-height:1.25;
}

.ms750-primary-action.ms750-start-action{
  background:linear-gradient(135deg,rgba(69,200,255,.30),rgba(75,211,143,.12)),var(--ms750-surface-strong);
}

/* In eenvoudige modus verdwijnen dubbele en drukke dashboarddelen. */
body.ms750-simple-ui:not(.ms750-dashboard-expanded) #dashboard > .captain-strip,
body.ms750-simple-ui:not(.ms750-dashboard-expanded) #dashboard > .dashboard-photo-card,
body.ms750-simple-ui:not(.ms750-dashboard-expanded) #dashboard > .captain-command-center,
body.ms750-simple-ui:not(.ms750-dashboard-expanded) #dashboard > .dashboard-actions,
body.ms750-simple-ui:not(.ms750-dashboard-expanded) #dashboard > #dashboardFinanceCard,
body.ms750-simple-ui:not(.ms750-dashboard-expanded) #dashboard > #latestRouteCard,
body.ms750-simple-ui:not(.ms750-dashboard-expanded) #dashboard > .compact-status{
  display:none !important;
}

/* Altijd duidelijke invoervelden en bedieningsvlakken. */
body.ms750-simple-ui button,
body.ms750-simple-ui input,
body.ms750-simple-ui select,
body.ms750-simple-ui textarea,
body.ms750-simple-ui summary{
  min-height:48px;
}

body.ms750-simple-ui input,
body.ms750-simple-ui select,
body.ms750-simple-ui textarea{
  padding:13px 14px;
  border-width:2px;
  font-size:17px;
}

body.ms750-simple-ui label{
  display:block;
  margin-top:6px;
  font-weight:750;
}

body.ms750-simple-ui :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:4px solid var(--ms750-focus) !important;
  outline-offset:3px !important;
}

body.ms750-simple-ui button:active{
  transform:scale(.98);
}

/* Vijf vaste navigatieknoppen met tekst, zonder horizontaal scrollen. */
body.ms750-simple-ui > .bottom-nav.ms744-compact-nav,
body.ms750-simple-ui .bottom-nav.ms744-compact-nav{
  --ms744-nav-button:auto;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:3px !important;
  height:calc(var(--ms750-nav-height) + env(safe-area-inset-bottom)) !important;
  min-height:calc(var(--ms750-nav-height) + env(safe-area-inset-bottom)) !important;
  max-height:calc(var(--ms750-nav-height) + env(safe-area-inset-bottom)) !important;
  padding:6px 7px env(safe-area-inset-bottom) !important;
  overflow:hidden !important;
}

body.ms750-simple-ui .bottom-nav.ms744-compact-nav .bottom-nav-item,
body.ms750-simple-ui .bottom-nav.ms744-compact-nav.ms709-icon-nav .bottom-nav-item{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:58px !important;
  min-height:58px !important;
  max-height:58px !important;
  padding:5px 2px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  border-radius:15px !important;
  color:#b9ccd8;
}

body.ms750-simple-ui .bottom-nav.ms744-compact-nav .bottom-nav-item span{
  display:block !important;
  margin:0 !important;
  font-size:23px !important;
}

body.ms750-simple-ui .bottom-nav.ms744-compact-nav .bottom-nav-item small{
  display:block !important;
  overflow:hidden;
  max-width:100%;
  color:inherit;
  font-size:11px !important;
  font-weight:800;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.ms750-simple-ui .bottom-nav.ms744-compact-nav .bottom-nav-item.active{
  color:#fff !important;
  background:rgba(69,200,255,.17) !important;
  box-shadow:inset 0 0 0 1px rgba(109,224,255,.32) !important;
}

/* Meer-menu als rustig, volledig schermdeel. */
.ms750-more-layer{
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) 12px calc(var(--ms750-nav-height) + env(safe-area-inset-bottom) + 10px);
  background:rgba(0,0,0,.70);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.ms750-more-layer.hidden{
  display:none !important;
}

.ms750-more-panel{
  width:min(780px,100%);
  max-height:min(82dvh,760px);
  overflow:auto;
  padding:18px;
  border:1px solid var(--ms750-border);
  border-radius:25px;
  background:#071d2d;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.ms750-more-head{
  position:sticky;
  top:-18px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:-18px -18px 14px;
  padding:18px;
  background:#071d2d;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.ms750-more-head h2{
  margin:0;
  font-size:26px;
}

.ms750-close-more{
  width:52px;
  min-width:52px;
  height:52px;
  padding:0;
  border-radius:999px;
  background:#284a60;
  color:#fff;
  font-size:28px;
}

.ms750-more-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.ms750-more-route{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px;
  background:#123248;
  color:#fff;
  text-align:left;
}

.ms750-more-route span{
  font-size:27px;
}

.ms750-more-route strong{
  font-size:17px;
}

.ms750-more-settings{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
}

.ms750-more-settings button{
  min-height:58px;
  background:#294b61;
  color:#fff;
}

.ms750-skip-link{
  position:fixed;
  left:12px;
  top:8px;
  z-index:2147483600;
  padding:12px 16px;
  border-radius:12px;
  background:#ffe66d;
  color:#07111a;
  font-weight:900;
  transform:translateY(-150%);
}

.ms750-skip-link:focus{
  transform:none;
}

body.ms750-more-open{
  overflow:hidden;
}

@media(max-width:520px){
  :root{
    --ms750-nav-height:68px;
  }

  body.ms750-simple-ui main{
    padding-left:10px;
    padding-right:10px;
  }

  .ms750-pagebar{
    margin-left:-10px;
    margin-right:-10px;
    padding-left:10px;
    padding-right:10px;
  }

  .ms750-primary-grid,
  .ms750-more-grid{
    grid-template-columns:1fr 1fr;
  }

  .ms750-primary-action{
    min-height:112px;
    padding:12px;
    flex-direction:column;
    align-items:flex-start;
  }

  .ms750-primary-action .ms750-action-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
    font-size:25px;
  }

  .ms750-primary-action strong{
    font-size:17px;
  }

  .ms750-primary-action small{
    display:none;
  }

  .ms750-welcome-card{
    padding:16px;
  }

  .ms750-boat-mark{
    width:54px;
    height:54px;
    flex-basis:54px;
  }

  body.ms750-simple-ui .bottom-nav.ms744-compact-nav .bottom-nav-item small{
    font-size:10px !important;
  }
}

@media(max-width:360px){
  .ms750-pagebar h1{
    font-size:19px;
  }

  .ms750-pagebar button{
    min-width:46px;
    min-height:46px;
    padding:6px;
    font-size:14px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   MijnSerenity 7.5.6 — schermruimte en centrale bootmaten
   ========================================================= */

/* De native pagina vult altijd de ruimte tot aan de vaste navigatie. */
body.ms750-simple-ui.ms708-native-pages-active main{
  padding-bottom:0 !important;
}
body.ms750-simple-ui.ms708-native-pages-active .ms708-native-pager > .ms708-native-page{
  padding-bottom:18px !important;
}

.ms752-app-info-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding:12px 14px;
}
.ms752-app-info-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.ms752-app-info-copy strong{
  color:#fff;
  font-size:17px;
}
.ms752-app-info-copy small{
  color:#bcd0dc;
  font-size:13px !important;
}
body.ms750-simple-ui .ms752-small-refresh{
  flex:0 0 auto;
  width:auto;
  min-width:0;
  min-height:38px !important;
  height:38px;
  padding:5px 11px;
  border-radius:12px;
  font-size:14px;
  white-space:nowrap;
}

.ms752-dimensions-card{
  margin:16px 0;
  padding:15px;
  border:1px solid rgba(112,218,255,.25);
  border-radius:18px;
  background:rgba(26,83,112,.22);
}
.ms752-dimensions-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ms752-dimensions-head h3{
  margin:2px 0 0;
}
.ms752-dimensions-head > span{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(69,200,255,.15);
  color:#ccefff;
  font-size:12px;
  font-weight:800;
}
.ms752-dimensions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
}
.ms752-dimensions-grid label > span{
  display:flex;
  align-items:center;
  gap:7px;
  color:#bcd0dc;
  font-size:14px;
  font-weight:650;
}
.ms752-dimensions-grid input{
  min-width:0;
  width:100%;
}
.ms752-profile-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
body.ms750-simple-ui .ms752-edit-dimensions{
  min-height:38px;
  padding:6px 10px;
  font-size:13px;
}
#ms670BoatLength[readonly],
#ms670BoatWidth[readonly],
#ms670BoatDraft[readonly],
#ms670BoatAirDraft[readonly]{
  opacity:.82;
  cursor:default;
}

@media(max-width:520px){
  .ms750-pagebar{
    padding-top:calc(env(safe-area-inset-top) + 14px);
  }
  .ms752-dimensions-grid{
    grid-template-columns:1fr;
  }
  .ms752-dimensions-head{
    align-items:flex-start;
  }
}

/* 7.5.6 — Startknoppen moeten altijd één duidelijke klikzone hebben. */
body.ms750-simple-ui .ms750-home-button,
body.ms750-simple-ui .bottom-nav-item[data-target="dashboard"]{
  position:relative;
  z-index:3;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body.ms750-simple-ui .ms750-home-button::after,
body.ms750-simple-ui .bottom-nav-item[data-target="dashboard"]::after{
  content:"";
  position:absolute;
  inset:-2px;
}
body.ms750-simple-ui .ms750-auto-button:disabled{
  opacity:.72;
  cursor:wait;
}


/* =========================================================
   MijnSerenity 7.5.6 — betrouwbare Start, zoeken, HA en radio
   ========================================================= */

/* In de eenvoudige bediening is er steeds exact één echte pagina actief.
   Hierdoor kan Start niet meer alleen de kop wijzigen terwijl de oude
   pagina-inhoud blijft staan. */
body.ms755-single-page-nav .ms708-native-pager{
  display:block !important;
  overflow:hidden !important;
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
}
body.ms755-single-page-nav .ms708-native-pager > .ms708-native-page{
  display:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  transform:none !important;
}
body.ms755-single-page-nav .ms708-native-pager > .ms708-native-page.ms755-route-active{
  display:block !important;
}

/* Welkom aan boord blijft alleen in de persoonlijke eenvoudige fotokaart.
   De dubbele teksten in het uitgebreide dashboard verdwijnen. */
body.ms750-simple-ui #dashboard > .dashboard-photo-card .dashboard-photo-overlay #welcome,
body.ms750-simple-ui #dashboard .captain-intelligence-head #captainGreeting{
  display:none !important;
}

/* Vraag het de Captain staat in uitgebreid dashboard direct onder Start live varen. */
.ms755-expanded-captain-slot{
  display:none;
  margin:0 0 14px;
  padding:16px;
}
body.ms750-simple-ui.ms750-dashboard-expanded .ms755-expanded-captain-slot{
  display:block;
}
.ms755-expanded-captain-slot .ms690-captain-box{
  margin:0;
  width:100%;
}

/* De drie extra snelknoppen blijven rustig in hetzelfde raster. */
body.ms750-simple-ui:not(.ms750-dashboard-expanded) .ms750-primary-grid [data-ms750-route="search"],
body.ms750-simple-ui:not(.ms750-dashboard-expanded) .ms750-primary-grid [data-ms750-route="entertainment"],
body.ms750-simple-ui:not(.ms750-dashboard-expanded) .ms750-primary-grid [data-ms750-route="radio"]{
  display:flex;
}
body.ms750-simple-ui.ms750-dashboard-expanded .ms750-primary-grid [data-ms750-route="search"],
body.ms750-simple-ui.ms750-dashboard-expanded .ms750-primary-grid [data-ms750-route="entertainment"],
body.ms750-simple-ui.ms750-dashboard-expanded .ms750-primary-grid [data-ms750-route="radio"]{
  display:none;
}

.ms755-search-layer{
  position:fixed;
  inset:0;
  z-index:2147483400;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:calc(env(safe-area-inset-top) + 18px) 12px calc(var(--ms750-nav-height) + env(safe-area-inset-bottom) + 12px);
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.ms755-search-layer.hidden{display:none !important;}
.ms755-search-panel{
  width:min(760px,100%);
  max-height:calc(100dvh - var(--ms750-nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 42px);
  overflow:auto;
  padding:16px;
  border:1px solid rgba(126,220,255,.32);
  border-radius:22px;
  background:#071d2b;
  box-shadow:0 22px 70px rgba(0,0,0,.55);
}
.ms755-search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.ms755-search-head h2{margin:1px 0 0;}
.ms755-search-head small{color:#99c9dc;font-weight:800;letter-spacing:.08em;}
body.ms750-simple-ui .ms755-search-close{
  flex:0 0 48px;
  min-width:48px;
  width:48px;
  padding:0;
  border-radius:15px;
  font-size:27px;
}
.ms755-search-input-wrap{
  display:grid !important;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
  margin:0 0 12px !important;
  padding:0 12px;
  border:2px solid rgba(126,220,255,.30);
  border-radius:17px;
  background:#03131f;
}
.ms755-search-input-wrap > span{font-size:23px;}
body.ms750-simple-ui .ms755-search-input-wrap input{
  min-width:0;
  border:0;
  background:transparent;
  padding-left:0;
}
.ms755-search-results{display:grid;gap:8px;}
body.ms750-simple-ui .ms755-search-result{
  min-height:68px;
  display:grid;
  grid-template-columns:48px 1fr auto;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:1px solid rgba(126,220,255,.20);
  border-radius:17px;
  background:#0d2b40;
  color:#fff;
  text-align:left;
}
.ms755-search-result > span:first-child{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  font-size:24px;
}
.ms755-search-result strong,.ms755-search-result small{display:block;}
.ms755-search-result small{color:#bad1dd;font-size:13px !important;}
.ms755-search-result b{font-size:24px;color:#66d8ff;}
.ms755-search-empty{padding:22px;text-align:center;color:#bcd0dc;}
.ms755-radio-highlight{animation:ms755RadioPulse 1.8s ease;}
@keyframes ms755RadioPulse{
  0%,100%{box-shadow:none;}
  30%,70%{box-shadow:0 0 0 4px rgba(255,222,89,.65),0 0 28px rgba(255,222,89,.26);}
}

@media(max-width:520px){
  .ms750-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ms750-primary-action{min-height:112px;align-items:flex-start;flex-direction:column;}
  .ms750-primary-action .ms750-action-icon{width:48px;height:48px;flex-basis:48px;}
}


/* 7.5.6: Start is altijd een volledige paginawissel, ook na iPad viewport-herstel. */
body.ms755-single-page-nav #ms708NativePager > #dashboard.ms755-route-active{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
body.ms755-single-page-nav #ms708NativePager > .ms708-native-page:not(.ms755-route-active){
  display:none !important;
  pointer-events:none !important;
}