/* BEGIN STYLESHEET */
/* ==========================================================================
   THEME VARIABLES — central place to tweak colors & spacing
   ========================================================================== */
:root {
	/* Brand & status colors */
	/*	Green accent:  --qual-3*/
	/*	Purple accent: --qual-1*/
	/*	Blue accent:   --info*/
	--primary:           var(--div-12);
	--primary-hover:     var(--div-13);
	--info:              var(--div-13);
/*	--success:           var(--success);*/
/*	--warning:           var(--warning);*/
/*	--error:             var(--error);*/
     --shadow:            var(--neutral-30);

	/* Alarm severities */
	--alarm-low:         var(--div-13);
	--alarm-medium:      var(--warning);
	--alarm-high:        var(--error);
	--alarm-urgent:      var(--error);

	/* Text roles */
	--text-primary:      var(--neutral-80);
	--text-secondary:    var(--neutral-60);
	--text-title:        var(--primary);

	/* Background roles */
	--bg-primary:        var(--neutral-10);
	--bg-secondary:      var(--neutral-20);
	--bg-hover:          var(--neutral-30);

	/* Spacing scale */
	--spacing-xs:        4px;
	--spacing-sm:        8px;
	--spacing-md:        16px;
	--spacing-lg:        32px;

	/* Shape */
	--border-radius:     4px;

	/* Navigation metrics */
	--nav-open-width:    250px;
	--nav-closed-width:  48px;
	--topbar-height:     50px;
	--nav-link-height:   40px;

	/* Breakpoints */
	--breakpoint-small:  450px;
	--breakpoint-medium: 800px;
}


/* ==========================================================================
   NAV HEADER — overall container
   ========================================================================== */
.psc-nav-header {
	background:   var(--bg-secondary);
	color:        var(--text-primary);
	font-size:    14px;
	line-height:  17px;
	border-radius: var(--border-radius);
}

.psc-nav-header-button {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         var(--spacing-xs);
	margin:          var(--spacing-xs);
	border-radius:   var(--border-radius);
	cursor:          pointer;
	transition:      background-color 0.2s ease;
	color:           var(--text-primary);
	fill:            currentColor;
}
.psc-nav-header-button:hover {
	background: var(--primary-hover);
}
/*.psc-nav-header-button:active {*/
/*	animation: bounce 0.4s ease-out;*/
/*}*/

.psc-nav-header-button-separator {
	width:     1px;
	background: var(--neutral-30);
	margin:     var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) var(--spacing-xs);
}

/* ==========================================================================
   GENERIC NAV BUTTON — shared nav-area buttons
   ========================================================================== */
.psc-nav-button {
	display:        inline-flex;
	align-items:    center;
	justify-content:center;
	padding:        var(--spacing-xs);
	margin:         var(--spacing-xs);
	border-radius:  var(--border-radius);
	cursor:         pointer;
}


/* ==========================================================================
   SIDE MENU LAYOUT & BEHAVIOR
   ========================================================================== */
.docked-view-left {
	width: auto !important;
}

.psc-nav {
	width:       var(--nav-closed-width);
	background:  var(--bg-secondary);
	transition:  width 0.2s ease-in-out;
}

.psc-nav-open,
.psc-nav:hover {
	width:      var(--nav-open-width);
	background: var(--bg-secondary);
	transition: all 0.2s ease-in-out;
}


/* ==========================================================================
   NAV LINK STYLES & SELECTED INDICATOR
   ========================================================================== */
.psc-nav-link {
	height:        var(--nav-link-height);
	margin:        var(--spacing-xs) var(--spacing-xs) 0 var(--spacing-xs);
	border-radius: var(--border-radius);
/*	font-size:     clamp(14px, 1vw, 14px);*/
}

.psc-nav-not-a-link {
	height:        var(--nav-link-height);
	margin:        var(--spacing-xs) var(--spacing-xs) 0 var(--spacing-xs);
	border-radius: var(--border-radius);
/*	font-size:     clamp(14px, 1vw, 14px);*/
}

