/* fallback */
  .btn:focus, 
  .btn:active:focus, 
  .btn.active:focus, 
  .btn.focus, 
  .btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .btn:hover {
    box-shadow: none !important;
  }
/* ==================================================================
   THEME

   Every colour on the app's screens comes from these variables. The
   light set is the default; html[data-theme="dark"] (set by the header
   switch in global_exp1.js) swaps in the dark set. A new rule should
   use var(--...) rather than a hex value, or it will stay light in dark
   mode.

   Printed documents open in their own window without this attribute,
   so they always print light.
   ================================================================== */
:root {
	--app-bg: #fcfafa;
	--surface: #ffffff;           /* cards, sections, dialogs, menus */
	--surface-muted: #f6f9ff;     /* headers inside a surface */
	--surface-hover: #eef4ff;
	--text: #1f2937;
	--text-strong: #152033;
	--text-muted: #6b7280;
	--text-soft: #536475;         /* icons, secondary labels */
	--border: #dddddd;
	--border-strong: #cccccc;
	--border-soft: #d9e3f1;
	--input-bg: #f0f0f0;
	--input-text: #2c3e50;
	--accent: #1a73e8;
	--accent-text: #ffffff;
	--accent-soft: #e8f0fe;       /* selected / highlighted rows, tags */
	--navbar-bg: #3675ff;
	--navbar-control-bg: #ffffff;
	--navbar-control-text: #1f2937;
	--menu-bg: #383d41;
	--menu-hover: #3a3f44;
	--menu-scroll-track: #ffffff;
	--grid-head-bg: #2c3e50;
	--grid-head-text: #ecf0f1;
	--grid-head-border: #34495e;
	--grid-text: #333333;
	--grid-border: #dddddd;
	--grid-hover: #f1f1f1;
	--success: #28a745;
	--danger: #dc3545;
	--warning: #ffc107;
	--success-text: #155724;
	--danger-text: #721c24;
	--danger-soft: #fdecea;
	--warning-text: #856404;
	--warning-bg: #fff3cd;
	--warning-border: #ffeeba;
	--readonly-bg: #f0f0f0;
	--readonly-text: #6c757d;
	--tooltip-bg: #333333;
	--icon-primary: #2878eb;      /* grid action icons */
	--icon-success: #1a9f55;
	--icon-danger: #e02424;
	--icon-teal: #00897b;
	--icon-muted: #6c757d;
	--icon-dark: #343a40;
	--shadow: rgba(0, 0, 0, 0.1);
	--loader-overlay: rgba(255, 255, 255, 0.55);
	--loader-track: #e5e9f0;
}

html[data-theme="dark"] {
	color-scheme: dark;           /* native date pickers, scrollbars, option lists */
	--app-bg: #121519;
	--surface: #1b1f26;
	--surface-muted: #222731;
	--surface-hover: #2a303b;
	--text: #e3e6eb;
	--text-strong: #f3f4f6;
	--text-muted: #9aa3b1;
	--text-soft: #a9b2c0;
	--border: #323946;
	--border-strong: #3b4351;
	--border-soft: #323946;
	--input-bg: #252a33;
	--input-text: #e3e6eb;
	--accent: #4d8dff;
	--accent-text: #ffffff;
	--accent-soft: #1f2d48;
	--navbar-bg: #1d2a45;
	--navbar-control-bg: #252a33;
	--navbar-control-text: #e3e6eb;
	--menu-bg: #161a20;
	--menu-hover: #222831;
	--menu-scroll-track: #161a20;
	--grid-head-bg: #0f1216;
	--grid-head-text: #e3e6eb;
	--grid-head-border: #2a303a;
	--grid-text: #d6dae1;
	--grid-border: #2b313b;
	--grid-hover: #242a33;
	--success-text: #74d68c;
	--danger-text: #ff8f98;
	--danger-soft: #3a1f23;
	--warning-text: #ffd56b;
	--warning-bg: #3a3219;
	--warning-border: #5a4b1e;
	--readonly-bg: #1f232a;
	--readonly-text: #8c95a3;
	--tooltip-bg: #000000;
	--icon-primary: #5c9cff;
	--icon-success: #3cc97c;
	--icon-danger: #ff6b6b;
	--icon-teal: #2cc4ae;
	--icon-muted: #9aa3b1;
	--icon-dark: #d6dae1;
	--shadow: rgba(0, 0, 0, 0.45);
	--loader-overlay: rgba(10, 12, 16, 0.55);
	--loader-track: #323946;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }
    .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* -webkit-font-feature-settings: 'liga'; */
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
}
  /* Style validation error messages in red */
