/**
 * openboxes-theme.css — uniform design theme for legacy (GSP) pages.
 *
 * Restyles pages using layouts/custom.gsp to match the newer React pages
 * (reference: /product/list). Specs are derived from the React stack's SCSS:
 * src/css/colors.scss, src/css/main.scss, DataTable.scss, Layout/v2/styles.scss,
 * form-elements/v2/style.scss.
 *
 * Loaded from custom.gsp AFTER <g:layoutHead/> (so it takes precedence over
 * page-specific stylesheets) and BEFORE /common/_customCss.gsp (so per-warehouse
 * header colors keep working).
 *
 * CSS only — no markup changes. Keep selectors as low-specificity as source
 * order allows; prefer position over !important.
 */

/* ============================================================
   1. DESIGN TOKENS
   Authoritative copy of src/css/colors.scss :root for legacy pages.
   (openboxes.css carries an older partial copy; this one wins by order.)
   ============================================================ */
:root {
  --page-background: #F0F1F4;
  --color-red: #C71610;
  --color-green: #13AD60;
  --color-yellow: #F3A157;

  --red-100: #FFF1F0;
  --red-200: #F36D5F;
  --red-500: #E43B35;
  --red-800: #C7161033;

  --blue-primary: #0052CC;
  --blue-100: #F7F9FD;
  --blue-200: #F0F6FF;
  --blue-201: #F4F7FE;
  --blue-202: #E4F0FA;
  --blue-300: #E9EDF4;
  --blue-301: #D0DAED;
  --blue-400: #7AA3F3;
  --blue-401: #2192EE;
  --blue-500: #2264E5;
  --blue-700: #2B3674;
  --blue-800: #202750;

  --gray-100: #EAEAEA;
  --gray-101: #F6F6F6;
  --gray-102: #DFE4ED;
  --gray-103: #EDEDED;
  --gray-200: #D6D8DC;
  --gray-250: #D0DAED;
  --gray-300: #CED4DA;
  --gray-301: #BFC3CB;
  --gray-350: #9299A6;
  --gray-400: #636D81;
  --gray-401: #747C93;
  --gray-500: #636D81;
  --gray-600: #464F60;

  --purple-100: #EFEDFD;
  --purple-600: #644FFF;

  --green-500: #30a64a;
  --green-800: #13AD6033;

  /* Shared effects (theme-local additions) */
  --focus-ring: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(104, 113, 130, 0.16), 0 0 0 4px rgba(34, 100, 229, 0.15);
  --card-radius: 4px;
  /* One shadow for centered "focus cards" (login, location chooser);
     in-app content cards stay flat like the React reference */
  --focus-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.07);
}

/* ============================================================
   2. FOUNDATIONS
   Page sits on --page-background; content in white radius-4 cards.
   Base UI text: Inter 14px, --gray-600 on data surfaces.
   ============================================================ */

body {
  background: var(--page-background);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #333;
}

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

/* Page/section headings — React section-title spec (v2/styles.scss).
   The legacy global h2 is a 40px gray bar (openboxes.css:1529); flatten it. */
h2 {
  height: auto;
  line-height: 24px;
  background: transparent;
  border: none; /* legacy h2 carries a full 1px #D5D5D5 border */
  color: var(--blue-primary);
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
  padding: 16px;
  margin: 0;
}

h1 {
  font-size: 18px;
  font-weight: 500;
  color: var(--blue-800);
}

/* ============================================================
   2b. PAGE RHYTHM
   React list pages use a 32px page gutter (.list-page-main) with
   content in cards. Give legacy pages the same gutter and a
   consistent vertical rhythm.
   ============================================================ */

/* The gutter lives on #content, not on .body: several pages (e.g.
   productComponent, the scaffolded views) have no .body wrapper and
   were rendering flush against the viewport edge. */
#content {
  padding: 0 32px 24px;
}

#content > .body {
  padding: 0;
}

h1 {
  margin: 16px 0 8px;
}

.buttonBar,
.button-bar {
  padding: 16px 0 8px;
}

/* ============================================================
   3e. PANELS & MESSAGES (early: boxes frame everything else)
   ============================================================ */

/* .box — the universal legacy panel → white card, radius 4, no border */
.box,
.box-white {
  background-color: #ffffff;
  border: none;
  border-radius: var(--card-radius);
  margin: 16px 0;
}

.box > h2 {
  border-bottom: 1px solid var(--gray-250);
}

/* Breathing room for non-table box content (tables stay flush like the
   React list card; forms/filter stacks get the card's 16px inset) */
.box > form,
.box > fieldset,
.box > p,
.box > .filter-list {
  display: block;
  padding: 8px 16px 16px;
}

/* Legacy definition-style form rows (tr.prop > td.name/td.value):
   kill the gray label column and dotted row separators */
.prop {
  border-top: none;
}

.prop .name,
.prop td.name {
  background-color: transparent;
  color: var(--gray-600);
  font-weight: 500;
  text-align: right;
  padding-right: 16px;
}

.prop .value,
.prop td.value {
  background-color: transparent;
}

/* Flash/info/error/warning boxes → React alert spec: white card,
   1px severity border, radius 4. Keep the silk icons for now. */
