/* Root size for the whole ERP application. Bootstrap sizes almost everything
   in rem, and the custom pk-* shell components are written in rem too, so
   this one value scales the entire UI. It is deliberately 13px, not the
   Bootstrap default 16px: Paduka ERP is a dense business application, and at
   16px a data grid shows roughly a third fewer rows per screen.

   Do not raise this. See docs/ui-design-standard.md - the compact layer at
   the end of this file assumes 1rem = 13px and its pixel targets are derived
   from it.

   Deliberately the same on small screens. The previous 14px/16px split made
   phones smaller than desktops, which is backwards; the compact layer keeps
   text readable at this size, and the responsive rules further down allow
   grids to scroll horizontally rather than shrinking type. */
html {
  font-size: 13px;
}

/* ---- Typeface -----------------------------------------------------------
   The two stacks both mockups use, verbatim.

   Until now NO font-family was declared anywhere in this file, so every
   screen silently inherited Bootstrap's own --bs-body-font-family, which
   leads with `system-ui` and only reaches "Segoe UI" third. On Windows that
   usually resolves to the same face, which is why the difference was easy to
   miss — but "usually" is not a design decision, and it resolves to
   something else entirely on a Mac or a Linux workstation.

   Set on :root as Bootstrap's OWN variables, not just on body: Bootstrap
   components (.btn, .form-control, .table, .badge, .modal…) read
   --bs-body-font-family rather than inheriting, so overriding body alone
   would leave every control on the old stack.

   The public marketing site is unaffected — it loads only public-site.css
   and never this file, which is what keeps its deliberate exemption intact. */
:root {
  --pk-font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --pk-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --bs-body-font-family: var(--pk-font-sans);
  --bs-font-sans-serif: var(--pk-font-sans);
  --bs-font-monospace: var(--pk-font-mono);
}

body {
  font-family: var(--pk-font-sans);
}

code, kbd, pre, samp {
  font-family: var(--pk-font-mono);
}

/* The mockup sets codes — item codes, permission names, database names — in
   the mono face so they align and scan as identifiers rather than prose.
   A utility rather than a guess: which column is a code is a per-screen
   decision, so a view opts its own cell in. 11.5px and the muted ink are the
   mockup's own values for a code cell. */
.pk-mono {
  font-family: var(--pk-font-mono);
  font-size: 11.5px;
  color: #4b5468;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ==========================================================================
   Dashboard shell (sidebar + header)
   ========================================================================== */

:root {
  --pk-bg: #f2f4f9;
  --pk-sidebar-bg: #ffffff;
  /* The approved final mockup's primary (design/UI mockups/). It is a
     RECOLOUR of this system, not a redesign: every neutral below already
     matched the mockup byte for byte, and #1B5FAA is the one systematic
     change — it appears 49x in the master mockup and 58x in the tenant
     one, while the old #2f5eff appears in neither. Changing it here is
     what moves the Admin Portal and every tenant screen together, since
     both shells already consume these variables. */
  --pk-primary: #1B5FAA;
  --pk-primary-dark: #14497f;
  --pk-text: #1f2430;
  --pk-muted: #8a94a6;
  --pk-border: #e9ecf3;
  /* Slightly darker than --pk-border, for separators that have to carry
     grouping on their own. The form section rule replaced cards, so it is
     doing the job a card border used to do and needs to be visible at a
     glance; --pk-border alone read as too faint. Darkening the line is the
     deliberate alternative to adding vertical space, which would cost
     density on every form in the application. */
  --pk-rule: #d5dced;
  /* The mockup's status colours are deliberately DESATURATED against the
     old set — an ERP grid shows dozens of badges at once, and the vivid
     originals competed with the data. Each is the mockup's own dot colour,
     the darkest of the three values a badge uses (dot / text / border). */
  --pk-success: #148f5a;
  --pk-danger: #c62828;
  --pk-warning: #b26a00;
  /* Fixed pixel dimensions do NOT scale with the root font size, so these
     are tuned for the compact standard explicitly. Header was 68px and
     sidebar 250px, both sized for 16px type; at 13px they left a lot of
     empty band across the top and down the left of every screen. */
  --pk-sidebar-width: 220px;
  /* Both mockups tighten the chrome a little further: the icon rail is
     56px and the header 48px. The expanded sidebar stays at 220px, which
     is already exactly what the tenant mockup uses. */
  --pk-sidebar-collapsed-width: 56px;
  --pk-header-height: 48px;
}

/* ==========================================================================
   Bootstrap primary -> Paduka primary

   The brand mark rendered #1B5FAA while the Sign in button beside it
   rendered #0d6efd. Every .btn-primary in the application (173 uses across
   171 views), every .btn-outline-primary (91) and every link was still on
   Bootstrap's own blue, because the recolour slice changed --pk-primary and
   nothing else ever read it.

   THE BUNDLED BOOTSTRAP IS v5.1.0, AND THAT DECIDES THE MECHANISM. In 5.3
   a button derives from --bs-btn-bg and remapping --bs-primary is enough.
   This build has NO --bs-btn-* variables (0 occurrences), NO
   --bs-link-color (0), and does not reference var(--bs-primary) ANYWHERE
   (0 uses) — it compiles literal hex:

       .btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}
       a{color:#0d6efd;text-decoration:underline}

   So setting the --bs-* variables alone would have changed nothing at all.
   The rules themselves have to be restated. This is still ONE centralized
   block keyed on Bootstrap's own class names — not 173 per-button
   overrides — and it disappears on its own the day Bootstrap is upgraded
   past 5.3, when the variables below become live.

   SCOPE. Primary and links only. Success, danger and warning keep
   Bootstrap's values: --pk-success/-danger/-warning exist, but they are the
   mockup's desaturated BADGE colours and are already applied where the
   mockup asks for them (the grid badge rules). Remapping Bootstrap's
   semantic colours from them would be a theme rewrite nobody asked for.

   FOCUS RINGS ARE NOT TOUCHED. Only color / background-color / border-color
   are restated; every box-shadow is left exactly as it is, so the existing
   focus behaviour — including the pre-existing #258cfb ring at the top of
   this file — is unchanged.

   The public marketing site cannot be affected: it loads only
   public-site.css and never this file.
   ========================================================================== */

/* Declared for correctness and for a future Bootstrap upgrade. INERT in
   5.1.0 — nothing in this build reads them. --bs-primary-rgb is the true
   decomposition of #1B5FAA (0x1B=27, 0x5F=95, 0xAA=170), not an
   approximation. */
:root {
  --bs-primary: var(--pk-primary);
  --bs-primary-rgb: 27, 95, 170;
  --bs-link-color: var(--pk-primary);
  --bs-link-hover-color: var(--pk-primary-dark);
}

a {
  color: var(--pk-primary);
}

a:hover {
  color: var(--pk-primary-dark);
}

.btn-primary {
  background-color: var(--pk-primary);
  border-color: var(--pk-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-check:focus + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--pk-primary-dark);
  border-color: var(--pk-primary-dark);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--pk-primary);
  border-color: var(--pk-primary);
}

.btn-outline-primary {
  color: var(--pk-primary);
  border-color: var(--pk-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.dropdown-toggle.show {
  background-color: var(--pk-primary);
  border-color: var(--pk-primary);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--pk-primary);
}

.btn-link {
  color: var(--pk-primary);
}

.btn-link:hover {
  color: var(--pk-primary-dark);
}

/* 37 uses, all badges. Inside a grid the mockup's soft-tinted badge rule is
   more specific and still wins; this covers the ones outside. */
.bg-primary {
  background-color: var(--pk-primary) !important;
}

.border-primary {
  border-color: var(--pk-primary) !important;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--pk-bg);
  color: var(--pk-text);
  margin-bottom: 0;
  overflow-x: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.pk-sidebar {
  width: var(--pk-sidebar-width);
  flex-shrink: 0;
  background: var(--pk-sidebar-bg);
  border-right: 1px solid var(--pk-border);
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.app-shell.sidebar-collapsed .pk-sidebar {
  width: var(--pk-sidebar-collapsed-width);
}

.app-shell.sidebar-collapsed .pk-sidebar .pk-nav-label,
.app-shell.sidebar-collapsed .pk-sidebar .pk-brand-text,
.app-shell.sidebar-collapsed .pk-sidebar .pk-nav-badge,
.app-shell.sidebar-collapsed .pk-sidebar .pk-nav-chevron,
.app-shell.sidebar-collapsed .pk-sidebar .pk-location-panel {
  display: none !important;
}

/* Both mockups make this row exactly as tall as the header (48px) so the
   sidebar brand and the header rule line up across the fold. It was 69px,
   which broke that alignment and cost vertical space the compact standard
   would rather spend on rows. */
.pk-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--pk-header-height);
  padding: 0 12px;
  border-bottom: 1px solid var(--pk-border);
  white-space: nowrap;
  overflow: hidden;
}

/* Flat primary, not a gradient. The gradient's far stop was #6a8bff — a
   colour from the OLD palette that the recolour slice missed because it sat
   inside a linear-gradient() rather than on a token. Both mockups draw this
   mark flat. */
.pk-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--pk-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

/* The brand block now carries the tenant's real name, which is arbitrary
   length — min-width:0 is what lets a flex child actually shrink, without it
   a long name pushes the mark out of the sidebar instead of truncating. */
.pk-brand-text {
  min-width: 0;
}
.pk-brand-text .title,
.pk-brand-text .subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-brand-text .title {
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.1;
  color: var(--pk-text);
}

.pk-brand-text .subtitle {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pk-muted);
}

.pk-nav {
  flex: 1;
  padding: 0.75rem 0.65rem;
  overflow-y: auto;
}

.pk-nav-section {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pk-nav-section-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pk-muted);
  padding: 0.9rem 0.75rem 0.35rem;
  white-space: nowrap;
  overflow: hidden;
}

/* The approved mockup gives every nav section a LEADING icon. It needs its
   own wrapper rather than reusing .pk-nav-section-title .icon, because that
   selector already styles the tenant nav's trailing collapse chevron — one
   rule cannot serve both without the chevron changing size on every tenant
   screen. */
.pk-nav-section-icon {
  display: inline-flex;
  flex: none;
}

/* Sidebar footer (mockup line 52). Hidden on the icon rail, like every
   other label in the collapsed sidebar. */
.pk-sidebar-footer {
  flex: none;
  border-top: 1px solid var(--pk-border);
  padding: 8px 12px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--pk-muted);
  white-space: nowrap;
  overflow: hidden;
}

.app-shell.sidebar-collapsed .pk-sidebar .pk-sidebar-footer {
  display: none;
}

/* Qualified with .pk-nav-section-title deliberately. The trailing collapse
   chevron is styled further down as `.pk-nav-section-title .icon` — the same
   specificity as a bare `.pk-nav-section-icon .icon`, and LATER in the file,
   so the chevron's 14px/#b7bece silently won and this rule did nothing. The
   extra class makes the leading icon's own sizing decisive regardless of
   source order. */
.pk-nav-section-title .pk-nav-section-icon .icon {
  width: 12px;
  height: 12px;
  stroke-width: 1.7;
  color: var(--pk-muted);
}

.app-shell.sidebar-collapsed .pk-sidebar .pk-nav-section-title {
  display: none !important;
}

/* --- Collapsible sections -------------------------------------------
   The section title is a real <button>, so it is keyboard reachable and
   announces its state; these rules only strip the default button chrome
   so it still looks like the label it replaced. */
button.pk-nav-section-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

button.pk-nav-section-title:hover {
  color: var(--pk-text);
}

button.pk-nav-section-title:focus-visible {
  outline: 2px solid var(--pk-primary);
  outline-offset: -2px;
  border-radius: 0.35rem;
}

.pk-nav-section-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reuses the .pk-nav-chevron transition already defined below. */
.pk-nav-section-title .icon {
  width: 14px;
  height: 14px;
  color: #b7bece;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

/* Before pk-nav.js has wired the toggles, the same collapsed state comes from
   the first-paint stylesheet it writes in <head> (see that file), so the menu
   paints compact at once instead of expanding and then collapsing. */
.pk-nav-group.is-collapsed > .pk-nav-section {
  display: none;
}

/* `> .icon`, the trailing chevron only. The leading section icon sits inside
   .pk-nav-section-icon, and a bare descendant `.icon` turned it on its side
   too — invisible while sections started open, on every collapsed section
   once they started collapsed. */
.pk-nav-group.is-collapsed > .pk-nav-section-title > .icon {
  transform: rotate(-90deg);
}

/* In the icon-only rail the section titles are hidden, so a collapsed
   group would strand its items with no way to reopen them. Force every
   group open there — the rail has no room for section headers anyway. */
.app-shell.sidebar-collapsed .pk-sidebar .pk-nav-group.is-collapsed > .pk-nav-section {
  display: block;
}

.pk-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  color: #4b5468;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
  white-space: nowrap;
}

.pk-nav-link .icon {
  font-size: 1.1rem;
  color: #9aa3b5;
}

.pk-nav-link:hover {
  background: #f2f4fb;
  color: var(--pk-text);
}

.pk-nav-link.active {
  background: var(--pk-primary);
  color: #fff;
}

.pk-nav-link.active .icon {
  color: #fff;
}

.pk-nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A nested setup group inside one nav section. Borrows .pk-nav-link's own
   metrics rather than introducing a second set, so the sidebar keeps one
   visual language — the only differences are that the parent is muted
   (it is a label, not a destination) and the children are indented enough
   to read as belonging to it. No existing rule is touched. */
.pk-nav-sublabel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.25rem;
  color: #8a93a7;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pk-nav-sublabel .icon {
  font-size: 1rem;
  color: #aab2c4;
}

.pk-nav-subgroup {
  list-style: none;
  margin: 0 0 0.15rem;
  padding: 0 0 0 0.75rem;
  border-left: 1px solid #e6e9f2;
  margin-left: 1.1rem;
}

/* A collapsed sidebar shows icons only, so an uppercase word would wrap
   into the rail. The children keep rendering as icons, exactly like every
   other link. */
.app-shell.sidebar-collapsed .pk-sidebar .pk-nav-sublabel {
  display: none;
}

.app-shell.sidebar-collapsed .pk-sidebar .pk-nav-subgroup {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}

/* --- Collapsible groups (2026-10-14 sidebar redesign) ----------------
   The group label is a real <button> (pk-nav.js toggles it), so it keeps
   .pk-nav-sublabel's metrics and only strips the button chrome — the same
   treatment button.pk-nav-section-title gets above. The trailing chevron
   turns when the group is collapsed, exactly like a section's. */
button.pk-nav-sublabel {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  border-radius: 0.35rem;
}

button.pk-nav-sublabel:hover {
  color: var(--pk-text);
}

button.pk-nav-sublabel:focus-visible {
  outline: 2px solid var(--pk-primary);
  outline-offset: -2px;
}

.pk-nav-sublabel-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-nav-subchevron {
  display: inline-flex;
  flex: none;
}

.pk-nav-subchevron .icon {
  width: 12px;
  height: 12px;
  color: #b7bece;
  transition: transform 0.15s ease;
}

.pk-nav-subgroup-item.is-collapsed > .pk-nav-subgroup {
  display: none;
}

.pk-nav-subgroup-item.is-collapsed > .pk-nav-subtoggle .pk-nav-subchevron .icon {
  transform: rotate(-90deg);
}

/* The icon rail hides group labels, so — like sections — every group is
   forced open there; otherwise a collapsed group's icons would vanish with
   no way to reopen them. */
.app-shell.sidebar-collapsed .pk-sidebar .pk-nav-subgroup-item.is-collapsed > .pk-nav-subgroup {
  display: block;
}

/* --- Mobile navigation drawer (below 992px) --------------------------
   Only the tenant shell (.has-nav-drawer) turns its sidebar into an
   off-canvas drawer, opened by #pkSidebarToggle (site.js). Hidden off-canvas
   it is also visibility:hidden, so its links are out of the tab order until
   it opens. The Admin Portal shares .app-shell and .pk-sidebar but not the
   marker, so nothing here reaches it.

   And only under html.pk-nav-drawer-enabled — added by pk-nav.js in <head>,
   so the drawer layout holds from the first paint, and withdrawn again if
   site.js never wires the drawer. Without JavaScript, or after a failed
   script, the sidebar simply stays in the page flow, as it always did. */
/* Qualified with .pk-sidebar / .app-shell deliberately: the close button is
   also a .pk-icon-btn, whose display:inline-flex is declared LATER in this
   file at the same specificity and would otherwise show it on desktop. */
.pk-sidebar .pk-nav-drawer-close,
.app-shell .pk-nav-backdrop {
  display: none;
}

@media (max-width: 991.98px) {
  .pk-nav-drawer-enabled .app-shell.has-nav-drawer .pk-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: min(300px, 86vw);
    z-index: 1045;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .pk-nav-drawer-enabled .app-shell.has-nav-drawer.nav-drawer-open .pk-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
    box-shadow: 0 0 24px rgba(15, 23, 42, 0.18);
  }

  .pk-nav-drawer-enabled .app-shell.has-nav-drawer .pk-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, 0.45);
  }

  .pk-nav-drawer-enabled .app-shell.has-nav-drawer .pk-nav-drawer-close {
    display: inline-flex;
    flex: none;
    margin-left: auto;
    font-size: 1.4rem;
    line-height: 1;
  }

  .pk-nav-drawer-enabled body.pk-nav-drawer-lock {
    overflow: hidden;
  }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .pk-nav-drawer-enabled .app-shell.has-nav-drawer .pk-sidebar,
  .pk-nav-drawer-enabled .app-shell.has-nav-drawer.nav-drawer-open .pk-sidebar {
    transition: none;
  }
}

.pk-nav-badge {
  background: #ffe8e8;
  color: #d92d2d;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.pk-nav-link.active .pk-nav-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.pk-nav-chevron {
  color: #b7bece;
  transition: transform 0.15s ease;
}

.pk-location-panel {
  border-top: 1px solid var(--pk-border);
  padding: 0.9rem 1rem 1.1rem;
}

.pk-location-panel .panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pk-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.pk-location-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.82rem;
}

.pk-location-item .loc-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #eef1fb;
  color: var(--pk-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.pk-location-item .loc-name {
  flex: 1;
  color: var(--pk-text);
  font-weight: 600;
}

.pk-location-item .loc-pairs {
  color: var(--pk-muted);
  font-size: 0.75rem;
  display: block;
}

.pk-location-item .loc-change {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pk-success);
}

/* ---------- Header ---------- */

.pk-header {
  height: var(--pk-header-height);
  background: #fff;
  border-bottom: 1px solid var(--pk-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.pk-icon-btn {
  border: none;
  background: transparent;
  color: #5a6376;
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.pk-icon-btn:hover {
  background: #f2f4fb;
}

/* ---------- Header: global screen search (pk-search.js) ----------
   Compact by the same standard as every other control here: a 30px field,
   12px text, no card and no overlay. The panel is anchored to the field
   rather than to the viewport, so the header keeps its own layout and the
   sidebar toggle / title / right-hand controls are undisturbed. */

.pk-search {
  position: relative;
  flex: 0 1 320px;
  min-width: 0;
}

/* The collapse-to-an-icon button. Hidden on desktop, where the field is
   always visible; it only takes over below the breakpoint. */
.pk-search-toggle {
  display: none;
}

.pk-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.pk-search-icon {
  position: absolute;
  left: 8px;
  display: inline-flex;
  align-items: center;
  color: var(--pk-muted);
  pointer-events: none;
}

.pk-search-icon .icon {
  width: 14px;
  height: 14px;
}

.pk-search-input {
  width: 100%;
  height: 30px;
  padding: 0 0.5rem 0 1.65rem;
  border: 1px solid var(--pk-border);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--pk-text);
  font-family: var(--pk-font-sans);
  font-size: 12px;
  outline: none;
}

.pk-search-input::placeholder {
  color: var(--pk-muted);
}

.pk-search-input:focus {
  border-color: var(--pk-primary);
  box-shadow: 0 0 0 3px rgba(47, 94, 255, 0.12);
}

/* Chrome/Edge render their own clear affordance on type=search; it sits
   badly in a 30px field and duplicates Escape. */
.pk-search-input::-webkit-search-decoration,
.pk-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.pk-search-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 0.375rem;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.12);
  /* Above the sticky header's own stacking context. */
  z-index: 40;
  padding: 4px;
}

.pk-search-section {
  padding: 6px 8px 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pk-muted);
}

.pk-search-result {
  display: block;
  padding: 5px 8px;
  border-radius: 0.25rem;
  font-size: 12px;
  color: var(--pk-text);
  text-decoration: none;
}

.pk-search-result:hover,
.pk-search-result.is-active {
  background: #f2f4fb;
  color: var(--pk-text);
  text-decoration: none;
}

.pk-search-empty {
  padding: 8px;
  font-size: 12px;
  color: var(--pk-muted);
}

.pk-company-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pk-primary);
  color: #fff;
  border: none;
  padding: 0.45rem 0.9rem;
  border-radius: 0.6rem;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