.error {
    color: red; /* Set error text color */
    font-size: 0.9em; /* Adjust font size if needed */
}

.col-sm-2{
	padding-right:0px;
} 

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 

/* .ui-datepicker-prev span::before {
    content: "<";
    font-size: 14px;
    color: black;
}
.ui-datepicker-next span::before {
    content: ">";
    font-size: 14px;
    color: black;
}
.ui-datepicker-prev span,
.ui-datepicker-next span {
    background: none !important;
}
 */
  
.row{
	height: 91vh;
}

.container2{
	margin:0px;
}
html, body {
    overflow: hidden;
    background-color: var(--app-bg);
}

body {
	color: var(--text);
}

.navbar{
	/* background: #383d41; */
	background: var(--navbar-bg);
	padding:3px;
	box-shadow: 0 4px 6px var(--shadow);
	/* margin-bottom:10px; */
}


#userName{
	color:white;
	background: var(--navbar-bg);
	border: none;
}

/* Line-item grids on add screens (indent, PO...): the section keeps a
   fixed height and the rows scroll inside it, header row pinned, so a
   long order never runs off the bottom of the page. Same layout as the
   sales order items table. Qualified with .sectionDiv so it outranks
   .sectionDiv's own 68vh, which is declared further down. */
.sectionDiv.items-section {
	height: 45vh;
}

.items-scroll {
	height: 82%;
	width: 100%;
	border: 1px solid var(--border);
	overflow: auto;
}

/* Header branch picker: the branch new documents are created in. */
#branchPickerWrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	vertical-align: middle;
}

#branchPickerWrap .material-icons {
	font-size: 18px;
}

#branchPicker {
	width: auto;
	min-width: 140px;
	max-width: 220px;
	height: 30px;
	margin: 0;
	padding: 2px 8px;
	border: 1px solid rgba(255,255,255,0.45);
	border-radius: 6px;
	background: var(--navbar-control-bg);
	color: var(--navbar-control-text);
	font-size: 13px;
	font-weight: 600;
}

#branchPicker:disabled {
	opacity: 1;
	background: var(--navbar-control-bg);
	opacity: 0.9;
}

.dropdown-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.profile-menu-icon {
	font-size: 18px;
	color: var(--text-soft);
}

/* -------------Menu--------------- */
.mainNav{
	padding-left: 5px !important;
	position: relative;
}

.nav-feature-search {
	width: min(420px, 38vw);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	z-index: 2;
}

.nav-feature-search .material-icons {
	position: absolute;
	left: 12px;
	color: var(--text-muted);
	font-size: 18px;
	z-index: 1;
}

.nav-feature-search input {
	width: 100%;
	height: 36px;
	padding: 8px 12px 8px 38px;
	border: 1px solid rgba(255,255,255,0.45);
	border-radius: 6px;
	background: var(--navbar-control-bg);
	color: var(--navbar-control-text);
	font-weight: 500;
	box-shadow: none;
}

.nav-feature-search input:focus {
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}

.ui-autocomplete {
	max-height: 280px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 3000 !important;
	border-radius: 6px;
	border: 1px solid var(--border-soft);
	box-shadow: 0 10px 25px var(--shadow);
	font-size: 13px;
}

.ui-autocomplete .ui-menu-item-wrapper {
	padding: 8px 12px;
}

.ui-autocomplete .ui-state-active {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: var(--accent-text) !important;
}

