/* Credence — HEC Hospitality. Navy #323759, gold #DBBA38. */

:root {
  --navy-900:#1c2038; --navy-800:#262b47; --navy:#323759; --navy-600:#454b71;
  --navy-300:#8f95b3; --gold:#DBBA38; --gold-600:#c2a22a; --gold-100:#fbf4dd;

  --ink:#14182b; --ink-2:#4a5169; --ink-3:#7c8399;
  --line:#e4e7ee; --line-2:#eef0f5;
  --bg:#f5f6fa; --surface:#ffffff;

  --ok:#0f7b52; --ok-bg:#e8f5ef;
  --warn:#9a6700; --warn-bg:#fff8e6;
  --err:#b3261e; --err-bg:#fdeceb;

  --radius:8px; --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(20,24,43,.06);
  --shadow:0 4px 16px rgba(20,24,43,.09);
  --shadow-lg:0 18px 48px rgba(20,24,43,.16);
  --sidebar-w:248px; --header-h:60px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------- auth ---------------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.auth__brand{background:var(--navy-900);color:#fff;padding:56px 52px;display:flex;
  flex-direction:column;justify-content:space-between}
.auth__brand-logo{width:210px;max-width:70%}
.auth__pitch{font-size:26px;line-height:1.35;font-weight:600;letter-spacing:-.02em;max-width:22ch}
.auth__pitch span{color:var(--gold)}
.auth__note{font-size:13px;color:var(--navy-300);max-width:34ch}
.auth__panel{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth__card{width:100%;max-width:392px}
.auth__title{font-size:23px;margin-bottom:6px}
.auth__sub{color:var(--ink-3);font-size:14px;margin:0 0 26px}

/* ---------------- forms ---------------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s}
.input:hover{border-color:#cdd2dd}
.input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(50,55,89,.12)}
.input[aria-invalid="true"]{border-color:var(--err)}
.input:disabled{background:var(--line-2);color:var(--ink-3);cursor:not-allowed}
select.input{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237c8399' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.field__hint{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--ink-3);font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 7px;border-radius:5px}
.pw-toggle:hover{color:var(--navy);background:var(--line-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;
  border:1px solid transparent;border-radius:var(--radius);font-size:14.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover:not(:disabled){background:var(--navy-800)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}
.btn--ghost:hover:not(:disabled){border-color:#cdd2dd;color:var(--ink)}
.btn--gold{background:var(--gold);color:#4a3c05}
.btn--gold:hover:not(:disabled){background:var(--gold-600)}
.btn--sm{padding:6px 12px;font-size:13px}
.btn--block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn__spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.link-btn{background:none;border:0;padding:0;color:var(--navy);font-size:13.5px;font-weight:600;
  cursor:pointer;font-family:inherit}
.link-btn:hover{text-decoration:underline}

.alert{padding:11px 13px;border-radius:var(--radius);font-size:14px;margin-bottom:16px;border:1px solid}
.alert--err{background:var(--err-bg);border-color:#f3c7c4;color:#7a1b16}
.alert--ok{background:var(--ok-bg);border-color:#b6e0cd;color:#0b5c3e}
.alert--warn{background:var(--warn-bg);border-color:#f0dfa6;color:#6b4a02}
.alert ul{margin:6px 0 0;padding-left:18px}
.alert li{margin-top:2px}

/* ---------------- shell ---------------- */
.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;
  transition:grid-template-columns .18s ease}
/* Collapsing the column rather than hiding the element keeps the content
   area reflowing smoothly instead of jumping. */
.shell--collapsed{grid-template-columns:0 minmax(0,1fr)}
.shell--collapsed .sidebar{overflow:hidden;border-right:0}
.shell--collapsed .sidebar > *{opacity:0;pointer-events:none}
.sidebar{background:var(--navy-900);color:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar__head{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.sidebar__logo{width:150px}
.nav{padding:12px 10px;flex:1}
.nav__group{margin-bottom:14px}
.nav__label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--navy-300);padding:0 10px;margin-bottom:5px}
.nav__item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;
  color:#c9cde0;font:inherit;font-size:14px;text-align:left;border-radius:6px;cursor:pointer}
.nav__item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav__item[aria-current="page"]{background:var(--navy-600);color:#fff;font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold)}
.sidebar__foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.09);font-size:11.5px;color:var(--navy-300)}
/* Sidebar search and expandable groups (30 Oct 2026). */
.nav__search{position:relative;margin:0 0 12px}
.nav__search-ico{position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);
  color:var(--navy-300);pointer-events:none}
.nav__search-in{width:100%;box-sizing:border-box;height:36px;padding:0 32px 0 33px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:13.5px;
  outline:none;transition:border-color .15s,background .15s,box-shadow .15s}
.nav__search-in::placeholder{color:var(--navy-300)}
.nav__search-in:hover{background:rgba(255,255,255,.09)}
.nav__search-in:focus{border-color:var(--gold);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.nav__search-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;
  border-radius:6px;background:none;color:var(--navy-300);font-size:18px;line-height:1;cursor:pointer}
.nav__search-x:hover{background:rgba(255,255,255,.1);color:#fff}
.nav__none{padding:6px 10px 12px;font-size:12.5px;color:var(--navy-300)}
.nav__toggle{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;cursor:pointer;
  padding:5px 10px;border-radius:6px;font-family:inherit;text-align:left}
.nav__toggle:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav__count{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:0;color:var(--navy-300);
  background:rgba(255,255,255,.08);border-radius:9px;padding:1px 7px}
.nav__chev{width:12px;height:12px;flex:0 0 12px;transform:rotate(-90deg);transition:transform .15s}
.nav__group.is-open .nav__chev{transform:none}
.nav__items{display:none}
.nav__group.is-open .nav__items,.nav.is-searching .nav__items{display:block}
.nav.is-searching .nav__chev{visibility:hidden}
.nav__group{margin-bottom:6px}
.nav__group.is-open{margin-bottom:12px}
.nav__item[hidden],.nav__group[hidden]{display:none}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:20}
.topbar__title{font-size:16px;font-weight:600}
.topbar__left{display:flex;align-items:center;gap:12px;min-width:0}
.topbar__right{display:flex;align-items:center;gap:14px}

/* Icon button with a hover hint. A title attribute takes a second to
   appear and cannot be styled, so the tip is drawn from data-tip. */
.icon-btn{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);border-radius:7px;color:var(--ink-2);
  cursor:pointer;position:relative;transition:border-color .12s,color .12s,background .12s}
.icon-btn:hover{border-color:var(--navy);color:var(--navy);background:#fafbfd}
.icon-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* No CSS tooltip here.

   There were two: this pseudo-element, anchored under the button, and the
   floating .c-tip that credence.js attaches to anything carrying
   data-tip. Both fired, so the bell showed its label twice -- one stuck
   behind, one following the pointer. The floating one wins: it is
   delegated from document, so it works for charts and rows rendered
   later, it flips at the edge of the window, and it is the one people
   were reading. */
.who{text-align:right;line-height:1.25}
.who__name{font-size:13.5px;font-weight:600}
.who__meta{font-size:11.5px;color:var(--ink-3)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;
  place-items:center;font-size:13px;font-weight:600}
.content{padding:24px;flex:1}
.page-intro{margin-bottom:12px}
.page-intro h1{font-size:19px}
.page-intro p{margin:3px 0 0;color:var(--ink-3);font-size:13px;line-height:1.4}
/* On a laptop the intro paragraph is read once and then re-read never, so
   it is clamped to a single line and given its full text as a tooltip.
   Two wrapped lines of standing explanation was pushing the table that
   people actually came for below the fold. */
@media (min-width:900px){
  .page-intro p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);margin-bottom:18px}
.card__head{padding:11px 14px;border-bottom:1px solid var(--line-2);display:flex;
  align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.card__title{font-size:15px;font-weight:600}
.card__body{padding:18px}
.card__body--flush{padding:0}

.grid{display:grid;gap:14px}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:15px 17px}
.stat__label{font-size:12px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.stat__value{font-size:26px;font-weight:600;margin-top:5px;letter-spacing:-.02em}
.stat__note{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.stat--warn .stat__value{color:var(--warn)}
.stat--err .stat__value{color:var(--err)}

table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfd;
  position:sticky;top:0;white-space:nowrap}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfd}
.num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;border-radius:0 0 var(--radius-lg) var(--radius-lg)}

.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600;
  border:1px solid;white-space:nowrap}
.tag--ok{background:var(--ok-bg);border-color:#b6e0cd;color:#0b5c3e}
.tag--warn{background:var(--warn-bg);border-color:#f0dfa6;color:#6b4a02}
.tag--err{background:var(--err-bg);border-color:#f3c7c4;color:#7a1b16}
.tag--mute{background:var(--line-2);border-color:var(--line);color:var(--ink-2)}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 20px}
.toolbar .input{max-width:280px}

.empty{padding:44px 20px;text-align:center;color:var(--ink-3)}
.empty h3{font-size:15px;color:var(--ink-2);margin-bottom:5px}
.empty p{margin:0;font-size:14px}

.skeleton{height:13px;border-radius:5px;background:linear-gradient(90deg,#eef0f5,#f7f8fb,#eef0f5);
  background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------------- modal ---------------- */
.modal-back{position:fixed;inset:0;background:rgba(20,24,43,.5);display:grid;place-items:center;
  padding:20px;z-index:100}
.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;
  max-width:460px;max-height:88vh;overflow-y:auto}
.modal__head{padding:17px 20px;border-bottom:1px solid var(--line-2);display:flex;
  align-items:center;justify-content:space-between}
.modal__title{font-size:16px;font-weight:600}
.modal__body{padding:20px}
.modal__foot{padding:14px 20px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:9px}
.modal__x{background:none;border:0;font-size:21px;line-height:1;color:var(--ink-3);cursor:pointer;padding:2px 6px}
.modal__x:hover{color:var(--ink)}

.otp{background:var(--gold-100);border:1px solid #f0dfa6;border-radius:var(--radius);padding:15px;text-align:center}
.otp code{font-size:21px;font-weight:700;letter-spacing:.06em;color:#4a3c05;word-break:break-all}

.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:200}
.toast{background:var(--navy-900);color:#fff;padding:11px 15px;border-radius:var(--radius);
  box-shadow:var(--shadow);font-size:14px;max-width:340px;animation:rise .18s ease-out}
.toast--err{background:#7a1b16}
.toast--ok{background:#0b5c3e}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth__brand{display:none}
}

/* ---------------- master data & import ---------------- */
/* Tabs scroll sideways rather than wrapping onto a second line. Car Rental
   has eleven of them and a wrapped second row cost as much vertical space
   as three table rows. */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);width:100%;margin-bottom:-1px;
  overflow-x:auto;scrollbar-width:thin}
.tabs::-webkit-scrollbar{height:5px}
.tabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:7px 11px;font:inherit;
  font-size:13.5px;font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab--on{color:var(--navy);border-bottom-color:var(--gold)}

.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:13px;
  border-top:1px solid var(--line-2);font-size:13.5px;color:var(--ink-3)}

.kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 20px;margin:0 0 6px}
.kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.kv dt{font-size:12.5px;color:var(--ink-3);font-weight:600;flex-shrink:0}
.kv dd{margin:0;font-size:13.5px;text-align:right;word-break:break-word}
.sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  margin:22px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--line)}

.modal--wide{max-width:860px}

.drop{border:2px dashed var(--line);border-radius:var(--radius-lg);padding:34px 20px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:7px}
.drop:hover,.drop:focus-visible{border-color:var(--navy);background:#fafbfd}
.drop--on{border-color:var(--gold);background:var(--gold-100)}
.drop strong{font-size:15px}
.drop span{font-size:13px;color:var(--ink-3);max-width:60ch;margin:0 auto;line-height:1.5}

.queue{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.qrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(120px,1fr) minmax(140px,auto);
  gap:14px;align-items:center;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fafbfd}
.qrow__name{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.qrow__mod{display:block;font-size:12px;font-weight:400;color:var(--ink-3);text-transform:capitalize}
.qrow__bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.qrow__bar i{display:block;height:100%;background:var(--navy);transition:width .3s;border-radius:4px}
.qrow__state{font-size:12.5px;color:var(--ink-3);text-align:right}

@media (max-width:700px){
  .qrow{grid-template-columns:1fr;gap:7px}
  .qrow__state{text-align:left}
  .kv{flex-direction:column;gap:2px}
  .kv dd{text-align:left}
}

/* ---------------- exhibition performance ---------------- */
.ep-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;margin-bottom:18px}
.ep-chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 18px 14px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.ep-chart__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.ep-chart__title{font-size:15px;font-weight:600}
.ep-chart__caption{font-size:13.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.ep-chart__svg svg{display:block;width:100%;height:auto}
.ep-bar{transition:opacity .12s}
.ep-bar:hover{opacity:.8;cursor:default}

/* Values sit below the bars at a size that reads across a desk, rather
   than as small text squeezed against the plot. */
.ep-values{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line-2)}
.ep-value{display:flex;align-items:baseline;gap:7px;min-width:130px}
.ep-value__dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;transform:translateY(-1px)}
.ep-value__label{font-size:12.5px;color:var(--ink-3)}
.ep-value__num{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-left:auto;
  font-variant-numeric:tabular-nums}
.ep-chart__note{font-size:12px;color:var(--ink-3);margin:10px 0 0;line-height:1.45}