.message {
  background-color: #ffffff;
  border: 1px solid var(--gray-500);
  border-radius: 4px;
  color: var(--gray-600);
  font-size: 14px;
  padding: 12px 16px 12px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636D81' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E");
  background-position: 12px 50%;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.warning {
  background-color: #ffffff;
  border: 1px solid var(--color-yellow);
  border-radius: 4px;
  color: var(--gray-600);
  font-size: 14px;
  padding: 12px 16px 12px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3A157' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L22 20H2z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E");
  background-position: 12px 50%;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

div.errors {
  background-color: #ffffff;
  border: 1px solid var(--color-red);
  border-radius: 4px;
  color: var(--red-500);
  font-size: 14px;
  padding: 12px 16px;
}

/* ============================================================
   3a. BUTTONS
   Legacy .button is CSS3-GitHub-Buttons (gray gradient, blue-gradient
   hover) — openboxes.css:2724. Default maps to the React SECONDARY
   variant; explicit submits map to PRIMARY.
   ============================================================ */

.button,
.buttons input,
input[type="submit"],
button {
  background-color: var(--blue-100);
  background-image: none;
  color: var(--gray-600);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.02em;
  text-shadow: none;
  cursor: pointer;
}

/* No border changes on hover/active: the rest-state rule already
   zeroes borders, and stripping them here shifts layout on bordered
   buttons (e.g. the nav location chooser) */
/* a.button:hover in openboxes.css sets white text (invisible on the
   light secondary background) and outranks a bare .button:hover */
.button:hover,
.button:focus,
a.button:hover,
a.button:focus,
a.button:link,
a.button:visited,
.buttons input:hover,
input[type="submit"]:hover,
button:hover {
  background-color: var(--blue-100);
  background-image: none;
  color: var(--blue-500);
  text-shadow: none;
  text-decoration: none;
}

a.button:link,
a.button:visited {
  color: var(--gray-600);
}

.button:active,
.button.active {
  background-color: var(--blue-100);
  background-image: none;
  color: var(--blue-500);
  outline: 1px solid var(--blue-primary);
}

/* Form submit actions are the "primary" of their form — explicit
   type="submit" only (implicitly-submitting <button>s without a type,
   like the Download action-menu triggers, stay secondary) */
input[type="submit"],
button[type="submit"],
.buttons input.save {
  background-color: var(--blue-primary);
  color: #ffffff;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
button[type="submit"]:focus,
.buttons input.save:hover {
  background-color: var(--blue-500);
  background-image: none;
  color: #ffffff;
}

/* GH-sprite icons are dark — flip them white on the blue background */
button[type="submit"].icon:before {
  filter: brightness(0) invert(1);
}

/* Implicit-submit primary conventions: report "Run" buttons and
   filter "Search" buttons are their form's primary action */
button[value="run"],
button[name="search"],
button[name="save"],
button[name="create"] {
  background-color: var(--blue-primary);
  color: #ffffff;
}

button[value="run"]:hover,
button[value="run"]:focus,
button[name="search"]:hover,
button[name="search"]:focus,
button[name="save"]:hover,
button[name="save"]:focus,
button[name="create"]:hover,
button[name="create"]:focus {
  background-color: var(--blue-500);
  color: #ffffff;
}

button[name="search"].icon:before,
button[name="save"].icon:before,
button[name="create"].icon:before {
  filter: brightness(0) invert(1);
}

/* Delete stays a danger action */
.buttons input.delete {
  background-color: #ffffff;
  color: var(--color-red);
  border: 1px solid var(--color-red);
}

.buttons input.delete:hover {
  background: var(--red-100);
  color: var(--color-red);
}

/* Buttons lay out as centered flex rows: icon images and sprite icons
   align optically without baseline fiddling */
/* 8px icon-to-text gap matches the React Button component (gap-8) */
.button,
button.button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  box-sizing: border-box;
}

.button img {
  vertical-align: middle;
  flex-shrink: 0;
}

/* Filter sidebars: action buttons stack full-width with an 8px gap
   instead of a centered ragged pile */
/* .filter-list-item.buttons is handled with the other action-row
   flavours further down — a `gap` here would stack on top of the
   16px child margins used there and double the spacing. */

/* Legacy affirmative/destructive semantics → React primary / danger-outline */
button.positive,
.button.positive,
input.positive,
.button.primary {
  background-color: var(--blue-primary);
  background-image: none;
  color: #ffffff;
  border: none;
}

button.positive:hover,
.button.positive:hover,
input.positive:hover,
.button.primary:hover {
  background-color: var(--blue-500);
  background-image: none;
  color: #ffffff;
}

button.negative,
.button.negative,
input.negative,
.button.danger {
  background-color: #ffffff;
  background-image: none;
  color: var(--color-red);
  border: 1px solid var(--color-red);
}

button.negative:hover,
.button.negative:hover,
input.negative:hover,
.button.danger:hover,
.button.danger:focus,
.button.danger:active {
  background: var(--red-100);
  background-image: none;
  color: var(--color-red);
  border-color: var(--color-red);
}

/* Legacy .button carries margin: 5px — tighten to the React 8px gap rhythm */
.button {
  margin: 2px 8px 2px 0;
}

/* GH-buttons semantic icons: approve (Save, 43 uses) is the page's
   primary action; trash/remove are destructive. The rest sprite-shifts
   to the white icon variant so it reads on the blue background. */
.button.icon.approve {
  background-color: var(--blue-primary);
  background-image: none;
  color: #ffffff;
  border: none;
}

.button.icon.approve:hover,
.button.icon.approve:focus,
.button.icon.approve:active {
  background-color: var(--blue-500);
  background-image: none;
  color: #ffffff;
}

.button.approve.icon:before {
  filter: brightness(0) invert(1); /* white check at rest (blue bg) */
}

.button.icon.trash,
.button.icon.remove {
  background-color: #ffffff;
  background-image: none;
  color: var(--color-red);
  border: 1px solid var(--color-red);
}

.button.icon.trash:hover,
.button.icon.trash:focus,
.button.icon.trash:active,
.button.icon.remove:hover,
.button.icon.remove:focus,
.button.icon.remove:active {
  background: var(--red-100);
  background-image: none;
  color: var(--color-red);
  border-color: var(--color-red);
}

/* ============================================================
   ICONS — unify on line-style SVG glyphs (Remixicon look: 24-grid,
   2px stroke, round caps). Replaces the dark gh-icons.png sprite for
   every icon class in use; markup untouched. Default color is
   --gray-600; primary/blue contexts flip white via the invert filter.
   ============================================================ */

.button.icon:before {
  content: "";
  float: none;
  width: 15px;
  height: 15px;
  margin: 0;
  top: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  background-image: none;
  flex-shrink: 0;
}

/* The legacy sprite rules set per-icon background-positions at higher
   specificity (.button.X.icon:before) — pin the SVGs back to center
   at the same specificity for every icon class in use */
.button.approve.icon:before,
.button.accept.icon:before,
.button.trash.icon:before,
.button.delete.icon:before,
.button.add.icon:before,
.button.search.icon:before,
.button.reload.icon:before,
.button.loop.icon:before,
.button.remove.icon:before,
.button.log.icon:before,
.button.edit.icon:before,
.button.mail.icon:before,
.button.email.icon:before,
.button.arrowright.icon:before,
.button.arrowleft.icon:before,
.button.arrowdown.icon:before,
.button.arrowup.icon:before,
.button.user.icon:before,
.button.tag.icon:before,
.button.move.icon:before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
}

/* ...and the legacy :hover/:focus/:active sprite shifts, which are
   written per icon (.button.reload.icon:hover:before = 3 classes) and
   would otherwise shove the SVG out of its box on hover, making the
   icon vanish. The repeated .icon lifts this above them. */
.button.icon.icon:is(:hover, :focus, :active):before {
  background-position: center !important;
  background-size: 15px 15px !important;
}

.button.approve.icon:before,
.button.accept.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l5 5L19.5 6.5'/%3E%3C/svg%3E");
}

.button.trash.icon:before,
.button.delete.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 3.5h4M6.5 7l1 13.5h9l1-13.5M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

.button.add.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
}

.button.search.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3C/svg%3E");
}

.button.reload.icon:before,
.button.loop.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E");
}

.button.remove.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/svg%3E");
}

.button.log.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h8l4 4v14h-12z'/%3E%3Cpath d='M14 3v4.5h4.5M9.5 12.5h5M9.5 16h5'/%3E%3C/svg%3E");
}

.button.edit.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16.5 4.5l3 3L8 19l-4 1z'/%3E%3C/svg%3E");
}

.button.mail.icon:before,
.button.email.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E");
}

.button.arrowright.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
}

.button.arrowleft.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12h-15M10.5 6l-6 6 6 6'/%3E%3C/svg%3E");
}

.button.arrowdown.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M6 13.5l6 6 6-6'/%3E%3C/svg%3E");
}

.button.arrowup.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5v-15M6 10.5l6-6 6 6'/%3E%3C/svg%3E");
}

.button.user.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.5-3.5 4.2-5 7.5-5s6 1.5 7.5 5'/%3E%3C/svg%3E");
}

.button.tag.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5h8l9 9-8 8-9-9z'/%3E%3Ccircle cx='8' cy='8' r='1.4' fill='%23464F60'/%3E%3C/svg%3E");
}

.button.move.icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M12 3l-3 3M12 3l3 3M12 21l-3-3M12 21l3-3M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3'/%3E%3C/svg%3E");
}

/* The most-used silk PNGs are swapped outright for line icons via the
   `content` property — the one way CSS can replace an <img>'s pixels
   without touching markup. Ranked by usage across the GSP views. */
