/* =============================================================================
   Portal theme
   Loaded last on every page (views/partials/theme.ejs), so it sits on top of
   custport.css / nav.css / dashboard.css without editing them.

   Colour model: neutrals do the work, the brand colour is an accent only.
   --brand is set at runtime from the logo (public/js/brand-theme.js) and
   cached, so swapping a logo file re-themes the portal with no code change.
   ========================================================================== */

:root {
  /* neutrals */
  --paper: #ffffff;
  --canvas: #f4f4f5;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --ink: #18181b;
  --ink-2: #52525b;
  --ink-3: #8b8b94;

  /* accent (overwritten by brand-theme.js) */
  --brand: #3f3f46;
  --brand-rgb: 63, 63, 70;
  --brand-soft: rgba(var(--brand-rgb), .10);

  /* signals, used as text/dots only - never as fills */
  --ok: #15803d;
  --warn: #a16207;
  --bad: #b91c1c;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-bubble: 18px;
  --r-inner: 12px;
  --r-control: 10px;

  --side-w: 256px;
  --gutter: clamp(16px, 3vw, 36px);
}

/* the legacy CSS fades whole pages in over 2-8 seconds; keep things still */
@keyframes fade-in { from { opacity: 1; } to { opacity: 1; } }

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

html body {
  background: var(--canvas) !important;
  color: var(--ink);
  margin: 0;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  animation: none !important;
}

/* one family everywhere, icon fonts excepted */
html body,
html body :where(*):not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not(.fas):not(.far):not(.fab):not(.glyphicon) {
  font-family: var(--font) !important;
}

html body ::selection { background: rgba(var(--brand-rgb), .18); }

html body a { color: var(--ink); text-underline-offset: 3px; }
html body a:hover { color: var(--brand); }

html body label { color: inherit; }

html body h1, html body h2, html body h3, html body h4 {
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 650;
}

html body hr { border: 0; border-top: 1px solid var(--line); width: 100%; color: transparent; }

:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* -----------------------------------------------------------------------------
   App shell: sidebar on desktop, top bar + drawer on tablet/phone
   -------------------------------------------------------------------------- */
html.has-shell body { padding-left: calc(var(--side-w) + var(--gutter)); padding-right: var(--gutter); padding-top: 8px; box-sizing: border-box; }
/* pages built on .pt-page manage their own gutters */
html.has-shell body.pt-dashboard { padding-left: var(--side-w); padding-right: 0; padding-top: 0; }

.pnav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-w);
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 9000;
  box-sizing: border-box;
}
.pnav *, .pnav *::before, .pnav *::after { box-sizing: border-box; }

.pnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px 18px;
}
.pnav-logo { display: block; line-height: 0; }
.pnav-logo img { max-height: 44px; max-width: 168px; width: auto; height: auto; object-fit: contain; }

.pnav-close, .pbar-menu {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-control);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0;
}
.pnav-close svg, .pbar-menu svg { width: 20px; height: 20px; }

.pnav-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 16px; overscroll-behavior: contain; }

/* account / store switchers */
.pnav-switch { position: relative; margin: 0 0 14px; }
.pnav-switch > summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  cursor: pointer;
  background: var(--paper);
}
.pnav-switch > summary::-webkit-details-marker { display: none; }
.pnav-switch > summary:hover { border-color: var(--line-strong); }
.pnav-switch-text { min-width: 0; flex: 1; line-height: 1.25; }
.pnav-switch-title { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.pnav-switch-sub { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav-chev { width: 16px; height: 16px; color: var(--ink-3); flex: none; transition: transform .15s; }
.pnav-switch[open] .pnav-chev { transform: rotate(180deg); }
.pnav-switch-list {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: var(--paper);
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.pnav-switch-list a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink) !important;
  font-size: 13.5px;
  line-height: 1.3;
}
.pnav-switch-list a small { display: block; color: var(--ink-3); font-size: 12px; }
.pnav-switch-list a:hover { background: var(--canvas); }
.pnav-switch-list a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--brand); }

/* link groups */
.pnav-group { margin: 14px 0 0; }
.pnav-group-title { display: block; padding: 0 12px 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: .01em; }
.pnav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px;
  border-radius: var(--r-control);
  text-decoration: none !important;
  color: var(--ink-2) !important;
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
}
.pnav-link svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.pnav-link:hover { background: var(--canvas); color: var(--ink) !important; }
.pnav-link:hover svg { color: var(--ink-2); }
.pnav-link[aria-current="page"] { color: var(--ink) !important; background: var(--canvas); font-weight: 600; }
.pnav-link[aria-current="page"] svg { color: var(--brand); }
.pnav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}

/* footer of the sidebar: who is signed in */
.pnav-foot { border-top: 1px solid var(--line); padding: 14px 16px 18px; }
.pnav-user { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pnav-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-weight: 650; font-size: 13px; color: var(--ink);
  flex: none;
}
.pnav-user-text { min-width: 0; line-height: 1.25; }
.pnav-user-name { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav-user-sub { display: block; font-size: 12px; color: var(--ink-3); }
.pnav-out {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.pnav-out:hover { border-color: var(--line-strong); color: var(--ink); }
.pnav-out svg { width: 16px; height: 16px; }

/* staff signed in as a customer */
html.viewing-as body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--bad); z-index: 9999; }

/* top bar (hidden on desktop) */
.pbar { display: none; }
.pnav-scrim { display: none; }

@media (max-width: 1024px) {
  html.has-shell body { padding-left: var(--gutter); padding-top: 0; }
  html.has-shell body.pt-dashboard { padding-left: 0; }
  html.has-shell body:not(.pt-dashboard) .pbar { margin: 0 calc(-1 * var(--gutter)) 16px; }

  .pbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 8000;
    height: 60px;
    padding: 0 var(--gutter);
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .pbar-logo img { max-height: 34px; max-width: 150px; display: block; }
  .pbar-menu, .pnav-close { display: inline-flex; }

  .pnav {
    width: min(320px, 86vw);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
  }
  body.nav-open .pnav { transform: none; box-shadow: 0 0 0 100vmax rgba(24, 24, 27, .28); }
  body.nav-open { overflow: hidden; }
  .pnav-scrim { display: block; position: fixed; inset: 0; z-index: 8999; pointer-events: none; }
  body.nav-open .pnav-scrim { pointer-events: auto; }
}

/* -----------------------------------------------------------------------------
   Page layout + bubbles
   -------------------------------------------------------------------------- */
.pt-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px var(--gutter) 24px;
  box-sizing: border-box;
}
.pt-page *, .pt-page *::before, .pt-page *::after { box-sizing: border-box; }

.pt-pagehead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}
.pt-pagehead h1 { margin: 0; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; font-weight: 700; font-stretch: 92%; letter-spacing: -0.02em; }
.pt-pagehead p { margin: 6px 0 0; color: var(--ink-2); }
.pt-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.pt-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pt-span-12 { grid-column: span 12; }
.pt-span-8 { grid-column: span 8; }
.pt-span-6 { grid-column: span 6; }
.pt-span-4 { grid-column: span 4; }
@media (max-width: 1180px) { .pt-span-8, .pt-span-4 { grid-column: span 12; } }
@media (max-width: 860px)  { .pt-span-6 { grid-column: span 12; } }

.pt-bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-bubble);
  padding: 22px;
  min-width: 0;
}
.pt-bubble + .pt-bubble { margin-top: 0; }
.pt-bubble-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pt-bubble-head h2 { margin: 0; font-size: 16px; font-weight: 650; }
.pt-bubble-head .pt-sub { color: var(--ink-3); font-size: 13px; }

/* items inside a bubble */
.pt-item {
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  padding: 16px;
  background: var(--paper);
}
.pt-stack { display: grid; gap: 10px; }

.pt-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pt-item-title { font-weight: 650; font-size: 15px; margin: 0; color: var(--ink); }
.pt-item-sub { color: var(--ink-3); font-size: 13px; margin: 2px 0 0; }
.pt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; margin: 14px 0 0; }
.pt-meta dt { font-size: 12px; color: var(--ink-3); margin: 0; }
.pt-meta dd { margin: 1px 0 0; font-size: 14px; color: var(--ink); }
.pt-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.pt-row-actions form { display: contents; }

