:root {
    --visina-donji-pojas: 150px;
    --width-icon-selected: 36px;
    --height-icon-selected: 36px;
}
html, body {
    /*overflow: hidden;*/
    /* allow the page to scroll on this view (your SPA CSS disables it) */
    html, body { overflow: auto !important; }
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    font-family: "Lato", sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ensure body takes full viewport height */
}

#mycontent {
    display: flex; /* Make mycontent a flex container */
    flex-direction: row; /* Align children horizontally */
    flex-direction: column; /* Stack children vertically */
    flex: 1; /* Make it take the remaining space */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    flex: 1;
}

#unutarnjiOkvir{
    height: calc(100% - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
}
#mySidenavHeader{
    height: 45px;
    width: 100%;
    background-color: #3B64AB;
    color: black;
    margin-top: 1px;
    padding: 15px;
}
#mySidenav {
    width: 0;
    position: fixed; /* Fixed position to always be on the screen */
    height: 100dvh;             /* ispravno na iOS-u (Dynamic Viewport) */     /* zatvoren by default */
    background-color: #fff; /* Changed to white */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    /*overflow-y: hidden;*/ /* Allow vertical scrolling within the sidebar if needed */
    overflow-y: auto; /* Add vertical scroll if content overflows */
    /*transition: 0.5s;*/
    transition: width .25s ease;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 10px;
    border-right: 5px solid transparent; /* Gradient border */
    background-image: linear-gradient(white, white), linear-gradient(to right, #f06, #aaf); /* Customize the gradient colors */
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 0 20px rgba(0,0,0,.15);
}
.sidenav {
    height: 100%;
    /*width: 250px;*/
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px;
    padding-top: 5px;
    color: black;
}

.icon-container.selected,
.icon-container:hover {
    background-color: #3B64AB;
    color: white;
}

.icon-container.selected i,
.icon-container.selected p,
.icon-container:hover i,
.icon-container:hover p {
    color: white;
}
#mySidenav a {
    text-decoration: none; /* No underline */
    font-size: 16px; /* Font size */
    color: #818181; /* Font color */
    text-align: center; /* Center text */
}

#mySidenav a:hover {
    color: magenta;
}

.sidenav .closebtn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: xx-large;
    color: white;
}

#main {
    transition: margin-left .5s;
    padding: 10px;
    position: relative;
    z-index: 1;
    flex: 1; /* Take the remaining space */
    height: 100%; /* Full viewport height */
    overflow-x: hidden;
    overflow-y: hidden;
}

#contentPanel {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    width: 100%;
    color: black; /* Text color */
    background-color: #f7f7f7;
    padding: 5px; /* Padding around content */
    height: 100%; /* Adjust 50px to the combined height of other elements */
}
#iconbar {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    width: calc(100% - 6px);
    color: black; /* Text color */
    background-color: #f7f7f7;
    padding: 5px; /* Padding around content */
    height: 100%; /* Adjust 50px to the combined height of other elements */
    overflow-y: scroll;     /* Enable vertical scrolling */
}
#iconbar::-webkit-scrollbar {
    width: 5px;
}

#iconbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#iconbar::-webkit-scrollbar-thumb {
    background: #888;
}

#iconbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.header-container {
    width: 100%;
}

@media screen and (max-width: 768px) {
    #mySidenav {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }

    #main {
        margin-left: 0;
        width: 100%;
    }
    .main-container {
        height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
        /*background-color: #f0f0f0;*/
    }
    #main { position: relative; }
    #three-host {
        position: absolute; inset: 0;
        z-index: 0;          /* behind */
    }
    #main .main-container {
        position: relative;
        z-index: 1;          /* above the canvas */
    }
    canvas.webgl {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        display: block;
    }
}

.omotac_dvije_kolone {
    padding: 1px;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 1px;
}
.omotac_dvije_kolone_flex {
    padding: 1px;
    height: auto;
    width: 100%;
    display: flex;
    grid-template-columns: 50% 50%;
    grid-gap: 8px;
    align-items: center;
}

.omotac_70_30 {
    padding: 1px;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 70% 30%;
    grid-gap: 1px;
    background: white;
}
.omotac_15_85 {
    padding: 1px;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 15% 85%;
    grid-gap: 1px;
    background: white;
}
.omotac_20_80 {
    padding: 1px;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-gap: 1px;
    background: white;
}
.grid-item {
    padding: 1px;
}
.omotac_20_60_20 {
    padding: 1px;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-gap: 1px;
}
.omotac_main_header {
    padding: 1px;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-gap: 1px;
    background: white
}
.omotac {
    padding: 1px;
    height: auto;
    width: 100%;
    background: white
}
.omotac_bez_boje {
    padding: 1px;
    height: auto;
    width: 100%;
}
.omotac_tri_kolone {
    padding: 1px;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap: 1px;
    background: white
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.centrirano {
    margin: auto;
    justify-content: center;  /* Center horizontally */
}
/* MINOR STYLE ELEMENTS BY SLAVKO */
span.nobr { white-space: nowrap; }
.nobr { white-space: nowrap; }

.center{
    margin-left: auto; margin-right: auto;
    text-align: center;
    justify-content: center;
}
div.center{
    margin-left: auto; margin-right: auto;
    text-align: center;
    justify-content: center;
}
.sredina{
    margin-left: auto; margin-right: auto;
    text-align: center;
    justify-content: center;
}
div.sredina{
    margin-left: auto; margin-right: auto;
    text-align: center;
    justify-content: center;
}
.desno{
    float: right;
    text-align: right;
    justify-content: right;
}
div.desno{
    float: right;
    text-align: right;
    justify-content: right;
}
.tab { margin-left: 40px; }

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}
.crno{
    color: black;
}
.plavo{
    color:#0A306F;
}
.svijetloplavo{
    color:#007dc1;
}
.tamnoplavo{
    color:darkblue;
}
.crveno{
    color:#ff0900;
}
.zeleno{
    color: green;
}
.bijelo{
    color: #ffffff;
}
/* Clear float */
.ocisti {
    clear: both;
}