.psc-nav-link:hover,
.psc-nav-link.psc-selected {
	color:            var(--text-primary);
	background-color: var(--bg-hover);
	cursor:           pointer;
	transition:       all 0.2s ease-in-out;
	font-weight:      bold;
}

.psc-nav-link.psc-selected-parent {
	color:            var(--text-primary);
	background-color: var(--bg-hover);
	cursor:           pointer;
	transition:       all 0.2s ease-in-out;
	font-weight:      bold;
}

.psc-nav-open .psc-nav-link.psc-selected::before {
	content:                    '';
	position:                   relative;
	left:                       var(--spacing-xs);
	top:                        15%;
	width:                      var(--spacing-xs);
	height:                     70%;
	background:                 var(--info);
	border-top-left-radius:     var(--spacing-xs);
	border-bottom-left-radius:  var(--spacing-xs);
	pointer-events:             none;
}

/* ==========================================================================
   CONTENT SHIFT WHEN NAV OPENS OR CLOSES
   ========================================================================== */
.client-root:has(.psc-nav-open) > .center-column.flex-col .center.view-parent {
	margin:     var(--topbar-height) 0 0 var(--nav-open-width) !important;
	transition: all 0.2s ease-in-out;
}

.client-root:not(:has(.psc-nav-open)) > .center-column.flex-col .center.view-parent {
	margin:     var(--topbar-height) 0 0 var(--nav-closed-width) !important;
	transition: all 0.2s ease-in-out;
}


/* ==========================================================================
   ANIMATION: Fade text & icon from disabled to alarm color
   ========================================================================== */
