/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./Style/site.css ***!
  \**********************************************************************************************/
[data-hidden="true"] {
    display: none !important;
}

.btn-toolbar-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-toolbar-add > .bi,
.btn-toolbar-add > .fa-solid {
    top: 0;
    font-size: 11px;
    margin-right: 0;
}

/* Sidenav collapse — när menyn är kollapsad på desktop ska sidans innehåll ta hela bredden.
   Ingen transition här: den triggades på route-byten även i EditorPublic och gjorde att
   RendererComponent mätte fel canvas-bredd under animeringen. Collapse-animationen av
   sidomenyn själv räcker visuellt. */
body.sidenav-collapsed #page-wrapper {
    margin-left: 0 !important;
}

/* Transition bara under själva toggle-handlingen (sätts i EditorSidenav/Sidenav-komponenten).
   Route-byten i EditorPublic triggas inte av denna klass → ingen oönskad animation. */
body.sidenav-transitioning #page-wrapper {
    transition: margin-left 500ms ease;
}

/* Global laddningsbar (loading-bar) — sidomenyn är position:fixed med z-index 1001 och dolde
   därför barens start. Låt den i stället börja där toppnavigeringen börjar när menyn är utfälld.
   :has() gör att regeln bara slår på sidor som faktiskt renderar en <sidenav>/<editor-sidenav>;
   publika vyer saknar meny och behåller full bredd. 250px speglar .sidenav-root i
   Sidenav.Component.css — ändras bredden där måste den ändras här också. */
body:has(.sidenav-root):not(.sidenav-collapsed) .global-loading-bar {
    left: 250px;
}

/* Följ med när menyn fälls in/ut, samma villkor som #page-wrapper ovan. */
body.sidenav-transitioning .global-loading-bar {
    transition: left 500ms ease;
}

/* Editorns notifikationsrad (.editor-notification-area, position: fixed) reserverar menyns 250px med
   padding-left - fäll in den med menyn. Proxyn (<editor-sidenav>) animerar sin bredd i samma takt så
   att RendererComponent.resize(), som körs varje bildruta under övergången, läser canvasens left mjukt. */
body.sidenav-collapsed .editor-notification-area {
    padding-left: 0;
}
body.sidenav-transitioning .editor-notification-area {
    transition: padding-left 500ms ease;
}
body.sidenav-transitioning .editor-sidenav-proxy {
    transition: width 500ms ease;
}

/* Mobilvy — sidomenyn sitter vid botten; content får padding-bottom så inget göms bakom menyn.
   Viewport-scrollbaren döljs så den inte syns bakom den fixa menyn (touch-scroll påverkas inte). */
@media (max-width: 767px) {
    #page-wrapper {
        margin-left: 0 !important;
        padding-bottom: 45vh;
    }
    body.sidenav-collapsed #page-wrapper {
        padding-bottom: 30px;
    }
    html {
        scrollbar-width: none;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

/* Mobil och surfplatta i stående läge (<992px, SidenavMobileSheet.MEDIA_QUERY): sidor med <sidenav>/<editor-sidenav>
   har en dockad menyrad i botten i stället för sidomenyn. EditorPublic (<sidemenu>) saknar .sidenav-root och
   berörs inte av något i det här blocket. */
@media (max-width: 991px) {
    /* Innehållet tar hela bredden (sidomenyn ligger som ark under raden) och reserverar bara radens höjd. */
    body:has(.sidenav-root) #page-wrapper,
    body.sidenav-collapsed:has(.sidenav-root) #page-wrapper {
        margin-left: 0 !important;
        border-left: 0;
        padding-bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom));
    }

    /* Editorns kontextark (EditorTouchContextSheet) ligger ovanför den dockade menyraden, inte över den:
       arkets förälder bildar egen stacking context, så z-index räcker inte — och raden ska synas ändå. */
    body:has(.sidenav-bar) editor-touch-contextsheet .tcs {
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom));
        padding-bottom: 0;
        max-height: calc(60vh - var(--sidenav-bar-height));
    }

    /* Editorns vyknappar (3D/2D/förstaperson/centrera/multiplayer) låg bottom: 20px — bakom menyraden
       (tidigare bakom halvskärmsmenyn). Lyft dem ovanför raden, och verktygsknapparna till vänster ovanför dem. */
    body:has(.sidenav-bar) .camera-mode-button-toolbar {
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom) + 10px);
        left: 50%;
        transform: translateX(-50%);
        /* left: 50% ger bara halva bredden att krympa i — utan max-content bryts raden i två */
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - 16px);
        justify-content: center;
    }

    /* Kompakt rad som ryms på en rad även på 360px: korta etiketter även för aktivt läge (markeringen räcker),
       fingervänlig höjd, och mindre luft före multiplayer (inline margin-left: 20px i mallen). */
    body:has(.sidenav-bar) .camera-mode-button-toolbar .btn {
        min-width: 40px;
        min-height: 40px;
    }

    body:has(.sidenav-bar) .camera-mode-button-toolbar .camera-mode-active .camera-mode-selected {
        display: none;
    }

    body:has(.sidenav-bar) .camera-mode-button-toolbar .camera-mode-active .camera-mode-not-selected {
        display: inline;
    }

    body:has(.sidenav-bar) .camera-mode-button-toolbar .btn[style*="margin-left"] {
        margin-left: 8px !important;
    }

    body:has(.sidenav-bar) .editor-side-tools {
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom) + 60px);
    }

    /* Editorns dialoger (.fullscreen-container-menu) ligger inne i #page-wrapper, som är position: fixed på mobil och
       därmed en egen stacking context under toppraden — överkanten hamnade bakom toppmenyn. Låt dem fylla ytan
       mellan toppraden och menyraden i stället, så att båda menyerna syns. Samma mått som egenskapspanelen
       (--part-panel-top/-bottom sätts på #page-wrapper av Editor.Component.updatePartPanelInsets). */
    /* Samma sak på övriga sidor med menyrad (t.ex. Skapa projekt): dialogen hamnade under toppraden. Här finns inga
       uppmätta mått, så toppradens höjd (50px, satt av _Layout.cshtml) används — 0 när toppmenyn är dold. */
    body:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu {
        top: 50px;
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom)) !important;
    }

    body.editor-topmenu-hidden:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu {
        top: 0;
    }

    /* Toppmenyns dölj-pil (.toggle-topmenu) låg ovanpå dialogens bakgrund. */
    body:has(.sidenav-bar):has(#page-wrapper .fullscreen-container-menu) .toggle-topmenu {
        display: none;
    }

    body:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu .inner-container {
        width: calc(100% - 24px);
        margin: 12px auto;
        padding: 16px;
        border-radius: 14px;
    }

    body:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu .inner-container h1 {
        font-size: 20px;
        font-weight: 600;
    }

    /* <app-dialog>: luften sitter i rubrik och innehåll, inte i rutan. */
    body:has(.sidenav-bar) #page-wrapper .fullscreen-container-menu .inner-container.app-dialog {
        padding: 0;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }

    body:has(.editor-sidenav-bar) #page-wrapper .fullscreen-container-menu {
        top: var(--part-panel-top, 0px);
        /* !important: den gamla mobilregeln .fullscreen-container-menu { bottom: 0% !important } */
        bottom: var(--part-panel-bottom, 0px) !important;
    }

    /* Rumsplaneraren (FloorPlanner) täckte hela skärmen — dess egen knapprad (Klar, Avbryt, ångra) hamnade under
       toppraden och hjälpknappen under menyraden, så att man inte kunde spara. Samma yta som dialogerna ovan. */
    body:has(.editor-sidenav-bar) #page-wrapper .floor-planner-overlay {
        top: var(--part-panel-top, 0px);
        bottom: var(--part-panel-bottom, 0px);
    }

    /* Sidan bakom det öppna menyarket ska inte scrolla */
    body.sidenav-sheet-open {
        overflow: hidden;
    }

    /* Menyn sitter vid botten i mobilvy och täcker inte längre vänsterkanten. */
    body:has(.sidenav-root):not(.sidenav-collapsed) .global-loading-bar {
        left: 0;
    }
    html:has(.sidenav-root) {
        scrollbar-width: none;
    }
    html:has(.sidenav-root)::-webkit-scrollbar,
    body:has(.sidenav-root)::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

/* Titelraden i gallery-card (Gallery.Card.Template.html) — hade tidigare col-xs-12 enbart för bredd och indrag */
.card-title-row {
    position: relative;
    float: left;
    width: 100%;
    min-height: 1px;
    padding: 0 15px;
}

:root {
    /* Höjd på mobilens dockade menyrad (Sidenav.Component.css) */
    --sidenav-bar-height: 56px;
}

#page-wrapper {
    border-left: none !important;
}

.public-start #page-wrapper {
    margin-left: 0;
    padding-left: 50px;
    padding-right: 50px;
    bottom: 0;
    padding-bottom: 115px;
    position: relative;
    background-color: #fff !important;
}

.text-validation {
    color: #a94442;
    margin-top: 3px;
    margin-left: 3px;
}

.bottom-buffer {
    margin-bottom: 10px;
}

.top-buffer {
    margin-top: 10px;
}

.first-person-aim {
    position: absolute;
    z-index: 1;
    /* Samma storlek som den tidigare fa-lg */
    font-size: 1.333em;
}

.tooltip-icon {
    font-weight: bold;
    background: #202e48;
    color: white;
    font-size: 11px;
    border-radius: 30px;
    width: 16px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    bottom: -2px;
    position: relative;
    float: right;
}

.tooltip-container {
    position: absolute;
    right: 8px;
    top: 50%;
    height: 0;
    margin-top: -12px;
}

.image-button .tooltip-icon {
    bottom: auto;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    padding: 2px;
    font-size: 16px;
}

.full-width .tooltip-icon {
    position: absolute;
    top: 11px;
    bottom: auto;
    right: 57px;
}

.ui-datepicker .ui-state-default {
    background-color: #cfcfcf !important;
}

.ui-tooltip {
    z-index: 999999;
    white-space: pre-line;
    max-width: 500px;
}

.property-check {
    position: absolute;
    top: 12px;
    right: 17px;
}

.panel-heading-btn {
    position: absolute;
    top: 1px;
    cursor: pointer;
}

/* Hörnknapparna (ta bort, kopiera) är <button>: utan knappens egen ram, bakgrund och typsnitt. :where() håller
   specificiteten på en klass, så att .project-close-btn m.fl. längre ned fortfarande sätter färg och storlek. */
:where(button).panel-heading-btn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
}

.panel-heading-close-btn {
    right: 20px;
}

.panel-heading-send-btn {
    right: 16px;
    color: inherit;
}

.panel-heading-send-btn i {
    position: relative;
}

canvas.renderer-canvas {
    position: fixed;
    top: 0;
    bottom: 0;
    outline: none;
}

.hovered-option {
    color: white;
}

.navbar {
    margin-bottom: 0;
}

.navbar-static-top .nav>li>a:focus,
.navbar-static-top .nav>li>a:hover {
    color: #888;
    text-shadow: none;
}

.nav li a {
    cursor: pointer;
}

.navbar-top-links {
    margin-right: 0 !important;
}

.navbar-top-links .ms-auto li {
    display: inline-block !important;
}

.navbar-top-links li a {
    padding: 15px !important;
}
.navbar-top-links.project-info li a {
    padding: 0 !important;
}

.navbar-top-links.project-info {
    margin-left: 300px; 

}
/* Header dropdowns must stay clickable above fixed overlays like the editor's IFS/AI button
   stack (z-index 1002/1003), the AI configurator panel (1003) and the global AI assistant panel
   (9999). A z-index on the .dropdown-menu itself does NOT work: Bootstrap's .navbar is
   position: relative and a rule further down forces .navbar-static-top to z-index: 1 !important, so the
   whole navbar is one stacking context painted at layer 1 — nothing inside it can escape. Instead,
   raise the navbar's own stacking context only while one of its dropdowns is open (BS5 marks the
   open menu with .show; BS3 used .open on the .dropdown). 10000 clears
   the AI panels but stays below loading/message overlays (99999+). !important + the higher
   specificity of :has() are both needed to beat that !important. */
.navbar-static-top:has(.dropdown-menu.show) {
    z-index: 10000 !important;
}

/* The navbar's background is opaque and full-width, so raising it to 10000 would otherwise paint
   over the dark-blue side nav (.sidenav-root, z1001) and the notification row's bells/project info
   (z1). Lift both to the SAME 10000 while a navbar dropdown is open — they sit later in the DOM
   than the navbar, so at an equal z-index they win the tie and stay visible. The open dropdown is
   on the far right, clear of the (left) side nav and the (left/centre) notification content, so
   nothing is obscured. */
body:has(.navbar-static-top .dropdown-menu.show) .sidenav-root,
body:has(.navbar-static-top .dropdown-menu.show) .editor-notification-area,
.editor-notification-area:has(.dropdown-menu.show) {
    z-index: 10000;
}

/* Same stacking-context trap for the editor's notification row (project info/revision dropdowns):
   it's position: fixed with z-index: 1, so its open dropdowns would also paint under the editor's
   fixed overlays. */
/* toggleTopMenu() (Pages/_Layout.cshtml) collapses the global top menu and toggles
   `body.editor-topmenu-hidden`. The Editor's fixed overlays (AI configurator panel + IFS/AI button
   stack) are positioned from a --editor-topbar-height custom property (defined ~56px in
   Editor.Template.html); when the menu is hidden they should hug the viewport top instead of
   leaving a gap. This override MUST live here in the global stylesheet, not in Editor.Template.html:
   that template's \3c style> is Angular view-encapsulated, so a `body` selector there gets a
   [_ngcontent-…] attribute appended and never matches the (out-of-view) <body>. Replaces the old
   $('.request-offer').css('top') hack, dead since the buttons moved into a position:static flex
   stack. Custom properties aren't scoped by encapsulation, so setting it from here on #page-wrapper
   cascades into the panel/stack normally. */
body.editor-topmenu-hidden #page-wrapper {
    --editor-topbar-height: 0px;
}

/* Toppraden på mobil och surfplatta (<992px, App.Template.html): sidans <page-header> ritas här i stället för
   som en egen rad på sidan — rubrik, tillbaka-pil och åtgärderna som runda ikonknappar. Knapparnas text döljs
   (font-size: 0 tar även nakna textnoder); title-attributet bär etiketten. */
.app-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding-left: 16px;
}

.app-bar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border-radius: 50%;
    color: inherit;
    font-size: 20px;
    text-decoration: none;
}

.app-bar__back:hover,
.app-bar__back:active {
    background-color: rgba(0, 0, 0, 0.06);
    color: inherit;
}

/* Rubriken krymper bara vid behov, så att sidans åtgärder ligger direkt efter den (de hör till sidan, inte till
   användarmenyn längst till höger). */
.app-bar__title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-bar__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
    margin-left: 4px;
}

/* Samma storlek som profilbilden bredvid (30px, .profile-image), helt rund och utan ram. Träffytan är ändå 40px
   (::before), så knappen går lätt att träffa med tummen. */
.app-bar__actions .btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    font-size: 0;
    line-height: 1;
}

.app-bar__actions .btn::before {
    content: '';
    position: absolute;
    inset: -5px;
}

.app-bar__actions .btn > i {
    margin: 0 !important;
    font-size: 14px;
    line-height: 1;
}

/* Stängknappen i BootstrapDialog (App/Services/BootstrapDialog.ts): rund ikonknapp till höger i den vita rubrikraden
   (rubrikens layout i _app-components.scss). Ikonen bi-x-lg tvingas annars vit av themes.css — därav !important nedan. */
.bootstrap-dialog .bootstrap-dialog-close-button {
    margin: -6px -8px -6px 0;
}

.bootstrap-dialog .bootstrap-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #555;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.bootstrap-dialog .bootstrap-dialog-close .bi-x-lg {
    color: inherit !important;
}

.bootstrap-dialog .bootstrap-dialog-close:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

.bootstrap-dialog .bootstrap-dialog-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem var(--app-focus-ring);
}

/* Standardavataren (användare utan bild) är en vit SVG och syntes knappt mot kortens och toppradens ljusgrå
   bakgrund. SVG:n används som mask och fylls med temats primärfärg; bildens egna vita pixlar flyttas ur sikte
   (object-position), så att bara den färgade bakgrunden syns genom masken. */
