/* BEGIN STYLESHEET */
:root {
	--nav-open-width: 300px;
	--nav-closed-width: 50px;
	--nav-width: 0px;
	--topbar-height: 0px;
	--nav-link-height: 40px;

	--nav--bgColor: var(--neutral-10);
	--nav--color: var(--label);
	--nav-section-open--bgColor: var(--neutral-30);
	--nav-link-active--bgColor: var(--callToAction--active);
	--nav-link-active--color: var(--white);
	--nav-link-hover--bgColor: var(--callToAction--hover);
	--nav-link-hover--color: var(--nav-link-active--color);
	--nav-button--bgColor: transparent;
	--nav-button--color: var(--label);
	--topbar--bgColor: var(--neutral-10);
	--topbar--color: var(--label);
	--nav-padding-width: 5px;

	--breakpoint-small: 768;
	--breakpoint-medium: 1280;
}

/* DOCKS */
.docked-view-left {
	width: auto !important;
	height: calc(100% - var(--topbar-height)) !important;
}

/* NAV */
.psc-nav {
	width: var(--nav-width);
	border-right: 1px solid var(--border);
	background-color: var(--nav--bgColor);
	color: var(--nav--color);
	padding: 10px 0px;
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
	z-index: 100;
}

.psc-nav-open {
	width: var(--nav-open-width);
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.psc-nav-button {
	background-color: var(--nav-button--bgColor);
	color: var(--nav-button--color);
}

/* NAV LOGO */
.psc-nav-logo-1 {
	transition: all 0.2s ease-in-out 0.5s;
}

.psc-nav-logo-2 {
	max-width: 0;
	opacity: 0;
}

.psc-nav-open .psc-nav-logo-1 {
	max-width: 0;
	opacity: 0;
	transition: all 0.2s ease-in-out 0.3s;
}

.psc-nav-open .psc-nav-logo-2 {
	max-width: 256px;
	opacity: 1;
	transition-delay: 0.2s;
}

/* NAV SECTION */
.psc-nav-section {
	max-height: var(--nav-link-height);
	gap: 5px;
}

.psc-nav-open .psc-nav-section-open {
	max-height: 1000px;
	transition: max-height 0.4s ease-in-out;
	color: var(--label);
	border-radius: var(--borderRadius);
	background-color: var(--nav-section-open--bgColor);
}

.psc-nav-open .psc-nav-section .psc-nav-repeater {
	gap: 5px;
}

.psc-nav:not(.psc-nav-open) .psc-nav-section .psc-nav-repeater .psc-nav-link>svg:nth-child(1) {
	transition: visibility 0.2s ease-in-out 0.2s;
}

.psc-nav-open .psc-nav-section .psc-nav-repeater .psc-nav-link>svg:nth-child(1) {
	visibility: hidden;
}

/* NAV LINK */
.psc-nav-link {
	height: var(--nav-link-height);
	border-radius: var(--borderRadius);
	gap: 5px;
}

.psc-nav-link .ia_labelComponent,
.psc-nav-link>svg:nth-child(3) {
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all 0.1s ease-in-out;
}

.psc-nav-open .psc-nav-section-open .psc-nav-link .ia_labelComponent,
.psc-nav-open .psc-nav-link .ia_labelComponent {
	opacity: 1;
	transition: opacity 0.2s ease-in-out 0.2s;
}

.psc-nav-section-open .psc-nav-link>svg:nth-child(3),
.psc-nav-section-open .psc-nav-link>svg:nth-child(3) {
	opacity: 1;
	transform: rotate(90deg);
	transition: transform 0.2s ease-in-out;
}

.psc-nav-open .psc-nav-section svg {
	opacity: 1;
}

.psc-nav-link:hover,
.psc-nav-link.psc-selected:hover {
	color: var(--nav-link-hover--color);
	background-color: var(--nav-link-hover--bgColor);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.psc-nav-link.psc-selected {
	background-color: var(--nav-link-active--bgColor);
	color: var(--nav-link-active--color);
	transition: all 0.2s ease-in-out;
}

.psc-nav:not(.psc-nav-open) .psc-nav-section .psc-nav-link.psc-selected-parent {
	color: var(--nav-link-active--color);
	background-color: var(--nav-link-active--bgColor);
}
.psc-nav .psc-nav-section:not(.psc-nav-section-open) .psc-nav-link.psc-selected-parent {
	color: var(--nav-link-active--color);
	background-color: var(--nav-link-active--bgColor);
}

.psc-nav:not(.psc-nav-open) .psc-not-a-link {
	max-height: 0;
}

.psc-nav:not(.psc-nav-open) .psc-not-a-link .ia_labelComponent {
	opacity: 0;
}

.psc-nav-open .psc-nav-link .ia_labelComponent {
	opacity: 1;
	transition: opacity 0.2s ease-in-out 0.2s;
}

.psc-not-a-link:hover {
	color: var(--label);
	background-color: transparent !important;
	cursor: default !important;
	transition: all 0.2s ease-in-out;
}

/* NAV TREE */
.psc-nav .tree {
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.2s ease-in-out 0.2s;
}

.psc-nav .tree .node-wrapper {
	display: block;
}

.psc-nav-open .psc-nav-section-open .tree {
	opacity: 1;
	transition: opacity 0.2s ease-in-out 0.2s;
}

.psc-nav .ia_treeComponent__node {
	border-radius: var(--borderRadius);
	cursor: pointer;
	font-size: 16px;
}

.psc-nav .tree-row {
	margin-bottom: 5px;
}

.psc-nav .ia_treeComponent__node:hover {
	color: var(--nav-link-active--color);
	background-color: var(--nav-link-hover--bgColor);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.psc-nav .ia_treeComponent__node--selected {
	background-color: var(--nav-link-active--bgColor);
	color: var(--nav-link-active--color);
	transition: all 0.2s ease-in-out;
}

.psc-nav .ia_treeComponent__node .tree-item {
	height: var(--nav-link-height) !important;
}

.psc-nav .ia_treeComponent__node .tree-item-label {
	font-weight: normal;
}

.psc-nav .ia_treeComponent__alignmentGuide,
.psc-nav .terminal-node .ia_treeComponent__node__icon {
	display: none;
}

.psc-nav .ia_treeComponent__node .node-icon,
.psc-nav .ia_treeComponent__node .expand-icon {
	fill: var(--label);
}

.psc-nav .ia_treeComponent__node:hover .node-icon,
.psc-nav .ia_treeComponent__node:hover .expand-icon {
	fill: var(--nav-link-active--color);
}

.psc-nav .ia_treeComponent__node--selected .node-icon,
.psc-nav .ia_treeComponent__node--selected .expand-icon {
	fill: var(--nav-link-active--color);
}

/* Overrides the default scrollbar styles */
.psc-nav::-webkit-scrollbar {
	width: 3px;
	scrollbar-width: thin;
	scrollbar-color: var(--neutral-20) var(--neutral-90);
}

.psc-nav::-webkit-scrollbar-track {
	background: transparent;
}

.psc-nav::-webkit-scrollbar-thumb {
	background: var(--neutral-50);
	border-radius: 1px;
}

.psc-nav::-webkit-scrollbar-thumb:hover {
	background: var(--neutral-70);
}

/* Override the rules governing the dock mode (push or cover) */
.center.view-parent {
	max-height: calc(100% - var(--topbar-height)) !important;
	max-width: calc(100% - var(--nav-width)) !important;
	margin: var(--topbar-height) 0px 0px var(--nav-width) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.psc-no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Phone nav handle — pull tab on left edge */
.nav-handle {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 56px;
	background: var(--callToAction--active);
	border-radius: 0 14px 14px 0;
	z-index: 999;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.25);
	color: var(--white);
}
.nav-handle:active {
	opacity: 1;
	transform: translateY(-50%) scale(1.15);
}
.nav-handle svg {
	pointer-events: none;
}

/* Phone backdrop overlay */
.nav-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 99;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-backdrop.active {
	opacity: 1;
	pointer-events: auto;
}

/* Tank hi-alarm blink */
@keyframes tankAlarmBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.tank-alarm-blink {
  animation: tankAlarmBlink 1s step-end infinite;
}

/* Pump outlet pressure hi-alarm blink */
@keyframes pumpAlarmBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.psc-pump-alarm-blink {
  animation: pumpAlarmBlink 1s step-end infinite;
}

/* Border alarm blink (red) */
@keyframes borderAlarmBlink {
  0%, 100% { border-color: #FF0000; }
  50%      { border-color: transparent; }
}

.psc-border-alarm-blink {
  animation: borderAlarmBlink 1s step-end infinite;
}

/* Border caution blink (orange) */
@keyframes borderCautionBlink {
  0%, 100% { border-color: #FFA500; }
  50%      { border-color: transparent; }
}

.psc-border-caution-blink {
  animation: borderCautionBlink 1s step-end infinite;
}

/* ============================================================
   RESPONSIVE UTILITIES & MODERN CARD SYSTEM
   ============================================================ */

/* --- Page card container --- */
.psc-page-card {
	background: var(--neutral-30);
	border: 1px solid var(--neutral-50);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

/* --- Modern section header bar --- */
.psc-section-header {
	background: var(--neutral-30);
	border-bottom: 2px solid var(--callToAction--active);
	color: var(--label);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 10px 16px;
}

/* --- Toolbar row (icon actions) --- */
.psc-toolbar {
	gap: 8px;
	padding: 6px 12px;
}

.psc-toolbar svg {
	cursor: pointer;
	transition: transform 0.15s ease, color 0.15s ease;
}

.psc-toolbar svg:hover {
	transform: scale(1.2);
	color: var(--callToAction--hover);
}

/* --- Page title bar --- */
.psc-page-title {
	background: linear-gradient(135deg, var(--neutral-30) 0%, var(--neutral-20) 100%);
	border-bottom: 2px solid var(--callToAction--active);
	color: var(--label);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 14px 20px;
}

/* --- Status badge --- */
.psc-status-badge {
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	white-space: pre-wrap;
	line-height: 1.5;
}

/* --- Table wrapper for horizontal scroll on mobile --- */
.psc-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.psc-table-scroll .ia_table__viewport {
	min-width: 500px;
}

/* ============================================================
   POPUP MOBILE RESPONSIVENESS
   ============================================================ */

/* Make popups usable on phones: near-fullscreen with accessible close */
@media (max-width: 768px) {
	.ia_popup.popup {
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px) !important;
		max-height: calc(100vh - 32px) !important;
		left: 8px !important;
		top: 16px !important;
		right: auto !important;
		border-radius: 12px;
		overflow: hidden;
	}

	.ia_popup__header.popup-header {
		min-height: 44px;
		padding: 0 12px;
		font-size: 16px;
		font-weight: 600;
	}

	.ia_popup .popup-close {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px;
		min-height: 36px;
	}

	.ia_popup .popup-close svg {
		width: 24px !important;
		height: 24px !important;
	}

	.popup-body.view-parent {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		max-height: calc(100vh - 96px);
	}

	/* Modal backdrop */
	.popups-pane > .modal {
		background: rgba(0, 0, 0, 0.5) !important;
	}
}

/* Tablet: cap popup width */
@media (min-width: 769px) and (max-width: 1024px) {
	.ia_popup.popup {
		max-width: 90vw !important;
		max-height: 85vh !important;
	}

	.popup-body.view-parent {
		overflow-y: auto !important;
	}
}

/* ============================================================
   RESPONSIVE TABLE COLUMNS
   ============================================================ */

/* On phones, hide less important table columns */
@media (max-width: 600px) {
	.psc-hide-phone {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.psc-hide-tablet {
		display: none !important;
	}
}

/* Delta-inhibit countdown label on the flowmeter tile. Caution orange matches
   .psc-border-caution-blink; shown only while the per-zone startup inhibit is active. */
.psc-delta-inhibit {
	color: #FFA500;
	font-weight: 600;
	text-align: center;
	font-size: 13px;
}

/* BEGIN STYLE CLASSES */
.psc-Border {
  border-bottom-color: var(--neutral-60);
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-left-color: var(--neutral-60);
  border-left-style: solid;
  border-left-width: 2px;
  border-right-color: var(--neutral-60);
  border-right-style: solid;
  border-right-width: 2px;
  border-top-color: var(--neutral-60);
  border-top-style: solid;
  border-top-width: 2px;
}

.psc-BorderFail {
  border-bottom-color: #FF0000;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-left-color: #FF0000;
  border-left-style: solid;
  border-left-width: 2px;
  border-right-color: #FF0000;
  border-right-style: solid;
  border-right-width: 2px;
  border-top-color: #FF0000;
  border-top-style: solid;
  border-top-width: 2px;
}

.psc-Form\/formRowCompact {
  padding-bottom: 2px;
  padding-top: 2px;
}

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

.psc-MainTheme\/HoverColor {
}
.psc-MainTheme\/HoverColor:hover {
  background-color: var(--callToAction--hover);
}

.psc-MainTheme\/MainBackground {
  background-color: var(--neutral-20);
}

.psc-MainTheme\/Text {
  color: var(--label);
}

.psc-RosterManagement\/Buttons\/Removal {
  background-color: #FF0000;
}

.psc-RosterManagement\/Header {
  background-color: var(--neutral-80);
  color: var(--neutral-20);
  font-family: Arial;
  font-size: 20px;
  font-weight: lighter;
  text-align: start;
  text-indent: 6px;
}

.psc-RosterManagement\/Icons {
  cursor: pointer;
  margin-top: 5px;
}

.psc-RosterManagement\/Tables {
  border-style: solid;
  border-width: 1px;
  margin: 10px;
  margin-right: 0px;
}

.psc-UserManagement\/Headers {
  background-color: var(--neutral-80);
  color: var(--neutral-20);
  font-family: Arial;
  font-size: 20px;
  font-weight: lighter;
  text-align: start;
  text-indent: 6px;
}

.psc-UserManagement\/InputFont {
  font-family: Arial;
  font-size: 14px;
}

.psc-UserManagement\/LeftVerticalHeaderBar {
  border-left-color: var(--neutral-60);
  border-left-style: solid;
  border-left-width: 1px;
}

.psc-UserManagement\/SectionHeaders {
  font-family: Arial;
  font-size: 15px;
  margin-bottom: 9px;
}

.psc-UserManagement\/TableEditorIcons {
  cursor: pointer;
  margin-bottom: 1px;
  margin-top: 5px;
}