:root {
    --nav: #071f34;
    --ink: #102d44;
    --muted: #657a89;
    --green: #16825d;
    --line: #dce5e8;
    --bg: #f5f7f6;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    margin: 0;

    font:
        14px Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--ink);

    background: var(--bg);
}

button {
    font: inherit;

    cursor: pointer;
}


/* =========================================================
   SIDEBAR
========================================================= */

aside {
    position: fixed;

    inset:
        0
        auto
        0
        0;

    width: 245px;

    background: var(--nav);

    color: #dce7e6;

    display: flex;

    flex-direction: column;

    z-index: 20;

    transition:
        transform .22s ease,
        visibility .22s ease;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    height: 78px;

    padding: 18px;

    display: flex;

    align-items: center;

    gap: 12px;
}

.brand > b {
    font-size: 22px;

    background: #16825d;

    color: #fff;

    border-radius: 8px;

    padding: 9px 13px;
}

.brand span {
    font-weight: 800;
}

.brand small,
aside footer small {
    display: block;

    color: #89a2a5;

    font-size: 11px;

    margin-top: 3px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.group {
    color: #6e8b8d;

    font-size: 10px;

    letter-spacing: .16em;

    margin:
        18px
        18px
        7px;
}

.nav {
    width:
        calc(
            100% - 20px
        );

    margin:
        2px
        10px;

    border: 0;

    background: transparent;

    color: #bdd0d0;

    text-align: left;

    padding:
        10px
        13px;

    border-radius: 7px;
}

.nav:hover,
.nav.active {
    background: #123a48;

    color: #fff;
}

.nav span {
    float: right;

    background: #174b55;

    border-radius: 10px;

    padding:
        1px
        7px;
}


/* =========================================================
   SIDEBAR FOOTER
========================================================= */

aside footer {
    margin-top: auto;

    border-top:
        1px
        solid
        #173b4a;

    padding: 15px;

    display: flex;

    gap: 10px;

    align-items: center;
}

aside footer i,
main header i {
    background: #dfede8;

    color: #155c4a;

    border-radius: 50%;

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    font-style: normal;

    font-weight: 800;
}


/* =========================================================
   MAIN
========================================================= */

main {
    margin-left: 245px;

    min-height: 100vh;

    transition:
        margin-left
        .22s
        ease;
}


/* =========================================================
   HEADER
========================================================= */

main > header {
    height: 64px;

    background: #fff;

    border-bottom:
        1px
        solid
        var(--line);

    display: flex;

    align-items: center;

    padding:
        0
        26px;

    gap: 14px;

    position: sticky;

    top: 0;

    z-index: 10;
}

main > header span {
    font-weight: 700;
}

main > header button:first-of-type {
    margin-left: auto;

    width: 230px;

    text-align: left;

    color: #788c94;
}

main > header button {
    border:
        1px
        solid
        var(--line);

    background: #fff;

    border-radius: 8px;

    padding:
        9px
        12px;
}


/* =========================================================
   CONTENT
========================================================= */

#content {
    padding: 28px;

    max-width: 1500px;

    margin: auto;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.eyebrow {
    color: #1a8060;

    font-size: 11px;

    letter-spacing: .14em;

    font-weight: 800;
}

.page-head {
    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    align-items:
        flex-end;

    margin-bottom: 20px;
}

.page-head h1 {
    font:
        700
        29px
        Georgia,
        serif;

    margin:
        6px
        0;
}

.page-head p {
    color: var(--muted);

    margin: 0;

    max-width: 780px;
}


/* =========================================================
   ACTIONS
========================================================= */

.actions {
    display: flex;

    gap: 8px;
}

.primary {
    background:
        #157b5a
        !important;

    color:
        #fff
        !important;

    border-color:
        #157b5a
        !important;
}

.actions button,
.tabs button {
    border:
        1px
        solid
        var(--line);

    background: #fff;

    border-radius: 7px;

    padding:
        10px
        14px;
}


/* =========================================================
   KPI
========================================================= */

.kpis {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            1fr
        );

    gap: 10px;

    margin-bottom: 15px;
}

.kpi,
.card {
    background: #fff;

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

    border-radius: 9px;

    padding: 16px;
}

.kpi small {
    color: var(--muted);

    font-weight: 700;
}

.kpi strong {
    display: block;

    font:
        700
        22px
        Georgia,
        serif;

    margin:
        12px
        0
        5px;
}

.kpi em {
    font-style: normal;

    color: var(--green);

    font-size: 11px;
}


/* =========================================================
   GRID
========================================================= */

.grid {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr;

    gap: 14px;
}

.card h2 {
    font:
        700
        18px
        Georgia,
        serif;

    margin:
        0
        0
        4px;
}

.card > p {
    color: var(--muted);

    margin:
        0
        0
        14px;
}


/* =========================================================
   BAR CHART
========================================================= */

.bars {
    height: 190px;

    display: flex;

    align-items: end;

    gap: 13px;

    border-bottom:
        1px
        solid
        #a8b8bc;

    padding: 15px;
}

.bars div {
    flex: 1;

    display: flex;

    align-items: end;

    gap: 4px;

    height: 100%;

    position: relative;
}

.bars i,
.bars b {
    width: 45%;

    background: #1a8060;

    height:
        var(--a);

    border-radius:
        3px
        3px
        0
        0;
}

.bars b {
    background: #b7a36a;

    height:
        var(--b);
}

.bars span {
    position: absolute;

    bottom: -30px;

    font-size: 10px;
}


