/* :root { --snap: 5; }*/
       
#debug-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}
#debug-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

.debug-rect {
    position: absolute;
    border: 2px dashed red;
    background: rgba(255, 0, 0, 0.08);
    box-sizing: border-box;
}

.mirror-x {
  transform: scaleX(-1);
}

#armrest-preview-img {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
        /* Pogled in platno */
        #view-port { flex: 1; overflow: auto; position: relative; background: #cbd5e1; display: flex; padding: 50px; scroll-behavior: auto; }
        #workspace { 
            width: 400px; height: 350px; background: white; position: relative; flex-shrink: 0;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
            background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px), linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
            background-size: 25px 25px;
        }
        .placed.composite {
    position: absolute;
    /*box-sizing: border-box;*/
}





        #module-preview {
    position: absolute;
    pointer-events: none;
    opacity: 0.6;
  
}

#workspace {
    position: relative;
}



  .child_armrest .el-controls {
    display: none !important;
}
        #main-render-preview {
            transition: opacity 0.3s ease;
        }

        #main-render-preview.loading {
            opacity: 0.3;
        }

        #main-render-frame.is-detached {
            position: fixed !important;
            width: 420px;
            max-width: calc(100vw - 16px);
            max-height: calc(100vh - 16px);
            z-index: 950 !important;
            overflow: visible !important;
            box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
            cursor: default;
        }

        #main-render-frame.is-detached #main-render-dragbar {
            display: flex;
            top: -42px;
            left: 0;
            right: auto;
            width: 140px;
        }

        #main-render-frame.is-detached #main-render-resize {
            display: flex;
            bottom: -44px;
            left: auto;
            right: 0;
        }

        #main-render-frame.is-detached #main-render-detach-btn {
            display: none;
        }

        #main-render-dragbar {
            display: none;
            cursor: move;
            user-select: none;
            touch-action: none;
        }

        #main-render-resize {
            display: none;
            touch-action: none;
        }

        #main-render-drawer-toggle {
            display: none;
        }

        #about-modal-bg {z-index:100;}
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .animate-spin {
            animation: spin 1s linear infinite;
        }
        .collision-error {
            outline: 2px dashed red !important;
            background-color: rgba(255, 0, 0, 0.1) !important;
        }
        .opis {  text-align: center;  font-size: clamp(8px, 1.5vw, 12px); margin-top:-30px;z-index:2;}

        .snap-success {
            outline: 2px solid #22c55e !important; /* Zelena barva */
            transition: outline 0.3s ease;
        }
    

        .module-dim-text,
        .armrest-text {
            position: absolute;
            z-index: 1;
            pointer-events: none;
            font-weight: 600;
            color: #374151;
        }

            .module-dim-text {
            position: absolute;
            top: 70%;
            left: 50%;
           transform: translate(-50%, -50%);
            font-size: 10px;
            font-weight: normal;
            
            pointer-events: none; /* Da ne ovira klikov na modul */
            white-space: pre-line;
            text-align: center;
        width:80%;
            margin-top: -4px;
        }

         .module-dim-text .title{
  font-weight: 600;
  /* po želji: font-size, opacity, ... */
}

        .armrest-text {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    font-size: 11px;
}
.headrest-indicator {
    z-index: 2;
}
       
            /* Ozadje za sliko v modalnem oknu */
        #modal-image {
            background-color: white; /* Tukaj določiš barvo */
           /* background-image: 
                linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);*/
           /* background-size: 20px 20px;*/
           /* background-position: 0 0, 0 10px, 10px -10px, -10px 0px;*/
            background-color: white;
        }

        #preview-size-text {
            pointer-events: none;
            white-space: pre-line;
            text-align: center;
            /* Da tekst ne "uide" iz majhnih okvirjev */
            font-size: clamp(8px, 1.5vw, 12px); 
        }

        #preview {
    position: absolute;
    pointer-events: none;
}
     
     /* Overlay zameglitev */
body.mode-print-active::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7); /* Temno modro-siva prosojnost */
    backdrop-filter: blur(10px);        /* Zameglitev ozadja */
    -webkit-backdrop-filter: blur(10px);
    z-index: 40;                        /* Pod workspace, nad orodji */
    pointer-events: none;
}

/* Prepričaj se, da je workspace nad zameglitvijo */
#workspace.mode-print {
    z-index: 50 !important;
    position: relative !important;
    margin: 40px auto !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    background: white !important;
    background-image: none !important;
    transition: none !important;
}

/* Element za vlečenje */
.print-render-placement {
    /* Preprečimo izbiro besedila med vlečenjem */
    user-select: none;
    -webkit-user-drag: none;
    
    /* Zagotovimo, da je nad vsem v overlayu */
    z-index: 100 !important;
    
    /* Pomembno: Ko JS začne nastavljati left/top, 
       moramo onemogočiti desni rob, če je bil nastavljen s Tailwindom */
    transition: opacity 0.2s ease;
}

/* Onemogočimo interakcijo z vsebino znotraj (sliko), 
   da ne "ukrade" dogodka mousedown */
.print-render-placement img {
    pointer-events: none;
    display: block;
    width: 100%;
    height: auto;
}

/* Vizualni indikator, ko uporabnik drži element */
.print-render-placement:active {
    cursor: grabbing !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

#draggable-render {
    /* Pove brskalniku, da ta element sam obdeluje vse kretnje */
    touch-action: none !important;
    /* Prepreči iOS "odskakovanje" (rubber-banding) */
    overscroll-behavior: contain;
}

.print-render-placement {
    width: 16rem;
    cursor: move;
    touch-action: none !important;
    overscroll-behavior: contain;
    transform: scale(var(--print-render-scale, 1));
    transform-origin: top left;
}

.print-render-resize-handle {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 2px solid #ffffff;
    background: #2563eb;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: nwse-resize;
    pointer-events: auto;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
    z-index: 2;
}

.print-render-resize-handle i {
    font-size: 10px;
    pointer-events: none;
}

                        /* Definicija animacije za Header (pade od zgoraj) */
                        @keyframes slideInDown {
                            from {
                                transform: translateY(-100%);
                                opacity: 0;
                            }
                            to {
                                transform: translateY(0);
                                opacity: 1;
                            }
                        }

                        /* Definicija animacije za SideMenu (prileze z leve) */
                        @keyframes slideInLeft {
                            from {
                                transform: translateX(-50px);
                                opacity: 0;
                            }
                            to {
                                transform: translateX(0);
                                opacity: 1;
                            }
                        }

                        /* Razredi, ki jih bomo dodali elementom */
                       /* .animate-header {
                            animation: slideInDown 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
                        }
*/
                   /*     .animate-sidemenu {
                            animation: slideInLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
                            animation-delay: 0.2s;*/ /* Malo zamika za "layering" efekt */
                         /*  opacity: 0; *//* Začetno skrito, dokler se ne sproži animacija */
                  
                      /*  }***/


                           .module-item {
                                /* ... tvoje obstoječe nastavitve ... */
                                transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
                                backface-visibility: hidden; /* prepreči tresenje pikslov */
                            }

                            .module-item:hover {
                                transform: scale(1.05); /* Povečava za 5% */
                                border-color: #3b82f6; /* Modra barva, ki jo že uporabljaš */
                                background-color: #f8fafc; /* Rahlo obarvano ozadje */
                                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                                z-index: 10;
                            }

                            /* Ko uporabnik klikne na modul, se ta za trenutek malenkost pomanjša (klik efekt) */
                            .module-item:active {
                                transform: scale(0.98);
                            }



/* Skrij overlay pri dejanskem tisku na tiskalnik */
@media print {
    body.mode-print-active::before {
        display: none !important;
    }
    #workspace.mode-print {
        margin: 0 !important;
        box-shadow: none !important;
    }
}

.placed.note-element {
    z-index: 50 !important;
    background: #fcf4b9e2; /* Svetlo rumena */
    border: 1px solid #eab308;
    color: #854d0e;
    padding: 8px;
    font-size: 10px;
    /* box-shadow: 2px 2px 8px rgba(0,0,0,0.1); */
    min-width: 80px;
    min-height: 40px;
    
    
    /*  KLJUČNO ZA NOVE VRSTICE IN PRELOM BESEDILA */
    white-space: pre-wrap; 
    word-break: break-word; 


    /* Flex je super za centriranje, a z več vrsticami se lepše obnaša block ali flex-column */
    display: flex;
    flex-direction: column; /* Omogoči lepše zlaganje vrstic */
    align-items: center;
    justify-content: center;
    text-align: center;
    
    overflow: visible;
    cursor: text;
    border-radius: 4px;
    font-family: sans-serif;
    line-height: 1.4; /* Malce povečan razmik za boljšo berljivost več vrstic */
}

.placed.note-element:hover,
.placed.note-element.selected,
.placed.note-element.is-selected,
.placed.note-element.is-editing-note {
    z-index: 60 !important;
}

.placed.note-element .note-dragbar {
    position: absolute;
    left: 0;
    top: -24px;
    height: 24px;
    min-width: 85px;
    max-width: 100%;
    padding: 0 8px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(226, 232, 240, 0.95);
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
    cursor: move;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    z-index: 35;
    white-space: nowrap;
}

.placed.note-element:hover .note-dragbar,
.placed.note-element.selected .note-dragbar,
.placed.note-element.is-selected .note-dragbar {
    opacity: 1;
    pointer-events: auto;
}

.placed.note-element .note-dragbar i {
    pointer-events: none;
}

/* Ko je opomba izbrana, uporabi tvoj obstoječi oranžni okvir */
.placed.note-element.selected {
    outline: 1px solid #f97316 !important;
}

.placed.note-element .note-content {
    width: 100%;
    height: 100%;
    outline: none;
   white-space: pre-wrap;
    word-break: break-word;
  
   /*align-items: center;*/
    /*justify-content: center;*/
    text-align: left;
}

.placed.note-element.is-editing-note {
    cursor: text;
}

.placed.note-element.is-editing-note .note-content {
    display: block;
    text-align: left;
}

.placed.note-element.is-editing-note .resize-handle {
  pointer-events: none;
}


/* Ko je aktiven print mode, onemogočimo stranski meni */
body.mode-print-active #sideMenu {
    pointer-events: none !important; /* Prepreči vse klike in drag-drop */
    opacity: 0.5;                   /* Vizualno nakaže, da je meni neaktiven */
    filter: grayscale(100%);        /* Odstrani barve za boljši fokus na ponudbo */
    transition: all 0.3s ease;
}

body.mode-print-active #arch-toolbox,
body.mode-print-active #quick-template-toolbox,
body.mode-print-active #material-toolbox,
body.mode-print-active #composite-modal,
body.mode-print-active #pdf-btn,
body.mode-print-active #promoBubble,
body.mode-print-active #promoMinBtn,
body.mode-print-active #instructions-btn,
body.mode-print-active #fullscreen-btn {
    display: none !important;
}

#composite-toolbox-content {
    max-height: min(76vh, calc(100vh - 140px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#composite-toolbox-content::-webkit-scrollbar {
    width: 8px;
}

#composite-toolbox-content::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
}

#composite-toolbox-content::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
}

#composite-toolbox-content::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}


@media (max-width: 768px) {
    #fullscreen-btn {
        display: none !important;
    }

    #composite-modal {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 60px !important;
        transform: translateX(-50%) !important;
        width: min(340px, calc(100vw - 1.5rem)) !important;
        max-height: 85vh !important;
        z-index: 99999 !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2) !important;
    }

    #composite-toolbox-content {
        max-height: calc(85vh - 60px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Ensure modal carousels always remain horizontal scrolling rows on mobile */
#cfg-seat-type,
#cfg-lezalnik-type,
#armrest-thumbnails-container,
#armrest-filter-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

#armrest-filter-pills .arm-filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

#arch-toolbox-content {
    max-height: min(70vh, calc(100vh - 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#arch-toolbox-content::-webkit-scrollbar {
    width: 8px;
}

#arch-toolbox-content::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
}

#arch-toolbox-content::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
}

#arch-toolbox-content::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

#sideMenu {
    min-width: 20rem;
    max-width: 28rem;
    position: sticky;
    /*top: 1rem;*/
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#preview3d {
    flex-shrink: 0;
}

#catalog-container {
    min-height: 200px;
    flex: 1 1 auto;
    overflow-y: auto;
}

@media (max-height: 850px) {
    #preview3d {
        padding: 0.625rem !important;
    }
    #preview3d #main-render-frame {
        max-height: 190px;
    }
}

@media (max-height: 720px) {
    #preview3d {
        padding: 0.5rem !important;
    }
    #preview3d #main-render-frame {
        max-height: 150px;
    }
}

#sideMenu-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 50;
    touch-action: none;
}

#sideMenu-resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    right: 4px;
    width: 2px;
    height: 100%;
    background: transparent;
    transition: background 0.15s ease;
}

#sideMenu-resize-handle:hover::after,
#sideMenu.is-resizing #sideMenu-resize-handle::after {
    background: #3b82f6;
}

#wrapper-height-resize-handle {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    cursor: row-resize;
    z-index: 50;
    touch-action: none;
}

#wrapper-height-resize-handle::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    transition: background 0.15s ease;
}

#wrapper-height-resize-handle:hover::after,
#configurator-main-wrapper.is-resizing-v #wrapper-height-resize-handle::after {
    background: #3b82f6;
}

@media (max-width: 768px) {
    #wrapper-height-resize-handle {
        display: none !important;
    }

    #sofa-template-scroll-right{
        display: none !important;
    }
    #sofa-template-scroll-left{
        display: none !important;
    }
}

