@import "https://www.nerdfonts.com/assets/css/webfont.css";

:root {
    --text-color: #fff; /* Use white text color for dark mode */
    --background: #0a0a0a;
    --border-color: #777;
    --primary-color: #2d2d2d;
    --fail-color: #ff2222;
    --logout-color: #ff4f4f;

    --ease_custom: cubic-bezier(.09,.53,.29,.96);
    --font-family: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
    /* --nf-family: 'NerdFont', sans-serif; */

    /* Chart panel chrome (new — used by the redesigned status charts) */
    --chart-background: #141414;
    --chart-border-color: #262626;
    --crosshair-color: #999999;

    /* CPU — blues (Total / User / System), matching the CanvasJS reference */
    --cpu-total-color: #1976d2;
    --cpu-user-color: #64b5f6;
    --cpu-system-color: #2196f3;

    /* Memory — reds (Used / Buffers / Cached / Free) */
    --ram-used-color: #d32f2f;
    --ram-buffers-color: #f44336;
    --ram-cached-color: #e57373;
    --ram-free-color: #8d8d8d;

    /* Network — greens (Down / Up), same metrics as before, recolored */
    --net-down-color: #388e3c;
    --net-up-color: #81c784;
    --net-neutral-color: #777777;

    /* Disk — oranges, shared by the I/O chart (Write / Read) and the space pie */
    --disk-write-color: #ffb74d;
    --disk-read-color: #f57c00;
    --disk-used-color: #f57c00;
    --disk-free-color: #616161;

    --uptime-color: #ffea2d;
}

html, body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: var(--text-color);
    background-color: var(--background);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    width: 100%;
}

.topbar {
    display: flex;
    flex-direction: row;

    width: calc(100vw - 45px);
    border-bottom: 1px solid var(--border-color);
    height: 70px;

    align-items: center;
    /* padding: 0 20px; */
    padding-left: 15px;
    padding-right: 30px;

    gap: 15px;

    /* animation: topbarEntryAnim 0.5s var(--ease_custom) forwards; */
}

.topbar button {
    background-color: transparent;
    border: 0;
}

.topbar button:hover {
    cursor: pointer;
}

.topbar img {
    height: 50px;
}

.topbar .title {
    font-size: 18px;
}

.divider {
    flex: 1
}

.username {
    position: relative;
}

.username button {
    font-family: var(--font-family);
    background-color: transparent;
    border: 0;

    color: var(--text-color);
    font-size: 18px;
}

.username button:hover {
    cursor: pointer;
}

.usermenu {
    display: flex;
    flex-direction: column;
    position: absolute;

    width: 200px;
    /* height: 200px; */

    border: 1px solid var(--border-color);

    top: 80px;
    right: 20px;

    transform: translateY(0), translateX(0);

    transition: 0.2s var(--ease_custom);

    overflow: hidden;
}

.usermenu.hidden {
    transform: translateY(-50px) translateX(20px);

    opacity: 0;
    visibility: hidden;
}

.usermenu button,
.usermenu a {
    font-family: var(--font-family);
    width: calc(100% + 30px);
    font-size: 15px;
    background-color: transparent;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--text-color);

    margin-left: -30px;

    align-items: center;

    border: 0;
    height: 40px;

    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    text-decoration: none;

    transition: .25s var(--ease_custom);
}

.usermenu button .indicator,
.usermenu a .indicator {
    padding-right: 10px;
    opacity: 0;

    transition: .25s;
}

.usermenu button p,
.usermenu a p {
    margin: 0;
}

.usermenu button:hover,
.usermenu a:hover {
    width: 100%;
    margin-left: 0;

    cursor: pointer;

    background-color: var(--primary-color);
}

.usermenu button:hover .indicator,
.usermenu a:hover .indicator {
    opacity: 1;
}

.usermenu button .icon,
.usermenu a .icon {
    font-size: 18px;
}

.logout_btn {
    color: var(--text-color);
}

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

.viewport {
    display: flex;
    flex-direction: row; /* Containing sidebar and main viewport */

    height: calc(100vh - 71px);
    /* flex: 1; */
    width: 100vw;
}

.sidebar {
    width: 330px;
    border-right: 1px solid var(--border-color);

    background-color: var(--background);

    display: flex;
    flex-direction: column;
    padding: 20px;
}

.sidebar a {
    display: flex;
    flex-direction: row;

    align-items: center;

    padding: 20px;
    font-size: 16px;

    color: var(--text-color);
    text-decoration: none;
}

.sidebar .icon {
    margin-right: 10px;
}

.sidebar a div {
    width: 5px;
    height: 100%;
    margin-right: 20px;
    margin-left: -20px;
    background-color: transparent;
    /* border: 1px solid transparent; */

    transition: 0.2s;
}

.sidebar .selected {
    font-weight: bold;
}

.sidebar .selected div {
    margin-left: 0;
    background-color: var(--text-color);
}

.sidebar a:hover div {
    margin-left: 0;
    background-color: var(--border-color);
}

.view {
    flex: 1;
    height: calc(100vh - 71px);
}

.view iframe {
    height: 100%;
    width: 100%;
    border: 0;
}

@media (max-width: 767px) {
    /* Resize for phone users */
    .sidebar {
        /* transform: translateX(-330px); */
        margin-left: -371px;
        transition: .2s var(--ease_custom);
        opacity: 0;
    }

    .sidebar.open {
        transform: translateX(371px);
        opacity: 1;
    }
}