/* MTD.Web: a modern take on the Web Forms look (green header, black tabs, slate side menu, dark grid header). */

:root {
    --brand: #0a7a2f;          /* the old site's green (#008000), a touch deeper */
    --brand-dark: #075f24;
    --brand-light: #e8f5ec;
    --ink: #1f2933;
    --muted: #5f6b76;
    --line: #e2e6ea;
    --surface: #ffffff;
    --page: #f3f5f7;
    --tabs: #16191d;           /* the old black tab bar */
    --slate: #3f4c6b;          /* the old side-menu headers */
    --grid-head: #4a5058;      /* the old grid header (#666) */
    --link: #0b5394;
    --yes: #1a8a3a;
    --no: #c62828;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    /* The page's column: the header, tabs and content line up in it, centred; the bars' colours run edge to edge */
    --page-width: 1280px;
    --gutter: 24px;
    /* The padding that keeps a full-width bar's contents in the column, gutter included */
    --page-inset: max(var(--gutter), calc((100% - var(--page-width)) / 2 + var(--gutter)));
    /* The content's (.site-main): the same column, but a wide page's is wider (.page--wide) */
    --main-inset: var(--page-inset);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 14px/1.5 var(--font);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, th:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */

.site-header { background: var(--brand); color: #fff; }

.site-header__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
    padding: 10px var(--page-inset);
}

.site-logo img { display: block; }

.site-user { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-left: auto; font-size: 13px; }
.site-user__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: rgba(255, 255, 255, .85); }
.site-user__links strong { color: #fff; font-weight: 600; }
.site-user__links a { color: #fff; }
.site-user__links form { display: inline; }
.site-user__links .link-button { color: #fff; font-size: inherit; }
/* The user's name, which opens the menu with My Account and Sign out */
.site-user__links .site-user__name { color: #fff; font-weight: 600; }
.site-user__links .popover-menu a { color: var(--link); }
.popover-menu form { display: block; margin: 0; }
.popover-menu form button { display: block; width: 100%; padding: 5px 14px; border: 0; background: none; color: var(--link); font: inherit; text-align: left; cursor: pointer; }
.popover-menu form button:hover { background: #f4f6f9; }

/* In the tabs' row, at its right (under the user's name) */
.site-search { display: flex; flex: none; margin: 0 0 0 auto; }
.site-search input {
    width: 260px; max-width: 60vw;
    padding: 4px 10px; border: 0; border-radius: 6px 0 0 6px;
    font: inherit; color: var(--ink);
}
.site-search button {
    padding: 4px 12px; border: 0; border-radius: 0 6px 6px 0;
    background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.site-search button:hover { background: var(--brand-dark); }
/* The drop-down as you type (site-search.js): the best of each kind under its heading, then "All results". (Its
   rules start with .site-search so they win over the tab bar's, .site-tabs a, which the form is in.) */
.site-search { position: relative; }
.site-search .site-search__list {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
    width: 520px; max-width: calc(100vw - 32px); max-height: min(70vh, 640px); overflow: auto;
    padding: 4px 0; border-radius: var(--radius);
    background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
    font-size: 13px; text-align: left;
}
.site-search .site-search__list[hidden] { display: none; }
.site-search .site-search__group {
    display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px 2px;
    color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.site-search .site-search__count { font-weight: 400; text-transform: none; letter-spacing: 0; }
.site-search .site-search__option {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    padding: 4px 12px; border-radius: 0; color: var(--ink); font-size: 13px; white-space: normal;
}
.site-search .site-search__option:hover, .site-search .site-search__option.is-active,
.site-search .site-search__all:hover, .site-search .site-search__all.is-active { background: var(--brand-light); color: var(--ink); text-decoration: none; }
.site-search .site-search__main, .site-search .site-search__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search .site-search__title { font-weight: 600; }
.site-search .site-search__text { margin-left: 8px; }
.site-search .site-search__meta { color: var(--muted); text-align: right; white-space: pre; font-variant-numeric: tabular-nums; }
.site-search .site-search__sub { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.site-search .site-search__empty { padding: 8px 12px; color: var(--muted); }
.site-search .site-search__all {
    display: block; margin-top: 4px; padding: 7px 12px; border-top: 1px solid var(--line); border-radius: 0;
    color: var(--link); font-size: 13px; font-weight: 600;
}
.site-search .site-search__list mark { padding: 0; background: #fff1a8; color: inherit; }

/* ---------- Tabs ---------- */

/* (the tabs' own padding puts the first tab's words in line with the logo) */
.site-tabs { display: flex; align-items: center; gap: 0 16px; padding: 0 var(--page-inset) 0 max(0px, calc(var(--page-inset) - 30px)); background: var(--tabs); }
.site-tabs ul {
    display: flex; flex: 1 1 0; min-width: 0; gap: 2px; margin: 0; padding: 0 16px;
    list-style: none; overflow-x: auto; scrollbar-width: thin;
}
.site-tabs a {
    display: block; padding: 9px 14px;
    color: rgba(255, 255, 255, .85); font-size: 13px; white-space: nowrap;
    border-radius: 6px 6px 0 0;
}
.site-tabs a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.site-tabs a.is-selected { background: var(--page); color: var(--ink); font-weight: 600; }

/* ---------- Page ---------- */

.site-main { padding: 20px var(--main-inset) 40px; }
/* A wide page (ViewData["Wide"]: the calls list): its content is centred in 2000px, the header stays in the page
   column. (The whole inset is set again: a custom property's var()s are worked out where it is declared.) */
.page--wide { --main-inset: max(var(--gutter), calc((100% - 2000px) / 2 + var(--gutter))); }

/* ---------- Setup: side menu + content ---------- */

.setup { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }

.setup-menu {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; font-size: 13px;
}
.setup-menu__group h2 {
    margin: 0; padding: 7px 12px;
    background: var(--slate); color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.setup-menu__group ul { margin: 0; padding: 6px 0 10px; list-style: none; }
.setup-menu__group a { display: block; padding: 3px 12px 3px 14px; border-left: 3px solid transparent; }
.setup-menu__group a:hover { background: #f4f6f9; text-decoration: none; }
.setup-menu__group a.is-selected { border-left-color: var(--brand); background: var(--brand-light); color: var(--ink); font-weight: 600; }

.setup-content {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px 22px; min-width: 0;
}

.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-header h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }

/* "New MTD" switch (the old app's MasterPage.master has a copy of these rules) */
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; white-space: nowrap; }
/* The (invisible) checkbox covers the whole switch, so it is what is clicked and focused. */
.ui-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-switch__track { position: relative; width: 30px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .35); transition: background .15s; }
.ui-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ui-switch input:checked + .ui-switch__track { background: #7fd49b; }
.ui-switch input:checked + .ui-switch__track::after { transform: translateX(14px); }
.ui-switch input:focus-visible + .ui-switch__track { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Buttons ---------- */

.button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 6px; border: 1px solid transparent;
    font-weight: 600; font-size: 13px; line-height: 1.2;
}
.button:hover { text-decoration: none; }
.button--primary { background: var(--brand); color: #fff; }
.button--primary:hover { background: var(--brand-dark); }
.button--secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button--secondary:hover { background: #f4f6f9; }
.button--danger { background: var(--surface); color: var(--no); border-color: currentColor; }
.button--danger:hover { background: var(--no); color: #fff; border-color: var(--no); }
button.button { cursor: pointer; font-family: inherit; }
.button-hint { display: inline-flex; cursor: help; }
.button-hint button.button:disabled { pointer-events: none; }
button.button:disabled, button.button:disabled:hover { cursor: not-allowed; opacity: .45; background: var(--surface); color: inherit; border-color: var(--line); }

/* ---------- Messages ---------- */

.alert { margin: 0 0 14px; padding: 9px 14px; border-radius: 6px; border-left: 4px solid; font-size: 13px; }
.alert ul { margin: 0; padding-left: 18px; }
.alert--info { background: var(--brand-light); border-color: var(--brand); }
.alert--error { background: #fdecec; border-color: var(--no); color: #8a1c1c; }

/* ---------- Forms ---------- */

.form { max-width: 640px; }
.form-row { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; align-items: start; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
fieldset.form-row > legend { float: left; padding: 0; }
.form-label { padding-top: 7px; font-weight: 600; font-size: 13px; color: var(--ink); }
.form-field input[type=text], .form-field input[type=password] {
    width: 100%; max-width: 320px; padding: 6px 9px;
    border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
.form-field input[type=text]:focus, .form-field input[type=password]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }
.form--wide { max-width: 760px; }
.form-section { margin: 0 0 18px; padding: 14px 16px 4px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.form-section > legend { padding: 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.form-field textarea {
    width: 100%; padding: 6px 9px; resize: vertical;
    border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; line-height: 1.45;
}
.form--wide .form-field input[type=text] { max-width: 420px; }
.form-field input[type=text].input--short { max-width: 110px; }
.form-field input[type=text].input--tiny { max-width: 90px; }
.form-field textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }
.form-field--inline { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.form-field select { max-width: 320px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--surface); }
.form-field select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }
.form-field input[type=text].input--medium, input.input--medium { max-width: 200px; }
input.input--tiny { width: 70px; }
.form-field [hidden] { display: none !important; }
.textarea--full {
    width: 100%; padding: 8px 10px; resize: vertical;
    border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; line-height: 1.45;
}
.textarea--full:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }
.textarea--mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; white-space: pre; tab-size: 16; }
.form-section > .textarea--full, .form-section > .dispo-preview { margin-bottom: 12px; }
/* A section that opens when its heading line is clicked (details.form-section): closed, the line says what is inside */
.form-details { padding-top: 10px; }
.form-details > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; cursor: pointer; list-style-position: outside; }
.form-details > summary::before { content: "\25B8"; color: var(--slate); }
.form-details[open] > summary::before { content: "\25BE"; }
.form-details > summary::-webkit-details-marker { display: none; }
.form-details > summary { list-style: none; }
.form-details__title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.form-details__summary { font-size: 13px; color: var(--muted); }
.form-details[open] > summary { margin-bottom: 12px; }
/* Tick boxes in named groups side by side (the scrub lists, by kind) */
.check-groups { display: flex; flex-wrap: wrap; gap: 6px 48px; }
.check-group { margin-bottom: 10px; }
.check-group__title { font-size: 12px; font-weight: 700; color: var(--muted); }
.check-group > .checkbox:first-child { padding-top: 0; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; }
.form-row[hidden] { display: none; }

/* Call type edit */
input.input--number { text-align: right; }
.color-field input[type=color] { width: 38px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.calendar-sample {
    display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px;
    font-size: 12px; font-weight: 600; background: #f4f6f9;
}
.form-field .checkbox + .checkbox { padding-top: 4px; }

/* Sub call type edit */
.grid-wrap--auto { max-height: none; display: inline-block; max-width: 100%; }
/* A table of a few short columns, which would look lost across the page */
.grid-wrap--narrow { max-width: 640px; margin-bottom: 14px; }
.grid--form { width: auto; }
.grid--form td { padding: 5px 12px; }
.grid--form .checkbox { padding-top: 0; }
.grid--form select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; background: var(--surface); }
.grid--form tr.is-off select { opacity: .4; }
.prebill-table { border-collapse: collapse; }
.prebill-table th { padding: 3px 14px 3px 0; text-align: left; font-weight: 400; font-size: 13px; }
.prebill-table td { padding: 3px 0; }
.booking-fields__box { margin: 0 0 12px; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 6px; }
.booking-fields__box[hidden] { display: none; }
.booking-fields__toggle { margin: 0 0 12px; }
.booking-fields__box h3 { margin: 0 0 2px; font-size: 13px; }
.booking-fields__box .form-hint { margin-top: 0; }
.booking-fields__none { text-align: left; padding: 4px 0; }
.booking-field.is-fixed { color: #5c6670; cursor: default; }
.booking-field.is-fixed input { opacity: .6; }
.booking-field__tag { margin-left: 4px; padding: 0 5px; border-radius: 3px; background: #eef0f3; color: #5c6670; font-size: 10px; }
.booking-field__tag[hidden] { display: none; }

/* Regulation edit */
.regulation-states { width: 100%; }
.regulation-states tr[hidden] { display: none; }
.regulation-states tr.is-off select, .regulation-states tr.is-off textarea { opacity: .4; }
.regulation-states__notes { width: 55%; }
.regulation-states textarea { width: 100%; min-height: 34px; padding: 4px 8px; resize: vertical; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; }

/* Scheduled report edit */
input.input--time { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.days .checkbox { padding-top: 0; }

/* Tabs (tabs.js) */
.tabs { margin: 0 0 18px; }
.tabs__heading { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.tabs.is-tabbed .tabs__heading { display: none; }
.tabs__list { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs__tab {
    margin-bottom: -1px; padding: 8px 14px; border: 1px solid transparent; border-radius: 6px 6px 0 0;
    background: none; color: #5c6670; font: inherit; font-weight: 600; cursor: pointer;
}
.tabs__tab:hover { color: var(--ink); background: #f4f6f9; }
.tabs__tab[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--line); border-bottom-color: var(--surface); }
.tabs__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.tabs__panel { padding: 16px 16px 4px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.tabs__panel[hidden] { display: none; }
/* A page in a window of its own (Pages/Shared/_PopupLayout) */
.site-main--popup { padding: 16px; }

/* Phone numbers (Pages/Shared/_PhoneNumbers) */
.phones { margin-bottom: 12px; }
.phones__table { border-collapse: collapse; margin-bottom: 6px; }
.phones__table th { padding: 0 8px 4px 0; text-align: left; font-size: 12px; font-weight: 600; color: #5c6670; }
.phones__table td { padding: 3px 8px 3px 0; }
.phones__table input, .phones__table select {
    padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--surface);
}
.phones__table input:focus, .phones__table select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }
.phones__table input[type=tel] { width: 160px; }
.phones__remove { color: var(--no); }
.phones__none { text-align: left; padding: 4px 0 8px; }
.phones__table:has(tbody:empty) { display: none; }

/* Dispo codes preview (vendor edit) */
.dispo-preview h3 { margin: 4px 0 6px; font-size: 12px; font-weight: 600; color: #5c6670; }
.dispo-preview .grid-wrap { max-height: 320px; }
.grid.dispo-preview__table th, .grid.dispo-preview__table td { text-align: left; padding: 4px 10px; }

.form-field .form-hint { margin: 4px 0 0; }
.form-hint { margin: 7px 0 8px; color: #5c6670; font-size: 12px; }
.checkbox { display: flex; align-items: flex-start; gap: 8px; padding-top: 6px; font-size: 13px; cursor: pointer; }
.checkbox input { margin: 2px 0 0; accent-color: var(--brand); }
.checkbox-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px;
    max-height: 260px; overflow: auto; padding: 4px 10px 8px;
    border: 1px solid var(--line); border-radius: 6px;
}
/* Client picker (Tom Select, client-picker.js) */
.client-picker { width: 100%; min-height: 34px; }
/* Tom Select (_TomSelect) in the site's colours, over its default theme (blue chips, grey gradients): the box like
   the page's other fields, chosen items as light green chips, the list like the site's pop-up menus. (Tom Select's theme
   is loaded after this file, so each rule starts with body to win over its rule of the same weight.) */
body .ts-wrapper { margin: 0 0 12px; }
body .ts-wrapper .ts-control, body .ts-wrapper .ts-control input, body .ts-dropdown { color: var(--ink); font: inherit; font-size: 13px; line-height: 18px; }
body .ts-wrapper .ts-control,
body .ts-wrapper.single .ts-control { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: none; }
body .ts-wrapper.multi.has-items .ts-control { padding: 4px 6px 1px; }
body .ts-wrapper.disabled .ts-control { background: #f4f6f9; }
body .ts-wrapper.single .ts-control { cursor: pointer; }
body .ts-wrapper.single .ts-control::after { border-top-color: var(--muted); }
body .ts-wrapper.single.dropdown-active .ts-control::after { border-color: transparent transparent var(--muted); }
body .ts-wrapper.focus .ts-control { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
body .ts-wrapper.multi .ts-control > div,
body .ts-wrapper.multi .ts-control [data-value] {
    margin: 0 4px 3px 0; padding: 1px 7px; border: 1px solid #b7dcc2; border-radius: 4px;
    background: var(--brand-light); box-shadow: none; text-shadow: none; color: var(--brand-dark);
}
body .ts-wrapper.multi .ts-control > div.active,
body .ts-wrapper.multi .ts-control [data-value].active { border-color: var(--brand); background: var(--brand); color: #fff; }
body .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { margin-left: 6px; border-left-color: #b7dcc2; color: inherit; }
body .ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove { border-left-color: rgba(255, 255, 255, .45); }
body .ts-wrapper.plugin-remove_button .item .remove:hover { background: rgba(10, 122, 47, .12); }
body .ts-wrapper.plugin-remove_button .item.active .remove:hover { background: rgba(255, 255, 255, .15); }
body .ts-dropdown,
body .ts-dropdown.single { margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); overflow: hidden; }
body .ts-dropdown .option, body .ts-dropdown .no-results, body .ts-dropdown .create { padding: 5px 10px; }
body .ts-dropdown .active { background: var(--brand-light); color: var(--ink); }
body .ts-dropdown .active.create { color: var(--ink); }
body .ts-dropdown .option.selected { font-weight: 600; }
body .ts-dropdown .optgroup { border-top-color: var(--line); }
body .ts-dropdown .optgroup-header { padding: 6px 10px 3px; color: var(--slate); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Tom Select's own typing box is not one of the form's text boxes (.form-field input[type=text]): left full width,
   it took a line of its own under the chosen items */
.form-field .ts-wrapper .ts-control > input,
.form-field .ts-wrapper .ts-control > input:focus { width: auto; max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.client-picker__alias { margin-left: 4px; color: #5c6670; font-size: 11px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-left: 154px; }
/* ---------- List filter (gridfilter.js) ---------- */

.grid-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.grid-filter[hidden] { display: none; }
.grid-filter__search {
    flex: 0 1 280px; min-width: 0; padding: 6px 9px 6px 30px;
    border: 1px solid var(--line); border-radius: 6px; font: inherit;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c6670' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E") no-repeat 9px center / 14px;
}
.grid-filter__search:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }
.grid-filter__active { padding-top: 0; }
.grid-filter__count { margin-left: auto; color: #5c6670; font-size: 12px; }

.form-actions--flush { padding-left: 0; }
.grid input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }

/* ---------- Permissions (user type edit) ---------- */

.permissions__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 10px; }
.permissions__toolbar .checkbox { padding-top: 0; }
.permissions__expand[hidden] { display: none; }
.link-button { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 12px; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.permissions__expand .link-button + .link-button { margin-left: 10px; }

.permissions__group { margin: 0 0 6px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.permissions__group[hidden] { display: none; }
.permissions__group-header { display: flex; align-items: center; gap: 0; margin: 0; background: #f6f7f9; font-size: 13px; }
.permissions__group.is-open .permissions__group-header { border-bottom: 1px solid var(--line); }
.permissions__group-header input { margin: 0 0 0 10px; width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; flex: none; }
.permissions__group-button {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
    padding: 8px 12px 8px 10px; border: 0; background: none; color: var(--ink);
    font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.permissions__group-button:hover { background: #eef0f3; }
.permissions__chevron { width: 0; height: 0; border-left: 5px solid #5c6670; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; flex: none; }
.permissions__group.is-open .permissions__chevron { transform: rotate(90deg); }
.permissions__group-title { flex: 1; }
.permissions__group-count { color: #5c6670; font-size: 11px; font-weight: 400; }

.permissions__table { width: 100%; border-collapse: collapse; }
.permissions__table tr[hidden] { display: none; }
.permissions__table td { padding: 6px 10px; vertical-align: top; }
.permissions__table tr + tr td { border-top: 1px solid var(--line); }
.permissions__table tr:nth-child(even) td { background: #fafbfc; }
.permissions__name { width: 240px; }
.permissions__name .checkbox { padding-top: 0; }
.permissions__name input { cursor: pointer; }
.permissions__usage { color: #5c6670; font-size: 12px; }
.permissions__full-name { display: block; font-weight: 600; color: var(--ink); }

/* Not used anywhere: struck through and dimmed. */
.permissions__table tr.is-unused .permissions__name span { text-decoration: line-through; color: #8a939c; }

@media (max-width: 800px) {
    .permissions__table tr { display: block; }
    .permissions__name, .permissions__usage { display: block; width: auto; }
    .permissions__table td.permissions__usage { padding-top: 0; padding-left: 34px; }
    .permissions__table tr + tr td.permissions__usage { border-top: 0; }
}

/* ---------- Quick notes ---------- */

/* One box per row, about twice as wide as the Web Forms 500px boxes. */
.note-boxes { display: grid; gap: 22px; max-width: 1000px; }
.note-box { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 8px; min-width: 0; }
.note-box .form-label { padding-top: 0; }
.note-box__count { color: #5c6670; font-size: 12px; }
.note-box__usage { grid-column: 1 / -1; margin: 0 0 2px; color: #5c6670; font-size: 12px; }
.note-box textarea {
    grid-column: 1 / -1; width: 100%; min-height: 180px; resize: vertical;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
    font: inherit; font-size: 13px; line-height: 1.5;
}
.note-box textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }

/* ---------- Setup landing page ---------- */

/* A grid of 300px+ columns; masonry.js packs each card under the shortest one above it (rows of 2px, cards span
   their height), so short groups leave no gaps. Without the script it is a plain grid. */
.setup-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.setup-home.is-masonry { grid-auto-rows: 2px; row-gap: 0; }
.setup-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.setup-card h2 {
    margin: 0; padding: 9px 14px;
    background: var(--slate); color: #fff;
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.setup-card ul { margin: 0; padding: 4px 0; list-style: none; }
.setup-card li + li { border-top: 1px solid var(--line); }
.setup-card a { display: block; padding: 8px 14px; }
.setup-card a:hover { background: var(--brand-light); text-decoration: none; }
.setup-card__title { display: block; font-weight: 600; }
.setup-card__description { display: block; margin-top: 1px; color: #5c6670; font-size: 12px; }
.setup-card__old { margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8a6d00; }

.grid .grid__empty { text-align: center; color: #5c6670; padding: 18px; }

/* ---------- Grid ---------- */

/* Long lists scroll inside the box (at most the window height less the header), with the column headers kept in view.
   It is positioned so the hidden labels in its cells (.visually-hidden, absolute) scroll with it: otherwise they sit
   down the page where their rows would be and make the page itself as tall as the whole list. */
.grid-wrap {
    position: relative;
    overflow: auto; max-height: max(320px, calc(100vh - 320px));
    border: 1px solid var(--line); border-radius: var(--radius);
    overscroll-behavior: contain;
}

.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th, .grid td { padding: 7px 12px; text-align: center; white-space: nowrap; }
.grid td.grid__wrap, .grid th.grid__wrap { white-space: normal; }
/* A cell that takes the room the other columns leave and cuts long text short with "..." (give it a title) */
.grid td.grid__ellipsis { width: 100%; min-width: 140px; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grid .grid__text { text-align: left; }
/* Numbers and dates go to the right, so their digits line up */
.grid .grid__num { text-align: right; }
/* The columns "Show details" shows (_GridFilter, show-details.js) */
.grid:not(.is-details) .grid__detail { display: none; }
.grid .grid__action { text-align: right; width: 1%; white-space: nowrap; }
.grid .grid__action a + a { margin-left: 12px; }
/* A table of several groups of rows (a tbody each): the row that names the group, and headings within it */
.grid tbody tr.grid__group, .grid tbody tr.grid__group:hover { background: #eef1f4; }
.grid .grid__group th { font-weight: 700; }
.grid .grid__subhead { font-weight: 600; font-style: italic; color: var(--slate); }

/* The databack page's counts: a small table for the dispositions and each question, side by side */
.rollups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.rollups .grid-wrap { flex: 0 0 auto; max-height: none; }
.rollups__file { margin: 0 0 8px; font-weight: 600; }
.rollups__matches { margin-left: 10px; color: var(--muted); font-weight: 400; }
.copy-column { margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; background: none; color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.copy-column:hover { background: rgba(255, 255, 255, .15); }
/* The recent jobs page (Pages/Scrubber/Jobs): what was run on a job, and the kind of each of its files, said small */
.file-kind { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; }
/* Recent jobs: a job is a heading line (when, its list, and what can be done with it at the right) over a line for each run */
.job { padding-bottom: 6px; }
.job__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.job__when, .job__name { font-weight: 700; }
.job__note { color: var(--muted); font-size: 13px; }
.job__actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; font-size: 13px; }
/* A menu of links in a browser popover, under the button that opens it (popover-menu.js) */
.popover-menu__button { padding: 0; border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; }
.popover-menu__button::after { content: " \25BE"; }
.popover-menu__button:hover { text-decoration: underline; }
.popover-menu {
    position: fixed; inset: auto; margin: 0; padding: 4px 0; min-width: 150px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px;
}
.popover-menu a { display: block; padding: 5px 14px; }
.popover-menu a:hover { background: #f4f6f9; text-decoration: none; }
/* The same popover holding notes to read, not links (the invoices list) */
.popover-note { width: max-content; max-width: min(440px, 90vw); max-height: 260px; overflow: auto; padding: 8px 12px; text-align: left; white-space: normal; }
.popover-note section + section, .call-notes section + section { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.popover-note p, .call-notes p { margin: 2px 0 0; white-space: pre-line; }
.popover-note a, .popover-note a:hover { display: inline; padding: 0; background: none; }
.popover-note a:hover { text-decoration: underline; }
.job__lists { margin: 0 0 10px; font-size: 13px; }
.job-runs { margin: 0 0 8px; padding: 0; list-style: none; font-size: 13px; }
.job-runs li { display: grid; grid-template-columns: 84px 76px 1fr; gap: 0 10px; margin-bottom: 6px; }
.job-runs__tool { font-weight: 600; text-transform: capitalize; }
.job-runs__when, .job-runs__none { color: var(--muted); white-space: nowrap; }
/* a job's output files, folded away under its lists */
.form-section > details.form-details { margin-bottom: 10px; }
.form-section > .grid-wrap { margin-bottom: 10px; }
/* The match page's column table: a column's match file and its key, in a line */
.match-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.grid .file-uploader__pick { gap: 6px 10px; }
/* An uploader in each row: a plain, smaller button */
.grid .file-uploader .button--primary { padding: 4px 10px; background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 500; }
.grid .file-uploader .button--primary:hover { background: #f4f6f9; }
.match-file .button { padding: 4px 10px; }

.grid thead th {
    background: var(--grid-head); color: #fff; font-weight: 600;
    position: sticky; top: 0; z-index: 1;
}
.grid thead th.is-sortable { cursor: pointer; user-select: none; }
/* (only the column the table is sorted by has an arrow) */
.grid thead th[aria-sort]::after { margin-left: 6px; font-size: 11px; }
.grid thead th[aria-sort="ascending"]::after { content: "\2191"; }
.grid thead th[aria-sort="descending"]::after { content: "\2193"; }

.grid tbody tr { border-top: 1px solid var(--line); }
.grid tbody tr:nth-child(even) { background: #fafbfc; }
.grid tbody tr:hover { background: var(--brand-light); }

/* User types, as the Web Forms .userType_N classes (Core-0002.css) */
.user-type--1 { color: var(--no); font-weight: 600; }
.user-type--2 { color: #9a6f00; font-weight: 600; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #eef0f3; color: #4a5058; }
.badge--good { background: var(--brand-light); color: var(--brand-dark); }

.yes-no { display: inline-flex; vertical-align: middle; }
.yes-no svg { width: 16px; height: 16px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.yes-no--yes svg { stroke: var(--yes); }
.yes-no--no svg { stroke: var(--no); }

/* ---------- Calls list ---------- */

/* The filter above a list that is searched on the server: a row of fields that wraps */
.list-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.list-filter .checkbox { padding-top: 0; align-items: center; }
.list-filter .checkbox input { margin: 0; }
.list-filter input[type=date], .list-filter input[type=search], .list-filter select {
    padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--surface);
}
.list-filter input:focus, .list-filter select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }
.list-filter__client { flex: 0 1 240px; min-width: 180px; }
.list-filter__client .ts-wrapper { margin: 0; }
.grid thead th.is-sortable a { color: inherit; }
.grid .grid__icon { vertical-align: text-bottom; }
.grid .grid__good { color: var(--yes); }
.grid .grid__bad { color: var(--no); }
/* Client statuses, as the Web Forms .clientStatus_N classes (Core-0002.css): VIP in red */
.client-status--2 { color: var(--no); }
/* The company of a call that isn't Stones' Phones' */
.company-tag { color: var(--no); }
/* Call statuses, as the Web Forms .callStatus_N classes (Core-0002.css) */
.call-status--1 { color: #934900; }
.call-status--2 { color: var(--no); }
.call-status--3 { color: #999; }
.call-status--4 { color: var(--yes); }
/* A tick or cross that can be clicked to change it */
.flag-button { padding: 2px 4px; border: 1px solid transparent; border-radius: 4px; background: none; line-height: 0; cursor: pointer; }
.flag-button:hover, .flag-button:focus-visible { border-color: var(--line); background: var(--surface); }
.flag-button:disabled { opacity: .4; cursor: wait; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 13px; }
.pager__count { margin-right: auto; color: #5c6670; }

/* ---------- Email template editor ---------- */

.form--editor { max-width: 900px; }
.form-row--editor { grid-template-columns: 140px minmax(0, 1fr); }
.form-field--editor { min-width: 0; }
.form-field--editor textarea { width: 100%; min-width: 0; }
.template-tokens { margin-top: 10px; }
.template-tokens__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #5c6670; }
.template-tokens__list { display: flex; flex-wrap: wrap; gap: 6px; }
.token-chip {
    padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px;
    background: #f4f6f9; color: var(--link); font-family: Consolas, monospace;
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s;
}
.token-chip:hover {
    background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark);
}

/* ---------- Calendar ---------- */

/* Previous, today, next and what is shown; the views on the right */
.calendar-nav { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.calendar-nav__heading { margin-left: 8px; font-size: 16px; }
.calendar-views { display: flex; gap: 6px; }
.list-filter__users { flex: 0 1 360px; min-width: 220px; }
.list-filter__users .ts-wrapper { margin: 0; }
.list-filter__users select { width: 100%; }
/* A month or a week: each week a grid of seven columns of equal width whatever is in them. The days are drawn
   behind (they span every row); their headings and the calls' bars are placed over them by row and column. */
.calendar { background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); border-width: 1px 0 0 1px; }
.calendar__head, .calendar__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar__head div { padding: 6px 8px; background: var(--grid-head); color: #fff; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.calendar__week { min-height: 104px; padding-bottom: 0; }
.calendar--week .calendar__week { min-height: 320px; }
.calendar__day { border: 1px solid var(--line); border-width: 0 1px 1px 0; }
.calendar__day--other { background: #f7f8fa; }
.calendar__day--today { background: #fff8dc; box-shadow: inset 0 0 0 2px #f0c040; }
/* A day's heading ("Sat - 11"), on a band darker than the day so that the days stand out from the calls */
.calendar__date {
    margin-bottom: 3px; padding: 2px 6px; border: 1px solid #c5ccd4; border-width: 0 1px 1px 0; background: #d9dee4;
    color: var(--ink); font-size: 12px; font-weight: 600; text-align: right;
}
.calendar__date--other { background: #e9ecf0; color: #7b8691; }
/* (once calendar.js has packed a week, a heading keeps its own height in the rows it is given) */
.calendar__week.is-packed .calendar__date { align-self: start; margin-bottom: 0; }
.calendar__date--today { background: #f0c040; }
/* A call, in its call type's colours (set on the element), cut short with "..." */
.calendar__entry {
    display: block; margin-top: 2px; padding: 1px 5px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 3px;
    font-size: 11px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.calendar__entry:hover { text-decoration: none; filter: brightness(1.12); }
.calendar__entry--inline { display: inline-block; margin: 0; max-width: 100%; vertical-align: middle; }
/* A call's bar across the days it runs. One of several days has its words in the middle, and at an end that runs on
   beyond the week an arrow with the day it runs from or to */
.calendar__bar { display: flex; align-self: start; gap: 8px; margin: 0 3px 2px; white-space: normal; }
/* Its words wrap, to four lines at most, then "..." */
.calendar__bar-text {
    flex: 1 1 auto; min-width: 0; overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
}
.calendar__bar--long .calendar__bar-text { text-align: center; }
.calendar__edge { flex: 0 0 auto; white-space: nowrap; opacity: .75; }
/* How a call differs from the calls it could be combined with (when they are not combined) */
.calendar__differs { font-weight: 700; }
.calendar__differs::before { content: "\00b7 "; font-weight: 400; }
/* A call number in a bar of several calls: the link to that call, in the bar's own colour */
.calendar__number { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.calendar__number:hover { text-decoration-color: currentColor; }
/* Whose calls are shown: said by the filter on screen, so only printed */
.calendar-print-users { display: none; }
/* Printed (the Print button; calendar.js scales it to the paper): the calendar alone, on letter paper sideways, in its
   colours, with a week kept on one sheet where it fits */
@page calendar { size: letter landscape; margin: .4in; }
/* (calendar.js sets this while it prints, before the print styles apply, so that what it measures is what is printed) */
.calendar-page.is-printing { padding: 0; }
@media print {
    .calendar-page { page: calendar; padding: 0; border-radius: 0; box-shadow: none; }
    body:has(.calendar-page) { background: #fff; }
    body:has(.calendar-page) .site-header, body:has(.calendar-page) .site-tabs { display: none; }
    body:has(.calendar-page) .site-main { padding: 0; }
    .calendar-page .list-filter, .calendar-page .calendar-views, .calendar-page .calendar-nav .button { display: none; }
    .calendar-page .calendar-nav__heading { margin-left: 12px; }
    .calendar-page .page-header { justify-content: flex-start; margin-bottom: 4px; }
    .calendar-page .calendar-print-users { display: block; margin: 0 0 8px; color: var(--muted); font-size: 12px; }
    .calendar-page .calendar { box-shadow: none; }
    .calendar-page .calendar__week, .calendar-page .calendar__head, .calendar-page .grid tr { break-inside: avoid; }
    .calendar-page .grid-wrap { max-height: none; overflow: visible; }
    .calendar-page, .calendar-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.calendar-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }

/* ---------- Small screens ---------- */

@media (max-width: 800px) {
    .site-header__inner, .site-main { padding-left: 16px; padding-right: 16px; }
    .setup { grid-template-columns: 1fr; }
    .setup-menu { order: 2; }
    .site-tabs { flex-wrap: wrap; }
    .site-tabs ul { flex-basis: 100%; }
    .site-search { margin: 6px 16px; }
    .site-search input { width: 200px; }
    .form-row { grid-template-columns: 1fr; }
    .form-label { padding-top: 0; }
    .form-actions { padding-left: 0; }
}

/* An "Add Files" button that uploads what is picked or dropped (Pages/Shared/_FileUploader, file-uploader.js) */
.file-uploader__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.file-uploader.is-enhanced .file-uploader__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.file-uploader__or { color: var(--muted); font-size: 12px; }
.file-uploader__progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.file-uploader__progress[hidden] { display: none; } /* only while a file is being uploaded */
.file-uploader__progress progress { width: 260px; max-width: 100%; height: 10px; accent-color: var(--brand); }
.file-uploader__error { margin: 10px 0 0; }
.file-uploader .form-hint { margin-bottom: 8px; }
.is-file-over { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--brand-light); }

/* ---------- The phone append report (Pages/Scrubber/PhoneAppendReport): a memo to print or save as a PDF ---------- */

.memo-page { background: var(--page); }
.memo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 8.5in; margin: 16px auto 0; padding: 0 4px; }
.memo-bar .form-hint { margin: 0; }
.memo { max-width: 8.5in; margin: 12px auto 24px; padding: .6in .7in; background: #fff; box-shadow: var(--shadow); color: #000; font: 11pt/1.4 Calibri, Arial, sans-serif; }
.memo__company { font: 20pt Arial, sans-serif; }
.memo__company-first { color: #4682b4; }
.memo__company-second { color: #9acd32; }
.memo__address { margin: 4px 0 0; font-size: 10pt; font-style: normal; white-space: pre-line; }
.memo__banner { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.memo__banner::before { content: ""; flex: 1; border-top: 3px solid #9acd32; }
.memo__banner span { color: #4682b4; font: italic bold 20pt "Trebuchet MS", Arial, sans-serif; }
.memo__date { margin: 0 0 10px; font-weight: 700; }
.memo__parties { border-collapse: collapse; font-weight: 700; }
.memo__parties th { padding: 2px 24px 2px 0; text-align: left; }
.memo__parties td { padding: 2px 0; }
.memo__input { width: 4in; max-width: 100%; padding: 1px 4px; border: 1px dashed var(--line); font: inherit; color: inherit; }
.memo__rule { margin: 8px 0 14px; border: 0; border-top: 3px solid #000; }
.memo__subject { margin: 0 0 14px; font-weight: 700; }
.memo__counts { width: 100%; border-collapse: collapse; }
.memo__counts th, .memo__counts td { padding: 4px 6px; text-align: right; font-weight: 400; }
.memo__counts .memo__label { padding-right: 28px; }
.memo__counts tr.memo__heading th { padding-top: 18px; border-bottom: 1px solid #32cd32; font-weight: 700; }
.memo__counts tr.memo__heading th:first-child { padding-left: 1in; text-align: left; font-style: italic; }

@media print {
    .memo-page { background: #fff; }
    .memo-bar { display: none; }
    .memo { max-width: none; margin: 0; padding: 0; box-shadow: none; }
    .memo__input { border-color: transparent; }
    .memo__input::placeholder { color: transparent; }
}

/* ---------- Sign-in and account pages ---------- */

.public { display: flex; justify-content: center; padding-top: 48px; }
.public__card { width: 100%; max-width: 420px; padding: 22px 26px 26px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.public__card h1 { margin: 0 0 16px; font-size: 20px; }
.form--stacked .form-row { grid-template-columns: 1fr; gap: 2px; }
.form--stacked .form-label { padding-top: 0; }
.form--stacked .form-field input[type=text], .form--stacked .form-field input[type=password] { max-width: none; }
.form--stacked .form-field input[type=text].input--short { max-width: 110px; }
.steps { margin: 0 0 12px; padding-left: 22px; }
.steps > li { padding-bottom: 10px; }
.qr { width: 196px; min-height: 196px; margin: 8px 0 4px; }
.qr svg { display: block; }
.qr__key { font: 14px/1.4 Consolas, "Courier New", monospace; white-space: nowrap; }
.passkey-sign-in .button { width: 100%; justify-content: center; }
.passkey-sign-in .alert { margin: 12px 0 0; }
.passkey-sign-in__or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 12px; }
.passkey-sign-in__or::before, .passkey-sign-in__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- Home page ---------- */

.home-section { margin-bottom: 18px; }
.home-section > .tabs { margin-bottom: 0; }
.home-empty { color: var(--muted); }
.home-heading { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--slate); }
/* How many rows a list has, after its title */
.home-count { margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: rgba(127, 140, 160, .25); font-size: 12px; font-weight: 600; }
.home-tasks { max-height: 420px; }
/* The Summary Dashboard's tables: as wide as their figures, one under the other */
.home-summary { display: block; width: fit-content; margin-bottom: 16px; }
.home-summary .grid tfoot td, .home-summary .grid tfoot th { border-top: 1px solid var(--line); font-weight: 700; }
.home-summary__share { color: var(--muted); }
.chart { position: relative; height: 400px; max-width: 900px; margin-bottom: 12px; }
.chart__status { color: var(--muted); font-size: 13px; }
/* The lists of calls needing something: cards packed by masonry.js, as the setup page's, each scrolling inside itself */
.home-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; align-items: start; }
.home-lists.is-masonry, .call-cards.is-masonry { grid-auto-rows: 2px; row-gap: 0; }
.home-list, .call-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.home-list h2, .call-card h2 { margin: 0; padding: 9px 14px; background: var(--slate); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.home-list .grid-wrap { max-height: 300px; border: 0; border-radius: 0; }
/* The date and number columns are as wide as they need; the names share the rest, cut short with "..." (the whole
   name is the cell's title), so a list never scrolls sideways */
.home-list .grid { table-layout: fixed; }
.home-list .grid th:first-child { width: 96px; }
.home-list .grid th:last-child { width: 104px; }
.home-list .grid th { overflow: hidden; text-overflow: ellipsis; }
.grid td.home-list__name { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .home-lists { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Search results (Pages/Search): a card for each kind, as the home page's lists ---------- */

.search-results { display: grid; gap: 18px; margin-top: 14px; }
.search-results__group .grid-wrap { max-height: none; border: 0; border-radius: 0; }
.search-results__more { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------- Call details ---------- */

/* What the call is: three lists of name and value, side by side where there is room */
.call-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 32px; }
.call-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; align-content: start; margin: 0; font-size: 13px; }
.call-facts dt { font-weight: 600; color: var(--muted); }
.call-facts dd { margin: 0; min-width: 0; }
.call-facts img { vertical-align: text-bottom; }
/* Something to take note of (a call that needs a disclaimer, a firewalled call), in the old page's red */
.call-alert { color: var(--no); font-weight: 700; }
.page-header .call-alert { margin-left: 12px; font-size: 13px; }
.call-client-notes { white-space: pre-line; }
/* The cards under them (status, fees, numbers, notes...), packed by masonry.js as the home page's lists */
/* The facts with the status beside them, at the top right as on the old page (under them on a narrow screen) */
.call-top { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; align-items: start; margin-bottom: 18px; }
@media (max-width: 900px) { .call-top { grid-template-columns: minmax(0, 1fr); } }
.call-recipients { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: 13px; }
.call-recipients dt { font-weight: 600; color: var(--muted); }
.call-recipients dd { margin: 0; }
.call-card .link-button { font-size: inherit; }
.call-status-card .grid th { width: 100%; }
.call-status-card__tick { width: 1%; padding-right: 0; }
.call-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.call-card__body { margin: 0; padding: 10px 14px; font-size: 13px; }
.call-card .grid tbody th { font-weight: 400; }
.call-card details.call-card__body { border-top: 1px solid var(--line); }

/* ---- Client details (Pages/Clients/ClientActivity) ---- */
/* The link above a tab's list ("+ add payment"), and under one ("Move All") */
.tabs__actions { margin: 0 0 8px; font-size: 13px; }
.grid-wrap + .tabs__actions { margin: 8px 0 0; }
/* What has been applied to an invoice, in its popover */
.applied-lines { border-collapse: collapse; }
.applied-lines td { padding: 2px 12px 2px 0; white-space: nowrap; }
.applied-lines td:last-child { padding-right: 0; }

/* ---- Dialogs (dialog.js): a <dialog data-dialog> over the page, opened by a [data-dialog-open] button ---- */
.dialog {
    width: max-content; max-width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 16px 20px 20px; overflow: auto;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); color: inherit;
}
.dialog::backdrop { background: rgba(20, 28, 38, .45); }
.dialog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.dialog__head h2 { margin: 0; font-size: 16px; }
.dialog .form { margin-top: 14px; }

/* ---- Call edit (Pages/Calls/CallEdit, call-edit.js): a tab for each part of a call, in the order it is filled in ---- */
.call-edit { max-width: 1320px; }
.call-edit__panel { margin: 0; min-width: 0; background: var(--surface); }
/* A tab's fields, in up to three columns */
.call-edit__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 0 32px; align-items: start; }
.call-edit__columns > [hidden] { display: none; }
.call-edit .form-row { grid-template-columns: 132px minmax(0, 1fr); margin-bottom: 8px; }
.call-edit .form-field select { max-width: 100%; min-width: 70px; }
.call-edit input[type=date], .call-edit input[type=time] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.call-edit .form-field input[type=text].input--number { text-align: right; }
.call-edit .form-field--inline .checkbox { padding-top: 0; }
.call-edit .ts-wrapper { margin: 0; }
/* The recipients and caller IDs: a tag picker each (tag-picker.js) */
.call-edit__pickers .form-row { grid-template-columns: 132px minmax(0, 760px); }
/* A tag picker's option with more to show of it (a caller ID: number, place, last used) */
.tag-picker__columns { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; gap: 0 12px; }
.tag-picker__columns span:last-child { text-align: right; color: var(--muted); }
/* A time: its three lists stay on one line */
.call-edit__ticks { display: grid; gap: 0; margin: 0 0 8px; }
.call-edit__ticks > span[hidden] { display: none; }
.call-edit__scrub:has(input:checked) { color: var(--no); font-weight: 600; }
.call-edit__actions { justify-content: flex-end; margin: 12px 0; }
.call-edit__client-notes { margin: 6px 0 0; padding: 8px 12px; border-left: 4px solid var(--brand); background: var(--brand-light); }
.call-edit__client-notes[hidden] { display: none; }
/* The fees and the costs, under the pricing fields */
.call-edit__lines-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* The notes, two to a row */
.call-edit__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 32px; }
.call-edit__notes > p { grid-column: 1 / -1; margin: 0 0 8px; }
/* Who and what is chosen, on a line, with the button that opens its dialog */
.call-edit__note { margin: 0 0 12px; }
.call-edit__note label { font-weight: 600; font-size: 13px; }
.call-edit__note select { max-width: 60%; margin-left: 6px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; }
.call-edit__note textarea { display: block; margin-top: 4px; }
.call-edit__heading { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
/* The fees and the costs: a row for each, added and removed by rows.js */
.call-edit__lines input[type=text] { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; }
.call-edit__lines input.input--tiny { width: 90px; }
.call-edit__line-name { width: 240px; }
.call-edit__lines tfoot th { font-weight: 700; }
.call-edit__lines:has(tbody:empty) thead { display: none; }
/* Two lists side by side: the ones to tick, and those typed in */
.call-edit .dialog textarea { margin: 4px 0 0; min-width: min(480px, 80vw); }

/* ---- Booking form (Pages/Bookings/BookingEdit, booking-edit.js): the booking, then a block for each call on it. It uses the call edit page's classes. ---- */
.booking-edit__head { margin: 0 0 16px; padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.booking-edit__head .call-edit__notes { margin-top: 6px; }
.booking-edit__client { margin: 4px 0 0; }
.booking-edit__add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.booking-edit__add select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.booking-edit__frame { display: block; max-width: 100%; border: 0; }
.booking-edit .form-row[hidden], .booking-edit .call-edit__note[hidden], .booking-edit .call-edit__lines-block[hidden] { display: none; }
.booking-edit input[type=text][hidden] { display: none; }
.booking-edit .call-edit__note .checkbox { font-weight: 600; }
.booking-call { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.booking-call.is-locked { background: var(--page); }
.booking-call__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--brand-light); border-radius: 8px 8px 0 0; }
.booking-call__head h3 { margin: 0; font-size: 14px; }
.booking-call__tools { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; }
.booking-call__body { margin: 0; min-width: 0; padding: 12px 16px 4px; border: 0; }
.booking-call__regulations { margin: 0 0 12px; font-size: 13px; }
.booking-call__regulations .regulation { margin: 6px 0 0; padding: 6px 10px; border-left: 4px solid var(--no); background: var(--page); }
.booking-call__regulations p { margin: 2px 0 0; }
.booking-edit__owing { color: var(--yes); }
.booking-edit__credit { color: var(--no); }

/* ---- The booking form laid out more simply, an experiment (Pages/Bookings/BookingSimple): cards, a label above each box, the rest folded away, the buttons in a bar at the foot of the window. With .booking-edit, whose fields and script it has. ---- */
.booking-simple { max-width: 1120px; }
.booking-simple__flag { background: #fff4d6; color: #7a5600; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.page-header h1 .badge { vertical-align: middle; text-transform: none; letter-spacing: 0; }
.booking-simple__card, .booking-simple__call { margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.booking-simple__call { padding: 0; scroll-margin-top: 12px; }
.booking-simple__call.is-locked { background: var(--page); box-shadow: none; }
.booking-simple__call-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.booking-simple__call-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.booking-simple__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; font-size: 13px; }
.is-locked .booking-simple__count { background: var(--muted); }
.booking-simple__tools { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.booking-simple__tools .link-button { font-size: 13px; }
.booking-simple__call-body { margin: 0; min-width: 0; padding: 16px 20px 8px; border: 0; }
.booking-simple__group { margin: 0 0 18px; }
.booking-simple__group:not(:has(.form-row:not([hidden]))) { display: none; }
.booking-simple__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px 16px; align-items: start; }
.booking-simple__fields--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.booking-simple__wide { grid-column: span 2; }
.booking-simple .form-row { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 0; }
.booking-simple .ts-wrapper { width: 100%; }
.booking-simple .form-label { display: flex; gap: 10px; align-items: baseline; padding: 0; font-size: 12px; color: var(--muted); }
.booking-simple .form-label .checkbox { padding: 0; font-size: 12px; }
.booking-simple .form-field input[type=text], .booking-simple .form-field input[type=text].input--number, .booking-simple .form-field select,
.booking-simple input[type=date], .booking-simple input[type=time] { width: 100%; max-width: none; min-width: 0; }
.booking-simple .form-field--inline { flex-wrap: nowrap; }
.booking-simple .form-field--inline input[type=text], .booking-simple .form-field--inline select { flex: 1 1 0; }
.booking-simple__tick { align-self: end; padding-bottom: 5px; }
.booking-simple__tick .checkbox { padding-top: 0; white-space: nowrap; }
.booking-simple .form-field .form-hint { margin: 4px 0 0; }
.booking-simple .call-edit__client-notes { margin: 14px 0 0; }
.booking-simple .booking-call__regulations { margin: 0 0 14px; }
.booking-simple__fold { margin: 0; border-top: 1px solid var(--line); }
.booking-simple__card > .booking-simple__fold { margin: 16px -20px -18px; padding: 0 20px; }
.booking-simple__call-body > .booking-simple__fold { margin: 0 -20px; padding: 0 20px; }
.booking-simple__call-body > .booking-simple__fold:last-child { margin-bottom: -8px; }
details.booking-simple__card { padding: 0 20px; border-top: 1px solid var(--line); }
.booking-simple__fold > summary { padding: 10px 0; font-weight: 600; font-size: 13px; color: var(--slate); cursor: pointer; user-select: none; }
.booking-simple__fold > summary:hover { color: var(--ink); }
.booking-simple__fold > summary .badge { margin-left: 4px; }
.booking-simple__fold[open] { padding-bottom: 14px; }
.booking-simple__fold[open] > summary { margin-bottom: 4px; }
.booking-simple__fold > .form-hint { margin: 0 0 10px; }
.booking-simple__fold--notes:not(:has(.call-edit__note:not([hidden]))), .booking-simple__fold--people:not(:has(.form-row:not([hidden]))) { display: none; }
.booking-simple .call-edit__note .checkbox { padding-top: 0; }
.booking-simple__add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; padding: 14px 20px; border: 1px dashed #c3cad2; border-radius: var(--radius); color: var(--muted); }
.booking-simple__add select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--surface); }
.booking-simple__bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; padding: 10px 20px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); box-shadow: 0 -2px 10px rgba(16, 24, 40, .08); }
.booking-simple__bar-gap { flex: 1 1 auto; }

/* ---- A call type and sub type chosen as one (type-picker.js): a button like a list, opening a list of types that open to their sub types ---- */
.type-picker { position: relative; min-width: 0; }
.type-picker__button { display: block; width: 100%; min-width: 180px; padding: 5px 28px 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235f6b76'/%3E%3C/svg%3E") no-repeat right 9px center; color: var(--ink); font: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.type-picker__button:focus-visible, .type-picker__button[aria-expanded=true] { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-light); }
.type-picker__button:disabled { color: var(--muted); cursor: default; }
.type-picker__popup { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(420px, 90vw); max-height: 340px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgba(16, 24, 40, .16); }
.type-picker__popup[hidden] { display: none; }
.type-picker__popup--up { top: auto; bottom: calc(100% + 4px); }
.type-picker__menu, .type-picker__menu ul { margin: 0; padding: 0; list-style: none; }
.type-picker__menu ul[hidden] { display: none; }
.type-picker__menu button { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.type-picker__menu button:hover, .type-picker__menu button:focus-visible { background: var(--brand-light); outline: none; }
.type-picker__menu [data-expand] { font-weight: 600; }
.type-picker__menu [data-expand]::before { content: "\25B8"; display: inline-block; width: 14px; color: var(--muted); }
.type-picker__menu [data-expand][aria-expanded=true]::before { content: "\25BE"; }
.type-picker__menu > li > [data-type] { padding-left: 24px; font-weight: 600; }
.type-picker__menu ul button { padding-left: 24px; }
.type-picker__menu .is-chosen { background: var(--brand); color: #fff; }
.type-picker__none { color: var(--muted); }
.booking-simple__add .type-picker { min-width: 260px; }

/* ---- Client edit (Pages/Clients/ClientEdit, client-edit.js). It uses the call edit page's classes. ---- */
.client-edit { max-width: 1180px; }
.client-edit .booking-edit__head { padding-bottom: 8px; }
.client-edit__namesake { color: var(--no); font-weight: 600; }
.client-edit__contacts th, .client-edit__contacts td.grid__action { text-align: center; }
.client-edit__contacts input[type=text] { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; }
.client-edit__contact-notes { width: 300px; max-width: 100%; }
.client-edit__contacts:has(tbody:empty) { display: none; }
.client-edit select.company-tag { font-weight: 600; }

/* ---- Invoice edit (Pages/Invoices/InvoiceEdit, invoice-edit.js): the invoice, and beside it its client and the calls on its lines. It uses the call edit page's classes. ---- */
.invoice-edit { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; max-width: 1500px; }
.invoice-edit__form { max-width: none; min-width: 0; }
.invoice-edit__ticks { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 24px; }
.invoice-edit__ticks .checkbox { padding-top: 2px; }
.invoice-edit__voided { background: var(--no); color: #fff; }
.page-header h1 .invoice-edit__voided { text-transform: uppercase; }
.invoice-edit__lines-wrap { display: block; }
.invoice-edit__lines { width: 100%; }
.invoice-edit__lines select { max-width: 110px; }
.invoice-edit__lines td, .invoice-edit__lines th { padding-left: 6px; padding-right: 6px; }
.invoice-edit__lines input.input--tiny { width: 84px; }
.invoice-edit__name { width: 100%; min-width: 170px; }
.invoice-edit__call-name { min-width: 80px; font-size: 12px; color: var(--muted); }
.invoice-edit__handle { width: 20px; color: var(--muted); cursor: grab; user-select: none; text-align: center; letter-spacing: -1px; }
.invoice-edit__lines tr.is-dragged { opacity: .45; }
.invoice-edit__foot { display: flex; flex-direction: column; align-items: flex-end; margin: 12px 0 0; }
.invoice-edit__money { border-collapse: collapse; font-size: 13px; }
.invoice-edit__money th { padding: 3px 24px 3px 0; text-align: left; font-weight: 400; }
.invoice-edit__money td { padding: 3px 0; text-align: right; }
.invoice-edit__money tr:first-child th, .invoice-edit__balance th { font-weight: 700; }
.invoice-edit__balance th, .invoice-edit__balance td { border-top: 1px solid var(--ink); }
.invoice-edit__add-money { margin: 8px 0 0; }
.invoice-edit__credit { margin: 10px 0 0; color: var(--no); }
.invoice-edit__side { font-size: 13px; }
.invoice-edit__side h2 { margin: 0; font-size: 16px; }
.invoice-edit__side .form-hint { margin: 2px 0 8px; }
.invoice-edit__call { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.invoice-edit__call h3 { margin: 0 0 2px; font-size: 14px; }
.invoice-edit__counts { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 10px; justify-content: start; margin: 4px 0 8px; }
.invoice-edit__counts dt { color: var(--muted); }
.invoice-edit__counts dd { margin: 0; text-align: right; }
.invoice-edit__note { margin: 6px 0 0; padding: 6px 10px; border-left: 4px solid var(--line); background: var(--surface); }
.invoice-edit__note--operations { border-left-color: var(--no); }
.invoice-edit__note--invoicing { border-left-color: var(--brand); }
.invoice-edit select.company-tag { font-weight: 600; }
@media (max-width: 1100px) { .invoice-edit { grid-template-columns: minmax(0, 1fr); } }

/* ---- The email pop-up (Pages/Invoices/EmailInvoice, email-invoice.js): an email of invoices or of a statement ---- */
.email-invoice { max-width: 860px; }
.email-invoice .form-row { grid-template-columns: 96px minmax(0, 1fr); margin-bottom: 8px; }
.email-invoice .form-actions { padding-left: 110px; }
.email-invoice__files { margin: 0 0 6px; padding: 6px 0 0; list-style: none; }
.email-invoice__done { margin-top: 80px; text-align: center; }
.email-invoice input[type=text] { width: 100%; max-width: none; }
.email-invoice .ts-wrapper { margin: 0; }

/* ---------- Reports (reports/report) ---------- */

.report-form { align-items: flex-end; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.report-form label { display: flex; align-items: center; gap: 6px; }
.report-form input[type=number] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.report-form__percent { width: 80px; text-align: right; }
.report-form__ticks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 4px 10px 6px; border: 1px solid var(--line); border-radius: 6px; flex-basis: 100%; }
.report-form__ticks legend { padding: 0 4px; font-size: 12px; color: var(--muted, #666); }
.report-form__files { display: inline-flex; gap: 6px; margin-left: auto; }
/* The exports (reports/exportcalls, reports/export) */
.export-form input[type=date] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.export-form .form-field--inline .form-hint { flex-basis: 100%; margin-top: 0; }
.export-form .ts-wrapper { max-width: 520px; margin: 0; }
.report-page__title { margin: 4px 0 6px; font-size: 18px; }
.report-page__subtitle { margin: 0 0 8px; font-weight: 600; }
.report-page__generated { margin: 10px 0 0; color: #888; font-size: 12px; }
.report-page__table { overflow-x: auto; }
/* The report's table, with the classes MTD.Reporting's HTML renderer writes (HtmlReportRenderer.Css is a file's) */
.report { width: 100%; border-collapse: collapse; font-size: 13px; }
.report th, .report td { padding: 4px 8px; text-align: left; vertical-align: top; }
.report thead th { position: sticky; top: 0; vertical-align: bottom; border-bottom: 2px solid var(--brand); background: var(--surface); }
.report__group th { padding-top: 12px; font-size: 14px; }
.report__group--2 th { padding-top: 6px; padding-left: 16px; font-size: 13px; }
.report__note td { padding-top: 0; padding-left: 24px; color: #555; }
.report__total td { border-top: 1px solid #a9a9a9; }
.report__total--report td { border-top: 2px solid var(--brand); padding-top: 8px; }
.report .report--right { text-align: right; }
.report .report--center { text-align: center; }
.report--bold { font-weight: bold; }
.report--italic { font-style: italic; }
.report--red { color: var(--no); }
.report--green { color: var(--yes); }
.report--blue { color: #0000ff; }
.report--muted { color: #777; }
.report__tag { margin-left: 12px; font-size: 13px; font-weight: normal; }
.report__icon { font-weight: bold; }
.report__icon--yes { color: var(--yes); }
.report__icon--no { color: var(--no); }
.report__icon--na { color: #999; }
@media print {
    .report-form, .site-header, .page-header .button { display: none; }
    /* (the side menu of the Reports, Setup and Scrub pages isn't printed) */
    .setup { display: block; }
    .setup-menu { display: none; }
    .report thead th { position: static; }
    .report tr { break-inside: avoid; }
}

/* ---- Contact edit (Pages/Contacts/ContactEdit, contact-edit.js). It uses the client edit page's classes. ---- */
.contact-edit__search { margin: 0; }
.contact-edit__image { display: block; max-width: 96px; max-height: 96px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 6px; }
.contact-edit__image[hidden] { display: none; }
.contact-edit__photo-actions { display: flex; align-items: center; gap: 12px; }
.contact-edit__photo-actions [hidden] { display: none; }
.contact-edit__link { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.contact-edit__link .form-label { width: auto; padding: 0; }
.contact-edit__link-picker { width: 340px; max-width: 100%; }