/* companies */

#companies {

}

#companiesNote {
    color: #7c7c7c;
    font-size: 14px;
    margin-bottom: 10px;
}

#companiesSearch {
    width: 100%;
    margin-bottom: 10px;
}

#companiesTable {
}

.companiesTableRow {

}

.companiesTableRow.hidden {
    display: none;
}

.companiesTableRowDelete {
    background-color: darkred;
}

/* New Form */

#new {

}

#newForm {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 10px;
    column-gap: 10px;
    align-items: center;
    max-width: 600px;
}

#newFormBillingGreeting {

}

#newFormSave {
    grid-column: span 2;
}

#newFormReferredBy {
    grid-column: span 2;
    border-top: 2px solid var(--light-orange);
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "title title title"
        "contact contact contact"
        "rate start end";
    gap: 10px;
    align-items: center;
}

#newFormReferredByTitle {
    grid-area: title;
    font-weight: 700;
}

#newFormReferredByContact {
    grid-area: contact;
}

#newFormReferredByCommissionPerHour {
    grid-area: rate;
}

#newFormReferredByStartDate {
    grid-area: start;
}

#newFormReferredByEndDate {
    grid-area: end;
}

#editFormReferredBy {
    grid-column: span 2;
    border-top: 2px solid var(--light-orange);
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "title title title"
        "contact contact contact"
        "rate start end";
    gap: 10px;
    align-items: center;
}

#editFormReferredByTitle {
    grid-area: title;
    font-weight: 700;
}

#editFormReferredByContact {
    grid-area: contact;
}

#editFormReferredByCommissionPerHour {
    grid-area: rate;
}

#editFormReferredByStartDate {
    grid-area: start;
}

#editFormReferredByEndDate {
    grid-area: end;
}

/* stack the referred-by grid on mobile — three columns of date/number inputs
   overflow narrow viewports and shift the whole page horizontally */
@media (max-width: 600px) {
    #newFormReferredBy,
    #editFormReferredBy {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "contact"
            "rate"
            "start"
            "end";
    }
}


/* Edit */

#edit {
    padding: 10px;
}

#editContent {
    background-color: white;
    padding: 20px;
    margin: auto;
    max-width: 700px;
    width: 100%;
    border-radius: 6px;
    border: 4px solid var(--light-orange);
}

#editForm {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 10px;
    column-gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

#editFormBillingGreeting {

}

#editFormSave {
    grid-column: span 2;
}

#editClose {
    text-decoration: underline;
}