/* === Migrated from scripts/mod/05_css.overrides.js (was runtime-injected) === */
/* --- GLOBAL OVERLAY + POPUPS Z-ORDER FIX --- */
#greyer{
	position: fixed !important;
	left:0 !important; top:0 !important; right:0 !important; bottom:0 !important;
	background: rgba(0,0,0,.6) !important;
	z-index: 2500 !important;   /* below centerpopup/mainpopup */
	display: none;
}
.centerpopup{
	position: fixed !important;
	z-index: 3000 !important;
}
#mainpopup{
	position: fixed !important;
	z-index: 3000 !important;
}
#modules{
	position: fixed !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: auto !important;
	height: auto !important;
	max-width: 92vw !important;
	max-height: 90vh !important;
	overflow: auto !important;
	background: #fff !important;
	border: 2px solid #000 !important;
	border-radius: 10px !important;
	z-index: 4000 !important;
	padding: 0 !important;
	display: none;
}
#modules #simappModulesClose{
	position: absolute !important;
	right: 12px !important;
	top: 12px !important;
	margin: 0 !important;
}
.cabinetsrow{
	box-sizing: border-box !important;
	width: calc(100% - 80px) !important;
	max-width: calc(100% - 80px) !important;
	margin-right: 0 !important;
}
table#subcabs{
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed !important;
	border-collapse: separate !important;
}
td.imagecabinet{ width: 140px !important; }
td.addcabinet{ width: 70px !important; }
td.itemslisting{
	width: auto !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	white-space: nowrap !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,.35) rgba(0,0,0,.08);
}
td.itemslisting::-webkit-scrollbar{ height: 8px; }
td.itemslisting::-webkit-scrollbar-track{ background: rgba(0,0,0,.08); border-radius: 10px; }
td.itemslisting::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.35); border-radius: 10px; }
td.itemslisting::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.5); }
.itemIcon img,
.itemIcon svg,
.itemIcon {
	width: 60px;
	height: 60px;
	min-width: 60px;
	min-height: 60px;
	box-sizing: border-box;
}
#usersAdminDetails {
	margin-top: 6px;
}
#usersAdminPanel {
	margin-top: 10px;
	padding: 12px 12px 10px;
	background: rgba(255,255,255,0.55);
	border: 2px solid rgba(0,0,0,0.35);
	border-radius: 18px;
	box-shadow: 0 2px 0 rgba(0,0,0,0.08);
	overflow-x: hidden;
	display: flex;
	width: 80%;
}
#usersAdminPanel table.tbl{
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: transparent;
}
#usersAdminPanel table.tbl thead th{
	padding: 8px 10px;
	font-weight: 700;
	text-align: left;
	border-bottom: 2px solid rgba(0,0,0,0.22);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#usersAdminPanel table.tbl tbody td{
	padding: 8px 10px;
	border-bottom: 1px solid rgba(0,0,0,0.18);
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
}
#usersAdminPanel table.tbl tbody tr:last-child td{
	border-bottom: 0;
}
#usersAdminPanel table.tbl th:nth-child(1),
#usersAdminPanel table.tbl td:nth-child(1){ width: 20px; }
#usersAdminPanel table.tbl th:nth-child(2),
#usersAdminPanel table.tbl td:nth-child(2){ width: 90px; }
#usersAdminPanel table.tbl th:nth-child(3),
#usersAdminPanel table.tbl td:nth-child(3){ width: 190px; }
#usersAdminPanel table.tbl th:nth-child(4),
#usersAdminPanel table.tbl td:nth-child(4){ width: 60px; }
#usersAdminPanel table.tbl th:nth-child(5),
#usersAdminPanel table.tbl td:nth-child(5){ width: 130px; }
#usersAdminPanel table.tbl th:nth-child(6),
#usersAdminPanel table.tbl td:nth-child(6){ width: 90px; }
#usersAdminPanel table.tbl th:nth-child(7),
#usersAdminPanel table.tbl td:nth-child(7){ width: 70px; text-align: right; }
#usersAdminPanel input[type="text"],
#usersAdminPanel select{
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	border-radius: 14px;
	border: 2px solid rgba(0,0,0,0.25);
	background: rgba(255,255,255,0.80);
	outline: none;
}
#usersAdminPanel input[type="text"]:focus,
#usersAdminPanel select:focus{
	border-color: rgba(0,0,0,0.45);
}
#btnUsersAdminReload,
#usersAdminPanel button[data-action="users-save"]{
	padding: 6px 12px;
	border-radius: 14px;
	border: 2px solid rgba(0,0,0,0.35);
	background: rgba(255,255,255,0.70);
	cursor: pointer;
}
#btnUsersAdminReload:hover,
#usersAdminPanel button[data-action="users-save"]:hover{
	background: rgba(255,255,255,0.90);
}
#usersAdminStatus{
	display: inline-block;
	margin-left: 10px;
	font-weight: 600;
}
@media (max-width: 900px){
	#usersAdminPanel table.tbl td:nth-child(5),
	#usersAdminPanel table.tbl td:nth-child(6){
		white-space: normal;
		word-break: break-word;
	}
}
html, body{
	max-width: 100%;
	overflow-x: hidden;
}
/**
General HTML styling
**/
* 	{
	border: 				0;
	margin: 				0;
	}