.pt-empty { color: var(--ink-3); padding: 18px 2px; margin: 0; }

/* chips: outline + dot, never filled */
.pt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  background: var(--paper);
}
.pt-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.pt-chip--brand::before { background: var(--brand); }
.pt-chip--ok::before { background: var(--ok); }
.pt-chip--warn::before { background: var(--warn); }
.pt-chip--bad { color: var(--bad); }
.pt-chip--bad::before { background: var(--bad); }
.pt-chip--plain::before { display: none; }

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.pt-btn,
html body .button,
html body .button2,
html body input[type="submit"],
html body input[type="button"],
html body .swal2-styled {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px;
  padding: 0 16px !important;
  margin: 0;
  border-radius: var(--r-control) !important;
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transform: none !important;
  transition: background-color .15s, border-color .15s, color .15s;
  width: auto;
  float: none;
  white-space: nowrap;
  box-sizing: border-box;
}
html body .button { margin: 0 8px 8px 0; }
.pt-btn:hover,
html body .button:hover,
html body input[type="submit"]:hover,
html body input[type="button"]:hover { background: #3f3f46 !important; border-color: #3f3f46 !important; color: #fff !important; }

html body .button a, html body .button label, html body .button #label,
html body .button:hover a, html body .button a:hover {
  color: inherit !important; text-decoration: none !important; cursor: pointer; font: inherit; background: none !important;
}
html body .button center { display: contents; }

/* secondary */
.pt-btn--ghost,
html body .button2,
html body .button.dropdown-butt,
html body .button.dropdown-butt2,
html body .button.dropdown-butt3,
html body .swal2-styled.swal2-cancel,
html body .swal2-styled.swal2-deny {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line-strong) !important;
}
.pt-btn--ghost:hover,
html body .button2:hover,
html body .button.dropdown-butt:hover,
html body .button.dropdown-butt2:hover,
html body .button.dropdown-butt3:hover,
html body .swal2-styled.swal2-cancel:hover { background: var(--canvas) !important; color: var(--ink) !important; border-color: var(--ink-3) !important; }

.pt-btn--quiet { background: transparent !important; border-color: transparent !important; color: var(--ink-2) !important; padding: 0 10px !important; }
.pt-btn--quiet:hover { background: var(--canvas) !important; color: var(--ink) !important; border-color: transparent !important; }

.pt-btn--danger, html body .button.delete-btn { background: var(--paper) !important; color: var(--bad) !important; border-color: #f0c4c4 !important; }
.pt-btn--danger:hover, html body .button.delete-btn:hover { border-color: var(--bad) !important; background: var(--paper) !important; color: var(--bad) !important; }

.pt-btn--paid, .pt-btn--paid:hover, .pt-btn--paid:disabled {
  background: var(--paper) !important; color: var(--ok) !important; border-color: var(--line) !important; cursor: default; opacity: 1 !important;
}
.pt-btn--paid::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

html body .button:disabled, html body .button2:disabled, .pt-btn:disabled { opacity: .45; cursor: not-allowed; }
.pt-btn svg { width: 16px; height: 16px; flex: none; }

/* the "Show details" toggles get a chevron, flipped when open */
html body .button.dropdown-butt::after,
html body .button.dropdown-butt2::after,
html body .button.dropdown-butt3::after {
  content: "" !important;
  width: 7px; height: 7px;
  border: solid currentColor; border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translateY(-2px);
  margin: 0 0 0 4px !important;
  display: inline-block;
}
html body .button.dropdown-butt.active::after,
html body .button.dropdown-butt3.active::after,
html body .button.dropdown-butt2.active::after { transform: rotate(-135deg) translate(-1px, -1px); }

/* buttons that page scripts show with style.display = 'block' keep their centred text */
html body .button[style*="display: block"],
html body .button[style*="display:block"] { display: inline-flex !important; }

/* button row at the bottom of a form: right-aligned, side by side */
.pt-form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
html body .pt-form-actions .button { margin: 0 !important; }
@media (max-width: 480px) {
  .pt-form-actions .button { flex: 1 1 auto; }   /* full-width pair on small phones */
}

/* toggles inside an action row line up with the buttons next to them */
.pt-row-actions .button { margin: 0 !important; }

/* -----------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
html body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]),
html body select,
html body textarea {
  -webkit-appearance: none; appearance: none;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-control) !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
  font-size: 15px;
  line-height: 1.35;
  min-height: 42px;
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
html body select {
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
html body textarea { min-height: 96px; }
html body input:focus, html body select:focus, html body textarea:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-soft) !important;
}
html body input::placeholder, html body textarea::placeholder { color: var(--ink-3); }
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--brand); width: 17px; height: 17px; box-shadow: none !important; }

@media (max-width: 640px) {
  /* 16px stops iOS zooming into fields */
  html body input:not([type="checkbox"]):not([type="radio"]), html body select, html body textarea { font-size: 16px !important; min-height: 44px; }
}

/* -----------------------------------------------------------------------------
   Tables: white, hairlines, no coloured header bars
   -------------------------------------------------------------------------- */
html body table { border-collapse: collapse; border-spacing: 0; background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body table th {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink-3) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 12px !important;
  text-align: left;
  white-space: nowrap;
}
html body table td {
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 11px 12px !important;
  font-size: 14px;
  vertical-align: middle;
}
html body table tbody tr:last-child td { border-bottom: 0 !important; }
html body table tbody tr:hover td { background: #fafafa !important; }
html body table tr:nth-child(even), html body table tr:nth-child(odd) { background: transparent !important; }
html body table td center, html body table th center { text-align: inherit; }

/* any pinned table header sits above the rows that scroll under it */
html body thead,
html body thead th { z-index: 5; }
html body thead th { box-shadow: inset 0 -1px 0 var(--line); }

.pt-table { width: 100%; }
html body .pt-table td.num, html body .pt-table th.num { text-align: right !important; font-variant-numeric: tabular-nums; }
html body table.pt-table { table-layout: auto !important; }
html body table.pt-table th, html body table.pt-table td { width: auto; }
html body table.pt-table td:last-child:has(.pt-btn) { text-align: right; white-space: nowrap; }
.pt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }

/* phones: tables that don't already stack become horizontally scrollable */
@media (max-width: 760px) {
  html body table:not(.pt-stacktable):not(:has(td[data-label])) {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* tables that carry data-label stack into label/value rows */
  html body table.pt-stacktable thead,
  html body table:has(td[data-label]) thead { display: none; }
  html body table.pt-stacktable, html body table.pt-stacktable tbody,
  html body table:has(td[data-label]), html body table:has(td[data-label]) tbody { display: block; width: 100% !important; }
  html body table.pt-stacktable tr,
  html body table:has(td[data-label]) tr {
    display: block; border: 1px solid var(--line); border-radius: var(--r-inner); padding: 6px 0; margin-bottom: 10px; background: var(--paper) !important;
  }
  html body table.pt-stacktable td,
  html body table:has(td[data-label]) td {
    display: flex; justify-content: space-between; gap: 16px; border: 0 !important; padding: 7px 14px !important; text-align: right !important; width: auto !important;
  }
  html body table.pt-stacktable td::before,
  html body table:has(td[data-label]) td::before {
    content: attr(data-label); color: var(--ink-3); font-size: 12.5px; font-weight: 500; text-align: left; float: none !important;
  }
}

/* -----------------------------------------------------------------------------
   Popups, loaders, alerts
   -------------------------------------------------------------------------- */
html body #popup-overlay, html body #popup-overlay2, html body #popup-overlay3,
html body #popup-overlay99, html body #popup-overlay100, html body #overlay {
  background: rgba(24, 24, 27, .32) !important;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
html body #popup-overlay97 { background: rgba(255, 255, 255, .86) !important; }

html body #popup-container, html body #popup-container2, html body #popup-container3,
html body #popup-container99, html body #popup-container100,
html body #paymentModal, html body #timeout-warning, html body #branchModal #modalInside {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-bubble) !important;
  box-shadow: 0 24px 60px -20px rgba(24, 24, 27, .35) !important;
  padding: 24px 28px !important;
  color: var(--ink) !important;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
html body #popup-content99, html body #popup-content100, html body #popup-content2 { color: var(--ink) !important; font-weight: 600; margin-bottom: 4px; }
html body #popup-content99 b, html body #popup-content100 b { font-weight: 600; }
html body #timeout-warning h1 { font-size: 18px !important; color: var(--ink) !important; margin: 0; }

html body #branchModal {
  position: fixed; inset: 0; z-index: 9500; display: grid !important; place-items: center;
  background: rgba(24, 24, 27, .32); padding: 16px;
}
html body #branchModal #modalInside { width: min(420px, 100%); text-align: left; }
html body #branchModal h2 { margin: 0 0 8px; font-size: 20px; }
html body #branchModal select { width: 100%; }

