html {
  /* default font-size is 16px - this is set in the default browser stylesheet */ 
  font-size: 13px;  
  line-height: 1.1; 
} 

body { 

  --dms-mainThemeColour: #525252;
  --dms-mainTextColour: #FFFFFF;
  --dms-highlight: #5B788F;
  --dms-highlight-rgb: 91, 120, 143;   /* same colour, tintable: rgba(var(--dms-highlight-rgb), .12) */
  --dms-headerBackgroundColour: #a3a3a3;	
  --dms-headerTextColour: #FFFFFF;
  --dms-defaultFont: 'Roboto', sans-serif;
  --dms-defaultFontSize: 14px;
  --dms-radius-card: 4px;

  /* Presentation tone palette + per-kind chip colours — assembled in
   * style.php from $DEFAULTS_TONE, walked over the presentation defaults
   * stored on directory_type_attrib, and overlaid by tenant/package
   * keys in \System\Settings.params. See Step 7 of upgrade_6.0.56.3. */
  --dms-tone-userportal-dot: #1e6fc7;
  --dms-tone-userportal-bg: #e6f0fb;
  --dms-tone-processing-dot: #c98a14;
  --dms-tone-processing-bg: #fdf3e0;
  --dms-tone-fulfilment-dot: #5a6072;
  --dms-tone-fulfilment-bg: #f1f2f4;
  --dms-tone-shipping-dot: #258a3c;
  --dms-tone-shipping-bg: #eaf5ee;
  --dms-tone-return-dot: #7a4cb1;
  --dms-tone-return-bg: #f1ebfa;
  --dms-tone-success-dot: #258a3c;
  --dms-tone-success-bg: #eaf5ee;
  --dms-tone-failure-dot: #d63030;
  --dms-tone-failure-bg: #fde5e5;
  --dms-tone-complete-dot: #3b4356;
  --dms-tone-complete-bg: #e9ebef;
  --dms-tone-ordered-dot: #1e6fc7;
  --dms-tone-ordered-bg: #e6f0fb;
  --dms-tone-in_stock-dot: #5a6072;
  --dms-tone-in_stock-bg: #f1f2f4;
  --dms-tone-in_transit-dot: #c98a14;
  --dms-tone-in_transit-bg: #fdf3e0;
  --dms-tone-in_use-dot: #258a3c;
  --dms-tone-in_use-bg: #eaf5ee;
  --dms-tone-retired-dot: #3b4356;
  --dms-tone-retired-bg: #e9ebef;
  --dms-tone-warning-dot: #ffc107;
  --dms-tone-warning-bg: #fff4d6;
  --dms-tone-unknown-dot: #8a8f9c;
  --dms-tone-unknown-bg: #f6f7f9;
  --dms-tone-userportal-dot-rgb: 30, 111, 199;
  --dms-tone-processing-dot-rgb: 201, 138, 20;
  --dms-tone-fulfilment-dot-rgb: 90, 96, 114;
  --dms-tone-shipping-dot-rgb: 37, 138, 60;
  --dms-tone-return-dot-rgb: 122, 76, 177;
  --dms-tone-success-dot-rgb: 37, 138, 60;
  --dms-tone-failure-dot-rgb: 214, 48, 48;
  --dms-tone-complete-dot-rgb: 59, 67, 86;
  --dms-tone-ordered-dot-rgb: 30, 111, 199;
  --dms-tone-in_stock-dot-rgb: 90, 96, 114;
  --dms-tone-in_transit-dot-rgb: 201, 138, 20;
  --dms-tone-in_use-dot-rgb: 37, 138, 60;
  --dms-tone-retired-dot-rgb: 59, 67, 86;
  --dms-tone-warning-dot-rgb: 255, 193, 7;
  --dms-tone-unknown-dot-rgb: 138, 143, 156;

  font-family: var(--dms-defaultFont);
	font-size: var(--dms-defaultFontSize);
  -webkit-font-smoothing: antialiased;
	overflow-y: hidden;  
}
#hdr {
  background-color: #FFFFFF;
  color: #525252;
	
	/* test */
	height: auto;
	display: inline-block;
}

