@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@font-face {
    font-family: "Outfit";
    src: url('/css/font/Outfit-Regular.ttf');
    font-style: normal;
}

@font-face {
    font-family: "Outfit Bold";
    src: url('/css/font/Outfit-Bold.ttf');
    font-style: normal;
}


@font-face {
    font-family: "Outfit Medium";
    src: url('/css/font/Outfit-Medium.ttf');
    font-style: normal;
}

html, body, #app {
    font-family: "Outfit";
    background: #faf7f1;
    height: 100%;
    width: 100%;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1a4330;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

input[type=checkbox] {
    outline: 0;
    accent-color: #1a4330;
}

.form-group > * {
    vertical-align: middle;
}

.expander {
    border-top: 1px solid #c8f5e0;
    border-bottom: 1px solid #c8f5e0;
    padding: 5px 0px;
    margin-top: 10px;
    background: #fcfcf5;
}

.site-content {
    display: flex;
    padding: 20px;
    height: 100%;
    width: 100%;
}

    .site-content.confirmation {
        display: block;
    }

.confirmation-box {
    display: block;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    background: #1a4330;
    padding: 20px;
    border-radius: 8px;
    color: white;
}

.site-content > * {
    flex-grow: 1;
}

.nav-menu {
    min-width: 300px;
    max-width: 300px;
    background-color: #1a4330;
    padding: 20px;
    border-radius: 15px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

    .nav-menu .title {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        padding-bottom: 1px;
        font-weight: 500;
        border-bottom: 2px solid white;
    }

    .nav-menu label {
        cursor: pointer;
        margin-left: 7px;
    }

        .nav-menu label:hover {
            text-decoration: underline;
        }


.nav-menu {
    height: 100%;
    overflow: auto;
}

    .nav-menu a {
        color: white;
    }

.nav-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.nav-version {
    font-size: 0.85rem;
    opacity: 0.65;
}

.nav-primary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    z-index: 101;
}

    .nav-menu .nav-link i {
        font-size: 1rem;
    }

    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        background-color: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

