/* =========================================================
   RESET
========================================================= */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

}

body{

    font-family:'Inter',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow:hidden;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

a{

    color:inherit;
    text-decoration:none;

}

button,
input{

    font:inherit;

}

html body input[type="number"]{

    color-scheme:dark;
    padding-right:44px !important;
    cursor:text;
    background-color:var(--bg) !important;
    background-image:
        linear-gradient(var(--border),var(--border)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M8 2 3 7h10L8 2Z' fill='%2394a3b8'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M8 8 3 3h10L8 8Z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat,no-repeat,no-repeat !important;
    background-position:calc(100% - 38px) center,calc(100% - 12px) calc(50% - 7px),calc(100% - 12px) calc(50% + 7px) !important;
    background-size:1px 26px,16px 10px,16px 10px !important;

}

:root[data-theme="light"] html body input[type="number"]{

    color-scheme:light;

}

html body input[type="number"]::-webkit-inner-spin-button,
html body input[type="number"]::-webkit-outer-spin-button{

    opacity:0;
    width:0;
    margin:0;
    -webkit-appearance:none;
    appearance:none;

}

html body input[type="number"].number-spinner-hover{

    cursor:pointer;

}

html body input[type="number"]:focus{

    background-image:
        linear-gradient(rgba(var(--primary-rgb),.45),rgba(var(--primary-rgb),.45)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M8 2 3 7h10L8 2Z' fill='%2394a3b8'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M8 8 3 3h10L8 8Z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;

}

html body input[type="number"].number-spinner-hover-up,
html body input[type="number"].number-spinner-hover-up:focus{

    background-image:
        linear-gradient(rgba(var(--primary-rgb),.45),rgba(var(--primary-rgb),.45)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M8 2 3 7h10L8 2Z' fill='%233b82f6'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M8 8 3 3h10L8 8Z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;

}

html body input[type="number"].number-spinner-hover-down,
html body input[type="number"].number-spinner-hover-down:focus{

    background-image:
        linear-gradient(rgba(var(--primary-rgb),.45),rgba(var(--primary-rgb),.45)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M8 2 3 7h10L8 2Z' fill='%2394a3b8'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M8 8 3 3h10L8 8Z' fill='%233b82f6'/%3E%3C/svg%3E") !important;

}

/* =========================================================
   APP
========================================================= */

.app{

    width:100%;
    height:100vh;

    display:flex;
    flex-direction:column;

}


/* =========================================================
   TOPBAR
========================================================= */

.topbar{

    height:var(--topbar-height);

    flex-shrink:0;

}


/* =========================================================
   BODY
========================================================= */

.app-body{

    flex:1;

    display:flex;

    overflow:visible hidden;

}


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

.sidebar{

    width:250px;
    min-width:250px;

    display:flex;
    flex-direction:column;

    flex-shrink:0;

    overflow-x:visible;
    overflow-y:auto;

    transition:
        width .25s ease,
        min-width .25s ease;

}

.sidebar-collapsed .sidebar,
html.sidebar-collapsed .sidebar{

    width:76px;
    min-width:76px;

}


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

.app-content{

    flex:1;

    display:flex;
    flex-direction:column;

    min-width:0;

    overflow:hidden;

}


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

.page-content{

    flex:1;

    overflow:auto;

    padding:16px 32px 32px;
    position:relative;

}

html.app-ready .page-content{

    opacity:1;
    transform:translateY(0);
    transition:
        opacity .28s ease,
        transform .28s cubic-bezier(.22,1,.36,1);

}

html.app-ready.page-entering .page-content{

    opacity:0;
    transform:translateY(14px);

}

html.page-leaving .page-content{

    pointer-events:none;
    transition:
        opacity .16s ease,
        transform .16s cubic-bezier(.4,0,.2,1);

}

html.page-leaving .page-content > *{

    opacity:0;
    transform:translateY(6px);
    transition:
        opacity .16s ease,
        transform .16s cubic-bezier(.4,0,.2,1);

}

html:not(.app-ready) .sidebar,
html:not(.app-ready) .nav-item,
html:not(.app-ready) .company-card,
html:not(.app-ready) .app-content{

    transition:none !important;

}

html.page-loading{

    cursor:progress;

}

.is-reordering{

    pointer-events:none;

}

.is-reordering-item{

    position:relative;
    z-index:2;
    will-change:transform;

}

@media (prefers-reduced-motion:reduce){

    html.app-ready .page-content,
    html.app-ready.page-entering .page-content,
    html.page-leaving .page-content,
    .is-reordering-item{

        opacity:1;
        transform:none;
        transition:none;
        animation:none;

    }

}

@media (max-width:900px){

    body{

        overflow:hidden;

    }

    .app{

        height:100vh;
        height:100svh;

    }

    .app-body{

        flex-direction:column;

    }

    .sidebar{

        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        z-index:95;

        width:100%;

        min-width:0;

        height:calc(76px + env(safe-area-inset-bottom, 0px));

        max-height:calc(76px + env(safe-area-inset-bottom, 0px));

        order:2;

        overflow-x:auto;

        overflow-y:hidden;

        scroll-padding-inline:calc(50vw - 60px);

    }

    .sidebar-collapsed .sidebar,
    html.sidebar-collapsed .sidebar{

        width:100%;

        min-width:0;

    }

    .app-content{

        order:1;

        min-height:0;

    }

    .page-content{

        padding:14px 18px 18px;

    }

}

@media (max-width:560px){

    .page-content{

        padding:12px 12px 18px;

    }

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--scrollbar-track);

}

::-webkit-scrollbar-thumb{

    background:var(--scrollbar-thumb);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--scrollbar-thumb-hover);

}


/* =========================================================
   SELECTION
========================================================= */

::selection{

    background:var(--primary);

    color:#fff;

}