img[src*="/icons/silk/add.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/pencil.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16.5 4.5l3 3L8 19l-4 1z'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/delete.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 3.5h4M6.5 7l1 13.5h9l1-13.5M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/accept.png"],
img[src*="/icons/silk/tick.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l5 5L19.5 6.5'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/bullet_arrow_down.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/application_view_list.png"],
img[src*="/icons/silk/application_side_list.png"],
img[src*="/icons/silk/application.png"],
img[src*="/icons/silk/table.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M9 9.5v10'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/zoom.png"],
img[src*="/icons/silk/magnifier.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/decline.png"],
img[src*="/icons/silk/cross.png"],
img[src*="/icons/silk/cancel.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/printer.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V4h10v5M7 18H5a1.5 1.5 0 0 1-1.5-1.5v-5A1.5 1.5 0 0 1 5 10h14a1.5 1.5 0 0 1 1.5 1.5v5A1.5 1.5 0 0 1 19 18h-2'/%3E%3Cpath d='M7 15h10v5.5H7z'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/error.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C71610' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/email.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/play_green.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.8l12 7.2-12 7.2z'/%3E%3C/svg%3E"); }
/* Some pictographs live outside the silk folder — match by filename */
img[src$="/truck.png"],
img[src$="/lorry_stop.png"],
img[src$="/handtruck.png"],
img[src$="/ShipmentTypeLand.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10v10h-10zM12.5 10h4l3 3v3.5h-7z'/%3E%3Ccircle cx='6.5' cy='18.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='18.5' r='1.8'/%3E%3C/svg%3E") !important; }
img[src$="/map.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5L3.5 6.8v12.7L9 17.2l6 2.3 5.5-2.3V4.5L15 6.8z'/%3E%3Cpath d='M9 4.5v12.7M15 6.8v12.7'/%3E%3C/svg%3E") !important; }
img[src$="/package_add.png"],
img[src$="/basket_put.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E") !important; }
img[src$="/text_list_numbers.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 5.5h1.5V9M4 17h2.5v3H4zM4 14h2.5'/%3E%3C/svg%3E") !important; }
img[src$="/page_break.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4V10M7 21h11v-3M3 14h18'/%3E%3C/svg%3E") !important; }
img[src$="/clock.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E") !important; }

img[src$="/truck.png"],
img[src$="/lorry_stop.png"],
img[src$="/handtruck.png"],
img[src$="/ShipmentTypeLand.png"],
img[src$="/map.png"],
img[src$="/package_add.png"],
img[src$="/basket_put.png"],
img[src$="/text_list_numbers.png"],
img[src$="/page_break.png"],
img[src$="/clock.png"] {
  filter: none !important;
  opacity: 1 !important;
}

img[src*="/icons/silk/html.png"],
img[src*="/icons/silk/page_code.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h8l4 4v14h-12z'/%3E%3Cpath d='M14 3v4.5h4.5M9.5 13l-1.5 2 1.5 2M14.5 13l1.5 2-1.5 2'/%3E%3C/svg%3E"); }

img[src*="/icons/silk/comment_add.png"],
img[src*="/icons/silk/comment.png"],
img[src*="/icons/silk/comment_edit.png"],
img[src*="/icons/silk/comments.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 15a2 2 0 0 1-2 2H8l-4.5 3.5V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/cart_go.png"],
img[src*="/icons/silk/cart_add.png"],
img[src*="/icons/silk/cart_delete.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.5l2.2 10.5h9.6L19.5 7H6'/%3E%3Ccircle cx='9' cy='19' r='1.6'/%3E%3Ccircle cx='17' cy='19' r='1.6'/%3E%3C/svg%3E"); }

img[src*="/icons/silk/page_go.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4.5H6.5v15h11V9'/%3E%3Cpath d='M20 4l-7 7M20 4h-4.5M20 4v4.5'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/page_world.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.2 2.4 3.3 5.3 3.3 8.5S14.2 18.1 12 20.5c-2.2-2.4-3.3-5.3-3.3-8.5S9.8 5.9 12 3.5z'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/page_attach.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8.5l-7.6 7.6a3 3 0 0 1-4.2-4.2l8-8a4.5 4.5 0 0 1 6.4 6.4l-8 8a6 6 0 0 1-8.5-8.5l7-7'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/lorry.png"],
img[src*="/icons/silk/truck.png"],
img[src*="/icons/silk/handtruck.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10v10h-10zM12.5 10h4l3 3v3.5h-7z'/%3E%3Ccircle cx='6.5' cy='18.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='18.5' r='1.8'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/arrow_switch.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h13M13.5 5l3.5 3.5-3.5 3.5M20 15.5H7M10.5 12L7 15.5l3.5 3.5'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/arrow_undo.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h10a5.5 5.5 0 0 1 0 11h-3'/%3E%3Cpath d='M8 5.5L3.5 10 8 14.5'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/page_add.png"],
img[src*="/icons/silk/page_edit.png"],
img[src*="/icons/silk/page.png"],
img[src*="/icons/silk/note.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h8l4 4v14h-12z'/%3E%3Cpath d='M14 3v4.5h4.5M9.5 12.5h5M9.5 16h5'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/exclamation.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3A157' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L22 20H2z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/cart_edit.png"],
img[src*="/icons/silk/cart.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.5l2.2 10.5h9.6L19.5 7H6'/%3E%3Ccircle cx='9' cy='19' r='1.6'/%3E%3Ccircle cx='17' cy='19' r='1.6'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/trash.png"],
img[src*="/icons/silk/bin.png"],
img[src*="/icons/silk/bin_closed.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 3.5h4M6.5 7l1 13.5h9l1-13.5M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/package.png"],
img[src*="/icons/silk/package_white.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/section_collapsed.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/section_expanded.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

img[src*="/icons/silk/arrow_nsew.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23747C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M12 3l-2.5 2.5M12 3l2.5 2.5M12 21l-2.5-2.5M12 21l2.5-2.5M3 12l2.5-2.5M3 12l2.5 2.5M21 12l-2.5-2.5M21 12l2.5 2.5' /%3E%3C/svg%3E"); }

img[src*="/icons/silk/arrow_refresh.png"],
img[src*="/icons/silk/reload.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); }
img[src*="/icons/silk/hourglass.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h10M7 20.5h10M8 3.5v4l4 4 4-4v-4M8 20.5v-4l4-4 4 4v4'/%3E%3C/svg%3E"); }

/* Swapped icons are already the right colour — skip the muting filter */
img[src*="/icons/silk/add.png"],
img[src*="/icons/silk/pencil.png"],
img[src*="/icons/silk/delete.png"],
img[src*="/icons/silk/accept.png"],
img[src*="/icons/silk/tick.png"],
img[src*="/icons/silk/bullet_arrow_down.png"],
img[src*="/icons/silk/application_view_list.png"],
img[src*="/icons/silk/application_side_list.png"],
img[src*="/icons/silk/application.png"],
img[src*="/icons/silk/table.png"],
img[src*="/icons/silk/zoom.png"],
img[src*="/icons/silk/magnifier.png"],
img[src*="/icons/silk/decline.png"],
img[src*="/icons/silk/cross.png"],
img[src*="/icons/silk/cancel.png"],
img[src*="/icons/silk/printer.png"],
img[src*="/icons/silk/error.png"],
img[src*="/icons/silk/email.png"],
img[src*="/icons/silk/play_green.png"],
img[src*="/icons/silk/arrow_refresh.png"],
img[src*="/icons/silk/reload.png"],
img[src*="/icons/silk/arrow_nsew.png"],
img[src*="/icons/silk/page_go.png"],
img[src*="/icons/silk/page_world.png"],
img[src*="/icons/silk/page_attach.png"],
img[src*="/icons/silk/lorry.png"],
img[src*="/icons/silk/truck.png"],
img[src*="/icons/silk/handtruck.png"],
img[src*="/icons/silk/arrow_switch.png"],
img[src*="/icons/silk/arrow_undo.png"],
img[src*="/icons/silk/page_add.png"],
img[src*="/icons/silk/page_edit.png"],
img[src*="/icons/silk/page.png"],
img[src*="/icons/silk/note.png"],
img[src*="/icons/silk/exclamation.png"],
img[src*="/icons/silk/cart_edit.png"],
img[src*="/icons/silk/cart.png"],
img[src*="/icons/silk/trash.png"],
img[src*="/icons/silk/bin.png"],
img[src*="/icons/silk/bin_closed.png"],
img[src*="/icons/silk/package.png"],
img[src*="/icons/silk/package_white.png"],
img[src*="/icons/silk/section_collapsed.png"],
img[src*="/icons/silk/section_expanded.png"],
img[src*="/icons/silk/comment_add.png"],
img[src*="/icons/silk/comment.png"],
img[src*="/icons/silk/comment_edit.png"],
img[src*="/icons/silk/comments.png"],
img[src*="/icons/silk/cart_go.png"],
img[src*="/icons/silk/cart_add.png"],
img[src*="/icons/silk/cart_delete.png"],
img[src*="/icons/silk/html.png"],
img[src*="/icons/silk/page_code.png"],
img[src*="/icons/silk/hourglass.png"] {
  filter: none !important;
  opacity: 1 !important;
}