@media (max-width: 768px) {
	.nav-feature-search {
		width: 44vw;
	}
}

#menuContainer {
    background: var(--menu-bg);
    /* background-color: #f8f9fa; */
   /*  border-radius:10px; */
    height: 90vh; /* Set a fixed height */
    overflow-y:auto;
    box-shadow: 0 4px 6px var(--shadow);
}


#menuContainer td {
    padding: 10px 6px;
    font-size: .825rem;
	font-weight: 600;
   /*  color: #333; */
   color: white;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
    cursor: pointer;
    transition: background 0.3s;
}

.menuTable {
	margin: 0;
	border-spacing: 0;
}

.menu-parent-row .menu-toggle-cell {
	text-align: right;
}

.menu-toggle-icon {
	font-size: 18px;
	transition: transform 0.18s ease;
}

.menu-parent-row.menu-group-open .menu-toggle-icon {
	transform: rotate(90deg);
}

.submenu-row td {
	background: rgba(0, 0, 0, 0.08);
}

.submenu-row .submenuTd {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	font-size: .79rem !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.9) !important;
}

.submenu-row .submenuTd:nth-child(2) {
	padding-left: 18px !important;
}

.menu-parent-row.menu-group-open {
	background: rgba(255, 255, 255, 0.06);
}


#menuTd, #submenuTd{
	text-transform: capitalize;;
}

 #menuContainer tr:hover {
    background: var(--menu-hover);
     transition: background 0.2s;
} 

#menuContainer tr.active-menu-row {
	background: var(--accent);
}

#menuContainer tr.active-menu-row:hover {
	background: var(--accent);
}

#menuContainer tr.active-menu-row td {
	color: #fff;
	font-weight: 700;
}

#menuContainer tr.active-menu-row td:first-child {
	border-left: 4px solid #fff;
}

#menuContainer tr.active-parent-menu-row {
	background: rgba(255, 255, 255, 0.08);
}

#menuContainer tr.active-parent-menu-row td {
	color: #fff;
}
/* Custom scrollbar for Chrome, Safari & Edge */

#menuContainer::-webkit-scrollbar {
    width: 8px; /* Scrollbar width */
}

#menuContainer::-webkit-scrollbar-track {
    background: var(--menu-scroll-track); /* Track background */
    border-radius: 1px;
}

#menuContainer::-webkit-scrollbar-thumb {
    background: #888; /* Scrollbar thumb */
    border-radius: 1px;
    transition: background 0.3s;
}

#menuContainer::-webkit-scrollbar-thumb:hover {
    background: #16213e; /* Darker color on hover */
}

/* -------------Menu--------------- */

/* .ui-dialog-buttonpane .ui-widget-content .ui-helper-clearfix {
    padding: none;
    border-top: 1px solid #eee;
    text-align: right;
} */

/*------------- main Div -------------*/

.mainDiv{
 	padding :22px !important; 
 }

/* html and body never scroll (overflow: hidden above) and .row is a
   fixed 91vh, so a form taller than the window would push its items
   table out of reach. The main column scrolls instead; pages that fit
   show no scrollbar. */
.mainDiv {
	height: 100%;
	overflow-y: auto;
	/* Setting overflow-y alone turns overflow-x to auto as well, and the
	   grid row's negative margins would then show a sideways scrollbar.
	   Wide tables scroll inside their own .items-scroll box. */
	overflow-x: hidden;
}
 
 
 .mainTblHdr{
  	/* font-weight: bold; */           
  	font-size: 20px;
  	padding-top: 0px;
  	padding-bottom: 12px;
  	font-weight:400;
 }
 
 
 .masterdataCard{
padding-left: 3%;
 }
 
 .text-dark{
 	padding: 0px;
 }
 .form-group{
 	display: block; 
    margin-bottom: 1rem;
 	font-weight:400;
 	font-size: 14px;
 }

 select, input,textarea {
  width: 100%;
  padding: 8px 6px;
  font-size: .825rem;
  font-weight:600;
  color: var(--input-text);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  background-color: var(--input-bg);
}