/** footer **/
.footer {
    background: #333;
    color: white;
    font-weight: bold;
    text-align: center;
    border-top: 5px solid #ccc;
    margin-top: 20px;
    padding: 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.footer p {
    color: #666;
    margin: 0;
    font-size: 11px;
    width: 50%;
}

.footer p.left {
    float: left;
}

div#footer p.right {
    float: right;
    text-align: right;
}

div#footer p a {
    color: #666;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #999;
}

.HouseColorIcon {
    /* New Properties */
    min-width: 40px; /* Ensures it is never smaller than 40px */
    width: 100%;    /* Allows it to grow and fill the available width in its container */
    min-height: 40px;
    height: 100%;
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin: 10px;
}

.HouseColorView {
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    box-sizing: border-box; /* Include padding and border in the total width */
    overflow-y: scroll;     /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-right: 20px; /* Adjust padding to account for scrollbar */
}
#HouseColorPane{
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    box-sizing: border-box; /* Include padding and border in the total width */
    overflow-y: auto;
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-right: 20px; /* Adjust padding to account for scrollbar */
}

.HouseColorViewRow {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 10px;
    margin-bottom: 10px;
}
.HouseColorIconContainer {
    /* Additional styling for your icon containers */
    /* For example, you could center content, add padding, etc. */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 10px; /* Padding inside each icon container */
    border: 1px solid #ccc; /* Optional: adds a border to each container */
}

.HouseColorIcon.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width-icon-selected); /* Adjust based on the actual size of your icon */
    height: var(--height-icon-selected);
    transform: translate(-50%, -50%);
    background-image: url('../css/images/tick2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
}
.door-model-icon.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width-icon-selected); /* Adjust based on the actual size of your icon */
    height: var(--height-icon-selected);
    transform: translate(-50%, -50%);
    background-image: url('../css/images/tick2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
}
.door-model-icon:hover {
    border-color: darkgreen;
}

/*IZVEDBA VIEW***/
/* IZVEDBA VIEW */
.izvedba-image-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.centrirano {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.izvedba-image-cell {
    width: 148px;  /* Adjust as needed for proper display */
    height: 296px;  /* Let height adjust based on content */
    margin: 5px;
    padding: 10px; /* Add padding to ensure spacing */
    border: 1px solid #ccc;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* centers both vertically and horizontally */
    text-align: center; /* centers the text label */
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative; /* For positioning the tick mark */
    box-sizing: border-box;
}

.izvedba-image-cell:hover {
    border-color: darkgreen;
}

.izvedba-image-cell.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width-icon-selected); /* Adjust based on the actual size of your icon */
    height: var(--height-icon-selected);
    transform: translate(-50%, -50%);
    background-image: url('../css/images/tick2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
}

.izvedba-sprite img {
    display: block;
    margin: 0 auto;
}

.izvedba-label {
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
    display: block;
    width: 100%;
}

.izvedba-image-cell img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.izvedba-sprite {
    /*justify-content: center;
    background-repeat: no-repeat;
    display: inline-block;*/

    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/*IspisUpitOdabiraView*/
#IspisUpitOdabiraView {
    width: calc(100% - 1px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    box-sizing: border-box; /* Include padding and border in the total width */
    border: 1px solid #ccc;
}
#IspisUpitOdabiraPane {
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Include padding and border in the total width */
    overflow-y: auto;
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 5px;
}
/*IspisUpitOdabiraView*/


/* Staklo */
/* Staklo */
/* ===========================================
   FIX: Staklo Pane must scroll and NEVER overflow
   =========================================== */
#StakloVrataView {
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    box-sizing: border-box; /* Include padding and border in the total width */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-bottom: 55px !important;
}
/* Dropdown kao i prije */
#stakloCategory {
    margin-bottom: 10px;
    width: 100%;
    height: 35px;
    font-size: medium;
    font-weight: bold;
    background-color: whitesmoke;
    color: black;
    text-align: left;
    padding-left: 10px;
    flex-shrink: 0;
}

/* Scroll-pane */
#StakloPane {
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Include padding and border in the total width */
    /*overflow-y: scroll;*/
    overflow-y: auto;
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-right: 20px; /* Adjust padding to account for scrollbar */
    /*padding-bottom: 45px !important;*/
}

/* GRID */
.staklo-pane {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.staklo-tab-controls button {
    background-color: #f1f1f1;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px;
    transition: background-color 0.3s, transform 0.2s;
}

.staklo-tab-controls button:hover {
    background-color: #3B64AB;
    transform: translateY(-2px);
}

.staklo-tab-content {
    display: none;
    padding: 10px 0 0 0;
    border-top: none;
}

.staklo-tab-controls .active {
    background-color: #3B64AB;
    color: white;
    transform: translateY(-1px);
}

.staklo-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: white;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.staklo-icon:hover {
    border-color: darkgreen;
}

.staklo-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border: 1px solid #eee;
    padding: 5px;
    margin-bottom: 8px;
}

.staklo-model span {
    font-size: 12px;
    text-align: center;
}

.staklo-icon.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width-icon-selected, 36px);
    height: var(--height-icon-selected, 36px);
    transform: translate(-50%, -50%);
    background-image: url('../css/images/tick2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Staklo */

#ConstructionView {
    overflow-y: auto;     /* Enable vertical scrolling */
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin-left: 3px; /* Set the left margin */
    margin-right: 12px; /* Set the right margin */
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
}
/* Optional: Customize the scrollbar */
#ConstructionView::-webkit-scrollbar {
    width: 8px;
}

#ConstructionView::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#ConstructionView::-webkit-scrollbar-thumb {
    background: #888;
}

