:root {
    --bg-color: #F3F9FF;
    --main-color: #000B16;
    --second-color: #D5DFE9;
    --selected-color: #cad9e9;
    --border-width: 4px;
    --calendar-cell-height: 50px;

    --graph-point-1: #959FA9;
    --graph-point-2: #525D67;
    --graph-point-3: #000B16;

    --level-1: 10;
    --level-2: 9;
    --level-3: 8;

    --status-led-offline: #F82D1A;
    --status-led-online: #00FF44;

    --animation-behavior: cubic-bezier(.07, .86, .48, .99);
    --notification-max-count: 5s;

    --notification-progress: 0%;
}

* {
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}

body{
    background-color: var(--bg-color);
}

input[data-available="false"] {
    pointer-events: none;
    opacity: .3;
}

input.invalid-input,
select.invalid-input {
    outline: 2px solid #F82D1A !important;
}

panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: transform .8s ease;
    z-index: var(--level-2);
    background-color: var(--bg-color);
    transform-origin: top;
}

panel[data-state="open"] {
    transform: scaleY(0);
}

panel[data-state="closed"] {
    transform: scaleY(1);
}

main {
    position: relative;
    background-color: var(--bg-color);
    color: var(--main-color);
    /* outline: solid var(--main-color) var(--border-width); */
    height: 100vh;
    grid-template-rows: 50px 1fr;
    display: grid;
    border-collapse: collapse;
    font-family: sora;
    opacity: 0;
    transition: opacity .8s ease;
}

.context-menu {
    position: fixed;
    width: 200px;
    border: solid var(--main-color) var(--border-width);
    background-color: var(--bg-color);
    z-index: var(--level-1);
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.233);
    padding: 15px;

    .context-btn {
        cursor: pointer;
        padding: 3px 0;
    }

    .context-btn:hover {
        background-color: var(--second-color);
    }
}

.menu-separator {
    margin: 5px 0;
    width: 100%;
}

#context-menu[data-type="default"] {
    [data-name="delete"] {
        pointer-events: none;
        opacity: .3;
    }

    [data-name="copy"] {
        pointer-events: none;
        opacity: .3;
    }

    [data-name="rename"] {
        pointer-events: none;
        opacity: .3;
    }

    [data-name="move"] {
        pointer-events: none;
        opacity: .3;
    }

    [data-name="download"] {
        pointer-events: none;
        opacity: .3;
    }
}

#context-menu-db[data-target="database"] {
    [data-name="delete-table"] {
        display: none;
    }

    [data-name="delete-column"] {
        display: none;
    }
}

#context-menu-db[data-target="table"] {
    [data-name="delete-database"] {
        display: none;
    }

    [data-name="delete-column"] {
        display: none;
    }
}

#context-menu-db[data-target="column"] {
    [data-name="delete-table"] {
        display: none;
    }

    [data-name="delete-database"] {
        display: none;
    }
}

.context-menu[data-open="true"] {
    display: block;
}

.context-menu[data-open="false"] {
    display: none;
}

.context-menu[data-cadran="1"] {
    transform: translate(0, 0);
}

.context-menu[data-cadran="2"] {
    transform: translate(-100%, 0);
}

.context-menu[data-cadran="3"] {
    transform: translate(0, -100%);
}

.context-menu[data-cadran="4"] {
    transform: translate(-100%, -100%);
}

.top-bar {
    height: 100%;
    border: solid var(--border-width) var(--main-color);
    display: flex;
    background-color: var(--second-color);
    justify-content: space-between;
    z-index: var(--level-1);
}

.main-screen {
    position: relative;
    /* border: solid var(--border-width) var(--main-color); */
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* .main-screen::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background-color: #000b165b;
    z-index: 2;
} */

/* .main-screen[data-context-menu="open"]::before{
    display: block;
}

.main-screen[data-context-menu="closed"]::before{
    display: none;
} */

::-webkit-scrollbar {
    /* width: 14px; */
    display: none;
}

/* ::-webkit-scrollbar-track {
    background-color: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border: solid var(--bg-color) 4px;
} */

