:root{
	--ticketWidth: 4in;
	--ticketHeight: 0.9in;
	--mainBGDark: #262626;
	--bgDev: #262626;
    --textareaBG: #1e1e1e;
	--mainBGDarkHeader: #171717;
	--mainBGDarkHeaderHover: #202020;
	--mainBGDarkText: #f6f6f6;
    --defaultTextColor: #f6f6f6;
    --formBtnHover: #3a3a3a;
	--mainBGDarkTextGold: #d09d1f;
	--mainBGDarkBorder: #555555;
	--lightGreen: #293c29;
	--light: #3f3f3f;
	--ultraLight: #363636;
	--collapsableOuterBGColor-active: #272727;
	--disabledText: #d8d8d8;
	--badRed: #b05555;
	--badRedForm: #3d2020;

	/* Dark theme overrides for chatBox.css variables */
	--border-color: #555555;
	--header-bg-color: #2a2a2a;
	--header-title-color: #f6f6f6;
	--message-tags-bg-color: #2a2a2a;
	--message-body-bg-color: #1e1e1e;
	--in-msg-bg-color: #4a4a4a;
	--out-msg-bg-color: #3a6d6c;
	--sub-title-color: #d8d8d8;
	--footer-bg-color: #262626;
	--initials-bg-color: #3a6d6c;
	--initials-color: #ffffff;
	--comment-thread-bg-color: #2a2a2a;
	--comment-thread-text-color: #f6f6f6;
	--comment-thread-sub-title-color: #999999;
	--message-edit-bg-color: #363636;
	--message-edit-text-color: #d8d8d8;
	--message-edit-border-color: #555555;
	--select-option-bg-color: #262626;

	/* Dark theme for new thread functionality */
	--new-thread-bg-color: #2a2a2a;
	--new-thread-border-color: #555555;
	--new-thread-text-color: #d8d8d8;
	--new-thread-hover-bg-color: #3a6d6c;
	--new-thread-secondary-bg-color: #4a4a4a;
	--new-thread-secondary-hover-bg-color: #5a5a5a;
	--new-thread-placeholder-color: #888888;
	--new-thread-error-color: #ff6b6b;
	--new-thread-error-bg-color: rgba(255, 107, 107, 0.15);
	--thread-item-border-color: #555555;
	--thread-item-hover-bg-color: #363636;
	--thread-item-title-color: #f6f6f6;
	--thread-item-meta-color: #999999;

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

@media print {
	body {background: none !important;}
}

.popUpBox{background-color: var(--mainBGDark); color: var(--mainBGDarkText);}

.circle.green{color: var(--ultraLight);}

body{
	background-color: var(--mainBGDark);
	background-repeat: repeat;
	font-size: 0;
	margin: 0;
	padding: 0;
	position: relative;
	color: var(--mainBGDarkText);
}

a{color: var(--mainBGDarkTextGold);}

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

.headerBar .btn i{font-size: 1em;}
.headerBar .btn.noIcon i { display: none; }

.formRow > div{padding: 8px 4px 12px;}

/*--- Header inspirational carousel ---*/
.hb-inspire{display:inline-block;position:relative;overflow:hidden;height:50px;width:320px;max-width:320px;vertical-align:top;line-height:50px;color:var(--mainBGDarkTextGold);font-size:12px;font-style:italic;opacity:.7;padding:0 12px;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;}
.hb-inspire span{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.hb-inspire:not(.static) span{position:absolute;left:12px;right:12px;height:50px;line-height:50px;}
/* 2-item carousel (60s cycle) */
.hb-inspire.items-2 .hb-inspire-a{animation:hb2A 60s infinite;}
.hb-inspire.items-2 .hb-inspire-b{animation:hb2B 60s infinite;}
@keyframes hb2A{0%,45%{transform:translateY(0)}50%,95%{transform:translateY(-100%)}100%{transform:translateY(0)}}
@keyframes hb2B{0%,45%{transform:translateY(100%)}50%,95%{transform:translateY(0)}100%{transform:translateY(100%)}}
/* 3-item carousel (90s cycle) */
.hb-inspire.items-3 .hb-inspire-a{animation:hb3A 90s infinite;}
.hb-inspire.items-3 .hb-inspire-b{animation:hb3B 90s infinite;}
.hb-inspire.items-3 .hb-inspire-c{animation:hb3C 90s infinite;}
@keyframes hb3A{0%,29%{transform:translateY(0)}33%,96%{transform:translateY(-100%)}100%{transform:translateY(0)}}
@keyframes hb3B{0%,29%{transform:translateY(100%)}33%,62%{transform:translateY(0)}66%,96%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes hb3C{0%,62%{transform:translateY(100%)}66%,96%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media(max-width:900px){.hb-inspire{display:none;}}

/*--- RMC new general design ---*/
.headerBar {background-color: var(--mainBGDarkHeader); display: grid; grid-template-columns: auto auto 1fr auto; overflow: unset;}
.headerBar .headerBar-outerSection{width: fit-content; display: flex; flex-wrap: nowrap;}
.headerBar .headerBar-outerSection.right{justify-self: right;}
.headerBar .btn {color: var(--mainBGDarkTextGold);}
.navLeftActions {display: none;}
.main {padding: 0;}
.main.filled > div {max-width: 100%;}
.main.filled > div,
.main.filled > form,
section,
.formRow > div
{background-color: var(--mainBGDark);}

.navLeft,
.navLeft > .btn,
.navLeft .childBtn .btn
{background-color: var(--mainBGDarkHeader); color: var(--mainBGDarkTextGold);}

.navLeft .btn .expand:hover
{background-color: var(--mainBGDark);}

.navTooltip{background-color: var(--mainBGDarkHeader); color: var(--mainBGDarkTextGold);}
.navTooltip .navTooltipHeader{border-bottom-color: rgba(255,255,255,0.1);}
.navTooltip .navTooltipHeader:hover,
.navTooltip .navTooltipChild:hover{background-color: var(--mainBGDarkHeaderHover); color: #fff;}
.navTooltip .navTooltipChild{color: var(--mainBGDarkTextGold);}

section.block.long .longBlock.btn
{background-color: var(--mainBGDarkHeader); color: var(--mainBGDarkTextGold);}

section.block.long .longBlock.btn:hover
{background-color: var(--mainBGDarkHeaderHover);}

/* Target sticky divs that have another sticky div after them */
.actionPlan .formRow > div.sticky:has(~ div.sticky) {
    border-right-width: 0;
}

/* Target all non-sticky divs */
.actionPlan .formRow > div:not(.sticky):not(.stickyAction) {
    border-right-width: 0;
}

/* Target the last sticky div (one that has NO sticky siblings after it) */
.actionPlan .formRow > div.sticky:not(:has(~ div.sticky)) {
    border-right-width: 1px;
}

.actionPlan .formRow > div i.fa-angle-down{display: none;}

/* Remove select dropdown arrow */
.actionPlan select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.actionPlan input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(96%);
}

.actionPlan .formRow > div.center{
    .selectDependantV2 span{justify-content: center;}
}

.actionPlan .horizontalScrollable .formRow > div.headerFilterFlexBox{
    justify-content: flex-start;
    gap: 8px;
}

/* Generic: remove internal vertical column borders from FormV2 tables (keep outer edges) */
.noBorderVertical .formRow > div{border-right-width:0;}
.noBorderVertical .formRow > div:last-of-type{border-right-width:1px;}

.formRow.head,
.formRow > div,
.formRow > div:first-child,
.formRow > input[type="hidden"]:first-child + div,
.formRow
{color: var(--mainBGDarkText); border-color: var(--mainBGDarkBorder);}

.formRow input[type='text'],
.formRow input[type='password'],
.formRow input[type='number'],
.formRow input[type='date'],
.formRow input[type='time'],
.formRow input[type='datetime-local'],
.formRow textarea,
.formRow select,
section.block.long .longBlock.formInput input[type='text'], section.block.long .longBlock.formInput input[type='number'], section.block.long .longBlock.formInput input[type='password'], section.block.long .longBlock.formInput input[type='date'], section.block.long .longBlock.formInput input[type='time'], section.block.long .longBlock.formInput input[type='datetime-local'], section.block.long .longBlock.formInput textarea, .formRow .popUpBox textarea, .formRow .popUpBox input:not(.excludeFormPopRow), .formRow .popUpBox select, section.block.long .longBlock.formInput select
{background-color: var(--mainBGDark); color: var(--mainBGDarkText);}

.formRow.lightGreen,
.formRow.lightGreen > div,
.formRow.lightGreen > div select,
.formRow.lightGreen > div input,
.formRow.lightGreen > div textarea,
section.block > div
{color: var(--mainBGDarkText);}
.formRow.lightGreen > div textarea{background-color: var(--lightGreen);}


.formRow.ultraLight:not(.formRow.red):not(.formRow.green) > div,
.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div
{color: #FFFFFF; }

/* Ensure select text color is white in alternating row tables */
.formRow.altColorTextOnly:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div select {
    color: var(--mainBGDarkText);
}

.formRow .formLink i{color: var(--mainBGDarkTextGold);}

.navLeft .btn .primary:hover,
.navLeft .btn .primary.active,
.navLeft .childBtn .btn:hover,
.headerBar .btn:not(.noHover):hover
{background-color: var(--mainBGDark);}


/* Track */
::-webkit-scrollbar-track {
	background: #333333;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #ccc;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #aaa;
}


/*--- Operations Dashboard ---*/
.main.filled section#opDashHead {overflow: visible;}
.main.filled section#opDashHead h1 br {display: none;}


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: #333333; 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: #666666; 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: #4d8fd9;}
section.block.short.kpiBlockV2 .kpiBox.flashRed h1{color: #ffffff;}
section.block.short.kpiBlockV2 .kpiBox.flashRed h4{color: #c7c7c7;}
section.block.short .kpiBoxV2 span{font-size: clamp(1.2rem, 3.5vw, 1.7rem);}

.labelPrintQR{width: var(--ticketWidth); 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 10mm; box-sizing: border-box;}


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

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

.popUpBox{border-radius: 8px;}
.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);}


section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2{
	display: flex; flex-direction: row; flex-wrap: nowrap; border-width: 1px; border-style: solid; border-color: var(--mainBGDarkBorder); border-radius: 6px; padding: 8px; box-sizing: border-box; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; background-color: var(--textareaBG, var(--mainBGDark));
	i{font-size: 0.85rem; padding: 0; color: var(--mainBGDarkText); opacity: 0.6;}
	input[type='text']{border: none; padding: 0; margin: 0; background: transparent; color: var(--mainBGDarkText);}
}

.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: 30px;}

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;}

#kpiQtyTarget { font-size: 1rem; color: #666666; }
.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: #ffffff;}
	99% {background-color: #ffffff;}
}

.poCU_PrintLabels_001{font-size: 0.8em;}

.rfTagRetrieve {width: 500px; height: 200px; border-radius: 20px; display: inline-flex; margin: 30px 0 0; padding: 20px; background-color: #FFFFFF; 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: #FFFFFF; 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: #333333; 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); }

.main.filled section.pageHeaderV2 .links .linkObjects:hover{background-color: var(--mainBGDarkHeaderHover);}
.main.filled section.pageHeaderV2{border-bottom: 1px solid var(--mainBGDarkBorder); margin-bottom: 10px;}

.searchResult > div{background-color: var(--mainBGDark); color: var(--mainBGDarkText); border-color: var(--mainBGDarkBorder);}
.searchResult div:hover:not(.noLink){background-color: var(--mainBGDarkHeaderHover);}

.collapsableOuter section.block.long.narrow.form{background-color: transparent;}

.formRow.head > div > div.searchResult.filterHeadResult{box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);}
.searchResult,
.formRow > div > div.actionFunctionResult
{
	& > div { background-color: var(--mainBGDark);border-bottom-color: var(--mainBGDarkBorder); color: var(--mainBGDarkText);}
	div:hover:not(.noLink) {background-color: var(--mainBGDarkHeaderHover);}
}

.formRow > div > div.actionFunctionResult:popover-open, .searchResult:popover-open{
	border: 1px solid var(--mainBGDarkBorder);
	border-radius: 5px;
}

/* Header menu / Favorites popover welcome block — framework assumes light theme (#fff on hover),
   which washes out RMC's near-white text. Keep the dark surface in both states. */
.headerBar div.searchResult.filterHeadResult > div.headerMenuWelcome,
.headerBar div.searchResult.filterHeadResult > div.headerMenuWelcome:hover{
	background-color: var(--mainBGDark); color: var(--mainBGDarkText);
}
.headerBar div.searchResult.filterHeadResult > div.headerMenuWelcome span{color: var(--mainBGDarkText);}
.headerBar div.searchResult.filterHeadResult > div.headerMenuWelcome.noLink{border-bottom: 1px solid var(--mainBGDarkBorder);}

/* Projects grid container */
.projects-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* Individual project item styling */
.project-item {
    background-color: #3a3a3a;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #4a4a4a;
}

.project-item > section{background-color: transparent;}

/* Environment button colors */
.env-sandbox { 
    background-color: #8b6914 !important;
    color: #fff !important;
    border-radius: 6px !important;
    border: 1px solid #c8961f !important;
}
.env-dev { 
    background-color: #4a5d7a !important;
    color: #fff !important;
    border-radius: 6px !important;
    border: 1px solid #7690b6 !important;
}
.env-production { 
    background-color: #447547 !important;
    color: #fff !important;
    border-radius: 6px !important;
    border: 1px solid #70af74 !important;
}
.env-management { 
    background-color: #6b4c4c !important;
    color: #fff !important;
    border-radius: 6px !important;
    border: 1px solid #976e6e !important;
}

/* Dark theme tab styles override */
.tab-container {
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid #555;
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background: #2a2a2a;
    color: #ddd;
    border: 1px solid #555;
    border-bottom: none;
    margin-right: 2px;
    border-radius: 4px 4px 0 0;
    transition: background 0.3s;
}

.tab-button.active {
    background: #353535;
    color: #fff;
    font-weight: bold;
}

.tab-button:hover {
    background: #3a3a3a;
}

.tab-content {
    padding: 30px 0 20px;
    background: transparent;
    color: #ddd; /* Ensure text is visible */
}

.tab-pane {
    display: none;
    width: 100%;
    color: #ddd; /* Ensure content text is visible */
}

.tab-pane.active {
    display: inline-flex;
}

.formBtn.secondaryBtn.chartNarrow{
    background-color: var(--collapsableOuterBGColor-active);
    color: var(--mainBGDarkText);
    border: 1px solid var(--mainBGDarkBorder);
    padding: 8px;
    font-size: 0.6em;
    &:hover{background-color: var(--collapsableOuterBGColor-active-hover);}
}

.tab-container-switch .tab-content{padding: 12px 0 0 0;}
.tab-container-switch .tab-button{font-size: 0.85em; padding: 4px 8px;}
.collapsibleContent{background-color: var(--mainBGDark);}

/* Override height restriction for project tab containers */
.project-item section.block.long.narrow > div {
    height: auto !important;
    min-height: unset !important;
}

.project-item section.block.long.narrow .tab-container {
    height: auto !important;
}

.project-item section.block.long.narrow .tab-content,
.project-item section.block.long.narrow .tab-pane {
    height: auto !important;
    min-height: unset !important;
}

.formV2MenuHelp{
    background-color: var(--light);
    border: var(--mainBGDarkBorder);
}



/* Container - default grid for ungrouped items */
section.block.short.nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    background: var(--mainBGDarkHeaderHover);
    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: 30px; 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: var(--mainBGDarkText);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--mainBGDarkBorder);
}
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 var(--mainBGDarkBorder);
    align-items: center;
    padding: 15px 20px;
    background-color: var(--collapsableOuterBGColor-active);
    color: var(--mainBGDarkText);
    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(--mainBGDarkTextGold);
    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: var(--ultraLight);
    border-color: var(--mainBGDarkTextGold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(208, 157, 31, 0.08);
}

/* 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: var(--mainBGDarkBorder);
    line-height: 1.3;
}

.formV2MenuHelp .separator{background-color: #7e7e7e;}

.formRow > div > div.actionFunctionResult, .formRow.head > div > span > div.searchResult.filterHeadResult{box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.5)
}

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

/* SOP Content Display Styling */
.sopContentDisplay {
    margin-bottom: 20px;
    font-size: 16px;
    text-align: left;
}

.sopContentBody {
    padding: 30px;
    background: var(--light);
    border: 2px solid var(--mainBGDarkTextGold);
    border-radius: 8px;
    line-height: 1.6;
    color: var(--mainBGDarkText);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    position: relative;
}

.sopContentBody::before {
    content: "📄 SOP Document";
    display: block;
    font-size: 0.85em;
    font-weight: bold;
    color: var(--mainBGDarkTextGold);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mainBGDarkBorder);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: var(--mainBGDarkTextGold);
}