select option {
  padding: 8px;
  font-size: 14px;
  border: 1px solid var(--border-strong);
}
 
 
 .sectionDivHead{
 	background-color: var(--surface);
 	padding:10px;
 	padding-bottom:20px;
 	padding-top:20px;
 	padding-left: 20px;
	/* margin-left:10px; */
 	box-shadow: 0 4px 8px var(--shadow);
 	width:99%;
 	/* height:88vh; */
 }
 
  .sectionDiv{
 	background-color: var(--surface);
 	padding:10px;
 	padding-bottom:20px;
 	padding-top:20px;
 	padding-left: 20px;
  padding-right: 15px;
	/* margin-left:10px; */
 	box-shadow: 0 4px 8px var(--shadow);
 	width:99%;
 	height:68vh;
 }
 
   .fullSectionDiv{
 	background-color: var(--surface);
 	padding:10px;
 	padding-bottom:20px;
 	padding-top:20px;
 	padding-left: 20px;
  padding-right: 20px;
	/* margin-left:10px; */
 	box-shadow: 0 4px 8px var(--shadow);
 	width:99%;
 	height:88vh;
 }
 
 
 
 
 
 
label {
	margin-bottom: none !important;
}
 
 /* CSS FOR BUTTONS */
.search{
 	width:100px !important; 
 	text-align:center;
 	color: var(--accent-text);
 	border: none;
 	background-color: var(--accent);
}


.searchButton{
 	width:100px !important; 
 	display: inline-flex;
 	align-items: center; 
 	gap: 6px;
 	color: #fff;
 	padding: 6px 12px;
 	cursor: pointer;
 	background-color: #03a106;
 	border-radius: 4px;
  border: none;       /* removes default border */
  outline: none; 
}

.searchButton:focus {
  outline: none;
  box-shadow: none;  
   transform: scale(0.98);
}

.search:active {
  transform: scale(0.98);
 /*  background-color: #1a2fe8;
  transition: transform 0.1s ease, background-color 0.1s ease; */
}

.actionButton{
 	width:80px !important; 
 	text-align:center;
 	color: #fff;
 	border: none;
 	font-size: .825rem;
 	background-color: #03a106;
}


.deleteBtn{
 	width:44px !important; 
 	text-align:center;
 	color: #fff;
 	border: none;
 	background-color: red;	
}





 .dataTbl {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* border: 1px solid #ccc; */
  box-shadow: 0 2px 8px var(--shadow);
  overflow-y:automatic;
  overflow-x:hidden;
 /*  margin-bottom: 1.5rem; */
 table-layout:fixed;
}

.dataTbl  th {
  background-color: var(--grid-head-bg);
  color: var(--grid-head-text);
  text-align: left;
 padding: 12px 15px; 
  font-size: .825rem;
  font-weight:600;
  border-bottom: 2px solid var(--grid-head-border);
  position: sticky;
	top: 0; 
	 z-index: 10;	
}

.dataTbl  td {
  padding: 5px 12px;
  border-bottom: 1px solid var(--grid-border);
  color: var(--grid-text);
  font-size: .750rem;
  font-weight:400;
}

/*  .dataTbl  tr:nth-child(even) {
  background-color: #f9f9f9;
}  */

/* Optional: Hover effect */
.dataTbl tr:hover {
  background-color: var(--grid-hover);
  cursor: pointer;
}

.tempalte{
	height:92%; 
	width:100%;
	border: 1px solid var(--border);
	overflow-y:auto;
}
 
 
 
/* TOOLTIP START */

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-wrapper .tooltip-text {
  visibility: hidden;
  background-color: var(--tooltip-bg);
  color: #fff;
  text-align: center;
  padding: 5px 8px;
  border-radius: 4px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
}

.tooltip-wrapper:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* TOOLTIP END */

/* Stat cards above a report grid (stock summary, reservations, ...):
   <div class="stock-stats"><div class="stock-stat [active]">
   <div class="stock-stat-label">..</div><div class="stock-stat-value">..</div>.
   A page whose cards filter the grid adds its own cursor:pointer rule. */
