/*
  ASD back-office theme.
  Injected before </head> of every admin page (see application_top.php), so it
  wins over page stylesheets of equal specificity. It only restyles colors,
  fonts, borders and radii: no layout, and no background on bare tr/td so the
  legacy bgcolor="..." status rows keep working.
*/
/* Plus Jakarta Sans (SIL OFL 1.1, fonts/plus-jakarta-sans/LICENSE.txt), self-hosted: the CSP only allows 'self' */
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* palette of the current asdiscount.com front: navy + blues, orange only for badges/alerts */
  /* slightly lighter than the front #041e41: softer contrast on big header areas */
  --asd-navy: #1e447c;
  --asd-blue-dark: #1658b8;
  --asd-blue: #1f95ec;
  --asd-blue-soft: #e8f3fd;
  --asd-blue-selected: #d3e8fb;
  --asd-orange: #ee521d;
  /* filled headers (tables, dialogs, hub headings, market cards, navy pills): flat desaturated mid blue
     with off-white text, so the many filled blocks don't glare */
  --asd-head: #5b7fae;
  --asd-on-head: #f2f5f9;
  /* page-wide bars only (top stripe of every screen, main header of the index / B2B / ADROP) */
  --asd-bar: #335a91;
  /* "clair" palette (default); softer variants per user in asd-theme-<name>.css, chosen in myaccount.php */
  --asd-ink: #1f2937;
  --asd-muted: #6b7280;
  --asd-bg: #f4f6f9;
  --asd-surface: #ffffff;
  --asd-border: #dfe4ea;
  --asd-row-alt: #f4f6f9;
  --asd-radius: 8px;
  --asd-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  /* single switch for the whole back-office font (shared CSS files use var(--asd-font)) */
  --asd-font: Verdana, Arial, sans-serif;
  /* --asd-font: "Plus Jakarta Sans Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; */
}

/* page */
/* aligned digits in data tables (amounts, quantities, dates) */
td, th { font-variant-numeric: tabular-nums; }
html, body { font-family: var(--asd-font); }
body { background-color: var(--asd-bg); color: var(--asd-ink); }
body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--asd-bar), var(--asd-blue-dark) 60%, var(--asd-blue));
}

/* links (stylesheet.css forces font-size with !important, we keep its density) */
a, a:visited, a:active { font-family: var(--asd-font); color: var(--asd-blue-dark); }
/* font-family repeated on :hover: stylesheet.css sets Verdana on a:hover, the link width jumped on mouse over */
a:hover { font-family: var(--asd-font); color: var(--asd-blue); }

h1, h2, h3, .pageHeading { font-family: var(--asd-font); color: var(--asd-navy); }
.pageHeading { font-weight: 600; }

/* osCommerce data tables */
.dataTableHeadingRow { background-color: var(--asd-head); }
.dataTableHeadingContent { font-family: var(--asd-font); color: var(--asd-on-head); font-weight: 600; padding: 4px 6px; }
.dataTableRow { background-color: var(--asd-surface); }
.dataTableRowOver { background-color: var(--asd-blue-soft); }
.dataTableRowSelected { background-color: var(--asd-blue-selected); }
.dataTableContent, .smallText, .main, .messageBox, .fieldRequired, .errorText, .infoboxAdmin {
  font-family: var(--asd-font);
}

.infoBoxHeading { font-family: var(--asd-font); background-color: var(--asd-head); color: var(--asd-on-head); font-weight: 600; }
.infoBoxContent { font-family: var(--asd-font); background-color: var(--asd-surface); }
.headerBar { background-color: var(--asd-head); }
.headerBarContent { color: var(--asd-on-head); }
.columnLeft { background-color: var(--asd-surface); border-color: var(--asd-border); }
.formArea { background-color: var(--asd-surface); border-color: var(--asd-border); border-radius: var(--asd-radius); }