.status-data {
    display: flex;

    .data {
        background-color: var(--bg-color);
        outline: solid var(--border-width) var(--main-color);
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .connection-status {
        background-color: var(--main-color);
        color: white;
    }

    .logout {
        cursor: pointer;
        transition: background-color .2s ease;

        img {
            height: 18px;
        }
    }

    .logout:hover {
        background-color: var(--second-color);
    }

    .icon {
        margin-right: 10px;
        display: flex;
        align-items: center;
    }
}

.menu {
    position: absolute;
    top: 0;
    left: 0;
    height: 185px;
    width: 100%;
    display: flex;
    background-color: var(--bg-color);
    outline: solid var(--border-width) var(--main-color);
    z-index: var(--level-3);
    transition: transform .8s ease;
}

.menu[data-state="open"] {
    transform: translateY(calc(-1 * var(--border-width)));
}

.menu[data-state="closed"] {
    transform: translateY(calc(-100% - var(--border-width)));
}

.menu-nav {
    height: 100%;
    aspect-ratio: 1;
    outline: solid var(--border-width) var(--main-color);
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease;

    svg {
        width: 50%;
    }

    path {
        transition: fill .2s ease;
    }
}

.menu-nav:hover {
    background-color: var(--main-color);

    path {
        fill: white;
    }
}

.menu-icon {
    height: 100%;
    aspect-ratio: 1;
    background-color: var(--bg-color);
    outline: solid var(--border-width) var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    cursor: pointer;
}

.menu-icon:hover {
    background-color: var(--second-color);
}

.server-status-led {
    position: relative;
    height: .5em;
    width: .5em;
    /* opacity: 0.365; */
    margin-left: 10px;
    animation: pulse 2s ease infinite;
}

.server-status-led::before {
    content: "";
    z-index: 1;
    position: absolute;
    inset: 0 0 0 0;
    scale: 1.2;
    filter: blur(3px);
}

.server-status-led[data-status="Offline"]::before,
.server-status-led[data-status="Offline"] {
    background-color: var(--status-led-offline);
}

.server-status-led[data-status="Online"]::before,
.server-status-led[data-status="Online"] {
    background-color: var(--status-led-online);
}

@keyframes pulse {
    90% {
        opacity: 0.365;
    }

    100% {
        opacity: 0.365;
    }
}

.page {
    max-height: calc(100vh - 50px);
    width: 100%;
    height: 100%;
    padding: 25px 100px;
}

.page[data-state="closed"] {
    display: none;
}

.page[data-state="open"] {
    display: block;
}

/* FILE EXPLORER */
.explorer-nav-bar {
    --bar-height: 50px;
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 1fr 50px 50px 50px;
    height: 50px;
    gap: 10px;

    .nav {
        border: solid var(--border-width) var(--main-color);
        background-color: var(--bg-color);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        /* img{
            transition: scale .2s ease;
        } */
    }

    .nav:not(.path-bar):hover,
    .nav[data-selected="false"]:hover {
        background-color: var(--second-color);
    }

    .nav[data-active="true"] {
        background-color: var(--second-color);
    }

    .nav[data-active="false"] {
        background-color: var(--bg-color);
    }

    .path-bar {
        justify-content: start;
        padding: 0 15px;
        font-family: sora;
        font-size: 1rem;
    }

    .nav:active {
        img {
            scale: .9;
        }
    }
}

/* #explorer{

    overflow: hidden;
} */

#explorer {
    position: relative;
}

.file-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, .75fr));
    /* grid-template-rows: repeat(auto-fit, minmax(100px, .75fr)); */
    gap: 15px;
    overflow: scroll;
    max-height: calc(100% - 125px);
    max-width: 100%;
    width: fit-content;

    .cell {
        padding: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
        transition: background-color .2s ease;

        .file-name {
            margin-top: .5em;
            text-align: center;
            word-break: break-all;
        }

        textarea {
            /* all: unset; */
            font-family: sora;
            font-size: 1rem;
            margin-top: .5em;
            max-width: 100%;
            background-color: var(--second-color);
            outline: none;
            border: none;
            height: fit-content;
            resize: none;
            padding: 0 15px;
            word-break: break-all;
            text-align: center;
            field-sizing: content;
            cursor: text;
        }

        textarea[data-toggle="on"],
        p[data-toggle="on"] {
            display: block;
        }

        textarea[data-toggle="off"],
        p[data-toggle="off"] {
            display: none;
        }
    }

    .cell:hover {
        background-color: var(--second-color);
    }

    .cell[data-selected="true"] {
        background-color: var(--selected-color);
    }
}

.table-container {
    margin-top: 50px;
    overflow: auto;
    max-height: calc(100% - 125px);
}

.selection-box {
    position: absolute;
    border: 1px solid var(--selected-color);
    background-color: var(--selected-color);
    opacity: 0.3;
    pointer-events: none;
    z-index: 5;
}

.file-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;

    tr {
        transition: background-color .2s ease;
        cursor: pointer;
    }

    tr:hover {
        background-color: var(--second-color);
    }

    tr[data-selected="true"] {
        background-color: var(--selected-color);
    }

    td {
        padding: 5px 15px;
    }

    thead {
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        left: 0;
    }

    .table-cell-name {
        display: flex;
        align-items: center;

        textarea {
            all: unset;
            max-width: 100%;
            background-color: #F82D1A;
            height: fit-content;
            word-break: break-all;
            text-align: center;
            field-sizing: content;
        }

        textarea[data-toggle="on"],
        p[data-toggle="on"] {
            display: block;
        }

        textarea[data-toggle="off"],
        p[data-toggle="off"] {
            display: none;
        }
    }

    .table-cell-name[data-type="directory"]::before {
        content: url(/images/svg/folder-icon.svg);
        margin-right: 5px;
    }

    .table-cell-name[data-type="file"]::before {
        content: url(/images/svg/file-icon.svg);
        margin-right: 5px;
    }

    .name-header {
        min-width: 300px;
    }

    .type-header {
        min-width: 120px;
    }
}

.table-container[data-state="visible"] {
    display: block;
}

.file-grid[data-state="visible"] {
    display: grid;
}

