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-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;

  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;
}

/* 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;
}
.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;
}