.pk-header-title {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.pk-header-title .title {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--pk-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-header-title .subtitle {
  font-size: 0.75rem;
  color: var(--pk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.pk-sync {
  text-align: right;
  font-size: 0.75rem;
  color: var(--pk-muted);
  line-height: 1.2;
}

.pk-sync .live-badge {
  background: #e6f9ef;
  color: var(--pk-success);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pk-sync .live-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pk-success);
}

.pk-bell {
  position: relative;
}

.pk-bell .badge-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--pk-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.pk-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--pk-text);
}

.pk-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eaf1f9;
  color: var(--pk-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10.5px;
}

.pk-user .name {
  font-size: 0.8rem;
  line-height: 1.1;
}

.pk-user .name small {
  display: block;
  color: var(--pk-muted);
  font-weight: 400;
}

/* ---------- Content ---------- */

.pk-content {
  padding: 1.25rem;
  flex: 1;
  min-width: 0;
}

.pk-card {
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 0.85rem;
  box-shadow: 0 1px 2px rgba(20, 24, 40, 0.03);
}

.pk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem 0.25rem;
}

.pk-card-header .card-title {
  font-weight: 700;
  font-size: 0.98rem;
  margin: 0;
}

.pk-card-body {
  padding: 1rem 1.15rem 1.15rem;
}

/* KPI cards */

.pk-kpi {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
}

.pk-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.pk-kpi .kpi-label {
  font-size: 0.78rem;
  color: var(--pk-muted);
  margin-bottom: 0.15rem;
}

.pk-kpi .kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pk-text);
  line-height: 1.15;
}

.pk-kpi .kpi-change {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.2rem;
}

.pk-kpi .kpi-change.up {
  color: var(--pk-success);
}

.pk-kpi .kpi-change.down {
  color: var(--pk-danger);
}

/* Donut chart (conic-gradient based) */

.pk-donut {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pk-donut-inner {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pk-donut-inner .value {
  font-size: 1.3rem;
  font-weight: 700;
}

.pk-donut-inner .label {
  font-size: 0.7rem;
  color: var(--pk-muted);
}

/* Line-wise progress bars */

.pk-line-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
}

.pk-line-row .line-name {
  width: 80px;
  font-size: 0.82rem;
  color: var(--pk-text);
  flex-shrink: 0;
}

.pk-line-row .line-track {
  flex: 1;
  height: 8px;
  background: #eef0f6;
  border-radius: 999px;
  overflow: hidden;
}

.pk-line-row .line-fill {
  height: 100%;
  background: var(--pk-primary);
  border-radius: 999px;
}

.pk-line-row .line-pct {
  width: 38px;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pk-text);
}

.pk-line-row .line-count {
  width: 90px;
  text-align: right;
  font-size: 0.75rem;
  color: var(--pk-muted);
}

/* Business snapshot */

.pk-snapshot-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pk-border);
}

.pk-snapshot-item:last-child {
  border-bottom: none;
}

.pk-snapshot-icon {
  width: 34px;
  height: 34px;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.pk-snapshot-item .snap-title {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--pk-text);
}

.pk-snapshot-item .snap-sub {
  font-size: 0.75rem;
  color: var(--pk-muted);
}

.pk-snapshot-item .snap-time {
  font-size: 0.7rem;
  color: var(--pk-muted);
  white-space: nowrap;
}

.pk-snapshot-item .snap-count {
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

/* Legend / markets */

.pk-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.3rem 0;
}

.pk-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pk-legend-item .legend-name {
  flex: 1;
  color: var(--pk-text);
}

.pk-legend-item .legend-pct {
  font-weight: 600;
  color: var(--pk-text);
}

/* Quick actions */

.pk-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.5rem;
  border: 1px solid var(--pk-border);
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--pk-text);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  height: 100%;
}

.pk-quick-action:hover {
  border-color: var(--pk-primary);
  background: #f6f8ff;
  color: var(--pk-text);
}

.pk-quick-action .qa-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.6rem;
  background: #eef1fb;
  color: var(--pk-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* Approval summary */

.pk-approval-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
}

.pk-approval-item .ap-icon {
  width: 34px;
  height: 34px;
  border-radius: 0.55rem;
  background: #eef1fb;
  color: var(--pk-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pk-approval-item .ap-label {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pk-text);
}

.pk-approval-item .ap-sub {
  font-size: 0.72rem;
  color: var(--pk-muted);
  display: block;
}

.pk-approval-item .ap-count {
  font-weight: 700;
  color: var(--pk-text);
}

/* Grid enhancer: sortable / searchable / paginated tables (pk-grid.js) */

.pk-grid-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pk-grid-search {
  max-width: 260px;
}

.pk-grid-pagesize {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--pk-muted);
  white-space: nowrap;
  margin-bottom: 0;
}

.pk-grid-pagesize-select {
  width: auto;
}

.pk-grid-table thead th.pk-grid-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.pk-grid-table thead th.pk-grid-sortable:hover {
  color: var(--pk-primary);
}

.pk-grid-sort-indicator {
  font-size: 0.7em;
  color: var(--pk-primary);
}

.pk-grid-table tbody tr.pk-row-alt {
  background-color: rgba(47, 94, 255, 0.03);
}

.pk-grid-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--pk-muted);
}

.pk-grid-pagination {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pk-grid-page-label {
  white-space: nowrap;
}

/* Sticky form action bar (Create/Edit Save & Cancel) */

.pk-form-actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--pk-border);
  padding: 0.9rem 0;
  margin-top: 1.5rem;
  display: flex;
  gap: 0.6rem;
  z-index: 5;
}

@media (max-width: 991.98px) {
  .pk-header-title .subtitle {
    display: none;
  }
}

/* Below this width the header cannot hold a 320px field, the title and the
   right-hand controls at once. The field collapses to an icon button;
   activating it expands the field over the title rather than squeezing it,
   so nothing is crushed and the right-hand controls never move. */
@media (max-width: 766.98px) {
  .pk-search {
    flex: 0 0 auto;
  }

  .pk-search-toggle {
    display: inline-flex;
  }

  .pk-search .pk-search-field {
    display: none;
  }

  .pk-search.is-expanded .pk-search-toggle {
    display: none;
  }

  .pk-search.is-expanded {
    /* Takes the room the title was using, for as long as it is open. */
    flex: 1 1 auto;
  }

  .pk-search.is-expanded .pk-search-field {
    display: flex;
  }

  /* The title yields rather than compressing to an ellipsis stub. */
  .pk-search.is-expanded ~ .pk-header-title,
  .pk-search.is-expanded ~ .pk-company-pill {
    display: none;
  }
}

/* ---------- Admin Portal: Provision Tenant wizard ---------- */

.pk-wizard-steps {
  display: flex;
  gap: 0.5rem;
}

.pk-wizard-step {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.5rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid var(--pk-border);
  color: var(--pk-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.pk-wizard-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--pk-border);
  color: var(--pk-text);
  margin-right: 0.4rem;
  font-size: 0.8rem;
}

.pk-wizard-step.active {
  color: var(--pk-primary);
  border-color: var(--pk-primary);
}

.pk-wizard-step.active .num {
  background: var(--pk-primary);
  color: #fff;
}

.pk-wizard-step.completed .num {
  background: var(--pk-success);
  color: #fff;
}

/* ---------- Admin Portal: provisioning stage tracker ---------- */

.pk-stage {
  flex: 1;
  min-width: 10rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--pk-border);
  background: #fff;
}

.pk-stage-label {
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.pk-stage-done {
  border-color: var(--pk-success);
}

.pk-stage-failed {
  border-color: var(--pk-danger, #dc3545);
}

/* ==========================================================================
   COMPACT LAYER - the information-density standard
   ==========================================================================
   Paduka ERP is a business application, not a marketing site. The priority is
   showing more data clearly without clutter: dense but organized, never
   cramped. Full standard and rationale: docs/ui-design-standard.md

   This block sits LAST on purpose, so it wins over both Bootstrap and the
   shell rules above without needing !important.

   Two things it covers, and why each is needed:

     1. Bootstrap components site.css never styled at all. Before this, the
        only rule mentioning .form-control was a focus outline - so every
        input, select, button, card and table ran at Bootstrap's
        general-purpose defaults.

     2. Anything that must go BELOW what the 13px root already gives. Inputs
        and buttons land at ~31px from the root change alone and need no help;
        grid text (11-12px) and headings do.

   DO NOT raise these values because a control "looks tight". That judgement,
   applied repeatedly, is exactly how a dense ERP turns back into a dashboard
   that fits a third of the rows.

   The public marketing site is deliberately unaffected - it loads only
   public-site.css and shares nothing with this file.
   ========================================================================== */

/* ---------- Typography ----------
   h2 is the page title in this codebase (48 uses), h5 the section/card title
   (33), h6 a sub-heading (18). Bootstrap's defaults for these are 2rem/
   1.25rem/1rem, which at a 13px root still overshoot the standard. */

h1, .h1 { font-size: 1.55rem; }   /* ~20px - page title, upper bound */
h2, .h2 { font-size: 1.45rem; }   /* ~19px - page title, the common case */
h3, .h3 { font-size: 1.25rem; }   /* ~16px - section title */
h4, .h4 { font-size: 1.15rem; }   /* ~15px */
h5, .h5 { font-size: 1.08rem; }   /* ~14px - card/section title */
h6, .h6 { font-size: 0.96rem; }   /* ~12.5px - sub-heading */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  line-height: 1.25;
}

/* ---------- Forms ----------
   .form-control and .btn already land at ~31px from the 13px root (0.375rem
   padding + 1.5 line-height), which is inside the 30-34px target, so their
   heights are deliberately left alone. Only the label, help text and the
   gap between fields need tightening. */

.form-label {
  font-size: 0.88rem;          /* ~11.5px */
  font-weight: 500;
  margin-bottom: 0.2rem;
  color: var(--pk-text);
}

.form-text {
  font-size: 0.82rem;          /* ~10.5px */
  margin-top: 0.15rem;
}

.form-control, .form-select {
  font-size: 0.96rem;          /* ~12.5px */
}

/* ---- Bootstrap control surface, aligned to .pk-form-page ----
   The raw Bootstrap form views inherit heavier Bootstrap defaults.
   Align only the control surface; do not change height, padding or font size.
   Bare specificity is intentional so existing specialized blocks continue
   to override these defaults. Do NOT use !important. */
.form-control, .form-select {
  border-color: #dee2e6;
  border-radius: 4px;
}

/* Match the .pk-form-page disabled/readonly surface. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: #f6f7fb;
}

/* Match the existing .pk-form-page select-arrow visual treatment.
   Keep Bootstrap's existing background-position because its padding-right
   is designed around that position. */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 10px 10px;
}

/* Preserve Bootstrap's existing small-control radius.
   The global alignment above must not unintentionally change the
   nine existing .form-control-sm controls. */
.form-control-sm {
  border-radius: .2rem;
}

.form-control::placeholder { font-size: 0.96rem; }

/* Tighten the vertical rhythm between fields. Bootstrap's grid gutter is
   what actually separates stacked form rows on these screens. */
.form-control, .form-select, .form-check { margin-bottom: 0; }

.form-check-input { margin-top: 0.2rem; }
.form-check-label { font-size: 0.96rem; }

.input-group-text { font-size: 0.96rem; padding: 0.25rem 0.5rem; }

.invalid-feedback, .text-danger.field-validation-error {
  font-size: 0.82rem;
}

/* Form section heading: a small label followed by a hairline rule.

   This replaces wrapping each group of fields in its own .card. A card costs
   a border, a header bar and body padding on all four sides; on a short form
   that chrome takes more room than the fields it contains, and equal-height
   cards in a grid stretch the shortest group to match the tallest, which is
   where the large empty areas came from. A rule gives the same grouping for
   one line of vertical space.

   Use with a .row of .col-md-6 field columns beneath it. */
.pk-form-section {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.15rem 0 0.55rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--pk-text);
  white-space: nowrap;
}

.pk-form-section::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--pk-rule);
}

/* The first section sits directly under the page heading, which already
   provides separation. */
.pk-form-section:first-child { margin-top: 0; }

/* Actions row, closing the form. */
.pk-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.15rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--pk-rule);
}

/* An informational note inside a form - "roles are managed elsewhere",
   "this replaces the existing password", and so on.

   Replaces the `alert alert-light border small text-muted` combination that
   was repeated across User/Edit, User/SetPassword and Role/_Form. Bootstrap's
   .alert is padded for a page-level message and is too heavy for a line of
   guidance sitting between fields; four copies of the same four-class
   incantation is also exactly the duplication this pass exists to remove. */
.pk-form-note {
  padding: 0.45rem 0.6rem;
  border-left: 2px solid var(--pk-rule);
  background: var(--pk-bg);
  border-radius: 0 0.25rem 0.25rem 0;
  font-size: 0.9rem;
  color: var(--pk-muted);
}

/* The required-field marker. Was an inline style on one page. */
.pk-req { color: var(--pk-danger); font-weight: 600; }

/* ---------- Colour swatch ----------
   The one place this application renders stored data AS a colour. The
   background comes from Product_Color.ColorHexCode, and only after the
   value has been checked against a hex pattern — the column has no CHECK,
   so a row written by direct SQL can hold anything.

   The empty state is a diagonal slash rather than a blank square, so "no
   hex code" cannot be mistaken for white. */
.pk-color-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--pk-rule);
  border-radius: 3px;
  background-color: transparent;
  vertical-align: -2px;
}

.pk-color-swatch-lg {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  vertical-align: middle;
}

.pk-color-swatch-none {
  background-color: #fff;
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--pk-rule) calc(50% - 1px),
    var(--pk-rule) calc(50% + 1px),
    transparent calc(50% + 1px));
}

/* ==========================================================================
   Form page — the reusable content-area form language.

   Source of truth: design/raw-material-creation.html (Main.dc.html). Every
   rule is scoped under .pk-form-page, a wrapper a view puts around its own
   page head and form card, so nothing here can reach the sidebar, header,
   toasts or any screen that does not opt in. Class names deliberately reuse
   Bootstrap's form vocabulary (.form-label, .form-control, .form-select) so
   tag-helper markup stays ordinary; the scope is what makes the override
   local. Values are the mockup's own pixels, not rem — the compact standard
   in docs/ui-design-standard.md is measured in px too.
   ========================================================================== */

.pk-form-page {
  --fp-text: #1f2430;
  --fp-soft: #4b5468;
  --fp-muted: #8a94a6;
  --fp-faint: #b7bece;
  /* A SECOND, independent token set. Retinting :root alone would leave
     every .pk-form-page screen (Raw Material, Colour, Task Source,
     Workflow Definition, …) on the old blue while the rest of the
     application moved — the forms would look like a different product.
     --fp-danger stays #ef4444 deliberately: the mockup's own invalid-input
     border is that exact value, and its darker #c62828 is already carried
     separately by --fp-danger-text below. */
  --fp-accent: #1B5FAA;
  --fp-accent-dark: #14497f;
  --fp-accent-soft: #eaf1f9;
  --fp-border: #dee2e6;
  --fp-card-border: #e9ecf3;
  --fp-rule: #d5dced;
  --fp-bg: #f2f4f9;
  --fp-disabled-bg: #f6f7fb;
  --fp-panel-bg: #fafbfd;
  --fp-panel-border: #dbe3f8;
  --fp-dashed: #bcc8e8;
  --fp-dashed-bg: #fafbff;
  --fp-danger: #ef4444;
  --fp-danger-text: #c62828;
  --fp-danger-bg: #fdf1f1;
  --fp-danger-border: #f3c9c9;
  --fp-warning-text: #b26a00;
  --fp-warning-bg: #fffdf9;
  --fp-warning-border: #f0d9b5;
  --fp-warning-chip: #fdf3e6;
  /* The mockup contains no vivid green at all — #148f5a is its only one.
     --fp-success-text below already held that value, so this is the last
     place the old palette survived. */
  --fp-success: #148f5a;
  --fp-success-text: #148f5a;
  --fp-success-bg: #f2f7f4;
  --fp-success-border: #cfe8dc;

  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--fp-text);
  font-size: 13px;
  line-height: 1.4;
}

/* ---- Page head: breadcrumb, title, page-level actions ---- */
.pk-form-page .form-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.pk-form-page .form-breadcrumb {
  font-size: 10.4px;
  color: var(--fp-muted);
  margin-bottom: 3px;
}

.pk-form-page .form-breadcrumb span + span::before {
  content: "\203A";
  margin: 0 6px;
}

.pk-form-page .form-page-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fp-text);
}

/* Optional one-line purpose statement under a form page title. */
.pk-form-page .form-page-subtitle {
  margin: 3px 0 0;
  font-size: 11.44px;
  color: var(--fp-muted);
}

.pk-form-page .form-page-actions {
  display: flex;
  gap: 6px;
}

/* ---- Buttons ---- */
.pk-form-page .btn-form {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6.5px 15px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 11.7px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.pk-form-page .btn-form:focus-visible,
.pk-form-page .btn-form-link:focus-visible,
.pk-form-page .pk-toggle:focus-visible {
  outline: 2px solid var(--fp-accent);
  outline-offset: 2px;
}

.pk-form-page .btn-form-primary {
  background: var(--fp-accent);
  border-color: var(--fp-accent);
  color: #fff;
}

.pk-form-page .btn-form-primary:hover { background: var(--fp-accent-dark); border-color: var(--fp-accent-dark); color: #fff; }
.pk-form-page .btn-form-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.pk-form-page .btn-form-ghost {
  background: #fff;
  border-color: var(--fp-rule);
  color: var(--fp-soft);
}

.pk-form-page .btn-form-ghost:hover { border-color: var(--fp-accent); color: var(--fp-accent); }

.pk-form-page .btn-form-quiet { background: transparent; color: var(--fp-muted); }
.pk-form-page .btn-form-quiet:hover { color: var(--fp-text); }

.pk-form-page .btn-form-sm { padding: 5.2px 11px; }

/* "Add" inside a panel — filled, 28px like the row controls beside it. */
.pk-form-page .btn-form-add {
  height: 28px;
  padding: 0 13px;
  background: var(--fp-accent);
  border-color: var(--fp-accent);
  color: #fff;
}

.pk-form-page .btn-form-add:hover { background: var(--fp-accent-dark); border-color: var(--fp-accent-dark); color: #fff; }

/* "Add range" — dashed, quiet, 26px. */
.pk-form-page .btn-form-dashed {
  height: 26px;
  padding: 0 11px;
  border: 1px dashed #9fb2e8;
  background: #fff;
  color: var(--fp-accent);
  font-size: 11.18px;
}

.pk-form-page .btn-form-dashed:hover { background: var(--fp-accent-soft); }

/* An icon-only or text link action, e.g. Remove. */
.pk-form-page .btn-form-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.18px;
  color: var(--fp-danger);
  cursor: pointer;
}

.pk-form-page .btn-form-link:hover { color: var(--fp-danger-text); }
.pk-form-page .btn-form-link:disabled { opacity: 0.4; cursor: not-allowed; }
.pk-form-page .btn-form svg,
.pk-form-page .btn-form-link svg { flex-shrink: 0; }

/* ---- The card ---- */
.pk-form-page .form-card {
  background: #fff;
  border: 1px solid var(--fp-card-border);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(20, 24, 40, 0.03);
  padding: 15px;
}

/* ---- Section header: title, optional badge, rule, optional note ---- */
.pk-form-page .form-section {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 15px 0 7px;
  font-size: 12.74px;
  font-weight: 600;
  color: var(--fp-text);
}

.pk-form-page .form-section--first { margin-top: 0; }

.pk-form-page .form-section-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--fp-rule);
}

.pk-form-page .form-section-badge {
  padding: 1.5px 6px;
  border-radius: 20px;
  background: var(--fp-accent-soft);
  color: var(--fp-accent);
  font-size: 9.75px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pk-form-page .form-section-badge:empty { display: none; }

/* A collapsed group of secondary fields inside a form — the "More details"
   disclosure the Article form opens with closed.

   NEW IN S4, and native <details>/<summary> on purpose: this solution has no
   collapse component, no accordion and no JS toggle, and a disclosure that works
   with scripting disabled needs none. The summary keeps the .form-section type
   scale so a closed group reads as a section heading rather than as a control,
   and the marker is the only decoration.

   Fields inside are still ordinary .form-grid / .form-field markup, so nothing
   about validation or binding changes when a group is closed — a server-side
   error on a collapsed field must force the group open, which the view does with
   the `open` attribute. */
.pk-form-page details.form-more {
  margin-top: 18px;
  border-top: 1px solid var(--fp-rule);
  padding-top: 10px;
}

.pk-form-page details.form-more > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.83px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--fp-soft);
  padding: 2px 0;
}

.pk-form-page details.form-more > summary::-webkit-details-marker { display: none; }

.pk-form-page details.form-more > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4.5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .12s ease;
}

.pk-form-page details.form-more[open] > summary::before { transform: rotate(90deg); }

.pk-form-page details.form-more > summary:hover { color: var(--fp-accent); }

.pk-form-page details.form-more > .form-grid { margin-top: 12px; }

.pk-form-page .form-section-note {
  font-size: 10.4px;
  font-weight: 500;
  color: var(--fp-muted);
}

/* ---- Grids ---- */
.pk-form-page .form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.pk-form-page .form-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pk-form-page .form-grid.cols-uom { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.6fr; align-items: end; }
.pk-form-page .form-grid:empty { display: none; }
.pk-form-page .form-field { min-width: 0; }
.pk-form-page .form-field.span-2 { grid-column: span 2; }