.markdown-content h1 { font-size: 2em; }
.markdown-content h2 { font-size: 1.5em; }
.markdown-content h3 { font-size: 1.25em; }

.markdown-content p {
    margin-bottom: 1em;
    color: var(--mainBGDarkText);
}

.markdown-content ul,
.markdown-content ol {
    margin-left: 2em;
    margin-bottom: 1em;
    color: var(--mainBGDarkText);
}

.markdown-content li {
    margin-bottom: 0.5em;
}

.markdown-content code {
    background: var(--ultraLight);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    color: var(--mainBGDarkTextGold);
}

.markdown-content pre {
    background: var(--ultraLight);
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1em;
    border: 1px solid var(--mainBGDarkBorder);
}

.markdown-content pre code {
    background: transparent;
    padding: 0;
}

.markdown-content blockquote {
    border-left: 4px solid var(--mainBGDarkTextGold);
    padding-left: 15px;
    color: var(--disabledText);
    margin-left: 0;
    margin-bottom: 1em;
    font-style: italic;
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.markdown-content table th,
.markdown-content table td {
    padding: 8px 12px;
    border: 1px solid var(--mainBGDarkBorder);
    text-align: left;
}

.markdown-content table th {
    background: var(--ultraLight);
    color: var(--mainBGDarkTextGold);
    font-weight: bold;
}

.markdown-content a {
    color: var(--mainBGDarkTextGold);
    text-decoration: underline;
}

.markdown-content a:hover {
    opacity: 0.8;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid var(--mainBGDarkBorder);
    margin: 1.5em 0;
}

/* Stories Tab Content */
.popUpBox.mainEmulate .stories-tab-content {
    font-size: 14px;
    color: var(--mainBGDarkText);
}

/* Markdown Preview Container */
.popUpBox.mainEmulate .sectionBox.markdown-preview-container {
    padding: 20px;
    background: var(--light);
    border: 1px solid var(--mainBGDarkBorder);
    border-radius: 4px;
    min-height: 200px;
    height: 45vh;
    overflow-y: auto;
    max-height: 600px;
    color: var(--mainBGDarkText);
    font-size: 16px;
    text-align: left;
}

.markdown-preview-container h1,
.markdown-preview-container h2,
.markdown-preview-container h3 {
    margin-top: 0;
    margin-bottom: 0.2em;
    color: var(--mainBGDarkTextGold);
}

.markdown-preview-container ul,
.markdown-preview-container ol {
    margin-left: 20px;
    /*margin-bottom: 1em;*/
    color: var(--mainBGDarkText);
}

.markdown-preview-container code {
    background: var(--ultraLight);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--mainBGDarkTextGold);
}

