/*
 * Shared page look: grey canvas, content in one white rounded card, compact
 * buttons, light AG Grid with small uppercase headers.
 *
 * Purely visual - no page logic depends on it. Every colour that carries the
 * brand comes from the --brand-* properties in /theme.css, so Junee stays
 * purple and Luibelle navy; the rest is neutral grey and white.
 *
 * Linked at the END of <head> by modules/pageRender.js so it wins over each
 * page's own <style>. Every rule is scoped under html:not([data-no-portal-nav])
 * so the login page is untouched and the selectors outrank the page rules.
 */

/* Hidden until portalNav.js has moved the page into its card (it adds
   .pn-ready), so the old layout never flashes. If the script never runs, the
   animation shows the page anyway after 3s. */
html:not([data-no-portal-nav]):not(.pn-ready) body {
  visibility: hidden;
  animation: pn-reveal 0s 3s forwards;
}
@keyframes pn-reveal {
  to { visibility: visible; }
}

html:not([data-no-portal-nav]) body {
  background: #f3f3f3 !important;
  font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  color: var(--brand-ink);
}

/* ---- The white page card (portalNav.js moves the page body into it) ---- */
html:not([data-no-portal-nav]) .pn-page {
  display: block;
  background: #fff;
  border: 1px solid #e3e8ec;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 32px -12px rgba(23, 20, 31, .16);
  margin: 12px 24px 60px;
  padding: 20px 22px 26px;
  min-height: 420px;
}
@media (max-width: 640px) {
  html:not([data-no-portal-nav]) .pn-page { margin: 10px 16px 40px; padding: 16px 14px 20px; }
}