body {
	width: 					100%;
	height: 				100%;
	background: 			lightblue;
	overflow: 				hidden;
	}

A 	{
	text-decoration: 		none;	
	}


/** Top Menu Bar **/
.top-menu-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: transparent;
	border-bottom: none;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	gap: 12px;
	z-index: 50000;
}

.top-menu-button {
	height: 48px;
	min-width: 72px;
	padding: 0 16px;
	background: linear-gradient(135deg, #0f9c60 0%, #0b7246 100%);
	border: 0;
	border-radius: 12px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: #ffffff;
	font-family: 'Segoe UI', system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(12, 129, 76, 0.25);
	transition: all 0.2s ease;
}

.top-menu-button__icon {
	font-size: 16px;
	line-height: 1;
}

.top-menu-button__label {
	line-height: 1;
}

.top-menu-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(12, 129, 76, 0.35);
	filter: brightness(1.05);
}

.top-menu-button:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(12, 129, 76, 0.2);
}

/* Specific button colors */
.top-menu-button--alerts {
	background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
	box-shadow: 0 2px 8px rgba(245, 124, 0, 0.25);
}

.top-menu-button--alerts:hover {
	box-shadow: 0 4px 12px rgba(245, 124, 0, 0.35);
}

.top-menu-button--recent {
	background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
	box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25);
}

.top-menu-button--recent:hover {
	box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
}

.top-menu-button--agenda {
	background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
	box-shadow: 0 2px 8px rgba(123, 31, 162, 0.25);
}

.top-menu-button--agenda:hover {
	box-shadow: 0 4px 12px rgba(123, 31, 162, 0.35);
}

/** Overlay background and center popups **/
#greyer	{
	position: 				absolute;
	width: 					100%;
	height: 				100%;
	background: 			grey;
	opacity: 				0.6;
	z-index: 				1999;
	display: 				none;
	}

#mainpopup {
	display: none;
}
/* Legacy closer buttons - deprecated in favor of popup-close-btn */
.closer, .closer1 {
	display: none; /* Hidden - using modern close button */
}
/* Modern Popup System */
.modern-popup {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 1400px;
	height: 90vh;
	max-height: 900px;
	background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
	border: none;
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(138,168,191,0.2);
	overflow: hidden;
	z-index: 3000;
	display: none;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.modern-popup[style*="block"] {
	opacity: 1;
}

.popup-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 32px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-bottom: 3px solid rgba(255,255,255,0.2);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	min-height: 80px;
}

.popup-title-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.popup-title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	color: white;
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.5px;
	font-family: -apple-system, system-ui, 'Segoe UI', sans-serif;
}

.popup-subtitle {
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.95;
}

.popup-close-btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.15);
	border: 2px solid rgba(255,255,255,0.3);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
	color: white;
	flex-shrink: 0;
	margin-left: 16px;
}

.popup-close-btn:hover {
	background: rgba(255,255,255,0.25);
	border-color: rgba(255,255,255,0.5);
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.popup-close-btn:active {
	transform: scale(0.95);
}

.popup-content {
	position: relative;
	height: calc(100% - 80px);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0;
	background: transparent;
	scrollbar-width: thin;
	scrollbar-color: #8aa8bf #f0f0f0;
}

.popup-content::-webkit-scrollbar {
	width: 10px;
}

.popup-content::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: 0 0 24px 0;
}

