/* NORMALIZE */
html, body, *, *:before, *:after {
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: 0;
}

/* SETUP */
:root {
    /* Background */
    --c-bordeaux: 65, 3, 21;           /* sfondo incarichi */
    --c-ocher: 150, 84, 4;             /* sfondo anagrafica */
    --c-blue: 14, 44,64;               /* blue perizieambientali */


    --c-black: 0, 0, 0;                /* nero */
    --c-dark: 20, 20, 20;              /* quasi nero */
    --c-medium-dark: 40, 40, 40;       /* quasi nero piu chiaro */
    --c-grey: 200, 200, 200;           /* grigio */
    
    --c-orange: 255, 165, 0;            /* arancione */
    --c-ocher: 120, 95, 20;            /* ocra giallo scuro */
    --c-green: 0, 128, 0;               /* verde */
    --c-red: 255, 0, 0;               /* rosso */
    --c-aquamarine: 127, 255, 212;     /* verde acqua */
    --c-brown: 165, 42, 42;            /* marrone */
    --c-beige: 245, 245, 220;          /* beige */
    --c-cyan: 0, 255, 255;             /* ciano neon */

    --c-night: 10, 25, 47;             /* blu notte profondo */
    --c-dark-blue: 6, 36, 88;          /* blu scuro */
    --c-blue: 24, 46, 85;              /* blu un po' più chiaro */
    --c-electric: 67, 97, 238;         /* blu elettrico */
    --c-purple: 138, 43, 226;          /* viola acceso */
    --c-yellow: 255, 230, 140;         /* giallo chiaro */

    /* Testo */
    --c-white: 255, 255, 255;          /* quasi bianco */
    --c-disabled: 100, 116, 139;       /* grigio spento */

    /* Feedback */
    --c-success: 34, 197, 94;          /* verde brillante */
    --c-warning: 251, 191, 36;         /* arancio */
    --c-error: 239, 68, 68;            /* rosso acceso */

    --bsh-strong: 0 5px 20px rgba(0, 0, 0, 0.6);       /* box shadow importante */
    --bsh-strong-hover: 0 8px 24px rgba(0, 0, 0, 0.8);       /* box shadow importante */
    --bsh-light: 0 4px 10px rgba(0, 0, 0, 0.2);       /* box shadow leggero */
    --bsh-light-hover: 0 6px 14px rgba(0, 0, 0, 0.3);       /* box shadow leggero */
    --bsh-cyan-strong: 0 5px 20px rgba(var(--c-cyan), 0.6);       /* box shadow importante */
    --bsh-cyan-light: 0 4px 10px rgba(var(--c-cyan), 0.2);       /* box shadow leggero */
    --tsh: .1em .1em .1em rgba(0, 0, 0, 0.6);   /* text-shadow proporzionale al testo */
}
html {
    font-family: "Calibri", sans-serif; font-size: 15px;
}

