/* BEGIN STYLESHEET */
/* ============================================================
   GLOBAL / BROWSER
   ============================================================ */

/* Thin transparent scrollbars - Chrome, Edge, Safari */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(150, 150, 150, 0.35);
	border: 1px solid transparent;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(150, 150, 150, 0.60);
}


/* Thin transparent scrollbars - Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(150, 150, 150, 0.35) transparent;
}


/* Transparent Perspective modal overlay */
.modal {
	background-color: transparent !important;
}


/* Prevent browser overscroll/bounce behavior */
html,
body {
	overscroll-behavior: none;
}



/* ============================================================
   SPLIT CONTAINER
   ============================================================ */

/* Prevent selection within split container */
.psc-splitNoSelect,
.psc-splitNoSelect * {
	-webkit-user-select: none !important;
	user-select: none !important;
}


/* Allow normal text selection/editing inside input fields */
.psc-splitNoSelect input,
.psc-splitNoSelect textarea,
.psc-splitNoSelect [contenteditable="true"] {
	-webkit-user-select: text !important;
	user-select: text !important;
}


/* Prevent native image dragging in Chrome / Edge */
.psc-splitNoSelect img {
	-webkit-user-drag: none;
}

/* ============================================================
   BUTTONS / ACTION CONTROLS
   ============================================================ */

/*
   Shared interaction behavior.

   General/Start_Button
   General/Stop_Button
   General/Reset_Button
*/
.psc-General\/Start_Button,
.psc-General\/Stop_Button,
.psc-General\/Reset_Button {
	cursor: pointer;
	pointer-events: auto;
	-webkit-user-select: none;
	user-select: none;
	overflow: hidden !important;
	transform-origin: center center;
	transition:
		transform 110ms ease-out,
		background-color 120ms ease-out,
		border-color 120ms ease-out,
		box-shadow 120ms ease-out,
		filter 120ms ease-out;
}

/* Prevent selection of nested label/icon content */
.psc-General\/Start_Button *,
.psc-General\/Stop_Button *,
.psc-General\/Reset_Button * {
	-webkit-user-select: none;
	user-select: none;
}

/* Shared pressed state */
.psc-General\/Start_Button:active,
.psc-General\/Stop_Button:active,
.psc-General\/Reset_Button:active {
	transform: scale(0.98);
	transition-duration: 60ms;
}

/* ------------------------------------------------------------
   START BUTTON
   ------------------------------------------------------------ */