#ftr {
  background-color: #525252;
  color: #FFFFFF;
}
#ftrMenu input, #ftrMenu select, #hwlist, #applist  {
  color: #525252;
}
#hdr_projectname { 
  font-size: 18px; 
}
#hdr_companyname {  
  font-size: 11px; 
}
#userlanguage {
  color: #525252;
}
#hdr_menu {
	color: #FFFFFF;
  background-color: #a3a3a3;	
}
.dashboardhdritem {
	font-weight: 300;
	font-size: 10px;
}
#colour_ref {
  color: #FFFFFF;	
  background-color: #525252;
}

.fa-chevron-right, .fa-chevron-down, .toolbar-button {
  color: #525252;
}
.toolbar-button {
	color: #FFFFFF;
	padding: 0;
	border: none;
	background: none;	
	background-color: transparent;
}

.placeholder { 
  /* non - html5, jquery.placeholder.js  */
  color: #aaa;
}
.button-disabled {
  color: #aaa;
}
input[type="button"]:disabled {
  opacity: 0.65; 
}

/* bootstrap */

.dropdown-menu{
  --bs-dropdown-link-hover-bg: rgb(from var(--dms-highlight) r g b / .2) !important;
}

.btn-group-xs > .btn, .btn-xs {
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

.dropdown-menu {
	box-shadow: 0 6px 12px rgba(0,0,0,.175)
}

.dropdown-item:active {
	background-color: #5B788F;
}

.modal-content {
	border-color: #525252 !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/*
.btn svg path:not(.btn-outline-secondary svg line)  {
	fill: #525252 ;
}
.btn svg line:not(.btn-outline-secondary svg line) {
	stroke: #525252 ;
}
*/
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {  
	background-color: #5B788F;
  border-color: #0A0A0A;
	outline-color: #0A0A0A;
	box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.25);
	transition: all 200ms ease-in-out;
}
.btn-primary:hover {
	color: #FFFFFF;
	background-color: #7aabd1;
}
.btn-primary:active:focus {
	box-shadow:0 0 0 0.35rem  rgba(100, 100, 100, 0.25);
}
.btn-primary, .btn-primary:disabled {
  background-color: #5B788F;	
  border-color: #0A0A0A;
  
  --bs-btn-active-border-color: hsl(from #7aabd1 h s calc(l - 20));
  --bs-btn-active-bg: hsl(from #7aabd1  h s calc(l - 10));  
}
.btn-default:hover {
	background-color: #F4F4F4;
}
.btn-default:focus {
	box-shadow: 0 0 0 0.25rem rgba(100, 100, 100, 0.25);
}

.btn-close:focus {
	box-shadow: 0 0 0 0.25rem rgba(100, 100, 100, 0.25);
}

.toast-container {
  color: #525252;
}
.toast-header {
  background-color: #525252;
  color: #FFFFFF;
}
.btn-close-toast {
  /* filter: invert(0.5) hue-rotate(175deg) sepia(1) saturate(5) */
  
  filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(23%) hue-rotate(185deg) brightness(105%) contrast(106%);
}
.modus-header {
  background-color: #525252;
  color: #FFFFFF;
}

/* Global spinner — referenced by JS via the strSpinner variable in
 * index.php so every caller renders the same indicator. Sized in em so
 * a parent can grow it just by setting font-size; coloured via
 * currentColor so callers can theme it via the parent's `color` (e.g.
 * pageHome's page-loader sets navy via the home palette). */
.dms-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  border: 0.125em solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: dms-spinner-spin 700ms linear infinite;
}
@keyframes dms-spinner-spin {
  to { transform: rotate(360deg); }
}

.form-check-input:checked {
	background-color: #5B788F;
	border-color: #5B788F;
}
.form-control:focus, .form-select:focus, .form-check-input:checked:focus {
  border-color: #0A0A0A;
  box-shadow: 0 0 0 0.3rem rgba(100, 100, 100, 0.25);  /* rgba(40, 167, 69, 0.25); */
}
.form-check-input:focus {
  border-color: #0A0A0A;
	box-shadow: 0 0 0 0.25rem rgba(100, 100, 100, 0.25); /* rgba(40, 167, 69, 0.25); */
}
.form-switch .form-check-input:focus:not(:checked)  {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.hdr_toolbarbtn, .hdr_toolbarbtn svg path {
	fill: #525252 ;
	color: #525252;
}
.hdr_toolbarbtn:hover, .hdr_toolbarbtn:focus, .hdr_toolbarbtn:active, .hdr_toolbarbtn.active, dropdown-toggle#hdr_userbtn-primary {  
  color: #FFFFFF;
	background-color: #5B788F!important;
  border-color: #0A0A0A;
	box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.25);
	transition: all 200ms ease-in-out;	
  --bs-bg-opacity: 0;
}
.hdr_toolbarbtn:active:focus {
	box-shadow:0 0 0 0.35rem  rgba(100, 100, 100, 0.25);
}

#ftrMenu .hdr_toolbarbtn, #ftrMenu .hdr_toolbarbtn svg path, #ftrMenu .hdr_toolbarbtn:hover  {
  color: #FFFFFF;
}