#ConstructionView::-webkit-scrollbar-thumb:hover {
    background: #555;
}
#ConstructionView h3 {
    margin-top: 0;
    color: #333;
}
#ConstructionViewPane{
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Include padding and border in the total width */
    overflow-y: auto;     /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
}
.dimension-control {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.dimension-control label {
    flex-basis: 30%;
    color: #666;
}

.dimension-control input[type="range"] {
    flex: 1;
    margin: 0 10px;
}

.dimension-display {
    width: 60px;
    text-align: center;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
}

.dimension-result {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.dimension-result label {
    flex-basis: 50%;
    color: #666;
}

.dimension-result span {
    font-weight: bold;
    color: #333;
}

#ConstructionPanel {
    margin-top: 20px; /* Spacing from the previous content */
}

#ConstructionPanel h4 {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #333;
}

#ConstructionPanel form {
    display: flex;
    flex-direction: column;
}

#ConstructionPanel label {
    margin-bottom: 5px; /* Space between radio buttons */
    font-size: 1em;
    color: #666;
    line-height: 1.5; /* Space between line of text and radio button */
}

#ConstructionPanel input[type="radio"] {
    margin-right: 10px; /* Space between radio button and label text */
}

#ConstructionSmjerOtvaranja {
    margin-top: 20px;
}

#ConstructionSmjerOtvaranja h4 {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #333;
}

#ConstructionSmjerOtvaranja form {
    display: flex;
    flex-direction: column;
}

#ConstructionSmjerOtvaranja label {
    margin-bottom: 5px;
    font-size: 1em;
    color: #666;
    line-height: 1.5;
}

#ConstructionSmjerOtvaranja input[type="radio"] {
    margin-right: 10px;
}

.illustration-container {
    margin-top: 15px;
    text-align: center; /* Center the illustration image */
}
/***** door model view ***/
#DoorModelView {
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    box-sizing: border-box; /* Include padding and border in the total width */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-bottom: 55px !important;
}
#DoorModelPane {
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Include padding and border in the total width */
    overflow-y: scroll;     /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-right: 20px; /* Adjust padding to account for scrollbar */
    /*padding-bottom: 25px !important;*/
}

#DoorModelView::-webkit-scrollbar {
    width: 8px;
}

#DoorModelView::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#DoorModelView::-webkit-scrollbar-thumb {
    background: #888;
}

#DoorModelView::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#doorCategory {
    margin-bottom: 10px;
    width: 100%;
    height: 35px;
    font-size: medium;
    font-weight: bold;
    background-color: whitesmoke;
    color: black;
    text-align: left; /* Ensure left-alignment */
    padding-left: 10px; /* Add padding for better spacing */
}

.door-model-pane {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-template-columns: repeat(2, 1fr); /* Ensure a maximum of 3 columns */
    gap: 10px;
    padding-right: 20px; /* Add padding to the right to account for scrollbar */
}

.door-model-icon {
    display: flex;
    flex-direction: column; /* Ensure the label is below the icon */
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
    background-color: white;
    cursor: pointer; /* Change cursor on hover */
    position: relative; /* For the selection icon */
    width: 100%; /* Ensure the icon takes full width of the grid item */
    box-sizing: border-box; /* Include padding and border in the total width */
}

.door-model-icon img {
    max-width: 100%;
    max-height: 250px; /* Adjust the max-height as necessary */
    object-fit: contain;
}

.door-model-icon span {
    margin-top: 10px; /* Space between the icon and the label */
    font-size: 10px; /* Adjust as necessary */
}

/*POGLED IZNUTRA*/
#PogledIznutraView {
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    box-sizing: border-box; /* Include padding and border in the total width */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
}
#PogledIznutraPane{
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Include padding and border in the total width */
    overflow-y: scroll;     /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-right: 20px; /* Adjust padding to account for scrollbar */
}
.pogled-iznutra-icon.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width-icon-selected); /* Adjust based on the actual size of your icon */
    height: var(--height-icon-selected);
    transform: translate(-50%, -50%);
    background-image: url('../css/images/tick2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
}
.pogled-iznutra-icon:hover {
    border-color: darkgreen;
}

.pogled-iznutra-pane {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-template-columns: repeat(2, 1fr); /* Ensure a maximum of 3 columns */
    gap: 10px;
    padding-right: 20px; /* Add padding to the right to account for scrollbar */
}

.pogled-iznutra-icon {
    display: flex;
    flex-direction: column; /* Ensure the label is below the icon */
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
    background-color: white;
    cursor: pointer; /* Change cursor on hover */
    position: relative; /* For the selection icon */
    width: 100%; /* Ensure the icon takes full width of the grid item */
    box-sizing: border-box; /* Include padding and border in the total width */
}

.pogled-iznutra-icon img {
    max-width: 100%;
    max-height: 250px; /* Adjust the max-height as necessary */
    object-fit: contain;
}

.pogled-iznutra-label {
    margin-top: 10px;
    font-weight: bold;
}

/* Door Color View Styles */
.color-section {
    margin-bottom: 20px;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    justify-items: center;
    align-items: center;
}
.color-grid {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    padding-right: 20px;
    padding-bottom: 55px !important;
}
.door-color-label {
    margin-top: 5px; /* Space between icon and label */
    text-align: center; /* Center the text */
}
.color-icon-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.color-icon-container:hover {
    border-color: darkgreen;
}
.color-icon-container img {
    width: 80px; /* Adjust size as needed */
    height: 80px;
    border: 1px solid #ccc;
}

.color-icon-container.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width-icon-selected); /* Adjust based on the actual size of your icon */
    height: var(--height-icon-selected);
    transform: translate(-50%, -50%);
    background-image: url('../css/images/tick2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
}

#colorCategory {
    margin-bottom: 10px;
    width: 100%;
    height: 35px;
    font-size: medium;
    font-weight: bold;
    background-color: whitesmoke;
    color: black;
    border-width: thin;
}