.popup-content::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #8aa8bf 0%, #667eea 100%);
	border-radius: 5px;
	border: 2px solid #f0f0f0;
}

.popup-content::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

/* Legacy compatibility */
#poptitle.m41-structured {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap;
}

#poptitle .m41-pt-left {
	font-size: 28px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

#poptitle .m41-pt-right {
	font-size: 13px;
	opacity: 0.85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
	max-width: 40%;
}

DIV.centerpopup {
	/* Legacy fallback - redirects to .modern-popup */
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 1400px;
	height: 90vh;
	max-height: none;
	background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
	border: none;
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	overflow: hidden;
	z-index: 3000;
	display: none;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

DIV.centerpopup[style*="block"] {
	opacity: 1;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.modern-popup, DIV.centerpopup {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 96%;
		height: 92vh !important;
		max-height: 92vh !important;
		border-radius: 20px;
	}
	
	.popup-header {
		padding: 16px 20px;
		min-height: 64px;
	}
	
	.popup-title {
		font-size: 20px;
	}
	
	.popup-subtitle {
		font-size: 11px;
	}
	
	.popup-close-btn {
		width: 36px;
		height: 36px;
	}
	
	#poptitle .m41-pt-left {
		font-size: 20px;
		border-radius: 15px 15px 0 0;
	}
	
	#poptitle, #popinfo {
		font-size: 14pt;
		border-radius: 15px 15px 0 0;
	}
}

@media (max-width: 480px) {
	DIV.centerpopup {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 98%;
		height: 95vh !important;
		max-height: 95vh !important;
		border-radius: 10px;
	}
	
	#poptitle, #popinfo {
		font-size: 12pt;
		height: 8%;
		border-radius: 10px 10px 0 0;
	}
}



