:root{
	--ticketWidth: 4in;
	--ticketHeight: 0.9in;
	--actionPlanKpiWidth: 210px;

	--navLeftWidth: 300px;

	--collapsableOuterBGColor-base: var(--bg-secondary);
	--collapsableOuterBGColor-active: var(--bg-secondary);

    ::-webkit-scrollbar-track{background-color: transparent;}
    ::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.1); border-radius: 10px;}
    ::-webkit-scrollbar-thumb:hover{background-color: rgba(0,0,0,0.2); cursor: pointer;}
    ::-webkit-scrollbar-thumb:active{background-color: rgba(0,0,0,0.25);}
}


@media print {
	body {background: none !important;}
}
/*.navLeft{overflow-y: hidden;}*/
/* Tooltip container positioning */
.navLeft .btn.withChild {
    position: relative;
}

/* Fixed position tooltip that escapes overflow */
.navLeft .btn.withChild .navTooltip {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: calc(var(--defaultNavLeftWidthClosed, 60px) - 0px); /* Position at nav edge when closed */
    display: flex;
    align-items: center;
    height: 36px;

    /* Inherit vertical position from parent button */
    top: inherit;
    /*margin-top: 8px; !* Better vertical alignment *!*/
    margin-left: 0;

    /* Flat background with gradient border styling */
    background: var(--primary); /* Flat navbar blue background */
    color: var(--text-inverse);
    padding: 0 10px; /* Smaller padding */
    border-radius: 0 8px 8px 0; /* Subtler radius */
    font-size: 0.8rem;
    font-weight: 400; /* Normal weight */
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(37, 86, 151, 0.25); /* Subtle shadow */

    /* Gradient border using pseudo-element technique */
    /*position: relative;*/
    border: 2px solid transparent;
    background-clip: padding-box;

    /* Faster, smoother animation */
    transition: all 120ms ease; /* Faster transition */
    pointer-events: none;
    z-index: 1001;
}
.navLeft .btn .primary{
    transition: all 120ms ease; /* Faster transition */
}

/* Create gradient border effect */
.navLeft .btn.withChild .navTooltip::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--primary);
    /*background: linear-gradient(135deg, #3b6fa7 0%, #3b6fa7 25%, #255697 50%, #1d4478 75%, #1d4478 100%);*/
    border-radius:  0 8px 8px 0;
    z-index: -1;
}

/* Adjust position when nav is active/open */
.navLeft.active .btn.withChild .navTooltip {
    left: calc(var(--navLeftWidth, 300px) - 8px);
}

/*!* Simpler arrow pointing left *!*/
/*.navLeft .btn.withChild .navTooltip::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    right: 100%;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*    width: 0;*/
/*    height: 0;*/
/*    border-style: solid;*/
/*    border-width: 4px 5px 4px 0; !* Smaller arrow *!*/
/*    border-color: transparent #255697 transparent transparent; !* Match middle gradient color *!*/
/*}*/

/* Show tooltip on hover with slight delay */
.navLeft:not(.active) .btn.withChild:hover .navTooltip {
    visibility: visible;
    opacity: 1;
    margin-left: 0; /* Closer to button */
    /*transition-delay: 100ms; !* Small delay before showing *!*/
    box-shadow: 0 2px 10px rgba(37, 86, 151, 0.35), 0 0 20px rgba(37, 86, 151, 0.15); /* Enhanced shadow on hover */
}

/*hide complete in mobile and tablet mode*/
@media (max-width: 900px) {
    .navLeft .btn.withChild .navTooltip {display: none;}
}

body{
	background-color: var(--bg-primary);
	/*background-image: url('../img/bg-blue2.png');*/
	/*background-repeat: repeat;*/
	font-size: 0;
	margin: 0;
	padding: 0;
	position: relative;
	color: var(--text-primary);
}

.tab-container {max-width: unset;}
.tab-content {
    /*border: 1px solid #ccc;*/
    padding: 0;
    background: var(--bg-primary);
    /*border-radius: 0 0 4px 4px;*/
}

hr{margin: 10px 3px 7px;}
h4{font-size: 15px;margin: 0 0 5px;}

h2.kbi.jobStep{text-align: left; margin-left: 5px;}

.headerBar .btn i{font-size: 1em;}
.headerBar .btn.noIcon i { display: none; }
.headerBar .btn.clientImg {margin: 0; padding: 7px; box-sizing: border-box; height: var(--headBarHeight);}
.headerBar .btn.clientImg img{ height: 36px; object-fit: cover; }

.main.filled > div{max-width: calc(100% - 20px);}


section.block.short.kpiBlock{justify-content: space-around;}

section.block.short.kpiBlockV2.vertical {flex-direction: column; align-items: center; justify-content: flex-start;}
section.block.short.kpiBlockV2.vertical > div.kpiBoxV2{width: 100%; margin: 10px 0;}
section.block.short.kpiBlockV2 > div.kpiBoxV2{width: auto;max-width: 300px;flex-basis: 15%;min-width: 140px;overflow: hidden;margin: 5px;border-radius: 0;}
section.block.short.kpiBlockV2 > div.kpiBoxV2.fullWidth{width: auto;flex-basis: initial;}
section.block.short.kpiBlockV2 > div.kpiBoxV2.fullWidth.w100{width: 100%;}

