/* ONE TABLE FOR THE OFFICE LISTS. Letting agents and Bookings draw their
   tables from this one recipe, so the two pages read as one system and a
   change lands on both.

   A dark heading band with white sentence-case words; rows white and faint
   grey by turns, with no lines between them; nothing bold, nothing boxed,
   no shadow. A status is a coloured dot and
   plain words, not a pill. An empty cell shows a dash so a row reads as
   complete. The heading stays put as the list scrolls, and the whole row
   lights on hover because the whole row opens the record. */

.list-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;color:var(--ink);
  border:0;border-radius:0;box-shadow:none;overflow:visible}
/* THE HEADING IS A DARK BAND WITH WHITE WORDS, on every list, so the eye
   finds the top of a table at once and the columns read across it. */
table.list-table th{position:sticky;top:0;z-index:3;background:var(--sd-nav, #535166);color:#fff;padding:9px 10px;
  font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;text-align:left;
  white-space:nowrap;border-bottom:0;box-shadow:none}
table.list-table th:first-child{border-radius:8px 0 0 0}
table.list-table th:last-child{border-radius:0 8px 0 0}
table.list-table td:first-child{padding-left:10px}
table.list-table td:last-child{padding-right:10px}
.list-table th[data-sort]{cursor:pointer}
.list-table th[data-sort]:hover,.list-table th.sorted{background:#4B5970}
table.list-table th.n,table.list-table td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.list-table td{padding:9px 10px;font-size:13px;border-top:0;border-bottom:0;
  vertical-align:middle;background:#fff;line-height:1.3;color:var(--ink)}
table.list-table tbody tr:nth-child(even) td{background:#F7F6F8}
table.list-table tfoot td{border-top:1px solid var(--sd-line, #E5E3E7);font-weight:600;background:#fff}
.list-table tbody tr[data-open]:hover td,.list-table tbody tr[data-id]:hover td{background:#FAF8F7;cursor:pointer}
.list-table tbody tr:last-child td{border-bottom:0}
.list-table td b{font-weight:600;color:var(--ink)}
/* the second line in a cell: a phone under a name, a date under a status */
.list-table .sub{font-size:12px;color:var(--muted);margin-top:0;white-space:nowrap;font-weight:400}
/* an empty cell */
.list-table .none{color:#C4C1C8}
/* A STATUS IS A DOT AND WORDS. The pill was a block of colour on every row;
   a dot carries the same meaning at a fraction of the weight. */
.list-table .tag,#rbBody .list-table .tag{display:inline-flex;align-items:center;gap:7px;background:none;color:var(--ink);
  padding:0;border-radius:0;font-size:13px;font-weight:400;letter-spacing:0;white-space:nowrap}
.list-table .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#B9B6BE;flex:0 0 auto}
.list-table .tag.head::before,.list-table .tag.ok::before,#rbBody .list-table .tag.ok::before,#rbBody .list-table .tag.head::before{background:#2E9E5B}
.list-table .tag.branch::before,#rbBody .list-table .tag.branch::before{background:var(--sd-blue, #5683B8)}
.list-table .tag.warn::before,#rbBody .list-table .tag.warn::before{background:#E0A030}
.list-table .tag.off::before,#rbBody .list-table .tag.off::before{background:#D9534F}
.list-table .tag.quiet::before{background:#C9C6CE}
.list-table .tag.quiet{color:var(--muted)}
/* the sales list's own statuses */
.list-table .tag.pending::before{background:#E0A030}
.list-table .tag.due::before{background:#D9534F}
.list-table .tag.paid::before{background:#2E9E5B}
.list-table .tag.tbc::before,.list-table .tag.adjustment::before{background:#C9C6CE}
.list-table .tag.dup::before{background:#D9534F}

/* ---- THE FILTER BAR ABOVE A LIST, the same on every page. Controls sized
   to their words (34px tall, 13px type) rather than the 44px form boxes,
   and a clear gap between the bar and the table under it. ---- */
.bar select,.bar input[type=search],.bar input[type=text],.bar input[type=date],.toolbar select,.toolbar input[type=search],.toolbar input[type=date]{
  height:34px;padding:0 10px;font-size:13px;box-sizing:border-box;border-radius:7px}
.bar select{padding-right:26px;width:auto;max-width:240px}
.bar input[type=search]{width:auto;max-width:260px}
.bar .btn,.bar .btn-plain,.bar .row-btn,.toolbar .btn,.toolbar .btn-plain{height:34px;padding:0 14px;font-size:13px;box-sizing:border-box;line-height:32px}
.bar .btn-plain.small,.bar .row-btn{height:30px;line-height:28px;padding:0 10px;font-size:12.5px}
.bar .tick{font-size:12.5px;white-space:nowrap}
.bar .clear,.toolbar .count{font-size:12.5px}
.card > .bar + .list-table,.card > .bar + * .list-table,.card > .bar + .clear + * .list-table,.card > .bar + p + * .list-table,
.head-line + .list-table,.head-line + * .list-table,.toolbar + * .list-table{margin-top:14px}
/* a footer of totals under a list: the same padding as the rows, so the
   columns stay in line, and one rule above it */
table.list-table tfoot td{padding:8px 10px;color:var(--soft);font-size:12.5px;border-top:1px solid var(--sd-bg, #F4F3F5);background:#fff;white-space:nowrap}
table.list-table tfoot tr:first-child td{border-top:2px solid var(--sd-line, #E5E3E7)}
table.list-table tfoot tr.total td{color:var(--ink);font-weight:600;background:#F7F6F8}

/* ---- THE FILTER ROW, SORT AND CHIPS (list-filters.js) ---- */
.list-table .lf-row td{padding:6px 6px;background:#fff;border-bottom:1px solid var(--sd-line, #E5E3E7)}
.list-table .lf-row td:first-child{padding-left:8px}
.list-table .lf-box{width:100%;min-width:0;height:28px;padding:0 18px 0 7px;font-size:12.5px;border:1px solid #DAD8DE;border-radius:6px;background:#fff;box-sizing:border-box;color:var(--ink)}
.list-table .lf-box::placeholder{color:#B9B6BE}
.list-table .lf-box:focus{outline:none;border-color:var(--sd-blue, #5683B8);box-shadow:0 0 0 3px rgba(86,131,184,.15)}
.list-table .lf-box.on{border-color:var(--sd-blue, #5683B8);background:#F3F7FC}
.list-table .lf-box::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;height:14px;width:14px;margin-right:-12px;cursor:pointer;
  background:var(--sd-blue, #5683B8);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/8px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/8px no-repeat}
.list-table th.lf-sort{cursor:pointer;user-select:none}
/* the sort mark: arrow heads only, no shafts - a faint pair on a sortable heading, one clear head when sorted */
.list-table th.lf-sort::after{content:' \25B4\25BE';margin-left:4px;font-size:9px;letter-spacing:-1px;opacity:.45;vertical-align:1px}
.list-table th.lf-asc::after{content:' \25B2';letter-spacing:0;opacity:1}
.list-table th.lf-desc::after{content:' \25BC';letter-spacing:0;opacity:1}
.list-table th.lf-sort:hover{background:#4A5870}
.lf-strip{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.lf-strip .lf-lab{margin-right:2px}
.lf-strip .lf-clear,.lf-strip .lf-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border:1px solid #DAD8DE;border-radius:6px;background:#fff;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.lf-strip .lf-clear{padding:0 8px;color:var(--sd-accent-deep, #C9481F);font-weight:700}
.lf-strip .lf-chip .x{color:var(--sd-accent-deep, #C9481F);font-weight:700}
.lf-strip .lf-chip b{font-weight:600}
.lf-strip .lf-chip:hover,.lf-strip .lf-clear:hover{border-color:#B9B6BE;background:#FAF9FB}
.lf-strip .lf-count{margin-left:auto;color:var(--muted)}

/* the header filter as a dropdown, and the doubled-up top controls out of the way */
.list-table select.lf-box{padding:0 22px 0 6px;appearance:auto;-webkit-appearance:auto;cursor:pointer;background:#fff}
.list-table select.lf-box.on{background:#F3F7FC}
.lf-hidden{display:none !important}