.messageStackError, .messageStackWarning { background-color: #fdecec; color: #9b1c1c; }
.messageStackSuccess { background-color: #e7f6ec; color: #1e6b3a; }

/* ASTable (table.css) */
table.ASTable {
  border: 1px solid var(--asd-border);
  border-radius: var(--asd-radius);
  box-shadow: var(--asd-shadow);
}
/* rounded corners on the corner cells instead of overflow:hidden on the table,
   which clipped the pop-ups shown inside the cells (EAN picture preview...) */
table.ASTable > thead > tr:first-child > th:first-child { border-top-left-radius: var(--asd-radius); }
table.ASTable > thead > tr:first-child > th:last-child { border-top-right-radius: var(--asd-radius); }
table.ASTable > tbody:last-child > tr:last-child > td:first-child { border-bottom-left-radius: var(--asd-radius); }
table.ASTable > tbody:last-child > tr:last-child > td:last-child { border-bottom-right-radius: var(--asd-radius); }
table.ASTable tr { font-family: var(--asd-font); color: var(--asd-ink); }
table.ASTable thead tr { background: var(--asd-head); color: var(--asd-on-head); }
table.ASTable th { text-shadow: none; font-weight: 600; padding: 6px; }

/* forms: wrapped in :where() (zero specificity) so these are only defaults -
   any page rule (e.g. icon buttons "button.bttnX { background: url(...) }") still wins */
:where(input, select, textarea, button) { font-family: var(--asd-font); }
:where(input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="time"],
input[type="datetime-local"], input[type="month"], input:not([type]), select, textarea) {
  border: 1px solid var(--asd-border);
  border-radius: 6px;
  padding: 2px 6px;
  background-color: var(--asd-surface);
  color: var(--asd-ink);
}
:where(input, select, textarea):focus {
  outline: none;
  border-color: var(--asd-blue);
  box-shadow: 0 0 0 3px rgba(31, 149, 236, .2);
}
:where(input[type="submit"], input[type="button"], input[type="reset"], button:not(.ui-button, .ui-dialog-titlebar-close)) {
  background: var(--asd-blue);
  color: #fff;
  border: 1px solid var(--asd-blue);
  border-radius: 6px;
  padding: 3px 12px;
  cursor: pointer;
}
:where(input[type="submit"], input[type="button"], input[type="reset"], button:not(.ui-button, .ui-dialog-titlebar-close)):hover {
  background: var(--asd-blue-dark);
  border-color: var(--asd-blue-dark);
}
:where(input, button):disabled { opacity: .55; cursor: not-allowed; }

/* jQuery UI */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: var(--asd-font); }
.ui-widget-header { background: var(--asd-head); border-color: var(--asd-head); color: var(--asd-on-head); }
.ui-widget-header a { color: var(--asd-on-head); }
.ui-dialog { border-radius: var(--asd-radius); box-shadow: 0 10px 30px rgba(16, 24, 40, .25); border-color: var(--asd-border); }
.ui-dialog .ui-dialog-titlebar { border-radius: 6px; }
/* datepicker prev/next arrows: the default dark icon sprite was invisible on the navy header (only shown
   on hover, when jQuery UI paints a light background): white sprite and a translucent hover instead */
.ui-datepicker .ui-datepicker-header .ui-icon { background-image: url("/includes/images/ui-icons_ffffff_256x240.png"); }
.ui-datepicker .ui-datepicker-header .ui-state-hover { background: rgba(255, 255, 255, .15); border-color: transparent; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-button.ui-state-active {
  background: var(--asd-blue); border-color: var(--asd-blue); color: #fff;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight { background: var(--asd-blue-soft); border-color: var(--asd-blue); color: var(--asd-ink); }
.ui-button:not(.ui-dialog-titlebar-close) { border-radius: 6px; }
.ui-dialog .ui-dialog-buttonpane .ui-button:first-child { background: var(--asd-blue); border-color: var(--asd-blue); color: #fff; }

/* ajax loader bar (div#ajaxLoader > .bar, ~125 pages): an indeterminate segment sliding from left to right
   on a light track, instead of the former width "breathing" from the center. Shown only after 200 ms
   (jQuery show() restarts the fade-in), so fast requests no longer flash a bar */
@keyframes asd-loader-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes asd-loader-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(360%); }
}
#ajaxLoader:has(> .bar) {
  overflow: hidden;
  background: var(--asd-blue-soft);
  animation: asd-loader-in .15s ease .2s both;
}
#ajaxLoader .bar.bar1 {
  width: 28%;
  margin: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--asd-blue), var(--asd-blue-dark));
  box-shadow: 0 0 8px rgba(31, 149, 236, .6);
  animation: asd-loader-slide 1.3s cubic-bezier(.45, .05, .55, .95) infinite;
}
@media (prefers-reduced-motion: reduce) {
  #ajaxLoader .bar.bar1 {
    width: 100%;
    animation: none;
    opacity: .7;
  }
}