img[src$="/images/svg/rounduser-icon.svg"] {
    background-color: var(--primary-color, #202e48);
    object-position: -99999px 0;
    -webkit-mask: url('/images/svg/rounduser-icon.svg') center / contain no-repeat;
    mask: url('/images/svg/rounduser-icon.svg') center / contain no-repeat;
}

/* De publika sidorna (PublicStart, EditorPublic) har en mörk toppmeny i temafärg — där är avataren ljus. */
.public-configurator .navbar-static-top img[src$="/images/svg/rounduser-icon.svg"] {
    background-color: var(--icon-color, #fff);
}

/* Dynamiskt objekt (Addo3DObject.Form.Template.html): formuläret tar hela bredden i stället för att ligga i
   .info-row:s 15 % indrag (längre ned). Mobilen har inget indrag — där nollas marginalen (Style/mobile.css). */
.dynamic-object-outdent {
    margin-left: -18.5%;
}

/* Undermenyer i toppradens dropdowns (tema, språk): hover på desktop, utfällda med ett tryck (.open) överallt. */
.dropdown-submenu.open > .dropdown-menu {
    display: block;
}

@media (max-width: 991px) {
    /* Toppradens länkar (flagga, profilbild) centrerade i radens höjd — med bara padding hamnade flaggan 5px för högt. */
    .navbar-static-top .navbar-top-links > li > a {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 12px !important;
    }

    .navbar-static-top .navbar-top-links .fa-caret-down,
    .navbar-static-top .navbar-top-links .dropdown-toggle > .bi-chevron-down {
        margin-left: 6px;
    }

    /* Undermenyerna fälls ut på plats i stället för att flyga ut åt vänster (utanför skärmen på en telefon). */
    .navbar-top-links .dropdown-submenu > .dropdown-menu {
        position: static;
        float: none;
        min-width: 0;
        margin: 0;
        padding: 0 0 4px 16px;
        border: 0;
        box-shadow: none;
    }

    .navbar-top-links .dropdown-submenu:not(.open):hover > .dropdown-menu,
    .dropdown-submenu__flyout-arrow {
        display: none;
    }

    .navbar-top-links .dropdown-menu .dropdown-item {
        min-height: 40px !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

.navbar-top-links .dropdown-menu li {
    display: block !important;
}

.navbar-top-links .dropdown-menu li a,
.navbar-top-links .dropdown-menu li > button.dropdown-item {
    padding: 3px 20px !important;
    min-height: 0 !important;
}


#page-wrapper form .form-control.ng-invalid,
#page-wrapper form .form-control.ng-invalid:focus,
#page-wrapper [data-form] .form-control.ng-invalid,
#page-wrapper [data-form] .form-control.ng-invalid:focus,
.fullscreen-container-menu form .form-control.ng-invalid,
.fullscreen-container-menu form .form-control.ng-invalid:focus,
.public-configurator .form-control.ng-invalid,
.public-configurator .form-control.ng-invalid:focus,
.public-configurator .form-control.forced-invalid {
    border-left: 4px solid #a94442 !important;
    /* red */
}

.button-table tr td:last-child {
    text-align: right;
}

.button-table td,
.button-table a:has(i) {
    vertical-align: middle !important;
}

.button-table .btn {
    margin-right: 2px;
}

.fading-message {
    display: inline-table !important;
    margin: 20px auto;
    width: 600px;
    /* BS5:s .modal har bara left: 0 (BS3 hade även right: 0) — utan right centrerar margin: auto inte */
    right: 0;
    /* Modalens omslag täcker hela skärmen och fångade mushjul och klick - sidan bakom ska gå att använda
       medan meddelandet visas (fadingMessage öppnas icke-modalt, se BootstrapDialog.ts) */
    pointer-events: none;
}

.fading-message .modal-dialog {
    margin: 0;
    /* Själva rutan går att klicka i (t.ex. stängknappen när showTimer = -1) */
    pointer-events: auto;
}

.confirm-dialog,
.buttonaction-dialog {
    z-index: 999999 !important;
}

.buttonaction-dialog .modal-footer {
    text-align: right;
}

/* Varianten med valknapparna i dialogens body (se actionMessage(..., buttonsInBody: true) i
   Message.Service.ts) - exportdialogen har för många formatval för att se bra ut på en
   footer-rad, så de läggs i stället i en kolumn under meddelandetexten. Cancel-knappen ligger
   kvar i footern som vanligt (den saknar en egen action och hamnar automatiskt kvar där). */
.buttonaction-body-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
}

.buttonaction-body-buttons .btn {
    margin: 0;
}

/* Avbryt-knappen (ingen cssClass) renderas som btn-default - en liten extra marginal skiljer
   den visuellt från kolumnen med formatval i stället för att den smälter in i samma grupp. */
.buttonaction-body-buttons .btn-default {
    margin-top: 8px;
}

.menu-checkbox {
    margin-top: 4px;
    margin-bottom: 8px;
}

.menu-checkbox input[type='checkbox'] {
    top: 1px;
    position: relative;
    margin-right: 5px;
    cursor: pointer;
}

.menu-checkbox label {
    margin-bottom: 0;
    cursor: pointer;
}

input.form-control.quantity-input {
    display: inline;
    width: 38px;
    height: 14px;
    font-size: 12px;
    float: right;
    padding: 0 5px;
    margin-top: 3px;
    line-height: 14px;
}

.nav>li>a:focus,
.nav>li>a:hover {
    background-color: transparent;
}

.quantity-container {
    font-size: 12px;
    line-height: 20px;
}

@media (min-width: 768px) {
    .sidebar {
        margin-top: 0;
    }
}

/** Load fullscreen **/
.fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    overflow-y: auto;
}

.fullscreen-container .inner-container {
    margin: 50px auto 0 auto;
    display: table;
    font-size: 26pt;
    color: #FFF;
    text-shadow: 2px 2px #000;
}

.fullscreen-container .inner-container .bi-arrow-repeat {
    top: 8px;
    left: 10px;
    text-shadow: none;
    font-size: 30px;
}

/** Element-specific loading (SPA-friendly) **/
.element-loading-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.element-loading-inner {
    text-align: center;
}

.element-loading-spinner {
    font-size: 32px;
    color: #337ab7;
    margin-bottom: 10px;
}

.element-loading-spinner .bi-arrow-repeat {
    display: inline-block;
}

.element-loading-message {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.icon-spin {
    /* transform (rotationen) verkar inte på inline-element — utan detta snurrade ikonen bara i flexbehållare */
    display: inline-block;
    animation: rotate .8s infinite linear;

    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

/* VR-ikonen (bi-headset-vr) i samma storlek som den tidigare fa-3x */
#VRButton .bi {
    font-size: 3em;
}

#VRButton {
    bottom: -123px !important;
    left: auto !important;
    right: 14px !important;
    position: absolute !important;
    width: 70px !important;
    padding: 5px !important;
    border: 1px solid !important;
    border-radius: 5px !important;
    background: white !important;
    color: #565656 !important;
    text-align: center;
    opacity: 20 !important;
    outline: none !important;
    z-index: 0 !important;
    cursor: auto !important;
    pointer-events: auto;
}

canvas.a-canvas {
    position: fixed;
}

.rs-base {
    left: 250px !important;
    top: 50px !important;
}

.icon {
    position: absolute;
    left: 18px;
    top: 9px;
    font-size: 20px;
    color: black;
}


@keyframes rotate {
    0% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

/** Load fullscreen **/


/** Menu fullscreen **/
.fullscreen-container-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    z-index: 1010;
    overflow: auto;
}

.fullscreen-container-menu .inner-container {
    background-color: white;
    margin: 20px auto;
    width: 90%;
    border-radius: 5px;
    padding: 20px;
}

.fullscreen-container-menu .inner-container h1 {
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
}

/* <app-dialog> (App/Directives/Dialog): appens dialogskal — samma utseende som BootstrapDialog (vit, 4px rand i temats
   färg överst, rubrikrad med stäng-kryss, knapprad nederst). Storlekar sm/md/lg/xl som BS5:s modal. */
.fullscreen-container-menu .inner-container.app-dialog {
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    max-width: 900px;
    margin: 40px auto;
    padding: 0;
    border-top: 4px solid var(--app-primary, #202e48);
    border-radius: var(--bs-border-radius-lg, 8px);
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.18);
}

/* Storlekarna måste vara minst lika specifika som grundregeln ovan (.fullscreen-container-menu .inner-container.app-dialog,
   max-width 900px) — annars blev alla dialoger 900px oavsett size. */
.fullscreen-container-menu .inner-container.app-dialog--sm { max-width: 400px; }
.fullscreen-container-menu .inner-container.app-dialog--md { max-width: 600px; }
.fullscreen-container-menu .inner-container.app-dialog--lg { max-width: 900px; }
.fullscreen-container-menu .inner-container.app-dialog--xl { max-width: 1200px; }

.app-dialog__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.app-dialog__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.app-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #555;
    font-size: 15px;
    cursor: pointer;
}

.app-dialog__close .bi-x-lg {
    color: inherit !important;
}

.app-dialog__close:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

.app-dialog__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem var(--app-focus-ring);
}

.app-dialog__body {
    padding: 16px;
}

/* Knappraden: sist i innehållet (kan ligga inne i ett <form>), över hela dialogens bredd. */
.app-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 16px -16px -16px;
    padding: 12px 16px;
    /* Vit med samma avdelare som BootstrapDialog (.modal-footer), så att båda dialogsorterna ser likadana ut. */
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background-color: #fff;
    border-bottom-left-radius: var(--bs-border-radius-lg, 8px);
    border-bottom-right-radius: var(--bs-border-radius-lg, 8px);
}

/* Sekundära åtgärder till vänster i knappraden (t.ex. Exportera). */
.app-dialog__footer > .app-dialog__footer-start {
    margin-right: auto;
}

/* Toast (App/Services/Toast.ts, via MessageService.fadingMessage): nedre högra hörnet, rand i signalfärg till vänster.
   På mobil ovanför menyraden. */
.app-toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

body:has(.sidenav-bar) .app-toasts {
    bottom: calc(var(--sidenav-bar-height, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
}

.app-toast {
    --app-toast-accent: var(--app-primary, #202e48);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 360px;
    max-width: 100%;
    padding: 12px 12px 12px 14px;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 4px solid var(--app-toast-accent);
    border-radius: var(--bs-border-radius-lg, 8px);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
    color: #333;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.app-toast--visible {
    opacity: 1;
    transform: none;
}

.app-toast--success { --app-toast-accent: #198754; }
.app-toast--warning { --app-toast-accent: #f0ad4e; }
.app-toast--danger { --app-toast-accent: #d9534f; }

.app-toast__icon {
    flex: none;
    margin-top: 1px;
    font-size: 18px;
    color: var(--app-toast-accent);
}

.app-toast__content {
    flex: 1 1 auto;
    min-width: 0;
}

.app-toast__title {
    font-weight: 700;
}

.app-toast__message {
    margin-top: 2px;
    color: #555;
}

.app-toast__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #777;
    font-size: 12px;
    cursor: pointer;
}

.app-toast__close .bi-x-lg {
    color: inherit !important;
}

.app-toast__close:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

@media (prefers-reduced-motion: reduce) {
    .app-toast {
        transition: none;
    }
}

/** Del-trädets meny (vänsterklick på ett objekt i 3D-vyn, App/Directives/Editor.ContextMenu) **/
/* Samma utseende som appens övriga menyer: vit panel med --app-menu-*, rader med rundade hörn och grå hover.
   Undermenyn öppnas under raden och lite indragen (ovanför om den inte får plats), så att man går nedåt i trädet med
   korta musrörelser, och står kvar tills man hovrar en annan del på samma nivå. Åtgärderna är en liten ikonrad till
   höger om den rad musen står på (till vänster om den inte får plats) — placeSubmenu i direktivet. */
/* z-index: över editorns fasta paneler — egenskapspanelen och AI-konfiguratorn (1003), AI-assistenten (9999) — men
   under meddelande- och laddningslagren (99999+). Undermenyer och åtgärdsrad staplas inuti den här. */
ul.context-menu {
    position: fixed;
    z-index: 10001;
    min-width: 140px;
    margin: 0;
    padding: 4px;
    list-style-type: none;
    left: 340px;
    top: 100px;
    white-space: nowrap;
    font-size: 14px;
    color: var(--bs-body-color);
    background: #fff;
    border: 1px solid var(--app-menu-border);
    border-radius: var(--app-menu-radius);
    box-shadow: var(--app-menu-shadow);
}

ul.context-menu li {
    position: relative;
    border-radius: var(--bs-border-radius);
    cursor: pointer;
}

ul.context-menu li:hover,
ul.context-menu li.open {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

.context-menu-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 2px 8px 2px 10px;
}

.context-menu-text {
    flex: 1 1 auto;
}

.context-menu-chevron {
    flex: none;
    font-size: 11px;
    color: var(--bs-secondary-color);
}

/* Undermeny: direkt under raden, indragen 16px per nivå. Den täcker raderna under — de nås igen när man lämnar
   grenen via en rad ovanför, eller hovrar en synlig rad på samma nivå. */
ul.context-menu .context-menu-sub > ul.context-menu {
    position: absolute;
    left: 16px;
    top: calc(100% - 2px);
    z-index: 1003;
}

/* Går den utanför till höger: rakt ned utan indrag. */
ul.context-menu li.context-menu-straight > .context-menu-sub > ul.context-menu {
    left: 0;
}

ul.context-menu li.context-menu-up > .context-menu-sub > ul.context-menu {
    top: auto;
    bottom: calc(100% - 2px);
}

ul.context-menu li.context-menu-up > .context-menu-row > .context-menu-chevron {
    transform: rotate(180deg);
}

/* Åtgärdsraden: en egen liten meny bredvid raden. ::before är en genomskinlig brygga över glipan, så att musen inte
   lämnar raden på vägen dit. Den ligger under undermenyerna (z-index lägre än deras 1003), så att den aldrig täcker
   nästa nivås delar. */
.context-menu-buttons {
    position: absolute;
    top: 50%;
    left: 100%;
    z-index: 1002;
    display: flex;
    gap: 2px;
    padding: 3px;
    margin-left: 8px;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid var(--app-menu-border);
    border-radius: var(--app-menu-radius);
    box-shadow: var(--app-menu-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.context-menu-buttons::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 10px;
}

.context-menu-buttons.last-hovered {
    opacity: 1;
    pointer-events: auto;
}

ul.context-menu li.context-menu-flip > .context-menu-row > .context-menu-buttons {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
}

ul.context-menu li.context-menu-flip > .context-menu-row > .context-menu-buttons::before {
    right: auto;
    left: 100%;
}

/* Får den inte plats till höger: ovanför raden, i linje med radens högerkant. */
ul.context-menu li.context-menu-actions-above > .context-menu-row > .context-menu-buttons {
    top: auto;
    bottom: 100%;
    left: auto;
    right: 0;
    margin: 0 0 6px;
    transform: none;
}

ul.context-menu li.context-menu-actions-above > .context-menu-row > .context-menu-buttons::before {
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 8px;
}

/* Egen klass (inte .listview-icons, som themes.css färgar i temats primärfärg): diskreta ikonknappar. */
.context-menu button.context-menu-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius);
    background: transparent;
    color: var(--bs-secondary-color);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
}

.context-menu button.context-menu-action:hover {
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color);
}

.context-menu button.context-menu-action:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--app-focus-ring);
}

/* Den globala .bi-trash/.bi-check-lg { font-size: 12px } ska inte göra en ikon större eller mindre än de andra. */
.context-menu button.context-menu-action > .bi {
    font-size: inherit;
    margin: 0;
}

/** Object context menu (right-click menu for objects on floors/walls) **/

.object-context-menu {
    position: fixed;
    background: #fff;
    color: #1a253a;
    border: 1px solid var(--app-menu-border);
    border-radius: var(--app-menu-radius);
    box-shadow: var(--app-menu-shadow);
    min-width: 160px;
    max-width: 240px;
    font-size: 12px;
    z-index: 999999;
    user-select: none;
    visibility: hidden;
}

.object-context-menu[data-positioned="true"] {
    visibility: visible;
}

.object-context-menu .ocm-header {
    padding: 5px 10px;
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid #e5e8ee;
    background: #f5f7fa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.object-context-menu .ocm-section {
    list-style: none;
    margin: 0;
    padding: 2px 0;
    border-bottom: 1px solid #e5e8ee;
}

.object-context-menu .ocm-section:last-child {
    border-bottom: none;
}

.object-context-menu .ocm-row {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    line-height: 18px;
}

.object-context-menu .ocm-row:hover,
.object-context-menu .ocm-row.hovered {
    background: #1a253a;
    color: #fff;
}

.object-context-menu .ocm-icon,
.object-context-menu .ocm-icon.fa-box,
.object-context-menu .ocm-icon.fa-camera {
    width: 14px;
    text-align: center;
    margin-right: 8px;
    font-size: 11px;
    color: inherit !important;
}

.object-context-menu .ocm-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.object-context-menu .ocm-chevron {
    margin-left: 6px;
    font-size: 9px;
    opacity: 0.6;
}

/* Chevron direction mirrors submenu flip. Direct child scope so nested submenus don't inherit. */
editor-object-contextmenu-submenu.ocm-flip-left > ul.object-context-menu-sub > li > .ocm-chevron {
    transform: scaleX(-1);
}

.object-context-menu .ocm-ellipsis-trigger {
    display: none;
    margin-left: 6px;
    padding: 0 4px;
    font-size: 12px;
    opacity: 0.8;
    cursor: pointer;
    position: relative;
}

.object-context-menu .ocm-row-child:hover .ocm-ellipsis-trigger,
.object-context-menu .ocm-row-child.hovered .ocm-ellipsis-trigger,
.object-context-menu .ocm-ellipsis-trigger.hovered {
    display: inline-block;
}

.object-context-menu .ocm-ellipsis-trigger:hover {
    opacity: 1;
}

.object-context-menu .ocm-actions-popover {
    position: absolute;
    left: 100%;
    top: -3px;
    margin-left: 1px;
    list-style: none;
    padding: 2px 0;
    background: #fff;
    color: #1a253a;
    border: 1px solid #d0d4db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    font-size: 12px;
    z-index: 1000001;
}

.object-context-menu .ocm-actions-popover[data-hidden="true"] {
    display: none;
}

.object-context-menu .ocm-actions-popover.ocm-flip-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 1px;
}

.object-context-menu .ocm-actions-popover.ocm-flip-up {
    top: auto;
    bottom: -3px;
}

.object-context-menu .ocm-actions-popover::before,
.object-context-menu .ocm-actions-popover::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.object-context-menu .ocm-actions-popover::before {
    left: -8px;
    border-right: 7px solid rgba(0, 0, 0, 0.25);
}

.object-context-menu .ocm-actions-popover::after {
    left: -6px;
    border-right: 6px solid #fff;
}

.object-context-menu .ocm-actions-popover.ocm-flip-left::before {
    left: auto;
    right: -8px;
    border-right: none;
    border-left: 7px solid rgba(0, 0, 0, 0.25);
}

.object-context-menu .ocm-actions-popover.ocm-flip-left::after {
    left: auto;
    right: -6px;
    border-right: none;
    border-left: 6px solid #fff;
}

.object-context-menu .ocm-actions-popover.ocm-flip-up::before,
.object-context-menu .ocm-actions-popover.ocm-flip-up::after {
    top: auto;
    bottom: 8px;
}

