/* ============================================================
   SterlynSilver — "Hallmark" design system
   Loaded LAST, after theme.min.css and style.css, so it wins.

   Deliberately keyed to the shell class names the app already
   uses (.dashboard-main-wrapper / .nav-left-sidebar /
   .dashboard-header / .dashboard-wrapper / .dashboard-content),
   so every page picks up the new look without being rewritten.
   ============================================================ */

:root{
	/* neutrals, biased violet-cool — the colour of oxidised silver */
	--hm-ink:        #14131A;
	--hm-ink-800:    #26242F;
	--hm-ink-600:    #4E4B58;
	--hm-ink-400:    #7E7B88;
	--hm-ink-300:    #A6A3AF;
	--hm-line:       #E1E2E7;
	--hm-line-soft:  #EDEEF1;
	--hm-bg:         #F2F3F5;
	--hm-surface:    #FFFFFF;
	--hm-surface-2:  #FAFAFC;

	/* the one accent — sampled from the SterlynSilver Corp mark */
	--hm-accent:      #1A74BC;
	--hm-accent-700:  #135E9B;
	--hm-accent-300:  #7FB4DE;
	--hm-accent-tint: #E8F1F9;

	/* row selection. Its own pair rather than --hm-accent-tint, which also
	   paints focus rings and input glows and must stay faint. A selected row
	   has to hold its own across thirty-five columns, so it sits a step down
	   the sequential ramp; --hm-sel-deep is the same row hovered, and the
	   Stone/Engraving banding inside it. */
	--hm-sel:         #CDDFEF;
	--hm-sel-deep:    #BCD3E9;

	/* reserved status — never used as a series colour */
	--hm-brass:       #A5741F;
	--hm-brass-tint:  #F8EFDC;
	--hm-garnet:      #A8123A;
	--hm-garnet-700:  #850E2E;
	--hm-garnet-tint: #FBE7EC;

	/* sequential ramp for the pipeline (one hue, light -> dark) */
	--hm-s1:#CBDDEE; --hm-s2:#A9C8E3; --hm-s3:#86B2D8; --hm-s4:#5F9BCC;
	--hm-s5:#3A85C2; --hm-s6:#1A74BC; --hm-s7:#135E9B;

	--hm-r: 10px;
	--hm-display:"Archivo","Arial Narrow",system-ui,sans-serif;
	--hm-body:"Public Sans",-apple-system,"Segoe UI",sans-serif;
	--hm-mono:"IBM Plex Mono",ui-monospace,"Consolas",monospace;

	--hm-side-w: 252px;
	--hm-top-h: 56px;
}

/* ------------------------------------------------------------
   base
   ------------------------------------------------------------ */
body{
	font-family:var(--hm-body);
	font-size:14px;
	line-height:1.5;
	color:var(--hm-ink);
	background:var(--hm-bg);
	-webkit-font-smoothing:antialiased;
}
body,.table,.table thead th{color:var(--hm-ink)}
a{color:var(--hm-accent)}
a:hover{color:var(--hm-accent-700)}
:focus-visible{outline:2px solid var(--hm-accent);outline-offset:2px;border-radius:3px}