.psc-General\/Start_Button {
	color: #ffffff;

	background:
		linear-gradient(
			180deg,
			#079846 0%,
			#057334 100%
		);

	border: 1px solid #00e66b;
	border-radius: 5px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.psc-General\/Start_Button:hover {
	background:
		linear-gradient(
			180deg,
			#08ad50 0%,
			#07813c 100%
		);

	border-color: #20ff82;

	box-shadow:
		0 0 2px rgba(32, 255, 130, 0.65),
		0 0 5px rgba(0, 230, 107, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.20);
}


/* ------------------------------------------------------------
   STOP BUTTON
   ------------------------------------------------------------ */

.psc-General\/Stop_Button {
	color: #ffffff;

	background:
		linear-gradient(
			180deg,
			#c73845 0%,
			#a72431 100%
		);

	border: 1px solid #ff5362;
	border-radius: 5px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}


.psc-General\/Stop_Button:hover {
	background:
		linear-gradient(
			180deg,
			#df3f4d 0%,
			#b92a38 100%
		);

	border-color: #ff6b78;

	box-shadow:
		0 0 2px rgba(255, 90, 105, 0.65),
		0 0 5px rgba(255, 65, 80, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ------------------------------------------------------------
   RESET / NEUTRAL ACTION BUTTON
   ------------------------------------------------------------ */

.psc-General\/Reset_Button {
	color: var(--cc-panel-text);

	background-color: var(--cc-panel-bg);

	border: 1px solid var(--cc-reset-border);
	border-radius: 5px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.psc-General\/Reset_Button:hover {
	color: var(--cc-panel-text);

	background-color: var(--cc-panel-bg);

	border-color: var(--cc-reset-border-hover);

	box-shadow:
		0 0 2px var(--cc-reset-border-hover),
		0 0 5px var(--cc-reset-glow),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================================
   ROOM NAVIGATION LINKS
   ============================================================ */

/* Dot and connector line transitions */
.psc-General\/Room_Link_Dot,
.psc-General\/Room_Link_Line {
	transition:
		transform 120ms ease-out,
		filter 120ms ease-out,
		opacity 120ms ease-out;
}


/* Dot reacts only when its navigation pill is hovered */
.psc-General\/Room_Link:has(.psc-General\/Room_Link_Button:hover)
.psc-General\/Room_Link_Dot {
	transform: scale(1.25);

	filter:
		drop-shadow(0 0 3px rgba(67, 228, 255, 1.00))
		drop-shadow(0 0 8px rgba(67, 228, 255, 0.90));
}


/* Connector line reacts only when its navigation pill is hovered */
.psc-General\/Room_Link:has(.psc-General\/Room_Link_Button:hover)
.psc-General\/Room_Link_Line {
	filter:
		drop-shadow(0 0 2px rgba(67, 228, 255, 1.00))
		drop-shadow(0 0 6px rgba(67, 228, 255, 0.70));
}



/* ============================================================
   EQUIPMENT HOVER / HIGHLIGHT
   ============================================================ */

/*
   Structure:

   Equipment_Hover_Group
       ├── Equipment image
       ├── Equipment_Highlight
       └── Equipment_Hit_Zone(s)

   Highlight remains loaded at opacity 0.
   Hovering any hit zone changes the highlight to opacity 1.
*/


/* Highlight is always loaded but normally invisible */
.psc-General\/Equipment_Highlight {
	opacity: 0;
	pointer-events: none;

	transition:
		opacity 120ms ease-out;
}


/* Transparent equipment hit zones receive hover/click events */
.psc-General\/Equipment_Hit_Zone {
	pointer-events: auto;
	cursor: pointer;
}


/* Show equipment highlight while an associated hit zone is hovered */
.psc-General\/Equipment_Hover_Group:has(.psc-General\/Equipment_Hit_Zone:hover)
.psc-General\/Equipment_Highlight {
	opacity: 1;
}



/* ============================================================
   THEME COLORS
   ============================================================ */

/* Light themes */
:root {
	--cc-panel-header: #eef5fb;
	--cc-panel-border: #c9d8e6;
	--cc-panel-bg: #ffffff;
	--cc-panel-text: #12335a;

	--cc-reset-border: #4f7d9d;
	--cc-reset-border-hover: #2f95c9;
	--cc-reset-glow: rgba(47, 149, 201, 0.28);
}

/* Dark themes */
html:has(head link[href*="/themes/dark"]) body {
	--cc-panel-header: #102c42;
	--cc-panel-border: #23445e;
	--cc-panel-bg: #05111d;
	--cc-panel-text: #f4f8fc;

	--cc-reset-border: #557b97;
	--cc-reset-border-hover: #66b9e8;
	--cc-reset-glow: rgba(70, 180, 235, 0.25);
}

/* ============================================================
   CARD
   ============================================================ */

.psc-General\/Card {
	box-sizing: border-box;

	background-color: var(--cc-panel-bg);
	color: var(--cc-panel-text);

	margin: 5px;

	border: 1px solid var(--cc-panel-border);
	border-radius: 5px;

	overflow: hidden;
}

/* ============================================================
   CARD HEADER
   ============================================================ */

.psc-General\/Card_Header {
	box-sizing: border-box;

	background-color: var(--cc-panel-header);
	color: var(--cc-panel-text);

	margin: 0;
	border: none;
	border-radius: 0;

	padding: 5px 10px;
}



/* ============================================================
   STATUS INDICATORS
   ============================================================ */

.psc-General\/Status_Dot {
	text-shadow:
		0 0 1px rgba(0, 0, 0, 0.85),
		0 0 3px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   CONVEYOR BELT MOTION
   ============================================================ */

/* Shared belt overlay appearance */
.psc-General\/Conveyor_Belt_Motion,
.psc-General\/Conveyor_Belt_Motion_Reverse {
	pointer-events: none;
	overflow: hidden;

	background-image:
		repeating-linear-gradient(
			110deg,
			rgba(180, 220, 240, 0.00) 0px,
			rgba(180, 220, 240, 0.00) 18px,
			rgba(180, 220, 240, 0.18) 19px,
			rgba(180, 220, 240, 0.18) 22px,
			rgba(180, 220, 240, 0.00) 25px,
			rgba(180, 220, 240, 0.00) 40px
		);

	background-size: 80px 100%;
}


/* Forward */
.psc-General\/Conveyor_Belt_Motion {
	animation:
		cc-conveyor-motion 900ms linear infinite;
}


/* Reverse */
.psc-General\/Conveyor_Belt_Motion_Reverse {
	animation:
		cc-conveyor-motion 900ms linear infinite reverse;
}


@keyframes cc-conveyor-motion {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 80px 0;
	}
}
/* BEGIN STYLE CLASSES */
.psc-General\/Room_Link_Button {
  background-color: #141D25;
  border-color: #2D6798;
  border-width: 1px;
  color: #F2F5F7;
}
.psc-General\/Room_Link_Button:hover {
  background-color: #123B52;
  border-color:  #43E4FF;
  border-width: 2px;
  box-shadow: 0 0 3px rgba(67,228,255,0.95), 0 0 9px rgba(67,228,255,0.75), 0 0 18px rgba(67,228,255,0.45);
  color: #FFFFFF;
}
.psc-General\/Room_Link_Button:active {
  background-color: #071D29;
  border-color: #39DFF6;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45),   0 0 4px rgba(57,223,246,0.25);
  color: #FFFFFF;
}

.psc-General\/bk_neutral_40 {
  background-color: var(--neutral-30);
}

.psc-General\/card_dk {
  background-color: #323232;
  cursor: pointer;
}
.psc-General\/card_dk:hover {
  background-color: #555555;
}

.psc-General\/card_lt {
  background-color: #E6E6E6;
  cursor: pointer;
}
.psc-General\/card_lt:hover {
  background-color: #f4f4f4;
}

.psc-General\/menu_hover {
  cursor: pointer;
  font-family: Arial;
}
.psc-General\/menu_hover:hover {
  text-decoration: underline;
}

.psc-General\/neutral_80 {
  color: var(--neutral-80);
}

.psc-Header\/DropDown {
  background-color: var(--neutral-20);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: var(--neutral-100);
  margin-bottom: 10px;
  margin-top: 10px;
}

.psc-Header\/Header {
  background-color: #003E69;
  color: #CFE6F5;
  font-family: Arial;
  font-size: 14px;
  line-height: 17px;
  fill: #FFFFFF;
}

.psc-Header\/Icon {
  color: #FFFFFF;
  cursor: pointer;
  fill: #FFFFFF;
}

.psc-Header\/Menu {
  background-color: #0F557F;
  color: #FFFFFF;
  font-family: Arial;
}

.psc-Header\/btn_hover {
  cursor: pointer;
}
.psc-Header\/btn_hover:hover {
  background-color: #0F557F;
  color: #FFFFFF;
}

.psc-Header\/text {
  font-family: Arial;
  font-size: 11px;
}

.psc-Header\/user\/buttons\/hover {
}
.psc-Header\/user\/buttons\/hover:hover {
  background-color: #D5D5D54D;
  cursor: pointer;
}

.psc-Header\/user\/buttons\/logout {
  color: #00ACAC;
}
@keyframes psc-Header\/user\/buttons\/logout-0-anim {
  0% {
    color: #00ACAC;
  }
  100% {
    color: #00D9D9;
  }
}
.psc-Header\/user\/buttons\/logout:hover {
  animation-name: psc-Header\/user\/buttons\/logout-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.psc-Header\/user\/buttons\/logout:hover {
  font-family: Arial;
  text-decoration: underline;
}

.psc-Header\/user\/buttons\/shadow {
}
.psc-Header\/user\/buttons\/shadow:hover {
  box-shadow: 0px 3px 5px #2B2B2B60;
}

.psc-Templates\/Card_1 {
  background-color: #D5D5D566;
  border-color: #AAAAAA;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
  margin-bottom: 4px;
  margin-left: 4px;
  margin-right: 4px;
  margin-top: 4px;
}

.psc-Templates\/Card_2 {
  border-color: var(--cc-panel-border);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
}

.psc-Templates\/DocumentButton {
  background-color: #363C40;
  border-color: #657078;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #F2F5F7;
  cursor: pointer;
}
.psc-Templates\/DocumentButton:hover {
  background-color: #244B60;
  border-color: #65C7FA;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  color: #FFFFFF;
}
.psc-Templates\/DocumentButton:active {
  background-color: #173748;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  color: #FFFFFF;
}

.psc-Templates\/DocumentButtonLight {
  background-color: #F5F8FA;
  border-color: #A5B4BD;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #243746;
  cursor: pointer;
}
.psc-Templates\/DocumentButtonLight:hover {
  background-color: #E1F1FA;
  border-color: #1685BD;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  color: #064563;
}
.psc-Templates\/DocumentButtonLight:active {
  background-color: #CBE5F3;
  border-color: #086894;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
  color: #064563;
}

.psc-Theme\/Background {
  background-color: var(--neutral-20);
  color: var(--neutral-90);
}

@keyframes psc-Header\/Alarm_Active-anim {
  0% {
    color: #E7F5FF;
    fill: #E7F5FF;
  }
  100% {
    color: #FF2E2E;
    fill: #FF2E2E;
  }
}
.psc-Header\/Alarm_Active {
  animation-name: psc-Header\/Alarm_Active-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}