/* page titles (h1 on ~130 screens, osCommerce .pageHeading) */
h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* legacy GIF buttons (tep_image_button / buttons/*.gif inside a link):
   hide the picture, draw a pill with the label instead */
a:has(> img[src*="/buttons/button_"]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--asd-blue);
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  vertical-align: middle;
}
a:has(> img[src*="/buttons/button_"]):hover { background: var(--asd-blue-dark); }
a:has(> img[src*="/buttons/button_"]) > img[src*="/buttons/button_"] { display: none; }
a:has(> img[src*="/buttons/button_"])::before { content: "OK"; }
a:has(> img[src*="button_back.gif"]) { background: var(--asd-head); }
a:has(> img[src*="button_back.gif"])::before { content: "\2190  Retour"; }
a:has(> img[src*="button_update.gif"])::before { content: "Mettre \E0  jour"; }
a:has(> img[src*="button_edit.gif"])::before { content: "Modifier"; }
a:has(> img[src*="button_cancel.gif"]) { background: #6b7280; }
a:has(> img[src*="button_cancel.gif"])::before { content: "Annuler"; }
a:has(> img[src*="button_delete.gif"]) { background: #d93838; }
a:has(> img[src*="button_delete.gif"])::before { content: "Supprimer"; }
a:has(> img[src*="button_insert.gif"])::before { content: "Ins\E9rer"; }
a:has(> img[src*="button_details.gif"])::before { content: "D\E9tails"; }
a:has(> img[src*="button_new_"])::before { content: "+ Nouveau"; }

/* hub pages (others.php, gestion_outil_*.php...): heading cell + bullet links */
td.heading {
  background: var(--asd-head) !important;
  color: var(--asd-on-head);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px !important;
  border-radius: 6px;
}
a.menusub, a.menusub:visited {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--asd-blue-dark);
  font-size: 12px !important;
}
a.menusub:hover { background: var(--asd-blue-soft); color: var(--asd-navy); text-decoration: none; }
table[style*="border-color:black" i], table[style*="border-color: black" i] {
  border-color: var(--asd-border) !important;
  background: var(--asd-surface);
}
table[style*="border-color:black" i] td, table[style*="border-color: black" i] td { border-color: var(--asd-border); }
td[bgcolor="#F2F4FF" i], tr[bgcolor="#F2F4FF" i] { background-color: var(--asd-blue-soft); }

/* blocks with the old gold border (product sheet sub-templates...) become cards */
table[style*="d2a901" i] {
  background: var(--asd-surface);
  border-color: var(--asd-border) !important;
  border-radius: var(--asd-radius);
  box-shadow: var(--asd-shadow);
}
td[style*="dcdcdc" i] {
  background-color: #f1f4f8 !important;
  border-radius: 4px;
  color: var(--asd-ink);
}

/* hard-coded blue links */
a[style*="color: blue" i], a[style*="color:blue" i] { color: var(--asd-blue-dark) !important; }
a[style*="color: blue" i]:hover, a[style*="color:blue" i]:hover { color: var(--asd-blue) !important; }

/* small centered forms (table.css .ASDForm) */
div.ASDForm, form.ASDForm {
  background-color: var(--asd-surface);
  border: 1px solid var(--asd-border);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .10);
}

