/* companies */

#companies {

}

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

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

#companiesTable {
}

.companiesTableRow {

}

.companiesTableRow.hidden {
    display: none;
}

/* 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"
        "note note note"
        "rate start end";
    gap: 10px;
    align-items: center;
}

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

#newFormReferredByContact {
    grid-area: contact;
}

#newFormReferredByNote {
    grid-area: note;
    background-color: #fff5ee;
    border-left: 3px solid var(--orange);
    padding: 8px 12px;
    color: #555;
    font-size: 13px;
    white-space: pre-wrap;
}

#newFormReferredByNote:empty {
    display: none;
}

#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;
}

#newFormRecurringLines {
    grid-column: span 2;
    border-top: 2px solid var(--light-orange);
    padding-top: 10px;
    display: grid;
    row-gap: 10px;
}

#newFormRecurringLinesTitle {
    font-weight: 700;
}

#newFormRecurringLinesNote {
    color: #555;
    font-size: 13px;
}

#newFormRecurringLinesList {
    display: grid;
    row-gap: 10px;
}

.newFormRecurringLinesListRow {
    display: grid;
    grid-template-columns: 1fr 80px 100px auto;
    column-gap: 10px;
    align-items: center;
}

.newFormRecurringLinesListRowRemove {
    width: auto;
    background-color: #888;
}

#newFormRecurringLinesAdd {
    width: auto;
    justify-self: start;
}

/* 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";
    }

    .newFormRecurringLinesListRow {
        grid-template-columns: 1fr;
    }
}