h1.page-title {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.3rem;
}
button {
    overflow: hidden;
    background: none; border: none; color: inherit; font-family: inherit; font-size: inherit; line-height: 1em; white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.25s ease;
    &:hover {
        transform: translateY(-1px);
    }
    &:active {
        transform: scale(0.96);
    }
    &.action-button {
        padding: 8px 25px; border-radius: 5px;
        font-size: 1.2rem; font-weight: 600; letter-spacing: 0.05em;
        &.iconed {
            display: flex; justify-content: space-between; align-items: center; gap: 10px;
            padding: 7px 15px 7px 10px;
        }
        &.iconed-simple {
            padding: 0; font-size: inherit; font-weight: normal; letter-spacing: normal;
            display: flex; justify-content: space-between; align-items: center; gap: 10px;
        }
        &:hover:not(.iconed-simple) {
            box-shadow: var(--bsh-light-hover);
        }
        &:active {
            box-shadow: var(--bsh-light); filter: brightness(0.95);
        }
    }
    &.icon-button {
        height: 40px; width: 40px;
        display: flex; justify-content: center; align-items: center;
        border-radius: 13px; box-shadow: var(--bsh-light);
        &.small {
            width: 30px; height: 30px;
            svg {
                width: 20px; height: 20px;
            }
        }
        &.mini {
            width: 23px; height: 23px;
        }
        &.slashed {
            opacity: 0.5;
            position: relative;
            &::after {
                content: "";
                position: absolute; height: 80%; width: 3px; transform: rotate(-45deg);
                background: white;
            }
        }
        &:hover {
            box-shadow: var(--bsh-light-hover);
        }
        &:active {
            box-shadow: var(--bsh-light); filter: brightness(0.95);
        }
    }
    &.subiconed {
        position: relative;
        svg:nth-child(2){
            position: absolute; bottom: -2px; right: -7px; width: 15px; height: 15px;
            background: rgb(var(--c-white)); border-radius: 50%;
        }
    }
    &.bordered-circle {
        width: 25px; height: 25px;
        display: flex; justify-content: center; align-items: center;
        background: #5c5c5c; border-radius: 50%; border: 2px solid white;
        color: white; font-weight: bold;
        &[value="1"]{
            &.green {background: green;}
            &.blue {background: blue;}
            &.orange {background: orange;}
        }
    }
    &.circle {
        border-radius: 50%;
    }
    &.bordered {
        border: 1px solid black;
    }
    &:disabled {
        opacity: 0.3; pointer-events: none;
    }
    &.black {
        background: rgb(var(--c-black)); color: rgb(var(--c-yellow)); text-shadow: var(--tsh);
    }
    &.white {
        background: rgb(var(--c-white)); color: rgb(var(--c-black)); text-shadow: var(--tsh);
    }
    &.night {
        background: rgb(var(--c-night)); color: rgb(var(--c-white)); text-shadow: var(--tsh);
    }
    &.cyan {
        background: linear-gradient(135deg, rgb(var(--c-cyan)), rgb(var(--c-electric))); color: rgb(var(--c-white));
    }
    &.electric {
        background: rgb(var(--c-electric)); color: rgb(var(--c-white)); text-shadow: var(--tsh);
    }
    &.red {
        background: rgb(var(--c-error)); color: rgb(var(--c-white)); text-shadow: var(--tsh);
    }
    &.green {
        background: rgb(var(--c-success)); color: rgb(var(--c-white)); text-shadow: var(--tsh);
    }
    &.orange {
        background: rgb(var(--c-orange)); color: rgb(var(--c-white)); text-shadow: var(--tsh);
    }
    &.blue {
        background: rgb(var(--c-blue)); color: rgb(var(--c-white)); text-shadow: var(--tsh);
    }
    &.purple {
        background: rgb(var(--c-purple)); color: rgb(var(--c-white)); text-shadow: var(--tsh);
    }
    &.yellow {
        background: rgb(var(--c-yellow)); color: rgb(var(--c-black)); text-shadow: var(--tsh);
    }
}
a, a:link, a:visited {
    &.no-color {
        color: inherit; text-decoration: none;
    }
}
svg {
    width: 25px; height: 25px;
    display: block;
    color: inherit;
    &.small {
        width: 20px; height: 20px;
    }
    &.mini {
        width: 15px; height: 15px;
    }
}
img {
    display: block;
    &.icon {
        width: 25px;
    }
}
input {
    min-width: 0;
    font-family: inherit; font-size: inherit;
    &[type="text"], &[type="search"], &[type="email"], &[type="password"] {
        padding: 5px; background: rgba(var(--c-white), 0.3); border: none;
        font-size: inherit;
        color: rgb(var(--c-black));
        transition: border 0.3s;
        &:focus {
            outline: none;
        }
        &::placeholder {
            opacity: 0.3;
            color: inherit; text-transform: none;
        }
        &:not(:placeholder-shown){
            background: rgb(var(--c-white));
        }
        &.no-v-padding {
            padding: 0 5px;
        }
    }
    &[type="number"] {
        -moz-appearance: textfield;
        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }
    }
    &[type="checkbox"] {
        width: 18px; height: 18px;
        accent-color: rgb(var(--c-electric));
    }
    &[type="time"]{
        height: 30px;
        border: none;
        &::-webkit-datetime-edit {margin: 0 10px;}
    }
}
textarea {
    font-family: inherit; font-size: inherit;
    padding: 6px; background: rgba(var(--c-white), 0.3); border: none; color: inherit; font-size: 1rem;
    color: rgb(var(--c-black));
    resize: none;
    &:focus {
        outline: none;
    }
    &::placeholder {
        opacity: 0.3;
        color: inherit;
    }
    &:not(:placeholder-shown){
        background: rgb(var(--c-white));
    }    
}
.input-wrapper {
    position: relative;
    input {
        width: 100%;
    }
    .buttons {
        position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
        display: flex;
        .input-icon {
            color: rgb(var(--c-dark));
        }
    }
}
.select-wrapper {
    width: 100%;
    position: relative;
    .select-display {
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 15px; border-radius: 9999px; font-size: 1.1rem; font-weight: 600; cursor: pointer;
        transition: background 0.3s ease;
    }
    .select-dropdown {
        list-style: none;
        position: absolute; top: calc(100% + 6px); left: 0; width: 100%; max-height: 400px; overflow-y: auto; transform: scaleY(0); transform-origin: top center;
        background: rgba(var(--c-night), 0.9); backdrop-filter: blur(10px); border: 1px solid rgb(var(--c-electric)); border-radius: 10px; opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;                        
        z-index: 1;
        li {
            overflow: hidden;
            display: flex; justify-content: space-between; align-items: center; gap: 10px;
            padding: 12px 15px; cursor: pointer;
            transition: background 0.2s;
            &:hover {
                background: rgb(var(--c-electric));
            }
            &.content {
                flex: 1;
            }
        }
    }
    &.electric {
        .select-display {
            background: rgb(var(--c-electric)); border: 1px solid rgb(var(--c-electric)); box-shadow: inset 0 0 10px rgba(var(--c-electric), 0.2), 0 0 8px rgba(var(--c-electric), 0.25);
        }
    }
    &.dark {
        .select-display {
            background: rgba(var(--c-electric), 0.08); border: 1px solid rgba(var(--c-cyan), 0.5); box-shadow: inset 0 0 10px rgba(var(--c-cyan), 0.2), 0 0 8px rgba(var(--c-electric), 0.25);
        }
    }
    &.open {
        .select-dropdown {
            transform: scaleY(1);
            opacity: 1;
            pointer-events: auto;
        }
    }
    svg {
        position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
        pointer-events: none;
        transition: transform 0.3s ease;
    }
}
.input-number {
    min-width: 130px;
    display: inline-grid; grid-template-columns: 35px 1fr 35px; align-items: center; gap: 10px;
    padding: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border-radius: 15px; box-shadow: var(--c-bsh-light);
    backdrop-filter: blur(6px) saturate(120%);
    position: relative;
    button {
        width: 35px; height: 35px;
        display: inline-flex; justify-content: center; align-items: center;
        background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06)), rgb(var(--c-dark-blue)); border-radius: 10px; box-shadow: var(--c-bsh-light); cursor: pointer;
        transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
        -webkit-tap-highlight-color: transparent;
        &:focus {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(var(--c-electric),0.2), 0 0 18px rgba(var(--c-electric),0.1) inset;
        }
        &:active{
            transform: translateY(0);
        }
    }
    input {
        min-width: 40px; min-height: 35px;
        padding: 6px 15px; background: rgb(var(--c-dark-blue)); border: 1px solid rgba(var(--c-electric), 0.5); border-radius: 10px; color: inherit; font-size: 1.1rem; font-weight: 700; text-align: center;
        caret-color: var(--c-white);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
        -webkit-appearance: none; -moz-appearance: textfield; appearance: none;
        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
            -webkit-appearance: none; margin: 0;
        }
        &:focus {
            box-shadow: 0 8px 20px rgba(var(--c-electric),0.2), 0 0 18px rgba(var(--c-electric),0.1) inset;
            border-color: rgb(var(--c-electric));
        }
    }
    &.small {
        grid-template-columns: 20px 1fr 20px; gap: 5px;
        padding: 5px;
        button {
            width: 20px; height: 20px;
        }
        input {
            min-height: 20px;
        }
    }
    .unit {
        position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
    }
    &.disabled {
        button {
            opacity: 0.2;
        }
        input {
            cursor: not-allowed;
        }
    }
    &.pulse{
        animation: input-number-pulse .3s ease;
    }
}
.combobox {
    position: relative;
    display: flex; align-items: center;
    input {
        width: 100%;
        padding-right: 30px;
    }
    button {
        position: absolute; right: 3px; height: 100%;
        border-radius: 5px;
    }
    &.open svg {
        transform: rotate(180deg);
    }
}
.listbox {
    position: fixed; max-height: 300px; overflow-y: auto; z-index: 1;
    display: flex; flex-direction: column;
    padding: 15px 0 10px 0; background: rgb(var(--c-white)); box-shadow: 10px 10px 10px rgba(var(--c-black), 0.5);
    color: rgb(var(--c-black));
    list-style: none;
    li {
        padding: 5px 6px;
        cursor: default;
        &:hover {
            background: rgba(var(--c-black), 0.1);
        }
        &.highlighted {
            background: rgb(var(--c-electric));
        }
    }
    &.open {
        display: flex;
    }
}
.radios-container {
    display: flex;
    &.horizontal {
        flex-direction: row; gap: 20px;
    }
    &.vertical {
        flex-direction: column; gap: 10px;
    }
    .option {
        display: flex; align-items: center; gap: 5px;
    }
}
.radio-button {
    overflow: hidden; width: 100%; aspect-ratio: 1;
    display: flex; justify-content: center; align-items: center;
    border: 2px solid #ccc; border-radius: 5px;
    cursor: pointer; user-select: none;
    transition: border-color 0.2s ease;
    position: relative;
    input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    img, src {
        width: 100%; object-fit: cover;
    }
    &:has(input:checked), &:hover{
        border-color: rgb(var(--c-electric));
    }
}
.datetimepicker {
    display: flex; justify-content: center; align-items: center; gap: 5px;
    .slot {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        button {
            opacity: 0.35;
            transition: opacity .3s ease;
            svg {
                width: 15px; height: 15px;
            }
            &:active, &:hover {
                opacity: 0.7;
            }
        }
        .value {
            color: rgb(var(--c-electric)); font-weight: 600;
        }
    }
    .separator {
        margin: 0 10px;
        opacity: 0.7;
    }
}
.entity-picker-wrapper {
    display: grid;
    > * {
        grid-area: 1 / 1;
    }
    .entity-picker-display {
        width: 100%; height: 100%;
        display: flex; align-items: center; gap: 10px;
        padding: 5px; background: rgb(var(--c-white));
        color: black; cursor:text;
    }
}
.entity-picker{
    position: fixed; z-index: 1000; overflow-y: auto; max-height: 300px;
    background:white; border: 1px solid #ccc; box-shadow: 0 4px 12px rgba(var(--c-black), 0.15);
    .item{
        display: flex; gap: 10px; align-items: center;
        padding: 8px 12px;
        color: black;
        cursor: pointer;
        &.empty {
            border-bottom: 1px solid #ccc; opacity: 0.7;
            font-style: italic;
        }
        &:hover, &.selected{
            background: rgb(var(--c-electric));
        }
    }
}
.picturebox {
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    position: relative;
    .img-container {
        width: 100%; overflow: hidden;
        padding: 3px; /* background: rgba(var(--c-white), 0.3); */ border: 1px solid black; opacity: 0.5;
        position: relative;
        img {
            width: 100%; height: 100%; object-fit: contain;
        }
        .marker {
            position: absolute;
            display: flex; justify-content: center; align-items: center;
            background: rgb(var(--c-electric)); border: 2px solid rgb(var(--c-black)); border-radius: 50%;
            font-size: 1.2rem; font-weight: 600;
        }
        &::after {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; justify-content: center; align-items: center;
            background: linear-gradient(0deg, rgba(var(--c-black), 1), transparent 60px, transparent calc(100% - 60px), rgba(var(--c-black), 1));
            color: white; font-size: 2rem; font-weight: 600; text-align: center; white-space: pre; text-shadow: 2px 1px 1px #000;
        }
        &:has(img){
            background: none!important; opacity: 1;
            &::after {
                content: ""!important;
            }
        }
        &:hover {
            border: 1px solid rgb(var(--c-electric));
            &::after {
                background: linear-gradient(0deg, rgba(var(--c-electric), 1), transparent 60px, transparent calc(100% - 60px), rgba(var(--c-electric), 1));
            }
        }
    }
    .filename {
        position: absolute; bottom: 20px; left: 0; width: 100%;
        padding: 0px 5px;
        color: rgb(var(--c-white));
    }
    .caption {
        width: 100%;
        padding: 0; background: none;
        color: rgb(var(--c-electric)); font-size: 0.85rem; font-weight: 600; text-align: center;
        &:not(:placeholder-shown){
            background: none;
        }
    }
    .btn-delete {
        position: absolute; top: 5px; left: 5px;
    }
    .btn-load {
        position: absolute; top: 5px; right: 40px;
        img {
            width: 30px;
        }
    }
    .btn-delete-image {
        position: absolute; top: 5px; right: 5px;
    }
    .btn-zoning-edit {
        position: absolute; bottom: 22px; right: 40px;
    }
    .btn-edit {
        position: absolute; bottom: 22px; right: 5px;
    }
}
button, a, svg, img, .select-wrapper, .no-select {
    user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

body {align-items: center;background: rgb(var(--c-black));
    width: 100vw; height: 100vh; /* fallback */ height: 100dvh;
    display: flex; flex-direction: column; 
    
    color: rgb(var(--c-white));
    position: relative;
    header {
        width: 100%;
        display: flex; align-items: center; gap: 20px;
        padding: 5px 20px; background: rgb(var(--c-black));
        font-size: 1.1rem; font-weight: 600;
        button {
            letter-spacing: 1px;
        }
        #btn-explorer img {
            width: 25px;
        }
        #btn-logout {
            margin-left: auto;
            svg {
                color: red;
            }
        }
    }
    main {
        width: 100%; flex: 1; overflow: hidden;
        display: flex; flex-direction: column;
        padding: 15px;
        .page {
            display: flex; flex-direction: column; align-items: center; overflow: hidden;
            padding: 10px;
            transition: left 0.3s ease;
            .topbar {
                flex-shrink: 0; width: 100%; max-width: 1400px; margin-top: 20px;
                display: flex; justify-content: center;
                h1 {
                    margin-left: 25px;
                    font-size: 1.8rem; font-weight: 600;
                }
                .search {
                    margin-left: auto; width: 600px; height: 35px;
                    background: rgb(var(--c-white)); border-radius: 15px;
                }
            }
            .list {
                width: 100%; flex: 1; margin-top: 15px; overflow: auto;
                display: flex; flex-direction: column; gap: 10px;
                .item {
                    flex: 0 0 35px; overflow-x: auto;
                    display: flex; align-items: center; gap: 12px;
                    background: rgba(var(--c-dark), 0.5); border: 1px solid transparent; border-radius: 10px;
                    cursor: pointer;
                    transition: background 0.3s ease, border-color 0.6s ease;
                    position: relative;
                    &:hover {
                        background: rgba(var(--c-white), 0.1); border-color: rgba(var(--c-white), 0.5);
                    }
                    &.selected {
                        background: rgba(var(--c-white), 0.3); border-color: rgb(var(--c-white));
                    }
                }
            }
            .selection-bar {
                position: absolute; bottom: 0; width: 100%;
                display: none;  justify-content: space-between; gap: 20px;
                padding: 10px; background: rgba(var(--c-black), 0.3); box-shadow: 10px -10px 10px rgba(var(--c-black), 0.6);
            }
            &.selection-mode {
                width: 90%; height: 90%;
                border: 1px solid black; border-radius: 10px;
                .toolbar {
                    display: none;
                }
                .selection-bar {
                    display: flex;
                }
            }
        }
        h1 {
            flex-shrink: 0; height: 40px;
        }
        .columns {
            width: 100%; flex: 1; overflow-y: auto;
            display: flex; gap: 20px;
            .column {
                overflow-y: auto;
                display: flex; flex-direction: column;
            }
            .box {
                width: 100%;
                display: flex; flex-direction: column; gap: 10px;
                .box-header {
                    flex-shrink: 0; width: 100%; height: 50px;
                    display: flex; justify-content: space-between; align-items: center;
                    padding: 0 5px 5px 0; border-bottom: 1px solid black;
                    font-weight: 600;
                    .toolbar {
                        height: 100%; overflow: hidden;
                        display: flex; justify-content: end; align-items: center; gap: 10px;
                        padding-top: 2px;
                        .label {
                            margin-left: 20px;
                        }
                        img {
                            height: 25px;
                        }
                    }
                }
            }
        }
        .window {
            position: absolute; right: 0; left: 0; height: 100%; overflow: hidden;
            display: flex; justify-content: center; align-items: center;
            padding: 15px; background: rgb(var(--c-black));
            transition: left 0.3s ease;
            .container {
                width: 100%; height: 100%; max-width: 1400px; max-height: 800px; overflow: hidden;
                display: flex; flex-direction: column;
                border: 1px solid black; border-radius: 10px;
                color: black;
                position: relative;
                .window-bar {
                    flex-shrink: 0; width: 100%; height: 30px;
                    display: flex; align-items: center; gap: 10px;
                    padding: 5px 5px 5px 10px; background: rgb(var(--c-white), 0.2); border-bottom: 1px solid black;
                    .title {
                        margin-right: auto;
                    }
                    .btn-unmaximize {display: none;}
                }
                .content {
                    width: 100%; flex: 1; overflow: hidden;
                    background: rgba(var(--c-white), 0.3);
                    color: black;
                    position: relative;
                    .column {
                        /* overflow: hidden; */overflow-y: auto;
                        display: flex; flex-direction: column;
                    }
                    .box {
                        width: 100%; /* overflow: hidden; */
                        display: flex; flex-direction: column; gap: 10px;
                        .box-header {
                            width: 100%; height: 50px;
                            display: flex; justify-content: space-between; align-items: center;
                            padding: 0 5px 5px 0; border-bottom: 1px solid black;
                            font-weight: 600;
                            .toolbar {
                                height: 100%; overflow: hidden;
                                display: flex; justify-content: end; align-items: center; gap: 10px;
                                padding-top: 2px;
                                .label {
                                    margin-left: 20px;
                                }
                                img {
                                    height: 25px;
                                }
                            }
                        }
                    }
                    .notifications-overlay {
                        content: "";
                        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                        display: none;
                        background: rgba(var(--c-black), 0.2); backdrop-filter: blur(0.5px);
                    }
                }
                &:has(.notifications .list li:first-child.warning) {
                    .notifications-overlay {
                        display: block;
                    }
                }
            }
            &.minimized {
                position: static; max-width: 250px; height: 25px;
                padding: 0; background: none; backdrop-filter: unset;
                .container {
                    max-width: 250px;
                    border-radius: 0; border-top-left-radius: 4px; border-top-right-radius: 10px;
                    .window-bar {
                        height: 25px;
                        padding: 5px 2px 5px 5px; border-bottom: none;
                        cursor: pointer;
                        .btn-minimize {display: none;}
                        .btn-maximize {display: none;}
                    }
                    .content {
                        display: none;
                    }
                }
            }
            &.maximized {
                padding: 0; backdrop-filter: unset;
                .container {
                    max-width: unset!important; max-height: unset!important;
                    border-radius: 0;
                    .window-bar {
                        .btn-maximize {display: none;}
                        .btn-unmaximize {display: flex;}
                    }
                }
            }
            &.anchored {
                position: unset;
                padding: 0; background: none; backdrop-filter: unset;
                .container {
                    background: none; border: none; border-radius: 0;
                    .window-bar {
                        display: none;
                    }
                    .content {
                        background: none;
                    }
                }
            }
            &.selection-mode {
                border: 1px solid black; border-radius: 10px;
                .window-bar, .tabs-bar {
                    display: none;
                }
                .selection-bar {
                    display: flex!important;
                }
            }
        }
        .notifications-overlay {
            content: "";
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: none;
            background: rgba(var(--c-black), 0.2); backdrop-filter: blur(0.5px);
        }
        &:has(.notifications .list li:first-child.warning) {
            .notifications-overlay {
                display: block;
            }
        }
    }
    main2 {
        width: 100%; flex-grow: 1; overflow: hidden;
        display: flex; flex-direction: column;
        position: relative;
        .page {
            position: absolute; right: 0; left: 0; height: 100%;
            display: flex; flex-direction: column; align-items: center; overflow: hidden;
            padding: 10px;
            transition: left 0.3s ease;
            .topbar {
                flex-shrink: 0; width: 100%; max-width: 1400px; margin-top: 20px;
                display: flex; justify-content: center;
                h1 {
                    margin-left: 25px;
                    font-size: 1.8rem; font-weight: 600;
                }
                .search {
                    margin-left: auto; width: 600px; height: 35px;
                    background: rgb(var(--c-white)); border-radius: 15px;
                }
            }
            .list {
                width: 100%; flex-grow: 1; margin-top: 15px; overflow: auto;
                display: flex; flex-direction: column; gap: 10px;
                .item {
                    flex: 0 0 35px; overflow-x: auto;
                    display: flex; align-items: center; gap: 12px;
                    background: rgba(var(--c-dark), 0.5); border: 1px solid transparent; border-radius: 10px;
                    cursor: pointer;
                    transition: background 0.3s ease, border-color 0.6s ease;
                    position: relative;
                    &:hover {
                        background: rgba(var(--c-white), 0.1); border-color: rgba(var(--c-white), 0.5);
                    }
                    &.selected {
                        background: rgba(var(--c-white), 0.3); border-color: rgb(var(--c-white));
                    }
                }
            }
            .selection-bar {
                position: absolute; bottom: 0; width: 100%;
                display: none;  justify-content: space-between; gap: 20px;
                padding: 10px; background: rgba(var(--c-black), 0.3); box-shadow: 10px -10px 10px rgba(var(--c-black), 0.6);
            }
            &.selection-mode {
                width: 90%; height: 90%;
                border: 1px solid black; border-radius: 10px;
                .toolbar {
                    display: none;
                }
                .selection-bar {
                    display: flex;
                }
            }
        }
        .window {
            position: absolute; right: 0; left: 0; height: 100%; overflow: hidden;
            display: flex; justify-content: center; align-items: center;
            padding: 15px; background: rgb(var(--c-black));
            transition: left 0.3s ease;
            .container {
                width: 100%; height: 100%; max-width: 1400px; max-height: 800px; overflow: hidden;
                display: flex; flex-direction: column;
                border: 1px solid black; border-radius: 10px;
                color: black;
                position: relative;
                .window-bar {
                    flex-shrink: 0; width: 100%; height: 30px;
                    display: flex; align-items: center; gap: 10px;
                    padding: 5px 5px 5px 10px; background: rgb(var(--c-white), 0.2); border-bottom: 1px solid black;
                    .title {
                        margin-right: auto;
                    }
                    .btn-unmaximize {display: none;}
                }
                .content {
                    width: 100%; flex: 1; overflow: hidden;
                    background: rgba(var(--c-white), 0.3);
                    color: black;
                    position: relative;
                    .column {
                        /* overflow: hidden; */overflow-y: auto;
                        display: flex; flex-direction: column;
                    }
                    .box {
                        width: 100%; /* overflow: hidden; */
                        display: flex; flex-direction: column; gap: 10px;
                        .box-header {
                            width: 100%; height: 50px;
                            display: flex; justify-content: space-between; align-items: center;
                            padding: 0 5px 5px 0; border-bottom: 1px solid black;
                            font-weight: 600;
                            .toolbar {
                                height: 100%; overflow: hidden;
                                display: flex; justify-content: end; align-items: center; gap: 10px;
                                padding-top: 2px;
                                .label {
                                    margin-left: 20px;
                                }
                                img {
                                    height: 25px;
                                }
                            }
                        }
                    }
                    .notifications-overlay {
                        content: "";
                        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                        display: none;
                        background: rgba(var(--c-black), 0.2); backdrop-filter: blur(0.5px);
                    }
                }
                &:has(.notifications .list li:first-child.warning) {
                    .notifications-overlay {
                        display: block;
                    }
                }
            }
            &.minimized {
                position: static; max-width: 250px; height: 25px;
                padding: 0; background: none; backdrop-filter: unset;
                .container {
                    max-width: 250px;
                    border-radius: 0; border-top-left-radius: 4px; border-top-right-radius: 10px;
                    .window-bar {
                        height: 25px;
                        padding: 5px 2px 5px 5px; border-bottom: none;
                        cursor: pointer;
                        .btn-minimize {display: none;}
                        .btn-maximize {display: none;}
                    }
                    .content {
                        display: none;
                    }
                }
            }
            &.maximized {
                padding: 0; backdrop-filter: unset;
                .container {
                    max-width: unset!important; max-height: unset!important;
                    border-radius: 0;
                    .window-bar {
                        .btn-maximize {display: none;}
                        .btn-unmaximize {display: flex;}
                    }
                }
            }
            &.anchored {
                position: unset;
                padding: 0; background: none; backdrop-filter: unset;
                .container {
                    background: none; border: none; border-radius: 0;
                    .window-bar {
                        display: none;
                    }
                    .content {
                        background: none;
                    }
                }
            }
            &.selection-mode {
                border: 1px solid black; border-radius: 10px;
                .window-bar, .tabs-bar {
                    display: none;
                }
                .selection-bar {
                    display: flex!important;
                }
            }
        }
        .minitabs-sidebar {
            position: absolute; top: 0; height: 100%; width: 200px; left: -100%; overflow-y: auto;
            display: flex; flex-direction: column; align-items: center; gap: 20px;
            padding: 10px; background: rgb(var(--c-dark));
            transition: left 0.3s ease;
            .minitab {
                flex-shrink: 0; width: 100%; max-height: 160px; overflow: hidden;
                position: relative;
                opacity: 0.6;
                transition: opacity 0.2s ease;
                .window {
                    position: unset; transform: scale(0.2); width: 500%; height: 500%; transform-origin: top left;
                    pointer-events: none;
                    .container {
                        .window-bar {
                            display: none;
                        }
                    }
                }
                .overlay {
                    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
                    display: flex; flex-direction: column; justify-content: end;
                    padding: 5px 10px; background: linear-gradient(15deg, black, transparent);
                    font-size: 0.9rem;
                    cursor: pointer;
                }
                .btn-minitab-close {
                    position: absolute; top: 28px; right: 7px;
                }
                &:hover {
                    opacity: 1;
                }
            }
            &.open {
                left: 0; z-index: 1;
            }
        }
        &.selection-mode {
            position: fixed; top: 0; left: 0; height: 100%;
            display: flex; justify-content: center; align-items: center;
            .minitabs-sidebar.open {
                display: none;
            }
        }
        .selection-mode-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(var(--c-dark), 0.6); backdrop-filter: blur(2px);
        }
        &:not(.selection-mode):has(.minitabs-sidebar.open) {
            > .window, >.page {
                left: 200px;
            }
        }
    }
}



@keyframes loading {
  0%   {left: -80px;}
  100% {left: 100%;}
}
@keyframes blink {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.3); }
}