/* SIMAPP Popup Editor Top Bar (poppedmenus) — v2026-01-26
   Purpose: make the legacy TinyMCE editor popup top bar visually consistent with the main UI.
   Scope: only #poppedmenus.
*/
/* Editor Toolbar - Modern Layout */
.editorToolbar {
	margin: 0;
	padding: 16px 20px;
	background: linear-gradient(to bottom, #f8fbff 0%, #ffffff 100%);
	border-bottom: 1px solid rgba(138, 168, 191, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.editorToolbar__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.editorToolbar__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
}

.editorControl {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	transition: all 0.2s ease;
}

.editorControl:hover {
	background: transparent;
	border: none;
	box-shadow: none;
}

.editorIcon {
	width: 18px;
	height: 18px;
	color: #54677a;
	flex-shrink: 0;
}

.editorSelect {
	border: 1px solid #d6dde5;
	background: #ffffff;
	border-radius: 0;
	font-size: 14px;
	font-weight: 500;
	color: #2b3d4d;
	cursor: pointer;
	outline: none;
	padding: 6px 10px;
	min-width: 140px;
}

.editorSelect:focus {
	outline: none;
	border-color: #8aa8bf;
}

.editorBtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: #ffffff;
	border: 1px solid rgba(138, 168, 191, 0.3);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #2b3d4d;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.editorBtn svg {
	width: 18px;
	height: 18px;
	color: #54677a;
	transition: color 0.2s ease;
}

.editorBtn:hover {
	background: #f8fbff;
	border-color: rgba(138, 168, 191, 0.5);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

.editorBtn:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.editorBtn--save {
	background: linear-gradient(135deg, #0f9c60 0%, #0d8552 100%);
	border-color: #0d8552;
	color: white;
}

.editorBtn--save svg {
	color: white;
}

.editorBtn--save:hover {
	background: linear-gradient(135deg, #0d8552 0%, #0b7246 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 156, 96, 0.3);
}

.editorBtn--delete {
	background: #ffffff;
	border-color: rgba(179, 38, 30, 0.3);
	color: #b3261e;
}

.editorBtn--delete svg {
	color: #b3261e;
}

.editorBtn--delete:hover {
	background: #fff5f5;
	border-color: #b3261e;
	box-shadow: 0 4px 8px rgba(179, 38, 30, 0.2);
}

.editorBtn--close {
	padding: 10px;
	min-width: 40px;
	justify-content: center;
}

.editorBtn--close svg {
	color: #54677a;
}

.editorBtn--close:hover {
	background: #fff5f5;
	border-color: rgba(179, 38, 30, 0.3);
}

.editorBtn--close:hover svg {
	color: #b3261e;
}

.editorBtn--secondary {
	background: #ffffff;
	border-color: rgba(138, 168, 191, 0.3);
}

.editorBtn--secondary:hover {
	background: #f8fbff;
	border-color: rgba(138, 168, 191, 0.5);
}

/* Clock button styling to match action buttons */
#simappTimeTrackerBtn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px !important;
	background: #ffffff !important;
	border: 1px solid rgba(138, 168, 191, 0.3) !important;
	border-radius: 4px !important;
	font-size: 13px;
	font-weight: 600;
	color: #2b3d4d;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important;
	width: auto !important;
	height: auto !important;
	margin-left: 0 !important;
	position: relative !important;
	right: auto !important;
	top: auto !important;
	z-index: 60;
}

#simappTimeTrackerBtn:hover {
	background: #f8fbff !important;
	border-color: rgba(138, 168, 191, 0.5) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important;
}

#simappTimeTrackerBtn img {
	width: 18px;
	height: 18px;
	opacity: 0.8;
	filter: invert(37%) sepia(10%) saturate(870%) hue-rotate(167deg) brightness(90%) contrast(92%);
}

.editorStatus {
	position: absolute;
	top: 70px;
	right: 20px;
	padding: 8px 14px;
	background: rgba(255,255,255,0.98);
	border: 1px solid rgba(138, 168, 191, 0.2);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	color: #54677a;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.editorStatus:not(:empty) {
	opacity: 1;
}

@media (max-width: 900px) {
	.editorToolbar {
		padding: 12px 16px;
	}
	.editorToolbar__controls {
		flex-wrap: wrap;
	}
	.editorControl {
		padding: 6px 10px;
	}
	.editorSelect {
		font-size: 13px;
		min-width: 100px;
	}
	.editorBtn span {
		display: none;
	}
	.editorBtn {
		padding: 8px;
		min-width: 36px;
	}
}

/* Scanner results table styling */
#simappScannerResults {
  margin-top: 12px;
  border-collapse: collapse;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

#simappScannerResults td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  word-break: break-word;
}

#simappScannerResults tr:last-child td {
  border-bottom: none;
}

#simappScannerResults tr:hover {
  background: #f9f9f9;
}

/* Hide scanner button from toolbar - will use editor integration */
#scannermenu {
  display: none !important;
}

DIV.overview {
	/* Legacy overview styling - modernized */
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: transparent;
	border: none;
	border-radius: 0;
	scrollbar-color: #8aa8bf #f0f0f0;
	scrollbar-width: thin;
	padding: 0;
	margin: 0;
}

/* Legacy #popupcontent - now handled by .popup-content but keeping for compatibility */
#popupcontent {
	/* Already styled as .popup-content in modern popup system */
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: transparent;
	border: none;
	border-radius: 0;
	box-sizing: border-box;
	padding: 0;
}

/* Mobile responsive adjustments for popup content */
@media (max-width: 768px) {
	#popupcontent {
		width: 100%;
		height: 100%;
	}
}

@media (max-width: 480px) {
	#popupcontent {
		width: 				96%;
		height: 			86%;
		border-radius: 		0 0 10px 10px;
	}
}

/* Mobile responsive adjustments for popup content */
@media (max-width: 768px) {
	#popupcontent {
		top: 				10%;
		left: 				2%;
		width: 				96%;
		height: 			88%;
		border-radius: 		0 0 20px 20px;
	}
}

@media (max-width: 480px) {
	#popupcontent {
		top: 				12%;
		left: 				2%;
		width: 				96%;
		height: 			86%;
		border-radius: 		0 0 10px 10px;
	}
}

#popupcontent #podsTree,
#popupcontent #simappManage3Pane {
	width: 					100%;
	max-height: 			100%;
	box-sizing: 			border-box;
	overflow: 				auto;
}
	