/* legacy patterns reported by the per-screen review */
/* stats/search pages: orange-bordered filter panel */
table[style*="border-color:orange" i], table[style*="border-color: orange" i] {
  border-color: var(--asd-border) !important;
  background: var(--asd-surface);
}
/* old osCommerce grey-blue stripe (bgcolor is a presentational hint, any CSS wins) */
tr[bgcolor="#DEE4E8" i], td[bgcolor="#DEE4E8" i] { background-color: #f6f8fb; }
/* <a><font color=blue>...</font></a> links */
a font[color="blue" i] { color: var(--asd-blue-dark); }
/* per-page forms */
form.ASFancy {
  /* stylesheet.css makes every FORM inline: an inline card around block content only drew border scraps */
  display: block;
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--asd-surface);
  border: 1px solid var(--asd-border);
  border-radius: var(--asd-radius);
  box-shadow: var(--asd-shadow);
}
/* glass ajax loaders built inline in many templates (fixed top-left 100x22 box, GIF + red "Loading..."):
   a white pill centered at the top of the screen */
div#ajaxLoader:not(:has(.bar)), div#loader {
  background: var(--asd-surface) !important;
  border: 1px solid var(--asd-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .18);
}
div#ajaxLoader:not(:has(.bar)) {
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: auto !important;
  height: auto !important;
  padding: 8px 16px !important;
  white-space: nowrap;
}
div#ajaxLoader:not(:has(.bar)) span {
  color: var(--asd-navy) !important;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}

/* legacy loading GIFs (ajax-loader.gif ~20 pages, loading.gif): theme spinner, same content trick as the icons */
img[src$="ajax-loader.gif"], img[src$="/loading.gif"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='3'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23d6e4f5'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9' stroke='%231658b8' stroke-linecap='round'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  vertical-align: middle;
  animation: asd-spin .8s linear infinite;
}
@keyframes asd-spin { to { transform: rotate(360deg); } }

/* clickable osCommerce rows (data-href, see includes/general.js): hover used to be inline onmouseover */
tr[data-href] { cursor: pointer; }
tr.dataTableRow[data-href]:hover { background-color: var(--asd-blue-soft); }

/* toggle switches (label.switch > input + span.slider pattern, copied in many pages
   and in moduleChaine.js): thin modern track, grey = off, green = on.
   "html" prefix to win over the per-page copies (some are appended by JS after this file) */
html label.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
}
html label.switch > input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
html label.switch > input + span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-color: #cfd6df;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s;
}
html label.switch > input + span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: auto;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .3);
  transform: none;
  transition: transform .15s;
}
html label.switch > input:checked + span {
  background-color: #1e8e4e;
}
html label.switch > input:checked + span::before {
  transform: translateX(16px);
}
html label.switch > input:focus-visible + span {
  outline: 2px solid var(--asd-blue);
  outline-offset: 2px;
}
html label.switch > input:disabled + span {
  opacity: .45;
  cursor: not-allowed;
}

/* jQuery UI text buttons (.button()): same pill as the theme buttons, outlined.
   Specificity kept at (0,2,0) via :where() so the dialog primary button rule above still wins;
   icon-only buttons, checkbox/radio, spinner, selectmenu and dialog close are left alone */
.ui-button.ui-widget:where(:not(.ui-button-icon-only, .ui-checkboxradio-label, .ui-spinner-button, .ui-selectmenu-button, .ui-dialog-titlebar-close)) {
  padding: 5px 14px;
  border: 1px solid var(--asd-blue);
  border-radius: 999px;
  background: var(--asd-surface);
  color: var(--asd-blue-dark);
  font-family: var(--asd-font);
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}
.ui-button.ui-widget:where(:not(.ui-button-icon-only, .ui-checkboxradio-label, .ui-spinner-button, .ui-selectmenu-button, .ui-dialog-titlebar-close)):active {
  /* jQuery UI "a.ui-button:active" drops the bold: the pill shrank while clicked */
  font-weight: 600;
  background: var(--asd-blue-selected);
  border-color: var(--asd-blue-dark);
  color: var(--asd-navy);
}
.ui-button.ui-widget:where(:not(.ui-button-icon-only, .ui-checkboxradio-label, .ui-spinner-button, .ui-selectmenu-button, .ui-dialog-titlebar-close)):hover {
  background: var(--asd-blue-soft);
  border-color: var(--asd-blue-dark);
  color: var(--asd-navy);
}