.stock-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.stock-stat {
	flex: 1 1 140px;
	padding: 10px 14px;
	border: 1px solid var(--border-soft);
	border-radius: 6px;
	background: var(--surface-muted);
}
.stock-stat.active {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.stock-stat-label {
	font-size: 12px;
	color: var(--text-muted);
}
.stock-stat-value {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-strong);
}

.nav-link{
	color: var(--text);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active.show,
.nav-tabs .nav-item.show .nav-link {
	color: #fff !important;
	background-color: var(--accent) !important;
	border-color: var(--accent) var(--accent) var(--surface) !important;
	font-weight: 700;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    outline: none;
    box-shadow: none;
}

.nav-tabs .nav-link {
    outline: none !important;
    box-shadow: none !important;
}

/* User profile popup */
.user-profile-dialog {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--border-soft) !important;
	box-shadow: 0 18px 45px var(--shadow);
}

.user-profile-dialog .ui-dialog-content {
	padding: 0 !important;
}

.user-profile-dialog-content {
	background: var(--surface);
	color: var(--text);
}

.profile-settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 22px;
	background: var(--surface-muted);
	border-bottom: 1px solid var(--border-soft);
}

.profile-settings-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.profile-settings-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #3675ff;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	letter-spacing: 0;
}

.profile-settings-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-strong);
	line-height: 1.2;
}

.profile-settings-subtitle {
	margin-top: 4px;
	font-size: 12px;
	color: var(--text-muted);
}

.profile-settings-close {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text-soft);
	cursor: pointer;
}

.profile-settings-close:hover {
	background: var(--surface-hover);
	color: var(--accent);
}

.profile-settings-close:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(54, 117, 255, 0.18);
}

.profile-settings-tabs {
	padding: 14px 22px 0;
	background: var(--surface);
	border-bottom: 1px solid var(--border-soft);
}

.profile-settings-tabs .nav-link {
	font-weight: 700;
	font-size: 13px;
}

.profile-settings-body {
	padding: 20px 22px 22px;
}

.profile-settings-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 12px;
}

.profile-settings-actions-split {
	justify-content: space-between;
	gap: 16px;
}

.profile-reset-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.profile-reset-actions .searchButton {
	width: auto !important;
	background-color: #536475;
}

.profile-forgot-label {
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
}

@media (max-width: 768px) {
	.user-profile-dialog {
		width: calc(100vw - 24px) !important;
		left: 12px !important;
	}

	.profile-settings-actions-split,
	.profile-reset-actions {
		align-items: stretch;
		flex-direction: column;
	}
}

/* ==================================================================
   FEATURE PERMISSIONS

   setPageFeature() in global_exp1.js stamps can-<action> /
   cannot-<action> onto <body> from the grants returned by
   /feature/getFeature. Anything marked data-perm="<action>" then
   disappears for users who lack it.

   This is CSS rather than JS on purpose: the inquiry grids replace
   their entire innerHTML on every search and every keystroke in the
   table filter, so a JS sweep would need re-running after each render
   and would eventually be missed. A body class outlives all of it.

   Buttons hidden here are still fully enforced server-side by
   requirePermission() -- this only removes controls the user cannot
   use, it is not the access check.
   ================================================================== */

body.cannot-create [data-perm="create"],
body.cannot-edit [data-perm="edit"],
body.cannot-delete [data-perm="delete"],
body.cannot-approve [data-perm="approve"],
body.cannot-print [data-perm="print"] {
	display: none !important;
}

/* Grid action cells keep their width when emptied, so columns stay
   aligned across rows where some actions are permitted and others
   are not. */
body [data-perm-cell] {
	min-width: 32px;
}

/* The opposite of data-perm: shown only to users WITHOUT the action.
   A draft row shows Edit to editors and View to everyone else:
     <span data-perm="edit">edit</span><span data-perm-unless="edit">view</span> */