@media (min-width: 768px) {
    #configurator-main-wrapper {
        height: max(550px, calc(100vh - 270px));
        min-height: 520px;
    }

    #sideMenu,
    #view-port {
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* Prilagoditev modulov (npr. KAMERA), ki se nahajajo znotraj vertikalnega headerMenu toolbara */
#headerMenu .module-item {
    width: 6.25rem !important;  /* w-9 (36px) */
    height: 4.25rem !important; /* h-9 (36px) */
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.75rem !important; /* rounded-xl */
    aspect-ratio: 1 / 1 !important;
}

#headerMenu .module-item::before,
#headerMenu .module-item::after,
#cameraSubtoolbar .module-item::before,
#cameraSubtoolbar .module-item::after {
    content: none !important;
    display: none !important;
}

#cameraSubtoolbar .module-item {
    padding: 0.375rem !important;
}

/* Prilagoditev vertikalnega headerMenu za tablice, touch in manjše zaslone */
@media (min-width: 769px) {
    #headerMenu,
    #headerMenuFullscreen {
        max-height: calc(100% - 6.5rem);
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

@media (min-width: 769px) and (max-width: 1200px),
       (min-width: 769px) and (pointer: coarse),
       (min-width: 769px) and (max-height: 880px) {

    #headerMenu,
    #headerMenuFullscreen {
        max-height: calc(100% - 6.5rem) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        gap: 4px !important;
        padding: 5px 4px !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.4) transparent; /* headermenu scrollbar skrij*/
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }

    #headerMenu::-webkit-scrollbar,
    #headerMenuFullscreen::-webkit-scrollbar {
        width: 3px;
    }

    #headerMenu::-webkit-scrollbar-track,
    #headerMenuFullscreen::-webkit-scrollbar-track {
        background: transparent;
    }

    #headerMenu::-webkit-scrollbar-thumb,
    #headerMenuFullscreen::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.4);
        border-radius: 9999px;
    }

    #headerMenu::-webkit-scrollbar-thumb:hover,
    #headerMenuFullscreen::-webkit-scrollbar-thumb:hover {
        background: rgba(100, 116, 139, 0.6);
    }

    /* Manjša višina in širina gumbov za tablico (32px namesto 36px) - prihrani ravno za ~2 ikonci višine */
    #headerMenu > button,
    #headerMenu > a,
    #headerMenuFullscreen > button,
    #headerMenuFullscreen > a {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        touch-action: pan-y !important;
        flex-shrink: 0 !important;
    }

    /* Print gumb */
    #headerMenu #print-btn,
    #headerMenuFullscreen #print-btn {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
    }

    /* Sorazmerna velikost ikon */
    #headerMenu i,
    #headerMenu span.text-sm,
    #headerMenuFullscreen i,
    #headerMenuFullscreen span.text-sm {
        font-size: 13px !important;
    }

    /* Ločilne črtice */
    #headerMenu .w-6.h-\[1px\],
    #headerMenuFullscreen .w-6.h-\[1px\] {
        width: 18px !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        flex-shrink: 0 !important;
    }
}

#view-port {
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

#positionDisplay {
  /*  left: calc(var(--side-menu-width, 26rem) + 1rem);*/
  max-height: 28px;
}

#viewport-price-display {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100%;
    min-height: 84px;
    border-radius: 0 0 1.5rem 1.5rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 95%);
}

#viewport-price-total {
    white-space: nowrap;
}

.viewport-price-label {
    display: block;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0;
}

.viewport-price-values > * + * {
    position: relative;
    padding-left: 0.85rem;
}

.viewport-price-values > * + *::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.75rem;
    transform: translateY(-50%);
    background: #cbd5e1;
}

#viewport-price-discounts:not(.hidden) {
    display: flex;
}

#viewport-price-discounts > span + span {
    position: relative;
    padding-left: 0.85rem;
}

#viewport-price-discounts > span + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.35rem;
    transform: translateY(-50%);
    background: #cbd5e1;
}

#viewport-price-display:not(.hidden) {
    display: block;
}



/* Plavajoči 3D predogled ne sme prekrivati ponudbe ali dejanskega izpisa. */
body.mode-print-active #main-render-frame.is-detached {
    display: none !important;
}


.headrest-indicator.built-in {
    display: flex !important;
    background: #10b981;
    border: 1px solid #fff;
    color: white;
    pointer-events: none;
    position: absolute;
    width: 24px;
    height: 12px;
    border-radius: 4px 4px 0 0;
    z-index: 18;
    opacity:1;
}
         /* Postavljeni elementi */
        .placed {
            position: absolute; background: #dbeafe; border: 1px solid #2563eb;/* border-top: 1px solid #1e3a8a;*/
            display: flex; align-items: center; justify-content: center; cursor: move;font-weight: bold;
            /*box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);*/ z-index: 2;
            border-bottom-left-radius: 0px; 
            border-bottom-right-radius: 0px;  
             touch-action: none;  line-height: 1.2;
        }

        .module-dim-text {
            font-family: 'Inter', sans-serif !important;
            font-size: 10px;
            line-height: 1.2;
            text-align: center;
            color: #334155;
            pointer-events: none;
        }

        .module-dim-text .title,
        .placed .title {
            font-family: 'Inter', sans-serif !important;
            font-size: 10px !important;
            font-weight: 800 !important;
            line-height: 1.1 !important;
            margin-bottom: 2px !important;
            display: block !important;
            color: #0f172a !important;
            letter-spacing: -0.3px !important;
            text-transform: uppercase;
        }

        .osnovni .podnoznik { box-sizing: border-box;} /*linear-gradient(0deg, rgb(177 194 221 / 9%) 15%, rgb(120 164 236) 81%)*/
       /* .placed::before {  content: "";  position: absolute; top: 0; left: 0;width: 100%;height:35px; background: #bed0ed;background:linear-gradient(0deg, rgb(177 194 221 / 0%) 15%, rgb(120 164 236) 80%);}*/
  /* .osnovni::before {  content: "";  position: absolute; top: 0; left: 0;width: 100%;height:35px; background: #bed0ed;
   background:linear-gradient(0deg, rgb(219 234 254 / 0%) 0px, rgb(148 166 237 / 40%) 18px, rgb(255 255 255 / 0%) 19px, rgb(34 85 205) 20px, rgb(208 233 255 / 79%) 19px, rgb(210 230 255 / 66%) 28px);}
*/
    
        .placed.selected { outline: 2px solid #6cf5ff; z-index: 3; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);}

    /*    .placed[data-type="KO"]::before {
             position: absolute; top: 0; left: 0;width:35px;height: 100%;     background: #bed0ed;background:linear-gradient(-90deg, rgb(177 194 221 / 0%) 0%, rgb(120 164 236) 60%);
               }*/
        /* Vizualna L-oblika za KO */
  /*     .placed[data-type="KO"]::after {
        content: ""; position: absolute; top: 0; left: 35px;width:55px;height: 35px;     background-color: #bed0ed;     z-index:-1;background:linear-gradient(0deg, rgb(177 194 221 / 0%) 0%, rgb(120 164 236) 60%);        }
*/
.seat-type-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    background: #fff;
    line-height: 1.1em;
    white-space: nowrap;
    flex-shrink: 0 !important;
}

.seat-type-option:hover {
    border-color: #60a5fa;
    background: #f0f9ff;
}

.seat-type-option input {
    display: none;
}

.seat-type-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.seat-type-option strong {
    font-size: 10px;
}

.seat-type-option small {
    font-size: 10px;
    color: #64748b;
}



/* Ležišče 2L 3L – samo vizual */
.lv-bed-extension {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: -76%;
    height: 75%;

    background: #dbeafe; /* modra */
    border: 1px dashed #2563eb;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;
}