.hm-eyebrow{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 118,"wght" 600;
	font-size:10px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--hm-ink-400);
}
.hm-num,.hm-mono{font-family:var(--hm-mono);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------
   brand mark — printed dark-on-light, so it always sits on white
   ------------------------------------------------------------ */
.hm-logo{
	background-image:url("../images/ssc-logo.png");
	background-repeat:no-repeat;background-position:left top;background-size:100% auto;
	display:block;
}
.hm-logo--full{width:200px;height:50px}
.hm-logo--mark{width:158px;height:30px;background-size:158px auto}

/* ------------------------------------------------------------
   shell — sidebar
   ------------------------------------------------------------ */
.dashboard-main-wrapper{background:var(--hm-bg)}

.nav-left-sidebar,
.nav-left-sidebar.sidebar-light{
	position:fixed;top:0;left:0;
	width:var(--hm-side-w);height:100vh;
	background:var(--hm-ink);
	box-shadow:none;border-right:1px solid rgba(255,255,255,.05);
	overflow-y:auto;z-index:1030;
}
.nav-left-sidebar .menu-list{padding:0}
.nav-left-sidebar .navbar{padding:0;display:block}

/* Exactly the height of the top bar, so the logo plate and the top bar
   read as one unbroken band across the top of the app. Sticky, because
   the sidebar itself scrolls: the mark stays put the way the top bar
   does instead of scrolling away with the nav. */
.hm-brand{
	position:sticky;top:0;z-index:2;
	display:flex;align-items:center;
	height:var(--hm-top-h);padding:0 20px;
	background:#FFFFFF;border-bottom:1px solid var(--hm-line);
}
.hm-brand a{display:block;line-height:0}
.hm-brand__sub{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 118,"wght" 500;
	font-size:9px;letter-spacing:.18em;text-transform:uppercase;
	color:var(--hm-ink-400);
}

.nav-left-sidebar .navbar-toggler{
	margin:10px 16px;border-color:rgba(255,255,255,.2);
}
.nav-left-sidebar .navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='rgba(255,255,255,.7)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* .navbar-expand-lg forces display:flex !important on the collapse, so
   the groups have to be turned into a column rather than un-flexed */
.nav-left-sidebar .navbar-collapse{
	padding:14px 12px 28px;
	flex-direction:column;align-items:stretch;
}
.hm-navgroup{display:flex;flex-direction:column;gap:1px;margin-bottom:18px}
.hm-navgroup__label{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 120,"wght" 600;
	font-size:9px;letter-spacing:.2em;text-transform:uppercase;
	color:rgba(255,255,255,.32);
	padding:0 10px 7px;
}
.nav-left-sidebar .navbar-nav{width:100%}
.nav-left-sidebar .navbar-nav .nav-item{margin:0}
.nav-left-sidebar .navbar .navbar-nav .nav-link,
.nav-left-sidebar .navbar-nav .nav-link{
	display:flex;align-items:center;gap:9px;
	padding:7px 10px;border-radius:6px;
	color:rgba(255,255,255,.66);font-size:13px;font-weight:400;
	transition:background .12s ease,color .12s ease;
}
.nav-left-sidebar .navbar-nav .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-left-sidebar .navbar-nav .nav-link.active{
	background:rgba(255,255,255,.09);color:#fff;font-weight:600;
}
/* the punch-mark bullet, in place of the old icon column */
.hm-dot{
	width:6px;height:6px;flex:none;background:rgba(255,255,255,.22);
	clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.nav-left-sidebar .nav-link.active .hm-dot{background:var(--hm-accent-300)}
.nav-left-sidebar .nav-link i{color:inherit;margin:0}
.hm-navcount{
	margin-left:auto;font-family:var(--hm-mono);font-size:11px;
	color:rgba(255,255,255,.42);
}
.nav-left-sidebar .nav-link.active .hm-navcount{color:#fff}

/* ------------------------------------------------------------
   shell — top bar
   ------------------------------------------------------------ */
.dashboard-header .navbar,
.dashboard-header .navbar.fixed-top{
	left:var(--hm-side-w);right:0;top:0;
	height:var(--hm-top-h);min-height:var(--hm-top-h);
	background:var(--hm-surface);
	border-bottom:1px solid var(--hm-line);
	padding:0 24px;box-shadow:none;
	display:flex;align-items:center;gap:16px;
	z-index:1020;
}
.dashboard-header .navbar-brand{
	display:flex;flex-direction:column;line-height:1.15;
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 106,"wght" 650;
	font-size:14px;color:var(--hm-ink);margin:0;padding:0;
}
.dashboard-header .navbar-brand small{
	display:block;
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 118,"wght" 600;
	font-size:10px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--hm-ink-400);
}
/* The theme sets .nav-link{padding:10px;font-size:16px;line-height:2.5} at
   five levels of specificity, which makes a 62px chip that hangs out of a
   56px bar. Match that selector and pin the height explicitly. */
.dashboard-header .navbar .navbar-right-top .nav-item .nav-link.nav-user-img,
.dashboard-header .nav-user-img{
	display:flex;align-items:center;gap:8px;
	height:34px;padding:0 12px 0 5px;
	border:1px solid var(--hm-line);border-radius:999px;
	background:var(--hm-surface);
	font-size:13px;line-height:1;font-weight:500;color:var(--hm-ink);
}
.dashboard-header .navbar .navbar-right-top .nav-item .nav-link.nav-user-img:hover,
.dashboard-header .nav-user-img:hover{background:var(--hm-surface-2);color:var(--hm-ink)}
/* keep every wrapper the height of its content so nothing can push out */
.dashboard-header #navbarSupportedContent,
.dashboard-header .navbar-right-top,
.dashboard-header .navbar-right-top .nav-item{
	display:flex;align-items:center;height:auto;border:0;
}
.hm-avatar{
	width:24px;height:24px;border-radius:50%;background:var(--hm-ink);color:#fff;
	display:grid;place-items:center;font-size:11px;font-weight:600;
	font-family:var(--hm-display);
}
.dashboard-header .nav-user-dropdown{
	border:1px solid var(--hm-line);border-radius:10px;padding:6px;
	box-shadow:0 12px 28px rgba(20,19,26,.16);min-width:230px;
}
.dashboard-header .nav-user-info{
	background:var(--hm-ink);border-radius:7px;padding:11px 12px;margin-bottom:6px;
}
.dashboard-header .nav-user-name{font-size:14px;font-weight:600}
.dashboard-header .nav-user-info .status,
.dashboard-header .nav-user-info span{color:rgba(255,255,255,.6);font-size:12px}
.dashboard-header .dropdown-item{
	border-radius:6px;padding:7px 10px;font-size:13px;color:var(--hm-ink-600);
}
.dashboard-header .dropdown-item:hover{background:var(--hm-line-soft);color:var(--hm-ink)}

/* ------------------------------------------------------------
   shell — content canvas
   ------------------------------------------------------------ */
.dashboard-wrapper{margin-left:var(--hm-side-w);background:var(--hm-bg)}
.dashboard-content{padding:calc(var(--hm-top-h) + 24px) 24px 48px}

.page-header{margin-bottom:18px;padding:0;border:0}
.page-header .pageheader-title,
h2.pageheader-title{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 112,"wght" 700;
	font-size:24px;letter-spacing:-.01em;color:var(--hm-ink);margin:0;
	text-wrap:balance;
}
.hm-pagemeta{font-family:var(--hm-mono);font-size:12px;color:var(--hm-ink-400)}
/* The vendor's Inventory page has one figure and it sits under the title
   on its own line, so it carries more ink than a listing's row count. */
body.page-viewerspohistory .hm-pagemeta{font-size:13px;color:var(--hm-ink-800)}
/* Each expanded panel scrolls sideways on its own, so its scrollbar sits under
   that panel rather than under the whole table, below every other open one.
   width:0 + min-width:100% is what makes it work inside a table cell: a cell
   sizes itself to its content's width, so a plain overflow-x:auto panel would
   just stretch the cell (and the table) instead of scrolling. With width 0 the
   panel asks the cell for nothing, then fills whatever the cell already is. */
body.page-viewerspohistory .hm-childpanel,
body.page-purchasehistory .hm-childpanel,
body.page-purchaseorders .hm-childpanel{
	overflow-x:auto;width:0;min-width:100%;
}

.footerft{
	margin-left:0;padding:24px 0;border-top:1px solid var(--hm-line);
	background:transparent;color:var(--hm-ink-400);font-size:12px;
}

/* ------------------------------------------------------------
   cards
   ------------------------------------------------------------ */
.card{
	background:var(--hm-surface);
	border:1px solid var(--hm-line);
	border-radius:var(--hm-r);
	box-shadow:none !important;
}
.card-header{
	background:var(--hm-surface);border-bottom:1px solid var(--hm-line-soft);
	padding:14px 16px;
}
.card-body{padding:16px}
.card h3{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 105,"wght" 650;
	font-size:14px;letter-spacing:.005em;color:var(--hm-ink);margin:0;
}
.hm-cardhead{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	padding:14px 16px;border-bottom:1px solid var(--hm-line-soft);
}
.hm-cardhead h3{margin:0}
.hm-spacer{margin-left:auto}
.fw-bold{font-weight:600;color:var(--hm-ink)}

/* ------------------------------------------------------------
   buttons
   ------------------------------------------------------------ */
.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:7px;
	height:32px;padding:0 13px;
	border:1px solid var(--hm-line);border-radius:6px;background:var(--hm-surface);
	font-family:var(--hm-body);font-size:13px;font-weight:500;color:var(--hm-ink);
	box-shadow:none;transition:background .12s ease,border-color .12s ease;
}
.btn:hover{background:var(--hm-surface-2);border-color:var(--hm-ink-300);color:var(--hm-ink)}
.btn-primary,.btn.btn-primary{
	background:var(--hm-accent);border-color:var(--hm-accent);color:#fff;
}
.btn-primary:hover,.btn.btn-primary:hover,
.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active{
	background:var(--hm-accent-700);border-color:var(--hm-accent-700);color:#fff;
}
.btn-secondary,.btn.btn-secondary{
	background:var(--hm-surface);border-color:var(--hm-line);color:var(--hm-ink);
}
.btn-secondary:hover{background:var(--hm-ink);border-color:var(--hm-ink);color:#fff}
/* Destructive. Without this .btn-danger falls through to the neutral .btn above and
   a delete button reads exactly like a harmless one. Garnet is already the reserved
   status red, so it carries the meaning without adding a colour to the system. */
.btn-danger,.btn.btn-danger{
	background:var(--hm-garnet);border-color:var(--hm-garnet);color:#fff;
}
.btn-danger:hover,.btn.btn-danger:hover,
.btn-danger:focus,.btn-danger:not(:disabled):not(.disabled):active{
	background:var(--hm-garnet-700);border-color:var(--hm-garnet-700);color:#fff;
}
.btn-sm{height:26px;padding:0 10px;font-size:12px}
.btn-block{width:100%}
.hm-btn-ghost{border-color:transparent;background:transparent;color:var(--hm-ink-600)}
.hm-btn-ghost:hover{background:var(--hm-line-soft);border-color:transparent}

/* ------------------------------------------------------------
   forms
   ------------------------------------------------------------ */
label{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 116,"wght" 600;
	font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--hm-ink-400);margin-bottom:5px;
}
.form-control,select.form-control,textarea.form-control{
	height:32px;padding:0 10px;
	border:1px solid var(--hm-line);border-radius:6px;background:var(--hm-surface);
	font-family:var(--hm-body);font-size:13px;color:var(--hm-ink);box-shadow:none;
}
textarea.form-control{height:auto;padding:8px 10px}
.form-control::placeholder{color:var(--hm-ink-300)}
.form-control:focus{
	border-color:var(--hm-accent);box-shadow:0 0 0 3px var(--hm-accent-tint);
	background:var(--hm-surface);color:var(--hm-ink);
}
select.form-control:not([size]):not([multiple]){height:32px}
.hm-select{
	appearance:none;-webkit-appearance:none;padding-right:26px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237E7B88' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 9px center;
}
.hm-toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.hm-field{display:flex;flex-direction:column;gap:0}
.hm-field label{display:block}

/* ------------------------------------------------------------
   punch mark — the signature device. Carries a stage code.
   ------------------------------------------------------------ */
.hm-mark{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:44px;height:20px;padding:0 8px;
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 96,"wght" 700;
	font-size:10px;letter-spacing:.1em;text-transform:uppercase;
	color:#fff;background:var(--hm-ink-600);white-space:nowrap;
	clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%);
}
.hm-mark--sm{height:17px;min-width:38px;font-size:9px;padding:0 7px}
.hm-mark--imp{background:var(--hm-s2);color:#123}
.hm-mark--asg{background:var(--hm-s4)}
.hm-mark--bar{background:var(--hm-s5)}
.hm-mark--rsg{background:var(--hm-s3);color:#123}
.hm-mark--pck{background:var(--hm-s6)}
.hm-mark--cls{background:var(--hm-ink-800)}
.hm-mark--hld{background:var(--hm-brass)}
.hm-mark--oos{background:var(--hm-garnet)}

/* flags — state said in words as well as colour */
.hm-flag{
	display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 7px;
	border-radius:4px;font-size:10.5px;font-weight:600;white-space:nowrap;
}
.hm-flag--warn{background:var(--hm-brass-tint);color:var(--hm-brass)}
.hm-flag--stop{background:var(--hm-garnet-tint);color:var(--hm-garnet)}
.hm-flag--info{background:var(--hm-line-soft);color:var(--hm-ink-600)}
/* Complete. Referenced by four purchasing pages since they were written but
   never defined, so a "received" line printed its status as bare text beside
   properly badged "open" and "partial" ones. Accent tint rather than a green:
   the palette is deliberately one hue, and done reads as done without it. */
.hm-flag--ok{background:var(--hm-accent-tint);color:var(--hm-accent-700)}
/* Opening stock, which was never ordered and so has no order status. It sits on
   the brass-tinted .hm-openrow, where --hm-flag--warn's brass fill vanishes into
   the row and --hm-flag--info's grey reads at a glance as the accent-tinted
   "received" badge above it. An outline keeps it in the reserved-status family
   and legible on its own row without claiming a status it does not have. */
.hm-flag--lot{background:var(--hm-surface);border:1px solid var(--hm-brass);color:var(--hm-brass)}
/* A flag holding a paragraph rather than a word (the markup caveat on Tools).
   The base chip is a fixed 19px nowrap line, so without these resets the text
   runs straight out of its column. */
.hm-flag.hm-flag--block{
	display:block;height:auto;padding:12px 14px;white-space:normal;
	font-size:12.5px;font-weight:400;line-height:1.5;
}
.hm-miss{color:var(--hm-garnet);font-family:var(--hm-mono);font-size:12px}
.hm-warn{color:var(--hm-brass);font-family:var(--hm-mono);font-size:12px}
/* A quantity that carries its own state, for a table that would otherwise need
   a Status column to say the same thing in words. Colour ONLY -- these sit on
   cells that already carry .hm-mono, and .hm-warn above would drag its 12px
   into a .hm-subtable set at 13px.

   Accent for complete and brass for part-delivered, rather than the green and
   orange the pair suggests: the palette is deliberately one hue plus two
   reserved status colours, and brass is already what "partial" is painted in
   everywhere else on these pages. */
.hm-qty--done{color:var(--hm-accent-700)}
.hm-qty--part{color:var(--hm-brass)}
.hm-empty{color:var(--hm-ink-300)}

/* ------------------------------------------------------------
   pipeline rail — the order lifecycle, drawn as the sequence
   it actually is
   ------------------------------------------------------------ */
.hm-rail{
	display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
	gap:1px;background:var(--hm-line-soft);
	border-radius:0 0 var(--hm-r) var(--hm-r);overflow:hidden;
}
.hm-rail__stage{
	background:var(--hm-surface);padding:14px;
	display:flex;flex-direction:column;align-items:flex-start;gap:9px;
	border:none;text-align:left;color:inherit;
	transition:background .14s ease;
}
a.hm-rail__stage:hover{background:var(--hm-surface-2);text-decoration:none;color:inherit}
.hm-rail__n{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 100,"wght" 700;
	font-size:26px;line-height:1;letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;color:var(--hm-ink);
}
.hm-rail__label{font-size:12px;color:var(--hm-ink-600);line-height:1.25}
.hm-rail__bar{
	height:4px;align-self:stretch;background:var(--hm-line-soft);
	border-radius:2px;overflow:hidden;
}
.hm-rail__fill{display:block;height:100%;border-radius:2px}
.hm-rail__note{font-family:var(--hm-mono);font-size:10.5px;color:var(--hm-ink-400)}

/* stat tiles */
.hm-stat{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.hm-stat__k{font-size:12px;color:var(--hm-ink-400)}
.hm-stat__v{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 100,"wght" 700;
	font-size:28px;line-height:1.1;letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;color:var(--hm-ink);
}
.hm-stat__foot{font-family:var(--hm-mono);font-size:11px;color:var(--hm-ink-400)}

/* ------------------------------------------------------------
   tables + DataTables 1.10 / bootstrap4 integration
   ------------------------------------------------------------ */
.hm-scroll{overflow-x:auto;overflow-y:visible}

table.table,table.dataTable{
	border-collapse:separate;border-spacing:0;width:100%;margin:0;
	background:var(--hm-surface);
}
table.table thead th,table.dataTable thead th{
	position:sticky;top:0;z-index:10;background:var(--hm-surface-2);
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 114,"wght" 600;
	font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--hm-ink-400);
	text-align:left;padding:0 12px;height:34px;white-space:nowrap;
	border:0;border-bottom:1px solid var(--hm-line);vertical-align:middle;
}
/* per-column search row — keeps the labels instead of replacing them.
   Not scoped to .dataTable: a listing below the row threshold never
   initialises DataTables, and this row would then stick at top 0 on top
   of the label row instead of below it. */
table.dataTable thead tr.hm-filters th,
table.table thead tr.hm-filters th{
	top:34px;z-index:9;background:var(--hm-surface);padding:5px 6px;height:auto;
	border-bottom:1px solid var(--hm-line);
}
/* These are type="search" so the browser's profile autofill leaves them
   alone -- it will not offer a saved name or address into a search field,
   and it was doing exactly that to the Engraving columns. WebKit gives a
   search field its own appearance, so it has to be reset back to a plain
   box or the border and height below are ignored. */
table.dataTable thead tr.hm-filters input,
table.table thead tr.hm-filters input{
	width:100%;min-width:78px;max-width:none;height:26px;padding:0 7px;
	border:1px solid var(--hm-line);border-radius:5px;background:var(--hm-surface-2);
	font-family:var(--hm-body);font-size:11.5px;color:var(--hm-ink);
	-webkit-appearance:none;appearance:none;
}
table.dataTable thead tr.hm-filters input::-webkit-search-decoration,
table.table thead tr.hm-filters input::-webkit-search-decoration{-webkit-appearance:none}
table.dataTable thead tr.hm-filters input:focus{
	outline:none;border-color:var(--hm-accent);background:var(--hm-surface);
	box-shadow:0 0 0 2px var(--hm-accent-tint);
}
/* text-align is restated because theme.min.css carries a bare
   `table td{text-align:center}` -- written for the datepicker, but unscoped, so
   it centres every cell on the site. The header row above is left-aligned, so
   the data under it read as misaligned against its own labels. */
table.table tbody td,table.dataTable tbody td{
	padding:8px 12px;border:0;border-bottom:1px solid var(--hm-line-soft);
	vertical-align:middle;font-size:13px;background:var(--hm-surface);
	text-align:left;
}
/* The tick and row-number columns are deliberately centred, and the rule above
   is specific enough to beat the bare .selectall/.selectrow classes, so they
   have to be restated at matching weight. */
table.table tbody td.selectall,table.dataTable tbody td.selectall,
table.table tbody td.selectrow,table.dataTable tbody td.selectrow,
table.table tbody td.slrow,table.dataTable tbody td.slrow{text-align:center}
/* Kills bootstrap's zebra tint. It has to land on the tr, not the td:
   bootstrap paints the row, and a td here would score a class higher than
   the tr.selected and tr:hover rules below — so every odd row would refuse
   both the selection tint and the hover shade, leaving a selected row white
   except for its banded hm-pg cells. Cell backgrounds are opaque anyway, so
   the row-level reset is all that is needed. */
table.table.table-striped tbody tr:nth-of-type(odd){background:var(--hm-surface)}
table.table tbody tr:hover td,table.dataTable tbody tr:hover td{background:var(--hm-surface-2)}
/* dataTables.bootstrap4.css paints tr.selected white-on-blue; the colour
   has to be reset too or selected rows read as empty */
table.table tbody tr.selected,table.dataTable tbody tr.selected,
table.table tbody tr.selected td,table.dataTable tbody tr.selected td{
	background:var(--hm-sel);color:var(--hm-ink);
}
table.table tbody tr.selected:hover td,table.dataTable tbody tr.selected:hover td{background:var(--hm-sel-deep)}
/* a tfoot kept only so the table2excel export keeps its trailing
   header row — never shown on screen */
.hm-exportonly{display:none}

/* Sorting affordance. The bootstrap4 integration already paints the
   arrows in :before/:after — restyle those rather than adding markup,
   because DataTables reads the header's HTML for ColVis labels.
   NB: never add position:relative to a sortable th here. thead th is
   sticky, which already gives the arrows a containing block, and a
   relative declaration would beat the sticky one and turn the pinned
   columns' left offsets into shifts. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc{
	cursor:pointer;padding-right:26px;background-image:none;
}
table.dataTable thead th.sorting:before,table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,table.dataTable thead th.sorting_desc:after{
	bottom:auto;top:50%;transform:translateY(-50%);
	font-size:10px;line-height:1;opacity:.3;color:var(--hm-ink-600);
}
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before{right:15px}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after{right:7px}
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:after{opacity:1;color:var(--hm-accent)}

/* pinned columns — the row's identity stays put while the rest scroll.
   Left offsets are measured and written by hmPinColumns(). */
table.dataTable th.hm-pin,table.dataTable td.hm-pin,
table.table th.hm-pin,table.table td.hm-pin{position:sticky;z-index:6}
/* NB: these must NOT be scoped to .dataTable. That class only exists once
   DataTables has initialised, and a listing below the row threshold skips
   initialisation — leaving the pinned header cells on the base z-index 6
   while the scrolling ones sit at 10, so they slide over the pinned
   headers on horizontal scroll while the pinned body cells stay put. */
table.dataTable thead th.hm-pin,
table.table thead th.hm-pin{z-index:16}
table.dataTable thead tr.hm-filters th.hm-pin,
table.table thead tr.hm-filters th.hm-pin{z-index:15}
.hm-pin1{left:0;width:45px}
.hm-pin2{left:45px}
.hm-pin3{left:106px;min-width:150px}
table.dataTable .hm-pin3,table.table .hm-pin3{box-shadow:inset -1px 0 0 var(--hm-line)}
.hm-colhidden{display:none}

/* Stone n / Engraving n arrive as 20 columns. Banding the pairs is
   the only thing that makes them scannable sideways. */
/* style.css lets the address wrap, which triples the row height on a
   35-column table. Clip it instead; the full value is in the title. */
table.table tbody td.address,table.dataTable tbody td.address{
	max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

table.dataTable tbody td.hm-pg,table.dataTable thead th.hm-pg,
table.table tbody td.hm-pg,table.table thead th.hm-pg{background:var(--hm-surface-2)}
table.dataTable tbody tr:hover td.hm-pg,table.table tbody tr:hover td.hm-pg{background:#F1F1F5}
table.dataTable tbody tr.selected td.hm-pg,table.table tbody tr.selected td.hm-pg{background:var(--hm-sel-deep)}

/* the existing FontAwesome checkbox cells, restyled in place */
.selectall,.selectrow{cursor:pointer;width:45px;text-align:center}
.selectall .far,.selectrow .far{font-size:15px;color:var(--hm-ink-300)}
.selectall .fa-check-square,.selectrow .fa-check-square{color:var(--hm-accent)}

.hm-thumb{
	width:40px;height:40px;border-radius:5px;border:1px solid var(--hm-line);
	background:var(--hm-surface-2);display:grid;place-items:center;
	overflow:hidden;
}
.hm-thumb img{max-width:100%;max-height:100%;display:block}
table.table tbody td img{max-width:40px;max-height:40px;border-radius:4px}
.hm-stonecell{display:flex;align-items:center;gap:7px}
.hm-dotstone{
	width:9px;height:9px;border-radius:50%;flex:none;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
.hm-eng{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 100,"wght" 600;
	font-size:12.5px;letter-spacing:.02em;
}

/* DataTables wrapper chrome */
.dataTables_wrapper{position:relative}
.hm-dttop{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	padding:12px 16px;border-bottom:1px solid var(--hm-line-soft);
}
.dataTables_filter{margin-left:auto}
.dataTables_filter label,.dataTables_length label{
	display:flex;align-items:center;gap:8px;margin:0;
	font-family:var(--hm-body);font-size:12.5px;font-weight:400;
	letter-spacing:0;text-transform:none;color:var(--hm-ink-600);
}
.dataTables_filter input,.dataTables_length select{
	height:30px;padding:0 9px;border:1px solid var(--hm-line);border-radius:6px;
	background:var(--hm-surface);font-family:var(--hm-body);font-size:13px;
	color:var(--hm-ink);margin:0;
}
.dataTables_filter input{width:240px}
.dataTables_filter input:focus,.dataTables_length select:focus{
	outline:none;border-color:var(--hm-accent);box-shadow:0 0 0 3px var(--hm-accent-tint);
}
div.dataTables_wrapper div.dataTables_info{
	padding:0;font-size:12px;color:var(--hm-ink-400);
}
/* dataTables.buttons.css is not loaded anywhere in this app, so the
   collection's positioning has to come from here — without it the panel
   is a flex item of .btn-group and collapses to the button's height */
/* No page configures DataTables Buttons, so the toolbar holds only the
   search box. The B slot was dropped from every dom string. */
.hm-dttop:empty{display:none}

/* pagination — Laravel's bootstrap paginator emits these classes */
.pagination{display:flex;gap:5px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.pagination .page-link{
	display:grid;place-items:center;min-width:30px;height:30px;padding:0 9px;
	border:1px solid var(--hm-line);border-radius:6px;background:var(--hm-surface);
	font-family:var(--hm-mono);font-size:12px;color:var(--hm-ink-600);
}
.pagination .page-link:hover{background:var(--hm-surface-2);color:var(--hm-ink)}
.pagination .page-item.active .page-link{
	background:var(--hm-ink);border-color:var(--hm-ink);color:#fff;
}
.pagination .page-item.disabled .page-link{opacity:.4}
/* the count sits opposite the pager, so a change of page size is
   visible even when the whole result set fits on one page */
.tableoptions{
	float:none !important;padding:14px 0 0;
	display:flex;align-items:center;justify-content:space-between;
	gap:12px;flex-wrap:wrap;
}
.hm-showing{
	float:none !important;
	font-family:var(--hm-mono);font-size:12px;color:var(--hm-ink-400);
}
.pagination_area{float:none !important;display:flex;justify-content:flex-end;margin-left:auto}

/* ------------------------------------------------------------
   selection bar — rises when rows are picked
   ------------------------------------------------------------ */
.hm-selbar{
	position:fixed;left:50%;bottom:22px;
	transform:translate(-50%,calc(100% + 30px));
	background:var(--hm-ink);color:#fff;border-radius:10px;
	display:flex;align-items:center;gap:14px;padding:10px 12px;
	box-shadow:0 12px 30px rgba(20,19,26,.28);
	transition:transform .22s cubic-bezier(.2,.7,.3,1);
	/*--below .modal-backdrop (1040) so an open modal dims it too--*/
	z-index:1030;
}
.hm-selbar.is-up{transform:translate(-50%,0)}
.hm-selbar__n{font-family:var(--hm-mono);font-size:12.5px;padding-left:4px}
.hm-selbar__rule{width:1px;height:22px;background:rgba(255,255,255,.16)}
.hm-selbar select,
.hm-selbar input[type="text"],
.hm-selbar input[type="password"]{
	height:30px;border-radius:6px;border:1px solid rgba(255,255,255,.2);
	background:rgba(255,255,255,.08);color:#fff;
	font-family:var(--hm-body);font-size:13px;padding:0 8px;
}
.hm-selbar select option{color:var(--hm-ink)}
.hm-selbar input::placeholder{color:rgba(255,255,255,.5)}
.hm-selbar input:focus{outline:none;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.14)}

/* ------------------------------------------------------------
   Lightbox — the SKU image viewer (hmLightbox in hallmark.js).
   ------------------------------------------------------------
   1070, one step above the datepicker, because it is the only thing
   that opens over a full page and has nothing that may float above it.
   The element is appended to <body>, so no ancestor's stacking
   context can trap it. */
.hm-lightbox{
	position:fixed;inset:0;z-index:1070;
	display:none;align-items:center;justify-content:center;
	padding:56px 64px;
	background:rgba(20,19,26,.86);
	-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.hm-lightbox.is-open{display:flex}
body.hm-lb-open{overflow:hidden}

.hm-lb__fig{
	position:relative;
	margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
	max-width:100%;max-height:100%;
}
.hm-lb__img{
	max-width:100%;
	/* leave room for the caption below it, whatever the viewport */
	max-height:calc(100vh - 150px);
	width:auto;height:auto;display:block;
	background:var(--hm-surface);
	border-radius:var(--hm-r);
	box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.hm-lb__fig.is-loading .hm-lb__img{min-width:180px;min-height:180px}
.hm-lb__fig.is-loading::before{
	content:"";position:absolute;width:28px;height:28px;
	border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;
	animation:hm-lb-spin .7s linear infinite;
}
@keyframes hm-lb-spin{to{transform:rotate(360deg)}}

.hm-lb__cap{
	display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center;
	text-align:center;
}
.hm-lb__title{
	font-family:var(--hm-display);font-size:16px;font-weight:600;
	letter-spacing:.01em;color:#fff;
}
.hm-lb__foot{font-family:var(--hm-mono);font-size:12px;color:rgba(255,255,255,.6)}
.hm-lb__cap:empty{display:none}

.hm-lb__x,.hm-lb__nav{
	position:absolute;border:0;cursor:pointer;
	background:rgba(255,255,255,.1);color:#fff;
	border-radius:50%;line-height:1;
	transition:background .15s ease;
}
.hm-lb__x:hover,.hm-lb__nav:hover{background:rgba(255,255,255,.22)}
.hm-lb__x:focus-visible,.hm-lb__nav:focus-visible{outline:2px solid var(--hm-accent-300);outline-offset:2px}
.hm-lb__x{top:16px;right:20px;width:38px;height:38px;font-size:26px}
.hm-lb__nav{top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:30px}
.hm-lb__nav--prev{left:16px}
.hm-lb__nav--next{right:16px}
.hm-lb__nav[hidden]{display:none}

@media (max-width:767px){
	.hm-lightbox{padding:52px 12px}
	.hm-lb__img{max-height:calc(100vh - 140px)}
	.hm-lb__nav{width:38px;height:38px;font-size:24px}
}

/* The table thumbnails this opens from — say they are clickable.
   Two shapes exist: the bare <img> on Add SKU / Low In Stock, and the
   .hm-thumb frame every order listing uses. The frame already draws the
   border, so only the bare one gets its own. */
td a[data-toggle="lightbox"]{cursor:zoom-in;text-decoration:none}
td a[data-toggle="lightbox"]:not(.hm-thumb){display:inline-block;line-height:0;margin-right:4px}
td a[data-toggle="lightbox"]:not(.hm-thumb) img{
	border-radius:4px;border:1px solid var(--hm-line);
	background:var(--hm-surface);
	transition:border-color .15s ease,box-shadow .15s ease;
}
td a.hm-thumb{transition:border-color .15s ease,box-shadow .15s ease}
td a[data-toggle="lightbox"]:not(.hm-thumb):hover img,
td a.hm-thumb[data-toggle="lightbox"]:hover{
	border-color:var(--hm-accent-300);
	box-shadow:0 2px 8px rgba(20,19,26,.16);
}
td a[data-toggle="lightbox"]:focus-visible{outline:2px solid var(--hm-accent);outline-offset:2px}

/* ------------------------------------------------------------
   jQuery UI datepicker — the From/Upto popups on every listing.
   ------------------------------------------------------------
   jQuery UI writes the stacking order INLINE: _showDatepicker sets
   z-index from $.fn.zIndex(), which walks the input's ancestors for a
   positioned one and returns 0 when it finds none — so the calendar
   lands on z-index:1 and every sticky table header (10/16), card and
   toolbar button in the page paints straight over it. An inline style
   cannot be beaten from a stylesheet without !important, which is why
   this rule carries one; do not "fix" it by raising a selector's depth.
   1060 clears the sticky headers, the dashboard header (1020), the
   sidebar and selection bar (1030), and a bootstrap modal (1050), so a
   datepicker opened inside a dialog still lands on top. */
#ui-datepicker-div{
	z-index:1060 !important;
	box-shadow:0 12px 30px rgba(20,19,26,.18);border-radius:8px;
}
.hm-selbar .btn{background:#fff;border-color:transparent;color:var(--hm-ink)}
.hm-selbar .btn:hover{background:#EDEEF1;border-color:transparent}
.hm-selbar .hm-btn-ghost{background:transparent;color:rgba(255,255,255,.7)}
.hm-selbar .hm-btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* ------------------------------------------------------------
   lots modal on Shipments — a .hm-subtable outside a child
   panel. The subtable's th rule (0,1,1) sets text-align:left
   and outscores bootstrap's .text-right (0,1,0), so the
   quantity columns are restated at the same depth. The host
   scrolls inside the modal rather than the modal growing past
   the viewport on a forty-line consignment.
   ------------------------------------------------------------ */
#receiptlots .rlhost{max-height:60vh;overflow:auto}
#receiptlots .hm-subtable th.text-right,
#receiptlots .hm-subtable td.text-right{text-align:right}
#receiptlots .modal-title{font-size:18px;font-weight:600}

/* ------------------------------------------------------------
   edit order modal — scoped to #editorder so other pages'
   modals keep the old theme until they are converted
   ------------------------------------------------------------ */
#editorder .modal-dialog{max-width:1000px}
#editorder .modal-content{
	background:var(--hm-surface);border:1px solid var(--hm-line);border-radius:12px;
	box-shadow:0 24px 60px rgba(20,19,26,.3);overflow:hidden;
}
#editorder .modal-header{
	display:flex;align-items:center;gap:12px;
	padding:14px 18px;border-bottom:1px solid var(--hm-line);
}
#editorder .modal-title{
	font-family:var(--hm-display);font-variation-settings:"wdth" 106,"wght" 650;
	font-size:15px;margin:0;display:flex;align-items:baseline;gap:9px;
}
#editorder .modal-title span{font-family:var(--hm-mono);font-size:14px;font-weight:500}
#editorder .close{
	margin-left:auto;opacity:1;border:0;background:transparent;
	width:30px;height:30px;border-radius:6px;color:var(--hm-ink-400);
	font-size:20px;line-height:1;text-shadow:none;
}
#editorder .close:hover{background:var(--hm-line-soft);color:var(--hm-ink)}
#editorder .modal-body{display:grid;grid-template-columns:196px minmax(0,1fr);padding:0}
#editorder .modal-footer{
	display:flex;align-items:center;gap:10px;
	padding:12px 18px;border-top:1px solid var(--hm-line);background:var(--hm-surface-2);
}
#editorder .modal-footer .hm-hint{margin:0;font-size:12px;color:var(--hm-ink-400)}
#editorder .modal-footer .btn:first-of-type{margin-left:auto}

.hm-formnav{
	border-right:1px solid var(--hm-line-soft);background:var(--hm-surface-2);
	padding:14px 10px;display:flex;flex-direction:column;gap:2px;
}
.hm-formnav button{
	display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;
	border:none;border-radius:6px;background:transparent;cursor:pointer;
	font-family:var(--hm-body);font-size:13px;color:var(--hm-ink-600);text-align:left;
}
.hm-formnav button:hover{background:var(--hm-line-soft);color:var(--hm-ink)}
.hm-formnav button.is-on{
	background:var(--hm-surface);color:var(--hm-ink);font-weight:600;
	box-shadow:inset 0 0 0 1px var(--hm-line);
}
.hm-formnav .n{margin-left:auto;font-family:var(--hm-mono);font-size:11px;color:var(--hm-ink-300)}

.hm-formpane{padding:20px 22px 24px;overflow-y:auto;max-height:min(62vh,600px)}
.hm-fsec + .hm-fsec{margin-top:26px;padding-top:22px;border-top:1px solid var(--hm-line-soft)}
.hm-fsec__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.hm-fsec__head h4{
	font-family:var(--hm-display);font-variation-settings:"wdth" 112,"wght" 650;
	font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:0;color:var(--hm-ink);
}
.hm-fsec__head p{margin:0;font-size:12px;color:var(--hm-ink-400)}
.hm-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.hm-fgrid .hm-span2{grid-column:1/-1}
.hm-fgrid .form-control{width:100%}
.hm-ferr{display:block;font-family:var(--hm-body);font-size:11.5px;
	letter-spacing:0;text-transform:none;color:var(--hm-garnet);margin-top:4px}
.form-control.is-bad{border-color:var(--hm-garnet)}
.form-control.is-bad:focus{box-shadow:0 0 0 3px var(--hm-garnet-tint)}

.hm-englist{display:flex;flex-direction:column;gap:8px}
.hm-enghead,.hm-engrow{display:grid;grid-template-columns:34px 1fr 1fr;gap:10px;align-items:center}
.hm-enghead{
	font-family:var(--hm-display);font-variation-settings:"wdth" 116,"wght" 600;
	font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--hm-ink-400);
}
.hm-engrow .hm-slot{
	font-family:var(--hm-mono);font-size:11px;color:var(--hm-ink-300);text-align:center;
	border:1px solid var(--hm-line);border-radius:5px;height:32px;display:grid;place-items:center;
}
.hm-engrow.is-empty .hm-slot{opacity:.6}
.hm-engrow.is-empty .form-control{background:var(--hm-surface-2)}
.hm-instone{position:relative;display:block}
.hm-instone .hm-dotstone{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2}
.hm-instone .form-control{padding-left:26px;width:100%}

/* ------------------------------------------------------------
   auth screens
   ------------------------------------------------------------ */
body.page-login{background:var(--hm-surface)}
.hm-auth{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.hm-auth__plate{
	background:var(--hm-ink);color:#fff;position:relative;overflow:hidden;
	display:flex;flex-direction:column;justify-content:space-between;padding:40px;
}
.hm-auth__plate::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:repeating-linear-gradient(96deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
}
.hm-plate__brand{
	position:relative;z-index:1;align-self:flex-start;
	display:flex;align-items:center;gap:14px;
	background:#fff;border-radius:10px;padding:14px 18px;
}
.hm-plate__brand .hm-brand__sub{border-left:1px solid var(--hm-line);padding-left:14px}
.hm-plate__stage{
	position:relative;z-index:1;margin:auto 0;
	display:flex;flex-direction:column;align-items:flex-start;gap:26px;
}
.hm-plate__quote{
	font-family:var(--hm-display);font-variation-settings:"wdth" 104,"wght" 600;
	font-size:27px;line-height:1.24;letter-spacing:-.015em;max-width:15ch;margin:0;
	text-wrap:balance;
}
.hm-plate__quote em{font-style:normal;color:var(--hm-accent-300)}
.hm-plate__meta{position:relative;z-index:1;display:flex;gap:26px;flex-wrap:wrap;margin:0}
.hm-plate__meta div{display:flex;flex-direction:column;gap:2px}
.hm-plate__meta dt{
	font-family:var(--hm-display);font-variation-settings:"wdth" 118,"wght" 600;
	font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.34);
}
.hm-plate__meta dd{margin:0;font-family:var(--hm-mono);font-size:13px;color:#fff}

.hm-auth__form{
	display:flex;align-items:center;justify-content:center;
	padding:40px;background:var(--hm-surface);
}
.hm-authbox{width:100%;max-width:352px}
.hm-authbox h1{
	font-family:var(--hm-display);font-variation-settings:"wdth" 106,"wght" 700;
	font-size:26px;margin:6px 0;letter-spacing:-.015em;color:var(--hm-ink);
}
.hm-authbox .hm-sub{margin:0 0 22px;color:var(--hm-ink-600);font-size:13.5px}
.hm-authbox form{display:flex;flex-direction:column;gap:14px}
.hm-authbox .form-control{height:38px}
.hm-authbox .btn{height:40px;font-size:14px}
.hm-authrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hm-checkline{
	display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;
	font-family:var(--hm-body);font-size:13px;font-weight:400;
	letter-spacing:0;text-transform:none;color:var(--hm-ink-600);
}
.hm-linkmute{
	font-size:13px;color:var(--hm-ink-600);
	text-decoration:underline;text-underline-offset:2px;
}
.hm-linkmute:hover{color:var(--hm-accent)}
.hm-authfoot{
	margin-top:24px;padding-top:16px;border-top:1px solid var(--hm-line-soft);
	font-size:12px;color:var(--hm-ink-400);
}
.loginerror,.forgotmsg.loginerror{
	display:flex;gap:9px;padding:10px 12px;border-radius:7px;margin-top:12px;
	font-size:12.5px;line-height:1.4;
	background:var(--hm-garnet-tint);color:var(--hm-garnet);border:1px solid #F2CDD6;
}
.loginsuccess,.forgotmsg.loginsuccess{
	display:flex;gap:9px;padding:10px 12px;border-radius:7px;margin-top:12px;
	font-size:12.5px;line-height:1.4;
	background:var(--hm-accent-tint);color:var(--hm-accent-700);border:1px solid #C6DCEF;
}
.splash-description{color:var(--hm-ink-600);font-size:13.5px}

/* ------------------------------------------------------------
   SweetAlert2 tables the app builds by hand
   ------------------------------------------------------------ */
.stock_status_wrap,.missingskus_wrap{font-family:var(--hm-body)}
.stock_row,.missingsku_row{border-color:var(--hm-line)}

/* ============================================================
   LEGACY PAGE PATTERNS
   The listing and form pages were all built from the same few
   float-based idioms. Normalising them here converts every page
   at once, without touching markup that working JS depends on.
   ============================================================ */

/* "Order Actions" / "Filter Orders" section headings */
.card-body > .float-left.w-100.fw-bold,
.card-body > .row > .col-12 > .float-left.w-100.fw-bold{
	float:none !important;width:auto !important;margin:0 0 14px;
}
.card-body > .float-left.w-100.fw-bold h3,
.card-body > .row > .col-12 > .float-left.w-100.fw-bold h3{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 112,"wght" 650;
	font-size:12px;letter-spacing:.06em;text-transform:uppercase;
	color:var(--hm-ink);margin:0;
}

/* the filter form: floats become a real toolbar */
form.order_form{
	float:none !important;width:auto !important;margin:0 !important;
	display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
}
form.order_form > div{
	float:none !important;margin:0 !important;
	display:flex;flex-direction:column;gap:0;
}
form.order_form label,
form.order_form label.float-left{float:none !important;width:auto !important;display:block}
form.order_form .btn{margin:0 !important}
form.order_form .form-control{width:auto;min-width:150px}
form.order_form .order_show .form-control,form.order_form .order_show select{min-width:96px}

/* rows of action buttons */
.card-body > .generate_barcode,.card-body > .assign_orders,
.card-body > .order_actions,.card-body > .float-left.mt-2{
	float:none !important;margin:0 !important;
	display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.card-body > .generate_barcode .btn,.card-body > .assign_orders .btn,
.card-body > .order_actions .btn,.card-body > .float-left.mt-2 .btn{margin:0 !important}

/* table hosts. .table-responsive becomes the scroll box; .hm-tablehost
   is the DataTables-managed variant, which builds its own. */
.table-responsive{overflow-x:auto;overflow-y:visible}
.hm-tablehost{overflow:visible}
.hm-tablehost.hm-scroll{overflow-x:auto;overflow-y:visible}

/* the theme's heavy grid lines */
.table-bordered,.table-bordered thead th,.table-bordered tbody td,
.table-bordered tbody th,.table-bordered tfoot th{border:0}
.table-bordered thead th{border-bottom:1px solid var(--hm-line)}
.table-bordered tbody td{border-bottom:1px solid var(--hm-line-soft)}

/* per-column search sits under the label instead of replacing it */
table.table thead th.hm-hascolfilter,
table.dataTable thead th.hm-hascolfilter{
	height:auto;padding:8px 12px 9px;vertical-align:top;
}
table.table thead th input.hm-colfilter,
table.dataTable thead th input.hm-colfilter{
	display:block;width:100%;min-width:92px;max-width:none;height:26px;
	margin:6px 0 0;padding:0 7px;
	border:1px solid var(--hm-line);border-radius:5px;background:var(--hm-surface-2);
	font-family:var(--hm-body);font-size:11.5px;font-weight:400;
	letter-spacing:0;text-transform:none;color:var(--hm-ink);
}
table.table thead th.address input.hm-colfilter,
table.dataTable thead th.address input.hm-colfilter{width:100%;max-width:none}
table.dataTable thead th input.hm-colfilter:focus{
	outline:none;border-color:var(--hm-accent);background:var(--hm-surface);
	box-shadow:0 0 0 2px var(--hm-accent-tint);
}
/* keep the sort arrows level with the label, not the whole cell */
table.dataTable thead th.hm-hascolfilter:before,
table.dataTable thead th.hm-hascolfilter:after{top:16px;transform:none}

/* The purchase order builder's size grid.

   A ring is fifteen sizes, each with a quantity box and a price box, so the
   grid is reliably wider than the card on a laptop. It scrolls inside its own
   host rather than pushing the card -- table.table is width:100% everywhere
   else, which would squeeze fixed-width inputs instead of letting the row
   extend, so it sizes to content here with 100% as the floor. */
.pocard .pogrid{ -webkit-overflow-scrolling:touch }
.pocard .pogrid table.table{width:auto;min-width:100%}
.pocard .pogrid table.table th,
.pocard .pogrid table.table td{white-space:nowrap}

/* The row labels stay put while the sizes scroll under them -- with fifteen
   columns it is otherwise easy to lose track of whether a box is a quantity or
   a price. Opaque, because the cells slide beneath it. */
.pocard .pogrid table.table thead th:first-child,
.pocard .pogrid table.table tbody td:first-child{
	position:sticky;left:0;z-index:2;
	background:var(--hm-surface);
	box-shadow:1px 0 0 var(--hm-line-soft);
}
.pocard .pogrid table.table thead th:first-child{background:var(--hm-surface-2, #F7F7F9)}

/* bootstrap-select ships a stylesheet that this project never loads -- only
   fragments of it were folded into theme.min.css. One of the rules that did not
   make it is the one that shrinks the ORIGINAL <select> after the plugin wraps
   it. The plugin leaves that select in the DOM as a child of .bootstrap-select
   and expects its own CSS to reduce it to a 0.5px sliver (kept non-zero so HTML5
   validation bubbles still have somewhere to point).

   Without it the select keeps whatever width it was given and sits over the top
   of its own toggle and anything beside it, invisible at opacity 0 but still
   taking the clicks -- so pressing an adjacent button opened the native option
   list instead. Restoring the rule here fixes every selectpicker on the site. */
.bootstrap-select > select,
.bootstrap-select > select.bs-select-hidden{
	position:absolute !important;bottom:0;left:50%;
	display:block !important;
	width:0.5px !important;height:100% !important;min-width:0 !important;max-width:0.5px !important;
	padding:0 !important;margin:0 !important;border:0 !important;
	opacity:0 !important;z-index:0 !important;
}

/* bootstrap-select, used for the "Show" dropdown on most listings */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .btn.dropdown-toggle{
	height:32px;padding:0 26px 0 10px;
	border:1px solid var(--hm-line) !important;border-radius:6px;
	background:var(--hm-surface) !important;color:var(--hm-ink) !important;
	font-family:var(--hm-body);font-size:13px;font-weight:400;box-shadow:none !important;
	display:flex;align-items:center;
}
.bootstrap-select > .dropdown-toggle:hover{background:var(--hm-surface-2) !important}
.bootstrap-select .dropdown-menu{
	border:1px solid var(--hm-line);border-radius:8px;padding:6px;
	box-shadow:0 12px 28px rgba(20,19,26,.16);
}
.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu .dropdown-item{
	border-radius:5px;padding:6px 8px;font-size:13px;
	color:var(--hm-ink);
}
/* theme.min.css paints .dropdown-item.active and :active white on #5969ff.
   Replacing only the background leaves white text on a pale grey row, which is
   how the highlighted option went invisible -- the same trap the DataTables
   tr.selected rule has. Every state that changes the background has to restate
   the colour with it. */
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus,
.bootstrap-select .dropdown-menu li.selected a:hover,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus{
	background:var(--hm-line-soft) !important;
	color:var(--hm-ink) !important;
	text-decoration:none;
}
/* The keyboard-highlighted row needs to read as distinct from the merely
   selected one, so it takes the accent tint rather than a second grey. */
.bootstrap-select .dropdown-menu li a.hover,
.bootstrap-select .dropdown-menu .dropdown-item.hover{
	background:var(--hm-accent-tint) !important;color:var(--hm-ink) !important;
}
/* The empty first option is a placeholder, not a product. It stays selectable
   -- it is how you clear the picker -- but reads as the instruction it is. */
.bootstrap-select .dropdown-menu li a .text,
.bootstrap-select .dropdown-menu .dropdown-item .text{color:inherit}
.bootstrap-select .dropdown-toggle .filter-option-inner-inner{color:var(--hm-ink)}
.bootstrap-select .dropdown-toggle.bs-placeholder .filter-option-inner-inner,
.bootstrap-select .dropdown-toggle.bs-placeholder:hover .filter-option-inner-inner{
	color:var(--hm-ink-400);
}

/* Live search, used where the list is too long to scroll -- the product picker
   on Purchase Orders. theme.min.css sizes the box but paints none of it, so
   without this the input arrives as a bare browser default in the middle of a
   styled menu. */
.bootstrap-select .bs-searchbox{padding:2px 2px 6px}
.bootstrap-select .bs-searchbox input.form-control{
	/* width is restated because the input otherwise falls back to the browser's
	   default 20-character size -- 179px inside a 568px menu, which clipped the
	   placeholder. */
	display:block;width:100%;box-sizing:border-box;
	height:32px;padding:0 10px;
	border:1px solid var(--hm-line);border-radius:6px;
	background:var(--hm-surface);color:var(--hm-ink);
	font-family:var(--hm-body);font-size:13px;box-shadow:none;
}
.bootstrap-select .bs-searchbox input.form-control::placeholder{color:var(--hm-ink-400);opacity:1}
.bootstrap-select .bs-searchbox input.form-control:focus{
	border-color:var(--hm-accent);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--hm-accent) 18%, transparent);
	outline:none;
}
/* The subtext carries the client SKU, which is a code -- so it gets the mono
   face and steps back from the name it sits beside. */
.bootstrap-select .dropdown-menu li a .text-muted{
	font-family:var(--hm-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size:11px;color:var(--hm-ink-400) !important;
}
.bootstrap-select .no-results{
	padding:8px;margin:0;font-size:12px;color:var(--hm-ink-400);background:transparent;
}

/* the second heading idiom: a bare .float-left.w-100 opening a card */
.card-body > .float-left,
.card-body > .row > .col-12 > .float-left{float:none !important}
.card-body > .float-left.w-100.mb-3:first-child{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 112,"wght" 650;
	font-size:12px;letter-spacing:.06em;text-transform:uppercase;
	color:var(--hm-ink);margin-bottom:14px !important;
}

/* grid-based filter rows put .mt-5 on the submit button to clear the
   label above it; 3rem is far too much against the new label size */
.card-body form .btn.mt-5,
.card-body .btn.mt-5{margin-top:19px !important}

/* the chart legend swatches on the sales overview */
.color-box{border-radius:3px}

/* stat-tile sparklines, drawn from real series (see common/spark.blade.php) */
.hm-spark{display:block;color:var(--hm-accent);overflow:visible}
.topseller_graph{display:flex;align-items:flex-end;min-height:28px}

/* The theme's own accent is a blue-violet (#5969ff) that shows through
   on outline buttons, badges and every Chartist series. Retune the
   families that are actually visible rather than editing theme.min.css. */
.btn-outline-primary{
	color:var(--hm-accent);border-color:var(--hm-accent);background:transparent;
}
.btn-outline-primary:hover,.btn-outline-primary:focus,
.btn-outline-primary.active,.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active{
	background:var(--hm-accent);border-color:var(--hm-accent);color:#fff;box-shadow:none;
}
.text-primary{color:var(--hm-accent) !important}
.bg-primary,.badge-primary{background-color:var(--hm-accent) !important}
.border-primary{border-color:var(--hm-accent) !important}

/* Chartist series, in the brand's categorical order. The sales report
   deliberately strokes its bars grey through a more specific rule, so
   these are left without !important and that page keeps its own look. */
.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point{stroke:var(--hm-accent)}
.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point{stroke:#C08A2E}
.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point{stroke:#0E6A55}
.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point{stroke:#7A5AC4}
.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point{stroke:#9EC4E4}
.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point{stroke:#6E7787}
.ct-series-a .ct-area,.ct-series-a .ct-slice-pie,.ct-series-a .ct-slice-donut-solid{fill:var(--hm-accent)}
.ct-series-b .ct-area,.ct-series-b .ct-slice-pie,.ct-series-b .ct-slice-donut-solid{fill:#C08A2E}
.ct-series-c .ct-area,.ct-series-c .ct-slice-pie,.ct-series-c .ct-slice-donut-solid{fill:#0E6A55}
.ct-series-d .ct-area,.ct-series-d .ct-slice-pie,.ct-series-d .ct-slice-donut-solid{fill:#7A5AC4}
.ct-series-e .ct-area,.ct-series-e .ct-slice-pie,.ct-series-e .ct-slice-donut-solid{fill:#9EC4E4}
.ct-label{font-family:var(--hm-body);font-size:11px;fill:var(--hm-ink-400);color:var(--hm-ink-400)}
/* a pie label can land over its own slice however far it is offset, so give
   it a white halo rather than relying on it never overlapping */
.catebreakgraph .ct-label{
	fill:var(--hm-ink);font-size:12px;
	paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;
}
.ct-grid{stroke:var(--hm-line-soft)}

/* an empty result says what happened and what to do about it */
.hm-emptystate{
	display:flex;flex-direction:column;align-items:flex-start;gap:5px;
	padding:20px;margin-bottom:12px;
	/* table cells inherit a centred alignment on some of these pages */
	text-align:left;
	border:1px dashed var(--hm-line);border-radius:8px;background:var(--hm-surface-2);
}
.hm-emptystate strong{
	font-family:var(--hm-display);
	font-variation-settings:"wdth" 106,"wght" 650;
	font-size:14px;color:var(--hm-ink);
}
.hm-emptystate span{font-size:13px;line-height:1.5;color:var(--hm-ink-600);max-width:70ch}
.hm-emptystate em{font-style:normal;font-weight:600;color:var(--hm-ink)}
/* the same block sitting in a table cell, where the row supplies the frame */
table td > .hm-emptystate{margin:0;border:0;background:transparent;padding:22px 4px}
table tbody tr:hover td > .hm-emptystate{background:transparent}

/* ------------------------------------------------------------
   expandable rows — a listing row that opens onto its detail

   Used by Purchase History, where one purchase order is a row and
   its lines are the panel underneath, and by Purchase Orders, where
   the same panel is editable -- a live order's quantities and the
   vendor prices the proforma brings back. The child row is a real
   <tr> in the same table so the columns above it stay aligned;
   everything inside it is laid out on its own.
   ------------------------------------------------------------ */
.hm-expand{
	width:22px;height:22px;padding:0;line-height:1;
	border:1px solid var(--hm-line);border-radius:6px;
	background:var(--hm-surface);color:var(--hm-ink-600);
	font-family:var(--hm-mono);font-size:13px;
	cursor:pointer;transition:background .12s ease,border-color .12s ease;
}
.hm-expand:hover{background:var(--hm-accent-tint);border-color:var(--hm-accent-300);color:var(--hm-accent-700)}
.hm-expand:focus-visible{outline:2px solid var(--hm-accent);outline-offset:1px}

/* Painted on the cell and matched at the striping rule's own depth. The
   zebra reset in this file is
       table.table.table-striped tbody tr:nth-of-type(odd) td   (0,3,4)
   so a bare .hm-childrow > td (0,1,1) loses on every other row and the
   panel comes out white half the time. This is the same trap that left
   selected rows unhighlighted -- match the depth, do not reach for
   !important. */
table.table.table-striped tbody tr.hm-childrow > td,
.hm-childrow > td{
	background:var(--hm-surface-2);
	border-top:0;padding:0 14px 14px;
}
.hm-childpanel{
	border:1px solid var(--hm-line);border-radius:10px;
	background:var(--hm-surface);padding:12px 14px;
}
.hm-childhead{
	font-size:12px;color:var(--hm-ink-400);
	padding-bottom:10px;margin-bottom:10px;
	border-bottom:1px solid var(--hm-line-soft);
}
.hm-subtable{width:100%;border-collapse:collapse;font-size:13px}
.hm-subtable th{
	text-align:left;padding:6px 10px;white-space:nowrap;
	font-size:11px;letter-spacing:.04em;text-transform:uppercase;
	color:var(--hm-ink-400);border-bottom:1px solid var(--hm-line);
}
.hm-subtable td{padding:6px 10px;border-bottom:1px solid var(--hm-line-soft)}
.hm-subtable tbody tr:last-child td{border-bottom:0}
.hm-subtable tbody tr:hover td{background:var(--hm-surface-2)}
/* A panel that totals its own rows — the vendor's Purchase History. The last
   body row drops its rule just above, so without one here the total would
   float loose under the column it is totalling. Unclassed, so the global
   .hm-exportonly{display:none} that hides a listing's trailing header row
   leaves it alone: this tfoot is real content and belongs in the export. */
.hm-subtable tfoot td{
	padding:8px 10px;border-top:1px solid var(--hm-line);
	background:var(--hm-surface-2);
}

/* A panel whose rows are products, each opening to the lots beneath it -- the
   vendor's Purchase History. Every product is its own <tbody> (one for the
   summary row, one hidden for its lots), so the "last row drops its rule"
   convenience above would strip the rule from every summary row; restated.
   The lot rows sit on the panel's second surface so they read as belonging
   to the dark summary row that opened them, and the toggle column is kept
   narrow so the SKU stays in the first real column. */
.hm-skutable .hm-skutoggle{width:30px;padding-right:0}
.hm-skutable tbody tr:last-child td{border-bottom:1px solid var(--hm-line-soft)}
.hm-skutable tbody.hm-skulots > tr > td{background:var(--hm-surface-2)}
.hm-skutable tbody.hm-skulots > tr:hover > td{background:var(--hm-line-soft)}
/* The subtable's own hover (0,2,3) outscores .hm-rowopen > td (0,1,1), which
   would put white text on a pale row the moment the pointer crossed it --
   the same trap the main table restates at its striping depth. */
.hm-subtable tbody tr.hm-rowopen:hover > td{background:var(--hm-ink-800)}
/* Accent-on-near-black is unreadable; the count goes white with the rest of
   the open row. */
.hm-rowopen .hm-qty--done{color:#fff}

/* The opening-stock entry. It is not a purchase order and should not read as
   one, so it carries the reserved status colour rather than the accent.
   Restated at the striping rule's depth for the reason above. */
table.table.table-striped tbody tr.hm-openrow > td,
table.table tbody tr.hm-openrow:hover > td,
.hm-openrow > td{background:var(--hm-brass-tint)}

/* An expanded row, while it is expanded. The panel underneath is a near-white
   card, so the row that owns it goes dark and reads as its header -- which is
   what tells you, several orders down a long list, whose lines you are looking
   at.

   Restated at the striping rule's depth for the reason above, and placed AFTER
   .hm-openrow deliberately: the opening-stock row is expandable too, and at
   equal specificity source order decides. Being open is the more useful thing
   to say while it lasts, and the brass returns the moment it closes.

   Cell backgrounds are opaque and the pinned columns carry no background of
   their own, so painting every > td is also what keeps hm-pin1/2 dark when the
   table is scrolled sideways. */
table.table.table-striped tbody tr.hm-rowopen > td,
table.table tbody tr.hm-rowopen:hover > td,
.hm-rowopen > td{background:var(--hm-ink-800);color:#fff}
/* The toggle would otherwise sit as a white square on a near-black row. The
   flags keep their own fills: a light chip on a dark ground reads deliberate. */
.hm-rowopen .hm-expand{
	background:transparent;border-color:rgba(255,255,255,.35);color:#fff;
}
.hm-rowopen .hm-expand:hover{
	background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);color:#fff;
}

/* An editable panel — Purchase Orders' line grid.

   The stock .form-control is 32px, built for a toolbar; dropped into a 13px
   subtable it makes every row taller than the text in it and the panel reads
   as a form rather than as a table with a few boxes in it. Sized down here
   rather than inline on each input, so the two columns that carry one stay in
   step with each other. */
.hm-subtable .form-control{
	height:26px;padding:0 8px;font-size:12px;
}
.hm-subtable .poeditqty{width:78px}
.hm-subtable .poeditprice{width:96px}

/* A cancelled line. It stays on the panel because the order it belongs to
   still says it — hiding it invites it being added back by hand — but it is
   not something that can be acted on, so it recedes. */
.hm-subtable tbody tr.hm-linegone td{color:var(--hm-ink-300)}

/* The panel's own footer: the note and the Save button, under the grid
   because they act on what has just been typed into the rows. */
.hm-poedit{
	display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
	margin-top:12px;padding-top:12px;
	border-top:1px solid var(--hm-line-soft);
}
.hm-poedit .poeditnote{font-size:12px;color:var(--hm-ink-400);padding-bottom:7px}

/* ------------------------------------------------------------
   overstock alarm — the shipment preview's one loud element

   Deliberately not an .hm-flag like the problem lists around it:
   this is the finding that is expensive to miss, and it has to
   look different from the row-level notes it sits above.
   ------------------------------------------------------------ */
.hm-overstock{
	border:1px solid var(--hm-brass);border-left-width:4px;border-radius:10px;
	background:var(--hm-brass-tint);color:var(--hm-ink-800);
	padding:12px 16px;
}
.hm-overstock b{color:var(--hm-brass);letter-spacing:.02em}
.hm-overstock ul{margin:0 0 4px;padding-left:18px}
.hm-overstock li{margin-top:3px}
.hm-overstock__po{margin-top:10px;font-weight:600}
/* Two short headings inside the alarm: what came that was not due, and what is
   still owed. Small and uppercase so they separate the lists without competing
   with the alarm's own heading. */
.hm-overstock__head{
	margin-top:8px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
	color:var(--hm-ink-600);
}

/* ------------------------------------------------------------
   purchasing pages — ghost controls as badges

   .hm-btn-ghost is transparent on both background and border, which
   in an Options column leaves Sheet / Finalise / Cancel / Delete and
   the per-line Adjust, Remove and Lots reading as plain text in a
   table that is already all plain text — several of them side by
   side with nothing to say where one ends and the next begins.
   Given a chip they are findable at a glance and separate from each
   other. The same treatment carries the cross-links these five pages
   lean on more than the rest of the app does (Adjust stock,
   Adjustment history, Download sheet), which had the same problem in
   a toolbar rather than a cell.

   Scoped to the purchasing group rather than changed globally: on an
   order listing the ghost is a lone Clear link beside far fewer
   competing words, and does not need the weight.
   ------------------------------------------------------------ */
body.page-purchaseorders .btn.hm-btn-ghost,
body.page-shipments .btn.hm-btn-ghost,
body.page-factoryorders .btn.hm-btn-ghost,
body.page-purchasehistory .btn.hm-btn-ghost,
body.page-stockadjustments .btn.hm-btn-ghost,
body.page-viewerstransit .btn.hm-btn-ghost{
	height:24px;padding:0 11px;
	border:1px solid var(--hm-line);border-radius:999px;
	background:var(--hm-line-soft);
	font-size:11.5px;font-weight:600;letter-spacing:.02em;
	color:var(--hm-ink-600);
}
body.page-purchaseorders .btn.hm-btn-ghost:hover,
body.page-shipments .btn.hm-btn-ghost:hover,
body.page-factoryorders .btn.hm-btn-ghost:hover,
body.page-purchasehistory .btn.hm-btn-ghost:hover,
body.page-stockadjustments .btn.hm-btn-ghost:hover,
body.page-viewerstransit .btn.hm-btn-ghost:hover{
	background:var(--hm-accent-tint);border-color:var(--hm-accent-300);
	color:var(--hm-accent-700);
}
/* A chip that toggles something (Suggest from stock opens the Difference
   row) holds the hover tint while it is on, so the row's state is readable
   from the button. Bootstrap's .btn.active would otherwise paint it grey. */
body.page-purchaseorders .btn.hm-btn-ghost.active,
body.page-purchaseorders .btn.hm-btn-ghost.active:focus{
	background:var(--hm-accent-tint);border-color:var(--hm-accent-300);
	color:var(--hm-accent-700);box-shadow:none;
}

/* misc legacy helpers used across the listings */
.tableoptions{padding-top:14px}
.slrow{width:52px}
.dataTables_wrapper .row{margin:0}

/* ------------------------------------------------------------
   motion + responsive
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.001ms !important;animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
	}
}

@media (max-width:1200px){
	.hm-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:991px){
	.nav-left-sidebar,.nav-left-sidebar.sidebar-light{
		position:relative;width:100%;height:auto;top:0;z-index:1;
	}
	.nav-left-sidebar .navbar{display:flex;flex-wrap:wrap;align-items:center}
	.dashboard-wrapper{margin-left:0}
	.dashboard-header .navbar,.dashboard-header .navbar.fixed-top{left:0}
	.dashboard-content{padding:calc(var(--hm-top-h) + 16px) 16px 40px}
	.hm-auth{grid-template-columns:1fr}
	.hm-auth__plate{display:none}
	#editorder .modal-body{grid-template-columns:1fr}
	.hm-formnav{
		flex-direction:row;overflow-x:auto;
		border-right:none;border-bottom:1px solid var(--hm-line-soft);
	}
	.hm-formnav .n{display:none}
	.hm-fgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
	.hm-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hm-selbar{left:12px;right:12px;transform:translateY(calc(100% + 30px));flex-wrap:wrap}
	.hm-selbar.is-up{transform:translateY(0)}
}