:root
{
    --box-shadow-mat1: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    --box-shadow-mat2: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    --box-shadow-mat3: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    --box-shadow-mat4: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    --box-shadow-mat5: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    --box-shadow-mat1b: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    --box-shadow-mat2b: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

    --accent: #1a73e8;
    --accent-hover: #1557b0;
    --green: #1e8e3e;
    --red: #d93025;
    --orange: #e8710a;
    --bg: #f8f9fa;
    --border: #dadce0;
    --text: #202124;
    --text-light: #5f6368;
}

.navIcon { height: 2.6em; vertical-align: middle; }

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    font-family: 'Segoe UI', sans-serif;

    &:focus {outline: none;}
}

html,body
{
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    color: var(--text);
}

body
{
    padding-top: 4rem;
}

/* NAV BAR */
#navbar
{
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5rem;
    padding: 0 1.5rem;
    background-color: white;
    box-shadow: var(--box-shadow-mat1);
    z-index: 200;
    gap: .5rem;

    #navTitle
    {
        font-weight: 700;
        font-size: 1rem;
        color: var(--accent);
        margin-right: 1.5rem;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    .navLink
    {
        cursor: pointer;
        padding: .4rem .8rem;
        border-radius: .25rem;
        font-size: .85rem;
        font-weight: 500;
        color: var(--text-light);
        text-decoration: none;
        transition: all .15s ease;
        white-space: nowrap;

        &:hover { background-color: #e8eaed; color: var(--text); }
        &.active { background-color: #e8f0fe; color: var(--accent); }
    }

    #navRight
    {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: .5rem;

        #navUser
        {
            font-size: .8rem;
            color: var(--text-light);
        }
    }
}

/* BUTTONS */
button
{
    cursor: pointer;
    border: none;
    color: white;
    background-color: var(--accent);
    padding: .4rem .75rem;
    border-radius: .25rem;
    font-size: .8rem;
    font-weight: 500;
    transition: all ease-in-out .15s;
    box-shadow: var(--box-shadow-mat1b);

    &:hover
    {
        background-color: var(--accent-hover);
        box-shadow: var(--box-shadow-mat2b);
    }

    &.GREEN { background-color: var(--green); &:hover { background-color: #1a7c37; } }
    &.RED { background-color: var(--red); &:hover { background-color: #c5221f; } }
    &.ORANGE { background-color: var(--orange); &:hover { background-color: #d56309; } }
    &.SMALL { padding: .2rem .5rem; font-size: .7rem; }
    &.OUTLINE { background: none; color: var(--accent); border: 1px solid var(--border); &:hover { background-color: #e8f0fe; } }
}

/* INPUTS */
input, select, textarea
{
    font-size: .85rem;
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: .25rem;
    background: white;
    transition: border-color .15s ease;

    &:hover { border-color: #bdc1c6; }
    &:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,115,232,.15); }
}

textarea
{
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: .75rem;
    resize: vertical;
}

/* PANELS */
.panel
{
    background: white;
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--box-shadow-mat1);

    .panelTitle
    {
        font-size: .8rem;
        font-weight: 700;
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .75rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--border);
    }
}

/* TABLES */
table.dataTable
{
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;

    th
    {
        background-color: #f1f3f4;
        padding: .5rem .4rem;
        text-align: left;
        font-weight: 600;
        font-size: .7rem;
        text-transform: uppercase;
        color: var(--text-light);
        border-bottom: 2px solid var(--border);
        white-space: nowrap;
    }

    td
    {
        padding: .4rem;
        border-bottom: 1px solid #e8eaed;
        vertical-align: top;
    }

    tr:hover td { background-color: #f8f9fa; }
}

/* DIALOG */
dialog
{
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border: none;
    padding: 1.5rem 2rem;
    border-radius: .5rem;
    box-shadow: var(--box-shadow-mat4);
    font-size: .9rem;
    text-align: center;

    &::backdrop { background: rgba(0,0,0,.3); }
}

/* PAGE CONTENT */
.pageContent
{
    padding: 1rem 1.5rem;
}

/* STATUS BADGES */
.badge
{
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 1rem;
    font-size: .7rem;
    font-weight: 600;

    &.ON { background: #e6f4ea; color: var(--green); }
    &.OFF { background: #fce8e6; color: var(--red); }
    &.WARN { background: #fef7e0; color: var(--orange); }
}

/* BUTTON GROUP */
.btnGroup
{
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

/* FIELD ROW */
.fieldRow
{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;

    label
    {
        font-size: .8rem;
        font-weight: 500;
        color: var(--text-light);
        min-width: 8rem;
    }

    input, select { flex: 1; }
}