/* Global loading-overlay — created and toggled by the showLoading() /
   hideLoading() helpers in index.php. Two-element structure:
     - #dms-loading-overlay is the full-viewport backdrop. backdrop-filter
       gives the page underneath a slight blur so the modal-context feels
       paused; pointer-events: none so the spinner doesn't intercept
       clicks if a caller forgets to hide it.
     - .dms-loading-pill is the centred themed pill inside it. */
#dms-loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  pointer-events: none;
  /* Default (hidden) state — element stays in DOM at opacity 0 so the
     transition has something to interpolate between. showLoading() adds
     .dms-loading-overlay--visible; hideLoading() removes it; both fade. */
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: opacity 0.18s ease, backdrop-filter 0.18s ease, -webkit-backdrop-filter 0.18s ease;
}
#dms-loading-overlay.dms-loading-overlay--visible {
  opacity: 1;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.dms-loading-pill {
  background-color: #525252;
  color: #FFFFFF;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 0.6em;
  white-space: nowrap;
}
.dms-loading-pill i.fa-spinner {
  /* The strLoading var ships with a FontAwesome spinner; nudge it
     slightly bigger so it reads at this overlay's scale. */
  font-size: 1.1em;
}

/* Date-change notice — what a save will DO when that is not simply "save": the
   change goes to a supplier for confirmation, or it resubmits the order, or it
   is refused outright.

   ONE definition for BOTH surfaces (the DeploymentDate action's submenu and the
   Object View event-date dialog), and global for the same reason
   .admindate_container below is: these two hosts are reached by different entry
   paths, and a rule living in either one of their stylesheets would leave the
   other unstyled.

   ONE keying for every case, refusals included. None of these is an error the
   admin has made — they all answer "what happens if I press this", so keying
   them by severity would read as a scolding for asking. Errors (a submit the
   server refused) keep the ordinary red alert.

   Full-bleed: it sits directly under the dialog's title bar, edge to edge, so
   the host cancels its own container padding with a negative margin rather than
   this having a border radius of its own.
   THEMED, not Bootstrap-blue. Keyed to $itemHighlight — the accent that already
   paints the primary button (style.php: $buttonColour = $itemHighlight), so a
   notice and the button that acts on it read as one thing in any tenant theme.
   The tint and the rule use --dms-highlight-rgb rather than a second hard-coded
   hex, so they cannot drift from it.

   .dms-datenotice is the ORIGINAL name, kept as an alias: it is a documented
   class that off-repo pages and custom actions may already carry, and dropping
   it would silently unstyle them. New markup should use .dms-notice. */
