/* Tablet layout and ordinary local SVG images. No icon fonts or CSS masks. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body.vik-map-page { overflow:hidden; }
.vik-map-page #content { position:fixed!important; top:56px!important; bottom:0!important; left:0; right:0; height:auto!important; width:auto!important; padding:0!important; }
.vik-svg-host, #headermenu .nav .vik-svg-host, .vik-panel-icon.vik-svg-host,
#mapmenu .nav-list > li > a .vik-svg-host {
 background:none!important; mask:none!important; -webkit-mask:none!important;
 display:inline-flex!important; align-items:center; justify-content:center;
 width:24px; height:24px; flex:0 0 24px; transform:none!important;
}
.vik-svg-image { display:block; width:100%; height:100%; max-width:none; object-fit:contain; pointer-events:none; }
#vik-locate .vik-svg-image { width:28px; height:28px; }
#vik-locate[aria-busy='true'] .vik-svg-image { animation:vik-locate-pulse 1s ease-in-out infinite; }
.vik-login-emblem.vik-svg-host { width:48px; height:48px; background:#e8f3f8!important; }
.vik-login-emblem.vik-svg-host::after { display:none!important; }
.vik-login-emblem .vik-svg-image { width:26px; height:26px; }
#navbar button.vik-svg-button { background-image:none!important; display:flex; align-items:center; justify-content:center; padding:9px!important; }
#navbar .vik-svg-image { width:22px; height:22px; }
#mapmenu .nav-list > li > a { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:44px; height:46px; padding:10px!important; }
#headermenu .vik-user-panel { max-height:calc(100vh - 76px); overflow-y:auto; overscroll-behavior:contain; }
#headermenu .vik-user-panel a > span:last-child { min-width:0; overflow-wrap:break-word; }
#headermenu .vik-user-panel .vik-panel-heading strong { max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vik-admin #menu .nav-list > li > a > span:last-child { min-width:0; overflow-wrap:break-word; }

@media (pointer:coarse), (max-width:900px) {
 .vik-map-page #header { z-index:10010; }
 #content #mapmenu {
  width:300px!important; width:min(300px,calc(100vw - 48px))!important;
  min-width:0!important; max-width:calc(100vw - 48px)!important; height:100%;
  transform:translateX(-100%); transition:transform .2s ease;
  overflow-x:hidden; overflow-y:auto; box-sizing:border-box;
  background:#034462!important; z-index:5001;
 }
 #content #menuToggle.opened ~ #mapmenu { transform:translateX(0); }
 #content #mapmenu > div { width:100%!important; top:0!important; display:block!important; padding:56px 8px 16px; box-sizing:border-box; }
 #content #mapmenu > div > ul { width:100%!important; margin:0!important; padding:0!important; background:transparent!important; box-sizing:border-box; }
 #content #mapmenu .nav-list > li { margin:4px 0!important; padding:0!important; border-radius:8px; background:transparent!important; }
 #content #mapmenu .nav-list > li > a {
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  width:100%!important; height:auto!important; min-height:48px;
  padding:12px 14px!important; margin:0!important; border-radius:8px;
  font-size:15px!important; line-height:22px!important; white-space:normal;
  text-align:left; box-sizing:border-box;
 }
 #content #mapmenu .nav-list .menu-title { display:block; flex:1 1 auto; min-width:0; margin:0!important; font-size:15px; line-height:22px; text-transform:none; overflow-wrap:break-word; }
 #content #menuToggle { display:block; box-sizing:border-box; width:44px; height:44px; top:6px; left:6px; padding:10px; background:#034462; border:1px solid #ffffff50; border-radius:8px; }
 #content #menuToggle span { width:24px; height:3px; margin-bottom:5px; }
 #content #menuToggle.opened { padding:10px; }
 #content #menuToggle.opened span { transform:rotate(45deg) translate(2px,-2px); }
 #content #menuToggle.opened span:nth-child(2) { opacity:0; }
 #content #menuToggle.opened span:last-child { transform:rotate(-45deg) translate(0,0); }
 #content #docks-wrapper, #content:not(.mobile) #docks-wrapper { left:0!important; width:100%!important; }
 #content #map-content, #content:not(.mobile) #map-content { margin-left:0!important; }
 #content #dock { margin-top:56px!important; width:380px; max-width:calc(100% - 64px); height:calc(100% - 56px)!important; max-height:calc(100% - 56px)!important; overflow:hidden; box-sizing:border-box; }
 #dock, #mini-dock, #right-dock { font-size:14px; line-height:21px; }
 #dock-tabs > li > a { font-size:16px; padding:9px 10px; }
 #switcher .node .node-label, #switcher .node .nodeLabel, #switcher .node label { font-size:14px; line-height:23px; }
 #content #navbar { transform:none!important; top:10px!important; right:10px!important; }
 #navbar button.btn { width:44px!important; height:44px!important; min-height:44px; margin:0 0 4px!important; box-sizing:border-box; }
 #navbar .slider { display:none!important; }
 .vik-location-tools { right:10px!important; bottom:48px!important; max-width:calc(100% - 20px); }
 #vik-locate { width:48px; height:48px; flex-basis:48px; padding:11px; }
 #vik-locate svg { width:24px; height:24px; }
 #vik-locate .vik-svg-image { width:24px; height:24px; }
 #overview-box { right:74px!important; bottom:8px!important; max-width:220px; font-size:11px; }
 #attribution-box { right:6px!important; max-width:calc(100% - 72px); }
 #vik-location-status { position:fixed; bottom:8px; left:12px; right:76px; max-width:440px; width:auto; padding:8px 12px; font-size:13px; line-height:19px; }
 #headermenu .vik-user-panel { position:fixed; top:64px; right:12px; left:auto; width:360px; max-width:calc(100vw - 24px); max-height:calc(100vh - 80px); margin:0; padding:10px; gap:8px; }
 #headermenu .vik-user-panel a { min-height:58px; height:100%; font-size:14px; line-height:20px; padding:10px; gap:8px; }
 #headermenu .vik-user-panel small { font-size:11px; line-height:16px; }
 #headermenu .vik-panel-icon { width:22px; height:22px; flex-basis:22px; }
 #content.vik-admin { padding:16px 12px 0; }
 .vik-admin > .row-fluid { grid-template-columns:210px minmax(0,1fr); gap:12px; }
 .vik-admin #menu .sidebar-nav { padding:12px 8px; }
 .vik-admin #menu .nav-list > li > a { padding:10px 8px; font-size:14px; line-height:20px; gap:8px; }
 .vik-admin-main > .row-fluid { padding:16px; }
}
@media (max-width:700px) {
 .vik-admin > .row-fluid { display:block; }
 .vik-admin #menu .sidebar-nav { margin-bottom:14px; }
 .vik-admin #menu .nav-list { display:flex; gap:6px; overflow-x:auto; }
 .vik-admin #menu .nav-header,.vik-admin #menu .vik-nav-caption { display:none; }
 .vik-admin #menu .nav-list > li { flex:0 0 auto; }
 .vik-admin #menu .nav-list > li > a { max-width:230px; min-height:44px; }
 #vik-katastar h1 { font-size:24px; }
}
@media (max-height:500px) and (pointer:coarse) {
 #navbar button.btn { width:40px!important; height:40px!important; min-height:40px; }
 .vik-location-tools { bottom:12px!important; }
}
@media (max-width:380px) {
 #headermenu .user.open > .vik-user-panel { grid-template-columns:1fr; }
 .vik-breadcrumbs { display:none; }
}
@media (prefers-reduced-motion:reduce) { #content #mapmenu { transition:none; } }
@media (prefers-reduced-motion:reduce) { #vik-locate[aria-busy='true'] .vik-svg-image { animation:none; } }

/* Keep native compact-menu rules from hiding/recolouring our SVG controls. */
#content #mapmenu .nav-list > li > a { color:#fff!important; }
#content #mapmenu .nav-list > li > a .vik-svg-host { background:transparent!important; opacity:1!important; }
#content #mapmenu .vik-svg-image { display:block!important; visibility:visible!important; opacity:1!important; filter:none!important; }
@media (pointer:coarse), (max-width:900px) {
 #content #menuToggle > span { display:none!important; }
 #content #menuToggle::after { content:""; display:block; width:24px; height:24px; background:url('/vik-assets/icons/light/menu.svg') center / contain no-repeat; }
 #content #menuToggle.opened::after { background-image:url('/vik-assets/icons/light/plus.svg'); transform:rotate(45deg); }
}