/* Ležišče 2P 3P – samo vizual */
.pv-bed-extension {
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: -17%;
    height: 18%;

    background: #dbeafe; /* modra */
    border: 1px dashed #2563eb;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;
    border-top: 0px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Ležišče 3PVV – samo vizual */
.pvv-bed-extension {
    position: absolute;
    left: 7%;
    right: 0%;
    bottom: -150%;
    height: 150%;
    width: 85%;
    background: #dbeafe; /* modra */
    border: 1px dashed #2563eb;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;
    border-top: 0px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Ležišče 3PVV – samo vizual - preview */
.pvv-bed-extension-preview {
    position: absolute;
    left: 7%;
    right: 0%;
    bottom: -50%;
    height: 50%;
    width: 85%;
    background: #d3d3d3; /* modra */
    border: 1px dashed #a2a2a2;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;
    border-top: 0px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Ležišče 2P 3P – samo vizual - preview */
.pv-bed-extension-preview {
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: -26%;
    height: 26%;

    background: #d3d3d3; /* modra */
    border: 1px dashed #a2a2a2;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;
    border-top: 0px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Ležišče 2L 3L – samo vizual za preview*/
.lv-bed-extension-preview {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: -56%;
    height: 54%;

    background: #d3d3d3; /* modra */
    border: 1px dashed #a2a2a2;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;
}

/* Ležišče RELAX – samo vizual - preview */
.relax-extension-preview {
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: -36%;
    height: 36%;

    background: #d3d3d3; /* modra */
    border: 1px dashed #a2a2a2;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;
    border-top: 0px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Ležišče RELAX – samo vizual - preview */
.relax-extension {
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: -36%;
    height: 36%;

     background: #d3d3d3; /* modra */
    border: 1px dashed #a2a2a2;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;
    border-top: 0px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.relax-extension-part {
    position: absolute;
    left: 0%;
    right: 0%;
    top: -23%;
    height: 24%;

     background: #d3d3d3; /* modra */
    border: 1px dashed #a2a2a2;
    border-radius: 3px;

     display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 200;
    letter-spacing: 0.5px;
    color: #000;

   /* pointer-events: none;*/
    z-index: 1;

}


          .placed[data-type*="STR"] {
       background-color:#c7d2fe;  
         }

    .osnovni-navaden::before {    content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:20px;
border-bottom: 1px solid rgb(34,85,205);
 background: rgba(148,166,237,.15) ;
  /* bolj stabilno za print */
 /* background: linear-gradient(
    to bottom,
    rgba(148,166,237,.35) 0px,
    rgba(148,166,237,.20) 16px,
    rgba(34,85,205,1)     20px,
    rgba(210,230,255,.60) 28px,
    rgba(219,234,254,0)   35px
  );*/
  pointer-events:none;} 

  
.placed[data-type="TOMFLEX_KO"] {
  width: 85px;
  height: 85px;
  border: 1px solid #2563eb;
  box-sizing: border-box;
    position: absolute;
   background-color:#dbeafe;  
    top: 0;
  left: 0;
  /* Napisi na sredini */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*font-size: 11px;*/
  font-family: sans-serif;
  font-weight: bold;
}

.placed[data-type="TOMFLEX_KO"]::before, .placed[data-type="TOMFLEX_KO"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ZGORNJI GRADIENT (od zgoraj navzdol) */
.placed[data-type="TOMFLEX_KO"]::before {
 /* background: linear-gradient(to bottom, #78a4ec , #dbeafe);*/
  height: 20px; /* Debelina zgornjega pasu */
  /* Odrežemo pod 45 stopinjami na levi strani */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);
}

/* LEVI GRADIENT (od leve proti desni) */
.placed[data-type="TOMFLEX_KO"]::after {
 /* background: linear-gradient(to right, #78a4ec , #dbeafe);*/
  /*background:linear-gradient(-90deg, rgb(219 234 254 / 85%) 7%, rgb(148 166 237 / 66%) 53%, rgb(255 255 255 / 0%) 55%, rgb(34 85 205) 59%, rgb(208 233 255 / 70%) 38%, rgb(230 241 255) 99%);*/
  width: 20px; /* Debelina levega pasu */
  /* Odrežemo pod 45 stopinjami na vrhu */
   background: rgba(148,166,237,.15) !important;
    border-right: 1px solid rgb(34,85,205) !important;
  clip-path: polygon(0 0, 100% 20px, 100% 100%, 0 100%);
} 



.placed[data-type="KO"] {
  width: 85px;
  height: 85px;
  border: 1px solid #2563eb;
  box-sizing: border-box;
    position: absolute;
   background-color:#dbeafe;  
    top: 0;
  left: 0;
  /* Napisi na sredini */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*font-size: 11px;*/
  font-family: sans-serif;
  font-weight: bold;
}

.placed[data-type="KO"]::before, .placed[data-type="KO"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ZGORNJI GRADIENT (od zgoraj navzdol) */
.placed[data-type="KO"]::before {
 /* background: linear-gradient(to bottom, #78a4ec , #dbeafe);*/
  height: 20px; /* Debelina zgornjega pasu */
  /* Odrežemo pod 45 stopinjami na levi strani */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);
}

/* LEVI GRADIENT (od leve proti desni) */
.placed[data-type="KO"]::after {
 /* background: linear-gradient(to right, #78a4ec , #dbeafe);*/
  /*background:linear-gradient(-90deg, rgb(219 234 254 / 85%) 7%, rgb(148 166 237 / 66%) 53%, rgb(255 255 255 / 0%) 55%, rgb(34 85 205) 59%, rgb(208 233 255 / 70%) 38%, rgb(230 241 255) 99%);*/
  width: 20px; /* Debelina levega pasu */
  /* Odrežemo pod 45 stopinjami na vrhu */
   background: rgba(148,166,237,.15) !important;
    border-right: 1px solid rgb(34,85,205) !important;
  clip-path: polygon(0 0, 100% 20px, 100% 100%, 0 100%);
} 

/* KT: container naj ne riše ničesar */
.placed.osnovni-navaden[data-type="KT"] {
  background: transparent !important;
  border: none !important;
}
/* KT: container naj ne riše ničesar */
.placed[data-type="KT"] {
  background: transparent !important;
  border: none !important;
}

/* KT: container naj ne riše ničesar */
.placed[data-type="KT"]:before {
  background: transparent !important;
  border: none !important;
}




.placed[data-type="KT"] .shape-layer{
  position:absolute;
  inset:0;
  background:#dbeafe;
  clip-path: path("M 0 106 A 106 106 0 0 1 106 0 L 106 85 L 85 106 Z");
}

/* oranžni pas */
.placed[data-type="KT"] .shape-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background:#D0E0FB;
  pointer-events:none;
  clip-path: path("M 0 106 A 106 106 0 0 1 106 0 L 106 20 A 86 86 0 0 0 20 106 Z");
}

/* SVG šivi/robovi */
.placed[data-type="KT"] .kt-stitch{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}

.placed[data-type="KT"] .kt-stitch path{
  fill:none;
  stroke:#2563eb;
  stroke-width:1;
  vector-effect: non-scaling-stroke; /* da ostane 1px tudi pri zoomu/scale */
}


.placed.osnovni-navaden[data-type="KO45"] {
  background: transparent !important;
  border: none !important;
}

/* KO45: container naj ne riše ničesar */
.placed[data-type="KO45"] {
  background: transparent !important;
  border: none !important;
}


/* KO45: container naj ne riše ničesar */
.placed[data-type="KO45"]:before {
  background: transparent !important;
  border: none !important;
}


/* KO45: container naj ne riše ničesar */
.placed[data-type="KO45"]:after {
  background: transparent !important;
  border: none !important;
}

/*****************/


.placed[data-type="KO45"] .shape-layer{
  position:absolute;
  inset:0;
  background:#dbeafe;

  /* trapez: top=100%, bottom=18.75% */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    59.375% 100%,
    40.625% 100%
  );
}


.placed[data-type="KO45"] .shape-layer .stitch{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}
.placed[data-type="KO45"] .shape-layer .stitch path{
  fill:none !important;
  stroke:#2563eb;
  stroke-width:1;
  vector-effect: non-scaling-stroke;
}

/*kamera*/
.placed[data-type="KAMERA"] {
    background-color: #eff6ff !important;
    border: 2px solid #3b82f6 !important;
    border-radius: 50% !important; /* Naj bo okrogla */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1d4ed8 !important;
    font-weight: bold !important;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.2) !important;
}
.placed[data-type="KAMERA"]::before {
    content: none !important; /* Odstrani linijo od osnovni-navaden */
}
.placed[data-type="KAMERA"]::after {
    content: "\f030" !important; /* FontAwesome koda za fa-camera */
    font-family: "FontAwesome" !important;
    font-size: 14px !important;
}
.placed[data-type="KAMERA"] .module-dim-text,
.placed[data-type="KAMERA"] .title,
.placed[data-type="KAMERA"] .opis,
.placed[data-type="KAMERA"] .part-visual,
.placed[data-type="KAMERA"] .part-visual-navaden {
    display: none !important;
}

/* STENA: Temno siva z debelim robom (klasičen tloris) */
.placed[data-type="STENA"] {
    background-color: #e5e7eb; /* Svetlo siva */
    border: 1px solid #374151; /* Temno siv zunanji rob */
}

.placed[data-type="OMARA"] {
    background-color: #f7e3af; /* Svetlo siva */
    border: 1px solid #374151; /* Temno siv zunanji rob */
}

.placed[data-type="JUKA"] {
    background-color: #f7e3af; /* Svetlo siva */
    border: 1px solid #374151; /* Temno siv zunanji rob */
}

.placed[data-type="KOMODA_TV"] {
    background-color: #f7e3af; /* Svetlo siva */
    border: 1px solid #374151; /* Temno siv zunanji rob */
}

.placed[data-type="PREPROGA"] {
    background-color: #f7e3af0e; /* Svetlo siva */
    border: 1px solid #374151; /* Temno siv zunanji rob */
}

.placed[data-type="SLIKA"] {
    background-color: #f7e3af0e; /* Svetlo siva */
    border: 1px solid #374151; /* Temno siv zunanji rob */
}

.placed[data-type="MIZICA"] {
    background-color: #f7e3af; /* Svetlo siva */
    border: 1px solid #374151; /* Temno siv zunanji rob */
}

/* OKNO: Bledo modro, polprosojno, z "zasteklitvijo" na sredini */
.placed[data-type="OKNO"] {
    background-color: #e0f2fe; /* Zelo svetlo modra */
    border: 1px solid #0284c7; /* Modri rob okvira */
    box-shadow: inset 0 0 0 2px white; /* Navidezen notranji okvir */
    /* Dodamo črto po sredini za simulacijo stekla */
    background-image: linear-gradient(to bottom, transparent 45%, #0ea5e9 45%, #0ea5e9 55%, transparent 55%);
}

/* OKNO: Bledo modro, polprosojno, z "zasteklitvijo" na sredini */
.placed[data-type="OKNO_KRILNO"] {
    background-color: #e0f2fe; /* Zelo svetlo modra */
    border: 1px solid #0284c7; /* Modri rob okvira */
    box-shadow: inset 0 0 0 2px white; /* Navidezen notranji okvir */
    /* Dodamo črto po sredini za simulacijo stekla */
    background-image: linear-gradient(to bottom, transparent 45%, #0ea5e9 45%, #0ea5e9 55%, transparent 55%);
}

/* VRATA: Ponavadi se v tlorisu rišejo kot odprto krilo, a za osnovo je lahko rjava/lesena z robom */
.placed[data-type="VRATA"] {
    background-color: #fef3c7; /* Bledo rumeno-rjava */
    border: 2px solid #d97706;
}

/* VRATA: Ponavadi se v tlorisu rišejo kot odprto krilo, a za osnovo je lahko rjava/lesena z robom */
.placed[data-type="VRATA_BELA"] {
    background-color: #fef3c7; /* Bledo rumeno-rjava */
    border: 2px solid #d97706;
}

/* RADIATOR: Bel pravokotnik z vzorcem reber */
.placed[data-type="RADIATOR"] {
    background-color: #ffffff;
    border: 1px solid #9ca3af;
    /* Naredimo črtast vzorec za rebra radiatorja */
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 4px,
        #cbd5e1 4px,
        #cbd5e1 6px
    );
}

.arhitektura-element {opacity:1;}

/***********/

/* Popravek za kontrole, da so vedno vidne nad plastmi */
.el-controls {
  z-index: 10;
}
.headrest-indicator {
  z-index: 11;
}

         .placed[data-type*="STR"]::after {
        content: "";  position: absolute; top: 0; left: 0;width:100%;height: 0px; background-color:#c7d2fe;  
         }

             .placed[data-type="PREDAL_OZEK"]::before {display: none !important;}
     .placed[data-type="PREDAL_OZEK"] {border-radius: 3px !important; border-top: 1px solid #2563eb;}
     .placed[data-type="PREDAL_LEVI"]::before {display: none !important;}
     .placed[data-type="PREDAL_LEVI"] {border-radius: 3px !important; border-top: 1px solid #2563eb;}
     .placed[data-type="PREDAL_DESNI"]::before {display: none !important;}
    .placed[data-type="PREDAL_DESNI"] {border-radius: 3px !important; border-top: 1px solid #2563eb;}

     .placed[data-type="TBM"]::before {display: none !important;}
        .placed[data-type="TBM"] {border-radius: 3px !important; border-top: 1px solid #2563eb;}

        .placed[data-type="TBV"]::before {display: none !important;}
        .placed[data-type="TBV"] {border-radius: 3px !important; border-top: 1px solid #2563eb;}

     .placed[data-type="TBVV"]::before {display: none !important;}
     .placed[data-type="TBVV"] {border-radius: 3px !important; border-top: 1px solid #2563eb;
        background-image:
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), /* vertikalna */
        linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)); /* horizontalna */

        background-position:
        50% 0,   /* vertikalna na sredini */
        0 50%;   /* horizontalna na sredini */

        background-size:
        1px 100%, /* vertikalna */
        100% 1px; /* horizontalna */

        background-repeat: no-repeat;
    }


     .placed[data-type="PREDAL_LEVI"]::before {display: none !important;}
        .placed[data-type="PREDAL_LEVI"] {border-radius: 3px !important; border-top: 1px solid #2563eb;
        background-image: 
        linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)); 
        background-position: 0 50%; 
        background-size: 100% 1px; background-repeat: no-repeat;
    }

    
     .placed[data-type="PREDAL_DESNI"]::before {display: none !important;}
        .placed[data-type="PREDAL_DESNI"] {border-radius: 3px !important; border-top: 1px solid #2563eb;
        background-image: 
        linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)); 
        background-position: 0 50%; 
        background-size: 100% 1px; background-repeat: no-repeat;
    }

     .placed[data-type="TBVP"]::before {display: none !important;}
        .placed[data-type="TBVP"] {border-radius: 3px !important; border-top: 1px solid #2563eb;
        background-image: 
        linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)); 
        background-position: 0 50%; 
        background-size: 100% 1px; background-repeat: no-repeat;
    }

      .placed[data-type="KO"] {border-bottom-left-radius: 0px;}
      .placed[data-type*="STR"] {border-bottom-left-radius: 0px;  border-bottom-right-radius: 0px;}
      .placed[data-type*="1L"] {border-bottom-left-radius: 0px;}
      .placed[data-type*="1D"] {border-bottom-right-radius: 0px;}

      

      .placed[data-type*="STR"]::before,.placed[data-type*="STR"]::after {    display: none !important;}
      

            /* POLNI VERTIKALNI ŠIVI (2S, 3S, 2P, 3P) */
        .sedisca[data-type*="2SV"], .sedisca[data-type*="2PV"], .sedisca[data-type*="2LV"],  .placed[data-type*="2SV"], .placed[data-type*="2PV"], .placed[data-type*="2LV"],
        .sedisca[data-type*="3SV"], .sedisca[data-type*="3PV"], .sedisca[data-type*="3LV"], .placed[data-type*="3SV"], .placed[data-type*="3PV"], .placed[data-type*="3LV"] {
            /* Uporabimo linearni gradient, ki je ves v isti barvi */
            background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
            background-position: 50% 0;
            background-size: 1px 100%;
            background-repeat: no-repeat;
        }

        /* TROSED 3X60 - Dva polna vertikalna šiva */
        .sedisca[data-type="3PV180X"],.placed[data-type="3PV180X"] {
            background-image: 
                linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
                linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
            background-position: 33.33% 0, 66.66% 0;
            background-size: 1px 100%, 1px 100%;
            background-repeat: no-repeat;
        }

          /* TROSED 3X60 - Dva polna vertikalna šiva */
        .sedisca[data-type="3SV180X"],.placed[data-type="3SV180X"] {
            background-image: 
                linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
                linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
            background-position: 33.33% 0, 66.66% 0;
            background-size: 1px 100%, 1px 100%;
            background-repeat: no-repeat;
        }





 .module-item {
    touch-action: manipulation; /* Omogoča klike in zoom, preprečuje pa sistemske geste med klikom */
    font-size: clamp(8px, 1.5vw, 12px); 
}


.stl-module {
    position: relative;
    /*overflow: hidden;*/
}

 .stl-tabure {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #dbeafe;
     border-right: 1px solid #2563eb;
     border-bottom-left-radius:3px;
     border-bottom-right-radius:3px;
    pointer-events: none;
}

.placed[data-type="1STL"]  .stl-tabure {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #dbeafe;
     border-right: 1px dashed rgba(0,0,0,0.3);
    pointer-events: none;
}


.placed[data-type="2STL"]  .stl-tabure {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #dbeafe;
     border-right: 1px dashed rgba(0,0,0,0.3);
    pointer-events: none;
}

.placed[data-type="2PTL"]  .stl-tabure {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #dbeafe;
     border-right: 1px dashed rgba(0,0,0,0.3);
    pointer-events: none;
}

.placed[data-type="1STD"] .stl-tabure  {
     border-left: 1px dashed rgba(0,0,0,0.3);
}



.placed[data-type="2STD"] .stl-tabure  {
     border-left: 1px dashed rgba(0,0,0,0.3);
}

.placed[data-type="2PTD"] .stl-tabure  {
     border-left: 1px dashed rgba(0,0,0,0.3);
}


.stl-seat {
    position: absolute;
    top: 0;
    height: 100%;
   /* background: rgba(100, 160, 255, 0.25);*/
    pointer-events: none;

}


.placed[data-type*="2ST"] .stl-seat {
    position: absolute;
    top: 0;
    height: 100%;
   /* background: rgba(100, 160, 255, 0.25);*/
    pointer-events: none;
      background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
            background-position: 50% 0;
            /* Širina 1px, višina 100% (pokrije celo vertikalo) */
            background-size: 1px 100%;
            background-repeat: no-repeat;
}

.placed[data-type*="2PT"] .stl-seat {
    position: absolute;
    top: 0;
    height: 100%;
   /* background: rgba(100, 160, 255, 0.25);*/
    pointer-events: none;
      background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
            background-position: 50% 0;
            /* Širina 1px, višina 100% (pokrije celo vertikalo) */
            background-size: 1px 100%;
            background-repeat: no-repeat;
}



.dimension-line {
    position: absolute;
    background-color: #3b82f6; /* Modra barva za kote */
    pointer-events: none;
    z-index: 4;
}

.dimension-line-grey {
    position: absolute;
    background-color: rgb(151, 151, 151); /* Modra barva za kote */
    pointer-events: none;
    z-index: 4;
     color: #808080;
}

/* Zaključki na koncu črt (tiste male navpične črtice) */
 .dimension-line-grey::before, .dimension-line::after {
    content: "";
    position: absolute;
    background-color: #777777;
}
.dimension-text {
    position: absolute;
    background: white;
    color: #3b82f6;
    font-size: 11px;
    font-weight: bold;
    padding: 0 4px;
    border: 1px solid #3b82f6;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 5;
}