.dms-notice,
.dms-datenotice {
	--dms-notice-bg:   rgba(var(--dms-highlight-rgb, 76, 175, 80), .12);
	--dms-notice-line: rgba(var(--dms-highlight-rgb, 76, 175, 80), .30);
	--dms-notice-icon: var(--dms-highlight, #4CAF50);

	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	line-height: 1.45;
	background: var(--dms-notice-bg);
	color: var(--bs-body-color, #212529);
	border-bottom: 1px solid var(--dms-notice-line);
}
.dms-notice > i,
.dms-datenotice > i {
	flex: 0 0 auto;
	margin-top: 0.1rem;
	font-size: 1rem;
	color: var(--dms-notice-icon);
}

/* TONE MODIFIER — for a state that genuinely needs attention, as opposed to the
   default "here is what pressing this will do".

   The distinction is load bearing and worth keeping: the plain notice is keyed
   to the accent precisely BECAUSE none of its cases is the admin's fault, so
   colouring them by severity would read as a scolding. A carrier rejecting an
   address is a different thing — something IS wrong and the admin has to act —
   and painting that in the success accent would be worse than the reverse.

   Keyed to the `hold` tone, which is what the AVS block already used for its
   heading, so the notice and that heading cannot drift apart. The tone palette
   ships paired -dot/-bg values (style.php $DEFAULTS_TONE) and tenants override
   both through `tone_hold_dot` / `tone_hold_bg`, so no separate rgb triplet is
   needed here — the tint is a designed colour rather than an alpha of the dot. */
.dms-notice-warn {
	--dms-notice-bg:   var(--dms-tone-hold-bg, #fdf3e0);
	/* SAME .30 alpha as the default tone's rule. At full strength the dot colour
	   makes the rules shout next to the rest of the page, which is all neutral
	   --bs-border-color hairlines — the band should be quieter than its own
	   heading, not louder. */
	--dms-notice-line: rgba(var(--dms-tone-hold-dot-rgb, 201, 138, 20), .30);
	--dms-notice-icon: var(--dms-tone-hold-dot, #c98a14);
}
/* Grid submenu host. Full-bleed, like the Object View dialog's .ped-notice —
   the negative margins cancel .form-action's own `padding: 1em` (r50.css.php)
   so the band runs to the popup's edges instead of floating inside a white
   frame. .form-group, which wraps it, contributes no padding of its own, so 1em
   is the whole of the inset.

   The sides are pulled 1em PLUS the popup's border width. .form-action's 1em is
   the whole of the inset, so -1em alone lands on the INSIDE of the dropdown's
   own 1px border and leaves it showing as a hairline down each edge. The extra
   pixel paints over it, so the band reaches the popup's outer edge. Safe here
   because the notice sits between the header and the calendar, where the
   popup's sides are straight — its corner radius is nowhere near it.

   The TOP is pulled much less, leaving a deliberate gap: flush to the header it
   collides with the title and its close button rather than reading as a banner.

   The bottom margin is the gap before the calendar, and it belongs on the
   notice rather than on the calendar: the notice is display:none until there is
   something to say, so putting it here means the gap exists only when a message
   does. On the calendar it would open a hole above every ordinary date change. */
.admindate_notice {
	margin-top: -0.4em;
	margin-right: calc(-1em - var(--bs-dropdown-border-width, 1px));
	margin-bottom: 0.75rem;
	margin-left: calc(-1em - var(--bs-dropdown-border-width, 1px));
}

/* Admin date-picker (.admindate_container) — the calendar rendered by the
   DeploymentDate action's submenu. Moved here from pageAdmin/style.css.php so it
   loads on EVERY path: the action also runs from the objectview modal footer,
   including on an #objectview deep-link where the admin portal (and its
   stylesheet) was never loaded — otherwise the calendar renders unstyled. The
   base vanilla-calendar CSS is already global (index.php); these are the app
   overrides. --dms-* vars are defined above, so selected/hover colours resolve
   everywhere. */
.admindate_container {
	display: flex;
	justify-content: center;	
	flex-direction: column;
	align-items: center;
}
.admindate_pane {
	flex: 1;
	/* width:340px; */
	/* max-width:540px; */
	min-width:min-content;	
	padding: 0px;
	font-weight: 400;	
	border-radius:4px;	
	text-align: center;
	
}
.admindate_pane_hidden {
	width: 0px;
	flex: 0;
  transition: flex 0.3s;
	padding: 0px;	
}
.admindate_pane_show {
	flex: 1;
	/* width:340px; */
	/* max-width:540px;	*/
	/* padding: 8px; */
}

.admindate_container  .vanilla-calendar-days {
	column-gap: 0px;
	row-gap: 0px;
	/* Reserve six week-rows whatever the month needs.
	
	   A month spans five or six rows depending on which weekday it starts on, so
	   without this the day grid is 200px or 240px and the whole control changes
	   height as you page through it. In a centred dialog that difference is split
	   top and bottom, so the < > arrows move ~20px under the cursor and the next
	   click misses — you cannot page through a year without chasing the button.
	   The grid submenu is anchored at its top so it grows downward instead, but
	   the control still resizes, which the host then has to re-measure.
	
	   6 x the 40px day button below. align-content:start keeps those rows at
	   their natural height in a five-row month and puts the slack at the bottom,
	   rather than stretching each row to fill and making the same calendar look
	   different from one month to the next. Reserving the tallest case is what
	   every fixed-geometry date picker does. */
	min-height: 240px;
	align-content: start;
}
.admindate_container  .vanilla-calendar-day {
	padding-top: 0px;
}

.admindate_container .vanilla-calendar-day__btn {
	padding-top: 5px;
	width: 40px;
	height: 40px;
}
.admindate_container .vanilla-calendar-day__btn .slot {
	font-size: 10px;
	text-align: center;
	word-break: break-word;
	padding-top: 1px;
}
.admindate_pane {
	flex: 1;
	width:340px;
	max-width:540px;
	min-width:min-content;	
	padding:0px;	
	font-weight: 400;	
	border-radius:4px;	
	text-align: center;
	
}
.admindate_pane_hidden {
	width: 0px;
	flex: 0;
  transition: flex 0.3s;
	padding: 0px;	
}
.admindate_pane_show {
	flex: 1;
	width:340px;
	max-width:540px;	
	padding: 0px;
}

.admindate_container #date_slot_container {
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	overflow-y: auto;
	padding-top: 8px;
	/* justify-content: center; */
  align-items: center;
	max-width: 460px;
}
.admindate_container .date-slot {
	margin: 4px;
	padding: 4px;
	font-weight: 400;
	color: #000;
	border: 0;
	font-size: 16px;
	text-align: center;
	word-break: break-word;	
	border-radius:4px;	
	min-width: 64px;
}
.admindate_container .date-slot-subheading {
	font-size: 12px;
}
.admindate_container .date-slot.selected {
  color: var(--dms-headerTextColour) !important;
  background-color: var(--dms-highlight) !important;
}
.admindate_container .date-slot:hover:not(.selected, .disabled) {
  background-color: rgb(from var(--dms-highlight) r g b / .2) !important;
}

/* Notes action (#menuNotes) — same story as the calendar above: these rules live
   in the admin-only pageAdmin.css, so from the objectview modal footer the Notes
   submenu renders unstyled — most visibly the textarea, which without width:100%
   falls back to its cols="20" default (narrow) instead of filling the menu. Kept
   global so it matches the grid's right-click menu. */
#menuNotes .bdyNotes {
	overflow-y: auto;
	max-height: 300px;
	width: 300px;
}
#menuNotes .bdyNotes .bdyNoteItem .bdyNotesHeader {
    color: #7E8F9F;
    background-color: #F1F5FA;
    font-size: 9px;
}
#menuNotes #menuNotesText {
	resize: none; 
	width: 100%;
}


body {
  font-family: Arial, Helvetica, sans-serif
}

#hdr_topleft {
	height: 80px;
	padding-top: 0px;
}

#hdr_projectname { 
  padding-top: 16px;
}