.table-container[data-state="hidden"],
.file-grid[data-state="hidden"] {
    display: none;
}

.directory,
.file {
    background-color: var(--bg-color);
    border: solid var(--border-width) var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.directory {
    position: relative;
    min-height: 100px;
    aspect-ratio: 1.2/1;
}

.directory::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 20%;
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
    background-color: var(--second-color);
}

.file {
    min-height: 100px;
    aspect-ratio: 1/1.2;
    font-weight: 900;
    justify-content: end;
    align-items: start;
    padding: 1px 4px;
}

.form-box {
    position: fixed;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid var(--main-color) var(--border-width);
    background-color: var(--bg-color);
    min-width: 400px;
    min-height: 250px;
    max-width: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--level-1);
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.233);
    padding: 50px 30px;

    input {
        margin-bottom: 25px;
        text-align: center;
        background-color: var(--second-color);
        padding: 10px 20px;
        max-width: 80%;
        outline: none;
        border: none;
        font-family: sora;
        font-size: 1rem;
        display: none;
    }

    .icon {
        position: absolute;
        top: calc(-1 * var(--border-width));
        right: calc(-1 * var(--border-width));
    }

    .message {
        margin-bottom: 25px;
        text-align: center;
        padding: .2em .4em;
        max-width: 80%;
    }
}

.form-box[data-action="new-folder"],
.form-box[data-action="new-file"],
.form-box[data-action="new-database"] {
    input {
        display: block;
    }

    .message {
        display: none;
    }

    .table-form {
        display: none;
    }
}

.form-box[data-action="delete"],
.form-box[data-action="delete-database"],
.form-box[data-action="delete-table"],
.form-box[data-action="delete-column"] {
    .table-form {
        display: none;
    }
}


.form-box[data-action="new-table"],
.form-box[data-action="new-column"] {
    .table-form {
        display: block;
        width: 100%;

        input {
            display: block;
            max-width: 100%;
            width: 100%;
        }

        select {
            all: unset;
            margin-bottom: 25px;
            text-align: center;
            background-color: var(--second-color);
            padding: 10px 20px;
            width: 100%;
            outline: none;
            border: none;
            font-family: sora;
            font-size: 1rem;
            box-sizing: border-box;
        }

        .column-data {
            display: grid;
            grid-template-columns: 1fr 1fr .5fr;
            gap: 8px;
        }

        .button {
            width: fit-content;
            justify-self: center;
            margin-bottom: 25px;
        }

        .constraints-container {
            background-color: var(--second-color);
            width: 100%;
            padding: 15px;
            height: fit-content;
            min-height: 80px;
            margin-bottom: 25px;
            display: flex;
            flex-wrap: wrap;

            .constraint {
                padding: .3em 1em;
                font-size: 12px;
                font-weight: bold;
                width: fit-content;
                height: fit-content;
                color: white;
                margin-right: 10px;
                margin-bottom: 10px;
                cursor: pointer;
                filter: saturate(.4);
                transition: filter .2s ease;
            }

            .constraint[data-selected="true"] {
                filter: saturate(1);
            }

            .constraint.pk {
                background-color: #F82D1A;
            }

            .constraint.un {
                background-color: #1AC8F8;
            }

            .constraint.ai {
                background-color: #1A82F8;
            }

            .constraint.nn {
                background-color: #981AF8;
            }

            .constraint.fg {
                background-color: #E51AF8;
            }
        }

        .menu-separator {
            margin-bottom: 25px;
        }
    }

    .message {
        display: none;
    }
}

.form-box[data-action="new-column"] {
    #new-table-name {
        display: none;
    }

    #separator-1 {
        display: none;
    }
}

.table-preview {
    max-height: 175px;
    overflow: auto;
    margin-bottom: 25px;
}

.column-preview {
    display: inline-flex;
    flex-wrap: nowrap;
    width: fit-content;
    height: 100%;
    font-size: 12px;
    margin-bottom: 10px;
    margin-right: 10px;

    .name {
        padding: .8em 1.4em;
        border: solid var(--border-width) var(--main-color);
    }

    .type {
        background-color: var(--main-color);
        color: white;
        padding: .8em 1.4em;
        border: solid var(--border-width) var(--main-color);
    }

    .const {
        margin-left: 2px;
        width: 5px;
        align-self: stretch;
    }

    .const.pk {
        background-color: #F82D1A;
    }

    .const.un {
        background-color: #1AC8F8;
    }

    .const.ai {
        background-color: #1A82F8;
    }

    .const.nn {
        background-color: #981AF8;
    }

    .const.fg {
        background-color: #E51AF8;
    }
}

.form-box[data-open="true"] {
    display: flex;
}

.form-box[data-open="false"] {
    display: none;
}

.button {
    cursor: pointer;
    border: solid var(--main-color) var(--border-width);
    padding: 10px 20px;
    transition: background-color .2s ease;
}

.button:hover {
    background-color: var(--second-color);
}

.icon {
    cursor: pointer;
    border: solid var(--main-color) var(--border-width);
    transition: background-color .2s ease;
}

.icon:hover {
    background-color: var(--second-color);
}