/* SweetAlert */
html body .swal2-popup { border-radius: var(--r-bubble) !important; padding: 28px 24px 24px !important; color: var(--ink) !important; max-width: calc(100vw - 32px); }
html body .swal2-title { color: var(--ink) !important; font-size: 20px !important; font-weight: 650 !important; }
html body .swal2-html-container { color: var(--ink-2) !important; font-size: 15px !important; }
html body .swal2-actions { gap: 8px; }
html body .swal2-styled:focus { box-shadow: 0 0 0 3px var(--brand-soft) !important; }
html body .swal2-icon { transform: scale(.82); margin-top: 4px !important; margin-bottom: 4px !important; }
html body .glm-swal .swal2-confirm:hover, html body .glm-swal .swal2-cancel:hover { background: #3f3f46 !important; color: #fff !important; }

/* popup buttons always keep readable text */
html body .swal2-styled.swal2-confirm { color: #fff !important; }
html body .swal2-styled.swal2-cancel,
html body .swal2-styled.swal2-deny { color: var(--ink) !important; }

/* progress (order status) - neutral track, brand fill */
html body .progress, html body .progress2 {
  height: 8px !important;
  background: var(--canvas) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  overflow: hidden;
  margin: 10px 0 0 !important;
  position: relative;
}
html body .progress-bar, html body .progress-bar2 {
  height: 100% !important;
  background: var(--brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  color: transparent !important;
  font-size: 0 !important;
  animation: none !important;
}

/* spinners: the PDF loading screen, and a CSS replacement for loader.gif everywhere
   (Safari freezes GIFs while the next page loads; CSS rotation keeps running) */
.pt-spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  animation: pt-spin .8s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pt-spinner { animation-duration: 2.4s; }   /* slower, not frozen, so it still reads as loading */
}

html body img[src*="loader.gif"] { display: none !important; }
html body :is(center, div, span, p):has(> img[src*="loader.gif"])::before {
  content: "";
  display: block;
  width: 36px; height: 36px;
  margin: 4px auto 10px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  animation: pt-spin .8s linear infinite;
  will-change: transform;
}

/* PDF / invoice loading screen */
html body #loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 55vh;
  margin: 0 !important;
  text-align: center;
}
html body #loading:empty { display: none; }   /* once the PDF is ready */
html body #loading h1 { margin: 18px 0 0; font-size: 24px; font-weight: 650; color: var(--ink) !important; }
html body #loading h4 { margin: 0; font-size: 14px; font-weight: 400; color: var(--ink-3) !important; }

/* -----------------------------------------------------------------------------
   Delivery week (dashboard #calendar, built by scripts.ejs)
   -------------------------------------------------------------------------- */
html body #calendar {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  min-width: 0 !important;
  width: 100%;
  font-size: 13px !important;
  padding-bottom: 4px;
}
html body #calendar .day { flex: 1 0 118px !important; }
html body #calendar .day.has-events { flex: 2.4 0 210px !important; }
html body #calendar:empty { display: none !important; }
html body #calendar .day {
  scroll-snap-align: start;
  opacity: 1 !important;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  padding: 12px !important;
  text-align: left !important;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 8px;
}
html body #calendar .day.today { border-color: var(--ink); }
html body #calendar .date-container { display: flex; align-items: baseline; gap: 6px; }
html body #calendar .day-of-week label { color: var(--ink-3) !important; font-size: 12.5px; font-weight: 500; }
html body #calendar .date label { color: var(--ink) !important; font-weight: 650; font-size: 14px; }
html body #calendar .day.today .day-of-week label { color: var(--brand) !important; }
html body #calendar .status { text-align: left !important; padding: 0 !important; margin: 0 !important; color: var(--ink-3) !important; font-size: 12.5px !important; }
html body #calendar .day.has-events > .status { color: var(--ink) !important; font-weight: 600; }
html body #calendar .event {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 10px !important;
  margin: 0 !important;
  color: var(--ink-2) !important;
  font-size: 12.5px !important;
  line-height: 1.4;
}
html body #calendar .event .custpo:first-child { color: var(--ink); font-size: 13px; }
html body #calendar .event .custpo + .custpo { font-weight: 400; color: var(--ink-3); }
html body #calendar .event .button2 { white-space: normal; text-align: center; min-height: 32px; padding: 0 10px !important; font-size: 12.5px !important; margin-top: 8px; width: 100%; }
html body #calendar .event form { margin: 0; }

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.pfoot {
  max-width: 1320px;
  margin: 24px auto 0;
  padding: 24px var(--gutter) 40px;
  box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  color: var(--ink-3);
  font-size: 13px;
}
.pfoot-brand { display: flex; align-items: center; gap: 14px; }
.pfoot-brand img { height: 28px; width: auto; filter: grayscale(1); opacity: .7; }
.pfoot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pfoot-links a { color: var(--ink-2) !important; text-decoration: none; }
.pfoot-links a:hover { color: var(--ink) !important; text-decoration: underline; }
.pfoot-secure { display: inline-flex; align-items: center; gap: 6px; }
.pfoot-secure svg { width: 14px; height: 14px; }
html body #footer { background: transparent !important; }

/* footer sits inside legacy centred wrappers on some pages */
html body .pfoot { text-align: left; width: 100%; }
html body .pfoot-brand img { width: auto !important; height: 28px !important; }
html body .pfoot-secure svg { width: 14px !important; height: 14px !important; flex: none; }

/* -----------------------------------------------------------------------------
   Status pills and lines: dev server (yellow) and staff viewing as a customer (red)
   -------------------------------------------------------------------------- */
.pdev {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 2147483647; pointer-events: none;
  background: #eab308; color: #1c1917;
  border: 1px solid #eab308; border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.3);
  white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis;
}

/* dev server: yellow line across the top of every screen */
html.is-dev body::after {
  content: "";
  position: fixed; inset: 0 0 auto 0;
  height: 3px;
  background: #eab308;
  z-index: 10000;
  pointer-events: none;
}
/* staff viewing as a customer on the dev server: red line first, yellow just under it */
html.is-dev.viewing-as body::after { top: 3px; }

/* "viewing as a customer" pill: red, same shape as the dev pill */
.pdev.pdev--as {
  background: #b91c1c; color: #fff;
  border: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 6px 5px 14px;
  pointer-events: auto;                    /* so Exit can be clicked */
}
.pdev.pdev--as strong { font-weight: 700; }
.pdev.pdev--as button {
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .18); color: #fff;
  font: inherit; font-weight: 600; font-size: 12px;
  padding: 3px 10px; cursor: pointer;
}
.pdev.pdev--as button:hover { background: rgba(255, 255, 255, .3); }

/* the viewing-as pill is always pill-sized: one anchor only, never top and bottom together */
html body .pdev.pdev--as { top: auto; bottom: 12px; height: auto; }
html.is-dev body .pdev.pdev--as { bottom: 48px; }   /* both showing: red sits just above yellow */