/* ---- Labels, help, errors ---- */
.pk-form-page .form-label {
  display: block;
  margin-bottom: 2.6px;
  font-size: 11.44px;
  font-weight: 500;
  color: var(--fp-text);
}

.pk-form-page .form-req { color: var(--fp-danger); font-weight: 600; }

.pk-form-page .form-help {
  margin-top: 1.95px;
  font-size: 10.66px;
  line-height: 1.45;
  color: var(--fp-muted);
}

.pk-form-page .form-help.is-accent { color: var(--fp-accent); }
.pk-form-page .form-help.is-success { color: var(--fp-success); }
.pk-form-page .form-help b { color: var(--fp-soft); font-weight: 600; }

.pk-form-page .form-error {
  display: block;
  margin-top: 2px;
  font-size: 10.66px;
  color: var(--fp-danger-text);
}

.pk-form-page .form-error:empty { display: none; }

/* Form-level errors: the validation summary, hidden while valid. */
.pk-form-page .form-alert {
  margin-bottom: 12px;
  padding: 8px 11px;
  border: 1px solid var(--fp-danger-border);
  border-radius: 7px;
  background: var(--fp-danger-bg);
  color: var(--fp-danger-text);
  font-size: 11.7px;
}

.pk-form-page .form-alert ul { margin: 0; padding-left: 16px; }
.pk-form-page .form-alert.validation-summary-valid { display: none; }

/* An inline notice inside a form — guidance about what a choice will do,
   never a validation failure. .form-alert stays danger-only and keeps its
   job as the validation summary; this reads as its calmer sibling, told
   apart by colour rather than by shape.

   The amber combination is not new: .size-summary.is-warning already
   renders exactly these three tokens in the Raw Material size breakup.
   This only gives the treatment a name that is not bound to one feature. */
.pk-form-page .form-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--fp-rule);
  border-radius: 5px;
  background: var(--fp-panel-bg);
  color: var(--fp-soft);
  font-size: 11.44px;
  line-height: 1.45;
}

.pk-form-page .form-notice-warning {
  border-color: var(--fp-warning-border);
  background: var(--fp-warning-chip);
  color: var(--fp-warning-text);
}

.pk-form-page .form-notice b { font-weight: 600; }

/* A read-only readout of values something ELSE calculated — the database,
   or a script mirroring it. Distinct from .form-notice (one sentence of
   guidance) and .form-chip (one inline value): this is caption/value pairs
   plus the provenance of the number, and it must never read as a control
   the operator can type into.

   State arrives as Bootstrap's own class names because the scripts that
   fill these panels assign className wholesale. Re-tinting them inside the
   component is the established shape here, not a new idea —
   .pk-form-page .size-msg.text-danger already does exactly this — and it
   is what lets such a script stay untouched. */
.pk-form-page .form-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  min-height: 30.5px;
  padding: 5px 10px;
  border: 1px solid var(--fp-rule);
  border-radius: 5px;
  background: var(--fp-panel-bg);
  color: var(--fp-text);
  font-size: 11.44px;
  line-height: 1.45;
}

.pk-form-page .form-readout .form-help { margin-top: 0; }
.pk-form-page .form-readout .fw-semibold { font-weight: 600; }
.pk-form-page .form-readout .text-danger { color: var(--fp-danger-text) !important; }

.pk-form-page .form-readout-note {
  margin-left: auto;
  max-width: 16rem;
  text-align: right;
  font-size: 10.66px;
  color: var(--fp-muted);
}

/* ---- Controls ---- */
.pk-form-page .form-control,
.pk-form-page .form-select {
  display: block;
  width: 100%;
  height: 30.5px;
  min-height: 0;
  padding: 0 9.75px;
  border: 1px solid var(--fp-border);
  border-radius: 5px;
  background-color: #fff;
  box-shadow: none;
  color: var(--fp-text);
  font-size: 12.48px;
  line-height: 28px;
}

/* A textarea is the one control whose height must come from its own `rows`.
   The rule above fixes every control at 30.5px and zeroes vertical padding —
   correct for a single-line input, but it overrides Bootstrap's own
   textarea safeguards (specificity 0,2,0 beats textarea.form-control's
   0,1,1), collapsing rows="2" and rows="4" alike to one 30.5px line.

   height:auto hands sizing back to `rows`; the leading and padding are the
   compact equivalents of the single-line values (1.45 is the same leading
   .form-help already uses, and the horizontal 9.75px is unchanged), so any
   rows value works with no further rule. min-height keeps a textarea from
   ever sitting shorter than the input beside it. */
.pk-form-page textarea.form-control {
  height: auto;
  min-height: 30.5px;
  padding: 5px 9.75px;
  line-height: 1.45;
}

.pk-form-page .form-select {
  padding-right: 26px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 10px;
}

.pk-form-page .form-control::placeholder { color: var(--fp-faint); }

.pk-form-page .form-control:focus,
.pk-form-page .form-select:focus {
  outline: 0;
  border-color: var(--fp-accent);
  box-shadow: 0 0 0 3px rgba(47, 94, 255, 0.12);
}

.pk-form-page .form-select:focus {
  /* Hand-edited, NOT tokenised: a CSS custom property cannot be
     interpolated into a url(), so this hex has to be changed literally
     whenever the accent changes. %23 is an encoded '#'. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B5FAA' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Locked: a paired field whose partner is off, or a not-applicable pick. */
.pk-form-page .form-control:disabled,
.pk-form-page .form-select:disabled,
.pk-form-page .form-control[readonly] {
  border-color: var(--fp-card-border);
  background-color: var(--fp-disabled-bg);
  color: var(--fp-faint);
}

.pk-form-page .form-select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdd3e0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Invalid: red border and a faint red halo, no Bootstrap icon. */
.pk-form-page .form-control.is-invalid,
.pk-form-page .form-select.is-invalid:not([multiple]):not([size]),
.pk-form-page .form-control.input-validation-error,
.pk-form-page .form-select.input-validation-error {
  border-color: var(--fp-danger);
  background-color: #fdf7f7;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
  padding-right: 9.75px;
}

.pk-form-page .form-select.is-invalid:not([multiple]):not([size]),
.pk-form-page .form-select.input-validation-error {
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 9px center;
  background-size: 10px 10px;
}

/* Warning: amber, never red — an overlap is allowed. */
.pk-form-page .form-select.pk-range-warning,
.pk-form-page .form-control.pk-range-warning {
  border-color: var(--fp-warning-border);
  background-color: var(--fp-warning-bg);
}

.pk-form-page .form-select.pk-range-warning {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b26a00' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Row-level controls (stock rows, size ranges): 28px. */
.pk-form-page .form-control-sm,
.pk-form-page .form-select-sm {
  height: 28px;
  padding: 0 8px;
  font-size: 11.7px;
  line-height: 26px;
  border-radius: 5px;
}

.pk-form-page .form-select-sm { padding-right: 24px; background-position: right 8px center; background-size: 9px 9px; }

/* ---- The same toggle on screens outside .pk-form-page (REQ-14) ----
   The Active/Inactive toggle is the application-wide standard for editing
   IsActive, and several older forms (security, catalogue, organization)
   do not use the .pk-form-page shell. These unscoped rules give them the
   identical control, with the .pk-form-page palette as literal fallbacks;
   the scoped rules below still win inside .pk-form-page, unchanged. */
.form-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30.5px;
}

.pk-toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #d5dced;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pk-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 40, 0.15);
  transition: left 0.15s ease;
}

.pk-toggle[aria-checked="true"] { background: #1B5FAA; }
.pk-toggle[aria-checked="true"]::after { left: 16px; }
.pk-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.pk-toggle:focus-visible { outline: 2px solid #1B5FAA; outline-offset: 2px; }
.pk-toggle-text { font-size: 12.48px; color: #1f2430; }
.pk-toggle[aria-checked="false"] + .pk-toggle-text { color: #8a94a6; }

.pk-toggle-source {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- Toggle switch over a Yes/No select (pk-switch.js) ----
   The select stays in the DOM as the posted control; the switch is the
   visible one. Without JavaScript the select shows as itself. */
.pk-form-page .form-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30.5px;
}

.pk-form-page .pk-toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--fp-rule);
  cursor: pointer;
  transition: background 0.15s ease;
}

.pk-form-page .pk-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 40, 0.15);
  transition: left 0.15s ease;
}

.pk-form-page .pk-toggle[aria-checked="true"] { background: var(--fp-accent); }
.pk-form-page .pk-toggle[aria-checked="true"]::after { left: 16px; }
.pk-form-page .pk-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.pk-form-page .pk-toggle-text { font-size: 12.48px; color: var(--fp-text); }
.pk-form-page .pk-toggle[aria-checked="false"] + .pk-toggle-text { color: var(--fp-muted); }

.pk-form-page .pk-toggle-source {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- Dashed block: the group-driven parts (specification) ---- */
.pk-form-page .form-dashed {
  border: 1px dashed var(--fp-dashed);
  border-radius: 8px;
  background: var(--fp-dashed-bg);
  padding: 12px;
}

.pk-form-page .form-dashed > .form-help { margin-top: 6px; }

.pk-form-page .form-seq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--fp-accent);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.pk-form-page .form-divider {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #e4e9f7;
}

/* The composed Item Name: bigger, bolder, and visibly read-only. */
.pk-form-page .form-item-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pk-form-page .form-control.form-item-name {
  flex: 1;
  height: 34px;
  padding: 0 11px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 32px;
}

.pk-form-page .form-control.form-item-name.pk-composed,
.pk-form-page .form-control.form-item-name[readonly] {
  border-color: var(--fp-rule);
  background-color: var(--fp-bg);
  color: var(--fp-text);
}

.pk-form-page .form-item-name-lock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.4px;
  color: var(--fp-muted);
  white-space: nowrap;
}

/* ---- Chips: a one-line reading of a state ---- */
.pk-form-page .form-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30.5px;
  padding: 0 11px;
  border-radius: 5px;
  font-size: 11.44px;
  color: var(--fp-text);
}

.pk-form-page .form-chip b { font-weight: 600; }
.pk-form-page .form-chip-success { background: var(--fp-success-bg); border: 1px solid var(--fp-success-border); }
.pk-form-page .form-chip svg { flex-shrink: 0; }

/* ---- Colours & storage: an ADD STRIP over a TABLE of saved rows ----
   The design's shape (Main.dc.html): you enter a stock row once at the top
   and it joins the table below, where it reads as text with icon actions
   rather than a wall of inputs. A row's size breakup is nested underneath
   it and opened from the Sizes badge, so a material with several colours
   stays scannable. */

.pk-form-page .stock-add {
  padding: 10px;
  border: 1px solid var(--fp-card-border);
  border-radius: 7px;
  background: var(--fp-panel-bg);
}

.pk-form-page .stock-add-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.8fr 0.95fr 0.9fr 0.65fr 0.65fr 0.7fr auto;
  gap: 8px;
  align-items: end;
}

.pk-form-page .stock-add .form-label {
  font-size: 10.66px;
  color: var(--fp-muted);
}

/* ---- The saved-row table ---- */
.pk-form-page .stock-table-wrap {
  margin-top: 9px;
  border: 1px solid var(--fp-card-border);
  border-radius: 7px;
  overflow: hidden;
}

.pk-form-page .stock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.7px;
}

.pk-form-page .stock-table thead th {
  padding: 6px 10px;
  background: #f7f8fc;
  border-bottom: 1px solid var(--fp-card-border);
  font-size: 11.18px;
  font-weight: 600;
  color: var(--fp-muted);
  text-align: left;
  white-space: nowrap;
}

.pk-form-page .stock-table td {
  padding: 5px 10px;
  border-bottom: 1px solid #f0f2f7;
  vertical-align: middle;
}

.pk-form-page .stock-table tbody tr:last-child > td { border-bottom: 0; }
.pk-form-page .stock-table .num { text-align: right; }

/* An expanded row and its breakup read as one block. */
.pk-form-page .stock-row.is-open > td { background: #f7f9ff; }
.pk-form-page .size-row.is-open > td { background: #f7f9ff; border-bottom: 1px solid var(--fp-card-border); }

.pk-form-page .stock-colour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pk-form-page .stock-muted { color: var(--fp-faint); }

/* A cell shows text until the row is opened for editing, then the control.
   The control is only HIDDEN, never disabled — a disabled input posts
   nothing, and every value here must reach the server either way. */
.pk-form-page .stock-cell .form-control,
.pk-form-page .stock-cell .form-select { min-width: 6rem; }

.pk-form-page .stock-empty {
  padding: 14px 10px;
  text-align: center;
  color: var(--fp-muted);
  font-size: 11.7px;
}

.pk-form-page .stock-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

/* ---- The Sizes badge: a count that opens the breakup ---- */
.pk-form-page .size-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1.5px 7px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--fp-accent-soft);
  color: var(--fp-accent);
  font-size: 9.75px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.pk-form-page .size-badge:hover { background: #e2e8fb; }
.pk-form-page .size-badge:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 2px; }
.pk-form-page .size-badge[aria-expanded="true"] { background: var(--fp-accent); color: #fff; }
.pk-form-page .size-badge[aria-expanded="true"] .size-badge-chevron { transform: rotate(180deg); }
.pk-form-page .size-badge-chevron { transition: transform 0.15s ease; }

/* A row whose ranges carry an error or a warning says so on the badge. */
.pk-form-page .size-badge.is-warning { background: var(--fp-warning-chip); color: var(--fp-warning-text); }
.pk-form-page .size-badge.is-warning[aria-expanded="true"] { background: var(--fp-warning-text); color: #fff; }
.pk-form-page .size-badge.is-error { background: var(--fp-danger-bg); color: var(--fp-danger-text); }
.pk-form-page .size-badge.is-error[aria-expanded="true"] { background: var(--fp-danger); color: #fff; }
.pk-form-page .size-badge.is-none { background: transparent; color: var(--fp-faint); cursor: default; }

.pk-form-page .stock-rows-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.pk-form-page .stock-rows-foot .form-help { margin-top: 0; }

/* ---- Size breakup, nested UNDER a stock row ---- */
.pk-form-page .size-block {
  margin: 0 0 9px 24px;
  padding: 9px 11px;
  border: 1px solid var(--fp-panel-border);
  border-radius: 7px;
  background: #fff;
}

.pk-form-page .size-block-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 7px;
}

.pk-form-page .size-block-title { font-size: 11.18px; font-weight: 600; color: var(--fp-text); }
.pk-form-page .size-block-head .form-select { width: 12rem; }
.pk-form-page .size-block-head .form-help { margin-top: 0; }

/* Seq | Label | Size type | From | To | message | actions */
.pk-form-page .size-grid {
  display: grid;
  grid-template-columns: 34px 1.1fr 0.9fr 1fr 1fr 1.9fr 56px;
  gap: 8px;
  align-items: center;
}

.pk-form-page .size-grid-head {
  padding: 0 2px 3px;
  font-size: 10.4px;
  font-weight: 600;
  color: var(--fp-muted);
}

.pk-form-page .size-range {
  padding: 3px 2px;
  border-top: 1px solid #f0f2f7;
  font-size: 11.18px;
}

/* A range reads as text until its own pencil opens it. */
.pk-form-page .size-range-label { font-weight: 600; }
.pk-form-page .size-range-type { color: var(--fp-soft); }
.pk-form-page .size-range-value { color: var(--fp-text); }
.pk-form-page .size-range-value.is-empty { color: var(--fp-faint); }

.pk-form-page .size-seq {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: var(--fp-muted);
  font-size: 11.18px;
  font-weight: 600;
}

.pk-form-page .size-range .form-control[data-role="label"] { font-weight: 600; }

.pk-form-page .size-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.66px;
  line-height: 1.35;
  min-width: 0;
}

/* Deliberately NOT display:none when empty — this is a grid cell, and
   removing it collapses the column so the Remove button jumps left on
   every range that has no message. */
.pk-form-page .size-msg.text-danger { color: var(--fp-danger-text) !important; }
.pk-form-page .size-msg.text-warning { color: var(--fp-warning-text) !important; }
.pk-form-page .size-msg.text-success { color: var(--fp-success-text) !important; }

.pk-form-page .size-range-actions { display: flex; justify-content: flex-end; padding-right: 2px; }

.pk-form-page .size-block-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #f0f2f7;
}

.pk-form-page .size-block-foot .form-help { margin-top: 0; }

/* RM-02: the per-row entry strip — Individual Size, Generate Individual
   Sizes, Physical Size Band — in the Colours & storage strip's language:
   unnamed controls over the list of rows that hold the real inputs. Flex,
   not grid, so a method's hidden fields leave no empty cells behind. */
.pk-form-page .size-entry {
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px dashed var(--fp-panel-border);
  border-radius: 6px;
  background: var(--fp-panel-bg);
}

.pk-form-page .size-entry-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.pk-form-page .size-entry .form-field { width: 8rem; }
.pk-form-page .size-entry .size-entry-method { width: 12rem; }
.pk-form-page .size-entry .size-entry-label { width: 14rem; }
.pk-form-page .size-entry-label-row { display: flex; align-items: center; gap: 4px; }
.pk-form-page .size-entry-label-row .form-control { flex: 1 1 auto; min-width: 0; }
.pk-form-page .size-entry-label-row .btn-form-link { flex: 0 0 auto; gap: 3px; font-size: 10.66px; white-space: nowrap; }
.pk-form-page .size-entry .form-label { font-size: 10.66px; color: var(--fp-muted); }
.pk-form-page .size-entry [hidden] { display: none !important; }
.pk-form-page .size-entry .form-error,
.pk-form-page .size-entry .form-help { margin-top: 6px; }

/* The kind of a size row — individual size or physical band — beside its label. */
.pk-form-page .size-kind {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--fp-panel-border);
  border-radius: 9px;
  background: var(--fp-panel-bg);
  color: var(--fp-muted);
  font-size: 9.6px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pk-form-page .size-kind:empty { display: none; }

/* The per-row verdict: "1 error, 1 warning — Save is blocked". */
.pk-form-page .size-summary { margin-left: auto; font-size: 10.66px; }
.pk-form-page .size-summary:empty { display: none; }

.pk-form-page .size-summary.is-error,
.pk-form-page .size-summary.is-warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 5px;
}

.pk-form-page .size-summary.is-error { background: var(--fp-danger-bg); border: 1px solid var(--fp-danger-border); color: var(--fp-danger-text); }
.pk-form-page .size-summary.is-warning { background: var(--fp-warning-chip); border: 1px solid var(--fp-warning-border); color: var(--fp-warning-text); }

/* ---- Actions ---- */
.pk-form-page .form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5.2px;
  margin-top: 15px;
  padding-top: 9px;
  border-top: 1px solid var(--fp-rule);
}

.pk-form-page .form-actions-note {
  margin-left: auto;
  font-size: 10.4px;
  color: var(--fp-muted);
}

.pk-form-page .form-actions-note b { color: var(--fp-soft); font-weight: 600; }
.pk-form-page .form-actions-note:empty { display: none; }

.pk-form-page .form-req-note { margin-top: 8px; }

/* ---- Responsive: compact, never cramped ---- */
@media (max-width: 991.98px) {
  .pk-form-page .form-grid,
  .pk-form-page .form-grid.cols-6,
  .pk-form-page .form-grid.cols-uom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* span-2 is a desktop-only refinement. In a two-column grid it cannot
     share a row, so it would wrap and leave the preceding field sitting
     alone beside a half-row gap. */
  .pk-form-page .form-field.span-2 { grid-column: auto; }
  .pk-form-page .stock-add-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The saved-row table scrolls sideways rather than shrinking past
     readability — the compact standard's rule for a wide grid. */
  .pk-form-page .stock-table-wrap { overflow-x: auto; }
  .pk-form-page .stock-table { min-width: 46rem; }
}

@media (max-width: 575.98px) {
  .pk-form-page .form-card { padding: 12px; }
  .pk-form-page .form-grid,
  .pk-form-page .form-grid.cols-6,
  .pk-form-page .form-grid.cols-uom { grid-template-columns: minmax(0, 1fr); }
  .pk-form-page .form-field.span-2 { grid-column: auto; }
  .pk-form-page .stock-add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-form-page .size-block { margin-left: 0; }
  .pk-form-page .size-entry .form-field,
  .pk-form-page .size-entry .size-entry-method,
  .pk-form-page .size-entry .size-entry-label { width: calc(50% - 4px); }
  .pk-form-page .size-grid { grid-template-columns: 28px 1fr 1fr 1fr 44px; }
  .pk-form-page .size-grid .size-range-type { display: none; }
  .pk-form-page .size-grid-head { display: none; }
  .pk-form-page .size-msg { grid-column: 1 / -1; }
  .pk-form-page .form-item-name-row { flex-wrap: wrap; }
  .pk-form-page .form-actions-note { margin-left: 0; width: 100%; }
  .pk-form-page .form-readout-note { margin-left: 0; max-width: none; text-align: left; }
}

/* ---------- Permission Catalogue tree ----------
   Module -> Feature -> Permission on one screen, using native
   <details>/<summary> - no tree library. Dense by design: a catalogue of
   ~200 permissions must be scannable without paging. */

.pk-tree {
  border: 1px solid var(--pk-border);
  border-radius: 0.4rem;
  background: #fff;
}

.pk-tree-module { border-bottom: 1px solid var(--pk-border); }
.pk-tree-module:last-child { border-bottom: 0; }