#DoorColorView {
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    box-sizing: border-box; /* Include padding and border in the total width */
    overflow-y: scroll;     /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-right: 20px; /* Adjust padding to account for scrollbar */
    padding-bottom: 55px !important;

}

.icon-label {
    display: block; /* Makes the label take the full width of its container */
    text-align: center; /* Centers the text */
    margin-top: 5px; /* Spacing between the icon and the text */
}

.MenuIconLabel {
    font-size:small;
    /*font-weight: bold;*/
    color: #000000;
    margin: 0;
    margin-bottom: 5px;
    margin-top: 5px;
}

/* DODACI */
#dodaciView {
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    box-sizing: border-box; /* Include padding and border in the total width */
    /*overflow-y: scroll;     !* Enable vertical scrolling *!*/
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-right: 20px; /* Adjust padding to account for scrollbar */
    padding-bottom: 55px !important;
}

#dodaciCategory {
    margin-bottom: 10px;
    width: 100%;
    height: 35px;
    font-size: medium;
    font-weight: bold;
    background-color: whitesmoke;
    color: black;
    border-width: thin;
}

#DodaciSection {
    box-sizing: border-box; /* Include padding and border in the total width */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    overflow-y: auto; /* Enable vertical scrolling for dodaciSection */
    max-height: 100%; /* Adjust this value to control the height of the viewable area */
    padding-right: 10px; /* To avoid overlapping scrollbar */
    padding-bottom: 10px;
}
/* Optional: Customize the scrollbar */
#DodaciSection::-webkit-scrollbar {
    width: 8px;
}

#DodaciSection::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#DodaciSection::-webkit-scrollbar-thumb {
    background: #888;
}

#DodaciSection::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.dodaci-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.dodaci-color-icon-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    width: 95%;
    margin: 5px;
    border: 1px solid #ccc; /* Optional border to visualize the container */
    position: relative;
}
.dodaci-color-icon-container:hover {
    border-color: darkgreen;
}
.dodaci-img-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dodaci-img-container img {
    max-width: 150px; /* Adjust as needed */
    max-height: 150px; /* Adjust as needed */
    object-fit: contain; /* Keeps the aspect ratio of the image */
}

.dodaci-options-container {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px; /* Spacing between options */
    padding-left: 10px; /* Space between image and text */
}

.dodaci-door-color-label {
    margin-top: 15px;
    text-align: left;
}

.dodaci-color-icon-container.selected::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: var(--width-icon-selected); /* Adjust based on the actual size of your icon */
    height: var(--height-icon-selected);
    background-image: url('../css/images/tick2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
}

.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    background-color: green;
    color: white;
    border-radius: 50%;
    padding: 5px;
}

/*DODACI
VIEW*/

/*DODACI
VIEW*/

/*
messagebox*/

div.Message {
    border-radius: 10px;
    padding: 10px 10px 10px 36px;
    margin: 5px;
    opacity: 1;
    transition: opacity 0.6s; /* 600ms to fade out */
}

div.Message.error {
    background: #ffecec url('images/message-error.svg') no-repeat 10px 50%;
    border: 1px solid #f5aca6;
}

div.Message.success {
    background: #e9ffd9 url('images/message-success.svg') no-repeat 10px 50%;
    border: 1px solid #a6ca8a;
}

div.Message.info {
    background: #e3f7fc url('images/info.svg') no-repeat 10px 50%;
    border: 1px solid #8ed9f6;
}

div.Message.warn {
    background: #fff8c4 url('images/message-warning.svg') no-repeat 10px 50%;
    border: 1px solid #f2c779;
}

.MessageCloseButton {
    margin-left: 15px;
    color: #C8C8C8;
    font-weight: bold;
    float: right;
    font-size: 20px;
    line-height: 17px;
    cursor: pointer;
    transition: 0.3s;
}

.MessageCloseButton:hover {
    color: #606060;
}

#MessageContainerFoot {
    display: none;
}

/*wrapper0 pojasL and pojasD*/
div#wrapper0{
    display: flex;
    width: 100%;
    margin: 0px auto;
    padding: 0;
    background: white;
    margin-bottom: 10px;
}
div#wrapper0 .beltL {
    width: 1%;
    background: transparent;
    float: left;
}
div#wrapper0 .beltR {
    width: 1%;
    background: transparent;
    float: right;
}
div#wrapper0 .mainContent {
    width: 98%;
    background: transparent;
}

/* reserve space so content doesn't hide under the fixed footer */
.mainContent { padding-bottom: 110px; } /* adjust to your footer's height */

.footer { z-index: 2000; } /* keep footer clickable if you use modals */

/*wrapper0 pojasL and pojasD*/

/*beginning upit/ispis view */
/* General styling for the view */
#IspisUpitOdabiraView {
    padding: 30px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    /*max-width: 80%; !* Set max-width to 80% *!
    max-height: 80vh; !* Set a maximum height *!*/
    overflow-y: scroll;     /* Enable vertical scrolling */
    margin-left: 3px; /* Set the left margin */
    margin-right: 12px; /* Set the right margin */
}
#IspisUpitOdabiraView::-webkit-scrollbar {
    width: 8px;
}

#IspisUpitOdabiraView::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#IspisUpitOdabiraView::-webkit-scrollbar-thumb {
    background: #888;
}

#IspisUpitOdabiraView::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Styling for section names */
.section-name-ispis {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007BFF;
    color: #007BFF;
}

/* Styling for section data */
.section-data-ispis {
    display: grid; /* Use grid layout */
    font-size: 0.9em;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 10px; /* Space between items */
    margin-bottom: 20px;
}

/* General styling for the columns */
.col-a-ispis, .col-b-ispis {
    display: inline-block;
    vertical-align: top;
    font-size: 0.9em;
}