/* phones on Place new order: move pills clear of the checkout bar */
@media (max-width: 532px) {
  body:has(#submitbuttons:not(.hidden)) .pdev { top: calc(66px + env(safe-area-inset-top, 0px)); bottom: auto; }
  html body:has(#submitbuttons:not(.hidden)) .pdev.pdev--as { top: calc(66px + env(safe-area-inset-top, 0px)); bottom: auto; }
  html.is-dev body:has(#submitbuttons:not(.hidden)) .pdev.pdev--as { top: calc(106px + env(safe-area-inset-top, 0px)); }
}

/* back to top */
.pt-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 8500;
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 16px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.pt-top svg { width: 16px; height: 16px; }
.pt-top:hover { border-color: var(--ink-3); }
.pt-top:hover svg { color: var(--brand); }
.pt-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* phones: icon only, and sit above the order page's checkout bar when it's showing */
@media (max-width: 532px) {
  .pt-top { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .pt-top span { display: none; }
  body:has(#submitbuttons:not(.hidden)) .pt-top { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* -----------------------------------------------------------------------------
   Legacy page sweep: make the un-rebuilt pages sit in the same system.
   Widely used wrapper classes become bubbles; coloured header bars become text.
   -------------------------------------------------------------------------- */
html body .account-info-wrapper, html body .account-info-wrapper-2,
html body .delivery-info-wrapper, html body .ordered-info-wrapper, html body .ordered-info-wrapper1,
html body .order-info-wrapper, html body .info-wrapper, html body .account2 {
  background: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-bubble) !important;
  box-shadow: none !important;
  overflow: hidden;
}
html body .account-info-header, html body .account-info-header-2,
html body .delivery-info-header, html body .delivery-info-header1,
html body .order-info-header, html body .info-header {
  background: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  text-align: left !important;
}
html body .account-info-header label, html body .delivery-info-header label,
html body .order-info-header label, html body .delivery-info-header1 label { color: var(--ink) !important; font-weight: 650; }
html body .highlighted-label, html body .highlighted-label2 {
  background: none !important; color: var(--ink-3) !important; font-weight: 500 !important; padding: 0 0 0 6px !important; box-shadow: none !important;
}

/* legacy page titles commonly use h1/h2 in a coloured box */
html body .header, html body .page-header, html body .title-bar {
  background: transparent !important; background-image: none !important; color: var(--ink) !important; box-shadow: none !important;
}

/* modal shells used across legacy pages */
html body .modal-content, html body .modal-content3, html body [id^="editModal"]:not([id*="Overlay"]) {
  border-radius: var(--r-bubble) !important; border: 1px solid var(--line) !important; box-shadow: 0 24px 60px -20px rgba(24,24,27,.35) !important;
}

/* old floated nav pieces that no longer exist */
html body #welcomemsg { float: none; }

/* legacy navy text (inline styles) becomes ink; skip anything that uses the navy as a background */
html body :is([style*="color:#2b3071"], [style*="color: #2b3071"],
              [style*="color:#2B3071"], [style*="color: #2B3071"],
              [style*="color:#120B46"], [style*="color: #120B46"]):not([style*="background"]):not(.swal2-styled) {
  color: var(--ink) !important;
}

/* legacy tracking and shouty caps */
html body *:not([class^="pt-"]):not([class*=" pt-"]):not([class^="plogin"]):not([class^="pnav"]) { letter-spacing: normal !important; }
html body .button, html body .button2, html body input[type="submit"], html body input[type="button"] { text-transform: none !important; }
html body .pt-pagehead h1, html body .plogin h1 { letter-spacing: -0.02em !important; }
html body .pt-balance-figure { letter-spacing: -0.035em !important; }

/* any other old .signup-form page: labels and headings readable (they were white) */
html body .signup-form:not(.pt-create),
html body .signup-form:not(.pt-create) label,
html body .signup-form:not(.pt-create) h1,
html body .signup-form:not(.pt-create) h3,
html body .signup-form:not(.pt-create) h4 {
  color: var(--ink) !important;
  text-shadow: none !important;
}

/* small screens: generic tidy-up for legacy fixed widths */
@media (max-width: 760px) {
  html body img { max-width: 100%; height: auto; }
  html body [style*="width:"][style*="px"]:not(img):not(svg):not(.pnav):not(.pnav *):not(canvas) { max-width: 100%; }
  .pt-page { padding-top: 20px; }
  .pt-bubble { padding: 16px; border-radius: 16px; }
  .pt-actions { width: 100%; }
  .pt-actions .pt-btn { flex: 1 1 auto; }
}

/* nav pieces must win over credit-nav.css / nav.css, which style links by tag */
html body .pnav a.pnav-link { padding: 8px 12px !important; margin: 0 !important; float: none !important; display: flex !important; font-size: 14.5px !important; line-height: 1.4 !important; text-align: left !important; border: 0 !important; background-color: transparent; }
html body .pnav a.pnav-link:hover, html body .pnav a.pnav-link[aria-current="page"] { background-color: var(--canvas) !important; }
html body .pnav .pnav-head a, html body .pbar a { padding: 0 !important; float: none !important; display: block !important; background: none !important; }
html body .pnav .pnav-out { margin: 0 !important; float: none !important; font-size: 13.5px !important; padding: 9px 12px !important; }
html body .pnav-switch-list a { float: none !important; }
html body .pnav svg, html body .pbar svg { margin: 0 !important; padding: 0 !important; }

/* -----------------------------------------------------------------------------
   Sign-in, reset password and request-access
   -------------------------------------------------------------------------- */
.plogin {
  min-height: calc(100vh - 110px);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 56px) var(--gutter);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plogin:not(:has(.plogin-media)) { grid-template-columns: minmax(0, 440px); justify-content: center; }
.plogin-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 44px);
  display: flex; flex-direction: column; justify-content: center;
}
.plogin-card * { box-sizing: border-box; }
html body .plogin-logo, html body #combologo { width: auto !important; max-width: 220px !important; max-height: 64px; height: auto; margin: 0 0 32px; align-self: flex-start; }
.plogin h1 { font-size: 30px; margin: 0; font-weight: 700; font-stretch: 92%; letter-spacing: -0.02em; }
.plogin-lede { color: var(--ink-2); margin: 6px 0 24px; }
.plogin-error { color: var(--bad); border: 1px solid #f0c4c4; border-radius: var(--r-control); padding: 10px 12px; margin: 0 0 16px; font-size: 14px; }
.plogin-form { display: flex; flex-direction: column; }
.plogin-form label { font-size: 13.5px; font-weight: 600; color: var(--ink) !important; margin: 0 0 6px; }
.plogin-form input:not([type="submit"]) { width: 100%; margin: 0 0 16px; }
.plogin-pw { position: relative; }
.plogin-pw input { padding-right: 46px !important; }

/* both show/hide buttons sit inside their own box, same style */
html body .plogin-pw .toggle-password,
html body .plogin-pw .toggle-password2 {
  position: absolute !important;
  right: 4px !important; top: 50% !important; left: auto !important; bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 38px !important; height: 34px !important;
  margin: 0 !important; padding: 0 !important;
  display: grid !important; place-items: center;
  border: 0 !important; border-radius: 8px !important;
  background: none !important; box-shadow: none !important;
  color: var(--ink-3) !important; font-size: 16px !important;
  cursor: pointer;
}
html body .plogin-pw .toggle-password:hover,
html body .plogin-pw .toggle-password2:hover { color: var(--ink) !important; }

html body .plogin-submit { width: 100%; min-height: 46px; margin-top: 4px; font-size: 15px !important; }
.plogin-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; font-size: 14px; }
.plogin-links a { color: var(--ink-2) !important; }
.plogin-links a:hover { color: var(--brand) !important; }
.plogin-media { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--line); min-height: 420px; }
html body .plogin-media video, html body .plogin-media #video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; z-index: 0; }
.pt-login .pfoot { margin-top: 0; padding-top: 8px; }
@media (max-width: 860px) {
  .plogin { grid-template-columns: minmax(0, 1fr); max-width: 520px; min-height: 0; }
  .plogin-media { display: none; }
}
@media (max-width: 480px) {
  .plogin { padding: 12px; }
  .plogin-card { border-radius: 20px; }
}

/* the request-access dialog was laid out with fixed label widths */
html body .swal2-popup #registerForm > div { flex-direction: column; align-items: stretch !important; }
html body .swal2-popup #registerForm label { width: auto !important; text-align: left !important; margin: 0 0 4px !important; font-size: 13.5px; }
html body .swal2-popup #registerForm input { width: 100% !important; margin: 0 !important; }

/* reset / set password */
#error_message:has(h4:empty) { display: none; }
#error_message h4 { color: var(--bad) !important; font-size: 14px; margin: 0 0 12px; }

/* password rules: grey until met, then a green tick */
.pt-pw-rules {
  list-style: none; margin: -4px 0 20px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-control);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  font-size: 12.5px; color: var(--ink-3);
}
.pt-pw-rules li { display: flex; align-items: center; gap: 6px; }
.pt-pw-rules li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-strong); flex: none;
}
.pt-pw-rules li.is-met { color: var(--ink); }
.pt-pw-rules li.is-met::before {
  width: 10px; height: 6px; border-radius: 0; background: none;
  border: solid var(--ok); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -2px);
}
@media (max-width: 400px) { .pt-pw-rules { grid-template-columns: 1fr; } }