#modules		{
	position: absolute;
	left: 40%;
	top:  40%;
	width: 20%;
	height: 20%;
	background: white;
	border: 2px solid black;
	z-index: 3000;
	display: none;
	padding: 20px;
	
	}
	


/** container selection menu **/

DIV.podselection   {
	position: 			fixed;
	top: 				64px;
	left: 				0;
	width: 				100%;
	background: 		lightblue;
	height: 			140px;
	overflow-x: 		scroll;
	overflow-y: 		hidden;
	display: 			flex; 
	white-space: 		nowrap; 
	padding: 			12px 14px 18px;
	z-index: 			1200;	
	scrollbar-color: 	#c3d4e6 transparent;
	scrollbar-width: 	thin;
	} 
	


TD.phase1pods {
	background: 			1px solid grey;
	border-radius: 			35px;
	background: 			white;
	padding-left: 			10px;
	padding-right: 			10px;
	height: 				140px;
	}

TD.phase1pods > div	{
		display: 			inline-block; 
		padding: 			10px; 
		margin-right: 		10px; 
		border: 			1px solid black;
		border-radius:		15px;
		background: 		ivory;
		height: 			100px;
	}
TD.phase2pods {
	background: 			1px solid grey;
	border-radius: 			35px;
	background: 			white;
	padding-left: 			10px;
	padding-right: 			10px;
	}

TD.phase2pods > div	{
		display: 			inline-block; 
		padding: 			10px; 
		margin-right: 		10px; 
		border: 			1px solid black;
		border-radius:		15px;
		background: 		ivory;
		height: 			100px;
	}
TD.phase3pods {
	background: 			1px solid grey;
	border-radius: 			35px;
	background: 			white;
	padding-left: 			10px;
	padding-right: 			10px;
	}

TD.phase3pods > div	{
		display: 			inline-block; 
		padding: 			10px; 
		margin-right: 		10px; 
		border: 			1px solid black;
		border-radius:		15px;
		background: 		ivory;
		height: 			100px;
	}

.pindicator{
	vertical-align: top;
	}


DIV.podselection > div:hover { 
		background: 		white;
	}
DIV.podselection > div.menupod		{
		float: 				left;
		height: 			100px;
		width: 				150px;
		text-decoration:	none;

	}
.podtitle {
	color: 					black;
	font-weight: 			bold;
	font-family: 			Monospace;
	font-size: 				22pt;
	text-decoration: 		none;
	}
.upsid {
	color: 					grey;
	font-weight: 			bold;
	font-family: 			Monospace;
	font-size: 				18pt;
	text-decoration: 		none;
	height: 15px;
	
	}

/** Pod entries **/

DIV#podsoverview {
    position: fixed;
    top: 204px;
    left: 0;
    overflow-x: hide;
    overflow-y: scroll;
    height: calc(100vh - 204px);
    width: 100%;
    z-index: 500;
    background: lightblue;
    padding-top: 20px;
}

.pod {
	padding: 15px;
	display: 			flex; 
	white-space: 			nowrap; 
	background: 			ivory;
	border: 			0px groove silver;
	border-radius: 			35px 0 0 35px;
	margin:  			10px 0 0 15px;
	
	}

DIV.imagepods {
	background: 			#00FA9A;
	text-align: 			center;
	border-radius: 			35px;
	border: 			2px solid black;
	width: 				120px;
	padding: 			10px;
	}

IMG.imagepod {
	width: 					60px;
	height: 				60px;
	}
.podinputs {
	border: 			2px solid black;
	padding: 			10px;
	border-radius: 			25px;
	margin-left: 			15px;
	background: 			white;
	font-size: 			16pt;
	vertical-align: 		middle;
	height: 			50px;
	width: 				300px;
	}

.phase-block {
    margin: 10px auto 18px;
    max-width: 1280px;
    background: transparent;
    border: none;
}

.phase-summary {
    list-style: none;
    padding: 12px 16px;
    margin: 0 auto 8px;
    background: #f9f6ec;
    border: 1px solid #d6cbb2;
    border-radius: 14px;
    color: #2b2b2b;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    cursor: pointer;
}