/* Remaining colorful silk PNGs: mute to a uniform monochrome 14px so
   they sit quietly next to the line icons.
   Catch-all by src path — buttons, headers, tabs, cells, links alike. */
img[src*="/icons/silk/"] {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.75;
}

/* Non-silk pictographs under images/icons/ (truck, handtruck,
   ShipmentType*, …): same monochrome treatment, natural size capped */
img[src*="/icons/"]:not([src*="/icons/silk/"]) {
  max-height: 20px;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.75;
}

/* Exception: document-type glyphs keep their color in content areas
   (PDF red / Excel green is information, not chrome) — any path */
img[src*="acrobat"],
img[src*="excel"],
img[src*="/icons/pdf"],
img[src*="_word"] {
  filter: none;
  opacity: 1;
}

/* ...but stay muted when used inside buttons (there they are chrome) */
.button img[src*="/icons/silk/"],
.buttons img[src*="/icons/silk/"] {
  filter: grayscale(1) contrast(0.85);
  opacity: 0.75;
}

/* Silk icons inside headings (login lock, card-header glyphs like
   shipment Details / Lead Time) get the same monochrome treatment */
h2 img,
h3 img,
.box > h2 img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.7;
  vertical-align: -2px;
  margin-right: 8px; /* same icon-to-text gap as buttons and nav items */
}

/* ...and flip them white inside primary (blue) buttons. Needs
   !important to beat the swapped-icon `filter: none !important`
   above, which would otherwise leave a dark glyph on dark blue. */
input[type="submit"] img,
button[type="submit"] img,
button[value="run"] img,
button[name="search"] img,
button[name="save"] img,
button[name="create"] img,
.button.positive img,
.button.icon.approve img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
}

/* buttonBar links: silk background icons exist for ~30 classes (home,
   status bullets, clock, lorry, cog, …) — strip all to clean text
   links; only the two core actions below keep a line icon */
.linkButton a:not(.list):not(.new):not(.create) {
  background-image: none;
  padding-left: 16px;
}

/* Sortable-column arrows (skin/sorted_*.gif) → line chevrons */
th.asc a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636D81' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14l6-6 6 6'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 16px;
}

th.desc a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636D81' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 16px;
}

/* Error-list exclamation (skin png) → plain list inside the bordered box */
div.errors li {
  background-image: none;
  padding-left: 16px;
}

/* Legacy .buttons rows: drop the shadow.jpg gradient strip */
.buttons {
  background: none;
  border: none;
}

/* Autocomplete inputs: silk magnifier (inline template CSS) → line icon.
   input.autocomplete out-ranks the template's .autocomplete class. */
input.autocomplete {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239299A6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: right 10px center;
  background-repeat: no-repeat;
}

/* buttonBar link icons (background silk on a.list / a.new) → SVG */
.linkButton a.list {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8.5 6h11M8.5 12h11M8.5 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
  background-size: 15px 15px;
}

.linkButton a.new,
.linkButton a.create {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
  background-size: 15px 15px;
}

/* buttonBar action links (span.linkButton > a with silk-icon classes)
   → secondary buttons; keep the icon, inset it like button text */
.linkButton a {
  display: inline-block;
  background-color: var(--blue-100);
  background-position: 12px 50%;
  background-repeat: no-repeat;
  color: var(--gray-600);
  border-radius: 4px;
  padding: 8px 16px 8px 34px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  margin-right: 8px;
}

.linkButton a:hover {
  color: var(--blue-500);
  text-decoration: none;
}

/* ============================================================
   3b. FORMS
   React v2 input spec: 36px, radius 4, 1px --gray-200, Inter 14,
   --gray-600 text, blue border + layered focus ring on focus.
   ============================================================ */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input.text,
input.large,
textarea,
select {
  background-color: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--gray-600);
}

/* Legacy fields carry hardcoded `size` attributes (and fixed widths),
   which spill out of narrow panels — e.g. a 424px autocomplete in a
   330px filter card. Never let a control exceed its container. */
.box input[type="text"],
.box input[type="password"],
.box input[type="email"],
.box input[type="number"],
.box input[type="search"],
.box input.text,
.box input.large,
.box textarea,
.box select,
.box .chzn-container,
.box .chosen-container,
.box .select2-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* Uniform 36px control height for all single-line inputs (matches
   selects, chosen, select2, react-select and %button-base) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input.text,
input.large {
  height: 36px;
  box-sizing: border-box;
}

/* Native selects match the select2/chosen skin: no OS chrome, token
   chevron, same 36px box as text inputs */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 36px;
  padding: 6px 32px 6px 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23636D81' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

select[multiple],
select[size]:not([size="1"]) {
  height: auto;
  padding: 6px 8px;
  background-image: none;
}