/* =========================================================
   "Recent ..." list pages (orders, credits, quotes)
   ========================================================= */
html body .account-info-wrapper {
  padding: 0 20px 20px !important;
  box-sizing: border-box;
}
html body .account-info-wrapper > .account-info-header {
  margin: 0 -20px 16px !important;        /* header still runs edge to edge */
  height: auto !important;                /* overrides inline height:25px */
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
html body .account-info-wrapper > .account-info-header > div { float: none !important; margin: 0 !important; }
html body .account-info-wrapper form label,
html body .account-info-wrapper form input { margin-left: 0 !important; }

/* each order inside the list becomes a plain bordered item */
html body .account-info-body > div[style*="margin: 10px"] {
  margin: 0 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-inner) !important;
  box-shadow: none !important;
  padding: 0 16px 16px;
  overflow: hidden;
}
html body .account-info-body .delivery-info-header1 {
  margin: 0 -16px 4px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
}
html body .account-info-body .delivery-info-header1 + br { display: none; }

/* the striped divider image at the bottom of each order */
html body .account-info-body img[alt="Divider"] { display: none; }
html body .account-info-body div:has(> center > img[alt="Divider"]) { display: none; }

/* buttons in a tidy row with even gaps */
html body .account-info-body .button { margin: 0 8px 8px 0 !important; }

/* every other order card: light grey fill and a brand stripe on the left */
html body .account-info-wrapper > .account-info-body:nth-child(even of .account-info-body) > div {
  background: #f7f7f8 !important;
  border-color: var(--line-strong) !important;
  box-shadow: inset 3px 0 0 var(--brand) !important;
}
html body .account-info-wrapper > .account-info-body:nth-child(even of .account-info-body) .delivery-info-header1,
html body .account-info-wrapper > .account-info-body:nth-child(even of .account-info-body) table th,
html body .account-info-wrapper > .account-info-body:nth-child(even of .account-info-body) table td {
  background: transparent !important;
}
html body .account-info-wrapper > .account-info-body:nth-child(even of .account-info-body) table tbody tr:hover td {
  background: rgba(0, 0, 0, .025) !important;
}

/* =========================================================
   Place new order
   ========================================================= */

/* header bars */
html body .order-info-header {
  box-sizing: border-box !important;
  flex-wrap: wrap;            /* lets the search box move under the title */
  gap: 12px 16px;
}
html body .order-info-header label { margin: 0 !important; }

/* "Search All Products" keyword box */
html body #search-form {
  height: auto !important;    /* overrides the inline height: 12px */
  flex: 1 1 240px;
  max-width: 360px;
  min-width: 0;
  margin: 0 0 0 auto;
}
html body #search-form > div { width: 100%; }
html body #search-term {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  text-overflow: ellipsis;
}
html body #searchbar.order-info-header { height: auto !important; }   /* no fixed height, so the keyword box shows */

@media (max-width: 760px) {
  html body #search-form { flex-basis: 100%; max-width: none; margin: 0; }
}

/* tablet and desktop: search box on its own row, centred under the title */
@media (min-width: 533px) {
  html body #search-form {
    flex: 0 1 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }
}

/* Templates + Previously Ordered share the third column, stacked */
html body #templates.order-info-wrapper,
html body #previously.order-info-wrapper {
  float: right !important;
  clear: right;
  margin: 0 0 16px 16px !important;
  min-height: 0 !important;
  max-height: 44vh !important;
  height: auto !important;
}
html body #templates.order-info-wrapper { clear: none; }

/* collapsible headers */
html body .pt-collapsible > .order-info-header { cursor: pointer; user-select: none; }
html body .pt-collapsible > .order-info-header::after {
  content: ""; width: 8px; height: 8px; margin-left: auto; flex: none;
  border: solid var(--ink-3); border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) translateY(-3px); transition: transform .15s;
}
html body .pt-collapsible.pt-collapsed > .order-info-header::after { transform: rotate(-45deg); }
html body .pt-collapsible.pt-collapsed > :not(.order-info-header) { display: none !important; }
html body .pt-collapsible.pt-collapsed { max-height: none !important; }
html body .pt-collapsible.pt-collapsed > .order-info-header { border-bottom: 0 !important; }

/* cards share the width instead of fixed 520px / 400px minimums */
html body .order-info-wrapper.current,
html body .order-info-wrapper.previous {
  box-sizing: border-box;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 0 16px 16px !important;
}
html body #larger.order-info-wrapper { margin-left: 0 !important; }

@media (min-width: 1280px) {
  html body .order-info-wrapper.current,
  html body .order-info-wrapper.previous { width: calc((100% - 32px) / 3) !important; }
}
@media (min-width: 761px) and (max-width: 1279px) {
  html body #larger.order-info-wrapper { width: 100% !important; }
  html body .order-info-wrapper.previous { width: calc((100% - 16px) / 2) !important; }
  html body #searchall.order-info-wrapper { margin-left: 0 !important; }
  html body #templates.order-info-wrapper,
  html body #previously.order-info-wrapper { width: calc((100% - 16px) / 2) !important; }
}
@media (max-width: 760px) {
  html body .order-info-wrapper.current,
  html body .order-info-wrapper.previous { width: 100% !important; margin-left: 0 !important; float: none !important; }
  html body #templates.order-info-wrapper,
  html body #previously.order-info-wrapper { float: none !important; width: 100% !important; margin-left: 0 !important; max-height: none !important; }
  html body .order-info-header label { margin: 0 !important; padding: 0 !important; font-size: 17px !important; }
  html body .order-info-header { display: flex !important; }
}

/* Search All Products header scrolls away like the other card headers */
html body #searchbar.sticky-searchbar,
html body #searchbar.order-info-header {
  position: static !important;
  background: var(--paper) !important;
}

/* pinned column titles in every card get a solid background */
html body .order-info-wrapper thead { position: static !important; }
html body .order-info-wrapper thead th {
  position: sticky !important;
  top: var(--searchbar-h, 0px) !important;
  background: var(--paper) !important;
  z-index: 15;
  box-shadow: inset 0 -1px 0 var(--line);
}
html body #search-results thead { position: static !important; }

/* product names in result tables, no underline */
html body #search-results td a,
html body #searchall td a,
html body #previously td a {
  text-decoration: none !important;
  border-bottom: 0 !important;
  color: var(--ink) !important;
}
html body #search-results td a:hover,
html body #searchall td a:hover,
html body #previously td a:hover { color: var(--brand) !important; }