.phase-summary .phase-label { display: flex; align-items: center; gap: 10px; }
.phase-summary .phase-dot { width: 14px; height: 14px; border-radius: 50%; background: #6b7bff; box-shadow: 0 0 0 3px rgba(107,123,255,0.18); }
.phase-summary .phase-count { font-size: 13px; color: #4b4b4b; font-weight: 600; }

.phase-pods { padding: 0 6px; }

	
.upsrow			{
	background: 			ivory;
	display: 				flex; 
	white-space: 			nowrap; 
	background: 			ivory;
	border: 				0px groove silver;
	margin: 				0 0 0 50px;
	height: 				100px;
	}	
.upssys1 {
	border-radius: 			0 0 0 35px;	
	}
.upssys2 {
	border-radius: 			35px 0 0 35px;
	}
	
.upsrowimage {
	border:	 				1px outset silver;
	background: 			#00FA9A;
	text-align: 			center;
	border-radius: 			25px;
	border: 				2px solid black;
	width: 					50px;
	height: 				55px;
	padding: 				10px;
	margin: 				10px;
	}
.upstitle {
	color: 					black;
	}	
	
IMG.imageups		{
	height: 				40px;
	width: 					40px;
	}
TD.upsid	{			
	text-align:				center;
	}
.upsinputs {
	border: 				2px solid black;
	padding: 				10px;
	background: 			white;
	font-size: 				16pt;
	vertical-align: 		middle;
	height: 				50px;
	margin: 				0;
	}
.upsl{
	border-radius: 			25px 0 0 25px;
	margin-left: 			10px;
}	
.upsm{
	border-radius: 			0;
}	
.upsr{
	border-radius: 			0 25px 25px 0;
}	
	
.cabinetsrow {
	display: 				flex; 
	white-space: 			detnowrap; 
	background: 			ivory;
	border: 				1px solid grey;
	margin-left: 			80px;
	}
	
.upstitle{
	color: 					black;
	font-weight: 			bold;
	font-family: 			Monospace;
	font-size: 				12pt;
	text-decoration: 		none;
	}
IMG.batmod {
	height: 30px;
	width: 30px;
	margin-left: 10px;

	}	
IMG.imagecabinet	{
	height: 50px;
	width: 30px;
	margin-left: 10px;
	}
TD.imagecabinet	{
	padding: 10px;
	width: 140px;
	border: 2px inset black;
	background: azure;
	border-radius:  0 35px 35px 0;
	text-align: left;
	position: relative;
	}
SPAN.cabtype {
	color: 					black;
	font-weight: 			bold;
	font-family: 			Monospace;
	font-size: 				10pt;
	text-decoration: 		none;

}
	
TD.cabtag	{
	padding: 10px;
	width: 70px;
	border: 2px inset black;
	background: lightgrey;
	border-radius: 	 0 35px 35px 0;
	}	
	
IMG.addcabinet 		{
	vertical-align: center;
	height: 50px;
	width: 50px;
	margin-left: 15px;

	}
TD.addcabinet:hover {
	background: white;
	}

TD.addcabinet 		{
	padding: 10px;
	width: 70px;
	border: 2px inset black;
	background: ivory;
	border-radius: 	  35px 0 0 35px;
	}
.itemslisting{
	background: white; 
	border-radius: 4px;
	}


.inputs 		{
		border: 1px solid grey;
		vertical-align: middle;
			display:inline-block;

		}

.entries 		{
	width: 60px;
	height: 60px;
	padding: 5px;
	border: 3px inset black;
	background: white;
	border-radius: 		35px;
	margin: 5px;
}

img#deleter		{
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 50px;
	width: 50px;
}

#logform {
	position: absolute;
	width: 150px;
	padding: 20px;
	right: 40%;
	bottom: 10%;

	border-radius: 		35px;
	border: 			2px solid black;
	overflow: 			hidden;
	z-index: 			999;
	text-align: 		center;
	background: azure;
	}	
	
.logins {
	width: 				140px;
	border-radius: 		35px;
	border: 			2px solid black;
	overflow: 			hidden;
	z-index: 			999;
	text-align: 		center;
	background: 		white;
	margin: 			3px;
	font-size: 24pt;
}

.logologin				{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
#loglogo {
	width: 80%;
}
#loginverzenden{
	background: lightgrey;
	color: white;
	
}
.tox-tinymce-aux{z-index:99999999999 !important;}