/* Zaključki na koncu črt (tiste male navpične črtice) */
.dimension-line::before, .dimension-line::after {
    content: "";
    position: absolute;
    background-color: #3b82f6;
}

.dimension-line.horizontal::before, .dimension-line.horizontal::after {
    width: 1px; height: 10px; top: -5px;
}
.dimension-line.horizontal::before { left: 0; }
.dimension-line.horizontal::after { right: 0; }

.dimension-line.angled {
    height: 1px;
    transform-origin: 0 0;
}

.dimension-line.angled::before,
.dimension-line.angled::after {
    width: 1px;
    height: 10px;
    top: -5px;
}

.dimension-line.angled::before { left: 0; }
.dimension-line.angled::after { right: 0; }

.dimension-line.vertical::before, .dimension-line.vertical::after {
    height: 1px; width: 10px; left: -5px;
}
.dimension-line.vertical::before { top: 0; }
.dimension-line.vertical::after { bottom: 0; }


.dimension-text {
    font-family: sans-serif;
    font-size: 11px;
    white-space: nowrap;
    user-select: none;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
/* Polje za urejanje vrednosti */
.dimension-text .dim-val {
    font-weight: bold;
    color: #222;
    cursor: text;
    padding: 0 2px;
    border-radius: 2px;
}
.dimension-text .dim-val:hover,
.dimension-text .dim-val:focus {
    background: #eef3ff;
    outline: 1px solid #709bfb;
}
/* Enota */
.dimension-text .dim-unit {
    color: #444;
}
/* Toleranca - manjša, nevpadljiva, siva barva */
.dimension-text .dim-tolerance {
    font-size: 0.85em;
    color: #888;
    margin-left: 2px;
    font-style: italic;
}

.editable-dim {
    cursor: text;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    transition: all 0.2s;
}

.editable-dim:hover {
    background: #e0f2fe; /* Svetlo modra ob preletu */
    outline: 1px dashed #3b82f6;
}

.editable-dim:focus {
    background: white;
    outline: 2px solid #3b82f6;
    color: black;
}



.workspace {
    position: relative;
    touch-action: none;
}

/* Ko ima workspace razred 'hide-dimensions', skrijemo kote */
.workspace-area.hide-dimensions .dimension-line,
.workspace-area.hide-dimensions .dimension-text {
    display: none !important;
}

.seatdim-text {
    position: absolute;
     pointer-events: none; 
      font-size: 8px;
       opacity: 0.75;  
}
        /* Indikatorji vzglavnikov */
      .headrest-indicator {
    position: absolute;
    width: 24px;
    height: 12px;
    border-radius: 4px 4px 0 0;

    display: flex;                 /* ⬅ vedno visible */
    align-items: center;
    justify-content: center;

    font-size: 8px;
    z-index: 8;

   /* background: #f1f5f9;   */        /* light gray */
 /*   border: 1px solid #cbd5e1;*/
    color: transparent;

    opacity: 0.4;                  /* pasivni izgled */
    pointer-events: none;          /* ne klikabilen */
    transition: all 0.2s;
}
.headrest-indicator.active {
    background: #10b981;
    border-color: white;
    color: white;            /* ✔ vidna */
    opacity: 1;
}

.placed.selected .headrest-indicator {
    opacity: 1;
    pointer-events: auto;          /* zdaj klikabilni */
    cursor: pointer;
    border: 2px solid #edf4ff;
    background: #8aa7ce;
}

      .placed.selected .headrest-indicator.active {
    background: #10b981;           
    border-color: white;
    color: white;
}

       .placed.selected .headrest-indicator:hover {
    transform: scale(1.2);
    z-index: 9;
}


        /* Kontrole */
        .el-controls { position: absolute;  display: none;  }
        .placed.selected .el-controls { display: flex; }
        .placed.selected .el-controls {
            display: none !important;
        }

        .control-btn { 
            width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; 
            color: white; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); cursor: pointer; margin-top: 20px;
        }

        .element-qty-control {
            height: 32px;
            min-width: 58px;
            padding: 0 6px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            gap: 3px;
            background: #ffffff;
            color: #334155;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            font-size: 11px;
            font-weight: 800;
            margin-top: 20px;
            cursor: default;
            pointer-events: auto;
        }

        .element-qty-input {
            width: 34px;
            height: 22px;
            border: 1px solid #cbd5e1;
            border-radius: 9999px;
            text-align: center;
            font-size: 12px;
            font-weight: 800;
            outline: none;
            background: #f8fafc;
            pointer-events: auto;
        }

        .placed.render-excluded {
            opacity: 0.35;
            filter: grayscale(1);
            outline: 2px dashed #ef4444 !important;
        }

        .placed.render-excluded .exclude-btn {
            background: #ef4444 !important;
        }

        
        /* Aktivna izbira v meniju */
.module-item.active-selection { border-color: #2563eb !important; background: #eff6ff; transform: scale(1.02); }
.model-filter-hidden { display: none !important; }
        
        #resize-handle { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; background: #2563eb; color: white; display: flex; align-items: center; justify-content: center; cursor: nwse-resize; font-size: 12px; }
   
        /* Ko je modul izbran, naj kurzor na platnu sporoča, da se bo nekaj zgodilo */
.active-selection {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    transform: translateY(-2px);
}

/* Dodamo majhen indikator "preklica" na izbran modul */
.active-selection::after {
    content: "✕";
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 10px;
    color: #2563eb;
}

  /* Če želiš za določen tip (npr. samo sedež) odstraniti levi border */
       

            /* Ciljamo direktno na tekst znotraj STR elementa */
        .placed[data-type*="STR"] span, 
        .placed[data-type*="STR"] .module-dim-text  { 
            /* Če tvoj JS doda tekst v span ali label, uporabi ta selektor. 
            Če je tekst "gol" v divu, ga boš morda moral v JS obdati s <span> */
            transform: rotate(-90deg);
            white-space: nowrap;
            display: inline-block;
        }
        

/* dejanski vizualni deli */
.part {
    background: #dbeafe;
    
    box-sizing: border-box;
}

   /* Mobilne prilagoditve */
@media (max-width: 768px) {
    body { overflow: auto; } /* Omogočimo scroll na mobilnikih */
    
    .flex.flex-1 {
        flex-direction: column; /* Katalog zgoraj, platno spodaj */
    }

    
/* Privzeto za namizne računalnike (Desktop) */
aside {
    width: 300px !important; /* Fiksna širina stranskega menija */
    height: 100vh !important;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 2px solid #e2e8f0;
    order: 0; /* Normalen vrstni red (levo) */
}



/* Prilagoditev za mobilne naprave (ekrani ožji od 768px) */
@media (max-width: 768px) {
    aside {
        width: 100% !important;
        height: auto !important;
    }

    .tab-content {
    grid-template-columns: repeat(2, 1fr) !important; /* Prisili 2 stolpca tudi na mobitelu */
    }
}



    /* Katalog modulov v vrstici, da ne zavzame preveč mesta */
    .module-item-container {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px;
    }

   .module-item {
    /*aspect-ratio: 1 / 1;*/ /* Prisili kvadratno obliko */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px !important;
    position: relative;
    overflow: hidden;
}

/* Posebna prilagoditev za napise znotraj kvadratov */
.module-item .flex.justify-between {
    flex-direction: column; /* Napisi naj gredo eden pod drugega */
    gap: 4px;
    width: 100%;
}

/* Če imaš kakšen poseben sestav, ki mora biti čez oba stolpca */
.module-item.wide-module {
    grid-column: span 2;
    aspect-ratio: 2 / 1; /* Pravokotnik */
}




 #view-port {
    height: auto;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrira workspace vodoravno */
    justify-content: center; /* Centrira workspace navpično */
}
    /* Skrijemo nepotrebne napise na mobilnikih za več prostora */
    header .tracking-tighter { font-size: 1.2rem; }
    
    /* Plavajoči gumbi za Render in Shrani na dnu */
    .mobile-actions {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: white;
        padding: 10px;
        display: flex;
        gap: 10px;
        z-index: 1000;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    }


}
.tab-btn {
    color: #94a3b8; /* Slate-400 */
    transition: all 0.2s;
    border-radius: 6px;
}

.active-tab {
    background: white;
    color: #0f172a; /* Slate-900 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Posodobitev za kvadratne module v katalogu */
.tab-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Dva enakovredna stolpca */
    gap: 10px; /* Razmik med kvadrati */
}

.col-span-full {
    grid-column: 1 / -1 !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Poseben stil za rokonaslone v seznamu, da izgledajo ožji */
.module-item[data-type^="STRL_"] {
    border-style: dashed; /* vizualni namig, da gre za zaključek */
    background-color: #f8fafc;
}

.module-item[data-type^="STRD_"] {
    border-style: dashed; /* vizualni namig, da gre za zaključek */
    background-color: #f8fafc;
}

.hidden { display: none; }

/* Glavni ovoj, ki drži aside in main */
.flex-1 {
    flex: 1 1 0%;
}

/* Poskrbi, da aside ne zavzame vsega prostora */
aside {
    flex-shrink: 0;
}

/* Poskrbi, da view-port zapolni ostanek */


#workspace {
    /* Če imate fiksno velikost, jo bo JS povozil, 
       a za začetek naj bo vidna */
    border: 1px solid #e2e8f0;
}
/* Zagotovimo, da je katalog vedno nad platnom na mobilniku */
aside {
    z-index: 100;
    position: relative;
}

.shimmer-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Začne izven vidnega polja na levi */
    width: 100%;
    height: 100%;
    
    /* Svetlobni trak pod kotiranjem 45 stopinj */
    background: linear-gradient(
        120deg, 
        rgba(255, 255, 255, 0) 30%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 70%
    );
    
    /* Animacija traja 2 sekundi in se ponavlja v neskončnost */
    animation: shimmer 5.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -150%;
    }
    30%, 100% {
        left: 150%; /* Konča izven vidnega polja na desni */
    }
}

/* Povečamo gumbe za mobilne naprave, da jih lažje zadenemo */
@media (max-width: 768px) {
    .control-btn {
        width: 44px; /* Večji gumbi za prste */
        height: 44px;
    }
    .el-controls {
        top: -25px;
        right: -25px;
    }
    #view-port {
        padding: 20px; /* Manj paddinga na telefonu */
        order: 2;      /* Workspace gre pod katalog */
    }
}

/* Preprečimo, da bi se vsebina pod platnom premikala med vlečenjem */
body {
    overscroll-behavior: auto;
}

#view-port {
    touch-action: auto; /* Omogoči vertikalni scroll na mobilnikih */
    user-select: none;
}

.placed {
    touch-action: none !important; /* Prisili, da element sam hendla dotik */
    pointer-events: auto !important; /* Zagotovi, da je klikljiv */
   /* z-index: 50;*/
}

/* Skrijemo vse spojnike */
.connector-point {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #3b82f6;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    opacity: 0; /* Privzeto nevidno */
    transition: opacity 0.2s ease; /* Nežen prehod */
}


.placed[data-type*="1S"] .connector-point, 
.placed[data-type*="1VR"] .connector-point, 
.placed[data-type*="2S"] .connector-point, 
.placed[data-type*="2P"] .connector-point, 
.placed[data-type*="3S"] .connector-point,
.placed[data-type*="3P"] .connector-point {
    display:none; position: absolute;    width: 8px;    height: 8px;    background-color: #3b82f6;    border-radius: 50%;    pointer-events: none;    z-index: 5;    opacity: 0.6;
}

/* Prikažemo jih samo na tistem, ki ga premikamo */
.placed.is-dragging .connector-point {
    opacity: 1;
}

/* Prisili vsebino znotraj modula, da se sklada navpično */
.module-item .flex.justify-between {
    flex-direction: column !important; /* Stolpec namesto vrstice */
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    gap: 4px; /* Razmik med imenom in dimenzijo */
}

/* Stil za dimenzijo (span), da se lepše loči */
.module-item .text-slate-400 {
    font-weight: normal;
    font-size: 0.75rem; /* Malo manjša pisava za dimenzijo */
    display: block; /* Zagotovi novo vrstico */
}

/* Posodobljena mreža za 2 stolpca (kvadrati) */


.module-item {
   /* aspect-ratio: 1 / 1;*/ /* Naredi kvadrat */
    height: auto !important; /* Prepreči fiksno višino */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}


.rokonaslon-vizual {
   /* background-color:red;*/ /* #dbeafe; *//* Temnejša zelena (Emerald 800) */
    border: 1px solid #2563eb;
    border-radius: 0px;
    pointer-events: none; /* Da ne moti klikanja na glavni element */
    z-index: 1;
}

/* LUNA ležalniki imajo 20 cm širok rokonaslon vključen v skupno širino modula. */
.luna-armrest-visual {
    position: absolute;
    top: 0;
    width: var(--luna-armrest-width, 20px);
    height: var(--luna-armrest-depth, 107px);
    max-height: 100%;
    box-sizing: border-box;
    background-color: rgb(210 223 240);
}

.luna-armrest-visual[data-side="left"] {
    left: 0;
    right: auto;
}

.luna-armrest-visual[data-side="right"] {
    right: 0;
    left: auto;
}

.dragging .el-controls {
    display: none;
}

.part {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}
/*luna end*/

/* TOMFLEX. */
.tomflex-armrest-visual {
    position: absolute;
    top: 0;
    width: var(--tomflex-armrest-width, 20px);
    height: var(--tomflex-armrest-depth, 90px);
    max-height: 100%;
    box-sizing: border-box;
    background-color: rgb(210 223 240);
    top: 24px;
    border-radius: 2px;
  
}