/* compact search card while the keyword box is empty (all screen sizes) */
html body #searchall.pt-search-empty #search-body { display: none !important; }
html body #searchall.pt-search-empty #searchbar.order-info-header { border-bottom: 0 !important; }
@media (min-width: 533px) {
  html body #searchall.pt-search-empty.order-info-wrapper {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }
  /* the phone-only cart card is fully hidden on tablet + desktop */
  html body div#small.order-info-wrapper.hidden { display: none !important; }
}

/* phones: hide the empty desktop cart, and a tidy checkout bar */
@media (max-width: 532px) {
  html body #larger.order-info-wrapper { display: none !important; }

  html body #submitbuttons:not(.hidden) {
    position: fixed !important;
    left: 0; right: 0; bottom: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    z-index: 9000 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 !important;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, .96) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .25);
  }
  html body #submitbuttons > .hidden { display: none !important; }
  html body #submitbuttons .button {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    min-height: 46px;
    padding: 0 12px !important;
  }
  html body #submitbuttons .button::before { display: none; }   /* old cart / trash icons */

  html body #submitbuttons #clearall,
  html body #submitbuttons #smallbtn,
  html body #submitbuttons #template1 {
    background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line-strong) !important;
  }
  html body #submitbuttons #clearall { color: var(--bad) !important; }
  html body #submitbuttons #minimize-header-table,
  html body #submitbuttons #donesmall { grid-column: 1 / -1; }
  html body #submitbuttons #template1:not(.hidden) ~ #minimize-header-table { grid-column: auto; }

  html body:has(#submitbuttons:not(.hidden)) { padding-bottom: 170px !important; }
}

/* =========================================================
   Order templates page
   ========================================================= */
html body .pt-templates { max-width: 760px !important; width: 100% !important; margin: 24px auto !important; float: none !important; min-height: 0 !important; max-height: none !important; }
html body .signup-form > h1 { display: none; }   /* fallback if the old heading is still there */
.pt-hint { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); font-weight: 400; }

html body .pt-tpl-row { cursor: pointer; }
html body .pt-tpl-row td { padding-top: 14px !important; padding-bottom: 14px !important; }
.pt-tpl-name { display: block; font-weight: 600; color: var(--ink); }
.pt-tpl-meta { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.pt-tpl-chev {
  display: inline-block; width: 8px; height: 8px; margin: 0 4px 2px 14px; vertical-align: middle;
  border: solid var(--ink-3); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); transition: transform .15s;
}
html body .pt-tpl-row.is-open .pt-tpl-chev { transform: rotate(-135deg); margin-bottom: -2px; }
html body .pt-tpl-row.is-open td { border-bottom-color: transparent !important; }

html body .pt-tpl-items td { padding: 0 12px 12px !important; background: var(--paper) !important; }
html body .pt-tpl-items ul { list-style: none; margin: 0; padding: 4px 0; border: 1px solid var(--line); border-radius: var(--r-inner); }
html body .pt-tpl-items li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); font-size: 14px;
}
html body .pt-tpl-items li:last-child { border-bottom: 0; }
html body .pt-tpl-items li .pt-btn { min-height: 32px; font-size: 13px !important; }

/* =========================================================
   Manage users
   ========================================================= */
html body tr.pt-perm-locked td { color: var(--ink-3) !important; }
html body tr.pt-perm-locked input[type="checkbox"] { opacity: .45; cursor: not-allowed; }

/* =========================================================
   Invoice pages (pay, all invoices, paid invoices)
   ========================================================= */

/* remove the old top gaps */
html body .main { margin-top: 0 !important; }
html body .main > center { display: block; text-align: left; }

/* filters become one compact toolbar row above the card */
html body #tableOptions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 24px;
  margin: 8px 0 16px;
}
html body #tableOptions table {
  display: block; width: auto !important;
  margin: 0 !important;                 /* overrides the inline margin-top:120px */
}
html body #tableOptions tbody { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
html body #tableOptions tr { display: flex; align-items: center; gap: 10px; padding: 0 !important; }
html body #tableOptions tr:empty { display: none; }
html body #tableOptions td { padding: 0 !important; border: 0 !important; background: none !important; }
html body #tableOptions label {
  width: auto !important; float: none !important; white-space: nowrap;
  font-size: 13.5px; color: var(--ink-2) !important; margin: 0 !important;
}
html body #tableOptions select { min-width: 200px; max-width: 320px; margin: 0 !important; }
html body #tableOptions #filterout {
  width: auto !important; margin: 0 !important; min-height: 42px; align-self: center;
  background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line-strong) !important;
}
html body #tableOptions #filterout:hover { background: var(--canvas) !important; }

/* the invoice card: full width, plain bubble, no heavy shadow */
html body #checkout,
html body #checkout.mobile {
  width: 100% !important;
  margin: 0 0 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-bubble) !important;
  box-shadow: none !important;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
}
html body #checkout .col-50 { width: 100% !important; margin: 0 !important; padding: 0 20px; box-sizing: border-box; }
html body #checkout .col-50 .account-info-header { margin: 0 -20px 12px !important; }
html body #checkout > .account-info-header { margin: 0 0 12px !important; }

/* loading message centred under the spinner; the invoice table itself stays left-aligned */
html body #tableContainer { text-align: center; }
html body #tableContainer table { text-align: left; }

/* the list itself uses the screen height instead of 45% */
html body #tableContainer {
  max-height: calc(100vh - 330px) !important;
  min-height: 320px;
}
@media (max-width: 560px) {
  html body #tableContainer { max-height: none !important; min-height: 0; }
  html body #checkout, html body #checkout.mobile { border-radius: 16px !important; }
}

/* pay page: Continue / Process payment button lines up with the right edge */
html body #paymentSubmit { margin-right: 0 !important; }

/* pay page: validation messages above the total, centred */
html body #submitid,
html body #errorMessage,
html body #paymsg {
  text-align: center;
  padding: 0 16px;
}
html body #submitid h2,
html body #submitid h3 {
  margin: 12px 0 0;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  color: var(--bad) !important;
}
html body #submitid h3 { margin-top: 2px; font-weight: 500 !important; }
html body #submitid br { display: none; }

/* pay page: an invoice line set to $0 */
html body #search input.pt-zero {
  border-color: var(--bad) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .12) !important;
}


/* dashboard on phones: the account invoice list stays a compact table that scrolls sideways */
@media (max-width: 560px) {
  html body.pt-dashboard .pt-details { padding: 0 !important; overflow: hidden; }
  html body.pt-dashboard .pt-details .pt-scroll { margin: 0; padding: 0; }
  html body.pt-dashboard table#search { min-width: 640px; }
  html body.pt-dashboard table#search th,
  html body.pt-dashboard table#search td { padding: 9px 10px !important; font-size: 13px; white-space: nowrap; }
  html body.pt-dashboard table#search td:first-child,
  html body.pt-dashboard table#search th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--paper) !important;   /* PDF button stays in view while scrolling */
  }
}