body.can-create [data-perm-unless="create"],
body.can-edit [data-perm-unless="edit"],
body.can-delete [data-perm-unless="delete"],
body.can-approve [data-perm-unless="approve"] {
	display: none !important;
}

/* One "Actions" column holding the icons that apply to the row, instead
   of a column per action -- a list with ten action columns did not fit
   below 1440px, and empty columns showed actions the status ruled out.
   Each icon carries its own data-perm. Icons wrap if the cell is narrow;
   tooltips open leftwards (the column is the last one). */
.dataTbl .row-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 8px;
}

.dataTbl .row-actions > .tooltip-wrapper {
	cursor: pointer;
}

.dataTbl td.actions-cell {
	padding-left: 4px;
	padding-right: 4px;
}

.dataTbl td.actions-cell .tooltip-text {
	left: auto;
	right: 0;
	transform: none;
}

/* Read-only record screen: the user may view this record but not save
   it. applyRecordPermissions() sets the class. pointer-events rather
   than the disabled attribute, because the _add pages populate their
   fields asynchronously and would re-render past a disabled flag. */
body.perm-readonly [data-perm-save] {
	display: none !important;
}

body.perm-readonly .mainDiv input,
body.perm-readonly .mainDiv select,
body.perm-readonly .mainDiv textarea,
body.perm-readonly .mainDiv .search,
body.perm-readonly .mainDiv .actionButton,
body.perm-readonly .mainDiv .deleteBtn {
	pointer-events: none;
	background: var(--readonly-bg);
	color: var(--readonly-text);
}

/* Loading ring (global_exp1.js). Added to <body> on first use; centred
   on the screen and blocks clicks while requests run. */
.page-loader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--loader-overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.page-loader.is-visible {
	opacity: 1;
	visibility: visible;
}
.page-loader-ring {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--surface);
	box-shadow: 0 4px 18px var(--shadow);
}
.page-loader-ring svg {
	display: block;
	width: 100%;
	height: 100%;
}
.page-loader-track,
.page-loader-bar {
	fill: none;
	stroke-width: 8;
}
.page-loader-track {
	stroke: var(--loader-track);
}
.page-loader-bar {
	stroke: var(--accent);
	stroke-linecap: round;
	transition: stroke-dashoffset 0.2s linear, stroke 0.2s ease;
}
.page-loader.is-done .page-loader-bar {
	stroke: var(--success);
}
.page-loader.is-failed .page-loader-bar {
	stroke: var(--danger);
}
.page-loader-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 17px;
	font-weight: 600;
	color: var(--text);
}
.page-loader.is-done .page-loader-text {
	color: var(--success);
}
.page-loader.is-failed .page-loader-text {
	color: var(--danger);
}
@media (prefers-reduced-motion: reduce) {
	.page-loader,
	.page-loader-bar {
		transition: none;
	}
}

/* Header theme switch (global_exp1.js): moon in light mode, sun in dark. */
#themeToggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 30px;
	margin-right: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 6px;
	background: transparent;
	color: #fff;
	vertical-align: middle;
	cursor: pointer;
}
#themeToggle:hover {
	background: rgba(255, 255, 255, 0.15);
}
#themeToggle:focus {
	outline: none;
}
#themeToggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
#themeToggle .material-icons {
	font-size: 18px;
}

/* Action icons in grids: <i class="material-icons icon-danger">delete_forever</i>.
   Classes rather than inline colours, so each has a dark-mode shade. */
.icon-primary { color: var(--icon-primary); }
.icon-success { color: var(--icon-success); }
.icon-danger  { color: var(--icon-danger); }
.icon-teal    { color: var(--icon-teal); }
.icon-muted   { color: var(--icon-muted); }
.icon-dark    { color: var(--icon-dark); }

/* Message dialogs (showSuccessDialog and friends in global_exp1.js). */
.dialog-message {
	font-size: 16px;
}
.dialog-message-success {
	color: var(--success-text);
}
.dialog-message-danger {
	color: var(--danger-text);
}
.dialog-warning-box {
	background: var(--warning-bg);
	border: 1px solid var(--warning-border);
	color: var(--warning-text);
}