.pk-tree-module > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.96rem;
  list-style: none;
}
.pk-tree-module > summary::-webkit-details-marker { display: none; }
.pk-tree-module > summary::before {
  content: "\25B8"; /* right triangle */
  font-size: 0.7rem;
  color: var(--pk-muted);
  transition: transform 0.12s ease;
}
.pk-tree-module[open] > summary::before { transform: rotate(90deg); }
.pk-tree-module > summary:hover { background: var(--pk-bg); }

.pk-tree-name { color: var(--pk-text); }
.pk-tree-code { font-size: 0.8rem; color: var(--pk-muted); }
.pk-tree-meta { margin-left: auto; font-size: 0.8rem; color: var(--pk-muted); white-space: nowrap; }

.pk-tree-edit {
  font-size: 0.8rem;
  color: var(--pk-primary);
  text-decoration: none;
  white-space: nowrap;
}
.pk-tree-edit:hover { text-decoration: underline; }
/* Keep the edit link from toggling the module's expander. */
.pk-tree-module > summary .pk-tree-edit { margin-left: 0.5rem; }

.pk-tree-feature {
  padding: 0.3rem 0.75rem 0.3rem 1.6rem;
  border-top: 1px dashed var(--pk-border);
}
/* Nested sub-features indent one more step. */
.pk-tree-feature .pk-tree-feature { padding-right: 0; border-top-style: dotted; }

.pk-tree-feature-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.pk-tree-feature-row .pk-tree-edit { margin-left: auto; }

/* The drawer opener. Secondary to Edit beside it — Edit navigates to a real
   screen, this only reveals what the row already shows. */
.pk-tree-details {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--pk-muted);
  white-space: nowrap;
  cursor: pointer;
}
.pk-tree-details:hover { color: var(--pk-primary); text-decoration: underline; }
/* Details takes the right-hand end so the two controls stay together;
   without this, two margin-left:auto siblings would split the free space
   and strand Details in the middle of the row. */
.pk-tree-feature-row .pk-tree-details { margin-left: auto; }
.pk-tree-feature-row .pk-tree-details + .pk-tree-edit { margin-left: 0.5rem; }

.pk-tree-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem 0 0.15rem;
}

.pk-tree-permission {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--pk-border);
  border-radius: 999px;
  background: var(--pk-bg);
  font-size: 0.8rem;
  color: var(--pk-text);
  text-decoration: none;
  white-space: nowrap;
}
.pk-tree-permission:hover { border-color: var(--pk-primary); color: var(--pk-primary); }
.pk-tree-permission.is-inactive { opacity: 0.5; text-decoration: line-through; }

.pk-tree-empty { padding: 0.2rem 0; font-size: 0.82rem; color: var(--pk-muted); font-style: italic; }

/* Filter bar above catalogue grids: compact inline selects + the pk-grid
   search box the wrapper already provides. */
.pk-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
  margin: 0.65rem 0;
}
.pk-filter-bar .form-label { margin-bottom: 0.1rem; font-size: 0.82rem; color: var(--pk-muted); }
.pk-filter-bar select { min-width: 9rem; }

/* ---------- Buttons ----------
   Height comes from the root change; only the type size is pulled down. */

.btn {
  font-size: 0.9rem;           /* ~11.5px */
  font-weight: 500;
}

.btn-sm {
  font-size: 0.84rem;          /* ~11px - inline row actions */
  padding: 0.2rem 0.45rem;
}

/* ---------- Data grids ----------
   The most important surface in the application. Target: header 30-32px,
   rows 28-32px, text 11-12px. Bootstrap's cell padding is 0.5rem, which at
   this root gives ~33px rows - just over - so it is set explicitly. */

.table {
  font-size: 0.9rem;           /* ~11.5px */
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 0.35rem 0.5rem;     /* ~4.5px / 6.5px -> ~30px rows */
  vertical-align: middle;
}