.placed.tomflex-has-armrest {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.placed.tomflex-has-armrest::after {
    content: "";
    position: absolute;
    left: var(--tomflex-seat-left, 0px);
    top: 0;
    width: var(--tomflex-seat-width, 100%);
    height: 100%;
    box-sizing: border-box;
    background: #dbeafe;
    border: 1px solid #2563eb;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow:
        inset 2px 2px 5px rgba(255, 255, 255, 0.7),
        inset -2px -2px 8px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 0;
     border-radius: 2px;
}

.placed.osnovni-navaden.tomflex-has-armrest::before {
    left: var(--tomflex-seat-left, 0px);
    right: auto;
    width: var(--tomflex-seat-width, 100%);
    height: 21px;
    z-index: 1;

}

.placed.tomflex-has-armrest > .module-dim-text,
.placed.tomflex-has-armrest > .el-controls,
.placed.tomflex-has-armrest > .headrest-indicator {
    z-index: 3;
}

.tomflex-armrest-visual[data-side="left"] {
    left: 0;
    right: auto;
    

}

.tomflex-armrest-visual[data-side="right"] {
    right: 0;
    left: auto;
}

  .osnovni-navaden[data-type*="1SL"], .osnovni-navaden[data-type*="1ML"], .osnovni-navaden[data-type*="1LL"], .osnovni-navaden[data-type*="1XLL"], .osnovni-navaden[data-type*="1XXLL"], .osnovni-navaden[data-type*="1SD"], .osnovni-navaden[data-type*="1MD"], .osnovni-navaden[data-type*="1LD"], .osnovni-navaden[data-type*="1XLD"], .osnovni-navaden[data-type*="1XXLD"],
   .osnovni-navaden[data-type*="1SV"],
   .osnovni-navaden[data-type*="1MV"],
   .osnovni-navaden[data-type*="1LV"],
   .osnovni-navaden[data-type*="1XLV"],
   .osnovni-navaden[data-type*="1XXLV"] {
            background-image: 
             linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), 
                linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
            background-position: 0 90px, 0 0px;
            background-size: 100% 1px, 100% 1px;
            background-repeat: no-repeat;
        }


     /* POLNI VERTIKALNI ŠIVI (2S) */
      
        /* XL XXL LEZISCA */
               .osnovni-navaden[data-type*="2XLV"], .osnovni-navaden[data-type*="2XXLV"], .osnovni-navaden[data-type*="2LV"],
          .osnovni-navaden[data-type*="2XLL"], .osnovni-navaden[data-type*="2XXLL"], 
           .osnovni-navaden[data-type*="2XLD"], .osnovni-navaden[data-type*="2XXLD"],
           .osnovni-navaden[data-type*="2X"], .osnovni-navaden[data-type*="2XXL"]
           {
            /* Uporabimo linearni gradient, ki je ves v isti barvi */
                 background-image: 
                linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
                linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
            background-position: 33.33% 0, 66.66% 0;
           background-size: 1px 100%, 1px 100%;
            background-repeat: no-repeat;
        }

.placed.tomflex-has-armrest {
    background-image: none !important;
}

.placed.tomflex-has-armrest:is(
    [data-type*="1SL"], [data-type*="1ML"], [data-type*="1LL"],
    [data-type*="1XLL"], [data-type*="1XXLL"],
    [data-type*="1SD"], [data-type*="1MD"], [data-type*="1LD"],
    [data-type*="1XLD"], [data-type*="1XXLD"]
)::after {
    background:
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)) 0 90px / 100% 1px no-repeat,
        #dbeafe;
}

.placed.tomflex-has-armrest:is(
    [data-type*="2SV"], [data-type*="2MV"], [data-type*="2LV"],
    [data-type*="2SL"], [data-type*="2ML"], [data-type*="2LL"],
    [data-type*="2SD"], [data-type*="2MD"], [data-type*="2LD"],
    [data-type*="2S"], [data-type*="2M"], [data-type*="2L"]
)::after {
    background:
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)) 50% 0 / 1px 100% no-repeat,
        #dbeafe;
}

.placed.tomflex-has-armrest:is(
    [data-type*="2XLV"], [data-type*="2XXLV"], [data-type*="2XLL"],
    [data-type*="2XXLL"], [data-type*="2XLD"], [data-type*="2XXLD"],
    [data-type*="2XL"], [data-type*="2XXL"]
)::after {
    background:
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)) 33.33% 0 / 1px 100% no-repeat,
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)) 66.66% 0 / 1px 100% no-repeat,
        #dbeafe;
}




/* TOMFLEX end */


/* privzeto: nič */

.part-visual{
  position: relative;
  overflow: hidden;

  border: 1px solid #2563eb;
}


      .part-visual {
   
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Rahel preliv: sredina je malenkost svetlejša od robov */
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.02) 100%);
    
    /* Notranja senca: zgoraj levo svetla (svetloba), spodaj desno temna (senca) */
    box-shadow: 
        inset 2px 2px 5px rgba(255, 255, 255, 0.7), 
        inset -2px -2px 8px rgba(0, 0, 0, 0.08);
        
    border-radius: 2px; /* Notranje blazine imajo tudi rahel lok */
    pointer-events: none; /* Da ne moti klikanja */
}



      .part-visual-navaden {
   
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Rahel preliv: sredina je malenkost svetlejša od robov */
  
    /* Notranja senca: zgoraj levo svetla (svetloba), spodaj desno temna (senca) */
    box-shadow: 
        inset 2px 2px 5px rgba(255, 255, 255, 0.7), 
        inset -2px -2px 8px rgba(0, 0, 0, 0.08);
        
    border-radius: 2px; /* Notranje blazine imajo tudi rahel lok */
    pointer-events: none; /* Da ne moti klikanja */
}

.part-visual::before { content: none; }

/* backrest samo na main-seat */
.part[data-role="main-seat"] > .part-visual::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:20px;
border-bottom: 1px solid rgb(34,85,205);
 background: rgba(148,166,237,.15) ;
  /* bolj stabilno za print */
 /* background: linear-gradient(
    to bottom,
    rgba(148,166,237,.35) 0px,
    rgba(148,166,237,.20) 16px,
    rgba(34,85,205,1)     20px,
    rgba(210,230,255,.60) 28px,
    rgba(219,234,254,0)   35px
  );*/
  pointer-events:none;
}

@media print{
  .part[data-role="main-seat"] > .part-visual::before{
    background: rgba(148,166,237,.15) !important;
    border-bottom: 1px solid rgb(34,85,205) !important;
     height:20px;
  }
}

/**, *::before, *::after { box-sizing: border-box; }*/

.part.child_armrest {
      background: #b3d3ff;
    position: absolute;
   /* border: 1px solid #2563eb;*/
     z-index: 200;
}

.part.child_armrest .armrest-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}


.preview {
    pointer-events: none;
}


/* wrapper – logični nosilec */
.placed {
    position: absolute;
    filter: drop-shadow(3px 5px 8px rgba(0, 0, 0, 0.15));
}



/* 🔑 fizična geometrija (meri se, rotira se) */
.module-body {
    position: relative;
    width: 100%;
  height: 100%;
   /* transform-origin: 0 0;*/
}

/* samo marker, lahko je prazen */
.composite-body {
    position: relative;
}

/* deli znotraj composite */
.composite-body .part {
    position: absolute;
}

.el-controls {
    position: absolute;
    top: 100%;              /* takoj pod modulom */
    left: 50%;              /* sredina modula */
    transform: translateX(-50%);
    
   
    gap: 6px;

    margin-top: 8px;        /* razmik od modula */
    z-index: 200;
    pointer-events: auto;
}

.module-body {
    pointer-events: none;
}
.placed.composite > .el-controls {
    pointer-events: auto;
}

/* Če želiš, da je na tlorisu malo zaobljen na koncu (bolj realno) */
[data-sub-side="right"] .rokonaslon-vizual {
   /* border-top-right-radius: 6px;*/
    border-bottom-right-radius: 3px;
  /*rgb(210 223 240)*/
}

[data-sub-side="left"] .rokonaslon-vizual {
   /* border-top-left-radius: 6px;;*/
    border-bottom-left-radius: 3px;
   
}

/* --- STILI ZA NAČIN TISKANJA (A4 PREVIEW NA ZASLONU) --- */
#workspace.mode-print {
    /* Namesto fiksnega centriranja s transform, raje uporabi margin za skrolanje */
    position: relative !important;
    background: white;
    left: unset !important;
    transform: scale(1) !important; /* Če želiš naravno velikost pri zoomu */
    margin: 40px auto !important; /* Centriranje lista z razmikom zgoraj/spodaj */
    
    /* Prepričamo se da so dimenzije točne */
    width: 210mm !important;
    height: 297mm !important;
    
    /* Prepreči da bi vsebina znotraj lista povzročala svoje drsnike */
    overflow: hidden !important; 
    transition: none !important;
}

/* Prilagodimo ozadje view-porta v načinu print, da postane "scrolling container" */
#view-port.mode-print-active {
    overflow-y: auto !important;
    display: block !important; /* Da margin: auto na workspace-u deluje */
    height: calc(100vh - 2rem) !important;
    max-height: none !important;
    min-height: 0 !important;
    transition: none !important;
}

/* Skrijemo kontrole na elementih med tiskom */
#workspace.mode-print .el-controls,
#workspace.mode-print #resize-handle,
#workspace.mode-print .active-selection {
    display: none !important;
}

#workspace.mode-print .print-hidden-architecture {
    display: none !important;
}

#workspace.mode-print .placed,
#workspace.mode-print .module-body,
#workspace.mode-print .part,
#workspace.mode-print .part-visual,
#workspace.mode-print .dimension-line,
#workspace.mode-print .dimension-text,
#workspace.mode-print .editable-dim {
    pointer-events: none !important;
}

#workspace.mode-print .placed.note-element,
#workspace.mode-print .placed.note-element .note-content {
    pointer-events: auto !important;
}

#workspace.mode-print .placed.note-element {
    cursor: text;
}

#workspace.mode-print .placed.note-element.is-editing-note {
    cursor: text;
}

#workspace.mode-print .dimension-text.editable-dim {
    pointer-events: auto !important;
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

#workspace.mode-print .dimension-text.editable-dim:focus {
    background: white !important;
    outline: 2px solid #3b82f6 !important;
    color: black !important;
}

/* Odstrani obrobe selekcije na elementih */



/* Ko je vklopljen način za tisk, vizualno potisnemo celotno vsebino dol */
#workspace.mode-print .placed {
    /* Uporabimo margin, da ne motimo transformacij (rotacij) */
    margin-top: 220px !important;
    
    /* Onemogočimo prehode (transitions), da preklop zgodi takoj in brez napak */
    transition: none !important;
}

/* Dimenzijske črte in besedilo že izračunajo pozicijo iz vizualnih mej .placed (ki že vsebujejo margin-top 220px), zato ne smejo imeti dodatnega margin-top */
#workspace.mode-print .dimension-line,
#workspace.mode-print .dimension-text,
#workspace.mode-print .editable-dim,
#workspace.mode-print .dimension-line.vertical {
    margin-top: 0 !important;
    transition: none !important;
}


@media screen {
    body.mode-print-active #print-mode-actions {
        display: flex !important;
    }
}

body.mode-print-active header,
body.mode-print-active footer,
body.mode-print-active #mobile-quick-modules-bar,
body.mode-print-active #sideMenu, 
body.mode-print-active #headerMenu, 
body.mode-print-active #positionDisplay,
body.mode-print-active #viewport-price-display, 
body.mode-print-active #btnLoadTemplate,
body.mode-print-active #arch-toolbox,
body.mode-print-active #rotateHUD,
body.mode-print-active #resize-handle,
body.mode-print-active #preview3d,
body.mode-print-active #catalog-container,
body.mode-print-active #composite-modal,
body.mode-print-active #promoBubble,
body.mode-print-active #promoMinBtn,
body.mode-print-active #wrapper-height-resize-handle,
body.mode-print-active .mobile-actions {
    display: none !important;
}

body.mode-print-active #configurator-main-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transition: none !important;
}

/* wrapper je logični kontejner */
.placed.composite {
    background: transparent;
    border: none;
 
    box-shadow:0;
}





/* --- STILI SAMO ZA TISKALNIK --- */
@media print {
    /* 1. Odstranimo drsnike na celotni strani */
    html, body {
        width: 210mm !important;
        min-width: 210mm !important;
        max-width: 210mm !important;
        height: 297mm !important;
        min-height: 297mm !important;
        max-height: 297mm !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        /*-webkit-print-color-adjust: exact;*/
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #configurator-main-wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #wrapper-height-resize-handle {
        display: none !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    #view-port::-webkit-scrollbar,
    #workspace::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* 2. Odstranimo drsnike na viewportu in workspace-u */
    #view-port, #workspace {
        overflow: hidden !important;
        border: none !important;
        box-shadow: none !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #view-port {
        display: block !important;
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Skrijemo vse elemente, ki bi lahko povzročali "izven-robno" vsebino */
    body footer, footer, body header, header, body #sideMenu, body #headerMenu, body #positionDisplay, body #viewport-price-display, body #btnLoadTemplate, body #arch-toolbox, body #rotateHUD, body #resize-handle, body #print-mode-actions, body.mode-print-active #print-mode-actions, .mobile-actions, #promoMinBtn, #promoBubble, #preview3d, #catalog-container, #composite-modal, #main-render-frame {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    
    @page {
        size: A4;
        margin: 0; /* Odstrani robove brskalnika */
    }

    body {
        background: white;
        overflow: hidden !important;
    }

     #view-port { background: white;}

    /* Skrijemo celoten vmesnik */
    header, footer, #headerMenu, #sideMenu, #positionDisplay, #viewport-price-display, #render-modal, #preview-modal, #preview3d, #catalog-container, #composite-modal, .mobile-actions {
        display: none !important;
    }

    /*.part {    background: #ffffff;  box-sizing: border-box; }
    .rokonaslon-vizual-shadow {      background-color: #ffffff !important; filter: blur(0px) !important; }*/
    
    /* Workspace nastavimo za papir */
    #workspace.mode-print {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        margin: 0 !important;
        width: 210mm !important;
        height: 297mm !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Prisilimo, da se ozadja tiskajo (če je potrebno) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Skrijemo placeholder besedilo pri tiskanju */
    input::placeholder,
    textarea::placeholder,
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder,
    input::-moz-placeholder,
    textarea::-moz-placeholder,
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        opacity: 0 !important;
    }
}