.active, .collapsible:hover {
  background-color: #ccc;
  height: 100px;
}

#qr-reader {
	position: absolute;
	display: none;
	z-index: 5000;
	overflow: hidden;
	background: black;
	opacity: 1;
	width: 100%;
	max-width: 600px;
	margin: auto;
        
	}
@media (max-width: 600px) {
		#qr-reader {
			width: 100%;
		}
    }
		
#poppedmenus {
	position: relative;
	width: 100%;
	z-index: 55000;
}
	
#editorcontent 	{
	margin-top: 120px;
	display: flex;
	overflow: hidden;
	border: 2px solid black;
	border-radius: 0 0 40px 40px;
	}

#subcabs {
		width: 100%;

}


.editmenu 	{
	border-radius: 		35px;
	z-index: 			60000;
	text-align: 		center;
	background: 		white;
}

#categorieid {
		border: 2px inset black;
		border-radius: 		35px;
		font-size: 10pt;	
		padding: 5px;
	
}

#itemstate {
		border: 2px inset black;
		border-radius: 		35px;
		font-size: 10pt;	
		padding: 5px;
}
#addmenu		{
	border: 2px inset lightgreen;
		border-radius: 		35px;
		font-size: 14pt;
		padding-left: 5px;
		padding-right: 5px;
	}
#scannermenu	{
	border: 2px inset black;	
		border-radius: 		35px;
		font-size: 14pt;
		padding-left: 5px;
		padding-right: 5px;
	}
#deletemenu		{
	border: 2px inset red;
		border-radius: 		35px;
		font-size: 14pt;
		padding-left: 5px;
		padding-right: 5px;
	}
	
#topinfo {
	position: absolute;
	top: 0;
	left: 50%;
	}
	

button.appointment {
	background: white;
	margin-left: 20px;
	border-radius: 4px;
	border: 2px groove black;
	font-size: 16pt;
}

button.appointment:hover {
	background: lightgrey;
	}
#appointmentdescription {
	border: 1px solid black;
	font-size: 16pt;
	width: 100%;
	height: 300px;
	}


input.agendainput {
	border: 1px solid black;
	font-size: 22pt;
	height: 30px;
}
button.agendainput {
	border: 1px solid black;
	font-size: 16pt;
	}
table.agendainput {
	width: 100%;
	text-align: center;	
	font-size: 18pt;
	}
table.agendatable {
	border: 2px solid grey;
	width: 100%;
	background: ivory;
	}
td.agendatabledate {
	border: 2px inset grey;
	width: 100px;
	font-size: 14pt;
	border-radius: 4px;
	text-align: center;
	padding: 5px;
	}
td.agendatablename {
	border: 2px inset grey;
	
	width: 150px;
	font-size: 14pt;
	border-radius: 4px;
	text-align: center;
	padding: 5px;
	}	
td.agendatabledescription {
	border: 2px inset grey;
	font-size: 14pt;
	border-radius: 4px;
	text-align: left;
	padding: 5px;
	}	
td.agendatableoption {
	border: 1px solid grey;
	width: 150px;
	font-size: 14pt;
	border-radius: 4px;
	text-align: center;
	}	
.inputsdone {
	padding: 10px;
	border: 2px inset black;
	background: lightgreen;
	border-radius: 	  35px 0 0 35px ;
}
.inputsdelete {
	padding: 10px;
	border: 2px inset black;
	background: red;
	border-radius: 	 0 35px 35px 0;
}

details.main {
	maring-top: 10px;
	}
details.main > summary {
	margin-top: -20px;
  width: 100%;
}

details.main > p {
  margin: 0;
}