/* Styling for the left column (labels) */
.col-a-ispis {
    font-weight: bold;
    color: #333;
}

/* Styling for the right column (values) */
.col-b-ispis {
    color: #666;
}

/* Styling for buttons */
/************************************
 * BUTTONS (Isolated Section Only)
 * Paste after your existing CSS to override
 ************************************/
/* fix the action bar above the footer and center it */
#actionButtons {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;            /* put it just above the footer; tune as needed */
    z-index: 2050;           /* above backdrop and content, below any modals if you like */
    background: #fff;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.action-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;            /* just above the footer */
    z-index: 2050;           /* above footer/backdrops */
    background: #fff;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
/* Base appearance for all button variants */
.formbutton,
[class^="formbutton_"] {
    display: inline-block;
    padding: 15px 30px;
    margin: 20px 10px;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    line-height: 1;
    transition: background-color .15s ease, transform .02s ease;
}

/* Focus accessibility */
.formbutton:focus-visible,
[class^="formbutton_"]:focus-visible {
    outline: 3px solid rgba(0,0,0,.25);
    outline-offset: 2px;
}

/* Active press */
.formbutton:active,
[class^="formbutton_"]:active {
    transform: translateY(1px);
}

/* Disabled state (supports <button disabled> and .disabled class) */
.formbutton:disabled,
[class^="formbutton_"]:disabled,
.formbutton.disabled,
[class^="formbutton_"].disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== Variants ===== */