/* paid / all invoices on phones: the detail rows (info, item titles, items) join the card above */
@media (max-width: 560px) {
  html body:not(.pt-dashboard) #search tbody tr.extra-info {
    display: block !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: #fafafa !important;
  }
  html body:not(.pt-dashboard) #search tbody tr:not(.extra-info) + tr.extra-info { border-top: 1px dashed var(--line-strong) !important; }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:is(:last-child, :has(+ tr:not(.extra-info))) {
    border-radius: 0 0 var(--r-inner) var(--r-inner) !important;
    margin-bottom: 12px !important;
  }

  /* info row: branch/type and terms side by side, ship-to underneath */
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(strong) {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 8px 14px 12px !important;
  }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(strong) td {
    display: block !important; padding: 0 !important; text-align: left !important;
  }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(strong) td:nth-child(2) { grid-column: 1 / -1; order: 3; }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(strong) td > div { columns: auto !important; text-align: left !important; font-size: 13.5px; line-height: 1.4; }

  /* item column titles aren't needed on phones */
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> th) { display: none !important; }

  /* item rows: description on top, quantity / price / total on one line under it */
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> td:nth-child(4)):not(:has(strong)) {
    display: grid !important; grid-template-columns: repeat(3, auto); justify-content: space-between;
    gap: 2px 12px; padding: 9px 14px !important; border-top: 1px solid var(--line) !important;
  }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> td:nth-child(4)):not(:has(strong)) td {
    display: block !important; padding: 0 !important; text-align: left !important; font-size: 13px; white-space: nowrap;
  }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> td:nth-child(4)):not(:has(strong)) td:first-child {
    grid-column: 1 / -1; white-space: normal; font-weight: 600; font-size: 13.5px;
  }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> td:nth-child(4)):not(:has(strong)) td:nth-child(2)::before { content: "Shipped "; color: var(--ink-3); }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> td:nth-child(4)):not(:has(strong)) td:nth-child(3)::before { content: "Price "; color: var(--ink-3); }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> td:nth-child(4)):not(:has(strong)) td:nth-child(4)::before { content: "Total "; color: var(--ink-3); }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> td:nth-child(4)):not(:has(strong)) td:nth-child(4) { font-weight: 600; }

  /* keep the line breaks inside addresses, and show the small labels on item lines */
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(strong) td br { display: inline !important; }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(strong) td strong + br { display: none !important; }
  html body:not(.pt-dashboard) #search tbody tr.extra-info:has(> td:nth-child(4)):not(:has(strong)) td::before { display: inline !important; }
}

/* dashboard on phones: the account invoice list stays a compact table that scrolls sideways */
@media (max-width: 560px) {
  html body.pt-dashboard .pt-details { padding: 0 !important; overflow: hidden; }
  html body.pt-dashboard .pt-details .pt-scroll { margin: 0; padding: 0; }
  html body.pt-dashboard table#search { min-width: 640px; }
  html body.pt-dashboard table#search th,
  html body.pt-dashboard table#search td { padding: 9px 10px !important; font-size: 13px; white-space: nowrap; }
  html body.pt-dashboard table#search td:first-child,
  html body.pt-dashboard table#search th:first-child { position: sticky; left: 0; z-index: 2; background: var(--paper) !important; }
}






/* =========================================================
   Payment history: "applied to" panel under each payment
   ========================================================= */
html body tr.pt-applied > td {
  padding: 4px 12px 16px 56px !important;
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
}
html body tr.pt-applied:hover > td { background: var(--paper) !important; }
.pt-applied-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: #fafafa;
  padding: 10px 14px 6px;
}
.pt-applied-title { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
html body table.pt-applied-table { width: 100%; }
html body table.pt-applied-table th {
  background: transparent !important; font-size: 12px !important; padding: 8px 10px !important;
  text-align: left !important;
}
html body table.pt-applied-table td {
  padding: 9px 10px !important; font-size: 13.5px; text-align: left !important; vertical-align: middle;
}
html body table.pt-applied-table .num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body table.pt-applied-table tbody tr:hover td { background: rgba(0, 0, 0, .025) !important; }
html body table.pt-applied-table tfoot td {
  border-bottom: 0 !important; border-top: 1px solid var(--line-strong) !important;
  color: var(--ink-2) !important; font-size: 13px;
}
html body table.pt-applied-table tfoot td.num { color: var(--ink) !important; }
html body table.pt-applied-table small { display: block; color: var(--ink-3); font-size: 12px; }
.pt-applied-table .pt-muted { color: var(--ink-3); }

/* invoice number: clearly a link to its PDF */
html body a.pt-inv-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink) !important; font-weight: 600; text-decoration: none !important;
  border-bottom: 1px solid var(--line-strong);
}
html body a.pt-inv-link svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
html body a.pt-inv-link:hover { color: var(--brand) !important; border-bottom-color: var(--brand); }
html body a.pt-inv-link:hover svg { color: var(--brand); }

@media (max-width: 760px) {
  html body table tr.pt-applied > td { display: block !important; padding: 0 0 12px !important; border: 0 !important; }
  html body table tr.pt-applied > td::before { display: none !important; }
  .pt-applied-wrap { padding: 10px; }
  html body table.pt-applied-table .pt-src { text-align: right; }
  html body table.pt-applied-table tfoot { display: block; }
  html body table.pt-applied-table tfoot tr { display: flex !important; justify-content: space-between; border: 0 !important; padding: 6px 4px 2px !important; margin: 0 !important; background: none !important; }
  html body table.pt-applied-table tfoot td { display: inline !important; border: 0 !important; padding: 0 !important; }
  html body table.pt-applied-table tfoot td:empty { display: none !important; }
}

/* dark grey row on hover */
html body #search tr:is(.even-row, .odd-row) { cursor: pointer; }
html body #search tr:is(.even-row, .odd-row):hover td {
  background: #3f3f46 !important;
  color: #fff !important;
}
html body #search tr:is(.even-row, .odd-row):hover td * { color: #fff !important; }

/* =========================================================
   Help and support page
   ========================================================= */
.pt-help .pt-help-heading { font-size: 18px; margin: 28px 0 12px; }
.pt-help-note { border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--paper); padding: 12px 16px; margin: 0 0 16px; }
.pt-help-note--ok { border-color: #bfe3c9; color: var(--ok); }
.pt-help-note--bad { border-color: #f0c4c4; color: var(--bad); }

.pt-help-media {
  position: relative; display: block; width: 100%; padding: 0; margin: 0 !important; border: 0; cursor: pointer; box-sizing: border-box;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, #f4f4f5, #e4e4e7);
  border-radius: var(--r-inner);
}
.pt-help-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; pointer-events: none; }
.pt-help-frame.is-ready { opacity: 1; }
.pt-help-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .35);
  transition: transform .15s, color .15s;
}
.pt-help-play svg { width: 22px; height: 22px; margin-left: 3px; }
.pt-help-media:hover .pt-help-play { transform: translate(-50%, -50%) scale(1.06); color: var(--brand); }
.pt-help-media:focus-visible { outline-offset: 3px; }

.pt-help-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.pt-help-feature h2 { margin: 0 0 6px; font-size: 22px; }
.pt-help-feature p { margin: 0; color: var(--ink-2); }
.pt-help-feature .pt-row-actions { margin-top: 18px; }

.pt-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pt-help-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-bubble); padding: 10px; display: flex; flex-direction: column; }
.pt-help-body { padding: 12px 6px 4px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pt-help-body h3 { margin: 0; font-size: 16px; font-weight: 650; }

.pt-help-doc {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--r-inner);
  text-decoration: none !important; color: var(--ink) !important;
  position: relative;
}
.pt-help-doc:hover { border-color: var(--ink-3); }
.pt-help-doc strong { display: block; font-size: 13.5px; font-weight: 600; }
.pt-help-doc small { display: block; font-size: 12px; color: var(--ink-3); }
.pt-help-pdf, .pt-help-doc-icon {
  width: 40px; height: 52px; flex: none; border-radius: 4px;
  border: 1px solid var(--line); background: #fff;
}
.pt-help-pdf { display: none; object-fit: contain; }
.pt-help-pdf.is-ready { display: block; }
.pt-help-pdf.is-ready + .pt-help-doc-icon { display: none; }
.pt-help-doc-icon { display: grid; place-items: center; color: var(--ink-3); }
.pt-help-doc-icon svg { width: 20px; height: 20px; }

