/* =============================================================================
   PPd UI v1 — the shared Pick Pack Direct stylesheet
   https://pickpack.direct/ui/v1/ppd.css

   One file for every PPd product: the website, PPd, PPd Connections,
   handhelds and van apps. Load it after Bootstrap (if a page uses Bootstrap):

     <link rel="stylesheet" href="https://pickpack.direct/ui/v1/ppd.css">

   v1 never changes in a way that breaks a page. Breaking changes go in /ui/v2/.

   MASTER COPY: PPd-S9/html/inc/CSS/ppd.css — edit it there, then run
   PPd-S9/sync-ppd-css.sh to copy it into PPd-WWW (public/ui/v1/ppd.css).
   Don't edit the PPd-WWW copy; it gets overwritten.

   Contents
     1. Brand tokens (colours, fonts, spacing)
     2. Base
     3. Buttons
     4. Tiles — the PPd "live tile" block system
     5. Search box
     6. Notice bar
     7. Utilities
     8. Area pages — the rail menu, coloured header band, sub-tiles
     9. Bootstrap 5 in PPd colours (pages that load Bootstrap 5 first)
    10. Cards, messages, colour choice, PIN boxes, keypad
    11. Frame — the app layout: logo corner, top bar of squares, side menu
    12. Page parts — headings, panels, lists, status, channel logos, search

   Changes
     1.0.0  first version: tokens, buttons, tiles, search, notices, area pages
     1.1.0  Bootstrap 5 alignment, cards, messages, colour choice, PIN, keypad
     1.2.0  Frame (app layout shared by PPd, Channels and Support), page parts,
            square Bootstrap 5 tables and pagination; new tokens for the frame
            and status colours. Nothing existing changed.
     1.3.0  .ppd-squares--many for apps with a long top bar (PPd), .ppd-side-btn__tag,
            tiles with their own button (.ppd-tile__link, .ppd-tile__btn, .is-off,
            .is-disabled, .ppd-tile__about), .ppd-tile--code for tiles that must match,
            .ppd-tiles--4 (four tiles to a row), .ppd-tile__glyph and .ppd-tile__name (icon and code in a code tile),
            .ppd-topbar (the top bar on its own, for pages not in the frame yet),
            .ppd-square__count, .ppd-square--alert, .ppd-square--dev, .ppd-square.is-disabled,
            .ppd-square__two-line, .ppd-sidecol and .ppd-sidebar (side menu on its own),
            .ppd-side-gap, .ppd-side-note, .ppd-side-raw.
            Nothing existing changed.
     1.3.1  compact desktop side menu (.ppd-side-btn 38px / 13px, quiet 34px / 12px, 4px gaps)
     1.3.2  logo the same size as the area squares; .ppd-squares-more scroll bars on the top bar
     1.3.3  compact .ppd-sidebar buttons (12px / 32px, bottom block 11px / 30px)
     1.3.4  left column 240px -> 200px (frame, top bar, side column, sidebar); tighter logo corner
     1.3.5  .ppd-side-btn__add: green + box on "Add ..." side menu items
     1.3.6  .btn.ppd-btn keeps the Bootstrap button size (system pages)
     1.4.0  .ppd-stats / .ppd-stat stat tiles, .ppd-page, .ppd-find--wide with a select, .ppd-btn--go
     1.4.12 .ppd-hh: handheld module pages (sys_mobile Modules/<company>) in the standard look, touch sizes
     1.4.11 .ppd-filterchips: count chips in filter columns (Picking list) white with a blue edge
     1.4.10 pop-up boxes (Bootstrap .modal) on standard-look pages: square, flat header, PPd font
     1.4.9  .ppd-plan--row: the status button in a list row (POs Viewer, pg 2012), colour strip on the left
     1.4.8  .ppd-plan: PO planner (Goods in pg 2011) - white PO cards and key with a status-colour strip
     1.4.7  Select2 dropdowns square with the field edge on standard-look pages (.ppd-edit / .ppd-look)
     1.4.6  bigger icons on the welcome page (.ppd-welcome-sq svg 40-52px, .ppd-tile__glyph svg up to 72px)
     1.4.5  .ppd-square__badge (new tickets on Support), .ppd-welcome-squares
     1.4.4  Pre-Sales board (.sq-board) in the standard look
     1.4.3  .ppd-side-split / .ppd-side-new: side item with a separate green + square
     1.4.2  .ppd-edit / .ppd-look: standard sheet look (outer panel, or whole area via ppd.php), visual only
     1.4.1  sticky .ppd-topbar and left .ppd-sidebar; area menu (.ppd-sidebar__menu) scrolls, bottom items stay fixed
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

/* 1. Brand tokens — from PICKPACKDIRECT_BRANDGUIDELINES_V05 ----------------- */
:root {
  /* Core */
  --ppd-blue:   #51C3EF;  /* RGB 81 195 239  — primary */
  --ppd-navy:   #0F2630;  /* RGB 15 38 48    — text / dark */
  --ppd-light:  #E0EBF7;  /* RGB 224 235 247 — light panels */
  --ppd-grey:   #545457;  /* RGB 84 84 87    — secondary text */
  --ppd-white:  #FAFAFA;  /* RGB 250 250 250 — page */

  /* Sub-brands */
  --ppd-orange: #FC9142;  /* RGB 252 145 66 */
  --ppd-pink:   #F25E8A;  /* RGB 242 94 138 */
  --ppd-green:  #5ED491;  /* RGB 94 212 145 */
  --ppd-purple: #9999FF;  /* RGB 153 153 255 */

  /* Roles */
  --ppd-bg:        var(--ppd-white);
  --ppd-surface:   #FFFFFF;
  --ppd-text:      var(--ppd-navy);
  --ppd-text-soft: var(--ppd-grey);
  --ppd-line:      #D3DCE6;
  --ppd-focus:     var(--ppd-navy);

  /* Type: Basis Grotesque Pro is licensed; Manrope is the fallback until the
     font files are added. */
  --ppd-font-display: "Basis Grotesque Pro", "Manrope", system-ui, sans-serif;
  --ppd-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape: PPd is square-edged. */
  --ppd-radius: 0;

  /* Tiles */
  --ppd-gap: 6px;
  --ppd-cols: 4;
}

@media (min-width: 640px)  { :root { --ppd-cols: 8; } }
@media (min-width: 1024px) { :root { --ppd-cols: 12; } }