/* Primary (existing) */
.formbutton { background-color: #007BFF; color: #fff; }
.formbutton:hover { background-color: #0069d9; }

/* Red (existing) */
.formbutton_red { background-color: #dc3545; color: #fff; }
.formbutton_red:hover { background-color: #b02a37; }

/* Green (existing; corrected & simple) */
.formbutton_green { background-color: darkgreen; color: #fff; }
.formbutton_green:hover { background-color: #0b5e0b; }

/* Light green (existing) */
.formbutton_lightgreen { background-color: lightgreen; color: #000; }
.formbutton_lightgreen:hover { background-color: #7ed67e; }

/* Light blue (existing) */
.formbutton_lightblue { background-color: lightblue; color: #000; }
.formbutton_lightblue:hover { background-color: #87ceeb; } /* skyblue */

/* Dark olive green (existing) */
.formbutton_darkolivegreen { background-color: darkolivegreen; color: #000; }
.formbutton_darkolivegreen:hover { background-color: #6b8e23; } /* olive drab */

/* Yellow (existing) */
.formbutton_yellow { background-color: yellow; color: #000; }
.formbutton_yellow:hover { background-color: gold; }

/* Blue (NEW) */
.formbutton_blue { background-color: #0d6efd; color: #fff; }
.formbutton_blue:hover { background-color: #0b5ed7; }

/* Lightread (NEW; treated as “light red”) */
.formbutton_lightread { background-color: lightcoral; color: #000; }
.formbutton_lightread:hover { background-color: #e57373; }
/* Grey (existing; corrected & simple) */
.formbutton_grey { background-color: grey; color: #fff; }
.formbutton_grey:hover { background-color: darkgrey; }

/* Additional specific styling for sections */
.din-direction {
    color: #dc3545;
}

.glass-row {
    color: #28a745;
}

/* Responsive styling for smaller screens */
@media (max-width: 600px) {
    .section-data-ispis {
        grid-template-columns: 1fr; /* Single column layout on smaller screens */
    }

    .formbutton {
        width: 100%;
        margin: 10px 0;
    }
}

/*ending ispis/upit view*/

#IzvedbaView {
    width: calc(100% - 25px); /* Adjust based on your layout */
    height: calc(100vh - var(--visina-donji-pojas)); /* Adjust 50px to the combined height of other elements */
    box-sizing: border-box; /* Include padding and border in the total width */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
}
#IzvedbaPane {
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Include padding and border in the total width */
    overflow-y: scroll;     /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border for visual feedback */
    padding: 10px;          /* Optional: Add some padding */
    padding-right: 20px; /* Adjust padding to account for scrollbar */
}

/* Optional: Customize the scrollbar */
#IzvedbaView::-webkit-scrollbar {
    width: 8px;
}

#IzvedbaView::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#IzvedbaView::-webkit-scrollbar-thumb {
    background: #888;
}

#IzvedbaView::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*
#zaglavlje {
    background: #333;
    color: #fff;
    padding: 15px;
    text-align: center;
}*/

/*FONTS*/

@font-face {
    font-family: 'Titillium';
    font-style: normal;
    src: local('Titillium'),
    url('../fonts/Titillium-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Titillium';
    font-style: normal;
    font-weight: bold;
    src: local('Titillium Bold'),
    local('Titillium-Bold'),
    url('../fonts/Titillium-Bold.otf') format('opentype');
}

/*italic version*/
@font-face {
    font-family: 'Titillium';
    font-style: italic;
    src: local('Titillium Italic'),
    local('Titillium-Italic'),
    url('../fonts/Titillium-RegularItalic.otf') format('opentype');
}

@font-face {
    font-family: 'Arial';
    font-style: normal;
    src: local('Arial'),
    url('../fonts/Arial.ttf') format('truetype');
}

@font-face {
    font-family: 'Arial';
    font-style: italic;
    src: local('Arial'),
    url('../fonts/ariali.ttf') format('truetype');
}

@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: bold;
    src: local('Arial'),
    url('../fonts/arialbd.ttf') format('truetype');
}

@font-face {
    font-family: 'LucidaHandwriting';
    font-style: normal;
    src: local('Lucida Handwriting'),
    local('LucidaHandwriting'),
    url('../fonts/LucidaHandwriting.ttf') format('truetype');
}

.classname {
    font-family: 'Titillium';
}
.icon-row {
    display: block; /* promjena sa flex */
    width: 100%;
}

/* Gornji red: izvedba + model + iznutra */
.top-row {
    position: relative;
    height: 519px;
    width: 100%;
    display: flex;               /* fleksibilni raspored unutar top-row */
    justify-content: center;    /* centriraj sadržaj vodoravno */
    align-items: flex-end;      /* poravnaj sadržaj vertikalno dole */
    gap: 16px;
}

/* Sam kontejner za izvedbu */
.izvedba-container, .iznutra-container {
    position: relative;
    width: 355px;   /* precizna širina (ili drugačije, ali neka bude poznata) */
    height: 519px;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: visible;
}

/* Donji red: dodaci, staklo itd. */
.bottom-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    height: 20%;
    margin-top: auto;
}

.izvedba-img {
    position: absolute;
    bottom: 0;
}

/* Model wrapper (overlays izvedba image) */
.model-wrapper, .iznutra-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 227px;
    height: 453px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-img, .iznutra-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.izvedba-left {
    justify-content: flex-start !important;
}
.izvedba-right {
    justify-content: flex-end !important;
}
/* Container alignment helpers */
.izvedba-container.izvedba-left {
    justify-content: flex-start;
}

.izvedba-container.izvedba-right {
    justify-content: flex-end;
}

.icon-slot {
    height: 100%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.extra-icon {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
/* Default alignment (centered) */
.align-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    z-index: 1;
}

/* Aligned left or right: use flexbox */
.align-left,
.align-right {
    position: relative;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 1;
    object-fit: contain;
}
/* Force visibility and correct stacking for 3D view */
#ThreeDView,
#threejs-container,
#threejs-container canvas {
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    width: 100% !important;
    height: 80vh !important;
    background: #202020 !important;
    overflow: visible !important;
}

/* Make sure parents don’t hide it */
#contentPanel,
.grid-item,
.view {
    overflow: visible !important;
    background: transparent !important;
}

.mydisabled {
    background-color: #dddddd;
}
.row-highlight {
    background-color: #fcc;
    transition: background-color 0.3s ease;
}


/* ---------- TOP BAR ---------- */
/* ---------- UNIVERSAL TOP BAR LAYOUT ---------- */

#topbar {
    width: 100%;
    background: #f2f2f2;
    border-bottom: 1px solid #dcdcdc;
    padding: 6px 0;
    position: sticky;
    top: 0;
    z-index: 99999;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LEFT & RIGHT MENUS */
.menu-left,
.menu-right {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin: 0;
    gap: 12px;
}

.menu-left li,
.menu-right li {
    display: flex;
    align-items: center;
}

.menu-left li a,
.menu-right li a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #003366;
    font-size: 15px;
    font-weight: 500;
}

/* ICONS */
.menu-left i,
.menu-right i {
    font-size: 22px;
}

/* CENTER PARTNER BOX */
.partner-box {
    flex-grow: 1;
    text-align: center;
}

/* SUBMENU SYSTEM */
.menu-left li,
.menu-right li {
    position: relative;
}

.menu-left li ul,
.menu-right li ul {
    display: none;
    position: absolute;
    top: 34px;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    min-width: 240px;
    list-style: none;
    padding: 6px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 99999;
}

.menu-left li:hover > ul,
.menu-right li:hover > ul {
    display: block;
}

.menu-left li ul li a,
.menu-right li ul li a {
    padding: 8px 14px;
    color: #003366;
    display: block;
}

.menu-left li ul li a:hover,
.menu-right li ul li a:hover {
    background-color: #f1f1f1;
}

/* Sub-submenus align */
.menu-left li ul li ul {
    left: 100%;
    top: 0;
}

.partner-label {
    text-align: center;
    line-height: 1.2;
}

.label-title {
    font-size: 13px;
    color: #555;
}

.label-value {
    font-size: 18px;
    font-weight: 700;
    color: #003366;
}


/* CENTER PARTNER BOX */
.partner-box {
    flex-grow: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #003366;
}

/* SUBMENU (dropdowns) */
#main-menu,
#main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#main-menu > li {
    position: relative;
}

#main-menu a {
    text-decoration: none;
    color: #003366;
    font-size: 15px;
}

#main-menu > li > a {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    gap: 8px;
}

/* Hide submenus by default */
#main-menu li ul {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #dcdcdc;
    min-width: 220px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    z-index: 9999;
}

#main-menu li:hover > ul {
    display: block;
}

#main-menu li ul li a {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
}

#main-menu li ul li a:hover {
    background: #f0f0f0;
}
.partner-label {
    text-align: center;
}

.label-title {
    font-size: 13px;
    color: #666;
}

.label-value {
    font-size: 18px;
    font-weight: 700;
    color: #003366;
}

/* ======================================================
   PURE TABLE — Used on showBoja.jsp
   This overrides global rules safely and cleanly
   ====================================================== */

.pure-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff !important;
    font-size: 14px;
    color: #333;
}

/* Header */
.pure-table thead {
    background: #ffffff !important;
    border-bottom: 2px solid #ddd;
}

.pure-table thead th {
    padding: 12px 14px;
    font-weight: 600;
    color: #222 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e2e2e2;
    background: #ffffff !important;
}

/* Body */
.pure-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #efefef;
    background: #ffffff !important;
    color: #333;
}

/* Hover row */
.pure-table tbody tr:hover {
    background: #f3f4f6 !important;
}

/* Selected row */
.pure-table .row-highlight {
    background-color: #dce4ec !important;
}

/* Hidden rows */
.hidden-row { display: none; }
.skriven-row { color: #b30000; font-weight: bold; }

/* Scroll container specifically for tables */
.scrollable-table-container {
    max-height: 430px;
    overflow-y: auto;
    border: 1px solid #d0d7df;
    border-radius: 8px;
    background: #fafafa;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

/* ======================================================
   PURE TABLE ROW HIGHLIGHT FIX
   ====================================================== */

/* make sure the selected row visibly overrides hover */
table.pure-table tbody tr.row-highlight {
    background-color: #fcc !important;
    transition: background-color 0.25s ease;
}

/* ======================================================
   UNIVERSAL TABLE RESET (FIX FOR ALL DISPLAY BUGS)
   ====================================================== */
table, thead, tbody, tr, th, td {
    display: revert;   /* vraća normalno HTML ponašanje */
    box-sizing: border-box;
}

/* ======================================================
   UNIFIED TABLE STYLE — works across entire application
   ====================================================== */

table.uxtable {
    width: 100%;
    border-collapse: collapse;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    font-size: 14px;
    color: #333;
}

table.uxtable thead {
    background: #ffffff;
    border-bottom: 2px solid #ddd;
}

table.uxtable thead th {
    padding: 12px 14px;
    font-weight: 600;
    color: #222 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #ffffff;
    border-bottom: 1px solid #e3e3e3;
}

table.uxtable tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

/* Hover */
table.uxtable tbody tr:hover {
    background: #f3f4f6;
    cursor: pointer;
}

/* Highlight on click */
table.uxtable tbody tr.row-highlight {
    background-color: #ffd7d7 !important;   /* #fcc verzija ali skladnija */
    transition: background-color 0.2s ease;
}

/* Hidden rows */
table.uxtable .hidden-row { display: none; }
table.uxtable .skriven-row { color: #b30000; font-weight: bold; }

/* Scroll container */
.table-scroll {
    max-height: 430px;
    overflow-y: auto;
    border: 1px solid #d0d7df;
    border-radius: 8px;
    background: #fafafa;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.test-highlight {
    background: yellow !important;
}


/* =========================================================
   UNIFIED CARD LAYOUT (for all CRUD show pages)
   ========================================================= */

.card-view {
    background: #ffffff;
    border: 1px solid #e2e3e7;
    border-radius: 8px;
    padding: 20px 24px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Card header */
.card-view h2 {
    font-size: 22px;
    font-weight: 600;
    color: #003366;
    margin-bottom: 18px;
}

/* Toolbar (search + toggle) */
.card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.card-toolbar .left-group,
.card-toolbar .right-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-toolbar label {
    font-weight: 500;
    color: #444;
}

.card-toolbar input[type="text"] {
    width: 240px;
}

/* Scrollable table wrapper */
.table-wrapper {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
}

/* PURE TABLE – unified styling */
table.pure-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.pure-table thead {
    background: #ffffff;
    border-bottom: 2px solid #dee2e6;
}

table.pure-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #ececec;
}

table.pure-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f1f1;
}

/* Hover */
table.pure-table tbody tr:hover {
    background: #f5f7fa;
    cursor: pointer;
}

/* Highlight on click */
.row-highlight {
    background-color: #ffe0cc !important;
    transition: background-color 0.25s ease;
}

/* Hidden rows */
.hidden-row { display: none; }
.skriven-row { color: red; font-weight: bold; }

/* Sticky action bar */
.fixed-action-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0;
    text-align: center;
    border-top: 1px solid #ddd;
    margin-top: 12px;
    display: flex;
    align-items: center; /* This aligns them vertically in the center */
    gap: 10px;
}
/* Force table highlight to override parent backgrounds */
#tabelaexp tr.row-highlight > td {
    background-color: #ffcccc !important;
}

/* =========================================================
   FORM STANDARD (replacement for basic Bootstrap styling)
   ========================================================= */

form .form-group {
    margin-bottom: 14px;
}

form label {
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d1d5da;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    color: #222;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: #0055aa;
    outline: none;
    box-shadow: 0 0 3px rgba(0,85,170,0.3);
}

/* Buttons */
.btn {
    padding: 7px 16px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: #0066cc;
    color: white;
}

.btn-danger {
    background: #cc3333;
    color: white;
}
.btn-primary, .btn-danger {
    padding: 8px 20px;
    font-weight: bold;
    white-space: nowrap; /* Ensure the label stays on one line */
}
.form-group label { font-weight: bold; }

.btn-secondary {
    padding: 8px 20px;
    font-weight: bold;
    background-color: #6c757d;
    color: white;
    white-space: nowrap; /* Ensure the label stays on one line */
}

/*NOVI STYLE*/
/* =========================================================
   MODERNI TAMNI TOP-BAR (VARIJANTA A — PREPORUČENO)
   ========================================================= */
/* =========================================================
   PLAVI TOP-BAR ("WOW" VARIJANTA)
   ========================================================= */

#topbar {
    width: 100%;
    background: #003366;              /* PLAVA KOJA TI SE SVIDJELA */
    border-bottom: 2px solid #002244;
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 99999;
}

/* Linkovi i ikonice u gornjem baru */
.menu-left a,
.menu-right a {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;
    border-radius: 6px;

    color: #ffffff !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;

    transition: background 0.18s ease, color 0.18s ease;
}

.menu-left i,
.menu-right i {
    font-size: 20px;
    color: #ffffff !important;
    transition: color 0.18s ease;
}

/* Hover u top-baru – svijetloplava "wow" nijansa */
.menu-left a:hover,
.menu-right a:hover {
    background: #e9f2ff;
    color: #003366 !important;
}

.menu-left a:hover i,
.menu-right a:hover i {
    color: #003366 !important;
}

/* Partner box u sredini */
.partner-box {
    flex-grow: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff !important;
}

.label-title {
    font-size: 13px;
    color: #dcdcdc !important;
}

.label-value {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
}

/* =========================================================
   SVIJETLI DROPDOWN + FADE-IN I SHADOW ANIMACIJA
   ========================================================= */

.menu-left li,
.menu-right li {
    position: relative;
}

/* osnovni stil dropdowna */
.menu-left li ul,
.menu-right li ul {
    display: block;                   /* uvijek u flowu, ali nevidljiv */
    position: absolute;
    top: 34px;
    left: 0;
    min-width: 220px;

    margin: 0;
    padding: 6px 0;
    list-style: none;

    background: #ffffff;
    border: 1px solid #d0d4d9;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);

    /* animacija */
    opacity: 0;
    transform: translateY(4px);
    visibility: hidden;
    pointer-events: none;
    transition:
            opacity 0.16s ease,
            transform 0.16s ease,
            box-shadow 0.20s ease,
            visibility 0s linear 0.16s;   /* sakrij nakon fade-outa */
}

/* kada se hovera parent <li> – dropdown se pojavljuje */
.menu-left li:hover > ul,
.menu-right li:hover > ul {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* stavke unutar dropdowna */
.menu-left li ul li a,
.menu-right li ul li a {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    font-size: 14px;
    color: #003366 !important;
    text-decoration: none;
    white-space: nowrap;

    background: #ffffff;
    transition: background 0.16s ease, color 0.16s ease;
}

/*!* hover po stavkama dropdowna *!
.menu-left li ul li a:hover,
.menu-right li ul li a:hover {
    background: #e9f2ff;
    color: #001a33 !important;
}*/

/* Ikone u dropdownu — uvijek vidljive */
.menu-left li ul i,
.menu-right li ul i {
    font-size: 16px;
    color: #003366;        /* stalno vidljiva tamnoplava */
    opacity: 1;            /* uklanja fade-in */
    transition: color .16s ease;
}

/* Na hover — još tamnija plava */
.menu-left li ul li a:hover i,
.menu-right li ul li a:hover i {
    color: #001a33;
}

/* ============================================
   FIX: Ikonice u submenu uvijek vidljive odmah
   ============================================ */

#topbar .menu-left li ul i,
#topbar .menu-right li ul i {
    color: #003366 !important;   /* prisilno nadjačava top-bar */
    opacity: 1 !important;
    font-size: 16px;
}

/* Hover efekat u submenu */
#topbar .menu-left li ul li a:hover i,
#topbar .menu-right li ul li a:hover i {
    color: #001a33 !important;
}