/* 1. OSNOVNA ROČKA - PRIVZETO SKRITA */
.resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #2563eb;
    border-radius: 3px;
    z-index: 20;
    pointer-events: auto;
    touch-action: none !important;
    
    /*  NOVO: Skrijemo ročko po privzetem */
    display: none; 
}

/* Desna ročka */
.resize-r {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
     cursor: ew-resize; 
}

/* Leva ročka */
.resize-l {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
     cursor: ew-resize; 
  }  
  
/* 2.  NOVO: PRIKAŽI ROČKO SAMO, KO JE ELEMENT IZBRAN */
.placed.selected .resize-handle {
    display: block; 
    /* Če imaš v ročki <i class="fa fa-expand"></i> in jo želiš centrirati, 
       lahko namesto 'block' uporabiš 'flex':
       display: flex; justify-content: center; align-items: center; */
}

/* 3. POZICIJE IN KAZALCI (BREZ !important, DA SE NE TEPEJO) */
.resize-br {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize; /* Diagonalna puščica za tabureje */
}





/*  NOVO: Kurzor za 90° in 270° (Gor-dol) */
.placed[data-rotation="90"] .resize-r,
.placed[data-rotation="270"] .resize-r,
.placed[data-rotation="-90"] .resize-r {
    cursor: ns-resize !important;
}
.placed[data-rotation="90"] .resize-l,
.placed[data-rotation="270"] .resize-l,
.placed[data-rotation="-90"] .resize-l {
    cursor: ns-resize !important;
}

/* 45 stopinj in 225 stopinj (diagonala zgoraj-levo / spodaj-desno) */
.placed[data-rotation="45"] .resize-r,
.placed[data-rotation="45"] .resize-l,
.placed[data-rotation="225"] .resize-r,
.placed[data-rotation="225"] .resize-l {
    cursor: nwse-resize !important;
}

/* 135, 315 in -45 stopinj (diagonala spodaj-levo / zgoraj-desno) */
.placed[data-rotation="135"] .resize-r,
.placed[data-rotation="135"] .resize-l,
.placed[data-rotation="315"] .resize-r,
.placed[data-rotation="315"] .resize-l,
.placed[data-rotation="-45"] .resize-r,
.placed[data-rotation="-45"] .resize-l {
    cursor: nesw-resize !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}



 .module-item {
    position: relative;
    padding-top: 56px !important; /* prostor za ikono zgoraj */
}

.module-item.composite-template {
    padding-top: 10px !important;
}

.module-item.composite-template::before {
    display: none !important;
}

/* ikona zgoraj */
.module-item::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.9;
    pointer-events: none;
}

/* posamezne ikone */

.module-item[data-type="JAKOB"]::before {  background-image: url("../icons/JAKOB.png");}
.module-item[data-type="KAVC-TOM"]::before {  background-image: url("../icons/KAVC-TOM.png");}
/*

.module-item[data-template="LEZALNIK"]::before {  background-image: url("../icons/LEZALNIK.png");}
.module-item[data-template="SEDISCA"]::before {  background-image: url("../icons/SEDISCA.png");}
.module-item[data-template="VMESNA_SEDISCA"]::before {  background-image: url("../icons/VMESNA_SEDISCA.png");}
.module-item[data-template="SAMOSTOJNA_SEDISCA"]::before {  background-image: url("../icons/SAMOSTOJNA_SEDISCA.png");} */


.module-item[data-type="1SV59"]::before {  background-image: url("../icons/1SV59.png");}
.module-item[data-type="1SV60"]::before {  background-image: url("../icons/1SV60.png");}
.module-item[data-type="1SV65"]::before {  background-image: url("../icons/1SV65.png");}
.module-item[data-type="1SV70"]::before {  background-image: url("../icons/1SV70.png");}
.module-item[data-type="1SV80"]::before {  background-image: url("../icons/1SV80.png");}
.module-item[data-type="1SV90"]::before {  background-image: url("../icons/1SV90.png");}

.module-item[data-type="2SV118"]::before {  background-image: url("../icons/2SV118.png");}
.module-item[data-type="3SV150"]::before {  background-image: url("../icons/3SV150.png");}
.module-item[data-type="3SV180"]::before {  background-image: url("../icons/3SV180.png");}
.module-item[data-type="3SV180X"]::before {  background-image: url("../icons/3SVX.png");}

.module-item[data-type="2PV118"]::before {  background-image: url("../icons/2PV.png");}
.module-item[data-type="3PV150"]::before {  background-image: url("../icons/3PV.png");}
.module-item[data-type="3PV180"]::before {  background-image: url("../icons/3PV.png");}
.module-item[data-type="3PV180X"]::before {  background-image: url("../icons/3PVX.png");}

.module-item[data-type="3LV150"]::before {  background-image: url("../icons/3LV160.png");}
.module-item[data-type="3LV160"]::before {  background-image: url("../icons/3LV160.png");}


.module-item[data-orientation="KOL"]::before {  background-image: url("../icons/KO-L.png");}
.module-item[data-orientation="KOD"]::before {  background-image: url("../icons/KO-D.png");}
.module-item[data-type="KO45"]::before {  background-image: url("../icons/KO45.png");}
.module-item[data-type="KT"]::before {  background-image: url("../icons/KT.png");}

.module-item[data-type="1STL"]::before {   background-image: url("../icons/1STL.png");}
.module-item[data-type="1STD"]::before {    background-image: url("../icons/1STD.png");}
.module-item[data-type="2STL"]::before {  background-image: url("../icons/2STL.png");}
.module-item[data-type="2STD"]::before {  background-image: url("../icons/2STD.png");}

.module-item[data-type="2PTL"]::before {  background-image: url("../icons/2PTL.png");}
.module-item[data-type="2PTD"]::before {  background-image: url("../icons/2PTD.png");}

.module-item[data-type="1VRO75"]::before {    background-image: url("../icons/1VRO-75.png");}
.module-item[data-type="1VRO60"]::before {    background-image: url("../icons/1VRO-60.png");}

.module-item[data-type="TBVV"]::before {    background-image: url("../icons/TBVV.png");}
.module-item[data-type="TBVP"]::before {    background-image: url("../icons/TBVP.png");}
.module-item[data-type="TBV"]::before {    background-image: url("../icons/TBV.png");}
.module-item[data-type="TBM"]::before {    background-image: url("../icons/TBM.png");}

.module-item[data-type="PREDAL_OZEK"]::before {    background-image: url("../icons/PREDAL_OZEK.png");}
.module-item[data-type="PREDAL_LEVI"]::before {    background-image: url("../icons/PREDAL_LEVI.png");}
.module-item[data-type="PREDAL_DESNI"]::before {    background-image: url("../icons/PREDAL_DESNI.png");}

.module-item[data-type="STENA"]::before {    background-image: url("../icons/STENA.png");}
.module-item[data-type="VRATA"]::before {    background-image: url("../icons/VRATA.png");}
.module-item[data-type="VRATA_BELA"]::before {    background-image: url("../icons/VRATA_BELA.png");}
.module-item[data-type="OKNO"]::before {    background-image: url("../icons/OKNO.png");}
.module-item[data-type="OKNO_KRILNO"]::before {    background-image: url("../icons/OKNO_KRILNO.png");}

.module-item[data-type="RADIATOR"]::before {    background-image: url("../icons/RADIATOR.png");}
.module-item[data-type="OMARA"]::before {    background-image: url("../icons/OMARA.png");}
.module-item[data-type="JUKA"]::before {    background-image: url("../icons/JUKA.png");}
.module-item[data-type="KOMODA_TV"]::before {    background-image: url("../icons/KOMODA_TV.png");}
.module-item[data-type="PREPROGA"]::before {    background-image: url("../icons/PREPROGA.png");}
.module-item[data-type="MIZICA"]::before {    background-image: url("../icons/MIZICA.png");}
.module-item[data-type="SLIKA"]::before {    background-image: url("../icons/SLIKA.png");}

.module-item[data-type="TOMFLEX_1LD"]::before { background-image: url("../icons/TOMFLEX_1LD.webp"); }
.module-item[data-type="TOMFLEX_1LL"]::before { background-image: url("../icons/TOMFLEX_1LL.webp"); }
.module-item[data-type="TOMFLEX_1LV"]::before { background-image: url("../icons/TOMFLEX_1LV.webp"); }

.module-item[data-type="TOMFLEX_1MD"]::before { background-image: url("../icons/TOMFLEX_1MD.webp"); }
.module-item[data-type="TOMFLEX_1ML"]::before { background-image: url("../icons/TOMFLEX_1ML.webp"); }
.module-item[data-type="TOMFLEX_1MV"]::before { background-image: url("../icons/TOMFLEX_1MV.webp"); }

.module-item[data-type="TOMFLEX_1SD"]::before { background-image: url("../icons/TOMFLEX_1SD.webp"); }
.module-item[data-type="TOMFLEX_1SL"]::before { background-image: url("../icons/TOMFLEX_1SL.webp"); }
.module-item[data-type="TOMFLEX_1SV"]::before { background-image: url("../icons/TOMFLEX_1SV.webp"); }

.module-item[data-type="TOMFLEX_1XLD"]::before { background-image: url("../icons/TOMFLEX_1XLD.webp"); }
.module-item[data-type="TOMFLEX_1XLL"]::before { background-image: url("../icons/TOMFLEX_1XLL.webp"); }
.module-item[data-type="TOMFLEX_1XLV"]::before { background-image: url("../icons/TOMFLEX_1XLV.webp"); }

.module-item[data-type="TOMFLEX_1XSD"]::before { background-image: url("../icons/TOMFLEX_1XSD.webp"); }
.module-item[data-type="TOMFLEX_1XSL"]::before { background-image: url("../icons/TOMFLEX_1XSL.webp"); }
.module-item[data-type="TOMFLEX_1XSV"]::before { background-image: url("../icons/TOMFLEX_1XSV.webp"); }

.module-item[data-type="TOMFLEX_1XXLD"]::before { background-image: url("../icons/TOMFLEX_1XXLD.webp"); }
.module-item[data-type="TOMFLEX_1XXLL"]::before { background-image: url("../icons/TOMFLEX_1XXLL.webp"); }
.module-item[data-type="TOMFLEX_1XXLV"]::before { background-image: url("../icons/TOMFLEX_1XXLV.webp"); }

.module-item[data-type="TOMFLEX_2L"]::before { background-image: url("../icons/TOMFLEX_2L.webp"); }
.module-item[data-type="TOMFLEX_2LD"]::before { background-image: url("../icons/TOMFLEX_2LD.webp"); }
.module-item[data-type="TOMFLEX_2LL"]::before { background-image: url("../icons/TOMFLEX_2LL.webp"); }
.module-item[data-type="TOMFLEX_2LV"]::before { background-image: url("../icons/TOMFLEX_2LV.webp"); }

.module-item[data-type="TOMFLEX_2M"]::before { background-image: url("../icons/TOMFLEX_2M.webp"); }
.module-item[data-type="TOMFLEX_2MD"]::before { background-image: url("../icons/TOMFLEX_2MD.webp"); }
.module-item[data-type="TOMFLEX_2ML"]::before { background-image: url("../icons/TOMFLEX_2ML.webp"); }
.module-item[data-type="TOMFLEX_2MV"]::before { background-image: url("../icons/TOMFLEX_2MV.webp"); }

.module-item[data-type="TOMFLEX_2S"]::before { background-image: url("../icons/TOMFLEX_2S.webp"); }
.module-item[data-type="TOMFLEX_2SD"]::before { background-image: url("../icons/TOMFLEX_2SD.webp"); }
.module-item[data-type="TOMFLEX_2SL"]::before { background-image: url("../icons/TOMFLEX_2SL.webp"); }
.module-item[data-type="TOMFLEX_2SV"]::before { background-image: url("../icons/TOMFLEX_2SV.webp"); }

.module-item[data-type="TOMFLEX_2XL"]::before { background-image: url("../icons/TOMFLEX_2XL.webp"); }
.module-item[data-type="TOMFLEX_2XLD"]::before { background-image: url("../icons/TOMFLEX_2XLD.webp"); }
.module-item[data-type="TOMFLEX_2XLL"]::before { background-image: url("../icons/TOMFLEX_2XLL.webp"); }
.module-item[data-type="TOMFLEX_2XLV"]::before { background-image: url("../icons/TOMFLEX_2XLV.webp"); }

.module-item[data-type="TOMFLEX_2XXL"]::before { background-image: url("../icons/TOMFLEX_2XXL.webp"); }
.module-item[data-type="TOMFLEX_2XXLD"]::before { background-image: url("../icons/TOMFLEX_2XXLD.webp"); }
.module-item[data-type="TOMFLEX_2XXLL"]::before { background-image: url("../icons/TOMFLEX_2XXLL.webp"); }
.module-item[data-type="TOMFLEX_2XXLV"]::before { background-image: url("../icons/TOMFLEX_2XXLV.webp"); }

.module-item[data-type="TOMFLEX_KO"]::before { background-image: url("../icons/TOMFLEX_KO.webp"); }
.module-item[data-type="TOMFLEX_TB"]::before { background-image: url("../icons/TOMFLEX_TB.webp"); }