/* Native file inputs: picker button styled as a secondary button */
input[type="file"]::file-selector-button {
  background-color: var(--blue-100);
  color: var(--gray-600);
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  margin-right: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input.text:focus,
input.large:focus,
textarea:focus,
select:focus {
  outline: 0;
  border: 1px solid var(--blue-primary);
  box-shadow: var(--focus-ring);
}

input[type="checkbox"],
input[type="radio"],
input.checkbox,
input.radio {
  accent-color: var(--blue-primary);
  width: 16px;
  height: 16px;
}

input[readonly="readonly"],
input[readonly] {
  background-color: var(--gray-101);
  color: var(--gray-400);
}

label {
  font-size: 14px;
}

/* ============================================================
   3c. TABLES
   React table spec (DataTable.scss): header bg --blue-100, bold,
   --gray-600, 12px padding, no column borders; body rows white with
   1px --gray-100 bottom border; hover #F8FAFF; no zebra striping.
   NOTE: legacy GSPs also use <table> for form layout — row borders are
   scoped to list-ish tables only.
   ============================================================ */

td, th {
  font: 400 14px/20px 'Inter', sans-serif;
  color: var(--gray-600);
  /* 12px vertical matches the React DataTable spec; 10px horizontal
     keeps dense legacy tables reasonable (they scroll in-card now) */
  padding: 12px 10px;
}

th {
  /* blue-200 at 55% over white reads as blue-100 but lets the card's
     scroll shadow show through instead of masking it */
  background-color: rgba(240, 246, 255, 0.55);
  color: var(--gray-600);
  font-weight: 700;
  font-size: 14px;
  border-top: none;
  /* Headers never soft-wrap into word stacks; intentional <br>s still break */
  white-space: nowrap;
}

/* Wide tables scroll inside their card instead of stretching the page
   (matches the React DataTable behavior). The layered backgrounds are
   the classic CSS-only scroll affordance: the white "cover" panes are
   attached to the content, the shadow panes to the viewport, so a
   soft edge-shadow appears only on the side that has more to reveal
   and fades away once you reach that end. */
.box {
  overflow-x: auto;
  background-image:
    linear-gradient(to right, #ffffff 20%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #ffffff 20%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(32, 39, 80, 0.18), rgba(32, 39, 80, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(32, 39, 80, 0.18), rgba(32, 39, 80, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 20px 100%, 20px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Visible, on-brand scrollbar so the overflow is discoverable before
   you scroll — same treatment as the React DataTable */
.box::-webkit-scrollbar {
  height: 10px;
}

.box::-webkit-scrollbar-track {
  background: var(--blue-200);
  border-radius: 0 0 4px 4px;
}

.box::-webkit-scrollbar-thumb {
  background-color: var(--blue-301);
  border-radius: 4px;
}

.box::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-350);
}

.box {
  scrollbar-color: var(--blue-301) var(--blue-200);
  scrollbar-width: thin;
}

/* ...but only data panels should scroll. Setting overflow-x: auto also
   forces overflow-y to auto, which gives form panels a pointless
   vertical scrollbar and clips their select dropdowns. Form layouts
   (tr.prop), filter panels and anything with a Chosen dropdown opt out. */
.box:has(tr.prop),
.box:has(.filters),
.box:has(.filter-list),
.box:has(.chosen-container),
.box:has(.chzn-container) {
  overflow: visible;
  background-image: none;
}

th a:link,
th a:visited,
th a:hover {
  color: var(--gray-600);
  font-size: 14px;
}

th a:hover {
  color: var(--blue-primary);
}

/* Row separators + hover, scoped to data tables */
.list table tbody td {
  border-bottom: 1px solid var(--gray-100);
}

.list td {
  vertical-align: middle;
}

/* Stop columns collapsing into word stacks: data tables size to their
   content (columns get natural width, icon columns stay narrow), fill
   the card at minimum, and the card's horizontal scroll absorbs any
   excess. Very long text still wraps via the per-cell cap. */
.box > table,
.list > table,
.list table {
  width: max-content;
  min-width: 100%;
}

.box table td,
.list table td {
  max-width: 340px;
}

.list tbody tr:hover {
  background: rgba(240, 246, 255, 0.5);
}

/* Kill zebra striping (React reference has none) */
.odd {
  background: transparent;
}

.even {
  background: transparent;
}

/* Pagination → React pagination spec (#FBFCFC bar, 12px, quiet controls) */
.paginateButtons {
  background: #FBFCFC;
  border: none;
  color: var(--gray-600);
  font-size: 12px;
  padding: 12px;
}

.paginateButtons a {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 2px;
  color: var(--gray-600);
  padding: 4px 8px;
}

.paginateButtons a:hover {
  color: var(--blue-primary);
  border-color: var(--blue-primary);
}

.paginateButtons span.currentStep {
  color: var(--blue-primary);
  font-weight: 600;
}

/* ============================================================
   3d. JQUERY UI (smoothness theme overrides) + CHOSEN + SELECT2
   Widget chrome: white surfaces, --gray-200 borders, radius 4;
   active/selected states use --blue-primary / --blue-200;
   pickers' headers use --blue-100 like table headers.
   ============================================================ */

.ui-widget {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.ui-widget-content {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom {
  border-radius: 4px;
}

.ui-widget-header {
  background: var(--blue-100);
  border: none;
  color: var(--gray-600);
  font-weight: 600;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-weight: 500;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus {
  background: var(--blue-100);
  border: 1px solid var(--gray-200);
  color: var(--blue-primary);
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  background: var(--blue-200);
  border: 1px solid var(--blue-primary);
  color: var(--blue-primary);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
  background: var(--blue-200);
  border: 1px solid var(--blue-301);
  color: var(--gray-600);
}

.ui-state-error,
.ui-widget-content .ui-state-error {
  background: var(--red-100);
  border: 1px solid var(--color-red);
  color: var(--red-500);
}

/* Dialogs */
.ui-dialog {
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
  padding: 0;
}

.ui-dialog .ui-dialog-titlebar {
  background: #ffffff;
  border-bottom: 1px solid var(--gray-250);
  border-radius: 4px 4px 0 0;
  color: var(--blue-primary);
  font-size: 18px;
  font-weight: 600;
  padding: 16px;
}

/* Datepicker */
.ui-datepicker {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
  padding: 8px;
}

.ui-datepicker .ui-datepicker-header {
  background: var(--blue-100);
  border: none;
}

.ui-datepicker td a,
.ui-datepicker td span {
  text-align: center;
  padding: 6px;
  border-radius: 4px;
}

.ui-datepicker td a.ui-state-default {
  background: transparent;
  border: none;
}

.ui-datepicker td a.ui-state-hover {
  background: var(--blue-200);
  border: none;
  color: var(--blue-primary);
}

.ui-datepicker td a.ui-state-active {
  background: var(--blue-primary);
  border: none;
  color: #ffffff;
}

/* Autocomplete / menus */
.ui-autocomplete.ui-menu,
.ui-menu {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
}

.ui-menu .ui-menu-item a {
  color: var(--gray-600);
  font-size: 14px;
  border-radius: 4px;
}

.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-focus {
  background: var(--blue-200);
  border: none;
  color: var(--gray-600);
  margin: 0;
}

/* Progressbar */
.ui-progressbar .ui-progressbar-value {
  background: var(--blue-primary);
  border: none;
}

/* CHOSEN single/multi selects → input spec */
.chzn-container-single .chzn-single {
  height: 36px;
  line-height: 34px;
  background: #ffffff;
  background-image: none;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: none;
  color: var(--gray-600);
  font-size: 14px;
  padding: 0 12px;
}

.chzn-container-single .chzn-single div {
  width: 24px;
}

.chzn-container-single .chzn-single div b {
  background: none;
}

.chzn-container-single .chzn-single div b::before {
  content: '';
  display: block;
  margin: 15px auto 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--gray-400);
}

.chzn-container .chzn-drop {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
}

.chzn-container-single .chzn-search input {
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background-image: none;
  padding: 6px 8px;
  font-family: 'Inter', sans-serif;
}

.chzn-container .chzn-results .highlighted {
  background: var(--blue-200);
  background-image: none;
  color: var(--gray-600);
}

.chzn-container-active .chzn-single,
.chzn-container-active .chzn-single-with-drop {
  border: 1px solid var(--blue-primary);
  box-shadow: var(--focus-ring);
  background-image: none;
}

.chzn-container-multi .chzn-choices {
  background-image: none;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 4px;
}

.chzn-container-multi .chzn-choices .search-choice {
  background: var(--blue-100);
  background-image: none;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  color: var(--gray-600);
  padding: 4px 20px 4px 8px;
}

/* CHOSEN v1.x (chosen-* class generation, e.g. inventory browse) —
   same input spec as the older chzn-* generation */
.chosen-container-single .chosen-single {
  height: 36px;
  line-height: 34px;
  background: #ffffff;
  background-image: none;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: none;
  color: var(--gray-600);
  font-size: 14px;
  padding: 0 12px;
}

.chosen-container-single .chosen-single div {
  width: 24px;
}

.chosen-container-single .chosen-single div b {
  background: none;
}

.chosen-container-single .chosen-single div b::before {
  content: '';
  display: block;
  margin: 15px auto 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--gray-400);
}

.chosen-container .chosen-drop {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
}

.chosen-container-single .chosen-search input[type="text"],
.chosen-container .chosen-search-input {
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background-image: none;
  padding: 6px 8px;
  height: 32px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.chosen-container .chosen-results li.highlighted {
  background: var(--blue-200);
  background-image: none;
  color: var(--gray-600);
}

.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid var(--blue-primary);
  box-shadow: var(--focus-ring);
  background-image: none;
}

.chosen-container-multi .chosen-choices {
  background-image: none;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 0 8px;
  min-height: 36px;
  height: auto;
  box-sizing: border-box;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* The inner search field fills the 36px box instead of its own 25px */
.chosen-container-multi .chosen-choices li.search-field,
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  height: 34px;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--gray-600);
}

/* Multi-select focus matches every other control */
.chosen-container-active .chosen-choices {
  border: 1px solid var(--blue-primary);
  box-shadow: var(--focus-ring);
}

.chosen-container-multi .chosen-choices li.search-choice {
  background: var(--blue-100);
  background-image: none;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  color: var(--gray-600);
  padding: 4px 20px 4px 8px;
}

.chosen-container .chosen-results li {
  font-size: 14px;
  color: var(--gray-600);
}

/* Chosen ships a retina media query that re-applies its sprite sheet
   with !important (chosen.css:482) — invisible at 1x, visible as
   stray glyphs on every hi-dpi screen. Kill it wherever it lands. */
.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single div b,
.chosen-container-single .chosen-search input[type="text"],
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
.chosen-container .chosen-results-scroll-down span,
.chosen-container .chosen-results-scroll-up span {
  background-image: none !important;
}

/* Clear (X) affordance → line icon, vertically centered, clear of the
   chevron; replaces the sprite's off-center 12px glyph */
.chosen-container-single .chosen-single abbr {
  top: 50%;
  right: 32px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636D81' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
}

.chosen-container-single .chosen-single abbr:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C71610' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
}