/* Each page's own outer wrapper: the card already provides the spacing. */
html:not([data-no-portal-nav]) .pn-page > .wrap,
html:not([data-no-portal-nav]) .pn-page > .page,
html:not([data-no-portal-nav]) .pn-page > main {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* ---- The old top bar becomes the page's toolbar ---- */
html:not([data-no-portal-nav]) .pn-page .topbar {
  /* A clear toolbar bar: title left, the page's buttons right. */
  position: static;
  background: #f7f9fb;
  border: 1px solid #e3e8ec;
  border-radius: 14px;
  box-shadow: none;
  backdrop-filter: none;
  padding: 8px 10px 8px 14px;
  margin: 0 0 14px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
html:not([data-no-portal-nav]) .pn-page .topbar .nav,
html:not([data-no-portal-nav]) .pn-page .topbar .actions {
  justify-content: flex-start;
  flex: 0 1 auto;
  gap: 8px;
  flex-wrap: wrap;
}

/* Reporting's Hide Columns / Save column order, moved into the header row. */
html:not([data-no-portal-nav]) .pn-page .pn-in-thead {
  display: inline-flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  position: static;
}

/* ---- Headings: small uppercase section labels ---- */
html:not([data-no-portal-nav]) .pn-page h1,
html:not([data-no-portal-nav]) .pn-page h2,
html:not([data-no-portal-nav]) .pn-page .page-title,
html:not([data-no-portal-nav]) .pn-page .topbar .title {
  font-family: inherit;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #68798a;
  font-weight: 800;
  margin: 14px 0 8px;
  max-width: none;
}
html:not([data-no-portal-nav]) .pn-page .kicker,
html:not([data-no-portal-nav]) .pn-page .sub,
html:not([data-no-portal-nav]) .pn-page .subtitle {
  color: #68798a;
}

/* ---- Buttons ---- */
html:not([data-no-portal-nav]) .pn-page .btn,
html:not([data-no-portal-nav]) .pn-page .table-btn,
html:not([data-no-portal-nav]) .pn-page .btn-generate {
  /* Never set display here: pages hide buttons with .hidden / inline styles. */
  border-radius: 11px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  box-shadow: none;
  transform: none;
}
/* Plain buttons: white with a hairline. Coloured variants keep their colour. */
html:not([data-no-portal-nav]) .pn-page .btn:not(.warn):not(.danger):not(.brand):not(.btn-primary):not(.btn-lg),
html:not([data-no-portal-nav]) .pn-page .table-btn:not(.active) {
  background: #fff;
  color: var(--brand-ink);
  border: 1px solid #e3e8ec;
}
html:not([data-no-portal-nav]) .pn-page .btn:not(.warn):not(.danger):not(.brand):not(.btn-primary):not(.btn-lg):hover,
html:not([data-no-portal-nav]) .pn-page .table-btn:not(.active):hover {
  background: #f4f6f8;
  color: var(--brand-ink);
}
/* Primary / active: the portal's own gradient. */
html:not([data-no-portal-nav]) .pn-page .btn-primary,
html:not([data-no-portal-nav]) .pn-page .btn.brand,
html:not([data-no-portal-nav]) .pn-page .btn-lg,
html:not([data-no-portal-nav]) .pn-page .table-btn.active,
html:not([data-no-portal-nav]) .pn-page .btn-generate {
  background: linear-gradient(135deg, var(--brand-accent-deep), var(--brand-accent));
  color: #fff;
  border: 1px solid transparent;
  font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(var(--brand-accent-rgb), .45);
}

/* The main action on a page stands out in the portal colour. */
html:not([data-no-portal-nav]) .pn-page #newBoxBtn,
html:not([data-no-portal-nav]) .pn-page #confirmPackedBtn {
  background: linear-gradient(135deg, var(--brand-accent-deep), var(--brand-accent));
  color: #fff;
  border: 1px solid transparent;
  font-weight: 700;
}

/* Boxes & Shipments action buttons: same shape; danger ones stay red. */
html:not([data-no-portal-nav]) .pn-page .btn-action {
  border-radius: 11px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
  transform: none;
}
html:not([data-no-portal-nav]) .pn-page .btn-action:not(.btn-danger) {
  background: linear-gradient(135deg, var(--brand-accent-deep), var(--brand-accent));
  color: #fff;
}
html:not([data-no-portal-nav]) .pn-page .btn-action:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---- Inputs ---- */
html:not([data-no-portal-nav]) .pn-page input[type="text"],
html:not([data-no-portal-nav]) .pn-page input[type="search"],
html:not([data-no-portal-nav]) .pn-page input[type="number"],
html:not([data-no-portal-nav]) .pn-page input[type="date"],
html:not([data-no-portal-nav]) .pn-page select,
html:not([data-no-portal-nav]) .pn-page textarea {
  font-family: inherit;
  border-color: #e3e8ec;
  border-radius: 10px;
}

/* ---- Grid frames: the coloured boxes around each grid go flat ---- */
html:not([data-no-portal-nav]) .pn-page .container,
html:not([data-no-portal-nav]) .pn-page .workspace,
html:not([data-no-portal-nav]) .pn-page .grid-shell {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 10px 0 0;
  border-radius: 0;
}

/* ---- Plain HTML tables (vendor list, style results, box contents) ---- */
html:not([data-no-portal-nav]) .pn-page table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
html:not([data-no-portal-nav]) .pn-page table th {
  background: #fff;
  padding: 9px 12px;
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #68798a;
  font-weight: 700;
  border-bottom: 1px solid #e3e8ec;
  text-align: left;
}
html:not([data-no-portal-nav]) .pn-page table td {
  padding: 9px 12px;
  border-bottom: 1px solid #eef2f5;
  font-weight: 500;
}
html:not([data-no-portal-nav]) .pn-page table tr:last-child td { border-bottom: none; }
html:not([data-no-portal-nav]) .pn-page table tbody tr:hover td { background: #f4f8fa; }

/* ---- AG Grid: light rows and small uppercase headers ----
   Both the legacy theme variable names and the theming-API ones are set, so
   it holds whichever the CDN build uses. */
html:not([data-no-portal-nav]) .ag-theme-quartz {
  --ag-font-family: inherit;
  --ag-font-size: 12.5px;
  --ag-foreground-color: var(--brand-ink);
  --ag-text-color: var(--brand-ink);
  --ag-background-color: #fff;
  --ag-header-background-color: #f7f9fb;
  --ag-header-foreground-color: #68798a;
  --ag-header-text-color: #68798a;
  --ag-header-font-weight: 700;
  --ag-border-color: #e3e8ec;
  --ag-row-border-color: #eef2f5;
  --ag-row-hover-color: #f4f8fa;
  --ag-odd-row-background-color: #fff;
  --ag-selected-row-background-color: rgba(var(--brand-accent-rgb), .08);
  --ag-range-selection-border-color: var(--brand-accent);
  --ag-active-color: var(--brand-accent);
  --ag-accent-color: var(--brand-accent);
  --ag-input-focus-border-color: var(--brand-accent);
  --ag-checkbox-checked-color: var(--brand-accent);
  --ag-wrapper-border-radius: 14px;
  --ag-border-radius: 8px;
  --ag-checkbox-border-radius: 4px;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-header-cell-text,
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-header-group-cell-label {
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px;
  font-weight: 700;
}
/* Table text as the prototype: same font as the page, 12.5px medium cells,
   9px/12px cell padding, no outer box - just a line under the header. */
html:not([data-no-portal-nav]) .ag-theme-quartz {
  --ag-row-height: 36px;
  --ag-header-height: 38px;
  --ag-cell-widget-spacing: 8px;
  font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
/* Each grid is a clearly framed card: hairline border, rounded corners and a
   soft grey header band, so it stands out from the white page. */
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-root-wrapper {
  border: 1px solid #dde3e8;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23, 20, 31, .04), 0 8px 20px -14px rgba(23, 20, 31, .18);
}
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-header {
  border-bottom: 1px solid #e3e8ec;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-cell {
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-header-cell-resize::after {
  background-color: #e3e8ec;
}

/* Filter boxes: the prototype's soft grey "Filter" inputs. */
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-floating-filter-input input,
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-floating-filter input,
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-filter input[type="text"],
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-filter input[type="number"] {
  font: inherit;
  font-size: 11px;
  background: #f4f6f8;
  border: 1px solid #e3e8ec;
  border-radius: 7px;
}

/* ---- Grid footer: "PAGE 1 / 13 ... ← Prev  Next →" (see portalNav.js) ---- */
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-paging-panel {
  border-top: none;
  height: auto;
  min-height: 0;
  padding: 14px 2px 2px;
  gap: 10px;
  justify-content: flex-start;
  color: #68798a;
  font-size: 12px;
}
/* The grid's own summary and arrows - replaced by the label and buttons. */
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-paging-panel .ag-paging-row-summary-panel,
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-paging-panel .ag-paging-page-summary-panel {
  display: none;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .pn-pager-label {
  order: -1;
  margin-right: auto;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #68798a;
  font-weight: 800;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-paging-page-size {
  margin: 0;
  font-size: 11.5px;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .pn-pager-nav {
  display: inline-flex;
  gap: 8px;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .pn-pager-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 11px;
  background: #fff;
  color: var(--brand-ink);
  border: 1px solid #e3e8ec;
  cursor: pointer;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .pn-pager-btn:hover:not(:disabled) {
  background: #f4f6f8;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .pn-pager-btn:disabled {
  opacity: .45;
  cursor: default;
}

/* ---- Step cards (Pick & Pack), as in the prototype's Pack & Ship ---- */
#pnSubrow .pn-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
}
#pnSubrow .pn-kpi {
  position: relative;
  display: block;
  border-radius: 18px;
  padding: 16px;
  background: #fbfcfd;
  border: 1px solid #e3e8ec;
  color: var(--brand-ink);
  transition: transform .15s;
}
#pnSubrow .pn-kpi:hover { transform: translateY(-2px); }
#pnSubrow .pn-kpi.on {
  background: linear-gradient(150deg, var(--brand-accent-deep), var(--brand-accent));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 18px 36px -14px rgba(var(--brand-accent-rgb), .55);
}
#pnSubrow .pn-kpi .l {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #68798a; font-weight: 700;
}
#pnSubrow .pn-kpi.on .l { color: rgba(255, 255, 255, .7); }
#pnSubrow .pn-kpi .n { font-size: 26px; font-weight: 800; letter-spacing: -1px; margin-top: 4px; line-height: 1.15; }
#pnSubrow .pn-kpi .n.txt { font-size: 17px; letter-spacing: -.3px; margin-top: 8px; }
#pnSubrow .pn-kpi .t { font-size: 11px; margin-top: 4px; color: #68798a; }
#pnSubrow .pn-kpi.on .t { color: rgba(255, 255, 255, .7); }
#pnSubrow .pn-kpi .go {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1px solid #e3e8ec; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--brand-accent);
}
#pnSubrow .pn-kpi.on .go { background: rgba(255, 255, 255, .18); border: none; color: #fff; }
@media (prefers-reduced-motion: reduce) { #pnSubrow .pn-kpi { transition: none; } }

/* The prototype has no page footer. */
html:not([data-no-portal-nav]) .pn-page > footer,
html:not([data-no-portal-nav]) .pn-page .footer {
  display: none;
}

/* View / Label / PDF buttons in grid cells: the prototype's compact size.
   Only .table-btn / .btn - pages draw their own tick and check buttons. */
html:not([data-no-portal-nav]) .pn-page .ag-theme-quartz .ag-cell .table-btn,
html:not([data-no-portal-nav]) .pn-page .ag-theme-quartz .ag-cell .btn {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 8px;
  line-height: 1.3;
  box-shadow: none;
}

/* Footer layout: the grid's own content would otherwise take the full width. */
html:not([data-no-portal-nav]) .ag-theme-quartz .ag-paging-panel-content {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
}
html:not([data-no-portal-nav]) .ag-theme-quartz .pn-pager-label,
html:not([data-no-portal-nav]) .ag-theme-quartz .pn-pager-nav {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Reporting's floating copy of the grid header (visual only). It sits at the
   very top now that the old sticky top bar is gone; its icons are hidden
   because the copy does not carry the grid's icon styling. */
html:not([data-no-portal-nav]) #gridStickyHeader {
  top: 0 !important;
  background: #fff;
  border-bottom: 1px solid #e3e8ec;
  box-shadow: 0 8px 18px -12px rgba(23, 20, 31, .25);
}
html:not([data-no-portal-nav]) #gridStickyHeader .ag-icon,
html:not([data-no-portal-nav]) #gridStickyHeader .ag-header-cell-menu-button,
html:not([data-no-portal-nav]) #gridStickyHeader .ag-header-cell-filter-button {
  visibility: hidden;
}

/* Packing page full screen. The grid's frame covers the window, so it needs a
   solid background (the flat-frame rule above made it see-through), and the
   page behind must not scroll - that was the second scrollbar. */
html:not([data-no-portal-nav]) .pn-page .container.is-fullscreen {
  background: #fff;
  padding: 14px;
  border: 1px solid #dde3e8;
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(23, 20, 31, .45);
  margin: 0;
}
html:not([data-no-portal-nav]):has(.container.is-fullscreen),
html:not([data-no-portal-nav]):has(.container.is-fullscreen) body {
  overflow: hidden;
}