/* hover efekt */
.module-item:hover::before {
    transform: translateX(-50%) scale(1.05);
}

/*ikone*/
.module-icon {
    position: relative;
    background-repeat: no-repeat;
    background-position: right 55px bottom 6px;
    background-size: 48px;
}


 .module-item {
    position: relative;
}
#print-items-list ul {
    list-style: none;
    padding-left: 0;
}

#print-items-list ul ul {
    margin-left: 1rem;
    border-left: 1px solid #e5e7eb;
    padding-left: 0.75rem;
}

.control-btn.edit-btn {
    background: #64748b; /* slate-500 */
}
.control-btn.edit-btn:hover {
    background: #475569;
}

/* osnovni vizual nogic – nič polnega */
.part.leg-part .part-visual {
    background: transparent;
}

.part.leg-part {
    pointer-events: none; /* samo vizual */
}

.part.leg-part::before,
.part.leg-part::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px dashed #1738f6; /* rdeča */
    background: transparent;
    left: 0;
    opacity:0.5;
}

/* zgornja nogica */
.part.leg-part::before {
    top: 0;
}

/* spodnja nogica */
.part.leg-part::after {
    bottom: 0;
}
/* Popolnoma nevtraliziraj osnovni izgled nogic */
.part.leg-part {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Če imaš notranji vizual */
.part.leg-part .part-visual {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}


.placed.preview-leg {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}


.preview-main {
    background: rgb(74 75 75);
   /* border-radius: 4px;*/
}

.preview-armrest {
    background: #266fff;
}

.preview-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: bold;
    color: #ffffff;
    pointer-events: none;
    text-align:center;
}

.preview-label-armrest {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    
    font-size: 9px;
    font-weight: bold;
    color: #ffffff;
    pointer-events: none;
        text-align:center;
}



.preview-leg {
    background: none;
    position: relative;
}

.preview-leg::before,
.preview-leg::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 10px;
    border: 2px dashed #ef4444;
    box-sizing: border-box;
}

.preview-leg::before {
    top: 0;
}

.preview-leg::after {
    bottom: 0;
}

.preview-subdata {
    /* Uporabimo recimo modro barvo, ampak z drugačnim odtenkom ali prosojnostjo */
   /* background-color: #bfdbfe;*/ /* Tailwind blue-200 */
    border: 0px dashed #3b82f6; /* Tailwind blue-500 */
    z-index: 5; /* Da bo nad nogicami in pod/ob rokonaslonu */
    background-color: rgb(74 75 75);
    /* Opcijsko: črtast vzorec za indikacijo "tehničnega" kosa */
  /*  background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.4) 5px,
        transparent 5px,
        transparent 10px
    );*/
}

.placed.no-opis .opis {
    display: none;
}

/* standard */
/*.preview-main {
    background: rgba(0,0,0,0.7);
    border: 1px solid #111;
}*/

/* MEDICAL 1 – modra */
.preview-medical-1 {
    background: rgba(37, 99, 235, 0.75);   /* blue-600 */
    border: 2px dashed rgba(30, 64, 175, 1);
}

/* MEDICAL 2 – zelena */
.preview-medical-2 {
    background: rgba(16, 185, 129, 0.75);  /* emerald-500 */
    border: 2px dashed rgba(4, 120, 85, 1);
}


/* privzeto skrito */
.rot-22-btn { display: none; }

/* ko je “angled mode” omogočen, pokaži gumbe povsod */
body.has-ko45 .rot-22-btn { display: flex; } /* ali inline-flex */
/*.rot-btn {display:none;}
.rot-0-btn {display:none;}
.rot-22-btn {display:none;}
.rot-270-btn {display:none;}*/

.placed.controls-hidden-temp .el-controls{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  /*transform: translateY(6px) !important;*/
}

body.dimensions-hidden-temp .dimension-line,
body.dimensions-hidden-temp .dimension-text,
body.dimensions-hidden-temp .editable-dim {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Layer čez workspace (ne vpliva na layout) */
#templatePreviewLayer{
  position:absolute;
  inset:0;
  pointer-events:none; /* ghosti naj ne lovijo klika */
  z-index:9999;
    cursor: crosshair;
}

/* posamezni ghost */
.template-preview{
  position:absolute;
  cursor: crosshair;
 /* border:2px dashed rgba(16,185,129,.9);*/ /* emerald */
  background:rgba(16,185,129,1);
  box-sizing:border-box;
  /*border-radius:8px;*/
}

/* (opcijsko) bounding box */
.template-preview-bbox{
  position:absolute;
 /* border:2px solid rgba(16,185,129,.9);*/
  background:rgba(16,185,129,1);
  /* border-radius:10px;*/
   cursor: crosshair;

}

.cam-btn{
  width:40px;
  height:40px;
  border-radius:0.5rem;
  border:1px solid #cbd5e1;
  background-color:#f8fafc;
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.cam-left{ background-image:url('/../icons/cam-left.png'); }
.cam-right{ background-image:url('/../icons/cam-right.png'); }
.cam-top{ background-image:url('/../icons/cam-top.png'); }

/* --- CSS 3D KOCKA ANIMACIJA --- */
.visual-3d {
    flex: 1;
    display: flex;
    justify-content: left;
    align-items: left;
    height: 18px;
    perspective: 28px; /* Ključno za 3D globino */
    float:left;
    padding-top:0.25em;
}

.cube-scene {
    width: 24px;
    height: 24px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 10s infinite linear;
}

.cube-face {
    position: absolute;
  
    width: 18px;
    height: 18px;
    border: 1px solid var(--accent-green); /* Neon zeleni robovi */
    background: rgba(247, 247, 247, 0.1);   /* Prosojno zeleno polnilo */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: white;
    box-shadow: 0 0 2px rgb(255, 255, 255);
    backdrop-filter: blur(1px);
}

/* Pozicioniranje stranic kocke */
.front  { transform: rotateY(0deg) translateZ(9px); }
.back   { transform: rotateY(180deg) translateZ(9px); }
.right  { transform: rotateY(90deg) translateZ(9px); }
.left   { transform: rotateY(-90deg) translateZ(9px); }
.top    { transform: rotateX(90deg) translateZ(9px); }
.bottom { transform: rotateX(-90deg) translateZ(9px); }



.i-front  { transform: rotateY(0deg) translateZ(9px); }
.i-back   { transform: rotateY(180deg) translateZ(9px); }
.i-right  { transform: rotateY(90deg) translateZ(9px); }
.i-left   { transform: rotateY(-90deg) translateZ(9px); }
.i-top    { transform: rotateX(90deg) translateZ(9px); }
.i-bottom { transform: rotateX(-90deg) translateZ(9px); }

@keyframes rotateCube {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}

@keyframes rotateCubeReverse {
    from { transform: rotateX(360deg) rotateY(360deg); }
    to { transform: rotateX(0deg) rotateY(0deg); }
}

.dimension-line.sub-dim { background: rgba(0,0,0,0.25); }
.dimension-text.sub-dim { color: rgba(0,0,0,0.55); font-size: 11px; }


/* --- MOBILE OPTIMIZATION (Max Width 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Allow normal page scroll on mobile */
    body {
        overflow-y: auto !important;
        display: block;
    }

    /* 2. Container Adjustment */
    .flex.flex-1 {
        flex-direction: column; /* Stack vertically */
        height: auto !important;
        overflow: visible !important;
    }

    /* 3. WORKSPACE (The Canvas) - Takes Top Priority */
    #view-port {
        order: 1; /* Visual Order: First */
        height: auto !important;
        min-height: 380px;
        width: 100% !important;
        padding: 10px !important;
        overflow: visible !important;
        z-index: 1;
        background-position: center bottom !important; /* Anchor background image */
    }



  #workspace { 
            width: 300px; height: 260px; background: white; position: relative; flex-shrink: 0;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
            background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px), linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
            background-size: 25px 25px;
        }

    /* Scale the grid down to fit mobile screen cleanly */
   /* #workspace {
        order: 1 !important;
        transform: scale(0.72) !important;
        transform-origin: top center !important;
        margin: 10px auto -110px auto !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    }

    @media (max-width: 380px) {
        #workspace {
            transform: scale(0.65) !important;
            margin: 10px auto -135px auto !important;
        }
    }*/

    /* 4. SIDEBAR (The Catalog) - Bottom Drawer */
    aside#sideMenu {
        order: 2; /* Visual Order: Second */
        width: 100% !important;
        min-width: 0;
        max-width: none;
        height: auto !important;
        border-right: none;
        z-index: 40;
        padding-bottom: 20px;
    }

    #mobile-quick-modules-bar {
        order: 2.5 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #mobile-quick-modules-bar::-webkit-scrollbar {
        display: none !important;
    }

    #viewport-price-display {
        order: 3 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        width: 100% !important;
        min-height: auto !important;
        margin-top: 8px !important;
        border-radius: 1rem !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
        padding: 8px 12px !important;
        overflow: hidden !important;
    }

    #viewport-price-display .viewport-price-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x mandatory !important;
    }

    #viewport-price-display .viewport-price-inner::-webkit-scrollbar {
        display: none !important;
    }

    #viewport-price-display .viewport-price-inner > div {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
    }

    #viewport-price-display .viewport-price-values {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
    }

    #viewport-price-total {
        font-size: 1.1rem !important;
        white-space: nowrap !important;
    }

    #viewport-price-discounts {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    #viewport-price-discounts span {
        white-space: nowrap !important;
        background: rgba(236, 253, 245, 0.95);
        color: #047857;
        padding: 3px 8px;
        border-radius: 9999px;
        border: 1px solid rgba(167, 243, 208, 0.8);
        font-weight: 800;
    }

    #sideMenu-resize-handle {
        display: none;
    }

    #positionDisplay,
    

    /* Make the tabs smaller and scrollable */
    .tab-btn {
        padding: 8px 4px;
        font-size: 10px;
    }

    /* 5. Fix the Module Grid in the Bottom Drawer */
    .tab-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 items per row instead of 2 */
        gap: 8px;
        padding: 10px;
    }

    .module-item {
        padding: 5px !important;
        min-height: 80px;
    }

    /* Smaller text for modules */
    .module-item .font-bold {
        font-size: 9px !important;
    }
    
  

    #main-render-drawer-toggle {
        position: absolute;
        top: 50%;
        right: -30px;
        width: 30px;
        height: 58px;
        transform: translateY(-50%);
        border: 1px solid rgba(203, 213, 225, 0.95);
        border-left: 0;
        border-radius: 0 14px 14px 0;
        background: rgba(255, 255, 255, 0.92);
        color: #334155;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: none;
    }

    

    /* Horizontal Header Menu on mobile, positioned above viewport-price-display */
    #headerMenu {
        order: 2 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-height: none !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        margin-top: 10px !important;
        margin-bottom: 4px !important;
        border-radius: 1rem !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

   /* #headerMenu::-webkit-scrollbar {
        display: none;
    }*/

    #headerMenu .w-6.h-\[1px\] {
        width: 1px !important;
        height: 20px !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    #cameraButtons {
        flex-direction: row !important;
        gap: 6px !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    #headerMenu > button,
    #headerMenu > div,
    #headerMenu .cam-btn,
    #headerMenu .module-item {
        flex-shrink: 0 !important;
    }

    #viewport-price-display {
        left: 0;
        right: 0;
        bottom: 0;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #viewport-price-display .viewport-price-inner {
        align-items: flex-start;
        gap: 8px;
    }

    #viewport-price-display .viewport-price-values {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    #viewport-price-total {
        font-size: 1rem;
    }

    #viewport-price-discounts {
        font-size: 0.75rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px 10px;
    }

    #cameraButtons {
        display: flex !important;
    }

    #cameraSelect {
        display: none !important;
    }
    
    /* Keep only critical actions compact */
    header .flex.gap-3 {
        gap: 6px;
    }

    #btnRender {
        padding: 6px 10px;
        font-size: 11px;
    }

    #render-dropdown {
        position: fixed !important;
        top: 58px !important;
        right: 10px !important;
        width: min(240px, calc(100vw - 20px)) !important;
        z-index: 2000 !important;
    }

    body.mode-print-active::before {
        background: rgba(15, 23, 42, 0.18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #view-port.mode-print-active {
        height: calc(100vh - 60px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    #workspace.mode-print {
        transform: none !important;
        margin: 12px auto 80px !important;
    }
}

@media print {
    /* Popolnoma odstranimo le ne-tiskalna ozadja (sliko iz ozadje.php, morphing krogle, zameglitve) in gumba/orodja */
    body > div.fixed[style*="background-image"],
    body > div.fixed.-z-10,
    #morph-bg-container,
    .morph-blob,
    #morph-render-bg,
    .morph-overlay-grid,
    body::before,
    body.mode-print-active::before,
    #print-mode-actions,
    body.mode-print-active #print-mode-actions,
    .print-render-resize-handle,
    .note-dragbar,
    .print\:hidden,
    .no-print {
        display: none !important;
        visibility: hidden !important;
    }

    html,
    body,
    #view-port,
    #workspace,
    #workspace.mode-print {
        background: #fff !important;
        background-image: none !important;
    }

    /* List ponudbe in prekrivalo ponudbe (glava, podatki naročnika, spisek elementov, cene) morata biti vidna */
    #workspace.mode-print #print-overlay {
        display: flex !important;
        background: transparent !important;
    }

    #view-port,
    #view-port.mode-print-active {
        position: fixed !important;
        inset: 0 !important;
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }

    #workspace.mode-print {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }
}