/* jQuery UI tabs: light folder tabs in a left-aligned flex row (with jQuery UI floats
   a wrapped tab landed anywhere); the active tab is white and merges into the panel */
.ui-tabs .ui-tabs-nav.ui-widget-header {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 4px;
  padding: 0 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--asd-border);
  border-radius: 0;
}
.ui-tabs .ui-tabs-nav.ui-widget-header::before,
.ui-tabs .ui-tabs-nav.ui-widget-header::after {
  display: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-tab {
  float: none;
  margin: 0 0 -1px 0;
  background: #f1f4f8;
  border: 1px solid var(--asd-border);
  border-radius: 6px 6px 0 0;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-tab a.ui-tabs-anchor {
  padding: 7px 10px;
  color: var(--asd-muted);
  font-weight: 600;
  white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-tab:hover {
  background: var(--asd-blue-soft);
}
.ui-tabs .ui-tabs-nav li.ui-tabs-tab:hover a.ui-tabs-anchor {
  color: var(--asd-blue-dark);
}
.ui-tabs .ui-tabs-nav li.ui-tabs-tab.ui-tabs-active {
  background: var(--asd-surface);
  border-color: var(--asd-border);
  border-top: 2px solid var(--asd-blue);
  border-bottom-color: var(--asd-surface);
}
.ui-tabs .ui-tabs-nav li.ui-tabs-tab.ui-tabs-active a.ui-tabs-anchor {
  color: var(--asd-navy);
}
.ui-tabs .ui-tabs-panel {
  padding: 16px 12px;
}

/* jQuery UI accordion: white rows, the open section is marked by a light blue background and a
   blue left bar instead of a solid blue fill (its icon stays dark to remain visible) */
.ui-accordion .ui-accordion-header {
  margin: 0;
  padding: 9px 14px;
  background: var(--asd-surface);
  border: none;
  border-bottom: 1px solid var(--asd-border);
  border-radius: 0;
  color: var(--asd-ink);
  font-weight: 600;
}
.ui-accordion .ui-accordion-header:hover {
  background: #f7f9fc;
}
.ui-accordion .ui-accordion-header.ui-state-active {
  background: var(--asd-blue-soft);
  border-color: var(--asd-border);
  color: var(--asd-navy);
  box-shadow: inset 3px 0 0 var(--asd-blue);
}
.ui-accordion .ui-accordion-header.ui-state-active .ui-icon {
  background-image: url("/includes/images/ui-icons_444444_256x240.png");
}
.ui-accordion .ui-accordion-content {
  padding: 12px 16px;
  background: var(--asd-surface);
  border: none;
  border-bottom: 1px solid var(--asd-border);
  border-radius: 0;
}

/* jQuery UI selectmenu (1.11 in B2BAdmin/ADROP, 1.12 in the admin): same look as the native selects.
   The arrow is drawn in CSS (Font Awesome is not loaded on every page) */
.ui-selectmenu-button.ui-widget,
.ui-selectmenu-button.ui-widget.ui-state-active {
  background: var(--asd-surface);
  border: 1px solid var(--asd-border);
  border-radius: 6px;
  color: var(--asd-ink);
  font-weight: normal;
  box-shadow: none;
}
.ui-selectmenu-button.ui-widget.ui-state-hover,
.ui-selectmenu-button.ui-widget:hover {
  background: var(--asd-surface);
  border-color: var(--asd-blue);
  color: var(--asd-ink);
}
.ui-selectmenu-button.ui-widget.ui-state-focus,
.ui-selectmenu-button.ui-widget.ui-corner-top,
.ui-selectmenu-button.ui-widget.ui-selectmenu-button-open {
  background: var(--asd-surface);
  border-color: var(--asd-blue);
  box-shadow: 0 0 0 3px rgba(31, 149, 236, .2);
  color: var(--asd-ink);
}
.ui-selectmenu-button .ui-icon {
  background-image: none;
  text-indent: 0;
}
.ui-selectmenu-button .ui-icon::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 3px auto 0;
  border-right: 2px solid var(--asd-muted);
  border-bottom: 2px solid var(--asd-muted);
  transform: rotate(45deg);
}
.ui-selectmenu-menu .ui-menu {
  padding: 4px;
  background: var(--asd-surface);
  border: 1px solid var(--asd-border);
  border-radius: var(--asd-radius);
  box-shadow: 0 10px 24px rgba(16, 24, 40, .18);
}
/* 1.11: the li itself gets the focus state; 1.12: its .ui-menu-item-wrapper */
.ui-selectmenu-menu .ui-menu .ui-menu-item {
  border-radius: 6px;
}
.ui-selectmenu-menu .ui-menu .ui-menu-item + .ui-menu-item {
  border-top: 1px solid #f0f2f5;
}
.ui-selectmenu-menu .ui-menu .ui-menu-item.ui-state-focus,
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  background: var(--asd-blue-soft);
  border-color: transparent;
  color: var(--asd-navy);
}

/* press effect on every kind of button: slightly pushed while clicked (transform: no layout shift) */
:where(input[type="submit"], input[type="button"], input[type="reset"], button, .ui-button, a:has(> img[src*="/buttons/button_"])) {
  /* no background-color transition: jQuery UI .button() turns a filled submit into an outlined pill on
     load, an animated background showed blue text on a still blue background meanwhile */
  transition: transform .08s ease, box-shadow .08s ease;
}
:where(input[type="submit"], input[type="button"], input[type="reset"], button, .ui-button, a:has(> img[src*="/buttons/button_"])):active:not(:disabled, .ui-state-disabled) {
  transform: translateY(1px) scale(.97);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .18);
}
@media (prefers-reduced-motion: reduce) {
  :where(input[type="submit"], input[type="button"], input[type="reset"], button, .ui-button, a:has(> img[src*="/buttons/button_"])) {
    transition: none;
  }
}