/* Dropdown search field: same focus treatment as every other input */
.chosen-container-single .chosen-search input[type="text"]:focus,
.chosen-container .chosen-search-input:focus {
  outline: 0;
  border: 1px solid var(--blue-primary);
  box-shadow: var(--focus-ring);
}

/* Multi-select chips' close affordance → line icon */
.chosen-container-multi .chosen-choices .search-choice .search-choice-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636D81' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 10px !important;
}

/* SELECT2 (v4) → input spec */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  height: 36px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  color: var(--gray-600);
  font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border: 1px solid var(--blue-primary);
  box-shadow: var(--focus-ring);
}

.select2-dropdown {
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--blue-200);
  color: var(--gray-600);
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--blue-100);
}

/* ============================================================
   3f. TABS & WIZARDS
   Tab strips → quiet underline tabs (matches the app navbar's
   active-link treatment): no boxes, active = blue text + 2px bar.
   ============================================================ */

.ui-tabs {
  background: transparent;
  border: none;
  padding: 0;
}

.ui-tabs .ui-tabs-nav,
.tabs:not(.tabs-left) > ul {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.ui-tabs .ui-tabs-nav li,
.tabs:not(.tabs-left) > ul > li {
  background: transparent;
  border: none;
  margin: 0;
  border-radius: 0;
}

.ui-tabs .ui-tabs-nav li a,
.tabs:not(.tabs-left) > ul > li > a {
  color: var(--gray-400);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  border: none;
  border-bottom: 2px solid transparent;
}

.ui-tabs .ui-tabs-nav li a:hover,
.tabs:not(.tabs-left) > ul > li > a:hover {
  color: var(--blue-primary);
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected,
.ui-tabs .ui-tabs-nav li.ui-state-active {
  background: transparent;
  border: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-active a,
.tabs:not(.tabs-left) > ul > li.ui-tabs-selected > a,
.tabs:not(.tabs-left) > ul > li.ui-state-active > a {
  color: var(--blue-primary);
  border-bottom: 2px solid var(--blue-primary);
}

.ui-tabs .ui-tabs-panel {
  background: #ffffff;
  border: none;
  border-radius: 0 0 4px 4px;
  padding: 16px;
}

/* Pop-up menus (in-table .actions, download/action-menu dropdowns).
   Legacy items are 11px with icons at whatever size the source PNG
   happened to be, so rows are different heights and the labels do not
   line up. One spec for all of them: 14px text, 16px icons, uniform
   row height, blue hover. */
.actions {
  background-color: #ffffff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
  padding: 4px;
  min-width: 200px;
}

.actions .action-menu-item,
.actions > div {
  padding: 0;
  margin: 0;
}

/* openboxes.css targets .actions .action-menu-item a (3 classes) and
   .actions .download-subbuttons button — match that reach */
.actions a,
.actions button,
.action-menu-item > a,
.action-menu-item > button,
.actions .action-menu-item a,
.actions .action-menu-item button,
.actions .download-subbuttons button,
.actions .action-menu-info a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  padding: 6px 10px;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--gray-600);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

/* Every glyph occupies the same box, so the labels align */
.actions a img,
.actions button img,
.action-menu-item img,
.actions .action-menu-item a img,
.actions .download-subbuttons button img {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  object-fit: contain;
}

.actions a:hover,
.actions button:hover,
.action-menu-item > a:hover,
.action-menu-item > button:hover,
.actions .action-menu-item a:hover,
.actions .action-menu-item button:hover,
.actions .download-subbuttons button:hover,
.actions .download-subbuttons:hover {
  background-color: var(--blue-200);
  color: var(--blue-primary);
  text-decoration: none;
  /* the legacy rules re-declare display/padding on :hover, which
     relaid out the item under the cursor — restate them so hovering
     changes nothing but colour */
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
}

/* Menu glyphs are chrome, so file-type icons become a plain document
   mark here even though they keep their colour in content areas */
.actions img[src*="excel"],
.actions img[src*="acrobat"],
.actions img[src*="/pdf"],
.actions img[src*="_word"],
.actions img[src*="html"],
.actions img[src*="page_code"],
.actions img[src*="page_white"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11M7.5 10l4.5 4.5 4.5-4.5M4.5 19.5h15'/%3E%3C/svg%3E") !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ============================================================
   3g. BADGES & FOOTER (consistency pass)
   Legacy .tag chips (statuses + product tags) wore the 2010 lime
   green; map the family to the token badge formula used by the
   React value-indicator (tinted bg + saturated text, radius 4).
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  float: none;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--green-800);
  color: var(--color-green);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: 5px;
  margin-bottom: 5px;
}

.tag a {
  color: inherit;
  font-size: 12px;
}

.tag-success,
.tag-alert {
  background: var(--green-800);
  color: var(--color-green);
  border: none;
}

.tag-danger {
  background: var(--red-100);
  color: var(--red-500);
  border: none;
}

.tag-info {
  background: var(--blue-200);
  color: var(--blue-700);
  border: none;
}

.tag-warning {
  background: #F3A15733; /* --color-yellow @ 20% */
  color: #A16207;        /* readable amber derived from --color-yellow */
  border: none;
}

/* Footer sits directly on the page background — no card, no borders.
   Build/debug info hides behind a CSS-only disclosure whose toggle is
   the info icon (checkbox + label in _footer.gsp; no JavaScript). */
#ft,
#footer {
  background: transparent;
  border: none;
  color: var(--gray-401);
  font-size: 12px;
  padding: 12px 32px;
  margin-top: 24px;
}

#ft a,
#footer a {
  color: var(--gray-401);
}

.footer-toggle {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.footer-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 2em;
}

.footer-toggle-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  opacity: 0.65;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23747C93' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

.footer-toggle-icon:hover {
  opacity: 1;
}

.footer-details {
  display: none;
}

.footer-toggle:checked ~ .footer-details {
  display: block;
}

.footer-toggle:focus-visible ~ .footer-summary .footer-toggle-icon {
  outline: 2px solid var(--blue-primary);
  outline-offset: 2px;
  border-radius: 2px;
  opacity: 1;
}

/* Page-summary bands (.summary — browse, order/requisition headers):
   titles sit directly on the page background like the React
   list-page header, not in their own gray bordered strip */
/* Vertical rhythm matches the React .list-page-header: title sits
   ~39px below the navbar and the band runs ~100px before content */
.summary {
  background-color: transparent;
  border-bottom: none;
  padding: 32px 0 24px;
  min-height: 92px;
  box-sizing: border-box;
}

.summary .title,
div.title {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--blue-800);
}

/* Megamenu section headers (non-clickable): small-caps label, clearly
   distinct from the clickable menu items beneath them */
.dropdown-menu-content .subsection-title,
.dropdown-menu-wrapper .subsection-title {
  color: var(--gray-350);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Both focus cards share the same shadow */
.location-chooser {
  box-shadow: var(--focus-card-shadow);
}

#loginBox {
  box-shadow: var(--focus-card-shadow);
}

/* A lone tab offers no choice, so the strip is just noise — the view
   flags it with .single-tab (see product/edit.gsp) */
.tabs.single-tab > ul,
.tabs.single-tab > .ui-tabs-nav {
  display: none;
}

/* Vertical tab rails (.tabs-left, e.g. the location chooser) keep
   their left accent bar only — no horizontal underline, whether the
   rules arrive via .tabs or runtime ui-tabs classes */
.tabs.tabs-left > ul,
.tabs.tabs-left .ui-tabs-nav {
  border-bottom: none;
}