.markdown-preview-container pre {
    background: var(--ultraLight);
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1em 0;
    border: 1px solid var(--mainBGDarkBorder);
}

.markdown-preview-container pre code {
    background: transparent;
    padding: 0;
}

.markdown-preview-empty {
    color: #999;
    font-style: italic;
}

.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div input:not(.excludeFormPopRow){
    color: var(--mainBGDarkText);
}

/* Dark theme red row overrides */
.formRow.red > div, .formRow.red > div select, .formRow.red > div input,
.formRow.yellow.red > div, .formRow.yellow.red > div select, .formRow.yellow.red > div input
{color: var(--mainBGDarkText);}

.formRow:not(.altColorTextOnly) > div.cellColor-red,
.formRow:not(.altColorTextOnly) > div.cellGray.cellColor-red
{background-color: #3d2020; color: var(--mainBGDarkText);}

/* Yellow highlight rows: in textOnly mode every cell is tagged .cellGray (light italic
   disabledText) whose specificity beats .formRow.yellow > div, leaving illegible gray text on
   the #fff6a3 background. Restore a readable dark amber + kill the italic on the inner cells/links. */
.formRow.yellow:not(.altColorTextOnly) > div.cellGray,
.formRow.yellow:not(.altColorTextOnly) > div.cellGray select,
.formRow.yellow:not(.altColorTextOnly) > div.cellGray input,
.formRow.yellow:not(.altColorTextOnly) > div.cellGray .formLink,
.formRow.yellow:not(.altColorTextOnly) > div.cellGray .formLink a,
.formRow.yellow:not(.altColorTextOnly) > div.cellGray .formLink i,
.formRow.yellow:not(.altColorTextOnly) > div.cellGray a
{color: #7f6000; font-style: normal;}

/* Knowledge Base content editor - tall textarea */
section.block.long .longBlock.formInput textarea#content { height: 400px; }

/* Knowledge Base view - content box styling */
.kb-content-box {
	padding: 25px 30px;
	background: var(--light);
	border: 1px solid var(--mainBGDarkBorder);
	border-radius: 6px;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}

.main .sectionBox.collapsableOuter{ border: 1.5px solid #444; box-shadow: 0 0px 6px rgba(0, 0, 0, 0.35);}
.main .sectionBox.collapsableOuter .collapsableHeader{
    margin: 8px 0;
}
.main .sectionBox.collapsableOuter .collapsableHeader span:first-of-type:hover{
    cursor: pointer;
}

/* Global Search Bar - center in header */
.globalSearchBar { display: flex; align-items: center; height: 50px; max-width: 500px; margin: 0 auto; }
.globalSearchBar .leo-search-btn { border-radius: 0 5px 5px 0; border-left: 1px solid rgba(255,255,255,0.15); position: relative; }
.globalSearchBar .leo-search-btn .hb-badge { position: absolute; top: 2px; right: 2px; font-size: 9px; min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; }
.globalSearchBar .search-button:first-of-type { border-radius: 0; }

/* Global Search - Mega Search Dropdown */
.globalSearchBar .searchResult[popover],
.globalSearchBar .searchResult:popover-open {
    width: clamp(320px, 50vw, 600px);
    max-height: 400px;
    left: anchor(center) !important;
    transform: translateX(-50%);
}
.globalSearchBar .searchResult > div.noLink {
    background-color: #1a1a1a;
    border-bottom: none;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 11px;
    color: var(--mainBGDarkTextGold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: default;
}
.globalSearchBar .searchResult > div.noLink:first-child {
    padding-top: 8px;
}
.globalSearchBar .searchResult > div:not(.noLink) {
    padding: 8px 12px 8px 32px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.globalSearchBar .searchResult .srMeta {
    font-size: 11px;
    color: #999;
}

/* Processing overlay - dark theme */
#processingOverlay,
#storyProcessingOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#processingOverlay .overlay-content,
#storyProcessingOverlay .overlay-content {
    background: #2a2a2a;
    padding: 60px 80px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
#processingOverlay .overlay-logo,
#storyProcessingOverlay .overlay-logo {
    width: 200px;
    height: auto;
    margin: 0 auto 20px;
    display: block;
    animation: logoPulse 1.2s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { transform: scale(0.95); }
    50% { transform: scale(1); }
}
#processingOverlay p,
#storyProcessingOverlay p {
    margin: 10px 0 0;
    font-size: 18px;
    color: #e0e0e0;
}
#processingOverlay .overlay-sub,
#storyProcessingOverlay .overlay-sub {
    font-size: 14px;
    color: #999;
}
.overlay-continue-btn {
    display: inline-block;
    margin-top: 20px;
    color: #7da8c9;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.overlay-continue-btn:hover {
    text-decoration: underline;
    color: #a0c4e0;
}
.story-lock-badge {
    color: #f0ad4e;
    margin-right: 5px;
}

/* Login Card Styles (Dark Theme) */
body:has(.loginMain){background-color: var(--mainBGDarkHeader);}
.main.loginMain > div{background-color: transparent !important; padding-bottom: 0 !important;}
.loginCard{background: var(--mainBGDark); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.4); padding: 20px 30px 30px; width: 100%; box-sizing: border-box; color: var(--mainBGDarkText);}
.loginCard .pageHeader{padding-top: 20px !important; color: var(--mainBGDarkText);}
.loginCard .sectionBox, .loginCard .card{background: transparent; box-shadow: none; border: none; padding: 0; color: var(--mainBGDarkText);}
.loginFooterLinks{text-align: center; padding: 18px 0 0; font-size: 13px; color: #888;}
.loginFooterLinks a{color: #7da8c9; text-decoration: none;}
.loginFooterLinks a:hover{text-decoration: underline;}
.loginFooterLinks span{margin: 0 8px; color: #555;}

section.block.long.narrow .longBlock .kpiBox .action {
    font-size: 0.8em;
}


section.block.long .longBlock.formInput input[type='text'], 
section.block.long .longBlock.formInput input[type='number'], 
section.block.long .longBlock.formInput input[type='password'],
 section.block.long .longBlock.formInput input[type='date'], 
 section.block.long .longBlock.formInput input[type='time'], 
 section.block.long .longBlock.formInput input[type='datetime-local'], 
 section.block.long .longBlock.formInput textarea, 
 .formRow .popUpBox textarea, 
 .formRow .popUpBox input:not(.excludeFormPopRow), 
 .formRow .popUpBox select, 
 section.block.long .longBlock.formInput select,
section.block.long .longBlock.formInput textarea, 
.formRow .popUpBox textarea{
    border-width: 1px;
    border-radius: 6px;
    background-color: var(--textareaBG, var(--mainBGDark));
    margin-bottom: 6px;
    border-color: var(--mainBGDarkBorder);
    padding: 8px;

}

input[type="checkbox"]{
    width: 18px;
    height: 18px;
    border: 1px solid var(--mainBGDarkBorder);
    border-radius: 4px;
    background-color: var(--mainBGDark);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
}
input[type="checkbox"]:checked {
    background-color: var(--mainBGDarkTextGold);
    border-color: var(--mainBGDarkTextGold);
}
.riskMatrix table{width:100%;border-collapse:collapse}
.riskMatrix th{padding:8px;text-align:center;font-size:11px;background:#3a3a3a;color:#ccc;border:1px solid #555}
.riskMatrix .likelihood-header{writing-mode:vertical-rl;text-orientation:mixed;padding:15px 10px;font-size:16px;background:#333;color:#aaa}
.riskMatrix .consequence-header{font-size:16px;padding:12px;background:#333;color:#aaa}
.riskMatrix .cell{width:80px;height:36px;text-align:center;font-weight:600;font-size:11px;border:1px solid #444}
.riskMatrix .low{background:#2e7d32;color:#c8e6c9}
.riskMatrix .moderate{background:#f9a825;color:#3e2723}
.riskMatrix .high{background:#e65100;color:#fff3e0}
.riskMatrix .extreme{background:#c62828;color:#fff}
.riskMatrix .likelihood-label{font-size:11px;text-align:center;padding:6px;background:#333;color:#ccc;border:1px solid #555}
.riskMatrix .likelihood-num{font-size:16px;font-weight:700;display:block}
.formRow.altColorTextOnly > div.cellColor-green{background-color:#c8e6c9 !important;color:#2a5016 !important}
.formRow.altColorTextOnly > div.cellColor-yellow{background-color:#fff9c4 !important;color:#7f6000 !important}
.formRow.altColorTextOnly > div.cellColor-orange{background-color:#ffcc80 !important;color:#663300 !important}
.formRow.altColorTextOnly > div.cellColor-red{background-color:#ffcdd2 !important;color:#8b0000 !important}

/* Notification Dropdown - Dark Theme */
.notificationDropdown{background:var(--mainBGDark);box-shadow:0 4px 12px rgba(0,0,0,0.5);border:1px solid var(--mainBGDarkBorder);}
.notificationDropdownItem{color:var(--mainBGDarkText);border-bottom-color:var(--mainBGDarkBorder);}
.notificationDropdownItem:hover{background:var(--ultraLight);}
.notifDot{background:var(--mainBGDarkTextGold);}
.notifTime{color:#999;}
.notificationDropdownFooter{border-top-color:var(--mainBGDarkBorder);}
.notificationDropdownFooter a{color:var(--mainBGDarkTextGold);}
.notificationDropdownLoading{color:#999;}

input[type="checkbox"]:checked::after {    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 10px;
    border: solid var(--mainBGDark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* Action Plan project KPI pills */
.apKpiPill{display:inline-flex;align-items:center;gap:12px;padding:5px 10px 5px 14px;border-radius:500px;background-color:#2e2e2e;color:#b8921a;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;user-select:none;border:1px solid #484848;}
.apKpiPill:hover{background-color:#383838;color:#d4a82a;border-color:#585858;}
.apKpiPill:hover .apKpiPill-count{background-color:#a07a14;}
.apKpiPill-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:500px;background-color:#b8921a;color:#1a1a1a;font-size:13px;font-weight:700;box-sizing:border-box;}
.apKpiPill.apKpiPill-active{background-color:#d09d1f;color:#1a1a1a;border-color:#d09d1f;}
.apKpiPill.apKpiPill-active:hover{background-color:#e0ad2c;color:#1a1a1a;border-color:#e0ad2c;}
.apKpiPill.apKpiPill-active .apKpiPill-count{background-color:#262626;color:#d09d1f;}
.apKpiRow{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:6px;padding:6px 0;overflow-x:auto;}

.formBtn{
    border-radius: 8px;
}