.object-context-menu.object-context-menu-sub {
    position: static;
    display: block;
    visibility: visible;
    padding: 2px 0;
}

editor-object-contextmenu-submenu.ocm-submenu {
    position: absolute;
    left: 100%;
    top: -3px;
    margin-left: 1px;
    z-index: 1000000;
}

editor-object-contextmenu-submenu.ocm-submenu[data-hidden="true"] {
    display: none;
}

editor-object-contextmenu-submenu.ocm-submenu.ocm-flip-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 1px;
}

editor-object-contextmenu-submenu.ocm-submenu.ocm-flip-up {
    top: auto;
    bottom: -3px;
}

ul.object-context-menu.object-context-menu-sub {
    list-style: none;
    margin: 0;
    padding: 2px 0;
    background: #fff;
    color: #1a253a;
    border: 1px solid #b8bdc7;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
    min-width: 160px;
    max-width: 240px;
    font-size: 12px;
}

/* Arrow indicator pointing back to parent row */
ul.object-context-menu.object-context-menu-sub::before,
ul.object-context-menu.object-context-menu-sub::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

ul.object-context-menu.object-context-menu-sub::before {
    left: -8px;
    border-right: 7px solid rgba(0, 0, 0, 0.25);
}

ul.object-context-menu.object-context-menu-sub::after {
    left: -6px;
    border-right: 6px solid #fff;
}

/* Flipped left: arrow on right edge, points right. Use direct child so nested submenus don't inherit the flip. */
editor-object-contextmenu-submenu.ocm-flip-left > ul.object-context-menu-sub::before {
    left: auto;
    right: -8px;
    border-right: none;
    border-left: 7px solid rgba(0, 0, 0, 0.25);
}

editor-object-contextmenu-submenu.ocm-flip-left > ul.object-context-menu-sub::after {
    left: auto;
    right: -6px;
    border-right: none;
    border-left: 6px solid #fff;
}

/* Flipped up: arrow at bottom (parent row is below the opened-upward menu) */
editor-object-contextmenu-submenu.ocm-flip-up > ul.object-context-menu-sub::before,
editor-object-contextmenu-submenu.ocm-flip-up > ul.object-context-menu-sub::after {
    top: auto;
    bottom: 8px;
}

/* Combobox (App/Directives/Combobox): ser ut som ett select-fält. Utan värde ritar form-select pilen och en genomskinlig
   knapp över pilen öppnar listan; med värde visas en diskret rensa-knapp inne i fältet (som autocomplete). */
.combobox-field {
    position: relative;
}

.combobox-field > .combobox-input:has(~ .combobox-clear) {
    padding-right: 40px;
}

.combobox-field > .combobox-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.combobox-field > .combobox-toggle:disabled {
    cursor: default;
}

.combobox-field > .combobox-clear {
    position: absolute;
    top: 50%;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 12px;
    transform: translateY(-50%);
    cursor: pointer;
}

.combobox-field > .combobox-clear:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.combobox-field > .combobox-clear:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--app-focus-ring);
}

.combobox-list {
    list-style-type: none;
    padding: 0;
    position: absolute;
    background: #fff;
    
    z-index: 900;
    border-radius: var(--app-menu-radius);
    box-shadow: var(--app-menu-shadow);
    border: 1px solid var(--app-menu-border);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(75vh - 50px);
}

/* Listan positioneras av ComboboxDirective i viewport-koordinater. position: fixed gör att den
   inte klipps av scrollande föräldrar (t.ex. dialogkroppar med overflow), vilket annars gömmer
   alternativen helt när fältet sitter i en låg container. */
.combobox-list.combobox-list--floating {
    position: fixed;
}

.combobox-list li {
    padding: 5px 12px;
    cursor: pointer;
}

.right-buffer {
    margin-right: 15px;
}

.left-buffer {
    margin-left: 5px;
}

.card h3 {
    margin: 0;
}

.card h4 {
    margin: 0;
    margin-bottom: 5px;
}

.flexbox {
    display: flex;

    flex-wrap: wrap;
}

.flexitem {
    display: flex;
}

/* Kortrutnätet: korten har 10px luft runt sig (.panel-flex-items), så raden dras ut 10px — inte BS:s 15px — och
   kortens kanter linjerar med filterraden och rubriken ovanför. Telefon: mobile.css. */
.row.flexbox:has(> .panel-flex-items) {
    margin-left: -10px;
    margin-right: -10px;
}

.flex-justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.card-flex {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
    border-radius: var(--bs-border-radius-lg);
    border: 0;
}

.white-border {
    padding: 20px;
    background: #fff;
    border-radius: 5px;
}

.pointer {
    cursor: pointer;
}

.border-radius {
    border-radius: 5px;
}

/* 16px text i fält under 16px zoomar iOS in sidan när fältet får fokus. Gäller därför bara pekskärmar — på desktop
   har fälten samma 14px som knapparna bredvid (annars blev en textruta 37px hög intill 35px-knappar). De publika sidorna
   har 16px överallt genom sitt storlekssteg (.public-configurator, sist i filen). */
@media (hover: none) and (pointer: coarse) {
    /* button.form-control: flervalslistornas knapp (DropdownMultiSelect) — samma höjd som selecten bredvid. */
    :is(select, textarea, button.form-control, input:is([type="text"], [type="password"], [type="datetime"], [type="datetime-local"], [type="date"],
        [type="month"], [type="time"], [type="week"], [type="number"], [type="email"], [type="url"], [type="search"],
        [type="tel"], [type="color"])) {
        font-size: 16px;
    }
}

.full-width {
    width: 100%;
}

renderer {
    display: inline-block;
    height: 0;
}

.small-control {
    width: 84px;
    display: inline;
}

.no-break {
    white-space: nowrap;
}

.table>tbody .labour-part:hover {
    background-color: #f9f9f9;
}

.table>tbody .labour-part {
    cursor: pointer;
}

.labour-part .table {
    margin-top: 8px;
}

.table>tbody+tbody {
    border-top: 0;
}

.labour-table tr>th {
    width: 200px;
}

.labour-table tr>th:nth-child(1),
.labour-table tr>th:nth-child(2) {
    width: auto;
}

.table-image-container {
    position: absolute;
    padding: 5px;
    background: lightgray;
    border-radius: 5px;
    margin-top: 2px;
    margin-left: 150px;
    max-width: 300px;
    background:#fff;
}

.image-container {
    border: 1px solid lightgray;
    margin-top: 30px;
    border-radius: 5px;
    padding-bottom: 10px;
    cursor: pointer;
}

.image-container:hover {
    box-shadow: inset 0 0 10px grey;
}

.public-start .image-button {
    height: 100%;
    max-width: 100%;
    padding-bottom: 13px;
}

.part-image-button {
    height: 100%;
    padding-bottom: 15px !important;
}

.part-image-button-text,
.public-start .image-button-text {
    width: 100%;
    position: absolute;
}

.part-image-button-text {
    bottom: 8px;
    left: 0px;
}

.public-start .image-button-text {
    bottom: 8px;
    margin-left: -7px;
}

.sidebar {
    white-space: nowrap;
}