/* =========================================================
   TABLES
========================================================= */

.house-table {
    margin-top: 28px;

    width: 100%;

    border-collapse:
        collapse;
}

.house-table th,
.house-table td {
    text-align: left;

    padding: 12px;

    border-bottom:
        1px
        solid
        var(--line);
}

.house-table th {
    font-size: 10px;

    color: #647984;
}

.money {
    font-family:
        Consolas,
        monospace;

    font-weight: 700;
}

.profit {
    color: #147a56;
}

.list-table {
    width: 100%;

    border-collapse:
        collapse;

    background: #fff;

    border:
        1px
        solid
        var(--line);
}

.list-table th,
.list-table td {
    padding: 12px;

    border-bottom:
        1px
        solid
        var(--line);

    text-align: left;
}

.list-table th {
    background: #edf3f1;

    font-size: 10px;
}


/* =========================================================
   ALERTS
========================================================= */

.alert {
    padding:
        11px
        0;

    border-bottom:
        1px
        solid
        var(--line);
}

.alert b,
.alert small {
    display: block;
}

.alert small {
    color: var(--muted);

    margin-top: 3px;
}


/* =========================================================
   TABS
========================================================= */

.tabs {
    display: flex;

    gap: 8px;

    margin-bottom: 12px;

    overflow: auto;
}

.tabs button.active {
    background: #153d47;

    color: #fff;
}


/* =========================================================
   FORMS
========================================================= */

.form {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 15px;
}

.form label {
    font-weight: 700;
}

.form input,
.form select,
.form textarea {
    display: block;

    width: 100%;

    margin-top: 6px;

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

    border-radius: 7px;

    padding: 11px;

    background: #fff;
}

.form .wide {
    grid-column:
        1 / -1;
}

.form textarea {
    height: 90px;
}


/* =========================================================
   TAG
========================================================= */

.tag {
    background: #e2f2eb;

    color: #147955;

    padding:
        5px
        8px;

    border-radius: 7px;
}


/* =========================================================
   TOAST
========================================================= */

#toast {
    position: fixed;

    right: 20px;

    bottom: 20px;

    background: #123a48;

    color: #fff;

    padding:
        13px
        18px;

    border-radius: 8px;

    opacity: 0;

    transform:
        translateY(
            30px
        );

    transition: .2s;

    z-index: 99999;
}

#toast.show {
    opacity: 1;

    transform: none;
}


/* =========================================================
   SIDEBAR TOGGLE
========================================================= */

#globalSidebarToggle {
    position: fixed;

    top: 50%;

    left: 226px;

    transform:
        translateY(
            -50%
        );

    z-index: 100000;

    width: 38px;

    height: 56px;

    padding: 0;

    border:
        1px
        solid
        #d3dfe3;

    border-radius:
        0
        9px
        9px
        0;

    background: #fff;

    color: #102d44;

    font-size: 25px;

    font-weight: 700;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        2px
        2px
        8px
        rgba(
            0,
            0,
            0,
            .12
        );

    cursor: pointer;

    transition:
        left .22s ease,
        background .15s ease,
        color .15s ease;
}

#globalSidebarToggle:hover {
    background: #16825d;

    color: #fff;
}


/* =========================================================
   SIDEBAR HIDDEN
   Works on both HTML and BODY.
   This prevents flashing during refresh.
========================================================= */

html.sidebar-hidden aside,
body.sidebar-hidden aside {
    transform:
        translateX(
            -100%
        )
        !important;

    visibility:
        hidden
        !important;

    pointer-events:
        none
        !important;
}

html.sidebar-hidden main,
body.sidebar-hidden main {
    margin-left:
        0
        !important;
}

html.sidebar-hidden #globalSidebarToggle,
body.sidebar-hidden #globalSidebarToggle {
    left: 0;

    top: 50%;

    transform:
        translateY(
            -50%
        );

    width: 42px;

    height: 56px;

    border-radius:
        0
        9px
        9px
        0;
}

html.sidebar-hidden #content,
body.sidebar-hidden #content {
    max-width:
        none
        !important;

    width:
        100%
        !important;

    padding-left:
        28px;

    padding-right:
        28px;
}


/* =========================================================
   TABLE DISPLAY
========================================================= */

#content table {
    width: 100%;
}

#content th,
#content td {
    white-space: nowrap;
}

#content .table-wrap,
#content .table-container,
#content .record-table {
    overflow-x: auto;

    max-width: 100%;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .kpis {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }

}


@media (max-width: 720px) {

    aside {

        transform:
            translateX(
                -100%
            );

        visibility:
            hidden;

    }


    main {

        margin-left: 0;

    }


    #content {

        padding: 18px;

    }


    #globalSidebarToggle {

        left: 0;

        top: 50%;

        transform:
            translateY(
                -50%
            );

        width: 40px;

        height: 54px;

    }


    body:not(.sidebar-hidden) aside {

        transform:
            translateX(
                0
            );

        visibility:
            visible;

    }


    body:not(.sidebar-hidden)
    #globalSidebarToggle {

        left: 226px;

    }


    .kpis {

        grid-template-columns:
            1fr
            1fr;

    }


    .grid {

        grid-template-columns:
            1fr;

    }


    .page-head {

        display: block;

    }


    .actions {

        margin-top: 14px;

    }


    .form {

        grid-template-columns:
            1fr;

    }


    .form .wide {

        grid-column:
            auto;

    }


    main > header
    button:first-of-type {

        width: auto;

    }

}