*
{
    box-sizing: border-box;
}

#appTitle
{
    display: inline-block;
    font-size: 150%;
    margin-bottom: 1rem;
}

#appVersion
{
    display: inline-block;
    float: right;
}

#credential_screen
{
    &>*
    {
        width: 100%;
    }
    
    input
    {
        margin-bottom: 1rem;
    }
    
    button
    {
        padding: .5rem;
    }
}

#commands_div
{
    margin-bottom: 1rem;
    
    select,input,button
    {
        font-size: 120%;
    }
}

#entries_table
{
    width: 100%;
    border-collapse: collapse;
    
    tr>*
    {
        border: 1px solid gray;
        padding: .25rem;
    }

    tr:hover
    {
        .Id
        {
            background-color: lightblue;
        }
    }
    
    tr.ARCHIVED
    {
        background-color: lightgray;
    }

    tr.NEW
    {
        background-color: lightgreen;
    }

    tr.ARCHIVED .ArchiveButton,
    tr:not(.ARCHIVED) .DisarchiveButton
    {
        display: none;
    }
    
    .Id,
    .Creation,
    .Date,
    .Reference,
    .Bordereau,
    .Delivery,
    .Customer,
    .Value,
    .Actions
    {
        width: 1rem;
        white-space: nowrap;
    }

    .Id
    {
        text-align: right;
        font-weight: bold;
    }
    
    .Reference>input
    {
        width: 16rem;
    }

    .Value>input
    {
        width: 4rem;
        text-align: right;
    }

    .Reason>textarea
    {
        width: 100%;
    }
    
    .Actions>button
    {
        width: auto;
        padding: 1rem .5rem;
        cursor: pointer;
    }

    th.Actions>button
    {
        width: 100%;
        padding: .5rem;
    }
}

body[hide-archived=true] tr.ARCHIVED
{
    display: none;
}

tr[hide-creation=true]
{
    display: none;
}

#entries_count,
#entries_totalValue
{
    text-align: right;
}

input,textarea,select
{
    outline: none;
    border: none;
    border-bottom: 1px solid black;
    resize: vertical;
}

#notification
{
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem;
    
    &.SUCCESS
    {
        color: white;
        background-color: green;
    }
    
    &.SHOW
    {
        display: inline-block;
    }
}