.shimmer-effect {
    /* Odstranimo navadno barvo in dodamo gradient */
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important; 
    
    /* Dodamo steklen rob zgoraj (highlight) */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    
    /* Mehka rdeča senca (blur effect) spodaj */
    box-shadow: 
        0 4px 6px -1px rgba(220, 38, 38, 0.3),
        0 10px 15px -3px rgba(220, 38, 38, 0.2),
        inset 0 0 20px rgba(0,0,0,0.1); /* Notranja senca za globino */
        
    /* Zaobljenost in tranzicija */
    border-radius: 8px;
    transition: all 0.3s ease;
}

.shimmer-effect:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 10px 20px -5px rgba(220, 38, 38, 0.4),
        0 0 15px rgba(239, 68, 68, 0.5); /* Močnejši sijaj ob hoverju */
}

#btnRender {
    /* Živahen gradient: Modra -> Indigo */
    background-image: linear-gradient(to right, #2563eb 0%, #4f46e5 51%, #2563eb 100%) !important;
    background-size: 200% auto; /* Potrebno za animacijo gradienta */
    
    color: white;
    border: none; /* Odstranimo default border */
    
    /* Steklen rob zgoraj */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Žareča senca (Blur effect okoli gumba) */
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
    
    transition: 0.5s; /* Gladka animacija */
}

#btnRender:hover {
    background-position: right center; /* Premakne gradient (efekt tekoče barve) */
    box-shadow: 0 0 25px rgba(79, 70, 229, 0.6); /* Močnejši vijoličen sijaj */
    transform: scale(1.02); /* Rahla povečava */
}

/* Ikona strele znotraj gumba naj tudi zažari */
#btnRender .fa-bolt {
    filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.8)); /* Rumen sijaj okoli strele */
}


/* Definiramo animacijo: element prileti od spodaj in postane viden */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Začne 20px nižje */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nastavimo začetno stanje za module v tem tabu */
#tab-sedisca.tab-content {
    display: block;
}

#tab-sedisca.tab-content.hidden {
    display: none !important;
}

#tab-sedisca-model-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

#tab-sedisca-model-tabs.hidden {
    display: none !important;
}

#tab-sedisca-model-tabs.catalog-model-tabs-disabled {
    display: none !important;
}

#tab-sedisca-model-tabs button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    padding: 8px 6px;
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#tab-sedisca-model-tabs button.bg-blue-600 {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

#tab-sedisca .sedisca-model-subtab {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


.sedisca-model-subtab .model-group-filter,
#sedisca-subtab-TOMFLEX .tomflex-group-filter {
    grid-column: 1 / -1;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.sedisca-model-subtab .model-filter-btn,
#sedisca-subtab-TOMFLEX .tomflex-filter-btn {
    flex: 1 1 calc(50% - 6px);
    min-height: 32px;
    padding: 7px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
    color: #475569;
    background: transparent;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sedisca-model-subtab .model-filter-btn:hover,
#sedisca-subtab-TOMFLEX .tomflex-filter-btn:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

.sedisca-model-subtab .model-filter-btn.is-active,
#sedisca-subtab-TOMFLEX .tomflex-filter-btn.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

.sedisca-model-subtab .model-filter-toggle-btn,
#sedisca-subtab-TOMFLEX .tomflex-filter-toggle-btn {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    border-radius: 9px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sedisca-model-subtab .model-filter-toggle-btn:hover,
#sedisca-subtab-TOMFLEX .tomflex-filter-toggle-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.sedisca-model-subtab .model-group-filter.is-expanded .model-filter-toggle-btn i,
#sedisca-subtab-TOMFLEX .tomflex-group-filter.is-expanded .tomflex-filter-toggle-btn i {
    transform: rotate(180deg);
}

.sedisca-model-subtab .model-group-filter:not(.is-expanded) .model-filter-btn:not(.is-active):not(:first-child),
#sedisca-subtab-TOMFLEX .tomflex-group-filter:not(.is-expanded) .tomflex-filter-btn:not(.is-active):not(:first-child) {
    display: none !important;
}

.sedisca-model-subtab .model-group-filter:not(.is-expanded) .model-filter-btn,
#sedisca-subtab-TOMFLEX .tomflex-group-filter:not(.is-expanded) .tomflex-filter-btn {
    flex: 1 1 0%;
}

.sedisca-model-subtab .model-group-label,
#sedisca-subtab-TOMFLEX .tomflex-group-label {
    grid-column: 1 / -1;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    #tab-sedisca .sedisca-model-subtab {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 14px 16px;
        margin-left: -14px;
        margin-right: -14px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    #tab-sedisca .sedisca-model-subtab:not(.hidden) > .module-item {
        flex: 0 0 clamp(108px, 32vw, 140px);
        min-height: 92px;
        scroll-snap-align: start;
    }

    #tab-sedisca .sedisca-model-subtab:not(.hidden) > .module-item.composite-template {
        flex-basis: clamp(132px, 42vw, 168px);
    }

    #sedisca-subtab-TOMFLEX:not(.hidden) > .tomflex-group-filter,
    #sedisca-subtab-TOMFLEX:not(.hidden) > .tomflex-group-label {
        flex: 0 0 calc(100% - 28px);
    }
}

#tab-sedisca .sedisca-model-subtab.hidden {
    display: none !important;
}

#tab-sedisca .sedisca-model-subtab:not(.hidden) > .module-item {
    opacity: 0; /* Na začetku so skriti */
    /* Ime animacije | trajanje | način prehoda | ohrani končno stanje */
    animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.sofa-model-entry-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px);
}

.sofa-model-entry-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 22px 55px rgba(37, 99, 235, 0.18);
}

.sofa-model-entry-thumb {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.sofa-model-entry-fallback {
    height: 150px;
    align-items: center;
    justify-content: center;
    background: rgba(241, 245, 249, 0.75);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    #sofa-model-entry-modal {
        align-items: flex-end !important;
        padding: 10px !important;
    }

    #sofa-model-modal-content {
        max-height: calc(100dvh - 20px);
        overflow-y: auto !important;
        border-radius: 22px 22px 14px 14px !important;
        padding: 16px !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    #sofa-model-modal-content > .flex.items-start {
        margin-bottom: 14px !important;
    }

    #sofa-model-modal-content h2 {
        font-size: 1.25rem !important;
    }

    .sofa-model-entry-thumb,
    .sofa-model-entry-fallback {
        height: 120px;
    }

    #sofa-model-template-panel {
        max-height: none !important;
        overflow-y: visible !important;
        padding: 12px !important;
    }
}

/* --- GUMB POTRDI (Modern Blue Glow) --- */
.btn-potrdi {
    /* Gradient: Od svetlo modre do temnejše */
    background: linear-gradient(135deg, #a00000 0%, #ff0000  100%);
    
    /* Bela barva teksta */
    color: white;
    font-weight: 600; /* Malo debelejši tekst za berljivost */
    
    /* Odstranimo default rob */
    border: none;
    
    /* Steklen rob zgoraj za 3D efekt */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    
    /* MEHKA SENCA (Blurry Shadow) */
    box-shadow: 0 4px 15px -3px rgba(255, 22, 22, 0.682);
    
    /* Tranzicija za gladko animacijo */
    transition: all 0.3s ease;
    
    /* Malo bolj zaobljeni robovi izgledajo bolj moderno */
    border-radius: 8px;
}

/* Stanje ob preletu miške */
.btn-potrdi:hover {
    /* Gradient se malo premakne ali posvetli */
    background: linear-gradient(135deg, #004aa5 0%, #3b82f6 100%);
    
    /* Senca zažari močneje */
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
    
    /* Gumb se rahlo dvigne */
    transform: translateY(-1px);
}

/* Stanje ob kliku */
.btn-potrdi:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

/* --- GUMB PREKLIČI (Secondary / Ghost Button) --- */
.btn-preklici {
    background: transparent; /* Prozorno ozadje */
    
    /* Nežen siv rob in tekst (Slate-300 / Slate-500) */
    border: 1px solid #cbd5e1; 
    color: #64748b; 
    
    font-weight: 600; /* Krepko, da je berljivo */
    border-radius: 8px; /* Enaka zaobljenost kot gumb Potrdi */
    
    transition: all 0.2s ease;
}

/* Hover: Postane bolj viden (Svetlo sivo ozadje) */
.btn-preklici:hover {
    background-color: #f8fafc; /* Slate-50 */
    border-color: #94a3b8;     /* Slate-400 (Temnejši rob) */
    color: #334155;            /* Slate-700 (Temnejši tekst) */
}

/* Active: Klik efekt */
.btn-preklici:active {
    background-color: #e2e8f0; /* Slate-200 */
    transform: scale(0.98);    /* Rahlo se pomanjša ob kliku */
}

/* --- ABSTRACT MORPHING BACKGROUND --- */

#morph-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* Najnižji nivo */
    background-color: #f8fafc; /* Svetla osnovna barva (Slate-50) */
    pointer-events: none; /* Klik gre skozi na workspace */
}

#morph-render-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    filter: blur(1px) saturate(0.9) contrast(1.04);
    mix-blend-mode: multiply;
    transition: opacity 0.45s ease, filter 0.45s ease;
    z-index: 0;
}

#morph-render-bg.is-visible {
    opacity: 0.16;
}

/* Skupni stil za vse "krogle" */
.morph-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); /* KLJUČNO: To naredi mehak preliv */
    opacity: 0.6; /* Subtilnost */
    will-change: transform; /* Optimizacija za gladko animacijo */
    z-index: 1;
}

/* 1. Krogla: Modra/Vijolična */
.blob-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: #bfdbfe; /* Blue-200 */
    animation: moveBlob1 15s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Krogla: Zelena/Emerald (za svežino) */
.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: #d1fae5; /* Emerald-100 */
    animation: moveBlob2 10s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Krogla: Indigo (za globino) */
.blob-3 {
    top: 20%;
    right: 20%;
    width: 40vw;
    height: 40vw;
    background: #e0e7ff; /* Indigo-100 */
    animation: moveBlob3 8s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

/* ANIMACIJE - Počasno premikanje in deformacija */
/*@keyframes moveBlob1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20vw, 10vh) scale(1.1); }
}

@keyframes moveBlob2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-20vw, -10vh) scale(0.9); }
}

@keyframes moveBlob3 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-10vw, 20vh) scale(1.2); }
    100% { transform: translate(10vw, -10vh) scale(0.8); }
}
*/
/* --- ANIMACIJA ZA WORKSPACE (Pop-in + Bounce) --- */

/* Definiramo gibanje */
@keyframes popInBounce {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px); /* Začne pomanjšan in malo nižje */
    }
    /* Točka, kjer animacija "prestreli" (postane večja od končne) */
    60% {
        opacity: 1;
        transform: scale(1.03) translateY(0); 
    }
    /* Točka umiritve */
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Razred, ki ga bomo dodali elementu */
.animate-entrance {
    /* Ime animacije | trajanje | elastična krivulja | ohrani končno stanje */
    animation: popInBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    
    /* Zagotovimo, da je na začetku neviden (da ne utripne) */
    opacity: 0; 
    
    /* Izboljša renderiranje teksta in robov med animacijo */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* --- ANIMACIJA ZA ZAPIRANJE MODALA --- */
@keyframes popOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9); /* Malo se pomanjša ob izginotju */
    }
}

.animate-exit {
    /* Ime animacije | trajanje | način | ohrani stanje */
    animation: popOut 0.2s ease-in forwards; 
    pointer-events: none; /* Prepreči klike med izginjanjem */
}
/* --- ANIMACIJA ZA IZBRIS ELEMENTA --- */
@keyframes fadeOutScale {
    to {
        opacity: 0;
        transform: scale(0.8); /* Malo se pomanjša */
    }
}

.animate-delete {
    /* Ime animacije | trajanje | način */
    animation: fadeOutScale 0.3s ease-out forwards;
    pointer-events: none; /* Preprečimo klike med izginjanjem */
}

/* --- VIEWPORT FULLSCREEN & PRINT STYLES --- */
#view-port:fullscreen,
#view-port:-webkit-full-screen,
#view-port:-moz-full-screen,
#view-port:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    background-color: #f8fafc !important;
}

#material-toolbox {
    display: none !important;
}

#view-port:fullscreen #material-toolbox {
    display: flex !important;
    z-index: 50 !important;
}

#view-port:-webkit-full-screen #material-toolbox {
    display: flex !important;
    z-index: 50 !important;
}

#headerMenuFullscreen {
    display: none;
}

:fullscreen #headerMenu,
:-webkit-full-screen #headerMenu,
:-moz-full-screen #headerMenu,
:-ms-fullscreen #headerMenu,
#view-port:fullscreen #headerMenu,
#view-port:-webkit-full-screen #headerMenu {
    display: none !important;
}

:fullscreen #headerMenuFullscreen,
:-webkit-full-screen #headerMenuFullscreen,
:-moz-full-screen #headerMenuFullscreen,
:-ms-fullscreen #headerMenuFullscreen,
#view-port:fullscreen #headerMenuFullscreen,
#view-port:-webkit-full-screen #headerMenuFullscreen {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 1rem !important;
    left: calc(1rem + var(--side-menu-width, 18rem) + 1rem) !important;
    z-index: 40 !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
}

#view-port:fullscreen .fullscreen-side-menu,
#view-port:-webkit-full-screen .fullscreen-side-menu,
#view-port:-moz-full-screen .fullscreen-side-menu,
#view-port:-ms-fullscreen .fullscreen-side-menu,
.fullscreen-side-menu {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    right: auto !important;
    bottom: auto !important;
    width: 18rem !important;
    max-width: calc(100vw - 2rem) !important;
    height: auto !important;
    max-height: 90vh !important;
    margin: 0 !important;
    z-index: 45 !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

@media print {
    #fullscreen-btn,
    #print-mode-actions {
        display: none !important;
    }
}