.tabs.tabs-left > ul > li > a,
.tabs.tabs-left .ui-tabs-nav li a,
.tabs.tabs-left .ui-tabs-nav li.ui-state-active a,
.tabs.tabs-left .ui-tabs-nav li.ui-tabs-selected a {
  border-bottom: none;
}

/* Location-chooser tiles (chooseLocation page + nav dropdown): keep
   their identity — they carry the per-warehouse tint via
   --location-color — but align metrics to the 36px control system
   and ban mid-word breaking */
.location-chooser .tabs .location-group .element {
  min-height: 36px;
  align-items: center;
  padding: 8px 12px;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Full-width hint/instruction blocks (e.g. the inventory summary
   explainer) read as prose on the page, not as a white card */
.yui-gf > .box.p-2 {
  background: transparent;
  padding: 0 0 16px !important;
  margin: 0 0 8px;
  color: var(--gray-500);
  line-height: 1.6;
}

/* Filter panels nest their fields deeper than the browse page does
   (form > .filters > .prop > .filter-list-item), stacking an extra
   16px + 5px of inset. Drop both so every filter panel shares the
   single 10px inset that .filter-list-item already provides. */
.yui-u.first .box > form,
.box > form:has(.filters) {
  padding: 0;
}

.filters .prop {
  padding: 0;
}

/* Some panels (report parameters) put fields straight into .prop with
   no .filter-list-item, so they never picked up its 10px inset */
.filters .prop:not(:has(.filter-list-item)) {
  margin: 10px 10px 16px;
}

/* Action rows come in three flavours across the filter panels:
   .buttons, a .center div inside .prop, and .filter-list-item.center.
   All of them stack full width, inset with their fields. */
.filter-list-item.center:has(> .button),
.filter-list-item.center:has(> button),
.filters .prop > .center {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  font-size: 0;
}

.filters .prop > .center > .button,
.filters .prop > .center > button,
.filters .prop > .center > .action-menu,
.filter-list-item.center > .button,
.filter-list-item.center > button,
.filter-list-item.center > .action-menu {
  width: 100%;
  margin: 0 0 16px !important;
  font-size: 14px;
}

.filters .prop > .center > *:last-child,
.filter-list-item.center > *:last-child {
  margin-bottom: 0 !important;
}

/* Filter fields: label needs room to breathe above its control */
.filter-list-item > label,
.filters .prop > label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--gray-600);
}

/* Panels that stack several fields in one .prop get the same rhythm
   between fields that separate .filter-list-item blocks provide */
.filters .prop > label:not(:first-child) {
  margin-top: 14px;
}

.filter-list-item {
  margin-bottom: 16px;
}

/* ...but a label paired with a checkbox belongs beside it, not under */
.filter-list-item > input[type="checkbox"] + label,
.filter-list-item > input[type="radio"] + label,
.filters .prop > input[type="checkbox"] + label {
  display: inline;
  margin-bottom: 0;
  margin-left: 6px;
  font-weight: 400;
}

/* Stacked action groups in narrow filter columns share one width —
   a ragged pile of different-width buttons reads as unfinished */
/* Filter actions stack like the fields above them: same 10px/5px
   inset as .filter-list-item, so they line up with the inputs rather
   than running to the card edge, and the same 36px control height */
.filters .buttons,
.filter-list-item.buttons,
.yui-u.first .box .buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  margin: 10px 10px 0;
  /* bottom spacing as padding, not margin: a bottom margin collapses
     straight out of the card and leaves the last button flush with
     the card's edge */
  padding: 8px 5px 20px 0;
  /* the markup separates buttons with &nbsp;, which is not collapsible
     and would otherwise become a phantom flex item between them. It is
     zero-height with font-size 0, but it would still consume `gap`
     twice — so the 16px rhythm comes from child margins instead. */
  font-size: 0;
}

.filters .buttons > *,
.yui-u.first .box .buttons > * {
  font-size: 14px;
}

.filters .buttons > .button,
.filters .buttons > button,
.filters .buttons > .action-menu,
.filter-list-item.buttons > .button,
.filter-list-item.buttons > button,
.filter-list-item.buttons > .action-menu,
.yui-u.first .box .buttons > .button,
.yui-u.first .box .buttons > button,
.yui-u.first .box .buttons > .action-menu {
  width: 100%;
  /* 16px matches the gap between the fields above */
  margin: 0 0 16px !important;
}

.filters .buttons > *:last-child,
.filter-list-item.buttons > *:last-child,
.yui-u.first .box .buttons > *:last-child {
  margin-bottom: 0 !important;
}

/* Dropdown actions are a .action-menu span wrapping the real button —
   stretching the wrapper alone leaves the button at content width */
.filters .buttons > .action-menu > .button,
.filters .buttons > .action-menu > button,
.yui-u.first .box .buttons > .action-menu > .button,
.yui-u.first .box .buttons > .action-menu > button,
.filter-list-item.buttons > .action-menu > .button,
.filter-list-item.buttons > .action-menu > button {
  width: 100%;
  margin: 0 !important;
}

/* ============================================================
   3h. DATATABLES 1.9.4
   Its CDN stylesheet out-ranks the generic td/th rules and brings its
   own scroll container, sort sprites and chrome. Bring all of it onto
   the table spec.
   ============================================================ */

/* DataTables' own rules are thead th / tbody td (0,1,3) — match that
   specificity or the 3px padding wins */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody th,
table.dataTable tbody td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 12px 10px;
  font: 400 14px/20px 'Inter', sans-serif;
  color: var(--gray-600);
  border-right: none;
  border-left: none;
}

/* Table cells also carry jQuery UI's .ui-state-default, whose opaque
   white (a class) out-ranks the element-level th rule and blanked the
   scroll shadow behind footer/total rows */
table th.ui-state-default,
table td.ui-state-default,
table.dataTable th.ui-state-default,
table.dataTable td.ui-state-default {
  background: rgba(240, 246, 255, 0.55);
  border-color: var(--gray-100);
}

table.dataTable thead th {
  background-color: rgba(240, 246, 255, 0.55);
  color: var(--gray-600);
  font-weight: 700;
  border-bottom: none;
  /* DataTables fixes column widths in JS, so nowrap headers spill into
     the next column. Wrap at word boundaries instead — never mid-word,
     which is what produced letter-stacked columns before. */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  vertical-align: middle;
}

/* Transparent, not white: the card's scroll shadow is painted on the
   container background, so opaque rows would hide it */
table.dataTable tbody tr {
  background-color: transparent;
}

table.dataTable tbody tr:hover,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover {
  background-color: rgba(240, 246, 255, 0.5);
}

table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background-color: transparent;
}

table.dataTable tbody td {
  border-bottom: 1px solid var(--gray-100);
}

/* DataTables draws 1px black rules under thead and over tfoot */
table.dataTable,
table.dataTable tfoot th,
table.dataTable tfoot td,
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollFoot,
.dataTables_wrapper .dataTables_scrollFootInner,
.dataTables_wrapper .dataTables_scrollFootInner table {
  border: none;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
  border-top: 1px solid var(--gray-100);
}

/* Sort indicators → line chevrons instead of the DataTables sprites */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  background-repeat: no-repeat;
  background-position: center right 6px;
  background-size: 11px 11px;
  padding: 12px 24px 12px 10px;
  cursor: pointer;
}

table.dataTable thead th.sorting {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CED4DA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5-5 5 5M7 14l5 5 5-5'/%3E%3C/svg%3E");
}

table.dataTable thead th.sorting_asc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

table.dataTable thead th.sorting_desc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* DataTables scrolls in its own element — give it the same scroll
   affordance and visible scrollbar as the .box containers */
