:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1d2330;
  --muted: #5f6878;
  --border: #d9dde4;
  --accent: #1f5fae;
  --accent-text: #ffffff;
  --row-alt: #f8f9fb;
  --error: #b42318;
  --ok: #1e7a3c;
  --selected: #eaf1fb;
  --head-bg: #e2e7ee;
  --head-text: #2b3445;
  --head-line: #aab4c3;
  --divider: #b9c2cf;
  --src-abt: #dde8f7;
  --src-qb: #dcefe1;
  /* The same two colours, very pale, laid over the body cells of each source (paired view). */
  --src-abt-body: rgba(31, 95, 174, 0.05);
  --src-qb-body: rgba(40, 140, 70, 0.07);
  /* Paired view item lines: text, and a line marked by a click. */
  --item-text: #3a4252;
  --marked: #fdf3d3;
  /* Report information (title, facts, value boxes): a cool grey-blue family, kept apart
     from the white tables. */
  --info-bg: #eef2f7;
  --info-line: #cfd8e3;
  --info-label: #e1e8f0;
  --info-value: #f8fafc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { margin: 0; font-size: 18px; }
#user-box { display: flex; gap: 10px; align-items: center; }
#user-box[hidden] { display: none; }

main { padding: 16px 20px 40px; max-width: 1600px; margin: 0 auto; }
/* Main page (index.html): nearly the full width of a 1920-pixel window (user, 2026-10-29); the
   page itself never scrolls sideways, as main shrinks with the window. The Hotels page keeps 1600. */