@keyframes fade-white-to-red {
	0%   { color: var(--callToAction--disabled); fill: currentColor; }
	100% { color: var(--alarm-urgent, #e76f51);            fill: currentColor; }
}

.psc-nav-alarm-item {
	animation: fade-white-to-red 1s ease-in-out infinite alternate;
}


/* ==========================================================================
   NAV-SECTION COLLAPSE & ARROW ROTATION
   ========================================================================== */
.psc-nav-section .psc-nav-section-link {
	max-height: 0;
	overflow:   hidden;
	transition: max-height 0.1s ease;
}

.psc-nav-section-open .psc-nav-section-link {
	max-height: 500px;
}

.psc-nav-section .psc-nav-link > svg:last-child {
	transition: transform 0.1s ease;
	transform:  rotate(0deg);
}

.psc-nav-section-open .psc-nav-link > svg:last-child {
	transform: rotate(90deg);
}


/* ==========================================================================
   NAV-SECTION SEPARATOR — thin bar between sections
   ========================================================================== */
.psc-nav-section-separator {
	height:     1px;
	background: var(--neutral-30);
	margin:     var(--spacing-xs) var(--spacing-sm) 0 var(--spacing-sm);
}


/* ==========================================================================
   POPUP CHROME REMOVAL — strip borders, shadows, and focus rings
   ========================================================================== */
.popup-header.ia_popup__header,
.body-wrapper,
.ia_popup,
.ia_popup:focus,
.popup-header.ia_popup__header:focus,
.body-wrapper:focus,
.close-icon:focus {
	border:         none !important;
	box-shadow:     none !important;
	outline:        none !important;
	border-radius:  var(--border-radius);
	padding:        var(--spacing-sm);
}


/* ==========================================================================
   DASHBOARD CARD STYLES
   ========================================================================== */
.psc-dash-card {
	position:       relative;
	z-index:        1;
	background:     var(--bg-primary);
	border:         1px solid var(--neutral-30);
	border-radius:  var(--border-radius);
	box-shadow:     0 2px 4px rgba(0,0,40,0.15) !important;
	margin:         var(--spacing-sm) var(--spacing-md);
	overflow:       visible;
}

.psc-dash-card-title {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	padding:        var(--spacing-sm) var(--spacing-md);
	background:     var(--bg-primary);
	color:          var(--text-title);
	font-size:      16px;
	line-height:    20px;
	font-weight:    600;
}

.psc-dash-card-embedded {
	padding: var(--spacing-md);
}

.psc-dash-card-row {
	display:        flex;
	flex-wrap:      wrap;
	gap:            var(--spacing-xs) var(--spacing-md);
	align-items:    center;
	margin-bottom:  var(--spacing-xs);
}
.psc-dash-card-row:last-child {
	margin-bottom: 0;
}

.psc-dash-card-label {
	flex:         1 1 auto;
	color:        var(--text-secondary);
	font-weight:  500;
}

.psc-dash-card-value {
	flex:         0 0 auto;
	color:        var(--text-primary);
	font-weight:  600;
}


/* ==========================================================================
   ALARM LIST ITEMS WITH SEPARATORS
   ========================================================================== */
.psc-alarm-item {
	display:        flex;
	justify-content: space-between;
	align-items:    center;
	padding:        var(--spacing-xs) var(--spacing-md);
	position:       relative;
}

.psc-alarm-item:not(:last-child)::after {
	content:     '';
	position:    absolute;
	bottom:      0;
	left:        0;
	right:       0;
	height:      1px;
	background:  var(--neutral-30);
}

.psc-alarm-name {
	font-weight: 500;
	color:       var(--text-title);
}

.psc-alarm-time {
	font-size:   12px;
	color:       var(--text-secondary);
}


/* ==========================================================================
   ALARM ICONS & BLINK ANIMATIONS
   ========================================================================== */
.psc-alarm-icon {
	display:        inline-block;
	width:          64px;
	height:         64px;
	margin-right:   var(--spacing-md);
	transition:     color 0.2s ease;
	fill:           currentColor;
}

@keyframes blink-low {
	0%,50%,100%  { color: var(--callToAction--disabled); }
	25%,75%      { color: var(--alarm-low, #2a9d8f); }
}
@keyframes blink-medium {
	0%,50%,100%  { color: var(--callToAction--disabled); }
	25%,75%      { color: var(--alarm-medium, #e9c46a); }
}
@keyframes blink-high {
	0%,50%,100%  { color: var(--callToAction--disabled); }
	25%,75%      { color: var(--alarm-high, #f4a261); }
}
@keyframes blink-urgent {
	0%,50%,100%  { color: var(--callToAction--disabled); }
	25%,75%      { color: var(--alarm-urgent, #e76f51); }
}

.psc-alarm-code-0 .psc-alarm-icon { color: var(--callToAction--disabled); }
.psc-alarm-code-1 .psc-alarm-icon { animation: blink-low 5s infinite; }
.psc-alarm-code-2 .psc-alarm-icon { color: var(--alarm-low, #2a9d8f); }
.psc-alarm-code-3 .psc-alarm-icon { animation: blink-low 5s infinite; }
.psc-alarm-code-4 .psc-alarm-icon { color: var(--alarm-medium, #e9c46a); }
.psc-alarm-code-5 .psc-alarm-icon { animation: blink-medium 5s infinite; }
.psc-alarm-code-6 .psc-alarm-icon { color: var(--alarm-high, #f4a261); }
.psc-alarm-code-7 .psc-alarm-icon { animation: blink-high 5s infinite; }
.psc-alarm-code-8 .psc-alarm-icon { color: var(--alarm-urgent, #e76f51); }
.psc-alarm-code-9 .psc-alarm-icon { animation: blink-urgent 5s infinite; }

@keyframes bounce {
	0%   { transform: scale(1); opacity: 1; }
	30%  { transform: scale(1.3); opacity: 0.7; }
	100% { transform: scale(1); opacity: 1; }
}

/*Toast notification styles*/
/* Toast pop-up look & feel */
.psc-toast-message-root{
  /* colours & backplate */
  background-color: var(--bg-secondary);
  color:            var(--neutral-100);

  /* 4 px rounded corners on every edge */
  border-radius: 5px;

  /* subtle drop shadow: 0 px X-offset | 4 px Y-offset | 4 px blur */
  box-shadow: 0 4px 4px rgba(0,0,0,.25);

  /* typography */
  font-size:   18px;
  font-weight: 500;
  line-height: 30px;
  text-align:  left;

  /* let badges or icons poke outside the box if needed */
  overflow: visible;
  position: relative;
/*  padding:         var(--spacing-xs);*/
}

.psc-toast-message-root::before {
	content:                    '';
	position:                   absolute;
	width:                      var(--spacing-sm);
	height:                     100%;
/*	background:                 var(--info);*/
	border-top-left-radius:     var(--spacing-xs);
	border-bottom-left-radius:  var(--spacing-xs);
	pointer-events:             none;
}
.psc-toast-message-notify::before {
	background:                 var(--info);
}
.psc-toast-message-caution::before {
	background:                 var(--qual-10);
}
.psc-toast-message-warning::before {
	background:                 var(--warning);
}
.psc-toast-message-critical::before {
	background:                 var(--error);
}
.psc-toast-message-success::before {
	background:                 var(--success);
}

/* ==========================================================================
   Toast message label (text container)
   ========================================================================== */
.psc-toast-message-label {
  /* horizontal padding 10px, vertical 4px */
  padding: 4px 15px;
}

/* ==========================================================================
   Toast message icon (e.g. close button)
   ========================================================================== */
.psc-toast-message-icon {
  padding: 6px;
}


.psc-toast-message-icon:hover {
	background-color: var(--bg-hover);
	cursor:           pointer;
/*	transition:       all 0.2s ease-in-out;*/
	font-weight:      bold;
/*	padding:        var(--spacing-xs);*/
/*	margin:         var(--spacing-xs);*/
	border-radius:  var(--border-radius);
}

/* ==========================================================================
   Toast message expansion section (e.g. “Show more”)
   ========================================================================== */
.psc-toast-message-expansion {
  background-color: var(--bg-hover);
  color:            var(--neutral-100);

  /* 1px solid border in theme’s neutral color */
/*  border: 1px solid var(--neutral-100);*/

  /* 4px rounded corners on all edges */
  border-radius:  var(--border-radius);

  /* typography */
  font-size:   16px;
  font-weight: 500;
  line-height: 30px;
  text-align:  left;

  /* box model */
  margin:  var(--spacing-xs);
  padding: 0px 0px 0px var(--spacing-md);

  /* allow content to overflow if needed */
  overflow: visible;
}

.psc-timeout-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width:  100%;
  border-radius:  var(--border-radius);
  animation-name: shrink-time;
  animation-timing-function: linear;
  animation-fill-mode: forwards;   /* stay at 0% when done */
}

.psc-timeout-bar-notify {
	background:                 var(--info);
}
.psc-timeout-bar-caution {
	background:                 var(--qual-10);
}
.psc-timeout-bar-warning {
	background:                 var(--warning);
}
.psc-timeout-bar-critical {
	background:                 var(--error);
}
.psc-timeout-bar-success {
	background:                 var(--success);
}

@keyframes shrink-time {
  from { width: 100%; }
  to   { width:   0%; }
}

/* Toast Notification CSS animations */
@keyframes slide-in-right-enter {
	from {transform: translateX(125%);}
	to {transform: translateX(0%);}
}

@keyframes slide-in-right-exit {
	from {transform: translateX(0%);}
	to {transform: translateX(125%);}
}

@keyframes slide-in-left-enter {
	from {transform: translateX(-125%);}
	to {transform: translateX(0%);}
}

@keyframes slide-in-left-exit {
	from {transform: translateX(0%);}
	to {transform: translateX(-125%);}
}

@keyframes slide-in-top-enter {
	from {transform: translateY(-125%);}
	to {transform: translateY(0%);}
}

@keyframes slide-in-top-exit {
	from {transform: translateY(0%);}
	to {transform: translateY(-125%);}
}

@keyframes slide-in-bottom-enter {
	from {transform: translateY(125%);}
	to {transform: translateY(0%);}
}

@keyframes slide-in-bottom-exit {
	from {transform: translateY(0%);}
	to {transform: translateY(125%);}
}

@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fade-out {
	from {opacity: 1;}
	to {opacity: 0;}
}
/* ==========================================================================
   Tab Container styles
   ========================================================================== */
/*	Prettier Tabs*/

.ia_tabContainerComponent__tab--modern {
    background:     transparent;
    box-shadow:     none;
    border-radius: var(--border-radius) var(--border-radius) 0 0 ;
}

.ia_tabContainerComponent__tab--modern:hover {
    background:      var(--bg-hover);
}

.ia_tabContainerComponent__tab--modern--inactive:hover {
    background:     transparent;
    border-color:   var(--primary);
    border-width:   var(--spacing-xs);
    box-shadow:     none;
    border-radius: var(--border-radius);
}

.ia_tabContainerComponent__tab--modern--active {
    background:     transparent;
    border-color:   var(--primary);
    border-width:   var(--spacing-xs);
    box-shadow:     none;
    border-radius: var(--border-radius);
}

.ia_tabContainerComponent__content {
    background:     transparent;
    border-style:   none;
}

.ia_tabContainerComponent__tabMenuRight--modern{
	border-bottom:   transparent;
}

/* ==========================================================================
   Main STYLES for Modal views
========================================================================== */

.psc-title {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
/*	padding:        var(--spacing-sm) var(--spacing-md);*/
	background:     var(--bg-primary);
	color:          var(--text-title);
	font-size:      16px;
/*	line-height:    20px;*/
	font-weight:    600;
	cursor:         default;
}

.psc-title-sub {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
/*	padding:        var(--spacing-sm) var(--spacing-md);*/
	background:     var(--bg-primary);
	color:          var(--text-title);
	font-size:      12px;
/*	line-height:    20px;*/
	cursor:         default;
}

.psc-progress-label {
	font-size:      11.5px;
	font-weight:    500;
	white-space:    nowrap;
}

.psc-progress-bar {
	background:     var(--primary);
	margin:         15px
}

.psc-primary-button {
	font-size:      14px;
	border-radius: 7px;
}

.psc-primary-button:enabled {
	background:     var(--primary);
}

.psc-primary-button:enabled:hover {
	background:       var(--primary-hover);
	transition:       all 0.2s ease-in-out;
}

.psc-primary-button:disabled {
	color:          var(--neutral-20);
	background:     var(--neutral-40);
	cursor:         not-allowed;
}

.psc-primary-button:focus,
.psc-secondary-button:focus{
     outline:          none;
}

.psc-secondary-button {
	font-size:      14px;
	border-radius: 7px;
}

.psc-secondary-button:enabled {
	background:     transparent;
	color:          var(--text-secondary);
}


.psc-secondary-button:disabled {
	color:          var(--text-secondary);
	background:     var(--callToAction--disabled);
	cursor:         not-allowed;
}

.psc-secondary-button:enabled:hover {
/*	color:            var(--text-primary);*/
/*	background-color: var(--bg-hover);*/
	border-color:     var(--neutral-80);
	color:            var(--neutral-80);
	transition:       all 0.2s ease-in-out;
	box-shadow:       none;
}

.psc-page {
  background-color: var(--neutral-10);
  border-style: solid;
  border-width: 1px;
  border-color: var(--neutral-30);
  border-radius: 12px;
  overflow: hidden;
  margin: 15px;
}

/* BEGIN STYLE CLASSES */