.toggle-sidemenu {
    position: fixed;
    left: 250px;
    top: 50%;
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    cursor: pointer;
    margin-top: -13px;
    height: 29px;
    padding-top: 4px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.toggle-bottommenu {
    position: fixed;
    left: 50%;
    bottom: 100px;
    background: #f8f8f8;
    width: 29px;
    padding-left: 6px;
    border: 1px solid #e7e7e7;
    height: 17px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    z-index: 1;
}

.toggle-bottommenu-mobile {
    display: none;
    bottom: 45%;
}

.editor-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#page-wrapper,
.container-fluid {
    position: relative;
}

.dragndrop-fileupload-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.dragndrop-fileupload-overlay h3 {
    margin: 0;
    font-size: 28px;
    color: #202e48;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    padding: 20px;
}

.dragndrop-fileupload-overlay img {
    margin-top: 20px;
    fill: #202e48;
}

.toggle-topmenu {
    position: fixed;
    left: 50%;
    z-index: 999;
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    cursor: pointer;
    height: 18px;
    width: 32px;
    transform: translateX(-50%);
    border-top: 0;
    border-bottom-left-radius: var(--bs-border-radius, 6px);
    border-bottom-right-radius: var(--bs-border-radius, 6px);
    font-size: 12px;
    color: #555;
    display: none;
    /* Ikonen (bi-chevron-up/-down) centrerad med radhöjd, så att det fungerar även när jQuery .show() sätter
       display: block. De gamla top/left-knuffarna var gjorda för BS3-ikonerna. */
    text-align: center;
    line-height: 17px;
}

.toggle-topmenu i::before {
    vertical-align: middle;
}

.navbar-static-top:hover+.toggle-topmenu,
.toggle-topmenu:hover,
.navbar-static-top[style*="height: 0px"]+.toggle-topmenu {
    display: block;
}

.toggle-topmenu:hover {
    background-color: #eee;
    color: #222;
}

.nav li>div {
    padding: 10px 15px;
}

.project-erp-info {
    position: absolute;
    top: 115px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
    height: 0;
}

/* Offertnumret öppnar offerten i affärssystemet — en <button> som ritas som texten förut. */
.project-erp-info .erp-quotation-no {
    float: left;
    cursor: pointer;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

.project-erp-info .erp-status {
    float: right;
}

.col-sm-12 .btn {
    margin-right: 3px;
}

.side-menu li.disabled,
.side-menu.nav>li.disabled>a {
    color: #843534;
}

.side-menu li.disabled {
    cursor: not-allowed;
}

.image-button {
    cursor: pointer;
}

.image-button,
.image-checkbox {
    border: 2px solid lightgrey;
    border-radius: 13px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    position: relative;
    padding: 7px;
}

.image-button:not(.selected):hover {
    border: 2px inset lightgrey;
}

.image-button.selected {
    background-color: #ddd;
    border: 2px inset lightblue;
}

.image-checkbox button.btn {
    margin-right: 0;
}

.image-button-info {
    position: absolute;
    background: #f9f9f9;
    width: 500px;
    white-space: normal;
    z-index: 9999;
    left: 106%;
    top: 0;
    border: 1px solid #7daad0;
    padding: 10px;
    border-radius: 4px;
    display: none;
}

.image-button:hover .image-button-info,
.image-checkbox:hover .image-button-info {
    display: inline-block;
}

.image-button-info:after,
.image-button-info:before {
    content: '';
    display: block;
    position: absolute;
    right: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.image-button-info:after {
    top: 10px;
    border-color: transparent #f9f9f9 transparent transparent;
    border-width: 10px;
}

.image-button-info:before {
    top: 9px;
    border-color: transparent #202e48 transparent transparent;
    border-width: 11px;
}

.text-sm {
    font-size: 16px;
}

.text-normal {
    font-weight: normal;
}

.menu-checkbox button {
    margin-left: 5px;
    bottom: 1px;
    position: relative;
    padding: 0px 2px;
    line-height: 12px;
}

/* "Powered by Addovation CPQ": en liten rad i 3D-vyns nedre vänstra hörn, tydligare vid hover. */
.powered-by-container {
    position: absolute;
    left: 0;
    bottom: 0;
    /* Samma avstånd från kanten som 3D-vyns flytande knappar (20px). */
    margin: 0 20px 12px;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    color: #6c757d;
    text-decoration: none;
    opacity: 0.6;
    z-index: 1001;
    transition: opacity 0.15s ease;
}

.powered-by-container:hover,
.powered-by-container:focus-visible {
    opacity: 1;
    color: #6c757d;
}

/* PublicStart: samma som i EditorPublic, men fast mot fönstrets nedre vänstra hörn (sidan scrollar). */
.powered-by-outer-container.public-start .powered-by-container {
    position: fixed;
}

.read-only .powered-by-container {
    left: 260px;
}

.powered-by,
.powered-by-company {
    color: inherit;
}

.powered-by-company {
    font-weight: 600;
}

.max-min-text {
    font-weight: normal;
    font-size: 11px;
}

.nav-second-level {
    position: relative;
}

.sort-container i.fa-angle-down,
.sort-container i.bi-chevron-down {
    top: 0px;
}

.button-row-form i {
    vertical-align: text-top;
}


.public-configurator:not(.read-only) .navbar-default.sidebar {
    position: absolute !important;
    left: 20px;
    top: 50%;
    height: 0;
    background: transparent;
    border: none;
}

.public-configurator .sidebar .arrow {
    padding-top: 5px;
}

.public-configurator canvas {
    cursor: move;
}

.public-configurator .toggle-sidemenu {
    display: none;
}


.price {
    position: fixed;
    right: 15px;
    bottom: 0;
    padding: 15px;
    margin-left: 0;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--primary-color);
    color: white;
}

.price h2 {
    margin: 0px;
    font-size: 24px;
}

.price h2 .text-sm {
    font-size: 14px;
}


.request-offer {
    position: fixed;
    top: 15px;
    right: 15px;
}

.a-enter-vr-button,
.a-enter-ar-button {
    display: none !important;
}

.btn.btn-default.selected {
    background-color: #bbb;
}

.option-image {
    max-width: 75%;
    max-height: 150px;
    margin: 15px 0px;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

input.disabled {
    cursor: not-allowed;
    background: #eee;
}

.no-margin {
    margin: 0 !important;
}

.normal-wrap {
    white-space: normal;
}

/* Knapparna över 3D-vyn: ikon och text centrerade i höjdled med luft emellan (etiketten ligger i en egen <span>,
   och Angular tar bort blanktecknet mellan </i> och <span>). */
.request-offer .btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-left: 0;
}

.text-danger-primary {
    color: #920000;
    font-weight: bold;
}

.sp-palette-container {
    padding-bottom: 0;
    margin-bottom: 0;
}

.sp-palette {
    max-height: 202px;
    overflow-y: scroll;
}

.sp-palette .sp-thumb-el {
    width: 10px;
    height: 10px;
    margin: 1px 1px;
}

.sp-replacer,
.sp-preview {
    width: 100%;
}

.sp-replacer {
    border-radius: 5px;
    padding: 6px;
}

.public-configurator .sp-preview {
    height: calc(var(--app-control-height) - 14px);
}

.sp-dd {
    display: none;
}

.public-property-label {
    width: 80%;
    white-space: normal;
}

.mouse-3d-icons {
    position: fixed;
    right: 7px;
    top: 50%;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1001;
}

.mouse-3d-icons > mouse-hints {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.first-person-mode-legend,
.first-person-mode-legend .first-person-mode-legend-item,
.measurement-mode-bar {
    align-items: center;
    display: flex;
}

.first-person-mode-legend {
    position: absolute;
    bottom: 0%;
    height: 50px;
    overflow: visible;
    width: 100%;
    background: #f5f5f5;
    font-size: 16px;
    justify-content: center;
    gap: 30px;
}

.first-person-mode-legend .first-person-mode-legend-item {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.first-person-mode-legend .first-person-mode-legend-item .info {
    margin-right: 10px;
    font-weight: 600;
}

/* Mätvyns panel — kompakt, centrerad överst i canvasen. position: absolute gör att den
   (precis som .camera-mode-button-toolbar) centreras mot #page-wrapper och därmed följer med
   automatiskt när AI-panelen krymper wrappern. */
.measurement-mode-bar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    max-width: calc(100% - 30px);
    gap: 6px;
    padding: 6px 8px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.measurement-mode-bar .measurement-mode-bar__icon {
    flex: 0 0 auto;
    margin: 0 2px;
    opacity: 0.65;
}

.measurement-mode-bar .measurement-mode-bar__tool,
.measurement-mode-bar .measurement-mode-bar__filters {
    margin-left: 4px;
}

.measurement-mode-bar .measurement-mode-bar__tool.active,
.measurement-mode-bar .measurement-mode-bar__filters .btn.active {
    background-color: #202E48;
    border-color: #202E48;
    color: #fff;
    box-shadow: none;
}

.measurement-mode-bar .measurement-mode-bar__dropdown {
    flex: 0 1 auto;
    min-width: 0;
}

.measurement-mode-bar .measurement-mode-bar__dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 190px;
}

.measurement-mode-bar .measurement-mode-bar__dropdown-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.measurement-mode-bar .dropdown-menu {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
}

.measurement-mode-bar .dropdown-menu > li > a,
.measurement-mode-bar .dropdown-menu > li > button.dropdown-item {
    cursor: pointer;
}

/* Ikonen i en egen kolumn med luft till texten (låg kant i kant med den). */
.measurement-mode-bar .dropdown-menu > li > button.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.measurement-mode-bar .dropdown-menu > li > button.dropdown-item > .bi {
    flex: 0 0 16px;
    text-align: center;
}
.measurement-mode-bar .dropdown-menu > li > a:hover,
.measurement-mode-bar .dropdown-menu > li > a:focus,
.measurement-mode-bar .dropdown-menu > li.active > a,
.measurement-mode-bar .dropdown-menu > li.active > a:hover,
.measurement-mode-bar .dropdown-menu > li.active > a:focus,
.measurement-mode-bar .dropdown-menu > li > button.dropdown-item:hover,
.measurement-mode-bar .dropdown-menu > li > button.dropdown-item:focus,
.measurement-mode-bar .dropdown-menu > li.active > button.dropdown-item,
.measurement-mode-bar .dropdown-menu > li.active > button.dropdown-item:hover,
.measurement-mode-bar .dropdown-menu > li.active > button.dropdown-item:focus {
    color: #fff;
    background-color: var(--primary-color);
}

/* themes.css satter vissa ikoner (.fa-expand, .fa-cube ...) till var(--icon-color) (vit)
   globalt med !important. I matbaren ska ikonen folja knappens egen fargsattning - annars blir
   den vit mot vit bakgrund sa fort knappen inte ar aktiv, och forsvinner helt. */
.measurement-mode-bar .dropdown-menu > li > a .fa,
.measurement-mode-bar .btn .fa,
.measurement-mode-bar .dropdown-menu > li > button.dropdown-item .bi,
.measurement-mode-bar .btn .bi {
    color: inherit !important;
}

.measurement-mode-bar .measurement-mode-bar__close {
    flex: 0 0 auto;
}


.public-configurator .side-menu li.active {
    overflow: visible;
}

.public-configurator .side-menu li.active~li {
    overflow: hidden;
}

table.price-matrix-table {
    margin-bottom: 10px;
}

table.price-matrix-table td {
    padding: 8px;
    border: 1px solid lightgrey;
    white-space: nowrap;
    position: relative;
}

.fixed-width {
    width: 90px;
    display: inline-block;
}

.price-matrix-remove-btn {
    position: absolute;
    font-size: 10px;
    top: 0px;
    right: -4px;
}

/* Artikel → prismatris: ta bort-knappen (btn-icon) lika liten som förut (btn-xs, 10px). */
.price-matrix-remove-btn.btn-icon {
    --bs-btn-font-size: 10px;
    --bs-btn-padding-y: .125rem;
}

.padding-sides {
    padding-right: 15px;
    padding-left: 15px;
}

.distance-line-input {
    position: fixed;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    box-sizing: content-box;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    padding: 2px;
    text-align: center;
    transform-origin: center;
    width: 60px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:hover {
    background: none;
}


/* Flikarna ser ut som i /Styleguide (BS5 nav-tabs: inaktiva i länkfärg, aktiv flik med ram). Svart text på de
   inaktiva gjorde att den aktiva (grå) såg mindre vald ut än de andra. Ingen högermarginal — fliklinjen går
   ända ut till innehållets kant som tabellerna under. */
.header-with-tabs {
    display: flex;
    align-items: center;
    padding: 20px 0 0 0;
}

.header-with-tabs h1 {
    margin: 0;
    font-size: 28px;
    margin-right: 20px;
    white-space: nowrap;
}

.nav-tabs {
    margin: 0;
    flex-grow: 1;
}

.tab-content {
    padding: 20px 0 20px 0;
    height: calc(100% - 80px);
}


span.listview-icons.float-end {
    flex-grow: 0 !important;
    width: 22px;
    text-align: center;
    padding: 2px;
    margin: 0;
    text-overflow: unset !important;
}

/** Notification Badges **/
.editor-notification-area {
    position: fixed;
    top: 0;
    margin-left: 20px;
    padding-left: 250px;
    z-index: 1;
}
.public-configurator .editor-notification-area {
    top: 18px;
    display: none !important;
}
.editor-notification-area .notification-item {
    position: relative;
    float: left;
    margin-right: 20px;
}

.editor-notification-area .notification-item i {
    font-size: 18px;
}

.editor-notification-area .notification-item .badge {
    position: absolute;
    left: 25px;
    transform: translate(-50%, -50%) !important;
    font-size: 9px;
}

.badge-danger {
    background-color: #d9534f;
    color: white;
}

.badge-warning {
    background-color: #f0ad4e;
    color: white;
}

.badge-success {
    background-color: #5cb85c;
    color: white;
}

.badge-info {
    background-color: #5bc0de;
    color: white;
}

.complementary-part-row,
.complementary-part-article-wrapper,
.complementary-part-article {
    display: flex;
}

.complementary-part-row {
    flex-wrap: wrap;
    align-items: stretch;
}

.complementary-part-article-image {
    max-height: 120px;
    max-width: 120px;
    width: auto;
    height: auto;
}

.complementary-part-article {
    padding: 10px;
    border: solid 1px #ccc;
    text-align: center;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
}

.complementary-part-article.has-quantity {
    border-color: #337ab7;
    background-color: #e6f0fa;
}

.complementary-part-article label {
    font-weight: inherit;
}

.complementary-part-article label.complementary-part-article-number,
.complementary-part-article-unit {
    font-size: 12px;
    opacity: 0.8;
}

.complementary-part-article label.complementary-part-article-number {
    margin-bottom: 0px;
}

.complementary-part-article input {
    width: 80px;
    margin: 0 auto;
}

.complementary-part-article-unit {
    margin-top: 4px;
}

.disabled-text {
    font-style: italic;
    color: grey;
}

.public-panel-flex-items {
    padding: 10px;
}

/* Autocomplete (App/Directives/Autocomplete.Template.html): fältet följs av sökikonen och ev. rensa-knappen (inne i
   fältet) i en .input-group, så BS5:s hörnregler gör fältets högra hörn raka — fältet är alltid helt rundat. */
.ac .form-control.autocomplete-input {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* 1 card per row */
@media (max-width: 1050px) {
    .public-panel-flex-items {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Tillbehören i EditorPublic (StartPartComplementaryParts): raden är en .row (−15px), men korten har bara 10px
   padding runt sig — raden dras ut lika mycket som paddingen, så att korten linjerar med texten under rubriken. */
.editor-public-complementaryparts .complementary-part-row {
    margin-left: -10px;
    margin-right: -10px;
}

/* Små kort — två per rad även i smala fönster. */
@media (max-width: 1050px) {
    .editor-public-complementaryparts .complementary-part-row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .editor-public-complementaryparts .public-panel-flex-items {
        flex: 1 1 50%;
        max-width: 50%;
        padding: 5px;
    }
}

/* 2 cards per row */
@media (min-width: 1051px) and (max-width: 1450px) { 
    .public-panel-flex-items {
        flex: 1 1 50%;
        max-width: 50%;
    }
}

/* 3 cards per row */
@media (min-width: 1451px) and (max-width: 1850px) {
    .public-panel-flex-items {
        flex: 1 1 33.33%;
        max-width: 33.33%;
    }
}

/* 4 cards per row */
@media (min-width: 1851px) and (max-width: 2500px) {
    .public-panel-flex-items {
        flex: 1 1 25%;
        max-width: 25%;
    }
}

/* 5 cards per row */
@media (min-width: 2501px) {
    .public-panel-flex-items {
        flex: 1 1 20%;
        max-width: 20%;
    }
}


@media (min-width: 2000px) {
    .col-xl-6 {
        width: 50%;
        float: left;
    }

    .current-parts-container {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 20px;
    }
}

@media (min-width: 3000px) {
}

/* Make each col act like a flex item to stretch height */
.gallery-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    overflow: visible;
    border: 0;
}

.gallery-card-title {
    flex-grow: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Kortens knapprad. Kort har numera även .card-actions (nedan); .card-buttons ger marginalen. */
.card-buttons {
    display: flex;
    flex-direction: column;
    margin: auto 15px 0 15px;
}

/* Kortens knapprad (listornas gallery-card och startsidan): vanliga knappar på en rad.
   Textknappar delar på bredden, ikonknappar (btn-icon) är kvadratiska och ligger sist.
   Ordning i mallen: sekundär (btn-default) → primär (btn-primary) → ikonknappar. */
.card-buttons.card-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
}

.card-actions > .btn:not(.btn-icon) {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Två eller fler textknappar utan ikonknappar (Kunder: Visa kund + Lägg till projekt, Återförsäljare): en knapp per
   rad i full bredd, som före uppgraderingen. Sida vid sida klipptes etiketterna ("Lägg till pr…"). Mobil och surfplatta
   har bredare knappar och behåller raden. */
@media (min-width: 992px) {
    .card-buttons.card-actions:not(:has(> .btn-icon)):has(> .btn ~ .btn) {
        flex-direction: column;
        align-items: stretch;
    }

    .card-buttons.card-actions:not(:has(> .btn-icon)):has(> .btn ~ .btn) > .btn {
        flex: 0 0 auto;
    }
}

/* Bara ikonknappar (t.ex. publika projekt utan behörighet att ta ärendet): till höger, som när det fanns en textknapp. */
.card-actions > .btn-icon:first-child {
    margin-left: auto;
}

.positioning-legend {
    width: auto;
    border-bottom: 0;
    margin-bottom: 0;
}

legend {
    margin-bottom: 0;
}

/* Sidan är minst fönstrets höjd (minus topraden), så att sådant som placeras från nederkanten (editorns kameraläge-rad
   och verktyg, bottom: 20px) hamnar längst ned. Sattes tidigare bara av JS (Globals.fixMenuOnResize, inline min-height);
   utan den låg knapparna mitt på sidan. Mobil (<992px) har egen layout i mobile.css.
   flow-root: sidrubrikens marginal kollapsade annars ut genom #page-wrapper, sidan hamnade 20px ned och fick
   en onödig rullning på 20px. */
@media (min-width: 992px) {
    #page-wrapper {
        display: flow-root;
        min-height: calc(100dvh - 50px);
    }

    body.editor-topmenu-hidden #page-wrapper {
        min-height: 100dvh;
    }
}

.camera-mode-button-toolbar,
.editor-side-tools {
    position: absolute;
    z-index: 1001;
}

.camera-mode-button-toolbar {
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    min-width: 300px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.editor-side-tools {
    left: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Bara verktygsknapparna själva — inte knapparna i deras menyer (Visuella inställningar: Återställ/Avbryt/Ok). */
.editor-side-tools > .btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-mode-button-toolbar .btn:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.camera-mode-selected {
    display: none;
}

.camera-mode-active .camera-mode-selected {
    display: initial;
    font-weight: 600;
}

.camera-mode-active .camera-mode-not-selected {
    display: none;
}

.canvas-overlay-image {
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* Enheten (mm, kg …) centrerad i fältet ovanför, oavsett fälthöjd (35px internt, 42px publikt). */
.unit-text {
    position: absolute;
    right: 34px;
    bottom: calc((var(--app-control-height, 35px) - 1.5em) / 2);
    line-height: 1.5;
    color: #8d8ca1;
    pointer-events: none;
    z-index: 5;
}

/* Public Configurator Specific Styles */

.public-configurator .mouse-3d-icons {
    position: absolute;
    right: 20px;
    z-index: 1001;
}

.public-configurator .navbar-static-top>.navbar-top-links>li>a {
    color: #fff;
}

.public-configurator .navbar-default.navbar-static-top {
    background-color: var(--primary-color) !important;
    background-size: cover;
}

.public-configurator .navbar-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.public-configurator .navbar-center-logo a {
    text-decoration: none;
}

.navbar-center-logo {
    display: flex;
    justify-content: center;
    /* centers horizontally */
    align-items: center;
    /* centers vertically */
    height: 100%;
    /* fill navbar height */
    gap: 5px;
    /* space between text and logo */
}

.navbar-center-logo h1 {
    margin: 0;
    color: white;
    /* remove default h1 margin */
    font-family: "Gadugi", sans-serif;
    font-size: 32px;
}

.navbar-center-logo img {
    max-height: 38px;
    /* make sure logo fits nicely */
    width: auto;
}

.nav .dropdown-toggle.show,
.nav .dropdown-toggle.show:focus,
.nav .dropdown-toggle.show:hover {
    background-color: transparent;
}

/* Stängknappen i Begär offert-formuläret (RequestOffer.Template.html): en vanlig ikonknapp (btn-default btn-icon)
   uppe till höger. */
/* Stängknappen uppe till höger i formuläret, i höjd med rubriken. Kolumnen runt den får inte vara positionerad
   (app-base ger kolumner position: relative) — då räknades knappens top från kolumnen och den hamnade under rubriken. */
.request-offer-form > .col-12:has(> .request-offer-close) {
    position: static;
}

.request-offer-form .request-offer-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.request-offer-form > .col-12 > h1:first-of-type {
    padding-right: 52px;
}

.tips-and-info-label {
    width: 100%;
    font-size: 15px;
    font-weight: normal;
    margin-top: 20px;
}

.tips-and-info-text {
    margin-bottom: 20px;
    display: inline-block;
}

.public-button-container {
    width: 100%;
    text-align: center;
    display: block;
}

/* Hela högerpanelen, ända upp till toppmenyn (top: 10px lät steget bakom synas i en remsa överst); de 10px
   ligger kvar som luft inuti. */
.request-offer-form {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--bs-body-bg, #fff);
    /* Över egenskapspanelen under: dess reglage och enhetstexter (.unit-text, z-index 5) ritades annars ovanpå formuläret. */
    z-index: 20;
}


.editor-public-complementaryparts .fullscreen-container-menu {
    position: relative;
    background: #eaf1f9;
    height: 1000%;
    overflow: hidden;
    z-index: 80;
}

.editor-public-complementaryparts .fullscreen-container-menu .inner-container {
    background-color: #eaf1f9;
    margin: 20px auto;
    width: 100%;
    border-radius: 5px;
    padding: 0;
}

.editor-public-complementaryparts .complementary-part-article {
    background: #fff;
    border-radius: 10px;
    border: 0;
}

.editor-public-complementaryparts .btn,
.editor-public-complementaryparts h1 {
    display: none;
}

/* public-configurator .navbar-default.sidebar .side-menu */

.configurator-left-container,
.configurator-right-container {
    position: absolute;
    height: 100%;
}

.configurator-left-container {
    width: 66.67%;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: round;
}

.configurator-right-container {
    width: 33.33%;
    left: 66.67%;
    top: 0;
    background: #eaf1f9;
    border-left: 1px solid #acadaf;
    display: flex;
    flex-direction: column;
}

ul.step-menu {
    list-style: none;
    display: flex;
    position: relative;
    padding: 0;
    text-align: center;
    z-index: 1001;
    margin-top: -1px;
}

ul.step-menu li:last-child {
    border-right: 0;
}

ul.step-menu li {
    background-color: #fff;
    margin-top: 1px;
    display: inline;
    position: relative;
    float: left;
    padding: 11px;
    width: 100%;
    min-height: 50px;
    color: #000;
    border-inline-end: 1px solid #acadaf;
    border-bottom: 1px solid #acadaf
}

ul.step-menu li.shimmer {
    border-radius: 0 !important;
}

ul.step-menu li.active {
    background-color: #eaf1f9 !important;
    color: #000;
    font-weight: bold;
    border-bottom: 1px solid #000;
    border-inline: 1px solid #000;
    z-index: 1;
}

.step-text {
    width: 100%;
    /* Fluidly scale the tab label with the viewport so it fits at any window size */
    font-size: clamp(10px, 0.5em + 0.45vw, 14px);
    overflow-wrap: break-word;
    hyphens: auto;
}

.step-text-container {
    min-width: 90%;
}

span.step-number {
    display: none;
}

.shimmer {
    border-radius: 10px;
    background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
    background-size: 300%;
    background-position-x: 100%;
    animation: shimmer 1s infinite linear;
    position: relative;
    display: inline-block;
}

.first-row {
    padding-right: 128px;
    position: relative;
}

/* Tre vy-knappar (Projekt, Publika projekt: rutnät, lista, borttagna) är 148px breda — reservera plats för dem, annars
   hamnar sista filtret under knapparna. */
.first-row:has(> .listviewclass .btn-group > .btn:nth-child(3)) {
    padding-right: 165px;
}

/* Filterfält som delar på bredden (col-lg, Objekt och Publika projekt): minst så breda att etikett och värde syns —
   blir raden för trång (t.ex. 1280px) bryts sista filtret till nästa rad i stället för att alla fält krymper. */
.list-filters .col-lg {
    min-width: 130px;
}

@keyframes shimmer {
    to {
        background-position-x: 0%
    }
}

.progress-bar {
    width: 200px;
    height: 15px;
    background-color: #d8d8d8;
    border: none;
    box-shadow: none;
    border-radius: 5px;
    padding: 3px;
}

.progress-bar-fill {
    background: linear-gradient(-45deg, #ffffff 0%, var(--primary-color) 1%, var(--primary-color) 17%, #ffffff 18%, #ffffff 20%, var(--primary-color) 21%, var(--primary-color) 37%, #ffffff 38%, #ffffff 40%, var(--primary-color) 41%, var(--primary-color) 57%, #ffffff 58%, #ffffff 60%, var(--primary-color) 61%, var(--primary-color) 77%, #ffffff 78%, #ffffff 80%, var(--primary-color) 81%, var(--primary-color) 99%, #ffffff 100%);
    height: 100%;
    /* This is important */
    animation: progress 3s infinite linear;
    background-size: 400px;
    background-position-x: 200px;
    border-radius: 2px;
}

@keyframes progress {
    to {
        background-position-x: 286px;
    }
}

.readonly-loading-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.loading {
    position: absolute;
    top: 50%;
    height: 0;
    overflow: visible;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 1120px) {
    .flag-lang {
        display: none;
    }
}

@media (max-width: 768px) {
    .read-only .powered-by-container {
        left: 0;
    }

    .public-configurator .editor-notification-area {
        display: block !important;
    }

    .public-configurator .fa-bell,
    .public-configurator .bi-bell {
        color: var(--icon-color);
    }

    .navbar-top-links {
        gap: 0 !important;
    }

    .navbar-top-links li:last-child {
        margin-right: 0 !important;
    }

    .navbar-collapse.collapse {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 55% !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        border-top: 1px solid lightgrey;
        min-height: auto !important;
    }

    .editor-background {
        bottom: 40%;
    }

    /* Editorn har en dockad bottenrad (<editor-sidenav>) i stället för halvskärmsmenyn — bakgrunden/laddningsytan
       ska gå ända ner till raden. EditorPublic (<sidemenu>) behåller 40 % ovan. */
    body:has(.sidenav-bar) .editor-background {
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom));
    }

    .normal-wrap.col-12 {
        float: none;
    }

    .toggle-bottommenu-mobile {
        display: block;
    }

    .image-button {
        max-width: 45%;
        min-width: 45%;
        display: inline-block;
        float: left;
        margin: 2.5%;
    }

    .fullscreen-container-menu .image-button {
        max-width: 100%;
        min-width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }

    .fullscreen-container .inner-container {
        max-width: 80%;
        max-height: 80%;
    }

    .public-configurator .fullscreen-container,
    .fullscreen-container-menu {
        bottom: 0% !important;
    }

    .public-configurator .rule-messages-container {
        display: none !important;
    }

    .public-start .fullscreen-container,
    .public-start .fullscreen-container-menu {
        bottom: 0;
    }

    .image-button-info {
        display: none !important;
    }

    /* Gäller 3D-vyns canvas — inte kodredigerarens (Monaco) egna canvasar: dess översiktslinjal sträcktes
       annars över hela redigeraren och tog alla tryck, så att det inte gick att skriva i Kod-fliken på mobil. */
    canvas:not(.monaco-editor canvas) {
        width: 100% !important;
        height: 55%;
        top: 0 !important;
    }

    .price {
        bottom: 40%;
    }

    #page-wrapper {
        bottom: 40%;
        overflow: auto !important;
        min-width: 100%;
        max-width: 100%;
        min-height: 0 !important;
    }

    .flex-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .image-section {
        max-width: 100%;
    }

    .image-section .option-image {
        width: 45%;
    }

    .tooltip-container {
        right: 4px;
    }

    /* Inaktiverad: BS5:s .btn:disabled nollställer annars bakgrund/ram/färg (osynlig knapp) — behåll dem som i BS3 */
    .alert-rulemessage {
        border-radius: 0;
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .sidebar-nav {
        margin-top: 0 !important;
    }

    .sidebar a:hover::before,
    .sidebar .active>a::before {
        left: 2% !important;
        width: 96% !important;
    }

    .sidebar .nav-second-level a:hover::before,
    .sidebar .nav-second-level .active>a::before {
        left: auto !important;
        width: 94% !important;
    }
}

@media (max-width: 768px) {
    .public-configurator .navbar-center-logo {
        top: 0;
        left: 50px;
        transform: none;
    }

    .public-configurator .navbar-center-logo a h1 {
        font-size: 3vh;
    }

    .camera-mode-button-toolbar {
        bottom: 20px;
    }

    .request-offer-form {
        position: fixed;
        top: 50px;
        bottom: 0;
        left: 0;
    }

    .step-text {
        font-size: small;
    }

    .public-button-container {
        padding-right: 0;
        bottom: 10px;
        position: fixed;
    }

    .public-configurator:not(.read-only) .navbar-default.sidebar {
        display: none !important;
        /**** TODO: TEMP FIX FOR DEMO *****/
    }

}

@media (max-width: 800px) {
    .step-text {
        font-size: small;
    }
}

/* Public Configurator Specific Styles */

/** nx-bootstrap modal overrides **/
.modal-backdrop.fade.show {
    opacity: 0.3;
}

.modal.fade.show {
    opacity: 1;
}

.modal.fade .modal-dialog {
    transform: none;
}

.modal-title {
    float: left;
}

user-list td.inactive::after{
     content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #a94442; /* grå, "inactive" */
    margin-left: 10px;
}

/*** NAV PILLS ***/
ul.nav.nav-pills {
    display: inline-flex;
    /* BS5:s .nav radbryter flikarna; här ska de stå på en rad (texten bryts i stället) som i BS3 */
    flex-wrap: nowrap;
    padding: 5px;
    background: #eaeef0;
    border-radius: 12px;
}

.nav.nav-pills>li>a,
.nav.nav-pills>li>a:focus,
.nav.nav-pills>li>a:hover,
.nav.nav-pills>li>button.nav-link {
    padding: 5px 10px;
    border-radius: 8px;
}

.nav.nav-pills>li+li {
    margin-left: 10px;
}

.nav.nav-pills>li.active>a,
.nav.nav-pills>li.active>a:focus,
.nav.nav-pills>li.active>a:hover,
.nav.nav-pills>li>a.active,
.nav.nav-pills>li>a.active:focus,
.nav.nav-pills>li>a.active:hover,
.nav.nav-pills>li>button.nav-link.active {
    color: var(--text-color-secondary);
    background-color: var(--primary-color) !important;
}


.alert-property-link {
    float: right;
    cursor: pointer;
}

.inactive-user-row {
    /* Light background color to "dim" the row */
    background-color: #FAFAFA; /* A very light grey */
    
    /* Optional: A very light red border/shadow for extra cue */
    box-shadow: inset 5px 0 0 0 #F0C0C0;
    
    /* Dim the text color slightly to show it's less important/active */
    color: #888888; 
    
    /* Ensure the row doesn't look clickable/active */
    opacity: 0.85; 
}

/* Optional: To further ensure text isn't visually distracting */
.inactive-user-row td {
    /* Use a light grey for text if it's not inherited from tr */
    color: inherit; 
}

/* Optional: If you want to keep the email/link colors consistent, you might need to override the inherited grey */
.inactive-user-row a {
    color: #337ab7; /* Use your application's standard link color */
}


/**** card view ****/
.inactive-user-card .gallery-card {
    opacity: 0.75 !important; 
    cursor: default; 
}

/* 2. Grey out the user name (cardTitle) and prevent link hover state */
.inactive-user-card .gallery-card-title h4,
.inactive-user-card .gallery-card-title a {
    color: #888888 !important; /* Grey out the title text */
    text-decoration: none !important; /* Remove underline from the title link */
}

/* 3. Apply a grayscale filter to the user image/placeholder */
.inactive-user-card .card-header img {
    filter: grayscale(100%); 
}

.inactive-user-card .alert-danger {
    font-weight: bold;
    text-transform: uppercase;
    color: #A00000; /* Darker red text */
    background-color: #FFEEEE; /* Lightest red background */
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 5px; 
    display: inline-block;
    opacity: 1; 
}
@media (max-width: 1000px) {
    .price {
        padding: 5px 10px;
    }
    .price h2 {
        font-size: 16px;
    }
    .price .text-sm {
        font-size: 10px;
    }

    .camera-mode-button-toolbar {
        left: 10px;
        transform: none;
        justify-content: flex-start;
    }

    .editor-side-tools {
        bottom: 80px;
    }
}

/* Multiplayer Styles */
.multiplayer-users-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    max-width: 280px;
}

.multiplayer-users-panel .card {
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.multiplayer-users-panel .card-header {
    background-color: #337ab7;
    color: white;
    font-weight: 600;
    padding: 10px 15px;
}

.multiplayer-users-panel .card-body {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.multiplayer-user-item,
.user-info {
    align-items: center;
    display: flex;
}

.multiplayer-user-item {
    padding: 8px;
    margin-bottom: 5px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.user-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    border: 2px solid white;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.user-info {
    flex: 1;
    justify-content: space-between;
}

.user-mode {
    color: #666;
    font-size: 14px;
}

.btn .badge,
.btn-success .badge {
    background-color: #fff;
    color: #5cb85c;
}

.btn .badge {
    position: relative;
    top: -1px;
    margin-left: 5px;
    font-weight: bold;
}

.badge.badge-default{
    background-color: var(--primary-color);
    color: white;
}

.changelog-ai-watermark {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #bbb;
    font-style: italic;
    pointer-events: none;
    user-select: none;
}
/* Analytics Dashboard Global Overrides */
.analytics-container .card-header {
    height: auto !important;
    width: auto;
    padding: 10px 15px;
    text-align: left;
}


/* Analytics Flexbox Equal Height */
.analytics-summary-row {
    display: flex;
    flex-wrap: wrap;
}
.analytics-summary-row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
.analytics-summary-row .card {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.analytics-summary-row .card-header {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Analytics Component Specifics */
.analytics-container .card-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start !important;
}
.analytics-container .card-title i {
    margin-right: 5px;
}
.analytics-container form label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}


.analytics-container .form-row {
    padding-top: 0 !important;
}

/* ImageSelect — EditableProperty rendering (standard Editor) */
.image-select-tiles,
.image-select-tile-image {
    width: 100%;
    display: flex;
}

.image-select-tiles {
    flex-wrap: wrap;
    gap: 8px;
}
.image-select-tile {
    flex: 0 0 calc(33.333% - 6px);
    box-sizing: border-box;
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    text-align: center;
    user-select: none;
}
.image-select-tile:hover {
    border-color: #5cb85c;
}
.image-select-tile.active {
    border-color: #449d44;
    box-shadow: 0 0 0 2px rgba(68, 157, 68, 0.25);
}
.image-select-tile-image {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-color: #f5f5f5;
    align-items: center;
    justify-content: center;
}
.image-select-tile-placeholder {
    color: #bbb;
    font-size: 28px;
}
.image-select-tile-label {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    color: #333;
    word-break: break-word;
}
.image-select-tiles.disabled .image-select-tile {
    cursor: not-allowed;
    opacity: 0.6;
}
.image-select-tiles.forced-invalid {
    outline: 1px solid #d9534f;
    outline-offset: 2px;
}

/* Custom dropdown med thumbnails (ImageSelect, mode = dropdown) */
.image-select-cd {
    position: relative;
    width: 100%;
}
.image-select-cd-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: #fff;
    color: #555;
    font: inherit;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* Match native select i Editor */
.image-select-cd-button.project-form-control {
    height: 30px;
    padding: 2px 8px;
}
/* EditorPublic: lika hög som de andra fälten i storlekssteget (--app-control-height, 42px) */
.public-configurator .image-select-cd-button.project-form-control {
    height: var(--app-control-height);
    padding: 4px 10px;
    font-size: 1rem;
}
.image-select-cd.open .image-select-cd-button,
.image-select-cd-button:focus {
    border-color: #66afe9;
    outline: none;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.4);
}
.image-select-cd.disabled .image-select-cd-button {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}
.image-select-cd.forced-invalid .image-select-cd-button {
    border-color: #d9534f;
}
.image-select-cd-thumb {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 3px;
    border: 1px solid #ddd;
    flex: 0 0 auto;
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Lite större thumb i menyn — och i EditorPublics större trigger */
.public-configurator .image-select-cd-button .image-select-cd-thumb {
    width: 32px;
    height: 32px;
}
.image-select-cd-menu .image-select-cd-thumb {
    width: 36px;
    height: 36px;
}
.image-select-cd-thumb-placeholder {
    color: #bbb;
    font-size: 14px;
}
.image-select-cd-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image-select-cd-label-placeholder {
    color: #999;
}
.image-select-cd-caret {
    flex: 0 0 auto;
    font-size: 11px;
    color: #777;
    transition: transform 120ms ease;
}
.image-select-cd.open .image-select-cd-caret {
    transform: rotate(180deg);
}
.image-select-cd-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1050;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--app-menu-border);
    border-radius: var(--app-menu-radius);
    box-shadow: var(--app-menu-shadow);
    max-height: 320px;
    overflow-y: auto;
}
.image-select-cd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
}
.image-select-cd-item:hover {
    background: #f5f5f5;
}
.image-select-cd-item.active {
    background: #e7f3ff;
    font-weight: 500;
}

/* Ja/Nej-toggle — booleska fält i formulär (<yes-no-toggle>, App/Directives/YesNoToggle) och EditableProperty
   (typ Checkbox). Markup: .yes-no-toggle > button.yes-no-option.yes-no-option-yes / .yes-no-option-no (+ .active).
   Exakt lika hög som fälten och knapparna i samma rad (--app-control-height). */
.yes-no-toggle-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Komponentens värdelement: alltid på egen rad, så att etiketten — [label] eller formulärets egen <label> före —
   hamnar ovanför reglaget, som för andra fält (en inline-etikett + inline-reglage hamnade annars bredvid varandra). */
yes-no-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
}

yes-no-toggle .yes-no-field-label {
    display: block;
}

/* Flera efter varandra (inställningslistor) staplas med luft. Marginal nedåt, inte uppåt — i en flexrad bredvid
   varandra hade en övre marginal flyttat ned den andra. */
yes-no-toggle:has(+ yes-no-toggle) {
    margin-bottom: 12px;
}

/* Lista med många Ja/Nej-val (återförsäljare, roller, föräldrar): i kolumner bredvid varandra i stället för en lång rad
   under varandra. Så många kolumner som får plats. */
.yes-no-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 24px;
}

/* I formulärens avsnitt: samma tre kolumner (och 30px mellanrum) som fälten i col-md-4 ovanför, så att reglagen
   linjerar med dem. */
@media (min-width: 768px) {
    .info-row .yes-no-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 30px;
    }
}

.yes-no-grid > yes-no-toggle,
.yes-no-grid > * > yes-no-toggle {
    margin-bottom: 0;
}

.yes-no-toggle {
    display: inline-flex;
    align-items: stretch;
    box-sizing: border-box;
    height: var(--app-control-height, 35px);
    padding: 3px;
    background-color: #f0f2f5;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 999px;
    line-height: 1;
    vertical-align: middle;
}

.yes-no-toggle .yes-no-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background-color: transparent;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.yes-no-toggle .yes-no-option:hover:not(.active):not([disabled]) {
    background-color: rgba(0, 0, 0, 0.06);
    color: #222;
}

.yes-no-toggle .yes-no-option:focus {
    outline: none;
}

.yes-no-toggle .yes-no-option:focus-visible {
    box-shadow: 0 0 0 .2rem var(--app-focus-ring);
}

.yes-no-toggle .yes-no-option.active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Ja följer aktuellt tema, Nej är en neutral vit pill – annars läser ett valt "Nej" som något positivt. */
.yes-no-toggle .yes-no-option-yes.active {
    background-color: var(--app-primary, #202E48);
    color: var(--app-primary-contrast, #fff);
}

/* Publika sidor: samma reglage, ett storlekssteg större (höjden följer --app-control-height). */
.public-configurator .yes-no-toggle .yes-no-option {
    font-size: .9375rem;
}

.yes-no-toggle .yes-no-option-no.active {
    background-color: #fff;
    color: #333;
}

.yes-no-toggle.forced-invalid {
    border-left: 4px solid #a94442;
}

.yes-no-toggle.is-disabled {
    opacity: 0.6;
}

.yes-no-toggle .yes-no-option[disabled] {
    cursor: not-allowed;
}


/* ==========================================================================================================
   Tidigare Style/stylejj.css — ligger efter resten av site.css, i samma ordning som när filerna laddades var för sig
   ========================================================================================================== */

.flag-icon {
    margin-right: 10px;
}

.fa-caret-down,
.navbar-top-links .dropdown-toggle > .bi-chevron-down {
    margin-left: 10px;
}

#page-wrapper,
body,
.navbar-static-top {
    background-color: #F4F7F9 !important;
}

.navbar-static-top {
    z-index: 1 !important;
}


.input-group .form-control {
    z-index: 0 !important;
}


/*List view*/

.listviewclass {
    position: absolute;
    right: 0;
    top: 30px;
}

/* Ligger direkt i en .row: BS5:s .row > * ger den annars width: 100% och gutter-padding, så vy-knapparna hamnade
   längst till vänster över sökfälten i stället för uppe till höger. */
.row > .listviewclass {
    width: auto;
    padding: 0;
    margin-top: 0;
}

/* Vy-knapparnas ruta (tidigare col-xs-6 col-md-3 col-lg-2, vilket inte betyder något i en absolut positionerad ruta) */
.listviewclass > div {
    padding: 0 15px;
}

.btn-group {
    display: flex;
}

/*projectcards*/


.card-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: auto;
    font-size: 14px !important;
    word-wrap: break-word;
    flex: 0 1 auto;
}

.card-title {
    padding-top: 15px;
}

/* 1 card per row */
@media (max-width: 600px) {
    .panel-flex-items {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
/* 2 card per row */
@media (min-width: 600px) {
    .panel-flex-items {
        flex: 1 1 50%;
        max-width: 50%;
    }
}

/* 3 cards per row */
@media (min-width: 950px) {
    .panel-flex-items {
        flex: 1 1 calc(33.33% - 0px);
        max-width: calc(33.33% - 0px);
    }
}

/* 4 cards per row */
@media (min-width: 1300px) {
    .panel-flex-items {
        flex: 1 1 calc(25% - 0px);
        max-width: calc(25% - 0px);
    }
}


/* 5 cards per row */
@media (min-width: 1550px) {
    .panel-flex-items {
        flex: 1 1 calc(20% - 0px);
        max-width: calc(20% - 0px);
    }
}

/* 6 cards per row */
@media (min-width: 1900px) {
    .panel-flex-items {
        flex: 1 1 calc(16.66% - 0px);
        max-width: calc(16.66% - 0px);
    }
}

/* 7 cards per row */
@media (min-width: 2200px) {
    .panel-flex-items {
        flex: 1 1 calc(14.28% - 0px);
        max-width: calc(14.28% - 0px);
    }
}

/* 8 cards per row */
@media (min-width: 2500px) {
    .panel-flex-items {
        flex: 1 1 calc(12.5% - 0px);
        max-width: calc(12.5% - 0px);
    }
}

/*Sidemenu*/

.menu-item>ul.nav-second-level {
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
}

.line-style::before,
.line-style>li::before {
    position: absolute;
    content: "";
    background-color: white;
}

.line-style::before {
    top: -5px;
    left: 19px;
    width: 1.5px;
    height: calc(100% - 15px);
}

.line-style>li::before {
    top: 20px;
    left: 19px;
    width: 12px;
    height: 1.5px;
}


.sidebar-nav {
    margin-top: 5px;
}

.public-configurator:not(.read-only) .sidemenulogocontainer {
    display: none !important;
}

.public-configurator:not(.read-only) .navbar-default.sidebar li:not(.active) a {
    color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) .navbar-default.sidebar li:not(.active) a:hover {
    color: var(--text-color-secondary) !important;
}

.mobile-action-button:hover {
    color: initial;
}

.public-configurator:not(.read-only) .navbar-default.sidebar li {
    border: none;
}

.sidemenulogocontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.read-only .sidemenulogocontainer {
    display: none;
}

.read-only .sidemenu-top {
    top: 50px;
}

.sidemenulogo {
    margin-top: 5px;
    margin-bottom: 10px;
    max-width: 220px;
    max-height: 90px;
}

.sidemenubrand {
    color: white;
    text-decoration: none !important;
}

.navbar-default.sidebar {
    position: fixed;
    top: 0;
    height: 100% !important;
    overflow-x: hidden;
}

.public-configurator:not(.read-only) .sidemenu-top {
    z-index: 1001 !important;
    width: auto !important;
    top: calc(50% - 150px) !important;
}

.public-configurator:not(.read-only) .sidebar {
    z-index: 1001;
}

.sidemenu-top {
    position: fixed;
    bottom: 66px;
    top: 155px;
    left: 0;
    width: 250px;
    overflow-y: auto;
}

.sidemenu-bottom {
    position: fixed;
    bottom: 0;
    background-color: #202E48 !important;
    width: 250px;
    z-index: 1000;
    padding-bottom: 5px;
}


@media (max-width: 768px) {
    #page-wrapper {
        position: fixed;
        max-height: 100%;
    }

    .read-only .sidemenu-top,
    .sidemenu-top {
        top: 0;
    }

    .nav-second-level::before,
    .nav-second-level>li::before {
        content: none;
    }

    .sidemenulogocontainer {
        display: none;
    }

    .sidemenu-top {
        position: relative;
        width: 100%;
        margin-bottom: 0vh;
    }

    .navbar-default.sidebar {
        height: auto !important;
        position: fixed;
        overflow-y: auto;
    }

    .sidemenu-bottom {
        position: relative;
        text-align: left;
        width: auto;
    }

    body .sidebar {
        top: 60% !important;
    }

    .sidebar li.active-part a::before,
    sidemenu .sidebar .nav-second-level a:hover::before {
        right: 3% !important;
        width: 91% !important;
        height: 88% !important;
    }

    .editor-notification-area {
        padding-left:0;
    }
}

 body:has(.editor-notification-area:hover) .toggle-topmenu{
    display:block;
    }
.sidebar {
    background-color: #202E48 !important;
    color: #202E48 !important;
    border-right: none;
    top: 0% !important;
}

.sidebar a,
.nav>li>a {
    padding: 10px 20px;
}

.sidebar a,
.sidebar .active>a {
    color: white;
    text-decoration: none;
}

.sidebar a {
    display: block;
    margin: 0 auto;
    margin-top: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sidebar a:hover,
.sidebar .active>a {
    position: relative;
}

sidemenu:not(.sidebar-editor) .sidebar a:hover::before,
.sidebar a:hover::before,
.sidebar .active>a::before,
.sidebar li.active-part a::before,
sidemenu .sidebar .nav-second-level a:hover::before,
.sidebar .nav.nav-second-level .active>a::before,
sidemenu:not(.sidebar-editor) .sidebar .nav.nav-second-level a:hover:hover::before {
    position: absolute;
    content: "";
    border-radius: 10px;
    transform: translateY(-50%);
    z-index: -1;
}

sidemenu:not(.sidebar-editor) .sidebar a:hover::before,
.sidebar a:hover::before,
.sidebar .active>a::before,
.sidebar li.active-part a::before {
    top: 50%;
    left: 5%;
    width: 90%;
    height: 100%;
    background-color: #1A253A;
}

.sidebar li.active-part a::before,
sidemenu .sidebar .nav-second-level a:hover::before {
    top: 50%;
    left: auto;
    right: 5%;
    width: 83%;
    height: 78%;
}

.sidebar .nav.nav-second-level .active>a::before,
sidemenu:not(.sidebar-editor) .sidebar .nav.nav-second-level a:hover:hover::before {
    top: 50%;
    left: 14%;
    width: 80%;
    height: 60%;
    background-color: #1A253A;
}


.sidebar ul li {
    border-bottom: none;
}

.sidebar a svg,
.sidebar a img {
    margin-right: 10px;
    font-size: 16px;
}

.sidebar hr {
    border: none;
    border-top: 0.5px solid #ffffff7c;
    margin: 10px auto;
    width: 100%;
}

.sidebar .sidemenu-bottom hr {
    margin-top: 0;
}

.sidebar li.active-part,
.sidebar li.active-part a {
    background-color: transparent !important;
}

.nav>li>a:hover {
    text-decoration: none;
    background-color: transparent !important;
}

/*sorting*/

/* <sort> är en <button> (fas 2b): nollställ knappens ram/bakgrund så att rubriken ser ut som förut. */
button.sort-container {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: normal;
    color: inherit;
    text-align: inherit;
}

.sort-container,
.sort-container:focus {
    outline: none;
    cursor: pointer;
    font-weight: normal;
}

.col-4 {
    padding-right: 0px !important;
}

.deletebutton .btn-primary,
.deletebutton .btn-danger {
    border: none;
    border-radius: 13px;
    font-weight: 700;
}

.deletebutton .btn-primary,
.deletebutton .btn-danger {
    padding: 5px 30px;
}


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    right: 100%;
    margin-top: -1px;
    display: none;
    position: absolute;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}


/* ==========================================================================================================
   Tidigare Style/lia.css
   ========================================================================================================== */

.relative {
  position: relative;
}

.h-full {
  height: 100%;
}

.input-hr {
  border: none;
  height: 1.5px;
  background-color: #ccc;
  margin: 20px 0;
}

.input-hr.smaller { 
  margin: 10px;
}

.card-header {
    position: relative;    
    text-align:center;
    height: 140px;
    width: 100%;
    padding: 0;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
}

.card-title a {
    color: black;
    text-decoration: none;
}

.search-article-btn {
  background-color: #202e48;
  border-radius: 10px;
  color: white;
  width: 100px;
  padding: 4px;
  border: none;
}

.search-article-btn:hover {
  background-color: #2a3c5e;
}

.reseller-img {
  max-width: 150px;
  max-height: 400px;
  border-radius: 10px;
}

.panel-copy-icon {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--icon-color);
  cursor: pointer;
}

.listview-icons,
.listview-icons-big {
  padding: 4px 6px;
  cursor: pointer;
  color: white;
  border-radius: 7px;
  font-size: 12px;
  margin-right: 10px;
}

.listview-icons-big,
.listview-icons-big:hover {
  padding: 6px;
  font-size: 14px;
}

/* Ikonknapparna som lika stora rutor med ikonen i mitten. Med bara padding berodde storleken på glyfen:
   Bootstrap Icons (inline, glyfen nedflyttad med vertical-align) och Font Awesome (inline-block) blev olika höga.
   will-change: med webbläsarzoom/skalning som inte är 100 % hamnar raderna på olika bråkdelar av en skärmpixel.
   Rutan ritas då på bråkdelen men glyfens baslinje avrundas till hel pixel, så ikonen hoppade upp till 1px
   upp/ned i rutan från rad till rad. I ett eget lager ritas ruta och glyf tillsammans och flyttas lika. */
i.listview-icons,
i.listview-icons-big,
i.listview-icons-big:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  will-change: transform;
}

i.listview-icons-big {
  width: 28px;
  height: 28px;
}

/* position: static — .bi-trash:before har en gammal halvpixelsknuff (right/top .5px) från glyphicon-tiden. */
i.listview-icons::before,
i.listview-icons-big::before {
  position: static;
  line-height: 1;
  vertical-align: 0;
}

/* Mindre ikon i de gamla radikon-rutorna (listview-icons, kvar på publika sidor) — inte globalt: i knappar ska
   ikonerna ha knappens textstorlek. */
.listview-icons.bi-check-lg, .listview-icons.bi-trash {
  font-size: 12px;
}


.revision-active .listview-icons,.revision-active.listview-icons {
    color: #3c7d26 !important;
    background-color: rgba(255, 255, 255, 1) !important;
    cursor: default;
}

.show-project-image {
  background-color: white;
  z-index: 1;
  max-width: 150px;
}

/* list-view-input / project-form-control / info-input: gamla storleksklasser för fält. De är numera vanliga BS5-fält
   (samma höjd, ram och radie som knapparna), även på de publika sidorna — klasserna tas bort ur mallarna i en senare fas. */
.list-view-input {
  background-color: white;
  width: 100%;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td {
  vertical-align: bottom;
  padding: 16px;
  white-space: nowrap;
  border: none;
  font-weight: normal;
}

.table.white-space-normal > thead > tr > th,
.table.white-space-normal > tbody > tr > th,
.table.white-space-normal > tbody > tr > td {
  white-space: normal;
}

/* Radbrytning i cellerna men rubrikerna på en rad (sorteringspilen hamnade annars under rubriken). */
.table.white-space-normal.nowrap-header > thead > tr > th {
  white-space: nowrap;
}

.tr-divider {
  position: relative;
}

.tr-divider::after {
  content: "";
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0px;
  left: 0;
  width: 98%;
  height: 1px;
  background-color: #e6e6e6;
}

.project-form-control {
  background-color: white;
}

.panel-heading-btn:first-child {
  top: 12px;
}
.panel-heading-btn:nth-child(2) {
  top: 40px;
}

.project-close-btn {
  color: black;
  font-size: 18px;
}

.project-send-btn {
  color: #202e48;
}

.project-send-btn > i {
  margin-right: 0;
}

.panel-heading-send-btn i {
  font-size: 18px;
  top: 9px;
}

/* Knappar i fältgrupper (combobox rensa/välj, visa lösenord): vanliga sekundärknappar som
   sträcks till fältets höjd av BS5:s .input-group (även på de publika sidorna). */
.input-group > .btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: none;
}

.panel-flex-items {
  padding: 10px;
}

.card-header .col-4 {
  padding-right: 0;
}

.card-title h4 {
    margin: 0;
    margin-bottom: 10px;
    color: #000000;
    font-size: 19px;
    font-weight: bold;
}

.card-details {
  margin: 0 15px;
}

.card-details-subtitle {
  font-size: 12px;
  font-weight: bold;
  color: rgb(88, 88, 88);
  margin-bottom: -5px;
}

.card-details-data {
  font-size: 15px;
  margin: 0;
  margin-bottom: 5px;
  overflow-wrap: break-word;  /* Rekommenderat (nyare standard) */
  word-wrap: break-word;      /* För äldre webbläsare */
  word-break: break-word;     /* Extra fallback */
}

.card-details-data a {
  color: black;
}


.no-background {
  border: none;
  background: none;
}

.navbar-static-top {
  background: #f5f5f5;
}

.navbar-default {
  border: none;
}

.navbar-top-links > li > a {
  color: black;
  text-shadow: none;
}

.navbar-top-links,
.navbar-top-links li {
  align-items: center;
  display: flex;
}

.navbar-top-links {
  gap: 15px;
}

.table {
  background-color: #f0f0f0;
  border-radius: 10px;
}
.table .footer-row{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.table .footer-row th{
  font-weight: bold;
}
.table-list {
  background-color: white;
  border-radius: 10px;
}

.throughput-list {
  border-radius: 10px;
  margin-right: 15px;
  margin-left: 15px;
}

.throughput-btn-add {
  color: white;
  border: none;
  padding: 3px;
  width: 25px;
  border-radius: 50%;
  margin-top: 5px;
  position: relative;
  top: 22px;
}

button.option-btn-add {
  top: inherit;
  margin-top: 0;
  margin-bottom: 5px;
  margin-left: 15px;
}

/* Regelns åtgärder (Objekt → Regler, expanderad rad): samma tabell som listorna men tätare, och samma padding i
   rubrik och rader så att kolumnerna linjerar (table-sm gav raderna mindre padding än rubriken). */
.table.partrule-actions-table {
  margin: 8px 0 0;
}

.table.partrule-actions-table > thead > tr > th,
.table.partrule-actions-table > tbody > tr > td {
  padding: 8px 12px;
  vertical-align: middle;
}

/* 3D-vyn i regelåtgärderna (placera objekt, mått/text, kameravy): smal inställningspanel till vänster och
   förhandsvisningen till höger, lika hög i alla tre. Under 992px ligger förhandsvisningen överst i full bredd och
   panelen under den utan egen scroll (dialogen scrollar). */
.rule-viewer {
  display: flex;
  height: min(640px, calc(100vh - 300px));
  min-height: 380px;
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

.rule-viewer__panel {
  flex: 0 0 272px;
  width: 272px;
  padding: 10px 12px;
  overflow-y: auto;
  border-right: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
}

.rule-viewer__canvas {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background-color: #e0e0e0;
}

.rule-viewer__canvas canvas {
  position: relative !important;
  top: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.rule-viewer__toolbar {
  margin-bottom: 8px;
}

/* Hopfällbara avsnitt: fieldset/legend utan ram, åtskilda med en linje. */
.rule-viewer__section {
  min-width: 0;
  margin: 0;
  padding: 6px 0 10px;
  border: 0;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.rule-viewer__section > legend {
  display: flex;
  float: none;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

.rule-viewer__section > legend.rule-viewer__legend-static {
  cursor: default;
}

.rule-viewer__section > legend > .bi {
  font-size: 11px;
  color: var(--bs-secondary-color);
}

.rule-viewer__section > legend > span:not(.badge) {
  flex: 1 1 auto;
}

.rule-viewer__field {
  min-width: 0;
  margin-top: 8px;
}

.rule-viewer__field > label {
  display: block;
}

.rule-viewer__field--first {
  margin: 0 0 10px;
}

.rule-viewer__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 8px;
}

/* X/Y/Z: axelbokstaven i en smal kolumn före fältet. */
.rule-viewer__xyz {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
  margin-top: 4px;
}

.rule-viewer__xyz > label {
  margin: 0;
}

.rule-viewer__hint {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  color: var(--bs-secondary-color);
}

@media (max-width: 991px) {
  .rule-viewer {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .rule-viewer__canvas {
    order: -1;
    flex: 0 0 auto;
    height: clamp(240px, 45vh, 420px);
  }

  .rule-viewer__panel {
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
    border-top: 1px solid var(--bs-border-color);
    border-right: 0;
  }
}

/* Rubrikraden: <thead> (fas 3b). */
table.table-list > thead > tr {
  background-color: #f0f0f0;
}

.table-header-row th.rounded-top-left {
  border-top-left-radius: 10px;
}

.table-header-row th.rounded-top-right {
  border-top-right-radius: 10px;
}

.form-row {
  padding-top: 30px;
}

.article-checkbox {
  width: 100%;
  cursor: pointer;
  padding-right: 10px;
  font-size: 15px;
  margin: 3px;
}

.profile-image {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
  transform: translate3d(0px, 0px, 0.1px);
  overflow-clip-margin: unset;
}

/* Image för customer */

.img-container-customer img {
  object-fit: contain;
  transform: translate3d(0px, 0px, 0.1px);
  overflow-clip-margin: unset;
  top: 0;
  left: 0;
  aspect-ratio: 1 / 1;
  max-height: 80%;
  max-width: 80%;
  border-radius: 0;
}

.img-container-customer img.portrait-image {
  height: 110px;
  width: 110px;
  object-fit: cover;
  border-radius: 50%;
}

.img-container-customer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: auto;
}

.img-container-customer svg {
  position: absolute;
  top: 0;
  left: 0px;
  height: 100%;
  padding: 30px;
  object-fit: inherit;
}

.reseller-placeholder-img {
  opacity: 0.7;
  width: 90%;
}

.img-fluid {
    width: 100%;
    background-color: #e0e0e0;
}

.reseller-name {
  color: #3e3d3b;
  padding-left: 10px;
  margin-top: 10px;
}

.info-row {
  margin-left: 15%;
  position: relative;
  bottom: 7px;
}

.info-row label {
  font-weight: 500;
}

.info-input {
  background-color: #fff;
}

.info-title {
  font-size: 16px;
  font-weight: 700;
}

/* Rubrik som fäller ut/ihop sitt avsnitt (StartPartComplementaryParts): knappen ser ut som rubriktexten. */
.info-title > .info-title-toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.info-text {
  margin-top: 40px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  max-width: 300px;
  text-align: left;
}

.info-secondary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.info-secondary > div {
  flex: 1;
}

/* Buttons — knapprader: bara layout. Knapparna själva ser ut som överallt annars (BS5-standard + _app-components). */
.button-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* De flesta rader har knapparna i en inre <div> (form-actions-mönstret) — raden gap når inte dit, så även den inre
   behållaren blir en flexrad med samma avstånd. */
.button-row > div:not(.float-end) {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  align-items: center;
  gap: 10px;
}

/* Radbrytande, vänsterställd variant (listsidornas verktygsrader, Inställningar → Extern data). */
.button-row.button-row-form {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

/* float-end fungerar inte i en flexrad (raden var inline-block förut) — högerställ med marginal i stället. */
.button-row.button-row-form > .float-end {
  margin-left: auto;
}

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
}

a.disabled-link i {
  opacity: 0.5;
  cursor: not-allowed;
}

button.no-background:disabled i {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn:disabled:focus {
  box-shadow: none;
}

.file-upload-container,
.custom-file-upload {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.file-upload-container {
  border: 2px dashed #ccc;
  background-color: #fafafa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  position: relative;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.file-upload-container:hover {
  border-color: #888;
  background-color: #f9f9f9;
}

.custom-file-upload {
  cursor: pointer;
}

.custom-file-upload i {
  font-size: 24px;
  margin-bottom: 8px;
}

.custom-file-upload span {
  font-size: 14px;
  color: #777;
  text-align: center;
  line-height: 1.5;
}

.file-upload-container input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-upload-container small {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}


.input-icon-wrapper,
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrapper input {
  padding-right: 30px;
  width: 100%;
}

.input-icon-wrapper i {
  position: absolute;
  left: 10px;
  color: #aaa;
  pointer-events: none;
}

.list-view-input::placeholder {
  position: relative;
  left: 30px;
}

.input-icon-wrapper input:focus + i,
.list-view-input:focus::placeholder,
.input-icon-wrapper input:not(:placeholder-shown) + i {
  opacity: 0;
}

.input-icon-wrapper input:focus + i {
  pointer-events: none;
}

.input-icon-wrapper input:not(:placeholder-shown) + i {
  pointer-events: none;
}

.text-success::before {
  color: #202e48;
}

.bi-trash:before {
  position: relative;
  right: 0.5px;
  top: 0.5px;
}

.hover-thumbnail {
  display: none;
}

/* Visa thumbnailn när man hovrar över raden */
tr:hover .hover-thumbnail {
  display: block;
}

/* Image Preview */
.image-preview-container {
  margin-top: 20px;
  text-align: center;
}

.image-preview {
  max-width: 100%;
  max-height: 100px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px;
  background: #f9f9f9;
}

.panel-buttons {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .panel-buttons {
  opacity: 1;
}

/* Login Page */

/* Språkraden ovanför är 50px — sidan fyller resten, utan en onödig rullning. */
#login-page {
  display: flex;
  min-height: calc(100dvh - 50px);
}

.left-panel {
  flex: 1;
  background-image: url("/images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.right-panel {
  flex: 1;
  background: #fff;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.branding .loginpage-logo {
  width: 160px;
  margin-bottom: 20px;
}

.login-form {
  width: 320px;
  margin: auto;
}

.login-form label {
  font-weight: 600;
}

/* Inloggningen använder appens vanliga fält och knappar (form-control, btn-primary, btn-default) — samma mått och
   radie som resten av appen i stället för egna runda "piller". */
.login-form h2 {
  margin-bottom: 30px;
}

.login-field {
  margin-bottom: 15px;
}

.login-field label {
  margin-bottom: 5px;
}

/* Av/på-reglage — <toggle-switch> (App/Directives/ToggleSwitch), appens kryssruta i tabeller, listor och filterrader.
   Är en <button role="switch">; etiketten (innehållet) står till höger. Minst lika hög som fälten i samma rad. */
.slide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--app-control-height, 35px);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
}

.slide-toggle.disabled {
    cursor: default;
    opacity: 0.6;
}

.slide-toggle:focus {
    outline: none;
}

.slide-toggle:focus-visible .slide-toggle-track {
    box-shadow: 0 0 0 .2rem var(--app-focus-ring);
}

.slide-toggle-label:empty {
    display: none;
}

.slide-toggle-track {
    position: relative;
    width: 34px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    transition: background 0.1s;
    flex-shrink: 0;
}

.slide-toggle.on .slide-toggle-track {
    background: var(--app-primary, #202e48);
}

.slide-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: left 0.1s;
}

.slide-toggle.on .slide-toggle-thumb {
    left: 18px;
}


.external-logins .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
}

.separator hr {
  flex: 1;
  height: 1px;
  background-color: #ccc;
  border: none;
}

.separator span {
  margin: 0 12px;
  color: #888;
  font-weight: 500;
}

.external-logins {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* SSO-knapparna: vanliga sekundärknappar (btn btn-default) med leverantörens ikon framför texten. */
.btn-external {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
}

.options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.remember-me {
  margin: 0;
}

.remember-me .form-check-input {
  border-color: #8a939d;
}

.remember-me .form-check-label {
  font-weight: normal;
  cursor: pointer;
}

/* "Visa i IFS | Hämta från extern källa" under artikelnumret: lika mycket luft på båda sidor om strecket. */
.erp-links-separator {
  margin: 0 6px;
  color: var(--bs-secondary-color);
}

.forgot-link {
  font-size: 14px;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}
.loginpage-logo {
  position: absolute;
  top: 80px;

  transform: translateX(-50%);
  width: 140px;
}

.branding {
  max-width: 400px;
  text-align: center;
  padding: 0;
}

.branding h1 {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.branding strong {
  font-weight: 700;
}

.subheading {
  font-size: 16px;
  opacity: 0.85;
  margin-top: 20px;
}

/* Forgot Password Page */

.forgot-wrapper,
.forgot-form {
  display: flex;
  flex-direction: column;
}

.forgot-wrapper {
  position: relative;
  /* Under språkraden (50px) — ingen onödig rullning; appens typsnitt (inte ett eget). */
  min-height: calc(100dvh - 50px);
  padding-bottom: 60px;
  align-items: center;
  justify-content: center;
}

.lock-icon {
  width: 120px;
}

.forgot-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
}

.forgot-form {
  width: 320px;
  gap: 15px;
}
.forgot-form label {
  margin-bottom: 0px;
}


.back-link,
.back-link:hover {
  text-decoration: none;
}

.back-link {
  position: relative;
  right: 110px;
  margin-top: 14px;
  color: black;
  font-weight: 400;
  align-items: center;
}

.password-wrapper {
  position: relative;
}

.password-wrapper .form-control {
  padding-right: 40px;
}

/* Visa/dölj lösenord: alltid synlig (syntes förut bara vid hover — inte alls med tangentbord eller pekskärm). */
.toggle-password-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bs-secondary-color);
  transform: translateY(-50%);
  cursor: pointer;
}

.toggle-password-btn:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.toggle-password-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--app-focus-ring);
}

/* Mobilanpassning */

@media (max-width: 768px) {
  #login-page {
    flex-direction: column;
  }

  .left-panel {
    display: none;
  }

  .right-panel {
    width: 100%;
    padding: 40px 20px;
  }

  .login-form {
    width: 100%;
    max-width: 320px;
  }
}

/* De publika sidorna (PublicStart, EditorPublic, Begär offert) — fas 4, 2026-09-26: samma komponenter, klasser och
   utseende som internt, men ett storlekssteg större för anonyma besökare (ofta pekskärm, inbäddat på kunders
   webbplatser): fält och knappar är 42px med 16px text (16 * 1.5 + 2 * 8 + 2 = 42). .btn-sm/.btn-xs och
   .form-control-sm behåller sina mått. Reglage (<yes-no-toggle>, <toggle-switch>) följer --app-control-height. */
.public-configurator {
    --app-control-height: 42px;
}

/* :where() — specificiteten är .btn/.form-control:s egen, så komponenters och sidors egna regler vinner som vanligt. */
.public-configurator :where(.btn:not(.btn-sm, .btn-xs, .btn-lg)) {
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: 1rem;
}

.public-configurator :where(.form-control:not(.form-control-sm, .form-control-lg)) {
    padding: .5rem .75rem;
    font-size: 1rem;
}

/* EditorPublic på telefon: ett svep nedåt när sidan redan står överst laddade om sidan (webbläsarens
   pull-to-refresh). Konfiguratorn rullar aldrig själva dokumentet, så överrullningen stängs av på det. */
html:has(editor-public .public-configurator:not(.embedded)),
body:has(editor-public .public-configurator:not(.embedded)) {
    overscroll-behavior-y: none;
}

/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./Style/themes.css ***!
  \************************************************************************************************/
:root {
  --primary-color: #202E48;
  --secondary-color: #2a3c5e;
  --background-color: #f5f5f5;
  --icon-color: #ffffff;
  --text-color-primary: #000000;
  --text-color-secondary: #ffffff;

  --button-text-color: var(--icon-color);
}

/* UI-komponenter */
.navbar {
  background-color: var(--primary-color);
}

.navbar a {
  color: var(--secondary-color);
}

/* Knappgrupper, primärknappar och dialogrubriker följer temat via --app-* i Style/bootstrap/_app-components.scss
   (även på de publika sidorna). */

.public-configurator:not(.read-only) .sidebar {
  background-color: transparent !important;
}

.sidebar {
  background-color: var(--primary-color) !important;
}

.public-configurator .sidemenu-bottom {
  display: none !important;
}

.sidemenu-bottom {
  background-color: var(--primary-color) !important;
}

.listview-icons {
  background-color: var(--primary-color) !important;
  color: var(--icon-color) !important;
}

.listview-icons-success  { background-color: #5cb85c !important; color: #fff !important; }
.listview-icons-warning  { background-color: #f0ad4e !important; color: #fff !important; }
.listview-icons-danger   { background-color: #d9534f !important; color: #fff !important; }

.sidebar .active>a::before,
.sidebar a:hover::before {
  background-color: var(--secondary-color) !important;
}

.hovered-option {
  background-color: var(--secondary-color) !important;
}

.delete-btn {
  color: var(--primary-color) !important;
}

.panel-copy-icon {
  color: var(--primary-color) !important;
}


.throughput-btn-add {
  background-color: var(--primary-color) !important;
}

.theme-color-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.selected-theme-icon {
  margin-left: 8px;
  color: var(--primary-color);
  font-size: 14px;
  vertical-align: middle;
  display: inline-block;
}

.navbar-static-top {
  background-color: var(--background-color) !important;
}

body {
  color: var(--text-color-primary);
}

.sidebar,
.sidebar a,
.sidebar .active>a,
.sidebar li {
  color: var(--text-color-secondary);
}

.sidemenu-icon-mask {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--icon-color);
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.sidemenubrand {
  color: var(--text-color-secondary);
}

.start-icon {
  -webkit-mask-image: url('/images/svg/start-icon.svg');
  mask-image: url('/images/svg/start-icon.svg');
}

.reseller-icon {
  -webkit-mask-image: url('/images/svg/reseller-icon.svg');
  mask-image: url('/images/svg/reseller-icon.svg');
}

.object-icon {
  -webkit-mask-image: url('/images/svg/object-icon.svg');
  mask-image: url('/images/svg/object-icon.svg');
}

.setting-icon {
  -webkit-mask-image: url('/images/svg/setting-icon.svg');
  mask-image: url('/images/svg/setting-icon.svg');
}

/* Ikoner i temats ikonfärg (den publika sidomenyns varianter längre ned har högre specificitet) */
.fa-sync-alt,
.fa-cubes,
.bi-x-lg,
.fa-puzzle-piece,
.fa-file,
.fa-image,
.fa-cloud-upload-alt,
.fa-box,
.fa-ruler,
.fa-expand,
.fa-camera,
.fa-cube {
  color: var(--icon-color) !important;
}

/* Samma ikonfärg för Bootstrap Icons-motsvarigheterna i sidomenyerna (<sidenav>/<editor-sidenav>, fas 2b).
   Scopat till menyerna — samma ikoner på andra ställen ska inte tvingas till ikonfärgen. */
.sidenav-root .bi-arrow-clockwise,
.sidenav-root .bi-boxes,
.sidenav-bar .bi-boxes,
.sidenav-root .bi-puzzle,
.sidenav-root .bi-image,
.sidenav-root .bi-upload,
.sidenav-root .bi-box-seam,
.sidenav-root .bi-box,
.sidenav-root .bi-camera,
.sidenav-root .bi-arrows-fullscreen,
.sidenav-root .bi-file-earmark {
  color: var(--icon-color) !important;
}

.document-icon {
  -webkit-mask-image: url('/images/svg/document-icon.svg');
  mask-image: url('/images/svg/document-icon.svg');
}

/* Publika konfiguratorns verktygslista (<sidemenu>, EditorPublic): i läsläge är sidomenyn mörk och ikonerna vita;
   annars svävar listan över modellen och ikonerna har temafärgen, vita när raden hovras (raden får mörk bakgrund). */
.public-configurator .side-menu .bi {
  color: var(--icon-color) !important;
}

.public-configurator:not(.read-only) .side-menu li:not(.active) > a > .bi {
  color: var(--primary-color) !important;
}

.public-configurator:not(.read-only) .side-menu li > a:hover > .bi {
  color: var(--icon-color) !important;
}

.editor-side-tools .btn i.fa,
.editor-side-tools .btn i.bi {
  color: inherit !important;
}


.listview-icons-big {
  background-color: var(--primary-color) !important;
}

.ui-state-default {
  background-color: var(--primary-color) !important;
}

ul.line-style::before,
ul.line-style li::before {
  background-color: var(--icon-color) !important;
}

.public-configurator:not(.read-only) ul.line-style::before,
.public-configurator:not(.read-only) ul.line-style li::before {
  background-color: var(--text-color-primary) !important;
}


.input-color-picker {
  margin-bottom: 8px;
}

.camera-mode-selected {
  color: var(--text-color-secondary) !important;
}

/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./Style/mobile.css ***!
  \************************************************************************************************/
/* Mobil och surfplatta — appens egna sidor (<sidenav>). Laddas sist (src/app.js) så att den vinner över
   site.css vid lika specificitet. Brytpunkter som resten av appen:
   < 768px  = telefon, 768–991px = surfplatta i stående läge (båda har den dockade menyraden i botten).
   EditorPublic (<sidemenu>) har ingen .sidenav-root och berörs inte — alla regler här är scopade till den,
   utom avsnittet "Publika sidor" längst ner (PublicStart/EditorPublic, scopat till .public-configurator). */

/* ------------------------------------------------------------------------------------------------------
   Sidans marginaler: #page-wrapper + .container-fluid gav 30px per sida på telefon (60px av 390).
   Radernas negativa marginaler tar ut .container-fluid:s padding, så den behålls — bara omslaget nollas.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    body:has(.sidenav-root) #page-wrapper > .container-fluid {
        padding-top: 4px;
    }
}

/* 15px — lika mycket som radernas negativa marginal (BS3-gutter, app-base). Med mindre padding blev varje .row
   några pixlar bredare än sidan, och #page-wrapper fick en horisontell scroll (som också flyttade upp fästa rader). */
@media (max-width: 767px) {
    body:has(.sidenav-root) #page-wrapper > .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ------------------------------------------------------------------------------------------------------
   Flikar: en rad som scrollar i sidled i stället för att bryta över tre rader.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper .nav-tabs,
    body:has(.sidenav-root) #page-wrapper .nav-pills {
        /* max-width: vissa rader (Objekt → Generellt/Bilder/…) är inline-flex och blev lika breda som innehållet,
           vilket gav hela sidan en horisontell scroll i stället för att raden själv scrollade. */
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body:has(.sidenav-root) #page-wrapper .nav-tabs::-webkit-scrollbar,
    body:has(.sidenav-root) #page-wrapper .nav-pills::-webkit-scrollbar {
        display: none;
    }

    body:has(.sidenav-root) #page-wrapper .nav-tabs > .nav-item,
    body:has(.sidenav-root) #page-wrapper .nav-pills > .nav-item {
        flex-shrink: 0;
    }

    body:has(.sidenav-root) #page-wrapper .nav-tabs .nav-link,
    body:has(.sidenav-root) #page-wrapper .nav-pills .nav-link {
        white-space: nowrap;
    }

    body:has(.sidenav-root) .header-with-tabs {
        padding: 8px 0 0;
    }

    /* Fler flikar åt sidan: kanten tonas ut (klasserna sätts av App/Services/ScrollableNavHints.ts). */
    body:has(.sidenav-root) #page-wrapper .nav-scroll-more-right {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }

    body:has(.sidenav-root) #page-wrapper .nav-scroll-more-left {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
    }

    body:has(.sidenav-root) #page-wrapper .nav-scroll-more-left.nav-scroll-more-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    }
}

/* ------------------------------------------------------------------------------------------------------
   Kortlistor (gallery-card) på telefon: kompakta rader.

       +--------+ Rubrik ....................  (kopiera)(ta bort)
       |  bild  | statusbricka
       |        | 1000219_r1 · Addovation · 2026-09-24      <- en rad, ellips
       +--------+
       [ Redigera                    ] [->] [dela]          <- hela kortets bredd

   Gallery.Card.Template.html lägger bild, rubrik och sidans innehåll som direkta barn till .card-flex, så
   gridet fungerar för alla listor utan ändringar i mallarna: bilden spänner över textraderna och
   knappraden (grid-column: 1 / -1) placeras automatiskt under både bild och text.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body:has(.sidenav-root) {
        --card-thumb: 64px;
        --card-pad: 12px;
    }

    body:has(.sidenav-root) .flexbox {
        margin-left: 0;
        margin-right: 0;
        gap: 10px;
    }

    body:has(.sidenav-root) .flexbox > .flexitem,
    body:has(.sidenav-root) .flexbox > .panel-flex-items {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 0;
    }

    body:has(.sidenav-root) .gallery-card {
        border-radius: var(--bs-border-radius-lg);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    }

    body:has(.sidenav-root) .gallery-card .card-flex {
        position: relative;
        display: grid;
        grid-template-columns: var(--card-thumb) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 12px;
        row-gap: 0;
        align-content: start;
        padding: var(--card-pad);
    }

    body:has(.sidenav-root) .gallery-card .card-flex > * {
        grid-column: 2;
        min-width: 0;
        margin: 0;
    }

    /* Bilden spänner över de tre textraderna och fyller rutan. */
    body:has(.sidenav-root) .gallery-card .card-flex > .card-header {
        position: static;
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: var(--card-thumb);
        height: var(--card-thumb);
        min-height: 0;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        background-color: #f1f3f6;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer a {
        display: contents;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        padding: 4px;
        object-fit: contain;
    }

    /* Renderingar (projekt, objekt, material) har mycket luft runt motivet — beskär i stället för att krympa.
       Logotyper (återförsäljare) visas hela. */
    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/api/images/project/"],
    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/api/images/object/"],
    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/api/images/texture/"] {
        padding: 0;
        object-fit: cover;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/api/images/object/"] {
        transform: scale(1.35);
    }

    /* Porträtt (användare) fyller hela rutan; platshållarikoner blir en dämpad symbol i mitten. */
    body:has(.sidenav-root) .gallery-card .img-container-customer img.portrait-image {
        padding: 0;
        border-radius: 0;
        object-fit: cover;
    }

    body:has(.sidenav-root) .gallery-card .img-container-customer img[src*="/images/svg/"] {
        padding: 10px;
        object-fit: contain;
        opacity: 0.5;
    }

    /* Standardavataren är fylld med temafärgen (site.css) — full styrka, men mask-rutan ska inte ha padding. */
    body:has(.sidenav-root) .gallery-card .img-container-customer img[src$="/images/svg/rounduser-icon.svg"] {
        opacity: 0.85;
        -webkit-mask-origin: content-box;
        mask-origin: content-box;
        background-clip: content-box;
    }

    /* Rubrik: en rad med ellips. */
    body:has(.sidenav-root) .gallery-card-title {
        flex-grow: 0;
        align-self: center;
        padding: 0;
    }

    body:has(.sidenav-root) .gallery-card .card-title-row {
        display: flex;
        align-items: center;
        gap: 6px;
        float: none;
        padding: 0;
    }

    body:has(.sidenav-root) .gallery-card .card-title-row > a {
        min-width: 0;
    }

    body:has(.sidenav-root) .gallery-card .card-title h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Detaljerna (Nummer: …, Kund: …) på en rad utan etiketter: "1000219_r1 · Addovation · 2026-09-24" */
    body:has(.sidenav-root) .gallery-card .card-details {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        line-height: 1.45;
        color: #6b7280;
    }

    body:has(.sidenav-root) .gallery-card .card-details-subtitle {
        display: none;
    }

    body:has(.sidenav-root) .gallery-card .card-details-data {
        display: inline;
        margin: 0;
        font-size: inherit;
        color: inherit;
    }

    /* Tomma värden ("-" på desktop, card-details-data--empty) och värden utan text visas inte i raden. */
    body:has(.sidenav-root) .gallery-card .card-details-data:empty,
    body:has(.sidenav-root) .gallery-card .card-details-data--empty,
    body:has(.sidenav-root) .gallery-card .card-details-data.material-editable:has(> span:empty) {
        display: none;
    }

    /* Avskiljaren sitter före varje följande värde (inte efter), så att ett dolt sista värde inte lämnar en ensam punkt. */
    body:has(.sidenav-root) .gallery-card .card-details-data ~ .card-details-data::before {
        content: '\00b7';
        margin: 0 6px;
        color: #b0b6bf;
    }

    /* ...men inte före första synliga värdet när det första är tomt. */
    body:has(.sidenav-root) .gallery-card .card-details > .card-details-data--empty:nth-child(2) + .card-details-subtitle + .card-details-data::before {
        content: none;
    }

    body:has(.sidenav-root) .gallery-card .card-details-data a {
        color: inherit;
    }

    /* Materialkortens redigeringspennor syns bara vid hover — på pekskärm var de osynliga men tog plats
       (glapp och en ensam punkt i detaljraden). Redigera-knappen täcker samma sak. */
    body:has(.sidenav-root) .gallery-card .material-edit-pencil {
        display: none;
    }

    /* Objektlistans brickor (Startdel, Publik webb) på detaljraden. */
    body:has(.sidenav-root) .addo3dobject-cards .gallery-card .addo3dobject-card-chips {
        display: inline-flex;
        margin: 0;
        vertical-align: 1px;
    }

    body:has(.sidenav-root) .addo3dobject-cards .gallery-card .card-details-data + .addo3dobject-card-chips {
        margin-left: 8px;
    }

    /* Offertnummer och status låg absolut över den stora bilden; här blir de en rad med brickor. */
    body:has(.sidenav-root) .gallery-card .project-erp-info {
        position: static;
        display: flex;
        align-items: center;
        gap: 6px;
        height: auto;
        padding: 0;
        margin-top: 3px;
        font-size: 12px;
        line-height: 1.4;
    }

    body:has(.sidenav-root) .gallery-card .project-erp-info:not(:has(*)) {
        display: none;
    }

    body:has(.sidenav-root) .gallery-card .project-erp-info .erp-quotation-no,
    body:has(.sidenav-root) .gallery-card .project-erp-info .erp-status {
        float: none;
    }

    body:has(.sidenav-root) .gallery-card .project-erp-info .erp-status:not([class*="badge"]):not([class*="label"]) {
        padding: 1px 8px;
        border-radius: 999px;
        background-color: #eef1f5;
        color: #4b5563;
        font-weight: 600;
    }

    /* ---- Knapprad (.card-actions): under både bild och text, hela kortets bredd ----
       Vanliga knappar i standardstorlek; textknapparna delar på bredden och ikonknapparna (btn-icon) är
       kvadratiska (site.css). */
    body:has(.sidenav-root) .gallery-card .card-flex > .card-actions {
        grid-column: 1 / -1;
        margin: 9px 0 0;
        padding: 0;
    }

    /* site.css placerar hörnknapparnas ikon absolut (right: 5px) — i en knapp av annan bredd hamnar den snett åt höger. */
    body:has(.sidenav-root) .gallery-card .panel-buttons .panel-copy-icon {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        transform: none;
        line-height: 1;
    }

    /* ---- Kort med en enda primär textknapp (Objekt, Material: "Redigera"): knappen till höger om texten i stället
       för en egen rad, så att kortet blir lika högt som bilden. Kort med flera knappar (Projekt, Kunder) och en
       ensam sekundär knapp med lång etikett ("Visa användare", btn-default) behåller raden — annars trängs rubriken
       ihop. Knappen är centrerad i höjdled, eller ligger mot bildens nederkant när kortet har hörnknappar uppe till
       höger. */
    body:has(.sidenav-root) .gallery-card .card-flex:has(> .card-actions > .btn-primary:only-child:not(.btn-icon)) {
        grid-template-columns: var(--card-thumb) minmax(0, 1fr) auto;
    }

    body:has(.sidenav-root) .gallery-card .card-flex > .card-actions:has(> .btn-primary:only-child:not(.btn-icon)) {
        grid-column: 3;
        grid-row: 1 / span 3;
        align-self: center;
        margin: 0;
    }

    body:has(.sidenav-root) .gallery-card:has(.panel-buttons .panel-heading-btn) .card-flex > .card-actions:has(> .btn-primary:only-child:not(.btn-icon)) {
        align-self: end;
    }

    body:has(.sidenav-root) .gallery-card .card-actions > .btn-primary:only-child:not(.btn-icon) {
        flex: 0 0 auto;
        max-width: 140px;
    }

    /* Utan egen knapprad räcker bildens höjd — ingen luft under den. */
    body:has(.sidenav-root) .gallery-card .card-flex:has(> .card-actions > .btn-primary:only-child:not(.btn-icon)) > .card-header {
        margin-bottom: 0;
    }

    /* ---- Hörnknappar (kopiera, ta bort): sida vid sida uppe till höger, i appens mörka färg som på desktop ----
       På desktop ligger de staplade över den stora bilden och syns bara vid hover. */
    body:has(.sidenav-root) .gallery-card .panel-buttons {
        position: absolute;
        top: calc(var(--card-pad) - 4px);
        right: calc(var(--card-pad) - 6px);
        z-index: 1;
        display: flex;
        flex-direction: row-reverse;
        gap: 2px;
        opacity: 1;
    }

    body:has(.sidenav-root) .gallery-card .panel-buttons .panel-heading-btn {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin: 0;
        border-radius: 50%;
        color: var(--primary-color, #202e48);
        font-size: 15px;
        line-height: 1;
    }

    body:has(.sidenav-root) .gallery-card .panel-buttons .panel-heading-btn:active {
        background-color: #eef1f5;
    }

    body:has(.sidenav-root) .gallery-card .panel-buttons .panel-heading-btn i {
        margin: 0 !important;
        color: inherit !important;
        font-size: inherit;
    }

    body:has(.sidenav-root) .gallery-card:has(.panel-buttons .panel-heading-btn) .card-title-row {
        padding-right: 30px;
    }

    body:has(.sidenav-root) .gallery-card:has(.panel-buttons .panel-heading-btn + .panel-heading-btn) .card-title-row {
        padding-right: 62px;
    }
}

/* ------------------------------------------------------------------------------------------------------
   Tabeller (listvyer, Översättningar, Artiklar …): scrollar i sidled inom sidan i stället för att klippas.
   display: block på själva tabellen gör den till scrollbehållare utan att mallarna behöver ett omslag;
   raderna ritas fortfarande som tabell (anonym tabellbox).
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper table.table-list,
    body:has(.sidenav-root) #page-wrapper table.table-striped {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ...och tbody blir tabellen, så att smala tabeller fortfarande fyller bredden (tabeller utan <thead>). */
    body:has(.sidenav-root) #page-wrapper table.table-list:not(:has(> thead)) > tbody,
    body:has(.sidenav-root) #page-wrapper table.table-striped:not(:has(> thead)) > tbody {
        display: table;
        width: 100%;
    }

    /* Med <thead> får rubrik och rader ligga kvar som radgrupper — webbläsaren lägger dem i en gemensam (anonym) tabell,
       så kolumnerna linjerar. Sista kolumnen tar resten av bredden så att smala tabeller ändå fyller sidan. */
    body:has(.sidenav-root) #page-wrapper table:is(.table-list, .table-striped) > thead > tr > th:last-child {
        width: 100%;
    }
}