.table > thead > tr > th {
  font-size: 0.86rem;          /* ~11px */
  font-weight: 600;
  color: var(--pk-muted);
  white-space: nowrap;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* One line per row is where the density comes from: a wrapped cell makes the
   whole row taller and costs a record elsewhere on screen. Overflow is
   handled by scrolling the table horizontally, NOT by truncating - a
   silently clipped value with no tooltip is lost data, and the standard
   calls for ellipsis only "where appropriate".

   Opt in per column where a value is genuinely disposable (a long
   description, a raw id) with .pk-truncate on the cell, and opt out with
   .text-wrap where a value must wrap. */
.table > tbody > tr > td {
  white-space: nowrap;
}

.table td.pk-truncate {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table td.text-wrap {
  white-space: normal;
}

/* Badges inside grids sit on a 30px row - the default is too tall. */
.table .badge { font-size: 0.8rem; padding: 0.2em 0.45em; font-weight: 500; }

/* Wide grids scroll horizontally rather than squeezing columns. */
.table-responsive { overflow-x: auto; }

/* ---------- Cards ----------
   Cards are containers, not decoration. Padding is what a card costs on
   every screen it appears on, and .card-body is used 68 times. */

.card { border-radius: 0.4rem; border-color: var(--pk-border); }
.card-body { padding: 0.75rem 0.85rem; }
.card-header { padding: 0.5rem 0.85rem; font-size: 0.96rem; font-weight: 600; }
.card-header .card-title, .card-title { margin-bottom: 0; font-size: 1.02rem; }

/* ---------- Alerts and badges ---------- */

.alert {
  font-size: 0.96rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.35rem;
  margin-bottom: 0.65rem;
}

.badge { font-weight: 500; }

/* ---------- Spacing ----------
   Dense, but not touching. Enough separation to tell sections, labels,
   fields, actions and rows apart - no more. */

.pk-content { padding: 0.85rem 1rem; }

.nav-tabs .nav-link { font-size: 0.96rem; padding: 0.35rem 0.7rem; }

.modal-header { padding: 0.6rem 0.85rem; }
.modal-body   { padding: 0.75rem 0.85rem; }
.modal-footer { padding: 0.5rem 0.85rem; }

.dropdown-menu { font-size: 0.96rem; }
.dropdown-item { padding: 0.3rem 0.75rem; }

/* ---------- Responsive ----------
   Compactness must not cost usability. Text does not shrink further on small
   screens; wide grids scroll instead. */

@media (max-width: 767.98px) {
  .pk-content { padding: 0.65rem 0.7rem; }
  .table td.pk-truncate { max-width: 12rem; }
}
/* ---- pk-messages: toasts, confirm modal, row flash ---------------------- */
/* Compact per docs/ui-design-standard.md. Toasts are server-rendered by the
   layouts (text present without JS); pk-messages.js animates and dismisses. */
.pk-toast-region {
    position: fixed; top: 12px; right: 12px; z-index: 1080;
    display: flex; flex-direction: column; gap: 6px; max-width: 360px;
}
.pk-toast {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; border-radius: 4px; font-size: 12px; line-height: 1.35;
    color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25);
    opacity: 0; transform: translateX(12px);
    transition: opacity .2s ease, transform .2s ease;
}
.pk-toast-shown { opacity: 1; transform: translateX(0); }
.pk-toast-leaving { opacity: 0; transform: translateX(12px); }
.pk-toast-success { background: #198754; }
.pk-toast-error { background: #dc3545; }
.pk-toast-close {
    margin-left: auto; border: 0; background: transparent; color: inherit;
    font-size: 14px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: .8;
}
.pk-toast-close:hover { opacity: 1; }

.pk-modal-overlay {
    position: fixed; inset: 0; z-index: 1090;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
}
.pk-modal {
    background: #fff; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.3);
    width: min(92vw, 380px); padding: 14px;
}
.pk-modal-body { font-size: 13px; margin-bottom: 12px; }
.pk-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

@keyframes pk-row-flash {
    0% { background-color: #fff3cd; }
    100% { background-color: transparent; }
}
tr.pk-row-flash > td { animation: pk-row-flash 2.5s ease-out; }

/* ==========================================================================
   AI Assistant — launcher + right-side drawer.
   Same --pk-* tokens, compact type scale and 30-34px control heights as the
   rest of the shell; no separate visual language.
   ========================================================================== */

.pk-ai-launcher {
    position: fixed; right: 18px; bottom: 18px; z-index: 1035;
    width: 46px; height: 46px; border-radius: 50%;
    border: none; background: var(--pk-primary); color: #fff;
    box-shadow: 0 4px 14px rgba(47, 94, 255, .35);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.pk-ai-launcher:hover { background: var(--pk-primary-dark); transform: translateY(-1px); }
.pk-ai-launcher:focus-visible { outline: 2px solid var(--pk-primary-dark); outline-offset: 2px; }
.pk-ai-launcher-mark { font-size: 12px; font-weight: 700; letter-spacing: .04em; }

.pk-ai-backdrop {
    position: fixed; inset: 0; z-index: 1039;
    background: rgba(31, 36, 48, .28);
    display: none;
}

.pk-ai-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1040;
    width: 380px; max-width: 100vw;
    background: #fff; border-left: 1px solid var(--pk-border);
    box-shadow: -6px 0 24px rgba(31, 36, 48, .12);
    display: flex; flex-direction: column;
}
.pk-ai-drawer[hidden] { display: none; }

.pk-ai-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: var(--pk-header-height); flex: 0 0 auto;
    padding: 0 10px 0 12px; border-bottom: 1px solid var(--pk-border);
}
.pk-ai-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pk-text); }
.pk-ai-title small { display: block; font-size: 10px; font-weight: 400; color: var(--pk-muted); }
.pk-ai-mark {
    width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto;
    background: var(--pk-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
}
.pk-ai-head-actions { display: flex; align-items: center; gap: 6px; }
.pk-ai-head-actions .pk-icon-btn { font-size: 18px; line-height: 1; }

.pk-ai-log {
    flex: 1 1 auto; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--pk-bg);
}
.pk-ai-msg { display: flex; }
.pk-ai-msg-user { justify-content: flex-end; }
.pk-ai-bubble {
    max-width: 88%; padding: 7px 10px; border-radius: 8px;
    font-size: 12px; line-height: 1.5;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.pk-ai-msg-assistant .pk-ai-bubble { background: #fff; border: 1px solid var(--pk-border); color: var(--pk-text); }
.pk-ai-msg-user .pk-ai-bubble { background: var(--pk-primary); color: #fff; }
.pk-ai-msg-error .pk-ai-bubble { background: #fdecec; border: 1px solid #f6c9c9; color: #98281f; }

.pk-ai-busy {
    flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-top: 1px solid var(--pk-border);
    font-size: 11px; color: var(--pk-muted);
}
.pk-ai-busy[hidden] { display: none; }
.pk-ai-busy-text { margin-left: 4px; }
.pk-ai-dot {
    width: 5px; height: 5px; border-radius: 50%; background: var(--pk-muted);
    animation: pk-ai-pulse 1.1s infinite ease-in-out;
}
.pk-ai-dot:nth-child(2) { animation-delay: .16s; }
.pk-ai-dot:nth-child(3) { animation-delay: .32s; }
@keyframes pk-ai-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.pk-ai-composer { flex: 0 0 auto; padding: 10px 12px 12px; border-top: 1px solid var(--pk-border); }
.pk-ai-composer textarea { font-size: 12px; resize: none; }
.pk-ai-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pk-ai-hint { font-size: 10px; color: var(--pk-muted); }

/* Tablet and below: a near-full-width panel over the content, with the
   backdrop active — the same drawer, not a second application. */
@media (max-width: 991.98px) {
    .pk-ai-drawer { width: min(440px, 92vw); }
    .pk-ai-backdrop:not([hidden]) { display: block; }
    .pk-ai-launcher { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .pk-ai-launcher, .pk-ai-dot { transition: none; animation: none; }
}

/* ==========================================================================
   Master Administration mockup — shared page-body components
   (design/UI mockups/Master Administration.dc.html)

   The mockup is a single-file canvas and expresses everything as inline
   styles. These are the same measurements expressed once, as shared classes,
   so a later screen reuses them instead of re-deriving them. Colours come
   from the :root tokens wherever a token exists; the few literals below are
   values the mockup introduces that no token covers yet.
   ========================================================================== */

/* ---- Grid: toolbar, table, cells ----------------------------------------
   The mockup's grid is PkGrid.dc.html, and these are its measurements
   expressed once. Applied to EVERY [data-pk-grid] wrapper — all 62 of them,
   provider and tenant alike — because a grid that looks different from the
   grid on the next screen is the thing the design standard exists to
   prevent.

   Nothing here changes behaviour. Sorting, paging and searching remain
   pk-grid.js's, untouched. The mockup's "Columns" and "Export" buttons are
   NOT reproduced: no such behaviour exists, and a control is never rendered
   for an action nobody can perform. */

/* The single toolbar. .pk-grid-filters is the view's OWN server-side GET
   form, which pk-grid.js labels and hosts the page-size control inside —
   see the note in that file for why there is one bar and not two. */
.pk-toolbar,
[data-pk-grid] > .pk-grid-toolbar,
form.pk-grid-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 5px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.pk-toolbar-spacer { flex: 1 1 auto; }

/* The hosted page-size control sits at the right-hand end of the view's own
   filter row, after Apply/Clear. */
.pk-grid-hosted-pagesize {
    margin-left: auto;
    display: flex;
    align-items: center;
}

[data-pk-grid] .pk-grid-search {
    width: 210px;
    max-width: 100%;
}

[data-pk-grid] .pk-grid-pagesize,
.pk-grid-filters .pk-grid-pagesize {
    gap: 6px;
    font-size: 11.5px;
    white-space: nowrap;
}

/* Every control in a toolbar is the mockup's 28px, whatever Bootstrap class
   the view happened to use. */
[data-pk-grid] > .pk-grid-toolbar .form-control,
[data-pk-grid] > .pk-grid-toolbar .form-select,
form.pk-grid-filters .form-control,
form.pk-grid-filters .form-select {
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    border-color: #dee2e6;
    border-radius: 3px;
}

form.pk-grid-filters .form-select {
    padding-right: 24px;
}

form.pk-grid-filters .form-label {
    font-size: 10.5px;
    color: var(--pk-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}

form.pk-grid-filters .btn {
    height: 28px;
    padding: 0 11px;
    font-size: 11.5px;
    border-radius: 3px;
}

/* ---- The table itself (PkGrid.dc.html) ---- */

/* The frame the mockup draws around the grid. Applied to the scroll
   container the views already wrap the table in. */
[data-pk-grid] .table-responsive {
    border: 1px solid var(--pk-border);
    border-radius: 4px;
    background: #fff;
}

[data-pk-grid] .table {
    margin-bottom: 0;
    border-collapse: collapse;
}

/* thead: 30px, not Bootstrap's ~48. The .table-light background the views
   set is replaced by the mockup's #f7f8fc. */
[data-pk-grid] .table > thead > tr > th {
    height: 30px;
    padding: 0 10px;
    background: #f7f8fc;
    border-bottom: 1px solid #dee3ef;
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 30px;
    color: #6b7488;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

[data-pk-grid] .table > tbody > tr > td {
    padding: 4px 10px;
    border-bottom: 1px solid #f0f2f7;
    border-top: 0;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.35;
    color: var(--pk-text);
    vertical-align: middle;
}

[data-pk-grid] .table > tbody > tr:last-child > td {
    border-bottom: 0;
}

[data-pk-grid] .table > tbody > tr:hover > td {
    background: #f6f8fc;
}

/* ---- Row content ---- */

/* Row actions are LINKS in the mockup, not buttons — three bordered
   Bootstrap buttons per row is most of why the grid reads as twice its
   necessary height. The markup stays as it is (some actions are POST forms
   and must remain <button>); only the appearance changes. */
[data-pk-grid] .table td .btn {
    height: auto;
    /* Vertical padding is the HIT AREA, not decoration. The text alone is
       11.5px x 1.4 = 16.1px, and these are standalone controls in a cell —
       not links inside a sentence — so WCAG 2.2 target-size (minimum) asks
       for 24px. 4px top and bottom brings the box to 24.1px while the text
       still reads as the mockup's compact link. */
    padding: 4px 0;
    border: 0;
    background: none;
    border-radius: 0;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--pk-primary);
    vertical-align: baseline;
    box-shadow: none;
}

/* Keyboard focus, restored deliberately.
   The rule above sets box-shadow:none at specificity (0,3,1), which beats
   the global `.btn:focus` ring at (0,2,0) EVEN WHILE FOCUSED — so without
   this, all 211 row actions had no visible focus indicator. An outline
   rather than a box-shadow: it is not what the base rule suppresses, it
   costs no layout, and it shows on every colour variant. Matches the
   outline/offset already used by .pk-nav-section-title, .btn-form and
   .pk-ai-launcher. */
[data-pk-grid] .table td .btn:focus-visible {
    outline: 2px solid var(--pk-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

[data-pk-grid] .table td .btn:hover {
    text-decoration: underline;
    background: none;
    color: var(--pk-primary-dark);
}

[data-pk-grid] .table td .btn-outline-danger,
[data-pk-grid] .table td .btn-danger {
    color: var(--pk-danger);
}

[data-pk-grid] .table td .btn-outline-success,
[data-pk-grid] .table td .btn-success {
    color: var(--pk-success);
}

/* Without this the one warning action in the application —
   Views/IntegrationTenants/Index.cshtml "Disable" — fell through to the
   base rule and rendered in the same blue as Edit, losing its caution
   signal entirely. */
[data-pk-grid] .table td .btn-outline-warning,
[data-pk-grid] .table td .btn-warning {
    color: var(--pk-warning);
}

/* The ONE row action in the application that is deliberately solid:
   Views/OrganizationModule/Index.cshtml "Modules", which is that row's only
   action and its single call to action. Every other in-cell action is an
   outline variant, so flattening this one would have demoted the emphasis
   its author chose. Kept as a filled control at the mockup's own primary
   measurements. */
[data-pk-grid] .table td .btn-primary {
    padding: 4px 11px;
    border: 1px solid var(--pk-primary);
    border-radius: 4px;
    background: var(--pk-primary);
    color: #fff;
}

[data-pk-grid] .table td .btn-primary:hover {
    background: var(--pk-primary-dark);
    border-color: var(--pk-primary-dark);
    color: #fff;
    text-decoration: none;
}

/* Actions sit on one line, separated the way the mockup spaces them. */
[data-pk-grid] .table td .btn + .btn,
[data-pk-grid] .table td form.d-inline { margin-left: 10px; }
[data-pk-grid] .table td form.d-inline + .btn { margin-left: 10px; }

/* Badges: the mockup's soft tint with a status dot, not Bootstrap's solid
   fill. Scoped inside a grid so badges elsewhere are untouched. */
[data-pk-grid] .table .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 3px;
    border: 1px solid;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
}

[data-pk-grid] .table .badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

[data-pk-grid] .table .badge.bg-success {
    background: #eaf6f0 !important;
    border-color: #cfe8dc;
    color: #116b46 !important;
}

[data-pk-grid] .table .badge.bg-warning {
    background: #fdf3e6 !important;
    border-color: #f0d9b5;
    color: #8a5200 !important;
}

[data-pk-grid] .table .badge.bg-danger {
    background: #fdf1f1 !important;
    border-color: #f3c9c9;
    color: #a81f1f !important;
}

[data-pk-grid] .table .badge.bg-primary,
[data-pk-grid] .table .badge.bg-info {
    background: #eaf1f9 !important;
    border-color: #cddff0;
    color: #144d8a !important;
}

[data-pk-grid] .table .badge.bg-secondary,
[data-pk-grid] .table .badge.bg-light {
    background: #f2f4f9 !important;
    border-color: #e2e6f0;
    color: #5c6577 !important;
}

/* ---- Footer ---- */

[data-pk-grid] > .pk-grid-footer {
    font-size: 11.5px;
    color: var(--pk-muted);
    margin-top: 10px;
}

[data-pk-grid] > .pk-grid-footer .btn {
    height: 26px;
    min-width: 26px;
    padding: 0 7px;
    font-size: 11.5px;
    border-radius: 3px;
}

/* ---- Page header -------------------------------------------------------
   The mockup's 19px title with an 11.5px subtitle, against Bootstrap's h2
   at roughly 32px. Scoped to .pk-content so it applies to the ERP page
   bodies without touching the public marketing site, which is exempt. */
.pk-content > h2:first-child,
.pk-content > .d-flex h2 {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
}

.pk-content > .d-flex h2 + p,
.pk-content > .d-flex .text-muted {
    font-size: 11.5px;
}

/* ---- Stat tile ----------------------------------------------------------
   The mockup's compact label / value / note tile. Deliberately NOT named
   .pk-kpi: that class already exists and belongs to the tenant dashboard's
   icon-and-delta card, a different component with a different shape. Two
   meanings on one class name is how a design system starts to drift. */

.pk-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.pk-stat {
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
    padding: 9px 11px 10px;
    min-width: 0;
}

.pk-stat-label {
    font-size: 10.5px;
    color: var(--pk-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-stat-figure {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    min-width: 0;
}

.pk-stat-value {
    font-size: 21px;
    line-height: 1;
    font-weight: 600;
    color: var(--pk-text);
}

.pk-stat-value.is-success { color: var(--pk-success); }
.pk-stat-value.is-danger { color: var(--pk-danger); }
.pk-stat-value.is-warning { color: var(--pk-warning); }
.pk-stat-value.is-primary { color: var(--pk-primary); }
.pk-stat-value.is-muted { color: var(--pk-muted); }

.pk-stat-note {
    font-size: 10.5px;
    color: var(--pk-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Chip ---------------------------------------------------------------
   The mockup's code chip — a permission name rendered as a token. Used by
   the catalogue drawer's permission list.

   The mockup's OTHER chip (the blue active-filter chip with a clear ×) is
   deliberately not defined here: no provider screen has a filter for one to
   reflect, and a chip that can only ever show a hardcoded condition is
   decoration pretending to be state. */

.pk-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 26px;
    padding: 0 9px;
    border: 1px solid #e2e6f0;
    border-radius: 3px;
    background: #f7f8fc;
    font-family: var(--pk-font-mono);
    font-size: 11.4px;
    color: #4b5468;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-chip.is-inactive {
    opacity: .55;
    text-decoration: line-through;
}

.pk-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- Article Complex (.pk-ac-*) -----------------------------------------
   THE APPROVED ARTICLE COMPLEX WIREFRAME (docs/mockups/design_handoff_article_complex),
   mapped value for value: the sticky workspace header, the one tab strip, the badge
   vocabulary, and the register's two-line rows. EVERY RULE SITS UNDER .pk-ac-, so no
   screen outside the Article Complex changes - in particular Bootstrap's global .badge
   is NOT touched (TheGlobalBadgeRule_StaysScopedToGrids pins that): the Article Complex
   badge is a component of its own, .pk-ac-badge.

   Colours are this stylesheet's tokens where one exists (--pk-bg, --pk-primary,
   --pk-primary-dark, --pk-text, --pk-muted, --pk-border, --pk-rule). The rest - #4b5468
   secondary text, #6b7488 grid-header text, #dee2e6 input border, the badge triples -
   are literals exactly as the wireframe states them, because promoting them to :root
   would change every other consumer, which is a separate and declarable change.

   LINE-HEIGHT IS "normal" INSIDE THESE BLOCKS, as in the wireframe, where Bootstrap's
   body line-height of 1.5 would make every 12px row and 10.5px badge taller than drawn. */

/* ---- The workspace's sticky context header ----------------------------- */

/* The window scrolls and .pk-header is sticky at the top, so the header sticks just
   under it. The negative margin cancels .pk-content's top padding (0.85rem, the compact
   layer) so the gap above the card is the wireframe's 13px whether stuck or not. */
.pk-ac-sticky {
    position: sticky;
    top: var(--pk-header-height);
    z-index: 5;
    margin-top: -0.85rem;
    margin-bottom: 11px;
    padding-top: 13px;
    background: var(--pk-bg);
    line-height: normal;
}

.pk-ac-head {
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 5px 5px 0 0;
}

.pk-ac-crumb {
    margin-bottom: 6px;
    font-size: 10.5px;
    color: var(--pk-muted);
}

.pk-ac-crumb a { text-decoration: none; }

.pk-ac-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 24px;
}

.pk-ac-identity {
    min-width: 220px;
    flex: 1 1 260px;
}

.pk-ac-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.pk-ac-title-line .pk-ac-badge { align-self: center; }

.pk-ac-code {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .01em;
    color: var(--pk-text);
}

.pk-ac-name {
    font-size: 13px;
    color: #4b5468;
}

.pk-ac-context {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--pk-muted);
}

.pk-ac-blocks {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
}

.pk-ac-micro {
    margin-bottom: 3px;
    font-size: 10px;
    color: var(--pk-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Above a badge the wireframe leaves 5px, above a control 3px. */
.pk-ac-micro.is-badge { margin-bottom: 5px; }

/* THE VERSION SWITCHER: the wireframe's 26px select, drawn as a button over a menu of
   LINKS, so every option is a real href and no script decides where it goes. The
   chevron is the one Bootstrap's .form-select draws. */
.pk-ac-select {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 22px 0 6px;
    border: 1px solid var(--pk-rule);
    border-radius: 3px;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 6px center / 10px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-text);
    white-space: nowrap;
    cursor: pointer;
}

.pk-ac-select:focus-visible {
    outline: 0;
    border-color: var(--pk-primary);
    box-shadow: 0 0 0 3px rgba(27, 95, 170, .12);
}

/* One version: the same box, nothing to open. */
.pk-ac-select.is-static {
    padding-right: 6px;
    background-image: none;
    cursor: default;
}

.pk-ac-value {
    display: flex;
    align-items: center;
    height: 26px;
    font-size: 12px;
    font-weight: 600;
}

.pk-ac-value.is-muted {
    font-weight: 400;
    color: var(--pk-muted);
}

.pk-ac-block-note,
.pk-ac-bom-note {
    font-size: 10.5px;
    color: #8a5200;
}

.pk-ac-block-note { margin-top: 3px; }

.pk-ac-badge-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pk-ac-head-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* ---- Buttons: the wireframe's secondary and primary 30px buttons ------- */

.pk-ac-btn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border: 1px solid var(--pk-rule);
    border-radius: 4px;
    background: #fff;
    font-size: 11.7px;
    color: #4b5468;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.pk-ac-btn:hover {
    border-color: var(--pk-primary);
    color: var(--pk-primary);
}

.pk-ac-btn.is-more { padding: 0 10px; }

.pk-ac-btn.is-primary {
    border-color: var(--pk-primary);
    background: var(--pk-primary);
    font-weight: 600;
    color: #fff;
}

.pk-ac-btn.is-primary:hover {
    border-color: var(--pk-primary-dark);
    background: var(--pk-primary-dark);
    color: #fff;
}

.pk-ac-menu {
    min-width: 9rem;
    padding: 4px 0;
    font-size: 12px;
}

.pk-ac-menu .dropdown-item { padding: 4px 12px; }

.pk-ac-version-option.is-active {
    background: #eaf1f9;
    font-weight: 600;
    color: #144d8a;
}

/* ---- The one tab strip -------------------------------------------------- */

.pk-ac-tabs {
    display: flex;
    gap: 2px;
    padding: 0 8px;
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-top: 0;
    border-radius: 0 0 5px 5px;
}

.pk-ac-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    color: #4b5468;
    white-space: nowrap;
    text-decoration: none;
}

.pk-ac-tab:hover { color: var(--pk-text); }

.pk-ac-tab.is-active {
    border-bottom-color: var(--pk-primary);
    font-weight: 600;
    color: #144d8a;
}

.pk-ac-tab.is-disabled {
    color: #b3bac8;
    cursor: default;
}

.pk-ac-tab-count {
    padding: 0 5px;
    border-radius: 8px;
    background: #f2f4f9;
    font-size: 10px;
    color: #6b7488;
}

.pk-ac-tab.is-active .pk-ac-tab-count {
    background: #eaf1f9;
    color: var(--pk-primary);
}

/* INTERIM: the two-screen Relationships tab (customers, seasons) until its single
   screen replaces them. A compact segmented switch, in the tab strip's own colours. */
.pk-ac-subnav {
    display: inline-flex;
    margin-bottom: 11px;
    border: 1px solid var(--pk-rule);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    line-height: normal;
}

.pk-ac-subnav-link {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    font-size: 11.7px;
    color: #4b5468;
    text-decoration: none;
}

.pk-ac-subnav-link + .pk-ac-subnav-link { border-left: 1px solid var(--pk-rule); }

.pk-ac-subnav-link:hover { color: var(--pk-text); }

.pk-ac-subnav-link.is-active {
    background: #eaf1f9;
    font-weight: 600;
    color: #144d8a;
}

/* The wireframe's info note - the contextual sentence a screen says once. */
.pk-ac-note {
    margin-bottom: 11px;
    padding: 7px 11px;
    border: 1px solid #cddff0;
    border-radius: 4px;
    background: #eaf1f9;
    font-size: 11.5px;
    color: #144d8a;
}

/* ---- Badges: ok / warn / err / info / mute, with a 5px dot -------------- */

.pk-ac-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border: 1px solid;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

.pk-ac-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: none;
}

.pk-ac-badge.is-ok { background: #eaf6f0; border-color: #cfe8dc; color: #116b46; }
.pk-ac-badge.is-ok .pk-ac-dot { background: #148f5a; }
.pk-ac-badge.is-warn { background: #fdf3e6; border-color: #f0d9b5; color: #8a5200; }
.pk-ac-badge.is-warn .pk-ac-dot { background: #b26a00; }
.pk-ac-badge.is-err { background: #fdf1f1; border-color: #f3c9c9; color: #a81f1f; }
.pk-ac-badge.is-err .pk-ac-dot { background: #c62828; }
.pk-ac-badge.is-info { background: #eaf1f9; border-color: #cddff0; color: #144d8a; }
.pk-ac-badge.is-info .pk-ac-dot { background: #1B5FAA; }
.pk-ac-badge.is-mute { background: #f2f4f9; border-color: #e2e6f0; color: #5c6577; }
.pk-ac-badge.is-mute .pk-ac-dot { background: #8a94a6; }

/* ---- Colours & Sizes (Variant A matrix) ----------------------------------
   The wireframe's matrix, value for value: 30px header on #f7f8fc, 34px rows ruled
   #f0f2f7, a 240px colourway column, 46px size columns holding a 28 x 22 cell, and the
   four cell states it draws - existing (#1B5FAA, a tick), new on save (dashed, +),
   will be deactivated (amber, minus) and none. ONE state is added, "out of circulation",
   in the wireframe's own mute triple, because an inactive SKU is a real stored fact the
   prototype had no data for. Cells are spans, not buttons: they are state, not controls. */

.pk-ac-card {
    margin-bottom: 11px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 5px;
    line-height: normal;
}

.pk-ac-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pk-ac-section-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    color: var(--pk-text);
}

.pk-ac-section-sub {
    font-size: 11px;
    color: var(--pk-muted);
}

/* On a draft the "sizes 36 - 42" words become the range controls, at the same size. */
.pk-ac-range select {
    height: 22px;
    padding: 0 4px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background: #fff;
    font-size: 11px;
    color: var(--pk-text);
}

.pk-ac-range select:focus {
    outline: 0;
    border-color: var(--pk-primary);
    box-shadow: 0 0 0 3px rgba(27, 95, 170, .12);
}

.pk-ac-range-error {
    font-size: 11px;
    color: #a81f1f;
}

.pk-ac-btn-add {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--pk-rule);
    border-radius: 4px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pk-primary);
    text-decoration: none;
    white-space: nowrap;
}

.pk-ac-btn-add:hover {
    border-color: var(--pk-primary);
    color: var(--pk-primary);
}

/* The validation summary of a refused save, in the wireframe's error triple. */
.pk-ac-error {
    margin-bottom: 10px;
    padding: 7px 11px;
    border: 1px solid #f3c9c9;
    border-radius: 4px;
    background: #fdf1f1;
    font-size: 11.5px;
    color: #a81f1f;
}

.pk-ac-error ul { margin: 0; padding-left: 16px; }
.pk-ac-error.validation-summary-valid { display: none; }

.pk-ac-matrix-wrap { overflow: auto; }

.pk-ac-matrix {
    min-width: 600px;
    border-collapse: collapse;
}

.pk-ac-matrix th {
    height: 30px;
    padding: 0 10px;
    background: #f7f8fc;
    border-bottom: 1px solid #dee3ef;
    font-size: 11px;
    font-weight: 600;
    color: #6b7488;
    text-align: left;
    white-space: nowrap;
}

.pk-ac-matrix th.pk-ac-mx-colour { min-width: 240px; }

.pk-ac-matrix th.pk-ac-mx-size {
    width: 46px;
    padding: 0;
    font-size: 11.5px;
    color: #4b5468;
    text-align: center;
}

/* A size outside the (pending) range: shown, so the range can reach it, but dimmed. */
.pk-ac-matrix th.pk-ac-mx-size.is-out { color: #b7bece; }

.pk-ac-mx-mean {
    display: block;
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--pk-primary);
}

.pk-ac-matrix th.pk-ac-mx-count { text-align: right; }

.pk-ac-matrix td {
    height: 34px;
    padding: 0 10px;
    border-bottom: 1px solid #f0f2f7;
    font-size: 12px;
}

.pk-ac-matrix td.pk-ac-mx-cell {
    padding: 0;
    text-align: center;
}

.pk-ac-matrix td.pk-ac-mx-count {
    font-weight: 600;
    text-align: right;
}

.pk-ac-matrix td.pk-ac-mx-empty {
    height: 60px;
    color: var(--pk-muted);
    text-align: center;
}

.pk-ac-mx-name {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pk-ac-mx-name b {
    font-size: 12px;
    font-weight: 600;
}

.pk-ac-matrix tr.is-inactive .pk-ac-mx-name b { color: var(--pk-muted); }

.pk-ac-mx-chev {
    width: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pk-muted);
    cursor: pointer;
}

.pk-ac-swatch {
    width: 12px;
    height: 12px;
    flex: none;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 2px;
}

.pk-ac-mono {
    font: 10.5px ui-monospace, Consolas, monospace;
    color: var(--pk-muted);
}

.pk-ac-mx-all {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 11px;
    color: var(--pk-primary);
    cursor: pointer;
}

.pk-ac-mx-state {
    margin-left: auto;
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    border: 1px solid var(--pk-rule);
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #b7bece;
    vertical-align: middle;
    cursor: default;
}

.pk-ac-cell.is-keep { background: var(--pk-primary); border: 1px solid var(--pk-primary); color: #fff; }
.pk-ac-cell.is-new { background: #eaf1f9; border: 1px dashed var(--pk-primary); color: var(--pk-primary); }
.pk-ac-cell.is-deact { background: #fdf3e6; border: 1px solid #e0b877; color: #8a5200; }
.pk-ac-cell.is-retired { background: #f2f4f9; border: 1px solid #e2e6f0; color: var(--pk-muted); }

.pk-ac-matrix tr.pk-ac-mx-detail td {
    height: auto;
    padding: 10px 12px 12px 36px;
    background: #fafbfd;
}

.pk-ac-mx-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.pk-ac-mx-fields label {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 500;
}

.pk-ac-field-ro {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
    background: #f6f7fb;
    font-size: 12px;
    color: #4b5468;
    overflow: hidden;
    white-space: nowrap;
}

.pk-ac-field-ro.is-mono {
    font: 11.5px ui-monospace, Consolas, monospace;
    color: var(--pk-muted);
}

.pk-ac-field-ro.is-plain {
    padding: 0;
    border: 0;
    background: transparent;
}

.pk-ac-field-ro img {
    width: 22px;
    height: 18px;
    object-fit: cover;
    border: 1px solid #e2e6f0;
    border-radius: 2px;
}

.pk-ac-mx-links {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 11.5px;
}

.pk-ac-mx-links a { text-decoration: none; }

.pk-ac-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    font-size: 10.8px;
    color: #6b7488;
}

.pk-ac-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pk-ac-key {
    width: 14px;
    height: 12px;
    border-radius: 2px;
}

.pk-ac-key.is-keep { background: var(--pk-primary); }
.pk-ac-key.is-new { background: #eaf1f9; border: 1px dashed var(--pk-primary); }
.pk-ac-key.is-deact { background: #fdf3e6; border: 1px solid #e0b877; }
.pk-ac-key.is-retired { background: #f2f4f9; border: 1px solid #e2e6f0; }

.pk-ac-savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--pk-rule);
}

.pk-ac-savebar-total { font-size: 12px; }

.pk-ac-dirty {
    padding: 2px 8px;
    border: 1px solid #cddff0;
    border-radius: 3px;
    background: #eaf1f9;
    font-size: 11.5px;
    color: #144d8a;
}

.pk-ac-clean {
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-btn-ghost {
    height: 30px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 11.7px;
    color: var(--pk-muted);
    cursor: pointer;
}

.pk-ac-btn.is-save { padding: 0 15px; }

.pk-ac-btn:disabled {
    opacity: .55;
    cursor: default;
}

.pk-ac-footnote {
    margin-top: 6px;
    font-size: 10.8px;
    color: var(--pk-muted);
}

/* The informational SKU list: a <details> drawn as the wireframe's 36px disclosure. */
.pk-ac-collapse { padding: 0; }

.pk-ac-collapse > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.pk-ac-collapse > summary::-webkit-details-marker { display: none; }
.pk-ac-collapse > summary::before { content: "\25B8"; }
.pk-ac-collapse[open] > summary::before { content: "\25BE"; }

.pk-ac-collapse-note {
    font-size: 10.8px;
    font-weight: 400;
    color: var(--pk-muted);
}

.pk-ac-collapse-link {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
}

.pk-ac-collapse-empty {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--pk-border);
    font-size: 11.5px;
    color: var(--pk-muted);
}

.pk-ac-sku-table {
    width: 100%;
    border-collapse: collapse;
}

.pk-ac-sku-table th {
    height: 28px;
    padding: 0 10px;
    background: #f7f8fc;
    border-top: 1px solid var(--pk-border);
    border-bottom: 1px solid #dee3ef;
    font-size: 11px;
    font-weight: 600;
    color: #6b7488;
    text-align: left;
}

.pk-ac-sku-table td {
    height: 28px;
    padding: 0 10px;
    border-bottom: 1px solid #f0f2f7;
    font-size: 12px;
}

.pk-ac-sku-table th:first-child,
.pk-ac-sku-table td:first-child { padding-left: 14px; }

.pk-ac-sku-table td.is-code {
    font: 11.5px ui-monospace, Consolas, monospace;
    color: #4b5468;
}

/* ---- The Article register (Variant A) ----------------------------------- */

.pk-ac-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2px;
    line-height: normal;
}

.pk-ac-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.pk-ac-kicker {
    margin-bottom: 3px;
    font-size: 10.5px;
    color: var(--pk-muted);
}

.pk-ac-page-title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: normal;
    color: var(--pk-text);
}

.pk-ac-subtitle {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--pk-muted);
}

.pk-ac-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 5px;
}

.pk-ac-search {
    width: 230px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    font-size: 12px;
    color: var(--pk-text);
    outline: none;
}

.pk-ac-search:focus {
    border-color: var(--pk-primary);
    box-shadow: 0 0 0 3px rgba(27, 95, 170, .12);
}

.pk-ac-filter {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-filter select {
    height: 28px;
    padding: 0 6px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
    color: var(--pk-text);
}

.pk-ac-filter select:focus {
    outline: 0;
    border-color: var(--pk-primary);
    box-shadow: 0 0 0 3px rgba(27, 95, 170, .12);
}

.pk-ac-filter-clear {
    font-size: 11px;
    text-decoration: none;
}

.pk-ac-spacer { flex: 1; }

.pk-ac-count {
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-register {
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 5px;
    overflow: auto;
}

/* One template for the header and every row, so the columns cannot drift. */
.pk-ac-grid-head,
.pk-ac-row {
    display: grid;
    grid-template-columns: 110px minmax(190px, 2fr) 60px minmax(150px, 1.3fr) 64px 64px 52px 96px;
    align-items: center;
    min-width: 860px;
    padding: 0 12px;
}

.pk-ac-grid-head {
    gap: 0 10px;
    height: 30px;
    background: #f7f8fc;
    border-bottom: 1px solid #dee3ef;
    font-size: 11px;
    font-weight: 600;
    color: #6b7488;
}

/* THE WHOLE ROW IS ONE LINK - a real href, so the row opens the workspace with no
   script and nothing inside it is a second interactive control. */
.pk-ac-row {
    gap: 4px 10px;
    padding: 7px 12px;
    border-bottom: 1px solid #f0f2f7;
    font-size: 12px;
    color: var(--pk-text);
    text-decoration: none;
    cursor: pointer;
}

.pk-ac-row:hover {
    background: #f6f8fc;
    color: var(--pk-text);
}

.pk-ac-row:focus-visible {
    outline: 2px solid var(--pk-primary);
    outline-offset: -2px;
}

.pk-ac-row-code {
    font-weight: 600;
    color: var(--pk-primary);
}

.pk-ac-row-strong { font-weight: 600; }

.pk-ac-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-ac-row.is-inactive .pk-ac-row-name { color: var(--pk-muted); }

.pk-ac-num { text-align: right; }

.pk-ac-row-meta {
    font-size: 10.5px;
    color: var(--pk-muted);
}

.pk-ac-row-status {
    grid-column: 2 / 8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pk-ac-row-label {
    font-size: 10.5px;
    color: var(--pk-muted);
}

.pk-ac-attn {
    font-size: 10.5px;
    color: #a81f1f;
}

.pk-ac-open {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pk-primary);
    text-align: right;
}

.pk-ac-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 48px 20px;
    text-align: center;
}

.pk-ac-empty.is-no-match {
    gap: 8px;
    padding: 36px 20px;
}

.pk-ac-empty-title {
    font-size: 13px;
    font-weight: 600;
}

.pk-ac-empty-text {
    max-width: 380px;
    font-size: 11.5px;
    color: var(--pk-muted);
}

/* ---- The Production BOM designer (Variant A) ------------------------------
   The wireframe's "5 Production BOM" section, value for value: the revision chips (26px,
   the selected one in the info triple), the #fafbfd facts strip with its 30px actions,
   the amber "not available" and blue read-only notes, and the 11-column grid - 30px header
   on #f7f8fc, 30px rows ruled #f0f2f7, 980px minimum so it scrolls rather than squeezes.
   Rule badges are the wireframe's dot-less chips in the same five tones as .pk-ac-badge.
   A line's own writes live in the BOM Line Editor below, so its rows carry no action
   cell. The mono font is the wireframe's literal stack, as in .pk-ac-mono. */

.pk-ac-tab-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: #b26a00;
}

.pk-ac-bom-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.pk-ac-bom-head .pk-ac-section-title { margin-right: 8px; }

.pk-ac-bom-revlabel {
    margin-right: 2px;
    font-size: 10.5px;
    color: var(--pk-muted);
}

.pk-ac-revs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pk-ac-rev {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--pk-rule);
    border-radius: 4px;
    background: #fff;
    font-size: 11.5px;
    color: #4b5468;
    text-decoration: none;
    white-space: nowrap;
}

.pk-ac-rev:hover { color: var(--pk-text); }

.pk-ac-rev.is-selected {
    border-color: var(--pk-primary);
    background: #eaf1f9;
    font-weight: 600;
    color: #144d8a;
}

.pk-ac-rev.pk-row-flash { animation: pk-row-flash 2.5s ease-out; }

.pk-ac-rev-badge,
.pk-ac-rule {
    display: inline-flex;
    align-items: center;
    border: 1px solid;
    border-radius: 3px;
    line-height: normal;
    white-space: nowrap;
}

.pk-ac-rev-badge {
    padding: 0 5px;
    font-size: 10px;
}

.pk-ac-rule {
    padding: 0 6px;
    font-size: 10.5px;
    font-weight: 600;
}

.pk-ac-rev-badge.is-ok, .pk-ac-rule.is-ok { background: #eaf6f0; border-color: #cfe8dc; color: #116b46; }
.pk-ac-rev-badge.is-warn, .pk-ac-rule.is-warn { background: #fdf3e6; border-color: #f0d9b5; color: #8a5200; }
.pk-ac-rev-badge.is-err, .pk-ac-rule.is-err { background: #fdf1f1; border-color: #f3c9c9; color: #a81f1f; }
.pk-ac-rev-badge.is-info, .pk-ac-rule.is-info { background: #eaf1f9; border-color: #cddff0; color: #144d8a; }
.pk-ac-rev-badge.is-mute, .pk-ac-rule.is-mute { background: #f2f4f9; border-color: #e2e6f0; color: #5c6577; }

.pk-ac-bom-version {
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-bom-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 26px;
    padding: 10px 12px;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
    background: #fafbfd;
}

.pk-ac-bom-facts .pk-ac-micro.is-badge { margin-bottom: 4px; }

.pk-ac-bom-code {
    font: 600 12.5px ui-monospace, Consolas, monospace;
    color: var(--pk-text);
}

.pk-ac-bom-fact {
    font-size: 12.5px;
    color: var(--pk-text);
}

.pk-ac-bom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pk-ac-bom-actions form {
    display: flex;
    margin: 0;
}

.pk-ac-bom-blocked,
.pk-ac-bom-readonly {
    margin-top: 8px;
    padding: 7px 11px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 11.7px;
}

.pk-ac-bom-blocked { background: #fdf3e6; border-color: #f0d9b5; color: #8a5200; }
.pk-ac-bom-readonly { background: #eaf1f9; border-color: #cddff0; color: #144d8a; }

.pk-ac-bom-more {
    margin-top: 8px;
    font-size: 11.5px;
}

.pk-ac-bom-more > summary {
    width: max-content;
    font-size: 11px;
    color: var(--pk-muted);
    cursor: pointer;
}

.pk-ac-bom-more > dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 14px;
    margin: 6px 0 0;
}

.pk-ac-bom-more dt {
    font-weight: 400;
    color: #6b7488;
}

.pk-ac-bom-more dd { margin: 0; }
.pk-ac-bom-more .pk-ac-muted { color: var(--pk-muted); }
.pk-ac-bom-more .pk-ac-prewrap { white-space: pre-wrap; }

.pk-ac-bom-lines-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 8px;
}

.pk-ac-bom-lines-title {
    font-size: 12.7px;
    font-weight: 600;
}

.pk-ac-bom-lines-sub {
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-btn-line {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--pk-primary);
    border-radius: 4px;
    background: var(--pk-primary);
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.pk-ac-btn-line:hover {
    border-color: var(--pk-primary-dark);
    background: var(--pk-primary-dark);
    color: #fff;
}

.pk-ac-bom-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 36px 20px;
    border: 1px dashed #bcc8e8;
    border-radius: 5px;
    background: #fafbff;
    text-align: center;
}

.pk-ac-bom-grid-wrap {
    overflow: auto;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
}

.pk-ac-bom-grid {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.pk-ac-bom-grid th {
    height: 30px;
    padding: 0 10px;
    border-bottom: 1px solid #dee3ef;
    background: #f7f8fc;
    font-size: 11px;
    font-weight: 600;
    color: #6b7488;
    text-align: left;
    white-space: nowrap;
}

.pk-ac-bom-grid td {
    height: 30px;
    padding: 0 10px;
    border-bottom: 1px solid #f0f2f7;
    font-size: 12px;
    color: var(--pk-text);
    vertical-align: middle;
}

.pk-ac-bom-grid tbody tr { cursor: pointer; }
.pk-ac-bom-grid tbody tr:hover > td { background: #f6f8fc; }

.pk-ac-bom-grid .is-num { text-align: right; }
.pk-ac-bom-grid th.is-line { width: 46px; }
.pk-ac-bom-grid td.is-line { color: #6b7488; }
.pk-ac-bom-grid td.is-nowrap { white-space: nowrap; }

.pk-ac-bom-grid td.is-material {
    font-weight: 600;
    white-space: nowrap;
}

.pk-ac-line-link {
    color: inherit;
    text-decoration: none;
}

.pk-ac-line-link:hover { color: var(--pk-primary); }

.pk-ac-bom-grid td.is-qty {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pk-ac-qty-note {
    font-size: 10px;
    color: var(--pk-muted);
}

.pk-ac-bom-grid td.is-rules { white-space: nowrap; }

.pk-ac-rules {
    display: inline-flex;
    gap: 4px;
}

.pk-ac-bom-grid tr.is-inactive > td { color: var(--pk-muted); }
.pk-ac-bom-grid tr.is-inactive > td.is-material { font-weight: 400; }

/* The line open in the editor, as the wireframe tints it. */
.pk-ac-bom-grid tbody tr.is-editing > td { background: #f4f8fd; }

/* THE GROUPED GRID (2026-10-10): narrowing tools above it, a planning-group heading row
   per section, a sticky header and sticky Line + Material columns inside a bounded
   scroll area, the status as a word, and a per-row actions menu. Density per ui.md:
   30px rows, 11-12px text, 28px controls. */
.pk-ac-bom-lines-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
}

.pk-ac-bom-lines-tools .pk-ac-ed-input.is-small {
    height: 28px;
    width: auto;
    min-width: 150px;
    font-size: 11.5px;
}

.pk-ac-bom-lines-tools .pk-ac-ed-check { margin: 0; font-size: 11.5px; }
.pk-ac-bom-lines-count { font-size: 11px; color: var(--pk-muted); }

.pk-ac-bom-lines .pk-ac-bom-grid-wrap {
    max-height: calc(100vh - 250px);
    min-height: 160px;
    overflow: auto;
}

.pk-ac-bom-grid thead th { position: sticky; top: 0; z-index: 3; }
.pk-ac-bom-grid th.is-line, .pk-ac-bom-grid td.is-line { position: sticky; left: 0; z-index: 2; background: #fff; }
.pk-ac-bom-grid th.is-material, .pk-ac-bom-grid td.is-material { position: sticky; left: 46px; z-index: 2; background: #fff; }
.pk-ac-bom-grid thead th.is-line, .pk-ac-bom-grid thead th.is-material { z-index: 4; background: #f7f8fc; }
.pk-ac-bom-grid tbody tr:hover > td.is-line, .pk-ac-bom-grid tbody tr:hover > td.is-material,
.pk-ac-bom-grid tbody tr.is-editing > td.is-line, .pk-ac-bom-grid tbody tr.is-editing > td.is-material { background: #f4f8fd; }

.pk-ac-bom-grid tr.pk-ac-bom-group { cursor: default; }
.pk-ac-bom-grid tr.pk-ac-bom-group > td {
    height: 26px;
    background: #f2f4f9;
    border-bottom: 1px solid #e2e6f0;
    font-size: 11px;
    font-weight: 600;
    color: #3e4759;
    letter-spacing: .02em;
}

.pk-ac-bom-grid tr.pk-ac-bom-group:hover > td { background: #f2f4f9; }
.pk-ac-bom-group-phase, .pk-ac-bom-group-count { margin-left: 6px; font-weight: 400; color: var(--pk-muted); }

.pk-ac-bom-grid td.is-status { white-space: nowrap; }
.pk-ac-bom-grid th.is-actions, .pk-ac-bom-grid td.is-actions { width: 34px; padding: 0 4px; text-align: center; }

.pk-ac-kebab { position: relative; display: inline-block; }

.pk-ac-kebab > summary {
    list-style: none;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 4px;
    color: #6b7488;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.pk-ac-kebab > summary::-webkit-details-marker { display: none; }
.pk-ac-kebab > summary:hover, .pk-ac-kebab[open] > summary { background: #e8ecf5; color: var(--pk-text); }

.pk-ac-kebab-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 6;
    min-width: 150px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(20, 30, 50, .12);
    text-align: left;
}

.pk-ac-kebab-menu a, .pk-ac-kebab-menu button {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border: 0;
    background: none;
    font-size: 11.5px;
    color: var(--pk-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.pk-ac-kebab-menu a:hover, .pk-ac-kebab-menu button:hover { background: #f4f8fd; }
.pk-ac-kebab-menu form { margin: 0; }

@media (max-width: 1279px) {
    .pk-ac-bom-grid .is-makebuy { display: none; }
}

/* ---- The BOM Line Editor --------------------------------------------------
   The wireframe's "6 BOM Line Editor" in its drawer form, value for value: a right-hand
   panel max(560px, 46vw) wide and full height over a rgba(20,24,40,.28) wash, a 12/16px
   header with the material at 16px/600, the 34px tab strip, 30px controls in an
   auto-fit minmax(160px) grid, and the info / warn / error triples the designer uses.
   It sits above the sticky workspace header. The server renders it open; nothing here
   animates or decides anything. */

.pk-ac-editor-open { overflow: hidden; }

.pk-ac-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(20, 24, 40, .28);
}

.pk-ac-editor {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1041;
    display: flex;
    flex-direction: column;
    width: max(560px, 46vw);
    max-width: 100%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 40px rgba(20, 24, 40, .22);
    line-height: normal;
    color: var(--pk-text);
}

.pk-ac-editor-head {
    display: flex;
    flex: none;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--pk-border);
}

.pk-ac-editor-id {
    flex: 1;
    min-width: 0;
}

.pk-ac-editor-kicker {
    font-size: 10.5px;
    color: var(--pk-muted);
}

.pk-ac-editor-material {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pk-ac-editor-material:focus { outline: none; }

.pk-ac-editor-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.pk-ac-editor-type {
    padding: 1px 7px;
    border: 1px solid #e2e6f0;
    border-radius: 3px;
    background: #f2f4f9;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #4b5468;
}

.pk-ac-editor-ctx {
    font: 10.5px ui-monospace, Consolas, monospace;
    color: var(--pk-muted);
}

.pk-ac-btn.is-save { padding: 0 15px; }

.pk-ac-editor-tabs {
    display: flex;
    flex: none;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid var(--pk-border);
    overflow-x: auto;
}

.pk-ac-editor-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 11px;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    color: #4b5468;
    text-decoration: none;
    white-space: nowrap;
}

.pk-ac-editor-tab:hover { color: var(--pk-text); }

.pk-ac-editor-tab.is-active {
    border-bottom-color: var(--pk-primary);
    font-weight: 600;
    color: #144d8a;
}

.pk-ac-editor-tab-err {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c62828;
}

.pk-ac-editor-tab-count {
    padding: 0 5px;
    border-radius: 8px;
    background: #f2f4f9;
    font-size: 10px;
    font-weight: 400;
    color: #6b7488;
}

.pk-ac-editor-tab.is-active .pk-ac-editor-tab-count {
    background: #eaf1f9;
    color: var(--pk-primary);
}

.pk-ac-editor-body {
    flex: 1;
    margin: 0;
    padding: 14px 16px 18px;
    overflow: auto;
}

.pk-ac-editor-fields {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pk-ac-editor-note,
.pk-ac-editor-warn,
.pk-ac-editor-error {
    margin-bottom: 10px;
    padding: 7px 10px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 11.5px;
}

.pk-ac-editor-note { background: #eaf1f9; border-color: #cddff0; color: #144d8a; }
.pk-ac-editor-warn { background: #fdf3e6; border-color: #f0d9b5; color: #8a5200; }
.pk-ac-editor-error { background: #fdf1f1; border-color: #f3c9c9; color: #a81f1f; }
.pk-ac-editor-error ul { margin: 0; padding-left: 16px; }
.pk-ac-editor-error.validation-summary-valid { display: none; }

.pk-ac-ed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.pk-ac-ed-label {
    display: block;
    margin-bottom: 3px;
    font-size: 11.4px;
    font-weight: 500;
    color: var(--pk-text);
}

.pk-ac-ed-req { color: #c62828; }

.pk-ac-ed-input {
    width: 100%;
    height: 30px;
    padding: 0 9px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    font-size: 12.5px;
    color: var(--pk-text);
}

select.pk-ac-ed-input { padding: 0 8px; }

.pk-ac-ed-input:focus {
    outline: 0;
    border-color: var(--pk-primary);
    box-shadow: 0 0 0 3px rgba(27, 95, 170, .12);
}

.pk-ac-ed-input:disabled {
    background: #f6f7fb;
    color: #6b7488;
}

.pk-ac-ed-input.is-small {
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
}

.pk-ac-ed-input.is-missing {
    border-color: #e0b877;
    background: #fffaf2;
    color: #8a5200;
}

.pk-ac-ed-help {
    margin-top: 2px;
    font-size: 10.6px;
    color: var(--pk-muted);
}

.pk-ac-ed-help.is-block { margin-top: 12px; font-size: 10.8px; }

.pk-ac-editor .form-error {
    display: block;
    margin-top: 2px;
    font-size: 10.8px;
    color: #a81f1f;
}

.pk-ac-ed-derived,
.pk-ac-ed-fixed {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 9px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 12.5px;
}

.pk-ac-ed-derived { border: 1px dashed #cddff0; background: #f4f8fd; color: #144d8a; }
.pk-ac-ed-derived span { margin-left: 6px; font-size: 10.5px; color: var(--pk-muted); }
.pk-ac-ed-fixed { border-color: var(--pk-border); background: #f6f7fb; color: var(--pk-muted); }

.pk-ac-seg { display: flex; }

.pk-ac-seg-option {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--pk-rule);
    background: #fff;
    font-size: 12px;
    color: #4b5468;
    cursor: pointer;
}

.pk-ac-seg-option + .pk-ac-seg-option { margin-left: -1px; }

.pk-ac-seg-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pk-ac-seg-option:has(input:checked) {
    z-index: 1;
    border-color: var(--pk-primary);
    background: #eaf1f9;
    font-weight: 600;
    color: #144d8a;
}

.pk-ac-seg-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(27, 95, 170, .12); }

.pk-ac-seg-option.is-disabled {
    border-color: var(--pk-border);
    background: #f6f7fb;
    color: #c3c9d6;
    cursor: not-allowed;
}

.pk-ac-ed-check,
.pk-ac-ed-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.pk-ac-ed-check { height: 30px; }
.pk-ac-ed-radio { margin-bottom: 5px; cursor: pointer; }

.pk-ac-ed-check input,
.pk-ac-ed-radio input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--pk-primary);
}

.pk-ac-ed-block { margin-top: 14px; }

/* The editor's folded-away section (line number, remarks). */
.pk-ac-ed-advanced { margin-top: 14px; border-top: 1px solid #f0f2f7; padding-top: 8px; }
.pk-ac-ed-advanced > summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: #6b7488; }
.pk-ac-ed-advanced > .pk-ac-ed-grid { margin-top: 8px; }

.pk-ac-ed-link {
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    color: var(--pk-primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pk-ac-ed-title {
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 600;
}

.pk-ac-ed-lead {
    margin-bottom: 8px;
    font-size: 12px;
}

.pk-ac-ed-empty {
    margin-bottom: 8px;
    padding: 14px;
    border: 1px dashed #bcc8e8;
    border-radius: 4px;
    background: #fafbff;
    font-size: 12px;
    color: #4b5468;
}

.pk-ac-ed-colhead {
    font-size: 10.6px;
    font-weight: 600;
    color: var(--pk-muted);
}

.pk-ac-ed-colours {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
    max-width: 560px;
}

.pk-ac-ed-colourway {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    font-size: 12px;
    font-weight: 600;
}

.pk-ac-ed-colourway-name {
    font-weight: 400;
    color: var(--pk-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-ac-ed-default { max-width: 360px; }

.pk-ac-ed-bands {
    display: grid;
    grid-template-columns: 80px 80px 110px 28px;
    gap: 6px 8px;
    align-items: center;
    margin-bottom: 8px;
}

.pk-ac-ed-band { display: contents; }

.pk-ac-ed-band-errors { grid-column: 1 / -1; }
.pk-ac-ed-band-errors:empty,
.pk-ac-ed-band-errors:not(:has(.field-validation-error)) { display: none; }

/* The client's early word on a band (order, overlap) and the grading preview. */
.pk-ac-ed-band-hint { grid-column: 1 / -1; font-size: 11px; color: #a81f1f; }
.pk-ac-ed-band-hint:empty { display: none; }
.pk-ac-ed-band.is-invalid select { border-color: #c9302c; }

.pk-ac-ed-grading {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.pk-ac-ed-grade b { margin-right: 3px; font-weight: 600; color: var(--pk-muted); }

/* The leather section's figures as typed (a preview; the save calculates). */
.pk-ac-ed-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 8px; font-size: 11.5px; }
.pk-ac-ed-live b { font-variant-numeric: tabular-nums; }

/* The colourway list's link to each colourway's BOM. */
.pk-ac-mx-bom { margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--pk-primary); text-decoration: none; }
.pk-ac-mx-bom:hover { text-decoration: underline; }

.pk-ac-ed-remove {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: #c62828;
    cursor: pointer;
}

.pk-ac-ed-add {
    height: 26px;
    padding: 0 11px;
    border: 1px dashed #9fb2e8;
    border-radius: 4px;
    background: #fff;
    font-size: 11.2px;
    color: var(--pk-primary);
    cursor: pointer;
}

.pk-ac-ed-card {
    padding: 14px;
    border: 1px dashed #bcc8e8;
    border-radius: 4px;
    background: #fafbff;
}

.pk-ac-ed-card-title { font-size: 12.5px; font-weight: 600; }

.pk-ac-ed-card-text {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #4b5468;
}

.pk-ac-ed-card-btn {
    margin-top: 9px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--pk-primary);
    border-radius: 4px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pk-primary);
    cursor: pointer;
}

.pk-ac-ed-derived-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed #cddff0;
    border-radius: 4px;
    background: #f4f8fd;
}

.pk-ac-ed-derived-label {
    font-size: 10px;
    color: #6b7488;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pk-ac-ed-derived-value {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: #144d8a;
}

.pk-ac-ed-drop {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    color: #a81f1f;
    cursor: pointer;
}

/* The group-first picker's filter, directly above the material list it narrows. */
.pk-ac-ed-search { margin-bottom: 4px; }

.pk-ac-editor-foot {
    flex: none;
    padding: 6px 16px 10px;
    border-top: 1px solid var(--pk-border);
}

.pk-ac-editor-foot form { margin: 0; }
.pk-ac-editor-foot .pk-ac-ed-drop,
.pk-ac-editor-foot .pk-ac-ed-link { margin-top: 4px; }

/* ---- The Requirement Preview ----------------------------------------------
   The wireframe's "7 Requirement Preview", value for value: the 14px title over its
   11.5px source line with Print and Back as 30px buttons, the blue "calculated from the
   Active revision only" note (.pk-ac-note), the #fafbfd input strip - 150 / 90 / 110px
   controls, 30px tall, with the BOM the figures come from on its right - the 12.7px
   result headline, the amber partial-store note, the red refusal panel, and the
   10-column grid: 30px header on #f7f8fc, 30px rows ruled #f0f2f7.

   A LINE IS A NATIVE <details>: its summary is the row, and "Why this quantity?" opens
   beneath it as the #fafbfd 200px / 1fr panel with a component's explosion after it. No
   script. Because each row is its own box, the columns are fixed tracks shared through
   --pk-ac-rq-cols rather than a table's auto widths - 980px minimum, as the designer's
   grid, so it scrolls rather than squeezes - and a quantity cell never ellipsises: a
   figure is shown whole or it is not shown. Nothing here calculates. */

.pk-ac-rq-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.pk-ac-rq-sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--pk-muted);
}

.pk-ac-rq-code,
.pk-ac-rq-source-code {
    font-family: ui-monospace, Consolas, monospace;
}

.pk-ac-rq-source-code {
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-text);
}

.pk-ac-rq-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
    background: #fafbfd;
}

.pk-ac-rq-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 0;
}

.pk-ac-rq-label {
    display: block;
    margin-bottom: 3px;
    font-size: 11.4px;
    font-weight: 500;
    color: var(--pk-text);
}

.pk-ac-rq-control {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    font-size: 12.5px;
    color: var(--pk-text);
}

.pk-ac-rq-control:focus {
    border-color: var(--pk-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(27, 95, 170, .12);
}

.pk-ac-rq-control.is-colourway { width: 150px; }
.pk-ac-rq-control.is-size { width: 90px; }
.pk-ac-rq-control.is-pairs { width: 110px; padding: 0 9px; }

.pk-ac-rq-idle {
    padding: 26px;
    font-size: 12px;
    color: var(--pk-muted);
    text-align: center;
}

.pk-ac-rq-refused {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #f3c9c9;
    border-radius: 4px;
    background: #fdf1f1;
}

.pk-ac-rq-refused-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #a81f1f;
}

.pk-ac-rq-refused-text {
    margin-top: 3px;
    font-size: 11.8px;
    line-height: 1.5;
    color: #8a3a3a;
}

.pk-ac-rq-refused-note {
    margin-top: 6px;
    font-size: 10.8px;
    color: #8a3a3a;
}

.pk-ac-rq-refused-actions {
    display: flex;
    gap: 6px;
    margin-top: 9px;
}

.pk-ac-rq-fix,
.pk-ac-rq-change {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 11.5px;
    text-decoration: none;
    white-space: nowrap;
}

.pk-ac-rq-fix { border-color: #c62828; background: #c62828; font-weight: 600; color: #fff; }
.pk-ac-rq-fix:hover { border-color: #a81f1f; background: #a81f1f; color: #fff; }
.pk-ac-rq-change { border-color: #f3c9c9; background: #fff; color: #a81f1f; }
.pk-ac-rq-change:hover { border-color: #c62828; color: #a81f1f; }

.pk-ac-rq-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 8px;
}

.pk-ac-rq-headline {
    font-size: 12.7px;
    font-weight: 600;
}

.pk-ac-rq-diff {
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-rq-warn {
    margin-bottom: 8px;
    padding: 6px 10px;
    border: 1px solid #f0d9b5;
    border-radius: 4px;
    background: #fdf3e6;
    font-size: 11.5px;
    color: #8a5200;
}

.pk-ac-rq-grid-wrap {
    overflow: auto;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
}

.pk-ac-rq-grid {
    --pk-ac-rq-cols: 26px 46px minmax(190px, 2.4fr) minmax(90px, 1fr) minmax(130px, 1.5fr)
                     minmax(70px, .9fr) 100px 56px 120px 150px;
    min-width: 980px;
}

.pk-ac-rq-row {
    display: grid;
    grid-template-columns: var(--pk-ac-rq-cols);
    align-items: center;
    min-height: 30px;
    border-bottom: 1px solid #f0f2f7;
    font-size: 12px;
    color: var(--pk-text);
}

.pk-ac-rq-row > span {
    min-width: 0;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-ac-rq-row.is-head {
    border-bottom-color: #dee3ef;
    background: #f7f8fc;
    font-size: 11px;
    font-weight: 600;
    color: #6b7488;
}

.pk-ac-rq-row > .is-num { text-align: right; }
.pk-ac-rq-row > .is-line,
.pk-ac-rq-row > .is-muted { color: #6b7488; }

.pk-ac-rq-row > .is-qty {
    overflow: visible;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
}

.pk-ac-rq-row > .is-total { font-weight: 600; }
.pk-ac-rq-row > .is-store { color: #4b5468; }

.pk-ac-rq-row > .is-material {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.pk-ac-rq-mat {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-ac-rq-row > .is-material .pk-ac-rule { flex: none; }

.pk-ac-rq-none {
    padding: 14px 10px;
    font-size: 12px;
    color: var(--pk-muted);
    text-align: center;
}

.pk-ac-rq-sum {
    display: block;
    list-style: none;
    cursor: pointer;
}

.pk-ac-rq-sum::-webkit-details-marker { display: none; }
.pk-ac-rq-sum:hover .pk-ac-rq-row { background: #f6f8fc; }

.pk-ac-rq-sum:focus-visible {
    outline: 2px solid var(--pk-primary);
    outline-offset: -2px;
}

.pk-ac-rq-row > .pk-ac-rq-chev {
    padding: 0 0 0 10px;
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-rq-chev::before { content: "\25B8"; }
.pk-ac-rq-line[open] .pk-ac-rq-chev::before { content: "\25BE"; }

.pk-ac-rq-why {
    padding: 10px 14px 12px 46px;
    border-bottom: 1px solid #f0f2f7;
    background: #fafbfd;
}

.pk-ac-rq-why-title {
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 600;
}

.pk-ac-rq-why-list {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 3px 16px;
    max-width: 640px;
    margin: 0;
    font-size: 11.8px;
}

/* Each step's dt/dd pair sits in a div that carries its data-pk-why-step hook; the div
   takes no box of its own, so the pair lands in the two grid columns. */
.pk-ac-rq-why-list > div { display: contents; }

.pk-ac-rq-why-list dt {
    font-weight: 400;
    color: #6b7488;
}

.pk-ac-rq-why-list dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.pk-ac-rq-hint {
    margin-left: 4px;
    font-size: 10.6px;
    color: var(--pk-muted);
}

.pk-ac-rq-expl-title {
    margin-top: 9px;
    font-size: 11.5px;
    font-weight: 600;
}

.pk-ac-rq-expl-title > span {
    font-weight: 400;
    color: var(--pk-muted);
}

.pk-ac-rq-expl {
    display: grid;
    grid-template-columns: 200px 120px minmax(0, 1fr);
    gap: 16px;
    margin-top: 3px;
    font-size: 11.8px;
    font-variant-numeric: tabular-nums;
}

.pk-ac-rq-expl .is-per { color: #6b7488; }
.pk-ac-rq-expl .is-total { font-weight: 600; }

.pk-ac-rq-why-link {
    display: inline-block;
    margin-top: 9px;
    font-size: 11px;
    color: var(--pk-primary);
    text-decoration: none;
}

.pk-ac-rq-why-link:hover { text-decoration: underline; }

/* ---- The Create Article wizard (Variant A) ----------------------------------
   The wireframe's "3 Create Article", value for value: the 19px title over its 11.5px
   promise, the #fff stepper strip (20px numbers - current #1B5FAA filled, done green with a
   tick, to-do outlined - joined by 24px rules), the red error box, one #fff section per step
   (12.7px/600 title over a #d5dced rule), the identity grid of minmax(200px) columns, the
   relationship rows (customer | relationship | x, 560px at most) with the dashed add
   button, the version grid of minmax(150px) columns, and the review's uppercase micro
   labels over 12px values with the blue landing note. Controls are the Article Complex's
   own .pk-ac-ed-* (30px). Every rule is scoped under .pk-ac-wz: no other form changes. */

.pk-ac-wz {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 13px;
    line-height: normal;
}

.pk-ac-wz-crumb {
    margin-bottom: 3px;
    font-size: 10.5px;
    color: var(--pk-muted);
}

.pk-ac-wz-crumb a { color: inherit; text-decoration: none; }
.pk-ac-wz-crumb a:hover { color: var(--pk-primary); }

.pk-ac-wz-title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--pk-text);
}

.pk-ac-wz-sub {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--pk-muted);
}

.pk-ac-wz-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid var(--pk-border);
    border-radius: 5px;
    background: #fff;
}

.pk-ac-wz-step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    font-size: 12px;
    color: var(--pk-muted);
    cursor: pointer;
}

.pk-ac-wz-step-n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--pk-rule);
    border-radius: 50%;
    font-size: 10.5px;
    color: var(--pk-muted);
}

.pk-ac-wz-step.is-current .pk-ac-wz-step-n {
    border-color: var(--pk-primary);
    background: var(--pk-primary);
    font-weight: 700;
    color: #fff;
}

.pk-ac-wz-step.is-current .pk-ac-wz-step-label { font-weight: 600; color: #144d8a; }

.pk-ac-wz-step.is-done .pk-ac-wz-step-n {
    border-color: #cfe8dc;
    background: #eaf6f0;
    font-size: 11px;
    font-weight: 700;
    color: #116b46;
}

.pk-ac-wz-step.is-done .pk-ac-wz-step-label { color: var(--pk-text); }

.pk-ac-wz-step-rule {
    width: 24px;
    height: 1px;
    background: var(--pk-rule);
}

.pk-ac-wz-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
}

.pk-ac-wz-error {
    padding: 8px 11px;
    border: 1px solid #f3c9c9;
    border-radius: 5px;
    background: #fdf1f1;
    font-size: 11.7px;
    color: #a81f1f;
}

.pk-ac-wz-error.validation-summary-valid { display: none; }
.pk-ac-wz-error ul { margin: 0; padding-left: 16px; }

.pk-ac-wz-panel {
    padding: 14px 15px;
    border: 1px solid var(--pk-border);
    border-radius: 5px;
    background: #fff;
}

.pk-ac-wz-section {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 12.7px;
    font-weight: 600;
    color: var(--pk-text);
}

.pk-ac-wz-rule {
    flex: 1;
    height: 1px;
    background: var(--pk-rule);
}

.pk-ac-wz-section-note {
    font-size: 10.4px;
    font-weight: 500;
    color: var(--pk-muted);
}

.pk-ac-wz-grid {
    display: grid;
    gap: 12px;
}

.pk-ac-wz-grid.is-identity { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pk-ac-wz-grid.is-version { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pk-ac-wz-grid > .is-wide { grid-column: span 2; }

.pk-ac-wz .form-error {
    display: block;
    margin-top: 2px;
    font-size: 10.8px;
    color: #a81f1f;
}

.pk-ac-wz .form-error.is-block { margin: 0 0 8px; }
.pk-ac-wz .field-validation-valid { display: none; }

.pk-ac-wz-mono { font-family: ui-monospace, Consolas, monospace; }

.pk-ac-wz-status {
    display: flex;
    align-items: center;
    height: 30px;
}

.pk-ac-wz-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 8px;
    overflow: hidden;
    border: 1px dashed #bcc8e8;
    border-radius: 4px;
    background: #fafbff;
    font-size: 11.5px;
    color: var(--pk-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.pk-ac-wz-drop input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.pk-ac-wz-rel-cols,
.pk-ac-wz-col-cols {
    display: grid;
    gap: 8px;
    max-width: 560px;
}

.pk-ac-wz-rel-cols { grid-template-columns: minmax(180px, 1fr) 170px 28px; }
.pk-ac-wz-col-cols { grid-template-columns: minmax(170px, 1fr) 140px minmax(150px, 1fr) 28px; max-width: 680px; }

.pk-ac-wz-rel-cols.is-head,
.pk-ac-wz-col-cols.is-head {
    gap: 6px 8px;
    margin-bottom: 4px;
    font-size: 10.6px;
    font-weight: 600;
    color: var(--pk-muted);
}

.pk-ac-wz-rel,
.pk-ac-wz-col { margin-bottom: 5px; }

.pk-ac-wz-colour {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pk-ac-wz-remove {
    width: 28px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 14px;
    color: #c62828;
    cursor: pointer;
}

.pk-ac-wz-remove:hover { background: #fdf1f1; }

.pk-ac-wz-more {
    max-width: 560px;
    margin: 3px 0 4px;
    font-size: 11.5px;
}

/* Under the whole Identity grid rather than inside a row, so it needs the grid's own gap. */
.pk-ac-wz-more.is-identity { margin-top: 12px; }

.pk-ac-wz-more > summary {
    width: max-content;
    font-size: 11px;
    color: var(--pk-muted);
    cursor: pointer;
}

.pk-ac-wz-more > .pk-ac-ed-grid {
    margin-top: 6px;
    padding: 9px 10px;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
    background: #fafbfd;
}

.pk-ac-wz-check {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    font-size: 12px;
    color: var(--pk-text);
}

.pk-ac-wz-check input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--pk-primary);
}

.pk-ac-wz-empty {
    margin-bottom: 6px;
    font-size: 11.5px;
    color: var(--pk-muted);
}

.pk-ac-wz-add {
    height: 26px;
    padding: 0 11px;
    border: 1px dashed #9fb2e8;
    border-radius: 4px;
    background: #fff;
    font-size: 11.2px;
    color: var(--pk-primary);
    cursor: pointer;
}

.pk-ac-wz-note {
    padding: 7px 11px;
    border: 1px solid #cddff0;
    border-radius: 4px;
    background: #eaf1f9;
    font-size: 11.5px;
    color: #144d8a;
}

.pk-ac-wz-season {
    max-width: 200px;
    margin-top: 12px;
}

.pk-ac-wz-matrix {
    margin-top: 12px;
    overflow: auto;
}

.pk-ac-wz-mx { border-collapse: collapse; }

.pk-ac-wz-mx th {
    width: 42px;
    height: 28px;
    border-bottom: 1px solid #dee3ef;
    background: #f7f8fc;
    font-size: 11px;
    font-weight: 600;
    color: #4b5468;
    text-align: center;
}

.pk-ac-wz-mx th.is-name {
    min-width: 120px;
    padding: 0 10px;
    color: #6b7488;
    text-align: left;
}

.pk-ac-wz-mx td {
    height: 32px;
    border-bottom: 1px solid #f0f2f7;
    text-align: center;
}

.pk-ac-wz-mx td.is-name {
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.pk-ac-wz-skus {
    margin-top: 8px;
    font-size: 12px;
    color: var(--pk-text);
}

.pk-ac-wz-skus span {
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-wz-review {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px 18px;
    font-size: 12px;
    color: var(--pk-text);
}

.pk-ac-wz-review-label {
    font-size: 10.5px;
    color: var(--pk-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pk-ac-wz-review-code {
    margin-top: 2px;
    font-weight: 700;
}

.pk-ac-wz-review-value { margin-top: 2px; }
.pk-ac-wz-review-value.is-strong { font-weight: 600; }

.pk-ac-wz-review-note {
    margin-top: 12px;
    padding: 8px 11px;
    border: 1px solid #cddff0;
    border-radius: 4px;
    background: #eaf1f9;
    font-size: 11.5px;
    color: #144d8a;
}

.pk-ac-wz-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pk-ac-wz-cancel {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    font-size: 11.7px;
    color: var(--pk-muted);
    text-decoration: none;
}

.pk-ac-wz-cancel:hover { color: var(--pk-text); }
.pk-ac-wz .pk-ac-btn.is-wide { padding: 0 15px; }

@media (max-width: 575.98px) {
    .pk-ac-wz-grid > .is-wide { grid-column: auto; }
    .pk-ac-wz-rel-cols,
    .pk-ac-wz-col-cols { grid-template-columns: minmax(0, 1fr) 28px; }
}

/* ---- Detail drawer ------------------------------------------------------
   Follows the conventions .pk-ai-drawer already established (the [hidden]
   attribute as the single source of open/closed, a sibling backdrop, an
   Escape key handler, focus returned to the opener) rather than inventing a
   second drawer mechanism alongside it. */

.pk-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: rgba(15, 20, 35, .18);
}

.pk-drawer-backdrop[hidden] { display: none; }

.pk-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    width: 372px;
    max-width: 92vw;
    background: #fff;
    border-left: 1px solid #dee3ef;
    box-shadow: -10px 0 28px rgba(20, 24, 40, .10);
    display: flex;
    flex-direction: column;
}

.pk-drawer[hidden] { display: none; }

.pk-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--pk-border);
}

.pk-drawer-head-text { flex: 1 1 auto; min-width: 0; }

.pk-drawer-eyebrow {
    font-size: 10.5px;
    color: var(--pk-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.pk-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 13px;
}

.pk-drawer-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.pk-drawer-field { min-width: 0; }

.pk-drawer-field-label {
    font-size: 10.5px;
    color: var(--pk-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pk-drawer-field-value {
    font-size: 12.3px;
    font-weight: 600;
    color: var(--pk-text);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section heading with a rule that fills the remaining width. */
.pk-drawer-section {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 15px 0 8px;
    font-size: 12.3px;
    font-weight: 600;
    color: var(--pk-text);
}

.pk-drawer-section::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--pk-border);
}

.pk-drawer-section .pk-drawer-count {
    font-size: 10.4px;
    font-weight: 500;
    color: var(--pk-muted);
    order: 3;
}

.pk-drawer-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 13px;
    border-top: 1px solid var(--pk-border);
}

.pk-drawer-hint {
    margin-left: auto;
    font-size: 10.4px;
    color: var(--pk-muted);
}

@media (max-width: 575.98px) {
    .pk-drawer-fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Technical Sheet (Views/ArticleBoms/TechnicalSheet.cshtml) - the Production
   BOM's printable engineering specification of ONE colourway. Screen rules
   here; its print rules sit in the shared PRINT block below. Dense and
   manufacturing-oriented, within the compact standard: a strip of header
   facts with the image at the right, then one table grouped by production
   phase, each line's detail rows (size breakup, size rules, made-from)
   under its row at 11px. Nothing here calculates.
   ========================================================================== */

.pk-ac-ts-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.pk-ac-ts-sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--pk-muted);
}

.pk-ac-ts-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title image" "facts image";
    gap: 6px 14px;
    padding: 10px 12px;
    border: 1px solid var(--pk-border);
    border-radius: 4px;
    background: #fafbfd;
}

.pk-ac-ts-title {
    grid-area: title;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pk-ac-ts-org { font-size: 14px; font-weight: 700; color: var(--pk-text); }

.pk-ac-ts-doc {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pk-primary-dark);
}

.pk-ac-ts-facts {
    grid-area: facts;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 14px;
    margin: 0;
}

.pk-ac-ts-facts > div {
    display: flex;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
}

.pk-ac-ts-facts dt { flex: none; width: 96px; font-weight: 600; color: #6b7488; }
.pk-ac-ts-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--pk-text); }

.pk-ac-ts-image {
    grid-area: image;
    width: 120px;
    height: 92px;
    border: 1px solid #e4e7ec;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.pk-ac-ts-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pk-ac-ts-grid-wrap { margin-top: 10px; overflow-x: auto; }

.pk-ac-ts-grid {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.pk-ac-ts-grid th {
    height: 30px;
    padding: 0 8px;
    border-bottom: 1px solid #dee3ef;
    background: #f7f8fc;
    font-size: 11px;
    font-weight: 600;
    color: #6b7488;
    text-align: left;
    white-space: nowrap;
}

.pk-ac-ts-grid td {
    padding: 5px 8px;
    border-bottom: 1px solid #f0f2f7;
    font-size: 12px;
    color: var(--pk-text);
    vertical-align: top;
}

.pk-ac-ts-grid .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-ac-ts-grid td.is-matid { font-family: ui-monospace, Consolas, monospace; }
.pk-ac-ts-grid td.is-material { font-weight: 600; overflow-wrap: anywhere; }

.pk-ac-ts-phase td {
    padding: 4px 8px;
    border-top: 1px solid #dee3ef;
    border-bottom: 1px solid #dee3ef;
    background: #eef2f8;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #35405a;
}

.pk-ac-ts-detail td {
    padding-top: 2px;
    padding-bottom: 4px;
    border-bottom: 0;
    font-size: 11px;
    color: var(--pk-muted);
}

.pk-ac-ts-detail.is-made-from td { font-weight: 600; color: #35405a; }

.pk-ac-ts-constituent td {
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: 0;
    font-size: 11px;
    color: #4a5368;
}

.pk-ac-ts-constituent td.is-material { font-weight: 500; }
.pk-ac-ts-line tr:last-child td { border-bottom: 1px solid #f0f2f7; }

.pk-ac-ts-remark { margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--pk-muted); }

.pk-ac-ts-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    vertical-align: middle;
    white-space: nowrap;
}

.pk-ac-ts-flag.is-tentative { border-color: #f0d9b5; background: #fdf3e6; color: #8a5200; }
.pk-ac-ts-flag.is-component { border-color: #cddff0; background: #eaf1f9; color: #144d8a; }

.pk-ac-ts-gross { margin-left: 3px; font-size: 10px; font-weight: 400; color: var(--pk-muted); }

.pk-ac-ts-none { padding: 18px 8px; font-size: 12px; color: var(--pk-muted); text-align: center; }

.pk-ac-ts-remarks { margin-top: 12px; }

.pk-ac-ts-remarks h3 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #35405a;
}

.pk-ac-ts-remarks dl { margin: 0; border: 1px solid var(--pk-border); border-radius: 4px; }

.pk-ac-ts-remarks dl > div {
    display: flex;
    gap: 8px;
    padding: 5px 10px;
    border-bottom: 1px solid #f0f2f7;
    font-size: 12px;
}

.pk-ac-ts-remarks dl > div:last-child { border-bottom: 0; }
.pk-ac-ts-remarks dt { flex: none; width: 70px; font-weight: 600; color: #6b7488; }
.pk-ac-ts-remarks dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.pk-ac-ts-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--pk-border);
    font-size: 10.5px;
    color: var(--pk-muted);
}

@media (max-width: 767.98px) {
    .pk-ac-ts-head { grid-template-columns: 1fr; grid-template-areas: "title" "image" "facts"; }
    .pk-ac-ts-facts { grid-template-columns: 1fr; }
}

/* =====================================================================
   PRINT
   =====================================================================

   ADDITIVE AND SCREEN-INERT. Everything below sits inside @media print
   except the one rule that hides .pk-print-only on screen, so this block
   cannot change a single on-screen pixel - which is why it is safe to put
   in the shared stylesheet rather than inlined per view. It sets no font
   size, control height or padding for the screen, so the compact-UI
   standard is untouched.

   There was no print support anywhere in this application before the
   Production BOM requirement preview needed it. This is the whole of it:
   normal CSS, no PDF library, no report framework, no export. */

.pk-print-only { display: none; }

@media print {
    /* THE CHROME GOES, THE CONTENT STAYS. A printed requirement sheet needs
       the figures and the context they belong to, not the sidebar, the
       search box or the buttons that do nothing on paper. */
    .pk-sidebar,
    .pk-header,
    .pk-toast-region,
    .nav-tabs,
    .footer,
    .btn,
    .dropdown,
    form[data-pk-requirement-form] {
        display: none !important;
    }

    .pk-print-only { display: block; }

    .pk-content { margin: 0 !important; padding: 0 !important; }

    /* Borders survive printing; background fills usually do not, so the
       table is given real rules rather than relying on striping. */
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #999 !important; padding: 3px 5px !important; }
    thead { display: table-header-group; }
    tr { page-break-inside: avoid; }

    /* A component's exploded materials must not be separated from the line
       they belong to by a page break. Each line is one <details> holding its
       row, its explanation and its explosion (Step 6), so the whole line is
       kept together. */
    details[data-pk-requirement-line] { page-break-inside: avoid; }

    /* THE REQUIREMENT PREVIEW sits in the Article workspace shell (Step 6):
       on its own page the shell and the 30px buttons are chrome too, and its
       print-only header carries the context instead. Its grid is rows of
       spans rather than a table, so it is narrowed to the paper here - no
       minimum width, columns that share the page, figures that may wrap
       rather than be cut, and real rules. */
    body:has([data-pk-requirement-page]) .pk-ac-sticky,
    [data-pk-requirement-page] .pk-ac-btn {
        display: none !important;
    }

    .pk-ac-rq-grid-wrap { overflow: visible !important; }

    .pk-ac-rq-grid {
        --pk-ac-rq-cols: 14px 34px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.5fr)
                         minmax(0, .9fr) minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1.1fr) minmax(0, 1.4fr);
        min-width: 0 !important;
    }

    .pk-ac-rq-row { border-bottom: 1px solid #999 !important; }

    /* Nothing is cut on paper: a figure, a code or a unit wraps in its column instead of
       ending in an ellipsis. */
    .pk-ac-rq-row > span {
        padding: 0 4px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* EVERY LINE PRINTS ITS EXPLANATION AND ITS COMPONENT EXPLOSION, opened on screen or
       not. A closed <details> hides its content through ::details-content; for print only
       that content is made visible - nothing is duplicated or recalculated, and on screen
       each row keeps the state the user left it in. The chevron and the "View line" link
       mean nothing on paper. */
    details[data-pk-requirement-line]::details-content {
        content-visibility: visible;
    }

    .pk-ac-rq-chev { visibility: hidden; }
    .pk-ac-rq-why-link { display: none !important; }

    /* THE TECHNICAL SHEET (Views/ArticleBoms/TechnicalSheet.cshtml) prints on its own
       NAMED page - A4 portrait, 10mm margins - so every other screen's printing is left
       exactly as it was. The workspace shell, the Print and Back buttons and the
       on-screen notes are chrome; the sheet's own header, table, remarks and footer are
       the document. A phase heading stays with the lines that follow it, a line keeps
       its detail rows with it, and a material name wraps rather than clips. */
    [data-pk-technical-sheet] { page: pk-technical-sheet; }

    @page pk-technical-sheet {
        size: A4 portrait;
        margin: 10mm;
    }

    body:has([data-pk-technical-sheet]) .pk-ac-sticky,
    body:has([data-pk-technical-sheet]) .pk-ac-note,
    [data-pk-technical-sheet] .pk-ac-ts-actions,
    [data-pk-technical-sheet] .pk-ac-ts-screen-only {
        display: none !important;
    }

    .pk-ac-ts { border: 0 !important; padding: 0 !important; box-shadow: none !important; }

    /* A4's printable width is narrower than the screen breakpoint that stacks the
       header into one column, so the print layout is restated here: the facts in two
       columns, the image at the right. */
    .pk-ac-ts-head {
        break-inside: avoid;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "title image" "facts image" !important;
        border-color: #999 !important;
        background: #fff !important;
    }

    .pk-ac-ts-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    .pk-ac-ts-image { width: 36mm; height: 28mm; }

    .pk-ac-ts-grid-wrap { overflow: visible !important; }

    /* THE TABLE FITS THE PAGE: fixed column widths that sum to the printable width, and
       no cell may refuse to wrap - a long material name or marker folds inside its
       column instead of pushing the Average column off the paper. */
    .pk-ac-ts-grid {
        table-layout: fixed;
        width: 100% !important;
        min-width: 0 !important;
    }

    .pk-ac-ts-grid th:nth-child(1) { width: 15%; }
    .pk-ac-ts-grid th:nth-child(2) { width: 8%; }
    .pk-ac-ts-grid th:nth-child(3) { width: 14%; }
    .pk-ac-ts-grid th:nth-child(4) { width: 33%; }
    .pk-ac-ts-grid th:nth-child(5) { width: 11%; }
    .pk-ac-ts-grid th:nth-child(6) { width: 7%; }
    .pk-ac-ts-grid th:nth-child(7) { width: 12%; }

    .pk-ac-ts-grid th,
    .pk-ac-ts-grid td,
    .pk-ac-ts-grid .is-num,
    .pk-ac-ts-flag {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .pk-ac-ts-grid th,
    .pk-ac-ts-grid td {
        padding: 2px 4px !important;
        font-size: 10.5px !important;
    }

    .pk-ac-ts-grid th { background: #eee !important; }
    .pk-ac-ts-grid td.is-material { white-space: normal !important; overflow-wrap: anywhere; }
    .pk-ac-ts-phase td { background: #e4e4e4 !important; }

    .pk-ac-ts-phase { break-after: avoid; break-inside: avoid; }
    .pk-ac-ts-line { break-inside: avoid; }
    .pk-ac-ts-remarks { break-inside: avoid; margin-top: 6mm; }
    .pk-ac-ts-foot { margin-top: 4mm; }
}

/* ==========================================================================
   Tenant sign-in: Views/Account/Login.cshtml inside _AccountLayout's login
   shell. The approved design is docs/mockups/design_handoff_tenant_login
   (README + "Paduka Login v2.dc.html"); the values below are that
   reference's own.

   THE ONE PAGE-SCOPED EXCEPTION to the compact standard in
   .claude/rules/ui.md: a 46px headline, an illustrated hero and 42px
   controls were approved for the sign-in page ONLY. Every rule here is under
   a .pk-login-* class that only the login shell renders, so none of it can
   reach an ERP screen or the other account pages (ChangePassword,
   AccessDenied keep the compact card). Do not reuse these sizes elsewhere.

   The reference page loads no Bootstrap, so the shell resets the two reboot
   values that would otherwise shift its text: line-height and the 13px root
   size.

   Deliberate deviations from the reference, for narrow screens only (it
   overflows at 320px): inputs may shrink (min-width: 0), the link and the
   button never break inside their labels, the actions row wraps instead of
   squeezing, and under 520px the panel and card padding tighten.
   ========================================================================== */

.pk-login {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  overflow: hidden;
  font-family: var(--pk-font-sans);
  font-size: 16px;
  line-height: normal;
  color: var(--pk-text);
}

/* ---- Left column: brand, headline, illustration ---- */
.pk-login-intro {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px clamp(20px, 4vw, 48px);
  overflow: hidden;
}

.pk-login-brand { display: flex; align-items: center; gap: 10px; }

/* Stand-in for the official Paduka logo; swap for the asset when it exists. */
.pk-login-brand-mark {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a77cc, var(--pk-primary-dark));
  box-shadow: 0 4px 10px rgba(27, 95, 170, .35);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.pk-login-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.pk-login-brand-name { font-size: 16px; font-weight: 700; color: var(--pk-primary-dark); }
.pk-login-brand-tag { font-size: 11px; letter-spacing: .06em; color: var(--pk-muted); }

.pk-login-hero { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.pk-login-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 12px;
  font-size: 46px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--pk-text);
}

.pk-login-title-accent { font-weight: 700; color: var(--pk-primary); }

.pk-login-tagline {
  margin: 0;
  max-width: 440px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: #5b6475;
}

.pk-login-tagline strong { font-weight: 600; color: var(--pk-text); }

/* ---- The illustration: a fixed 480x360 stage, scaled as a whole ----
   The negative margin hands back the height the scale-down frees, so the
   column below does not keep a 360px hole. */
.pk-login-art {
  --pk-login-art-scale: 1;
  position: relative;
  flex: none;
  align-self: center;
  width: 480px;
  height: 360px;
  transform: scale(var(--pk-login-art-scale));
  transform-origin: top center;
  margin-bottom: calc((var(--pk-login-art-scale) - 1) * 360px);
}

@media (max-width: 1100px) { .pk-login-art { --pk-login-art-scale: .8; } }
@media (max-width: 860px) { .pk-login-art { --pk-login-art-scale: .62; } }
@media (max-width: 520px) { .pk-login-art { --pk-login-art-scale: .6; } }

.pk-login-art > * { position: absolute; }

.pk-login-art-disc {
  left: 60px; top: 10px; width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f1f6fd, #d9e6f7);
}

.pk-login-art-orbit-outer {
  left: 30px; top: -20px; width: 410px; height: 410px;
  border-radius: 50%;
  border: 1.5px dashed #b9cde8;
}

.pk-login-art-orbit-inner {
  left: 100px; top: 50px; width: 270px; height: 270px;
  border-radius: 50%;
  border: 1px dotted #9dbbe2;
}

.pk-login-art-plus-red { left: 96px; top: 4px; font-size: 26px; font-weight: 300; color: #e0435a; }
.pk-login-art-plus-gold { left: 440px; top: 120px; font-size: 22px; font-weight: 300; color: #f2a93b; }

.pk-login-art-dot-gold { left: 6px; top: 230px; width: 12px; height: 12px; border-radius: 50%; background: #f2a93b; }
.pk-login-art-dot-red { left: 300px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #e0435a; }
.pk-login-art-ring-blue { left: 458px; top: 300px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #2a77cc; }

.pk-login-laptop {
  left: 80px; top: 96px; width: 300px; height: 190px;
  padding: 10px;
  border-radius: 12px 12px 4px 4px;
  background: #1f2430;
  box-shadow: 0 22px 44px rgba(20, 40, 80, .28);
}

.pk-login-laptop-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  overflow: hidden;
  border-radius: 4px;
  background: #f3f7fd;
}

.pk-login-laptop-titlebar { display: flex; align-items: center; gap: 5px; }
.pk-login-laptop-titlebar > span { width: 6px; height: 6px; border-radius: 50%; }
.pk-login-laptop-light-red { background: #e0435a; }
.pk-login-laptop-light-gold { background: #f2a93b; }
.pk-login-laptop-light-green { background: #2fbf7f; }
.pk-login-laptop-titlebar > .pk-login-laptop-address { width: 60px; height: 5px; margin-left: 8px; border-radius: 3px; background: #c3cfdf; }

.pk-login-laptop-body { flex: 1; display: grid; grid-template-columns: 96px 1fr; gap: 12px; }

.pk-login-donut {
  align-self: center;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--pk-primary) 0 42%, #5aa0e6 42% 68%, #f2a93b 68% 84%, #c9dbf2 84% 100%);
}

.pk-login-donut > span { width: 42px; height: 42px; border-radius: 50%; background: #f3f7fd; }

.pk-login-chart { display: flex; flex-direction: column; justify-content: center; gap: 8px; }

.pk-login-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px;
  border-bottom: 1px solid #c9d5e6;
}

.pk-login-bars > span { width: 12px; border-radius: 2px 2px 0 0; transform-origin: bottom; }
.pk-login-bars > span:nth-child(1) { height: 40%; background: #c9dbf2; }
.pk-login-bars > span:nth-child(2) { height: 65%; background: #5aa0e6; }
.pk-login-bars > span:nth-child(3) { height: 50%; background: #c9dbf2; }
.pk-login-bars > span:nth-child(4) { height: 90%; background: var(--pk-primary); }
.pk-login-bars > span:nth-child(5) { height: 72%; background: #5aa0e6; }
.pk-login-bars > span:nth-child(6) { height: 100%; background: #f2a93b; }

.pk-login-chart-line-long { width: 90%; height: 5px; border-radius: 3px; background: #c3cfdf; }
.pk-login-chart-line-short { width: 65%; height: 5px; border-radius: 3px; background: #d7e0ec; }

.pk-login-laptop-base {
  left: 50px; top: 286px; width: 360px; height: 14px;
  border-radius: 2px 2px 14px 14px;
  background: linear-gradient(#e3e8f0, #c6cedb);
  box-shadow: 0 12px 22px rgba(20, 40, 80, .16);
}

.pk-login-laptop-notch {
  left: 170px; top: 286px; width: 120px; height: 5px;
  border-radius: 0 0 6px 6px;
  background: #b3bccb;
}

/* The 6deg tilt is read back by pk-login-illustration.js and kept under the
   float animation, so it must stay a transform on this element. */
.pk-login-phone {
  left: 330px; top: 150px; width: 84px; height: 160px;
  z-index: 2;
  padding: 6px;
  border-radius: 16px;
  background: #1f2430;
  box-shadow: 0 22px 40px rgba(20, 40, 80, .32);
  transform: rotate(6deg);
}

.pk-login-phone-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2a6fbd, var(--pk-primary));
}

.pk-login-phone-speaker { width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .4); }

.pk-login-phone-ring {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#f2a93b 0 72%, rgba(255, 255, 255, .25) 72% 100%);
}

.pk-login-phone-ring > span { width: 24px; height: 24px; border-radius: 50%; background: var(--pk-primary); }

.pk-login-phone-row-active,
.pk-login-phone-row { width: 54px; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.pk-login-phone-row-active { background: rgba(255, 255, 255, .9); }

/* Four icon tiles, no text. */
.pk-login-tile {
  z-index: 3;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(20, 40, 80, .16);
}

.pk-login-tile-check { left: 0; top: 100px; }
.pk-login-tile-check > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e6f4ee;
  color: var(--pk-success);
  font-size: 16px;
  font-weight: 700;
}

.pk-login-tile-bars { left: 380px; top: 20px; }
.pk-login-tile-bars > div { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.pk-login-tile-bars span { width: 5px; border-radius: 2px; background: #f2a93b; }
.pk-login-tile-bars span:nth-child(1) { height: 35%; }
.pk-login-tile-bars span:nth-child(2) { height: 60%; }
.pk-login-tile-bars span:nth-child(3) { height: 45%; }
.pk-login-tile-bars span:nth-child(4) { height: 100%; }

.pk-login-tile-grid { left: 20px; top: 250px; }
.pk-login-tile-grid > div { display: grid; grid-template-columns: repeat(2, 10px); gap: 3px; }
.pk-login-tile-grid span { width: 10px; height: 10px; border-radius: 3px; background: #5aa0e6; }
.pk-login-tile-grid span:nth-child(1) { background: var(--pk-primary); }
.pk-login-tile-grid span:nth-child(4) { background: #f2a93b; }

.pk-login-tile-dot { left: 190px; top: 20px; }
.pk-login-tile-dot > span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pk-primary);
  box-shadow: 0 0 0 5px #dbe7f6;
}

/* ---- Right column: the curved blue panel ----
   The ripple bands are box-shadows, so they follow the curve; overflow:
   hidden clips the decoration, not the panel's own shadow. */
.pk-login-panel {
  position: relative;
  z-index: 1;
  flex: 1 1 360px;
  min-width: 0;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 40px 48px 64px;
  overflow: hidden;
  border-radius: 160px 0 0 160px / 50% 0 0 50%;
  background: linear-gradient(160deg, #4a8fd8 0%, #3c84d2 50%, #3277c4 100%);
  box-shadow: -16px 0 0 #dbe7f6, -34px 0 0 #eef4fc, -52px 0 0 #f7fafe;
  color: #fff;
}

.pk-login-panel-decor { position: absolute; inset: 0; pointer-events: none; }
.pk-login-panel-decor > * { position: absolute; }

.pk-login-panel-dots {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(120deg, transparent 30%, #000 100%);
}

.pk-login-panel-arc-outer {
  inset: 28px 0 28px 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-right: 0;
  border-radius: 140px 0 0 140px / 50% 0 0 50%;
}

.pk-login-panel-arc-inner {
  inset: 64px 0 64px 60px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-right: 0;
  border-radius: 120px 0 0 120px / 50% 0 0 50%;
}

.pk-login-panel-glow-top {
  right: -140px; top: -140px; width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 160, 230, .45), transparent 70%);
}

.pk-login-panel-glow-bottom {
  left: 30%; bottom: -160px; width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 169, 59, .22), transparent 70%);
}

.pk-login-panel-ring {
  right: 48px; top: 56px; width: 90px; height: 90px;
  border-radius: 50%;
  border: 2px dashed rgba(242, 169, 59, .55);
}

.pk-login-panel-ring-dot {
  right: 86px; top: 94px; width: 14px; height: 14px;
  border-radius: 50%;
  background: #f2a93b;
  box-shadow: 0 0 18px rgba(242, 169, 59, .8);
}

.pk-login-panel-spark { left: 24%; top: 16%; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .7; }

.pk-login-panel-square {
  right: 18%; bottom: 14%; width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, .35);
  transform: rotate(20deg);
}

/* ---- The sign-in card ---- */
.pk-login-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 30px;
  border: 1px solid #fff;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px rgba(6, 24, 48, .28);
  color: var(--pk-text);
}

.pk-login-card-head { display: flex; flex-direction: column; gap: 6px; }

.pk-login-card-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.01em;
  color: var(--pk-text);
}

.pk-login-workspace { margin: 0; font-size: 13px; color: #5b6475; }
.pk-login-workspace strong { font-weight: 600; color: var(--pk-primary-dark); }

/* The form-level error. The ModelOnly summary renders only when there is one;
   the -valid rule is a backstop. */
.pk-login-alert {
  padding: 9px 12px;
  border-radius: 6px;
  background: #fdecec;
  color: var(--pk-danger);
  font-size: 12px;
  font-weight: 600;
}

.pk-login-alert.validation-summary-valid { display: none; }
.pk-login-alert ul { margin: 0; padding: 0; list-style: none; }

.pk-login-form { display: flex; flex-direction: column; gap: 16px; }

.pk-login-field { display: flex; flex-direction: column; gap: 6px; }

.pk-login-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--pk-text); }

/* outline is transparent rather than none so that forced-colours (high
   contrast) mode, which drops box-shadows, still draws a focus ring. */
.pk-login-input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--pk-rule);
  border-radius: 6px;
  outline: 2px solid transparent;
  background: #f7f9fc;
  font: inherit;
  font-size: 14px;
  color: var(--pk-text);
}

.pk-login-input::placeholder { color: #a9b1c0; opacity: 1; }

.pk-login-input:focus {
  border-color: var(--pk-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27, 95, 170, .15);
}

.pk-login-input.input-validation-error { border-color: var(--pk-danger); }
.pk-login-input.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, .15); }

.pk-login-error { font-size: 12px; font-weight: 600; color: var(--pk-danger); }
.pk-login-error:empty { display: none; }

.pk-login-password { position: relative; display: flex; }
.pk-login-password > .pk-login-input { flex: 1; padding-right: 56px; }

.pk-login-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: #5b6475;
  cursor: pointer;
}

.pk-login-toggle:hover { color: var(--pk-text); }

.pk-login-forgot { margin-top: 6px; }

.pk-login-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* "Forgot Password?" is a disclosure button, drawn as the reference's link. */
.pk-login-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--pk-primary);
  white-space: nowrap;
  cursor: pointer;
}

.pk-login-link:hover { color: var(--pk-primary-dark); text-decoration: underline; }

/* Flat primary. margin-left: auto keeps it right-aligned on its own, before
   the script reveals the Forgot link and when the row wraps. */
.pk-login-submit {
  height: 42px;
  margin-left: auto;
  padding: 0 32px;
  border: 0;
  border-radius: 6px;
  background: var(--pk-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}

.pk-login-submit:hover { background: var(--pk-primary-dark); }
.pk-login-submit:active { background: #0f3a66; }
.pk-login-submit-arrow { margin-left: 6px; }

.pk-login-toggle:focus-visible,
.pk-login-link:focus-visible,
.pk-login-submit:focus-visible {
  outline: 2px solid var(--pk-primary);
  outline-offset: 2px;
}

.pk-login-toggle:focus-visible { outline-offset: -2px; }

.pk-login-help {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: #eef4fc;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pk-primary-dark);
}

.pk-login-footer {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  text-align: center;
  color: #e3ecf7;
}

.pk-login-footer strong { font-weight: 600; color: #fff; }
.pk-login-footer small { font-size: 11px; opacity: .8; }

@media (max-width: 520px) {
  .pk-login-panel { padding: 40px 16px 40px 40px; }
  .pk-login-card { padding: 28px 22px; }
}