/*NOVI STYLE*/


.edit-card {
    background: #ffffff;
    border: 1px solid #dfe4ea;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    margin-top: 20px;
}
.edit-label {
    font-weight: 600;
    color: #003366;
    margin-bottom: 4px;
}
.preview-box {
    width: 240px;
    height: 240px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 12px;
    justify-content: center;
    align-items: center;
}
.license-banner {
    width: 100%;
    padding: 12px 20px;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
}

.license-banner-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* ===== Mobile: responsive door preview (mora biti na kraju da override-a base pravila) ===== */
@media (max-width: 768px) {
    .top-row {
        height: auto;
        gap: 6px;
    }

    .izvedba-container,
    .iznutra-container {
        width: calc(50% - 3px);
        min-width: 0;
        flex-shrink: 1;
        flex-grow: 0;
        height: auto;
        aspect-ratio: 355 / 519;
        overflow: hidden;
    }

    .model-wrapper,
    .iznutra-wrapper {
        width: 64% !important;
        height: 87% !important;
    }
}

/* ========================================================
   DESKTOP RESPONSIVE FIX — skaliranje prikaza vrata
   ========================================================

   Uzroci problema:
   1. Nested "html, body { overflow: auto !important }" u liniji 9
      — Chrome CSS nesting to tumači kao body { overflow: auto }
      — Fix: override na kraju fajla
   2. .top-row height: 519px (fiksan) + kontejneri 355x519px (fiksni)
      — Fix: flex layout + vh-relativna visina + aspect-ratio
   3. .bottom-row height: 20% od parenta height:auto = 0px
      — Fix: flex-shrink:0 + auto visina
   ======================================================== */