/*============================================== FILE EXPLORER ==============================================*/

.servers-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 15px;
    height: 100%;
}

.databases-grid {
    display: grid;
    grid-template-columns: 250px 1fr auto;
    gap: 15px;
    height: 100%;
    min-height: 0;
    /* only needed if .databases-grid is itself a grid/flex item */
}

.database-info {
    display: grid;
    height: 100%;
    grid-template-rows: 1fr auto;
    /* fixed typo: 1frs -> 1fr */
    gap: 15px;
    min-height: 0;
    /* same reason as above, in case this is nested in another grid/flex parent */
}

.query-bar {
    display: flex;
    gap: 8px;
    justify-content: center;

    .query-element {
        padding: 10px 20px 10px 20px;
        border: var(--main-color) var(--border-width) solid;
        height: 50px;
        transition: background-color .2s ease;
    }

    .query-element:not(.inverse) {
        cursor: pointer;
    }

    .query-element:hover {
        background-color: var(--second-color);
    }

    .query-element.inverse {
        background-color: var(--main-color);
        color: white;
    }

    img {
        height: 50px;
    }
}

[data-pill][data-hidden="true"] {
    display: none;
}

[data-pill="execute"] {
    cursor: pointer;
}

.removable-pills-section {
    display: flex;
    gap: 8px;
    max-width: 1000px;
    overflow: auto;
}

.query-bar[data-hidden="true"],
.mysql-terminal[data-hidden="true"] {
    display: none;
}

.query-bar[data-hidden="false"] {
    display: flex;
}

.mysql-terminal[data-hidden="false"] {
    display: block;
}

.mysql-terminal {
    position: relative;

    .button {
        width: fit-content;
        justify-self: end;
    }

    textarea {
        height: 200px;
        padding: 10px 20px 10px 20px;
        border: var(--main-color) var(--border-width) solid;
        resize: vertical;
        width: 100%;
        background-color: var(--main-color);
        color: white;
    }

}

.custom-query-slider {
    position: fixed;
    left: 100px;
    bottom: 25px;
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--main-color);
    display: flex;
    cursor: pointer;
    color: white;

    .pin {
        width: 50%;
        height: 100%;
        position: absolute;
        background-color: var(--bg-color);
        top: 0;
        transition: left .2s ease;
    }

    div {
        padding: .1em .8em;
        font-size: .6rem;
    }
}

.custom-query-slider[data-toggle="on"] {
    border: var(--border-width) var(--main-color) solid;

    .pin {
        left: 0;
    }
}

.custom-query-slider[data-toggle="off"] {
    border: var(--border-width) var(--selected-color) solid;
    background-color: var(--selected-color);

    .pin {
        left: 50%;
    }
}

.custom-menu {
    position: relative;
    cursor: pointer;
    transition: background-color .2s ease;

    .menu-list {
        position: absolute;
        top: 0;
        left: calc(-1 * var(--border-width));
        transform: translateY(calc(-100% - 10px));
        /* outline: solid var(--main-color) var(--border-width);
        padding: 15px; */
        overflow: auto;
        max-height: 250px;

        .menu-cell {
            border: solid var(--main-color) var(--border-width);
            padding: 10px 20px 10px 20px;
            margin-bottom: 10px;
            background-color: var(--bg-color);
            cursor: pointer;
            transition: background-color .2s ease;
        }

        .menu-cell:hover,
        img:hover {
            background-color: var(--second-color);
        }

        img {
            border: solid var(--main-color) var(--border-width);
            cursor: pointer;
            background-color: var(--bg-color);
            transition: background-color .2s ease;
            width: 50px;
            height: 50px;
        }
    }
}

.operator {
    img {
        width: 100%;
        height: 100%;
        border: var(--main-color) var(--border-width) solid;
    }

    /* background-color: red; */
}

.operator:hover {
    background-color: var(--second-color);
}

.custom-menu[data-state="closed"] {
    .menu-list {
        display: none;
    }
}

.custom-menu[data-state="open"] {
    .menu-list {
        display: block;
    }
}

.table-content {
    border: var(--border-width) var(--main-color) solid;
    height: 100%;
    min-height: 0;
    /* <-- the key fix: allows it to shrink instead of growing to fit content */
    overflow: auto;
    /* or auto, depending on whether horizontal scroll is wanted */
    /* padding: 0 30px 30px 30px; */
    box-sizing: border-box;
    /* so padding doesn't push it past 100% */
}

.database-table {
    /* remove fixed height: 100px here if it's meant to grow with content and scroll */
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    position: relative;

    thead {
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        left: 0;

        /* background-color: #000B16; */
        tr {
            td {
                outline: var(--main-color) solid 2px;
                border-bottom: var(--main-color) solid 2px;
                white-space: nowrap;
                background-color: var(--second-color);
            }
        }
    }

    td {
        padding: 10px 20px 10px 20px;
    }

    tbody {
        tr {
            transition: background-color .2s ease;
        }

        tr:hover {
            background-color: var(--second-color);
        }
    }
}

