/* MijnSerenity 7.11.0 — Serenity IVMS dashboard */
:root{
  --ivms-bg:#020914;
  --ivms-panel:#061321;
  --ivms-panel-2:#081a2c;
  --ivms-line:rgba(122,169,213,.22);
  --ivms-blue:#1688ff;
  --ivms-blue-soft:#60b5ff;
  --ivms-green:#54e55f;
  --ivms-amber:#ffbd4a;
  --ivms-red:#ff5968;
  --ivms-text:#f4f8ff;
  --ivms-muted:#8fa8c3;
}

#dashboard > :not(.serenity-ivms){display:none!important}
#dashboard{max-width:none!important;padding:0!important;margin:0!important}

.serenity-ivms{
  color:var(--ivms-text);
  min-height:calc(100dvh - 92px);
  padding:10px;
  border:1px solid rgba(77,132,183,.22);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 32%,rgba(13,86,151,.20),transparent 38%),
    linear-gradient(180deg,#010710 0%,#020b17 100%);
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.015);
  overflow:hidden;
}

.ivms-header{
  min-height:92px;
  display:grid;
  grid-template-columns:minmax(280px,1fr) auto;
  gap:16px;
  align-items:center;
  padding:12px 16px;
  border:1px solid var(--ivms-line);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(7,18,31,.96),rgba(3,11,21,.96));
}
.ivms-brand{display:flex;align-items:center;gap:22px;min-width:0}
.ivms-brand-name{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(35px,4.2vw,62px);
  line-height:.8;
  letter-spacing:-.05em;
  white-space:nowrap;
  text-shadow:0 0 22px rgba(255,255,255,.13);
}
.ivms-brand-copy{border-left:1px solid rgba(255,255,255,.2);padding-left:22px;min-width:0}
.ivms-brand-copy strong{display:block;font-size:clamp(16px,1.5vw,25px);letter-spacing:.08em;font-weight:500}
.ivms-brand-copy span{display:block;margin-top:4px;color:var(--ivms-muted);font-size:12px;letter-spacing:.05em}
.ivms-header-tools{display:flex;align-items:stretch;gap:9px}
.ivms-clock,.ivms-icon-button,.ivms-system-status{
  border:1px solid var(--ivms-line);
  border-radius:12px;
  background:rgba(5,16,28,.84);
  color:var(--ivms-text);
}
.ivms-clock{min-width:136px;padding:10px 16px;text-align:center}
.ivms-clock strong{font-size:26px;font-weight:500;display:block;line-height:1}
.ivms-clock span{display:block;margin-top:7px;color:#a9b9ca;font-size:12px}
.ivms-icon-button{position:relative;min-width:68px;padding:10px;font-size:25px}
.ivms-icon-button:active{transform:scale(.97)}
.ivms-alarm-count{
  position:absolute;right:9px;top:7px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;background:#e6323f;color:#fff;font-size:11px;font-weight:800;
}
.ivms-system-status{min-width:166px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ivms-system-status small{display:block;color:#bbc8d6;font-size:11px;letter-spacing:.05em}
.ivms-system-status strong{display:block;margin-top:5px;color:var(--ivms-green);font-size:16px;font-weight:500}
.ivms-system-status.warning strong{color:var(--ivms-amber)}
.ivms-system-status.critical strong{color:var(--ivms-red)}
.ivms-status-dot{width:13px;height:13px;border-radius:50%;background:currentColor;box-shadow:0 0 14px currentColor;color:var(--ivms-green)}
.ivms-system-status.warning .ivms-status-dot{color:var(--ivms-amber)}
.ivms-system-status.critical .ivms-status-dot{color:var(--ivms-red)}

.ivms-main-grid{
  display:grid;
  grid-template-columns:minmax(210px,260px) minmax(420px,1fr) minmax(225px,280px);
  gap:10px;
  margin-top:10px;
}
.ivms-side{display:grid;gap:10px;align-content:stretch}
.ivms-card{
  border:1px solid var(--ivms-line);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(7,23,39,.94),rgba(3,13,24,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.ivms-gauge-card{min-height:178px;padding:16px;cursor:pointer}
.ivms-card-title{display:flex;align-items:center;gap:10px;font-size:16px;letter-spacing:.02em}
.ivms-card-title span:first-child{font-size:21px;filter:grayscale(.2)}
.ivms-gauge-content{display:grid;grid-template-columns:1fr 96px;gap:8px;align-items:center;margin-top:11px}
.ivms-gauge-copy strong{display:block;color:var(--ivms-blue-soft);font-size:26px;font-weight:500;line-height:1.1}
.ivms-gauge-copy span{display:block;color:#bdc9d6;font-size:12px;margin-top:8px;text-transform:uppercase}
.ivms-gauge-copy small{display:block;color:var(--ivms-muted);font-size:11px;margin-top:7px}
.ivms-battery-card{min-height:250px}
.ivms-battery-live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(139,168,196,.18)}
.ivms-battery-live-grid span{min-width:0}
.ivms-battery-live-grid small{display:block;color:var(--ivms-muted);font-size:9px;letter-spacing:.07em;white-space:nowrap}
.ivms-battery-live-grid strong{display:block;margin-top:3px;color:#eef7ff;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ivms-energy-title{min-width:0}
.ivms-energy-title>span:nth-child(2){min-width:0;flex:1}
.ivms-energy-source{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.ivms-energy-source strong{color:var(--ivms-green);font-size:13px;font-weight:700;white-space:nowrap}
.ivms-energy-source small{color:var(--ivms-muted);font-size:8px;letter-spacing:.08em;white-space:nowrap}
.ivms-shore-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(139,168,196,.18)}
.ivms-shore-details span{min-width:0}
.ivms-shore-details small{display:block;color:var(--ivms-muted);font-size:9px;letter-spacing:.07em;white-space:nowrap}
.ivms-shore-details strong{display:block;margin-top:3px;color:#eef7ff;font-size:13px;font-weight:650;white-space:nowrap}

.ivms-ring{
  --value:0;
  --ring-color:var(--ivms-blue);
  width:88px;height:88px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--ring-color) calc(var(--value)*1%),rgba(24,79,125,.35) 0);
  box-shadow:0 0 20px rgba(22,136,255,.08);
}
.ivms-ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#061321;box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.ivms-ring strong{position:relative;z-index:1;font-size:22px;font-weight:500}
.ivms-ring.warning{--ring-color:var(--ivms-amber)}
.ivms-ring.critical{--ring-color:var(--ivms-red)}
.ivms-ring.good{--ring-color:var(--ivms-blue)}

.ivms-center{min-width:0}
.ivms-nav-strip{
  width:min(88%,760px);min-height:82px;margin:10px auto -15px;position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  border:1px solid var(--ivms-line);border-radius:13px;background:rgba(4,15,27,.94);backdrop-filter:blur(12px);
}
.ivms-nav-stat{padding:11px 16px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;border-right:1px solid rgba(116,160,198,.15)}
.ivms-nav-stat:last-child{border-right:0}
.ivms-nav-stat>span{font-size:22px;color:#b9c9da}
.ivms-nav-stat small{display:block;color:#9fb0c1;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.ivms-nav-stat strong{display:block;margin-top:3px;color:var(--ivms-blue-soft);font-size:20px;font-weight:500;white-space:nowrap}
.ivms-nav-stat em{font-size:10px;color:#9fb0c1;font-style:normal;margin-left:3px}

.ivms-hero{
  min-height:520px;position:relative;overflow:hidden;border-radius:14px;border:1px solid rgba(83,139,188,.15);
  background:
    radial-gradient(circle at 50% 58%,rgba(22,136,255,.18),transparent 28%),
    linear-gradient(180deg,#010812 0%,#031528 55%,#010912 100%);
  cursor:pointer;
}
.ivms-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,8,18,.35) 0%,transparent 28%,transparent 70%,rgba(0,6,13,.68) 100%);
}
.ivms-hero img{width:100%;height:100%;min-height:520px;display:block;object-fit:cover;object-position:center;filter:saturate(.92) contrast(1.06)}
.ivms-hero-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;transition:opacity .2s ease}
.ivms-hero-placeholder strong{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(42px,7vw,82px);font-weight:600;letter-spacing:-.04em;text-shadow:0 0 28px rgba(255,255,255,.12)}
.ivms-hero-placeholder span{color:#91abc4;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ivms-hero.has-photo .ivms-hero-placeholder{opacity:0;pointer-events:none}
.ivms-hero-name{position:absolute;left:24px;bottom:18px;z-index:2}
.ivms-hero-name strong{display:block;font-family:Georgia,serif;font-style:italic;font-size:26px;font-weight:500}
.ivms-hero-name span{display:block;color:#a8bbcf;font-size:11px;margin-top:4px;letter-spacing:.08em;text-transform:uppercase}
.ivms-live-pill{position:absolute;right:18px;bottom:18px;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(84,229,95,.35);border-radius:999px;background:rgba(2,16,20,.75);font-size:11px;color:#c9f7ce}
.ivms-live-pill i{width:8px;height:8px;border-radius:50%;background:var(--ivms-green);box-shadow:0 0 10px var(--ivms-green)}

.ivms-info-card{min-height:155px;padding:16px;cursor:pointer}
.ivms-info-grid{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin-top:16px;align-items:center}
.ivms-info-grid span{color:#a7b7c7;font-size:12px;text-transform:uppercase}
.ivms-info-grid strong{font-weight:500;text-align:right;font-size:15px}
.ivms-info-grid strong.ok{color:var(--ivms-green)}
.ivms-sparkline{height:34px;margin-top:11px;position:relative;overflow:hidden}
.ivms-sparkline::before{
  content:"";position:absolute;inset:8px 0 2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M0 27 C25 34 38 14 64 22 S105 35 132 17 S177 23 202 13 S245 31 300 12' fill='none' stroke='%231688ff' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity:.95;
}
.ivms-temperature{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;text-align:center}
.ivms-temperature div+div{border-left:1px solid rgba(255,255,255,.12)}
.ivms-temperature small{display:block;color:#a7b7c7;font-size:10px;text-transform:uppercase}
.ivms-temperature strong{display:block;color:var(--ivms-blue-soft);font-size:23px;font-weight:500;margin-top:6px}

.ivms-bottom-grid{display:grid;grid-template-columns:.8fr .85fr .9fr 1.15fr 1.1fr 2fr;gap:10px;margin-top:10px}
.ivms-bottom-card{min-height:142px;padding:15px;cursor:pointer}
.ivms-bottom-card .ivms-card-title{font-size:14px}
.ivms-bottom-value{display:flex;min-height:80px;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ivms-bottom-value strong{font-size:38px;font-weight:400;line-height:1}
.ivms-bottom-value span{font-size:11px;color:#bac7d5;text-transform:uppercase;margin-top:10px}
.ivms-clear-icon{width:42px;height:42px;margin:8px auto 4px;display:grid;place-items:center;border:2px solid var(--ivms-green);border-radius:50%;color:var(--ivms-green);font-size:23px}
.ivms-bottom-status{text-align:center;color:var(--ivms-green);font-size:13px;margin-top:3px}
.ivms-bottom-status.warning{color:var(--ivms-amber)}
.ivms-bottom-status.critical{color:var(--ivms-red)}
.ivms-gps-copy{padding-top:13px;text-align:center}
.ivms-gps-copy strong{display:block;font-size:17px;font-weight:500;line-height:1.45;letter-spacing:.05em}
.ivms-gps-copy span{display:block;color:#a8b8c9;font-size:11px;margin-top:5px;text-transform:uppercase}
.ivms-tank-bars{display:grid;gap:10px;margin-top:16px}
.ivms-tank-row{display:grid;grid-template-columns:72px 1fr 34px;gap:8px;align-items:center}
.ivms-tank-row span,.ivms-tank-row strong{font-size:10px;font-weight:500;color:#c2ceda}
.ivms-tank-track{height:8px;border-radius:999px;background:rgba(36,74,107,.42);overflow:hidden}
.ivms-tank-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0b6ed6,#1688ff);border-radius:999px}
.ivms-weather-card{cursor:pointer}
.ivms-weather-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:end;margin-top:12px}
.ivms-weather-current strong{display:block;font-size:32px;font-weight:400}
.ivms-weather-current span{display:block;color:#c6d1dc;font-size:11px;text-transform:uppercase;margin-top:4px}
.ivms-hourly{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;text-align:center}
.ivms-hourly div{min-width:0}
.ivms-hourly time{display:block;color:#aab9c8;font-size:9px}
.ivms-hourly b{display:block;font-size:20px;margin:3px 0;font-weight:400}
.ivms-hourly span{font-size:10px;color:#dbe4ee}
.ivms-weather-foot{display:flex;justify-content:space-between;gap:12px;color:#aab9c8;font-size:10px;margin-top:10px}

.ivms-quick-nav{
  display:grid;grid-template-columns:repeat(8,1fr);gap:1px;margin-top:10px;
  border:1px solid var(--ivms-line);border-radius:13px;overflow:hidden;background:rgba(84,130,171,.14);
}
.ivms-quick-nav button{min-width:0;min-height:76px;border:0;border-radius:0;background:#061321;color:#91a6bb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px}
.ivms-quick-nav button span{font-size:23px;line-height:1}
.ivms-quick-nav button small{font-size:10px;white-space:nowrap}
.ivms-quick-nav button:hover,.ivms-quick-nav button:active{background:#0a1d31;color:#fff}
.ivms-quick-nav button.active{color:var(--ivms-blue-soft);box-shadow:inset 0 0 0 1px var(--ivms-blue)}

@media(max-width:1180px){
  .ivms-main-grid{grid-template-columns:210px minmax(390px,1fr) 225px}
  .ivms-gauge-card,.ivms-info-card{padding:13px}
  .ivms-gauge-content{grid-template-columns:1fr 78px}.ivms-ring{width:74px;height:74px}.ivms-ring strong{font-size:18px}
  .ivms-bottom-grid{grid-template-columns:repeat(3,1fr)}
  .ivms-weather-card{grid-column:span 2}
}

@media(max-width:900px){
  .serenity-ivms{padding:7px;border-radius:15px}
  .ivms-header{grid-template-columns:1fr;min-height:auto;padding:13px}
  .ivms-header-tools{overflow-x:auto;scrollbar-width:none}.ivms-header-tools::-webkit-scrollbar{display:none}
  .ivms-brand-copy strong{font-size:18px}
  .ivms-main-grid{display:flex;flex-direction:column}
  .ivms-side{grid-template-columns:repeat(3,1fr)}
  .ivms-gauge-card,.ivms-info-card{min-height:150px}
  .ivms-center{order:-1}
  .ivms-hero,.ivms-hero img{min-height:440px}
  .ivms-nav-strip{width:94%;margin-bottom:-12px}
  .ivms-bottom-grid{grid-template-columns:repeat(3,1fr)}
  .ivms-quick-nav{overflow-x:auto;display:flex;scrollbar-width:none}.ivms-quick-nav::-webkit-scrollbar{display:none}
  .ivms-quick-nav button{min-width:96px;flex:0 0 96px}
}

@media(max-width:620px){
  #dashboard{padding:0!important}
  .serenity-ivms{border-left:0;border-right:0;border-radius:0;padding:6px;min-height:calc(100dvh - 76px)}
  .ivms-header{gap:12px}
  .ivms-brand{gap:12px}.ivms-brand-name{font-size:39px}.ivms-brand-copy{padding-left:12px}.ivms-brand-copy strong{font-size:13px}.ivms-brand-copy span{font-size:9px}
  .ivms-clock{min-width:104px;padding:9px}.ivms-clock strong{font-size:21px}.ivms-icon-button{min-width:55px}.ivms-system-status{min-width:140px}
  .ivms-nav-strip{width:96%;grid-template-columns:repeat(2,1fr);margin-top:7px;margin-bottom:-8px}
  .ivms-nav-stat{padding:9px 11px}.ivms-nav-stat:nth-child(2){border-right:0}.ivms-nav-stat:nth-child(-n+2){border-bottom:1px solid rgba(116,160,198,.15)}.ivms-nav-stat strong{font-size:17px}
  .ivms-hero,.ivms-hero img{min-height:300px}.ivms-hero img{object-position:center}
  .ivms-hero-name{left:15px;bottom:13px}.ivms-hero-name strong{font-size:21px}.ivms-live-pill{right:12px;bottom:12px}
  .ivms-side{grid-template-columns:1fr}
  .ivms-gauge-card{min-height:130px}.ivms-gauge-content{grid-template-columns:1fr 84px}.ivms-ring{width:80px;height:80px}
  .ivms-info-card{min-height:135px}
  .ivms-bottom-grid{grid-template-columns:repeat(2,1fr)}
  .ivms-bottom-card{min-height:130px}.ivms-weather-card{grid-column:1/-1}.ivms-gps-card{grid-column:span 2}
  .ivms-hourly{gap:2px}.ivms-hourly b{font-size:18px}
}

/* Alleen het IVMS-menu op de startpagina; op andere pagina's blijft de bestaande navigatie actief. */
body.ivms-dashboard-active .tabs,
.bottom-nav.ivms-dashboard-hidden{display:none!important}
body.ivms-dashboard-active,
body.ivms-dashboard-active main{
  padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
}
.ivms-clear-icon.critical{border-color:var(--ivms-red);color:var(--ivms-red)}

@media(max-width:620px){
  .ivms-header-tools{
    display:grid;
    grid-template-columns:minmax(82px,1fr) 52px 52px minmax(112px,1.2fr);
    gap:6px;
    overflow:visible;
  }
  .ivms-clock,.ivms-system-status,.ivms-icon-button{min-width:0;width:100%;padding-left:7px;padding-right:7px}
  .ivms-system-status{gap:6px}
  .ivms-system-status small{font-size:8px}
  .ivms-system-status strong{font-size:12px}
  .ivms-tank-bars{max-width:300px;margin-inline:auto}
  .ivms-bottom-grid .ivms-bottom-card:nth-child(5){grid-column:1/-1}
}

@media(max-width:620px){
  .ivms-energy-title{align-items:flex-start}
  .ivms-energy-title>span:nth-child(2){font-size:15px;line-height:1.2}
  .ivms-energy-source strong{font-size:12px}
  .ivms-battery-card{min-height:250px}
  .ivms-hero-placeholder strong{font-size:48px}
}


/* =========================================================
   MijnSerenity 7.11.0 — compacte IVMS-kop en varende laadintro
   ========================================================= */


body.ms797-dashboard-route .ms750-pagebar{display:none!important}
body.ms797-dashboard-route main{padding-top:max(8px,env(safe-area-inset-top))!important}

.ivms-header{
  grid-template-columns:minmax(420px,1.15fr) minmax(520px,1.85fr);
  min-height:176px;
  align-items:stretch;
  padding:10px;
}
.ivms-brand{
  display:grid;
  grid-template-columns:minmax(250px,360px) minmax(120px,1fr);
  align-items:center;
  gap:18px;
}
.ivms-brand-photo{
  position:relative;
  min-width:0;
  height:154px;
  overflow:hidden;
  border:1px solid rgba(122,169,213,.28);
  border-radius:13px;
  background:linear-gradient(145deg,#0a2034,#03101e);
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.ivms-brand-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:saturate(.92) contrast(1.05);
}
.ivms-brand-photo-fallback{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:
    radial-gradient(circle at 50% 40%,rgba(28,129,209,.22),transparent 35%),
    linear-gradient(145deg,#071a2b,#020b14);
  color:#f7fbff;
  text-align:center;
}
.ivms-brand-photo-fallback strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  font-style:italic;
  font-weight:600;
}
.ivms-brand-photo-fallback span{color:var(--ivms-muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.ivms-brand-photo.has-photo .ivms-brand-photo-fallback{opacity:0;pointer-events:none}
.ivms-brand-copy{border-left:0;padding-left:0;align-self:center}
.ivms-brand-copy strong{font-size:clamp(21px,2.2vw,34px)}
.ivms-brand-copy span{max-width:250px;font-size:11px;line-height:1.4}

.ivms-header-tools{
  display:grid;
  grid-template-columns:minmax(120px,1fr) 70px 70px minmax(166px,1.25fr) minmax(92px,.75fr);
  align-items:stretch;
  gap:9px;
}
.ivms-more-button{
  min-width:0;
  border:1px solid rgba(107,199,239,.34);
  border-radius:12px;
  background:linear-gradient(180deg,#174766,#0d3048);
  color:#fff;
  font-size:15px;
  font-weight:750;
  white-space:nowrap;
}
.ivms-more-button span{margin-left:4px}
.ivms-more-button:active{transform:scale(.98)}

.ivms-command-panel{
  min-height:430px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 55%,rgba(18,97,163,.18),transparent 32%),
    linear-gradient(180deg,#020b15 0%,#031427 54%,#020a14 100%);
}
.ivms-command-panel::before{
  background:
    linear-gradient(180deg,rgba(1,8,18,.18),transparent 26%,transparent 74%,rgba(0,6,13,.62) 100%),
    repeating-linear-gradient(0deg,transparent 0 34px,rgba(93,147,195,.028) 35px);
}
.ivms-command-wave{
  position:absolute;
  top:46px;
  left:4%;
  right:4%;
  height:45px;
  opacity:.88;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'%3E%3Cpath d='M0 29 C32 38 52 13 84 24 S143 39 176 18 S237 28 274 14 S336 38 400 13' fill='none' stroke='%231688ff' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.ivms-command-compass{
  position:relative;
  width:min(58%,280px);
  aspect-ratio:1;
  border:1px solid rgba(107,166,216,.12);
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 36%,rgba(80,138,188,.10) 36.5% 37%,transparent 37.5% 52%,rgba(80,138,188,.10) 52.5% 53%,transparent 53.5%),
    conic-gradient(from 0deg,rgba(96,181,255,.12),transparent 4deg 41deg,rgba(96,181,255,.08) 45deg,transparent 49deg 86deg,rgba(96,181,255,.08) 90deg,transparent 94deg 131deg,rgba(96,181,255,.08) 135deg,transparent 139deg 176deg,rgba(96,181,255,.08) 180deg,transparent 184deg 221deg,rgba(96,181,255,.08) 225deg,transparent 229deg 266deg,rgba(96,181,255,.08) 270deg,transparent 274deg 311deg,rgba(96,181,255,.08) 315deg,transparent 319deg 356deg,rgba(96,181,255,.12) 360deg);
  opacity:.72;
}
.ivms-command-compass::before,.ivms-command-compass::after{content:"";position:absolute;background:rgba(97,159,211,.18)}
.ivms-command-compass::before{left:50%;top:8%;bottom:8%;width:1px}
.ivms-command-compass::after{top:50%;left:8%;right:8%;height:1px}
.ivms-command-compass>span{position:absolute;color:#7195b4;font-size:12px}
.ivms-command-compass .north{top:-24px;left:50%;transform:translateX(-50%)}
.ivms-command-compass .east{right:-24px;top:50%;transform:translateY(-50%)}
.ivms-command-compass .south{bottom:-24px;left:50%;transform:translateX(-50%)}
.ivms-command-compass .west{left:-24px;top:50%;transform:translateY(-50%)}
.ivms-command-boat{position:absolute;inset:0;display:grid;place-items:center;font-size:46px;filter:grayscale(1);opacity:.34}
.ivms-hero-name,.ivms-hero-placeholder{display:none!important}

@media(max-width:1180px){
  .ivms-header{grid-template-columns:minmax(340px,1fr) minmax(460px,1.55fr)}
  .ivms-brand{grid-template-columns:minmax(210px,280px) 1fr;gap:12px}
  .ivms-brand-photo{height:142px}
  .ivms-header-tools{grid-template-columns:minmax(108px,1fr) 60px 60px minmax(145px,1.1fr) 88px;gap:6px}
}
@media(max-width:900px){
  .ivms-header{grid-template-columns:1fr;min-height:auto}
  .ivms-brand{grid-template-columns:minmax(210px,42%) 1fr}
  .ivms-brand-photo{height:136px}
  .ivms-header-tools{grid-template-columns:minmax(105px,1fr) 58px 58px minmax(145px,1.25fr) 92px;overflow:visible}
  .ivms-command-panel{min-height:360px}
}
@media(max-width:620px){
  body.ms797-dashboard-route main{padding-top:env(safe-area-inset-top)!important}
  .ivms-header{padding:8px}
  .ivms-brand{grid-template-columns:minmax(145px,46%) 1fr;gap:10px}
  .ivms-brand-photo{height:105px}
  .ivms-brand-photo-fallback strong{font-size:25px}
  .ivms-brand-copy strong{font-size:17px}
  .ivms-brand-copy span{font-size:8px}
  .ivms-header-tools{grid-template-columns:minmax(84px,1fr) 50px 50px minmax(108px,1.25fr) 78px;gap:5px}
  .ivms-more-button{font-size:12px;padding:6px}
  .ivms-command-panel{min-height:300px}
  .ivms-command-compass{width:min(54%,210px)}
}


/* 7.11.0 — iPhone-kop: foto volledig breed, bediening eronder zonder overflow. */
@media(max-width:620px){
  .ivms-header{
    display:block!important;
    width:100%;
    min-width:0;
    padding:8px!important;
    overflow:hidden;
  }
  .ivms-brand{
    display:block!important;
    position:relative;
    width:100%;
    min-width:0;
  }
  .ivms-brand-photo{
    width:100%!important;
    height:auto!important;
    min-height:0;
    aspect-ratio:16/9;
    border-radius:14px;
  }
  .ivms-brand-photo img{width:100%!important;height:100%!important;object-fit:cover;object-position:center}
  .ivms-brand-copy{
    position:absolute;
    left:12px;
    right:12px;
    bottom:10px;
    z-index:3;
    padding:26px 10px 8px;
    border-radius:10px;
    background:linear-gradient(180deg,transparent,rgba(1,9,18,.72));
    pointer-events:none;
  }
  .ivms-brand-copy strong{font-size:20px!important;text-shadow:0 1px 8px #000}
  .ivms-brand-copy span{display:block;max-width:100%;font-size:8px!important;white-space:normal;overflow-wrap:anywhere;text-shadow:0 1px 7px #000}
  .ivms-header-tools{
    display:grid!important;
    width:100%;
    min-width:0;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:8px;
    overflow:visible!important;
  }
  .ivms-clock{grid-column:span 2;min-width:0!important;width:100%!important}
  .ivms-icon-button{min-width:0!important;width:100%!important;padding:6px!important}
  .ivms-system-status{grid-column:span 3;min-width:0!important;width:100%!important;padding:7px 8px!important}
  .ivms-more-button{grid-column:span 1;min-width:0!important;width:100%!important;padding:7px 5px!important;font-size:12px!important}
  .ivms-header-tools>*{max-width:100%;box-sizing:border-box}
}
@media(max-width:380px){
  .ivms-brand-photo{aspect-ratio:15/9}
  .ivms-header-tools{gap:5px!important}
  .ivms-clock strong{font-size:19px!important}
  .ivms-clock span{font-size:10px!important}
  .ivms-system-status small{font-size:7px!important}
  .ivms-system-status strong{font-size:11px!important}
  .ivms-more-button span{display:none}
}
@media(max-width:620px){
  .serenity-ivms{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
  .ivms-header,.ivms-brand,.ivms-brand-photo,.ivms-header-tools,.ivms-header-tools>*{box-sizing:border-box!important}
}


/* MijnSerenity 7.15.14 — compact startdashboard iPhone */
@media(max-width:620px){
  .ivms-main-grid{gap:6px!important;margin-top:6px!important}
  .ivms-center{width:100%!important;order:-1!important}
  .ivms-nav-strip{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    min-height:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:12px!important;
  }
  .ivms-nav-stat{padding:10px 12px!important;min-height:72px!important}
  .ivms-nav-stat strong{font-size:20px!important}
  .ivms-nav-stat small{font-size:10px!important}
  .ivms-nav-stat>span{font-size:20px!important}

  /* Grote lege commandocentrale verdwijnt; vaarwaarden sluiten direct aan op de rest. */
  .ivms-command-panel,.ivms-hero{display:none!important}
  .ivms-side{gap:6px!important}
  .ivms-card{border-radius:12px!important}
  .ivms-gauge-card,.ivms-info-card{min-height:0!important}
  .ivms-bottom-grid{gap:6px!important}
  .ivms-bottom-card{min-height:112px!important}
  .ivms-quick-nav{margin-top:6px!important}
}


/* MijnSerenity 7.15.14 — echte full-width compacte start op iPhone */
@media(max-width:620px){
  /* Geen kunstmatige schermhoogte meer: inhoud sluit direct op elkaar aan */
  .serenity-ivms{
    min-height:0!important;
    height:auto!important;
    padding:4px!important;
    overflow:visible!important;
  }

  .ivms-main-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    margin:4px 0 0!important;
    min-height:0!important;
    height:auto!important;
  }

  .ivms-center{
    width:calc(100% + 8px)!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin-left:-4px!important;
    margin-right:-4px!important;
    padding:0!important;
    order:-1!important;
  }

  .ivms-nav-strip{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    min-height:0!important;
    height:auto!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:0!important;
  }

  .ivms-nav-stat{
    min-height:86px!important;
    padding:12px 14px!important;
  }

  .ivms-nav-stat strong{
    font-size:23px!important;
  }

  .ivms-nav-stat small{
    font-size:11px!important;
  }

  .ivms-nav-stat>span{
    font-size:22px!important;
  }

  /* De verwijderde commandocentrale mag letterlijk geen ruimte innemen */
  .ivms-command-panel,
  .ivms-hero{
    display:none!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  /* Volgende kaarten direct onder de vaarwaarden */
  .ivms-side{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:4px!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
  }

  .ivms-card{
    margin:0!important;
  }

  .ivms-bottom-grid{
    margin-top:4px!important;
    gap:4px!important;
  }

  .ivms-quick-nav{
    margin-top:4px!important;
  }
}