@media (max-width: 767px) {
    body:has(.sidenav-root) #page-wrapper table.table-list > tbody > tr > td,
    body:has(.sidenav-root) #page-wrapper table.table-list > tbody > tr > th,
    body:has(.sidenav-root) #page-wrapper table.table-list > thead > tr > th {
        padding: 10px 12px;
    }
}

/* .first-row reserverade 128px till höger för de absolut placerade vy-knapparna (.listviewclass). På mobil ligger
   de i filterraden (<list-filters>) — utan knappar blev bara sökfältet onödigt smalt (t.ex. Material). */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper .first-row {
        padding-right: 0;
    }

    body:has(.sidenav-root) #page-wrapper .form-row {
        padding-top: 12px;
    }
}

/* ------------------------------------------------------------------------------------------------------
   Detaljformulär (Kund, Användare, Artikel, Tema …): varje avsnitt — h3.info-title följd av .row.info-row —
   ritas som ett vitt kort med rubriken överst och fälten i full bredd. På desktop ligger rubriken till
   vänster och fälten indragna 15 % (site.css), vilket på en telefon bara blev ett tomt vänsterfält.
   Ren CSS på syskonparet, så att mallarna inte behöver något omslag.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper .input-hr {
        display: none;
    }

    body:has(.sidenav-root) #page-wrapper .info-title:has(+ .info-row) {
        margin: 12px 0 0;
        padding: 14px 16px 6px;
        border-radius: 12px 12px 0 0;
        background-color: #fff;
        color: #6b7280;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* Alla avsnittsrader blir kortets kropp — även rader som fortsätter ett avsnitt utan egen rubrik
       (t.ex. Användare → Användarnamn/Roller). En rad utan rubrik före sig blir ett eget, helt rundat kort. */
    body:has(.sidenav-root) #page-wrapper .info-row {
        bottom: auto;
        margin: 12px 0 0;
        padding: 10px 1px 4px;
        border-radius: 12px;
        background-color: #fff;
    }

    body:has(.sidenav-root) #page-wrapper .info-title + .info-row {
        margin-top: 0;
        padding-top: 2px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    body:has(.sidenav-root) #page-wrapper .info-row + .info-row {
        margin-top: 0;
        padding-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    body:has(.sidenav-root) #page-wrapper .info-row:has(+ .info-row) {
        padding-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Nästlade rader i ett avsnitt (Egenskap: .row.mx-0) ska inte bli egna kort. */
    body:has(.sidenav-root) #page-wrapper .info-row .info-row {
        margin: 0;
        padding: 0;
        background: none;
    }

    /* Kolumnerna i kortet: BS3:s 15px sidopadding (app-base) blir kortets innermarginal. */
    body:has(.sidenav-root) #page-wrapper .info-row .info-input,
    body:has(.sidenav-root) #page-wrapper .info-row .form-control {
        min-height: 38px;
    }

    /* Ja/Nej- och av/på-reglagen i samma kort blir lika höga som fälten. */
    body:has(.sidenav-root) #page-wrapper .info-row {
        --app-control-height: 38px;
    }

    /* Jämn rytm mellan fälten: varje fält (en behållare med en etikett följd av en kontroll) får samma avstånd,
       även där mallen saknar bottom-buffer (t.ex. Kund → Kundnummer/Org nr/Prisfaktor i .info-secondary). */
    body:has(.sidenav-root) #page-wrapper .info-row div:has(> label + *) {
        margin-bottom: 14px;
    }

    /* Tomma distansrader (<div class=""><label>&nbsp;</label></div>) som bara fanns för desktop-rutnätet. */
    body:has(.sidenav-root) #page-wrapper .info-row div:is([class=""], :not([class])):has(> label:only-child):not(:has(input, select, textarea, button)) {
        display: none;
    }

    /* Dynamiskt objekt drogs ut 18,5 % åt vänster för att ta ut desktopens indrag — som inte finns här. */
    body:has(.sidenav-root) #page-wrapper .dynamic-object-outdent {
        margin-left: 0;
    }

    /* Knappar i fältgrupper (combobox: rensa/välj, översättningsglob …) har en fast höjd på 30px, medan fälten ovan
       är 38px på mobil. Knapparna sträcks i stället till fältets höjd, vilken den än är. */
    body:has(.sidenav-root) #page-wrapper .input-group > .btn {
        height: auto;
        min-height: 0;
        align-self: stretch;
    }

    body:has(.sidenav-root) #page-wrapper .info-row label {
        margin-bottom: 4px;
        font-size: 13px;
    }

    /* Formulärets Spara/Avbryt (.form-actions) ligger alltid fast precis ovanför menyraden. Fixed i stället för
       sticky: en sticky rad följer med formulärets slut — den lyfte från menyraden på korta formulär och när man
       scrollat till botten (utfyllnad/innehåll efter raden). Sidan reserverar radens höjd (se nedan). Raden i en
       dold flik är dold med sin flik. */
    body:has(.sidenav-root) #page-wrapper .form-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--sidenav-bar-height) + env(safe-area-inset-bottom));
        z-index: 1000;
        margin: 0 !important;
        padding: 10px 15px;
        border-top: 1px solid #e3e6ea;
        background-color: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    body:has(.sidenav-root) #page-wrapper .form-actions > div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding: 0;
    }

    /* Rader där knapparna ligger direkt i .form-actions (Objekt → Generellt). */
    body:has(.sidenav-root) #page-wrapper .form-actions:not(:has(> div)) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    body:has(.sidenav-root) #page-wrapper .form-actions .btn {
        width: auto;
        min-height: 38px;
        margin: 0;
        padding: 6px 12px;
        font-size: 14px;
    }

    /* Plats för den fasta raden i slutet av sidan, så att sista fältet går att scrolla fram. */
    body:has(.sidenav-root) #page-wrapper:has(.form-actions) > .container-fluid {
        padding-bottom: 76px;
    }

    /* Spara sist och bredast; Avbryt först. */
    body:has(.sidenav-root) #page-wrapper .form-actions .btn-primary {
        flex: 1 1 80px;
        order: 10;
    }

    /* Sidoåtgärder med ikon (Ta bort, Inaktivera, Återställ lösenord …) blir kvadratiska ikonknappar i sin färg, så
       att Spara ryms på samma rad (Användare hade fem knappar och Spara på en egen rad). Etiketten finns kvar för
       skärmläsare (font-size: 0 döljer bara visuellt) och i title-attributet. */
    body:has(.sidenav-root) #page-wrapper .form-actions .btn:is(.btn-danger, .btn-warning, .btn-info, .btn-success, .btn-default):has(i[class*="bi-"], i[class*="fa-"]) {
        flex: 0 0 38px;
        width: 38px;
        padding: 0;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body:has(.sidenav-root) #page-wrapper .form-actions .btn:is(.btn-danger, .btn-warning, .btn-info, .btn-success, .btn-default):has(i[class*="bi-"], i[class*="fa-"]) i {
        margin: 0;
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------------------------------------------
   Ikonknappar i tabeller (.listview-icons: redigera, kopiera, ta bort …). På desktop är de inline-element med
   padding, så varje knapps storlek beror på ikonens bredd och de bröt rad i smala kolumner (t.ex. Regler).
   Här: lika stora kvadrater med ikonen i mitten, på en rad.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body:has(.sidenav-root) #page-wrapper i.listview-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        margin-right: 6px;
        font-size: 13px;
        line-height: 1;
        vertical-align: middle;
    }

    body:has(.sidenav-root) #page-wrapper i.listview-icons::before {
        line-height: 1;
    }

    body:has(.sidenav-root) #page-wrapper td:has(> a > i.listview-icons),
    body:has(.sidenav-root) #page-wrapper td:has(.btn-icon),
    body:has(.sidenav-root) #page-wrapper .partrules-actions-cell {
        white-space: nowrap;
    }
}