.columns-list {
    .column-name {
        margin-bottom: 10px;
        border: var(--border-width) var(--main-color) solid;
        text-align: center;
        max-width: 150px;
        align-content: center;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease, border .2s ease;
        padding: 10px 20px 10px 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        /* white-space: nowrap; */
        /* font-size: .8rem; */
    }

    .column-name:hover {
        background-color: var(--second-color);
    }

    .column-name[data-selected="true"] {
        border: var(--border-width) var(--selected-color) solid;
        color: var(--selected-color);
    }
}

.database {
    margin-bottom: 10px;

    .database-tables {
        overflow: auto;
        interpolate-size: allow-keywords;
        transition: height .3s ease, height .5s ease;
        max-height: 300px;
    }

    .database-tables[data-open="true"] {
        height: auto;
    }

    .database-tables[data-open="false"] {
        height: 0;
    }

    .table-name {
        padding: 10px 20px 10px 20px;
        border: var(--border-width) var(--main-color) solid;
        margin-bottom: 5px;
        text-align: center;
        width: 80%;
        justify-self: end;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-name:hover {
        background-color: var(--second-color);
    }

    .table-name[data-table-selected="true"] {
        background-color: var(--second-color);
    }
}

.add-table-btn,
.add-database-btn,
.add-column-btn {
    padding: 10px 20px 10px 20px;
    border: var(--border-width) var(--main-color) solid;
    margin-bottom: 5px;
    justify-self: end;
    cursor: pointer;
    display: flex;
    justify-content: center;
    opacity: .2;
    transition: opacity .2s ease;
}

.add-table-btn {
    width: 80%;
}

.add-database-btn,
.add-column-btn {
    width: 100%;
}

.add-table-btn:hover,
.add-database-btn:hover,
.add-column-btn:hover {
    opacity: 1;
}

.add-table-btn:active img,
.add-database-btn:active img,
.add-column-btn:active img {
    scale: .9;
}

.servers-list {}

.server-name,
.database-name {
    margin-bottom: 5px;
    border: var(--border-width) var(--main-color) solid;
    text-align: center;
    padding: 10px 20px 10px 20px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
}

.server-name:hover,
.database-name:hover {
    background-color: var(--second-color);
}

.server-name[data-selected="true"] {
    background-color: var(--main-color);
    color: white;
    cursor: auto;
}

.database-name[data-database-selected="true"] {
    background-color: var(--main-color);
    color: white;
}

.server-info-row {
    display: grid;
    gap: 15px;
    margin-bottom: 15px;
}

.row-1 {
    grid-template-columns: 1fr auto auto auto;

    .stats {
        height: 100%;
    }
}

.server-info {

    .icon {
        background-color: var(--bg-color);
        border: var(--main-color) var(--border-width) solid;
        border-left: none;
        aspect-ratio: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 35px;
        /* position: absolute; */
        top: calc(var(--border-width) * -1);
        transition: background-color .2s ease;
    }

    /* .icon.update {
        right: calc(var(--border-width) * -1 + (30px * 2) - 2 * var(--border-width));
    }

    .icon.restart {
        right: calc(var(--border-width) * -1 + (30px - var(--border-width)));
    }

    .icon.power {
        right: calc(var(--border-width) * -1);
    } */

    .icon:hover {
        background-color: var(--second-color);
    }
}

.server-status-card {
    background-color: var(--bg-color);
    border: var(--border-width) var(--main-color) solid;
    box-sizing: content-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .server-status {
        display: flex;
        align-items: center;
        background-color: var(--main-color);
        color: white;
        font-weight: bold;
        padding: 0 20px;
    }

    .server-card-stats {
        padding: 0 15px 15px 15px;
        display: flex;
        justify-content: space-between;
    }
}

.card-top-bar {
    display: flex;
    justify-content: space-between;
    margin: -4px -4px 0 -4px;
}

.card-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    padding: 0 20px;
    width: fit-content;
    height: 35px;
    border: var(--border-width) var(--main-color) solid;
}

.card-content {
    padding: 30px 45px;
}

.stats {
    background-color: var(--bg-color);
    border: var(--border-width) var(--main-color) solid;
    text-align: center;
    aspect-ratio: 1;
    min-width: 250px;
    position: relative;
    padding: 15px;
    display: flex;
    flex-direction: column-reverse;


    h1 {
        font-size: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.traffic-card {
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);
    height: fit-content;

    .card-content {
        display: flex;
        overflow: auto;
    }

    .graph {
        width: 100%;
        min-width: 500px;
        max-width: 2000px;
        display: flex;
    }

    .graph-numbers {
        margin-right: 15px;
    }
}

.activity-card {
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);
    min-height: 400px;
}

.graph-point[data-level="0"] {
    fill: var(--second-color);
}

.graph-point[data-level="1"] {
    fill: var(--graph-point-1);
    transition: fill .5s ease 1s;
}

.graph-point[data-level="2"] {
    fill: var(--graph-point-2);
    transition: fill .5s ease .8s;
}

.graph-point[data-level="3"] {
    fill: var(--graph-point-3);
    transition: fill .5s ease .5s;
}

