/* Författarstilar med display:flex får inte upphäva HTML-attributet hidden. */
button.mobile-tree-toggle,
button.mobile-tree-toggle[hidden] { display: none !important; text-shadow: none !important; }
/* Datorvyn behåller ikonens kompakta utseende och drag/drop-uppladdning. */
button.maps-icon-button {
    background: transparent !important; border: 0; box-shadow: none;
    min-width: 0; margin: 0; padding: 0; display: inline-flex;
}
button.maps-icon-button > img { padding: 0; }
button.mobile-upload-button { display: none; }
/* Mobilregler ligger separat så datorns befintliga layout behålls. */
@media screen and (max-width: 800px) {
    #header { height: auto !important; position: relative; z-index: 30; }
    nav.mobile-navigation > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; }
    nav.mobile-navigation > ul > li { position: static; }
    nav.mobile-navigation a { min-height: 44px; box-sizing: border-box; padding: 8px 12px; }
    nav.mobile-navigation .NAVsub-menu {
        left: 0; right: 0; width: auto; max-height: 65dvh; overflow-y: auto;
        z-index: 40;
    }
    /* Pekskärmar kan behålla :hover efter ett tryck. Öppet/stängt styrs här
       uttryckligen så menyn även går att stänga med nästa tryck. */
    nav.mobile-navigation .NAVsub-menu-parent:not(.mobile-menu-open) > .NAVsub-menu {
        visibility: hidden; opacity: 0;
    }
    nav.mobile-navigation .mobile-menu-open > .NAVsub-menu {
        visibility: visible; opacity: 1; transform: none; transition-delay: 0s;
    }
    body:is(.mobile-sign, .mobile-project) { margin: 0; padding: 8px; }
    :is(.mobile-sign, .mobile-project) .form-style-10 {
        width: 100% !important; max-width: 100%; box-sizing: border-box;
        padding: 12px; margin: 16px auto;
    }
    :is(.mobile-sign, .mobile-project) .form-style-10 h1 {
        margin: -12px -12px 16px; padding: 12px; font-size: 20px;
        overflow-wrap: anywhere;
    }
    :is(.mobile-sign, .mobile-project) .inner-wrap { padding: 10px; }
    /* Selektera bara formulärens tabeller, aldrig Googles kartkontroller. */
    :is(.mobile-sign, .mobile-project) .inner-wrap > table,
    :is(.mobile-sign, .mobile-project) .inner-wrap > table > tbody,
    :is(.mobile-sign, .mobile-project) .inner-wrap > table > tbody > tr,
    :is(.mobile-sign, .mobile-project) .inner-wrap > table > tbody > tr > td,
    :is(.mobile-sign, .mobile-project) #actionBox > table,
    :is(.mobile-sign, .mobile-project) #actionBox > table > tbody,
    :is(.mobile-sign, .mobile-project) #actionBox > table > tbody > tr,
    :is(.mobile-sign, .mobile-project) #actionBox > table > tbody > tr > td {
        display: block; width: 100% !important; box-sizing: border-box;
    }
    :is(.mobile-sign, .mobile-project) td { overflow-wrap: anywhere; }
    :is(.mobile-sign, .mobile-project) .form-style-10 input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    :is(.mobile-sign, .mobile-project) .form-style-10 select,
    :is(.mobile-sign, .mobile-project) .form-style-10 textarea {
        font-size: 16px; min-height: 44px; max-width: 100%; box-sizing: border-box;
    }
    :is(.mobile-sign, .mobile-project) input[type=checkbox] { width: 24px; height: 24px; vertical-align: middle; }
    :is(.mobile-sign, .mobile-project) #map { width: 100% !important; height: 300px !important; box-sizing: border-box; }
    :is(.mobile-sign, .mobile-project) #pictureViewer, :is(.mobile-sign, .mobile-project) #pictureViewerAction {
        width: 100% !important; height: 320px !important; box-sizing: border-box;
    }
    :is(.mobile-sign, .mobile-project) .coordinates { display: flex; flex-wrap: wrap; align-items: end; }
    :is(.mobile-sign, .mobile-project) .coordinates > div { float: none !important; width: 50% !important; padding: 4px !important; box-sizing: border-box; }
    :is(.mobile-sign, .mobile-project) #Comments, :is(.mobile-sign, .mobile-project) #ActionComment { height: 160px !important; }
    :is(.mobile-sign, .mobile-project) #actionWrapper, :is(.mobile-sign, .mobile-project) #searchWrapper,
    :is(.mobile-sign, .mobile-project) #sketchWrapper, :is(.mobile-sign, .mobile-project) #zoomWrapper {
        position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: auto;
        overscroll-behavior: contain; box-sizing: border-box; background: #fff;
    }
    :is(.mobile-sign, .mobile-project) .centerHorizontally { position: static; }
    :is(.mobile-sign, .mobile-project) #actionBox, :is(.mobile-sign, .mobile-project) #searchBox, :is(.mobile-sign, .mobile-project) #sketchBox {
        position: relative !important; left: 0 !important; top: 0 !important;
        margin: 0 !important; width: 100% !important; max-width: 100%;
    }
    :is(.mobile-sign, .mobile-project) .button-section { display: flex; flex-wrap: wrap; gap: 8px; }
    :is(.mobile-sign, .mobile-project) .button-section input { float: none !important; margin: 0; }
    :is(.mobile-sign, .mobile-project) h1 > table > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    :is(.mobile-sign, .mobile-project) #projectTitle { flex-basis: 100%; }
    :is(.mobile-sign, .mobile-project) #siblingstepper td { min-width: 36px; height: 44px; text-align: center; padding: 0 4px !important; }
    :is(.mobile-sign, .mobile-project) #skylttrad { max-width: calc(100vw - 48px); }
    :is(.mobile-sign, .mobile-project) #searchResults { overflow-wrap: anywhere; }
    :is(.mobile-sign, .mobile-project) #sketchBox { overflow-x: auto; }
    :is(.mobile-sign, .mobile-project) [id=pictureViewerExit], :is(.mobile-sign, .mobile-project) [id=pictureViewerLeft],
    :is(.mobile-sign, .mobile-project) [id=pictureViewerRight], :is(.mobile-sign, .mobile-project) [id=pictureViewerDelete] {
        min-width: 44px; min-height: 44px; text-align: center;
    }
}

