/* POLICE */
.audiowide-regular {
    font-family: "Audiowide", serif;
    font-weight: 400;
    font-style: normal;
}

.lato-regular {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: normal;
}

.lato-black {
    font-family: "Lato", serif;
    font-weight: 900;
    font-style: normal;
}

/* WIDTH & HEIGHT */
.h-10 {
    height: 10%;
}

.h-30 {
    height: 30%;
}    

.h-70 {
    height: 70%;
}        

.h-90 {
    height: 90%;
}

.h-60px {
    height: 60px;
}

.w-20 {
    width: 20%;
}

.w-30px {
    width: 30px;
}

/* TABLE */
table {
    border-collapse: collapse;
    border: 2px solid whitesmoke;
    font-family: sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
}        

th,
td {
    border: 1px solid whitesmoke;
    padding: 8px 10px;
}        

/* GLOBAL */
p {
    font-weight: bold;
    white-space: nowrap;
}            

.badge {
    font-size: 60%;
}            

img {
    width: 100px;
}            

body {
    height: 100vh;
}

.area-count {
    font-size: 75%;
}

.border-purple {
    border-color: #8000ff !important; /* Violet vif */
}


/* OUTBOUND - PICK LAYOUT
   The first column keeps its natural width.
   The remaining width is split exactly: Singles 70%, Multis 15%, Hazmat 15%. */
#pick-area {
    min-width: 0;
    min-height: 0;
}

#pick-area table {
    display: grid;
    grid-template-columns: max-content minmax(0, 14fr) minmax(0, 3fr) minmax(0, 3fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) 60px 60px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#pick-area thead,
#pick-area tbody,
#pick-area tr {
    display: contents;
}

#pick-area th,
#pick-area td {
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-right: 1px solid whitesmoke;
    border-bottom: 1px solid whitesmoke;
}

#pick-area tr > :last-child {
    border-right: 0;
}

#pick-area tbody tr:last-child > * {
    border-bottom: 0;
}