.login-screen {
    background-color: var(--bg-color);
    height: 100vh;
    align-content: center;
    justify-items: center;
    transition: opacity .8s ease;
    background-color: var(--bg-color);
    opacity: 0;

    .logo {
        margin-bottom: 30px;
    }

    .login-fields {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 260px;
    }

    input {
        all: unset;
        outline: var(--border-width) var(--main-color) solid;
        padding: 10px 20px 10px 20px;
        text-align: center;
    }
}

#logo{
    transition: transform .9s var(--animation-behavior);
}

#logo[data-auth="true"] {
    /* transform: rotate(180deg); */
    .logo-half.left {
        transform: translateX("10px");
    }

    .logo-half.rigth {
        transform: translateX("-10px");
    }
}

#logo[data-auth="false"] {
    /* transform: rotate(0deg); */
    .logo-half.rigth,
    .logo-half.left {
        transform: translateX("0");
    }
}

.logo-half {
    transition: transform 1s var(--animation-behavior);
}

/* .login-screen[data-state="open"] {
    display: block;
}

.login-screen[data-state="closed"] {
    display: none;
} */

.file-viewer-backdrop {
    content: "";
    z-index: var(--level-2);
    background-color: #000b166c;
    position: fixed;
    inset: 0 0 0 0;
    align-content: center;
    justify-items: center;
}

.file-viewer-backdrop[data-state="closed"] {
    display: none;
}

.file-viewer-backdrop[data-state="open"] {
    display: block;
}

.file-viewer {
    position: relative;
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);
    padding: 50px;
    height: 80%;
    width: 1000px;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.233);
    z-index: var(--level-3);

    .card-title {
        position: absolute;
        left: calc(-1 * 4px);
        top: calc(-1 * 4px);
        height: 44px;
    }

    .file-section {
        height: 100%;
        width: 100%;
        background-color: var(--second-color);
        overflow: auto;
        display: flex;

        img {
            /* margin:auto centers the image while it fits, but collapses to 0
               once it is zoomed past the container so every edge stays
               reachable by scrolling (justify-content:center would clip the
               top/left overflow). flex-shrink:0 keeps the zoomed size. */
            margin: auto;
            flex: 0 0 auto;
            background-color: var(--bg-color);
        }

        video {
            margin: auto;
            flex: 0 0 auto;
            max-width: 100%;
            max-height: 100%;
            background-color: var(--bg-color);
        }

        audio {
            margin: auto;
            flex: 0 0 auto;
            width: 80%;
        }
    }

    .viewer-icons {
        position: absolute;
        right: calc(-1 * 3px);
        top: calc(-1 * 3px);
        display: flex;
    }

    .zoom-icons {
        position: absolute;
        right: calc(-1 * 4px);
        bottom: calc(-1 * 4px);
        display: flex;
    }

    .zoom-value {
        border-top: var(--border-width) var(--main-color) solid;
        border-bottom: var(--border-width) var(--main-color) solid;
        justify-items: center;
        align-content: center;
        padding: 0 15px;
    }
}

.notification-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--selected-color);
    z-index: -2;
    width: 0%;
    width: var(--notification-progress);
    transition: width 5s linear;
}

/* .notification-box::before[data-hidden="true"]{
    width: 0%;
}/*/

.notification-box[data-hidden="false"]::before {
    width: 100%;
}

.toast-section {
    font-family: sora;
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 15px;
    bottom: 30px;
    right: 30px;
    z-index: 100;
}

.notification-box {
    background-color: var(--bg-color);
    border: solid var(--border-width) var(--main-color);
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 15px;
    padding: 20px;
    width: 400px;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.233);
    transition: transform .8s ease;
    overflow: hidden;

    .message {
        text-align: center;
    }

    .icon {
        all: unset;
        height: 36px;
        width: 36px;
        box-sizing: border-box;
        background-color: var(--bg-color);
        outline: solid var(--border-width) var(--main-color);

        img {
            width: 100%;
            height: 100%;
        }
    }

    .notification-close-btn {
        position: absolute;
        top: 0;
        right: 0;
        outline: solid var(--border-width) var(--main-color);
        cursor: pointer;
        width: 20px;
        background-color: var(--bg-color);
        transition: background-color .8s var(--animation-behavior);
    }

    .notification-close-btn:hover {
        background-color: var(--second-color);
    }
}

.notification-box[data-hidden="true"] {
    transform: translateX(calc(100% + 60px));
}

.notification-box[data-hidden="false"] {
    transform: translateX(0);
}

/*======== DASHBOARD =============================================*/
.dashboard {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.dashboard-stat {
    padding: 20px 15px 15px 15px;
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease;

    h1 {
        font-size: 56px;
        line-height: 1.2;
    }
}

.dashboard-stat:hover {
    background-color: var(--second-color);
}

.dashboard-cards {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 15px;
    flex: 1;
    /* lets the cards scroll instead of stretching the page */
    min-height: 0;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 0;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);
}

/* As tall as its content, leaving the rest of the column to the card next to it */
.dashboard-card.dashboard-card-fit {
    flex: none;
    max-height: 50%;
}

.dashboard-card-link {
    cursor: pointer;
    font-weight: normal;
    transition: background-color .2s ease;
}