/* Förfinad mobilstruktur efter test på telefon. */
@media screen and (max-width: 800px) {
    :is(.mobile-sign, .mobile-project) #skylttrad {
        position: relative; top: auto; left: auto; width: 100%; max-width: 100%;
        margin: 10px 0; box-sizing: border-box; z-index: 20;
    }
    :is(.mobile-sign, .mobile-project) #treetab { display: none; }
    :is(.mobile-sign, .mobile-project) .mobile-tree-toggle {
        width: 100%; min-height: 44px; margin: 0; padding: 8px 12px;
        background: #2a88ad; color: white; justify-content: center;
    }
    :is(.mobile-sign, .mobile-project) #div_tree {
        float: none; position: relative; width: 100%; max-width: 100%;
        max-height: 55dvh; overflow: auto; box-sizing: border-box;
        background: white;
    }
    :is(.mobile-sign, .mobile-project) button.mobile-upload-button { display: inline-flex; margin: 8px 0; }
    :is(.mobile-sign, .mobile-project) .coordinate-tools {
        clear: both; width: auto !important; float: left !important;
        margin-bottom: 12px;
    }
    :is(.mobile-sign, .mobile-project) .coordinate-map-link {
        width: auto !important; float: right !important; padding-top: 24px !important;
    }
    :is(.mobile-sign, .mobile-project) .maps-icon-button { min-width: 44px; min-height: 44px; justify-content: center; }
    :is(.mobile-sign, .mobile-project) .sign-attributes,
    :is(.mobile-sign, .mobile-project) .sign-attributes > tbody { display: block; width: 100%; }
    :is(.mobile-sign, .mobile-project) .sign-attributes tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    }
    :is(.mobile-sign, .mobile-project) .sign-attributes td { padding: 0; }
    :is(.mobile-sign, .mobile-project) .sign-attributes label {
        display: flex; align-items: center; gap: 8px; min-height: 44px;
        margin: 0; padding: 6px; box-sizing: border-box; border: 1px solid #ddd;
        border-radius: 5px; background: white; font-size: 14px;
        overflow-wrap: normal; word-break: normal;
    }
    :is(.mobile-sign, .mobile-project) .sign-attributes input { flex: 0 0 22px; margin: 0; }
    :is(.mobile-sign, .mobile-project) .form-style-10 label { color: #555; }
    :is(.mobile-sign, .mobile-project) #pictureInformation label { font-size: 12px; }
    :is(.mobile-sign, .mobile-project) #pictureInformation td { padding: 4px; overflow-wrap: normal; }
    :is(.mobile-sign, .mobile-project) #pictureInformation input[type=checkbox] { width: 22px; height: 22px; }
    :is(.mobile-sign, .mobile-project) #Comments, :is(.mobile-sign, .mobile-project) #ActionComment { min-height: 130px; height: 130px !important; }
    :is(.mobile-sign, .mobile-project) #Actions { min-height: 140px; max-height: 220px; overflow: auto; }
    :is(.mobile-sign, .mobile-project) #siblingstepper { font-size: 12px; }
    :is(.mobile-sign, .mobile-project) #pictureViewerDelete { min-width: 32px; min-height: 32px; padding: 2px !important; }
}
@media screen and (min-width: 560px) and (max-width: 800px) {
    :is(.mobile-sign, .mobile-project) .sign-attributes tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 800px) {
    button.mobile-tree-toggle:not([hidden]) { display: flex !important; text-shadow: none !important; }
    body:is(.mobile-project, .mobile-todo, .mobile-route) { margin: 0; padding: 8px; }
    :is(.mobile-project, .mobile-todo) .form-style-10 {
        width: 100% !important; box-sizing: border-box; padding: 12px; margin: 16px auto;
    }
    .mobile-todo .form-style-10 h1 { margin: -12px -12px 16px; padding: 12px; font-size: 22px; }
    .mobile-todo .inner-wrap { padding: 10px; }
    :is(.mobile-project, .mobile-todo) .mobile-layout,
    :is(.mobile-project, .mobile-todo) .mobile-layout > tbody,
    :is(.mobile-project, .mobile-todo) .mobile-layout > tbody > tr,
    :is(.mobile-project, .mobile-todo) .mobile-layout > tbody > tr > td {
        display: block; width: 100% !important; box-sizing: border-box; padding: 0;
    }
    .mobile-project .inner-wrap > div { float: none !important; width: 100% !important; }
    :is(.mobile-project, .mobile-todo) #map { width: 100% !important; height: 300px !important; box-sizing: border-box; margin-bottom: 12px; }
    :is(.mobile-project, .mobile-todo, .mobile-route) input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
    :is(.mobile-project, .mobile-todo, .mobile-route) select,
    :is(.mobile-project, .mobile-todo, .mobile-route) textarea {
        font-size: 16px !important; min-height: 44px; max-width: 100%; box-sizing: border-box;
    }
    :is(.mobile-project, .mobile-todo, .mobile-route) input[type=checkbox] { width: 22px; height: 22px; vertical-align: middle; }
    :is(.mobile-project, .mobile-todo) .listbox { max-height: 45dvh; min-height: 150px; overflow: auto; }
    :is(.mobile-project, .mobile-todo) .listbox > div { min-height: 44px; box-sizing: border-box; padding-top: 6px; padding-bottom: 6px; }
    .mobile-project .knapp, .mobile-project .knappInactive { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
    .mobile-todo gmp-place-autocomplete { width: 100% !important; min-width: 0; box-sizing: border-box; }
    .mobile-todo .noPrint > table,
    .mobile-todo .noPrint > table > tbody,
    .mobile-todo .noPrint > table > tbody > tr,
    .mobile-todo .noPrint > table > tbody > tr > td { display: block; width: 100%; box-sizing: border-box; }
    .mobile-todo select[multiple] { min-height: 110px; }
    .mobile-todo #outputHTML { overflow-x: auto; }
    .mobile-route #routeTitle { width: 100%; margin-bottom: 12px; }
    .mobile-route #output > table,
    .mobile-route #output > table > tbody { display: block; width: 100%; }
    .mobile-route #output tr[id^=Skylt] {
        display: flex; flex-wrap: wrap; margin: 12px 0; padding: 12px;
        border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box;
    }
    .mobile-route #output tr[id^=Skylt] > td { width: 100%; box-sizing: border-box; padding: 6px 0; overflow-wrap: anywhere; }
    .mobile-route #output tr[id^=Skylt] > td:first-child { text-align: left !important; }
    .mobile-route .knapp { display: inline-block; min-height: 44px; min-width: 44px; }
}