section.block.short.kpiBlockV2 > div.kpiBox{width: 100%; max-width: calc(20% - 30px); min-width: 100px; border: #ccc solid 1px; box-sizing: border-box; box-shadow: 3px 3px 10px 0 #ddd; margin: 0 40px 40px 0; border-radius: 0;}
section.block.short.kpiBlockV2.smlRowSpacing > div.kpiBox{margin: 0 40px 10px 0;}
section.block.short.kpiBlockV2 > div.kpiBox:nth-child(4n){margin-right: 0;}
section.block.short.kpiBlockV2 .kpiBox h1{ color: var(--text-primary); font-size: clamp(0.5em, 2vw, 0.7em); font-weight: 600; font-family: 'Spline Sans', sans-serif; margin-top: 3px;}
section.block.short.kpiBlockV2 .kpiBox h4{ color: var(--text-secondary); font-size: 0.4em; font-family: 'Spline Sans', sans-serif;}
section.block.short.kpiBlockV2 .kpiBox span{ margin-bottom: 10px; font-size: clamp(0.7em, 3.5vw, 1.1em);}
section.block.short.kpiBlockV2{justify-content: flex-start; flex-wrap: wrap; padding: 0; overflow: hidden; margin-top: 0;}
section.block.short.kpiBlockV2.center{justify-content: space-around;}

section.block.short.kpiBlockV2 .kpiBox.flashRed span{color: #65a9ff;}
section.block.short.kpiBlockV2 .kpiBox.flashRed h1{color: var(--text-inverse);}
section.block.short.kpiBlockV2 .kpiBox.flashRed h4{color: #c7c7c7;}
section.block.short .kpiBoxV2 span{font-size: clamp(1.2rem, 3.5vw, 1.7rem);}


section.block.long.miniCol .longBlock.btn{flex-direction: column-reverse; justify-content: center;}
section.block.long.miniCol .longBlock.btn .subject{font-size: 0.8em;}
section.block.long.miniCol.narrow .longBlock .kpiBox{width: 100%;}
section.block.long.miniCol .kpiBox .kpi{display: flex; width: 100%; justify-content: center;}
section.block .kpiBox .kpi.small{font-size: 0.7em;}


/*print objects*/
.poCU_PrintLabels_001{font-size: 0.8em;}
#labelPrintContainer{display: none;}

.labelPrintQR{width: 1in; padding: 2mm; box-sizing: border-box; margin: 0; font-weight: 600; text-align: right;}
.labelPrintQR img{width: 1in; aspect-ratio: 1; height: auto;}

.labelPrintQR.large{padding: 0 20mm;}
.labelPrintQR.large img{width: 100%; aspect-ratio: 1; height: auto;}
.labelPrintCode{width: var(--ticketWidth); text-align: left; font-size: 4mm; padding: 0 20px; box-sizing: border-box;}
.labelPrintCode .wrap{white-space: normal;}


.loading{
	display: none;
	width: calc(100% - 50px);
	height: calc(100vh);
	margin-top: 0;
	margin-left: 50px;
}

img.previewPopup{width: 100%;}
.popUpBox.smallV2:not(.locationOptions):not(.small){
	position: fixed;
	left: 0;
	top: 100px;
	margin: 0 calc(50% - clamp(250px, 100%, 500px)/2);
	/*transform: translateX(-50%);*/
	width: clamp(250px, 100%, 500px);
	padding: 25px;
}

.popUpBox.smallV2:not(.locationOptions):not(.small).w800{
	/*top: 60px;*/
	--modalWidth: clamp(300px, 100%, 800px);
	margin: 0 calc(50% - var(--modalWidth)/2);
	width: var(--modalWidth);
}

.loading.expand{ width: calc(100% - var(--navLeftWidth)); margin-left: var(--navLeftWidth);}

.popUpBox:not(.locationOptions):not(.small)
{left: 80px; max-width: 100%; width: calc(100% - var(--defaultNavLeftWidthClosed) - 60px); margin: 80px 0 20px; padding: 30px 40px 50px; max-height: calc(100vh - 100px); transition: left 0.3s, width 0.3s;}

.navLeft.active ~ .main .popUpBox,
.navLeft.active ~ .popUpBox,
.popUpBox:not(.locationOptions):not(.small):has(~ .navLeft.active)
{left: calc(var(--navLeftWidth) + 30px); width: calc(100% - var(--navLeftWidth) - 60px);}


.popUpBox.flood:not(.locationOptions):not(.small),
.popUpBox.flood{padding: 10px; left: var(--defaultNavLeftWidthClosed); top: -30px; width: calc(100% - var(--defaultNavLeftWidthClosed)); max-height: calc(100vh - 50px); }
.popUpBox.flood h1 + div{display: none;}
.popUpBox.flood iframe{height: calc(100vh - 130px); max-height: 100%;}


.main .fh25{overflow: hidden; height: 25vh;}
.main .fh20{overflow: hidden; height: 20vh;}
.main .fh15{overflow: hidden; height: 15vh;}
.main .fh40{overflow: hidden; height: 40vh;}

.locationOptions{margin-top: 100px;}

section.block.long.xLargeCenter .longBlock.formInput{height: initial;}
section.block.long.xLargeCenter .longBlock.formInput input[type='text']{font-size: 38px; line-height: 45px; text-align: center; border-width: 1px;}
section.block.long.textBoxBorder .longBlock.formInput input[type='text']{border: none; background-color: #c3c3c3; padding: 10px 20px; width: 60%;}
section.block.long.xLargeCenter .longBlock.formInput .subject{align-items: center; margin-bottom: 20px;}
section.block.long.xLargeCenter .longBlock.formInput .subject.flexStart{align-items: flex-start; margin-bottom: 20px;}
section.block.long.xLargeCenter .longBlock.formInput .subject label{font-size: 1.2em}

section.block.long.xLargeCenter .longBlock.formInput .kpiBox {margin-bottom: 43px;margin-left: 10px;flex-direction: column-reverse;align-items: center;}
section.block.long.narrow.form.clearBg,
section.block.long.clearBg
{background-color: transparent;}
section.block.long.narrow.form.clearBg input,
section.block.long.narrow.form.clearBg select{background-color: transparent;}
section.block.long.narrow.labelPositionTop .longBlock{margin-top: 0;}

#kpiQtyTarget { font-size: 1rem; color: var(--text-secondary); }
.kpiBoxV2.redBlink {animation: kpiBgBlinker 1s linear infinite;}
/*section.block .kpiBoxV2.redBlink .kpi.blue,*/
/*.kpiBoxV2.redBlink #kpiQtyTarget,*/
/*section.block.short .kpiBoxV2.redBlink h4,*/
/*section.block.short .kpiBoxV2.redBlink h1 {color: #fff;}*/

@keyframes kpiBgBlinker {
	0% {background-color: var(--msgredhi);}
	49% {background-color: var(--msgredhi);}
	50% {background-color: var(--bg-primary);}
	99% {background-color: var(--bg-primary);}
}

.rfTagRetrieve {width: 500px; height: 200px; border-radius: 20px; display: inline-flex; margin: 30px 0 0; padding: 20px; background-color: var(--bg-primary); border: dashed 3px #777;	 align-items: center; justify-content: center; flex-direction: column;}
.rfTagRetrieve.active {background-color: #e0f5e1; border: dashed 3px green;}
.rfTagRetrieve.timeout {background-color: var(--bg-primary); border: dashed 3px var(--msgred);}
.rfTagRetrieve #statusText {font-size: 20px; font-weight: 600; color: #2172de; margin-bottom: 10px;}
.rfTagRetrieve.active > #statusText { color: green; }
.rfTagRetrieve.timeout > #statusText { color: var(--msgred); }
.rfTagRetrieve.active #rfTagName,
.rfTagRetrieve.timeout #rfTagName {font-size: 30px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; max-width: 490px;}

/*--- Stacked Icons ---*/
.icon-stack { position: relative; width: 100%; min-height: 50px; }
.icon-stack > i { position: absolute; left: 0; right: 0; }
.icon-stack > i:nth-of-type(2) { transform: scale(0.5); }

/*--- Internal "Remote" Displays ---*/
.realtimeDisplayMainInternal { height: calc(100vh - 50px); margin-top: 50px; padding: 0; }

/* Live Remote Plant */
body#liveRemotePlant {background-image: none; background-color: var(--bg-primary);}
#liveRemotePlant .main.realtimeDisplayMainInternal.filled { display: flex; flex-direction: column; justify-content: space-between; font-family: 'Roboto', sans-serif; font-size: 1.3vw; opacity: 0; transition: opacity 400ms; }
#liveRemotePlant .main.realtimeDisplayMainInternal.filled.active{ opacity: 1;}
.realtimeDisplayMainInternal #linesContainer { display: flex; align-items: stretch; flex-direction: column; flex-wrap: wrap; align-content: stretch; justify-content: flex-start; padding: 0 25px 25px; gap: 3vh; max-width: none; }
.realtimeDisplayMainInternal #linesContainer h1 { margin-bottom: 0; font-size: 5vh; }
.realtimeDisplayMainInternal #linesContainer .plantLineBox {display: grid; grid-template-columns: 1fr 1fr; gap:clamp(10px, 2%, 30px); box-sizing: border-box;}
.realtimeDisplayMainInternal #linesContainer .line { flex: 1 0 15vh; max-height: 25vh; display: flex; flex-direction: column; }
.realtimeDisplayMainInternal #linesContainer .lineInfo { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 15px; box-sizing: border-box; font-size: 2.5vh; }
.realtimeDisplayMainInternal #linesContainer .lineNameTime { text-align: left; }
.realtimeDisplayMainInternal #linesContainer .lineNameTime > span { font-weight: bold; font-size: 3.5vh; margin-right: 15px; }
.realtimeDisplayMainInternal #linesContainer .progressBar { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25) inset; width: 100%; min-height: 50px; background: repeating-linear-gradient(-45deg, #d9d9d9, #D9D9D9 10px, #E7E6E6 10px, #E7E6E6 20px); border-radius: 8px; flex-grow: 1; overflow: hidden; text-align: left; font-size: 0; }
.realtimeDisplayMainInternal #linesContainer .progressBar > div { height: 100%; display: inline-block; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25) inset; }
.realtimeDisplayMainInternal #linesContainer .progressBar .uptime { background-color: #30B438; }
.realtimeDisplayMainInternal #linesContainer .progressBar .downtime { background-color: #CD3E3E; }

/* Live Remote Line */
body#liveRemoteLine {background-image: none; background-color: var(--bg-primary);}
#liveRemoteLine .main.realtimeDisplayMainInternal.filled { display: flex; font-family: 'Roboto', sans-serif; font-size: 1.3vw; opacity: 0; transition: opacity 400ms; }
#liveRemoteLine .main.realtimeDisplayMainInternal.filled.active{ opacity: 1;}
.main.realtimeDisplayMainInternal.filled .sidebar { width: 30vw; /*height: 100vh; background: #D9E9F9;*/ display: flex; flex-direction: column; flex-wrap: nowrap; padding: 0; justify-content: flex-start; border-right: 1px solid #eeeeee; }
.main.realtimeDisplayMainInternal.filled .sidebar h1 { margin: 0; font-size: 5vh; }
.main.realtimeDisplayMainInternal.filled .sidebar .clientLogo { padding: 15px; background: #D9E9F9; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); }
.main.realtimeDisplayMainInternal.filled .sidebar .clientLogo img { height: auto; width: calc(100% - 8vw); }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 { width: 100%; text-align: left; padding: 20px 40px; box-sizing: border-box; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi { display: flex; flex-direction: column-reverse; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > span { font-size: 4vw; font-weight: bold; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi.green > span { color: #26982d; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi.red > span { color: #CD3E3E; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > .spacer { display: none; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > h1 { font-size: 2vw; margin-bottom: 0; }
.main.realtimeDisplayMainInternal.filled .xyz { width: 70vw; height: calc(100vh - 50px); max-width: none; padding: 0; }
.main.realtimeDisplayMainInternal.filled .xyz .chart { width: 100%; /*height: 50vh;*/ padding: 0 20px 20px; }
.main.realtimeDisplayMainInternal.filled .xyz .chart h2 { margin: 20px 0; }
.main.realtimeDisplayMainInternal.filled .xyz .chart #monthlyPlantResultsChart {display: block; width: 100%; max-height: 40vh;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap { display: flex; width: 100%; height: calc(50vh - 60px); text-align: left;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap > div { flex-basis: 50%; padding: 20px; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap > div > div { margin-bottom: 15px; }
.main.realtimeDisplayMainInternal.filled .xyz #downtimeEvents { background: rgba(205, 62, 62, 0.30); }
.main.realtimeDisplayMainInternal.filled .xyz #openActions { background: #D9E9F9; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .downActionTitle { font-size: 2vw; font-weight: 900; text-transform: uppercase; }
.main.realtimeDisplayMainInternal.filled .xyz #downtimeEvents .downActionTitle { background-color: #CD3E3E; color: transparent; text-shadow: 2px 2px 3px rgba(255,255,255,0.25); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
.main.realtimeDisplayMainInternal.filled .xyz #openActions .downActionTitle { background-color: var(--msgblu); color: transparent; text-shadow: 2px 2px 3px rgba(255,255,255,0.25); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .daItemName { font-weight: 700; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .daItemDetails { font-size: 0.8em; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .daItemFooter { font-weight: 700; font-size: 0.8em; font-style: italic; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap #downtimeEvents span.daItemDivider { color: #D35F5F; font-weight: bold; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap #openActions span.daItemDivider { color: #3EBF46; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 {font-weight: 700; text-align: center;width: 100%;flex-basis: 100%;/*height: 50vh;*/box-sizing: border-box;display: flex;align-content: center;justify-content: center;align-items: flex-start;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2.hidden {display: none;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 span#coTimer {letter-spacing: 1vw; color: var(--primary); font-size: 10vw;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 .kpi.red span#coTimer {animation: displayBlinker 1s linear infinite;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 .kpi {display: flex; flex-direction: column-reverse;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 .kpi h1{margin: 1vh;}
.main.realtimeDisplayMainInternal.filled #kpiRate.red{animation: displayBlinker 1s linear infinite;}

/*SSignature Pad*/
#peopleSignatureCanvas {text-align: center;display: block;margin-left: auto;margin-right: auto;}
#peopleSignatureCanvas canvas {border: 2px solid #bbbbbb;}
#peopleSignatureCanvas canvas:hover {border-color: #0D80A0;}


.scheduleMain{position: relative; padding: 0; height: 270px; max-height: 370px; width: 100%; display: grid; margin-bottom: 20px; box-sizing: border-box; overflow-x: auto; overflow-y: auto;}
.scheduleMain .row{position: relative; top: 30px; width: 100%; white-space: nowrap; border-top: #ccc solid 1px; text-align: left; box-sizing: border-box;}
.scheduleMain .row.second{top: 150px;}
.scheduleMain .row > div{position: absolute; display: inline-block;}
.scheduleMain .row > div .text{height: 100px; overflow: hidden; font-size: 12px; text-align: left; padding: 5px; box-sizing: border-box; white-space: nowrap; border-radius: 5px; box-sizing: border-box; white-space: nowrap; z-index: 1; border: 2px solid #999;}
.scheduleMain .row .record{margin: 5px 0 0 ;}
.scheduleMain .row .record:has(.candleOverlay){pointer-events: none;}
.scheduleMain .row .record:has(.candleOverlay):hover .text{border-color: var(--primary); opacity: 0.9;}
.scheduleMain .row .record .candleOverlay{pointer-events: auto; height: 20px; width: 100px; background: repeating-linear-gradient( -45deg, #84a7d3, #84a7d3 10px, #43699b 10px, #43699b 20px); position: absolute; left: -10px; top: 70px; border-radius: 3px; border: 1px solid #43699b; z-index: 3;}
.scheduleMain .row .record .candleOverlay:hover{cursor: pointer}
/*.scheduleMain .row > div{position: absolute;display: inline-block;border-radius: 10px; box-sizing: border-box; white-space: nowrap; z-index: 1;}*/
/*.scheduleMain .row > div .text{width: 100%; overflow: hidden; font-size: 12px; text-align: left; padding: 5px; box-sizing: border-box; white-space: nowrap;}*/
.scheduleMain .row > div .text:hover{cursor: pointer; border-color: #666666;}

.scheduleMain .row .label{position: sticky; left: 0; font-size: 13px; width: fit-content; text-align: center; padding: 5px 10px; box-sizing: border-box; white-space: nowrap; z-index: 2; background: var(--bg-primary); border-radius: 0 0 5px 5px; border: 1px solid #ccc; border-top-width: 0; display: flex; align-items: center; gap: 8px;}

.scheduleMain .rowBG{position: absolute; width: 100%; white-space: nowrap; font-size: 12px; box-sizing: border-box; padding: 0}
.scheduleMain .rowBG > div{display: inline-block;}
.scheduleMain .rowBG > div.odd{background-color: #eee;}
.scheduleMain .rowBG > div.today{background-color: var(--light);}
.scheduleMain .rowBG > div .date{position: sticky; top: 0; height: 31px; padding: 5px 0; z-index: 10; background: var(--bg-primary); border-bottom: 1px solid #ccc; box-sizing: border-box;}


.scheduleMain .row div.Created .text{background-color: #d5d5d5; color: var(--text-primary);}
.scheduleMain .row div.Planned .text{background-color: #84a7d3; color: var(--text-inverse);}
.scheduleMain .row div.Released .text{background-color: #597599; color: var(--text-inverse);}
.scheduleMain .row div.Active .text{background-color: var(--goodGreen); color: var(--text-inverse);}
.scheduleMain .row div.Completed .text{background-color: #93c596; color: var(--text-inverse);}
.scheduleMain .row div.Cancelled .text{background-color: var(--badRed);  color: var(--text-inverse);}

.scheduleMain .row div.tan .text{background-color: #d5d5d5; color: var(--text-primary);}
.scheduleMain .row div.lightBlue .text{background-color: rgba(132, 167, 211, 0.7); color: var(--text-inverse);}
.scheduleMain .row div.blue .text{background-color: rgba(89, 117, 153, 0.7); color: var(--text-inverse);}
.scheduleMain .row div.green .text{background-color: var(--goodGreen); color: var(--text-inverse);}
.scheduleMain .row div.lightGreen .text{background-color: #93c596; color: var(--text-inverse);}
.scheduleMain .row div.red .text{background-color: var(--badRed);  color: var(--text-inverse);}

.formRow .popUpBox.active .searchResult{width: 300px;}

.assistant h2{text-align: center;}
.assistant .recommendations{border: 1px solid #777; box-sizing: border-box; padding: 10px; border-radius: 3px; margin: 0 0 15px;}
.assistant .recommendations p{margin-top: 0; user-select: none;}
.assistant .assistantFeedback i{margin: 5px;}

/*--- V2  ---*/
.main{padding-top: 20px;}
.main.filled:not(.loginMain) section.pageHeader{padding-top: 0;}
/*.main.filled:not(.loginMain) section.pageHeader{align-content: flex-start; padding-top: 0;}*/
/*.main.filled:not(.loginMain) section.pageHeader h1{text-align: left;}*/
/*.main.filled section.pageHeader h2{text-align: left;}*/
/*.main.filled section.pageHeader h3{text-align: left;}*/
/*.main.filled section.pageHeader h4{text-align: left;}*/
.main.filled:not(.loginMain) section.pageHeaderV2{align-content: flex-start; padding-top: 0;}
.headerBar{box-shadow: none; background-color: var(--bg-header); border-bottom: 1px solid var(--primary); display: grid; grid-template-columns: 1fr auto 1fr; justify-content: space-between; overflow: unset;}
.headerBar .headerBar-outerSection{width: fit-content; display: flex; flex-wrap: nowrap;}
.headerBar .headerBar-outerSection.right{justify-self: right;}

/*section.block.short{column-gap: 10px; row-gap: 15px; justify-content: flex-start;}*/
/*section.block.short .shortBlockBtn {gap: 12px ; width: auto; flex: clamp(200px, 100% ,300px) 0 0; border-radius: 8px;font-size: 1rem; transition: background-color 100ms ease-in, border 100ms ease-in; display: flex;justify-content: flex-start;flex-direction: row;border: solid 1px #ffffff;align-items: center;min-height: 0;padding: 15px 20px;margin: 10px 5px;background-color: #ffffff; color: #273b61; max-width: unset;}*/
/*!*section.block.short .shortBlockBtn {gap: 15px; box-sizing: border-box; border-radius: 8px; transition: none; border: 1px solid #ffffff;}*!*/
/*section.block.short .shortBlockBtn div{display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px;}*/
/*section.block.short .shortBlockBtn div .shortBlockBtn-title{font-weight: 600;text-align: left;}*/
/*section.block.short .shortBlockBtn div .shortBlockBtn-subTitle{font-size: 0.8em; text-align: left;}*/
/*section.block.short .shortBlockBtn:hover {background-color: #DDE7FF; border: 1px solid #255697;}*/
/*section.block.short .shortBlockBtn i{font-size: 2em; padding: 0; width: 50px; box-sizing: border-box;}*/


/* Container - default grid for ungrouped items */
section.block.short.nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
}

/* When groups exist, switch to single column for group containers */
section.block.short.nav:has(.nav-group) {
    grid-template-columns: 1fr;
    gap: 0;
}

/* Group containers */
section.block.short.nav .nav-group {display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 13px; width: unset; min-width: unset; max-width: unset; }
section.block.short.nav .nav-group:last-child {margin-bottom: 0;}

/* Group headers with bottom border */
section.block.short.nav .nav-group-header {
    padding: 12px 5px;
    margin-bottom: 15px;
    font-size: 1.2em;
    font-weight: 600;
    color: #273b61;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #e2e8f0;
}
section.block.short.nav .nav-group-header i {
    font-size: 1.1em;
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    /*background: #f0f4ff;*/
    /*border-radius: 6px;*/
    /*color: #1c6ad1;*/
}

/* Items grid within each group */
section.block.short.nav .nav-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

/* Enhanced card styling with left border on hover */
section.block.short.nav .shortBlockBtn {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: unset;
    min-height: unset;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 200ms ease-in;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    gap: 12px;
    border: 1px solid #e2e8f0;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--bg-primary);
    color: #273b61;
    overflow: hidden;
}

/* Colored left border on hover - different for each group */
section.block.short.nav .shortBlockBtn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    transform: translateX(-4px);
    transition: transform 200ms ease-in;
}
section.block.short.nav .shortBlockBtn:hover::before {
    transform: translateX(0);
}

/* Card hover state */
section.block.short.nav .shortBlockBtn:hover {
    background-color: #f8faff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 86, 151, 0.1);
}

/* Icon styling */
section.block.short.nav .shortBlockBtn i {
    font-size: 1.8em;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 8px;
    flex-shrink: 0;
    padding: 0;
}

/* Text container */
section.block.short.nav .shortBlockBtn div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 3px;
    flex: 1;
}
section.block.short.nav .shortBlockBtn div .shortBlockBtn-title {
    font-weight: 600;
    text-align: left;
    font-size: 1em;
}
section.block.short.nav .shortBlockBtn div .shortBlockBtn-subTitle {
    font-size: 0.8em;
    text-align: left;
    color: #64748b;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 768px) {
    section.block.short.nav .nav-group-items {
        grid-template-columns: 1fr;
    }
}



#rmsg.login{padding: 8px; border-radius: 8px;}

.main.filled section.pageHeaderV2 .headerActions .links .linkObjects i{color: var(--progressBlue);}

.formRow:hover:not(.formRow.red):not(.formRow.green):not(.formRow.yellow):not(.formRow.addRecordRow):not(.formRow.head),
.formRow:hover:not(.formRow.red):not(.formRow.green):not(.formRow.yellow):not(.formRow.addRecordRow):not(.formRow.head) > div,
.formRow:hover:not(.formRow.red):not(.formRow.green):not(.formRow.yellow):not(.formRow.addRecordRow):not(.formRow.head) > div select:not(.excludeFormPopRow),
.formRow:hover:not(.formRow.red):not(.formRow.green):not(.formRow.yellow):not(.formRow.addRecordRow):not(.formRow.head) > div input:not(.excludeFormPopRow),
.formRow.ultraLight:hover:not(.formRow.red):not(.formRow.yellow):not(.formRow.green),
.formRow.ultraLight:hover:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div,
.formRow.ultraLight:hover:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div select,
.formRow.ultraLight:hover:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div input:not(.excludeFormPopRow)
{background-color: #e1e8f3;}

.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green),
.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div,
.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div select,
.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div input:not(.excludeFormPopRow)
{background-color: var(--bg-secondary); color: var(--text-primary);}

.apModalSelect{font-size: 1rem; margin-bottom: 10px; padding: 10px;}

/*.main .sectionBox.w100.actionPlanTasks{box-sizing: border-box; width: calc(100% - var(--actionPlanKpiWidth)); }*/
.main .sectionBox.w100.actionPlanTasks{box-sizing: border-box; width: 100%;}
.main .sectionBox.actionPlanKPIs{height: 200vh;}
.main .sectionBox.actionPlanKPIWrapper{width: var(--actionPlanKpiWidth); position: sticky; top: 165px; height: calc(100vh - 165px); overflow-y: auto;}
.main .sectionBox.actionPlanTaskContainer{display: grid; grid-template-columns: var(--actionPlanKpiWidth) calc(100% - var(--actionPlanKpiWidth)); gap: 10px; padding: 10px 0; width: 100%}

/*.main .sectionBox.w100.actionPlanTasks{left: var(--actionPlanKpiWidth); position: absolute; width: calc(100% - var(--actionPlanKpiWidth)); min-width: clamp(200px, 100%, 500px); box-sizing: border-box;}*/
/*.main .sectionBox.actionPlanKPIWrapper{width: var(--actionPlanKpiWidth); position: sticky; top: 165px; height: calc(100vh - 165px); overflow-y: auto;}*/


/*.main .sectionBox.actionPlanKPIs{width: var(--actionPlanKpiWidth); position: sticky; top: 165px; height: calc(100vh - 165px); overflow-y: auto;}*/
/*.main .sectionBox.actionPlanKPIs.smooth{transition: top 400ms;}*/
/*.main .sectionBox.actionPlanKPIs.active{top: 80px; height: calc(100vh - 100px);}*/
.actionPlanKPIWrapper{row-gap: 10px; position: sticky; top: 50px; height: calc(100vh - 80px); justify-content: flex-start; padding: 10px; overflow-y: auto;}

.main .sectionBox.collapsableV2ParentGrid{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0;}
.main .sectionBox.collapsableV2ParentGrid-3{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0;}
/*.main .sectionBox.collapsableV2 > div > div{padding-top: 20px;}*/
.collapsableOuter .sectionBox{background-color: transparent;}

/*.main .sectionBox.actionPlanTaskContainer{display: flex; flex-wrap: nowrap; gap: 10px; padding: 10px 0;}*/
.main .sectionBox.actionPlanGeneralTasks{position: sticky; bottom: 0; padding: 10px 0; display: flex; flex-direction: row; background-color: var(--bg-primary); border-top: solid 1px #ccc;}

section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2{
	display: flex; flex-direction: row; flex-wrap: nowrap; border-width: 0 0 2px 0; border-style: solid; border-color: #bbbbbb; padding: 6px; box-sizing: border-box; align-items: center; justify-content: center; gap: 6px; margin-top: 5px;
	i{font-size: 0.85rem; padding: 0}
	input[type='text']{border: none; padding: 0; margin: 0;}
}

.apKpiModal{width: 100%; display: grid; gap: 24px; grid-template-columns: 50% 50%; flex-wrap: wrap;}
.col-span-2{ grid-column: span 2;}
section.apDetail{margin-bottom: 0; padding: 0;}

.apScoreCardResult{display: flex; flex-direction: row; align-items: center; gap: 15px; justify-content: space-between;}
.apScoreCardResult.stacked{flex-direction: column-reverse; align-items: flex-end; gap: 0;}
.apScoreCardResult span:last-child{font-weight: 600;}
.apScoreCardResult span.green{color: var(--goodGreen);}
.apScoreCardResult span.red{color: var(--badRed);}
.apScoreCardResult span:first-child{font-size: 0.8rem; color: var(--text-secondary);}

.main.filled section.pageHeaderV2.actionPlanning .hx{align-items: unset;}
section.block.long.formOPbjAsBtn{
	width: 180px; margin: 0; padding: 0;
	& > div{margin: 0; padding: 0; height: unset; min-height: 0;}
	section.block.long.narrow > div{padding-left: 0; padding-right: 0; }

	.longBlock.formInput select{border-width: 1px;border-radius: 3px;padding: 8px 12px;}
	.longBlock.formInput input{border-width: 1px;border-radius: 3px;padding: 8px 12px;}
}

/*Action plan additional text boxes*/
section.block.long.smallFontSize .longBlock.formInput textarea{
	height: calc(var(--collapsableVerticalHeight) - 55px);
	transition: height var(--collapsableVerticalHeightTransition), font-size 200ms;
}

section.block.long.smallFontSize .longBlock.formInput textarea:focus-within{font-size: 1.15em;}

/*@position-try --bottom {*/
/*	margin: var(--padding) 0 0 var(--padding);*/
/*	inset-area: bottom;*/
/*}*/

.formRow.scrollableV2{margin: 0;}


@media print {
	.headerBar{display: none;}
}

.headerBar .btn.locationSelection{
	padding: 0;
	text-align: left;
	min-width: 80px;
}

.headerBar .btn.locationSelection > span{font-size: 0.7em; display: flex; flex-direction: column; gap: 0; height: 100%; justify-content: center; padding: 0 10px;}
.headerBar .btn.locationSelection > span.large{font-size: 0.9em;}
.headerBar .btn.locationSelection > span > span:first-child{font-weight: 600;}

.modal-content {
	padding: 0;
	display: flex;
	min-height: 300px;
	max-width: 800px;
}

.nav-column {
	flex: 1;
	border-right: 1px solid #e9ecef;
	overflow-y: auto;
	max-height: 300px;
}

.nav-column:last-child {
	border-right: none;
}

/* Hide columns based on modal level */
.modal.level-1 .nav-column:nth-child(2),
.modal.level-1 .nav-column:nth-child(3) {
	display: none;
}

.modal.level-2 .nav-column:nth-child(3) {
	display: none;
}

.column-header {
	background: #f8f9fa;
	padding: 8px 20px;
	font-weight: 600;
	font-size: 14px;
	color: #495057;
	border-bottom: 1px solid #e9ecef;
	position: sticky;
	top: 0;
	z-index: 10;
}

.column-toggle {
	display: none;
}

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	border-bottom: 1px solid #f1f3f4;
}

.nav-item:last-child {
	border-bottom: none;
}

.nav-link {
	display: block;
	padding: 15px 20px;
	color: var(--text-primary);
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	position: relative;
	text-align: left;
}

.nav-link:hover {
	background: #f8f9fa;
	color: #4a90e2;
	padding-left: 25px;
}

.nav-link.active {
	background: #e3f2fd;
	color: #4a90e2;
	border-left: 4px solid #4a90e2;
	font-weight: 500;
}

.nav-link.active:hover {
	padding-left: 20px;
}

.plant-name {
	font-weight: 500;
	font-size: 13px;
	/*margin-bottom: 4px;*/
}

.plant-info {
	font-size: 11px;
	color: #6c757d;
	line-height: 1.3;
}

.dept-name {
	font-weight: 500;
	font-size: 13px;
	/*margin-bottom: 2px;*/
}

.dept-count {
	font-size: 10px;
	color: #6c757d;
}

.resource-name {
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.resource-status {
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 10px;
	font-weight: 500;
}

.status-active {
	background: #d4edda;
	color: #155724;
}

.status-maintenance {
	background: #fff3cd;
	color: #856404;
}

.status-offline {
	background: #f8d7da;
	color: #721c24;
}

/* Generic visibility classes for dynamic content */
.dept-item {
	display: none;
}

.dept-item.visible {
	display: block;
}

.resource-item {
	display: none;
}

.resource-item.visible {
	display: block;
}

.breadcrumb {
	display: flex;
	background: #f8f9fa;
	padding: 15px 25px;
	border-top: 1px solid #e9ecef;
	font-size: 13px;
	color: #6c757d;
	justify-content: space-between;
	align-items: center;
}

.breadcrumb-path {
	font-weight: 500;
	color: #495057;
}

.select-btn {
	background: var(--msggre);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
	float: right;
	transition: background 0.2s ease;
}

.select-btn:hover {
	background: var(--msggrehi);
}

.select-btn:disabled {
	background: #6c757d;
	cursor: not-allowed;
}

.empty-state {
	padding: 40px 20px;
	text-align: center;
	color: #6c757d;
	font-style: italic;
	display: block;
}

.empty-state.hidden {
	display: none;
}

.demo-text {
	margin-bottom: 30px;
	color: #666;
	line-height: 1.5;
}

.selected-result {
	margin-top: 30px;
	padding: 20px;
	background: #e8f5e8;
	border-radius: 8px;
	border-left: 4px solid #28a745;
	display: none;
}

.result-label {
	font-weight: 600;
	margin-bottom: 5px;
	color: #155724;
}

.result-path {
	font-family: monospace;
	color: #155724;
	font-size: 14px;
}

.riskSystem{
	.matrix-container {
		background-color: white;
		/*padding: 20px;*/
		/*border: 3px solid #666;*/
		/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
	}

	table {
		width: 100%;
		border-collapse: collapse;
		font-size: 16px;
	}

	th, td {
		border: 1px solid var(--text-primary);
		text-align: center;
		padding: 5px 8px;
		position: relative;
	}

	.header-row th {
		background-color: #e0e0e0;
		font-weight: bold;
		color: var(--text-primary);
	}

	.consequence-header {
		font-size: 24px;
		padding: 20px;
		background-color: #e0e0e0;
	}

	.likelihood-header {
		background-color: #e0e0e0;
		font-weight: bold;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		padding: 20px 15px;
		font-size: 20px;
	}

	.likelihood-label {
		background-color: var(--bg-secondary);
		font-weight: bold;
		color: var(--text-primary);
		width: 100px;
	}

	.cell {
		width: 100px;
		height: 40px;
		font-weight: bold;
		line-height: 1.4;
	}

	.risk-label {
		display: block;
		font-size: 18px;
		margin-bottom: 5px;
	}

	.risk-score {
		display: block;
		font-size: 24px;
	}

	/* Risk level colors */
	.low {
		background-color: #92d050;
		color: #2a5016;
	}

	.moderate {
		background-color: #ffd966;
		color: #7f6000;
	}

	.high {
		background-color: #ff9933;
		color: #663300;
	}

	.extreme {
		background-color: #ff4444;
		color: white;
	}

	/* Likelihood numbers */
	.likelihood-num {
		display: block;
		font-size: 20px;
		color: #666;
		margin-top: 5px;
	}
}

/*================================================================================================================*/
/*  plainView1 styles for action planning*/
/*================================================================================================================*/
.main .sectionBox.noPadding.plainView1 {
    background: transparent;
    transition: padding-left 0.2s ease, height var(--collapsableVerticalHeightTransition);
    padding-left: 10px;
    padding-right: 10px;
    overflow-y: auto;
    height: 25vh;

    .formRow {border-width: 0 0 1px 0; padding-bottom: 0;}
    .formRow:first-of-type > div:first-of-type {display: none;}
    .formRow > div:nth-of-type(2) {width: 100% !important;}
    .formRow > div{
        background-color: transparent;
        border: none;
        padding-top: 10px;
        padding-bottom: 0;
    }
    div:has(.drag-handle){width: auto !important;}
}

.main .activeGrow:hover .sectionBox.noPadding.plainView1{height: 38vh;}

.main .sectionBox.collapsableV2 > div > div:not(.noAdditionalSpace){
    position: relative;
    padding-right: 0;
}
.main .collapsableV2.active .sectionBox.noPadding.plainView1{
    padding-left: 0;
    left: -5px;
    position: absolute;
}

.plainView1 .formRow {
    border-bottom: 1px solid #d0d0d0;
    background: transparent !important;
    padding: 3px 0;
    display: flex;
    align-items: center;
    /*min-height: 32px;*/
    transition: border-color 0.2s ease;
}

.plainView1 .formRow:hover div{
    background: transparent !important;
}

.plainView1 .formRow > div.ra.center{
    text-align: right;
}

.plainView1 .formRow.head {
    border-bottom: none;
    font-weight: 500;
    color: #1976d2;
    padding: 5px 0;
    margin-bottom: 2px;
    font-size: 15px;
}

.plainView1 .formRow.lightGreen {
    border-bottom: 1px solid #4CAF50;
}

.plainView1 textarea {
    border: none !important;
    background: transparent !important;
    outline: none;
    resize: none;
    padding: 2px 4px;
    width: 100%;
    /*font-size: 14px;*/
    /*line-height: 1.4;*/
    /*height: 24px !important;*/
    overflow: hidden;
}

.plainView1 .formRow:focus-within {
    border-bottom-color: #1976d2 !important;
    border-bottom-width: 2px !important;
    margin-bottom: -1px;
}

.plainView1 .fa-plus {
    color: #4CAF50;
    font-size: 14px;
}

.plainView1 .fa-xmark {
    color: #f44336;
    opacity: 0;
    font-size: 14px;
    transition: opacity 0.2s ease;
}

.plainView1 .formRow:has(textarea:focus) .fa-xmark,
.plainView1 .formRow:hover .fa-xmark
{
    opacity: 1;
    color: #f44336;
}

@media (max-width: 768px) {
	.button-group {
		flex-direction: column;
		align-items: center;
	}

	.modal {
		width: 95%;
		margin: 10px;
	}

	.modal-content {
		flex-direction: column;
		min-height: auto;
	}

	.nav-column {
		border-right: none;
		border-bottom: 1px solid #e9ecef;
		max-height: none;
	}

	.nav-column:last-child {
		border-bottom: none;
	}

	/* Mobile collapsible functionality */
	.column-header {
		cursor: pointer;
		user-select: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: background 0.2s ease;
	}

	.column-header:hover {
		background: #e9ecef;
	}

	.column-toggle {
		display: block;
		font-size: 12px;
		transition: transform 0.3s ease;
		color: #6c757d;
	}

	.nav-column.collapsed .column-toggle {
		transform: rotate(180deg);
	}

	.nav-column .nav-list,
	.nav-column .empty-state {
		max-height: 200px;
		overflow-y: auto;
		transition: all 0.3s ease;
	}

	.nav-column.collapsed .nav-list,
	.nav-column.collapsed .empty-state {
		max-height: 0;
		overflow: hidden;
		padding: 0;
		border: none;
	}

	.nav-column.collapsed .empty-state {
		padding: 0;
	}

	/* Auto-expand when items are visible */
	.nav-column.has-visible-items {
		max-height: none;
	}

	.nav-column.has-visible-items .nav-list {
		max-height: 250px;
	}
}

/* IOID Status Legend for Action Planning (Phase 3 - t-3766) */
.ioid-status-legend {
	margin-top: 10px;
	padding: 10px 0;
	display: flex;
	gap: 20px;
	font-size: 0.9em;
	border-top: 1px solid #ddd;
}

.ioid-status-legend .legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ioid-status-legend .legend-color {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 2px;
}

/* Section Navigation Link Styling */
.section-nav-link {
	font-size: 0.9em;
	margin-left: 10px;
	text-decoration: none;
	color: #007bff;
	transition: color 0.2s ease;
}

.section-nav-link:hover {
	color: #0056b3;
	text-decoration: underline;
}