.dashboard-card-link:hover {
    background-color: var(--second-color);
}

.dashboard-card-content {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

.dashboard-subtitle {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: bold;
}

.dashboard-subtitle:not(:first-child) {
    margin-top: 20px;
}

.dashboard-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color .2s ease;

    .server-status-led {
        margin-left: 0;
        flex-shrink: 0;
    }
}

.dashboard-row:hover {
    background-color: var(--second-color);
}

/* A disk: name and load on one line, its capacity bar on the next */
.dashboard-storage-row {
    flex-wrap: wrap;
    row-gap: 4px;

    /* Small blocks over the whole width of the row: the columns share it, the blocks stay square */
    .storage-blocks {
        flex-basis: 100%;
        margin-top: 0;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: 1fr;
        gap: 2px;
    }

    .storage-block {
        aspect-ratio: 1;
    }
}

.dashboard-row-color {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.dashboard-row-name {
    flex: 1;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-row-detail {
    opacity: .4;
    font-size: 13px;
    white-space: nowrap;
}

.dashboard-empty {
    padding: 10px 12px;
    opacity: .4;
}

/*======== STORAGE ===============================================*/
.storage {
    height: 100%;
    overflow: auto;
}

.storage-disks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.storage-card {
    position: relative;
    padding: 12px 18px 18px 18px;
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);

    h1 {
        font-size: 32px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* room for the pen */
        padding-right: 30px;
    }

    /* the root folder, after the name */
    h1 span {
        margin-left: 12px;
        font-size: 1rem;
        font-weight: normal;
        opacity: .4;
    }

    .icon {
        position: absolute;
        top: calc(-1 * var(--border-width));
        right: calc(-1 * var(--border-width));
    }
}

/* Two rows of blocks, filled column by column */
.storage-blocks {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 16px);
    grid-auto-columns: 16px;
    gap: 5px;
    margin-top: 10px;
}

.storage-block[data-filled="false"] {
    background-color: var(--second-color);
}

.storage-block[data-filled="true"] {
    background-color: var(--main-color);
}

.storage-add {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    cursor: pointer;
    transition: background-color .2s ease;

    img {
        height: 1.2rem;
    }
}

.storage-add:hover {
    background-color: var(--second-color);
}

#storage-delete-btn {
    margin-right: auto;
}

/*======== CALENDAR ==============================================*/
.calendar-section {
    display: flex;
    gap: 10px;
    height: 100%;
}

.mini-calendar {
    border: var(--border-width) var(--main-color) solid;
    width: 250px;
    height: fit-content;
    background-color: var(--bg-color);
}

.calendar {
    flex: 1;
}

.calendar-wrapper {
    margin-top: 10px;
    height: calc(100% - (var(--calendar-cell-height) * 2 + 10px));
    overflow: auto;
    border: calc(var(--border-width) - 1px) var(--main-color) solid;
}

.calendar-time-cell {
    padding: 0 15px;
    height: var(--calendar-cell-height);
    align-content: center;
}

.calendar-grid {
    position: relative;
    display: grid;
    grid-template-columns: auto repeat(7, 1fr);
    /* one row per 15 minutes; each hour cell spans 4 of them */
    grid-template-rows: repeat(96, calc(var(--calendar-cell-height) / 4));
    background-color: var(--bg-color);
}

.calendar-grid-cell {
    grid-row: span 4;
    border: solid 1px var(--main-color);
    transition: background-color .4s ease;
}

.calendar-grid-cell:not(.calendar-time-cell):hover {
    background-color: var(--second-color);
}

/* Absolute inside the grid: its box is the grid area set by grid-row/grid-column,
   and it stays out of the auto-placement of the hour cells.
   Inset by the cells' 1px border so the grid lines around the task stay visible. */
.calendar-task {
    position: absolute;
    inset: 1px;
    padding: 5px 8px;
    background-color: var(--main-color);
    color: white;
    overflow: hidden;
    cursor: pointer;
    transition: transform .4s ease;
}

.calendar-task:hover {
    transform: translateY(5px);
}

.calendar-day[data-current-day="true"] {
    background-color: var(--main-color);
    color: white;
}

.calendar-day {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;

    strong {
        font-size: 1.2em;
    }
}

.calendar-day-row {
    border: var(--border-width) var(--main-color) solid;
    border-top: none;
    display: grid;
    grid-template-columns: auto repeat(7, 1fr);
    background-color: var(--bg-color);
}

.calendar-month {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--calendar-cell-height);
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--second-color);
}

.calendar-task-name {
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-task-time {
    font-size: 11px;
    white-space: nowrap;
}

/*======== MINI CALENDAR =========================================*/
.mini-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    padding-left: 12px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: var(--border-width) var(--main-color) solid;
    background-color: var(--second-color);
}

.mini-calendar-arrows {
    display: flex;
    height: 100%;
}

.mini-calendar-arrow {
    height: 100%;
    width: 35px;
    padding: 9px;
    cursor: pointer;
    border-left: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);
    transition: background-color .2s ease;
}

.mini-calendar-arrow:hover {
    background-color: var(--second-color);
}

.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 6px;
}