.dataTables_wrapper .dataTables_scrollBody {
  background-image:
    linear-gradient(to right, #ffffff 20%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #ffffff 20%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(32, 39, 80, 0.18), rgba(32, 39, 80, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(32, 39, 80, 0.18), rgba(32, 39, 80, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 20px 100%, 20px 100%;
  background-attachment: local, local, scroll, scroll;
  scrollbar-color: var(--blue-301) var(--blue-200);
  scrollbar-width: thin;
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar {
  height: 10px;
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
  background: var(--blue-200);
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
  background-color: var(--blue-301);
  border-radius: 4px;
}

/* These wrappers painted opaque white/tint over the shadow — the card
   underneath already provides the surface */
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollFoot,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .fg-toolbar,
.dataTables_wrapper .ui-toolbar {
  background-color: transparent;
}

.paginateButtons {
  background-color: rgba(251, 252, 252, 0.6);
}

/* Wrapper chrome: search field, length menu, info line, pagination.
   These are block children of the horizontally scrolling card, so by
   default they are only as wide as the visible area and slide away
   (background and all) when the table is scrolled. Pinning them to
   the left keeps the chrome — and the card header — in place. */
/* A sticky child can only stay put while its containing block is still
   under the scrollport. The wrapper is a block child of the scrolling
   card, so it is only as wide as the visible area — it (and anything
   sticky inside it) slid away. Letting the wrapper span the full
   scroll width gives the sticky chrome something to hold onto. */
.dataTables_wrapper {
  width: max-content;
  min-width: 100%;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 12px;
  color: var(--gray-600);
  padding: 12px 16px;
  position: sticky;
  left: 0;
  /* hug the content so the pinned row does not stretch to the full
     scroll width (which would push right-floated chrome off-screen) */
  width: fit-content;
  float: none;
  text-align: left;
}

/* Card headers pin both ways: left, so they survive the table's
   horizontal scroll, and top — the legacy h2 rule sets `top: 0`, which
   sticky honours — so they stay put as the page scrolls. That makes an
   opaque surface necessary, or content shows through them. Safe
   everywhere: every .box is already white behind its header. */
.box > h2 {
  position: sticky;
  left: 0;
  background-color: #ffffff;
  /* above positioned form controls (select2/Chosen wrappers) that
     would otherwise slide over the header, but below the navbar's 4 */
  z-index: 3;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 6px 10px;
  margin-left: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--gray-600);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: 0;
  border: 1px solid var(--blue-primary);
  box-shadow: var(--focus-ring);
}

/* DataTables' jQuery-UI pagination renders .fg-button anchors whose
   line boxes overflowed the 24px-tall row, so the card clipped them.
   Lay the row out as flex and give the controls real button metrics. */
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate.paging_full_numbers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px 16px;
  /* DataTables pins .paging_full_numbers to a 22px line box, which
     cropped the taller controls at the bottom of the card */
  height: auto;
  line-height: normal;
}

.dataTables_wrapper .dataTables_paginate .fg-button,
.dataTables_wrapper .dataTables_paginate .ui-button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  margin: 0;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: #ffffff;
  color: var(--gray-600);
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .fg-button:hover:not(.ui-state-disabled) {
  background: var(--blue-100);
  border-color: var(--blue-primary);
  color: var(--blue-primary);
}

.dataTables_wrapper .dataTables_paginate .ui-state-disabled {
  opacity: 0.55;
  cursor: default;
}

.dataTables_wrapper .dataTables_paginate .fg-button.ui-state-active,
.dataTables_wrapper .dataTables_paginate .ui-state-highlight {
  background: var(--blue-200);
  border-color: var(--blue-primary);
  color: var(--blue-primary);
  font-weight: 600;
}

.dataTables_wrapper .paginate_button,
.dataTables_wrapper .paginate_active,
.dataTables_wrapper .paginate_disabled_previous,
.dataTables_wrapper .paginate_enabled_previous,
.dataTables_wrapper .paginate_disabled_next,
.dataTables_wrapper .paginate_enabled_next {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  color: var(--gray-600);
  padding: 4px 10px;
  margin: 0 2px;
  cursor: pointer;
}

.dataTables_wrapper .paginate_active {
  background: var(--blue-200);
  border-color: var(--blue-primary);
  color: var(--blue-primary);
  font-weight: 600;
}

/* Download/export buttons carry an Excel PNG — inside a button it is
   chrome, so it becomes the download line icon (document lists keep
   their colored file-type glyphs) */
.button img[src*="excel"],
.buttons img[src*="excel"],
button img[src*="excel"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11M7.5 10l4.5 4.5 4.5-4.5M4.5 19.5h15'/%3E%3C/svg%3E");
  filter: none !important;
  opacity: 1 !important;
}

/* Property-table forms are top-aligned, so a one-line label sat above
   the middle of its 36px control. Centre them; rows with a textarea
   keep top alignment, where centring would look adrift. */
tr.prop > td,
tr.prop > td.name,
tr.prop > td.value {
  vertical-align: middle;
}

tr.prop:has(textarea) > td {
  vertical-align: top;
}

/* Native file inputs match the control height */
input[type="file"] {
  height: 36px;
  box-sizing: border-box;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

/* Category tree — tree.gsp ships an inline <style> (gray fill, dashed
   borders) that loads after this file, so these need !important. */
.category-tree {
  list-style: none;
  padding-left: 0;
}

/* Only the outermost tree becomes a card — the template nests
   .category-tree recursively inside each li */
fieldset > div > .category-tree {
  background: #ffffff;
  border-radius: var(--card-radius);
  padding: 8px;
}

.category-tree ul {
  margin-left: 24px !important;
  list-style: none;
  padding-left: 0;
}

.category-tree li {
  background-color: transparent !important;
  border: none !important;
  border-radius: 4px;
  padding: 6px 12px !important;
  margin: 2px 0 !important;
}

.category-tree li:hover {
  background-color: var(--blue-200) !important;
}

.category-tree li > p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Push the row actions to the trailing edge without float hacks */
.category-tree li > p > span[style*="float"] {
  float: none !important;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   4. PER-PAGE FIXES
   ============================================================ */

/* CSV import — "Upload data file". The two download buttons and their
   "-- OR --" separator are inline with no spacing, and Cancel is a bare
   link beside a primary button. */
#upload-form td.value > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

#upload-form td.value > div > b {
  color: var(--gray-400);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
}

#upload-form td > a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 16px;
  margin-left: 8px;
  border-radius: 4px;
  background-color: var(--blue-100);
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

#upload-form td > a:not(.button):hover {
  color: var(--blue-500);
}

/* Login: #loginFormBox drew its own gray border inside the themed
   .box card — drop it so the card reads as one surface. The page's
   inline stylesheet also centers input text and inflates padding;
   normalize to the standard control look. */
#loginFormBox {
  border: none;
  padding: 24px;
}

#loginBox input.text {
  text-align: left;
  padding: 6px 12px;
}

/* Brand header above the login card (the overhaul's one markup
   addition): blue logo stacked over the wordmark, both primary blue */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 28px;
}

.login-brand img {
  width: 84px;
  height: 84px;
}

/* Notices sit between the logo and the card, clear of both */
#loginForm > .message,
#loginForm > .errors {
  margin: 0 0 20px;
}

.login-brand-name {
  font-size: 34px;
  font-weight: 700;
  color: var(--blue-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* First-impression sizing: login controls run ~50% larger than the
   app-wide 36px standard (deliberate exception, this page only) */
#loginBox input.text {
  height: 54px;
  font-size: 17px;
  padding: 12px 16px;
}

#loginBox button[type="submit"] {
  min-height: 54px;
  font-size: 17px;
  font-weight: 600;
  padding: 14px 16px;
}

#loginBox h2 {
  font-size: 20px;
}

#loginBox td {
  font-size: 16px;
}

/* The header's silk padlock PNG → line-style lock in the title blue */
#loginBox h2 img {
  display: none;
}

#loginBox h2::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230052CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='9.5' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3M12 14.5v2'/%3E%3C/svg%3E") center / 18px no-repeat;
}

#loginBox button[type="submit"] {
  padding: 8px 16px;
}