.nav-menu .nav-link .bi {
    border: none !important;
    width: auto;
    height: auto;
    line-height: 1;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-section {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 12px;
}

    .nav-section:first-child {
        border-top: none;
        padding-top: 0;
    }

.nav-section-header {
    width: 100%;
    background: none;
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

    .nav-section-header .info {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .nav-section-header:hover {
        color: #f3f3f3;
    }

.nav-section-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-section.expanded .nav-section-links {
    max-height: 1200px;
}

    .nav-section-links .nav-link {
        padding: 8px 10px 8px 32px;
        border-radius: 6px;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.85);
    }

    .nav-section-links .nav-link:hover,
    .nav-section-links .nav-link.active {
        background-color: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

.nav-search {
    position: relative;
}

.nav-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
}

    .nav-search-input input {
        flex: 1;
        background: transparent;
        border: none;
        color: #ffffff;
        outline: none;
    }

    .nav-search-input i {
        color: rgba(255, 255, 255, 0.7);
    }

.nav-search-clear {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
}

    .nav-search-clear:hover {
        color: #ffffff;
    }

.nav-search-results {
    margin-top: 8px;
    background-color: #ffffff;
    color: #1a4330;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    max-height: 280px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.nav-search-result {
    padding: 12px 14px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.95rem;
}

    .nav-search-result .title {
        font-weight: 600;
    }

    .nav-search-result .meta {
        font-size: 0.8rem;
        opacity: 0.65;
    }

    .nav-search-result:hover,
    .nav-search-result.active {
        background-color: #1a4330;
        color: #ffffff;
    }

.nav-search-empty {
    padding: 12px 14px;
    font-size: 0.9rem;
}

.nav-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

    .nav-footer .nav-link {
        padding: 12px 0;
    }

.login-box {
    display: block;
    width: 600px;
    margin: 0 auto;
    border: 2px solid #1a4330;
    border-radius: 15px;
    padding: 20px;
    background: white;
    position: relative;
}

.packed-title {
    position: relative;
    height: 60px;
    display: flex;
    gap: 5px;
    border: 1px solid #bcbcbc;
    border-radius: 10px;
    align-items: center;
    padding-left: 20px;
    margin-top: 10px;
    background: #f7f7f7;
}

    .packed-title .packed-title-right {
        position: absolute;
        right: 20px;
        top: 10px;
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .packed-title .small-info, .packed-title .small-text {
        font-size: 14px;
        color: #bcbcbc;
        margin-top: 3px;
    }
    
    .packed-title .bi-trash {
        opacity: 0.8;
        cursor: pointer;
        margin-left: 5px;
        margin-top: 3px;
    }
    .packed-title .bi-trash:hover {
        opacity: 1;
    }

.btn-primary, .btn-primary:focus, .btn-primary:active, .btn-primary.disabled, .btn-primary:disabled {
    background-color: #1a4330;
    border-color: #1a4330;
    min-width: 100px;
}

    .btn-primary.alt, .btn-primary.alt:focus, .btn-primary.alt:active {
        background-color: #ffffff;
        color: black;
        border-color: #ffffff;
    }

        .btn-primary.alt.bordered, .btn-primary.alt.bordered:focus, .btn-primary.alt.bordered:active {
            background-color: #ffffff;
            color: black;
            border-color: #224f3a;
        }

    .btn-primary:focus {
        box-shadow: 0 0 0 .25rem rgb(26 67 48 / 25%);
    }

    .btn-primary:hover {
        background-color: #224f3a;
    }

    .btn-primary.alt:hover {
        background-color: #f6f6f6;
    }

.flex-checks {
    display: flex;
    gap: 5px;
}

h5 {
    color: #1a4330;
    font-weight: bold;
}

.btn.small-ctrl {
    padding: 2px 15px;
    font-size: 12px;
    vertical-align: middle;
    background: #c8f5e0;
    color: #1a4330;
    border: 0;
    font-family: 'Outfit Medium';
}

    .btn.small-ctrl:hover {
        background: #d3f3e4;
    }

.ml-20 {
    margin-left: 20px;
}

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

.login-box .btn-primary {
    min-width: 150px;
    display: block;
    margin: 0 auto;
}

.login-box .button-line .btn-primary {
    margin: 0;
    display: inline-block;
    margin-right: 5px;
}

.login-logo {
    display: block;
    width: 100%;
    height: 100px;
    margin-bottom: 50px;
    background: url(/css/images/tree-logo.png) no-repeat;
    background-size: 160px;
    margin-top: 5%;
    background-color: #1a4330;
    background-position: center;
}

.nav-logo {
    display: block;
    width: 100%;
    height: 65px;
    margin-bottom: 20px;
    background: url(/css/images/tree-logo.png) no-repeat;
    background-size: 145px;
    margin-top: 0px;
    background-position: center;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #3fa274;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(26 67 48 / 25%);
}

.forgot-pass {
    position: absolute;
    right: 10px;
    bottom: 60px;
}

    .forgot-pass .nav-link:hover {
        color: #1a4330;
        text-decoration: underline;
        cursor: pointer;
    }

    .forgot-pass .nav-link {
        color: black;
    }

.alert-danger {
    max-height: 150px;
    overflow: auto;
    word-break: break-word;
}

.nav-link, .nav-link:focus, .nav-link:active {
    color: #fafafa;
}

    .nav-link:hover {
        color: white;
    }

    .nav-link .bi {
        margin-right: 10px;
        border: 1px solid transparent;
        text-align: center;
        line-height: 30px;
        border-radius: 50px;
        width: 30px;
        height: 30px;
        display: inline-block;
        vertical-align: middle;
    }

    .nav-link.active .bi {
        background: white;
        color: #1a4330;
    }

    .nav-link:hover .bi {
        border-color: white;
    }

.main-content {
    padding: 20px;
    padding-left: 40px;
    height: 100%;
    width: 100%;
}

.panel-box {
    background-color: white;
    border-radius: 15px;
    min-height: 300px;
    padding: 20px;
    width: 100%;
}

.main-content > .panel-box {
    height: calc(100% - 25px);
    overflow: auto;
}

h3, h2 {
    font-family: Outfit Medium;
    color: #1a4330;
}

.move-controls {
    margin-left: 10px;
    font-size: 17px;
    padding: 1px 9px;
    background: #c8f5e0;
    padding-top: 1px;
    display: inline-block;
    border-radius: 10px;
    color: #1a4330;
}

    .move-controls > * {
        margin-right: 10px;
        opacity: 0.7;
    }

        .move-controls > *:hover {
            opacity: 1;
            cursor: pointer;
        }

        .move-controls > *:last-child {
            margin-right: 0px;
        }


.lds-ellipsis {
    color: #224f3a;
}

    .lds-ellipsis,
    .lds-ellipsis div {
        box-sizing: border-box;
    }

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ellipsis div {
        position: absolute;
        top: 33.33333px;
        width: 13.33333px;
        height: 13.33333px;
        border-radius: 50%;
        background: currentColor;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            left: 8px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 8px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 32px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 56px;
            animation: lds-ellipsis3 0.6s infinite;
        }


.confirmation-box .lds-ellipsis {
    margin-top: 20px;
}

.btn-primary .lds-ellipsis, .confirmation-box .lds-ellipsis {
    color: white;
    width: 16px;
    height: 16px;
    left: -25px;
}

    .btn-primary .lds-ellipsis div, .confirmation-box .lds-ellipsis div {
        top: 6px;
        width: 8px;
        height: 8px;
    }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.materials {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

    .materials .material-box {
        padding: 15px;
        border: 1px solid #224f3a;
        background-color: #82d7af;
        border-radius: 10px;
        position: relative;
        max-width: 300px;
        margin-bottom: 10px;
    }

        .materials .material-box .price {
            display: block;
            margin-top: 10px;
            font-weight: bold;
            font-size: 18px;
        }

        .materials .material-box strong {
            font-size: 10px;
            margin-bottom: 5px;
            display: block;
        }

        .materials .material-box .title {
            font-size: 16px;
            font-weight: bold;
            display: block;
        }

        .materials .material-box .subtitle {
            font-size: 14px;
            color: #1f1f1f;
            font-style: italic;
            display: block;
            margin-bottom: 10px;
        }

        .materials .material-box .qty {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 25px;
            font-size: 11px;
            font-weight: bold;
        }

        .materials .material-box .bi-trash {
            position: absolute;
            right: 40px;
            top: 5px;
            opacity: 0.8;
            cursor: pointer;
        }

            .materials .material-box .bi-trash:hover {
                opacity: 1;
            }

.button-line {
    margin-bottom: 20px;
}

    .button-line .btn-primary {
        margin-right: 10px;
    }

.form-control.invalid {
    border-color: red;
}

.error {
    font-family: 'Outfit Medium';
    color: red;
}


table {
    width: 100%;
}

    table th, table td {
        border: 1px solid #ccd3d0;
        padding: 3px 8px;
        font-size: 14px;
    }

    table th {
        background-color: #ffebc9;
    }

    table .bi {
        cursor: pointer;
    }

    table .bi-pencil {
        margin-right: 5px;
    }

    table .bi-card-text {
        margin-right: 5px;
    }

.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

.flex {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}
.pp-logo {
    background: #1a4330;
    border-radius: 15px;
    width: 100px;
}

.notification-dialog {
    position: fixed;
    display: none;
    top: 40px;
    right: 40px;
    background: #1a4330;
    border: 1px solid #459c74;
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    z-index: 1050;
    animation: fadeInAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

    .notification-dialog > .text {
        max-height: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.bi-card-text {
    opacity: 0.4;
}
.bi-card-text:hover, .bi-card-text.has-note {
    opacity: 1;
}
.bi-card-text.active {
    opacity: 1;
    font-weight: bold;
    color: orange;
}

.confirmation-dialog {
    position: fixed;
    display: block;
    width: 400px;
    min-height: 150px;
    top: 150px;
    left: calc(50% - 200px);
    background: white;
    border: 1px solid #224f3a;
    color: black;
    padding: 10px 20px;
    padding-bottom: 65px;
    border-radius: 12px;
    z-index: 1060;
}

    .confirmation-dialog .close-icon {
        position: absolute;
        right: 15px;
        top: 7px;
        cursor: pointer;
        font-size: 20px;
        opacity: 0.7;
    }

        .confirmation-dialog .close-icon.pad-right {
            right: 20px;
        }

        .confirmation-dialog .close-icon:hover {
            opacity: 1;
        }

    .confirmation-dialog.breakdown {
        width: 90%;
        left: 5%;
        top: 5%;
        height: 90%;
        overflow: auto;
    }

        .confirmation-dialog.breakdown h5 {
            margin-top: 20px;
        }

        .confirmation-dialog.breakdown tr.highlight {
            background-color: #7dfcc1;
        }

    .confirmation-dialog .button-line {
        position: absolute;
        bottom: 0;
    }

    .confirmation-dialog.breakdown .button-line {
        position: relative;
    }

.confirmation-backdrop {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1050;
}

    .confirmation-backdrop.visible {
        display: block;
    }

@keyframes fadeInAnimation {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.notification-dialog.visible {
    display: block;
}

.notification-dialog.error {
    background: #b32121;
}

.inline-fields {
    display: flex;
    gap: 15px;
}

    .inline-fields > * {
        flex-grow: 1;
        min-width: calc(50% - 8px);
        max-width: calc(50% - 8px);
    }

    .inline-fields.three > * {
        min-width: calc(33% - 10px);
    }

    .inline-fields.price-factor .btn {
        padding: 0px;
        height: 30px;
    }

    .inline-fields.price-factor .form-control {
        height: 30px;
        padding: 0px 10px;
    }

.inline-section {
    display: flex;
    padding-bottom: 20px;
    gap: 20px;
}

.main-controls {
    flex-wrap: wrap;
    row-gap: 0px;
}

.inline-section.door-controls {
    padding-bottom: 0px;
}

.inline-section.quantity-section {
    padding-bottom: 10px;
}

.inline-section > * {
    flex-grow: 1;
    max-width: 300px;
}

.inline-section.door-controls > .form-control {
    max-width: 140px;
    height: 25px;
    padding: 0px 5px;
}

.details-view {
    display: flex;
    gap: 20px;
    height: 100%;
}

    .details-view .back-link {
        cursor: pointer;
        font-weight: bold;
    }

        .details-view .back-link:hover {
            color: #224f3a;
        }

.visualization-3d {
    height: 100%;
    position: relative;
    flex-grow: 1;
    min-width: 100%;
    max-width: 100%;
}

.visualization-3d.enhanced-viewer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 85vh;
    width: 95%;
    margin: 0 auto;
}

.details-view .visualization-3d {
    min-width: 40%;
    max-width: 40%;
}

.visualization-3d canvas {
    width: 100%;
    height: 100%;
    border: 1px solid #c7c7c7;
    border-radius: 15px;
}

.enhanced-viewer .viewer-stage canvas {
    border: none;
}

.visualization-3d .vis-controls {
    position: absolute;
    right: 20px;
    top: 20px;
}

.enhanced-viewer .viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.viewer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.viewer-tab {
    border: 1px solid #c7c7c7;
    background: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.viewer-tab.active {
    background: #1a4330;
    color: #fff;
    border-color: #1a4330;
}

.viewer-quick-actions {
    display: flex;
    gap: 0.3rem;
}

.viewer-quick-actions .quick-action {
    min-width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: #1a4330;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 8px;
    gap: 6px;
    transition: background-color 0.2s;
}

.viewer-quick-actions .quick-action:hover {
    background: #2a6340;
}

.viewer-quick-actions .quick-action.active {
    background: #0d2a1a;
}

.viewer-quick-actions .quick-action .button-label {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.viewer-quick-actions .quick-action .bi {
    font-size: 16px;
    flex-shrink: 0;
}

.viewer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.viewer-toolbar .tool-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
}

.viewer-toolbar .tool-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #595959;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.viewer-toolbar button {
    border: 1px solid #d0d0d0;
    background: #fff;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.viewer-toolbar button:hover {
    background: #eef5ff;
    border-color: #7aa4ff;
}

.viewer-toolbar button.active {
    background: #1976d2;
    border-color: #1565c0;
    color: white;
}

.viewer-toolbar button.active:hover {
    background: #1565c0;
    border-color: #0d47a1;
}

.viewer-body {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 70vh;
}

.viewer-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 70vh;
    border: 1px solid #c7c7c7;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.viewer-stage .viewer-surface {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.viewer-stage .viewer-surface.active {
    opacity: 1;
    pointer-events: auto;
}

.viewer-stage .viewer-surface.surface-2d {
    background: #fafafa;
}

.viewer-stage canvas,
.viewer-stage .viewer-surface {
    height: 100%;
}

.view-placeholder {
    font-size: 0.9rem;
    color: #777;
}

.viewer-stage svg {
    width: 100%;
    height: 100%;
}

.wireframe-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}

.wireframe-wrapper svg {
    flex: 1 1 auto;
}

.wireframe-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    color: #444;
}

.wireframe-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: capitalize;
}

.wireframe-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Room planner sidebar legend */
.sidebar-section {
    margin-bottom: 1.5rem;
}

.sidebar-section h5 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: #555;
}

.legend-color {
    width: 20px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Opening configuration panel improvements */
.opening-configuration-panel {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
}

.opening-configuration-panel .form-group {
    margin-bottom: 1rem;
}

.opening-configuration-panel .form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: block;
}

.opening-configuration-panel .form-group small {
    font-size: 0.75rem;
    display: block;
    margin-top: 0.25rem;
}

/* Window door toolbar improvements */
.window-door-toolbar {
    padding: 0;
}

.toolbar-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-buttons .btn {
    flex: 1;
    min-width: 80px;
}

/* Opening list improvements */
.opening-item-compact {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none; /* Prevent text selection when clicking */
}

.opening-item-compact:hover {
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.opening-item-compact.selected {
    border-color: #007bff;
    background: #f0f8ff;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
}

.opening-item-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.opening-type-compact {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.opening-wall-compact {
    font-size: 0.8rem;
    color: #666;
}

.opening-item-details-compact {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.5rem;
}

.opening-size-compact {
    margin-bottom: 0.25rem;
}

.opening-floor-compact {
    margin-left: 0.5rem;
    color: #888;
}

.opening-position-compact {
    font-size: 0.8rem;
    color: #777;
}

.opening-item-actions-compact {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.opening-edit-panel {
    margin-top: 0.5rem;
}

.opening-edit-panel * {
    pointer-events: auto; /* Re-enable pointer events for all interactive elements in edit panel */
}

.wall-edit-panel {
    margin-top: 0.5rem;
}

.wall-edit-panel * {
    pointer-events: auto; /* Re-enable pointer events for all interactive elements in edit panel */
}

/* Wall Elevation View Styles */
.wall-elevation-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.elevation-controls {
    margin-bottom: 1rem;
}

.elevation-controls label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.elevation-controls select {
    width: 100%;
    margin-bottom: 0.75rem;
}

.view-toggle-controls {
    display: flex;
    gap: 0.5rem;
}

.view-toggle-controls .btn {
    flex: 1;
}

.elevation-canvas-container {
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.wall-elevation-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.no-wall-selected {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1rem;
}

.wireframe-info-panel {
    position: absolute;
    min-width: 220px;
    max-width: 280px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    padding: 0.75rem;
    font-size: 0.78rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.wireframe-info-panel.visible {
    opacity: 1;
    pointer-events: auto;
}

.wireframe-info-panel .info-title {
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.wireframe-info-panel .info-category {
    font-size: 0.72rem;
    text-transform: capitalize;
    color: #777;
    margin-bottom: 0.5rem;
}

.wireframe-info-panel .info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2rem;
}

.wireframe-height-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.8rem;
}

.wireframe-height-summary div {
    background: #f7f7f7;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 130px;
}

.wireframe-height-summary span {
    text-transform: uppercase;
    font-size: 0.68rem;
    color: #6a6a6a;
}

.wireframe-height-summary strong {
    font-size: 0.95rem;
    color: #1a4330;
}

.wireframe-info-panel .info-height-note {
    margin-top: 0.6rem;
    border-top: 1px solid #e9e9e9;
    padding-top: 0.4rem;
    display: grid;
    gap: 0.2rem;
}

.wireframe-info-panel .info-height-note div {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
}

.wireframe-info-panel .info-height-note strong {
    color: #1a4330;
}

.viewer-assets-panel {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    padding: 0.75rem;
    background: #fff;
}

.assets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
}

.refresh-assets {
    border: none;
    background: #f0f0f0;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.assets-list {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.assets-empty {
    font-size: 0.85rem;
    color: #888;
    padding: 0.5rem 0;
}

.asset-panel-fab {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(26, 67, 48, 0.9);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.asset-panel-fab span:first-child {
    font-size: 1rem;
}

.enhanced-viewer.assets-collapsed .viewer-assets-panel {
    width: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.enhanced-viewer.assets-collapsed .asset-panel-fab {
    display: inline-flex;
}

.enhanced-viewer .asset-panel-fab {
    display: none;
}

.viewer-assets-panel.collapsed {
    width: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.asset-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.35rem;
}

.asset-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.asset-info label {
    gap: 0.5rem;
}

.asset-label {
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
}

.asset-row small {
    display: block;
    font-size: 0.75rem;
    color: #888;
}

.asset-edit {
    border: none;
    background: #eef5ff;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #3a6ed8;
}

.asset-highlight {
    border: none;
    background: #fff4d9;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

@media (max-width: 992px) {
    .viewer-body {
        flex-direction: column;
    }

    .viewer-assets-panel {
        width: 100%;
    }
}

.vis-controls .door-open {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    padding-top: 3px;
    background-color: #1a4330;
    color: white;
    font-size: 20px;
    opacity: 0.9;
    cursor: pointer;
}

.division-input {
    border: 1px solid green;
    padding: 10px;
    padding-top: 0px;
    border-radius: 10px;
    background: white;
    margin-bottom: 10px;
    position: relative;
}

    .division-input .small-text {
        display: block;
        font-size: 14px;
        color: #a1a1a1;
    }
    
    .division-input .small-text .bi {
        font-size: 16px;
        color: black;
        margin-left: 5px;
        opacity: 0.8;
        cursor: pointer;
    }
.div-right-items {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.division-input .in-size.xsmall {
    width: 100px;
    font-size: 14px;
}

.division-input.sub-level {
    margin-left: 40px;
    background: #faf7f1;
    border: 1px solid #d2d1d0;
}

.division-input.shelf-mark {
    margin-left: 40px;
    background: #fbdea5;
    border: 1px solid #d2d1d0;
    padding-top: 5px;
}

.div-right-items .xsmall, .div-right-items .rz-dropdown {
    width: 100px;
    font-size: 14px;
}

.div-right-items .rz-dropdown {
    padding-bottom: 0px;
    padding-top: 3px;
    padding-right: 30px;
    height: 29px;
    width: 150px;
}

.division-input .small-text .bi:hover {
    opacity: 1;
}

.vis-controls .door-open:hover {
    opacity: 1;
}

@media(max-width: 600px) {
    .login-box {
        width: 100%;
    }
}

.custom-builder {
    position: relative;
    padding: 20px 30px 100px;
    max-width: 1400px;
    margin: 0 auto;
}

.sticky-footer {
    position: sticky;
    height: 60px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 20px;
    padding-top: 10px;
    background: #f7f3ea;
    border-top: 1px solid #e2dbcc;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    z-index: 10;
}

    .sticky-footer .float-right {
        float: right;
        font-size: 20px;
        padding-top: 5px;
    }

/* Fix sticky-footer positioning when inside a confirmation dialog */
.confirmation-dialog .sticky-footer {
    position: static;
    margin-top: 20px;
    margin-bottom: 0;
    order: 999;
}

.nav-menu-toggle {
    display: none;
}

.nav-menu-close {
    display: none;
}

.table-wrapper {
    width: 100%;
    overflow: auto;
}

.flex-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.highlight-box {
    padding: 8px;
    background: #fafafa;
}

.imitate-field {
    padding: 5px 0px;
}

.cost-details {
    padding: 5px 10px;
    background: #f3f3f3;
    border: 1px solid #e1e1e1;
    margin-top: 5px;
    border-radius: 5px;
}

.in-price, .in-size {
    position: relative;
    min-width: 80px;
    max-width: 150px;
}

.in-price.tight, .in-size.tight {
    max-width: 110px;
}

    .in-price input {
        padding-left: 20px;
    }

    .in-size input {
        padding-right: 20px;
    }

    .in-price .ico-u {
        position: absolute;
        left: 8px;
        top: 7px;
    }

    .in-size .ico-u, .in-size .ico-u-alt {
        position: absolute;
        right: 8px;
        top: 7px;
    }

    .in-price.in-size .ico-u {
        right: unset;
    }


.bi-info-circle {
    cursor: pointer;
    opacity: 0.7;
    margin-left: 5px;
}

    .bi-info-circle:hover {
        opacity: 1;
    }

input[type='number'] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.division-block {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0px;
    border: 5px solid #c7c7c7;
    background: white;
}

    .division-block.hovering-delete {
        background-color: #ffecec;
    }

    .division-block .item-text {
        position: absolute;
        top: -36px;
        left: calc(50% - 100px);
        width: 200px;
        text-align: center;
        color: #d3d3d3;
    }

        .division-block .item-text.span-entire {
            left: 40px;
            top: 40px;
            width: calc(100% - 80px);
            height: calc(100% - 80px);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #bcbcbc;
        }

            .division-block .item-text.span-entire span {
                position: relative;
                top: -25px;
            }

    .division-block.has-items {
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .division-block.type-shelf, .division-block.type-other {
        min-height: 0;
        height: 33px;
        max-height: 33px;
        display: block;
        padding-bottom: 0px;
        width: 100%;
    }

    .division-block.type-draw {
        min-height: 0;
        height: 63px;
        max-height: 63px;
        display: block;
        padding-bottom: 0px;
        width: 100%;
    }

.division-orientation {
    position: absolute;
    top: 0px;
    max-width: 120px;
    left: 10px;
    font-size: 12px;
    padding: 5px;
}

.controls {
    width: 450px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 225px);
    font-size: 14px;
    background: white;
    padding: 10px;
    border: 1px solid #a3a3a3;
    z-index: 999;
}

    .controls .bi-x-circle {
        position: absolute;
        right: 1px;
        top: 1px;
    }

    .controls .form-control {
        font-size: 12px;
        padding: 5px;
    }

    .controls button {
        margin-top: 10px;
    }

.pt-25 {
    padding-top: 25px;
}

.division-block .gray-hint {
    position: absolute;
    left: 0px;
    top: 50px;
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: #c9c9c9;
}

.division-block .bi.division-remove {
    position: absolute;
    top: -20px;
    right: calc(50% - 15px);
    background: white;
    border-radius: 50px;
    display: inline-block;
}

.table-view .division-block .bi.division-remove {
    position: relative;
    right: unset;
    top: unset;
}

.division-block.parent-ver > .bi.division-remove {
    right: unset;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
}

.division-block.parent-hor > .bi.division-remove {
    top: calc(50% - 15px);
    right: calc(50% - 15px);
    left: unset;
}

.type-draw .division-remove {
    top: 16px;
}

.type-draw .item-text {
    top: 18px;
}

.division-block > .division-block:nth-child(2) > .item-text {
    display: none;
}

.division-block.vertical {
    flex-direction: row;
}

.division-block > * {
    flex-grow: 1;
}

.division-block .bi {
    padding-top: 1px;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    opacity: 0.7;
    font-size: 20px;
}

    .division-block .bi:hover {
        opacity: 1;
        cursor: pointer;
    }

    .division-block .bi.selected {
        background-color: #3fa274;
    }

.division-block .hor-size {
    position: absolute;
    left: calc(50% - 75px);
    top: -25px;
    color: #bcbcbc;
    font-size: 12px;
    min-width: 150px;
    text-align: center;
}

.division-block .ver-size {
    position: absolute;
    left: -90px;
    top: calc(50% - 10px);
    color: #bcbcbc;
    font-size: 12px;
    min-width: 150px;
    text-align: center;
    transform: rotate(-90deg);
}

.division-block > .division-block .hor-size {
    top: 5px;
}

.division-block > .division-block .ver-size {
    left: -55px;
    min-height: 40px;
}

.cabinet-display {
    margin-top: 50px;
    padding-bottom: 60px;
    position: relative;
    color: #313131;
}

    .cabinet-display .bi-table {
        position: absolute;
        left: 0px;
        top: -35px;
        z-index: 9999;
    }

    .cabinet-display .view-toggle {
        position: absolute;
        right: -20px;
        top: -40px;
        display: flex;
        width: 200px;
        gap: 5px;
        align-items: center;
        z-index: 9999;
    }

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

.custom-builder .cabinet-display > .text-center {
    color: white;
}

.custom-builder .cabinet-display .view-toggle {
    color: black !important;
}

.view-toggle .descr {
    font-size: 14px;
    color: #8a8a8a;
}

.cabinet-display .cab-leg {
    position: absolute;
    bottom: -10%;
    left: 0px;
    display: block;
    width: 30%;
    height: 10%;
    border: 3px solid #c7c7c7;
}

.grid-2, .grid-3 {
    display: grid;
    gap: 1rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.hw-rules .rule-row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-items: flex-end;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fafafa;
}

.hardware-preview-panel {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 1rem;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hardware-preview-panel .preview-controls {
    flex: 1 1 260px;
}

.hardware-preview-panel .preview-canvas {
    flex: 1 1 360px;
    min-height: 320px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.hardware-preview-panel canvas {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.hardware-preview-panel .hw-preview-warning {
    width: 100%;
    margin: 0;
    align-self: center;
}

.cab-leg.right {
    left: unset;
    right: 0px;
}

.cab-leg > span {
    transform: rotate(-90deg);
    display: block;
    color: gray;
    position: absolute;
    left: -21px;
    top: 6px;
    font-size: 8px;
    height: 100%;
    text-align: center;
    width: 50px;
    color: #c7c7c7;
}

.cabinet-display > .division-block {
    margin: 0 auto;
    display: flex;
    max-width: 500px;
}

.cabinet-display > .division-block {
    margin: 0 auto;
    display: flex;
    max-width: 750px;
}

.valign-middle {
    vertical-align: middle;
}

.table-view.cabinet-display > .division-block {
    width: 100%;
    max-width: 100%;
    border: 0;
    display: block;
}

.division-block.has-gap {
    gap: 5px 5px;
    padding: 5px;
}

.resize-div {
    position: absolute;
    right: 10px;
    top: 5px;
}

.table-view .resize-div {
    position: relative;
    right: unset;
    top: unset;
}

.type-change {
    position: absolute;
    right: 40px;
    top: 5px;
}

.table-view .type-change {
    position: relative;
    right: unset;
    top: unset;
}

.bold {
    font-weight: bold;
}

.division-hinges {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%, auto;
}

    .division-hinges.left {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 50 L0 50 L99 0 L100 0' fill='rgba(199, 199, 199, 0.4)' /><path d='M0 50 L1 50 L101 100 L100 100' fill='rgba(199, 199, 199, 0.4)' /></svg>");
    }

    .division-hinges.right {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 50 L0 50 L99 0 L100 0' fill='rgba(199, 199, 199, 0.4)' /><path d='M0 50 L1 50 L101 100 L100 100' fill='rgba(199, 199, 199, 0.4)' /></svg>");
        transform: rotate(180deg);
    }

    .division-hinges.top {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 100 L49 0 L50 0 L100 98' fill='rgba(199, 199, 199, 0.4)' /><path d='M0 98 L50 0 L51 0 L0 100' fill='rgba(199, 199, 199, 0.4)' /></svg>");
    }

    .division-hinges.bottom {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M50 99 L1 0 L0 0 L49 98' fill='rgba(199, 199, 199, 0.4)' /><path d='M50 100 L100 0 L99 0 L49 101' fill='rgba(199, 199, 199, 0.4)' /></svg>");
    }

#previewer {
    border: 2px solid #1a4330;
    border-radius: 10px;
}

.hinge-line2 {
    width: 112px;
    height: 47px;
    border-bottom: 1px solid red;
    -webkit-transform: translateY(-20px) translateX(5px) rotate(27deg);
    position: absolute;
    /* top: -20px; */
}

.pr-spans {
    display: flex;
    gap: 10px;
    flex-basis: 150px;
}

.side-panel-add {
    position: absolute;
}

.custom-builder .side-panel-add {
    color: black;
}

.side-panel-add.top {
    top: -50px;
    left: calc(50% - 15px);
}

.side-panel-add.bottom {
    bottom: -50px;
    left: calc(50% - 15px);
}

.side-panel-add.left {
    top: calc(50% - 15px);
    left: -50px;
}

.side-panel-add.right {
    top: calc(50% - 15px);
    right: -50px;
}

.panel-info {
    color: #c7c7c7;
}

    .panel-info .bi-trash {
        color: black;
    }

.custom-builder .panel-info .bi-trash {
    color: white;
}

.panel-info.right {
    height: calc(100% + 10px);
    border: 5px solid #c7c7c7;
    text-orientation: mixed;
    writing-mode: tb-rl;
    top: -5px;
    right: -70px;
    display: flex;
    justify-content: center;
}

    .panel-info.right .bi-trash {
        writing-mode: tb-rl;
        text-orientation: sideways;
    }

.panel-info.left {
    height: calc(100% + 10px);
    border: 5px solid #c7c7c7;
    text-orientation: mixed;
    writing-mode: tb-rl;
    transform: rotate(180deg);
    left: -70px;
    top: -5px;
    display: flex;
    justify-content: center;
}

    .panel-info.left .bi-trash {
        writing-mode: tb;
        text-orientation: sideways;
    }


.panel-info.top {
    width: calc(100% + 10px);
    left: -5px;
    top: -80px;
    border: 5px solid #c7c7c7;
    display: flex;
    justify-content: center;
}

.panel-info.bottom {
    width: calc(100% + 10px);
    left: -5px;
    bottom: -70px;
    border: 5px solid #c7c7c7;
    display: flex;
    justify-content: center;
}


.sub-actions .bi {
    font-size: 18px;
    font-weight: bold;
    margin-left: 5px;
}

td.pad-sub {
    padding-left: 10px;
}

ul.cat-select {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 5px;
}

.cat-select.padded {
    padding-left: 20px;
}

ul.cat-select .bi {
    margin-right: 5px;
    cursor: pointer;
}

.cat-select .mimic-pad {
    padding-left: 21px;
}

.cabinets-list .cabinet-display .bi, .cabinets-list .cabinet-display .view-toggle, .cabinets-list .cabinet-display .item-text, .cabinets-list .cabinet-display .gray-hint, .cabinets-list .cabinet-display .cab-leg > span {
    display: none !important;
}

.cabinets-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.shopping-cart-panel .cabinets-list {
    flex-direction: row;
    margin-top: 20px;
    max-height: 70%;
    overflow: auto;
    flex-wrap: wrap;
}

.shopping-cart-panel .button-line {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

.cabinets-list > .cab-block {
    flex-grow: 1;
    max-width: 350px;
    max-height: 500px;
    min-height: 475px;
    min-width: 350px;
    border: 1px solid #c7c7c7;
    border-radius: 10px;
    padding: 20px;
    padding-top: 50px;
    background: white;
    padding-bottom: 80px;
    cursor: pointer;
}

    .cabinets-list > .cab-block:hover {
        border-color: #224f3a;
    }

        .cabinets-list > .cab-block:hover .title {
            color: #224f3a;
            font-weight: bold;
        }

    .cabinets-list > .cab-block.error {
        border-color: red;
    }

        .cabinets-list > .cab-block.error .price {
            color: red;
        }

.cab-block {
    position: relative;
    display: flex;
    flex-direction: column;
}

.cab-block-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
    margin-bottom: 15px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.cab-block-link:focus-visible {
    outline: 2px solid #224f3a;
    outline-offset: 4px;
    border-radius: 6px;
}

.cab-block-link .cab-image {
    flex: 1 1 auto;
    min-height: 220px;
}

.cab-block .cab-controls {
    margin-top: auto;
}

    .cab-block .title {
        position: absolute;
        left: 20px;
        top: 10px;
        font-weight: 500;
    }


    .cab-block .quantity {
        position: absolute;
        right: 20px;
        bottom: 5px;
    }

    .cab-block .bi-trash {
        position: absolute;
        right: 15px;
        top: 10px;
        cursor: pointer;
        opacity: 0.7;
    }

        .cab-block .bi-trash:hover {
            opacity: 1;
        }

.header-line {
    min-height: 30px;
    position: relative;
    margin-bottom: 10px;
}

    .header-line .right-items {
        position: absolute;
        right: 0px;
        top: 1px;
        display: flex;
        gap: 10px;
    }

    .header-line button {
        border-radius: 5px;
        opacity: 0.7;
    }

        .header-line button:hover {
            opacity: 1;
        }

.login-button {
    font-weight: 500;
}

    .login-button .bi {
        margin-right: 5px;
    }

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

.mr-10 {
    margin-right: 10px;
}

.clickable-cell {
    font-weight: bold;
}


    .clickable-cell > * {
        vertical-align: middle;
    }

    .clickable-cell:hover {
        text-decoration: underline;
        cursor: pointer;
    }

.margin-bot-10perc {
    margin-bottom: 5%;
}

.padbot-10perc {
    padding-top: 10%;
}

.padbot-5perc {
    padding-top: 5%;
}

.pad-top-built {
    padding-top: 9px;
}

.gola-built-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .gola-built-row .form-check {
        margin-bottom: 0;
    }

    .gola-built-row .form-check-label {
        padding-top: 0;
    }

.shopping-cart {
    background: #1a4330;
    color: white;
    border-radius: 8px;
    padding: 3px 8px;
    cursor: pointer;
}

    .shopping-cart:hover {
        background-color: #3fa274;
        color: white;
    }

    .shopping-cart:active {
        color: white;
    }

.cab-block .price select {
    padding: 3px;
    position: absolute;
    right: 40px;
    bottom: 3px;
}

.btn-shopcart {
    background: #1a4330;
    color: white;
    font-weight: bold;
    padding: 2px 8px;
}

.cart-add-line {
    display: flex;
    padding-top: 10px;
    gap: 10px;
}

    .cart-add-line > * {
        flex-grow: 1;
    }

        .cart-add-line > *:last-child {
            max-width: 35px;
        }

.btn.btn-xs {
    font-size: 11px;
    padding: 1px 2px;
}

.btn.no-bd-inactive {
    background: transparent;
    border: 0;
    cursor: default;
    color: black;
}

.btn-shopcart:not(.no-bd-inactive):hover {
    background: #3fa274;
    color: white;
}

.cab-block > label {
    display: none;
}

.cabinets-list .cabinet-display {
    margin-top: 0;
}

.cab-block .cab-controls {
    position: absolute;
    bottom: 0px;
    left: 20px;
    width: calc(100% - 40px);
}

.shopping-cart-panel {
    padding: 20px;
}

    .shopping-cart-panel .header-line {
        margin-bottom: 0 !important;
    }

.custom-builder {
    padding: 20px;
    padding-bottom: 60px;
}

.cab-builder-wrap {
    display: grid;
    grid-template-columns: minmax(360px, 480px) 1fr;
    gap: 24px;
    width: 100%;
    align-items: flex-start;
}

.cab-builder-wrap .overflow-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 1000px) {
    .cab-builder-wrap {
        grid-template-columns: 1fr;
    }
    
    .confirmation-dialog .cab-builder-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .confirmation-dialog.breakdown {
        width: 95%;
        left: 2.5%;
    }
    
    .confirmation-dialog .cab-builder-wrap {
        gap: 16px;
    }
    
    .cab-builder-wrap {
        gap: 16px;
    }
    
    .custom-builder {
        padding: 15px 20px 80px;
    }
}

@media (max-width: 600px) {
    .cab-builder-wrap > div:last-child {
        min-height: 400px;
    }
    
    .custom-builder {
        padding: 10px 15px 80px;
    }
}

.dimension-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    width: 100%;
}

.dimension-grid .form-group {
    min-width: 0;
}

.custom-builder .panel-box .form-group > .rz-dropdown,
.custom-builder .panel-box .form-group > .rz-multiselect,
.custom-builder .panel-box .form-group > select,
.custom-builder .panel-box .form-group > input,
.custom-builder .panel-box .form-group > textarea {
    width: 100%;
}

.leg-line {
    align-items: flex-end;
    gap: 20px;
}

.leg-toggle .leg-options-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.leg-toggle .leg-options-row > label {
    margin: 0;
    font-weight: 600;
    min-width: 110px;
}

.leg-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.toggle-pill {
    position: relative;
    display: inline-flex;
}

.toggle-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.toggle-pill span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    padding: 6px 14px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.toggle-pill input:checked + span {
    background-color: #1a4330;
    border-color: #1a4330;
    color: #fff;
}

.toggle-pill.simple span {
    min-width: 130px;
    justify-content: center;
}

.leg-height-block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.leg-height-block .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6b6b6b;
    letter-spacing: 0.04em;
}

.leg-height-input {
    max-width: 90px;
}

.leg-type-controls {
    max-width: 240px;
}

.leg-type-controls select {
    width: 100%;
}

.corner-config {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px dashed #d7d5cc;
    border-radius: 14px;
    background: #fffdf7;
}

.corner-config-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.corner-config-header span {
    font-size: 0.85rem;
    color: #6b6b6b;
}

.corner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.corner-config .form-group {
    flex: 1;
    min-width: 220px;
}

.corner-style select {
    max-width: 260px;
}

.corner-lock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #5e5e5e;
}

.corner-lock-toggle input {
    width: 16px;
    height: 16px;
}

.corner-door-config {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px dashed #ccc8d7;
    border-radius: 14px;
    background: #f9f8fd;
}

.corner-door-orientation {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.corner-door-orientation .option-pill {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    background: white;
    color: #444;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.corner-door-orientation .option-pill:hover {
    border-color: #888;
    background: #f5f5f5;
}

.corner-door-orientation .option-pill.active {
    border-color: #4a90e2;
    background: #4a90e2;
    color: white;
    font-weight: 600;
}

.corner-note {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #6b6b6b;
    font-style: italic;
}

.api-error-panel {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2dbcc;
    padding: 2rem;
    text-align: center;
    max-width: 520px;
    margin: 2rem auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.api-error-panel h3 {
    margin-bottom: 0.5rem;
}

.api-error-panel p {
    margin-bottom: 1.5rem;
    color: #5a5a5a;
}

.api-status-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1.5rem;
    background: #8a1f1f;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    z-index: 1050;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.api-status-banner .banner-message {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.api-status-banner .banner-retry {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    border-radius: 999px;
    padding: 0.4rem 1.4rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.api-status-banner .banner-retry:hover {
    background: rgba(255,255,255,0.3);
}

.confirmation-dialog .custom-builder {
    position: unset;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.confirmation-dialog .cab-builder-wrap {
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: minmax(360px, 480px) 1fr;
    gap: 24px;
    width: 100%;
    align-items: flex-start;
}

.confirmation-dialog .text.overflowed {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    display: block;
}

.rz-multiselect, .rz-dropdown {
    display: flex !important;
}

.shopping-cart-panel .bi-x-lg, .custom-builder .bi-x-lg {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    opacity: 0.7;
}

.shopping-cart-panel .title input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #1a4330;
    color: black;
    position: relative;
}

.shopping-cart-panel .title .bi-pencil {
    position: absolute;
    margin-left: -20px;
}

.shopping-cart-panel .title .bi-view-stacked, .shopping-cart-panel .title .bi-view-stacked, .shopping-cart-panel .title .bi-check-circle, .shopping-cart-panel .title .bi-plus-circle {
    opacity: 0.7;
    cursor: pointer;
    margin-left: 5px;
}

    .shopping-cart-panel .title .bi-view-stacked:hover, .shopping-cart-panel .title .bi-view-stacked:hover, .shopping-cart-panel .title .bi-check-circle:hover, .shopping-cart-panel .title .bi-plus-circle:hover {
        opacity: 1;
        cursor: pointer;
    }

.description-text {
    color: #dcdcdc;
    font-size: 12px;
    margin-top: 10px;
}

.page-info {
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
    margin-bottom: 30px;
}


    .page-info .btn-primary {
        padding: 0px 5px;
        font-size: 13px;
        min-width: 60px;
    }

.board-visualization {
    position: relative;
    background: #634d40;
    width: 100%;
    min-height: 200px;
    display: none;
    margin: 0 auto;
}

    .board-visualization.active {
        display: block;
    }

    .board-visualization .shape {
        position: absolute;
        display: block;
        border: 1px solid red;
    }

.board-info, .shape-info {
    color: white;
    font-size: 11px;
    right: 5px;
    bottom: 5px;
    position: absolute;
}

.tabs {
    display: flex;
    gap: 5px;
}

    .tabs .tab {
        border-bottom: 3px solid grey;
        padding: 3px 10px;
        cursor: pointer;
    }

        .tabs .tab:hover, .tabs .tab.active {
            border-bottom: 3px solid #224f3a;
        }

        .tabs .tab.active {
            font-weight: bolder;
        }

.c-flex-line {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.c-flex-line > * {
    flex: 1 1 220px;
    min-width: 220px;
}

.custom-builder input[type=number] {
    text-align: left;
}

.select-icon {
    display: flex;
    gap: 5px;
}

.rotate-90 {
    transform: rotate(90deg);
}

@media(max-width: 900px) {
    .confirmation-dialog .site-content, .confirmation-dialog .site-content .custom-builder, .confirmation-dialog .site-content .panel-box {
        padding: 0 !important;
    }
    .c-flex-line {
        display: block;
    }
    .custom-builder .inline-fields {
        display: block;
    }

        .custom-builder .inline-fields > * {
            min-width: 100%;
            max-width: 100%;
        }

    .form-group > *:not([type=checkbox]):not(label) {
        display: block;
    }

    .rz-dropdown {
        width: 100% !important;
    }

    .shopping-cart-panel .cabinets-list {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .inline-section > * {
        max-width: 100%;
    }

    .header-line .right-items {
        right: unset;
        left: 0px;
        top: -57px;
    }

    .shopping-cart .text {
        display: none;
    }

    .nbsp {
        display: none;
    }

    .main-controls.inline-section {
        display: block;
    }

        .main-controls.inline-section .pad-top-built {
            padding-top: 0px;
        }

    .nav-menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 20px;
        background: #1a4330;
        padding: 5px 10px;
        border-radius: 5px;
        color: white;
        cursor: pointer;
    }


    .shopping-cart-panel {
        width: 100%;
    }

    table {
        white-space: nowrap;
    }

    .nav-menu {
        display: none;
    }

        .nav-menu.toggled {
            display: block;
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: auto;
            left: 0px;
            top: 0px;
            border-radius: 0;
            max-width: 100%;
            z-index: 99;
        }

            .nav-menu.toggled .nav-menu-close {
                display: block;
                position: fixed;
                right: 20px;
                top: 20px;
                color: white;
                font-size: 22px;
                cursor: pointer;
            }


    .main-content {
        padding-left: 0px;
        padding-top: 60px;
        padding-right: 0px;
    }

    .cabinets-list > .cab-block {
        max-width: 100%;
        min-width: 100%;
    }
}

.badge {
    margin-right: 5px;
}

    .badge.green {
        background: #1a4330;
    }

    .badge.gray {
        background: #c7c7c7;
    }

.corner-cab-bg {
    height: 200px;
    width: 200px;
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #c7c7c7;
}

.acc-cab-bg {
    height: 200px;
    width: 200px;
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #c7c7c7;
}

    .acc-cab-bg .rect {
        border: 5px solid #c7c7c7;
        width: 200px;
    }

        .acc-cab-bg .rect .ver-size {
            position: absolute;
            left: calc(-50% - 15px);
            top: 30%;
            transform: rotate(-90deg);
            width: 100%;
            text-align: center;
        }

        .acc-cab-bg .rect .hor-size {
            position: absolute;
            width: 100%;
            text-align: center;
            left: 0;
            top: -25px;
        }

.corner-cab-bg .square-left {
    position: absolute;
    border: 5px solid #c7c7c7;
    width: 100px;
    height: 100px;
    top: 95px;
    border-top: 0;
}

.square-left .size-ver {
    position: absolute;
    left: calc(-100% - 15px);
    top: -12px;
    transform: rotate(-90deg);
    width: 200%;
    text-align: center;
}

.square-left .size-hor {
    position: absolute;
    width: 100px;
    text-align: center;
    bottom: -25px;
}

.square-right .size-hor {
    position: absolute;
    width: 200%;
    text-align: center;
    left: -100%;
    top: -25px;
}

.square-right .size-ver {
    position: absolute;
    width: 100%;
    transform: rotate(90deg);
    text-align: center;
    top: calc(50% - 12px);
    right: calc(-50% - 15px);
}

.corner-cab-bg .square-right {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 5px solid #c7c7c7;
    left: 95px;
    border-left: 0;
}

.corner-cab-bg .square-center {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    border: 5px solid #c7c7c7;
    border-right: 0;
    border-bottom: 0;
}

.front-square {
    width: 200px;
    height: 200px;
    border: 5px solid #c7c7c7;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 20%;
}

.front-square-mask-left {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 200px;
    border: 5px solid #c7c7c7;
    background: #e3e3e3;
}

    .front-square-mask-left .size-ver {
        position: absolute;
        width: 200px;
        text-align: center;
        transform: rotate(-90deg);
        left: -120px;
        top: 80px;
    }

    .front-square-mask-left .size-hor {
        position: absolute;
        bottom: -25px;
        width: 100px;
        text-align: center;
        left: -5px;
    }

.front-square .size-hor {
    width: 200px;
    text-align: center;
    position: absolute;
    top: -20px;
}

.front-square .bi-gear {
    position: absolute;
    right: 10px;
    top: 5px;
    opacity: 0.7;
}

    .front-square .bi-gear:hover {
        opacity: 1;
    }


.front-square .shelf {
    width: 100%;
    height: 5px;
    background: #c7c7c7;
}

.cab-image, .board-image {
    position: relative;
    background-image: url(data:image/png;base64,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);
    display: inline-block;
    width: 400px;
    height: 400px;
    background-size: cover;
    background-position: center;
    margin-right: 10px;
    border-radius: 5px;
}

.cab-block .cab-image {
    width: 100%;
    height: calc(100% - 100px);
}

.cab-image .bi-trash, .board-image .bi-trash, .cab-block .bi-trash {
    position: absolute;
    color: white;
    font-size: 24px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    padding-top: 7px;
    width: 50px;
    height: 50px;
    text-align: center;
    opacity: 0.7;
}

    .cab-image .bi-trash:hover, .cab-block .bi-trash:hover {
        opacity: 1;
    }

.cab-image .bi-box-arrow-left, .cab-block .bi-box-arrow-left {
    position: absolute;
    color: white;
    font-size: 24px;
    top: 10px;
    left: 10px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    padding-top: 7px;
    width: 50px;
    height: 50px;
    text-align: center;
    opacity: 0.7;
}

.cab-image .bi-box-arrow-left, .cab-block .bi-box-arrow-left {
    opacity: 1;
}

.cab-image .bi-box-arrow-right, .cab-block .bi-box-arrow-right {
    position: absolute;
    color: white;
    font-size: 24px;
    top: 10px;
    left: 70px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    padding-top: 7px;
    width: 50px;
    height: 50px;
    text-align: center;
    opacity: 0.7;
}

.cab-image .bi-box-arrow-right, .cab-block .bi-box-arrow-right {
    opacity: 1;
}

.cab-image .bi-arrow-left, .cab-block .bi-arrow-left {
    position: absolute;
    color: white;
    font-size: 16px;
    top: calc(50% - 15px);
    left: 10px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    padding-top: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
    opacity: 0.7;
}

.cab-image .bi-arrow-left, .cab-block .bi-arrow-left {
    opacity: 1;
}

.cab-block > .bi-arrow-left {
    top: calc(50% - 85px);
}

.cab-image .bi-arrow-right, .cab-block .bi-arrow-right {
    position: absolute;
    color: white;
    font-size: 16px;
    top: calc(50% - 15px);
    right: 10px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    padding-top: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
    opacity: 0.7;
}

.cab-image .bi-arrow-right, .cab-block .bi-arrow-right {
    opacity: 1;
}

.division-editor-host {
    margin-top: 25px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.division-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.division-editor-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #1a4330;
}

.editor-header-actions {
    display: flex;
    gap: 8px;
}

.undo-button {
    background: #f1f1f1;
    border: 1px solid #cccccc;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.undo-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.preset-palette {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preset-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.preset-tab {
    border: 1px solid #d5d5d5;
    background-color: #ffffff;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-tab:hover {
    background-color: #f1f1f1;
}

.preset-tab.active {
    background-color: #1a4330;
    border-color: #1a4330;
    color: #ffffff;
    box-shadow: 0 6px 12px rgba(26, 67, 48, 0.25);
}

.preset-group-header {
    font-weight: 600;
    margin-bottom: 6px;
    color: #163024;
}

.preset-group-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preset-chip {
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 12px;
    border: 1px solid #d5d5d5;
    background: #fafafa;
    padding: 10px 14px;
    min-width: 220px;
    text-align: left;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.preset-chip.is-active {
    border-color: #1a4330;
    box-shadow: 0 8px 20px rgba(26, 67, 48, 0.2);
}

.preset-chip-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.preset-chip:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.preset-chip .preset-icon {
    font-size: 1.3rem;
}

.preset-chip .preset-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preset-chip .preset-text span {
    font-size: 0.75rem;
    color: #767676;
}

.preset-preview-card {
    background-color: #ffffff;
    border: 1px solid #d7d7d7;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
    max-width: 320px;
    z-index: 2;
}

.preset-preview-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preset-preview-summary {
    font-size: 0.8rem;
    color: #52615b;
}

.preset-preview-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.preset-override label {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 4px;
    display: block;
}

.override-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.option-pill {
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.8rem;
    background-color: #f4f4f4;
    color: #2d2d2d;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.option-pill.active {
    background-color: #1a4330;
    border-color: #1a4330;
    color: #ffffff;
}

.preset-override.hinge-side .heuristic-note {
    display: none;
}

.override-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stepper-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #c5c5c5;
    background-color: #ffffff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-btn:hover:not(:disabled) {
    background-color: #eef5f1;
    border-color: #1a4330;
}

.stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.override-value {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
}

.heuristic-note {
    font-size: 0.75rem;
    color: #757575;
    margin-top: 4px;
}

.preset-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.preset-preview-btn {
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.preset-preview-btn.primary {
    background-color: #1a4330;
    border-color: #1a4330;
    color: #ffffff;
}

.preset-preview-btn.primary:hover {
    background-color: #133224;
}

.preset-preview-btn.secondary {
    background-color: #f5f5f5;
    border-color: #d7d7d7;
    color: #333333;
}

.preset-preview-btn.secondary:hover {
    background-color: #ebebeb;
}

.scope-external {
    border-left: 4px solid #1a4330;
}

.scope-internal {
    border-left: 4px solid #ff9800;
}

.scope-both {
    border-left: 4px solid #6c4ddf;
}

.door-controls {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 14px 16px;
    background: #fbfbfb;
    margin-top: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.door-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: #1f1f1f;
}

.door-controls-header span {
    display: block;
    font-size: 0.78rem;
    color: #6b6b6b;
    font-weight: 400;
}

.door-controls-apply {
    border: 1px solid #1a4330;
    background: #1a4330;
    color: #fff;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.door-controls-apply:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.door-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.door-controls-row label {
    min-width: 110px;
    font-weight: 600;
    margin: 0;
    color: #2a2a2a;
}

.door-controls-row.stacked {
    flex-direction: column;
    align-items: flex-start;
}

.door-controls-inline {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.door-controls-inline select {
    min-width: 220px;
}

.door-controls-note {
    font-size: 0.75rem;
    color: #6f6f6f;
}

.hinge-side-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    width: 100%;
}

.hinge-pill {
    border-radius: 12px;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s;
}

.hinge-pill:hover:not(:disabled) {
    border-color: #1a4330;
    color: #1a4330;
}

.hinge-pill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hinge-pill.active {
    background: linear-gradient(135deg, #1a4330, #1d7a59);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(28, 89, 64, 0.25);
}

.hinge-count-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hinge-count-stepper .stepper {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #c5c5c5;
    background: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hinge-count-stepper .stepper:hover:not(:disabled) {
    border-color: #1a4330;
    background-color: #eef5f1;
}

.hinge-count-stepper .stepper:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hinge-count {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Drawer Controls */
.drawer-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    background: #f8faf9;
    border-radius: 8px;
    margin-top: 8px;
}

.drawer-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: #1f1f1f;
}

.drawer-controls-header span {
    display: block;
    font-size: 0.78rem;
    color: #6b6b6b;
    font-weight: 400;
}

.drawer-controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-controls-row.stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.drawer-controls-row label {
    font-size: 0.8rem;
    color: #4a4a4a;
    font-weight: 500;
    min-width: 100px;
}

.drawer-controls-note {
    font-size: 0.75rem;
    color: #757575;
    margin-top: 2px;
}

.drawer-controls-row .form-control {
    flex: 1;
    min-width: 0;
}

.drawer-price-input {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.drawer-price-input .form-control {
    max-width: 150px;
}

.drawer-controls-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: #e8f5e9;
    border-radius: 6px;
    margin-top: 8px;
}

.drawer-controls-summary strong {
    font-size: 0.9rem;
    color: #1a4330;
}

.drawer-controls-summary small {
    font-size: 0.75rem;
    color: #4a4a4a;
}

.division-editor-advanced {
    margin-top: 18px;
    border-top: 1px solid #e3e3e3;
    padding-top: 12px;
}

.advanced-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #2a2a2a;
}

.advanced-header span.summary {
    font-size: 0.8rem;
    color: #828282;
}

.advanced-body {
    margin-top: 12px;
}

.preset-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preset-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.image-list {
    margin-top: 10px;
    margin-bottom: 10px;
}

.rz-dropdown-panel {
    width: 320px !important;
}

.errors-table .clickable {
    cursor: pointer;
}

.errors-table tr.active {
    background-color: #f2f2f2;
}

.errors-table .truncate {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.errors-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.errors-table th.sortable:hover {
    background-color: #e8e8e8;
}

.errors-table th.sortable .bi {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-left: 4px;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 1rem;
}

.btn-icon:hover {
    background-color: #f0f0f0;
}

.btn-danger-icon {
    color: #dc3545;
}

.btn-danger-icon:hover {
    background-color: #ffe6e6;
    color: #c82333;
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    flex-wrap: wrap;
}

.pagination-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 0.9rem;
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
    background-color: #f0f0f0;
    border-color: #999;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.pagination-btn.active:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.pagination-ellipsis {
    padding: 8px 4px;
    color: #999;
}

.pagination-info {
    margin-left: 12px;
    color: #666;
    font-size: 0.9rem;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background-color: #c82333;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.error-details-card {
    background-color: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 1rem 1.5rem;
}

.error-details-card .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}

.error-details-card label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.25rem;
}

.error-details-card pre {
    background-color: #1e1e1e;
    color: #f5f5f5;
    padding: 0.75rem;
    border-radius: 6px;
    overflow: auto;
    max-height: 360px;
    font-size: 0.85rem;
}

.error-details-card .section {
    margin-top: 1.25rem;
}

.monospace {
    font-family: "Courier New", monospace;
    word-break: break-word;
    white-space: pre-wrap;
}

.version {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: #b9b5b5;
}

.division-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.division-chip {
    border-radius: 999px;
    border: 1px solid #d2d2d2;
    background-color: #ffffff;
    padding: 6px 16px;
    display: flex;
    flex-direction: column;
    min-width: 120px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.division-chip.external {
    border-color: #1a4330;
}

.division-chip.internal {
    border-color: #ff9800;
}

.division-chip.active {
    box-shadow: 0 6px 16px rgba(26, 67, 48, 0.25);
    transform: translateY(-1px);
}

.division-chip .chip-category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6f6f6f;
}

.division-chip .chip-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f1f1f;
}

.division-chip:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.division-summary-selection {
    font-size: 0.78rem;
    color: #4f5d57;
    margin-bottom: 12px;
}

.division-input.selected {
    border-color: #1a4330;
    box-shadow: 0 0 0 1px rgba(26, 67, 48, 0.25);
}

.division-block.selected {
    outline: 2px solid #1a4330;
    outline-offset: 2px;
    box-shadow: 0 8px 20px rgba(26, 67, 48, 0.18);
}

.preset-chip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0 0;
}


.colors {
    display: flex;
    gap: 15px;
}

.colors .color-box {
    width: 100px;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 10px;
}

.color-box .display-color {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    border: 1px solid #c7c7c7;
    margin: 0 auto;
}

.color-box strong, .color-box span {
    margin-top: 10px;
    display: block;
}

.color-box span {
    margin-top: 0px;
}

.color-box .bi-trash {
    opacity: 0.8;
    cursor: pointer;
}
.color-box .bi-trash:hover {
    opacity: 1;
}

.related-products {
    display: flex;
    gap: 15px;
}

    .related-products .related-product-box {
        width: 200px;
        display: flex;
        flex-direction: column;
    }

.related-product-box .product-image {
    display: block;
    width: 190px;
    height: 190px;
    border: 1px solid #1a4330;
    border-radius: 5px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: cover;
}

.related-product-box strong, .related-product-box span {
    margin-top: 10px;
    display: block;
}

.related-product-box span {
    margin-top: 0px;
}

.related-product-box .bi-trash {
    opacity: 0.8;
    cursor: pointer;
}
    .related-product-box .bi-trash:hover {
        opacity: 1;
    }

.related-products.client-side .related-product-box {
    opacity: 0.8;
    cursor: pointer;
}
.related-products.client-side .related-product-box:hover {
    opacity: 1;
}

.colors.client-side .color-box {
    opacity: 0.8;
    cursor: pointer;
}

.colors.client-side .color-box:hover {
    opacity: 1;
}

.colors.client-side .color-box.active .display-color {
    border-width: 3px;
    border-color: #1a4330;
}

/* Deployment / Upgrades */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.status-card {
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    padding: 15px;
    background: #fafafa;
}

.status-card .label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #8a8a8a;
    margin-bottom: 5px;
}

.status-card .value {
    font-size: 1.05rem;
    font-weight: 600;
    word-break: break-word;
}

.status-card .value.mono {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.95rem;
}

.deploy-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.deploy-form input {
    min-width: 200px;
}

.log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.log-viewer {
    max-height: 320px;
    overflow-y: auto;
    font-family: "Consolas", "Courier New", monospace;
    background: #111;
    color: #eee;
    padding: 12px;
    border-radius: 8px;
}

.log-line {
    display: grid;
    grid-template-columns: 210px 70px 1fr;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.log-line:last-child {
    border-bottom: none;
}

.log-line .timestamp {
    color: #9fd3ff;
}

.log-line .level {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
}

.log-line .level.level-error {
    color: #ff8686;
}

.log-line .level.level-warning {
    color: #ffd37d;
}

.log-line .message {
    white-space: pre-wrap;
}

/* ============================================
   Room Planner Styles
   ============================================ */

.room-planner-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    width: 100%;
}

.room-planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    flex-wrap: wrap;
    gap: 1rem;
}

.room-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.room-selector label {
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
}

/* Telerik DropDownList styling - ensure it matches input width */
.room-selector .k-dropdown {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 300px;
}

.room-selector .k-dropdown .k-input-inner {
    width: 100%;
}

.room-selector .room-name-input,
.room-selector .new-room-name-input {
    min-width: 150px;
    max-width: 300px;
    flex: 0 0 auto;
}

.room-selector .btn {
    white-space: nowrap;
    min-width: 100px;
    flex: 0 0 auto;
}

.room-size-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.room-size-controls label {
    margin: 0;
    font-weight: 500;
}

.room-size-controls span {
    margin: 0 0.25rem;
}

.room-name-editor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.room-name-editor input {
    min-width: 200px;
}

.save-status {
    font-size: 0.875rem;
    color: #6c757d;
    font-style: italic;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.save-status.saving {
    color: #007bff;
    background-color: #e7f3ff;
    font-weight: 500;
}

.save-status.saved {
    color: #28a745;
    background-color: #d4edda;
    font-weight: 500;
}

.save-status.error {
    color: #dc3545;
    background-color: #f8d7da;
    font-weight: 500;
}

.save-status.pending {
    color: #ffc107;
    background-color: #fff3cd;
    font-weight: 500;
}

.save-status.offline {
    color: #6c757d;
    background-color: #e9ecef;
    font-weight: 500;
}

.last-save-time {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.room-planner-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    gap: 1rem;
    flex-wrap: nowrap;
}

.mode-selector {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.mode-selector .btn {
    min-width: 90px;
    white-space: nowrap;
    flex-shrink: 0;
}

.view-toggle {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.canvas-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    flex-wrap: wrap;
}

.canvas-controls .btn {
    min-width: 40px;
    padding: 0.5rem;
}

.canvas-controls .btn i {
    font-size: 1rem;
}

.room-planner-main-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.room-planner-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0; /* Important for flex children to shrink below content size */
    height: 100%;
}

.room-planner-sidebar {
    width: 300px;
    background: white;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    padding: 1rem;
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Don't shrink sidebar */
    display: flex; /* Use flex for internal layout */
    flex-direction: column; /* Stack sections vertically */
}

/* Show sidebar on desktop when it has the "open" class (for mobile compatibility) */
.room-planner-sidebar.open {
    display: block;
}

/* Hide sidebar when not open (for mobile toggle behavior) */
.room-planner-sidebar:not(.open) {
    display: none;
}

/* On desktop, always show sidebar when in plan view (override mobile behavior) */
@media (min-width: 769px) {
    .room-planner-sidebar {
        display: block !important; /* Always show on desktop */
    }
}

/* Wall List Styles - Floating Compact Panel */
/* Wall List Window Styles */
.wall-list-window,
.cabinet-list-window {
    z-index: 1000;
}

.wall-list-window .k-window-content,
.cabinet-list-window .k-window-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.wall-list-content-compact,
.cabinet-list-content-compact {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.wall-list-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.wall-list-items-compact,
.cabinet-list-items-compact {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0; /* Important for flex scrolling */
}

.wall-item-compact,
.cabinet-item-compact {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wall-item-compact:hover,
.cabinet-item-compact:hover {
    background-color: #f5f5f5;
}

.wall-item-compact.selected,
.cabinet-item-compact.selected {
    border-color: #007bff;
    background-color: rgba(0, 123, 255, 0.1);
}

.wall-item-header-compact,
.cabinet-item-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.wall-name-compact,
.cabinet-name-compact {
    font-weight: bold;
    font-size: 0.9rem;
}

.wall-item-actions-compact,
.cabinet-item-actions-compact {
    display: flex;
    gap: 0.25rem;
}

.wall-item-details-compact,
.cabinet-item-details-compact {
    font-size: 0.75rem;
    color: #666;
}

.wall-coord-compact, .wall-length-compact,
.cabinet-size-compact, .cabinet-position-compact {
    margin-bottom: 0.1rem;
}

.wall-list-floating {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10%;
    min-width: 120px;
    max-width: 180px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: width 0.3s ease;
}

.wall-list-floating:not(.collapsed) {
    width: 280px;
}

.wall-list-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #007bff;
    color: white;
    cursor: pointer;
    user-select: none;
    border-radius: 8px 8px 0 0;
}

.wall-list-header-compact:hover {
    background: #0056b3;
}

.wall-count-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.9rem;
}

.wall-list-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.5rem;
}

.wall-list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.9rem;
}

.btn-icon-only {
    padding: 0.25rem 0.5rem;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wall-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wall-item {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f8f9fa;
}

.wall-item:hover {
    background: #e9ecef;
    border-color: #007bff;
}

.wall-item.selected {
    background: #e7f3ff;
    border-color: #007bff;
    border-width: 2px;
}

.wall-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.wall-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
}

.wall-item-actions {
    display: flex;
    gap: 0.25rem;
}

.wall-item-details {
    font-size: 0.75rem;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wall-coord, .wall-length {
    font-family: monospace;
}

.wall-edit-form {
    padding: 1rem;
}

.wall-edit-form .form-group {
    margin-bottom: 1rem;
}

.wall-edit-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.wall-edit-form .form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.room-planner-main-view {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-width: 0; /* Important for flex children to shrink below content size */
    min-height: 0; /* Important for flex children to shrink below content size */
    overflow: hidden;
    position: relative;
}

.room-planner-canvas-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.room-planner-canvas-container {
    flex: 1;
    position: relative;
    overflow: visible; /* Allow legend to show */
    background: #f5f5f5;
    min-height: 0; /* Important for flex children to shrink below content size */
    min-width: 0; /* Important for flex children to shrink below content size */
    width: 100%;
    height: 100%;
    max-width: 100%; /* Prevent horizontal scrolling */
    display: block;
}

#room-planner-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
    min-width: 0;
    min-height: 0;
    z-index: 1;
}

.canvas-legend {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
    pointer-events: auto;
}

.canvas-coordinates {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    z-index: 999;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-family: monospace;
    z-index: 10;
    pointer-events: none;
}


/* Measure line styling */
.measure-line {
    stroke: #c00;
    stroke-width: 3;
    stroke-dasharray: 8, 4;
}

.measure-point {
    fill: #c00;
}

.measure-label {
    font-size: 24px;
    font-weight: bold;
    fill: #c00;
}

.measure-label-bg {
    fill: white;
    opacity: 0.85;
}

.room-planner-properties {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 300px;
    max-height: calc(100% - 20px);
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    padding: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Compact cabinet toolbar */
.cabinet-toolbar-compact {
    padding: 0.75rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

.toolbar-compact-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.toolbar-label-compact {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    margin: 0;
}

/* Wall Toolbar Styles - Horizontal */
.wall-toolbar-horizontal {
    padding: 0.5rem 1rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    flex-shrink: 0; /* Don't shrink toolbar */
    position: relative;
    z-index: 5;
}

.wall-toolbar-horizontal .k-toolbar {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-height: auto;
    padding: 0;
}

.wall-toolbar-horizontal .k-toolbar .k-button-group {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
}

.wall-toolbar-horizontal .k-toolbar .k-button.toolbar-button-selected,
.wall-toolbar-horizontal .k-toolbar .k-button.toolbar-button-selected:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.wall-toolbar-horizontal .k-toolbar .k-separator {
    width: 1px;
    height: 24px;
    background: #e0e0e0;
    margin: 0 0.25rem;
}

.toolbar-label {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
    font-weight: 500;
}

.toolbar-hint {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

.toolbar-hint kbd {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-family: monospace;
    margin: 0 2px;
}

.toolbar-hint kbd {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0.125rem 0.25rem;
    font-size: 0.7rem;
    font-family: monospace;
    margin: 0 0.125rem;
}

.selected-wall-info {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: #e7f3ff;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #0066cc;
    white-space: nowrap;
}

.selected-wall-info i {
    margin-right: 0.5rem;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .room-planner-container {
        height: calc(100vh - 50px);
    }

    .room-planner-header {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem;
    }

    .room-selector {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .room-selector select,
    .room-selector .btn {
        width: 100%;
    }

    .room-name-editor {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .room-name-editor input {
        width: 100%;
        min-width: unset;
    }

    .room-planner-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem;
    }

    .mode-selector {
        width: 100%;
        justify-content: space-between;
    }

    .mode-selector .btn {
        flex: 1;
        min-width: unset;
        font-size: 0.875rem;
        padding: 0.5rem 0.25rem;
    }

    .mode-selector .btn i {
        display: block;
        margin-bottom: 0.25rem;
    }

    .view-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .view-toggle .btn {
        flex: 1;
    }

    .room-planner-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        z-index: 1000;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        display: block; /* Override desktop display: none on mobile */
    }

    .room-planner-sidebar.open {
        transform: translateX(0);
    }
    
    .room-planner-main-wrapper {
        flex-direction: column;
    }

    .room-planner-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
    }

    .room-planner-sidebar-overlay.open {
        display: block;
    }

    .room-planner-canvas-container {
        width: 100%;
    }

    /* Touch-friendly buttons */
    .btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Larger touch targets for mode buttons */
    .mode-selector .btn {
        min-height: 50px;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .room-planner-sidebar {
        width: 280px;
    }

    .mode-selector .btn {
        min-width: 70px;
        font-size: 0.875rem;
        padding: 0.5rem 0.5rem;
    }

    .room-planner-header {
        padding: 0.875rem;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    .room-planner-header {
        padding: 0.5rem;
    }

    .room-planner-toolbar {
        padding: 0.5rem;
    }

    .mode-selector .btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.2rem;
    }

    .mode-selector .btn span,
    .mode-selector .btn i {
        font-size: 0.875rem;
    }

    .room-planner-sidebar {
        width: 90%;
    }
    
    .room-3d-cabinet-controls {
        width: 90%;
        max-width: 300px;
    }
}

/* Room 3D View Styles */
.room-3d-view {
    width: 100%;
    height: 100%;
    min-height: 400px; /* Ensure minimum height */
    position: relative;
    display: flex;
    flex-direction: column;
}

.room-3d-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.view-selector {
    display: flex;
    gap: 5px;
}

.export-controls {
    display: flex;
    gap: 5px;
}

.3d-canvas-container {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Ensure minimum height for canvas */
}

.room-3d-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.loading-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 5px;
    z-index: 10;
}

.error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.error-message {
    text-align: center;
    padding: 20px;
    max-width: 500px;
}

.error-message i {
    font-size: 48px;
    color: #dc3545;
    margin-bottom: 15px;
}

.error-message p {
    margin: 15px 0;
    color: #333;
}

.room-3d-cabinet-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 300px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background: #f5f5f5;
}

.controls-header h6 {
    margin: 0;
    font-weight: bold;
}

.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover {
    color: #000;
}

.controls-body {
    padding: 15px;
}

.control-group {
    margin-bottom: 15px;
}

.control-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
}

.control-group small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.position-inputs {
    display: flex;
    gap: 5px;
}

.position-inputs .input-group {
    flex: 1;
}

.move-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.snap-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.no-room-message {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* Panel Styles */
.version-history-panel,
.board-assignment-panel,
.wall-toolbar,
.cabinet-toolbar,
.worktop-toolbar,
.window-door-toolbar {
    padding: 0.5rem 1rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.window-door-toolbar .toolbar-title {
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
}

.window-door-toolbar .toolbar-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.window-door-toolbar .selected-opening-info {
    margin-left: auto;
    color: #666;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.panel-header h4 {
    margin: 0;
    font-size: 1.25rem;
}

/* Mobile Panel Styles */
@media (max-width: 768px) {
    .version-history-panel,
    .board-assignment-panel,
    .wall-toolbar,
    .cabinet-toolbar,
    .worktop-toolbar,
    .window-door-toolbar {
        padding: 0.75rem;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .panel-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        padding: 0.75rem 0;
        margin-bottom: 0.75rem;
    }
}

/* Properties Panel Styles */
.properties-panel {
    padding: 1rem;
}

.properties-panel .form-group {
    margin-bottom: 1rem;
}

.properties-panel label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.properties-panel input,
.properties-panel select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Mobile Properties Panel */
@media (max-width: 768px) {
    .properties-panel {
        padding: 0.75rem;
    }

    .properties-panel input,
    .properties-panel select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Version History Mobile Styles */
@media (max-width: 768px) {
    .version-timeline {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    .version-item {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
    }

    .version-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .version-actions .btn {
        width: 100%;
    }
}

/* Utility Classes */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

/* Sidebar Toggle Button (Mobile) */
.sidebar-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 998;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    .sidebar-toggle-btn {
        display: flex;
    }
}

/* NavMenu Minimize Functionality */
.nav-menu {
    transition: min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}

.nav-menu.minimized {
    min-width: 60px;
    max-width: 60px;
    padding: 20px 10px;
}

.nav-menu.minimized .nav-menu-header .nav-logo,
.nav-menu.minimized .nav-menu-header .nav-version,
.nav-menu.minimized .nav-primary,
.nav-menu.minimized .nav-sections,
.nav-menu.minimized .nav-footer {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease, display 0.3s ease;
}

.nav-menu:not(.minimized) .nav-menu-header .nav-logo,
.nav-menu:not(.minimized) .nav-menu-header .nav-version,
.nav-menu:not(.minimized) .nav-primary,
.nav-menu:not(.minimized) .nav-sections,
.nav-menu:not(.minimized) .nav-footer {
    opacity: 1;
    transition: opacity 0.3s ease 0.1s;
}

.nav-menu.minimized .nav-menu-header {
    justify-content: center;
}

.nav-minimize-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-minimize-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: scale(1.1);
}

.nav-menu.minimized .nav-minimize-btn {
    margin: 0 auto;
}

/* User Layout */
.user-layout {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Error Boundary Styling */
.error-boundary-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
    background: #faf7f1;
}

.error-boundary-content {
    max-width: 600px;
    width: 100%;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.error-icon {
    font-size: 4rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

.error-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a4330;
    margin-bottom: 1rem;
}

.error-message {
    color: #666;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.error-suggestion {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.btn-error-primary,
.btn-error-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-error-primary {
    background-color: #1a4330;
    color: white;
}

.btn-error-primary:hover {
    background-color: #155028;
}

.btn-error-secondary {
    background-color: #e9ecef;
    color: #495057;
}

.btn-error-secondary:hover {
    background-color: #dee2e6;
}

.error-details {
    margin-top: 1.5rem;
    text-align: left;
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
}

.error-details summary {
    cursor: pointer;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.error-details summary:hover {
    color: #1a4330;
}

.error-technical {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #495057;
    line-height: 1.6;
}

.error-technical pre {
    margin-top: 0.5rem;
    overflow-x: auto;
    font-size: 0.8rem;
}

/* Developer Log Panel */
.developer-log-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 400px;
    max-height: 500px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, max-height 0.3s ease;
}

.developer-log-panel.collapsed {
    max-height: 50px;
}

.log-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #1a4330;
    color: white;
    border-radius: 8px 8px 0 0;
}

.log-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.log-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.log-badge.error {
    background: #dc3545;
    color: white;
}

.log-panel-actions {
    display: flex;
    gap: 0.5rem;
}

.log-action-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.log-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.log-panel-body {
    display: flex;
    flex-direction: column;
    height: 450px;
    overflow: hidden;
}

.developer-log-panel.collapsed .log-panel-body {
    display: none;
}

.log-filters {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.log-search {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.875rem;
}

.log-level-filter {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.875rem;
    background: white;
}

.log-entries {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.log-empty {
    text-align: center;
    color: #999;
    padding: 2rem;
    font-size: 0.9rem;
}

.log-entry {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    border-left: 3px solid #dee2e6;
    background: #f8f9fa;
    font-size: 0.85rem;
}

.log-entry.error {
    border-left-color: #dc3545;
    background: #fff5f5;
}

.log-entry.warning {
    border-left-color: #ffc107;
    background: #fffbf0;
}

.log-entry.info {
    border-left-color: #17a2b8;
    background: #f0f9fa;
}

.log-entry-header {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.log-time {
    color: #666;
}

.log-level {
    font-weight: 600;
    text-transform: uppercase;
}

.log-entry.error .log-level {
    color: #dc3545;
}

.log-entry.warning .log-level {
    color: #ffc107;
}

.log-entry.info .log-level {
    color: #17a2b8;
}

.log-source {
    color: #999;
    font-style: italic;
}

.log-message {
    color: #333;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.log-details {
    margin-top: 0.5rem;
}

.log-details summary {
    cursor: pointer;
    color: #666;
    font-size: 0.8rem;
}

.log-details pre {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.75rem;
    color: #495057;
}

/* User Canvas Toolbar */
.user-canvas-toolbar {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 1000;
    min-width: 200px;
    max-width: 300px;
}

.toolbar-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toolbar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.toolbar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    color: #495057;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 40px;
}

.toolbar-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toolbar-btn.active {
    background: #1a4330;
    border-color: #1a4330;
    color: white;
}

.toolbar-btn i {
    font-size: 1rem;
}

.toolbar-btn span {
    font-weight: 500;
}

@media (max-width: 768px) {
    .user-canvas-toolbar {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        padding: 12px;
    }

    .toolbar-buttons {
        justify-content: space-between;
    }

    .toolbar-btn {
        flex: 1;
        min-width: 0;
    }
}

/* Form Help Text */
.form-help-text {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    font-style: italic;
}

/* Empty State Message */
.empty-state-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
    margin: 2rem 0;
}

.empty-state-message i {
    font-size: 3rem;
    color: #adb5bd;
    margin-bottom: 1rem;
}

.empty-state-message p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 0;
}

/* Improved Text Hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: #1a4330;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Better Button Styling */
.button, .btn {
    transition: all 0.2s ease;
    font-weight: 500;
}

.button:hover, .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.button:active, .btn:active {
    transform: translateY(0);
}

/* Improved Menu Animations */
.nav-section-links {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.nav-section.expanded .nav-section-links {
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Visual Hierarchy for Labels */
.form-group label {
    font-weight: 500;
    color: #1a4330;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem;
}

/* Improved Spacing */
.main-controls .form-group {
    margin-bottom: 1.25rem;
}

/* Better Typography */
.grayed {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
    }
}

/* PartTree Editor Full Page */
.parttree-editor-fullpage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #faf7f1;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.parttree-editor-fullpage .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
}

.parttree-editor-fullpage .header-title {
    flex: 1;
}

.parttree-editor-fullpage .editor-header h2 {
    margin: 0 0 0.5rem 0;
    color: #1a4330;
    font-size: 1.5rem;
}

.parttree-editor-fullpage .header-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.parttree-editor-fullpage .header-subtitle code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
}

.parttree-editor-fullpage .header-actions {
    display: flex;
    gap: 0.5rem;
}

.parttree-editor-fullpage .editor-layout-grid {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.parttree-editor-fullpage .editor-tree-panel {
    background: white;
    border-right: 2px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-height: 0;
}

/* Tree View Container - at the top - optimized for space */
.parttree-editor-fullpage .tree-view-container {
    flex-shrink: 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    max-height: 50%;
    min-height: 150px;
    overflow: hidden;
}

.parttree-editor-fullpage .tree-view-container .tree-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.parttree-editor-fullpage .tree-view-container .tree-header h5 {
    margin: 0;
    font-size: 0.9rem;
    color: #1a4330;
    font-weight: 600;
}

.parttree-editor-fullpage .tree-view-container .tree-actions {
    display: flex;
    gap: 0.25rem;
}

.parttree-editor-fullpage .tree-view-container .tree-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.parttree-editor-fullpage .tree-view-container .node-tree-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem;
    background: white;
}

/* Compact TelerikTreeView styling */
/* Compact TelerikTreeView styling for space efficiency */
.parttree-editor-fullpage .parttree-treeview.compact-treeview {
    font-size: 0.85rem;
    line-height: 1.3;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item {
    padding: 0.1rem 0.2rem;
    min-height: 1.4rem;
    margin: 0.05rem 0;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item:hover {
    background-color: #f0f0f0;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item.k-selected {
    background-color: #e3f2fd;
    color: #1976d2;
    font-weight: 500;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-toggle {
    width: 1rem;
    height: 1rem;
    margin-right: 0.2rem;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Ensure expand/collapse chevron arrows are visible and styled */
.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-toggle .k-svg-icon {
    width: 0.7rem;
    height: 0.7rem;
    color: #666;
    transition: transform 0.2s ease;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-toggle:hover .k-svg-icon {
    color: #1976d2;
}

/* Expand icon (chevron right) */
.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item:not(.k-expanded) > .k-treeview-toggle .k-svg-icon {
    transform: rotate(0deg);
}

/* Collapse icon (chevron down) */
.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item.k-expanded > .k-treeview-toggle .k-svg-icon {
    transform: rotate(90deg);
}

/* Ensure part type icons are visible */
.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item-icon .k-svg-icon {
    width: 1rem;
    height: 1rem;
    color: #555;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item.k-selected .k-treeview-item-icon .k-svg-icon {
    color: #1976d2;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-leaf {
    padding-left: 1.2rem;
}

.parttree-editor-fullpage .parttree-treeview.compact-treeview .k-treeview-item-text {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

/* Properties Editor Panel - below tree */
.parttree-editor-fullpage .properties-editor-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid #e0e0e0;
}

.parttree-editor-fullpage .properties-editor-panel-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
}

.parttree-editor-fullpage .properties-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.parttree-editor-fullpage .properties-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #1a4330;
}

.parttree-editor-fullpage .properties-title .bi {
    font-size: 1.1rem;
}

.parttree-editor-fullpage .properties-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    background: white;
}

/* Properties List Style - like the example */
.parttree-editor-fullpage .properties-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.parttree-editor-fullpage .property-row {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.75rem;
    transition: background-color 0.15s;
}

.parttree-editor-fullpage .property-row:hover {
    background: #f8f9fa;
}

.parttree-editor-fullpage .property-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

.parttree-editor-fullpage .property-name {
    flex-shrink: 0;
    min-width: 100px;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

.parttree-editor-fullpage .property-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.parttree-editor-fullpage .property-value {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    background: white;
}

.parttree-editor-fullpage .property-value:focus {
    outline: none;
    border-color: #1a4330;
    box-shadow: 0 0 0 2px rgba(26, 67, 48, 0.1);
}

.parttree-editor-fullpage .property-value-narrow {
    flex: 0 0 30%;
    max-width: 30%;
}

.parttree-editor-fullpage .property-edit-btn {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    color: #666;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parttree-editor-fullpage .property-edit-btn:hover {
    color: #1a4330;
    background-color: #f0f0f0;
    border-radius: 3px;
}

.parttree-editor-fullpage .property-edit-btn .bi {
    font-size: 0.9rem;
}

.parttree-editor-fullpage .property-result-large {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid #28a745;
    border-radius: 4px;
    background-color: #f8fff9;
    font-size: 1.1rem;
    font-weight: 600;
    color: #155724;
    min-width: 100px;
    text-align: center;
}

.parttree-editor-fullpage .property-result-large.property-result-error {
    border-color: #dc3545;
    background-color: #fff5f5;
    color: #721c24;
}

.parttree-editor-fullpage .property-result {
    flex-shrink: 0;
    min-width: 60px;
    padding: 0.25rem 0.5rem;
    background: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2e7d32;
    text-align: center;
    font-family: 'Courier New', monospace;
}

.parttree-editor-fullpage .property-result-error {
    background: #ffebee;
    border-color: #f44336;
    color: #c62828;
    cursor: help;
}

/* Part Details Section */
.parttree-editor-fullpage .part-details-section {
    margin-top: 1rem;
    border-top: 1px solid #e0e0e0;
    padding-top: 1rem;
}

.parttree-editor-fullpage .part-details-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.parttree-editor-fullpage .part-details-header:hover {
    background: #eeeeee;
}

.parttree-editor-fullpage .part-details-title {
    flex: 1;
    font-weight: 600;
    color: #1a4330;
}

.parttree-editor-fullpage .part-details-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.parttree-editor-fullpage .part-details-buttons .btn {
    margin: 0;
    white-space: nowrap;
}

.parttree-editor-fullpage .part-details-content {
    padding: 0.75rem;
    background: #fafafa;
    border-radius: 4px;
}

.parttree-editor-fullpage .part-details-subsection {
    margin-bottom: 1rem;
}

.parttree-editor-fullpage .part-details-subsection h6 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: #555;
    font-weight: 600;
}

.parttree-editor-fullpage .part-details-subsection .form-group {
    margin-bottom: 0.75rem;
}

.parttree-editor-fullpage .part-details-subsection .form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    color: #666;
}

.parttree-editor-fullpage .connector-item-display {
    padding: 0.5rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: #555;
}

/* Node Editor Panel - legacy (keeping for compatibility) */
.parttree-editor-fullpage .node-editor-panel {
    flex-shrink: 0;
    border-bottom: 2px solid #e0e0e0;
    background: #f8f9fa;
    max-height: 45%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.parttree-editor-fullpage .node-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #e3f2fd;
    border-bottom: 1px solid #90caf9;
}

.parttree-editor-fullpage .node-editor-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #1a4330;
}

.parttree-editor-fullpage .node-editor-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}


.parttree-editor-fullpage .editor-views-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.parttree-editor-fullpage .tree-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f9f9f9;
}

.parttree-editor-fullpage .tree-header h3 {
    margin: 0 0 0.25rem 0;
    color: #1a4330;
    font-size: 1.1rem;
}

.parttree-editor-fullpage .tree-help-text {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
}

.parttree-editor-fullpage .tree-help-text .bi {
    font-size: 0.9rem;
    color: #1a4330;
}

.parttree-editor-fullpage .tree-actions {
    display: flex;
    gap: 0.5rem;
}

.parttree-editor-fullpage .node-tree-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
    background: white;
}

.parttree-editor-fullpage .node-tree-item {
    margin: 0.25rem 0;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.parttree-editor-fullpage .node-tree-item.selected {
    background: #e8f5e9;
    border: 1px solid #4caf50;
}

.parttree-editor-fullpage .node-tree-item.editing {
    background: #fff3cd;
    border: 1px solid #ffc107;
}

.parttree-editor-fullpage .node-select-btn {
    flex: 1;
    text-align: left;
}

.parttree-editor-fullpage .node-select-btn.active {
    background: #1a4330;
    color: white;
}

.parttree-editor-fullpage .node-edit-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: #666;
    border-radius: 3px;
    transition: all 0.2s;
}

.parttree-editor-fullpage .node-edit-btn:hover {
    background: #e0e0e0;
    color: #1a4330;
}

.parttree-editor-fullpage .node-inline-editor {
    padding: 0.75rem;
    background: white;
    border: 1px solid #ffc107;
    border-radius: 4px;
    margin: 0.5rem 0 0.5rem 2rem;
}

.parttree-editor-fullpage .inline-editor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.parttree-editor-fullpage .inline-editor-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.parttree-editor-fullpage .inline-editor-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a4330;
    margin: 0;
}

.parttree-editor-fullpage .inline-editor-group input {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.2s;
}

.parttree-editor-fullpage .inline-editor-group input:focus {
    outline: none;
    border-color: #1a4330;
    box-shadow: 0 0 0 2px rgba(26, 67, 48, 0.1);
}

.parttree-editor-fullpage .inline-editor-group input::placeholder {
    color: #999;
    font-size: 0.85rem;
}

.parttree-editor-page .editor-form {
    background: white;
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.parttree-editor-page .form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.parttree-editor-page .form-section:last-child {
    border-bottom: none;
}

.parttree-editor-page .help-text {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0.5rem;
}

/* PartTree Editor Modal */
.confirmation-dialog.parttree-editor {
    width: 90%;
    max-width: 1200px;
    left: 5%;
    top: 5%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.confirmation-dialog.parttree-editor .text {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
}

.confirmation-dialog.parttree-editor h3 {
    margin-top: 0;
    color: #1a4330;
}

.confirmation-dialog.parttree-editor .help-text {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 1rem;
}

.confirmation-dialog.parttree-editor code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.confirmation-dialog.parttree-editor .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.confirmation-dialog.parttree-editor .editor-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.confirmation-dialog.parttree-editor .editor-section {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.confirmation-dialog.parttree-editor .editor-section h5 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #1a4330;
    font-size: 1.1em;
}

.confirmation-dialog.parttree-editor .form-group {
    margin-bottom: 1rem;
}

.confirmation-dialog.parttree-editor .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
}

.confirmation-dialog.parttree-editor .form-group small {
    display: block;
    margin-top: 0.25rem;
    color: #666;
}

/* Node Tree */
.parttree-node-tree {
    margin-top: 1rem;
}

.node-tree-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.5rem;
    background: #f9f9f9;
}

.node-tree-item {
    margin: 0.25rem 0;
}

.node-tree-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.node-expand {
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: transform 0.2s;
}

.node-expand:hover {
    color: #1a4330;
}

.node-expand.expanded {
    transform: rotate(90deg);
}

.node-spacer {
    width: 14px;
    display: inline-block;
}

.node-select-btn {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    color: #333;
    flex: 1;
    transition: background-color 0.2s;
}

.node-select-btn:hover {
    background: #e0e0e0;
}

.node-tree-children {
    margin-left: 1.5rem;
    margin-top: 0.25rem;
}

/* Formula Help Panel Styles for PartTree Editor */
.parttree-editor-fullpage .formula-help-panel {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    max-height: 400px;
    overflow-y: auto;
}

.parttree-editor-fullpage .formula-help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.parttree-editor-fullpage .formula-help-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #1a4330;
}

.parttree-editor-fullpage .formula-help-content {
    padding: 1rem;
}

.parttree-editor-fullpage .formula-section {
    margin-bottom: 1rem;
}

.parttree-editor-fullpage .formula-section h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.parttree-editor-fullpage .formula-section ul {
    margin: 0;
    padding-left: 1.5rem;
    font-size: 0.85rem;
}

.parttree-editor-fullpage .formula-section li {
    margin-bottom: 0.25rem;
}

.parttree-editor-fullpage .formula-section code {
    background: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: #c7254e;
}

.parttree-editor-fullpage .formula-tester {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.parttree-editor-fullpage .formula-tester h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.parttree-editor-fullpage .formula-tester .form-group {
    margin-bottom: 0.75rem;
}

.parttree-editor-fullpage .formula-tester label {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: block;
}

.parttree-editor-fullpage .formula-result {
    padding: 0.5rem;
    background: #f9f9f9;
    border-radius: 4px;
    font-size: 0.85rem;
}

.parttree-editor-fullpage .formula-result strong {
    margin-right: 0.5rem;
}

/* Coordinate Display Panel Styles for PartTree Editor */
.coordinate-display-panel {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.coordinate-display-panel h5 {
    margin: 0 0 0.75rem 0;
    color: #856404;
    font-size: 1rem;
    font-weight: 600;
}

.coordinate-values {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.coordinate-values:last-child {
    margin-bottom: 0;
}

.coordinate-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.5rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #ffc107;
}

.coordinate-label {
    font-weight: 600;
    color: #856404;
    min-width: 30px;
    font-size: 0.9rem;
}

.coordinate-value {
    font-family: 'Courier New', monospace;
    color: #333;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Telerik Grid Custom Styling to Match Site Theme */
.telerik-grid-custom {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.telerik-grid-custom .k-grid-header {
    background-color: #1a4330;
    color: white;
    border-bottom: 2px solid #224f3a;
}

.telerik-grid-custom .k-grid-header th {
    background-color: #1a4330;
    color: white;
    font-weight: 600;
    border-right: 1px solid #224f3a;
    padding: 12px 16px;
}

.telerik-grid-custom .k-grid-header th:last-child {
    border-right: none;
}

.telerik-grid-custom .k-grid-header .k-link {
    color: white;
}

.telerik-grid-custom .k-grid-header .k-link:hover {
    color: #f0f0f0;
}

.telerik-grid-custom .k-grid-content {
    background-color: white;
}

.telerik-grid-custom .k-grid-table {
    background-color: white;
}

.telerik-grid-custom .k-grid-table tr {
    border-bottom: 1px solid #e8e8e8;
}

.telerik-grid-custom .k-grid-table tr:nth-child(even) {
    background-color: #fafafa;
}

.telerik-grid-custom .k-grid-table tr:hover {
    background-color: #f0f7f4;
    cursor: pointer;
}

.telerik-grid-custom .k-grid-table td {
    padding: 12px 16px;
    color: #333 !important;
    border-right: 1px solid #e8e8e8;
}

.telerik-grid-custom .k-grid-table td * {
    color: inherit;
}

.telerik-grid-custom .k-grid-table td:last-child {
    border-right: none;
}

.telerik-grid-custom .k-pager {
    background-color: white;
    border-top: 1px solid #e0e0e0;
    padding: 12px;
}

.telerik-grid-custom .k-pager .k-link {
    color: #1a4330;
    border-color: #e0e0e0;
}

.telerik-grid-custom .k-pager .k-link:hover {
    background-color: #f0f7f4;
    color: #1a4330;
    border-color: #224f3a;
}

.telerik-grid-custom .k-pager .k-link.k-state-selected {
    background-color: #1a4330;
    color: white;
    border-color: #1a4330;
}

.telerik-grid-custom .k-pager-info {
    color: #1a4330;
}

.telerik-grid-custom .k-dropdown {
    border-color: #e0e0e0;
}

.telerik-grid-custom .k-dropdown:focus,
.telerik-grid-custom .k-dropdown.k-state-focused {
    border-color: #1a4330;
    box-shadow: 0 0 0 2px rgba(26, 67, 48, 0.1);
}

.telerik-grid-custom .k-input {
    border-color: #e0e0e0;
}

.telerik-grid-custom .k-input:focus {
    border-color: #1a4330;
    box-shadow: 0 0 0 2px rgba(26, 67, 48, 0.1);
}

.telerik-grid-custom .k-icon {
    color: #1a4330;
}

/* Badge styling in Telerik Grid - ensure proper text contrast */
.telerik-grid-custom .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.telerik-grid-custom .badge-success {
    background-color: #28a745;
    color: white !important;
}

.telerik-grid-custom .badge-secondary {
    background-color: #6c757d;
    color: white !important;
}

.telerik-grid-custom .badge-info {
    background-color: #17a2b8;
    color: white !important;
}

.telerik-grid-custom .badge-primary {
    background-color: #1a4330;
    color: white !important;
}

/* Ensure all text in grid cells is visible */
.telerik-grid-custom .k-grid-table td span:not(.badge) {
    color: #333 !important;
}

.telerik-grid-custom .k-grid-table td {
    color: #333 !important;
}
⼊‪慐瑲牔敥摅瑩牯匠汰瑩整⁲慌潹瑵⨠ਯ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲慬潹瑵猭汰瑩整⁲੻††汦硥›㬱 †洠湩栭楥桧㩴〠਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯氭祡畯⵴灳楬瑴牥⸠⵫灳楬瑴牥笠 †戠牯敤㩲渠湯㭥紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥笠 †戠捡杫潲湵㩤眠楨整਻††楤灳慬㩹映敬㭸 †映敬⵸楤敲瑣潩㩮挠汯浵㭮 †漠敶晲潬㩷栠摩敤㭮 †栠楥桧㩴ㄠ〰㬥紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥琮敲ⵥ楶睥挭湯慴湩牥笠 †搠獩汰祡›汦硥਻††汦硥搭物捥楴湯›潣畬湭਻††敨杩瑨›〱┰਻††癯牥汦睯›楨摤湥਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠牴敥瘭敩⵷潣瑮楡敮⁲渮摯ⵥ牴敥挭湯慴湩牥笠 †映敬㩸ㄠ਻††業⵮敨杩瑨›㬰 †漠敶晲潬⵷㩹愠瑵㭯 †瀠摡楤杮›⸰㔲敲㭭 †戠捡杫潲湵㩤眠楨整਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯瘭敩獷瀭湡汥笠 †戠捡杫潲湵㩤⌠㕦㕦㕦਻††癯牥汦睯›楨摤湥਻††敨杩瑨›〱┰਻੽⼊‪敒楳慺汢⁥慬潹瑵猠祴敬⁳⼪⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮⵬敲楳慺汢⁥੻††慢正牧畯摮›桷瑩㭥 †搠獩汰祡›汦硥਻††汦硥搭物捥楴湯›潣畬湭਻††癯牥汦睯›楨摤湥਻††敨杩瑨›〱┰਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠牴敥瘭敩⵷潣瑮楡敮⵲敲楳慺汢⁥੻††楤灳慬㩹映敬㭸 †映敬⵸楤敲瑣潩㩮挠汯浵㭮 †映敬㩸ㄠ਻††業⵮敨杩瑨›㬰 †漠敶晲潬㩷栠摩敤㭮紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥琮敲ⵥ楶睥挭湯慴湩牥爭獥穩扡敬⸠牴敥栭慥敤⁲੻††汦硥猭牨湩㩫〠਻††慰摤湩㩧〠㔮敲㭭 †戠捡杫潲湵㩤眠楨整਻††潢摲牥戭瑯潴㩭ㄠ硰猠汯摩⌠摤㭤紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥琮敲ⵥ楶睥挭湯慴湩牥爭獥穩扡敬⸠潮敤琭敲ⵥ潣瑮楡敮⁲੻††汦硥›㬱 †洠湩栭楥桧㩴〠਻††癯牥汦睯礭›畡潴਻††慰摤湩㩧〠㈮爵浥਻††慢正牧畯摮›桷瑩㭥紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥瀮潲数瑲敩⵳摥瑩牯瀭湡汥笠 †映敬⵸桳楲歮›㬰 †洠硡栭楥桧㩴㐠┰਻††癯牥汦睯礭›畡潴਻††潢摲牥琭灯›瀱⁸潳楬⁤搣摤਻††慢正牧畯摮›昣昹昹㬹 †瀠摡楤杮›⸰爵浥਻੽⼊‪牔敥楖睥挠獵潴瑩浥琠浥汰瑡⁥瑳汹獥⨠ਯ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥琮敲癥敩⵷瑩浥挭湯整瑮笠 †搠獩汰祡›汦硥਻††污杩⵮瑩浥㩳挠湥整㭲 †朠灡›⸰㔳敲㭭 †瀠摡楤杮›⸰㔱敲㬰紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮灸湡ⵤ捩湯笠 †挠牵潳㩲瀠楯瑮牥਻††楤灳慬㩹椠汮湩ⵥ汦硥਻††污杩⵮瑩浥㩳挠湥整㭲 †樠獵楴祦挭湯整瑮›散瑮牥਻††楷瑤㩨ㄠ瀶㭸 †栠楥桧㩴ㄠ瀶㭸 †挠汯牯›㘣㝣㜵㭤 †映敬⵸桳楲歮›㬰紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮灸湡ⵤ捩湯栺癯牥笠 †挠汯牯›㐣㔹㔰㬷 †戠捡杫潲湵ⵤ潣潬㩲⌠㥥捥晥਻††潢摲牥爭摡畩㩳㈠硰਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠硥慰摮椭潣⵮灳捡牥笠 †搠獩汰祡›湩楬敮戭潬正਻††楷瑤㩨ㄠ瀶㭸 †栠楥桧㩴ㄠ瀶㭸 †映敬⵸桳楲歮›㬰紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥椮整⵭整瑸笠 †映敬㩸ㄠ਻††桷瑩ⵥ灳捡㩥渠睯慲㭰 †漠敶晲潬㩷栠摩敤㭮 †琠硥⵴癯牥汦睯›汥楬獰獩਻੽⼊‪灕慤整攠楸瑳湩⁧牴敥瀠湡汥猠祴敬⁳潦⁲敮瑳摥猠汰瑩整⁲⼪⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮੻††慢正牧畯摮›桷瑩㭥紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥⸠⵫灳楬瑴牥笠 †戠牯敤㩲渠湯㭥紊ਊ⨯吠敲噥敩⁷硥慰摮振汯慬獰⁥捩湯⁳‭湥畳敲琠敨❹敲瘠獩扩敬愠摮挠楬正扡敬⨠ਯ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥੻††畣獲牯›潰湩整㭲 †洠牡楧⵮楲桧㩴〠㈮爵浥਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩⵷瑩浥笠 †瀠摡楤杮›⸰㔲敲㬰紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥氭慥⁦੻††慰摤湩ⵧ敬瑦›⸱爵浥※⨯䤠摮湥⁴敬晡渠摯獥琠污杩楷桴攠灸湡敤⁤瑩浥⁳⼪紊ਊ⨯删灥慬散攠楤潴⵲牴敥瀭湡汥眠瑩⁨摥瑩牯琭敲ⵥ慰敮⵬灳楬瑴牥⨠ਯ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥猭汰瑩整⁲੻††慢正牧畯摮›桷瑩㭥紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥猭汰瑩整⁲欮猭汰瑩整⁲੻††潢摲牥›潮敮਻੽⼊‪湅畳敲琠敲⁥楶睥挠湯慴湩牥琠歡獥映汵敨杩瑨眠瑩楨灳楬瑴牥瀠湡⁥⼪⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮⵬灳楬瑴牥⸠牴敥瘭敩⵷潣瑮楡敮⁲੻††敨杩瑨›〱┰਻††楤灳慬㩹映敬㭸 †映敬⵸楤敲瑣潩㩮挠汯浵㭮 †漠敶晲潬㩷栠摩敤㭮紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥猭汰瑩整⁲琮敲ⵥ敨摡牥笠 †映敬⵸桳楲歮›㬰 †瀠摡楤杮›⸰爵浥਻††慢正牧畯摮›桷瑩㭥 †戠牯敤⵲潢瑴浯›瀱⁸潳楬⁤搣摤਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮⵬灳楬瑴牥⸠潮敤琭敲ⵥ潣瑮楡敮⁲੻††汦硥›㬱 †洠湩栭楥桧㩴〠਻††癯牥汦睯礭›畡潴਻††慰摤湩㩧〠㔮敲㭭 †戠捡杫潲湵㩤眠楨整਻੽⼊‪牐灯牥楴獥瀠湡汥猠祴楬杮⨠ਯ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥猭汰瑩整⁲瀮潲数瑲敩⵳摥瑩牯瀭湡汥ਬ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥猭汰瑩整⁲瀮潲数瑲敩⵳摥瑩牯瀭湡汥攭灭祴笠 †栠楥桧㩴ㄠ〰㬥 †搠獩汰祡›汦硥਻††汦硥搭物捥楴湯›潣畬湭਻††癯牥汦睯›楨摤湥਻††慢正牧畯摮›桷瑩㭥紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥猭汰瑩整⁲瀮潲数瑲敩⵳敨摡牥笠 †映敬⵸桳楲歮›㬰 †瀠摡楤杮›⸰爵浥਻††慢正牧畯摮›昣昸昹㭡 †戠牯敤⵲潢瑴浯›瀱⁸潳楬⁤搣摤਻††楤灳慬㩹映敬㭸 †樠獵楴祦挭湯整瑮›灳捡ⵥ敢睴敥㭮 †愠楬湧椭整獭›散瑮牥਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮⵬灳楬瑴牥⸠牰灯牥楴獥挭湯整瑮笠 †映敬㩸ㄠ਻††業⵮敨杩瑨›㬰 †漠敶晲潬⵷㩹愠瑵㭯 †瀠摡楤杮›⸰爵浥਻੽⼊‪牐灯牥楴獥攠楤潴⁲潣瑮楡敮⁲‭湥畳敲椠⁴慴敫⁳畦汬栠楥桧⁴⼪⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮⵬灳楬瑴牥⸠牰灯牥楴獥攭楤潴⵲潣瑮楡敮⁲੻††敨杩瑨›〱┰਻††楤灳慬㩹映敬㭸 †映敬⵸楤敲瑣潩㩮挠汯浵㭮 †漠敶晲潬㩷栠摩敤㭮 †戠捡杫潲湵㩤眠楨整਻੽⼊‪湅畳敲瀠潲数瑲敩⵳摥瑩牯瀭湡汥攭灭祴琠歡獥映汵敨杩瑨⨠ਯ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥攮楤潴⵲牴敥瀭湡汥猭汰瑩整⁲瀮潲数瑲敩⵳摥瑩牯瀭湡汥攭灭祴笠 †映敬㩸ㄠ਻††楤灳慬㩹映敬㭸 †愠楬湧椭整獭›散瑮牥਻††番瑳晩⵹潣瑮湥㩴挠湥整㭲紊ਊ⨯䔠獮牵⁥灳楬瑴牥戠牡椠⁳楶楳汢⁥湡⁤湩整慲瑣癩⁥⼪⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮⵬灳楬瑴牥⸠⵫灳楬扴牡笠 †戠捡杫潲湵ⵤ潣潬㩲⌠敤㉥㙥਻††潢摲牥›瀱⁸潳楬⁤挣摥搴㭡 †挠牵潳㩲爠睯爭獥穩㭥 †稠椭摮硥›〱਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮⵬灳楬瑴牥⸠⵫灳楬扴牡栺癯牥笠 †戠捡杫潲湵ⵤ潣潬㩲⌠搰收摦਻੽⼊‪湅畳敲瀠湡獥搠湯琧漠敶汲灡猠汰瑩慢⁲⼪⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯琭敲ⵥ慰敮⵬灳楬瑴牥⸠⵫慰敮笠 †漠敶晲潬㩷栠摩敤㭮紊ਊ⨯匠浩汰⁥汦硥氠祡畯⁴楷桴畯⁴敮瑳摥猠汰瑩整⁲⼪⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠摥瑩牯氭晥⵴慰敮੻††敨杩瑨›〱┰਻††楤灳慬㩹映敬㭸 †映敬⵸楤敲瑣潩㩮挠汯浵㭮 †漠敶晲潬㩷栠摩敤㭮 †戠捡杫潲湵㩤眠楨整਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠牴敥瘭敩⵷敳瑣潩੻††汦硥›㬱 †洠湩栭楥桧㩴〠਻††楤灳慬㩹映敬㭸 †映敬⵸楤敲瑣潩㩮挠汯浵㭮 †漠敶晲潬㩷栠摩敤㭮紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥琮敲ⵥ楶睥猭捥楴湯⸠牴敥栭慥敤⁲੻††汦硥猭牨湩㩫〠਻††慰摤湩㩧〠㔮敲㭭 †戠捡杫潲湵㩤眠楨整਻††潢摲牥戭瑯潴㩭ㄠ硰猠汯摩⌠摤㭤紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥琮敲ⵥ楶睥猭捥楴湯⸠潮敤琭敲ⵥ潣瑮楡敮⁲੻††汦硥›㬱 †洠湩栭楥桧㩴〠਻††癯牥汦睯礭›畡潴਻††慰摤湩㩧〠㔮敲㭭 †戠捡杫潲湵㩤眠楨整਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠牰灯牥楴獥攭楤潴⵲敳瑣潩੻††汦硥猭牨湩㩫〠਻††慭⵸敨杩瑨›〴㬥 †搠獩汰祡›汦硥਻††汦硥搭物捥楴湯›潣畬湭਻††癯牥汦睯›楨摤湥਻††慢正牧畯摮›桷瑩㭥 †戠牯敤⵲潴㩰㈠硰猠汯摩⌠敤㉥㙥਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠牰灯牥楴獥攭楤潴⵲敳瑣潩瀮潲数瑲敩⵳敨摡牥笠 †映敬⵸桳楲歮›㬰 †瀠摡楤杮›⸰爵浥਻††慢正牧畯摮›昣昸昹㭡 †戠牯敤⵲潢瑴浯›瀱⁸潳楬⁤搣摤਻††楤灳慬㩹映敬㭸 †樠獵楴祦挭湯整瑮›灳捡ⵥ敢睴敥㭮 †愠楬湧椭整獭›散瑮牥਻੽⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠牰灯牥楴獥攭楤潴⵲敳瑣潩瀮潲数瑲敩⵳潣瑮湥⁴੻††汦硥›㬱 †洠湩栭楥桧㩴〠਻††癯牥汦睯礭›畡潴਻††慰摤湩㩧〠㔮敲㭭紊ਊ⨯䔠獮牵⁥牔敥楖睥攠灸湡⽤潣汬灡敳椠潣獮愠敲瘠獩扩敬⨠ਯ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥੻††楤灳慬㩹椠汮湩ⵥ汦硥℠浩潰瑲湡㭴 †瘠獩扩汩瑩㩹瘠獩扩敬℠浩潰瑲湡㭴 †漠慰楣祴›‱椡灭牯慴瑮਻††楷瑤㩨ㄠ瀶㭸 †栠楥桧㩴ㄠ瀶㭸紊ਊ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥氭湩獥⸠⵫牴敥楶睥椭整੻††楤灳慬㩹映敬㭸 †愠楬湧椭整獭›散瑮牥਻੽⼊‪慍敫猠牵⁥捩湯⁳牡⁥潮⁴楨摤湥⨠ਯ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥瀮牡瑴敲ⵥ牴敥楶睥⸠⵫捩湯ਬ瀮牡瑴敲ⵥ摥瑩牯昭汵灬条⁥瀮牡瑴敲ⵥ牴敥楶睥⸠⵫癳ⵧ捩湯笠 †搠獩汰祡›湩楬敮戭潬正℠浩潰瑲湡㭴 †瘠獩扩汩瑩㩹瘠獩扩敬℠浩潰瑲湡㭴紊ਊ⨯䘠牯散猠潨⁷硥慰摮振汯慬獰⁥慨摮敬⁳楷桴洠牯⁥灳捥晩捩猠汥捥潴獲⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥欮琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬笠 †搠獩汰祡›湩楬敮昭敬⁸椡灭牯慴瑮਻††楷瑤㩨㈠瀰⁸椡灭牯慴瑮਻††敨杩瑨›〲硰℠浩潰瑲湡㭴 †洠牡楧⵮楲桧㩴㐠硰℠浩潰瑲湡㭴 †瘠獩扩汩瑩㩹瘠獩扩敬℠浩潰瑲湡㭴 †漠慰楣祴›‱椡灭牯慴瑮਻††慢正牧畯摮挭汯牯›昣昰昰‰椡灭牯慴瑮਻††潢摲牥›瀱⁸潳楬⁤挣捣℠浩潰瑲湡㭴 †戠牯敤⵲慲楤獵›瀳⁸椡灭牯慴瑮਻੽⸊慰瑲牴敥琭敲癥敩⹷⵫牴敥楶睥⸠⵫牴敥楶睥琭杯汧㩥潨敶⁲੻††慢正牧畯摮挭汯牯›攣攰攰‰椡灭牯慴瑮਻੽⼊‪湅畳敲琠敨攠灸湡⁤捩湯匠䝖椠⁳楶楳汢⁥⼪⸊慰瑲牴敥琭敲癥敩⹷⵫牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥欮猭杶椭潣੻††楷瑤㩨ㄠ〰‥椡灭牯慴瑮਻††敨杩瑨›〱┰℠浩潰瑲湡㭴 †搠獩汰祡›汢捯椡灭牯慴瑮਻੽⼊‪慍敫吠敲噥敩⁷硥慰摮振汯慬獰⁥捩湯⁳捡畴污祬瘠獩扩敬眠瑩⁨潣潬⁲⼪⸊慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬猠杶ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥癳⁧慰桴笠 †映汩㩬挠牵敲瑮潃潬⁲椡灭牯慴瑮਻††潣潬㩲⌠㤴〵㜵℠浩潰瑲湡㭴紊ਊ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥੻††潣潬㩲⌠㤴〵㜵℠浩潰瑲湡㭴紊ਊ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧㩥潨敶⁲癳⁧慰桴笠 †映汩㩬⌠搰收摦℠浩潰瑲湡㭴紊ਊ⨯䘠剏䕃吠敲噥敩⁷潴杧敬椠潣獮琠敢瘠獩扩敬ⴠ瘠牥⁹条牧獥楳敶⨠ਯ欮琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥੻††楤灳慬㩹椠汮湩ⵥ汢捯椡灭牯慴瑮਻††楷瑤㩨㈠瀴⁸椡灭牯慴瑮਻††敨杩瑨›㐲硰℠浩潰瑲湡㭴 †洠湩眭摩桴›㐲硰℠浩潰瑲湡㭴 †洠湩栭楥桧㩴㈠瀴⁸椡灭牯慴瑮਻††楶楳楢楬祴›楶楳汢⁥椡灭牯慴瑮਻††灯捡瑩㩹ㄠ℠浩潰瑲湡㭴 †戠捡杫潲湵ⵤ潣潬㩲⌠㥥捥晥℠浩潰瑲湡㭴 †戠牯敤㩲ㄠ硰猠汯摩⌠摡㕢摢℠浩潰瑲湡㭴 †戠牯敤⵲慲楤獵›瀴⁸椡灭牯慴瑮਻††慭杲湩爭杩瑨›瀶⁸椡灭牯慴瑮਻††畣獲牯›潰湩整⁲椡灭牯慴瑮਻††潰楳楴湯›敲慬楴敶℠浩潰瑲湡㭴紊ਊ欮琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬猠杶ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥癳⁧੻††楤灳慬㩹戠潬正℠浩潰瑲湡㭴 †眠摩桴›〱┰℠浩潰瑲湡㭴 †栠楥桧㩴ㄠ〰‥椡灭牯慴瑮਻††楦汬›㐣㔹㔰‷椡灭牯慴瑮਻੽⸊⵫牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥癳⁧慰桴ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥癳⁧慰桴笠 †映汩㩬⌠㤴〵㜵℠浩潰瑲湡㭴紊ਊ欮琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬栺癯牥ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧㩥潨敶⁲੻††慢正牧畯摮挭汯牯›〣㙤晥⁤椡灭牯慴瑮਻††潢摲牥挭汯牯›〣㙤晥⁤椡灭牯慴瑮਻੽⸊⵫牴敥楶睥⸠⵫牴敥楶睥琭杯汧㩥潨敶⁲癳⁧慰桴ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧㩥潨敶⁲癳⁧慰桴笠 †映汩㩬眠楨整℠浩潰瑲湡㭴紊ਊ⨯䔠獮牵⁥桴⁥潴杧敬猠慰獩挠楬正扡敬⨠ਯ欮琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬笠 †瀠楯瑮牥攭敶瑮㩳愠瑵椡灭牯慴瑮਻੽⼊‪楆⁸牔敥楖睥挠湯慴湩牥琠湥畳敲椠潣獮愠敲❮⁴畣⁴景⁦⼪⸊慰瑲牴敥攭楤潴⵲畦汬慰敧⸠牴敥瘭敩⵷敳瑣潩渮摯ⵥ牴敥挭湯慴湩牥笠 †漠敶晲潬⵷㩸瘠獩扩敬℠浩潰瑲湡㭴 †漠敶晲潬⵷㩹愠瑵椡灭牯慴瑮਻††慰摤湩ⵧ敬瑦›⸰爵浥℠浩潰瑲湡㭴紊ਊ⨯䔠獮牵⁥牔敥楖睥椠獴汥⁦慨⁳牰灯牥洠牡楧獮⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥欮琭敲癥敩⁷੻††慭杲湩氭晥㩴〠℠浩潰瑲湡㭴 †瀠摡楤杮氭晥㩴㠠硰℠浩潰瑲湡㭴紊ਊ⨯䴠歡⁥畳敲琠敲⁥瑩浥⁳牡湥琧渠来瑡癩汥⁹潰楳楴湯摥⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥椭整੻††慭杲湩氭晥㩴〠℠浩潰瑲湡㭴紊ਊ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥札潲灵笠 †洠牡楧⵮敬瑦›‰椡灭牯慴瑮਻††慰摤湩ⵧ敬瑦›〲硰℠浩潰瑲湡㭴紊ਊ⨯䘠硩琠敨爠潯⁴敬敶潴猠潨⁷牰灯牥祬⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥㸠⸠⵫牴敥楶睥氭湩獥笠 †瀠摡楤杮氭晥㩴㠠硰℠浩潰瑲湡㭴紊⼊‪敒潭敶愠祮䌠卓琠慨⁴業桧⁴汢捯牔敥楖睥琠杯汧⁥汣捩獫⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧ⱥ⸊慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬⨠ਬ欮琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬ਬ欮琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬⨠笠 †瀠楯瑮牥攭敶瑮㩳愠瑵椡灭牯慴瑮਻††畣獲牯›潰湩整⁲椡灭牯慴瑮਻੽⼊‪敒潭敶愠祮漠敶汲祡⁳桴瑡洠杩瑨戠潬正挠楬正⁳⼪⸊慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩⵷敬晡ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥椭整‾灳湡笠 †瀠楯瑮牥攭敶瑮㩳愠瑵椡灭牯慴瑮਻੽⼊‪湅畳敲琠杯汧⁥獩漠潴⁰⼪⸊慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩⵷潴杧敬笠 †瀠獯瑩潩㩮爠汥瑡癩⁥椡灭牯慴瑮਻††⵺湩敤㩸ㄠ〰℠浩潰瑲湡㭴紊ਊ⨯䘠塉›癏牥楲敤琠敨渠来瑡癩⁥慭杲湩琠慨❴⁳異桳湩⁧捩湯⁳景ⵦ捳敲湥⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭杯汧⁥੻††慭杲湩椭汮湩ⵥ瑳牡㩴〠℠浩潰瑲湡㭴 †洠牡楧⵮敬瑦›‰椡灭牯慴瑮਻††慭杲湩爭杩瑨›瀴⁸椡灭牯慴瑮਻੽⼊‪湅畳敲琠敲⁥牧畯獰栠癡⁥湥畯桧氠晥⁴慰摤湩⁧潦⁲桴⁥捩湯⁳⼪⸊慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩⵷牧畯⁰੻††慰摤湩ⵧ敬瑦›㐲硰℠浩潰瑲湡㭴紊ਊ⨯䘠硩吠敲噥敩⁷潣瑮楡敮⁲潰楳楴湯湩⁧‭敲潭敶愠汬渠来瑡癩⁥慭杲湩⁳⼪⸊慰瑲牴敥琭敲癥敩ⱷ⸊慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩ⱷ⸊慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩⵷楬敮⁳੻††慭杲湩›‰椡灭牯慴瑮਻††慰摤湩㩧〠℠浩潰瑲湡㭴紊ਊ⨯䄠摤瀠潲数⁲慰摤湩⁧潴琠敨琠敲⁥潣瑮楡敮⁲⼪⸊牴敥瘭敩⵷敳瑣潩渮摯ⵥ牴敥挭湯慴湩牥笠 †瀠摡楤杮›⸰爵浥℠浩潰瑲湡㭴紊ਊ⨯䘠硩琠敲⁥瑩浥⁳潰楳楴湯湩⁧⼪⸊慰瑲牴敥琭敲癥敩⁷欮琭敲癥敩⵷瑩浥ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥琭灯ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥洭摩ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥戭瑯笠 †洠牡楧⵮敬瑦›‰椡灭牯慴瑮਻੽⼊‪湅畳敲瀠潲数⁲潢摲牥爠摡畩⁳湯琠敲⁥潣瑮楡敮⁲⼪⸊牴敥瘭敩⵷敳瑣潩渮摯ⵥ牴敥挭湯慴湩牥笠 †戠牯敤⵲慲楤獵›瀴㭸紊ਊ⨯删獥瑥愠汬琠敨愠杧敲獳癩⁥瑳汹湩⁧敷愠摤摥ⴠ猠慴瑲挠敬湡⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥札潲灵笠 †瀠摡楤杮氭晥㩴〠℠浩潰瑲湡㭴紊ਊ⨯传汮⁹摡⁤慰摤湩⁧潴渠獥整⁤牧畯獰‬潮⁴潲瑯⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥札潲灵⸠⵫牴敥楶睥札潲灵笠 †瀠摡楤杮氭晥㩴㈠瀴⁸椡灭牯慴瑮਻੽⼊‪慍敫猠牵⁥桴⁥潲瑯氠癥汥栠獡渠景獦瑥⨠ਯ瀮牡瑴敲ⵥ牴敥楶睥㸠⸠⵫牴敥楶睥氭湩獥ਬ瀮牡瑴敲ⵥ牴敥楶睥⸠⵫牴敥楶睥氭湩獥㸠⸠⵫牴敥楶睥札潲灵笠 †洠牡楧㩮〠℠浩潰瑲湡㭴 †瀠摡楤杮氭晥㩴〠℠浩潰瑲湡㭴紊