/* Ruttens kartlänk har samma ikon som skyltredigeringen. */
.route-map-link { display: inline-flex; align-items: center; justify-content: center; }
@media screen and (max-width: 800px) {
    .mobile-route #output tr[id^=Skylt] {
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
        background: #fff; border: 1px solid #d9e2e6; padding: 14px;
        box-shadow: 0 2px 5px rgba(0,0,0,.06);
    }
    .mobile-route #output tr[id^=Skylt] > .route-description { order: 0; line-height: 1.5; }
    .mobile-route #output tr[id^=Skylt] > .route-tools {
        order: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
        border-bottom: 1px solid #eee; padding-bottom: 10px;
    }
    .mobile-route .route-tools > br { display: none; }
    .mobile-route .route-tools label { margin: 0; }
    .mobile-route .route-map-link { width: 44px; height: 44px; }
    .mobile-route #output tr[id^=Skylt] > .route-actions { order: 2; }
    .mobile-route .route-action-row {
        display: grid; grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid #eee;
    }
    .mobile-route .route-action-row:last-child { border-bottom: 0; }
    /* ID-selektorn fortsätter gälla när klarmarkeringen byter CSS-klass. */
    .mobile-route .route-action-row > a[id^=Action] {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; min-width: 40px; min-height: 40px;
        padding: 0 !important; margin: 0; box-sizing: border-box;
        font-size: 20px; line-height: 1; border-radius: 6px; text-shadow: none;
    }
    .mobile-route .route-action-text { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
    .mobile-route #output > table > tbody > tr:has(> .smallRow) { display: none; }
}

button.route-camera {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; width: 44px; height: 44px; margin: 0; padding: 0; font-size: 24px;
}
#routePhotoChoice { max-width: calc(100vw - 48px); border: 0; border-radius: 10px; padding: 20px; }
#routePhotoChoice::backdrop { background: rgba(0,0,0,.45); }
#routePhotoChoice button { min-height: 44px; width: 100%; margin: 8px 0; padding: 8px 12px; }
@media screen and (max-width: 800px) {
    .mobile-route #output tr[id^=Skylt] {
        grid-template-columns: minmax(0, 1fr) 96px; align-items: start;
    }
    .mobile-route #output tr[id^=Skylt].destinationInactive { background: #bfa; }
    .mobile-route #output tr[id^=Skylt] > .route-description { grid-column: 1; grid-row: 1; }
    .mobile-route #output tr[id^=Skylt] > .route-tools {
        grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 4px; border: 0; padding: 0;
    }
    .mobile-route .route-tools .Distance { order: 3; width: 100%; text-align: right; font-size: 12px; }
    .mobile-route #output tr[id^=Skylt] > .route-actions { grid-column: 1 / -1; }
}