/* Tables. table.t is the office's list; table.bt the estimate builder's rows of fields;
   .rows the customer's priced lines. */

table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font-family: var(--display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-2xs); color: var(--muted); padding: 7px 10px; border-bottom: 1.5px solid var(--ink); }
table.t td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t .r { text-align: right; }
table.t td.m { font-family: var(--mono); font-stretch: 87.5%; font-size: 12.5px; white-space: nowrap; }
.staff table.t a { color: var(--ink); }
.staff table.t tfoot td { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; font-size: var(--text-s); color: var(--muted); }
.staff table.t tr.tot td { color: var(--ink); border-top: 1.5px solid var(--ink); padding-top: 8px; }
@media (max-width: 900px) { table.t .hide-sm { display: none; } }

/* A table that scrolls sideways on a phone rather than clipping. */
.staff .tscroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

.staff table.bt { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.staff table.bt th { text-align: left; font-family: var(--display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-2xs); color: var(--muted); padding: 2px 4px; }
.staff table.bt td { padding: 2px 4px; }
.staff table.bt .field { padding: 5px 7px; font-size: var(--text-s); }
.staff table.bt td.n, .staff table.bt th.n { width: 74px; }
.staff table.bt td:last-child { width: 24px; }

.customer .rows { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14.5px; }
.customer .rows td { padding: 8px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.customer .rows-qty { color: var(--muted); white-space: nowrap; font-size: var(--text-s); }
.customer .rows-amount { text-align: right; white-space: nowrap; font-weight: 600; color: var(--black); }
.customer .rows-total td { border-bottom: 0; border-top: 1.5px solid var(--black); font-weight: 700; color: var(--black); }