/* ======================================================================================================
   Publika sidor (PublicStart, EditorPublic) — anonyma besökare, ingen menyrad. Scopat till deras egna
   klasser (.public-configurator / .public-start); komponenternas egna mallar har resten.
   ====================================================================================================== */
@media (max-width: 767px) {
    /* EditorPublic → Begär offert: luft ovanför rubriken, som inte heller ska gå in under stängknappen. */
    .public-configurator .request-offer-form {
        padding-top: 14px;
    }

    /* Mindre än de publika 42px-knapparna och i höjd med rubriken (formuläret börjar direkt under toppmenyn). */
    .public-configurator .request-offer-form .request-offer-close {
        top: 12px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .public-configurator .request-offer-form .tips-and-info-label {
        margin-top: 4px;
        padding-right: 48px;
        font-size: 20px;
        font-weight: 600;
    }

    /* EditorPublic: stegraden scrollar i sidled — tona ut kanten där fler steg finns (ScrollableNavHints). */
    .public-configurator:not(.embedded) ul.step-menu.nav-scroll-more-right {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }

    .public-configurator:not(.embedded) ul.step-menu.nav-scroll-more-left {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    }

    .public-configurator:not(.embedded) ul.step-menu.nav-scroll-more-left.nav-scroll-more-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    }
}

/* EditorPublic på låg liggande skärm (telefon på tvären): verktygslistan (bara ikoner, se EditorPublic.Styles.css)
   börjar under stegflikarna och produktrubriken i stället för bakom dem. .sidemenu-top ligger i Sidemenu-
   komponentens mall och nås därför bara härifrån. */
@media (min-width: 769px) and (max-height: 500px) {
    .public-configurator:not(.embedded):not(.read-only) .sidemenu-top {
        top: 140px !important;
    }
}