/* 2. Base ------------------------------------------------------------------ */
.ppd {
  font-family: var(--ppd-font-body);
  color: var(--ppd-text);
  background: var(--ppd-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ppd h1, .ppd h2, .ppd h3, .ppd .ppd-display {
  font-family: var(--ppd-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ppd-navy);
}
.ppd :focus-visible {
  outline: 3px solid var(--ppd-focus);
  outline-offset: 2px;
}

/* 3. Buttons --------------------------------------------------------------- */
.ppd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--ppd-navy);
  border-radius: var(--ppd-radius);
  background: var(--ppd-navy);
  color: #fff;
  font: 700 15px/1 var(--ppd-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.ppd-btn:hover  { background: #1d3d4b; border-color: #1d3d4b; }
.ppd-btn:active { transform: scale(.97); }
.ppd-btn--blue  { background: var(--ppd-blue); border-color: var(--ppd-blue); color: var(--ppd-navy); }
.ppd-btn--blue:hover { background: #3fb3e2; border-color: #3fb3e2; }
.ppd-btn--ghost { background: transparent; color: var(--ppd-navy); }
.ppd-btn--ghost:hover { background: var(--ppd-navy); color: #fff; }

/* 4. Tiles ----------------------------------------------------------------- */
/* A grid of square cells. Tiles span cells:
     --s small  1x1   --m medium 2x2   --w wide 4x2   --l large 4x4
   Text sits bottom-left like a Windows live tile. */
.ppd-tiles {
  container-type: inline-size;
}
.ppd-tiles__grid {
  --ppd-cell: calc((100cqw - (var(--ppd-cols) - 1) * var(--ppd-gap)) / var(--ppd-cols));
  display: grid;
  grid-template-columns: repeat(var(--ppd-cols), 1fr);
  grid-auto-rows: var(--ppd-cell);
  grid-auto-flow: dense;
  gap: var(--ppd-gap);
}

.ppd-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 14px 16px;
  overflow: hidden;
  border-radius: var(--ppd-radius);
  background: var(--ppd-blue);
  color: var(--ppd-navy);
  text-decoration: none;
  transform-origin: center;
  transition: transform .12s ease-out, box-shadow .12s ease-out, opacity .2s;
}
a.ppd-tile:hover, button.ppd-tile:hover {
  box-shadow: inset 0 0 0 3px rgba(15, 38, 48, .55);
}
/* The Windows "press" tilt */
a.ppd-tile:active, button.ppd-tile:active {
  transform: perspective(600px) rotateX(4deg) scale(.97);
}

.ppd-tile--s { grid-column: span 1; grid-row: span 1; padding: 8px; }
.ppd-tile--m { grid-column: span 2; grid-row: span 2; }
.ppd-tile--w { grid-column: span 4; grid-row: span 2; }
.ppd-tile--l { grid-column: span 4; grid-row: span 4; }
@media (max-width: 639px) {
  .ppd-tile--l { grid-row: span 3; }
}

/* Colours. Navy text on the bright brand colours keeps it readable. */
.ppd-tile--blue   { background: var(--ppd-blue);   color: var(--ppd-navy); }
.ppd-tile--navy   { background: var(--ppd-navy);   color: #fff; }
.ppd-tile--light  { background: var(--ppd-light);  color: var(--ppd-navy); }
.ppd-tile--grey   { background: var(--ppd-grey);   color: #fff; }
.ppd-tile--orange { background: var(--ppd-orange); color: var(--ppd-navy); }
.ppd-tile--pink   { background: var(--ppd-pink);   color: var(--ppd-navy); }
.ppd-tile--green  { background: var(--ppd-green);  color: var(--ppd-navy); }
.ppd-tile--purple { background: var(--ppd-purple); color: var(--ppd-navy); }
.ppd-tile--image  { background: var(--ppd-navy) center / cover no-repeat; color: #fff; }
.ppd-tile--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 38, 48, .85), rgba(15, 38, 48, 0) 60%);
}
.ppd-tile--image > * { position: relative; z-index: 1; }

.ppd-tile__icon {
  width: 34%;
  max-width: 64px;
  min-width: 22px;
  aspect-ratio: 1;
  align-self: center;
  margin: auto 0;
}
.ppd-tile--w .ppd-tile__icon, .ppd-tile--l .ppd-tile__icon { width: 22%; }
.ppd-tile__icon svg { width: 100%; height: 100%; display: block; }

.ppd-tile__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}
.ppd-tile__title {
  margin: 0;
  font-family: var(--ppd-font-display);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.2;
}
/* Tile text takes the tile's colour, not the page heading colour. */
.ppd .ppd-tile__title, .ppd .ppd-tile__stat { color: inherit; }
.ppd-tile--l .ppd-tile__title { font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; }
.ppd-tile--s .ppd-tile__title { font-size: clamp(11px, .95vw, 13px); line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.ppd-tile--s .ppd-tile__icon { width: 30%; }
.ppd-tile__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
}
.ppd-tile--m .ppd-tile__text { display: none; }
@media (min-width: 1280px) { .ppd-tile--m .ppd-tile__text { display: block; font-size: 13px; } }
.ppd-tile__stat {
  font-family: var(--ppd-font-display);
  font-size: clamp(32px, 4.2vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* A tile with its own small button (e.g. Show/Hide). The tile is a <div>; its
   main link stretches over the whole tile and the button sits on top, top-right.
   <div class="ppd-tile …"><a class="ppd-tile__link" href="…">…</a><a class="ppd-tile__btn" href="…">Hide</a></div> */
.ppd-tile__link { color: inherit; }
.ppd-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ppd-tile__link:hover { color: inherit; }
.ppd-tile:has(.ppd-tile__link:hover) { box-shadow: inset 0 0 0 3px rgba(15, 38, 48, .55); }
.ppd-tile:has(.ppd-tile__link:active) { transform: perspective(600px) rotateX(4deg) scale(.97); }
.ppd-tile__btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .85);
  color: var(--ppd-navy);
  font: 800 11px/1 var(--ppd-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ppd-tile__btn:hover { background: var(--ppd-navy); color: #fff; }
/* A short line under the title that shows at every size (unlike .ppd-tile__text) */
.ppd-tile__about { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; }

/* Four medium tiles to a row (two on phones), e.g. 16 tiles as 4 rows of 4 */
.ppd-tiles--4 { --ppd-cols: 4; }
@media (min-width: 640px) { .ppd-tiles--4 { --ppd-cols: 8; } }

/* Code tile: every tile laid out the same — a top row (label, button), a short
   code (e.g. "CRM") in the middle, and a line of at most two rows at the foot.
   Sizes follow the tile (--ppd-cell), so all tiles in a grid match. */
.ppd-tile--code {
  display: grid;
  grid-template-rows: 22px auto minmax(0, 1fr);
  gap: 4px;
  padding: 10px 12px 12px;
}
.ppd-tile--code .ppd-tile__kicker { align-self: start; line-height: 22px; white-space: nowrap; }
.ppd-tile__code {
  align-self: center;
  font: 800 clamp(22px, calc(var(--ppd-cell, 64px) * .55), 48px)/1 var(--ppd-font-display);
  letter-spacing: -0.02em;
}
.ppd .ppd-tile__code { color: inherit; }
/* …or an icon near the top, sized to the tile, with the short code under it */
.ppd-tile__glyph { align-self: start; justify-self: start; display: block; margin-top: 2px; color: inherit; line-height: 0; }
.ppd-tile__glyph svg { width: clamp(32px, calc(var(--ppd-cell, 64px) * .68), 72px); height: auto; aspect-ratio: 1; }
.ppd-tile__glyph:hover { color: inherit; }
.ppd-tile__name {
  font: 800 clamp(16px, calc(var(--ppd-cell, 64px) * .26), 24px)/1.1 var(--ppd-font-display);
  letter-spacing: .02em;
}
.ppd-tile--code .ppd-tile__about {
  display: -webkit-box;
  align-self: end;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: clamp(13px, calc(var(--ppd-cell, 64px) * .2), 17px);
  font-weight: 700;
  line-height: 1.25;
}
/* Not available: no link, no button */
.ppd-tile.is-disabled { background: var(--ppd-light); color: var(--ppd-grey); opacity: .6; }

/* Switched off: grey, but still opens and can be switched back on */
.ppd-tile.is-off { background: var(--ppd-light); color: var(--ppd-grey); }
.ppd-tile.is-off .ppd-tile__icon, .ppd-tile.is-off .ppd-tile__title { opacity: .55; }
.ppd-tile.is-off .ppd-tile__btn { background: var(--ppd-navy); color: #fff; }
.ppd-tile.is-off .ppd-tile__btn:hover { background: var(--ppd-blue); color: var(--ppd-navy); }

/* Live tiles: faces stacked vertically; .is-live slides to the next one.
   Each face fills the tile. */
.ppd-tile--live { padding: 0; }
.ppd-tile__faces {
  position: absolute;
  inset: 0;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.ppd-tile__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
}
@media (prefers-reduced-motion: reduce) {
  .ppd-tile, .ppd-tile__faces { transition: none; }
}

/* Search highlighting: matches stay, the rest fade back. */
.ppd-tiles.is-searching .ppd-tile:not(.is-match) { opacity: .18; }
.ppd-tiles.is-searching .ppd-tile.is-match { box-shadow: inset 0 0 0 3px var(--ppd-navy); }

/* 5. Search box ------------------------------------------------------------- */
.ppd-search {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 3px solid var(--ppd-navy);
  border-radius: var(--ppd-radius);
}
.ppd-search__input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--ppd-navy);
  font: 600 clamp(16px, 2vw, 22px)/1.2 var(--ppd-font-body);
}
.ppd-search__input:focus { outline: none; }
.ppd-search:focus-within { box-shadow: 0 0 0 4px var(--ppd-blue); }
.ppd-search__btn {
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: var(--ppd-navy);
  color: #fff;
  font: 700 16px var(--ppd-font-body);
  cursor: pointer;
}
.ppd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* system list pages use td.ppd-chips for the access dots - keep those as normal table cells */
td.ppd-chips { display: table-cell; margin-top: 0; }
/* 261008 // the system list pages also use .ppd-chip (flag squares) and .ppd-key (the key under a
   list) - names the website uses for a pill button and the PIN keypad. Undo those inside .ppd-sys. */
.ppd-sys .ppd-chip { padding: 0; border: 0; border-radius: 0; font: 700 9px/20px var(--ppd-font-body); vertical-align: middle; }
.ppd-sys .ppd-key { height: auto; justify-content: center; background: transparent; color: var(--ppd-navy); font: 600 12px var(--ppd-font-body); cursor: default; transition: none; }
.ppd-sys .ppd-key:hover { background: transparent; color: var(--ppd-navy); }
.ppd-sys .ppd-key:active { transform: none; }
.ppd-chip {
  padding: 6px 12px;
  border: 1px solid var(--ppd-navy);
  border-radius: var(--ppd-radius);
  background: transparent;
  color: var(--ppd-navy);
  font: 600 13px var(--ppd-font-body);
  cursor: pointer;
}
.ppd-chip:hover { background: var(--ppd-navy); color: #fff; }

/* 6. Notice bar ------------------------------------------------------------- */
.ppd-notice {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: var(--ppd-navy);
  color: #fff;
  font-size: 14px;
}
.ppd-notice__tag {
  flex: none;
  padding: 2px 8px;
  background: var(--ppd-blue);
  color: var(--ppd-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ppd-notice--orange .ppd-notice__tag { background: var(--ppd-orange); }
.ppd-notice--pink   .ppd-notice__tag { background: var(--ppd-pink); }
.ppd-notice a { color: var(--ppd-blue); font-weight: 700; }

/* 7. Utilities -------------------------------------------------------------- */
.ppd-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
@media (min-width: 640px) { .ppd-wrap { padding: 0 24px; } }
.ppd-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;
}

/* 8. Area pages ---------------------------------------------------------------
   The same three levels in every PPd product:
     1. a tile menu  →  2. an area page (rail + coloured band + sub-tiles)  →  3. a working screen
   An area keeps its colour at every level so people always know where they are.

   <div class="ppd-area">
     <nav class="ppd-rail">  <a class="ppd-rail__item ppd-c--orange is-active">…</a>  </nav>
     <div class="ppd-area__main">
       <header class="ppd-band ppd-c--orange">…</header>
       <div class="ppd-tiles"><div class="ppd-tiles__grid">…</div></div>
     </div>
   </div>
*/

/* Colour pairs (background + readable text) for any element. */
.ppd-c--blue   { background: var(--ppd-blue);   color: var(--ppd-navy); }
.ppd-c--navy   { background: var(--ppd-navy);   color: #fff; }
.ppd-c--light  { background: var(--ppd-light);  color: var(--ppd-navy); }
.ppd-c--grey   { background: var(--ppd-grey);   color: #fff; }
.ppd-c--orange { background: var(--ppd-orange); color: var(--ppd-navy); }
.ppd-c--pink   { background: var(--ppd-pink);   color: var(--ppd-navy); }
.ppd-c--green  { background: var(--ppd-green);  color: var(--ppd-navy); }
.ppd-c--purple { background: var(--ppd-purple); color: var(--ppd-navy); }

.ppd-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ppd-gap);
}
@media (min-width: 900px) {
  .ppd-area { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
}
.ppd-area__main { min-width: 0; display: grid; gap: 28px; }

/* Rail: the main tiles, shrunk to a strip. Left column on desktop,
   a scrolling row on phones. */
.ppd-rail {
  display: flex;
  gap: var(--ppd-gap);
  overflow-x: auto;
  scrollbar-width: none;
}
@media (min-width: 900px) {
  .ppd-rail { flex-direction: column; overflow: visible; position: sticky; top: 88px; }
}
.ppd-rail__item {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 72px;
  height: 72px;
  padding: 8px;
  box-sizing: border-box;
  text-decoration: none;
  font: 700 11px/1.1 var(--ppd-font-body);
  transition: transform .12s ease-out, box-shadow .12s;
}
@media (min-width: 900px) { .ppd-rail__item { width: 88px; height: 88px; font-size: 12px; } }
.ppd-rail__item svg { width: 26px; height: 26px; }
.ppd-rail__item:hover { box-shadow: inset 0 0 0 3px rgba(15, 38, 48, .55); }
.ppd-rail__item:active { transform: perspective(400px) rotateX(5deg) scale(.95); }
.ppd-rail__item.is-active { box-shadow: inset 0 0 0 4px var(--ppd-navy); }
.ppd-rail__item.ppd-c--navy.is-active { box-shadow: inset 0 0 0 4px var(--ppd-blue); }
@media (min-width: 900px) {
  /* A notch pointing at the page you are on */
  .ppd-rail__item.is-active::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    border: 6px solid transparent;
    border-left-color: var(--ppd-navy);
    transform: translateY(-50%);
  }
}

/* Band: the coloured header of an area page. */
.ppd-band {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
}
@media (min-width: 900px) {
  .ppd-band { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.ppd-band__kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
.ppd .ppd-band__title {
  margin: 6px 0 8px;
  color: inherit;
  font-size: clamp(34px, 5vw, 64px);
}
.ppd-band__text { margin: 0; max-width: 640px; font-size: clamp(15px, 1.4vw, 18px); }
.ppd-band__icon { width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); }
.ppd-band__icon svg { width: 100%; height: 100%; }
.ppd-band .ppd-btn { background: var(--ppd-navy); border-color: var(--ppd-navy); color: #fff; }
.ppd-band.ppd-c--navy .ppd-btn { background: var(--ppd-blue); border-color: var(--ppd-blue); color: var(--ppd-navy); }

.ppd-section-label {
  margin: 0 0 12px;
  font: 700 16px/1.2 var(--ppd-font-body);
  color: var(--ppd-navy);
}

/* 9. Bootstrap 5 in PPd colours -----------------------------------------------
   Load Bootstrap 5 first, then this file, and put class="ppd" on <body>.
   Bootstrap keeps doing layout and forms; these lines make it look PPd:
   square edges, PPd fonts, navy as the primary colour. */
.ppd {
  --bs-body-font-family: var(--ppd-font-body);
  --bs-body-color: var(--ppd-navy);
  --bs-body-bg: var(--ppd-bg);
  --bs-primary: #0F2630;
  --bs-primary-rgb: 15, 38, 48;
  --bs-link-color: #0F2630;
  --bs-link-color-rgb: 15, 38, 48;
  --bs-link-hover-color: #1d3d4b;
  --bs-link-hover-color-rgb: 29, 61, 75;
  --bs-border-color: var(--ppd-line);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-focus-ring-color: rgba(81, 195, 239, .5);
}
.ppd .btn-primary {
  --bs-btn-bg: var(--ppd-navy);
  --bs-btn-border-color: var(--ppd-navy);
  --bs-btn-hover-bg: #1d3d4b;
  --bs-btn-hover-border-color: #1d3d4b;
  --bs-btn-active-bg: #1d3d4b;
  --bs-btn-active-border-color: #1d3d4b;
  --bs-btn-disabled-bg: var(--ppd-navy);
  --bs-btn-disabled-border-color: var(--ppd-navy);
  font-weight: 700;
}
.ppd .btn-info {
  --bs-btn-bg: var(--ppd-blue);
  --bs-btn-border-color: var(--ppd-blue);
  --bs-btn-color: var(--ppd-navy);
  --bs-btn-hover-bg: #3fb3e2;
  --bs-btn-hover-border-color: #3fb3e2;
  --bs-btn-hover-color: var(--ppd-navy);
  font-weight: 700;
}
.ppd .form-control:focus, .ppd .form-select:focus {
  border-color: var(--ppd-blue);
  box-shadow: 0 0 0 .2rem rgba(81, 195, 239, .35);
}
.ppd .form-label { font-weight: 700; font-size: 14px; }
.ppd .form-control, .ppd .form-select { background-color: #fff; }
.ppd .form-check-input:checked { background-color: var(--ppd-navy); border-color: var(--ppd-navy); }
.ppd .form-check-input:focus { border-color: var(--ppd-blue); box-shadow: 0 0 0 .2rem rgba(81, 195, 239, .35); }

/* 10. Cards, messages, colour choice, PIN boxes, keypad ----------------------- */
.ppd-card {
  background: var(--ppd-surface);
  border: 1px solid var(--ppd-line);
  border-top: 4px solid var(--ppd-blue);
  padding: clamp(20px, 3vw, 32px);
}
.ppd-card__title {
  margin: 0 0 4px;
  font: 800 clamp(22px, 2.4vw, 28px)/1.15 var(--ppd-font-display);
  letter-spacing: -0.02em;
  color: var(--ppd-navy);
}
.ppd-card__sub { margin: 0 0 20px; color: var(--ppd-text-soft); }
.ppd-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--ppd-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ppd-divider::before, .ppd-divider::after { content: ""; flex: 1; height: 1px; background: var(--ppd-line); }

/* Messages: a coloured bar on the left, square, no rounded boxes. */
.ppd-msg {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 6px solid var(--ppd-blue);
  background: var(--ppd-light);
  color: var(--ppd-navy);
  font-size: 14px;
  font-weight: 600;
}
.ppd-msg--error   { border-left-color: var(--ppd-pink);  background: #FDE7EE; }
.ppd-msg--success { border-left-color: var(--ppd-green); background: #E3F8EC; }
.ppd-msg--warning { border-left-color: var(--ppd-orange); background: #FFEFE2; }
/* 261008 // licence nearly out (2 days or less): red */
.ppd-msg--danger  { border-left-color: #E03131; background: #FDE2E2; color: #8A1C1C; font-weight: 700; }

/* Colour choice: radio buttons shown as colour tiles.
   <div class="ppd-swatches"><label class="ppd-swatch"><input type="radio" …>
     <span class="ppd-swatch__chip" style="background:#0000ff"></span><span>Blue</span></label></div> */
.ppd-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--ppd-gap);
}
.ppd-swatch { position: relative; display: block; cursor: pointer; margin: 0; }
.ppd-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ppd-swatch__chip {
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(15, 38, 48, .15);
  transition: transform .1s, box-shadow .1s;
}
.ppd-swatch__name { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; text-align: center; }
.ppd-swatch:hover .ppd-swatch__chip { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6); }
.ppd-swatch:active .ppd-swatch__chip { transform: scale(.95); }
.ppd-swatch input:checked + .ppd-swatch__chip { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ppd-navy); }
.ppd-swatch input:focus-visible + .ppd-swatch__chip { outline: 3px solid var(--ppd-blue); outline-offset: 4px; }

/* PIN boxes */
.ppd-pin { display: flex; justify-content: center; gap: 8px; margin: 8px 0 20px; }
.ppd-pin input {
  width: 44px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--ppd-line);
  border-radius: 0;
  background: #fff;
  color: var(--ppd-navy);
  text-align: center;
  font: 800 24px var(--ppd-font-body);
}
.ppd-pin input.is-filled { border-color: var(--ppd-navy); }

/* Keypad: big square tiles, easy for fingers and gloves. */
.ppd-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ppd-gap);
  max-width: 320px;
  margin: 0 auto;
}
.ppd-key {
  height: 64px;
  border: 0;
  border-radius: 0;
  background: var(--ppd-light);
  color: var(--ppd-navy);
  font: 800 24px var(--ppd-font-body);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .1s, background .1s;
}
.ppd-key:hover { background: #cfdff0; color: var(--ppd-navy); }
.ppd-key:active { transform: perspective(300px) rotateX(6deg) scale(.95); }
.ppd-key--action { background: var(--ppd-grey); color: #fff; font-size: 14px; font-weight: 700; }
.ppd-key--action:hover { background: #3f3f42; color: #fff; }
.ppd-key--go { background: var(--ppd-blue); color: var(--ppd-navy); font-size: 16px; }
.ppd-key--go:hover { background: #3fb3e2; }
.ppd-key:disabled { opacity: .35; cursor: default; transform: none; }

/* 11. Frame ------------------------------------------------------------------
   The layout every PPd app shares (first used by PPd Channels):

     ┌───────────┬──────────────────────────────────────────────┐
     │ logo      │ top bar: square buttons, one per area  [here] │  dark
     ├───────────┼──────────────────────────────────────────────┤
     │ side menu │                                              │
     │ (rect.    │  page                                        │
     │  buttons) │                                              │
     └───────────┴──────────────────────────────────────────────┘
       lighter

   The squares never change as you move around; the side menu belongs to the
   area you're in. Below 992px (Bootstrap's lg) the pieces stack: a phone bar
   with a Menu square that opens the squares as a grid, then the side menu as a
   two-column grid. Nothing scrolls sideways.

   <div class="ppd-frame">
     <a class="ppd-frame__corner">…logo…</a>
     <header class="ppd-frame__top">
       <nav class="ppd-squares"><a class="ppd-square is-active">…</a></nav>
       <nav class="ppd-here">…where you are…</nav>
     </header>
     <header class="ppd-frame__phone-top">…</header>
     <aside class="ppd-frame__side"><div class="ppd-side-title">…</div><nav class="ppd-side-list">…</nav></aside>
     <div class="ppd-frame__phone-side">…<nav class="ppd-side-grid">…</nav></div>
     <main class="ppd-frame__main">…</main>
   </div>
*/
:root {
  --ppd-frame-top:     #0A1C24;  /* top bar and logo corner */
  --ppd-frame-top-btn: #16303B;  /* a square in the top bar */
  --ppd-frame-side:    #1B3743;  /* side menu, a step lighter */
  --ppd-frame-side-btn:#24434F;  /* a button in the side menu */
  --ppd-frame-line:    #36586A;
  --ppd-frame-muted:   #8FA6B2;  /* small text on the frame */

  /* Status colours, dark enough to read on white */
  --ppd-ok:   #1F8A50;
  --ppd-warn: #B4501A;
  --ppd-bad:  #C2185B;
}

.ppd-frame {
  min-height: 100vh;
  font-family: var(--ppd-font-body);
  color: var(--ppd-text);
  background: var(--ppd-bg);
}
.ppd-frame *, .ppd-frame *::before, .ppd-frame *::after { box-sizing: border-box; }
.ppd-frame a { text-decoration: none; }

/* Desktop pieces are hidden on phones, phone pieces on desktop. */
.ppd-frame__corner, .ppd-frame__top, .ppd-frame__side { display: none; }
.ppd-frame__main { min-width: 0; padding: 16px; }
@media (min-width: 576px) { .ppd-frame__main { padding: 24px; } }

@media (min-width: 992px) {
  .ppd-frame {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: 120px minmax(0, 1fr);
  }
  .ppd-frame__corner, .ppd-frame__top { display: flex; }
  .ppd-frame__side { display: flex; }
  .ppd-frame__phone-top, .ppd-frame__phone-side { display: none; }
  .ppd-frame__main { padding: 32px; }
}

/* Logo corner */
.ppd-frame__corner {
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  background: var(--ppd-frame-top);
  color: #fff;
}
.ppd-frame__corner:hover { color: #fff; }
.ppd-frame__logo { width: 72px; height: 72px; flex: none; }
.ppd-frame__name { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.ppd-frame__name strong { font-size: 20px; font-weight: 800; }
.ppd-frame__name small { font-size: 11px; font-weight: 600; color: var(--ppd-frame-muted); }

/* Top bar */
.ppd-frame__top {
  align-items: center;
  gap: 6px;
  padding-right: 24px;
  background: var(--ppd-frame-top);
}
.ppd-frame__spacer { flex: 1; min-width: 16px; }

/* Squares: icon top-left, label bottom-left, one style for every square.
   Sized so the longest label ("Connections") fits with room to spare. */
.ppd-squares { display: flex; gap: 6px; overflow: hidden; }
.ppd-square {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 88px;
  height: 88px;
  padding: 8px;
  background: var(--ppd-frame-top-btn);
  color: #fff;
  font: 700 11px/1 var(--ppd-font-body);
  white-space: nowrap;
  text-align: left;
  transition: background .12s;
}
.ppd-square:hover { background: var(--ppd-frame-side-btn); color: #fff; }
.ppd-square.is-active, .ppd-square.is-active:hover { background: var(--ppd-blue); color: var(--ppd-navy); }
.ppd-square svg { width: 26px; height: 26px; }
@media (min-width: 1200px) {
  .ppd-square { width: 96px; height: 96px; padding: 10px; font-size: 12px; }
}

/* Where you are: "Pick Pack Direct › Sam's 3PL" small, current level large.
   Each level above is a link back up. Wide screens only; phones use --compact. */
.ppd-here {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  min-width: 180px;
  max-width: 300px;
  height: 96px;
  padding: 12px 16px;
  background: var(--ppd-purple);
  color: var(--ppd-navy);
}
@media (min-width: 1200px) { .ppd-here { display: flex; } }
.ppd-here__above {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ppd-here a { color: var(--ppd-navy); }
.ppd-here a:hover { text-decoration: underline; }
.ppd-here__current {
  overflow: hidden;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ppd-here--compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  max-width: none;
  height: auto;
  min-height: 44px;
  padding: 0 12px;
}
.ppd-here--compact .ppd-here__above a {
  max-width: 30vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ppd-here--compact .ppd-here__current { flex: 1; font-size: 15px; }

/* Side menu */
.ppd-frame__side {
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--ppd-frame-side);
}
.ppd-side-title {
  padding: 4px 4px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ppd-frame-muted);
}
.ppd-side-list { display: flex; flex-direction: column; gap: 4px; }
.ppd-side-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

/* A rectangular side button. Stacks down the side on desktop; sits in the
   two-column grid on phones (--primary takes a full row there). */
.ppd-side-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  background: var(--ppd-frame-side-btn);
  color: #fff;
  font: 700 14px/1.2 var(--ppd-font-body);
  border: 0;
  text-align: left;
  cursor: pointer;
}
.ppd-side-btn:hover { background: var(--ppd-frame-line); color: #fff; }
.ppd-side-btn.is-active, .ppd-side-btn.is-active:hover { background: #fff; color: var(--ppd-navy); font-weight: 800; }
.ppd-side-btn--primary, .ppd-side-btn--primary:hover { background: var(--ppd-blue); color: var(--ppd-navy); font-weight: 800; }
.ppd-side-btn--primary:hover { background: #3fb3e2; }
.ppd-side-btn--quiet { background: transparent; border: 1px solid var(--ppd-frame-line); color: #C6D3DC; font-weight: 600; }
.ppd-side-btn--quiet:hover { background: var(--ppd-frame-side-btn); color: #fff; }
.ppd-side-btn svg { flex: none; width: 18px; height: 18px; }
.ppd-side-btn__label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ppd-side-btn__count { font-size: 18px; font-weight: 800; }
.ppd-side-btn__count--green  { color: var(--ppd-green); }
.ppd-side-btn__count--orange { color: var(--ppd-orange); }
.ppd-side-btn.is-active .ppd-side-btn__count { color: inherit; }
/* A small marker on a side button, e.g. "Dev" */
.ppd-side-btn__tag { flex: none; padding: 2px 6px; background: var(--ppd-green); color: var(--ppd-navy); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ppd-side-grid .ppd-side-btn--primary { grid-column: 1 / -1; }
.ppd-side-list .ppd-side-btn--primary { margin-top: 8px; }
@media (min-width: 992px) {
  /* desktop: compact so the menu doesn't overpower the page */
  .ppd-side-btn { gap: 10px; min-height: 38px; padding: 0 12px; font-size: 13px; font-weight: 600; }
  .ppd-side-btn.is-active, .ppd-side-btn--primary { font-weight: 700; }
  .ppd-side-btn--quiet { min-height: 34px; font-size: 12px; }
  .ppd-side-btn svg { width: 16px; height: 16px; }
  .ppd-side-btn__count { font-size: 15px; }
}

/* The signed-in person, at the foot of the side menu */
.ppd-side-me { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; background: var(--ppd-frame-side-btn); color: #fff; }
.ppd-side-me:hover { background: var(--ppd-frame-line); color: #fff; }
.ppd-side-me__initial { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; background: #fff; color: var(--ppd-navy); font-weight: 800; }
.ppd-side-me__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 700; }

/* Phone bar */
.ppd-frame__phone-top { padding: 12px; background: var(--ppd-frame-top); color: #fff; }
.ppd-frame__phone-row { display: flex; align-items: center; gap: 8px; }
.ppd-frame__phone-row .ppd-frame__logo { width: 52px; height: 52px; }
.ppd-frame__phone-home { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; color: #fff; }
.ppd-frame__phone-home:hover { color: #fff; }
.ppd-frame__phone-home .ppd-frame__name { min-width: 0; }
.ppd-frame__phone-home .ppd-frame__name strong { font-size: 17px; }
.ppd-frame__phone-area { overflow: hidden; font-size: 12px; font-weight: 700; color: var(--ppd-blue); white-space: nowrap; text-overflow: ellipsis; }
.ppd-frame__phone-side { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; background: var(--ppd-frame-side); }
.ppd-frame__phone-side .ppd-side-title { padding: 4px 4px 0; }
@media (min-width: 992px) { .ppd-frame__phone-top, .ppd-frame__phone-side { display: none; } }

/* Small squares on the phone bar: Menu and the account */
.ppd-chip-square {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 52px;
  height: 52px;
  border: 0;
  background: var(--ppd-frame-top-btn);
  color: #fff;
  font: 700 10px/1 var(--ppd-font-body);
  cursor: pointer;
}
.ppd-chip-square.is-open { background: var(--ppd-blue); color: var(--ppd-navy); }
.ppd-chip-square--me { background: #fff; color: var(--ppd-navy); font-size: 20px; font-weight: 800; }

/* The squares as a grid when the phone Menu is open: 4 across, 3 on narrow phones */
.ppd-squares--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
@media (min-width: 380px) { .ppd-squares--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ppd-squares--grid .ppd-square { width: auto; height: auto; aspect-ratio: 1; }
.ppd-squares--grid .ppd-square svg { width: 22px; height: 22px; }

/* Many squares (PPd has up to 14 areas): smaller squares, and the bar scrolls
   sideways rather than cutting squares off. "Where you are" waits for room. */
.ppd-squares--many { overflow-x: auto; scrollbar-width: none; }
.ppd-squares--many::-webkit-scrollbar { display: none; }
.ppd-squares--many .ppd-square { width: 72px; height: 72px; padding: 7px; font-size: 10px; }
.ppd-squares--many .ppd-square svg { width: 22px; height: 22px; }
@media (min-width: 1400px) {
  .ppd-squares--many .ppd-square { width: 80px; height: 80px; font-size: 11px; }
}
.ppd-frame__top:has(.ppd-squares--many) .ppd-here { display: none; }
@media (min-width: 1800px) {
  .ppd-frame__top:has(.ppd-squares--many) .ppd-here { display: flex; }
}
/* Squares that show a number (e.g. unread Support messages) instead of an icon */
.ppd-square__count { font: 800 22px/1 var(--ppd-font-body); }
/* A two-line label (e.g. "PPd<br>Channels") */
.ppd-square__two-line { line-height: 1.15; }
.ppd-square--alert, .ppd-square--alert:hover { background: var(--ppd-orange); color: var(--ppd-navy); }
/* 1.4.5 - red circle on Support: new tickets (admin: all companies) */
.ppd-square { position: relative; }
.ppd-square__badge {
  position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 0; background: #E03131; color: #fff;
  font: 800 11px/1 var(--ppd-font-body); box-shadow: 0 0 0 2px var(--ppd-frame-top, #16202A);
}
/* the welcome page shows the same right-hand squares as the top bar */
.ppd-welcome-squares { display: flex; gap: 8px; }
/* 4 x 4 squares sized so all four rows fit on the screen (height minus the header area),
   never wider than a quarter of the column */
.ppd-welcome-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ppd-welcome-areas .ppd-welcome-sq { aspect-ratio: 1 / 1; }
@media (min-width: 1200px) {
  /* the squares column is exactly four squares wide, sized so all four rows fit the screen
     (height less the header); the notice board column takes the rest of the width */
  .ppd-welcome-row { flex-wrap: nowrap; }
  .ppd-welcome-row > .col-xl-8 { flex: 0 0 auto; width: min(calc(100vh - 300px), 66%); }
  .ppd-welcome-row > .col-xl-4 { flex: 1 1 0; width: auto; min-width: 300px; }
}
@media (max-width: 767px) { .ppd-welcome-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the welcome squares fill the column: square, about twice the top-menu size, same look */
.ppd-welcome-areas .ppd-welcome-sq { position: relative; width: auto; height: auto; padding: 14px; font-size: 14px; white-space: normal; }
.ppd-welcome-areas .ppd-welcome-sq svg { width: clamp(40px, 26%, 52px); height: auto; aspect-ratio: 1; }
/* right column ends level with the squares; the notice board scrolls inside if longer */
@media (min-width: 1200px) {
  .ppd-welcome-side { contain: size; }
  .ppd-welcome-notices { flex: 1; min-height: 0; overflow-y: auto; }
}
.ppd-welcome-sq__name { display: block; line-height: 1.2; }
.ppd-welcome-areas .ppd-welcome-sq__btn { top: 10px; right: 10px; padding: 2px 7px; font-size: 10px; }
.ppd-welcome-sq__link { position: absolute; inset: 0; z-index: 1; }
.ppd-welcome-sq__btn { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 1px 5px; background: rgba(255, 255, 255, .12); color: #fff; font: 700 9px/1.4 var(--ppd-font-body); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.ppd-welcome-sq__btn:hover, .ppd-welcome-sq__btn:focus { background: #fff; color: var(--ppd-navy); text-decoration: none; }
.ppd-welcome-sq.is-hidden { opacity: .45; }
.ppd-welcome-sq.is-hidden:hover { opacity: .8; }
.ppd-welcome-squares .ppd-square, .ppd-welcome-squares .ppd-square:hover { text-decoration: none; }
.ppd-welcome-squares .ppd-square:not(.ppd-square--alert) { background: var(--ppd-frame-top-btn); color: #fff; }
.ppd-welcome-squares .ppd-square.is-disabled { color: rgba(255, 255, 255, .45); opacity: 1; }
/* the PPd logo sits in the row as a square of exactly the same size */
.ppd-welcome-squares .ppd-square--logo, .ppd-welcome-squares .ppd-square--logo:hover { padding: 0; background: transparent; }
.ppd-welcome-squares .ppd-square--logo img { display: block; width: 100%; height: 100%; }
.ppd-square--dev, .ppd-square--dev:hover { background: var(--ppd-green); color: var(--ppd-navy); }
/* Not active yet (e.g. a placeholder for an app to come) */
.ppd-square.is-disabled, .ppd-square.is-disabled:hover { background: var(--ppd-frame-top-btn); color: #fff; opacity: .35; cursor: default; }

/* The top bar on its own (logo corner + squares), above pages that aren't in
   the frame yet. Safe on old Bootstrap 3 pages: it only uses ppd.css classes. */
.ppd-topbar { font-family: var(--ppd-font-body); line-height: 1.5; background: var(--ppd-frame-top); }
.ppd-topbar *, .ppd-topbar *::before, .ppd-topbar *::after { box-sizing: border-box; }
.ppd-topbar a, .ppd-topbar a:hover, .ppd-topbar a:focus { text-decoration: none; }
.ppd-topbar .ppd-frame__name { font-family: var(--ppd-font-body); }
@media (min-width: 992px) {
  .ppd-topbar { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
  .ppd-topbar .ppd-frame__top { gap: 16px; padding-top: 10px; padding-bottom: 10px; }
}
.ppd-topbar .ppd-frame__phone-top .ppd-squares--grid { margin-bottom: 0; }
/* Area squares shrink and scroll; the Support/settings squares on the right keep their size */
.ppd-topbar .ppd-frame__top > .ppd-squares { min-width: 0; }
.ppd-topbar .ppd-frame__top > .ppd-squares:last-child { flex: none; }

/* 1.3.2 - The logo matches the area squares (72px, 80px on wide screens), and a thin
   blue bar with an arrow shows when the area squares carry on past the edge. */
.ppd-frame__corner .ppd-frame__logo { width: 72px; height: 72px; }
@media (min-width: 1400px) {
  .ppd-frame__corner .ppd-frame__logo { width: 80px; height: 80px; }
}
.ppd-squares-more {
  flex: none; align-self: stretch; width: 18px; margin: 0; padding: 0; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ppd-blue); color: var(--ppd-navy);
  font: 800 20px/1 var(--ppd-font-body); cursor: pointer;
}
.ppd-squares-more:hover { background: #3fb3e2; }
.ppd-squares-more[hidden] { display: none; }

/* 1.3.4 - narrower left column (200px) now the menu text is smaller; the logo
   corner tightens up to fit it, and a long company name shortens with "..." */
.ppd-frame__corner { gap: 10px; padding: 0 12px; }
.ppd-frame__name { min-width: 0; overflow: hidden; }
.ppd-frame__name small, .ppd-frame__name strong { overflow: hidden; text-overflow: ellipsis; }

/* The side menu on its own, in the left column of pages not in the frame yet.
   ppd.php gives its table cell .ppd-sidecol so the dark runs the full height. */
.ppd-sidecol { width: 200px; padding: 0; vertical-align: top; background: var(--ppd-frame-side); }
/* The dark strip runs the full height of the page, even when the page is short */
body:has(.ppd-sidecol) {
  min-height: 100vh;
  background: linear-gradient(to right, var(--ppd-frame-side) 200px, #fff 200px);
}
.ppd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  padding: 12px;
  font-family: var(--ppd-font-body);
  line-height: 1.5;
}
.ppd-sidebar *, .ppd-sidebar *::before, .ppd-sidebar *::after { box-sizing: border-box; }
/* 1.4.1 - top bar and left menu stay put while the page scrolls. The left menu gets
   its own scroll when it is longer than the screen (height set by ppd_side.php). */
.ppd-topbar { position: sticky; top: 0; z-index: 1020; }
.ppd-sidecol .ppd-sidebar { position: sticky; top: var(--ppd-topbar-h, 100px); overflow: hidden; }
.ppd-sidebar__menu { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.ppd-sidebar__foot { flex: none; }
.ppd-sidebar a, .ppd-sidebar a:hover, .ppd-sidebar a:focus { text-decoration: none; }
/* 1.3.3 - compact, so the menu sits below the page text (14px) and doesn't overpower it */
.ppd-sidebar .ppd-side-btn { gap: 8px; font-size: 12px; font-weight: 600; min-height: 32px; padding: 0 10px; }
.ppd-sidebar .ppd-side-btn.is-active, .ppd-sidebar .ppd-side-btn--primary { font-weight: 700; }
.ppd-sidebar .ppd-side-btn svg { width: 15px; height: 15px; }
.ppd-sidebar .ppd-side-btn__count { font-size: 13px; }
.ppd-sidebar .ppd-side-list { gap: 3px; }
.ppd-sidebar .ppd-side-btn--quiet { min-height: 30px; font-size: 11px; }

/* 1.3.5 - "Add ..." side menu items: a green + box in front of the label */
.ppd-side-btn__add {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; background: var(--ppd-green); color: var(--ppd-navy);
  font: 800 14px/1 var(--ppd-font-body);
}
.ppd-sidebar .ppd-side-btn__add { width: 16px; height: 16px; font-size: 13px; }
/* 1.4.3 - split side button: the item, a small gap, then a square with the green + ("new") */
.ppd-side-split { display: flex; gap: 3px; }
.ppd-side-split > .ppd-side-btn { flex: 1; min-width: 0; }
.ppd-side-new { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; background: var(--ppd-frame-side-btn); }
.ppd-side-new:hover, .ppd-side-new:focus { filter: brightness(1.25); }

/* 1.3.6 - PPd's system pages use .ppd-btn on Bootstrap buttons (btn / btn-sm / btn-xs)
   just for the colour: keep Bootstrap's size there, not the big website button */
.btn.ppd-btn { display: inline-block; min-height: 0; gap: 0; padding: 6px 12px; border-width: 1px;
  font-size: 14px; font-weight: 400; line-height: 1.42857143; }
.btn-sm.ppd-btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; }
.btn-xs.ppd-btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; }
.btn-lg.ppd-btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; }

/* 1.4.0 - System page parts, sized like the rest of PPd (Bootstrap sm controls).
   Panel heading row: title left, search + action right.
     <div class="ppd-ph"><div class="ppd-ph__title">Goods In Overview <small>...</small></div>
       <form class="ppd-ph__search">select + input + button</form> <a class="btn btn-sm btn-success">+ New</a></div>
   Stat tiles: small capitals label, number; a coloured strip on top, coloured fill when
   there is something in it.
     <div class="ppd-stats"><a class="ppd-stat ppd-stat--orange" href="...">
       <span class="ppd-stat__label">POs awaiting</span><span class="ppd-stat__num">12</span></a></div> */
/* Main-page sheet (Channels style, system sized): a light-edged, very slightly off-white panel
   with a small grey line, a bold title, one joined search, then the content. */
.ppd-sheet { background: #FAFBFC; border: 1px solid #E3E8ED; padding: 18px 20px 6px; color: var(--ppd-navy); font-family: var(--ppd-font-body); }
.ppd-sheet__head { margin-bottom: 12px; }
.ppd-sheet__kicker { font-family: var(--ppd-font-body); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--ppd-text-soft); }
.ppd-sheet__title { margin-top: 2px; font-family: var(--ppd-font-body); font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--ppd-navy); }
.ppd-qsearches { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 18px; }
.ppd-qsearch { display: flex; align-items: stretch; gap: 6px; flex: 0 1 380px; height: 32px; margin: 0; }
.ppd-qsearch label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; margin: 0; padding: 0 10px; background: #fff; border: 1px solid #C9D3DD; color: var(--ppd-text-soft); font-weight: 400; }
.ppd-qsearch label:focus-within { border-color: var(--ppd-navy); box-shadow: 0 0 0 2px rgba(81, 195, 239, .35); }
.ppd-qsearch input { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--ppd-navy); font-size: 13px; }
.ppd-qsearch input:focus { outline: none; }
.ppd-qsearch input[type="search"] { -webkit-appearance: none; appearance: none; }
.ppd-qsearch button { flex: none; padding: 0 14px; border: 0; background: var(--ppd-navy); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ppd-qsearch button:hover { background: #2A3F55; }
.ppd-qsearch select { margin: 0 4px 0 -10px; align-self: stretch; border: 0; border-right: 1px solid #E3E8ED; padding: 0 6px; background: #F3F6FA; color: var(--ppd-navy); font-size: 12px; font-weight: 700; }
.ppd-qsearches .ppd-qsearch { flex: 1 1 320px; max-width: 480px; }
.ppd-sheet__note { margin: -10px 0 18px; font-size: 11px; color: var(--ppd-text-soft); }
.ppd-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ppd-chart { background: #fff; border: 1px solid var(--ppd-line); padding: 10px 12px; }
.ppd-chart__title { font-size: 12px; font-weight: 700; color: var(--ppd-navy); }
.ppd-charts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .ppd-charts--2 { grid-template-columns: 1fr; } }
.ppd-chart > div[id] { height: 220px; }
.ppd-chart__empty { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 12px; color: var(--ppd-text-soft); }

/* 1.4.2 - The standard page look, visual only (no markup changes):
   - .ppd-edit on a page's outer Bootstrap panel, or
   - .ppd-look on the main column (ppd.php, per area) - then every page's outer panel gets it.
   The outer panel becomes the off-white sheet, header chips go flat, tabs become an underline
   bar, wells/panels inside become white boxes with a light edge. */
:is(.ppd-edit.panel, .ppd-look > .panel, .ppd-look > .ppd-sys > .panel) { background: #FAFBFC; border: 1px solid #E3E8ED; border-radius: 0; box-shadow: none; font-family: var(--ppd-font-body); }
/* one font everywhere: the panel's text, tabs and controls use the PPd font like the overview pages */
:is(.ppd-edit, .ppd-look) :is(input, select, textarea, button, .btn, .nav-tabs > li > a) { font-family: var(--ppd-font-body); }
:is(.ppd-edit, .ppd-look > .panel, .ppd-look > .ppd-sys > .panel) > .panel-heading { padding: 14px 20px 10px; background: transparent; border: 0; border-radius: 0; color: var(--ppd-navy); }
:is(.ppd-edit, .ppd-look > .panel, .ppd-look > .ppd-sys > .panel) > .panel-heading:has(.nav-tabs) { padding-bottom: 0; }
:is(.ppd-edit, .ppd-look > .panel, .ppd-look > .ppd-sys > .panel) > .panel-body { padding: 16px 20px; }
:is(.ppd-edit, .ppd-look) .btn { border-radius: 0; }
:is(.ppd-edit, .ppd-look > .panel, .ppd-look > .ppd-sys > .panel) > .panel-heading .btn-default { background: #fff; border-color: #DDE3EA; color: var(--ppd-navy); }
:is(.ppd-edit, .ppd-look > .panel, .ppd-look > .ppd-sys > .panel) > .panel-heading .btn-default:hover { background: #F3F6FA; }
:is(.ppd-edit, .ppd-look) .nav.nav-tabs { margin-top: 8px; border-bottom: 1px solid #E3E8ED; }
:is(.ppd-edit, .ppd-look) .nav.nav-tabs > li > a { margin-right: 2px; padding: 8px 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--ppd-text-soft); font-weight: 600; }
:is(.ppd-edit, .ppd-look) .nav.nav-tabs > li > a:hover { background: transparent; color: var(--ppd-navy); border-bottom-color: #C9D3DD; }
:is(.ppd-edit, .ppd-look) .nav.nav-tabs > li.active > a, :is(.ppd-edit, .ppd-look) .nav.nav-tabs > li.active > a:hover, :is(.ppd-edit, .ppd-look) .nav.nav-tabs > li.active > a:focus { border: 0; border-bottom: 3px solid var(--ppd-blue); background: transparent; color: var(--ppd-navy); font-weight: 800; }
:is(.ppd-edit, .ppd-look) .nav.nav-tabs .dropdown-menu { border-radius: 0; }
:is(.ppd-edit .panel-body, .ppd-look) .well { background: #fff; border: 1px solid #E3E8ED; border-radius: 0; box-shadow: none; }
:is(.ppd-edit .panel-body, .ppd-look .panel-body) .panel { border-color: #E3E8ED; border-radius: 0; box-shadow: none; }
:is(.ppd-edit .panel-body, .ppd-look .panel-body) .panel > .panel-heading { border-radius: 0; }
:is(.ppd-edit, .ppd-look) .form-control { border-color: #C9D3DD; border-radius: 0; box-shadow: none; }
:is(.ppd-edit, .ppd-look) .form-control:focus { border-color: var(--ppd-navy); box-shadow: 0 0 0 2px rgba(81, 195, 239, .35); }
:is(.ppd-edit, .ppd-look) .input-group-addon { border-radius: 0; }
/* 261009 // pop-up boxes (Bootstrap modals) opened from a standard-look page */
:is(.ppd-edit, .ppd-look) .modal-content { border: 1px solid #E3E8ED; border-radius: 0; box-shadow: 0 8px 24px rgba(15, 38, 48, .18); font-family: var(--ppd-font-body); color: var(--ppd-navy); }
:is(.ppd-edit, .ppd-look) .modal-header { padding: 14px 20px 10px; border-bottom: 1px solid #E3E8ED; }
:is(.ppd-edit, .ppd-look) .modal-title { font-family: var(--ppd-font-body); font-size: 16px; font-weight: 800; color: var(--ppd-navy); }
:is(.ppd-edit, .ppd-look) .modal-body { padding: 16px 20px; font-size: 13px; }
:is(.ppd-edit, .ppd-look) .modal-footer { padding: 10px 20px; border-top: 1px solid #E3E8ED; }
/* 261009 // Select2 dropdowns (searchable selects) match the square fields */
:is(.ppd-edit, .ppd-look) .select2-container--default .select2-selection--single { height: 30px; border-color: #C9D3DD; border-radius: 0; }
:is(.ppd-edit, .ppd-look) .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; font-size: 12px; color: var(--ppd-navy); font-family: var(--ppd-font-body); }
:is(.ppd-edit, .ppd-look) .select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px; }
:is(.ppd-edit, .ppd-look) .select2-container--default.select2-container--focus .select2-selection--single,
:is(.ppd-edit, .ppd-look) .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ppd-navy); }
.ppd-edit .ppd-qsearch { width: 100%; }
.ppd-locsearch { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin: 0 0 10px; }
.ppd-locsearch .ppd-qsearch { flex: 1 1 320px; width: auto; max-width: 520px; }
.ppd-locsearch select { width: auto; height: 32px; }
.ppd-locsearch__go { height: 32px; padding: 0 14px; border: 0; background: var(--ppd-navy); color: #fff; font: 700 12px var(--ppd-font-body); }
.ppd-locsearch__go:hover { background: #2A3F55; }
/* the navy action button (Search / Apply a filter) on Bootstrap pages */
.btn.ppd-btn-navy, .btn.ppd-btn-navy:focus { background: var(--ppd-navy); border-color: var(--ppd-navy); color: #fff; font-weight: 700; border-radius: 0; }
.btn.ppd-btn-navy:hover { background: #2A3F55; border-color: #2A3F55; color: #fff; }
/* 261008 // pop-up windows (e.g. the planner day) in the standard look */
.ppd-popup { padding: 16px 20px; background: #FAFBFC; color: var(--ppd-navy); font-family: var(--ppd-font-body); }
.ppd-popup .ppd-sheet__head { margin-bottom: 14px; }
.ppd-popup .ppd-stats__title { margin: 4px 0 8px; }
.ppd-popup label { font-size: 12px; font-weight: 700; }
.ppd-popup :is(input, select, textarea, button, .btn) { font-family: var(--ppd-font-body); }
.ppd-popup .form-control { border-color: #C9D3DD; border-radius: 0; box-shadow: none; }
.ppd-popup .form-control:focus { border-color: var(--ppd-navy); box-shadow: 0 0 0 2px rgba(81, 195, 239, .35); }
.ppd-popup .btn { border-radius: 0; }
.ppd-popup .table { background: #fff; }
.ppd-popup .table > tbody > tr > th, .ppd-popup .table > thead > tr > th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ppd-navy); background: #F3F6FA; }
.ppd-popup .table-bordered, .ppd-popup .table-bordered td, .ppd-popup .table-bordered th { border-color: #E3E8ED; }
/* 261008 // job card "Add from stock" list */
.ppd-addstock { margin: 0 0 16px; background: #fff; border: 1px solid #E3E8ED; }
.ppd-addstock__bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #F3F6FA; border-bottom: 1px solid #E3E8ED; font-size: 13px; }
.ppd-addstock__hint { font-size: 12px; color: var(--ppd-text-soft); }
.ppd-addstock__tools { display: flex; gap: 6px; margin-left: auto; }
.ppd-addstock__tools form { margin: 0; }
.ppd-addstock__table { margin: 0; }
.ppd-addstock__table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ppd-text-soft); }
.ppd-addstock__table td, .ppd-addstock__table th { vertical-align: middle !important; }
.ppd-addstock__num { width: 90px; text-align: right; }
.ppd-addstock__num input { text-align: right; }
.ppd-addstock__go { width: 1%; white-space: nowrap; }
.ppd-addstock__go form { margin: 0; }
.ppd-podel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 4px 0 16px; padding: 10px 12px; background: #fff; border: 1px solid #E3E8ED; }
/* 261009 // Goods in PO planner (pg 2011): the PO cards and the status key are white with a
   status-colour strip instead of solid Bootstrap colours. Same buttons and links, look only.
   Building = navy, Bookin = blue, History = green, Awaiting = orange, Arrived = red. */
.ppd-plan { --ppd-plan-c: #D9DEE3; }
.ppd-plan .btn-primary { --ppd-plan-c: var(--ppd-navy); }
.ppd-plan .btn-info    { --ppd-plan-c: var(--ppd-blue); }
.ppd-plan .btn-success { --ppd-plan-c: var(--ppd-green); }
.ppd-plan .btn-warning { --ppd-plan-c: var(--ppd-orange); }
.ppd-plan .btn-danger  { --ppd-plan-c: var(--ppd-bad); }
.ppd-plan .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-default) { background: #fff; border: 1px solid #E3E8ED; border-top: 4px solid var(--ppd-plan-c); border-radius: 0; color: var(--ppd-navy); box-shadow: none; }
.ppd-plan .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-default):is(:hover, :focus, :active) { background: #F3F6FA; border-color: #C9D3DD; border-top-color: var(--ppd-plan-c); color: var(--ppd-navy); }
.ppd-plan-key .btn { margin-left: 4px; font-weight: 700; cursor: default; }
.ppd-plan-key .btn:is(:hover, :focus, :active) { background: #fff; }
table.ppd-plan { background: #fff; }
table.ppd-plan, table.ppd-plan > tbody > tr > td { border-color: #E3E8ED; }
table.ppd-plan > tbody > tr > td { padding: 8px 6px; font-size: 12px; font-weight: 700; color: var(--ppd-navy); }
.ppd-plan td .btn { padding: 6px 4px; white-space: normal; }
.ppd-plan td .btn .well { margin: 4px 0 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.ppd-plan td .btn .well p { margin: 0; color: var(--ppd-text-soft); font-weight: 600; }
/* 261009 // a status button in a list row (POs Viewer): white, colour strip on the left */
.ppd-plan--row .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-default) { border-top-width: 1px; border-left: 4px solid var(--ppd-plan-c); font-weight: 700; cursor: default; }
.ppd-plan--row .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-default):is(:hover, :focus, :active) { background: #fff; border-color: #E3E8ED; border-left-color: var(--ppd-plan-c); }
/* 261009 // filter columns with count chips (Picking list): chips white with a blue edge, look only */
.ppd-filterchips .btn.btn-info, .ppd-filterchips .btn.btn-info:is(:hover, :focus, :active) { background: #fff; border: 1px solid #E3E8ED; border-left: 3px solid var(--ppd-blue); border-radius: 0; color: var(--ppd-navy); font-weight: 700; box-shadow: none; }
.ppd-podel__form { display: flex; align-items: center; gap: 8px; margin: 0; }
.ppd-podel__form label { margin: 0; font-size: 12px; font-weight: 700; }
.ppd-podel__form input { width: 110px; }
.ppd-locpager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 12px; color: var(--ppd-text-soft); }
/* old section headings (p.bg-info with an icon): a light strip with a blue edge, like the other boxes */
:is(.ppd-edit, .ppd-look) p.bg-info { display: flex; align-items: center; gap: 6px; height: auto !important; padding: 6px 10px; background: #F3F6FA; border-left: 3px solid var(--ppd-blue); color: var(--ppd-navy); font-weight: 700; }
/* list-page search bars (form.ppd-toolbar): same as the agreed search - white box, light
   edge, then a navy Search button set slightly apart */
.ppd-look .ppd-toolbar { gap: 6px; }
.ppd-look .ppd-toolbar .form-control { height: 32px; font-size: 13px; background: #fff; }
.ppd-look .ppd-toolbar .btn.ppd-btn { height: 32px; padding: 0 14px; background: var(--ppd-navy); border-color: var(--ppd-navy); color: #fff; font-size: 12px; font-weight: 700; }
.ppd-look .ppd-toolbar .btn.ppd-btn:hover, .ppd-look .ppd-toolbar .btn.ppd-btn:focus { background: #2A3F55; border-color: #2A3F55; color: #fff; }
.ppd-look .ppd-toolbar .btn-default { height: 32px; }
/* Button colours (one standard): Search = navy; Edit = white with a navy edge, navy on hover;
   Update / Save = green (Bootstrap btn-success, as Sale edit); Delete = red. De-active rows keep grey Edit. */
/* THE Edit button, everywhere: white, navy edge, navy bold text, square, compact; navy when hovered.
   On a de-active row it's the same button, faded. (.ppd-list Edit, job "E" .ppd-row-edit) */
:is(.ppd-look .ppd-list .btn.ppd-btn, :is(.ppd-edit, .ppd-look) .btn.ppd-row-edit),
.ppd-look .ppd-list tr.off .btn.ppd-btn { padding: 2px 10px; background: #fff; border: 1px solid var(--ppd-navy); border-radius: 0; color: var(--ppd-navy); font: 700 12px/1.4 var(--ppd-font-body); }
:is(.ppd-look .ppd-list .btn.ppd-btn, :is(.ppd-edit, .ppd-look) .btn.ppd-row-edit):is(:hover, :focus),
.ppd-look .ppd-list tr.off .btn.ppd-btn:is(:hover, :focus) { background: var(--ppd-navy); border-color: var(--ppd-navy); color: #fff; }
.ppd-look .ppd-list tr.off .btn.ppd-btn { opacity: .55; }

/* 1.4.4 - Pre-Sales board (pg 1160, .sq-board): the standard look, visual only.
   Sheet panel, bold title, standard search box, flat compact buttons (+ Add = green,
   Sales Leads / Projects = white with navy edge), navy for the chosen filter, square corners.
   The cards keep their status colours (red new, orange open, green closed). */
.ppd-look .sq-board { --sq-radius: 0; margin: 0; background: #FAFBFC; border: 1px solid #E3E8ED; color: var(--ppd-navy); font-family: var(--ppd-font-body); }
.ppd-look .sq-board .board-header, .ppd-look .sq-board .filter-bar { background: transparent; border-bottom: 0; }
.ppd-look .sq-board .board-header { padding: 16px 20px 10px; }
.ppd-look .sq-board .board-header h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ppd-navy); }
.ppd-look .sq-board .board-header h1::before { content: "Relations \00B7  pre-sales board"; display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ppd-text-soft); }
.ppd-look .sq-board .search-filter { height: 32px; padding: 0 10px; border: 1px solid #C9D3DD; border-radius: 0; background: #fff; font-size: 13px; color: var(--ppd-navy); }
.ppd-look .sq-board .search-filter:focus { outline: none; border-color: var(--ppd-navy); box-shadow: 0 0 0 2px rgba(81, 195, 239, .35); }
.ppd-look .sq-board .add-task-button, .ppd-look .sq-board .manage-button { height: 32px; padding: 0 14px; border-radius: 0; font-size: 12px; font-weight: 700; }
.ppd-look .sq-board .add-task-button { background: #5cb85c; border: 1px solid #4cae4c; color: #fff; }
.ppd-look .sq-board .add-task-button:hover { background: #449d44; }
.ppd-look .sq-board .manage-button { background: #fff; border: 1px solid var(--ppd-navy); color: var(--ppd-navy); }
.ppd-look .sq-board .manage-button:hover { background: var(--ppd-navy); color: #fff; }
.ppd-look .sq-board .filter-bar { padding: 0 20px 10px; gap: 10px; }
.ppd-look .sq-board .filter-bar-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ppd-text-soft); }
.ppd-look .sq-board .day-filters, .ppd-look .sq-board .status-filters { gap: 0; }
.ppd-look .sq-board .day-filters button, .ppd-look .sq-board .status-filters button { height: 28px; margin-left: -1px; padding: 0 10px; border: 1px solid #DDE3EA; border-radius: 0; background: #fff; color: var(--ppd-navy); font-size: 12px; font-weight: 600; }
.ppd-look .sq-board .day-filters button:hover, .ppd-look .sq-board .status-filters button:hover { background: #F3F6FA; }
.ppd-look .sq-board .day-filters button.active, .ppd-look .sq-board .status-filters button[data-status=""].active { background: var(--ppd-navy); border-color: var(--ppd-navy); color: #fff; }
.ppd-look .sq-board .filter-select { height: 32px; padding: 0 8px; border: 1px solid #C9D3DD; border-radius: 0; background: #fff; font-size: 12px; color: var(--ppd-navy); }
.ppd-look .sq-board .board { padding: 6px 20px 20px; gap: 10px; }
.ppd-look .sq-board .board-column { border: 1px solid #E3E8ED; border-radius: 0; background: #fff; box-shadow: inset 0 3px 0 #D9DEE3; }
.ppd-look .sq-board .undated-column { box-shadow: inset 0 3px 0 var(--ppd-purple); background: #fff; border-color: #E3E8ED; }
.ppd-look .sq-board .board-column.is-today { box-shadow: inset 0 3px 0 var(--ppd-blue); background: #F5FBFE; border-color: #E3E8ED; }
.ppd-look .sq-board .overdue-column { box-shadow: inset 0 3px 0 var(--ppd-pink); background: #fff; border-color: #E3E8ED; }
.ppd-look .sq-board .column-header { padding: 10px 10px 8px; border-bottom: 1px solid #E3E8ED; border-radius: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ppd-navy); }
.ppd-look .sq-board .overdue-column .column-header { color: var(--ppd-pink); }
.ppd-look .sq-board .column-list .square-card { border-radius: 0; }
/* the task / manage boxes: square, underline tabs, green save, white-with-navy-edge cancel */
.ppd-look .sq-modal { border-radius: 0; font-family: var(--ppd-font-body); color: var(--ppd-navy); }
.ppd-look .sq-modal-header h2 { font-size: 16px; font-weight: 800; }
.ppd-look .sq-modal-tab { border-bottom-width: 3px; color: var(--ppd-text-soft); font-weight: 600; }
.ppd-look .sq-modal-tab.active { color: var(--ppd-navy); border-bottom-color: var(--ppd-blue); font-weight: 800; }
.ppd-look .sq-modal-pane input[type="text"], .ppd-look .sq-modal-pane textarea, .ppd-look .sq-modal-pane select { border: 1px solid #C9D3DD; border-radius: 0; font-size: 13px; }
.ppd-look .sq-modal-pane input[type="text"]:focus, .ppd-look .sq-modal-pane textarea:focus, .ppd-look .sq-modal-pane select:focus { outline: none; border-color: var(--ppd-navy); box-shadow: 0 0 0 2px rgba(81, 195, 239, .35); }
.ppd-look .sq-modal-actions button, .ppd-look .sq-note-form button, .ppd-look .sq-modal-pane form button[type="submit"] { height: 32px; padding: 0 14px; border-radius: 0; background: #5cb85c; color: #fff; font-size: 12px; font-weight: 700; }
.ppd-look .sq-modal-actions button.secondary { background: #fff; border: 1px solid var(--ppd-navy); color: var(--ppd-navy); }
.ppd-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ppd-stats__title { margin: 2px 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ppd-text-soft); }
/* The agreed tile (Goods in pg 2000): always white, a strip of its colour along the top,
   light edge. A tile with nothing in it just fades its number. Same on every page. */
.ppd-stat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  min-height: 70px; padding: 9px 12px; color: var(--ppd-text-soft); background: #fff;
  box-shadow: inset 0 4px 0 var(--ppd-stat-c, var(--ppd-blue)), inset 0 0 0 1px var(--ppd-line);
  text-decoration: none; transition: background .12s;
}
.ppd-stat:hover, .ppd-stat:focus { background: #F3F6FA; color: var(--ppd-text-soft); text-decoration: none; }
.ppd-stat__label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.ppd-stat__sub { margin-top: -6px; font-size: 11px; font-style: italic; opacity: .75; }
.ppd-stat__num { font-size: 24px; font-weight: 800; line-height: 1; color: var(--ppd-navy); }
.ppd-stat--blue   { --ppd-stat-c: var(--ppd-blue); }
.ppd-stat--orange { --ppd-stat-c: var(--ppd-orange); }
.ppd-stat--purple { --ppd-stat-c: var(--ppd-purple); }
.ppd-stat--green  { --ppd-stat-c: var(--ppd-green); }
.ppd-stat--pink   { --ppd-stat-c: var(--ppd-pink); }
.ppd-stat--navy   { --ppd-stat-c: var(--ppd-navy); }
.ppd-stat--grey   { --ppd-stat-c: #D9DEE3; }
.ppd-stat--teal   { --ppd-stat-c: #2BBFBF; }
.ppd-stat.is-zero .ppd-stat__num { opacity: .35; }
.ppd-stat.is-active { box-shadow: inset 0 4px 0 var(--ppd-stat-c, var(--ppd-blue)), inset 0 0 0 2px var(--ppd-stat-c, var(--ppd-blue)); background: #F0F8FF; }
/* Pieces an old menu brings with it (ppd_side_convert): a gap where it had a
   line, a short note, and anything kept as it was (forms, inputs) */
.ppd-side-gap { height: 8px; }
.ppd-side-note { padding: 2px 4px; color: var(--ppd-frame-muted); font-size: 12px; font-weight: 600; }
.ppd-side-raw { padding: 4px; color: #C6D3DC; font-size: 13px; }
.ppd-side-raw input, .ppd-side-raw select, .ppd-side-raw textarea { max-width: 100%; color: var(--ppd-navy); }
.ppd-sidebar__foot { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ppd-frame-line); }
.ppd-sidebar > :last-child:not(.ppd-sidebar__foot) { margin-bottom: 16px; }

.ppd-squares--grid.ppd-squares--many { overflow: visible; }
.ppd-squares--grid.ppd-squares--many .ppd-square { width: auto; height: auto; }

/* Dropdown panel (account menu) */
.ppd-pop { position: relative; }
.ppd-pop__panel {
  position: absolute;
  right: 0;
  z-index: 1050;
  width: 240px;
  margin-top: 4px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid var(--ppd-line);
  box-shadow: 0 12px 32px rgba(15, 38, 48, .18);
  color: var(--ppd-navy);
}
.ppd-pop__head { padding: 8px 16px; border-bottom: 1px solid var(--ppd-line); }
.ppd-pop__item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--ppd-navy);
  font: 600 15px var(--ppd-font-body);
  text-align: left;
  cursor: pointer;
}
.ppd-pop__item:hover { background: var(--ppd-light); color: var(--ppd-navy); }

/* 12. Page parts --------------------------------------------------------------
   The pieces pages are built from inside the frame. */

/* Page heading: a small line above, the title, actions on the right */
.ppd-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ppd-page-head__kicker { font-size: 13px; font-weight: 600; color: var(--ppd-text-soft); }
.ppd .ppd-page-head__title, .ppd-page-head__title {
  margin: 2px 0 0;
  font: 800 28px/1.1 var(--ppd-font-display);
  letter-spacing: -0.02em;
  color: var(--ppd-navy);
}
@media (min-width: 576px) { .ppd .ppd-page-head__title, .ppd-page-head__title { font-size: 36px; } }
.ppd-page-head__intro { margin: -12px 0 24px; color: var(--ppd-text-soft); }

/* Panel: a white box with a thin line */
.ppd-panel { background: var(--ppd-surface); border: 1px solid var(--ppd-line); padding: 20px; }
@media (min-width: 576px) { .ppd-panel { padding: 24px; } }
.ppd .ppd-panel__title, .ppd-panel__title { margin: 0 0 16px; font: 800 18px/1.2 var(--ppd-font-body); color: var(--ppd-navy); }

/* List of rows (companies, brands, connections) */
.ppd-list { background: var(--ppd-surface); border: 1px solid var(--ppd-line); }
.ppd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ppd-line);
  color: var(--ppd-navy);
}
.ppd-row:last-child { border-bottom: 0; }
a.ppd-row:hover { background: var(--ppd-white); color: var(--ppd-navy); }
.ppd-row.is-muted { opacity: .6; }
.ppd-row__main { display: flex; flex: 1 1 14rem; align-items: center; gap: 12px; min-width: 0; }
.ppd-row__text { display: flex; flex-direction: column; min-width: 0; }
.ppd-row__title { overflow: hidden; font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ppd-row__sub { overflow: hidden; font-size: 13px; color: var(--ppd-text-soft); white-space: nowrap; text-overflow: ellipsis; }
.ppd-row__stat { font-size: 14px; color: var(--ppd-text-soft); }
.ppd-row__stat strong { color: var(--ppd-navy); }
.ppd-row__go { margin-left: auto; flex: none; color: var(--ppd-text-soft); }
@media (min-width: 576px) { .ppd-row { padding: 14px 20px; } }

/* Initials square for a company or brand */
.ppd-initials { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; font-weight: 800; }

/* Status: a small square and the word, in the status colour */
.ppd-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.ppd-status::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; }
.ppd-status--ok   { color: var(--ppd-ok); }
.ppd-status--warn { color: var(--ppd-warn); }
.ppd-status--bad  { color: var(--ppd-bad); }
.ppd-status--idle { color: var(--ppd-grey); }

/* A sales channel: its logo in a white square, or its code on its colour */
.ppd-channel {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #fff;
  border: 1px solid var(--ppd-line);
  font-size: 14px;
  font-weight: 800;
}
.ppd-channel img { width: 62%; height: 62%; object-fit: contain; }
.ppd-channel--lg { width: 64px; height: 64px; font-size: 18px; }
.ppd-channel[class*="ppd-c--"] { border: 0; }

/* Square picker: brands, channels to connect */
.ppd-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 576px) { .ppd-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .ppd-pick--wide { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ppd-addstock__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: 16px;
  color: var(--ppd-navy);
}
.ppd-addstock__item:hover { filter: brightness(.96); color: var(--ppd-navy); }
.ppd-addstock__item--logo { align-items: center; justify-content: center; gap: 12px; background: #fff; border: 2px solid var(--ppd-line); }
.ppd-addstock__item--logo:hover { filter: none; border-color: var(--ppd-navy); }
.ppd-addstock__kicker { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ppd-addstock__title { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; }
.ppd-addstock__sub { font-size: 14px; font-weight: 600; }

/* Small search bar (the big .ppd-search is for home pages) */
.ppd-find { display: flex; align-items: stretch; max-width: 28rem; margin-bottom: 16px; background: #fff; border: 2px solid var(--ppd-navy); }
.ppd-find label { display: flex; flex: 1; align-items: center; gap: 8px; margin: 0; padding: 0 12px; color: var(--ppd-text-soft); }
.ppd-find input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ppd-navy); font: 600 15px var(--ppd-font-body); }
.ppd-find input:focus { outline: none; }
.ppd-find:focus-within { box-shadow: 0 0 0 3px rgba(81, 195, 239, .5); }
.ppd-find button { padding: 0 16px; border: 0; background: var(--ppd-navy); color: #fff; font: 700 14px var(--ppd-font-body); cursor: pointer; }

/* Label / value pairs */
.ppd-dl { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 12px 8px; margin: 0; font-size: 14px; }
.ppd-dl dt { font-weight: 400; color: var(--ppd-text-soft); }
.ppd-dl dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* Smaller buttons and a danger button, alongside .ppd-btn */
.ppd-btn--sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.ppd-btn--danger { background: var(--ppd-pink); border-color: var(--ppd-pink); color: var(--ppd-navy); }
.ppd-btn--danger:hover { background: #e04a77; border-color: #e04a77; color: var(--ppd-navy); }

/* Bootstrap 5 tables, pagination and fields inside the frame, square and in PPd
   colours. Scoped to .ppd-frame so pages outside it (e.g. the login) don't change. */
.ppd-frame .table { --bs-table-bg: #fff; --bs-table-hover-bg: var(--ppd-white); margin-bottom: 0; border: 1px solid var(--ppd-line); font-size: 14px; }
.ppd-frame .table > thead th {
  padding: 12px 16px;
  background: var(--ppd-white);
  color: var(--ppd-text-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ppd-frame .table > tbody td { padding: 12px 16px; vertical-align: middle; }
.ppd-frame .pagination { --bs-pagination-color: var(--ppd-navy); --bs-pagination-active-bg: var(--ppd-navy); --bs-pagination-active-border-color: var(--ppd-navy); --bs-pagination-border-radius: 0; margin: 16px 0 0; }
.ppd-frame .form-control, .ppd-frame .form-select { min-height: 44px; border-color: var(--ppd-line); font-weight: 600; }
.ppd-frame .form-text { color: var(--ppd-text-soft); }
.ppd-frame .invalid-feedback { color: var(--ppd-bad); font-weight: 700; }

/* 12. Handheld module pages (.ppd-hh) -------------------------------------------
   261019 // HANDHELD STANDARD: every HH page follows html/sys_mobile/HH_DESIGN.md (layout, colours, scanning rules).
   261016 // sys_mobile Modules/<company>/Modules.php wraps its page in .ppd-hh (Bootstrap 3).
   Standard look, one size for every box and button (touch: 40px), square, one font. Visual only. */
.ppd-hh, .ppd-hh :is(input, select, textarea, button, .btn, h4, h5, table) { font-family: var(--ppd-font-body); }
.ppd-hh { color: var(--ppd-navy); }
.ppd-hh .btn, .ppd-hh .form-control, .ppd-hh .panel, .ppd-hh .alert, .ppd-hh .label, .ppd-hh .modal-content { border-radius: 0; }
/* every input the same: 40px, light edge, navy text, blue glow on focus */
.ppd-hh .form-control, .ppd-hh .form-control.input-sm { height: 40px; padding: 6px 10px; font-size: 15px; color: var(--ppd-navy); background: #fff; border: 1px solid #C9D3DD; box-shadow: none; }
.ppd-hh .form-control:focus { border-color: var(--ppd-navy); box-shadow: 0 0 0 2px rgba(81, 195, 239, .35); }
.ppd-hh .form-control::placeholder { color: #8A96A3; }
/* every action button the same height and weight (not the small row buttons .btn-xs) */
.ppd-hh .btn:not(.btn-xs) { min-height: 40px; font-size: 15px; font-weight: 700; }
.ppd-hh .btn-success { background: var(--ppd-green); border-color: var(--ppd-green); color: var(--ppd-navy); }
.ppd-hh .btn-success:hover, .ppd-hh .btn-success:focus { background: #4CC380; border-color: #4CC380; color: var(--ppd-navy); }
/* search / find = solid navy */
.ppd-hh .ppd-hh-find, .ppd-hh .ppd-hh-find:focus { background: var(--ppd-navy); border-color: var(--ppd-navy); color: #fff; }
.ppd-hh .ppd-hh-find:hover { background: #2A3F55; border-color: #2A3F55; color: #fff; }
.ppd-hh .btn-default { background: #fff; border-color: #DDE3EA; color: var(--ppd-navy); }
.ppd-hh .btn-default:hover { background: #F3F6FA; }
.ppd-hh .btn-warning { background: #fff; border-color: var(--ppd-orange); border-top-width: 4px; color: var(--ppd-navy); }
/* page header (back button): white box, bold title */
.ppd-hh .btn-default h4 { margin: 4px 0; font-size: 18px; font-weight: 800; color: var(--ppd-navy); }
/* panels: sheet look */
.ppd-hh .panel { border: 1px solid #E3E8ED; box-shadow: none; background: #fff; }
.ppd-hh .panel > .panel-heading { padding: 10px 12px; background: #FAFBFC; border-bottom: 1px solid #E3E8ED; border-radius: 0; color: var(--ppd-navy); font-size: 14px; }
.ppd-hh .panel > .panel-body { padding: 10px 12px; }
.ppd-hh .panel-warning { border-left: 4px solid var(--ppd-orange); }
/* messages: colour bar on the left */
.ppd-hh .alert { padding: 8px 12px; border: 0; border-left: 4px solid; font-size: 14px; color: var(--ppd-navy); }
.ppd-hh .alert-info    { border-left-color: var(--ppd-blue);  background: #E8F6FD; }
.ppd-hh .alert-success { border-left-color: var(--ppd-green); background: #E3F8EC; }
.ppd-hh .alert-warning { border-left-color: var(--ppd-orange); background: #FFEFE2; }
.ppd-hh .alert-danger  { border-left-color: var(--ppd-pink);  background: #FDE7EE; }
/* menu tiles: white with a colour strip on top (tile standard), spare = faded */
.ppd-hh .ppd-hh-tile, .ppd-hh .ppd-hh-tile:focus { background: #fff; border: 1px solid #E3E8ED; border-top: 4px solid var(--ppd-blue); color: var(--ppd-navy); }
.ppd-hh .ppd-hh-tile:hover { background: #F3F6FA; color: var(--ppd-navy); }
.ppd-hh .ppd-hh-tile h4 { margin: 6px 0 2px; font-size: 18px; font-weight: 800; }
.ppd-hh .ppd-hh-tile small { color: var(--ppd-text-soft); font-size: 12px; font-weight: 600; }
.ppd-hh .ppd-hh-tile[disabled] { opacity: .45; border-top-color: #C9D3DD; }
.ppd-hh h4.text-center { font-size: 18px; font-weight: 800; }
.ppd-hh .table { font-size: 14px; }