/* ==================================================================
   DARK MODE -- Bootstrap 4.5 and the jQuery UI base theme.

   Neither library has a dark theme, so their light colours are
   overridden here. The html[data-theme="dark"] prefix outranks the
   libraries' own selectors, which matters for jQuery UI because its
   stylesheet loads after this one. Bootstrap's utility classes
   (.bg-white, .text-dark...) use !important, so these do too.
   ================================================================== */
html[data-theme="dark"] a {
	color: #7aa7ff;
}
html[data-theme="dark"] hr {
	border-top-color: var(--border);
}

/* Bootstrap */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
	background-color: var(--surface) !important;
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
	color: var(--text) !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
	color: var(--text-muted) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right {
	border-color: var(--border) !important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover {
	background-color: var(--surface);
	border-color: var(--border);
	color: var(--text);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
	background-color: var(--surface-muted);
	border-color: var(--border);
}
html[data-theme="dark"] .dropdown-item {
	color: var(--text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
	background-color: var(--surface-hover);
	color: var(--text-strong);
}
html[data-theme="dark"] .dropdown-divider {
	border-top-color: var(--border);
}
html[data-theme="dark"] .table {
	color: var(--text);
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th {
	border-color: var(--border);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
	background-color: var(--grid-hover);
	color: var(--text);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select {
	background-color: var(--input-bg);
	border-color: var(--border-strong);
	color: var(--input-text);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
	background-color: var(--readonly-bg);
	color: var(--readonly-text);
}
html[data-theme="dark"] .nav-tabs {
	border-bottom-color: var(--border);
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
	border-color: var(--border) var(--border) transparent;
}
html[data-theme="dark"] .btn-light {
	background-color: var(--surface-muted);
	border-color: var(--border);
	color: var(--text);
}
html[data-theme="dark"] .close {
	color: var(--text);
	text-shadow: none;
}
html[data-theme="dark"] .badge-light {
	background-color: var(--surface-muted);
	color: var(--text);
}

/* jQuery UI: dialogs, date picker, autocomplete */
html[data-theme="dark"] .ui-widget-content {
	background: var(--surface);
	border-color: var(--border);
	color: var(--text);
}
html[data-theme="dark"] .ui-widget-content a {
	color: var(--text);
}
html[data-theme="dark"] .ui-widget-header {
	background: var(--surface-muted);
	border-color: var(--border);
	color: var(--text);
}
html[data-theme="dark"] .ui-dialog .ui-dialog-buttonpane {
	border-top-color: var(--border);
}
html[data-theme="dark"] .ui-widget-overlay {
	background: #000;
	opacity: 0.55;
}
html[data-theme="dark"] .ui-state-default,
html[data-theme="dark"] .ui-widget-content .ui-state-default {
	background: var(--input-bg);
	border-color: var(--border-strong);
	color: var(--text);
}
html[data-theme="dark"] .ui-state-hover,
html[data-theme="dark"] .ui-widget-content .ui-state-hover,
html[data-theme="dark"] .ui-state-focus,
html[data-theme="dark"] .ui-widget-content .ui-state-focus {
	background: var(--surface-hover);
	border-color: var(--border-strong);
	color: var(--text-strong);
}
html[data-theme="dark"] .ui-state-active,
html[data-theme="dark"] .ui-widget-content .ui-state-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-text);
}
html[data-theme="dark"] .ui-state-highlight,
html[data-theme="dark"] .ui-widget-content .ui-state-highlight {
	background: var(--warning-bg);
	border-color: var(--warning-border);
	color: var(--warning-text);
}
html[data-theme="dark"] .ui-datepicker .ui-icon,
html[data-theme="dark"] .ui-dialog-titlebar-close .ui-icon {
	filter: invert(1);
}

/* Sidebar scrollbar thumb: the light theme's hover colour vanishes on
   the dark track. */
html[data-theme="dark"] #menuContainer::-webkit-scrollbar-thumb:hover {
	background: #5a6372;
}

/* ------------------------------------------------------------------
   Record history dialog (showRecordHistory in page_helpers.js, KAN-54).
   ------------------------------------------------------------------ */
.record-history {
	font-size: 13px;
	color: var(--text);
}
/* The dialog frame: themed like the profile dialog. The jQuery UI close
   icon needs a sprite the app does not load (it drew an empty box), so
   the title bar has none -- Close and Esc close the dialog. */
.record-history-dialog {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--border-soft) !important;
	box-shadow: 0 18px 45px var(--shadow);
	padding: 0 !important;
	background: var(--surface);
}
.record-history-dialog .ui-dialog-titlebar {
	background: var(--surface-muted);
	border: none;
	border-bottom: 1px solid var(--border-soft);
	border-radius: 0;
	padding: 12px 18px;
	color: var(--text-strong);
	font-size: 16px;
	font-weight: 700;
}
.record-history-dialog .ui-dialog-titlebar-close {
	display: none;
}
.record-history-dialog .ui-dialog-content {
	padding: 10px 18px !important;
}
.record-history-dialog .ui-dialog-buttonpane {
	margin: 0;
	padding: 10px 18px;
	border-top: 1px solid var(--border-soft);
	background: var(--surface);
}
.record-history-dialog .ui-dialog-buttonpane button {
	margin: 0;
	padding: 8px 18px;
	border: none;
	border-radius: 4px;
	background: var(--accent);
	color: var(--accent-text);
	cursor: pointer;
	outline: none;
}
.record-history-dialog .ui-dialog-buttonpane button:hover,
.record-history-dialog .ui-dialog-buttonpane button:focus {
	background: var(--accent);
	color: var(--accent-text);
	filter: brightness(0.9);
}
.record-history-entry {
	padding: 8px 2px;
	border-bottom: 1px solid var(--border);
}
.record-history-entry:last-child {
	border-bottom: none;
}
.record-history-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.record-history-when,
.record-history-summary,
.record-history-note,
.record-history-empty {
	color: var(--text-muted);
}
.record-history-summary {
	margin-top: 2px;
	word-break: break-word;
}
.record-history-note {
	margin-bottom: 6px;
}
.record-history-empty {
	padding: 12px 2px;
}
/* Action chip of an audit entry: Admin > Audit Log and the History
   dialog. Kind from auditActionKind() in page_helpers.js. */