.pt-help-contact { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pt-help-contact h2 { margin: 0 0 4px; font-size: 18px; }
.pt-help-contact p { margin: 0; color: var(--ink-2); }

.pt-help-player {
  width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-bubble);
  background: #000; color: #fff; overflow: hidden;
}
.pt-help-player::backdrop { background: rgba(24, 24, 27, .7); }
.pt-help-player-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; background: var(--paper); color: var(--ink); }
.pt-help-player video { display: block; width: 100%; max-height: 75vh; background: #000; }

@media (max-width: 760px) {
  .pt-help-feature { grid-template-columns: 1fr; }
  .pt-help-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pt-help-card { padding: 6px; border-radius: 14px; }
  .pt-help-doc small { display: none; }
}
@media (max-width: 480px) {
  .pt-help-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Staff pages (credit team / reps): full-width cards that fit any screen
   ========================================================= */
html.is-staff body > center { display: block; text-align: left; }

/* every card spans the content area */
html.is-staff .account-info-wrapper,
html.is-staff .account2-info-wrapper {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 16px !important;
  float: none !important;
  box-sizing: border-box;
  overflow: hidden;
}
html.is-staff #charts-container2 { width: 100% !important; }

/* nothing wider than the content column */
html.is-staff body > center,
html.is-staff #top,
html.is-staff #results,
html.is-staff body > center > div {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
html.is-staff .modal-content,
html.is-staff .alert.modal-content,
html.is-staff .popup2 { min-width: 0 !important; max-width: calc(100vw - 32px) !important; }
html.is-staff #top.signup-form:not(:has(h4)):not(:has(form)) { display: none !important; }

/* Account Search: dropdown + text box in one row, stacking on narrow screens */
html.is-staff .account-info-wrapper:has(#filterDropdown) > div:nth-child(2) {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important;
}
html.is-staff #filterDropdown { flex: 0 1 240px; margin: 0 !important; }
html.is-staff #filterInput { flex: 1 1 260px; max-width: 520px; margin: 0 !important; }

/* Scheduled Payments: filter box shrinks instead of pushing the header wide */
html.is-staff #paymentFilter { width: auto !important; flex: 0 1 300px; min-width: 0; }
html.is-staff .account-info-header:has(#paymentFilter) { flex-wrap: wrap; gap: 10px; }

/* wide tables scroll inside their card instead of being cut off */
html.is-staff .account-info-wrapper div[style*="overflow-x"],
html.is-staff .account2-info-wrapper div[style*="overflow-x"] {
  overflow-x: auto !important;
  margin: 0 -20px; padding: 0 20px 6px;
  max-width: none; width: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
html.is-staff .account-info-wrapper div[style*="overflow-x"]::-webkit-scrollbar,
html.is-staff .account2-info-wrapper div[style*="overflow-x"]::-webkit-scrollbar { height: 10px; }
html.is-staff .account-info-wrapper div[style*="overflow-x"]::-webkit-scrollbar-thumb,
html.is-staff .account2-info-wrapper div[style*="overflow-x"]::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
}

/* staff tables: tighter, headers may wrap, long emails may break but names never do */
html.is-staff #payments { width: 100%; min-width: 900px; }
html.is-staff #search { width: 100%; min-width: 0 !important; table-layout: auto; }
html.is-staff #search th,
html.is-staff #payments th {
  white-space: normal !important;
  vertical-align: bottom;
  font-size: 12px !important;
  padding: 8px 8px !important;
}
html.is-staff #search td,
html.is-staff #payments td {
  padding: 8px 8px !important;
  font-size: 13.5px;
  vertical-align: top;
  white-space: normal;
}
html.is-staff #payments td[name="User Email"] { overflow-wrap: anywhere; }
html.is-staff #search td { overflow-wrap: break-word; word-break: normal; }
html.is-staff #payments .delete-btn { margin: 0 !important; white-space: nowrap; }

/* user table only (its first header is blank): the five icon columns are as narrow as their icon */
html.is-staff #search:has(thead th:first-child:empty) th:nth-child(-n+5),
html.is-staff #search:has(thead th:first-child:empty) td:nth-child(-n+5) {
  width: 1%;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center;
}
html.is-staff #search:has(thead th:first-child:empty) td:nth-child(-n+5) i { font-size: 15px; }
html.is-staff #search td .fa-pen-to-square { float: none !important; margin-left: 6px; opacity: .55; }
html.is-staff #search td .fa-pen-to-square:hover { opacity: 1; }

/* rep view (and any other #search without icon columns): data columns get the room,
   the action button hugs the right edge */
html.is-staff #search:not(:has(thead th:first-child:empty)) th:last-child,
html.is-staff #search:not(:has(thead th:first-child:empty)) td:last-child {
  width: 1%; white-space: nowrap; text-align: right !important;
}
html.is-staff #search:not(:has(thead th:first-child:empty)) td:last-child .button { margin: 0 !important; }
html.is-staff #search td small,
html.is-staff #search td .small { display: block; color: var(--ink-3); font-size: 12.5px; }

/* charts: a responsive grid of white cards */
html.is-staff .chart-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  width: 100% !important;
  margin: 0 0 16px !important;
}
html.is-staff .chart-box {
  max-width: none !important; min-width: 0 !important; max-height: none !important;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-bubble);
  padding: 18px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
}
html.is-staff .chart-box br { display: none; }
html.is-staff .chart-box canvas {
  width: 100% !important; height: auto !important;
  max-width: 280px !important; min-width: 0 !important; max-height: 280px !important;
  padding-top: 12px !important;
}
html.is-staff .graphs {
  color: var(--ink) !important; font-size: 14px; font-weight: 600; text-align: center; line-height: 1.35;
}

@media (max-width: 760px) {
  html.is-staff #payments { min-width: 0; }
  html.is-staff .account-info-wrapper div[style*="overflow-x"] { margin: 0; padding: 0; }
  html.is-staff .chart-container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  html.is-staff .chart-container { grid-template-columns: 1fr; }
}

/* =========================================================
   Create customer account (staff)
   ========================================================= */
html body .signup-form.pt-create {
  display: block !important;
  color: var(--ink) !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 12px auto 24px !important;
  padding: 0 !important;
  text-align: left !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
}
html body .signup-form.pt-create h1 {
  margin: 0 !important;
  font-size: 24px !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  text-align: left !important;
}
html body .signup-form.pt-create .pt-create-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
html body .signup-form.pt-create > .pt-bubble { padding: 26px; }

html body .signup-form.pt-create form.pt-create-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-items: start !important;
}
html body .pt-create-form > .pt-field:first-child,
html body .pt-create-form > .pt-field--full { grid-column: 1 / -1; }

html body .pt-create-form .pt-field { display: flex !important; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
html body .pt-create-form .pt-field label {
  display: block !important;
  color: var(--ink) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin: 0 !important; padding: 0 !important;
  text-align: left !important; float: none !important; width: auto !important;
  text-shadow: none !important;
}
html body .pt-create-form .pt-field label span { color: var(--ink-3); font-weight: 400; margin-left: 4px; }
html body .pt-create-form .pt-field input,
html body .pt-create-form .pt-field select { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; }
html body .pt-create-form > .pt-field:first-child select { max-width: 420px !important; }
html body .pt-create-form .pt-form-actions { justify-content: flex-end; margin-top: 4px; }
html body .pt-create-form #signup { width: auto !important; margin: 0 !important; }

html body .pt-create-form .suggestions,
html body .pt-create-form .linkedsuggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-inner);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .25);
  max-height: 260px; overflow-y: auto; width: auto !important;
}
html body .pt-create-form .suggestions:empty,
html body .pt-create-form .linkedsuggestions:empty { display: none; }
html body .pt-create-form .suggestion-item,
html body .pt-create-form .linked-suggestion-item,
html body .pt-create-form .suggestion-item-notactive {
  padding: 9px 12px !important; color: var(--ink) !important; background: none !important;
  border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; text-align: left;
}
html body .pt-create-form .suggestion-item:hover,
html body .pt-create-form .linked-suggestion-item:hover { background: var(--canvas) !important; }

@media (max-width: 640px) {
  html body .signup-form.pt-create form.pt-create-form { grid-template-columns: 1fr; }
  html body .signup-form.pt-create > .pt-bubble { padding: 18px; }
}

/* phones/tablets: the top bar scrolls away with the page like a normal site,
   so nothing ever slides up "above" it into Safari's glass toolbar */
@media (max-width: 1024px) {
  html.has-shell body .pbar {
    position: relative !important;
    top: auto;
    background: var(--paper);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}


/* back to top: the arrow keeps its size even on pages whose old CSS resizes every svg */
html body .pt-top svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  flex: none;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 532px) {
  html body .pt-top svg { width: 18px !important; height: 18px !important; }
}