.mini-calendar-day-label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    font-size: 11px;
    font-weight: bold;
}

.mini-calendar-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    aspect-ratio: 1;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.mini-calendar-cell:hover {
    background-color: var(--second-color);
}

.mini-calendar-cell[data-current-day="true"] {
    background-color: var(--main-color);
    color: white;
}

.mini-calendar-cell[data-selected="true"] {
    outline: solid 2px var(--main-color);
    outline-offset: -2px;
    font-weight: bold;
}

.mini-calendar-cell[data-current-day="true"][data-selected="true"] {
    text-decoration: underline;
}

.mini-calendar-cell[data-empty="true"] {
    pointer-events: none;
}

.mini-calendar-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    height: 4px;
}

.mini-calendar-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}

/*======== CALENDAR TASK BOX =====================================*/
.task-box-backdrop {
    position: fixed;
    inset: 0 0 0 0;
    z-index: var(--level-1);
    background-color: #000b166c;
    justify-content: center;
    align-items: center;
}

.task-box-backdrop[data-open="true"] {
    display: flex;
}

.task-box-backdrop[data-open="false"] {
    display: none;
}

.task-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 460px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    padding: 65px 30px 25px 30px;
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.233);
}

.task-box>.card-title {
    position: absolute;
    left: calc(-1 * var(--border-width));
    top: calc(-1 * var(--border-width));
    height: 44px;
}

.task-box>.icon {
    position: absolute;
    top: calc(-1 * var(--border-width));
    right: calc(-1 * var(--border-width));
}

.task-box-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: auto;
    /* room for the fields' invalid outline, which the scroll box would clip */
    padding: 2px;
}

.task-box-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.task-box-row.two-cells {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
}

.task-box-row.two-cells>div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.task-box label {
    font-size: 12px;
    font-weight: bold;
}

.task-box label.task-box-inline-label {
    font-size: 1rem;
    font-weight: normal;
}

.task-box input:not([type="color"]),
.task-box select,
.task-box textarea {
    width: 100%;
    padding: 10px 15px;
    background-color: var(--second-color);
    color: var(--main-color);
    border: none;
    border-radius: 0;
    outline: none;
    font-family: sora;
    font-size: 1rem;
}

.task-box textarea {
    height: 80px;
    resize: none;
}

.task-recurrence {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    border: var(--border-width) var(--second-color) solid;
}

.task-box [data-hidden="true"] {
    display: none;
}

.task-weekdays {
    display: flex;
    gap: 6px;
}

.task-weekday {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border: var(--border-width) var(--main-color) solid;
    transition: background-color .2s ease;
}

.task-weekday:hover {
    background-color: var(--second-color);
}

.task-weekday[data-selected="true"] {
    background-color: var(--main-color);
    color: white;
}

.task-colors {
    display: flex;
    gap: 10px;
    padding: 4px;
}

.task-color {
    position: relative;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.task-color[data-selected="true"] {
    outline: solid var(--border-width) var(--main-color);
    outline-offset: 2px;
}

.task-color-custom[data-selected="false"] {
    background-image: conic-gradient(#F82D1A, #F8A81A, #00A63E, #1A82F8, #834FFF, #F82D1A);
}

.task-color-custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

.task-box-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}

.task-box-scope {
    display: none;
    margin-top: 25px;
    text-align: center;
}

.task-box-scope-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;

    /* the three buttons must fit on one line inside the details box */
    .button {
        padding: 10px 12px;
        white-space: nowrap;
    }
}

/* Modes: "create" and "edit" show the form (.task-box), "details" and "delete-scope" the details (.box) */
.task-box-backdrop[data-mode="details"],
.task-box-backdrop[data-mode="delete-scope"] {
    .task-box {
        display: none;
    }
}

.task-box-backdrop[data-mode="create"],
.task-box-backdrop[data-mode="edit"] {
    .box {
        display: none;
    }
}

.task-box-backdrop[data-mode="delete-scope"] {

    .task-details,
    .task-tags {
        pointer-events: none;
        opacity: .3;
    }

    .task-box-scope {
        display: block;
    }
}

.box {
    position: relative;
    border: var(--border-width) var(--main-color) solid;
    background-color: var(--bg-color);
    padding: 50px;
    width: 460px;
    max-width: calc(100vw - 40px);
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.233);
    z-index: var(--level-3);

    .box-title {
        position: absolute;
        left: calc(-1 * 4px);
        top: calc(-1 * 4px);
        min-height: 44px;
        max-width: 50%;
        border: var(--border-width) var(--main-color) solid;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        padding: 0 20px;
    }

    .box-title-color {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .box-icons {
        position: absolute;
        right: calc(-1 * 3px);
        top: calc(-1 * 3px);
        display: flex;
    }
}

.task-details{
    padding-top: 30px;
    min-height: 150px;

    /* keeps the description's line breaks, and long words inside the box */
    p {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .date,
    .time {
        opacity: .4;
    }

    .date {
        margin-top: .3em;
    }
}

.task-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag{
    font-size: 12px;
    padding: .8em 2.3em;
    color: white;
    background-color: var(--main-color);
}