.audit-action {
	display: inline-block;
	max-width: 100%;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 12px;
	color: var(--text);
	background: var(--surface-muted);
}
.audit-action-create {
	color: var(--success-text);
	background: var(--accent-soft);
}
.audit-action-delete {
	color: var(--danger-text);
	background: var(--danger-soft);
}
.audit-action-workflow {
	color: var(--warning-text);
	background: var(--warning-bg);
}
.record-history details {
	margin-top: 4px;
}
.record-history summary {
	cursor: pointer;
	color: var(--accent);
}
.record-history-table {
	margin-top: 4px;
}
.record-history-table td {
	word-break: break-word;
	font-size: 12px;
}

/* The pager of a transaction list (KAN-21): "Showing x-y of z", first /
   previous / next / last, and the page size. Rendered by listPager() in
   page_helpers.js into a <div class="list-pager"> above the list -- the
   list box scrolls, so a pager under it would sit off-screen. */
.list-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 0 2px 8px;
	color: var(--text-muted);
	font-size: 13px;
}
.list-pager-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}
.list-pager-btn {
	min-width: 34px;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}
.list-pager-btn:hover:not(:disabled) {
	background: var(--surface-hover);
}
.list-pager-btn:disabled {
	opacity: 0.45;
	cursor: default;
}
.list-pager-page {
	padding: 0 6px;
	white-space: nowrap;
}
.list-pager-size {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0; /* a <label>: Bootstrap gives it a bottom margin */
	white-space: nowrap;
}
.list-pager-size select {
	width: auto;
	height: 30px;
	padding: 0 6px;
}