/* legacy picture icons replaced by theme-colored SVG (content on img: the picture is swapped, the element,
   its link and its click handler stay): datepicker trigger (calendar.gif, ~90 pages), edit / delete PNGs */
img.ui-datepicker-trigger {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231658b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  width: 18px;
  height: 18px;
  cursor: pointer;
}
/* many pages still carry the old "icon inside the input" hack (position:relative; left:-20px; top:4px...)
   which now shifts the SVG icon off the field: always sit right after the input, whatever the page says */
img.ui-datepicker-trigger {
  position: static !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 0 0 6px !important;
  vertical-align: middle !important;
}
img[src$="images/edit.png"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231658b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
img[src$="images/remove.png"], img[src$="images/cancel.png"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d93838' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* native "Parcourir..." file button: outlined pill like the other buttons */
:where(input[type="file"])::file-selector-button {
  margin-right: 8px;
  padding: 3px 12px;
  border: 1px solid var(--asd-blue);
  border-radius: 999px;
  background: var(--asd-surface);
  color: var(--asd-blue-dark);
  font-family: var(--asd-font);
  font-weight: 600;
  cursor: pointer;
}
:where(input[type="file"])::file-selector-button:hover {
  background: var(--asd-blue-soft);
}

/* legacy <hr>: thin border line instead of the dark grey 3D rule */
:where(hr) {
  height: 0;
  border: 0;
  border-top: 1px solid var(--asd-border);
}

/* select2 fields (table.css): same look as the other inputs instead of the grey gradient boxes */
.select2-container .select2-choice, .select2-container-multi .select2-choices {
  border: 1px solid var(--asd-border);
  border-radius: 6px;
  background: var(--asd-surface);
  background-image: none;
}
.select2-container .select2-choice .select2-arrow {
  border-left: 0;
  background: transparent;
  background-image: none;
}
.select2-container-active .select2-choice, .select2-container-active .select2-choices,
.select2-container-multi.select2-container-active .select2-choices {
  border-color: var(--asd-blue);
  box-shadow: 0 0 0 3px rgba(31, 149, 236, .2);
}
.select2-container-multi .select2-choices .select2-search-choice {
  border: 1px solid var(--asd-blue-selected);
  border-radius: 999px;
  background: var(--asd-blue-soft);
  background-image: none;
  box-shadow: none;
  color: var(--asd-navy);
}
.select2-drop, .select2-drop-active {
  border-color: var(--asd-border);
  border-radius: 0 0 6px 6px;
}
.select2-results .select2-highlighted {
  background: var(--asd-blue);
}

/* chosen fields (vendor/harvesthq/chosen): same look as the other inputs */
.chosen-container-multi .chosen-choices, .chosen-container-single .chosen-single {
  border: 1px solid var(--asd-border);
  border-radius: 6px;
  background: var(--asd-surface);
  background-image: none;
  box-shadow: none;
}
.chosen-container-active .chosen-choices, .chosen-container-active .chosen-single {
  border-color: var(--asd-blue);
  box-shadow: 0 0 0 3px rgba(31, 149, 236, .2);
}
.chosen-container-multi .chosen-choices li.search-choice {
  border: 1px solid var(--asd-blue-selected);
  border-radius: 999px;
  background: var(--asd-blue-soft);
  background-image: none;
  box-shadow: none;
  color: var(--asd-navy);
}
.chosen-container .chosen-drop {
  border-color: var(--asd-border);
  border-radius: 0 0 6px 6px;
}
.chosen-container .chosen-results li.highlighted {
  background: var(--asd-blue);
  background-image: none;
}

/* legacy page titles: <td style="text-align:center;color:green">(DEV - )TITLE</td> in ~15 pages */
td[style*="text-align:center;color:green"] {
  color: var(--asd-navy) !important;
  font-size: 18px;
  font-weight: 600;
}

/* header cells written <th class="dataTableContent"> (~10 stats pages): navy header like the other tables */
th.dataTableContent {
  background-color: var(--asd-head);
  color: var(--asd-on-head);
  font-weight: 600;
  padding: 6px 8px;
  border-color: var(--asd-head) !important;
}
/* their old black-bordered tables */
table[style*="border-color:black" i]:has(th.dataTableContent) {
  border-color: var(--asd-border) !important;
}

/* table.css paints ASTable and its odd rows pure white: follow the softer surface */
table.ASTable {
  background-color: var(--asd-surface);
}
table.ASTable tbody tr:nth-child(odd), table.ASTable tr.odd {
  background-color: var(--asd-surface);
}
table.ASTable tbody tr:nth-child(even), table.ASTable tr.even {
  background-color: var(--asd-row-alt);
}
table.ASTable tbody tr:hover, table.ASTable tbody tr.hovered {
  background-color: var(--asd-blue-soft);
}

/* legacy bgcolor="#FFFFFF" / "white" tables and cells: same off-white surface (a bgcolor attribute is only a
   presentational hint, any author CSS wins) */
[bgcolor="#ffffff" i], [bgcolor="#fff" i], [bgcolor="white" i] {
  background-color: var(--asd-surface);
}

/* Category search field (categPicker.js) */
.ui-autocomplete { max-height: 340px; overflow-y: auto; overflow-x: hidden; font-size: 12px; }
.ui-autocomplete a { display: block; padding-right: 18px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.ui-autocomplete .ui-state-active, .ui-autocomplete .ui-state-focus { background: var(--asd-blue-soft) !important; border-color: transparent !important; color: var(--asd-ink) !important; }
.ui-dialog input.autoComp { width: 360px; }
.ui-autocomplete .path { color: var(--asd-muted); }
.ui-autocomplete .browse { color: var(--asd-blue); font-weight: 600; }
.ui-autocomplete .pick { font-weight: 700; }