details:open > summary {
	

}
details summary::-webkit-details-marker {
  display:none;
}
`

.managertable {
	display: flex;
	border: 2px solid black;
	background: ivory;
	border-radius: 4px;
	}

details.sub {
	border: 2px solid black;
	border-radius: 4px;
	background: ivory;
	margin: 10px;
	padding: 20px;
	font-size: 18pt;
	}

details.sub > summary {
	margin-top: 0;
	width: 100%;
}

input.input {
	border: 2px inset black;
	border-radius: 4px;
	background: white;
	margin: 2px;
	padding: 5px 10px  5px 10px;
	font-size: 12pt;
	}

table.managelist > tr.managelist {
	border: 2px solid black;
	background: ivory;
	border-radius: 4px;
	padding: 10px;
	}
	
table.infotable {
	width: 100%;
	background: ivory;
	border-radius: 4px;
	}
 

 table.infotable td {
	border: 2px solid black;
	border-collapse: collapse;
	border-radius: 4px;
	padding: 15px;
	}

/* Mobile responsive table fixes */
@media (max-width: 768px) {
	table.managelist,
	table.infotable {
		font-size: 		11pt;
		border-radius: 	20px;
	}
	
	table.infotable td {
		padding: 		10px;
		border-radius: 	20px;
	}
}

@media (max-width: 480px) {
	table.managelist,
	table.infotable {
		font-size: 		10pt;
		border-radius: 	10px;
		display: 		block;
		overflow-x: 	auto;
	}
	
	table.infotable td {
		padding: 		8px;
		border-radius: 	10px;
	}
}

/* Mobile responsive table fixes */
@media (max-width: 768px) {
	table.managelist,
	table.infotable {
		font-size: 		11pt;
		border-radius: 	20px;
	}
	
	table.infotable td {
		padding: 		10px;
		border-radius: 	20px;
	}
}

@media (max-width: 480px) {
	table.managelist,
	table.infotable {
		font-size: 		10pt;
		border-radius: 	10px;
		display: 		block;
		overflow-x: 	auto;
	}
	
	table.infotable td {
		padding: 		8px;
		border-radius: 	10px;
	}
}

/* TinyMCE header/toolbar clipping fixes
   Some layouts apply overflow:hidden on containers; TinyMCE toolbars/menus can be clipped.
   These rules keep the editor header visible and allow the toolbar overflow button ("…") to display.
*/
.tox .tox-editor-header,
.tox .tox-toolbar-overlord,
.tox .tox-toolbar__primary {
  overflow: visible !important;
    z-index: 100000 !important;
}

.tox.tox-tinymce-aux {
    z-index: 200000 !important;
}

/* Keep TinyMCE popups above app UI */
.tox-tinymce-aux,
.tox .tox-silver-sink {
  z-index: 2147483647 !important;
}

.tox-mbtn, .tox-mbtn--select, .tox-mbtn--active {
	  z-index: 9999999999 !important;
}


/* ==========================================================
   Time Tracker UI (overlay button + popup)
   - Minimal styling to fit existing SIMAPP dark console theme.
   - No MutationObservers are used by the time tracker module.
   ========================================================== */
#popped { position: relative; } /* anchor overlay */
#popped {
	background: linear-gradient(180deg, #dcebf7 0%, #f5f9fd 100%);
	border-radius: 14px;
}

#simappTimeTrackerBtn {
	position: relative;
	right: auto;
	top: auto;
	width: 38px;
	height: 38px;
	border-radius: 16px;
	border: 1px solid #8aa8bf;
	background: ivory;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 2px 5px rgba(0,0,0,0.15);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-items: center;
	justify-content: center;
	z-index: 60;
	margin-left: 8px;
}
#simappTimeTrackerBtn:hover { background: #f8fbff; }
#simappTimeTrackerBtn img { width: 18px; height: 18px; opacity: 0.9; filter: invert(23%) sepia(15%) saturate(870%) hue-rotate(167deg) brightness(90%) contrast(92%); }

.simappTT {
  padding: 10px;
  max-width: 720px;
}
.simappTT .ttHeader {
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.simappTT .ttBigBtn {
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  cursor:pointer;
}
.simappTT .ttBigBtn:hover { background: rgba(0,0,0,0.45); }
.simappTT .ttMeta { font-size: 12px; opacity: 0.75; }

.simappTT table { width: 100%; border-collapse: collapse; font-size: 13px; }
.simappTT th, .simappTT td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.12); vertical-align: top; }
.simappTT .ttActions button {
  margin-right: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.20);
  cursor: pointer;
}
.simappTT .ttActions button:hover { background: rgba(0,0,0,0.40); }

/** Hardware Cogwheel **/
.hardware-cogwheel {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 100;
}

.hardware-cogwheel:hover {
  transform: scale(1.15) rotate(20deg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}