main.wide { max-width: 1840px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.card.narrow { max-width: 380px; margin: 40px auto; }
.card.selected { background: var(--selected); }
/* Selected conference: a compact one-line strip instead of a full card. */
#selected-conf { padding: 8px 14px; font-size: 13px; }
#selected-conf p { margin: 0; }
#selected-conf .warning { margin-top: 6px; }
h2 { margin: 0 0 8px; font-size: 16px; }
h3 { margin: 16px 0 6px; font-size: 14px; }
h4 { margin: 12px 0 4px; font-size: 13px; }
p { margin: 4px 0; }
.muted { color: var(--muted); }
.error { color: var(--error); white-space: pre-wrap; }
.warning { background: #fff4e5; border: 1px solid #f0b45a; color: #7a4a00; border-radius: 4px; padding: 8px 10px; }

label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-weight: 500; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 8px 0; }
.row label { margin-bottom: 0; }
input, select {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  min-width: 220px;
}
button {
  padding: 7px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
button.secondary, button.small { background: var(--card); color: var(--accent); }
button.small { padding: 3px 9px; font-size: 12px; }
button:disabled { opacity: 0.6; cursor: default; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.panel { border-top-left-radius: 0; }

.report-head { background: var(--info-bg); border: 1px solid var(--info-line); border-radius: 6px; padding: 10px 14px 12px; margin-bottom: 14px; }

/* Report title with its "About this report" toggle on the right; the opened text takes the
   full width below the title. */
.report-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.report-title h2 { margin: 0 0 8px; }
details.about { font-size: 13px; }
details.about summary { cursor: pointer; color: var(--accent); }
details.about[open] { flex-basis: 100%; order: 1; }
.about-body { margin: 6px 0 8px; padding: 8px 12px; background: var(--info-value); border: 1px solid var(--info-line); border-radius: 4px; }
.about-body p { margin: 4px 0; }

/* Report facts: label/value pairs, two pairs per row (one per row on narrow screens). */
dl.facts {
  display: grid; grid-template-columns: max-content 1fr max-content 1fr;
  margin: 0; font-size: 13px;
  border: 1px solid var(--info-line); border-bottom: none; border-radius: 4px; overflow: hidden;
  background: var(--info-value);
}
/* The cells' own bottom lines form the table's bottom edge (one line, not two). With an odd
   number of pairs the last value spans the rest of its row so the edge stays complete. */
dl.facts.odd dd:last-child { grid-column: 2 / -1; }
dl.facts dt, dl.facts dd { margin: 0; padding: 5px 10px; border-bottom: 1px solid var(--info-line); }
dl.facts dt { color: var(--muted); background: var(--info-label); }
@media (max-width: 760px) { dl.facts { grid-template-columns: max-content 1fr; } }

/* Report values as a row of small boxes, label above value. */
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.stat { display: flex; flex-direction: column; padding: 6px 12px; border: 1px solid var(--info-line); border-radius: 4px; background: var(--info-bg); min-width: 110px; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-weight: 600; }

/* One line per record above its table (e.g. a hotel: name, ID, rooms used). */
.item-block + .item-block { margin-top: 18px; }
.item-head { margin: 0 0 8px; font-size: 15px; }
.item-head .muted { font-weight: 400; font-size: 13px; }
.table-actions label.checkbox { margin: 0; }

dl.fields { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 6px 0; }
dl.fields dt { color: var(--muted); }
dl.fields dd { margin: 0; }

.table-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; }
.table-wrap > p { margin: 0; padding: 8px; }
table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; line-height: 1.3; }
/* Lines inside tables are drawn as inset shadows, because collapsed borders do not move with
   sticky cells. --x is an optional vertical divider a cell can set (e.g. inset 1px 0 0 color). */
th, td { padding: 7px 8px; text-align: left; white-space: nowrap; }
td { border-bottom: 1px solid var(--border); box-shadow: var(--x, 0 0 0 transparent); }
/* Header cells have a fixed height so stacked header rows can stick at known offsets (34px each). */
th {
  position: sticky; top: 0; z-index: 1;
  height: 34px; padding: 0 8px;
  background: var(--head-bg); color: var(--head-text);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: var(--x, 0 0 0 transparent), inset 0 -1px 0 var(--head-line);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A header with an explanation on hover (COLUMN_NOTES in app.js): dotted underline and help cursor. */
th.has-hint { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--selected); }
tbody tr.group-head, tbody tr.group-total { background: var(--head-bg); font-weight: 600; }
tbody tr.group-total td { border-bottom: 1px solid var(--border); }
tbody tr.group-head td { border-top: 1px solid var(--border); }
/* Every line shows 1px thick: where two lines would touch (the last row's line on the table
   frame, a first name row's top line under the header line), only one is drawn. */
tbody tr:last-child td { border-bottom: none; }
tbody tr.group-head:first-child td { border-top: none; }
tbody tr.group-gap { background: var(--card); }
tbody tr.group-gap td { height: 20px; padding: 0; border: none; }

/* Fixed first column. Rows get an opaque background so the fixed cells can take it over
   (inherit) and hide the cells scrolling underneath. The divider is a shadow, because
   collapsed table borders do not move with a sticky cell. */
.sticky-first tbody tr { background: var(--card); }
.sticky-first tbody tr:nth-child(even) { background: var(--row-alt); }
.sticky-first tbody tr.group-head, .sticky-first tbody tr.group-total { background: var(--head-bg); }
.sticky-first tbody tr.group-gap { background: var(--card); }
.sticky-first tbody tr.clickable:hover { background: var(--selected); }
.sticky-first th:first-child,
.sticky-first tbody tr:not(.group-head):not(.group-gap) td:first-child { position: sticky; left: 0; background: inherit; }
.sticky-first th:first-child { z-index: 2; background: var(--head-bg); }
.sticky-first tbody td:first-child { z-index: 1; }
.sticky-first tr.group-head span { position: sticky; left: 8px; }
.sticky-first.scrolled-x th:first-child,
.sticky-first.scrolled-x tbody tr:not(.group-head):not(.group-gap) td:first-child { --x: inset -1px 0 0 var(--divider); }
.table-tools { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 12px; }
.table-actions { display: flex; gap: 6px; align-items: center; }
input.table-search { min-width: 220px; padding: 4px 8px; font-size: 13px; }

/* Columns list: a button-like summary that opens a checkbox list over the table. */
.columns-menu { position: relative; }
.columns-menu summary {
  list-style: none;
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--card);
  color: var(--accent);
  cursor: pointer;
}
.columns-menu summary::-webkit-details-marker { display: none; }
.columns-menu summary::after { content: ' ▾'; }
.columns-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  font-size: 13px;
}
.columns-list label.checkbox { display: flex; align-items: center; gap: 6px; margin: 2px 0; white-space: nowrap; }
.columns-list input[type="checkbox"] { min-width: 0; margin: 0; }
.columns-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.loader { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 12px 0; }
.spinner {
  width: 18px; height: 18px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

pre.raw { background: var(--row-alt); border: 1px solid var(--border); padding: 10px; overflow: auto; max-height: 60vh; font-size: 12px; }

/* ---------------------------------------------------------------- paired view (paired.js) */
.side-by-side th.group, .side-by-side th.source { text-align: left; }
/* The label sits in a span that stays in view right of the fixed Booking and Hotel columns
   while its wide header cell scrolls (--pin-total is their width, set by paired.js). */
.side-by-side th.group span, .side-by-side th.source span { position: sticky; left: calc(var(--pin-total, 0px) + 8px); }
/* Three header rows (source, report, column), 34px each. */
.side-by-side thead tr:nth-child(2) th { top: 34px; }
.side-by-side thead tr:nth-child(3) th { top: 68px; }
.side-by-side th.source { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
/* Source tint on every header cell of that source: ABTSolute blue, QuickBooks green. */
.side-by-side th.src-abt { background: var(--src-abt); }
.side-by-side th.src-qb { background: var(--src-qb); }
/* Body cells: the pale tint is laid over the row's own colour (stripe, hover), so both show. */
.side-by-side td.src-abt { background-image: linear-gradient(var(--src-abt-body), var(--src-abt-body)); }
.side-by-side td.src-qb { background-image: linear-gradient(var(--src-qb-body), var(--src-qb-body)); }
/* One divider line per boundary: before a report group (divider), and stronger before the
   QuickBooks source (source-start). The first group after Hotel has none: Hotel's own line serves. */
.side-by-side .divider { --x: inset 1px 0 0 var(--divider); }
.side-by-side .source-start { --x: inset 1px 0 0 var(--head-line); }

/* Paired view: Booking and Hotel stay in place when scrolling sideways. Rows get an opaque
   background for the fixed cells to take over, so cells scrolling underneath are hidden.
   --pin-left is the Booking column's width, set by paired.js. */
.side-by-side tbody tr { background: var(--card); }
/* Stripes per booking (set by paired.js), so a booking and its item lines share one background. */
.side-by-side tbody tr.alt { background: var(--row-alt); }
/* Item lines under a booking: indented and in muted text, with no line between them and the
   booking above. The toggle before the booking number opens and closes them. */
.side-by-side tbody tr:has(+ tr.item-line:not([hidden])) td { border-bottom-color: transparent; }
.side-by-side tr.item-line td { color: var(--item-text); font-size: 12px; }
.side-by-side tr.item-line td:first-child { padding-left: 30px; }
/* Source of an item line ([BTH], [ABT], [QB]), before its name; one width so the names line up. */
.side-by-side .src-tag { display: inline-block; width: 40px; margin-right: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
/* ABT blue and QB green, deeper shades of the ABTSolute and QuickBooks column groups; BTH black (user, 2026-10-29). */
.side-by-side .src-tag.tag-abt { color: #1259b8; }
.side-by-side .src-tag.tag-qb { color: #157a35; }
.side-by-side .src-tag.tag-both { color: #000000; }
/* A clicked item line is marked by its background, which the hover colour does not replace.
   While the mouse is over an item line, its booking row is highlighted (browsing, set by paired.js). */
.side-by-side tbody tr.item-line { cursor: pointer; }
.side-by-side tbody tr.browsing { background: var(--selected); }
/* A booking row whose item lines are open is shown in bold. */
.side-by-side tbody tr:has(button.expander[aria-expanded="true"]) td { font-weight: 600; }
/* expander-space keeps booking numbers without a toggle in line with those that have one. */
button.expander, .expander-space { display: inline-block; width: 18px; margin: 0 4px 0 0; }
/* Fixed cells hold their content in .clip, whose width the drag handles limit (paired.js):
   text that does not fit ends in "…". */
.side-by-side .clip { overflow: hidden; text-overflow: ellipsis; }
/* Drag handle on the inner edge of the fixed left and right parts. */
.resize-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; touch-action: none; }
.resize-handle.at-right { right: -4px; }
/* The right part's handle sits in its third header row and reaches up over the two rows above
   (34px each), so it covers the full header height like the left one (whose cell spans all three). */
.resize-handle.at-left { left: -4px; top: -68px; }
.resize-handle:hover, .resize-handle.resizing { background: var(--accent); opacity: 0.35; }
button.expander {
  width: 18px; height: 18px; padding: 0; margin: 0 4px 0 0;
  border: none; background: none; color: var(--accent); cursor: pointer;
  font-size: 15px; line-height: 1; vertical-align: baseline;
}
button.expander::before { content: '▸'; }
button.expander[aria-expanded="true"]::before { content: '▾'; }
.side-by-side .pin { position: sticky; left: 0; background: inherit; z-index: 1; }
.side-by-side .pin-2 { left: var(--pin-left, 0); --x: inset -1px 0 0 var(--divider); }
.side-by-side th.pin { z-index: 3; background: var(--head-bg); }
/* QuickBooks columns stay at the right edge; each cell's right offset is set by paired.js. */
.side-by-side .pin-right { position: sticky; background: inherit; z-index: 1; }
.side-by-side th.pin-right { z-index: 3; }
.side-by-side th.pin-right.src-qb { background: var(--src-qb); }
.side-by-side th.group.pin-right, .side-by-side th.source.pin-right { right: 0; }
label.checkbox { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; margin: 4px 0 8px; width: max-content; cursor: pointer; }
label.checkbox input { min-width: 0; margin: 0; }

/* Kept last so it wins over the striped-row backgrounds above. */
/* Row under the mouse is highlighted in every table (data rows only, not name, total or spacer
   rows). Fixed cells take the row background over, so they highlight along with it. */
tbody tr:not(.group-head):not(.group-total):not(.group-gap):hover,
.sticky-first tbody tr:not(.group-head):not(.group-total):not(.group-gap):hover,
.side-by-side tbody tr:hover { background: var(--selected); }
/* Booking cards (user, 2026-10-29): the row holding a folded list (ground services, breakfasts)
   is not highlighted as a whole; each row inside the list is, except the vendor name rows. */
.rec-card-table tbody tr.rec-gs-line:not(.group-head):not(.group-total):hover,
.hot-table tbody tr.rec-gs-line:not(.group-head):not(.group-total):hover,
.rec-vendor-grid tbody tr.rec-vendor-name:not(.group-head):not(.group-total):hover { background: transparent; }
/* Rows inside those lists: a fainter highlight than other tables, clearly lighter than the grey
   input boxes, so a box does not seem to melt into its row (user, 2026-10-29). */
.rec-bf-grid tbody tr:not(.rec-vendor-name):not(.group-head):not(.group-total):hover { background: #f8fafd; }
/* A marked item line (paired.js) keeps its colour under the mouse: after the hover rule above. */
.side-by-side tbody tr.item-line.marked,
.side-by-side tbody tr.item-line.marked:hover { background: var(--marked); }

/* Hotel reconciliation (reconcile.js): rate table and the explanation list under it. */
.rec-wrap { max-height: none; margin: 10px 0 14px; width: max-content; max-width: 100%; }
.rec-table { min-width: 0; }
.rec-table td.num { min-width: 90px; }
.rec-table th { height: auto; padding: 6px 10px; vertical-align: bottom; }
.rec-table tbody th { position: static; background: var(--head-bg); text-align: left; }
.rec-table td { padding: 6px 10px; }
.rec-sub { font-weight: 400; color: var(--muted); }
.rec-table tr.rec-total td, .rec-table tr.rec-total th { font-weight: 700; border-top: 2px solid var(--head-line); }
.rec-table tr.rec-nights td { color: var(--muted); }
.rec-table th.rec-group { text-align: center; box-shadow: inset 1px 0 0 var(--divider), inset 0 -1px 0 var(--head-line); }
.rec-table th.rec-first, .rec-table td.rec-ours { box-shadow: inset 1px 0 0 var(--divider); }
.rec-table td.rec-in { padding: 3px 4px; }
.rec-box { width: 84px; min-width: 0; padding: 3px 6px; font: inherit; text-align: right; border: 1px solid var(--border); border-radius: 3px; background: #fff; }
.rec-box:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.rec-box.invalid { border-color: var(--error); }
/* Fixed widths, so the table does not change width while figures are typed: the check text
   varies (✓, ✗ +1,000.00, not a number); a longer one ends in … and shows in full on hover. */
.rec-table td.rec-check { width: 100px; min-width: 100px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rec-table td.rec-hotel-sum { width: 92px; min-width: 92px; }
.rec-ok { color: var(--ok); }
.rec-bad { color: var(--error); }
.rec-table td.rec-hotel-sum { text-align: right; color: var(--muted); }
.rec-table tbody th { vertical-align: middle; }

/* Booking section: hotel totals pinned to the top of the window, then one card per booking. */
.rec-bookings { margin-top: 22px; }
.rec-bookings-head h3 { margin: 0; font-size: 16px; }
.rec-totals {
  position: sticky; top: 0; z-index: 5;
  background: var(--card); border: 1px solid var(--info-line); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(29, 35, 48, 0.08);
  padding: 12px 16px 10px; margin: 10px 0 16px;
}
.rec-totals-title { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rec-tot-row { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-start; }
.rec-tot { min-width: 150px; }
.rec-tot-label { font-size: 12px; color: var(--muted); }
.rec-tot-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-tot-note { font-size: 12px; color: var(--muted); }
.rec-tot-ours { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.rec-hero { padding: 6px 14px; border-radius: 6px; background: var(--selected); border-left: 4px solid var(--accent); min-width: 220px; }
.rec-hero .rec-tot-label { color: var(--accent); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.rec-hero-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.rec-tot-foot { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.rec-card { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 16px; background: var(--card); overflow: hidden; width: max-content; max-width: 100%; }
.rec-card-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 10px 14px; background: var(--info-bg); border-bottom: 1px solid var(--info-line); }
.rec-card-head h4 { margin: 0; font-size: 14px; }
.rec-card-sep { color: var(--muted); font-weight: 400; }
.rec-card-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.rec-card-bal { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Fixed widths, so the card keeps its width while the status and balance change. */
.rec-card-bal { min-width: 170px; text-align: right; }
.rec-status { display: inline-block; min-width: 96px; text-align: center; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; border: 1px solid transparent; }
.rec-st-idle { color: var(--muted); border-color: var(--border); }
.rec-st-progress { color: #8a5a00; background: #fff4e5; border-color: #f0c98a; }
.rec-st-ok { color: var(--ok); background: #e9f6ee; border-color: #a9d9b9; }
/* Differences are facts, not errors (user, 2026-10-28): neutral blue, not red. */
.rec-st-diff { color: var(--accent); background: var(--selected); border-color: #b8cbe6; }

.rec-card-table { min-width: 0; width: 100%; }
.rec-card-table th, .rec-card-table td { position: static; height: auto; box-shadow: none; border-bottom: 1px solid var(--border); padding: 6px 12px; vertical-align: middle; }
.rec-card-table thead th { background: transparent; color: var(--muted); font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--border); padding-top: 8px; }
.rec-card-table tbody tr:nth-child(even) { background: transparent; }
.rec-card-table tbody th { background: transparent; font-weight: 500; text-align: left; min-width: 180px; }
.rec-card-table tr.rec-section th { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--row-alt); padding-top: 8px; }
/* Ground services (hotel) line (user, 2026-10-29), in the tab's booking cards and the Hotels page
   form. Under it: a summary line that folds and unfolds the list; the list per vendor (a vendor
   that looks like the hotel in bold), each service a bullet with its tick; more space before the
   line above Sub Total. The line is greyed (box still enabled) when the booking has none. */
.rec-card-table tr.rec-gs-line td, .hot-table tr.rec-gs-line td { padding: 2px 12px 2px 24px; border-bottom: none; font-size: 12px; color: var(--muted); line-height: 1.45; }
.rec-card-table tr:has(+ tr.rec-gs-line) > *, .hot-table tr:has(+ tr.rec-gs-line) > * { border-bottom: none; }
.rec-card-table tr.rec-gs-summary:not(.open) td, .hot-table tr.rec-gs-summary:not(.open) td,
.rec-card-table tr.rec-gs-last td, .hot-table tr.rec-gs-last td { padding-bottom: 14px; }
.rec-gs-toggle { background: none; border: none; padding: 2px 0; margin: 0; font: inherit; color: var(--accent); cursor: pointer; text-align: left; }
.rec-gs-toggle:hover { text-decoration: underline; }
.rec-gs-arrow { display: inline-block; width: 1.1em; }
.rec-card-table tr.rec-gs-vendor td, .hot-table tr.rec-gs-vendor td { padding-top: 6px; font-weight: 600; color: var(--text); }
tr.rec-gs-vendor .rec-gs-hotel { font-weight: 800; }
.rec-card-table tr.rec-gs-itemrow td, .hot-table tr.rec-gs-itemrow td { padding-left: 34px; }
.rec-gs-item { display: flex; flex-direction: row; align-items: flex-start; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.rec-gs-item input { margin: 3px 0 0; flex: none; min-width: 0; }
/* Breakfasts booked, folded under Breakfast (user, 2026-10-29): opened, a small table with one row
   per room type (room type, box, price, amount); its cells override the card's row styles. */
.rec-bf-grid { border-collapse: collapse; margin: 2px 0 0 18px; width: auto; min-width: 0; }
.rec-card-table tr.rec-gs-line .rec-bf-grid td, .hot-table tr.rec-gs-line .rec-bf-grid td { padding: 3px 10px 3px 0; border: none; background: transparent; font-size: 12px; color: var(--text); white-space: nowrap; vertical-align: middle; }
.rec-card-table tr.rec-gs-line .rec-bf-grid thead td, .hot-table tr.rec-gs-line .rec-bf-grid thead td { font-size: 11px; font-weight: 600; color: var(--muted); padding-bottom: 2px; }
.rec-card-table tr.rec-gs-line .rec-bf-grid td.num, .hot-table tr.rec-gs-line .rec-bf-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rec-bf-grid td.rec-bf-amount { min-width: 80px; }
/* Ground services of the booking with the vendors' claims (user, 2026-10-29), under Balance Due:
   a section heading, the folded summary, and the table grouped by vendor. */
tr.rec-vendor-head th .rec-vendor-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.rec-card-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-name td, .hot-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-name td { padding-top: 8px; font-weight: 600; }
/* The table takes the card's width and no more: the service name wraps, with its dates in small,
   lighter text under it; the claim box is narrower than the card's other boxes (user, 2026-10-29). */
.rec-vendor-grid { width: calc(100% - 18px); table-layout: auto; }
.rec-card-table tr.rec-gs-line .rec-vendor-grid td.rec-vendor-service, .hot-table tr.rec-gs-line .rec-vendor-grid td.rec-vendor-service { white-space: normal; width: 100%; padding-left: 12px; line-height: 1.3; }
.rec-vendor-service .rec-vendor-dates { display: block; font-size: 11px; color: var(--muted); }
.rec-card-table tr.rec-gs-line .rec-vendor-grid tbody tr.rec-vendor-name td, .hot-table tr.rec-gs-line .rec-vendor-grid tbody tr.rec-vendor-name td { padding-left: 0; }
.rec-vendor-grid input.rec-box, .hot-form .hot-table .rec-vendor-grid input.rec-box { width: 90px; padding: 4px 6px; font-size: 13px; }
/* Every service row the same height, with a faint line between rows (user, 2026-10-29). */
.rec-card-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-row td, .hot-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-row td { height: 46px; padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid #edf0f4; }
.rec-card-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-name td, .hot-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-name td { padding-top: 12px; padding-bottom: 4px; border-bottom: 1px solid #edf0f4; }
.rec-card-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-add td, .hot-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-add td { padding-top: 10px; padding-bottom: 16px; }
/* Total, always the last row, and the note under it saying which figure counts in the profit;
   amber when a typed total differs from the claims typed per service (user, 2026-10-29). */
.rec-card-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-total td, .hot-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-total td { height: 46px; padding-top: 6px; padding-bottom: 6px; border-top: 1px solid var(--accent); font-weight: 600; }
.rec-card-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-note-row td, .hot-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-note-row td { white-space: normal; padding-top: 0; }
.rec-vendor-grid tbody tr.rec-vendor-note-row:hover { background: transparent; }
.rec-vendor-note { font-size: 12px; color: var(--muted); line-height: 1.35; }
.rec-vendor-note.rec-vendor-warn { color: #8a5a00; background: #fff6e0; border: 1px solid #f0d9a0; border-radius: 4px; padding: 4px 8px; }
/* A service added by hand: name and vendor boxes side by side in the service column, so the row
   has the same height as the others. */
.rec-manual-fields { display: flex; gap: 6px; align-items: center; }
.rec-vendor-grid input.rec-box.rec-manual-name, .rec-vendor-grid input.rec-box.rec-manual-vendor,
.hot-form .hot-table .rec-vendor-grid input.rec-box.rec-manual-name, .hot-form .hot-table .rec-vendor-grid input.rec-box.rec-manual-vendor { width: auto; min-width: 0; flex: 3 1 0; text-align: left; }
.rec-vendor-grid input.rec-box.rec-manual-vendor, .hot-form .hot-table .rec-vendor-grid input.rec-box.rec-manual-vendor { flex: 2 1 0; }
.rec-manual-remove { background: none; border: none; padding: 2px 6px; color: var(--muted); cursor: pointer; font-size: 13px; }
.rec-manual-remove:hover { color: var(--error); }
.rec-vendor-grid td.rec-bad { color: var(--error); }
.rec-vendor-saved { display: block; margin: 4px 0 0 18px; font-size: 11px; }
.hot-multi-row td { font-style: italic; }
.rec-bf-grid input.rec-box { width: 80px; text-align: right; }
tr.rec-gs-none > th, tr.rec-gs-none > td { opacity: 0.5; }
tr.rec-gs-none:focus-within > th, tr.rec-gs-none:focus-within > td { opacity: 1; }
.rec-card-table td.rec-tag { color: var(--muted); font-size: 12px; width: 120px; min-width: 120px; }
.rec-card-table td.rec-in { width: 100px; }
.rec-card-table td.rec-check { width: 100px; min-width: 100px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rec-card-table td.rec-ours, .rec-card-table td.rec-calc { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.rec-card-table td.rec-calc { padding-right: 18px; font-weight: 600; }
.rec-card-table td.rec-ours { color: var(--item-text); }
.rec-card-table tr.rec-subtotal th, .rec-card-table tr.rec-subtotal td { border-top: 2px solid var(--head-line); font-weight: 700; }
.rec-card-table tr.rec-balance th, .rec-card-table tr.rec-balance td { border-top: 3px double var(--head-line); border-bottom: none; font-weight: 700; font-size: 14px; background: var(--selected); }
.rec-info { color: var(--accent); cursor: help; font-size: 12px; }

/* Profit table below the booking cards. */
.rec-profit { margin-top: 22px; }
.rec-products { gap: 4px 16px; margin: 8px 0; font-size: 13px; }
.rec-profit-table { min-width: 0; width: max-content; }
.rec-profit-table th, .rec-profit-table td { position: static; height: auto; box-shadow: none; padding: 6px 12px; }
.rec-profit-table td.num { min-width: 110px; font-variant-numeric: tabular-nums; }
.rec-profit-table tbody th { background: transparent; font-weight: 500; text-align: left; }
.rec-profit-table td.rec-profit-value { font-weight: 600; }
.rec-profit-table td.rec-ours { color: var(--item-text); }
.rec-profit-table tfoot th, .rec-profit-table tfoot td, .rec-profit-table tfoot td.rec-profit-value { border-top: 2px solid var(--head-line); font-weight: 700; background: transparent; color: var(--text); }
.rec-profit-table tfoot td.rec-bad { color: var(--error); }
.rec-flag { cursor: help; }
.rec-how summary { font-size: 14px; font-weight: 600; cursor: pointer; margin: 0 0 6px; }
.rec-how ul { margin: 0; padding-left: 20px; font-size: 13px; }
.rec-how li { margin: 3px 0; }

/* Hotels page (hotels.html). */
.topbar-link { color: var(--accent); font-size: 14px; }

/* Search Gmail and New email beside the hotel's name (user, 2026-11-02). */
.hot-gmail { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; font-size: 13px; font-weight: 600; border-color: #c9d1dc; }
.hot-gmail:hover { border-color: var(--accent); background: var(--selected); }
.hot-gmail > span { display: inline-flex; }
.hot-gmail > span svg { width: 16px; height: 16px; }
/* Copy for email (user, 2026-11-02): in the Balance Due bar, over the Hotel − ABTSolute column,
   which is always empty for Balance Due. */
.hot-form-final { position: relative; }
.hot-form .hot-form-final .hot-copy { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); padding: 4px 9px; font-size: 12px; background: var(--card); }
.hot-form .hot-form-final .hot-copy:hover { background: var(--selected); }
.hot-toast { position: absolute; left: 22px; right: 18px; bottom: 66px; z-index: 6; padding: 10px 14px; border-radius: 8px; background: #1d2330; color: #fff; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.hot-toast.error { background: var(--error); }
.hot-close { justify-content: center; padding: 2px 9px; font-size: 14px; line-height: 20px; border-color: transparent; }
/* Fixed widths, the same for every booking: switching bookings moves nothing (user, 2026-10-27). */
.hot-booking { width: 600px; max-width: 100%; }
.hot-booking-head { display: flex; align-items: center; gap: 12px; height: 32px; margin-bottom: 4px; }
.hot-booking-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The booking table in the booking form: no fills or stripes, hairline rows, boxes drawn as a line. */
.hot-table { min-width: 0; width: 600px; table-layout: fixed; font-size: 13px; }
.hot-table col.hot-col-name { width: 250px; }
.hot-table col.hot-col-hotel { width: 130px; }
.hot-table col.hot-col-ours { width: 105px; }
.hot-table col.hot-col-diff { width: 115px; }
.hot-table th, .hot-table td { position: static; height: auto; padding: 5px 10px; background: transparent; box-shadow: none; border: none; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
.hot-table tbody tr:nth-child(even), .hot-table tbody tr:hover { background: transparent; }
.hot-table thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); padding-top: 8px; }
.hot-table tbody th { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.hot-table th > span, .hot-table .hot-sub { overflow: hidden; text-overflow: ellipsis; }
.hot-table .hot-sub { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.hot-table tr.hot-section th { padding: 12px 10px 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border-bottom: none; }
.hot-table td.rec-in { padding: 3px 10px; text-align: right; }
.hot-table .rec-box { width: 96px; padding: 4px 6px; border: none; border-radius: 4px; background: #f1f3f6; font-variant-numeric: tabular-nums; }
/* Hover (user, 2026-11-02): white with a thin border in the accent colour, as the grey of the
   former hover was too close to the box's own grey. */
.hot-table .rec-box:hover { background: var(--card); box-shadow: inset 0 0 0 1px var(--accent); }
.hot-table .rec-box:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--card); }
.hot-table .rec-box.invalid { outline: 2px solid var(--error); outline-offset: 0; }
.hot-table .rec-box::placeholder { color: var(--muted); }
.hot-table td.rec-calc { text-align: right; padding-right: 14px; font-variant-numeric: tabular-nums; }
.hot-table td.rec-ours { min-width: 90px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.hot-table td.rec-check { min-width: 96px; font-size: 12px; font-weight: 600; }
.hot-table td.rec-check.rec-bad { color: var(--error); }
.hot-table tr.rec-subtotal th, .hot-table tr.rec-subtotal td { border-top: 1px solid var(--head-line); font-weight: 600; }
.hot-table tr.rec-balance th, .hot-table tr.rec-balance td { border-bottom: none; padding-top: 9px; font-size: 14px; font-weight: 700; }
.hot-table tr.rec-balance td.rec-calc { color: var(--accent); }
.hot-booking-right { flex: none; display: flex; align-items: center; gap: 12px; }
.hot-booking-right .rec-status { width: 112px; min-width: 0; box-sizing: border-box; }
.hot-table td.rec-check { overflow: hidden; text-overflow: ellipsis; }

.hot-unconfirmed { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #8a5a00; background: #fff4e5; border: 1px solid #f0c98a; border-radius: 8px; padding: 0 6px; vertical-align: 1px; }

.hot-table th.hot-how { cursor: help; }

/* Booking Ids with spaces in QuickBooks: bar under the selected conference and its pop-up
   (app.js, drawSpacesBar and openSpacesDialog). Orange when lines are left out, grey otherwise. */
.notice-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 6px; border: 1px solid; border-left-width: 6px; font-size: 15px; }
.notice-bar[hidden] { display: none; }
.notice-warn { background: #fff4e5; border-color: #f0b45a; border-left-color: #d97706; color: #7a4a00; font-weight: 600; }
.notice-warn button { background: #b45309; border-color: #b45309; color: #fff; font-weight: 600; }
.notice-info { background: var(--info-bg); border-color: var(--info-line); border-left-color: var(--muted); color: var(--text); }
.notice-icon { font-size: 20px; line-height: 1; }
.notice-text { flex: 1; }
.notice-bar button { white-space: nowrap; }
dialog.modal { width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); color: var(--text); }
dialog.modal::backdrop { background: rgba(20, 28, 40, 0.45); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--info-bg); }
.modal-head h2 { margin: 0; font-size: 18px; }
dialog.modal > p, .modal-section { margin: 12px 18px; }
.modal-section { padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; }
.modal-section h3 { margin: 0 0 6px; font-size: 15px; }
.modal-section p { margin: 0 0 8px; }
.modal-ids { margin: 0; padding-left: 20px; columns: 2; }
.modal-ids code { font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.modal-fix { color: var(--muted); }

/* Hotels page, layout F (user, 2026-10-28): profit first. Conference totals, then the hotels table. */
.hot-totals { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 16px; }
.hot-total { flex: 1 1 170px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.hot-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.hot-total-main { flex: 2 1 280px; border-color: #9db8dd; }
.hot-total-main strong { font-size: 30px; color: var(--accent); }
.hot-total strong.rec-bad { color: var(--error); } /* a loss, as elsewhere */
.hot-total-label, .hot-total-note { font-size: 12px; color: var(--muted); }
/* Icon left of each total's label (user, 2026-11-03, option A of
   https://claude.ai/artifact/3sVNnUnFZPYdwiSSK2vhsZ): colours as in the side menu. */
.hot-total-head { display: flex; align-items: center; gap: 8px; }
.hot-total-icon { flex: none; width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.hot-total-icon span, .hot-total-icon svg { display: block; width: 17px; height: 17px; }
.hot-total-icon-profit { background: #eaf1fb; color: var(--accent); }
.hot-total-icon-loss { background: #fdecea; color: var(--error); }
.hot-total-icon-sales { background: #e8f4ec; color: #237a4b; }
.hot-total-icon-cost { background: #eceff3; color: #3d4654; }
.hot-total-icon-owe { background: #fff4e5; color: #8a5a00; }
.hot-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.hot-table-hotels { width: 100%; border-collapse: collapse; }
.hot-table-hotels th { padding: 0; background: #f8f9fb; border-bottom: 1px solid var(--border); white-space: nowrap; }
.hot-sort { width: 100%; padding: 9px 12px; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: transparent; border: none; border-radius: 0; text-align: inherit; cursor: pointer; }
.hot-sort:hover, .hot-sort.on { color: var(--accent); }
.hot-table-hotels td { padding: 0 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
/* Every row, hotel or booking, one line of the same height (user, 2026-10-28). */
.hot-table-hotels tbody tr { height: 44px; }
.hot-table-hotels tbody tr:last-child td { border-bottom: none; }
.hot-trow { cursor: pointer; }
.hot-trow:hover { background: #f4f7fb; }
.hot-trow.selected { background: var(--selected); box-shadow: inset 4px 0 0 var(--accent); }
.hot-trow-name { padding: 0; font: inherit; font-weight: 600; color: var(--text); background: none; border: none; text-align: left; cursor: pointer; }
.hot-table-hotels td.hot-profit { font-weight: 700; font-size: 15px; }
/* Bookings listed under an opened hotel row (layout F, step 2). */
.hot-expander { width: 24px; height: 24px; margin-right: 8px; padding: 0; font: inherit; font-size: 12px; color: var(--accent); background: var(--card); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; vertical-align: middle; }
.hot-brow { cursor: pointer; background: #f8fafd; font-size: 13px; }
.hot-brow:hover { background: #f0f4fa; }
/* The selected booking: background only; the stripe marks the selected hotel (user, 2026-10-28). */
.hot-brow.selected { background: #fff8e8; }
.hot-table-hotels tr.hot-brow td { border-bottom-color: #dde2e9; }
.hot-table-hotels tr.hot-brow td:first-child { padding-left: 44px; }
.hot-brow-name { padding: 0; font: inherit; color: var(--text); background: none; border: none; cursor: pointer; }
/* Reconciliation panel (design 5, user 2026-10-30; until then the form sat beside a narrowed
   table): fixed near the right edge of the window, over the table, which keeps all its columns,
   with space around it and rounded corners (user, 2026-11-02; flush with the edges until then). It
   pops in when a booking is opened and out when closed (slid in until 2026-11-02) and stays in
   place while the table scrolls. Its size is fixed (user, 2026-11-02): 600 by 900 pixels, the
   size it had in a full-screen browser on a 1080p screen, smaller only in a smaller window. It can
   be moved by its header (hotels.js). With no booking open nothing takes its place (a 60-pixel
   strip on the right edge did until 2026-11-02). */
.hot-split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.hot-split[hidden] { display: none; }
/* Loading animation of the Hotels view (user, 2026-11-02): centred in the screen right of the side
   menu; the hotel hops, its flag waves and its windows switch on and off. The bar of Booking Ids
   with spaces waits with the rest. */
.hot-loading { position: fixed; inset: 0 0 0 60px; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; color: var(--muted); font-size: 14px; }
.hot-loading[hidden] { display: none; }
.hot-loading svg { width: 96px; height: 108px; overflow: visible; }
.hot-loading-bldg { transform-box: fill-box; transform-origin: 50% 100%; animation: hot-loading-hop 1.2s ease-in-out infinite; }
.hot-loading-house { fill: var(--card); stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hot-loading-flag { fill: #e5484d; transform-box: fill-box; transform-origin: 0 50%; animation: hot-loading-wave 0.6s ease-in-out infinite alternate; }
.hot-loading-shadow { fill: rgba(31, 42, 55, 0.14); transform-box: fill-box; transform-origin: 50% 50%; animation: hot-loading-shadow 1.2s ease-in-out infinite; }
.hot-loading-win { fill: var(--border); animation: hot-loading-win 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.27s); }
/* Each window's place in the scattered order (classes w0-w8): inline styles are not allowed on this site. */
.hot-loading-win.w0 { --i: 0; } .hot-loading-win.w1 { --i: 1; } .hot-loading-win.w2 { --i: 2; } .hot-loading-win.w3 { --i: 3; } .hot-loading-win.w4 { --i: 4; } .hot-loading-win.w5 { --i: 5; } .hot-loading-win.w6 { --i: 6; } .hot-loading-win.w7 { --i: 7; } .hot-loading-win.w8 { --i: 8; }
@keyframes hot-loading-hop { 0%, 100% { transform: scale(1.06, 0.94); } 15% { transform: scale(1); } 45% { transform: translateY(-10px) scale(0.97, 1.03); } 75% { transform: scale(1); } }
@keyframes hot-loading-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(0.7); opacity: 0.5; } }
@keyframes hot-loading-wave { from { transform: scaleX(1) skewY(-6deg); } to { transform: scaleX(0.75) skewY(8deg); } }
@keyframes hot-loading-win { 0%, 8% { fill: var(--border); } 18%, 55% { fill: #f2b705; } 65%, 100% { fill: var(--border); } }
body:has([data-panel="hotels"]:not([hidden]) #hotels-loading:not([hidden])) #spaces-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .hot-loading-bldg, .hot-loading-flag, .hot-loading-shadow { animation: none; } .hot-loading-win { animation: none; fill: #f2b705; } }
.hot-table-col { flex: 1 1 100%; min-width: 0; }
.hot-form { position: fixed; top: 16px; right: 28px; z-index: 45; overscroll-behavior: contain; width: 600px; max-width: calc(100vw - 32px); height: 900px; max-height: calc(100vh - 32px); overflow: hidden; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 32px rgba(20, 30, 50, 0.22); animation: hot-panel-pop-in 0.15s ease-out; }
.hot-form[hidden] { display: none; }
.hot-form.closing { animation: hot-panel-pop-out 0.12s ease-in forwards; pointer-events: none; }
@keyframes hot-panel-pop-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes hot-panel-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.95); } }
@media (prefers-reduced-motion: reduce) { .hot-form, .hot-form.closing { animation: none; } }
/* The panel in three parts (user, 2026-11-02): the top (name, booking buttons, profit, switch,
   band) and the final bar never move; only the part between them scrolls. */
.hot-form-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.hot-form-body::-webkit-scrollbar { display: none; }
/* Final bar: Balance Due (Hotel) or Total (Ground services), the same design in both sections: a
   thin line above, the colour of the section's band (pale blue for Hotel, pale green for Ground
   services; user, 2026-11-02, a faint grey until then), fixed height, the figure in bold on the
   form's columns. The Total box is white, to stand out as a box on the green. Kept quiet on purpose (user, 2026-11-02: a
   heavier first version was too loud). */
.hot-form-final { flex: none; padding: 0 18px; border-top: 1px solid #c9d1dc; border-radius: 0 0 11px 0; }
/* Label and figures in the section's colour (user, 2026-11-02); the ABTSolute figure stays grey. */
.hot-form-final-hotel { background: #eaf1fa; --final-text: var(--accent); }
.hot-form-final-gs { background: #e8f4ec; --final-text: #237a4b; }
.hot-form .hot-form-final .hot-final-table { width: 100%; }
.hot-form .hot-form-final .hot-final-table tr > * { height: 54px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; border: none; background: transparent; vertical-align: middle; font-size: 14px; font-weight: 700; color: var(--final-text); }
.hot-form .hot-form-final .hot-final-table tr > :first-child { font-size: 13px; font-weight: 600; }
.hot-form .hot-form-final .hot-final-table tr > :nth-child(2) { text-align: right; padding-right: 10px; }
.hot-form .hot-form-final .hot-final-table tr > :nth-child(3) { text-align: right; font-size: 13px; font-weight: 400; color: var(--muted); }
.hot-form .hot-form-final .hot-final-table tr > :nth-child(4) { font-size: 13px; }
.hot-form .hot-form-final .hot-final-table tr > td.rec-calc { color: var(--final-text); }
.hot-form .hot-form-final .hot-final-table .rec-box { width: 130px; padding: 7px 9px; font-size: 14px; font-weight: 700; text-align: right; background: var(--card); color: var(--final-text); }
/* An empty Total box shows the itemised claims as a hint, in green, paler than a typed total. */
.hot-form .hot-form-final .hot-final-table .rec-box::placeholder { color: var(--final-text); opacity: 0.65; }
/* The bar's background never changes on hover (user, 2026-11-02); the Total box still reacts. */
.hot-form .hot-form-final .hot-final-table tbody tr, .hot-form .hot-form-final .hot-final-table tbody tr:hover { background: transparent; }
/* The form still scrolls when its content is taller than the window, without a visible scroll
   bar (user, 2026-10-29). */
.hot-form { scrollbar-width: none; }
.hot-form::-webkit-scrollbar { display: none; }
/* Hotel name and profit stay at the top of the form while it scrolls (user, 2026-10-29). */
.hot-form-top { position: relative; z-index: 5; flex: none; background: var(--card); box-shadow: 0 2px 6px rgba(20, 30, 50, 0.06); }
.hot-form-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.hot-form-head h2 { flex: 1; margin: 0; font-size: 16px; }
/* When the hotel's figures were saved, in the Hotel band (user, 2026-11-02; at the foot of the
   panel, with Previous / Next, until then). Styled by id: saving resets its class. */
#hot-saved { font-size: 12px; }
.hot-form-profit { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; background: #f3f7fc; border-bottom: 1px solid var(--border); }
.hot-form-profit-value { font-size: 28px; color: var(--accent); font-variant-numeric: tabular-nums; }
.hot-form-profit-value.rec-bad { color: var(--error); }
.hot-form-profit-note { font-size: 13px; color: var(--muted); }
/* Form sections (user, 2026-10-30): a switch for Hotel / Ground services and a band in the
   section's colour, both in the part that stays at the top. Hotel blue, ground services green;
   pale fills with coloured text and edge (solid colours were too intense, user 2026-10-30). */
/* Two-part switch (design 5, step 4, user 2026-10-30; tab-shaped buttons until then): one bordered
   control, the chosen half in its section's pale colour, the other white with grey text. */
.hot-switch { display: flex; margin: 10px 18px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.hot-switch-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: none; border-radius: 0; background: var(--card); color: var(--muted); }
.hot-switch-btn + .hot-switch-btn { border-left: 1px solid var(--border); }
.hot-switch-btn[aria-pressed="false"]:hover { background: #f6f7f9; }
.hot-switch-hotel[aria-pressed="true"] { background: #eaf1fa; color: var(--accent); font-weight: 700; }
.hot-switch-gs[aria-pressed="true"] { background: #e8f4ec; color: #237a4b; font-weight: 700; }
.hot-switch-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; line-height: 18px; background: rgba(0, 0, 0, 0.06); }
/* The band's colour stands on the panel's yellow left edge, over the band's height only (user,
   2026-11-02; a 3-pixel stripe inside the band until then). */
.hot-band { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; padding: 8px 18px; font-size: 13px; border-bottom: 1px solid var(--border); }
.hot-band::before { content: ''; position: absolute; left: -4px; top: 0; bottom: -1px; width: 4px; background: var(--band-edge); }
.hot-band strong { text-transform: uppercase; letter-spacing: 0.06em; }
.hot-band-sub { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.hot-band-hotel { background: #eaf1fa; color: var(--accent); --band-edge: var(--accent); }
.hot-band-gs { background: #e8f4ec; color: #237a4b; --band-edge: #237a4b; }
.hot-gs-table tr.hot-section th { color: #237a4b; }
/* Ground services section: labels, boxes and headings as in the hotel section (user, 2026-10-30).
   Hotels page form only; the tab keeps the smaller list. */
.hot-form .hot-gs-table tr.rec-gs-line td { padding-left: 10px; font-size: 13px; }
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid { width: 100%; }
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid td { font-size: 13px; }
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid thead td { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid td.rec-vendor-service { padding-left: 0; font-weight: 500; color: var(--text); }
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid tbody td.num { color: var(--muted); }
.hot-form .hot-gs-table .rec-vendor-grid input.rec-box { width: 130px; padding: 7px 9px; font-size: 14px; }
.hot-form-body { padding: 12px 18px; }
/* Ground services list on the form's columns (user, 2026-11-02), as the Hotel section and the
   final bar: Vendor claim under Hotel, ABTSOLUTE under ABTSolute; the service name wraps. */
.hot-form .hot-gs-table tr.rec-bf-list > td { padding: 0 0 14px; }
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid { width: 100%; margin: 0; table-layout: fixed; }
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid tr > td,
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid tbody tr > td.rec-vendor-service,
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid tbody tr.rec-vendor-name > td { padding-left: 10px; padding-right: 10px; }
.hot-form .hot-gs-table .rec-vendor-grid thead td:nth-child(2) { width: 150px; text-align: right; }
.hot-form .hot-gs-table .rec-vendor-grid thead td:nth-child(3) { width: 105px; }
.hot-form .hot-gs-table .rec-vendor-grid thead td:nth-child(4) { width: 140px; }
.hot-form .hot-gs-table .rec-vendor-grid td.rec-bf-in { text-align: right; }
.hot-form .hot-booking, .hot-form .hot-table { width: 100%; }
.hot-form .hot-table col.hot-col-name { width: auto; }
.hot-form .hot-table col.hot-col-hotel { width: 150px; }
.hot-form .hot-table col.hot-col-diff { width: 140px; }
.hot-form .hot-table th, .hot-form .hot-table td { padding-top: 7px; padding-bottom: 7px; }
.hot-form .hot-table .rec-box { width: 130px; padding: 7px 9px; font-size: 14px; }
/* Breakfasts booked in the Hotel section (user, 2026-11-02): the list takes the form's full width
   and its columns line up with the form's (Breakfasts under Hotel, Price under ABTSolute, Amount
   under Hotel − ABTSolute); a long room type wraps instead of pushing the list past the edge.
   Not the Ground services section, whose list is built the same way. */
.hot-form .hot-table:not(.hot-gs-table) tr.rec-bf-list > td { padding: 0 0 14px; }
.hot-form .hot-table:not(.hot-gs-table) .rec-bf-grid { width: 100%; margin: 0; table-layout: fixed; }
.hot-form .hot-table:not(.hot-gs-table) tr.rec-gs-line .rec-bf-grid td { padding: 4px 10px; font-size: 13px; }
.hot-form .hot-table:not(.hot-gs-table) tr.rec-gs-line .rec-bf-grid td:first-child { padding-left: 10px; white-space: normal; line-height: 1.3; }
.hot-form .hot-table:not(.hot-gs-table) .rec-bf-grid thead td:nth-child(2) { width: 150px; text-align: right; }
.hot-form .hot-table:not(.hot-gs-table) .rec-bf-grid thead td:nth-child(3) { width: 105px; }
.hot-form .hot-table:not(.hot-gs-table) .rec-bf-grid thead td:nth-child(4) { width: 140px; }
.hot-form .hot-table:not(.hot-gs-table) .rec-bf-grid td.rec-bf-in { text-align: right; }
.hot-form .hot-table:not(.hot-gs-table) .rec-bf-grid td.rec-bf-amount { min-width: 0; }
/* The PROVISIONAL label's own column, the same width in every row. */
.hot-table-hotels .hot-flag { width: 88px; padding-left: 4px; padding-right: 8px; text-align: left; }
/* Provisional profit (layout F, step 4): Breakfast or Porterage not typed yet. */
.hot-provisional { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8a5a00; background: #fff4e5; border: 1px solid #f0c98a; border-radius: 8px; padding: 0 6px; cursor: help; white-space: nowrap; }
.hot-provisional[hidden] { display: none; }
.hot-total-value { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Row icons and the sliding booking rows (user, 2026-10-28). */
.hot-icon-hotel, .hot-icon-booking { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; }
.hot-icon-hotel svg, .hot-icon-booking svg { display: block; width: 100%; height: 100%; }
.hot-icon-hotel { color: var(--accent); }
.hot-icon-booking { width: 16px; height: 16px; color: #a3aebd; }
/* A booking row's height comes from its cells' wrappers, which slide open and shut. */
.hot-table-hotels tbody tr.hot-brow { height: auto; }
.hot-bcell { height: 43px; line-height: 43px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-bcell > * { vertical-align: middle; }
.hot-bcell .rec-status, .hot-bcell .hot-provisional { line-height: normal; }
.hot-brow.entering .hot-bcell { animation: hot-slide-open 200ms ease-out; }
.hot-brow.leaving .hot-bcell { animation: hot-slide-shut 200ms ease-in forwards; }
@keyframes hot-slide-open { from { height: 0; opacity: 0; } to { height: 43px; opacity: 1; } }
@keyframes hot-slide-shut { from { height: 43px; opacity: 1; } to { height: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hot-brow.entering .hot-bcell, .hot-brow.leaving .hot-bcell { animation: none; } }
/* Long names end in "…" in the full table too (user, 2026-10-28); the full name shows on hover. */
.hot-table-hotels .hot-trow-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.hot-table-hotels tr.hot-brow td:first-child .hot-bcell { max-width: 330px; }
/* Row backgrounds of the hotels table, all set here so the site-wide every-second-row shading
   (tbody tr:nth-child(even)) does not apply: every second hotel is shaded by its place among the
   hotels (class "alt"), bookings have their own pale background (user, 2026-10-28). */
.hot-table-hotels tbody tr { background: var(--card); }
.hot-table-hotels tbody tr.hot-trow.alt { background: var(--row-alt); }
/* Booking rows: a darker cool grey, so they stand apart from the white and light grey hotel rows (user, 2026-10-28). */
.hot-table-hotels tbody tr.hot-brow { background: #edf0f4; }
/* Hover and selection, tied to the table (#hotels-table) so they win over the site-wide row hover
   (tbody tr:not(...):hover, which turned every hovered row blue). A selected row turns slightly
   darker on hover (user, 2026-10-28). */
#hotels-table tbody tr.hot-trow:hover { background: #f4f7fb; }
#hotels-table tbody tr.hot-brow:hover { background: #e4e8ee; }
#hotels-table tbody tr.hot-trow.selected { background: var(--selected); }
#hotels-table tbody tr.hot-trow.selected:hover { background: #dde8f7; }
#hotels-table tbody tr.hot-brow.selected { background: #fff8e8; }
#hotels-table tbody tr.hot-brow.selected:hover { background: #fcefcf; }

/* Side menu of the Hotels page (design B, user 2026-10-30): a 60-pixel strip of icons fixed on the
   left, widening to 320 pixels over the page on hover (the page never moves; it is dimmed slightly).
   Icons coloured by source: ABTSolute blue, QuickBooks green, both sources dark. Group headings show
   as thin lines while narrow; their height does not change, so nothing moves when it widens. */
body:has(#side-menu) { padding-left: 60px; }
.side-menu { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: 60px; box-sizing: border-box; padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; background: var(--card); border-right: 1px solid var(--border); overflow-x: hidden; overflow-y: auto; transition: width 0.15s ease, box-shadow 0.15s ease; }
.side-menu:is(:hover, .pinned), .side-menu:has(:focus-visible) { width: 320px; box-shadow: 6px 0 20px rgba(20, 30, 50, 0.16), 0 0 0 100vmax rgba(31, 42, 55, 0.08); }
.side-abt { --side-c: #1f5fae; }
.side-qb { --side-c: #237a4b; }
.side-both { --side-c: #3d4654; }
.side-head { position: relative; flex: none; height: 24px; padding: 6px 10px 0; box-sizing: border-box; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: transparent; }
.side-head::before { content: ''; position: absolute; left: 10px; width: 20px; top: 14px; height: 1px; background: var(--border); }
.side-head:first-child::before { display: none; }
.side-menu:is(:hover, .pinned) .side-head, .side-menu:has(:focus-visible) .side-head { color: var(--side-c); }
.side-menu:is(:hover, .pinned) .side-head::before, .side-menu:has(:focus-visible) .side-head::before { display: none; }
.side-item { flex: none; display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 10px; border: none; border-radius: 8px; background: transparent; color: var(--side-c); font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; }
.side-item svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-item .side-label { color: var(--text); opacity: 0; transition: opacity 0.1s; }
.side-menu:is(:hover, .pinned) .side-label, .side-menu:has(:focus-visible) .side-label { opacity: 1; }
.side-item:hover { background: #f3f5f8; }
.side-item[aria-selected="true"] { background: #e3ebf6; }
.side-item[aria-selected="true"] .side-label { font-weight: 600; }

/* Side menu conference (step 2, user 2026-10-30): narrow, a badge (search icon, the word after the
   year, the year); widened, the selected conference, the search and the conferences found. The menu
   stays wide while the search box has the cursor (:focus-visible). */
/* The conference area has the same height narrow and wide, so the menu items never move. */
.side-conf { flex: none; height: 116px; margin-bottom: 4px; }
.side-conf-badge { width: 40px; height: 100%; justify-content: center; padding: 6px 0; box-sizing: border-box; border: 1px solid #b8cbe6; border-radius: 8px; background: #eaf1fa; color: #1f5fae; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.side-conf-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#side-conf-abbr { font-size: 10px; font-weight: 700; }
#side-conf-year { font-size: 9px; }
#side-conf-year:empty { display: none; }
.side-conf-panel { display: none; position: relative; width: 300px; height: 100%; box-sizing: border-box; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid #b8cbe6; border-radius: 8px; background: #eaf1fa; }
.side-menu:is(:hover, .pinned) .side-conf-badge, .side-menu:has(:focus-visible) .side-conf-badge { display: none; }
.side-menu:is(:hover, .pinned) .side-conf-panel, .side-menu:has(:focus-visible) .side-conf-panel { display: flex; }
.side-conf-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1f5fae; }
#side-conf-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dates, city, ID and currency of the selected conference (formerly the strip above the page). */
.side-conf-facts { margin-top: -4px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-conf-facts:empty { display: none; }
.side-conf-warn { color: #b7791f; font-weight: 700; }
.side-conf-badge { position: relative; }
.side-conf-badge.mismatch::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #e0a030; }
.side-conf-form { display: flex; gap: 6px; }
.side-conf-form input { flex: 1; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 9px; font-size: 13px; background: var(--card); border-color: #b8cbe6; }
/* A value the browser fills in from earlier searches gets the browser's own pale blue, which
   blends with the panel; it stays white instead (user, 2026-11-02). */
.side-conf-form input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 40px var(--card); -webkit-text-fill-color: var(--text); }
.side-conf-form button { height: 32px; padding: 0 12px; font-size: 13px; }
/* Drop-down under the search box, over the menu items; shown only when it has something. */
.side-conf-drop { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 2; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 140px); overflow-y: auto; padding: 8px; box-sizing: border-box; background: var(--card); border: 1px solid #b8cbe6; border-radius: 8px; box-shadow: 0 8px 20px rgba(20, 30, 50, 0.18); }
.side-conf-drop:has(#conf-status:empty):not(:has(#conf-results > *)) { display: none; }
#conf-status { margin: 0; font-size: 12px; }
#conf-status:empty { display: none; }
.conf-list .warning { margin: 0; font-size: 12px; }
.conf-items { display: flex; flex-direction: column; gap: 2px; }
.conf-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: var(--card); color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
/* Hover (user, 2026-10-30): blue outline and name, pale blue fill. */
.conf-item:hover { background: #f5f9fe; border-color: #8fb0db; }
.conf-item:hover strong { color: var(--accent); }
.conf-item .muted { font-size: 11px; }

/* Booking queue in the reconciliation panel (design 5, step 2, user 2026-10-30): filters, then one
   button per booking of the hotel with a dot in its status colour (grey not started, amber in
   progress, green matches, blue differences); the open booking is pale yellow, as in the table.
   At most about three rows of buttons; more scroll inside the queue. */
.hot-queue { display: flex; flex-direction: column; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.hot-filters { display: flex; gap: 6px; }
.hot-filter { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--muted); font-size: 12px; }
.hot-filter:hover { background: #f3f5f8; }
.hot-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.hot-filter-count { font-size: 11px; opacity: 0.8; }
.hot-chips { display: flex; flex-wrap: wrap; gap: 5px; max-height: 92px; overflow-y: auto; }
.hot-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--card); color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.hot-chip:hover { background: #f3f5f8; }
.hot-chip.current { background: #fff1b8; border-color: #e0c060; font-weight: 600; cursor: default; }
.hot-chip .hot-chip-dot { flex: none; width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: currentColor; }
.hot-chip .hot-chip-dot.rec-st-idle { color: #9aa3ae; }
.hot-chip .hot-chip-dot.rec-st-progress { color: #c08a1e; }

/* Bottom of the side menu (formerly the title bar, user 2026-10-30): old main page, user, Log out. */
.side-menu #user-box { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.side-menu #user-box[hidden] { display: none; }
a.side-item { text-decoration: none; }
/* The user's Gmail address (user, 2026-11-02): two lines when the menu is wide. */
.side-item.side-mail { height: auto; min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.side-mail .side-label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-mail .side-label small { font-size: 11px; color: var(--muted); }
.side-mail .side-label span { overflow: hidden; text-overflow: ellipsis; }
dialog.gmail-dialog { width: min(480px, calc(100% - 32px)); }
/* The email window of the Margin Tracker Email extension (user, 2026-11-02): left of the
   reconciliation panel, so the booking's figures stay in view; the extension draws its content. */
.hot-mail { position: fixed; top: 16px; left: 84px; z-index: 46; width: 700px; max-width: calc(100vw - 108px); height: 900px; max-height: calc(100vh - 32px); border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: 0 10px 32px rgba(20, 30, 50, 0.22); }
.hot-mail[hidden] { display: none; }
.hot-mail.moving { box-shadow: 0 14px 40px rgba(20, 30, 50, 0.3); }
.gmail-form { display: flex; flex-direction: column; gap: 8px; border: none; }
.gmail-form p { margin: 0; }
.gmail-form label { font-weight: 600; font-size: 13px; }
.gmail-form .error:empty { display: none; }
.gmail-form .modal-actions { gap: 8px; }
.side-item.side-user { cursor: default; }
.side-item.side-user:hover { background: transparent; }

/* Ground services section of the reconciliation panel in green, as the Hotel section is in blue
   (user, 2026-10-30): the accent colour is the section's green inside it, so its summary line,
   "+ Add service", the line above Total, the outline of the box being typed in and the heading
   follow; vendor names green, row hover a pale green. */
.hot-form .hot-gs-table { --accent: #237a4b; --selected: #e8f4ec; }
.hot-form .hot-gs-table tr.rec-gs-line .rec-vendor-grid tr.rec-vendor-name td { color: #237a4b; }
.hot-form .hot-gs-table .rec-bf-grid tbody tr:not(.rec-vendor-name):not(.group-head):not(.group-total):hover { background: #f4faf6; }
.hot-form .hot-gs-table button.small:hover { background: #e8f4ec; }
.hot-form .hot-gs-table .rec-box { background: #f1f6f3; }
.hot-form .hot-gs-table .rec-box:hover { background: var(--card); }
.hot-form .hot-gs-table .rec-box:focus { background: var(--card); }

/* Hotels page: no main vertical scroll bar; the page still scrolls with the wheel, keys and touch
   (user, 2026-10-30). */
html:has(#side-menu) { scrollbar-width: none; }
html:has(#side-menu)::-webkit-scrollbar { display: none; }

/* Faded table while a booking is open (option 4, user 2026-10-30): the rows fade to 60%, except
   the open hotel and the open booking, which is linked to the panel by yellow lines and the
   panel's yellow left edge. Pointing at the table brings it to 85% and the row under the pointer
   to full strength. (A hint above the table, "Click another hotel or booking to switch.", was
   removed on 2026-11-02, user.) */
#hotels-table tbody tr { transition: opacity 0.15s; }
#hotels-split.form-open #hotels-table tbody tr { opacity: 0.6; }
#hotels-split.form-open #hotels-table:hover tbody tr { opacity: 0.85; }
#hotels-split.form-open #hotels-table tbody tr:hover,
#hotels-split.form-open #hotels-table tbody tr.selected { opacity: 1; }
#hotels-table tbody tr.hot-brow.selected { background: #fff1b8; box-shadow: inset 0 2px 0 #e0b100, inset 0 -2px 0 #e0b100; }
#hotels-table tbody tr.hot-brow.selected:hover { background: #fde9a0; }
#hotels-table tbody tr.hot-brow.selected .hot-brow-name { font-weight: 700; }
/* The yellow left edge is drawn inside the panel (since 2026-11-02, a border until then) so the
   band's colour can stand on it; the panel's overflow clips at its border. */
.hot-form { border-left: none; padding-left: 4px; }
.hot-form::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #e0b100; }
/* Moving the panel by its header (user, 2026-11-02). */
.hot-form-head { cursor: move; touch-action: none; }
.hot-form-head button { cursor: pointer; }
.hot-form.moving { user-select: none; }
@media (prefers-reduced-motion: reduce) { #hotels-table tbody tr { transition: none; } }

/* Server update notifications (user, 2026-11-03, item 10; mock-up
   https://claude.ai/artifact/1HGw9H4P4ymWGNaRsvaUK6), as a drawer since 2026-11-04 (user, item 6):
   an amber drawer over the whole window width slides down from the top edge (0.25 s), above
   everything; while it is down the page behind is faded to about 40% and cannot be used (backdrop
   + inert, app.js). Close slides it up and leaves a small tab "⚠ n ▼" at the top edge that brings
   it down again. Text 12 px, nothing bold; the three buttons share one height, centred on the
   line. The details list each notification with its scope (Margin Tracker only blue, Whole server
   amber) and the day it was first seen. */
.notice-bar.server-notices { position: fixed; top: 0; left: 0; right: 0; z-index: 901; margin: 0; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 24px 12px; border: none; border-bottom: 1px solid #f0b45a; border-radius: 0 0 10px 10px; font-size: 12px; font-weight: 400; box-shadow: 0 10px 28px rgba(20, 30, 50, 0.22); transform: translateY(calc(-100% - 48px)); transition: transform 0.25s ease; }
.notice-bar.server-notices.down { transform: none; }
.server-notices-head { display: flex; align-items: center; gap: 10px; }
.server-notices .notice-icon { font-size: 14px; }
.server-notices .notice-text { line-height: 1.3; }
.notice-warn.server-notices button { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-height: 0; padding: 0 12px; font-size: 12px; font-weight: 400; line-height: 1; }
.server-notices button.secondary { background: #fff; border-color: #f0b45a; color: #7a4a00; }
.server-notices button.secondary:hover { background: #fde4bd; }
.server-notices-list { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: 12px; row-gap: 6px; align-items: baseline; padding: 8px 0 0 24px; border-top: 1px solid #f6d29b; font-weight: 400; }
.notices-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(255, 255, 255, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.notices-backdrop.on { opacity: 1; pointer-events: auto; }
.notices-tab { position: fixed; top: 0; left: 50%; z-index: 899; display: inline-flex; align-items: center; gap: 6px; height: 24px; min-height: 0; padding: 0 12px; border: 1px solid #f0b45a; border-top: none; border-radius: 0 0 8px 8px; background: #fff4e5; color: #7a4a00; font-size: 12px; font-weight: 400; line-height: 1; box-shadow: 0 2px 6px rgba(20, 30, 50, 0.12); transform: translateX(-50%); transition: transform 0.25s ease; }
.notices-tab:hover { background: #fde4bd; }
.notices-tab.away { transform: translate(-50%, -110%); }
.notices-tab[hidden], .notices-backdrop[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .notice-bar.server-notices, .notices-backdrop, .notices-tab { transition: none; } }
.server-scope { justify-self: start; padding: 1px 10px; border: 1px solid; border-radius: 10px; font-size: 11px; font-weight: 400; white-space: nowrap; }
.server-scope-mt { background: #dde8f7; color: #174a88; border-color: #a9c3e8; }
.server-scope-server { background: #fde4bd; color: #6b3f00; border-color: #e3a24a; }
.server-notice-text { color: #4a3200; }
.server-notice-since { color: #8a5a00; font-size: 12px; text-align: right; white-space: nowrap; }
/* Kept out of sight while text is copied the old way (no clipboard interface). */
.offscreen { position: fixed; left: -9999px; top: 0; }

/* "About the data" under the select-a-conference hint on the Hotels page (user, 2026-11-04):
   a thin line above, a small heading in normal weight, one line per source with a dot in the
   side menu's colour for it (ABTSolute blue, QuickBooks green). */
.data-about { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.data-about h3 { margin: 0 0 8px; font-size: 13px; font-weight: 400; color: var(--muted); }
.data-about ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.data-about li { position: relative; padding-left: 20px; max-width: 70ch; font-size: 14px; line-height: 1.45; color: var(--text); }
.data-about li::before { content: ''; position: absolute; left: 4px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; }
.data-about li strong { font-weight: 600; }
.data-about-abt::before { background: #1f5fae; }
.data-about-abt strong { color: #1f5fae; }
.data-about-qb::before { background: #237a4b; }
.data-about-qb strong { color: #237a4b; }

/* Reports locked until a conference is selected (user, 2026-11-04; hotels.js hotLockReports): the
   six report items are faded and do nothing; the small dark label "Select a conference first"
   stands beside the item pointed at, outside the menu. */
.side-item[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.side-item[aria-disabled="true"]:hover { background: transparent; }
.side-tip { position: fixed; z-index: 60; padding: 5px 10px; border-radius: 6px; background: #2b3240; color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(20, 30, 50, 0.2); }
.side-tip::before { content: ''; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: none; border-right-color: #2b3240; }
.side-tip[hidden] { display: none; }

/* Stronger panel header (user, 2026-11-04, option C of https://claude.ai/artifact/Mm6AZTci514kCDEdSDA8Kn):
   solid blue with the hotel's name in white; Search Gmail, New email and ✕ white on the blue. The
   yellow left edge runs over it as before. */
.hot-form-head { background: #1f5fae; border-bottom-color: #174a88; color: #fff; }
.hot-form-head h2 { color: #fff; }
.hot-form-head button.secondary { background: transparent; border-color: rgba(255, 255, 255, 0.85); color: #fff; }
.hot-form-head button.secondary:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.hot-form-head button.hot-close { border-color: transparent; }

/* Resizing the floating windows by their bottom edge (user, 2026-11-04; hotels.js hotResizeDrag):
   a 10-pixel strip along the bottom edge with an up-down cursor and a small grip line, faint until
   pointed at. In the panel it lies over the final bar; for the email window it is a strip of the
   page laid over the window's bottom edge. */
.hot-resize { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: 10px; cursor: ns-resize; touch-action: none; }
.hot-resize::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #8a94a6; opacity: 0.35; transition: opacity 0.15s; }
.hot-resize:hover::after, body.hot-resizing .hot-resize::after { opacity: 0.9; }
.hot-mail-resize { position: fixed; right: auto; z-index: 47; }
.hot-mail-resize[hidden] { display: none; }
body.hot-resizing, body.hot-resizing * { cursor: ns-resize !important; user-select: none; }
body.hot-resizing .hot-mail { pointer-events: none; }

/* The app's name, ABTS Tally (user, 2026-11-04; canvas https://claude.ai/artifact/J62RgqRXvVyuSB8TsQw86T):
   the company logo for "ABTS" (public/brand/abts-logo.png), "Tally" in Saira, wide (112%) and
   semibold, in the logo's teal, its capitals as tall as the logo's letters; the mark is the split
   tile (public/brand/abts-tally-mark.svg). Saira: SIL Open Font License, public/brand/Saira-OFL.txt. */
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 600; font-stretch: 112%; font-display: swap; src: url('/brand/saira-latin.woff2') format('woff2'); }
.brand-word { margin: 0; font-family: 'Saira', 'Segoe UI', sans-serif; font-stretch: 112%; font-weight: 600; line-height: 1.1; color: #0381a5; white-space: nowrap; }
.brand-logo { height: 0.82em; width: auto; vertical-align: baseline; margin-right: 0.1em; }  /* 0.82em: the logo file has a thin transparent margin; this lines its letters up with the capital T */
.brand-sub { margin: 0; color: var(--muted); }
/* Login screen: the mark, the name and the subtitle centred above the login box. */
.login-view { max-width: 380px; margin: 48px auto 0; }
.login-view[hidden] { display: none; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; }
.login-brand-mark { width: 52px; height: 52px; }
.login-brand .brand-word { font-size: 34px; }
.login-brand .brand-sub { font-size: 12px; }
.card.narrow.login-card { margin: 0; }
/* Side menu: the mark at the top; widened, the name and subtitle beside it. Same height (44 px) in
   both states, so nothing below moves. */
.side-brand { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; margin-bottom: 6px; padding-left: 2px; overflow: hidden; }
.side-brand-mark { flex: none; width: 36px; height: 36px; }
.side-brand-name { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.side-brand .brand-word { font-size: 20px; }
.side-brand .brand-sub { font-size: 11px; }

/* The note when the email window does not answer (user, 2026-11-04; hotels.js hotMailNote): the
   text, and a button that opens Gmail in a tab, on one line. */
.hot-toast.hot-toast-action { display: flex; align-items: center; gap: 12px; }
.hot-toast.hot-toast-action span { flex: 1; }
.hot-toast.hot-toast-action button { flex: none; padding: 5px 12px; border: 1px solid #fff; border-radius: 4px; background: transparent; color: #fff; font-size: 12px; white-space: nowrap; }
.hot-toast.hot-toast-action button:hover { background: rgba(255, 255, 255, 0.15); }