/* One band, two labelled groups, everything on a single row. */
.ep-cards{display:flex;gap:14px;margin-bottom:18px;align-items:stretch;overflow-x:auto;padding-bottom:2px}
.ep-cards__group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:12px 14px 14px;box-shadow:var(--shadow-sm);flex:1 1 auto;min-width:0}
.ep-cards__label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.ep-cards__row{display:flex;gap:10px}
.ep-card{flex:1 1 0;min-width:104px;padding:0 12px;border-left:1px solid var(--line-2)}
.ep-cards__row .ep-card:first-child{border-left:0;padding-left:0}
.ep-card__label{font-size:11.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ep-card__value{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:4px;
  white-space:nowrap;font-variant-numeric:tabular-nums}

.ep-search{max-width:250px;padding:7px 10px;font-size:13.5px}
.ep-search__count{font-size:12.5px;color:var(--ink-3);margin-left:8px;white-space:nowrap}

tr.ep-total td{background:#fafbfd;border-top:2px solid var(--line);font-weight:700}
tr.ep-total td:first-child{font-weight:600}

@media (max-width:1100px){
  .ep-cards{flex-direction:column}
  .ep-cards__row{flex-wrap:wrap}
  .ep-card{min-width:120px}
}
@media (max-width:820px){ .ep-charts{grid-template-columns:1fr} }

/* ---------------- exhibition calling ---------------- */
.cl-block{margin-bottom:24px}
.cl-block__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:10px;flex-wrap:wrap}
.cl-block__title{font-size:17px;font-weight:600;letter-spacing:-.01em}
.cl-block__year{font-size:13px;font-weight:600;color:var(--ink-3)}
.cl-block__meta{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* Three columns so an exhibition fits one screen. min-width:0 lets the
   columns shrink; without it a grid child refuses to go below its
   content and pushes everything out of shape. */
.cl-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:14px;align-items:start}
.cl-grid > *{min-width:0}
.cl-col{margin-bottom:0;min-width:0}
.cl-col__head{padding:11px 14px}
.cl-col__sub{font-size:12px;color:var(--ink-3);white-space:nowrap}
.cl-col__body{padding:10px 14px 14px;min-width:0}

/* Status rows: flex, not a table. The name never wraps, the bar takes
   whatever room is left, the numbers hold fixed columns. */
.cl-srow{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;
  border-radius:5px;transition:background .12s}
.cl-srow:hover{background:#f6f8fb}
.cl-srow:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.cl-srow__dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.cl-srow__name{flex:0 0 auto;font-size:13px;white-space:nowrap}
.cl-srow__bar{flex:1 1 auto;min-width:16px;height:7px;background:#eef0f5;border-radius:4px;
  overflow:hidden}
.cl-srow__bar i{display:block;height:100%;border-radius:4px;min-width:2px}
.cl-srow__n{flex:0 0 auto;min-width:38px;text-align:right;font-weight:700;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.cl-srow__pct{flex:0 0 auto;min-width:42px;text-align:right;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}

.cl-today{display:inline-flex;flex-direction:column;gap:1px;padding:8px 14px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fafbfd;cursor:pointer;
  transition:border-color .12s,background .12s}
.cl-today:hover{border-color:var(--navy);background:#fff}
.cl-today:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.cl-today__label{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.cl-today__value{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.cl-today__note{font-size:11.5px;color:var(--ink-3)}

/* The SVG scales with its viewBox, so no minimum width and no scrollbar. */
.cl-chart svg{display:block;width:100%;height:auto}
.cl-bar{cursor:pointer}
.cl-bar rect:not([fill="transparent"]){transition:opacity .12s}
.cl-bar:hover rect:not([fill="transparent"]){opacity:.75}
.cl-bar:focus-visible{outline:2px solid var(--navy);outline-offset:1px}

/* Focus statuses: number above its label. Much narrower than a header
   row, and it wraps rather than overflowing. */
.cl-fs{padding:10px 0;border-bottom:1px solid var(--line-2)}
.cl-fs:first-child{padding-top:0}
.cl-fs:last-of-type{border-bottom:0}
.cl-fs__head{margin-bottom:8px}
.cl-fs__nums{display:flex;gap:6px;flex-wrap:wrap}
.cl-fs__n{flex:1 1 58px;min-width:56px;display:flex;flex-direction:column;align-items:flex-start;
  gap:1px;padding:6px 8px;background:#fafbfd;border:1px solid var(--line);border-radius:6px;
  font:inherit;cursor:pointer;transition:border-color .12s,background .12s}
.cl-fs__n:hover{border-color:var(--navy);background:#fff}
.cl-fs__n:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.cl-fs__v{font-size:17px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.cl-fs__l{font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.cl-note{font-size:11.5px;color:var(--ink-3);margin:10px 0 0;line-height:1.45}

/* ---- records page ---- */
.cl-records__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cl-toggle{font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;cursor:pointer}
.cl-search__count{font-size:12.5px;color:var(--ink-3);white-space:nowrap}

/* Fixed layout with percentage widths: the table always fits the page,
   so there is never a horizontal scrollbar to hunt for. */
.cl-table-wrap{max-height:calc(100vh - 250px);overflow-y:auto;overflow-x:hidden}
table.cl-records{width:100%;table-layout:fixed;border-collapse:collapse}
table.cl-records thead th{position:sticky;top:0;z-index:2}
.cl-w-company{width:20%}
.cl-w-status{width:11%}
.cl-w-date{width:15%}
.cl-w-contact{width:18%}
.cl-w-remarks{width:36%}
table.cl-records td{vertical-align:top;word-break:break-word}
.cl-c-company__name{font-weight:600}
.cl-c-sub{font-size:12px;color:var(--ink-3);margin-top:2px;word-break:break-word}
.cl-c-date{white-space:nowrap}
.cl-c-date .cl-c-sub{white-space:normal}
.cl-late{color:var(--err);font-weight:600}
.cl-c-contact{font-size:12.5px}
.cl-c-remarks{font-size:12.5px;color:var(--ink-2)}

/* Long remarks are clamped to three lines and expand in place, rather
   than stretching the row and pushing every other column off-screen. */
.cl-rem{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.45}
.cl-rem--open{-webkit-line-clamp:unset;display:block}
.cl-rem__more{background:none;border:0;padding:2px 0 0;font:inherit;font-size:11.5px;
  font-weight:600;color:var(--navy);cursor:pointer}
.cl-rem__more:hover{text-decoration:underline}

@media (max-width:1150px){
  .cl-grid{grid-template-columns:1fr 1fr}
  .cl-grid > .cl-col:nth-child(2){grid-column:1 / -1;order:3}
}
@media (max-width:760px){ .cl-grid{grid-template-columns:1fr} }

/* ---------------- daily sales report ---------------- */
.dsr-card__dot{display:inline-block;width:9px;height:9px;border-radius:2px;flex:0 0 auto}

.dsr-legend{display:flex;gap:14px;flex-wrap:wrap}
.dsr-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.dsr-key i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.dsr-sub{font-size:12.5px;color:var(--ink-3);white-space:nowrap;font-weight:400}
.dsr-note{font-size:12px;color:var(--ink-3);margin:10px 0 0}

.dsr-chart{min-width:0}
.dsr-chart svg{display:block;width:100%;height:auto}
.dsr-bar{cursor:pointer}
.dsr-bar rect:not([fill="transparent"]){transition:opacity .12s}
.dsr-bar:hover rect:not([fill="transparent"]){opacity:.78}
.dsr-bar:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.dsr-dot{transition:r .12s}
.dsr-dot:hover{r:6}
.dsr-arc{transition:opacity .12s}
.dsr-arc:hover{opacity:.82}

.dsr-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dsr-two > *{min-width:0}
.dsr-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.dsr-split > *{min-width:0}
/* Pie on the left, figures stacked to its right. */
.dsr-pie-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dsr-pie-row > svg{flex:0 0 auto}
.dsr-catlist{flex:1 1 150px;min-width:140px}
.dsr-catline{display:flex;flex-direction:column;gap:1px;padding:7px 0;
  border-bottom:1px solid var(--line-2)}
.dsr-catline:last-child{border-bottom:0}
.dsr-catline__top{display:flex;align-items:center;gap:7px;min-width:0}
.dsr-catline__name{font-size:11.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dsr-catline__v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.dsr-catline__p{font-size:11.5px;font-weight:600;color:var(--ink-3)}

/* Top performers: name and total on one line, each invoice type listed
   beneath with its own figure. Numbers, not a chart. */
.dsr-top{padding-top:4px}
.dsr-row{padding:11px 0;border-bottom:1px solid var(--line-2)}
.dsr-row:last-child{border-bottom:0}
.dsr-row__head{display:flex;align-items:baseline;gap:10px}
.dsr-row__rank{flex:0 0 26px;text-align:center;font-size:12.5px;color:var(--ink-3);font-weight:600}
.dsr-medal{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:11.5px;font-weight:700;color:#fff}
.dsr-medal--1{background:#c9a227}
.dsr-medal--2{background:#8c93a8}
.dsr-medal--3{background:#a9764a}
.dsr-row__name{flex:1 1 auto;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.dsr-row--top .dsr-row__name{font-weight:700}
.dsr-row__value{flex:0 0 auto;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.dsr-row__cats{margin:6px 0 0 36px}
.dsr-cat{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:12px}
.dsr-cat__dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.dsr-cat__name{flex:1 1 auto;min-width:0;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.dsr-cat__v{flex:0 0 auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

.dsr-lines{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line-2)}

.dsr-day__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dsr-pie-wrap{display:flex;justify-content:center;align-items:center;min-height:190px}
.dsr-split{align-items:start}
.dsr-catrow{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line-2)}
.dsr-catrow:last-child{border-bottom:0}
.dsr-catrow__name{flex:0 0 auto;font-size:13px;white-space:nowrap}
.dsr-catrow__bar{flex:1 1 auto;min-width:16px;height:7px;background:#eef0f5;border-radius:4px;
  overflow:hidden}
.dsr-catrow__bar i{display:block;height:100%;border-radius:4px}
.dsr-catrow__v{flex:0 0 auto;min-width:78px;text-align:right;font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums}
.dsr-catrow__p{flex:0 0 auto;min-width:48px;text-align:right;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.dsr-tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;
  color:#fff;white-space:nowrap}

@media (max-width:1050px){
  .dsr-two{grid-template-columns:1fr}
  .dsr-split{grid-template-columns:1fr}
}

/* ---------------- chart tooltip ----------------
   One element, moved with a transform so it never triggers layout. */
.c-tip{position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  background:rgba(20,24,43,.96);color:#fff;border-radius:8px;padding:9px 11px;
  font-size:12.5px;line-height:1.45;box-shadow:0 8px 24px rgba(20,24,43,.28);
  max-width:280px;opacity:0;visibility:hidden;transition:opacity .1s ease;
  will-change:transform}
.c-tip--on{opacity:1;visibility:visible}
.c-tip__title{font-weight:700;font-size:12.5px;margin-bottom:5px;white-space:nowrap}
.c-tip__row{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.c-tip__row + .c-tip__row{margin-top:2px}
.c-tip__dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto;transform:translateY(0)}
.c-tip__label{color:rgba(255,255,255,.72);flex:1 1 auto}
.c-tip__value{font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto}

/* ---------------- PI to tax monitor ---------------- */
.pt-head{display:flex;gap:14px;margin-bottom:16px;flex-wrap:wrap;align-items:stretch}
.pt-hero{flex:0 0 auto;min-width:210px;display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px 18px;box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;font:inherit;
  transition:border-color .12s}
.pt-hero:hover{border-color:var(--navy)}
.pt-hero:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pt-hero__label{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.pt-hero__value{font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.pt-hero__sub{font-size:12.5px;color:var(--ink-3)}
.pt-cats{flex:1 1 340px;display:flex;gap:10px;min-width:0}
.pt-cat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:12px 14px;box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;font:inherit;
  transition:border-color .12s}
.pt-cat:hover{border-color:var(--navy)}
.pt-cat:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pt-cat__top{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--ink-3);min-width:0}
.pt-cat__top i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.pt-cat__v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-cat__n{font-size:11.5px;color:var(--ink-3)}

.pt-sub{font-size:12.5px;color:var(--ink-3);font-weight:400;white-space:nowrap}
.pt-note{font-size:12px;color:var(--ink-3);margin:10px 0 0;line-height:1.45}
.pt-chart svg{display:block;width:100%;height:auto}
.pt-dot{cursor:pointer;transition:r .12s}
.pt-dot:hover{r:7}
.pt-arc{transition:opacity .12s;cursor:default}
.pt-arc:hover{opacity:.82}

.pt-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pt-two > *{min-width:0}
.pt-pie-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pt-pie-row > svg{flex:0 0 auto}
.pt-legend{flex:1 1 190px;min-width:180px}
.pt-leg{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;
  padding:5px 0;border:0;border-bottom:1px solid var(--line-2);background:none;font:inherit;
  cursor:pointer;text-align:left}
.pt-leg:last-child{border-bottom:0}
.pt-leg:hover:not(:disabled){background:#f6f8fb}
.pt-leg:disabled{cursor:default;opacity:.7}
.pt-leg__top{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 auto}
.pt-leg__top i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.pt-leg__name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-leg__v{flex:0 0 auto;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.pt-leg__n{font-size:11px;font-weight:400;color:var(--ink-3)}

.pt-age__row{display:flex;align-items:center;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line-2)}
.pt-age__row:last-child{border-bottom:0}
.pt-age__label{flex:0 0 auto;min-width:118px;font-size:12.5px;white-space:nowrap}
.pt-age__bar{flex:1 1 auto;min-width:16px;height:8px;background:#eef0f5;border-radius:4px;
  overflow:hidden}
.pt-age__bar i{display:block;height:100%;border-radius:4px;background:#2E6FD9;min-width:2px}
.pt-age__n{flex:0 0 auto;min-width:44px;text-align:right;font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums}
.pt-age__v{flex:0 0 auto;min-width:96px;text-align:right;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}

.pt-top{padding-top:4px}
.pt-row{display:block;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line-2);
  background:none;font:inherit;text-align:left;cursor:pointer}
.pt-row:last-child{border-bottom:0}
.pt-row:hover{background:#f6f8fb}
.pt-row__head{display:flex;align-items:baseline;gap:10px}
.pt-row__rank{flex:0 0 26px;text-align:center;font-size:12.5px;color:var(--ink-3);font-weight:600}
.pt-medal{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:11.5px;font-weight:700;color:#fff}
.pt-medal--1{background:#c9a227}
.pt-medal--2{background:#8c93a8}
.pt-medal--3{background:#a9764a}
.pt-row__name{flex:1 1 auto;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pt-row--top .pt-row__name{font-weight:700}
.pt-row__value{flex:0 0 auto;text-align:right;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-row__n{display:block;font-size:11px;font-weight:400;color:var(--ink-3)}
.pt-row__cats{display:block;margin:5px 0 0 36px}
.pt-mini{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:12px}
.pt-mini i{width:7px;height:7px;border-radius:2px;flex:0 0 auto}
.pt-mini__n{flex:1 1 auto;min-width:0;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pt-mini__v{flex:0 0 auto;font-weight:600;font-variant-numeric:tabular-nums}

.pt-list__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pt-tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;
  color:#fff;white-space:nowrap}
.pt-lines{font-size:11px;color:var(--ink-3);margin-top:2px}
.pt-late{color:var(--err);font-weight:700}

@media (max-width:1050px){
  .pt-two{grid-template-columns:1fr}
  .pt-cats{flex-wrap:wrap}
}

/* ---------------- customer groups ---------------- */
.cg-stats{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px}
.cg-stat{display:flex;flex-direction:column;gap:1px}
.cg-stat__l{font-size:11.5px;color:var(--ink-3);font-weight:600}
.cg-stat__v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.cg-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cg-toggle{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;
  cursor:pointer}
.cg-note{font-size:12px;color:var(--ink-3);margin:10px 0 0}
.cg-section{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 18px 8px;background:#fafbfd;border-bottom:1px solid var(--line-2)}
.cg-block{padding:12px 18px;border-bottom:1px solid var(--line-2)}
.cg-block__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.cg-block__head .cg-name{max-width:360px;padding:6px 10px;font-size:13.5px}
.cg-block__name{font-size:14px;font-weight:600}
.cg-block__meta{font-size:12px;color:var(--ink-3);flex:1 1 auto}
.cg-members{display:flex;flex-wrap:wrap;gap:6px 14px}
.cg-member{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;
  padding:3px 0}
.cg-member__name{color:var(--ink-2)}
.cg-member__branch{font-size:11px;color:var(--ink-3);background:#f1f3f8;padding:1px 7px;
  border-radius:20px}
.cg-pick{width:auto;margin:0;flex:0 0 auto;cursor:pointer}

/* ---------------- contract performance ---------------- */
.ct-cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ct-card{flex:1 1 150px;min-width:140px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:12px 14px;box-shadow:var(--shadow-sm)}
.ct-card__label{font-size:11.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ct-card__value{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:3px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-err{color:var(--err)}
.ct-warn{color:var(--warn)}
.ct-mute{color:var(--ink-3)}
.ct-ok{color:var(--ok)}

.ct-breaches{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-bottom:18px}
.ct-breach{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:12px 14px;box-shadow:var(--shadow-sm)}
.ct-breach__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ct-breach__label{font-size:12px;color:var(--ink-3);font-weight:600}
.ct-breach__n{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.ct-breach__bar{height:6px;background:#eef0f5;border-radius:3px;overflow:hidden;margin:7px 0 4px}
.ct-breach__bar i{display:block;height:100%;background:var(--err);border-radius:3px}
.ct-breach__sub{font-size:11px;color:var(--ink-3)}

.ct-red{border-color:#f0c9c5}
.ct-red .card__head{background:#fdf3f2}
.ct-sub{font-size:12.5px;color:var(--ink-3);font-weight:400;white-space:nowrap}
.ct-sub2{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.ct-notset{font-size:12px;color:var(--ink-3);font-style:italic}
.ct-term{font-weight:600;font-size:13px}
.ct-term--ok{color:var(--ok)}
.ct-term--err{color:var(--err)}
.ct-term--mute{color:var(--ink-3)}

.ct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ct-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  margin-bottom:16px}
.ct-term-card{background:var(--surface);border:1px solid var(--line);border-left-width:4px;
  border-radius:var(--radius-lg);padding:13px 15px;box-shadow:var(--shadow-sm)}
.ct-term-card--ok{border-left-color:var(--ok)}
.ct-term-card--err{border-left-color:var(--err)}
.ct-term-card--mute{border-left-color:var(--line)}
.ct-term-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-bottom:6px}
.ct-term-card__title{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ct-term-card__value{font-size:22px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.ct-term-card__note{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.ct-term-card__hint{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.4}

.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-two > *{min-width:0}
.ct-chart svg{display:block;width:100%;height:auto}
.ct-months{display:flex;flex-direction:column;gap:2px}
.ct-month{display:flex;align-items:center;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-2)}
.ct-month:last-child{border-bottom:0}
.ct-month__label{flex:0 0 auto;min-width:64px;font-size:13px;font-weight:600}
.ct-month__net{flex:1 1 auto;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ct-note{font-size:12px;color:var(--ink-3);margin:12px 0 0;line-height:1.45}
.ct-tsearch{padding:6px 10px;font-size:13px}

@media (max-width:1050px){ .ct-two{grid-template-columns:1fr} }

/* manual customer grouping */
.cg-results{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:14px}
.cg-results:empty{display:none}
.cg-result{display:flex;flex-direction:column;gap:1px;width:100%;padding:8px 12px;border:0;
  border-bottom:1px solid var(--line-2);background:none;font:inherit;text-align:left;cursor:pointer}
.cg-result:last-child{border-bottom:0}
.cg-result:hover{background:#f6f8fb}
.cg-result__name{font-size:13px}
.cg-result__meta{font-size:11.5px;color:var(--ink-3)}
.cg-picked{display:flex;flex-wrap:wrap;gap:7px;min-height:30px}
.cg-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;background:#eef1f7;
  border-radius:20px;padding:4px 6px 4px 11px}
.cg-chip button{border:0;background:none;font-size:15px;line-height:1;cursor:pointer;
  color:var(--ink-3);padding:0 3px}
.cg-chip button:hover{color:var(--err)}

/* ---------------- invoice receivables ---------------- */
.rc-head{display:flex;gap:14px;margin-bottom:16px;flex-wrap:wrap;align-items:stretch}
.rc-hero{flex:0 0 auto;min-width:230px;display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px 18px;box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;font:inherit;
  transition:border-color .12s}
.rc-hero:hover{border-color:var(--navy)}
.rc-hero:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.rc-hero__label{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.rc-hero__value{font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.rc-hero__sub{font-size:12.5px;color:var(--ink-3)}
.rc-stats{flex:1 1 380px;display:flex;gap:10px;min-width:0;flex-wrap:wrap}
.rc-stat{flex:1 1 130px;min-width:120px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:11px 13px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:2px}
.rc-stat__l{font-size:11.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rc-stat__v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-err{color:var(--err)}
.rc-sub{font-size:12.5px;color:var(--ink-3);font-weight:400;white-space:nowrap}
/* Secondary detail under a table cell -- invoice type, contract status,
   credit period. Capped and clipped rather than nowrap, so a long value
   cannot widen the column and bring back sideways scrolling. */
.rc-meta{font-size:12px;color:var(--ink-3);font-weight:400;line-height:1.35;
  margin-top:2px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-vsec{font-size:13.5px;font-weight:600;color:var(--ink-1);margin:16px 0 2px}
.rc-vsec:first-child{margin-top:0}
.rc-note{font-size:12px;color:var(--ink-3);margin:10px 0 0;line-height:1.45}
.rc-chart svg{display:block;width:100%;height:auto}
.rc-dot{cursor:pointer;transition:r .12s}
.rc-dot:hover{r:7}
.rc-arc{transition:opacity .12s}
.rc-arc:hover{opacity:.82}

.rc-age__row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 0;border:0;
  border-bottom:1px solid var(--line-2);background:none;font:inherit;text-align:left;cursor:pointer}
.rc-age__row:last-child{border-bottom:0}
.rc-age__row:hover{background:#f6f8fb}
.rc-age__label{flex:0 0 auto;min-width:150px;font-size:12.5px;display:flex;align-items:center;gap:8px}
.rc-age__label i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.rc-age__bar{flex:1 1 auto;min-width:16px;height:8px;background:#eef0f5;border-radius:4px;
  overflow:hidden}
.rc-age__bar i{display:block;height:100%;border-radius:4px;min-width:2px}
.rc-age__n{flex:0 0 auto;min-width:46px;text-align:right;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.rc-age__v{flex:0 0 auto;min-width:110px;text-align:right;font-weight:700;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.rc-age__p{flex:0 0 auto;min-width:52px;text-align:right;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}

.rc-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rc-two > *{min-width:0}
.rc-pie-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.rc-pie-row > svg{flex:0 0 auto}
.rc-legend{flex:1 1 190px;min-width:180px}
.rc-leg{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;
  padding:4px 0;border:0;border-bottom:1px solid var(--line-2);background:none;font:inherit;
  cursor:pointer;text-align:left}
.rc-leg:last-child{border-bottom:0}
.rc-leg:hover:not(:disabled){background:#f6f8fb}
.rc-leg:disabled{cursor:default;opacity:.7}
.rc-leg__top{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 auto}
.rc-leg__top i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.rc-leg__name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-leg__v{flex:0 0 auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}

.rc-top{padding-top:4px}
.rc-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px 0;border:0;
  border-bottom:1px solid var(--line-2);background:none;font:inherit;text-align:left;cursor:pointer}
.rc-row:last-child{border-bottom:0}
.rc-row:hover{background:#f6f8fb}
.rc-row__rank{flex:0 0 26px;text-align:center;font-size:12.5px;color:var(--ink-3);font-weight:600}
.rc-medal{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:11.5px;font-weight:700;color:#fff}
.rc-medal--1{background:#c9a227}
.rc-medal--2{background:#8c93a8}
.rc-medal--3{background:#a9764a}
.rc-row__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.rc-row__name{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-row--top .rc-row__name{font-weight:700}
.rc-row__meta{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.rc-row__value{flex:0 0 auto;font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.rc-list__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}

@media (max-width:1050px){ .rc-two{grid-template-columns:1fr} }

/* ---------------- GST reconciliation ---------------- */
.gst-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.gst-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.gst-sub{font-size:12.5px;color:var(--ink-3);font-weight:400}
.gst-sub2{font-size:11px;color:var(--ink-3);margin-top:2px}
.gst-err{color:var(--err)}
.gst-warn{color:var(--warn)}
.gst-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gst-two > *{min-width:0}

.gst-regs{display:flex;flex-wrap:wrap;gap:10px}
.gst-reg{display:flex;flex-direction:column;gap:1px;padding:9px 12px;background:#fafbfd;
  border:1px solid var(--line);border-radius:var(--radius)}
.gst-reg__state{font-size:13px;font-weight:600}
.gst-reg__gstin{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink-3)}
.gst-reg__n{font-size:11px;color:var(--ink-3)}

.gst-file{padding:10px 12px;background:#fafbfd;border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:10px}
.gst-file__name{font-size:13px;font-weight:600;word-break:break-all}
.gst-file__meta{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.gst-upload{display:inline-block;cursor:pointer}
.gst-history{margin-top:10px;font-size:12px}
.gst-history summary{cursor:pointer;color:var(--ink-3);font-size:12px}

.gst-tiles{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.gst-tile{flex:1 1 140px;min-width:130px;display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;background:#fafbfd;border:1px solid var(--line);border-radius:var(--radius)}
.gst-tile__l{font-size:11.5px;color:var(--ink-3);font-weight:600}
.gst-tile__v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.gst-statuses{display:flex;flex-wrap:wrap;gap:8px}
.gst-status{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line);
  border-radius:20px;background:#fff;cursor:pointer;font:inherit}
.gst-status:hover{border-color:var(--navy)}
.gst-status--on{border-color:var(--navy);background:#f2f5fb}
.gst-status__n{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

.gst-age{display:flex;align-items:center;gap:14px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.gst-age:last-child{border-bottom:0}
.gst-age__l{flex:0 0 auto;min-width:150px;font-size:13px}
.gst-age__n{flex:1 1 auto;font-size:12.5px;color:var(--ink-3)}
.gst-age__v{flex:0 0 auto;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}

/* The grid is sized to the viewport: no sideways scrolling, because a
   reconciliation is read across the row. Purchase and GSTR-2B figures
   share a cell rather than taking a column each. */
.gst-table{max-height:70vh;overflow-y:auto;overflow-x:hidden}
.gst-grid{width:100%;table-layout:fixed;font-size:12px;border-collapse:collapse}
.gst-grid th,.gst-grid td{padding:6px 8px;vertical-align:top;overflow:hidden}
.gst-grid thead th{position:sticky;top:0;z-index:3;background:var(--surface);
  border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.gst-grid tbody tr{border-bottom:1px solid var(--line-2)}
.gst-grid tbody tr:hover{background:#f7f9fc}

.gst-c-pick{width:30px}
.gst-c-sup{width:12%}
.gst-c-inv{width:9%}
.gst-c-dt{width:7%}
.gst-c-tax{width:8%}
.gst-c-tot{width:8.5%}
.gst-c-diff{width:6.5%}
.gst-c-pend{width:6.5%}
.gst-c-st{width:10%}
.gst-c-rem{width:7%}
.gst-c-fu{width:9.5%}

.gst-c-sup,.gst-c-inv,.gst-c-rem{word-break:break-word}
.gst-pair{display:flex;flex-direction:column;line-height:1.35}
.gst-pair__a{color:var(--ink)}
.gst-pair__b{color:var(--ink-3);border-top:1px dotted var(--line);padding-top:2px;margin-top:2px}
.gst-zero{color:#c3c8d4}
.gst-legend{padding:8px 18px;font-size:11.5px;color:var(--ink-3);background:#fafbfd;
  border-bottom:1px solid var(--line-2)}

.gst-totals td{background:#f2f5fb;font-weight:700;font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gst-totals--top td{position:sticky;top:30px;z-index:2}
.gst-totals__label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.gst-totals__note{font-weight:400;font-size:11.5px;color:var(--ink-3)}
.gst-grid tfoot .gst-totals td{border-bottom:0}

.gst-settled td{background:#f7f9f7}
.gst-settled .gst-pair__a{opacity:.75}
.gst-pick,#gst-all{width:auto;margin:0;cursor:pointer}
.gst-status--all{border-style:dashed}

@media (max-width:1000px){ .gst-two{grid-template-columns:1fr} }

/* supplier follow-up */
.gst-fu{display:flex;flex-direction:column;gap:2px;width:100%;padding:0;border:0;background:none;
  font:inherit;text-align:left;cursor:pointer;font-size:11.5px;line-height:1.35}
.gst-fu:hover .gst-fu__add{text-decoration:underline}
.gst-fu__c{color:var(--ink-2);word-break:break-word}
.gst-fu__c a{color:var(--navy);text-decoration:none}
.gst-fu__add{color:var(--navy);font-weight:600}
.gst-fu__note{color:var(--ink-3);font-style:italic;display:block;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fu-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 14px;
  background:#fafbfd;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:6px}
.fu-head__fig{display:flex;flex-direction:column;gap:2px;font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums}
.fu-note{font-size:12px;color:var(--ink-3);margin:0 0 10px}
.fu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}

/* ---------------- online booking reconciliation ---------------- */
.ob-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ob-sub{font-size:12.5px;color:var(--ink-3);font-weight:400}
.ob-sub2{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.ob-note{font-size:12px;color:var(--ink-3);margin:12px 0 0}
.ob-err{color:var(--err)}
.ob-warn{color:var(--warn)}
.ob-ok{color:var(--ok)}

/* The channel list is reference material, so it is a strip of small
   chips rather than a wall of cards. The descriptions were dropped: they
   said what the file is, which nobody reading this screen needs told. */
.ob-chans{display:flex;flex-wrap:wrap;gap:8px}
.ob-chan{flex:0 1 auto;padding:5px 10px;background:#fafbfd;
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:baseline;gap:8px}
.ob-chan__n{font-size:12.5px;font-weight:600}
.ob-chan__f{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}

/* One row per uploaded file, banded by month. The month cell spans its
   files, so the eye reads down a month rather than across a repeated
   label. */
.ob-months{table-layout:auto}
.ob-months td,.ob-months th{vertical-align:top}
.ob-mrow--cont>td{border-top:1px dashed var(--line-2)}
.ob-months tbody tr:not(.ob-mrow--cont)>td{border-top:1px solid var(--line)}
.ob-none{color:var(--ink-3);font-size:12.5px;font-style:italic}

.ob-uploads{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;
  margin-bottom:16px}
.ob-up .card__body{padding-top:12px}
.ob-file{padding:8px 10px;background:#fafbfd;border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:8px}
.ob-file__n{font-size:12.5px;font-weight:600;word-break:break-all}
.ob-file__m{font-size:11px;color:var(--ink-3);margin-top:2px}
/* The upload control. Named apart from the row checkbox (.ob-pick), which
   it used to share a class with -- so selecting "all bookings" also
   matched every file input on the screen. */
.ob-filepick{display:inline-block;cursor:pointer}
.ob-hist{margin-top:8px}
.ob-hist summary{cursor:pointer;font-size:11.5px;color:var(--ink-3)}

.ob-tiles{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ob-tile{flex:1 1 120px;min-width:112px;display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  background:#fafbfd;border:1px solid var(--line);border-radius:var(--radius)}
.ob-tile__l{font-size:11.5px;color:var(--ink-3);font-weight:600}
.ob-tile__v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px}
.ob-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line);
  border-radius:20px;background:#fff;cursor:pointer;font:inherit}
.ob-chip:hover{border-color:var(--navy)}
.ob-chip--on{border-color:var(--navy);background:#f2f5fb}
.ob-chip--all{border-style:dashed}
.ob-chip__n{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.ob-crow{cursor:pointer}
.ob-crow:hover{background:#f6f8fb}
.ob-crow--on{background:#f2f5fb}

.ob-table{max-height:70vh;overflow-y:auto;overflow-x:hidden}
.ob-grid{width:100%;table-layout:fixed;font-size:12px;border-collapse:collapse}
.ob-grid th,.ob-grid td{padding:6px 8px;vertical-align:top;overflow:hidden}
.ob-grid thead th{position:sticky;top:0;z-index:3;background:var(--surface);
  border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.ob-grid tbody tr{border-bottom:1px solid var(--line-2)}
.ob-grid tbody tr:hover{background:#f7f9fc}
.ob-done td{background:#f7f9f7}

.ob-c-pick{width:30px}
.ob-c-ch{width:9%}
.ob-c-id{width:11%}
.ob-c-cust{width:12%}
.ob-c-est{width:10%}
.ob-c-n{width:7.4%}
.ob-c-m{width:5.5%}
.ob-c-st{width:14%}
.ob-c-cust,.ob-c-est,.ob-c-id{word-break:break-word}

.ob-tot td{background:#f2f5fb;font-weight:700;font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ob-tot--top td{position:sticky;top:30px;z-index:2}
.ob-tot__l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.ob-tot__n{font-weight:400;font-size:11.5px;color:var(--ink-3)}
.ob-grid tfoot .ob-tot td{border-bottom:0}
.ob-pick{width:auto;margin:0;cursor:pointer}
#ob-all{width:auto;margin:0;cursor:pointer}

/* online recon: Zoho Sheets sources */
.obs-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.obs-toggle{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;
  cursor:pointer}
.obs-toggle input{width:auto;margin:0}
.obs-rows{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto}
.obs-row{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
.obs-row--off{opacity:.6}
.obs-row__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.obs-row__l{font-size:13.5px;font-weight:600}
.obs-row__n{flex:1 1 auto;font-size:11.5px;color:var(--ink-3)}
.obs-row__m{font-size:11.5px;color:var(--ink-3);margin-top:4px;word-break:break-word}
.obs-row__e{font-size:11.5px;color:var(--err);margin-top:4px}
.obs-up{display:inline-block;cursor:pointer}
.obs-tabs{display:flex;flex-wrap:wrap;gap:6px}
.obs-tab{font-size:12px;background:#eef1f7;border-radius:20px;padding:3px 10px}
.obs-meta{font-size:12px;color:var(--ink-3);margin-bottom:10px;display:flex;flex-direction:column;gap:3px}

/* destructive action, and the GST dashboard additions */
.btn--danger{background:var(--err);border-color:var(--err);color:#fff}
.btn--danger:hover{filter:brightness(.94)}
.gst-ok{color:var(--ok)}
.gst-actions{display:flex;gap:6px;white-space:nowrap}
.gst-del:hover{border-color:var(--err);color:var(--err)}

/* =====================================================================
   Searchable pickers
   Shared by every voucher module: a select over nine thousand airports is
   not a select. The list is fetched per keystroke and never held here.
   ===================================================================== */
.combo{position:relative}
.combo__field{position:relative}
.combo__input{padding-right:30px}
.combo__caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--ink-3);font-size:11px}
.combo__clear{position:absolute;right:26px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1;
  padding:2px 4px;border-radius:4px}
.combo__clear:hover{color:var(--err);background:var(--line-2)}
.combo__pop{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);max-height:264px;overflow-y:auto;display:none}
.combo__pop--on{display:block}
.combo__opt{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.combo__opt:last-child{border-bottom:0}
.combo__opt:hover,.combo__opt--on{background:#f2f4fa}
/* NOT a flex container.
   
   display:flex made every text node a flex item, so the highlighted
   fragment was separated from the rest of the word by the 6px gap --
   typing "sed" showed "Sed an" with a space through the middle of
   Sedan. The label is one sentence; it should lay out as one. */
.combo__opt-l{font-size:13.5px;color:var(--ink);line-height:1.35}
.combo__opt-l .tag{margin-left:6px;vertical-align:middle}
.combo__opt-h{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.combo__note{padding:11px;font-size:13px;color:var(--ink-3);text-align:center}
.combo__mark{background:var(--gold-100);border-radius:2px;padding:0 1px}
.combo--set .combo__input{font-weight:600}
.combo--invalid .combo__input{border-color:var(--err)}

/* =====================================================================
   Flight vouchers
   ===================================================================== */
.fv-conf{display:flex;align-items:center;gap:7px;min-width:104px}
.fv-conf__bar{flex:1 1 auto;height:6px;border-radius:4px;background:var(--line-2);overflow:hidden}
.fv-conf__fill{height:100%;border-radius:4px}
.fv-conf__n{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:30px;
  text-align:right}
.fv-conf--complete .fv-conf__fill{background:var(--ok)}
.fv-conf--high .fv-conf__fill{background:#4a9c6d}
.fv-conf--medium .fv-conf__fill{background:var(--gold)}
.fv-conf--low .fv-conf__fill{background:var(--err)}

.fv-sector{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fv-sector__c{font-weight:600;font-size:13px}
.fv-sector__a{color:var(--ink-3);font-size:12px}
.fv-sector__gap{color:var(--ink-3);font-style:italic;font-size:12.5px}
.fv-flight{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fv-flight__n{font-size:11.5px;color:var(--ink-3);font-weight:400;display:block}

.fv-filters{display:flex;gap:6px;flex-wrap:wrap}
.fv-chip{background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 10px;
  font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.fv-chip:hover{border-color:#cdd2dd;color:var(--ink)}
.fv-chip--on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.fv-chip__n{opacity:.75;margin-left:5px;font-variant-numeric:tabular-nums}

.fv-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
@media (max-width:880px){.fv-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fv-form{grid-template-columns:1fr}}
.fv-form .field{margin-bottom:14px;min-width:0}
.fv-form .field--wide{grid-column:1 / -1}
.fv-req{color:var(--err);margin-left:2px}
.fv-src{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 6px;border-radius:20px;background:var(--line-2);color:var(--ink-3);margin-left:6px}
.fv-src--parsed{background:var(--gold-100);color:#6b4a02}
.fv-src--ocr{background:#e8eefc;color:#26407e}
.fv-src--user{background:var(--ok-bg);color:#0b5c3e}

.fv-ask{border:1px solid #f0dfa6;background:var(--warn-bg);border-radius:var(--radius);
  padding:12px 13px;margin-bottom:14px}
.fv-ask__t{font-size:13.5px;font-weight:600;color:#6b4a02;margin-bottom:8px}
.fv-ask__opts{display:flex;flex-wrap:wrap;gap:6px}
.fv-ask__opt{background:#fff;border:1px solid #e6d69a;border-radius:var(--radius);padding:6px 11px;
  font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.fv-ask__opt:hover{border-color:var(--gold);background:var(--gold-100)}
.fv-ask__score{color:var(--ink-3);font-size:11px;margin-left:5px}

.fv-live{border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;
  margin-bottom:14px;background:#fafbfd}
.fv-live--alert{border-color:#f3c7c4;background:var(--err-bg)}
.fv-live__t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.fv-live__g{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}
.fv-live__g b{font-variant-numeric:tabular-nums}

.fv-miss{font-size:12.5px;color:var(--ink-3)}
.fv-miss b{color:var(--warn);font-weight:600}
.fv-ticket{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fv-hist{max-height:210px;overflow:auto;font-size:12.5px}
.fv-hist__r{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.fv-hist__d{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* =====================================================================
   Stat strip: one row, every card a filter
   ===================================================================== */
/* The counters read left-to-right on one line instead of stacking label
   over value. Same information, roughly a third of the height, which is
   what puts the first rows of the table on screen without scrolling. */
/* A grid, not a wrapping flex row. With flex, a sixth card that wrapped
   onto its own line stretched to the full width of the page -- which is
   what "To allocate" was doing. A grid gives every card the same track
   whichever line it lands on. */
.fv-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:7px;margin-bottom:11px}
.fv-stat{min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:7px 11px;cursor:pointer;text-align:left;font:inherit;
  display:flex;align-items:baseline;gap:7px;white-space:nowrap;overflow:hidden;
  transition:border-color .12s,box-shadow .12s}
/* The count always shows in full; the label gives way. Eleven cards on a
   narrow window made "awaiting approval" wider than its track, and with
   nowrap the surplus simply spilled past the edge of the card. */
.fv-stat__value{flex:0 0 auto}
.fv-stat__label{overflow:hidden;text-overflow:ellipsis;min-width:0}
.fv-stat:hover{border-color:#c3cade;box-shadow:var(--shadow)}
.fv-stat--on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.fv-stat__label{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.045em;
  font-weight:600;overflow:hidden;text-overflow:ellipsis;order:2}
.fv-stat__value{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  line-height:1.15;order:1}
.fv-stat--warn .fv-stat__value{color:var(--warn)}
.fv-stat--err .fv-stat__value{color:var(--err)}
.fv-stat--ok .fv-stat__value{color:var(--ok)}
/* Arrivals. Today and tomorrow are the two things on a hotel desk that
   cannot wait, so they read as an accent rather than as a warning --
   a guest arriving is not a problem, it is the job. */
.fv-stat--live{border-color:var(--navy)}
.fv-stat--live .fv-stat__value{color:var(--navy)}

/* =====================================================================
   Right drawer
   ===================================================================== */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,26,38,.34);opacity:0;
  transition:opacity .22s ease;z-index:80}
.drawer-scrim--on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,94vw);background:var(--surface);
  box-shadow:-14px 0 40px rgba(20,26,38,.18);z-index:81;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.drawer--on{transform:translateX(0)}
.drawer--wide{width:min(980px,96vw)}
.drawer__head{display:flex;align-items:center;gap:12px;padding:15px 20px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.drawer__title{font-size:16px;font-weight:700;color:var(--ink);flex:1 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer__sub{font-size:12.5px;color:var(--ink-3);font-weight:400;margin-left:8px}
.drawer__x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer;
  padding:2px 8px;border-radius:6px}
.drawer__x:hover{background:var(--line-2);color:var(--ink)}
.drawer__body{flex:1 1 auto;overflow-y:auto;padding:18px 20px}
.drawer__foot{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:13px 20px;
  border-top:1px solid var(--line);background:#fafbfd}
@media (max-width:620px){
  .drawer,.drawer--wide{width:100vw}
  .drawer__foot{flex-wrap:wrap}
}

/* Ticket reading */
.fv-tk{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.fv-tk__h{padding:10px 13px;background:#f4f7fb;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.fv-tk__b{padding:12px 13px}
.fv-tk--applied .fv-tk__h{background:var(--ok-bg);color:#0b5c3e}
.fv-tk--conflict .fv-tk__h{background:var(--warn-bg);color:#6b4a02}
.fv-diff{width:100%;border-collapse:collapse;font-size:13px}
.fv-diff td{padding:6px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.fv-diff tr:last-child td{border-bottom:0}
.fv-diff__f{color:var(--ink-3);white-space:nowrap}
.fv-diff__was{color:var(--ink-3);text-decoration:line-through}
.fv-diff__now{font-weight:600;color:var(--ink)}
.fv-diff__arrow{color:var(--ink-3)}

/* A field the ticket just corrected. The glow fades on its own, so the
   change is noticed without leaving permanent decoration behind. */
@keyframes fv-flash{
  0%{background:#d8f0e2;box-shadow:0 0 0 4px #d8f0e2}
  70%{background:#eaf7f0;box-shadow:0 0 0 4px #eaf7f0}
  100%{background:transparent;box-shadow:0 0 0 4px transparent}
}
.fv-updated{border-radius:6px;animation:fv-flash 2.6s ease-out 1}
.fv-updated .input{border-color:var(--ok)}
.fv-src--ocr{background:#e8eefc;color:#26407e}
.fv-just{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#0b5c3e;background:var(--ok-bg);border-radius:20px;padding:1px 6px;margin-left:6px}

/* =====================================================================
   Schedule change alerts
   A reschedule on page ten is a reschedule nobody acts on, so these sit
   above the list and ignore paging and filters entirely.
   ===================================================================== */
.fv-alerts{border:1px solid #f0c4c0;background:var(--err-bg);border-radius:var(--radius);
  margin-bottom:16px;overflow:hidden}
.fv-alerts__h{display:flex;align-items:center;gap:9px;padding:10px 14px;
  border-bottom:1px solid #f3d3d0;font-size:13px;font-weight:700;color:#8a2c22}
.fv-alerts__dot{width:8px;height:8px;border-radius:50%;background:var(--err);flex:0 0 auto;
  animation:fv-pulse 2s ease-in-out infinite}
@keyframes fv-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.fv-alerts__more{margin-left:auto;font-weight:600;font-size:12.5px;color:#8a2c22;
  background:none;border:0;cursor:pointer;text-decoration:underline}
.fv-alert{display:flex;align-items:center;gap:14px;padding:10px 14px;
  border-bottom:1px solid #f6e0de;background:#fff;flex-wrap:wrap}
.fv-alert:last-child{border-bottom:0}
.fv-alert__flight{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:78px}
.fv-alert__who{flex:1 1 190px;min-width:0;font-size:13px}
.fv-alert__who small{display:block;color:var(--ink-3);font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-alert__times{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;
  white-space:nowrap;font-size:13.5px}
.fv-alert__was{color:var(--ink-3);text-decoration:line-through}
.fv-alert__now{font-weight:700;color:var(--err)}
.fv-alert__by{font-size:12px;color:#8a2c22;background:#fdeceb;border-radius:20px;padding:2px 8px;
  white-space:nowrap}
.fv-alert__acts{display:flex;gap:6px;margin-left:auto}

/* PNR beneath the flight number, city beneath the code */
.fv-pnr{display:block;font-size:11px;color:var(--ink-3);font-weight:400;
  letter-spacing:.04em;font-variant-numeric:tabular-nums}
.fv-sector{align-items:flex-start;gap:8px}
.fv-sector__end{display:inline-flex;flex-direction:column;min-width:0}
.fv-sector__city{font-size:11px;color:var(--ink-3);font-weight:400;line-height:1.25;
  max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-sector__a{padding-top:2px}

/* =====================================================================
   Car rental
   ===================================================================== */
.cv-stage{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:2px 9px;border-radius:20px;white-space:nowrap}
.cv-stage--booked{background:var(--line-2);color:var(--ink-2)}
.cv-stage--driver_assigned{background:#e8eefc;color:#26407e}
.cv-stage--trip_closed{background:var(--gold-100);color:#6b4a02}
.cv-stage--bill_circulated{background:var(--gold-100);color:#6b4a02}
.cv-stage--costing_shared{background:var(--gold-100);color:#6b4a02}
.cv-stage--to_be_paid{background:var(--warn-bg);color:#6b4a02}
.cv-stage--approved{background:#e3f2ea;color:#0b5c3e}
.cv-stage--paid{background:var(--ok-bg);color:#0b5c3e}
.cv-stage--cancelled{background:var(--err-bg);color:#8a2c22}

/* The stage rail down the side of the drawer */
.cv-rail{display:flex;gap:0;margin-bottom:16px;overflow-x:auto;padding-bottom:2px}
.cv-rail__step{flex:1 1 0;min-width:88px;padding:7px 9px;border-top:3px solid var(--line);
  font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-rail__step--done{border-top-color:var(--ok);color:var(--ink-2)}
.cv-rail__step--skip{border-top-color:#d97706;border-top-style:dashed;color:#9a6700}
.cv-rail__step--now{border-top-color:var(--navy);color:var(--ink);font-weight:700}
.cv-rail__when{display:block;font-size:10.5px;color:var(--ink-3);font-weight:400}

.cv-panel{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.cv-panel__h{padding:9px 13px;background:#f4f7fb;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;gap:8px}
.cv-panel__h .btn{margin-left:auto}
.cv-panel__b{padding:13px}
.cv-panel--warn{border-color:#f0dfa6}
.cv-panel--warn .cv-panel__h{background:var(--warn-bg);color:#6b4a02}
.cv-panel--err{border-color:#f0c4c0}
.cv-panel--err .cv-panel__h{background:var(--err-bg);color:#8a2c22}
.cv-panel--ok .cv-panel__h{background:var(--ok-bg);color:#0b5c3e}

/* Cost against sell */
.cv-cmp{width:100%;border-collapse:collapse;font-size:13px}
.cv-cmp th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  font-weight:600;padding:6px 7px;text-align:right;border-bottom:1px solid var(--line)}
.cv-cmp th:first-child{text-align:left}
.cv-cmp td{padding:7px;border-bottom:1px solid var(--line-2);text-align:right;
  font-variant-numeric:tabular-nums}
.cv-cmp td:first-child{text-align:left;font-variant-numeric:normal}
.cv-cmp tr:last-child td{border-bottom:0}
.cv-cmp__sep{border-left:1px solid var(--line)}
.cv-cmp__tot td{font-weight:700;border-top:1px solid var(--line)}
.cv-cmp__up{color:var(--ok)}
.cv-cmp__down{color:var(--err)}
.cv-cmp tr.cv-cmp--issue{background:var(--err-bg)}
.cv-cmp__why{display:block;font-size:11px;color:var(--err);font-variant-numeric:normal}

.cv-money{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.cv-money div{min-width:104px}
.cv-money span{display:block;font-size:11px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.04em}
.cv-money b{font-size:16px;font-variant-numeric:tabular-nums}

.cv-msg{background:#f7f9fc;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;font-size:13px;white-space:pre-wrap;font-family:var(--mono,inherit)}
.cv-pay{width:100%;border-collapse:collapse;font-size:13px}
.cv-pay td,.cv-pay th{padding:6px 7px;border-bottom:1px solid var(--line-2);text-align:left}
.cv-pay th{font-size:11px;text-transform:uppercase;color:var(--ink-3);letter-spacing:.04em}
.cv-pay .num{text-align:right;font-variant-numeric:tabular-nums}

/* Bulk actions on the car list */
.cv-bulk{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 14px;
  background:var(--navy);color:#fff;border-radius:var(--radius);margin-bottom:11px}
.cv-bulk__n{font-weight:700;font-size:13.5px;white-space:nowrap}
.cv-bulk .btn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
.cv-bulk .btn:hover{background:rgba(255,255,255,.24)}
.cv-bulk__x{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;
  font-size:12.5px;text-decoration:underline}
.cv-check{width:34px}
.cv-check input{cursor:pointer;width:15px;height:15px}
/* The pills sit side by side. This was a column, which is why the car band
   grew to three lines and threw the row spacing out -- it was written when
   status lived in a narrow column of its own and there was nowhere to go
   but down. In the band there is width, so they run across. */
.cv-status{display:inline-flex;flex-direction:row;gap:5px;align-items:center;flex-wrap:nowrap}
.cv-pill{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:20px;white-space:nowrap}
.cv-pill--pending{background:var(--line-2);color:var(--ink-3)}
.cv-pill--partially_paid{background:var(--warn-bg);color:#6b4a02}
.cv-pill--paid{background:var(--ok-bg);color:#0b5c3e}
.cv-pill--review{background:var(--warn-bg);color:#6b4a02}

/* =====================================================================
   The picker list was appearing behind the next section of the form.
   z-index only competes within a stacking context, and every .field sits
   in the same one — so a popup in an earlier field lost to the markup that
   came after it, whatever its z-index. Lifting the whole field while its
   list is open puts the comparison back where it belongs.
   ===================================================================== */
.field:has(.combo--open){position:relative;z-index:70}
.combo--open{z-index:70}
.combo__pop{z-index:70;max-height:266px}
/* Fallback for browsers without :has() — the picker raises itself. */
.combo.combo--open{position:relative}
.fv-form{position:relative}
.cv-panel__b{overflow:visible}
.cv-panel{overflow:visible}
.drawer__body{overflow-x:visible}

/* Master clean-up */
.cv-dupe{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:11px;overflow:hidden}
.cv-dupe__h{padding:8px 12px;background:var(--warn-bg);color:#6b4a02;font-size:12.5px;font-weight:700}
.cv-dupe__b{padding:10px 12px}
.cv-dupe__row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;flex-wrap:wrap}
.cv-dupe__row label{display:flex;align-items:center;gap:6px;cursor:pointer}
.cv-dupe__used{font-size:11.5px;color:var(--ink-3)}

/* A drawer opened from inside another: narrower, so the panel it came from
   stays visible at the edge and the relationship is obvious. */
.drawer--stacked{width:min(620px,88vw)}
.drawer--stacked.drawer--wide{width:min(720px,90vw)}

/* Stage colours run red through amber to green as a voucher progresses, so
   a glance down the column shows what is stuck near the start. */
.cv-stage--booked{background:#fdecea;color:#a8322a}
.cv-stage--driver_assigned{background:#fdf0e3;color:#9a5a12}
.cv-stage--trip_closed{background:#fdf6e0;color:#7d5f05}
/* The bill going round is three hand-offs, not one, and the gradient keeps
   running through them so a glance still tells you how far along a row is.
   'bill_circulated' stays defined because an older saved filter can still
   produce it. */
.cv-stage--purchase_submitted{background:#fdf9de;color:#756204}
.cv-stage--sales_received{background:#fbf8dd;color:#6f6404}
.cv-stage--accounts_received{background:#f8f9dc;color:#666604}
.cv-stage--bill_circulated{background:#fbf8dd;color:#6f6404}
.cv-stage--costing_shared{background:#f4f7dc;color:#5c6404}
.cv-stage--to_be_paid{background:#eef6dc;color:#4a6a10}
.cv-stage--approved{background:#e2f2e2;color:#256b31}
.cv-stage--paid{background:#d7f0df;color:#0b5c3e}
.cv-stage--cancelled{background:#eceef2;color:#5c6478;text-decoration:line-through}

/* Import progress. Reading three thousand rows behind a silent spinner is
   indistinguishable from nothing happening. */
.li-prog{display:flex;align-items:center;gap:12px;padding:14px 0}
.li-prog__t{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.li-prog__bar{flex:1 1 auto;height:8px;background:var(--line-2);border-radius:20px;overflow:hidden}
.li-prog__fill{height:100%;background:var(--navy);border-radius:20px;transition:width .25s ease}
.li-prog__n{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:44px;
  text-align:right}
.li-diff{display:flex;align-items:center;gap:8px;font-size:12px;padding:2px 0}
.li-diff__take{margin-left:auto}

/* =====================================================================
   Date range filter
   Shared by every voucher list. The preset select and the two custom
   fields sit on one line and wrap together on a narrow screen, so the
   "to" never ends up orphaned from the "from" it belongs to.
   ===================================================================== */
.dr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dr__preset{max-width:190px}
.dr__custom{display:inline-flex;align-items:center;gap:7px}
.dr__custom .input{max-width:158px}
.dr__to-word{font-size:12.5px;color:var(--ink-3)}
.dr__note{font-size:12.5px;color:var(--ink-3)}
.dr__note--bad{color:var(--err);font-weight:600}
/* An invalid pair is shown on the field as well as in the note, because on
   a wide screen the note can sit far enough away to be missed. */
.dr__note--bad ~ .dr__custom .input{border-color:var(--err)}

/* =====================================================================
   Reports and the import review
   ===================================================================== */
.cv-rep{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:11px}
.cv-rep__card{border:1px solid var(--line);border-radius:var(--radius);padding:13px;
  cursor:pointer;background:var(--surface);text-align:left;transition:border-color .12s ease}
.cv-rep__card:hover{border-color:var(--navy)}
.cv-rep__card--on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.cv-rep__t{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.cv-rep__b{font-size:12px;color:var(--ink-3);line-height:1.45}
.cv-rep__scope{display:inline-block;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.04em;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--line-2);color:var(--ink-2);margin-bottom:6px}

.cv-chk{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:9px}
.cv-chk--blocking{border-left:3px solid var(--err)}
.cv-chk--warning{border-left:3px solid var(--warn)}
.cv-chk--tidy{border-left:3px solid var(--line)}
.cv-chk__h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cv-chk__n{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.cv-chk__t{font-size:13.5px;font-weight:700;color:var(--ink)}
.cv-chk__share{font-size:12px;color:var(--ink-3)}
.cv-chk__w{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.5}
.cv-chk__acts{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.cv-chk__fix{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  padding:2px 7px;border-radius:999px}
.cv-chk__fix--fillable{background:#e8eefc;color:#26407e}
.cv-chk__fix--derivable{background:var(--ok-bg);color:#0b5c3e}
.cv-chk__fix--individual{background:var(--line-2);color:var(--ink-2)}
.cv-chk__fix--master{background:var(--gold-100);color:#6b4a02}

/* The instruction, shown back as the figures it turned into rather than
   only as the words that were typed. */
.cv-instr{border:1px solid var(--line);border-radius:var(--radius);padding:11px;margin-top:9px;
  background:var(--soft)}
.cv-instr__s{font-size:13px;font-weight:600;color:var(--ink)}
.cv-instr__w{font-size:12.5px;color:#6b4a02;margin-top:5px}
.cv-instr__e{font-size:12.5px;color:var(--err);margin-top:5px;font-weight:600}
.cv-instr__help{font-size:12px;color:var(--ink-3);margin-top:8px;line-height:1.6}
.cv-instr__help code{background:var(--line-2);padding:1px 5px;border-radius:3px;
  font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cv-ticket--missing{color:var(--err);font-size:12px;font-weight:600}
/* The ticket link pair. Kept small and inline so the column stays narrow. */
.fv-tkt{font-size:12.5px;white-space:nowrap}
.fv-tkt a{color:var(--navy);text-decoration:none;font-weight:600}
.fv-tkt a:hover{text-decoration:underline}

/* =====================================================================
   Banded voucher rows
   ---------------------------------------------------------------------
   Both voucher tables had grown past the width of a laptop screen, and a
   table you have to scroll sideways is one where half the record is
   permanently out of sight.

   The fix is to stop treating status as a column. It is a property of the
   whole record, so it gets a thin strip spanning the full width above each
   row -- which reads better than a column anyway, costs no horizontal
   space at all, and leaves room for the fields that do need columns.

   Two <tr>s make one record. They are tied together visually: the band has
   no bottom border, the data row carries the separator, and both light up
   together on hover so the pair reads as one thing.
   ===================================================================== */
.tbl-band > td{
  padding:6px 14px 3px;border-bottom:0;background:var(--soft);
  border-top:1px solid var(--line);
}
tbody tr.tbl-band:first-child > td{border-top:0}
.tbl-band__in{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;font-size:12px;
  min-width:0;overflow:hidden}
/* Whatever a screen drops into the band -- the car stage block is a div of
   pills -- lies flat on one line rather than becoming a column. Without
   this the car band grew to three lines and pushed every row apart. */
.tbl-band__in > *{flex:0 0 auto}
.tbl-band__in .cv-stage-wrap,
.tbl-band__in > div{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;margin:0}
.tbl-band__sub{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0}
.tbl-band__no{font-weight:700;font-size:13px;color:var(--ink)}
/* Takes every pixel the band has spare, which is what keeps the meter
   hard against the right edge whatever sits to its left. */
.tbl-band__spacer{flex:1 1 auto;min-width:8px}
/* Below a laptop the band has no spare width to give away, so the meter
   shrinks rather than pushing the voucher number off the row. */
@media (max-width:900px){
  .tbl-meter{flex:0 1 150px;max-width:150px}
}
.tbl-data > td{padding-top:7px;padding-bottom:11px;vertical-align:top}
/* Hovering either half lights both, so the pair reads as one record. */
tr.tbl-band:hover > td, tr.tbl-data:hover > td{background:var(--soft)}
tr.tbl-band.is-hot > td, tr.tbl-data.is-hot > td{background:#f4f6fb}

/* A small meter for "how complete is this record", inline in the band. */
/* The completeness meter.
   The bar and its fill are spans, and a span is inline -- so width and
   height on the fill were being ignored and the bar rendered permanently
   empty next to a percentage that said otherwise. Both are told to be
   blocks, which is the whole fix.
   The bar also stretches: it is the one thing in the band with no natural
   width, so giving it the slack makes the strip read as a progress bar
   across the row rather than a token at the end of it. */
/* Fixed width, pinned to the right.
   This was `flex: 1 1 120px`, which let the meter absorb whatever space the
   band had left over -- so a row carrying "from PI-20547" left less slack
   and started its bar further right than the row above it. The bars are
   read as a column down the page, and a column that moves is not one.
   The spacer beside it takes all the slack instead, so every meter is the
   same width and every bar begins at the same x. */
.tbl-meter{display:flex;align-items:center;gap:8px;flex:0 0 244px;max-width:244px}
.tbl-meter__bar{display:block;flex:1 1 auto;min-width:60px;height:6px;border-radius:3px;
  background:var(--line-2);overflow:hidden}
.tbl-meter__fill{display:block;height:6px;border-radius:3px;background:var(--ok);
  transition:width .2s ease}
.tbl-meter__fill--warn{background:var(--warn)}
.tbl-meter__fill--err{background:var(--err)}
.tbl-meter__pct{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:11.5px;
  min-width:34px;text-align:right}

/* Stacked links, for the ticket column. Two words one above the other are
   narrower than two side by side, and the column was the widest thing
   pushing the flight table off screen. */
/* Stacked, and buttons rather than bare links -- two words of blue text
   read as an afterthought next to everything else on the row. */
.tbl-stack{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.tbl-stack a{display:block;text-align:center;font-size:11.5px;font-weight:600;
  padding:3px 8px;border:1px solid var(--line);border-radius:5px;background:#fff;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  transition:border-color .12s,color .12s,background .12s}
.tbl-stack a:hover{border-color:var(--navy);color:var(--navy);background:var(--soft)}

/* Secondary text inside a cell: the sales person under the client, the PI
   under the voucher number. Same treatment the PNR already had. */
.cell-sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px;line-height:1.35}
.cell-sub--miss{color:var(--err);font-weight:600}
.cell-main{font-size:13px}

/* Neither voucher table scrolls sideways any more, so the wrapper stops
   offering to. Anything still too wide wraps inside its cell instead. */
.table-wrap--fit{overflow-x:visible}
.table-wrap--fit table{table-layout:fixed;width:100%}
.table-wrap--fit td, .table-wrap--fit th{word-break:break-word}

/* =====================================================================
   One card size across Credence
   ---------------------------------------------------------------------
   Each sub-app grew its own counter cards -- fv-stat, ct-card, gst-tile,
   ob-tile, rc-stat, cg-stat -- at slightly different sizes, so moving
   between screens felt like moving between applications. These overrides
   bring them all to the compact one-line shape the voucher screens now
   use: value first, label after, on a single row.

   Overriding rather than rewriting each family keeps every screen's own
   colour and behaviour rules intact; only the metrics are unified. They
   are last in the file so they win on order without needing !important.

   The grid matters as much as the size. With a wrapping flex row, a card
   left alone on the last line stretches to the full width of the page --
   which is what "To allocate" was doing on Car Rental. A grid gives every
   card the same track whichever line it lands on.
   ===================================================================== */
.ct-cards, .gst-tiles, .ob-tiles, .rc-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:7px;margin-bottom:11px;overflow:visible;
}
.ct-card, .gst-tile, .ob-tile, .rc-stat{
  flex:none;min-width:0;padding:7px 11px;border-radius:var(--radius);
  display:flex;align-items:baseline;gap:7px;white-space:nowrap;
}
.ct-card__label, .gst-tile__l, .ob-tile__l, .rc-stat__l{
  font-size:11px;text-transform:uppercase;letter-spacing:.045em;font-weight:600;
  color:var(--ink-3);margin:0;order:2;overflow:hidden;text-overflow:ellipsis;
}
.ct-card__value, .gst-tile__v, .ob-tile__v, .rc-stat__v{
  font-size:16px;font-weight:700;line-height:1.15;margin:0;order:1;
  letter-spacing:normal;font-variant-numeric:tabular-nums;
}
/* Customer groups states its figures inline already, so it only needs the
   same type sizes rather than the box treatment. */
.cg-stats{gap:14px;margin-bottom:11px}
.cg-stat{flex-direction:row;align-items:baseline;gap:6px}
.cg-stat__l{order:2;font-size:11px;text-transform:uppercase;letter-spacing:.045em}
.cg-stat__v{order:1;font-size:16px}
/* Exhibition performance groups its cards inside labelled panels, so the
   panel keeps its shape and only the figures inside it come down to size. */
.ep-cards{gap:9px;margin-bottom:11px}
.ep-cards__group{padding:9px 11px}
.ep-card__value{font-size:16px;line-height:1.15}
.ep-card__label{font-size:11px}

/* =====================================================================
   Estimate changes waiting for a decision
   ---------------------------------------------------------------------
   The eye is a button, not a mark, because the only useful response to
   noticing it is to open it and rule. It sits in the band beside the
   status, where the row already says what state it is in.
   ===================================================================== */
.cv-eye{background:var(--warn-bg);border:1px solid #e7d5a6;color:#6b4a02;
  font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:20px;cursor:pointer;
  white-space:nowrap;font-family:inherit;letter-spacing:.02em}
.cv-eye:hover{background:#f6e9c8;border-color:#d9c088}
.cv-pill--dead{background:var(--err-bg,#fdeaea);color:#8d2020}

.cv-chg{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:10px 0}
.cv-chg--open{border-left:3px solid var(--warn)}
.cv-chg--orig{border-left:3px solid var(--ink-3);background:var(--soft)}
.cv-chg__h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.cv-chg__delta{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:1px 8px;border-radius:20px}
.cv-chg__delta--up{background:var(--warn-bg);color:#6b4a02}
.cv-chg__delta--down{background:var(--ok-bg);color:#0b5c3e}
.cv-chg__when{font-size:11.5px;color:var(--ink-3);margin-left:auto}
.cv-chg__sum{font-size:12.5px;color:var(--ink-2);margin:0 0 9px;line-height:1.55}
.cv-chg__t{width:100%;border-collapse:collapse;font-size:12.5px}
.cv-chg__t th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  font-weight:600;padding:3px 6px;border-bottom:1px solid var(--line-2);text-align:left}
.cv-chg__t th.num,.cv-chg__t td.num{text-align:right;font-variant-numeric:tabular-nums}
.cv-chg__t td{padding:3px 6px;border-bottom:1px solid var(--line-2)}
.cv-chg__acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.cv-chg__done{font-size:12px;color:var(--ink-3);margin:8px 0 0;font-style:italic}

/* =====================================================================
   Hotel Vouchers
   ===================================================================== */

/* Two fields to a row. The Creator form ran sixty fields down one column
   and half of them sat below the fold on every screen in the office.
   Collapses to one column on a narrow viewport, where two would leave
   each field too small to read. */
.form-grid--2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.form-grid--2 .fld--wide{grid-column:1 / -1}
@media (max-width:720px){.form-grid--2{grid-template-columns:1fr}}

.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld > span{font-size:12px;color:var(--ink-3);font-weight:500}
.fld .input,.fld .combo{width:100%}
.fld .chk{display:flex;align-items:center;gap:7px;font-size:14px;
  padding:7px 0;color:var(--ink-2)}

/* Secondary text under a value: the estimate under the voucher number,
   the city under the hotel. Used across the drawer too, so it is defined
   once here rather than per-table. */
.sub{font-size:12px;color:var(--ink-3);line-height:1.4}

/* Definition lists in the record drawer. */
.deflist{display:grid;grid-template-columns:max-content 1fr;gap:7px 16px;margin:0}

.deflist dt{font-size:12.5px;color:var(--ink-3)}
.deflist dd{margin:0;font-size:13.5px;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}

.panel{padding:14px 16px;border-bottom:1px solid var(--line-2)}
.panel:last-child{border-bottom:0}
.panel h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;
  letter-spacing:.045em;color:var(--ink-3);display:flex;justify-content:space-between;
  align-items:center;gap:10px}
.panel--warn{background:#fdf8ee}
.panel .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}

.q{padding:9px 0}
.q p{margin:0 0 7px;font-size:13.5px}
.q__opts{display:flex;gap:7px;flex-wrap:wrap}

.steps{margin:0;padding-left:18px;font-size:13.5px}
.steps li{margin-bottom:5px}
.log{list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--ink-2)}
.log li{padding:4px 0;border-bottom:1px solid var(--line-2)}
.log li:last-child{border-bottom:0}

.astep{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 0;
  border-bottom:1px solid var(--line-2)}
.astep-roles{display:flex;gap:12px;flex-wrap:wrap;font-size:13px}
.astep-roles label{display:flex;align-items:center;gap:5px}

/* The import progress bar. */
.prog{height:8px;background:var(--line-2);border-radius:20px;overflow:hidden;margin:10px 0 6px}
.prog__bar{height:100%;background:var(--navy);border-radius:20px;transition:width .2s ease}

/* The voucher list runs to seven columns and every one of them earns its
   place, so the cells are tightened rather than the table being allowed
   to scroll sideways out of the card. */
.table-wrap--fit td{padding-top:9px;padding-bottom:9px;vertical-align:top}

/* The outer columns sat hard against the card edge, because 14px of cell
   padding reads as nothing next to the 20px the card head uses. The first
   and last cells are brought in to line up with everything above them. */
.table-wrap--fit th:first-child,
.table-wrap--fit td:first-child{padding-left:20px}
.table-wrap--fit th:last-child,
.table-wrap--fit td:last-child{padding-right:20px}

/* Stage, invoice state and any flags, stacked. Side by side they pushed
   the cell past its share of a fixed-layout table and the last pill ran
   off the edge. */
.hv-pills{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
/* One pill, one line. Wrapping made a single status two rows deep and
   pushed every row apart; the labels are short enough not to need it. */
.hv-pills .tag{max-width:100%;white-space:nowrap;text-align:left;overflow:hidden;text-overflow:ellipsis}
.table-wrap--fit .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.35}

/* Hotel table: selection, row actions, and the preview panel.
   Widths are set on the columns in the markup and total exactly 100%.
   They used to be 92% of percentage columns PLUS two fixed-pixel ones,
   which in a fixed-layout table is always wider than the table -- so the
   last column ran off the edge however wide the window was. */
.hv-pick{text-align:left;padding-right:0!important}
.hv-pick input{cursor:pointer;width:15px;height:15px;accent-color:var(--navy)}
.hv-acts{white-space:normal;text-align:right}
.hv-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink-2);
  cursor:pointer;margin-left:5px;text-decoration:none;vertical-align:middle}
.hv-ico:hover{border-color:var(--navy);color:var(--navy);background:#f4f5f9}
/* Both the head and the body cell, so the icons line up under the rule
   rather than the header sitting a few pixels further out. */
.hv-table th.hv-acts,
.hv-table td.hv-acts{padding-right:18px}
.hv-table th.hv-pick,
.hv-table td.hv-pick{padding-left:18px}

/* The preview fills the panel; a PDF in a short box is unreadable. */
.hv-preview{height:min(74vh,760px);background:var(--line-2);border-radius:8px;overflow:hidden}
.hv-preview iframe{width:100%;height:100%;border:0;display:block}

/* The tick column on the car and flight lists. Same geometry as the hotel
   one so the three read alike; the band row's own checkbox already sits at
   the table's left edge, which is where this header cell puts the
   select-all above it. */
.cv-pick{text-align:left;padding-right:0!important}
.cv-pick input{cursor:pointer;width:15px;height:15px;accent-color:var(--navy)}
.table-wrap--fit th.cv-pick,
.table-wrap--fit td.cv-pick{padding-left:18px}
/* The band row's own tick sits under the header's. Without this the band
   inherits the 20px first-child rule while the header cell uses 18, and
   the two checkboxes are visibly two pixels apart down the whole list. */
.table-wrap--fit .tbl-band > td{padding-left:18px}
/* The row reads as clickable. Only the cells that open the record take
   the pointer, so hovering the tick or the buttons does not promise
   something they do not do. */
.hv-table tbody tr:hover{background:var(--soft)}
.hv-table td[data-open]{cursor:pointer}


/* ---------------------------------------------------------------------
   GST: the two sides of a doubtful match, read together.
   A person is being asked whether two rows are one invoice, so the rows
   have to be legible side by side rather than one above the other -- the
   whole point is the comparison.
   ------------------------------------------------------------------ */
.gst-cmp{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0}
.gst-cmp th,.gst-cmp td{padding:6px 10px;border-bottom:1px solid var(--line-2);text-align:left}
.gst-cmp thead th{font-size:11.5px;color:var(--ink-3);font-weight:600;
  border-bottom:1px solid var(--line)}
.gst-cmp tbody th{font-size:12px;color:var(--ink-3);font-weight:600;width:30%}
.gst-cmp td{font-variant-numeric:tabular-nums}
.gst-cmp-sep{border:0;border-top:1px dashed var(--line);margin:16px 0}
.gst-confirm-one{display:inline-block}


/* The three things a person can say a booking is. Laid out as a stack of
   labelled choices rather than a dropdown, because each needs a line
   explaining what it does to the month's figures. */
.ob-statopts{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.ob-statopt{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}
.ob-statopt:hover{background:var(--soft)}
.ob-statopt input{margin-top:2px}
.ob-statopt span{display:flex;flex-direction:column;gap:2px;font-size:13px}


/* One company in a group being edited. Its own class: .cg-pick is already
   the style for the checkbox itself, and reusing it made the row inherit
   a width it should not have. */
.cg-member{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px}
.cg-member input{width:auto;margin:0;flex:0 0 auto}


/* ---------------------------------------------------------------------
   COUNT STRIP -- one compact row of figures.

   The tall .stat card earns its height when it carries a note under the
   number. A plain count does not: eight of them pushed the actual work
   below the fold on Master data, Imports and Administration, while the
   voucher screens had long since settled on a compact row. Same idea,
   one class, so a count reads the same wherever it appears.
   ------------------------------------------------------------------ */
.ct-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:7px;margin-bottom:14px}
.ct-stat{min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:7px 11px;display:flex;align-items:baseline;
  gap:7px;white-space:nowrap;overflow:hidden}
.ct-stat__value{flex:0 0 auto;font-weight:600;font-variant-numeric:tabular-nums}
.ct-stat__label{overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:12.5px;
  color:var(--ink-3)}
.ct-stat--warn .ct-stat__value{color:var(--warn)}
.ct-stat--err .ct-stat__value{color:var(--err)}
.ct-stat--ok .ct-stat__value{color:var(--ok)}

/* ---------------------------------------------------------------------
   HOME
   ------------------------------------------------------------------ */
/* What wants a person, kept apart from what is merely true. A dashboard
   that mixes the two makes both easy to miss. */
.hm-attn{border-left:3px solid var(--warn)}
.hm-attn__list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.hm-attn__list li{font-size:13.5px}
.hm-attn__list a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.hm-attn__list a:hover{border-bottom-color:var(--ink-3)}
/* A figure that links to the sub-app it came from, so Home is a way in
   rather than a second place to read numbers. */
a.hm-link{text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
a.hm-link:hover{border-color:#c3cade;box-shadow:var(--shadow)}

/* ---------------------------------------------------------------------
   HEADER :: search and notifications

   The middle of the header used to repeat the page heading, which the
   page shows directly underneath it. It now carries the two things that
   cannot live on a page: a way into any record from anywhere, and a
   count that follows you between sub-apps.
   ------------------------------------------------------------------ */
.topbar__mid{flex:1 1 auto;display:flex;justify-content:center;min-width:0;padding:0 18px}
.topbar__title{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:230px}

.gs{position:relative;width:100%;max-width:460px}
.gs__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);
  pointer-events:none}
.gs__input{width:100%;height:34px;padding:0 34px 0 32px;font:inherit;font-size:13.5px;
  border:1px solid var(--line);border-radius:20px;background:#fafbfd;color:var(--ink);
  transition:border-color .12s,background .12s,box-shadow .12s}
.gs__input:focus{outline:none;background:var(--surface);border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(46,111,217,.12)}
.gs__input::-webkit-search-cancel-button{display:none}
/* The shortcut hint disappears once there is something to read, so it
   never sits on top of the text somebody is typing. */
.gs__key{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;
  color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  background:var(--surface);pointer-events:none}
.gs__input:focus ~ .gs__key,.gs__input:not(:placeholder-shown) ~ .gs__key{display:none}

.gs__panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  max-height:70vh;overflow-y:auto;z-index:60;padding:6px}
.gs__group + .gs__group{border-top:1px solid var(--line-2);margin-top:5px;padding-top:5px}
.gs__label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);padding:5px 9px 3px}
.gs__hit{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:9px;
  width:100%;text-align:left;font:inherit;background:none;border:0;cursor:pointer;
  padding:6px 9px;border-radius:var(--radius)}
.gs__hit:hover,.gs__hit--on{background:var(--soft)}
.gs__ref{font-weight:600;font-size:13px;white-space:nowrap}
.gs__meta{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.gs__amt{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gs__state{font-size:11px;color:var(--ink-3);white-space:nowrap}
.gs__none{padding:14px 12px;font-size:13px;color:var(--ink-2);display:flex;
  flex-direction:column;gap:4px}
.gs__none span{font-size:12px;color:var(--ink-3)}

.bell{position:relative}
.bell__count{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--err);color:#fff;font-size:10.5px;font-weight:700;
  line-height:16px;text-align:center}
.bell__panel{position:absolute;top:calc(100% + 8px);right:0;width:370px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  z-index:60;padding:6px;max-height:70vh;overflow-y:auto}
.bell__head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);padding:7px 10px 5px}
.bell__item{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:var(--radius);
  text-decoration:none;color:var(--ink)}
.bell__item:hover{background:var(--soft)}
.bell__item strong{display:block;font-size:13px;font-weight:600}
.bell__why{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.bell__dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:0 0 auto}
.bell__dot--warn{background:var(--warn)}
.bell__dot--err{background:var(--err)}
.bell__none{padding:12px 10px;font-size:13px;color:var(--ink-3)}

/* On a narrow window the search gives way before anything else: the
   heading and the account controls still have to be reachable. */
@media (max-width:900px){
  .topbar__mid{display:none}
}

/* =====================================================================
   MOBILE

   Everything below is the small-screen layer. It is one block at the end
   rather than a breakpoint scattered through each component, so what a
   phone gets can be read in one place and changed without hunting.

   The shape of the problem: Credence is a dense internal tool built for a
   desk. The parts that hurt on a phone are the sidebar taking a third of
   the width, tables far wider than the screen, dialogs sized for a
   monitor, and touch targets built for a mouse. Each is dealt with below.
   ================================================================== */

/* A drawer needs something to close it, and the page behind must not
   scroll while it is open. */
.scrim{position:fixed;inset:0;background:rgba(12,16,32,.45);z-index:40;
  opacity:0;animation:scrimIn .15s forwards}
@keyframes scrimIn{to{opacity:1}}
body.no-scroll{overflow:hidden}

@media (min-width:901px){
  /* The scrim belongs to the drawer, and there is no drawer at this width. */
  .scrim{display:none}
}

@media (max-width:900px){

  /* ---- shell: the sidebar floats over the page ---- */
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(80vw,290px);z-index:50;
    transform:translateX(0);transition:transform .18s ease;overflow-y:auto;
    box-shadow:0 0 40px rgba(12,16,32,.25)}
  .shell--collapsed .sidebar{transform:translateX(-100%);box-shadow:none}
  .shell--collapsed{grid-template-columns:1fr}
  .nav__item{padding:11px 14px;font-size:14.5px}   /* thumb-sized */
  .content{padding:14px 13px 26px}

  /* ---- header ---- */
  .topbar{padding:0 12px;gap:8px}
  /* The page prints its own heading directly below, so on a phone the
     header keeps only what is not repeated elsewhere. */
  .topbar__title{display:none}
  .topbar__right{gap:8px}
  .who{display:none}
  .avatar{display:none}
  /* Account and Sign out move into the sidebar foot, where there is room
     for them to be tapped rather than aimed at. */
  #btn-account,#btn-logout{display:none}
  .sidebar__foot{display:flex;flex-direction:column;gap:8px}
  .sidebar__foot .btn{width:100%}

  /* Search takes the width it needs, since the heading has gone. */
  .topbar__mid{display:flex;padding:0 4px}
  .gs{max-width:none}
  .gs__key{display:none}
  .gs__panel{position:fixed;left:8px;right:8px;top:calc(var(--header-h) + 6px);
    max-height:calc(100vh - var(--header-h) - 20px)}
  .gs__hit{grid-template-columns:1fr auto;row-gap:2px}
  .gs__meta{grid-column:1 / -1}

  .bell__panel{position:fixed;left:8px;right:8px;width:auto;
    top:calc(var(--header-h) + 6px)}

  /* ---- dialogs fill the screen ---- */
  .modal{max-width:none;width:100%;max-height:100vh;height:100%;border-radius:0;
    display:flex;flex-direction:column}
  .modal--wide{max-width:none}
  .modal__body{flex:1 1 auto;overflow-y:auto}
  .modal__foot{flex-wrap:wrap;gap:8px;position:sticky;bottom:0;background:var(--surface);
    border-top:1px solid var(--line)}
  .modal__foot .btn{flex:1 1 auto;min-height:42px}
  .modal-backdrop{padding:0;align-items:stretch}

  /* ---- tables ----
     Stacking every column into a card was rejected: these tables carry
     eight to twelve columns of figures that are read ACROSS, and a stack
     turns one glance into twelve. They scroll sideways instead, with the
     first column pinned so a row never loses its name. */
  .table-wrap{-webkit-overflow-scrolling:touch}
  table{font-size:13px}
  thead th,tbody td{padding:9px 10px}
  .hv-table td[data-open]{cursor:default}

  /* ---- figures and cards ---- */
  .ct-strip,.fv-strip{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:6px}
  .grid--4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .stat{padding:12px 13px}
  .stat__value{font-size:21px}
  .card__head{flex-wrap:wrap;gap:8px}
  .card__title{font-size:14.5px}

  /* ---- toolbars and buttons ----
     A row of six buttons sized for a mouse becomes a row of six things
     too small and too close to tap. They wrap, and they grow. */
  .btn{min-height:38px}
  .btn--sm{min-height:34px}
  .icon-btn{width:38px;height:38px}
  .toolbar,.cg-actions,.ob-actions,.fv-actions{flex-wrap:wrap;gap:8px}

  /* ---- charts ----
     Every chart here is inline SVG with a viewBox, so it already scales;
     it just must not be allowed to set a minimum width. */
  svg{max-width:100%;height:auto}
  .rc-chart{overflow-x:auto}

  /* ---- forms ----
     16px is not a style choice: below it, iOS zooms the page on focus and
     the person is left scrolled sideways on a form they were typing into. */
  .input,select.input,textarea.input{font-size:16px;min-height:42px}
  .form-grid,.form-grid--2,.grid2,.fv-form{grid-template-columns:1fr}
  .field__hint{font-size:12px}

  /* ---- page furniture ---- */
  .page-intro h1,.intro h1{font-size:20px}
  .page-intro p,.intro p{font-size:13.5px}
  .pager{flex-wrap:wrap;gap:9px}
  .tabs{margin-left:-13px;margin-right:-13px;padding:0 13px}
}

/* Narrow phones: the last things that can give way. */
@media (max-width:420px){
  .ct-strip,.fv-strip{grid-template-columns:1fr 1fr}
  .content{padding:12px 10px 24px}
  .gs__input{font-size:16px}          /* again: stops iOS zooming */
  .modal__foot{flex-direction:column-reverse}
  .modal__foot .btn{width:100%}
}

/* Coarse pointers, whatever the width. A tablet is not a narrow screen
   but it is still a finger. */
@media (pointer:coarse){
  .btn,.icon-btn,.tab,.nav__item{touch-action:manipulation}
  .gs__hit,.bell__item{padding-top:9px;padding-bottom:9px}
}

/* ---------------------------------------------------------------------
   TABLES AS CARDS, ON A PHONE ONLY

   Sideways scrolling meant a row's name scrolled out of view before its
   figures arrived. Each row becomes a card instead: the first column is
   the title, the next two sit under it as label and value, and the rest
   are reached through "All N details".

   Everything here is inside the phone breakpoint and keyed on .mt, which
   mobiletable.js adds and removes. A desktop never sees any of it.
   ------------------------------------------------------------------ */
@media (max-width:900px){

  .table-wrap.mt-wrap{overflow-x:visible}
  table.mt{display:block;width:100%;border-collapse:separate}
  table.mt thead{display:none}          /* the labels move onto the cells */
  table.mt tbody{display:block}

  table.mt tr.mt-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:2px 10px;
    padding:11px 13px;
    border-bottom:1px solid var(--line-2);
    background:var(--surface);
  }
  table.mt tr.mt-row:last-child{border-bottom:0}

  table.mt tr.mt-row td{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    border:0;padding:2px 0;font-size:13px;grid-column:1 / -1;text-align:left;
  }
  /* The label the header used to carry, now beside its own value. */
  table.mt tr.mt-row td::before{
    content:attr(data-mt-label);
    font-size:11.5px;color:var(--ink-3);font-weight:600;
    flex:0 0 auto;white-space:nowrap;
  }
  table.mt tr.mt-row td.num{text-align:left}

  /* The first column is the record: bigger, and with no label, because
     "Voucher: HTL-2026-14387" says less than the number on its own. */
  table.mt tr.mt-row td.mt-cell--title{
    grid-column:1 / 2;display:block;font-size:14.5px;font-weight:600;
    padding-bottom:4px;
  }
  table.mt tr.mt-row td.mt-cell--title::before{content:none}

  /* Everything past the summary lives in the details panel. */
  table.mt tr.mt-row td.mt-cell--more{display:none}

  table.mt tr.mt-row td.mt-cell--action{
    grid-column:2 / 3;grid-row:1;display:flex;align-items:flex-start;justify-content:flex-end;
  }
  .mt-more-btn{
    background:none;border:1px solid var(--line);border-radius:16px;
    font:inherit;font-size:11.5px;color:var(--ink-3);padding:4px 10px;
    white-space:nowrap;cursor:pointer;min-height:30px;
  }
  .mt-more-btn:hover,.mt-more-btn:focus-visible{border-color:var(--navy);color:var(--navy)}

  /* Cells whose content is a stack of tags read better left aligned. */
  table.mt tr.mt-row td .hv-pills,table.mt tr.mt-row td .ob-pills{
    display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}

  /* Totals rows are a summary, not a record, so they stay a simple line. */
  table.mt tfoot{display:block}
  table.mt tfoot tr{display:flex;flex-wrap:wrap;gap:10px;padding:10px 13px;
    border-top:1px solid var(--line)}
  table.mt tfoot td{border:0;padding:0;font-size:12.5px}
}

/* The details panel. It slides in from the right on a phone; it is never
   created on a desktop, but the styles are harmless if it ever is. */
.mt-detail{
  position:fixed;top:0;right:0;bottom:0;width:min(94vw,420px);z-index:50;
  background:var(--surface);box-shadow:-8px 0 40px rgba(12,16,32,.22);
  display:flex;flex-direction:column;animation:mtIn .18s ease;
}
@keyframes mtIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.mt-detail__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.mt-detail__title{font-size:15px;font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mt-detail__body{flex:1 1 auto;overflow-y:auto;padding:6px 15px 22px}
.mt-kv{display:flex;flex-direction:column;gap:2px;padding:10px 0;
  border-bottom:1px solid var(--line-2)}
.mt-kv:last-child{border-bottom:0}
.mt-kv__k{font-size:11.5px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.mt-kv__v{font-size:14px;word-break:break-word}
.mt-kv__v:empty::after{content:"\2014";color:var(--ink-3)}

/* =====================================================================
   CRM
   ===================================================================== */

/* A counter tile is also the filter that produced it, so the selected one
   has to look pressed rather than merely hovered -- otherwise a filtered
   list looks like the whole list and the count below it looks wrong. */
.stat[data-view]{transition:border-color .12s ease, box-shadow .12s ease}
.stat[data-view]:hover{border-color:#cdd2dd}
.stat--on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(50,55,89,.12)}
.stat[data-view]:focus-visible{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(50,55,89,.12)}

/* Three fields to a row on the lead form. Two still pushed the stage and
   the dates below the fold on a laptop; three fits the whole lead on one
   screen. It steps down to two and then one rather than shrinking, since
   a third of a narrow window is not a usable field. */
.form-grid--3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px}
.form-grid--3 .fld--wide{grid-column:1 / -1}
.form-grid--3 .fld--span2{grid-column:span 2}
@media (max-width:1000px){
  .form-grid--3{grid-template-columns:1fr 1fr}
  .form-grid--3 .fld--span2{grid-column:1 / -1}
}
@media (max-width:640px){.form-grid--3{grid-template-columns:1fr}}

/* "Add a company" sits on the label line, not under the field: under it,
   the link fell behind the combo's dropdown and could not be clicked
   while the list was open. */
.fld > span{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.fld__add{background:none;border:0;padding:0;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--navy);cursor:pointer;text-decoration:underline;white-space:nowrap}
.fld__add:hover{color:var(--navy-800)}

/* The costing grids are inputs inside a dense table, so the cells are
   tightened and the numeric ones right-aligned to read as money. */
.cl-line .input{padding:6px 8px;font-size:13px;min-width:0}
.cl-line .input.num{text-align:right;font-variant-numeric:tabular-nums}
.cl-line td{padding:4px 5px}

/* ---- CRM: stage colour, progress, selection ------------------------- */

/* A dot, not a filled pill. Eight filled colours down a column compete
   with the figures beside them; a dot carries the same signal and leaves
   the row reading as text. */
.stage-tag{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--ink)}
.stage-tag i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* The bar always carries its number. A bar alone is a shape somebody has
   to interpret; the figure beside it makes it a fact. */
/* 2. THE PROGRESS BAR RAN PAST THE TABLE.
   
   min-width:104px on a cell in the last column meant the column could
   never shrink below it, so on a narrow window the bar and its
   percentage were pushed outside the table entirely. A max-width and a
   smaller floor let it give way instead. */
.lead-prog{display:flex;align-items:center;gap:6px;min-width:70px;max-width:100%}
.lead-prog__track{flex:1 1 auto;height:6px;border-radius:3px;background:var(--line);
  overflow:hidden;min-width:52px}
.lead-prog__bar{height:100%;border-radius:3px;transition:width .2s ease}
.lead-prog__pct{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.deflist .lead-prog{margin-top:6px;max-width:200px}

/* The tick column is narrow and its cell swallows the click, so choosing
   a row for a batch does not also open it. */
th.pick, td.pick{width:34px;text-align:center;padding-left:10px;padding-right:2px}
td.pick input, th.pick input{cursor:pointer;margin:0}

/* The selection bar appears between the filters and the table, where the
   count and the action are both in the path of somebody who has just
   ticked something. */
.selbar{display:flex;align-items:center;gap:10px;padding:9px 13px;margin:0 0 2px;
  background:var(--navy-50,#eef0f6);border:1px solid var(--line);border-radius:var(--radius);
  font-size:13px;font-weight:600}
.selbar[hidden]{display:none}
.selbar span{flex:1 1 auto;color:var(--ink-2)}

/* Both header actions sit together on the right. */
.card__actions{display:flex;align-items:center;gap:8px;margin-left:auto}

/* ---- CRM: wide drawer, three-up detail, wrapping stage --------------- */

/* The detail reads three to a row like the voucher screens. A single
   column put the salesperson and the stage a scroll apart on a lead with
   a long enquiry, while most of the column was white space. */
/* Payable to the vendor asks for four across. Without a rule for it the
   class fell back to the plain two-column list and left half the drawer
   blank, which is what it was doing. */
.deflist--4, .deflist--3, .deflist--2{display:grid;gap:10px 18px;margin:0}
.deflist--4{grid-template-columns:repeat(4,1fr)}
.deflist--3{grid-template-columns:repeat(3,1fr)}
.deflist--2{grid-template-columns:repeat(2,1fr)}
.deflist--4 .deflist__i, .deflist--3 .deflist__i, .deflist--2 .deflist__i{min-width:0}
.deflist--4 dt, .deflist--3 dt, .deflist--2 dt{font-size:11px;text-transform:uppercase;
  letter-spacing:.045em;font-weight:600;color:var(--ink-3);margin:0 0 2px}
.deflist--4 dd, .deflist--3 dd, .deflist--2 dd{margin:0;font-size:13.5px;color:var(--ink);
  overflow-wrap:anywhere}
@media (max-width:1100px){.deflist--4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.deflist--4,.deflist--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.deflist--4,.deflist--3,.deflist--2{grid-template-columns:1fr}}

/* "Rates Shared by Purchase" is 24 characters and was running under the
   percentage beside it. The stage cell wraps and the progress cell holds
   its own width instead of being squeezed. */
.stage-tag{white-space:normal;align-items:flex-start;line-height:1.3}
.stage-tag i{margin-top:4px}
td .lead-prog{min-width:118px}
.table-wrap--fit th:nth-last-child(2), .table-wrap--fit td:nth-last-child(2){width:132px}

/* Buttons grouped on a panel heading. */
.panel__acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.panel h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---- CRM: sortable headings ----------------------------------------- */
/* A table sorted in a way nobody can see is a table people assume is
   sorted some other way, so the active column says so. */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}
th.sortable.sorted{color:var(--navy)}
.sort-ar{display:inline-block;width:11px;margin-left:3px;font-size:11px;line-height:1}
th.sortable:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}

/* ---- CRM: multi-pick, inline radios, comparison ---------------------- */

/* A dropdown holding several ticked values. A plain multi-select needs
   ctrl-click to add a second value, which nobody discovers. */
.mp{position:relative}
.mp__btn{text-align:left;display:flex;align-items:center;gap:6px;width:100%;
  cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mp__car{margin-left:auto;color:var(--ink-3);font-size:11px}
.mp__ph{color:var(--ink-3)}
.mp__menu{position:absolute;z-index:40;top:calc(100% + 3px);left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(16,24,40,.12);padding:5px;max-height:240px;overflow:auto}
.mp__o{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;
  font-size:13px;cursor:pointer}
.mp__o:hover{background:var(--navy-50,#eef0f6)}

/* Yes / No / Not decided on one line. Three short words do not need a
   dropdown, and they must not wrap onto a second row. */
.radio-row{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;
  min-height:36px;overflow-x:auto}
.radio-row__o{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  white-space:nowrap;cursor:pointer}
.radio-row__o input{margin:0}

.cp-tdsout{display:flex;align-items:center;min-height:36px;font-size:13.5px;
  padding:0 2px}
.cv-panel--ok, .cv-panel--warn{padding:0}
.panel.cv-panel--ok{border-color:#bfe3d0}
.panel.cv-panel--warn{border-color:#f0dfa6}

/* ---- CRM: event totals strip and the intake pivot -------------------- */
.ev-tot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.ev-tot__i{border:1px solid var(--line);border-radius:var(--radius);padding:9px 11px}
.ev-tot__i span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.045em;
  color:var(--ink-3);font-weight:600}
.ev-tot__i b{display:block;font-size:17px;margin:2px 0 1px;font-variant-numeric:tabular-nums}
.ev-tot__i i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.ev-tot__i--good b{color:var(--ok)}
.ev-tot__i--bad b{color:var(--err)}
@media (max-width:640px){.ev-tot{grid-template-columns:1fr}}
/* Event costing grid: every box keeps a usable width; on a phone the grid scrolls inside its frame. */
.cl-line .cl-item{min-width:180px}.cl-line .cl-qty{min-width:72px}.cl-line .cl-rate,.cl-line .cl-sub{min-width:96px}.cl-line .cl-gst,.cl-line .cl-tds{min-width:64px}

.pv{width:100%;border-collapse:collapse;font-size:13px}
/* Stage names wrap instead of forcing the table sideways. "Rates Shared
   by Purchase" on one line pushed the report past the drawer and made
   every column a scroll away. */
.pv{table-layout:fixed}
.pv th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  padding:7px 6px;border-bottom:1px solid var(--line);text-align:right;
  white-space:normal;overflow-wrap:anywhere;line-height:1.25;vertical-align:bottom}
.pv th:not(:first-child):not(.pv__tot){width:8.5%}
.pv th:first-child{width:15%}
.pv th:first-child{text-align:left}
.pv td{padding:6px 6px;border-bottom:1px solid var(--line-2);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pv td:first-child{text-align:left}
.pv tfoot td{font-weight:700;border-top:1px solid var(--line);border-bottom:0}
/* A zero is a dot, not a 0. A grid of zeroes hides the numbers that matter. */
.pv__z{color:var(--line)}
.pv__tot{background:#f7f9fc;width:11%}
.pv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;
  vertical-align:middle}

/* ---- CRM: the report page ------------------------------------------- */
.pv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pv-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:14px;margin-top:14px}
@media (max-width:980px){.pv-grid{grid-template-columns:1fr}}
.pv-chart svg{width:100%;height:auto;display:block}
.pv-key{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:10px}
.pv-toggle{display:flex;gap:4px;margin-left:auto}
.pv-toggle .is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pv-pie-wrap{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.pv-legend{flex:1 1 190px;min-width:0}
.pv-legend__i{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:2px 0}
.pv-legend__i i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.pv-legend__i span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink-2)}
.pv-legend__i b{font-variant-numeric:tabular-nums}
.pv-legend__i em{font-style:normal;color:var(--ink-3);font-size:11.5px;min-width:42px;
  text-align:right}

/* On a full page the table can size itself to its content instead of
   being squeezed into fixed columns, which is what stacked two-letter
   headings were: a fixed layout asked for more columns than it had room
   for. It scrolls sideways only when there genuinely are too many. */
.pv{table-layout:auto;min-width:100%}
.pv th{white-space:nowrap;vertical-align:bottom;padding:8px 10px}
.pv th:not(:first-child):not(.pv__tot){width:auto}
.pv .pv-th{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.pv__d{white-space:nowrap;font-variant-numeric:tabular-nums}
.pv td{padding:6px 10px}

/* ---- CRM: toolbar multi-pick and custom dates ------------------------ */
/* The whole filter bar on one row.
   Six controls plus a search box will not fit at fixed widths, so each
   one shrinks to share what there is and the search box takes whatever is
   left. Below 1200px it wraps rather than shrinking into unreadable
   slivers -- a row nobody can read is not worth keeping on one line. */
.toolbar--one{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.toolbar--one .tb-q{flex:1 1 170px;min-width:130px}
.toolbar--one .tb-range{flex:0 1 132px;min-width:104px}
.toolbar--one .tb-clear{flex:0 0 auto}
@media (max-width:1200px){.toolbar--one{flex-wrap:wrap}}

.tb-mp{position:relative;flex:1 1 130px;min-width:106px;max-width:200px}
.tb-mp .mp__btn{height:38px;font-size:12.5px;padding-left:9px;padding-right:6px}
.tb-dates{display:inline-flex;gap:6px;align-items:center}
.tb-dates[hidden]{display:none}
.tb-dates .input{max-width:150px}
/* The panel has to clear the toolbar rather than push it open. */
.tb-mp .mp__menu{min-width:240px;z-index:60}

/* ---- Administration tabs -------------------------------------------- */
/* Four sections down one page buried Users under three screens of
   scrolling. Uses the shared .tabs/.tab strip, so it looks like Master
   Data rather than like a second idea of what a tab is. */
.adm-panel[hidden]{display:none}

/* ---- Shared table toolbar (search, filters, export) ------------------ */
/* Sits inside the card, above the table it belongs to. */
.tt-bar{padding:11px 14px;border-bottom:1px solid var(--line-2);margin:0}
.tt-bar .tb-q{flex:1 1 200px;min-width:150px;max-width:340px}
.tt-count{font-size:12.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.tt-bar .tt-clear,.tt-bar .tt-export{flex:0 0 auto}

/* ---- Report emails: who it reached ---------------------------------- */
.rep-to{font-size:11.5px;color:var(--ink-3);margin-top:2px;max-width:210px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-stale{font-size:11.5px;color:var(--warn);margin-top:2px;font-weight:600}

/* ---- Event payments: what is owed, and what this payment settles ----- */
.pay-grid input{max-width:120px;text-align:right}
.pay-grid .pay-bal{white-space:nowrap}
/* A line where more has been entered than it has left. Shown as it is
   typed: finding out after pressing Record means retyping the grid. */
.pay-over{background:#fdf3f2}
.pay-over .pay-bal{color:var(--err)}
.pay-tot{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;
  background:var(--navy-50,#eef0f6);border-radius:var(--radius);font-size:13px}
.pay-tot strong{font-variant-numeric:tabular-nums}
.pay-warn{color:var(--err);font-weight:600}
/* Sub total, GST and TDS are derived, so they read as figures rather
   than as boxes waiting to be filled in. */
.cl-line input[readonly]{background:#f6f7f9;color:var(--ink-2);cursor:default}

/* ---- Insights: the booking calendar --------------------------------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-head{margin-bottom:5px;font-size:11px;text-transform:uppercase;letter-spacing:.045em;
  color:var(--ink-3);font-weight:600;text-align:center}
.cal-cell{position:relative;min-height:62px;border:1px solid var(--line);
  border-radius:var(--radius);padding:6px 7px}
.cal-cell--pad{border:0;background:transparent}
/* A day with bookings is shaded by how busy it is, so a heavy week shows
   before any number is read. */
.cal-cell{display:flex;flex-direction:column;min-height:74px}
.cal-cell--on{cursor:pointer;border-color:#c6d6f0;background:#fbfcfe}
.cal-cell--on:hover{border-color:var(--navy);background:#f4f8ff}
.cal-day{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cal-cell--on .cal-day{color:var(--ink-2);font-weight:600}
/* The count is the point of the square, so it is the biggest thing in it
   and carries a word saying what it counts. */
.cal-n{font-size:24px;font-weight:700;line-height:1.05;margin-top:auto;
  font-variant-numeric:tabular-nums}
.cal-unit{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:600}
.cal-none{margin-top:auto;color:var(--line);font-size:18px;line-height:1}
@media (max-width:700px){.cal-cell{min-height:56px}.cal-n{font-size:17px}
  .cal-unit{display:none}}

/* ---- Insights: charts and their figures ------------------------------ */
/* A legend row that drills down says so by behaving like a control. */
.pv-legend__i--go{cursor:pointer;border-radius:4px;padding:2px 4px;margin:0 -4px}
.pv-legend__i--go:hover{background:var(--navy-50,#eef0f6)}
.pv-legend__i--go span{text-decoration:underline;text-decoration-style:dotted}
.ins-toggle{margin-left:auto}
.pie-arc{transition:opacity .12s ease}
.pv-pie-wrap:hover .pie-arc{opacity:.75}
.pv-pie-wrap .pie-arc:hover{opacity:1}

/* ---- Insights: chart tooltip and equal cards ------------------------- */
/* No tooltip of its own: credence.js already delegates data-tip from
   document for every chart in the app, and adding a second one drew a
   second box behind the first. */
.ch-hit{cursor:default}
/* Two charts side by side share the row equally. .pv-grid is weighted
   1.65:1 for the CRM report, which made the first pie noticeably wider
   than the second. */
.ins-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:980px){.ins-grid{grid-template-columns:1fr}}
.ins-sec{margin:22px 0 10px;display:flex;align-items:baseline;gap:10px}
.ins-sec h2{font-size:16px;margin:0}
.ins-sec span{font-size:12.5px;color:var(--ink-3)}

/* ---- Voucher invoice type -------------------------------------------- */
/* Which kind of business a voucher belongs to: ITME, Corporate Travel,
   Event. Sits inside a cell that already exists, so no column is added
   and the table does not start scrolling sideways. */
.vtype{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;
  background:var(--navy-50,#eef0f6);color:var(--ink-2);font-size:10.5px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;vertical-align:1px}
.pager--count{justify-content:flex-end}

/* Redrawing in place: dimmed rather than blanked, so the page keeps its
   height and the scroll position stays meaningful. */
#ins-an.is-reloading{opacity:.55;transition:opacity .1s ease}

/* ---- Zoho Sheets registry, grouped by exhibition --------------------- */
/* Fanning workbooks out turned one row per exhibition into twenty-odd,
   so the page became a wall of hotel names. The group row carries the
   state of the worst source inside it. */
.sg__head{cursor:pointer;background:#f7f9fc}
.sg__head:hover{background:#eef3fb}
.sg__head td{border-bottom:1px solid var(--line)}
.sg__toggle{padding:1px 7px;min-width:0;font-size:12px;line-height:1.2}
.sg__row[hidden]{display:none}
.sg__msg{font-size:11.5px;color:var(--err);max-width:44ch;margin-top:3px}

/* ---- Exhibition conversion list -------------------------------------- */
/* Eight columns that fit, rather than twelve that do not.
   Pairs that are really one fact share a cell -- guest under customer,
   invoice under hotel, who converted it under the stay -- and the money
   columns are held to what a rupee figure actually needs. */
.ep-sales{table-layout:fixed;width:100%}
.ep-sales th,.ep-sales td{padding:8px 7px;vertical-align:top}
.ep-sales th{white-space:normal}

/* These must total 100. At 111.75 the fixed layout still overflowed,
   which is the scrollbar that survived the last attempt. */
.ep-sales col.c-who{width:18%}
.ep-sales col.c-what{width:18%}
.ep-sales col.c-stay{width:16%}
.ep-sales col.c-money{width:9.6%}

/* Long company and hotel names wrap rather than widening the table. */
.ep-who,.ep-what{overflow-wrap:anywhere}
.ep-who .cell-main,.ep-what .cell-main{display:block;line-height:1.3}
.ep-who .cell-sub,.ep-what .cell-sub{display:block;font-size:11.5px;color:var(--ink-3);
  margin-top:2px;line-height:1.3}

/* Figures never wrap; that is what made the table scroll. */
.ep-sales td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.ep-sales td.num .sub{font-size:11px;color:var(--ink-3);white-space:nowrap}
.ep-stay{white-space:nowrap}
.ep-stay .sub{white-space:nowrap;font-size:11.5px}

@media (max-width:1100px){
  .ep-sales th,.ep-sales td{padding:7px 5px;font-size:12.5px}
  .ep-sales td.num .sub{display:none}
}

/* ---- Expo Booking: the terms editor ----------------------------------
   A toolbar over a contenteditable div. Bordered as one control so it
   reads as a field rather than as a floating strip of buttons above
   some text. */
.rte{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.rte__bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:6px 8px;border-bottom:1px solid var(--line);background:#f7f9fc}
.rte__b{font:inherit;font-size:13px;line-height:1;padding:6px 9px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--ink-2)}
.rte__b:hover{background:#eef2f8;border-color:#c9d4e4}
.rte__b:active{background:#e2e9f4}
.rte__sep{width:1px;height:18px;background:var(--line);margin:0 3px}
.rte__area{min-height:260px;max-height:420px;overflow-y:auto;padding:12px 14px;
  font-size:14px;line-height:1.6;color:var(--ink-1);outline:none}
.rte__area:focus{box-shadow:inset 0 0 0 2px rgba(46,111,217,.14)}
.rte__area p{margin:0 0 9px}
.rte__area h3{font-size:15px;margin:14px 0 6px}
.rte__area ul,.rte__area ol{margin:0 0 9px;padding-left:22px}
.rte__area li{margin-bottom:4px}
.rte__area a{color:var(--navy);text-decoration:underline}

/* ---- Expo Booking: multi-select filter --------------------------------
   A button that opens a searchable checklist. Not a native <select
   multiple>, which on a long list means ctrl-clicking blind through
   fifty hotels, and which cannot be searched at all. */
.ms{position:relative}
.ms__btn{text-align:left;cursor:pointer;background:#fff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ms__btn:after{content:'';float:right;margin:7px 0 0 8px;border:4px solid transparent;
  border-top-color:var(--ink-3)}
.ms__pop{position:absolute;z-index:60;top:calc(100% + 4px);left:0;min-width:270px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 44px rgba(20,28,44,.18);padding:8px}
.ms__search{margin-bottom:6px}
.ms__list{max-height:260px;overflow-y:auto}
.ms__opt{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;
  cursor:pointer;font-size:14px;color:var(--ink)}
.ms__opt:hover{background:#f2f5fa}
.ms__opt input{width:16px;height:16px;flex:none;margin:0}
.ms__none{padding:14px;text-align:center;color:var(--ink-3);font-size:13px}
.ms__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);margin-top:6px;padding-top:7px}

/* A hotel heading inside the room-type table. Sticky-looking rather than
   sticky: a real sticky row inside a horizontally scrolling table
   detaches from its columns. */
.table .row--group td{background:#f4f7fb;border-top:1px solid var(--line)}
.table .row--group strong{color:var(--ink)}


/* ---- Hotel vouchers: sortable headings ------------------------------- */
.hv-sort{user-select:none}
.hv-sort:hover{background:#eef2f8}
.hv-sort__a{display:inline-block;width:12px;margin-left:3px;color:var(--navy);font-weight:700}
.hv-sort--on{color:var(--ink)}


/* ---- Hotel vouchers: the Filters button ------------------------------
   Given its own colour. It is the control that changes what the whole
   table means, and as another grey ghost button it read as one more
   thing to ignore. */
.btn--accent{background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3}
.btn--accent:hover{background:#e0e7ff;border-color:#a5b4fc}
.btn--accent:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(99,102,241,.28)}

/* ---- the filter panel, inside the shared drawer ---------------------- */
.hvf__add{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.hvf__addhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:9px}
.hvf__fields{max-height:230px;overflow-y:auto;border:1px solid var(--line);
  border-radius:9px;padding:5px;margin:9px 0}
.hvf__group{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 8px 4px}
.hvf__list{display:grid;gap:8px;margin-bottom:4px}
.hvf__item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--bg)}
.hvf__x{border:0;background:transparent;cursor:pointer;color:var(--ink-3);
  font-size:14px;line-height:1;padding:5px 7px;border-radius:6px}
.hvf__x:hover{background:#fdecea;color:#b3261e}
.hvf__editor{border:1px solid var(--line);border-radius:10px;margin-top:10px;
  background:var(--bg);overflow:hidden}
.hvf__edhead{display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:1px solid var(--line);background:#fff}
.hvf__edbody{padding:11px 12px}
.hvf__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hvf__tabs{display:flex;gap:6px;margin-bottom:10px}
.hvf__tab{flex:1;font:inherit;font-size:13px;padding:7px 9px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:7px;color:var(--ink-2)}
.hvf__tab--on{background:var(--navy);border-color:var(--navy);color:#fff}
.hvf__opts{max-height:240px;overflow-y:auto;border:1px solid var(--line);
  border-radius:9px;padding:5px;margin:9px 0}
.hvf__opt{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;
  cursor:pointer;font-size:13.5px}
.hvf__opt:hover{background:#f2f5fa}
.hvf__opt input{width:15px;height:15px;flex:none;margin:0}
.hvf__opt span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hvf__opt em{font-style:normal;font-size:11.5px;color:var(--ink-3)}

/* ---- the vendor panel ------------------------------------------------ */
.hvv__v{font-size:14px;color:var(--ink-1);padding:7px 0}
.hvv__cheque{margin-top:16px;padding:13px 15px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg)}
.hvv__cheque p{margin:5px 0 9px}
.hv-vendorlink{color:var(--navy);text-decoration:none;border-bottom:1px dashed currentColor}
.hv-vendorlink:hover{border-bottom-style:solid}

/* ---- pagers ---------------------------------------------------------- */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}


/* ---- a count badge on a button ---------------------------------------
   Its own colour, because the number is what tells somebody the list in
   front of them is not the whole list -- the thing that gets forgotten
   and then reported as missing data. */
.btn__badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-left:7px;border-radius:9px;
  background:#4338ca;color:#fff;font-size:11px;font-weight:700;line-height:1}
.btn--accent .btn__badge{background:#4338ca}

/* ---- approvals: the tab had no padding of its own -------------------- */
.hv-approval{padding:16px 18px 18px}
.hv-approval .astep{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--line)}
.hv-approval .astep:last-child{border-bottom:0}
.hv-approval .astep-roles{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hv-approval .astep-roles label{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.hv-approval .row{gap:14px;align-items:center;padding-top:6px}
.hv-approval .row label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px}

/* ---- the cheque preview ---------------------------------------------- */
.hvv__h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.hvv__scan{display:block;margin:10px 0;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#fff}
.hvv__scan img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain}
.hvv__pdf{display:block;width:100%;height:320px;margin:10px 0;border:1px solid var(--line);
  border-radius:10px;background:#fff}


/* ---- flight vouchers: a shorter row ----------------------------------
   Two rows per record, several cells stacking a main line over a sub
   line. Scoped to this table because tbl-band and cell-sub are shared
   with the hotel and car lists, which are not being changed. */
.fv-tight table td{padding-top:6px;padding-bottom:6px}
.fv-tight .tbl-band td{padding-top:4px;padding-bottom:4px}
.fv-tight .tbl-band__in{gap:8px;min-height:0;line-height:1.25}
.fv-tight .tbl-band__no{font-size:12.5px}
.fv-tight .tbl-band__sub,.fv-tight .vtype{font-size:11px}
.fv-tight .cell-main{line-height:1.25;font-size:13px}
.fv-tight .cell-sub{line-height:1.2;font-size:11.5px;margin-top:1px}
.fv-tight .cv-pill,.fv-tight .cv-eye{padding-top:1px;padding-bottom:1px;font-size:11px}


/* ---- a totals row at the foot of a register --------------------------
   Sticky, so it stays readable while a long list is scrolled: the figure
   that goes on a return should not be something you have to scroll back
   to find. */
.tbl-total td{font-weight:700;border-top:2px solid var(--line);
  background:var(--bg);position:sticky;bottom:0}
.tbl-total td:first-child{font-weight:600;color:var(--ink-2)}


/* ---- the invoice picker --------------------------------------------- */
.wd-list{display:grid;gap:8px;margin-bottom:12px}
.wd-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--bg)}
.wd-gone{margin:6px 0 12px;font-size:12.5px;color:var(--ink-3)}
.wd-gone summary{cursor:pointer}
.wd-why{margin:4px 0 0}
.wd-crumbs{font-size:13px;color:var(--ink-3);padding:2px 0 10px}
.wd-crumbs a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(50,55,89,.22)}
.wd-suggest{font-size:13px;background:#fff8e6;border:1px solid #f0e2a8;border-radius:9px;
  padding:10px 13px;margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wd-folders{display:grid;gap:7px;max-height:280px;overflow-y:auto;
  border:1px solid var(--line);border-radius:10px;padding:8px}
.wd-folder{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;
  font-size:13.5px;background:#fff;border:1px solid transparent;border-radius:7px;
  padding:8px 10px;cursor:pointer}
.wd-folder:hover{background:#f2f5fa;border-color:var(--line)}
.wd-ico{flex:none;font-size:15px}
.wd-drop{margin-top:14px;border:2px dashed var(--line);border-radius:12px;
  padding:22px 18px;text-align:center;background:var(--bg)}
.wd-drop--on{border-color:var(--navy);background:#eef1f8}
.wd-drop p{margin:0 0 4px}
.wd-pick{color:var(--navy);font-weight:600;cursor:pointer;text-decoration:underline}


/* ---- the invoice picker, finished states ----------------------------- */
.wd-done{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ok);
  background:var(--ok-bg);border:1px solid #bfe3cd;border-radius:9px;
  padding:9px 12px;margin-bottom:10px;font-size:13.5px}
.wd-tick{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:9px;background:var(--ok);color:#fff;font-size:12px;font-weight:700;flex:none}
.wd-item--ok{border-color:#bfe3cd;background:#fff}
.wd-meta{min-width:0}
.wd-name{display:block;color:var(--navy);font-weight:600;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid rgba(50,55,89,.22)}
.wd-acts{display:flex;align-items:center;gap:6px;flex:none}
.wd-wait{display:grid;gap:9px;padding:14px 2px}
.wd-here{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);padding:8px 0 2px}
.wd-drop--has{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.wd-drop--has .sub{color:var(--ok)}


/* =====================================================================
   PHONES :: stopping the sideways scroll at its source
   =====================================================================

   The card layer in mobiletable.js already turns each row into a card,
   and it works. What still scrolls is everything the cards sit inside.

   Three things cause it, and none of them is the table markup:

     1. min-width on a table or its wrapper. A card layout inside a
        table that is still 900px wide scrolls anyway -- the rows are
        cards, the TABLE is not.
     2. white-space:nowrap, used 105 times. A long hotel name or a
        narration cannot wrap, so it sets the width of the page.
     3. inline width="18%" on table headers, written by the screens.
        Inline styles beat any stylesheet rule, so the card layout
        cannot override them from here -- they have to be neutralised
        with !important, which is the one place it is warranted.

   All of this is confined to the breakpoint. Nothing above 900px is
   touched, so the desktop layout is exactly as it was.
   ===================================================================== */
@media (max-width: 900px) {

  /* Nothing may be wider than the screen. The belt-and-braces pair --
     the page cannot scroll sideways even if something inside misbehaves. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* 1. Wrappers and tables give up their minimum widths. */
  .table-wrap,
  .table-wrap--fit,
  .table-wrap table,
  table.mt { min-width: 0 !important; width: 100% !important; }

  .table-wrap { overflow-x: visible !important; }

  /* 2. Long values wrap instead of setting the page width. Numbers and
        dates keep their nowrap, because a figure broken across two lines
        is harder to read than a slightly wider card. */
  table.mt tr.mt-row td,
  table.mt tr.mt-row td * { white-space: normal !important; word-break: break-word; }
  table.mt tr.mt-row td.num { white-space: nowrap !important; }

  /* 3. Inline column widths are meaningless once rows are cards. */
  table.mt th[style*="width"],
  table.mt td[style*="width"] { width: auto !important; }
  table.mt th[style*="min-width"],
  table.mt td[style*="min-width"] { min-width: 0 !important; }

  /* The toolbars above tables: wrap rather than push the page out. */
  .toolbar, .card__head, .fv-strip, .cv-bulk {
    flex-wrap: wrap !important;
  }
  .toolbar .input, .card__head .input { max-width: 100% !important; }

  /* Drawers are full width, so a filter panel or an invoice picker is
     usable rather than a 420px column on a 390px screen. */
  .drawer, .drawer--wide, .hvf__panel { width: 100vw !important; max-width: 100vw !important; }

  /* Anything still determined to be wide scrolls INSIDE its own box
     rather than dragging the page with it -- charts, wide code, the
     odd embedded report. */
  .cv-reptable, .wd-folders, pre, .chart-wrap { max-width: 100%; overflow-x: auto; }

  /* Stat strips read as two columns rather than one long row. */
  .fv-strip { display: grid !important; grid-template-columns: 1fr 1fr; }
  .fv-strip .fv-stat, .fv-strip td { width: auto !important; }
}

@media (max-width: 560px) {
  /* Two columns on every summary strip, on every screen size.
     Dropping to one at 560px left the counters occupying most of a
     phone before the list even began -- the same complaint that had
     already been made about CRM, which is a sign it was never right
     for the others either. */
  .fv-strip { grid-template-columns: 1fr 1fr; }
  .form-grid--2, .hvf__row { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  /* The exhibition city, hidden on a card -- the name already says it. */
  .ep-city { display: none; }
}


@media (max-width: 900px) {
  /* CRM and Events :: the summary strip in two columns.
     Eight counters in a single column pushed the list itself below the
     fold, so the screen opened on statistics rather than on work. */
  #crm-sum.fv-strip { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  #crm-sum .fv-stat { width: auto !important; padding: 9px 11px; }
  #crm-sum .fv-stat b { font-size: 17px; }

  /* The lead number is an identifier, not a quantity: it reads down the
     left edge like a name. */
  table.mt td[data-mt-label="Lead"],
  table.mt td.mt-cell--title { text-align: left !important; }

  /* Row actions were overflowing the card. They wrap and sit under the
     content instead of pushing it sideways. */
  table.mt tr.mt-row td .btn,
  table.mt tr.mt-row td button { max-width: 100%; white-space: normal; }
  table.mt tr.mt-row td:last-child {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start;
  }
}




/* Exhibition: the secondary figure under its headline number. */
.ep-sub{font-size:11.5px;color:var(--ink-3);line-height:1.3;margin-top:2px;font-weight:400}


/* =====================================================================
   PHONES :: one authority for the card layout
   =====================================================================

   This replaces three earlier blocks that each restyled the same cells
   and fought one another -- the last one matched every table rather
   than the one it was written for, which is why every screen ended up
   in a single column with each label stacked above its value.

   The shape, for every card table:

       ┌──────────────────────────────┐
       │  TITLE  (the first column)   │   full width
       ├──────────────┬───────────────┤
       │ LABEL        │ LABEL         │   two per row
       │ value        │ value         │
       └──────────────┴───────────────┘

   Which cells reach the face is the screen's business, set with
   data-mt-keep / data-mt-skip on the <th>. This only decides how the
   chosen ones are arranged.
   ===================================================================== */
@media (max-width: 900px) {

  table.mt tr.mt-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 6px;
    padding: 10px 12px !important;
    align-items: start;
  }

  /* The title runs the width of the card and carries no label. */
  table.mt tr.mt-row td.mt-cell--title {
    grid-column: 1 / -1 !important;
    font-size: 15px; font-weight: 700; line-height: 1.3;
    padding: 0 0 2px !important;
    white-space: normal;
  }
  table.mt tr.mt-row td.mt-cell--title::before { display: none !important; }

  /* Every other cell: a small label with its value beneath. Stacked
     rather than side by side, because half a phone's width shared
     between a label and a figure leaves room for neither. */
  /* THE LINE THAT WAS UNDOING ALL OF THIS.
   *
   * The original block sets `grid-column: 1 / -1` on every cell, which
   * makes each one span both columns however many columns the row has.
   * The grid was working the whole time; the cells were told to ignore
   * it. Everything ended up in one tall left-hand stack with the right
   * half empty, which is exactly what was on screen.
   *
   * `auto` puts each cell back into the next free slot, so they fill
   * left, right, left, right down the card. */
  table.mt tr.mt-row td {
    grid-column: auto !important;
    display: block !important;
    min-width: 0;
    padding: 0 !important;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  table.mt tr.mt-row td::before {
    display: block;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); font-weight: 600;
    margin: 0 0 1px !important;
  }
  table.mt tr.mt-row td.num { text-align: left !important; }

  /* A sub-line under a value -- a percentage, a purchase figure -- is
     part of that value, not another row. */
  table.mt tr.mt-row td .sub,
  table.mt tr.mt-row td .ep-sub {
    display: block; font-size: 11px; line-height: 1.25; color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Hidden cells must not take a grid slot, or the two columns develop
     gaps where a skipped column used to be. */
  table.mt tr.mt-row td.mt-cell--more { display: none !important; }

  /* Actions and the "more" button sit across the bottom. */
  /* The action cell keeps its own corner rather than a full row. */
  table.mt tr.mt-row td.mt-cell--action { grid-column: 1 / -1 !important; }
  table.mt tr.mt-row .mt-more-btn {
    grid-column: 1 / -1; margin-top: 4px; padding: 4px 10px; font-size: 12px;
  }

  /* Header actions wrap instead of running past the card edge. */
  .card__actions, .card__head { flex-wrap: wrap !important; }
  .card__actions { gap: 6px; row-gap: 6px; }
}


@media (max-width: 900px) {
  /* NOTHING ESCAPES ITS CARD.
     Status bars, invoice-type tags and long figures were starting
     inside the card and finishing past its edge, where they are simply
     invisible. Anything placed in a cell is now bounded by it. */
  table.mt tr.mt-row td > *,
  table.mt tr.mt-row td .tag,
  table.mt tr.mt-row td .cv-pill,
  table.mt tr.mt-row td .bar,
  table.mt tr.mt-row td .progress { max-width: 100% !important; box-sizing: border-box; }

  /* Tags and pills wrap onto a second line rather than running out. */
  table.mt tr.mt-row td .tag,
  table.mt tr.mt-row td .cv-pill {
    display: inline-block; white-space: normal; word-break: break-word;
    max-width: 100%; line-height: 1.25;
  }

  /* A progress or status bar fills the cell it is in and no more. */
  table.mt tr.mt-row td .bar,
  table.mt tr.mt-row td .progress,
  table.mt tr.mt-row td [class*="__bar"] { width: 100% !important; }

  /* A cell holding several tags lays them out rather than in one line. */
  table.mt tr.mt-row td.mt-cell--tags {
    display: flex !important; flex-wrap: wrap; gap: 4px; white-space: normal;
  }

  /* The summary strips: two columns, and the numbers sized to fit. */
  .fv-strip .fv-stat b { font-size: 17px; }
  .fv-strip .fv-stat span { font-size: 10.5px; }
}


@media (max-width: 900px) {
  /* The money row under "Cost against sell" was a single flex line --
     vendor, base, GST, TDS, margin -- so on a phone the margin, being
     last, finished past the edge of the panel and the card. It becomes
     a two-column grid, which keeps every figure inside the box that
     contains it. */
  .cv-money {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    width: 100%; box-sizing: border-box;
  }
  .cv-money > div { min-width: 0; }
  .cv-money > div > b,
  .cv-money > div > span {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* The comparison table above it scrolls inside its own box rather
     than dragging the panel sideways. */
  .cv-cmp, .cv-panel__b > .table-wrap { max-width: 100%; overflow-x: auto; }
}

/* Drawer header actions, beside the close button. */
.drawer__acts{display:flex;align-items:center;gap:6px;flex:none;margin-right:4px}

/* The history list: a timestamp, what changed, and the change itself. */
.log--full{list-style:none;margin:0;padding:0}
.lg-item{padding:11px 2px;border-bottom:1px solid var(--line)}
.lg-item:last-child{border-bottom:0}
.lg-when{font-size:11.5px;color:var(--ink-3)}
.lg-what{font-size:14px;margin-top:2px}
.lg-diff{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:13.5px}
.lg-old{color:var(--ink-3);text-decoration:line-through}
.lg-arrow{color:var(--ink-3)}
.lg-new{font-weight:700;color:var(--ink)}


/* The history line: label, before and after, on one row. */
.lg-field{flex:0 0 auto;margin-right:2px}
.lg-diff{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:13.5px}

@media (max-width: 900px) {
  /* The row actions -- view and download -- were running past the edge
     of the table on a phone. They sit together at the foot of the card,
     bounded by it. */
  table.mt tr.mt-row td.hv-acts,
  table.mt tr.mt-row td:last-child {
    display: flex !important; flex-wrap: wrap; gap: 8px;
    grid-column: 1 / -1 !important; margin-top: 4px;
  }
  table.mt tr.mt-row td.hv-acts::before { display: none; }
  .hv-acts .hv-ico { flex: 0 0 auto; }
}

/* On the laptop the action column must not be squeezed to nothing --
   the two icons were overflowing their cell rather than the cell
   growing to hold them. */
td.hv-acts{white-space:nowrap}
.hv-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.hv-acts .hv-ico{flex:0 0 auto}

/* Payment: the remarks box and its action on one line. */
.hv-payrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.hv-payrow .input{flex:1 1 220px;min-width:0}
.hv-payrow .btn{flex:0 0 auto}

/* A .row inside a voucher panel had no display:flex, so the gap set on
   it did nothing -- which is why the PDF and link buttons sat flush
   against each other however much gap was asked for. */
.cv-panel__b .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cv-panel__b .row + .row{margin-top:10px}
.hv-linkrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}

/* The payment note under the cost. Clipped rather than allowed to
   stretch the column; the full text is the title attribute. */
/* The payment note under the cost.
   
   Two lines rather than one clipped one: "use Brijesh's Scapia card for
   5000" is a sentence, and a single line cut at "use Brijesh..." tells
   the reader nothing they needed. Anything longer than two lines is
   still clipped, and the full text is always the title attribute, so a
   hover shows it whole. */
.hv-payrem{
  max-width:210px;margin-left:auto;font-style:italic;
  white-space:normal;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-height:1.3;cursor:help;
}
@media (max-width:900px){
  .hv-payrem{max-width:100%;margin-left:0;-webkit-line-clamp:3}
}

/* The payment request, at the head of the approval panel. */
.hv-request{margin:2px 0 12px;padding:10px 13px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px}
.hv-request__note{margin-top:5px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}

/* Clipped names carry the whole text on the shared tip. */
.fv-clip{cursor:help;border-bottom:1px dotted var(--line-2)}
.cv-chg{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:10px}
.cv-chg--open{border-color:#f0e2a8;background:#fffbe6}
.cv-chg__h{font-weight:600;margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cv-chg__t{width:100%;border-collapse:collapse;font-size:13px}
.cv-chg__t td{padding:4px 6px;border-top:1px solid var(--line)}

/* The car duty line: one phrase, not three stacked lines. */
.cv-duty{white-space:normal}
.cv-duty .fv-flight__n{display:inline}
/* Column widths for the car list.
   
   The dates cell carries white-space:nowrap, so "10 Aug 2026 - 14 Aug
   2026" cannot break and simply ran over whatever sat beside it -- the
   sales name appeared welded to the date. A max-width on the NEXT column
   did nothing about that, because the overflow was coming from the date
   column itself.
   
   So the dates column is given room to hold its longest real value, and
   both columns clip rather than overrun. */
#cv-rows td:nth-child(3), #cv-rows th:nth-child(3){
  width:19%;min-width:150px;overflow:hidden;text-overflow:ellipsis
}
#cv-rows td:nth-child(4), #cv-rows th:nth-child(4){
  width:15%;max-width:150px;overflow:hidden;text-overflow:ellipsis
}
#cv-rows td:nth-child(4) .cell-main,
#cv-rows td:nth-child(4) .cell-sub{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* The dates cell wraps at the dash instead of overrunning its column. */
.cv-dates{white-space:normal}
.cv-dates .cell-main{line-height:1.3}

/* Filter panel: values of one field read as alternatives. */
.hvf__or{color:var(--ink-3);font-style:italic}
/* CRM: clipped names and service pills. */
.crm-clip{cursor:help;border-bottom:1px dotted var(--line-2)}
.crm-svc{display:flex;flex-wrap:wrap;gap:4px}
.crm-svc .tag{cursor:help}
/* The progress bar must stay inside its cell. */
/* THE CRM TABLE, LAID OUT TO FIT.
   
   Two mistakes to avoid, both made already:
   
   1. Widths that sum over 100. With table-layout:fixed the browser
      honours them exactly, so the table grows past its container and the
      right-hand columns are cut off.
   
   2. overflow:hidden + text-overflow:ellipsis on EVERY cell. That is
      what put "..." after each progress chip and chopped "21 Aug 2026"
      to "21 Aug ...". Only the customer column, which holds genuinely
      long names, should clip. Everything else is given room to say what
      it has to say.
   
   The tick box is set in pixels, not a percentage: a checkbox is a fixed
   size and giving it 3% of a narrow window cropped it. */
#crm-rows table{table-layout:fixed;width:100%}
#crm-rows th{white-space:normal;line-height:1.25;vertical-align:bottom}
/* Widths are set on the header cells by the screen (two sets, leads and
   events, each adding up to 100). The band row spans every column. */
#crm-rows .tbl-data > td{overflow:hidden}
#crm-rows .tbl-data > td:nth-child(2){text-overflow:ellipsis}
#crm-rows .tbl-data > td:nth-child(4),#crm-rows .tbl-data > td:nth-child(7){white-space:nowrap;text-overflow:ellipsis}
#crm-rows td .cell-main,#crm-rows td .sub{white-space:normal;word-break:break-word}
#crm-rows .tbl-band__no{white-space:nowrap}
#crm-rows .tbl-band__in .stage-tag{white-space:nowrap}
#crm-rows .crm-meter{flex:0 1 220px;max-width:220px}
@media (max-width: 720px){
  #crm-rows .tbl-band__in{flex-wrap:wrap;row-gap:4px}
  #crm-rows .tbl-band__spacer{display:none}
  #crm-rows .crm-meter{flex:1 1 100%;max-width:none}
}

/* The follow-up date: plain text, coloured only when it has passed. */
.crm-fu{white-space:nowrap;font-size:13px}
.crm-fu--late{color:var(--err);font-weight:600;cursor:help}

/* Progress as one outline chip filled to its percentage. The fill is a
   background gradient with a hard stop, so the chip is exactly as full
   as the lead is far along -- 50% is half filled, and the number inside
   says so for anyone who wants the figure rather than the impression. */
.lead-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;max-width:100%;padding:3px 8px;box-sizing:border-box;
  border:1px solid var(--line-2);border-radius:999px;
  font-size:11.5px;font-weight:700;line-height:1.3;cursor:help;
  background:linear-gradient(to right,
    var(--lead-col, var(--navy)) 0 var(--lead-fill, 0%),
    transparent var(--lead-fill, 0%) 100%);
}
.lead-chip__n{mix-blend-mode:normal;color:var(--ink)}

/* A customer with no Books contact: marked, not given its own line. */
.crm-unmatched{border-bottom:1px dotted var(--warn);cursor:help}

/* The stage word and its progress chip, with air between them. */
.crm-stageline{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Inside a lead, the service pills sit on one line under the label. */
.deflist .crm-svc{margin-top:2px}

/* The estimate lines behind a comparison. */
.hv-lines{margin-top:12px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.hv-lines table{width:100%;margin-top:6px;font-size:12.5px}

/* The approver remark, given the same weight as the ops request. */
.hv-request--appr{margin-top:6px;background:#fff}
.hv-request--appr .btn{margin-top:6px}

/* THE FILTER PANEL, in the Creator shape.
   
   One list of fields. Tick one and its operator and value open under it,
   indented, full width. No card, no heading, no Add button -- ticking
   the field IS adding the filter.
   
   The wrapper is .hvf__f, not .hvf__row: .hvf__row already existed as a
   two-column grid, and reusing the name put every editor in the
   right-hand column. */
.hvf__fields{max-height:none;border:0;border-radius:0;padding:0;margin:8px 0 0}
.hvf__add{margin:0;padding:0;border-top:0}
.hvf__group{padding:14px 2px 5px;font-size:10.5px}

.hvf__f{border-bottom:1px solid var(--line-2)}
.hvf__f:last-child{border-bottom:0}
.hvf__f .hvf__opt{padding:9px 2px;font-size:13.5px;border-radius:0}
.hvf__f .hvf__opt:hover{background:transparent;color:var(--navy)}
.hvf__f--on{background:#fafbfd;border-radius:8px;
  box-shadow:inset 2px 0 0 var(--navy);padding-left:8px;margin:2px 0}
.hvf__f--on .hvf__opt{font-weight:600}

.hvf__inline:empty{display:none}
.hvf__inline{padding:0 2px 10px 26px}
.hvf__ed{display:flex;flex-direction:column;gap:6px}
.hvf__ed .input{width:100%;font-size:13px;padding:7px 9px}
.hvf__pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hvf__pair .input{min-width:0}
/* A preset fills the dates and shows them read-only: what it means is
   visible rather than taken on trust. */
.hvf__ed .input[readonly]{background:#f6f8fc;color:var(--ink-2)}

/* What is applied, at the top of the panel.
   
   Two or three to a row rather than one each: three filters stacked full
   width pushed the fields themselves off the screen, which is the
   opposite of what a summary is for. auto-fill means one filter still
   fills the row and three share it. */
.hvf__none{color:var(--ink-3);font-size:13px;margin:2px 0 6px}
.hvf__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
  gap:6px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.hvf__item{padding:6px 8px;align-items:flex-start;gap:4px}
.hvf__item strong{font-size:12.5px;display:block;line-height:1.3}
.hvf__item .sub{font-size:11.5px;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.hvf__item .hvf__x{padding:2px 4px;margin:-2px -2px 0 0}
.hvf__or{color:var(--ink-3);font-style:italic}

/* Picking exact values: a short, scrollable list of tick boxes. */
.hvf__picks{max-height:170px;overflow-y:auto;border:1px solid var(--line);
  border-radius:8px;padding:4px 6px;background:#fff}
.hvf__pick{display:flex;align-items:center;gap:8px;padding:5px 3px;
  font-size:13px;cursor:pointer}
.hvf__pick input{width:14px;height:14px;flex:none;margin:0}

/* The values collected on one text field. */
.hvf__vals{display:flex;flex-wrap:wrap;gap:5px}
.hvf__vals:empty{display:none}
.hvf__val{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  background:var(--navy);color:#fff;border-radius:999px;padding:3px 5px 3px 10px}
.hvf__val button{border:0;background:transparent;color:inherit;cursor:pointer;
  font-size:11px;line-height:1;padding:2px 3px;opacity:.75}
.hvf__val button:hover{opacity:1}
.hvf__addrow{display:grid;grid-template-columns:1fr auto;gap:6px}

/* The drawer holding it needs far less width now that nothing sits in a
   second column. */
.drawer--filters{width:min(420px,100vw)}

/* ===== HOME =========================================================
   The greeting, the apps you can open, and whose week it is. */
.hm-hi{margin:4px 0 22px}
.hm-hi h1{margin:0;font-size:30px;font-weight:700;color:var(--ink);line-height:1.15}
.hm-hi p{margin:6px 0 0;color:var(--ink-2);font-size:14.5px}

.hm-wrap{display:flex;gap:24px;align-items:flex-start}
.hm-left{flex:1 1 auto;min-width:0}
.hm-right{width:330px;flex:none}
.hm-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
.hm-head h2{margin:0;font-size:19px;font-weight:700;color:var(--ink)}

.hm-apps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hm-app{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:15px 17px 16px;color:inherit;transition:border-color .12s}
.hm-app:hover{border-color:var(--navy-300)}
.hm-app__n{font-size:15.5px;font-weight:700;color:var(--ink)}
.hm-app__p{margin-top:11px;display:flex;flex-wrap:wrap;gap:5px}

.hm-pill{font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px;line-height:1.35}
.hm-pill--yes{color:#166534;background:#dcfce7}
.hm-pill--no{color:var(--ink-3);background:var(--line-2)}

.hm-key{margin-top:14px;display:flex;gap:16px;font-size:12.5px;color:var(--ink-3)}
.hm-key span{display:flex;align-items:center;gap:7px}
.hm-sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.hm-sw--yes{background:#dcfce7;border:1px solid #86efac}
.hm-sw--no{background:var(--line-2);border:1px solid var(--line)}

.hm-celh{margin:0 0 3px;font-size:18px;font-weight:700;color:var(--ink)}
.hm-cels{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.hm-cel{display:flex;gap:11px;align-items:center}
.hm-cel__f{flex:none}
.hm-face{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 1px var(--line)}
.hm-face--i{background:#e8ebf3;color:var(--navy-600);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.hm-cel__n{font-size:14.5px;font-weight:600;color:var(--ink)}
.hm-cel__w{font-size:12.5px;margin-top:1px;font-weight:600}
.hm-cel__w--birthday{color:#92400e}
.hm-cel__w--anniversary{color:#0f5d57}
.hm-none{color:var(--ink-3);font-size:13.5px;margin:14px 0 0}

@media (max-width:900px){
  .hm-wrap{flex-direction:column}
  .hm-right{width:100%}
  .hm-apps{grid-template-columns:1fr}
  .hm-hi h1{font-size:24px}
}

/* Online reconciliation: the client booking register. */
.ob-reg{margin-bottom:14px}
.ob-reg .card__head{align-items:flex-start;gap:14px}
.ob-reg__up{position:relative;cursor:pointer;flex:none}
.ob-reg__meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--ink-2);margin-bottom:10px}
.ob-reg__none{color:var(--ink-3);font-size:13.5px;margin:0}
.ob-reg__t{width:100%;border-collapse:collapse;font-size:13px}
.ob-reg__t th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line)}
.ob-reg__t td{padding:7px 8px;border-bottom:1px solid var(--line-2)}
.ob-reg__t .num{text-align:right}

/* The XCMG component chooser. */
.ob-xc-pick{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.ob-xc-pick--open{margin-top:0;padding:12px 14px;border:1px solid #fde68a;background:#fffbeb;border-radius:10px;margin-bottom:12px}
.ob-xc-pick__h{font-size:13.5px;color:var(--ink-2);margin-bottom:8px;line-height:1.5}
.ob-xc-t td{vertical-align:top}
.ob-xc-pick .btn{margin-top:10px}

/* The XCMG database dialog. */
.obx-s{padding:14px 0;border-top:1px solid var(--line-2)}
.obx-s:first-child{border-top:0;padding-top:2px}
.obx-h{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:9px}
.obx-g3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-top:8px}
.obx-l{display:block;font-size:12px;color:var(--ink-2);margin:0 0 3px}
.obx-adv{margin-top:8px}.obx-adv summary{cursor:pointer;font-size:12.5px;color:var(--ink-3)}
.obx-key{width:100%;box-sizing:border-box;height:66px;font:12px ui-monospace,monospace;margin:8px 0}
.obx-s .btn{margin-top:10px}
.ob-xc-need{padding:10px 12px;border:1px solid #fde68a;background:#fffbeb;border-radius:9px}
@media (max-width:700px){.obx-g3{grid-template-columns:1fr}}

/* Hotel vouchers :: Payments & bills. The switch sits on the same 20px
   gutter as the toolbar below it, so the view reads as one block. */
.hv-pb__switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 20px 0}
.hv-pb__n{display:inline-block;min-width:18px;margin-left:4px;padding:0 6px;border-radius:9px;
  background:rgba(0,0,0,.08);font-size:11.5px;line-height:18px;text-align:center}
.btn--primary .hv-pb__n{background:rgba(255,255,255,.22)}
.hv-pb__hint{margin-left:6px}
.hv-acpaid{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hc-vendrow .btn{white-space:nowrap}
/* One-row bar, and a table that stays inside its card: long tags wrap. */
.hv-pb__bar{flex-wrap:wrap}
.hv-pb__bar .hv-pb__switch{padding:0}
.hv-pb .hv-table td{overflow-wrap:anywhere}
.hv-pb .hv-table .tag{white-space:normal;line-height:1.3}
.hv-acpaid__note{max-width:280px;flex:1 1 200px}
.hv-bulk__note{max-width:220px;height:30px}
.pager__sub{margin-left:auto;color:var(--ink-3);font-size:12.5px}
.pager--count .pager__sub{margin-left:10px}
.hv-rounds{margin-top:10px;border-top:1px dashed var(--line-2);padding-top:8px}
.hv-rounds b{font-size:12.5px}

/* Car list :: the status column. The pills stack rather than running on,
   so a row with three of them stays inside its share of the table. */
.cv-statcol .cv-status{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.cv-statcol .cv-stage,.cv-statcol .cv-pill{max-width:100%;white-space:normal;line-height:1.25}
.cv-duty{overflow-wrap:anywhere}
.tbl-data td{overflow-wrap:anywhere}

/* Hotel list :: view and download sit under the voucher number. A column
   of their own kept coming out narrower than two buttons, and a
   fixed-layout table spills such a cell outside the card rather than
   shrinking it. Here they are inside a cell that has the room. */
.hv-rowacts{display:flex;gap:6px;margin-top:6px}
.hv-rowacts .hv-ico{margin:0;width:26px;height:26px;flex:0 0 auto}
/* A pill says one thing and should take one line to say it. */
.hv-table td .tag{white-space:nowrap;font-size:11.5px;padding:2px 7px}
.hv-table td .tag + .tag{margin-top:3px}

/* A heading inside a drawer's body, for the sections of the user editor. */
.drawer__h{margin:18px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3)}

/* Car voucher :: the accounts confirmation, beside its remark box. */
.cv-acpaid{display:flex;gap:8px;align-items:center;margin:10px 0}
.cv-acpaid .input{max-width:260px}

/* Flight voucher :: the sectors of a one-stop journey. */
.fv-stops{margin:14px 0 4px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.fv-stops__h{padding:8px 12px;background:var(--bg-2);font-weight:600;font-size:12.5px}
.fv-stops__leg{padding:8px 12px;border-top:1px solid var(--line-2);font-size:13px}
.fv-leg{padding:3px 0;font-size:13px}

/* Exhibition Performance :: filters, team groups, finished exhibitions. */
.ep-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  border-top:1px solid var(--line-2)}
.ep-fdrawer .field{margin-bottom:16px}
.ep-fdrawer .field > label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
/* A select that matches the rest of the screen: the browser's own arrow is
   replaced so it does not read as a plain grey box in a styled panel. */
.ep-sel{position:relative}
.ep-sel select{width:100%;max-width:none;appearance:none;-webkit-appearance:none;
  padding-right:32px;cursor:pointer}
.ep-sel::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;
  margin-top:-5px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);pointer-events:none}
.ep-picks{max-height:230px;overflow:auto}
.ep-picks__sep{height:1px;background:var(--line-2);margin:6px 0}
.ep-fh{margin:20px 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:14px}
.ep-rng{margin-bottom:18px}
.ep-rng label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.ep-rng__v{font-weight:500;color:var(--ink-3)}
.ep-rng--on .ep-rng__v{color:var(--brand);font-weight:600}
.ep-rng__ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);
  margin-top:2px}
/* One slider, two handles: both inputs share a track, and the band between
   them is filled so the chosen range is visible without reading figures. */
.ep-rng__pair{position:relative;height:26px;--ep-a:0%;--ep-b:100%}
.ep-rng__pair::before{content:"";position:absolute;left:0;right:0;top:11px;height:5px;
  border-radius:3px;background:var(--line-2)}
.ep-rng__pair::after{content:"";position:absolute;top:11px;height:5px;border-radius:3px;
  left:var(--ep-a);width:calc(var(--ep-b) - var(--ep-a));background:#4338ca}
.ep-rng__pair input[type=range]{position:absolute;left:0;right:0;width:100%;margin:0;height:26px;
  pointer-events:none;background:transparent;-webkit-appearance:none;appearance:none}
.ep-rng__pair input[type=range]:focus-visible{outline:none}
.ep-rng__pair input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;
  height:16px;width:16px;border-radius:50%;background:#4338ca;border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer}
.ep-rng__pair input[type=range]::-moz-range-thumb{pointer-events:auto;height:16px;width:16px;
  border-radius:50%;background:#4338ca;border:2px solid #fff;cursor:pointer}
tr.ep-group td{background:var(--bg-2);font-size:12.5px;padding:8px 12px;font-weight:600}
tr.ep-group td:first-child{display:table-cell}
.ep-group__name{font-weight:700}
.ep-group__n{margin-left:10px;font-weight:500;color:var(--ink-3)}
tr.ep-over td{background:rgba(0,0,0,.028)}
tr.ep-over td:first-child{box-shadow:inset 3px 0 0 var(--line-2)}

/* Car list :: whether the sell figures are this voucher's own. */
.cv-pill--ok{background:var(--ok-bg);color:#0b5c3e}
.cv-pill--warn{background:var(--warn-bg);color:#6b4a02}
.cv-pill--err{background:var(--err-bg,#fdeaea);color:#8d2020}
.cv-pill--mute{background:var(--line-2);color:var(--ink-3)}

/* Car voucher :: which estimate line the sell is read from. */
.cv-srcline{font-size:12px;color:var(--ink-3);margin:0 0 10px}

/* Car voucher :: other lines of the same PI for the same booking. */
.cv-cands{margin-top:8px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--bg-2);font-size:12px}
.cv-cand{margin-top:6px}

/* Voucher lists :: profit under the cost. */
.vp-up{color:#0b5c3e;font-weight:600}
.vp-down{color:#8d2020;font-weight:600}

/* Voucher lists :: profit as a pill, the same shape as the stage pills. */
.vp-wrap{margin-top:4px}
.vp{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:20px;
  white-space:nowrap}
.vp--up{background:var(--ok-bg);color:#0b5c3e}
.vp--down{background:var(--err-bg,#fdeaea);color:#8d2020}
.vp--miss{background:var(--line-2);color:var(--ink-3)}

/* Reports :: the list on the left, the report on the right. */
.rp{display:grid;grid-template-columns:minmax(220px,260px) 1fr;gap:16px;align-items:start}
.rp__list{display:flex;flex-direction:column;gap:6px}
.rp__item{text-align:left;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 11px;cursor:pointer;font:inherit}
.rp__item:hover{border-color:var(--brand,#4338ca)}
.rp__item--on{background:#eef2ff;border-color:#c7d2fe}
.rp__item b{display:block;font-size:13px}
.rp__item span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.rp__bar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rp__title{font-weight:600}
tr.rp__total td{border-top:2px solid var(--line-2);background:var(--bg-2)}
@media (max-width:900px){.rp{grid-template-columns:1fr}}
/* Hotel contacts :: a wide drawer, so a row of contacts is read at a glance. */
.drawer--contacts{width:min(860px,96vw)}

/* Reports :: the filter panel's tick lists. */
.rpf__grp{margin:0 0 14px}
.rpf__grp>label{display:block;font-size:12px;font-weight:600;margin-bottom:5px}
.rpf__search{margin-bottom:6px}
.rpf__box{max-height:190px;overflow-y:auto;border:1px solid var(--line-2);border-radius:8px;
  padding:6px 8px;background:var(--bg-1)}
.rpf__row{display:block;font-size:12.5px;padding:2px 0}
/* Reports :: a table that stays inside its card, whatever it holds. */
.rp__body{min-width:0}
.rp__body .table-wrap{width:100%;max-width:100%;overflow-x:auto}
.rp__body table{width:100%;table-layout:fixed}
.rp__body td,.rp__body th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp__body td.num,.rp__body th.num{white-space:nowrap}

/* CRM / Events :: search, filters and every action on one line. */
.crm-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crm-bar .tb-q{flex:0 1 320px;min-width:200px}
.crm-bar__sp{flex:1 1 auto}

/* Reports :: totals read in full, even where a cell above them clips. */
.rp__body td.rp__tot{white-space:nowrap;overflow:visible}
.rp__body tr.rp__total td{padding-top:8px;padding-bottom:8px}

/* Commission :: a value read before it is edited. */
.hc-val{padding:7px 0;font-size:13.5px;min-height:20px}

/* Hotel reports :: one toolbar row, a table that never scrolls sideways. */
.hr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line,#e7e9ee)}
.hr-q{flex:0 1 280px;min-width:180px}
.hr-group{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-left:4px;white-space:nowrap}
.hr-meta{padding:9px 14px;font-size:13px;color:var(--ink-2,#4a5163);border-bottom:1px solid var(--line,#e7e9ee)}
.hr-hint{color:var(--ink-3,#8a90a0)}
.hr-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px}
.hr-table th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#8a90a0);
  padding:9px 10px;border-bottom:1px solid var(--line,#e7e9ee);background:var(--bg-2,#f8f9fb)}
.hr-table td{padding:9px 10px;border-bottom:1px solid var(--line,#eef0f3);vertical-align:top;
  overflow-wrap:anywhere;word-break:normal}
.hr-table .num{text-align:right;white-space:nowrap}
.hr-sub{font-size:12px;color:var(--ink-3,#8a90a0);margin-top:2px}
.hr-none{color:var(--ink-3,#b3b8c4)}
.hr-grp td{background:var(--bg-2,#f3f5f8);font-weight:600;font-size:12.5px;padding-top:11px}
.hr-total td{font-weight:700;background:var(--bg-2,#fafbfc);border-top:1px solid var(--line,#dfe2e8)}
.hr-vlink{font-weight:600;text-decoration:none}

/* The approver's remark, edited in place. */
.hv-apedit{margin-top:6px;width:100%}
.hv-apedit__box{width:100%;min-height:54px;resize:vertical;font-size:13.5px}
.hv-apedit__btns{display:flex;gap:6px;margin-top:6px}

/* Hotel reports :: the report picker. */
.hr-pick{position:relative;flex:0 1 380px;min-width:260px}
.hr-pick__btn{display:flex;align-items:center;gap:9px;width:100%;padding:7px 12px;border:1px solid var(--line,#d9dde5);
  border-radius:10px;background:var(--surface,#fff);cursor:pointer;text-align:left;font:inherit;min-height:40px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.hr-pick__btn:hover{border-color:var(--ink-3,#b7bdc9)}
.hr-pick__btn[aria-expanded="true"]{border-color:var(--accent,#3b5bdb);box-shadow:0 0 0 3px rgba(59,91,219,.12)}
.hr-pick__fam{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:var(--bg-2,#eef1f6);color:var(--ink-2,#4a5163);white-space:nowrap}
.hr-pick__title{flex:1;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-pick__caret{color:var(--ink-3,#8a90a0);font-size:12px}
.hr-pick__menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:100%;width:420px;max-width:92vw;
  max-height:440px;overflow:auto;background:var(--surface,#fff);border:1px solid var(--line,#d9dde5);border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.14);padding:6px}
.hr-pick__group{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#8a90a0);
  padding:10px 10px 4px}
.hr-pick__item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;padding:8px 10px;
  border:0;background:none;border-radius:8px;cursor:pointer;text-align:left;font:inherit;font-size:13.5px}
.hr-pick__item:hover,.hr-pick__item:focus{background:var(--bg-2,#f2f4f8);outline:none}
.hr-pick__item--on{background:rgba(59,91,219,.08);font-weight:600}
.hr-pick__by{font-size:11.5px;color:var(--ink-3,#8a90a0);white-space:nowrap}

/* Hotel reports :: the pager. */
.hr-pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px}
.hr-pager__info{font-size:13px;color:var(--ink-2,#4a5163)}
.hr-pager__btns{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.hr-pg--on{background:var(--accent,#3b5bdb);color:#fff;border-color:var(--accent,#3b5bdb)}
.hr-gap{padding:0 4px;color:var(--ink-3,#8a90a0)}

/* Hotel reports :: the one-time restore notice. */
.hr-repair{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}

/* Mark as paid :: what will be recorded, before it is. */
.pp{margin-top:10px;padding:12px 14px;border:1px solid var(--line,#d9dde5);border-radius:10px;background:var(--surface,#fff)}
.pp-h{font-weight:700;font-size:13.5px;margin-bottom:6px}
.pp-remark{font-size:13px;margin-bottom:10px;color:var(--ink-2,#4a5163)}
.pp-remark--none{color:var(--ink-3,#8a90a0)}
.pp-grid{display:grid;grid-template-columns:minmax(120px,1fr) minmax(110px,.8fr) minmax(200px,1.6fr);gap:12px;align-items:start}
.pp-l{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#8a90a0);margin-bottom:4px}
.pp-date{padding:8px 0;font-weight:600}
.pp-mode select,.pp-mode input{width:100%;margin-bottom:6px}
.pp-need{border-color:#d97706 !important;box-shadow:0 0 0 3px rgba(217,119,6,.15)}
.pp-ok{margin-top:8px;padding:8px 10px;border-radius:8px;background:#ecfdf3;color:#05603a;font-size:13px}
.pp-warn{margin-top:8px;padding:8px 10px;border-radius:8px;background:#fff7e6;color:#8a4b00;font-size:13px;border:1px solid #f5c26b}
.pp-btns{display:flex;gap:8px;margin-top:12px}
@media (max-width:640px){.pp-grid{grid-template-columns:1fr}}

/* Hotel reports :: the whole row opens the voucher, as in the voucher list. */
.hr-row{cursor:pointer}
.hr-row:hover td{background:var(--bg-2,#f6f8fb)}
.hr-row:focus{outline:none}
.hr-row:focus-visible td{background:rgba(59,91,219,.07)}

/* Commissions :: search, filter, export, side by side with nothing between. */
.hc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px}
.hc-bar .hc-q{flex:0 1 320px;min-width:200px;width:auto}
.hc-table{width:100%;table-layout:fixed;border-collapse:collapse}
.hc-table td{vertical-align:top;overflow-wrap:anywhere;word-break:normal}
.hc-table .num{white-space:nowrap}
.hc-row{cursor:pointer}
.hc-row:focus{outline:none}
.hc-row:focus-visible td{background:rgba(59,91,219,.07)}
.hc-none{color:var(--ink-3,#b3b8c4)}

/* Commission sidebar :: the voucher sidebar's panels, with its own few touches. */
.hc-link{font-weight:600;text-decoration:none;border-bottom:1px dashed currentColor}
.hc-link:hover{border-bottom-style:solid}
.hc-calc{margin-top:5px;min-height:17px;font-variant-numeric:tabular-nums}
.hc-actions{margin-top:2px}
.hc-danger{display:flex;justify-content:flex-end;margin:4px 0 8px}
.hc-pays{width:100%}
.hc-pays .num{white-space:nowrap}
.cv-panel__b .fv-form .hc-val{padding:2px 0 0;font-size:14px}

/* A dropdown drawn by Credence: a button that says what is chosen and a
   short menu under it, in place of the browser's own select. */
.cpick{position:relative;width:100%}
.cpick__btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;min-height:42px;
  border:1px solid var(--line,#d9dde5);border-radius:var(--radius,8px);background:var(--surface,#fff);cursor:pointer;
  text-align:left;font:inherit;font-size:14px;color:var(--ink,#1c2233);line-height:1.25}
.cpick__btn:hover{border-color:var(--ink-3,#b7bdc9)}
.cpick__btn:focus{outline:none;border-color:var(--navy,#323759);box-shadow:0 0 0 3px rgba(50,55,89,.12)}
.cpick__btn[aria-expanded="true"]{border-color:var(--navy,#323759);box-shadow:0 0 0 3px rgba(50,55,89,.12)}
.cpick__val{font-weight:600;font-variant-numeric:tabular-nums}
.cpick__caret{color:var(--ink-3,#8a90a0);font-size:12px;transition:transform .12s}
.cpick__btn[aria-expanded="true"] .cpick__caret{transform:rotate(180deg)}
.cpick__menu{position:absolute;z-index:60;top:calc(100% + 5px);left:0;min-width:100%;max-height:260px;overflow:auto;
  background:var(--surface,#fff);border:1px solid var(--line,#d9dde5);border-radius:10px;
  box-shadow:0 12px 32px rgba(16,24,40,.16);padding:5px}
.cpick__menu[hidden]{display:none}
.cpick__item{display:block;width:100%;padding:8px 10px;border:0;background:none;border-radius:7px;cursor:pointer;
  text-align:left;font:inherit;font-size:14px;color:var(--ink,#1c2233);font-variant-numeric:tabular-nums}
.cpick__item:hover,.cpick__item:focus{background:var(--bg-2,#f2f4f8);outline:none}
.cpick__item--on{background:rgba(50,55,89,.09);font-weight:700}

/* A voucher opened over another sidebar keeps nearly its full width: it is
   the same voucher, and its three columns need the room. */
.drawer--stacked.drawer--wide.drawer--over{width:min(920px,94vw)}
.hc-bar #hc-export-slot{display:contents}
.hc-pays td{vertical-align:top}
.hc-table .hc-nights{margin-top:1px}

/* Hotel voucher row :: the commission marker, beside view and download.
   Grey while the commission has no amount on it, green once it has. No
   icon at all where the booking earns no commission. */
.hv-ico--comm{cursor:default;color:var(--ink-3,#8a90a0);border-style:dashed}
.hv-ico--comm:hover{border-color:var(--ink-3,#b7bdc9);color:var(--ink-2,#4a5163);background:#fafbfd}
.hv-ico--comm-on{color:#0b7a4b;border-color:#bfe3d0;border-style:solid;background:#f2fbf7}
.hv-ico--comm-on:hover{border-color:#0b7a4b;color:#0b5c3e;background:#eaf7f1}

/* The commission number on the voucher, as a link into its own sidebar. */
.hv-commlink{font-weight:600;text-decoration:none;border-bottom:1px dashed currentColor}
.hv-commlink:hover{border-bottom-style:solid}

/* Booking form :: the commissionable answer, when the save is refused for want of one. */
.radio-row--miss{outline:2px solid #e3a3a3;outline-offset:4px;border-radius:6px}

/* Hotel vouchers :: import from Excel. */
.vi-rules{margin:0;padding-left:18px;font-size:13px;line-height:1.55;color:var(--ink-2,#4a5163)}
.vi-rules li{margin-bottom:5px}
.vi-map,.vi-rows{width:100%;border-collapse:collapse;table-layout:fixed}
.vi-map th,.vi-rows th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#8a90a0);padding:7px 8px;border-bottom:1px solid var(--line,#e6e8ee)}
.vi-map td,.vi-rows td{padding:7px 8px;border-bottom:1px solid var(--line,#eef0f4);vertical-align:top;font-size:13px;overflow-wrap:anywhere}
.vi-map th:nth-child(1){width:34%}.vi-map th:nth-child(2){width:36%}
.vi-map__g td{background:#f7f8fb;font-weight:600;font-size:12px;color:var(--ink-2,#4a5163)}
.vi-row--error td{background:#fff8f7}
.vi-prob{margin-bottom:7px}.vi-prob:last-child{margin-bottom:0}
.vi-prob__t{color:#8f2b23}
.vi-prob__s{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* Answer first, then save :: the dialog over a voucher form. */
.af-why{margin:0 0 12px}
.af-item{border:1px solid var(--line,#e6e8ee);border-radius:10px;padding:11px 12px;margin-bottom:10px;background:#fff}
.af-item__q{font-weight:600;font-size:13.5px;margin-bottom:8px}
.af-item__opts{display:flex;flex-wrap:wrap;gap:6px}
.af-item--done{background:#f2fbf7;border-color:#bfe3d0}
.af-item__done{color:#0b5c3e}

/* PI Advances and Escalations :: the two list apps. */
.la-note{margin:0 14px 10px}
.la-table tr.la-group td{background:#f7f8fb;border-top:1px solid var(--line,#e6e8ee);padding-top:8px;padding-bottom:8px}
.la-days{white-space:nowrap}
.la-types{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 14px 10px;font-size:12.5px;color:var(--ink-2,#4a5163)}
.la-type b{color:var(--ink,#1c2233)}
.la-msg{color:var(--ink-2,#4a5163)}
.la-message{white-space:pre-wrap;line-height:1.5;border:1px solid var(--line,#e6e8ee);border-radius:8px;padding:10px 12px;background:#fafbfd}
.hc-bar .la-year{flex:0 0 150px;width:150px;min-width:0}
.la-year .cpick__btn{height:32px}

/* Administration :: App access -- every person against every app. */
.ag-card{padding:0;overflow:visible}
.ag-card.ag-max{position:fixed;inset:0;z-index:90;margin:0;border-radius:0;display:flex;flex-direction:column;background:#fff}

.ag-bar-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px}
.ag-bar-top .hc-q{flex:0 1 210px;min-width:140px;height:34px}
.ag-bar-top .ag-maxbtn{order:9;white-space:nowrap}
.ag-bar-top .ag-pick{flex:0 0 auto;width:auto;min-width:128px}
.ag-bar-top .ag-pick .cpick__btn{white-space:nowrap;min-height:34px;padding-top:5px;padding-bottom:5px}
.ag-legend{display:flex;flex-wrap:wrap;gap:4px 8px;margin-left:auto;font-size:11.5px;white-space:nowrap;color:var(--ink-2,#4a5163)}
.ag-legend>span{display:inline-flex;align-items:center;gap:5px}
.ag-scroll{height:calc(100vh - 200px);min-height:300px;overflow-x:hidden;overflow-y:auto;border-top:1px solid var(--line,#e6e8ee)}
.ag-max .ag-scroll{flex:1 1 auto;height:auto !important;min-height:0}
.ag-table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed}
.ag-table th,.ag-table td{padding:0;border-bottom:1px solid var(--line-2,#eef0f4);background:#fff}
.ag-table thead th{position:sticky;z-index:2;background:#f7f8fb}
.ag-table thead tr.ag-cats th{top:0;height:22px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3,#8a90a0);text-align:center;border-left:1px solid var(--line,#e6e8ee);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ag-table thead tr:nth-child(2) th{top:22px}
.ag-table .ag-person{position:sticky;left:0;z-index:1;text-align:left;width:var(--ag-namew,190px);padding:4px 8px 4px 10px;border-right:1px solid var(--line,#e6e8ee);overflow:hidden}
.ag-table tbody .ag-person .ag-name,.ag-table tbody .ag-person .sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ag-table tbody .ag-person .ag-name{font-size:13px;line-height:1.3}
.ag-table tbody .ag-person .sub{font-size:11px;line-height:1.3}
.ag-table thead .ag-person{z-index:3;font-size:12px;color:var(--ink-3,#8a90a0);vertical-align:bottom}
.ag-app{vertical-align:bottom;overflow:hidden;border-left:1px solid var(--line-2,#eef0f4)}
.ag-apphead{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:5px 0 4px;border:0;background:none;cursor:pointer;color:var(--ink-2,#4a5163)}
.ag-apphead:hover{background:#eef1f8}
.ag-apphead__t{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;line-height:1.15;font-weight:600;white-space:normal;height:var(--ag-headh,92px);max-width:100%;overflow:hidden;text-align:left}
.ag-apphead__n{font-size:10.5px;color:var(--ink-3,#8a90a0);font-variant-numeric:tabular-nums}
.ag-name{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink,#1c2233);cursor:pointer;text-align:left}
.ag-name:hover:not([disabled]){text-decoration:underline}
.ag-name[disabled]{cursor:default}
.ag-row--off .ag-person,.ag-row--off .ag-td{background:#fafafa}
.ag-td{text-align:center;padding:2px 1px !important;border-left:1px solid var(--line-2,#eef0f4)}
.ag-c{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:30px;height:22px;padding:0;border-radius:6px;border:1px solid transparent;font-size:11px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.ag-c[disabled]{cursor:default;opacity:.75}
.ag-c--none{background:#f3f4f7;color:#a2a8b6;border-color:#eceef3}
.ag-c--view{background:#eaf1ff;color:#2a4fa8;border-color:#cfdcfb}
.ag-c--export{background:#e7f5f2;color:#0d6b5a;border-color:#bfe3da}
.ag-c--full{background:#0b7a4b;color:#fff;border-color:#0b7a4b}
.ag-c--own::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:#e0a100;border:1.5px solid #fff}
.ag-c--dirty{outline:2px solid #e0a100;outline-offset:1px}
.ag-c--mini{width:24px;max-width:24px;height:18px;font-size:10px;cursor:default}
.ag-c:hover:not([disabled]){filter:brightness(.96);box-shadow:0 0 0 2px rgba(42,79,168,.15)}
.ag-save{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fffaf0;border-top:1px solid #f0dfa6;z-index:4;font-weight:600}
.ag-save .sub{font-weight:400}
.ag-menu{position:fixed;z-index:2000;min-width:230px;max-width:320px;max-height:60vh;overflow:auto;background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:10px;box-shadow:0 10px 30px rgba(20,30,60,.16);padding:6px}
.ag-menu__t{font-size:11.5px;color:var(--ink-3,#8a90a0);padding:5px 8px 7px;border-bottom:1px solid var(--line-2,#eef0f4);margin-bottom:4px}
.ag-menu__i{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;border:0;background:none;padding:7px 8px;border-radius:7px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink,#1c2233)}
.ag-menu__i:hover:not([disabled]),.ag-menu__i:focus{background:#f1f4fb;outline:none}
.ag-menu__i--on{font-weight:700}
.ag-menu__i[disabled]{color:#b3b8c4;cursor:not-allowed}
.ag-menu__h{display:block;font-size:11.5px;color:var(--ink-3,#8a90a0);font-weight:400}
.ag-save[hidden]{display:none}

/* A voucher whose estimate line was removed: kept to look at, view only. */
.drawer__lock{flex:0 0 auto;padding:10px 20px;background:#fdecea;color:#7a1b16;border-bottom:1px solid #f3c7c4;font-size:13px;line-height:1.45}
.drawer__lock b{margin-right:4px}
.drawer__lock--warn{background:#fff7e0;color:#6b4a02;border-bottom-color:#f0dfa6}
/* The hotel sidebar has no read-only drawing of its own: its buttons are
   put out of reach here, and the server refuses any change regardless. */
.drawer.hv-locked .drawer__body button,
.drawer.hv-locked .drawer__body .btn:not(a),
.drawer.hv-locked .drawer__foot button{display:none !important}
.drawer.hv-locked .drawer__body input,
.drawer.hv-locked .drawer__body select,
.drawer.hv-locked .drawer__body textarea{pointer-events:none;background:#f6f7f9}
.tag--removed{background:#fdecea;border-color:#f3c7c4;color:#7a1b16}
.drawer--locked .drawer__body .combo__clear{display:none !important}
.drawer--locked .drawer__body .combo{pointer-events:none}

/* PI Advances :: rows open the booking; the payments in the sidebar. */
.la-nowide{overflow-x:hidden}
.la-nowide .la-table{table-layout:fixed;width:100%}
.la-table tr.la-row{cursor:pointer}
.la-table tr.la-row:hover td{background:#f5f7fc}
.la-ctag{font-size:11px;padding:1px 6px;margin-top:3px;display:inline-block}
.la-excess{color:#b42318;font-weight:600}
.la-pay{border:1px solid var(--line,#e6e8ee);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff}
.la-pay__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px}
.la-pay__amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.la-pay__b{margin-top:4px}
.la-pay__note{margin-top:6px}
.la-lines td{vertical-align:top}

/* DSR :: month to date, without GST. */
.dsr-mtd{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:14px 18px;margin-bottom:16px}
.dsr-mtd__label{font-weight:600;font-size:13.5px}
.dsr-mtd__value{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0}
.dsr-mtd__cats{display:flex;flex-wrap:wrap;gap:10px 24px;margin-left:auto}
.dsr-mtd__cat{display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.la-nowide .la-table .tag{white-space:normal;line-height:1.25;max-width:100%}
.la-nowide .la-table .num{overflow:hidden;text-overflow:ellipsis}
.la-svc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.la-vlink{font-weight:600;color:var(--brand,#2a4fa8);text-decoration:underline;text-underline-offset:2px}
.drawer__lock--chg{background:#fff7e0;color:#6b4a02;border-bottom-color:#f0dfa6}
.drawer__lock--chg .drawer__seen{margin-left:8px;padding:2px 10px;min-height:0;height:auto;font-size:12px;vertical-align:baseline}
/* App access: the Role / Department / Status dropdowns open above the grid and scroll on their own */
.ag-bar-top{position:relative;z-index:30}
.ag-bar-top .cpick__menu{z-index:95;max-height:min(60vh,360px);overflow-y:auto;overscroll-behavior:contain}
/* Grievances: report tabs, report rows, the employee picker. Nothing here is wider than the card. */
.gr-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.gr-tab{border:1px solid var(--line,#e3e6ea);background:var(--surface,#fff);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--ink-2,#4a5163);cursor:pointer}
.gr-tab:hover{border-color:#c3cade}
.gr-tab--on{background:var(--navy,#323759);border-color:var(--navy,#323759);color:#fff}
.gr-rep td,.gr-list td{overflow-wrap:anywhere;vertical-align:top}
.gr-rep__row--go{cursor:pointer}
.gr-rep__row--go:hover td{background:#f6f7fb}
.gr-bar{display:flex;align-items:center;gap:8px;min-width:0}
.gr-bar span{display:block;height:8px;border-radius:4px;background:var(--navy,#323759);opacity:.75;flex:0 1 auto;max-width:75%}
.gr-chips{display:flex;flex-wrap:wrap;gap:4px}
.gr-chip{display:inline-block;background:#f2f4fa;border-radius:6px;padding:2px 7px;font-size:11.5px;color:var(--ink-2,#4a5163);white-space:nowrap}
.gr-chip b{color:var(--ink,#1c2233)}
.gr-people{margin-top:4px}
.gr-people th,.gr-people td{padding:6px 8px;font-size:13px;text-align:left;border-bottom:1px solid var(--line,#e3e6ea)}
.fv-stat--plain{cursor:default}
.fv-stat--plain:hover{box-shadow:none;border-color:var(--line)}
.gp{position:relative}
.gp__box{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:38px;height:auto;padding:4px 26px 4px 6px;cursor:text;position:relative}
.gp__chips{display:contents}
.gp__chip{display:inline-flex;align-items:center;gap:4px;background:#eef0f8;border-radius:6px;padding:2px 4px 2px 8px;font-size:12.5px;font-weight:600;color:var(--ink,#1c2233);max-width:100%}
.gp__chip button{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--ink-3,#6b7280);padding:0 3px}
.gp__chip button:hover{color:var(--err,#b42318)}
.gp__q{flex:1 1 120px;min-width:90px;border:0;outline:0;background:transparent;font:inherit;font-size:13.5px;padding:4px 2px}
.gp__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--ink-3,#6b7280);font-size:11px;pointer-events:none}
.gp__pop{position:absolute;z-index:70;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line,#e3e6ea);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.14)}
.gp__pop[hidden]{display:none}
.gp__list{max-height:min(46vh,300px);overflow-y:auto;overscroll-behavior:contain;padding:4px}
.gp__o{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-radius:7px;cursor:pointer}
.gp__o:hover{background:#f2f4fa}
.gp__o input{margin-top:3px}
.gp__n{display:block;font-size:13.5px;color:var(--ink,#1c2233)}
.gp__h{display:block;font-size:11.5px;color:var(--ink-3,#6b7280)}
.gp__none{padding:10px;font-size:13px;color:var(--ink-3,#6b7280)}
.field .gp__o,.gp .gp__o{display:flex;flex-direction:row;align-items:flex-start;gap:9px;margin:0;font-size:13.5px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink,#1c2233)}
.field .gp__o input[type=checkbox],.gp .gp__o input[type=checkbox]{width:auto;height:auto;min-height:0;flex:0 0 auto;margin:3px 0 0;padding:0}
.gp__o > span{min-width:0;flex:1 1 auto}
/* Grievances on a phone: each row reads as a card, nothing runs off the side. */
@media (max-width:640px){
  .gr-list thead,.gr-rep thead{display:none}
  .gr-list,.gr-list tbody,.gr-list tr,.gr-list td,.gr-rep,.gr-rep tbody,.gr-rep tr,.gr-rep td{display:block;width:auto !important}
  .gr-list tr.la-row,.gr-rep tr.gr-rep__row{padding:10px 14px;border-bottom:1px solid var(--line,#e3e6ea)}
  .gr-list td,.gr-rep td{border:0 !important;padding:2px 0 !important;text-align:left !important}
  .gr-list tr.rp__total td,.gr-rep tr.rp__total td{padding:10px 14px !important}
}
/* Expo Booking: the exhibition pickers (searchable, several at once) and one section per exhibition. */
.xe-pick .ms__btn{width:100%;overflow:hidden;text-overflow:ellipsis}
.xe-pick .ms__pop{min-width:320px;max-width:min(420px,92vw)}
.xe-pick .ms__list{max-height:min(50vh,320px);overscroll-behavior:contain}
.xr-ev{margin-bottom:26px}
.xr-ev__h{font-size:15px;padding:0 0 8px;margin-bottom:12px;border-bottom:2px solid var(--line,#e3e6ea)}
/* Exhibition Performance: the conversion list against Zoho Books, and the two detail tables. */
.ep-mm-pill{display:inline-block;margin-top:4px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:#fdecea;color:#a12a1f;border:1px solid #f3c7c2;white-space:nowrap}
.ep-tbar{padding:10px 16px;gap:8px;flex-wrap:wrap}
.ep-tbar .tb-q{flex:1 1 260px;max-width:420px}
.ep-mmbtn{border:1px solid var(--line,#e3e6ea);background:#fff;color:var(--ink,#1c2233)}
.ep-mmbtn[disabled]{opacity:.55;cursor:default}
.ep-mmbtn--on{background:#a12a1f;border-color:#a12a1f;color:#fff}
.ep-mmbtn--on .btn__badge{background:#fff;color:#a12a1f}
.ep-mm-note{margin:0 16px 10px;padding:8px 12px;border-radius:8px;background:#fdecea;color:#7a2017;font-size:12.5px}
.ep-mm-note--ok{background:#e8f5ee;color:#16603a}
tr.ep-mm-row td{background:#fff3e0}
tr.ep-mm-row td:first-child{box-shadow:inset 3px 0 0 #d9822b}
.ep-zoho{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:7px;background:#a12a1f;color:#fff;
  font-size:11px;font-weight:600;line-height:1.3;white-space:normal;text-align:right;max-width:100%}
.ep-zoho__sub{font-size:10.5px;color:#7a2017;white-space:normal;margin-top:2px;line-height:1.25}
tr.ep-total td{background:var(--bg-2,#f6f7fb);border-top:2px solid var(--line-2,#d8dce6);position:sticky;bottom:0}
.ep-seg{display:inline-flex;border:1px solid var(--line,#e3e6ea);border-radius:8px;overflow:hidden}
.ep-seg__b{border:0;background:#fff;padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--ink-2,#4a5163)}
.ep-seg__b + .ep-seg__b{border-left:1px solid var(--line,#e3e6ea)}
.ep-seg__b--on{background:var(--navy,#323759);color:#fff}
.ep-costs{table-layout:fixed;width:100%}
.ep-costs th,.ep-costs td{padding:8px 7px;vertical-align:top;overflow-wrap:anywhere}
.ep-costs td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.ep-costs col.c-line{width:28%}
.ep-costs col.c-kind{width:10%}
.ep-costs col.c-money{width:10.33%}
@media (max-width:1100px){
  .ep-costs th,.ep-costs td{padding:7px 5px;font-size:12.5px}
  .ep-sales td.num .ep-zoho{display:inline-block}
}
/* Car voucher: the payment remark, with its Edit button beside it. */
.cv-remark{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.cv-remark .hv-request__note{flex:1 1 auto;min-width:0}
#cv-remark-form[hidden],.cv-remark[hidden]{display:none !important}
/* ---- Home: the management overview (management_home.emails only) ---- */
.mg-hi{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:-4px 0 14px}
.mg-hi h1{margin:0;font-size:24px;letter-spacing:-.3px}
.mg-asof{font-size:12.5px;color:var(--ink-3);text-align:right;line-height:1.45;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mg-asof b{color:var(--ink);font-weight:600}
.mg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mg-card{background:#fff;border:1px solid var(--line,#e3e6ea);border-radius:12px;padding:12px 14px 10px;box-shadow:0 1px 2px rgba(16,24,40,.04);min-width:0;display:flex;flex-direction:column}
.mg-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mg-lab{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--ink-2,#4a5163);text-transform:uppercase;letter-spacing:.05em;min-width:0}
.mg-lab__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-ico{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;flex:none}
.mg-seg{display:inline-flex;background:#f2f4f8;border-radius:7px;padding:2px;flex:none}
.mg-seg button{border:0;background:none;font:inherit;font-size:10.5px;font-weight:700;color:var(--ink-3,#6b7280);padding:3px 7px;border-radius:5px;cursor:pointer}
.mg-seg button.on{background:#fff;color:var(--ink,#1c2233);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.mg-fig{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:end;margin:9px 0 8px}
.mg-today b{display:block;white-space:nowrap;font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--ink,#1c2233);font-variant-numeric:tabular-nums;line-height:1.1}
.mg-today span{font-size:11px;color:var(--ink-3)}
.mg-side{display:flex;flex-direction:column;gap:2px;align-items:flex-end;min-width:0;font-size:11px;color:var(--ink-3);white-space:nowrap}
.mg-side b{color:var(--ink);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;margin-left:5px}
.mg-chart{margin-top:auto}
.mg-chart svg{display:block;width:100%;height:50px}
.mg-axis{display:flex;justify-content:space-between;font-size:10px;color:#9aa1ae;margin-top:2px}
.mg-s2{grid-column:span 2}
.mg-s4{grid-column:1 / -1}
.mg-s4 .mg-chart svg{height:70px}
.mg-s1 .mg-out{grid-template-columns:1fr;gap:10px}
.mg-tray{background:#fff;border:1px dashed #c3cade;border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:8px}
.mg-tray__rm{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mg-tray__rm #mg-reset{margin-left:auto}
.mg-add{border:1px solid var(--line,#e3e6ea);background:#f7f8fb;border-radius:999px;padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.mg-add:hover{border-color:var(--navy,#323759)}
.mg-editing .mg-card{position:relative;padding-top:38px;cursor:grab;outline:1px dashed #c3cade;outline-offset:-1px}
.mg-tools{position:absolute;top:6px;left:8px;right:8px;display:flex;align-items:center;gap:4px;background:#f2f4f8;border-radius:7px;padding:2px 4px}
.mg-tools button{border:0;background:none;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink-2);padding:3px 7px;border-radius:5px;cursor:pointer;line-height:1.2}
.mg-tools button:hover:not([disabled]){background:#fff}
.mg-tools button[disabled]{opacity:.35;cursor:default}
.mg-tools button.on{background:var(--navy,#323759);color:#fff}
.mg-tools .mg-sz{display:inline-flex;gap:2px;margin-left:auto}
.mg-tools .mg-x{color:#b3261e;font-size:15px;padding:1px 7px}
.mg-grip{color:#9aa1ae;font-size:12px;letter-spacing:-3px;padding:0 6px 0 2px;cursor:grab}
.mg-dragging{opacity:.45}
.mg-over{outline:2px solid var(--navy,#323759) !important}
.mg-out{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:9px;flex:1}
.mg-age{display:flex;flex-direction:column;gap:5px}
.mg-age div{display:grid;grid-template-columns:86px 1fr 64px;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2)}
.mg-age i{display:block;height:8px;border-radius:4px;background:#323759}
.mg-age i.mg-age--due{background:#9aa6c9}
.mg-age em{font-style:normal;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mg-kv{display:flex;gap:16px;margin-top:8px;font-size:11.5px;color:var(--ink-3)}
.mg-kv b{display:block;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.mg-kv b.mg-bad{color:#b3261e}
.mg-cel .mg-cels{margin:8px 0 0;max-height:150px;overflow-y:auto}
@media (max-width:1200px){.mg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.mg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mg-s2{grid-column:1 / -1}}
@media (max-width:560px){.mg-grid{grid-template-columns:1fr}.mg-s2,.mg-s4{grid-column:1 / -1}.mg-hi{display:block}.mg-asof{justify-content:flex-start;text-align:left;margin-top:6px}.mg-out{grid-template-columns:1fr}}
/* Management home: every figure, bar and ageing row shows the shared tooltip. */
.mg-today b[data-tip-html],.mg-side [data-tip-html],.mg-kv [data-tip-html],.mg-age [data-tip-html],.mg-lab[data-tip]{cursor:help}
.mg-chart .mg-hit{cursor:pointer}
.mg-chart .mg-hit:hover{fill:rgba(50,55,89,.06)}

/* PI Advances :: one column for the PI (number, date, customer), the hotel beside it. */
.la-cust{margin-top:3px;font-weight:500;overflow-wrap:anywhere}
.la-hotel{display:block;font-weight:600;overflow-wrap:anywhere}

/* ---------------- CRM: companies and contacts (crmcompanies.js) ---------------- */
.cm-tbl{table-layout:fixed;width:100%}
.cm-tbl td{overflow-wrap:anywhere;vertical-align:top}
.cm-tbl td input[type=radio],.cm-tbl td input[type=checkbox]{width:15px;height:15px;accent-color:var(--navy);cursor:pointer}
.cm-help{margin:4px 20px 12px;max-width:900px}
.cm-set{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 20px 12px}
@media (max-width: 720px){ .cm-set{margin:0 0 12px} .cm-help{margin:4px 0 12px} }
.cm-inline .btn{white-space:nowrap;flex:0 0 auto}
.cm-set__head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.cm-set__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cm-set .table-wrap{margin:0}
.cm-zoho{color:var(--ok);font-weight:600}
.cm-chip{margin:0 4px 4px 0;display:inline-block}
.cm-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.cm-alias{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 10px;border:1px solid var(--line-2);
  border-radius:999px;font-size:12.5px;background:var(--soft);max-width:100%;overflow-wrap:anywhere}
.cm-alias small{color:var(--ink-3)}
.cm-alias button{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--ink-3);padding:0 4px}
.cm-alias button:hover{color:var(--err)}
.cm-inline{display:flex;gap:8px;align-items:center;max-width:460px}
.cm-inline .input{flex:1 1 auto;min-width:0}
.cm-zrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0 8px}
.cm-undone td{opacity:.55}
.cm-wrap{word-break:break-all}
.cm-drawer .form-grid--3 .field{min-width:0}
.pam-log{max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-all;font-size:11.5px;
  background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px}

/* Contract Performance: the main table fits the screen; the contract file. */
.ct-main{table-layout:fixed;width:100%}
.ct-main th{white-space:normal;overflow-wrap:break-word;vertical-align:bottom}
.ct-main td{overflow-wrap:anywhere;vertical-align:top}
.ct-main td .tag{white-space:normal}
.ct-view{white-space:nowrap;padding-left:10px;padding-right:10px}
.ct-headbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ct-files{display:flex;flex-direction:column;gap:8px}
.ct-file{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.ct-file__name{font-weight:600;overflow-wrap:anywhere;min-width:0}
.ct-filesnote{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 20px;font-size:12.5px;color:var(--ink-3);border-bottom:1px solid var(--line)}

/* Expo Booking: promo codes and reports */
.xp-tbl{table-layout:fixed;width:100%}
.xp-tbl td{overflow-wrap:anywhere;vertical-align:top}
.xp-off td{opacity:.6}
.xp-h{margin:20px 0 8px;font-size:15px}
.xp-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.xp-link code{word-break:break-all}
.xp-strip .fv-stat__label{white-space:normal;overflow:visible}
.xp-tbl th{white-space:normal}
.xp-drill{border:0;background:none;padding:0 2px;font:inherit;font-weight:700;color:var(--navy,#323759);
  text-decoration:underline;text-decoration-color:var(--gold,#c9a227);text-underline-offset:3px;cursor:pointer}
.xp-drill:hover{color:var(--ink,#1c2233)}

/* Multi-level payment approval: signed by one approver, waiting on the next */
.cv-stage--part_approved{background:#fff3d6;color:#7a5200}
.cv-trail{margin-top:8px;display:grid;gap:6px}

/* Expo Booking: report line charts */
.xc-card{border:1px solid var(--line,#e3e6ee);border-radius:10px;padding:12px 14px;margin:6px 0 14px;background:var(--surface,#fff)}
.xc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.xc-metric{width:200px;max-width:100%}
.xc-metric .cpick__btn{min-height:34px;padding:6px 10px;font-size:13px}
.xc{position:relative}
.xc-plot{position:relative;width:100%}
.xc-plot svg{display:block;overflow:visible}
.xc-grid{stroke:var(--line,#e8eaf0);stroke-width:1}
.xc-tick{font-size:11px;fill:var(--ink-3,#8a90a0)}
.xc-cross{stroke:var(--ink-3,#8a90a0);stroke-width:1;stroke-dasharray:3 3}
.xc-tip{position:absolute;top:6px;z-index:5;background:var(--surface,#fff);border:1px solid var(--line,#d9dde5);
  border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.14);padding:8px 10px;font-size:12.5px;pointer-events:none;
  min-width:150px;color:var(--ink,#1c2233)}
.xc-tip i,.xc-legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.xc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-2,#4a5163);margin-bottom:6px}
.xp-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0 4px}
.xp-pager__btns{display:flex;align-items:center;gap:8px}
.xp-pager__per{width:130px}
.xp-pager__per .cpick__btn{min-height:32px;padding:5px 10px;font-size:13px}
.xp-pager__per .cpick__menu{top:auto;bottom:calc(100% + 5px)}
.xp-sec{margin-top:4px}

/* Expo Booking: rooms night by night -- dates across, figures down. */
.xd{margin:18px 0 6px}
.xd-head{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-bottom:8px}
.xd-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.xd-hotel{margin:0 0 10px;border:1px solid var(--line,#e6e8ee);border-radius:8px;overflow:hidden}
.table.xd-tbl{width:100%;table-layout:fixed;font-size:12.5px;margin:0}
.table.xd-tbl + .table.xd-tbl{border-top:1px solid var(--line,#e6e8ee)}
.table.xd-tbl th,.table.xd-tbl td{padding:3px 8px;line-height:1.35;vertical-align:middle}
.table.xd-tbl thead th{background:var(--bg-2,#f6f7fa);font-size:11px;letter-spacing:.02em;white-space:nowrap}
.table.xd-tbl th.xd-hname{text-transform:none;font-size:12.5px;letter-spacing:0;color:var(--ink,#1b2030);
  overflow:hidden;text-overflow:ellipsis}
.xd-hotel > .xd-hname{padding:6px 8px;font-weight:700;background:var(--bg-2,#f6f7fa)}
.table.xd-tbl td.xd-room{font-weight:600;border-right:1px solid var(--line-2,#eef0f4);word-break:break-word}
.table.xd-tbl td.xd-what{color:var(--ink-3,#6b7385);font-size:11.5px}
.table.xd-tbl tr td{border-bottom:0}
.table.xd-tbl tr.xd-first td{border-top:1px solid var(--line,#e6e8ee)}
.table.xd-tbl tbody tr.xd-first:first-child td{border-top:0}
.table.xd-tbl tr.xd-avail td{background:#fafbfd}
.xd-none{margin:4px 0 10px}
.xd-bad{color:#b3261e;font-weight:700}

/* Online reconciliation: the card split into XCMG and all other clients,
   and the bookings totals kept in view at the foot of the table. */
.ob-group + .ob-group{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ob-group__h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--navy);margin-bottom:10px}
.ob-grid tfoot .ob-tot td{position:sticky;bottom:0;z-index:2;border-top:2px solid var(--line);
  box-shadow:0 -2px 4px rgba(16,24,40,.06)}
/* The night-by-night table stays a real table on a phone. */
@media (max-width:900px){
  .table.xd-tbl th,.table.xd-tbl td{padding:3px 4px;font-size:11px;word-break:break-word}
  .table.xd-tbl thead th{white-space:normal;letter-spacing:0;font-size:10px}
  .table.xd-tbl td.xd-what{font-size:10px;white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis}
  .xd-tools{margin-left:0;width:100%}
  .xd-tools > div{flex:1 1 auto}
}
/* 15 Oct (c): searchable tick-lists, DSR week picker, company summary */
.mp__search{display:block;width:calc(100% - 8px);margin:4px 4px 6px;height:34px;font-size:13px}
.dsr-head-wrap{flex-wrap:wrap;gap:8px 14px}
.dsr-week-pick{width:230px;max-width:100%}
.dsr-period{font-size:12px;font-weight:600;color:var(--ink-3);margin-left:6px;letter-spacing:.02em}
.dsr-sum__bar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.dsr-sum__bar .input{height:38px}
.dsr-sum__bar .dsr-sum__q{flex:1 1 220px;max-width:320px}
.dsr-sum__bar .mp{min-width:170px;flex:0 1 200px}
.dsr-sum__bar .cpick{width:150px}
.dsr-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.dsr-seg button{border:0;background:#fff;padding:7px 14px;font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer}
.dsr-seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.dsr-pill{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.dsr-pill--ok{color:#0f7b52;background:#e8f5ef}.dsr-pill--no{color:#b3261e;background:#fdeceb}.dsr-pill--na{color:#4a5169;background:#eef0f5}
.dsr-target{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.dsr-target .input{height:32px;max-width:130px;text-align:right}
.dsr-sum tfoot td{font-weight:700;border-top:2px solid var(--line)}
.dsr-src{display:block;font-size:11px;color:var(--ink-3);font-weight:500}
.ct-triple{display:flex;flex-direction:column;gap:1px;font-size:12.5px}
.ct-triple__row{display:flex;justify-content:space-between;gap:6px}
.ct-triple__row span{color:var(--ink-3);white-space:nowrap}
.ct-triple__row b{font-weight:600;text-align:right;white-space:nowrap}
.ct-triple__row span{font-size:11.5px}
.ct-triple{font-size:12px}
.ct-fold{flex-wrap:wrap;gap:6px 12px;justify-content:flex-start}
.ct-fold .ct-sub{flex-basis:100%;margin-left:40px}
.ct-fold__btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:18px;font-weight:700;line-height:1;cursor:pointer;color:var(--navy)}
.ct-fold__btn:hover{border-color:var(--navy)}
.ct-count{display:inline-block;background:#fdeceb;color:#b3261e;font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.ct-main td.num{white-space:nowrap;font-size:12.5px}
.ct-main td,.ct-main th{word-break:normal;overflow-wrap:break-word;hyphens:none}
.ct-main .tag{white-space:nowrap}
/* DSR: month to date and week to date, side by side */
.dsr-periods{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.dsr-periods .dsr-mtd{margin-bottom:0;align-items:flex-start}
.dsr-periods .dsr-mtd__cats{margin-left:0;width:100%;gap:8px 20px}
.dsr-week-total{font-variant-numeric:tabular-nums;color:var(--ink)}
.dsr-sum__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.dsr-sum__date{width:170px;max-width:100%}
.dsr-target--changed{border-color:#DBBA38 !important;background:#FFFBEA}
@media (max-width:760px){.dsr-periods{grid-template-columns:1fr}}
/* DSR: Sales by day (40%) and Sales by week (60%) on one row */
.dsr-graphs{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;margin-bottom:16px;align-items:stretch}
.dsr-graphs > .card{margin-bottom:0;min-width:0}
.dsr-daycard{container-type:inline-size}
.dsr-dayhead{display:flex;align-items:center;flex-wrap:nowrap;gap:7px;white-space:nowrap;min-width:0;padding-left:14px;padding-right:12px}
.dsr-dayhead .card__title{flex:0 0 auto;font-size:14.5px}
.dsr-dayhead > .dsr-sub{flex:0 0 auto;font-size:12px}
.dsr-dayhead__total{flex:0 0 auto;font-size:13.5px}
.dsr-dayhead__total .dsr-sub{font-size:11.5px}
.dsr-tot--short{display:none}
.dsr-dayhead .dsr-week-pick{flex:0 0 112px;width:112px;margin-left:auto}
.dsr-dayhead .cpick__btn{min-height:34px;padding:6px 9px;font-size:13px;gap:4px}
.dsr-dayhead .cpick__menu{left:auto;right:0;min-width:150px}
@container (max-width:440px){.dsr-tot--full{display:none}.dsr-tot--short{display:inline}}
@container (max-width:400px){
  .dsr-dayhead{gap:5px;padding-left:12px;padding-right:10px}
  .dsr-dayhead .card__title{font-size:13.5px}
  .dsr-dayhead > .dsr-sub,.dsr-dayhead__total .dsr-sub{font-size:11px}
  .dsr-dayhead__total{font-size:13px}
  .dsr-dayhead .dsr-week-pick{flex-basis:100px;width:100px}
  .dsr-dayhead .cpick__btn{padding:6px 7px;font-size:12.5px}
}
.dsr-mtd__pct{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;background:#eef0f6;color:#4b5270;font-weight:600;font-size:11px;line-height:17px}
.dsr-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line)}
.dsr-pager:empty{display:none}
.dsr-pager__btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
@media (max-width:1240px){.dsr-graphs{grid-template-columns:1fr}}
/* Expo Booking: hotel and room pages (photos, amenities) */
.xh-amen{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;padding:6px 0}
.xh-amen__i{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.xh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:12px}
.xh-ph{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;position:relative;display:flex;flex-direction:column}
.xh-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#f1f2f6}
.xh-ph__cover{position:absolute;top:8px;left:8px;background:#323759;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.xh-ph__cap{margin:8px 8px 0;height:32px;font-size:12.5px}
.xh-ph__btns{display:flex;gap:4px;padding:8px;flex-wrap:wrap}
.xh-up{display:inline-flex;align-items:center;cursor:pointer;margin-right:10px}
.xh-up__note{font-size:12.5px}
/* Expo Booking: photos from hotel websites */
.xh-ph__src{position:absolute;top:8px;right:8px;background:rgba(17,24,39,.72);color:#fff;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px}
.xh-ph__to{margin:6px 8px 0;height:30px;font-size:12px;padding:2px 6px}
.xh-links{margin-top:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.xh-links textarea{width:100%;font-size:12.5px}
.xh-web{margin:0 0 8px;font-size:12.5px;overflow-wrap:anywhere}
.xw-t td{vertical-align:top}
.xw-sel{min-width:220px;max-width:320px;height:auto;min-height:36px;font-size:12.5px;padding-top:6px;padding-bottom:6px}
.xw-url{font-size:11.5px;overflow-wrap:anywhere;max-width:260px}
.xw-note{margin-top:4px;font-size:11.5px;max-width:300px}
#wi-go[hidden],#wi-stop[hidden],.xh-links[hidden]{display:none !important}
.xw-fit .btn{margin-left:6px}
/* Expo: paste from sheet preview */
.xp-t td{vertical-align:top}
.xp-hsel{min-width:220px;max-width:300px;height:auto;min-height:34px;font-size:12.5px;padding-top:5px;padding-bottom:5px;margin-top:2px}
.xp-hsel[hidden]{display:none !important}
.xp-rt{min-width:130px;max-width:170px;height:32px;font-size:12.5px}
.xp-from{font-size:11.5px;margin-top:2px}
.xp-change{font-size:12px;margin-left:4px}
.xp-change[hidden]{display:none}
/* Expo: the hotel's cover photo (Hotel page drawer) */
.xh-cov{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;border:1px solid var(--line,#e3e5ee);border-radius:10px;padding:12px;background:#fafbfd}
.xh-cov__pic{flex:0 0 240px;max-width:100%;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:#eef0f6;display:flex;align-items:center;justify-content:center;text-align:center;padding:0}
.xh-cov__pic img{width:100%;height:100%;object-fit:cover;display:block}
.xh-cov__pic .sub{padding:10px}
.xh-cov__txt{flex:1 1 260px;min-width:0}
.xh-cov__rules{margin:0 0 8px;padding-left:18px;font-size:13px;line-height:1.6}
.xh-more{margin-top:6px;border-top:1px solid var(--line,#e3e5ee);padding-top:10px}
.xh-more>summary{cursor:pointer;font-weight:600;font-size:13px;margin-bottom:8px}
.btn.is-disabled{opacity:.5;pointer-events:none}
.xh-brand{display:flex;gap:8px;align-items:center;max-width:560px}
.xh-brand .input{flex:1 1 auto;min-width:0}
.xh-cov__txt label.btn{display:inline-flex;width:auto;vertical-align:middle}
.xh-cov__txt .btn{margin:0 6px 6px 0}
.xh-brand .btn{white-space:nowrap;flex:none}
/* CRM report: open leads by salesperson */
.op-card{margin-bottom:14px}
.op-card .card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.op-tools{display:flex;gap:8px;align-items:center}
.op-t .op-r{cursor:pointer}
.op-t .op-r:hover td,.op-t .op-r:focus td{background:#f4f6fb}
.op-t .op-r:focus{outline:none}
.op-t .op-r:focus-visible td{box-shadow:inset 0 2px 0 #DBBA38,inset 0 -2px 0 #DBBA38}
.op-name{color:#323759;font-weight:600;border-bottom:1px dashed #b9bfd3}
.op-t th:first-child,.op-t td:first-child{text-align:left;white-space:nowrap}
/* "Add Credence to your home screen" (phones) */
.a2hs{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:900;max-width:520px;margin:0 auto;
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:14px;background:#fff;color:#1c2033;
  border:1px solid #e3e6ef;box-shadow:0 10px 30px rgba(20,24,43,.18);opacity:0;transform:translateY(16px);
  transition:opacity .25s ease,transform .25s ease;font-size:13.5px;line-height:1.45}
.a2hs--on{opacity:1;transform:none}
.a2hs__logo{width:40px;height:40px;border-radius:10px;flex:none}
.a2hs__b{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px}
.a2hs__t{margin:0;flex:1 1 auto;min-width:0;color:#4a5165}
.a2hs__t>b:first-child{display:block;color:#1c2033;font-size:14px;margin-bottom:1px}
.a2hs__in{color:#1c2033;font-weight:600}
.a2hs__i{display:inline-flex;vertical-align:-3px;color:#323759}
.a2hs__acts{flex:none}
.a2hs__go{border:0;border-radius:999px;background:#323759;color:#fff;font:inherit;font-weight:700;padding:8px 16px;cursor:pointer}
.a2hs__go:hover{background:#252a45}
.a2hs__x{flex:none;align-self:flex-start;width:28px;height:28px;border:0;border-radius:50%;background:#f2f4f9;color:#5a6178;font-size:18px;line-height:1;cursor:pointer}
@media (prefers-reduced-motion:reduce){.a2hs{transition:none}}

/* ===== Hotel and car vouchers on a phone: one card per voucher ===== */
.vm-list { display: none; }
@media (max-width: 900px) {
  #hv-strip, #cv-strip { display: none !important; }
  .vm-desk { display: none !important; }
  .vm-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
  .vm-card { background: #fff; border: 1px solid var(--line, #e3e5ee); border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(28,32,51,.05); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s; }
  .vm-card:active { background: #f4f6fb; }
  .vm-card:focus-visible { outline: 2px solid #DBBA38; outline-offset: 2px; }
  .vm-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
  .vm-left { min-width: 0; flex: 1 1 auto; }
  .vm-no { font-size: 12px; font-weight: 700; color: #5a6178; letter-spacing: .02em; }
  .vm-main { font-size: 15px; font-weight: 650; color: #1c2033; line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; }
  .vm-sub { font-size: 12.5px; color: #7b8298; line-height: 1.3; overflow-wrap: anywhere; }
  .vm-amt { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; max-width: 48%; }
  .vm-amt b { font-size: 17px; color: #323759; letter-spacing: -0.01em; white-space: nowrap; }
  .vm-amt > span { font-size: 11.5px; color: #7b8298; }
  .vm-amt__none { font-size: 12.5px !important; font-weight: 600; color: #96590a; white-space: normal; }
  .vm-amt .vp-wrap { margin-top: 4px; }
  .vm-amt .vp { font-size: 11.5px; white-space: nowrap; }
  .vm-meta { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #e3e5ee);
    font-size: 13px; color: #4a5165; }
  .vm-meta span { overflow-wrap: anywhere; }
  .vm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  /* Selecting on a phone: a generous box beside the voucher number. */
  .vm-pick { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -7px 4px -7px -7px; vertical-align: middle; cursor: pointer; }
  .vm-pick input { width: 18px; height: 18px; margin: 0; accent-color: #323759; cursor: pointer; }
  .vm-allpick { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #4a5169; padding: 2px 4px; cursor: pointer; }
  .vm-allpick input { width: 18px; height: 18px; margin: 0; accent-color: #323759; }
  /* The bar stays in view while the list is ticked further down. */
  #hv-bulk { position: sticky; top: 6px; z-index: 20; }
  #hv-bulk .hv-bulk__note { max-width: 100%; flex: 1 1 100%; }
  .vm-pills .tag, .vm-pills .cv-stage, .vm-pills .cv-pill { font-size: 11.5px; }
}

/* ===== Cost against sell on a phone: item / cost / sell / margin ===== */
.vm-mob { display: none; }
@media (max-width: 900px) {
  .vm-mob { display: block; }
  .mcmp { font-size: 13px; }
  .mcmp__r { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid var(--line-2, #eef0f5); }
  .mcmp__r > span:not(.mcmp__l) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mcmp__r--h { padding: 0 0 5px; font-size: 10.5px; font-weight: 700; color: #7b8298; text-transform: uppercase; letter-spacing: .05em; }
  .mcmp__l { min-width: 0; color: #1c2033; overflow-wrap: anywhere; line-height: 1.3; }
  .mcmp__l small { display: block; font-size: 11px; color: #7b8298; margin-top: 1px; }
  .mcmp__r--tot { font-weight: 700; color: #323759; }
  .mcmp__r--tot .mcmp__l { color: #323759; }
  .mcmp__r--issue .mcmp__l { color: #b3261e; }
  .mcmp__up { color: #17794c; font-weight: 600; }
  .mcmp__down { color: #b3261e; font-weight: 600; }
  .mcmp__m { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; }
  .mcmp__m span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; flex: 1 1 auto; }
  .mcmp__m b { font-size: 18px; }
  .mcmp__m em { font-style: normal; font-weight: 700; font-size: 14px; }
  .mcmp__m--up { background: #e9f6ef; color: #17794c; }
  .mcmp__m--down { background: #fdecea; color: #b3261e; }
  .mcmp__f { margin-top: 8px; font-size: 11.5px; color: #7b8298; }
}
/* Expo booking forms list: on a phone the room-type count becomes a button to the form */
.xf-open { display: none; }
@media (max-width: 900px) {
  table.mt tr.mt-row td.xf-rt::before { content: none; }
  table.mt tr.mt-row td.xf-rt .xf-cnt { display: none; }
  table.mt tr.mt-row td.xf-rt .xf-open { display: inline-flex; margin-top: 4px; }
}
@media (max-width: 900px) {
  .xb-card .vm-row { align-items: center; }
  .xb-go { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #eef0f6; color: #323759; }
}
/* car voucher stage rail: wraps on a phone instead of scrolling sideways */
@media (max-width:900px){
  .cv-rail{flex-wrap:wrap;overflow-x:visible;row-gap:6px}
  .cv-rail__step{flex:1 1 30%;min-width:0}
}
/* Tabs on a phone wrap onto a second line rather than scrolling sideways. */
@media (max-width:900px){
  .tabs{flex-wrap:wrap;overflow-x:visible}
  .tab{padding:7px 9px}
}

/* ---------------- password strength and rules ---------------- */
.pwm{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.pwm__top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-3);font-weight:600}
.pwm__top b{font-size:12.5px;color:var(--ink-3)}
.pwm__top b.is-weak{color:var(--err)}.pwm__top b.is-fair{color:var(--warn)}.pwm__top b.is-good{color:#2e7d5b}.pwm__top b.is-strong{color:var(--ok)}
.pwm__bar{height:6px;border-radius:999px;background:var(--line-2);overflow:hidden;margin:7px 0 9px}
.pwm__bar span{display:block;height:100%;width:0;border-radius:999px;background:var(--line);transition:width .3s,background-color .3s}
.pwm__bar span.is-weak{background:#c0392b}.pwm__bar span.is-fair{background:#d99a1e}.pwm__bar span.is-good{background:#3fa373}.pwm__bar span.is-strong{background:var(--ok)}
.pwm__rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}
.pwm__rules li{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.35}
.pwm__rules li i,.pwm__match i{flex:none;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.pwm__rules li i svg,.pwm__match i svg{width:10px;height:10px}
.pwm__rules li.is-no{color:var(--err)}.pwm__rules li.is-no i{background:var(--err-bg);color:var(--err)}
.pwm__rules li.is-ok{color:var(--ok)}.pwm__rules li.is-ok i{background:var(--ok);color:#fff}
.pwm__match{display:flex;align-items:center;gap:7px;font-size:12.5px;margin:6px 0 0;min-height:16px}
.pwm__match.is-ok{color:var(--ok)}.pwm__match.is-no{color:var(--err)}
.pwm__match i.is-ok{background:var(--ok);color:#fff}.pwm__match i.is-no{background:var(--err-bg);color:var(--err)}
@media (max-width:560px){.pwm__rules{grid-template-columns:1fr}}

/* ---------------- sign-in: password or emailed code ---------------- */
.authseg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--line-2);border-radius:10px;padding:4px;margin:0 0 18px}
.authseg button{border:0;background:transparent;border-radius:7px;padding:9px 8px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.authseg button[aria-pressed="true"]{background:var(--surface);color:var(--navy);box-shadow:var(--shadow-sm)}
.otpin{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:4px 0 6px}
.otpin input{height:52px;text-align:center;font-size:22px;font-weight:700;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-width:0;padding:0}
.otpin input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(50,55,89,.12)}

/* Drawer sections as tabs (C.drawerTabs, 30 Oct 2026). One row, never
   scrolling sideways: each tab takes an equal share of the width and a
   name too long for it is cut with an ellipsis (its full name is the
   tooltip). Hidden on a phone, where the sections read top to bottom. */
.dtabs{display:grid;gap:3px;position:sticky;top:-18px;z-index:5;margin:0 0 14px;padding:6px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 2px 6px rgba(20,24,48,.05)}
.dtabs__t{min-width:0;border:0;background:none;padding:7px 4px;border-radius:7px;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtabs__t:hover{background:var(--navy-50, #f1f2f8);color:var(--ink)}
.dtabs__t.is-on{background:var(--navy-600);color:#fff;box-shadow:inset 0 -2px 0 var(--gold)}
@media (min-width: 761px){
  .has-dtabs > [data-dtab]:not(.is-dtab-on){display:none !important}
}
@media (max-width: 760px){
  .dtabs{display:none}
}

/* ---- Books Errors (3 Nov 2026). Laid out like PI Advances; nothing wider than the card. ---- */
.be-tabcard{padding:0 18px;margin-bottom:14px}
.be-tag{white-space:normal;line-height:1.25;max-width:100%;font-size:11.5px}
.be-detail{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px;line-height:1.45;color:var(--ink-2,#4a5163)}
.be-table .be-detail{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.be-note{padding:0 14px 10px}
.be-foot{padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.be-range{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.be-range .input{width:150px;min-width:0}
.be-err{border:1px solid var(--line,#e6e8ee);border-radius:8px;padding:9px 11px;margin-bottom:8px;background:#fff}
.be-err .be-detail{margin-top:6px}
.be-h{margin:16px 14px 6px;font-size:13.5px}
.be-rep td,.be-win-t td{vertical-align:top}
.be-repstrip{padding:0 14px}
.be-n{width:100%;min-width:0}
.be-win-t .input{width:100%;min-width:0}
.be-win{margin-bottom:6px}
.be-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
@media (max-width: 760px){
  .be-range .input{width:130px}
}
/* Books Errors round 2 (4 Nov 2026): selection, bulk bar, manual resolution. */
.be-bulk{margin:0 14px 11px}
.be-table th.be-pick,.be-table td.be-pick{padding-left:14px;padding-right:0;cursor:pointer}
.be-manual{margin-top:5px;color:#8a5a00;overflow-wrap:anywhere}
.be-err__btn{float:right;margin:0 0 6px 8px}
.be-err::after{content:"";display:block;clear:both}
@media (max-width: 760px){
  #be-bulk .hv-bulk__note{max-width:100%;flex:1 1 100%}
  .be-bulk{margin:0 10px 10px}
}
.be-mall{display:none}
@media (max-width: 900px){
  .be-mall{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#4a5169;padding:2px 14px 10px;cursor:pointer}
  .be-mall input{width:18px;height:18px;margin:0;accent-color:var(--navy)}
  .be-table--pick.mt tr.mt-row{position:relative}
  .be-table--pick.mt td.be-pick{position:absolute;top:10px;right:12px;padding:0!important;width:auto;border:0;background:none}
  .be-table--pick.mt td.be-pick::before{display:none!important}
  .be-table--pick.mt td.be-pick input{width:20px;height:20px;accent-color:var(--navy)}
  .be-table--pick.mt tr.mt-row td:nth-child(2){padding-right:40px}
  #be-bulk{position:sticky;top:6px;z-index:20}
}