/* 1. Ukloni scrollbare s dokumenta */
html, body { overflow: hidden !important; }

/* 2. #main: flex kolona da može distribuirati visinu */
#main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 3. main-container zauzima preostali prostor #main */
#main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 4. top-row: zauzima 2/3 raspoloživog prostora */
.top-row {
    flex: 2;
    min-height: 0;
    max-height: 519px;
}

/* 5. Kontejneri skaliraju s top-row visinom (samo desktop) */
@media (min-width: 769px) {
    .izvedba-container,
    .iznutra-container {
        width: auto;
        height: 100%;
        max-width: 355px;
        max-height: 519px;
        aspect-ratio: 355 / 519;
        flex-shrink: 1;
    }

    .model-wrapper,
    .iznutra-wrapper {
        width: 63.9%;   /* 227/355 */
        height: 87.3%;  /* 453/519 */
    }
}

/* 6. bottom-row: rezervirana zona za dodatke — uvijek vidljiva, 1/3 prostora */
.bottom-row {
    flex: 1;
    min-height: 80px;
    max-height: 200px;
    margin-top: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
}

/* 7. Preview slotovi unutar bottom-row */
.main-preview-slot {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fff;
    max-width: 120px;
}

.main-preview-slot .preview-img {
    max-width: 100px;
    max-height: 80px;
    object-fit: contain;
    display: block;
}

.main-preview-slot .preview-caption {
    font: 11px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    text-align: center;
    color: #444;
    word-break: break-word;
}

.main-preview-slot .preview-color-swatch {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    display: block;
}

/* === Selected icon indicator — SVG circle with white checkmark === */
.HouseColorIcon.selected::after,
.door-model-icon.selected::after,
.izvedba-image-cell.selected::after,
.staklo-icon.selected::after,
.pogled-iznutra-icon.selected::after,
.color-icon-container.selected::after,
.dodaci-color-icon-container.selected::after {
    content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%231565C0'/%3E%3Cpath d='M10 20l7 7 13-13' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    box-shadow: 0 2px 10px rgba(21, 101, 192, 0.55);
    border-radius: 50%;
    padding: 0;
}